Toolkit for building accessible web apps with React
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.
The strokeWidth property on SVG elements rendered by CheckboxCheck, ComboboxCancel, ComboboxDisclosure, DialogDismiss, HovercardDisclosure, PopoverDisclosureArrow, and all components that use any of these now defaults to 1.5px instead of 1.5pt. This should make the strokes slightly thinner.
Remember, you can always override the SVG element rendered by these components by rendering custom children.
A new showMinLength prop has been added to the Combobox component. This prop lets you set the minimum length of the value before the combobox options appear. The default value is 0.
<Combobox showMinLength={2} />
Previously, achieving this behavior required combining three separate props: showOnChange, showOnClick, and showOnKeyPress. We've added this prop to simplify this common task.
These props continue to work as expected as they can be used to customize the behavior for each distinct event.
We've added the ability to render CompositeItem as an input element using the render prop:
<CompositeItem render={<input />} />
Before, you could only do this with the experimental CompositeInput component. Now, this functionality is integrated directly into the CompositeItem component.
Dialog calling autoFocusOnHide twice.@ariakit/[email protected]
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.
@ariakit/[email protected]
ref.CompositeItem occasionally failing to set the activeId state on focus.unmountOnHide prop not working on TabPanel without tabId.v0.4.2 that caused nested tabs to stop working.combobox property to tab store.@ariakit/[email protected]
ref.CompositeItem occasionally failing to set the activeId state on focus.unmountOnHide prop not working on TabPanel without tabId.v0.4.2 that caused nested tabs to stop working.combobox property to tab store.@ariakit/[email protected]
v0.4.2 that caused nested tabs to stop working.combobox property to tab store.defaultValue.@ariakit/test/playwright path with Playwright-specific query utilities.@ariakit/[email protected]
When using Tooltip components alongside elements that move focus upon clicking (like MenuButton, which moves focus to its Menu when clicked), the tooltip will now stop from appearing after the user clicks the anchor element. It will only show when the mouse leaves and re-enters the anchor element.
This was already the case when tooltips had no timeout. Now, the behavior is consistent regardless of the timeout value.
Tab components can now be rendered as part of other composite widgets, like Combobox. The following structure should work seamlessly:
<ComboboxProvider>
<Combobox />
<ComboboxPopover>
<TabProvider>
<TabList>
<Tab />
</TabList>
<TabPanel unmountOnHide>
<ComboboxList>
<ComboboxItem />
</ComboboxList>
</TabPanel>
</TabProvider>
</ComboboxPopover>
</ComboboxProvider>
SelectValue component to @ariakit/react-core.inert behavior on older browsers.span even when the portal prop is false.Focusable to identify summary as a native tabbable element.Role.summary component.composite property to tab store.hideWhenEmpty prop to ComboboxCancel.ComboboxList.unmountOnHide prop to TabPanel.@ariakit/[email protected]
When using Tooltip components alongside elements that move focus upon clicking (like MenuButton, which moves focus to its Menu when clicked), the tooltip will now stop from appearing after the user clicks the anchor element. It will only show when the mouse leaves and re-enters the anchor element.
This was already the case when tooltips had no timeout. Now, the behavior is consistent regardless of the timeout value.
Tab components can now be rendered as part of other composite widgets, like Combobox. The following structure should work seamlessly:
<ComboboxProvider>
<Combobox />
<ComboboxPopover>
<TabProvider>
<TabList>
<Tab />
</TabList>
<TabPanel unmountOnHide>
<ComboboxList>
<ComboboxItem />
</ComboboxList>
</TabPanel>
</TabProvider>
</ComboboxPopover>
</ComboboxProvider>
inert behavior on older browsers.span even when the portal prop is false.Focusable to identify summary as a native tabbable element.Role.summary component.composite property to tab store.hideWhenEmpty prop to ComboboxCancel.ComboboxList.unmountOnHide prop to TabPanel.@ariakit/[email protected]