@ariakit/test@0.3.16

• Added React 19 to peer dependencies.
• Updated dependencies: @ariakit/core@0.4.7

@ariakit/react@0.4.7

New SelectValue component

A SelectValue component is now available. This is a value component, which means it doesn't render any DOM elements and, as a result, doesn't take HTML props. Optionally, it can use a fallback prop as a default value if the store's value is undefined:

<Select>
  <SelectValue fallback="Select a value" />
  <SelectArrow />
</Select>

Other updates

• Added React 19 to peer dependencies.
• Fixed autoSelect behavior with virtualized lists on mobile devices.
• Improved JSDocs.
• Updated dependencies: @ariakit/react-core@0.4.7

@ariakit/react-core@0.4.7

• Added React 19 to peer dependencies.
• Fixed autoSelect behavior with virtualized lists on mobile devices.
• Improved JSDocs.
• Updated dependencies: @ariakit/core@0.4.7

@ariakit/core@0.4.7

• Improved JSDocs.

@ariakit/test@0.3.15

• Updated dependencies: @ariakit/core@0.4.6

@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

@ariakit/react-core@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/core@0.4.6

@ariakit/core@0.4.6

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

@ariakit/test@0.3.14

• Added within function to queries.
• Updated dependencies: @ariakit/core@0.4.5

@ariakit/react@0.4.5

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/react-core@0.4.5