Radix Primitives 发布及其变更日志。
onValueCommit 的错误。– #3832Escape 时 Toast 移除未聚焦 Toast 的问题。– #4005Tooltip.Content 子元素被挂载到 DOM 两次的问题。– #4029Popper.Content 中内联动画样式的问题。– #4046/* @__PURE__ */,并使用具名渲染函数,而不是使用 Component.displayName = ... 赋值;后者此前会阻止某些打包工具执行死代码消除。– #4038virtualRef 属性类型,允许在弹出框组件中使用 RefObject<Measurable | null>。– #4034import { Accordion } from "radix-ui/accordion" 或 import * as Accordion from "radix-ui/accordion"。这与根 radix-ui 入口点提供的命名空间导出保持一致。– #4020<form> 内以编程方式更新 Checkbox、Switch 或 RadioGroup 的值(例如“全选”控件)时,隐藏的冒泡输入框会分派一个 click 事件,并传播到祖先的 onClick 处理程序。– #4028Form.Message、Form.Control、Form.Label 和 Form.ValidityState 在 Form.Field 组件外部渲染时出现运行时错误的问题。– #3992RadioGroup、Slider、Select 和 Switch。– #3958Space/Enter 按键的问题。– #3999onEscapeKeyDown/onDismiss 处理程序问题。– #4015useEffectEvent 错误 的回归问题。– #4015--radix-scroll-area-corner-width 和 --radix-scroll-area-corner-height 不会重置为 0 的问题。此前这些值会一直保留,使剩余的滚动条上永久出现间隙。– #4009<input type="range"> 的行为一致。– #4006Toast 组件时清除了关闭计时器,以防止内存泄漏和测试环境中的错误。– #3794React.CSSProperties 的扩展。– #3983此版本引入了新的组合 API、受控的 Context Menu,以及针对各个原语的大量错误修复和性能改进。
新增了对 ContextMenu.Root 上受控 open 属性的支持。该属性用于读取打开状态并以编程方式关闭菜单。我们不建议以编程方式打开菜单,因为打开菜单需要依赖用户交互,才能正确定位菜单。
此外,我们修复了一个错误:在长按触摸事件中重新打开后,子菜单仍保持展开状态。
现在,多个表单控件原语会公开其之前内部使用的组合,因此你可以直接访问并重新组合它们为表单提交而渲染的视觉隐藏输入。每个组件仍会默认渲染这些部件,新部件则以 unstable_ 前缀导出。
unstable_ItemProvider、unstable_ItemTrigger 和 unstable_ItemBubbleInputunstable_Provider 和 unstable_BubbleInputunstable_ThumbProvider、unstable_ThumbTrigger 和 unstable_BubbleInputunstable_Provider、unstable_Trigger 和 unstable_BubbleInputSelect.Value 同时与 asChild 和占位符一起使用时记录无效属性错误的问题。focusVisible 支持,以便配合程序化焦点管理,逐步启用使用 :focus-visible 的样式。step 值过小时拇指无响应的问题。Slottable 项目。这允许包裹插槽元素,同时仍将 Slot 属性和引用合并到该元素上。Slot 在每次渲染时创建新的引用回调而导致的无限重新渲染循环。"Text" 剪贴板格式的环境中粘贴的问题,现在会将粘贴的值作为 "text/plain" 读取。skipDelayDuration={0} 无法按预期工作的问题。之前,在触发器之间移动时,打开延迟仍可能被跳过。SubContent 部件新增了 align 属性,用于控制子菜单相对于其锚点项目出现的方向。Toast.Provider 新增了 announcerContainer 属性,以便你指定 toast 通知播报所使用的容器。data-side 和 data-align 属性。Menu.SubContent 新增了 align 属性。data-state 属性的问题。Presence 出现的类似问题。useSyncExternalStore(React 18 及更高版本),而不再使用仅限 CJS 的 shim。此前,在导入某些组件时,该 shim 会导致仅使用 ESM 的浏览器 bundle 崩溃。aria-controls 引用不存在元素的问题,该问题发生在其内容从 DOM 中移除时 – #3243。use client 指令。Root 组件被禁用时所有输入元素未被禁用的问题。animationend 事件 – #2763。aria-hidden、从列表项元素中移除 role=status,以及移除冗余的默认 aria-atomic。displayName,以改进调试。本次发布介绍了一种全新的预览原语:PasswordToggleField。
该新原语提供了一个用于渲染密码输入框及其可见性切换按钮的组件。除了主要功能外,它还包括:
此 API 目前不稳定,我们希望您能帮助我们进行测试!使用 unstable_ 前缀导入该原语。
use-sync-external-store 的依赖以确保入口点有效 – #3491本次发布引入了一种全新的预览原语:OneTimePasswordField。
这一组新组件旨在实现一次性密码字段的常见设计模式,显示为每个字符的独立输入框。这种用户界面的实现看似复杂,但确保交互顺应用户期望。新原语为您处理所有这些复杂性,包括:
由于这是一个预览版本,API当前不稳定。我们希望您能帮助我们进行测试并告诉我们结果。
使用 unstable_ 前缀导入该原语。
Primitive 组件。这将允许我们在未来的版本中公开这些组件,以便用户能够更好地控制此行为。useControllableState 进行小幅改进,以增强性能,减少错误的发生,并在误用时记录警告pointerdown 时关闭工具提示 – #3380crossOrigin 的支持 – #3261displayName 以便更好调试可插槽组件 – #3441radix-ui 包,该包从单一位置公开所有 Radix Primitives 的最新版本。这个可树摇的入口点使得导入所需组件并保持最新变得更为简便,无需担心依赖冲突或重复。aria-hidden 和 react-remove-scroll 依赖:
allowPinchZoom 故障 – #3127referrerPolicy – #2772allowPinchZoom 故障 – #3127form 属性转发到气泡输入元素,以修复非父表单提交 – #3161form 属性转发到气泡输入元素,以修复非父表单提交 – #3161form 属性转发到每个拇指的气泡输入元素,以修复非父表单提交 – #3161form 属性转发到气泡输入元素,以修复非父表单提交 – #3161hotkey 为空数组时的不正确焦点 – #2491CheckedState 类型TooltipProviderProps 类型package.json 添加一个缺失的内部实用程序。提供 Portal 部件的相应包也进行了补丁更新。 – #2966。发布了所有原语的小版本,包含以下更改:
react-remove-scroll 依赖版本以避免在边缘情况下出现双滚动条bug – #2776stopPropagation。hideWhenDetached 属性的组件不允许与隐藏内容进行交互 – #2743 – #2745disableOutsidePointerEvents 属性value={undefined} 以表示不确定状态,匹配当前的实际行为 – #2947nonce 属性添加以能够将CSP nonce传递给内联样式 – #2728nonce 属性添加以能够将CSP nonce传递给内联样式 – #2728scroll-behavior: smooth 的兼容性 – #2175"" 值重置为占位符的能力。请注意,只有当您使用值为 "" 的选项时这才是一个破坏性更改。 – #2174Portal 部件类型与接受DOM属性的谎言 – #2178Portal 部件类型与接受DOM属性的谎言 – #2178Content – #2092本次发布确保我们所有的原语都与ESM兼容。我们还为所有弹出位置的原语更新到了最新版本的Floating UI。
collisionBoundary 时正确计算 --radix-popper-available-width – #2032Slot 可用于 React 服务器组件 – #2116本次发布引入了一种全新的预览原语:Form。
onCheckedChange 在 ContextMenu.CheckboxItem 上的类型 – #1778onCheckedChange 在 DropdownMenu.CheckboxItem 上的类型 – #1778onCheckedChange 在 Menubar.CheckboxItem 上的类型 – #1778本次发布引入了一种全新的原语:Menubar。同时为 Select 添加了一个备受欢迎的功能支持:以类似于 Popover 或 DropdownMenu 的方式定位内容的能力。
orientation 属性,以及使用 dir 的RTL支持 – #1850position 属性到 Select.Content 以启用弹出定位 – #1853ContextMenu.Trigger 添加 disabled 属性 – #1746pointerId – #1753。ContextMenu.CheckboxItem 中不确定状态的支持。请注意,只有当您当前正在使用 CheckboxItem 部件并且您的代码基于TypeScript时这才是一个破坏性更改。 – #1624DropdownMenu.CheckboxItem 中不确定状态的支持。请注意,只有当您当前正在使用 CheckboxItem 部件并且您的代码基于TypeScript时这才是一个破坏性更改。 – #1624DropdownMenu.Trigger 的打开状态与 aria-expanded – #1644asChild 时快速选择项目的问题 – #1647useLabelContext 和对完全自定义控件的支持。要确保本地标签正常工作,请确保您的自定义控件基于本地元素,例如 button 或 input。 – #1686label 元素改善本地行为 – #1686NavigationMenu.Root 添加 delayDuration 和 skipDelayDuration 属性。注意,默认情况下,触发器打开前都有短暂延迟,以便改善用户体验,这可以通过提供的属性进行修改。 – #1716Slider.Root 上使用新 inverted 属性视觉上反转滑块的能力 – #1695Slider.Root 添加 onValueCommit 属性以更好地处理离散值更改 – #1696ref 分配返回 null 的回归 – #1668Toast.Root 添加 onPause 和 onResume 属性 – #1669Toolbar.Item 的点击处理程序触发两次 – #1526通过此发布,我们开始严格遵循语义版本控制。所有原语现在都已版本化 1.0.0。
我们还将 Select、Toast 和 NavigationMenu 从预览转为稳定。
dir 属性继承,则需要使用 DirectionProvider。 – #1119allowPinchZoom 属性,默认为 true – #1514AlertDialog.Portal 上使用 forceMount 改善与 JS 动画库的兼容性 – #1075allowPinchZoom 属性,默认为 true – #1514Portal 部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index,因此您可以完全控制分层。 – #1429Arrow 部件上的 offset – #1531collisionTolerance 重命名为 collisionPadding,并在 Content 部件上接受数字或填充对象 – #1531data-highlighted 属性以支持样式 – #1388data-state 属性到 Trigger 部件 – #1455Content 部件上添加 collisionBoundary、arrowPadding、sticky、hideWhenDetached 属性 – #1531allowPinchZoom 属性,默认为 true – #1514Dialog.Portal 上使用 forceMount 改善与 JS 动画库的兼容性 – #1075allowPinchZoom 属性,默认为 true – #1514Portal 部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index,因此您可以完全控制分层。 – #1429Arrow 部件上的 offset – #1531collisionTolerance 重命名为 collisionPadding,并在 Content 部件上接受数字或填充对象 – #1531data-highlighted 属性以支持样式 – #1388Content 部件上添加 collisionBoundary、arrowPadding、sticky、hideWhenDetached 属性 – #1531Portal 部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index,因此您可以完全控制分层。 – #1426Arrow 部件上的 offset – #1531collisionTolerance 重命名为 collisionPadding,并在 Content 部件上接受数字或填充对象 – #1531Content 部件上添加 collisionBoundary、arrowPadding、sticky、hideWhenDetached 属性 – #1531allowPinchZoom 属性,默认为 true – #1514Portal 部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index,因此您可以完全控制分层。 – #1425Arrow 部件上的 offset – #1531collisionTolerance 重命名为 collisionPadding,并在 Content 部件上接受数字或填充对象 – #1531Content 部件上添加 collisionBoundary、arrowPadding、sticky、hideWhenDetached 属性 – #1531z-index,因此您可以完全控制分层。为提供自定义容器,prop 导向客制化的 containerRef(ref)演变为 container(element)。 data-radix-portal 被移除,因为您可以使用 asChild 控制元素。 – #1463aria-required – #1422ScrollArea.Thumb 现在可以动画化 – #1392data-state 的值从 active|inactive 重命名为 checked|unchecked – #1388Portal 部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index,因此您可以完全控制分层。 – #1459asChild 时定位破坏的问题 – #1245Select.Content 具有填充时的触发器/内容对齐 – #1312data-highlighted 属性以支持样式 – #1388Select.Value 上使用 placeholder 属性支持占位符 – #1384Slottable 时的子项排序问题 – #1376Tabs.Content 添加支持生命周期动画 – #1346asChild 时的 TypeScript 类型 – #1300key 属性时吐司重排序的问题 – #1283Portal 部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index,因此您可以完全控制分层。 – #1427Tooltip.Content 将在悬停时保持打开(符合 WCAG 2.1 悬停内容要求)。可以提供 disableHoverableContent 到 Tooltip.Provider 以恢复之前的行为 – #1490Tooltip.Content 的 side 现在默认为 top – #1490Tooltip.Provider 现在是必需的,您必须包装您的应用以避免回归。 – #1490Arrow 部件上的 offset – #1531collisionTolerance 重命名为 collisionPadding,并在 Content 部件上接受数字或填充对象 – #1531本次发布引入了3种全新的原语预览:Select、Toast 和 NavigationMenu,同时还提交了大量修复和改进。
Dialog.Title 现在是必需部件,因此如果未使用,将会抛出错误。如果不需要描述,必须将 aria-describedby={undefined} 传递给 Dialog.Content。 – #1098Dialog/AlertDialog 的组合 – #1097DropdownMenu.TriggerItem 单击触发两次 – #1057Home 和 End 键时防止页面滚动 – #1076本次发布侧重于对 React 18 的支持,并引入了一些包的重大破坏性更改,主要与对话框的端口化有关。
IdProvider。提高对 React 18 的支持,并不再需要使用旧版本。请从您的应用中移除,以避免过时的警告。 – #1006type 和 value 属性 – #979Accordion.Content 高度动画在初始页面加载时 – #977Portal 部件。为避免回归,使用该部件可以实现端口行为。 – #936AlertDialog.Overlay 中滚动。将 allowPinchZoom 移动到根元素。 – #963asChild 的TypeScript错误 – #924Collapsible.Content 高度动画在初始页面加载时 – #977Portal 部件。为避免回归,使用该部件可以实现端口行为。 – #936Dialog.Overlay 中滚动。将 allowPinchZoom 移动到根元素。 – #963HoverCard 的能力 – #920Tabs.Content 中卸载内容,当标签不活跃时 – #859role=group 元素上无效的 aria-orientation 属性 – #965TooltipProvider 部件。必须包裹您的应用,以避免回归。 – #1007Tooltip.Trigger 中移除 type=button 属性 – #1011key 警告 – #1015Accordion.Content 添加新的 CSS 变量,以帮助宽度动画 – #879Collapsible.Content 添加新的 CSS 变量,以帮助宽度动画 – #879allowPinchZoom 属性向 Popover.Content 添加支持 – #8840 时的计算 – #866Tabs.Content 中卸载内容,当选项卡不活跃时 – #859asChild 布尔属性替换多态的 as 属性。了解如何通过 在这里更改渲染的元素。 – #835DropdownMenu 的组合 – #818Dialog 的组合 – #818pointer-events – #819extendPrimitive 实用程序 – #840modal 属性添加模式支持 – #700ContextMenu.Content 的 disableOutsidePointerEvents 属性 – #700modal 属性添加模式支持 – #700autofocus 属性时 – #739modal 属性添加模式支持 – #700DropdownMenu.Content 的 disableOutsideScroll 属性 – #700DropdownMenu.Content 的 disableOutsidePointerEvents 属性 – #700modal 属性添加模式支持 – #700Popover.Content 的 disableOutsideScroll 属性 – #700Popover.Content 的 disableOutsidePointerEvents 属性 – #700Popover.Content 的 trapFocus 属性 – #700autofocus 属性时 – #739Scrollbar 部件添加 data-state 属性 – #801Title 和 Description 部件以便简单标记 – #741Accordion.Button 重命名为 Accordion.Trigger – #651Accordion.Panel 重命名为 Accordion.Content – #651--radix-accordion-content-height) – #651type=“single” 的 Accordion 现在具有新的 collapsible 属性,默认为 false。这意味着默认行为现在已改变,默认情况下用户无法关闭所有项。 – #651onPointerDownOutside 中防止默认行为,而不会意外地防止聚焦 – #654onCheckedChange(event) 现在是 onCheckedChange(checked: CheckedState) – #672Checkbox 的 onClick 中停止传播 – #672label 的兼容性 – #672label 中改善无障碍性 – #672Collapsible.Button 重命名为 Collapsible.Trigger – #651ContextMenu.TriggerItem – #682ContextMenu.Arrow – #682dir 属性以支持RTL – #682onPointerDownOutside 中防止默认行为,而不会意外地防止聚焦 – #654ContextMenu.Content 的 side 属性 – #658ContextMenu.Content 的 align 属性 – #658ContextMenu.Content 上具有 sideOffset,则应该使用 alignOffset。这是为了标准化根菜单和子菜单的垂直对齐。 – #712onFocusOutside 现在是一个自定义事件 – #671onPointerDownOutside 中防止默认行为,而不会意外地防止聚焦 – #654DropdownMenu.TriggerItem – #682dir 属性以支持RTL – #682onPointerDownOutside 中防止默认行为,而不会意外地防止聚焦 – #654onFocusOutside 现在是一个自定义事件 – #671onValueChange(event) 现在是 onValueChange(value: string) – #685RadioGroup.Item 的 onCheckedChange 属性 – #685Scrollbar 的挂载/卸载现在可以动画化 – #624overflowX 和 overflowY 属性 – #624ScrollAreaButtonStart、ScrollAreaButtonEnd 和 ScrollAreaTrack – #624scrollbarVisibility 属性重命名为 type。值为 auto、always、scroll 或 hover – #624scrollbarVisibilityRestTimeout 属性重命名为 scrollHideDelay – #624trackClickBehavior 属性,因为我们删除了内置动画。单击轨道始终会快速返回到指针位置 – #624ScrollAreaScrollbarX 和 ScrollAreaScrollbarY 现在是 <ScrollAreaScrollbar orientation="horizontal" /> 和 <ScrollAreaScrollbar orientation="vertical" /> – #624onCheckedChange(event) 现在是 onCheckedChange(checked: boolean) – #679label 中的无障碍性 – #679readOnly 属性 – #600onOpenChange 属性 – #604anchorRef 属性,并替换为可选的 Anchor 部件 – #580readOnly 属性 – #600orientation、dir、loop 属性 – #618anchorRef 属性 – #580Content – #571ToggleButton 原语重命名为 Toggle – #546toggled 属性重命名为 pressed – #546defaultToggled 属性重命名为 defaultPressed – #546onToggledChange 属性重命名为 onPressedChange – #546selector 属性和 data-radix-* 属性 – #517type 属性是必需的 – #527step 被正确四舍五入 – #463dir 属性) – #497<Trigger as={Slot}> 时组合事件 – #461onCloseAutoFocus 属性 – #456onCloseAutoFocus 属性 – #456as 属性时的类型自动补全 – #421name 属性从 Item 移动到 Root – #424children – #414children – #414selector 属性 – #347Root 上设置 disabled={false} 但不启用禁用项 – #400