fix(deps): update dependency @ariakit/react to v0.4.38

[renovate]

ℹ️ Note

This PR body was truncated due to platform limits.

This PR contains the following updates:

Package	Change	Age	Confidence
@ariakit/react (source)	0.4.23 → 0.4.38

---

Release Notes

ariakit/ariakit (@​ariakit/react)

v0.4.38

Compare Source

Keyboard activation dispatches a PointerEvent

The click that Command synthesizes for Enter and Space on an element that isn't natively clickable is now a PointerEvent built by the window that owns the element, reporting pointerId: -1 and an empty pointerType. That is what Chromium, Firefox, and WebKit dispatch for a click no pointer caused, so a handler reading event.pointerType or checking event instanceof PointerEvent now sees the same shape it sees on a native button.

<Ariakit.Button
  render={<div />}
  onClick={(event) => {
    // After Enter or Space: was false, now true.
    event.nativeEvent instanceof PointerEvent;
  }}
/>

This reaches every component built on Command: Button, Checkbox, Radio, CompositeItem, MenuItem, MenuItemCheckbox, MenuItemRadio, ComboboxItem, SelectItem, Tab, ToolbarItem, ToolbarContainer, Disclosure, DialogDisclosure, DialogDismiss, PopoverDisclosure, PopoverDismiss, HovercardDisclosure, HovercardDismiss, MenuButton, MenuDismiss, Select, SelectDismiss, ComboboxSelect, ComboboxCancel, ComboboxDisclosure, ComboboxDismiss, FormSubmit, FormReset, FormPush, FormRemove, FormCheckbox, and FormRadio.

Other updates

• Fixed ComboboxItem so an explicit focusOnHover boolean or callback value neither activates an item on hover nor clears the active item on hover end while the combobox is closed.
• Fixed ComboboxList and ComboboxPopover, which builds on it, not moving focus back to the combobox when the list itself receives focus and the document contains a form named activeElement.
• Fixed keyboard activation on non-native Command elements and components built on Command, such as Button, so their synthetic clicks use the element's owner window for view and are composed.
• Fixed Composite and components built on it, such as Menu and Toolbar, building the events they synthesize with the outer window's constructors, so an item inside a same-origin iframe received events that failed instanceof against that frame's own interfaces.
• Fixed Portal and components built on it, such as Tooltip, as well as Combobox, when the document contains a form named defaultView.
• Fixed Dialog throwing instead of opening when it renders a form with a control named self, document, or ownerDocument, and on Safari throwing before the dialog was ever opened, so the page failed without anyone interacting with it.
• Fixed Dialog and components built on it, such as Popover and Menu, pulling focus back from an element the application focused outside them during placement when the document contains a form named activeElement.
• Fixed Focusable and components built on it, such as Tab and Button, so a middle click no longer opens the destination of a disabled element rendered as a link, including one kept reachable by accessibleWhenDisabled, which Tab enables by default.
• Fixed Dialog and components built on it, such as Popover and Menu, failing to return focus to the element that opened it when the document contains a form named activeElement.
• Fixed SelectItem so an authored focusOnHover callback no longer runs while the select is closed, keeping its side effects from activating an item, changing the value, or moving focus in a collapsed always-visible SelectList. Thanks to @​waterWang.
• Fixed Tab not receiving DOM focus when the selected tab changes while another tab holds focus and the document contains a form named activeElement.
• Fixed TooltipAnchor, HovercardAnchor, and MenuButton to respect the resolved disabled and accessibleWhenDisabled state on hover in any composition order. Thanks to @​btzr-io and @​mayank99.
• Updated dependencies: @ariakit/react-components@0.5.0

v0.4.37

Compare Source

Composite element state

Composite stores now expose the compositeElement state and setCompositeElement method. The new compositeElementInFocusOrder option controls whether arrow key navigation can move focus to the composite element:

<CompositeProvider compositeElementInFocusOrder>
  <Composite>
    <CompositeItem>Item 1</CompositeItem>
    <CompositeItem>Item 2</CompositeItem>
  </Composite>
</CompositeProvider>

These APIs are also available on stores for Combobox, Menu, Menubar, Radio, Select, Tab, and Toolbar widgets.

ComboboxSelect popups take focus on every open

