Radix Primitives releases and their changelogs.
This release introduces 3 brand new primitives: 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 behaviour 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 behaviour 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