• Updated dependencies: @ariakit/[email protected]

Improved performance on composite widgets

Composite item components such as ComboboxItem and SelectItem now render 20-30% faster compared to Ariakit v0.4.13.

This enhancement should decrease the time needed to render large collections of items in composite widgets and improve the Interaction to Next Paint (INP) metric. We're working on further optimizations to make composite widgets even faster in future releases.

Combobox auto-scroll

The Combobox component now scrolls the list to the top while typing when the autoSelect prop is disabled.

The behavior is now consistent with the autoSelect prop, except the first item won't be automatically focused.

Other updates

• Fixed the item method to prevent it from returning items that have been removed from the collection store.
• Fixed the item method when keeping different menu stores in sync.
• Added id prop to composite stores.
• Fixed composite typeahead functionality when rendering virtualized lists.
• Fixed SelectValue to display the fallback when the value is an empty array or string.
• Fixed an issue where composite widgets might not navigate to the correct item when pressing ↑ while the composite base element was focused.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

Improved performance on composite widgets

Composite item components such as ComboboxItem and SelectItem now render 20-30% faster compared to Ariakit v0.4.13.

This enhancement should decrease the time needed to render large collections of items in composite widgets and improve the Interaction to Next Paint (INP) metric. We're working on further optimizations to make composite widgets even faster in future releases.

Combobox auto-scroll

The Combobox component now scrolls the list to the top while typing when the autoSelect prop is disabled.

The behavior is now consistent with the autoSelect prop, except the first item won't be automatically focused.

Other updates

• Fixed the item method to prevent it from returning items that have been removed from the collection store.
• Fixed the item method when keeping different menu stores in sync.
• Added experimental offscreenBehavior prop to collection and composite item components.
• Added id prop to composite stores.
• Fixed composite typeahead functionality when rendering virtualized lists.
• Added useStoreStateObject function.
• Fixed TagInput when pasting content with final newline.
• Fixed SelectValue to display the fallback when the value is an empty array or string.
• Fixed an issue where composite widgets might not navigate to the correct item when pressing ↑ while the composite base element was focused.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

• Fixed the item method to prevent it from returning items that have been removed from the collection store.
• Fixed the item method when keeping different menu stores in sync.
• Added id prop to composite stores.
• Added sortBasedOnDOMPosition function.
• Updated core utils.
• Improved JSDocs.

• Updated dependencies: @ariakit/[email protected]

Accessible composite widgets with invalid activeId

We've improved the logic for composite widgets such as Tabs and Toolbar when the activeId state points to an element that is disabled or missing from the DOM. This can happen if an item is dynamically removed, disabled, or lazily rendered, potentially making the composite widget inaccessible to keyboard users.

Now, when the activeId state is invalid, all composite items will remain tabbable, enabling users to Tab into the composite widget. Once a composite item receives focus or the element referenced by the activeId state becomes available, the roving tabindex behavior is restored.

Other updates

• Fixed regression in focusShift.
• Fixed Radio to prevent onChange from triggering on radios that are already checked.
• Fixed DisclosureContent setting an incorrect animating state value during enter animations.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

Accessible composite widgets with invalid activeId

We've improved the logic for composite widgets such as Tabs and Toolbar when the activeId state points to an element that is disabled or missing from the DOM. This can happen if an item is dynamically removed, disabled, or lazily rendered, potentially making the composite widget inaccessible to keyboard users.

Now, when the activeId state is invalid, all composite items will remain tabbable, enabling users to Tab into the composite widget. Once a composite item receives focus or the element referenced by the activeId state becomes available, the roving tabindex behavior is restored.

Other updates

• Fixed regression in focusShift.
• Fixed Radio to prevent onChange from triggering on radios that are already checked.
• Fixed DisclosureContent setting an incorrect animating state value during enter animations.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

• Fixed regression in focusShift.
• Improved JSDocs.

• Fixed CJS build on Next.js.
• Updated pointer events to initialize with a default pointerType value of mouse.
• Updated dependencies: @ariakit/[email protected]

Tab panels with scroll restoration

Ariakit now supports scroll restoration for the TabPanel component. This allows you to control whether and how the scroll position is restored when switching tabs.

To enable scroll restoration, use the new scrollRestoration prop:

// Restores the scroll position of the tab panel element when switching tabs
<TabPanel scrollRestoration />

By default, the scroll position is restored when switching tabs. You can set it to "reset" to return the scroll position to the top of the tab panel when changing tabs. Use the scrollElement prop to specify a different scrollable element:

// Resets the scroll position of a different scrollable element
<div className="overflow-auto">
  <TabPanel
    scrollRestoration="reset"
    scrollElement={(panel) => panel.parentElement}
  />
</div>

Full height dialogs and on-screen virtual keyboards

A new --dialog-viewport-height CSS variable has been added to the Dialog component. This variable exposes the height of the visual viewport, considering the space taken by virtual keyboards on mobile devices. Use this CSS variable when you have input fields in your dialog to ensure it always fits within the visual viewport:

.dialog {
  max-height: var(--dialog-viewport-height, 100dvh);
}

Overriding composite state for specific methods

The next, previous, up, and down methods of the composite store now accept an object as the first argument to override the composite state for that specific method. For example, you can pass a different activeId value to the next method so it returns the next item based on that value rather than the current active item in the composite store:

const store = useCompositeStore({ defaultActiveId: "item1" });
const item3 = store.next({ activeId: "item2" });

It's important to note that the composite state is not modified when using this feature. The state passed to these methods is used solely for that specific method call.

Other updates

• Fixed the ability to Tab out of a nested Menu within a modal Dialog.
• Fixed CJS build on Next.js.
• Enhanced performance on Dialog backdrops.
• Fixed Tab to pass the rowId prop when used with other composite widgets.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]