A ComboboxPopover that belongs to a ComboboxSelect now takes focus whenever it opens, including when it is opened with defaultOpen or programmatically while focus is somewhere else. Previously, unless the popup rendered a ComboboxInput, it took focus only when the select itself was focused, so a popup that opened any other way left the user outside an open listbox, with no keyboard navigation and with the selected item still out of view.

<ComboboxProvider defaultOpen defaultSelectedValue="Watermelon">
  <ComboboxSelect />
  <ComboboxPopover>
    <ComboboxItem value="Apple" />
    {/* Watermelon becomes the active item, ready for the arrow keys. */}
    <ComboboxItem value="Watermelon" />
  </ComboboxPopover>
</ComboboxProvider>

A popup that opens outside the viewport is now scrolled into view, since taking focus is what moves the page. To keep a popup from taking focus, and with it the scroll, pass autoFocusOnShow={false}.

Explicitly undefined props no longer override computed defaults

Passing undefined to a component prop now behaves exactly like omitting it, so the component keeps the value it computes for itself.

This mainly affects wrapper components that forward optional props positionally, which is the common way to wrap an Ariakit component:

function MyHovercard({ autoFocusOnShow, ...props }: MyHovercardProps) {
  return <Ariakit.Hovercard autoFocusOnShow={autoFocusOnShow} {...props} />;
}

Rendering <MyHovercard /> no longer forces autoFocusOnShow to true on Hovercard, so hovering the anchor stops pulling keyboard focus into the card. The same applies to every prop a component computes for itself, including focusable on TabPanel, clickOnEnter on Checkbox, and children, role, type and aria-* fallbacks, so it is worth auditing wrappers that forward props positionally.

An explicitly defined value still wins, so <Hovercard autoFocusOnShow={false} /> keeps working as before.

Other updates

• Changed Dialog to scroll its initially focused element just far enough to become visible, rather than centering it.
• Changed Dialog and components built on it, such as Popover and Menu, to keep a mounted PopoverDisclosure or similar trigger as the opener when shown programmatically, instead of the element that happened to have focus, which also means the content is positioned against that trigger and returns focus to it when it closes.
• Fixed ComboboxSelect to center the initially selected item when its popup opens.
• Fixed ComboboxSelect and Combobox moving DOM focus off the collapsed control and into their popup, which was visible when the options stayed on screen next to it, such as with an alwaysVisible ComboboxList.
• Fixed ComboboxSelect reporting aria-expanded="false" while its popup was open.
• Fixed composite widgets scrolling the page while their popup was still being positioned, which affects Combobox, Select and Menu. The page still moves when that is the only way to bring the item into view, such as a popup taller than the viewport.
• Fixed Dialog and components built on it, such as Popover and Menu, overwriting the element assigned with setDisclosureElement when they open.
• Fixed Dialog and components built on it, such as ComboboxPopover, so delayed auto-focus no longer pulls focus back after focus has moved outside the dialog.
• Fixed components such as Button and Checkbox copying inherited enumerable Object.prototype properties onto the element they render.
• Fixed MenuItem hover focus so partially visible menubar and submenu items no longer scroll the page or menu under the pointer.
• Fixed Menu to preserve DOM focus and bring a logical item into view when React replaces its element while the popup is positioning.
• Fixed mergeProps so an own __proto__ prop cannot replace the merged props object's prototype in rendered Role elements.
• Fixed Focusable components, including CompositeItem and ToolbarItem, not receiving data-focus-visible on modified navigation keys such as Alt+ArrowDown between composite items or Ctrl+Home on a grid.
• Fixed focus and scroll moving into a popup before a custom updatePosition that calls the supplied default function has finished its own work, which affects Popover and components built on it such as Menu and Select.
• Fixed components such as Button and Checkbox treating values carried by a __proto__ prop passed directly to them, such as one coming from parsed JSON, as props they were never given.
• Fixed Checkbox and other components composed with render to preserve computed props when a render element receives undefined. Thanks to @​Jackardios.
• Fixed Focusable treating Safari's Option+Tab navigation as a pointer interaction, so components built on it such as Button and TooltipAnchor now receive data-focus-visible when focus reaches them that way. On macOS, Option+Tab is how Safari moves focus between all focusable elements while the system keyboard navigation setting is off.
• Updated dependencies: @ariakit/react-components@0.4.1

