Ariakit core
Important: This package is an internal dependency of Ariakit and does not follow semantic versioning, meaning breaking changes may occur in patch and minor versions. You probably want to use @ariakit/react instead.
ariakitnpm i @ariakit/coreFollow the instructions on the contributing guide.
valid state not updating on Form.onSubmit and onValidate.item method to prevent it from returning items that have been removed from the collection store.item method when keeping different menu stores in sync.id prop to composite stores.sortBasedOnDOMPosition function.focusShift.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.
getScrollingElement to consider overflow: clip.When rendering Tab inside Combobox or Select, it now waits for the closing animation to finish before restoring the tab with the selected item. This should prevent an inconsistent UI where the tab is restored immediately while the content is still animating out. See Select with Combobox and Tabs.
listElement state to the Select store.closest, matches.undo utils.isTextbox, getTextboxValue.getInputType.resetValue method to combobox store.autoFocusOnHide behaviorPreviously, 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.
v0.4.2 that caused nested tabs to stop working.combobox property to tab store.defaultValue.Focusable to identify summary as a native tabbable element.composite property to tab store.disclosure property to disclosure stores.This version enhances support for CSS animations and transitions on Ariakit components that use Disclosure. This includes Dialog, Popover, Combobox, Select, Hovercard, Menu, and Tooltip.
These components now support enter and leave transitions and animations right out of the box, eliminating the need to provide an explicit animated prop. If an enter animation is detected, the component will automatically wait for a leave animation to complete before unmounting or hiding itself.
Use the [data-enter] selector for CSS transitions. For CSS animations, use the newly introduced [data-open] selector. The [data-leave] selector can be used for both transitions and animations.
grid roleBREAKING if you're manually setting the role="grid" prop on a composite widget.
Ariakit automatically assigns the role prop to all composite items to align with the container role. For example, if SelectPopover has its role set to listbox (which is the default value), its owned SelectItem elements will automatically get their role set to option.
In previous versions, this was also valid for composite widgets with a grid role, where the composite item element would automatically be given role="gridcell". This is no longer the case, and you're now required to manually pass role="gridcell" to the composite item element if you're rendering a container with role="grid".
Before:
<SelectPopover role="grid">
<SelectRow> {/* Automatically gets role="row" */}
<SelectItem> {/* Automatically gets role="gridcell" */}After:
<SelectPopover role="grid">
<SelectRow> {/* Still gets role="row" */}
<SelectItem role="gridcell">This change is due to the possibility of rendering a composite item element with a different role as a child of a static div with role="gridcell", which is a valid and frequently used practice when using the grid role. As a result, you no longer have to manually adjust the role prop on the composite item:
<SelectPopover role="grid">
<SelectRow>
<div role="gridcell">
<SelectItem render={<button />}>Previously, you had to explicitly pass role="button" to the SelectItem component above, otherwise it would automatically receive role="gridcell", leading to an invalid accessibility tree.
removeUndefinedValues utility function.disclosure property to disclosure stores.Components like MenuItem, ComboboxItem, and SelectItem should now offer improved performance when rendering large collections.
CompositeItem triggering blur on focus.Maximum update depth exceeded warning when rendering multiple collection items on the page.CollectionItem elements getting out of order when composing stores.SelectPopover not re-opening when its open state is initially set to true.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.
resetValueOnSelect state to Combobox components.setSelectionRange error when used with unsupported input types.menubar module.#2935 Fixed TypeScript declaration files in CommonJS projects using NodeNext for moduleResolution.
#2945 Added new disabledFromProps function to @ariakit/core/utils/misc.
#2948 Added "use client" directive to all modules.
Improved JSDocs.
#2909 Fixed Disclosure and related components not waiting for the exit animation to complete before hiding the content element.
Improved JSDocs.
#2801 Fixed values.slice error that would occur when clicking on FormCheckbox that uses an integer-like field name.#2783 BREAKING (This should affect very few people): The select and menu props on useComboboxStore have been removed. If you need to compose Combobox with Select or Menu, use the combobox prop on useSelectStore or useMenuStore instead.
#2745 Component stores will now throw an error if they receive another store prop in conjunction with default prop values.
#2782 Fixed form store not synchrozining validate and submit callbacks with another form store through the store property.
#2783 Component store objects now contain properties for the composed stores passed to them as props. For instance, useSelectStore({ combobox }) will return a combobox property if the combobox prop is specified.
#2785 Added parent and menubar properties to the menu store. These properties are automatically set when rendering nested menus or menus within a menubar.
Now, it also supports rendering nested menus that aren't nested in the React tree. In this case, you would have to supply the parent menu store manually to the child menu store.
These properties are also included in the returned menu store object, allowing you to verify whether the menu is nested. For instance:
const menu = useMenuStore(props);
const isNested = Boolean(menu.parent);#2796 Composed store props such as useSelectStore({ combobox }) now accept null as a value.
#2709 Fixed addGlobalEventListener function when used in a document with sandbox iframes.Removed private properties from the store object. (#2706)
Instead of accessing store.setup, store.sync, store.subscribe, etc. directly, use the equivalent functions exported by the @ariakit/core/utils/store module.
EmptyObject type export to @ariakit/core/utils/types. (#2553)defaultItems passed to the collection store being overriden when new items are added. (#2559)disclosure prop to the Disclosure store. (#2518)types field to proxy package.json files. (#2489).cjs and .js extensions to paths in proxy package.json files to support bundlers that can't automaically resolve them. (#2487)Updated the SelectPopover component so the composite and typeahead props are automatically set to false when combining it with a Combobox component using the combobox prop from the select store. (#2428)
This means you'll not need to explicitly pass composite={false} when building a Select with Combobox component.
Updated getScrollingElement function so it also considers horizontal scrolling elements.
Fixed StringWithValue utility type.
Fixed activeId state on Tab not updating correctly when setting selectedId with the Next.js App Router. (#2443)
useHovercardStore and useTooltipStore not updating the state when the timeout, showTimeout or hideTimeout props changed. (#2421)BREAKING: Moved props from the usePopoverStore hook to the Popover component: fixed, gutter, shift, flip, slide, overlap, sameWidth, fitViewport, arrowPadding, overflowPadding, getAnchorRect, renderCallback (renamed to updatePosition). (#2279)
The exception is the placement prop that should still be passed to the store.
Before:
const popover = usePopoverStore({
placement: "bottom",
fixed: true,
gutter: 8,
shift: 8,
flip: true,
slide: true,
overlap: true,
sameWidth: true,
fitViewport: true,
arrowPadding: 8,
overflowPadding: 8,
getAnchorRect: (anchor) => anchor?.getBoundingClientRect(),
renderCallback: (props) => props.defaultRenderCallback(),
});
<Popover store={popover} />;After:
const popover = usePopoverStore({ placement: "bottom" });
<Popover
store={popover}
fixed
gutter={8}
shift={8}
flip
slide
overlap
sameWidth
fitViewport
arrowPadding={8}
overflowPadding={8}
getAnchorRect={(anchor) => anchor?.getBoundingClientRect()}
updatePosition={(props) => props.updatePosition()}
/>;This change affects all the hooks and components that use usePopoverStore and Popover underneath: useComboboxStore, ComboboxPopover, useHovercardStore, Hovercard, useMenuStore, Menu, useSelectStore, SelectPopover, useTooltipStore, Tooltip.
With this change, the underlying @floating-ui/dom dependency has been also moved to the Popover component, which means it can be lazy loaded. See the Lazy Popover example.
Updated isFocusable function to return false when the element is inert or is a descendant of an inert element. (#2339)
Fixed build target. (#2355)
Updated JSDocs.
Added support for native radio buttons within forms, that work with roving tabindex, to all focus utilities. (#2313)
Updated validate and submit callbacks on Form so they always run in a consistent order. (#2319)
Marked internal store functions as deprecated/experimental. (#2316)
isFalsyBooleanCallback method.defaultValue prop back to useRadioStore. (#2265)Updated package names to include the @ariakit scope, providing a more distinct and specific namespace for our packages.
Additionally, we've made a change to the versioning system, moving from v2.0.0-beta.x to v0.x.x. This alteration means that although the library is still in beta, we can release breaking changes in minor versions without disrupting projects that don't set exact versions in their package.json.
- npm i ariakit
+ npm i @ariakit/react.cjs extension).