ariakit

Modal Combobox

The Combobox components now support the modal prop on ComboboxPopover.

When a modal combobox is expanded, users can interact with and tab through all the combobox controls, including Combobox, ComboboxDisclosure, and ComboboxCancel, even if they're rendered outside the popover. The rest of the page will be inert.

Controlling the auto-select functionality of Combobox

The Combobox component now includes a new getAutoSelectId prop. This allows you to specify the ComboboxItem that should be auto-selected if the autoSelect prop is true.

By default, the first enabled item is auto-selected. Now you can customize this behavior by returning the id of another item from getAutoSelectId:

<Combobox
  autoSelect
  getAutoSelectId={(items) => {
    // Auto select the first enabled item with a value
    const item = items.find((item) => {
      if (item.disabled) return false;
      if (!item.value) return false;
      return true;
    });
    return item?.id;
  }}
/>

Styling Combobox without an active descendant

The Combobox component now includes a data-active-item attribute when it's the only active item in the composite widget. In other words, when no ComboboxItem is active and the focus is solely on the combobox input.

You can use this as a CSS selector to style the combobox differently, providing additional affordance to users who pressed ↑ on the first item or ↓ on the last item. This action would place both virtual and actual DOM focus on the combobox input.

.combobox[data-active-item] {
  outline-width: 2px;
}

Other updates

• Fixed useTabStore return value not updating its own reference.
• Fixed keyboard navigation on Combobox when the content element is a grid.
• Fixed ComboboxDisclosure to update its aria-expanded attribute when the combobox expands.
• Fixed Maximum update depth exceeded warning when rendering multiple collection items on the page.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

• Fixed Maximum update depth exceeded warning when rendering multiple collection items on the page.
• Improved JSDocs.

Overwriting aria-selected value on ComboboxItem

It's now possible to pass a custom aria-selected value to the ComboboxItem component, overwriting the internal behavior.

Limiting slide on popovers

When components like Popover and Menu with the slide prop are positioned to the right or left of the anchor element, they will now cease to slide across the screen, disengaged from the anchor element, upon reaching the edge of said element.

Other updates

• Fixed blurOnHoverEnd set to false not keeping submenus open.
• Fixed scroll jump on Safari when selecting a CompositeItem.
• Fixed preserveTabOrderAnchor on nested menus.
• Fixed focus behavior when using the preserveTabOrder prop.

Overwriting aria-selected value on ComboboxItem

It's now possible to pass a custom aria-selected value to the ComboboxItem component, overwriting the internal behavior.

Limiting slide on popovers

When components like Popover and Menu with the slide prop are positioned to the right or left of the anchor element, they will now cease to slide across the screen, disengaged from the anchor element, upon reaching the edge of said element.

Other updates

• Fixed blurOnHoverEnd set to false not keeping submenus open.
• Fixed scroll jump on Safari when selecting a CompositeItem.
• Fixed preserveTabOrderAnchor on nested menus.
• Fixed focus behavior when using the preserveTabOrder prop.
• Updated dependencies: @ariakit/[email protected]

Automatic role on ComboboxGroup

The ComboboxGroup component now automatically assigns the role attribute as rowgroup if it's nestled within a ComboboxPopover or ComboboxList wrapper that has the role attribute set to grid.

Custom submenu auto focus

When opening nested Menu components with Enter, Space, or arrow keys, the first tabbable element will now receive focus, even if it's not a MenuItem element. This should enable custom popups that behave like submenus, but use different semantics.

Hovercard display timeout

The Hovercard, Menu, and Tooltip components now display synchronously when the timeout or showTimeout states are set to 0. This should stop submenus from vanishing for a few frames prior to displaying a new menu when hovering over menu items in sequence.

Other updates

• Fixed CollectionItem elements getting out of order when composing stores.
• Fixed MenuButton not assigning the correct role attribute when used within a ComboboxList element.
• Fixed MenuItem with an explicit focusOnHover prop not moving focus properly.
• Fixed blurOnHoverEnd not working on submenu triggers.
• Fixed Dialog not respecting the controlled open state.
• Fixed unmounted SelectPopover not re-opening when its open state is initially set to true.
• Fixed TypeScript build errors.
• Fixed focus order when using Popover with the portal prop with VoiceOver.
• Updated dependencies: @ariakit/[email protected]

