ariakit

• Updated dependencies: @ariakit/[email protected]

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/[email protected]

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/[email protected]

• Ensured Combobox uses roving tabindex to manage focus on mobile Safari.
• Added a new listElement state to the Select store.
• Removed unnecessary utility functions: closest, matches.
• Improved use of Tab components within Select widgets.
• Improved JSDocs.

• Added within function to queries.
• Updated dependencies: @ariakit/[email protected]

Multi-selectable Combobox with inline autocomplete

When rendering a Multi-selectable Combobox with the autoComplete prop set to "inline" or "both", the completion string will no longer be inserted into the input upon deselecting an item. This is because the completion string generally represents an addition action, whereas deselecting an item is a removal action.

Other updates

• Added new experimental Tag components.
• Updated Combobox to no longer use ReactDOM.flushSync when updating the value.
• Added new resetValueOnSelect prop to ComboboxItem.
• Added new resetValue method to combobox store.
• Added experimental ComboboxValue component.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

Multi-selectable Combobox with inline autocomplete

When rendering a Multi-selectable Combobox with the autoComplete prop set to "inline" or "both", the completion string will no longer be inserted into the input upon deselecting an item. This is because the completion string generally represents an addition action, whereas deselecting an item is a removal action.

Other updates

• Updated Combobox to no longer use ReactDOM.flushSync when updating the value.
• Added new resetValueOnSelect prop to ComboboxItem.
• Added new resetValue method to combobox store.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

• Added new undo utils.
• Added new experimental Tag components.
• Added DOM utils: isTextbox, getTextboxValue.
• Added event function: getInputType.
• Added new resetValue method to combobox store.
• Improved JSDocs.

• Updated dependencies: @ariakit/[email protected]

Combobox autoFocusOnHide behavior

Previously, the autoFocusOnHide feature on ComboboxPopover was turned off by default. Most of the time, this didn't have any practical impact because the combobox input element was already focused when the popover was hidden.

Now, this feature is enabled by default and should work consistently even when virtualFocus is set to false.

Better SVG strokes

The strokeWidth property on SVG elements rendered by CheckboxCheck, ComboboxCancel, ComboboxDisclosure, DialogDismiss, HovercardDisclosure, PopoverDisclosureArrow, and all components that use any of these now defaults to 1.5px instead of 1.5pt. This should make the strokes slightly thinner.

Remember, you can always override the SVG element rendered by these components by rendering custom children.

Minimum value length to show combobox options

A new showMinLength prop has been added to the Combobox component. This prop lets you set the minimum length of the value before the combobox options appear. The default value is 0.

<Combobox showMinLength={2} />

Previously, achieving this behavior required combining three separate props: showOnChange, showOnClick, and showOnKeyPress. We've added this prop to simplify this common task.

These props continue to work as expected as they can be used to customize the behavior for each distinct event.

Rendering composite items as input elements

We've added the ability to render CompositeItem as an input element using the render prop:

<CompositeItem render={<input />} />

Before, you could only do this with the experimental CompositeInput component. Now, this functionality is integrated directly into the CompositeItem component.

Other updates

• Fixed Dialog calling autoFocusOnHide twice.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

Combobox autoFocusOnHide behavior

Previously, the autoFocusOnHide feature on ComboboxPopover was turned off by default. Most of the time, this didn't have any practical impact because the combobox input element was already focused when the popover was hidden.

Now, this feature is enabled by default and should work consistently even when virtualFocus is set to false.

Better SVG strokes

The strokeWidth property on SVG elements rendered by CheckboxCheck, ComboboxCancel, ComboboxDisclosure, DialogDismiss, HovercardDisclosure, PopoverDisclosureArrow, and all components that use any of these now defaults to 1.5px instead of 1.5pt. This should make the strokes slightly thinner.

Remember, you can always override the SVG element rendered by these components by rendering custom children.

Minimum value length to show combobox options

A new showMinLength prop has been added to the Combobox component. This prop lets you set the minimum length of the value before the combobox options appear. The default value is 0.

<Combobox showMinLength={2} />

Previously, achieving this behavior required combining three separate props: showOnChange, showOnClick, and showOnKeyPress. We've added this prop to simplify this common task.

These props continue to work as expected as they can be used to customize the behavior for each distinct event.

Rendering composite items as input elements

We've added the ability to render CompositeItem as an input element using the render prop:

