Radix Primitives releases and their changelogs.
This release ensures all of our primitives are ESM compatible. We have also updated to the latest version of Floating UI for all of our popper-positioned primitives.
Improve ESM compatibility – #2130
Fix possible upstream compiler errors (@types/react
phantom dependency) – #1896
Position content correctly when matching trigger size – #1995
Prevent non-modal dialog from re-opening when closing using trigger in Safari – #2110
Ensure focus trapping is maintained when the focused item is deleted – #2145
Position content correctly when matching trigger size – #1995
Position content correctly when matching trigger size – #1995
Position content correctly when matching trigger size – #1995
Do not close when clicking items and meta key is down – #2080
Position content correctly when matching trigger size – #1995
Prevent non-modal popover from re-opening when closing using trigger in Safari – #2110
Ensure --radix-popper-available-width
is calculated correctly when using collisionBoundary
– #2032
Position content correctly when matching trigger size – #1995
Improve scroll buttons touch screen support – #1771
Clamp thumb position within range – #1988
Ensure Slot
can be used in a React Server Component – #2116
Position content correctly when matching trigger size – #1995
Improve large content hoverability – #2155
This release introduces a brand new primitive in preview: Form
.
New primitive – #1998
Reset checkbox state when form is reset – #1733
Expose new CSS custom properties to enable size constraints – #1942
Don't exit fullscreen mode when pressing escape to dismiss from submenu – #1752
Relax onCheckedChange
type on ContextMenu.CheckboxItem
– #1778
Expose new CSS custom properties to enable size constraints – #1942
Don't exit fullscreen mode when pressing escape to dismiss from submenu – #1752
Relax onCheckedChange
type on DropdownMenu.CheckboxItem
– #1778
Expose new CSS custom properties to enable size constraints – #1942
Expose new CSS custom properties to enable size constraints – #1943
Don't exit fullscreen mode when pressing escape to dismiss from submenu – #1752
Relax onCheckedChange
type on Menubar.CheckboxItem
– #1778
Expose new CSS custom properties to enable size constraints – #1942
Expose new CSS custom properties to enable size constraints – #1942
This release introduces a brand new primitive: Menubar
. It also adds support for a highly requested feature for Select
: the ability to position the content in a similar way to Popover
or DropdownMenu
.
Add horizontal orientation support with new orientation
prop, as well as RTL support with dir
– #1850
Fix consistency issue with RTL positioning – #1890
Fix consistency issue with RTL positioning – #1890
Fix consistency issue with RTL positioning – #1890
New primitive – #1846
Fix consistency issue with RTL positioning – #1890
Add position
prop to Select.Content
to enable popper positioning – #1853
Fix consistency issue with RTL positioning – #1890
Add disabled
prop to ContextMenu.Trigger
– #1746
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 preview 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 preview: 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 of 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