@ariakit/react@0.4.6

Nested SelectList

The SelectList component can now be nested within a SelectPopover. This lets you render additional elements inside the popover without breaking the accessibility tree. The ARIA roles will be automatically adjusted to ensure a valid accessibility tree:

<SelectProvider>
  <Select />
  <SelectPopover>
    <SelectHeading>Fruits</SelectHeading>
    <SelectDismiss />
    <SelectList>
      <SelectItem value="Apple" />
      <SelectItem value="Banana" />
    </SelectList>
  </SelectPopover>
</SelectProvider>

New Select components

Two new components have been added to the Select module: SelectHeading and SelectDismiss.

You can use them alongside SelectList to add a heading and a dismiss button to the select popover:

<SelectProvider>
  <Select />
  <SelectPopover>
    <SelectHeading>Fruits</SelectHeading>
    <SelectDismiss />
    <SelectList>
      <SelectItem value="Apple" />
      <SelectItem value="Banana" />
    </SelectList>
  </SelectPopover>
</SelectProvider>

--popover-transform-origin

The Popover components now expose a --popover-transform-origin CSS variable. You can use this to set the transform-origin property for the popover content element in relation to the anchor element:

.popover {
  transform-origin: var(--popover-transform-origin);
}

Opening SelectPopover on click

To ensure uniformity across all dropdown buttons in the library, the SelectPopover now opens when you click on the Select component, instead of on mouse/touch/pointer down.

This change also resolves a problem where the :active state wouldn't be triggered on the select button due to a focus change on mousedown.

Other updates

• Fixed ref warning in React 19.
• Ensured Combobox uses roving tabindex to manage focus on mobile Safari.
• Added a new listElement state to the Select store.
• Improved use of Tab components within Select widgets.
• Fixed data-focus-visible being applied after a blur event.
• Fixed composite items not scrolling into view in Safari.
• Improved JSDocs.
• Updated dependencies: @ariakit/react-core@0.4.6