<CompositeItem render={<input />} />

Before, you could only do this with the experimental CompositeInput component. Now, this functionality is integrated directly into the CompositeItem component.

Other updates

• Fixed Dialog calling autoFocusOnHide twice.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

Combobox autoFocusOnHide behavior

Previously, the autoFocusOnHide feature on ComboboxPopover was turned off by default. Most of the time, this didn't have any practical impact because the combobox input element was already focused when the popover was hidden.

Now, this feature is enabled by default and should work consistently even when virtualFocus is set to false.

Other updates

• Improved JSDocs.

• Updated dependencies: @ariakit/[email protected]

• Fixed TypeScript types for ref.
• Fixed CompositeItem occasionally failing to set the activeId state on focus.
• Fixed unmountOnHide prop not working on TabPanel without tabId.
• Fixed regression in v0.4.2 that caused nested tabs to stop working.
• Added new combobox property to tab store.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

• Fixed TypeScript types for ref.
• Fixed CompositeItem occasionally failing to set the activeId state on focus.
• Fixed unmountOnHide prop not working on TabPanel without tabId.
• Fixed regression in v0.4.2 that caused nested tabs to stop working.
• Added new combobox property to tab store.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

• Fixed regression in v0.4.2 that caused nested tabs to stop working.
• Added new combobox property to tab store.
• Improved JSDocs.
• Fixed TypeScript error on defaultValue.

• Added @ariakit/test/playwright path with Playwright-specific query utilities.
• Updated dependencies: @ariakit/[email protected]

Tooltip behavior improvements

When using Tooltip components alongside elements that move focus upon clicking (like MenuButton, which moves focus to its Menu when clicked), the tooltip will now stop from appearing after the user clicks the anchor element. It will only show when the mouse leaves and re-enters the anchor element.

This was already the case when tooltips had no timeout. Now, the behavior is consistent regardless of the timeout value.

Combobox with tabs

Tab components can now be rendered as part of other composite widgets, like Combobox. The following structure should work seamlessly:

<ComboboxProvider>
  <Combobox />
  <ComboboxPopover>
    <TabProvider>
      <TabList>
        <Tab />
      </TabList>
      <TabPanel unmountOnHide>
        <ComboboxList>
          <ComboboxItem />
        </ComboboxList>
      </TabPanel>
    </TabProvider>
  </ComboboxPopover>
</ComboboxProvider>

Other updates

• Added SelectValue component to @ariakit/react-core.
• Fixed inert behavior on older browsers.
• Fixed Portal rendering extra span even when the portal prop is false.
• Fixed Focusable to identify summary as a native tabbable element.
• Added Role.summary component.
• Improved typeahead functionality on unmounted composite items.
• Added new composite property to tab store.
• Added new hideWhenEmpty prop to ComboboxCancel.
• Added support for nested ComboboxList.
• Added unmountOnHide prop to TabPanel.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

Tooltip behavior improvements

When using Tooltip components alongside elements that move focus upon clicking (like MenuButton, which moves focus to its Menu when clicked), the tooltip will now stop from appearing after the user clicks the anchor element. It will only show when the mouse leaves and re-enters the anchor element.

This was already the case when tooltips had no timeout. Now, the behavior is consistent regardless of the timeout value.

Combobox with tabs

Tab components can now be rendered as part of other composite widgets, like Combobox. The following structure should work seamlessly:

<ComboboxProvider>
  <Combobox />
  <ComboboxPopover>
    <TabProvider>
      <TabList>
        <Tab />
      </TabList>
      <TabPanel unmountOnHide>
        <ComboboxList>
          <ComboboxItem />
        </ComboboxList>
      </TabPanel>
    </TabProvider>
  </ComboboxPopover>
</ComboboxProvider>

Other updates

• Fixed inert behavior on older browsers.
• Fixed Portal rendering extra span even when the portal prop is false.
• Fixed Focusable to identify summary as a native tabbable element.
• Added Role.summary component.
• Improved typeahead functionality on unmounted composite items.
• Added new composite property to tab store.
• Added new hideWhenEmpty prop to ComboboxCancel.
• Added support for nested ComboboxList.
• Added unmountOnHide prop to TabPanel.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

• Fixed Focusable to identify summary as a native tabbable element.
• Added new composite property to tab store.
• Improved JSDocs.