Releases

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 disabled prop to Select.Root – #1699

• Add required prop to Select.Root – #1598

• 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

• Prevent DropdownMenu.TriggerItem click from firing twice – #1057

• Improve idle performance – #1040

• 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

• [Breaking] Change Tabs.Trigger to button element – #981

• Improve TSDocs – #978

• Remove invalid aria-orientation attribute on role=group element – #965

• Fix asChild TypeScript error – #924

• Remove invalid toolbaritem role – #950

• [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

• Open on focus to improve keyboard support – #902

• Compose correct pointer events internally – #893

• 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

• Improve usage within forms – #678

• Fix key binding issue in LTR – #718

• [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

• Add optional orientation, dir, loop props – #618

• [Breaking] Remove readOnly prop – #600

• [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

• New primitive – #412 #451 #545

• Add custom timing support – #550 #551 #554 #558

• Add unmount animation support – #558

• 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

• Add enter key support on trigger – #381

• Prevent focus race condition – #394

• Ensure Content repositions on window resize – #359

• Ensure last element inside Content triggers blur event – #395

• Initial release! 🎉 – #338