v0.4.36

Compare Source

New Combobox Select components

Added ComboboxSelect, ComboboxSelectLabel, ComboboxSelectArrow, ComboboxInput, ComboboxSelectedValue, ComboboxItemSelected, ComboboxDismiss, and ComboboxHeading. Together, these APIs let standard and filterable selects use one Combobox store:

<ComboboxProvider>
  <ComboboxSelectLabel>Favorite fruit</ComboboxSelectLabel>
  <ComboboxSelect />
  <ComboboxPopover>
    <ComboboxLabel>Search fruits</ComboboxLabel>
    <ComboboxInput />
    <ComboboxList>
      <ComboboxItem value="Apple" />
      <ComboboxItem value="Banana" />
    </ComboboxList>
  </ComboboxPopover>
</ComboboxProvider>

For filterable selects, the Combobox store now distinguishes the text in the input from its selectedValue state. Use inputValue, defaultInputValue, and setInputValue to control this text, resetInputValue to restore its initial value, and ComboboxInputValue to read it from the component tree.

The Combobox store also gained the selectOnMove option, which selects the active item while moving through the list with the popover open. It now exposes the inputElement, labelElement, selectElement, and selectLabelElement state, along with their respective setters.

To make keyboard selection previews easy to cancel, ComboboxPopover now supports a resetOnEscape prop. It defaults to selectOnMove and restores the selected value captured before the first item movement when the popover accepts Escape and its cancelable close event isn't prevented. Selection changes made before any item movement become part of the value Escape restores.

Filterable selects built with these APIs are also more efficient. In a 243-option benchmark, restoring the full list after clearing the filter with one Combobox store reduced scripting time by 50% and total time by 43% compared with separate Select and Combobox stores.

Thanks to @​lessp for reporting the performance issue, @​patrikholcak for investigating it, and @​georgekaran for providing the workaround and investigating the shared Combobox and Select behavior.

Added MenuAnchor, SelectAnchor, and ComboboxAnchor

Added MenuAnchor, SelectAnchor, and ComboboxAnchor components. These components take precedence over their respective disclosure or combobox elements:

<MenuProvider>
  <MenuButton>Actions</MenuButton>
  <MenuAnchor>Position the menu here</MenuAnchor>
  <Menu>Menu items</Menu>
</MenuProvider>

Close popups across existing same-origin iframe boundaries

The Dialog, Popover, ComboboxPopover, Hovercard, Menu, SelectPopover, and Tooltip components now close when focus moves from an embedded same-origin popup to an ancestor document or a pointer interaction occurs in an existing sibling frame. Focus stays on the outside target, interactions in contained frames stay inside, and true browser or application window blur remains ignored.

Thanks to @​emillaine for reporting the issue, @​ciampo for proposing the pointer behavior, and @​donaldpipowitch for providing the iframe click reproduction.

Other updates

• Fixed Combobox inline autocomplete to preserve a user-adjusted caret when asynchronously rendered results update.
• Fixed ComboboxList and ComboboxPopover so they use the closest ComboboxHeading, ComboboxSelectLabel, or ComboboxLabel as their accessible name unless they are explicitly named. Thanks to @​georgekaran.
• Fixed ComboboxList to render with tabIndex={-1} and move focus back to the combobox control when the list receives focus, preventing unintended Tab stops and focus loops.
• Fixed clicking the empty space of a ComboboxPopover moving focus into the popover and leaving arrow keys unable to move through the items.
• Fixed a ComboboxPopover with modal enabled not closing when pressing Escape while it renders a ComboboxInput or Combobox element inside it.
• Fixed ComboboxPopover to honor consumer-provided getPersistentElements callbacks, so interacting with the returned elements no longer dismisses a non-modal popover. Thanks to @​georgekaran.
• Fixed CompositeItem, and components based on it such as ComboboxItem and SelectItem, briefly rendering as tabbable while a composite widget with virtualFocus enabled mounts.
• Fixed disabled Select and ComboboxSelect controls so their values are omitted from form submission when accessibleWhenDisabled is used or the visible control is rendered with an element that doesn't support the native disabled attribute. Thanks to @​georgekaran.
• Fixed PopoverDisclosure so it no longer overrides a separate PopoverAnchor as the popover positioning anchor. Thanks to @​bengry.
• Updated dependencies: @ariakit/react-components@0.4.0

