Releases

Radix Primitives releases and their changelogs.

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

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