• Updated dependencies: @ariakit/[email protected]

Automatic role on ComboboxGroup

The ComboboxGroup component now automatically assigns the role attribute as rowgroup if it's nestled within a ComboboxPopover or ComboboxList wrapper that has the role attribute set to grid.

Custom submenu auto focus

When opening nested Menu components with Enter, Space, or arrow keys, the first tabbable element will now receive focus, even if it's not a MenuItem element. This should enable custom popups that behave like submenus, but use different semantics.

Hovercard display timeout

The Hovercard, Menu, and Tooltip components now display synchronously when the timeout or showTimeout states are set to 0. This should stop submenus from vanishing for a few frames prior to displaying a new menu when hovering over menu items in sequence.

Other updates

• Fixed CollectionItem elements getting out of order when composing stores.
• Fixed MenuButton not assigning the correct role attribute when used within a ComboboxList element.
• Fixed MenuItem with an explicit focusOnHover prop not moving focus properly.
• Fixed blurOnHoverEnd not working on submenu triggers.
• Fixed Dialog not respecting the controlled open state.
• Fixed unmounted SelectPopover not re-opening when its open state is initially set to true.
• Fixed TypeScript build errors.
• Fixed focus order when using Popover with the portal prop with VoiceOver.
• Updated dependencies: @ariakit/[email protected]

• Fixed CollectionItem elements getting out of order when composing stores.
• Fixed unmounted SelectPopover not re-opening when its open state is initially set to true.
• Fixed TypeScript build errors.

• Updated dependencies: @ariakit/[email protected]

Multi-selectable Combobox

We've added support for the Combobox with multiple selection capabilities using a new selectedValue prop, along with defaultSelectedValue and setSelectedValue.

This works similarly to the value prop on Select components. If it receives an array, the combobox will allow multiple selections. By default, it's a string that represents the selected value in a single-select combobox.

Check out the Multi-selectable Combobox example to see it in action.

New Combobox components

This version introduces new Combobox components:

• ComboboxLabel: This renders a label element for a Combobox, with the htmlFor prop set automatically.
• ComboboxItemCheck: This displays a checkmark for a ComboboxItem when the item is selected.

Other updates

• Added resetValueOnSelect state to Combobox components.
• Added selectValueOnClick prop to ComboboxItem.
• Fixed SelectItem rendering an aria-selected attribute even when the value prop is omitted.
• Updated dependencies: @ariakit/[email protected]

Multi-selectable Combobox

We've added support for the Combobox with multiple selection capabilities using a new selectedValue prop, along with defaultSelectedValue and setSelectedValue.

This works similarly to the value prop on Select components. If it receives an array, the combobox will allow multiple selections. By default, it's a string that represents the selected value in a single-select combobox.

Check out the Multi-selectable Combobox example to see it in action.

New Combobox components

This version introduces new Combobox components:

• ComboboxLabel: This renders a label element for a Combobox, with the htmlFor prop set automatically.
• ComboboxItemCheck: This displays a checkmark for a ComboboxItem when the item is selected.

Other updates

• Added resetValueOnSelect state to Combobox components.
• Added selectValueOnClick prop to ComboboxItem.
• Fixed SelectItem rendering an aria-selected attribute even when the value prop is omitted.
• Updated dependencies: @ariakit/[email protected]

Multi-selectable Combobox

We've added support for the Combobox with multiple selection capabilities using a new selectedValue prop, along with defaultSelectedValue and setSelectedValue.

This works similarly to the value prop on Select components. If it receives an array, the combobox will allow multiple selections. By default, it's a string that represents the selected value in a single-select combobox.

Check out the Multi-selectable Combobox example to see it in action.

Other updates

• Added resetValueOnSelect state to Combobox components.

• Updated dependencies: @ariakit/[email protected]

Expanding Menubar

The Menubar component will now only expand if there's another menu already expanded in the same menubar.

Internal data attribute changes