v0.4.35

Compare Source

This version adds custom typeahead labels for composite items and selected-state rendering for select items. It also improves disabled radio groups, hidden popover performance, nested Esc handling, dialogs across portals and shadow roots, multi-select combobox form values, typeahead with unmounted options, and composite virtual focus.

Custom typeahead text for composite items

The new typeaheadText prop lets CompositeItem use an explicit label for typeahead matching when its rendered content starts with an emoji or other decoration.

<SelectItem typeaheadText="Canada" value="Canada">
  <span aria-hidden>🇨🇦</span> Canada
</SelectItem>

Set typeaheadText to an empty string to exclude an item from typeahead matching. The prop is also available on these components exported by @ariakit/react and built on CompositeItem: ComboboxItem, FormRadio, MenuItem, MenuItemCheckbox, MenuItemRadio, Radio, SelectItem, Tab, ToolbarContainer, ToolbarInput, and ToolbarItem.

Thanks to @​Dremora for reporting the issue and providing the reproduction, and @​georgekaran for the investigation and implementation work that informed this solution.

Skip position updates on hidden popovers

Popovers that stay mounted while closed, such as Popover, Tooltip, Hovercard, Menu, SelectPopover, and ComboboxPopover, no longer set up position auto-updates while hidden, unless a custom updatePosition callback is provided. Closed popovers no longer keep standing scroll and resize listeners and observers around, and hiding a popover skips a full positioning setup and teardown cycle. This reduces aggregate CPU and rendering work when rapidly showing and hiding popovers, such as when quickly moving across toolbar items with tooltips.

Thanks to @​aledecicco for reporting the issue.

RadioGroup disables descendant radios

The RadioGroup disabled prop now marks the group as disabled and disables descendant Radio components, including radios rendered as custom elements.

<RadioGroup disabled>
  <Radio value="Apple" />
  <Radio value="Orange" />
</RadioGroup>

Thanks to @​kripod for reporting the issue.

New SelectItemSelected component

The new SelectItemSelected value component exposes whether the closest SelectItem is selected through a required function child.

<SelectItem value="Apple">
  <SelectItemSelected>
    {(selected) => (selected ? <CheckIcon /> : null)}
  </SelectItemSelected>
  Apple
</SelectItem>

Thanks to @​jonrimmer for proposing the feature, and @​georgekaran for the investigation and implementation work that informed this solution.

Handling Esc in nested widgets

The Dialog component and components that inherit its default Esc handling, including Popover, ComboboxPopover, and SelectPopover, now let descendants call event.stopPropagation() on Esc without hiding the enclosing component. This allows a nested widget to dismiss itself first.

<Dialog>
  <input
    onKeyDown={(event) => {
      if (event.key !== "Escape") return;
      if (!suggestionsOpen) return;
      event.stopPropagation();
      closeSuggestions();
    }}
  />
</Dialog>

When the component handles an Esc event from its React subtree, it also stops the event at its boundary. This keeps an enclosing third-party React dialog with a bubble handler open while the Ariakit component closes.

When it handles Esc through the document fallback, such as when focus is on its disclosure, it stops the event at document before it reaches window bubble listeners.

An ancestor capture handler that stops Esc before it reaches the component owns the event. If hideOnEscape runs before such a handler, it can call event.stopPropagation() to keep the event from reaching it.

Thanks to @​boaz-wiz for reporting the issue.

Other updates

• Fixed multi-selectable Combobox components to submit selected values to forms when a name is provided. Thanks to @​cloud-walker and @​georgekaran.
• Fixed Composite and derived widgets such as SelectList to clear stale focus-visible state and warn in development when virtual focus is used with a non-focusable composite element. Thanks to @​ItaiYosephi.
• Fixed Dialog and components built on it, such as Popover and ComboboxPopover, so interacting with elements returned by getPersistentElements across open shadow roots no longer closes the component before it receives focus.
• Fixed sibling modal Dialog components and modal components built on them, such as Popover and ComboboxPopover, rendered in their default portals so opening them in the same render no longer made each other inert. Thanks to @​yishayhaz and @​gonzoblasco.
• Fixed collection store item lookups to resolve controlled items added after store creation when no live item is registered. This allows Select typeahead to update its value while options are unmounted. Thanks to @​georgekaran.
• Updated dependencies: @ariakit/react-components@0.3.4

