Radix Primitives releases and their changelogs.
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 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