Just like the change in v0.3.6 that removed the data-command and data-disclosure attributes from elements, this update stops the data-composite-hover attribute from infiltrating composite item elements in the DOM. We're mentioning this in the changelog as some users might have snapshot tests that require updating.

Other updates

• Fixed setSelectionRange error when used with unsupported input types.
• Fixed MenuButton with showOnHover not updating the activeId state when hovered.
• Updated onFocusVisible element type on Focusable from Element to HTMLElement.
• Updated dependencies: @ariakit/[email protected]

Expanding Menubar

The Menubar component will now only expand if there's another menu already expanded in the same menubar.

Internal data attribute changes

Just like the change in v0.3.6 that removed the data-command and data-disclosure attributes from elements, this update stops the data-composite-hover attribute from infiltrating composite item elements in the DOM. We're mentioning this in the changelog as some users might have snapshot tests that require updating.

Other updates

• Fixed setSelectionRange error when used with unsupported input types.
• Fixed MenuButton with showOnHover not updating the activeId state when hovered.
• Updated onFocusVisible element type on Focusable from Element to HTMLElement.
• Updated dependencies: @ariakit/[email protected]

• Fixed setSelectionRange error when used with unsupported input types.

Data attributes for duplicate components

The internal logic that identifies duplicate components has been refined. This implies that some internal data-* attributes will no longer seep into the rendered DOM elements. If you're doing snapshot tests on the DOM generated by Ariakit components, you should see the data-command and data-disclosure attributes removed.

Multiple disclosure and anchor elements

The disclosureElement and anchorElement states on Disclosure, Popover, and Menu, along with related components, are now set only upon interaction.

This change enables us to support multiple disclosure/anchor elements for the same contentElement (typically the popup element) when triggered by hover or focus.

Expanding Menubar with focus

Adjacent Menu popups will now open when the focus moves through MenuItem elements in a Menubar. Before, they would only open when another Menu was already visible.

Maintaining Popover tab order

Popover and related components now automatically set the new preserveTabOrderAnchor prop as the disclosure element.

This ensures that, when the portal prop is enabled, the tab order will be preserved from the disclosure to the content element even when the Popover component is rendered in a different location in the React tree.

New Menubar components

This version introduces a new Menubar module that can be used without the MenubarProvider wrapper.

Other updates

• Fixed Hovercard when used with multiple HovercardAnchor elements.
• Added new preserveTabOrderAnchor prop to Portal and related components.
• Added new tabbable prop to CompositeItem and related components.
• Added new blurOnHoverEnd prop to CompositeHover and related components.
• Updated dependencies: @ariakit/[email protected]

• Updated dependencies: @ariakit/[email protected]

Data attributes for duplicate components

The internal logic that identifies duplicate components has been refined. This implies that some internal data-* attributes will no longer seep into the rendered DOM elements. If you're doing snapshot tests on the DOM generated by Ariakit components, you should see the data-command and data-disclosure attributes removed.

Multiple disclosure and anchor elements

The disclosureElement and anchorElement states on Disclosure, Popover, and Menu, along with related components, are now set only upon interaction.

This change enables us to support multiple disclosure/anchor elements for the same contentElement (typically the popup element) when triggered by hover or focus.

Expanding Menubar with focus

Adjacent Menu popups will now open when the focus moves through MenuItem elements in a Menubar. Before, they would only open when another Menu was already visible.

Maintaining Popover tab order

Popover and related components now automatically set the new preserveTabOrderAnchor prop as the disclosure element.

This ensures that, when the portal prop is enabled, the tab order will be preserved from the disclosure to the content element even when the Popover component is rendered in a different location in the React tree.

New Menubar components

This version introduces a new Menubar module that can be used without the MenubarProvider wrapper.

Other updates

• Fixed Hovercard when used with multiple HovercardAnchor elements.
• Added new preserveTabOrderAnchor prop to Portal and related components.
• Added new tabbable prop to CompositeItem and related components.
• Added new blurOnHoverEnd prop to CompositeHover and related components.
• Updated dependencies: @ariakit/[email protected]

• Added new menubar module.