v0.4.34

Compare Source

• Fixed published packages omitting their build output. Thanks to @​shahednasser.
• Updated dependencies: @ariakit/react-components@0.3.3

v0.4.33

Compare Source

This version adds React Compiler-compatible form hooks and side-specific popover overflow padding, improves store and component performance, and refines modal scroll locking and native button markup. It also includes fixes for Korean IME focus, controlled NaN values, and focus-visible styling.

Modal scroll locks use scrollbar-gutter

The Dialog component now locks page scroll in supporting browsers by setting scrollbar-gutter: stable and hiding overflow on the html element when preventBodyScroll is enabled. This applies to modal dialogs by default and to components built on Dialog, including Popover, Hovercard, Tooltip, Menu, SelectPopover, and ComboboxPopover.

Pages that already set scrollbar-gutter: stable or overflow-y: scroll on html no longer shift when a modal opens, and Ariakit restores inline html overflow styles when it closes.

Fixed headers no longer need --scrollbar-width in browsers that support scrollbar-gutter:

.header {
  position: fixed;
  padding-inline-end: 16px;
}

The --scrollbar-width CSS variable is now only defined in the fallback path for browsers without scrollbar-gutter support. If you still target those browsers, keep a length fallback when using the variable inside calc():

.header {
  padding-inline-end: calc(16px + var(--scrollbar-width, 0px));
}

Thanks to @​mirka for reporting the issue, and @​benrodrs for documenting a workaround that informed this solution.

Added useFormValue, useFormValidate, and useFormSubmit

The new useFormValue, useFormValidate, and useFormSubmit hooks replace the matching useFormStore methods with top-level hook calls that are compatible with the React Compiler:

const value = useFormValue(form, form.names.email);

useFormSubmit(form, async (state) => {
  // ...
});

Keyed store subscriptions

The useStoreState hook now accepts selector dependency keys, so selectors skip unrelated store updates while receiving the complete store state at runtime. The key list must include every store key a selector reads, or its result may stay stale.

const isEmpty = useStoreState(store, ["value"], (state) => !state.value);

React components now use keyed selector subscriptions internally.

Added support for side-specific overflowPadding

The overflowPadding prop now accepts a number or an object with independent top, right, bottom, and left values. This applies to Popover and components built on it, including ComboboxPopover, SelectPopover, CompositeOverflow, Hovercard, Menu, and Tooltip:

<ComboboxPopover overflowPadding={{ top: 24, right: 32, left: 16 }} />

When overflowPadding is an object, the --popover-overflow-padding CSS variable uses the larger of the horizontal left and right values, treating omitted sides as 0.

Thanks to @​mririgoyen for reporting the issue, and @​georgekaran for providing the approach that informed this solution.

Native button markup includes the final type

Default native Button and Command components now include type="button" in their initial markup. Refs and server-rendered markup observe the final type without waiting for post-mount reconciliation, keeping hydration consistent.

This also applies to ComboboxCancel, ComboboxDisclosure, CompositeItem, DialogDisclosure, DialogDismiss, Disclosure, FormPush, FormRemove, HovercardDisclosure, HovercardDismiss, MenuButton, MenuDismiss, PopoverDisclosure, PopoverDismiss, Select, SelectDismiss, Tab, and ToolbarItem when they render their default native button.

Other updates

• Improved React component mount performance by 12–21% in browser benchmarks.
• Reduced React store subscription overhead by skipping listeners when setter callbacks are absent and reading four related DisclosureContent state values through one subscription, including in TabPanel and Dialog components.
• Improved store performance across targeted benchmarks, reaching up to 49× the previous throughput.
• Deprecated the useValue, useValidate, and useSubmit methods of useFormStore in favor of the new top-level form hooks.
• Fixed Combobox with autoSelect moving focus between Korean IME composition steps. Thanks to @​flex-kwoncheol.
• Fixed controlled NaN values from unnecessarily firing setter callbacks in React stores, including useCheckboxStore and useRadioStore.
• Fixed Focusable and components built on it, such as Button, to clear focus-visible styling when focusable becomes false.
• Fixed store subscriptions to respond consistently to updates made with NaN keys.
• Updated dependencies: @ariakit/react-components@0.3.2

