ariakit/ariakit @ariakit/react-core@0.4.12

on GitHub

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.
• Updated the useAttribute hook to handle cases when the attribute is removed from the element.
• Fixed Tab to pass the rowId prop when used with other composite widgets.
• Improved JSDocs.
• Updated dependencies: @ariakit/core@0.4.11