Radix Primitives 发布及其变更日志。
本次发布介绍了一种全新的预览原语: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 – #1753ContextMenu.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 中卸载内容,当标签不活跃时 – #859aria-orientation attribute on role=group element – #965TooltipProvider part. You must wrap your app to avoid regressions. – #1007type=button attribute from Tooltip.Trigger – #1011key warnings – #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