v0.4.32

Compare Source

Faster keyboard navigation on composite widgets

Moving through items with arrow keys no longer re-renders the Composite component itself when using roving tabindex.

This reduces the scripting cost of each keystroke on large collections and benefits everything built on composite widgets, such as Menu, Combobox, Toolbar, and Tab.

Fixed Command stuck pressed state when losing focus mid-press

When rendering a non-native element (such as render={<div />}), the Command component — and components built on it, such as Button, Checkbox, CompositeItem, and their derivatives — now clears its pressed state (data-active) when the element loses focus while Space is held, mirroring how native buttons cancel the Space activation when they lose focus before the keyup.

Additionally, a Space keyup bubbling up from a focused child no longer dispatches a synthetic click on the element, and calling event.preventDefault() in a custom onKeyUp handler no longer leaves the element stuck looking pressed.

PopoverArrow box-shadow ring detection

Fixed PopoverArrow, including components built on it such as TooltipArrow, MenuArrow, and HovercardArrow, to draw the popover's box-shadow ring for any positive ring width. Previously, widths whose text contained the digit 0, such as 10px or 0.5px from the Tailwind ring-[10px] and ring-[0.5px] utilities, were not detected, and the arrow rendered with no stroke at all.

The arrow stroke now also matches the ring color instead of the popover's inherited text color, so the arrow blends into the outline. This includes inset rings and rings without an explicit color, which default to currentColor following CSS.

Radio onChange event on arrow-key selection

Selecting a native Radio or FormRadio with arrow keys now delivers a real change event with event.target.checked already set to true, matching pointer and Space selection. Previously, the handler received the focus event while checked was still false, which silently broke handlers gated on event.target.checked.

Since arrow-key selection now replays the browser's native activation, onClick handlers also fire when a native radio is selected with arrow keys, matching native radio group behavior.

Other updates

• Improved the performance of the composite store's next, previous, up, and down functions, which now scan the rendered items without copying arrays in the most common cases.
• Fixed ComboboxItemValue highlighting the wrong characters for item values whose Unicode normalization changes the string length, such as Hangul, kana with dakuten, and decomposed (NFD) strings. Matching remains diacritic-insensitive, and the data-user-value spans now cover exactly the matched characters without detaching combining marks from their base letters.
• Fixed CompositeItem and components built on it, such as Tab and SelectItem, crashing the app with a "Maximum update depth exceeded" error when a NaN value was passed to the aria-posinset or aria-setsize props. The useStoreStateObject hook now compares snapshot values with Object.is, so the fix also covers any direct consumer of that hook.
• Fixed CompositeItem crashing with Cannot access 'rowId' before initialization when rendered inside a CompositeRow — or a derived row component such as SelectRow or ComboboxRow — that receives the aria-posinset prop.
• Fixed CompositeItem and components based on it, such as SelectItem and ComboboxItem, leaving DOM focus stuck on the item with virtual focus enabled when the item received focus before the composite element was available, instead of redirecting focus to the composite element.
• Fixed Dialog and components built on it such as Popover and Menu hiding on close before the backdrop element's exit transition ends: the backdrop's fade-out was skipped entirely when only the backdrop was animated, and cut short when its transition was longer than the panel's.
• Fixed Dialog, including components built on it such as Popover and Menu, so focusing, clicking, or right-clicking elements returned by getPersistentElements no longer closes the dialog before it has received focus, such as when it's rendered with autoFocusOnShow set to false.
• Fixed PopoverArrow — including arrows built on it such as MenuArrow and TooltipArrow — detaching from the anchor in RTL contexts when the popover flips or otherwise changes placement while open.
• Fixed Portal, including components built on it such as Tooltip and Popover, to avoid leaking duplicate portal containers in React development StrictMode.
• Fixed Portal, including components built on it such as Dialog and Popover, destroying and recreating the portal node when the portalRef prop changes identity, such as when passing an inline callback. The ref now re-fires against the same portal node, so the portal content is no longer remounted on parent re-renders.
• Fixed the focusOnMove prop being ignored on SelectList and components built on it such as SelectPopover.
• Fixed arrow keys on a closed Select freezing the page when multiple SelectItem components without a value prop follow the active item, and moving to an item without a value when exactly one follows it. Items without a value are now skipped correctly, including when focusLoop wraps around the list.
• Fixed TabPanel not updating its own tabindex when a single panel is reused with a dynamic tabId pointing to the selected tab. The tabbable-children check now re-runs when the tabId changes, so the panel joins the tab sequence when the newly selected tab's content has no tabbable elements and leaves it when the content has one.
• Fixed Tab not becoming the active item on the first setSelectedId call after a SelectPopover or ComboboxPopover containing the tabs opens or toggles.
• Fixed ToolbarContainer so composing Enter keydowns in nested text fields don't cancel IME commits or move focus back to the container.
• Updated dependencies: @ariakit/react-components@0.3.1

