chore(deps): update dependency @ariakit/react to v0.4.37

[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.19 → 0.4.37

---

Release Notes

ariakit/ariakit (@​ariakit/react)

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 renders when menu items re-register without changing the initial focus target.
• Fixed MenuItemCheckbox to initialize boolean fields from defaultChecked and controlled checked props when the menu store has no default value.
• Fixed menubar and menu bar stores to reflect navigation updates immediately before initialization.
• Fixed a portaled Popover or Dialog not receiving focus when reopened while a non-focusable element (such as a display: none file input) comes before the first focusable element in its content. This also fixes FormLabel focusing such a hidden element instead of the visible control.
• Fixed RadioGroup so tabbing back into a group focuses the checked Radio after another unchecked Radio has received focus.
• Fixed SelectPopover typeahead to skip disabled offscreen SelectItem placeholders.
• Fixed ToolbarContainer so pressing Backspace or Delete on a focused container with an empty text field no longer steals focus from the field on the next typed character.
• Updated dependencies: @ariakit/react-components@0.3.0

v0.4.30

Compare Source

Improved Dialog performance

Opening a modal Dialog now marks and disables the elements outside the dialog in a single tree walk instead of two, tracks the dialog state with fewer store subscriptions, and finds the initial focus target without checking every tabbable element inside the dialog.

The scroll lock, the backdrop z-index synchronization, and the root-dialog bookkeeping also moved from passive effects to the layout phase, removing several forced style recalculations and layouts from the open path and applying the scroll lock before the dialog is first painted.

This also benefits components built on top of Dialog, such as Popover, Menu, and SelectPopover.

Fixed DisclosureContent over-waiting to unmount with mixed transitions and animations

DisclosureContent (and components built on top of it, such as Dialog and Popover) could keep unmountOnHide content mounted longer than necessary when a transition and an animation were both applied and the longest delay and longest duration belonged to different properties.

The unmount timeout is now the longest per-property end time (delay + duration) across the transitions and animations, instead of the longest delay added to the longest duration, which could overestimate the real end time and keep unmountOnHide content mounted longer than necessary. A leftover duration or delay with no matching transition or animation (such as an animation-duration while animation-name is none) is also ignored now.

Other updates

• Added an associated panel lookup to useTabStore, improving Tab performance when resolving controlled panels.
• Improved TooltipAnchor to avoid re-rendering default description tooltip anchors when the tooltip content id changes.
• Updated VisuallyHidden to hide content with the modern clip-path: inset(50%) technique instead of the deprecated clip property. The same technique now applies to the other elements Ariakit hides visually, such as the Select value mirror and the Dialog dismiss button.
• Fixed CheckboxCheck to avoid passing invalid function children to React while unchecked.
• Fixed the ComboboxGroup development error message to name the correct component.
• Improved ComboboxItemValue rendering performance.
• Fixed Command and the components that build on it, such as Button, staying stuck in the active (data-active) state when the Space key is released while the Meta key is held, or after the element becomes disabled between keydown and keyup.
• Fixed CompositeTypeahead so typeahead text from one composite no longer affects another composite rendered on the same page.
• Fixed Dialog cleanup so stale nested dialog effects no longer restore page accessibility state while a newer effect is active.
• Fixed Dialog to reset outside-interaction focus tracking when reused dialogs reopen.
• Fixed FormPush and FormRemove incorrectly matching sibling array fields whose names share a prefix (for example tags and tags2) and throwing when a field name contained regular expression special characters.
• Fixed useFormStore nested value updates so path segments like -1, Infinity, and NaN are treated as object keys instead of array indexes.
• Improved Hovercard so nested hovercards no longer reinstall document mousemove listeners when they mount or unmount.
• Fixed MenuItemRadio to avoid forwarding the defaultChecked prop to rendered elements.
• Fixed Popover to ignore stale async positioning updates after a newer positioning effect has started.
• Fixed merged refs in React components and Portal to preserve React 19 callback ref cleanup functions while still detaching refs that don't return a cleanup.
• Updated dependencies: @ariakit/react-components@0.2.0

v0.4.29

Compare Source

Fixed Combobox dropping characters when the popover resizes while typing

The [Combobox](https://a

✂ Note

PR body was truncated to here.

---

Configuration

📅 Schedule: (UTC)

• Branch creation
  • Monday through Friday (* * * * 1-5)
• Automerge
  • At any time (no schedule defined)

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, 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.

[doistbot]

This PR updates chore(deps): update dependency @ariakit/react to v0.4.36. No issues were flagged in the reviewed diff.

_{Share Feedback • Review Logs}

[renovate]

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

• any of the package files in this branch needs updating, or
• the branch becomes conflicted, or
• you click the rebase/retry checkbox if found above, or
• you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm warn Unknown env config "store". This will error in a future major version of npm. See `npm help npmrc` for supported config options.
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: @doist/reactist@36.3.1
npm error Found: vite@6.4.3
npm error node_modules/vite
npm error   dev vite@"6.4.3" from the root project
npm error
npm error Could not resolve dependency:
npm error peer vite@"^8.0.0" from @vitejs/plugin-react@6.0.5
npm error node_modules/@vitejs/plugin-react
npm error   dev @vitejs/plugin-react@"6.0.5" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /runner/cache/others/npm/_logs/2026-08-15T02_02_47_713Z-eresolve-report.txt
npm error A complete log of this run can be found in: /runner/cache/others/npm/_logs/2026-08-15T02_02_47_713Z-debug-0.log