Radix Primitives releases and their changelogs.
Fix invalid pointerId in Cypress when running Firefox – #1753
Fix initial animation playback in Firefox and Safari – #1710
Fix issue with textarea elements not being scrollable in Firefox – #1550
Fix initial animation playback in Firefox and Safari – #1710
[Breaking] Add support for indeterminate state on ContextMenu.CheckboxItem. Note that this is only a breaking change if you are currently using the CheckboxItem part and your codebase is written in TypeScript. – #1624
Fix issue with textarea elements not being scrollable in Firefox – #1550
[Breaking] Add support for indeterminate state on DropdownMenu.CheckboxItem. Note that this is only a breaking change if you are currently using the CheckboxItem part and your codebase is written in TypeScript. – #1624
Correctly pair DropdownMenu.Trigger open state with aria-expanded when closed – #1644
Fix issue with eager selection of items when using asChild – #1647
Fix issue with dismissing when the component is used in a separate popup window – #1677
Improve text selection experience – #1692
[Breaking] Remove useLabelContext and support for fully custom controls. For native labelling to work, ensure your custom controls are based on native elements such as button or input. – #1686
Improve native behavior by using the native label element – #1686
Prevent menu from re-opening with the pointer after being dismissed with escape – #1579
Add delayDuration and skipDelayDuration props to NavigationMenu.Root. Note that by default, triggers now have a brief delay before opening in order to improve UX, this can be modified using the props provided. – #1716
Add disabled prop to RadioGroup.Root – #1530
Fix issue where RadioGroup.Root was focusable when all items were disabled – #1530
Add ability to visually invert the slider using the new inverted prop on Slider.Root – #1695
Add onValueCommit prop to Slider.Root to better handle discrete value changes – #1696
Stop eagerly creating callback props – #1713
Fix regression with screen readers announcing as "group" rather than "status" – #1556
Fix regression with ref assignments on child elements returning null – #1668
Add onPause and onResume props to Toast.Root – #1669
Fix timer reset issue which would cause toasts to dismiss early in some cases – #1682
Prevent Toolbar.Item click handlers firing twice – #1526
Ensure tooltip doesn't open if interacting with the trigger before the open timer expires – #1693
With this release, we start following semantic versioning strictly. All primitives are now versioned 1.0.0.
We also move the Select, Toast and NavigationMenu from beta to stable.
Improve support for React 18 – #1329
[Breaking] Improve RTL performance. You need to use DirectionProvider if you were relying on dir attribute inheritance from document (or any element). – #1119
[Breaking] Remove allowPinchZoom prop, now defaults to true – #1514
Improve compatibility with JS animation libraries with forceMount on AlertDialog.Portal – #1075
Fix regressions with page interactivity while/after closing dialog – #1401
[Breaking] Improve indirect nesting of context menus. Submenus must now be created using explicit parts. – #1394
[Breaking] Remove allowPinchZoom prop, now defaults to true – #1514
[Breaking] Add new Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. – #1429
[Breaking] Remove offset on Arrow part – #1531
[Breaking] Rename collisionTolerance to collisionPadding on Content part and accepts a number or a padding object – #1531
Fix issue with native context menu appearing in React 18 – #1378
Add data-highlighted attribute to support styling – #1388
Add data-state attribute to Trigger part – #1455
Add collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part – #1531
[Breaking] Remove allowPinchZoom prop, now defaults to true – #1514
Improve compatibility with JS animation libraries with forceMount on Dialog.Portal – #1075
Fix regressions with page interactivity while/after closing dialog – #1401
[Breaking] Improve indirect nesting of dropdown menus. Submenus must now be created using explicit parts. – #1394
[Breaking] Remove allowPinchZoom prop, now defaults to true – #1514
[Breaking] Add new Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. – #1429
[Breaking] Remove offset on Arrow part – #1531
[Breaking] Rename collisionTolerance to collisionPadding on Content part and accepts a number or a padding object – #1531
Add data-highlighted attribute to support styling – #1388
Prevent escape key from exiting fullscreen mode in Firefox & Safari – #1423
Add collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part – #1531
[Breaking] Add new Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. – #1426
[Breaking] Remove offset on Arrow part – #1531
[Breaking] Rename collisionTolerance to collisionPadding on Content part and accepts a number or a padding object – #1531
Add collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part – #1531
Ensure menu closes after clicking NavigationMenu.Link – #1347
Add onSelect prop to NavigationMenu.Link – #1372
[Breaking] Remove allowPinchZoom prop, now defaults to true – #1514
[Breaking] Add new Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. – #1425
[Breaking] Remove offset on Arrow part – #1531
[Breaking] Rename collisionTolerance to collisionPadding on Content part and accepts a number or a padding object – #1531
Add collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part – #1531
[Breaking] Note that z-index isn't managed anymore so you have full control of layering. The prop to provide a custom container evolves from containerRef (ref) to container (element). The data-radix-portal was removed because you can use asChild to control the element. – #1463
Add aria-required to root – #1422
ScrollArea.Thumb is now animatable – #1392
[Breaking] Renamed data-state values from active|inactive to checked|unchecked – #1388
[Breaking] Add new Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. – #1459
Fix position breaking when using asChild on Select.Content – #1245
Improve trigger/content alignment when Select.Content has padding – #1312
Fix trigger/content alignment when there are less than 5 items – #1355
Support trigger/content alignment when no value is provided – #1379
Add data-highlighted attribute to support styling – #1388
Add support for placeholder via placeholder prop on Select.Value – #1384
Resolve value mismatch with underlying native select – #1421
Fix issue with children ordering when using Slottable – #1376
Add support for lifecycle animation to Tabs.Content – #1346
[Breaking] The default toast order has changed, they now render top to bottom from oldest to newest – #1469
Improve Typescript types when using asChild – #1300
Fix issue with toast reordering when updating React's key prop – #1283
Improve compatability with animation libraries – #1468
[Breaking] Add new Portal part. To avoid regressions, use this part if you want portalling behavior. Note that z-index isn't managed anymore so you have full control of layering. – #1427
[Breaking] By default Tooltip.Content will remain open when hovering (WCAG 2.1 Content on Hover compliance). disableHoverableContent can be supplied to Tooltip.Provider to restore previous behavior – #1490
[Breaking] side on Tooltip.Content now defaults to top – #1490
[Breaking] Tooltip.Provider is now required, you must wrap your app to avoid regressions. – #1490
[Breaking] Remove offset on Arrow part – #1531
[Breaking] Rename collisionTolerance to collisionPadding on Content part and accepts a number or a padding object – #1531
Improve layering of tooltip with other primitives – #1314
Fix tooltip closing when transforming/animation trigger – #937
Add collisionBoundary, arrowPadding, sticky, hideWhenDetached props on Content part – #1531
This release introduces 3 brand new primitives in beta: Select, Toast and NavigationMenu, whilst also shipping a ton of fixes and improvements.
Prevent form submission when pressing Accordion.Trigger – #1085
Fix animation issue with React 18 – #1125
Improve pointer-events management – #1079
Prevent activation via enter key – #1104
Fix animation issue with React 18 – #1125
Improve pointer-events management – #1079
[Breaking] Dialog.Title is now a required part so will throw an error if not used. aria-describedby={undefined} must be passed to Dialog.Content if no description is needed. – #1098
Improve composability with Dialog/AlertDialog – #1097
Prevent clicking trigger to close from immediately reopening in non-modal mode – #1059
Prevent DropdownMenu.TriggerItem click from firing twice – #1057
Improve idle performance – #1040
New primitive – #1172
Prevent activation via enter key – #1104
New primitive – #1169
Prevent page scroll when using Home and End keys – #1076
Prevent accidental focus activation via right-click – #1114
New primitive – #1165
Improve accessibility by using radio role for single toggle group – #1118
This release focuses on React 18 support and introduces a number breaking changes to some packages, mostly related to portalling dialogs.
[Breaking] Deprecate IdProvider. Improves support for React 18 going forward and is no longer needed in older versions. Remove from your app to avoid deprecation warnings. – #1006
Improve React 18 support – #984
Improve dev mode errors with mismatched type and value props – #979
Prevent Accordion.Content height animation on initial page load – #977
[Breaking] Add new Portal part. To avoid regressions, use this part if you want portalling behavior. – #936
[Breaking] Support scrolling within AlertDialog.Overlay. Move allowPinchZoom to root. – #963
Fix asChild TypeScript error – #924
Prevent Collapsible.Content height animation on initial page load – #977
[Breaking] Add new Portal part. To avoid regressions, use this part if you want portalling behavior. – #936
[Breaking] Support scrolling within Dialog.Overlay. Move allowPinchZoom to root. – #963
Prevent disabled trigger from opening menu – #974
Fix ability to focus HoverCard when inside a dialog – #920
Prevent programmatic focus from changing value – #939
Remove invalid aria-orientation attribute on role=group element – #965
[Breaking] Add new TooltipProvider part. You must wrap your app to avoid regressions. – #1007
[Breaking] Remove type=button attribute from Tooltip.Trigger – #1011
Fix tooltip activation regression – #1035
Fix key warnings – #1015
All primitives are now versioned 0.1.1
Fix composability issues between primitives by scoping context – #906
Fix CSS unmount animations – #851
Add new CSS variable to Accordion.Content to help with width animations – #879
Improve composability with Dialog – #906
[Breaking] Remove AlertDialog.Content onInteractOutside prop – #846
Improve composability with AlertDialog – #906
Add pinch to zoom support to DropdownMenu.Content via allowPinchZoom prop – #884
Add pinch to zoom support to ContextMenu.Content via allowPinchZoom prop – #884
Prevent scroll via arrow keypress on submenu triggers – #908
Add new CSS variable to Collapsible.Content to help with width animations – #879
Prevent screen reader virtual cursor from accessing hidden input – #870
Improve composability with Tooltip – #906
Add pinch to zoom support to DropdownMenu.Content via allowPinchZoom prop – #884
Prevent scroll via arrow keypress on submenu triggers – #908
Allow its children to prevent event propagation – #861
Prevent screen reader virtual cursor from accessing hidden inputs – #870
Add pinch to zoom support to Popover.Content via allowPinchZoom prop – #884
Fix calculations when value is 0 – #866
Prevent screen reader virtual cursor from accessing hidden input – #870
[Breaking] Unmount content within Tabs.Content when tab is inactive – #859
All primitives moved to Beta and are now versioned 0.1.0
[Breaking] Replace polymorphic as prop with asChild boolean prop. Learn more
about how to change the rendered element here – #835
Improve composability with DropdownMenu – #818
Improve composability with Dialog – #818
Re-enable pointer-events when closed – #819
Prevent body text from selecting on close (Firefox) – #812
Ensure sub triggers receive focus on click (iOS Safari) – #820
[Breaking] Deprecate extendPrimitive utility – #840
Improve polymorphic types performance – #784
[Breaking] Remove AlertDialog.Content onPointerDownOutside prop – #700
Prevent outside pointer events triggering prematurely on touch devices – #767
Add modality support via modal prop – #700
[Breaking] Remove ContextMenu.Content disableOutsidePointerEvents prop – #700
Prevent outside pointer events triggering prematurely on touch devices – #767
Add modality support via modal prop – #700
Improve animation rendering in React 18 – #776
Ensure focus is restored to trigger on close when using the autofocus attribute on a child element – #739
Prevent outside pointer events triggering prematurely on touch devices – #767
Ensure iOS Safari consistently focuses the first focusable element – #776
Add modality support via modal prop – #700
[Breaking] Remove DropdownMenu.Content disableOutsideScroll prop – #700
[Breaking] Remove DropdownMenu.Content disableOutsidePointerEvents prop – #700
Prevent outside pointer events triggering prematurely on touch devices – #767
Add modality support via modal prop – #700
[Breaking] Remove Popover.Content disableOutsideScroll prop – #700
[Breaking] Remove Popover.Content disableOutsidePointerEvents prop – #700
[Breaking] Remove Popover.Content trapFocus prop – #700
Improve animation rendering in React 18 – #776
Ensure focus is restored to trigger on close when using the autofocus attribute on a child element – #739
Prevent outside pointer events triggering prematurely on touch devices – #767
Ensure iOS Safari consistently focuses the first focusable element – #776
Add data-state to ScrollBar part – #801
Prevent thumb receiving focus when disabled – #777
Prevent focus loss on thumb when using React.StrictMode – #794
Can now be triggered on touch with a long-press – #743
Add optional Title and Description parts for simpler labelling – #741
Add data-orientation to Scrollbar for styling convenience – #720
Fix forceMount type issue on Scrollbar – #738
Ensure the correct thumb is focused when using keyboard and crossing another thumb – #731
Ensure only one arrow press is needed when crossing another thumb – #733
Improve types compatibility – #737
Ensure only one click is needed to toggle a single controlled toggle group – #722
Ensure focus behavior is consistent on Safari – #727
Improve polymorphic types – #648
[Breaking] Rename Accordion.Button to Accordion.Trigger – #651
[Breaking] Rename Accordion.Panel to Accordion.Content – #651
[Breaking] Rename custom property accordingly (--radix-accordion-content-height) – #651
[Breaking] type=“single” Accordion now has a new collapsible prop which is false by default. This means that the default behavior has now changed. By default a user cannot close all items. – #651
[Breaking] Allow preventing default in onPointerDownOutside without inadvertently preventing focus – #654
[Breaking] onCheckedChange(event) is now onCheckedChange(checked: CheckedState) – #672
Improve compatibility with native form validation – #650
Allow stopping propagation on Checkbox onClick – #672
Improve compatibility with native label – #672
Improve accessibility when wrapped in native label – #672
[Breaking] Rename Collapsible.Button to Collapsible.Trigger – #651
Add submenu support – #682
Add ContextMenu.TriggerItem – #682
Add ContextMenu.Arrow – #682
Add dir prop for RTL support with submenus – #682
[Breaking] Allow preventing default in onPointerDownOutside without inadvertently preventing focus – #654
[Breaking] Remove ContextMenu.Content side prop – #658
[Breaking] Remove ContextMenu.Content align prop – #658
[Breaking] If you had sideOffset on ContextMenu.Content before, you should now use alignOffset. This is to standardize vertical alignment for both root and sub-menus. – #712
[Breaking] onFocusOutside is now a custom event – #671
Improve support of content and item with no padding – #658
Align with WAI-ARIA spec by focusing first item when opening via keyboard – #694
[Breaking] Allow preventing default in onPointerDownOutside without inadvertently preventing focus – #654
Add submenu support – #682
Add DropdownMenu.TriggerItem – #682
Add dir prop for RTL support with submenus – #682
[Breaking] Allow preventing default in onPointerDownOutside without inadvertently preventing focus – #654
[Breaking] onFocusOutside is now a custom event – #671
[Breaking] The up arrow no longer opens the menu – #702
Align with WAI-ARIA spec by focusing first item when opening via keyboard – #694
[Breaking] Allow preventing default in onPointerDownOutside without inadvertently preventing focus – #654
[Breaking] onFocusOutside is now a custom event – #671
[Breaking] onValueChange(event) is now onValueChange(value: string) – #685
[Breaking] Remove RadioGroup.Item onCheckedChange prop – #685
Improve compatibility with native form validation – #650
Improve usage within forms – #685
Brand new version with a simpler API – #624
Improve Safari support – #624
Improve RTL support – #624
Improve touch support – #624
Scrollbar mount/unmount can now be animated – #624
Add minimum width/height to thumb so it's always grabbable – #624
Move functional CSS into component to improve DX – #624
Bundle size significantly reduced – #624
[Breaking] Remove overflowX and overflowY props – #624
[Breaking] Remove ScrollAreaButtonStart, ScrollAreaButtonEnd and ScrollAreaTrack – #624
[Breaking] Rename scrollbarVisibility prop to type. The values are auto, always, scroll or hover – #624
[Breaking] Rename scrollbarVisibilityRestTimeout prop to scrollHideDelay – #624
[Breaking] Remove trackClickBehavior prop as we've removed built-in animation. Clicking on track always snaps to pointer position – #624
[Breaking] ScrollAreaScrollbarX and ScrollAreaScrollbarY are now <ScrollAreaScrollbar orientation="horizontal" /> and <ScrollAreaScrollbar orientation="vertical" /> – #624
Ensure no scrollbars are shown when scrolling is disabled – #624
Ensure children event handlers don't break – #624
Ensure scroll area updates when children content size changes – #624
[Breaking] onCheckedChange(event) is now onCheckedChange(checked: boolean) – #679
Improve compatibility with native form validation – #650
Improve usage within forms – #679
Improve accessibility when wrapped in native label – #679
[Breaking] Rename Tabs.Tab to Tabs.Trigger – #652
[Breaking] Rename Tabs.Panel to Tabs.Content – #652
Improve polymorphic types performance – #613
Ensure only one click is needed to close a single controlled accordion – #594
[Breaking] Remove readOnly prop – #600
Add onOpenChange prop – #604
Ensure focus position isn't lost when blurring out window and re-focusing it – #589
Take into account non-visible items – #618
[Breaking] Remove anchorRef prop – #580
Prevent page from scrolling when selecting an item with space key – #626
New primitive – #595
[Breaking] Remove anchorRef prop and replace with optional Anchor part – #580
[Breaking] Remove readOnly prop – #600
Add optional orientation, dir, loop props – #618
[Breaking] Remove anchorRef prop – #580
Improve tree-shaking – #577
Ensure you can open a context menu when one is already open – #565
Fix potential overlap issue – #541
Ensure Content closes when it has multiple close animations – #571
[Breaking] Rename ToggleButton primitive to Toggle – #546
[Breaking] Rename toggled prop to pressed – #546
[Breaking] Rename defaultToggled prop to defaultPressed – #546
[Breaking] Rename onToggledChange prop to onPressedChange – #546
New primitive – #376
Add height CSS custom property to panel for easier animation – #537
Add height CSS custom property to content for easier animation – #537
Fix type definition conflicts – #538
Add support for SSR
[Breaking] Remove selector prop and data-radix-* atributes – #517
[Breaking] Add support for multiple values. Note that this is a breaking change because the new type prop is required – #527
Ensure step is rounded correctly – #463
Add RTL support (dir prop) – #497
Ensure events are composed when using <Trigger as={Slot}> – #461
Expose onCloseAutoFocus prop – #456
Expose onCloseAutoFocus prop – #456
Fix type autocompletion when using as prop – #421
Prevent open/close flickering – #431
Ensure focus is returned properly on close – #422
[Breaking] Move name prop from Item to Root – #424
Re–add missing children – #414
Re–add missing children – #414
Prevent flickering (sliding) issue – #415
New utility – #409
Fix regression when tabbing out would close – #403
Fix broken arrow keys navigation – #404
Add selector prop – #347
Ensure setting disabled={false} on Root doesn't enable disabled items – #400
Ensure Content repositions on window resize – #359
Ensure last element inside Content triggers blur event – #395
Initial release! 🎉 – #338