v0.4.31

Compare Source

This version improves React form behavior and composite separators, including safer generated field name paths, form submission and validation that continue in background tabs, and explicit separator orientation handling.

Composite separators honor explicit orientation

Fixed CompositeSeparator to honor an explicit orientation prop instead of always using the composite store-derived default. This also fixes components built on it, including ToolbarSeparator, MenuSeparator, SelectSeparator, and ComboboxSeparator.

form.names.* paths no longer crash on symbol access

Fixed useFormStore names values throwing Cannot convert a Symbol value to a string when an absent symbol key was read from them. This happened whenever something probed a symbol on a raw name — most notably when React reads Symbol.iterator to reconcile a name rendered as a React child, but also Object.prototype.toString.call(name) and Array.from(name).

Absent symbol keys now resolve to undefined, matching plain-object semantics, so those probes degrade gracefully. The documented string coercion keeps working, so coerce a name before rendering or inspecting it outside Ariakit props:

<p>This field submits as {`${form.names.email}`}.</p>

Form submission no longer stalls while the tab is hidden

useFormStore's submit and validate no longer stall while the document is hidden — for example, when auto-saving a draft on visibilitychange.

They previously awaited a requestAnimationFrame, which browsers pause in background tabs, so the submission only completed once the tab was brought back to the foreground.

Other updates

• Fixed ComboboxDisclosure to honor event.preventDefault() in onMouseDown before moving focus to the Combobox input.
• Fixed ComboboxItem so non-paste Ctrl/Cmd character shortcuts preserve focus and the combobox value when virtual focus is disabled, while paste shortcuts still route to the input.
• Fixed ComboboxItemValue so overlapping user input matches are rendered without duplicated text.
• Fixed Combobox inline autocomplete so decomposed Unicode input no longer produces misspelled completion values.
• Fixed Composite keyboard paging and Combobox scroll behavior for elements rendered inside a same-origin iframe.
• Fixed Composite base-element arrow key navigation in RTL composites, including components built on it such as Toolbar and TabList.
• Improved FormControl and components built on it, such as FormInput, FormCheckbox, and FormRadio, to avoid redundant form store subscriptions and item lookups while fields update.
• Fixed Form stealing focus into an invalid field when its items changed after a successful submission with resetOnSubmit set to false, so autoFocusOnSubmit again focuses the first invalid field only as a result of a failed submission.
• Fixed FormPush to focus the newly added field when pushing into arrays with existing values or arrays that start empty.
• Fixed useFormStore to ignore __proto__ and constructor path segments in field names, preventing form state objects from being corrupted through prototype replacement.
• Fixed Form to focus the first invalid field in document order when invalid fields mount out of registration order.
• Fixed nested Hovercard components so pressing Escape closes the topmost card even when focus is on another element. This also applies to components built on Dialog.
• Fixed Hovercard so it stays open when hovering content rendered inside an open shadow root. This also applies to components built on it, such as Tooltip and Menu.
• Fixed text field detection for elements rendered inside same-origin iframes. This fixes Composite keyboard navigation for iframe text fields, including components built on it such as Toolbar, and prevents Command and Combobox from treating iframe text fields as non-text fields.
• Improved public JSDoc comments for component and store options.
• Reduced extra [Menu](https://ariakit.com/reference/men

✂ Note

PR body was truncated to here.

---

Configuration

📅 Schedule: (UTC)

• Branch creation
  • At any time (no schedule defined)
• Automerge
  • At any time (no schedule defined)

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
shoreline-docs	Ignored	Preview	Aug 24, 2026 5:12pm