ariakit

Minor Changes

• #2714 Added support for a dynamic store prop on component stores.

  This is similar to the store prop on components, keeping both stores in sync. Now, component store hooks can support modifying the value of the store prop after the initial render. For instance:

  // props.store can change between renders now
  const checkbox = useCheckboxStore({ store: props.store });
  

  When the store prop changes, the object returned from the store hook will update as well. Consequently, effects and hooks that rely on the store will re-run.

  While it's unlikely, this could represent a breaking change if you're depending on the store prop in component stores to only acknowledge the first value passed to it.

• #2783 BREAKING (This should affect very few people): The combobox state on useSelectStore has been replaced by the combobox property on the store object.

  Before:

  const combobox = useComboboxStore();
  const select = useSelectStore({ combobox });
  const hasCombobox = select.useState("combobox");
  

  After:

  const combobox = useComboboxStore();
  const select = useSelectStore({ combobox });
  const hasCombobox = Boolean(select.combobox);
  

  In the example above, select.combobox is literally the same as the combobox store. It will be defined if the combobox store is passed to useSelectStore.

• #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.

• #2717 The children prop as a function has been deprecated on all components. Use the render prop instead.

• #2717 The as prop has been deprecated on all components. Use the render prop instead.

• #2717 The backdropProps prop has been deprecated on Dialog and derived components. Use the backdrop prop instead.

• #2745 Component stores will now throw an error if they receive another store prop in conjunction with default prop values.

Patch Changes

• #2737 Fixed controlled component stores rendering with a stale state.

• #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);
  

• #2795 Updated the Menu component so the composite and typeahead props are automatically set to false when combining it with a Combobox component.

  This means you'll not need to explicitly pass composite={false} when building a Menu with Combobox component.

• #2796 Composed store props such as useSelectStore({ combobox }) now accept null as a value.

• Updated dependencies: @ariakit/[email protected].

Minor Changes

• #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.

Patch Changes

• #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.

Patch Changes

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• #2718 Fixed import of use-sync-external-store package for ESM builds.

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• #2718 Fixed import of use-sync-external-store package for ESM builds.

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• #2709 Fixed addGlobalEventListener function when used in a document with sandbox iframes.

Patch Changes

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Fixed Collection not populating the items state when passing items and setItems to useCollectionStore. (#2704)

• Fixed Combobox controlled derived state. (#2705)

• The Menu's disclosureElement state is now guaranteed to be defined as the MenuButton element. Before, it could be overridden by a different element that received focus right before the menu opened, which could cause some weird issues. (#2695)

• Fixed Tooltip not closing when it's open while another popover is still visible. (#2692)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Fixed Collection not populating the items state when passing items and setItems to useCollectionStore. (#2704)

• Fixed Combobox controlled derived state. (#2705)

• The Menu's disclosureElement state is now guaranteed to be defined as the MenuButton element. Before, it could be overridden by a different element that received focus right before the menu opened, which could cause some weird issues. (#2695)

• Fixed Tooltip not closing when it's open while another popover is still visible. (#2692)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• 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.

Patch Changes

• Fixed clicking on a custom dialog backdrop hiding all parent dialogs. (#2688)

• Fixed ReactDOM.flushSync warning on low-end devices. (#2677)

• Fixed Tooltip not hiding when opening a dialog that was previously unmounted. (#2691)

• Fixed Focusable not triggering onFocusVisible (and thus not rendering the data-focus-visible attribute) when an element is focused after closing a dialog. (#2691)

• Fixed Tooltip showing on mouse move right after it was dismissed (by pressing Esc or opening a popover, for example). (#2691)

Patch Changes

• Fixed clicking on a custom dialog backdrop hiding all parent dialogs. (#2688)

• Fixed ReactDOM.flushSync warning on low-end devices. (#2677)

• Fixed Tooltip not hiding when opening a dialog that was previously unmounted. (#2691)

• Fixed Focusable not triggering onFocusVisible (and thus not rendering the data-focus-visible attribute) when an element is focused after closing a dialog. (#2691)

• Fixed Tooltip showing on mouse move right after it was dismissed (by pressing Esc or opening a popover, for example). (#2691)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Fixed flushSync warning. (#2672)

Patch Changes

• Fixed flushSync warning. (#2672)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• The as prop has been soft deprecated. Use the render prop instead. (#2621)

• The Combobox component now properly disables the autoSelect behavior when the user is scrolling through the list of options. This should prevent issues when scrolling virtualized or infinite lists. (#2617)

• Fixed Combobox with autoSelect always focusing on the first item when a virtualized list is scrolled using arrow keys. (#2636)

• Added experimental element keys to the Role component. (#2660)

• The SelectRenderer component doesn't require a store prop or context anymore. (#2619)

• Controlled store updates are now flushed synchronously. This should prevent issues when controlling a Combobox by passing value and setValue to the combobox store, for example. (#2671)

Patch Changes

• The as prop has been soft deprecated. Use the render prop instead. (#2621)

• The Combobox component now properly disables the autoSelect behavior when the user is scrolling through the list of options. This should prevent issues when scrolling virtualized or infinite lists. (#2617)

• Fixed Combobox with autoSelect always focusing on the first item when a virtualized list is scrolled using arrow keys. (#2636)

• Controlled store updates are now flushed synchronously. This should prevent issues when controlling a Combobox by passing value and setValue to the combobox store, for example. (#2671)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Fixed CompositeItem not being tabbable before hydration. (#2601)

Patch Changes

• Fixed CompositeItem not being tabbable before hydration. (#2601)

• Updated dependencies: @ariakit/[email protected].

Minor Changes

• Replaced mock-get-client-rects module by polyfills. (#2587)

Patch Changes

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Added forwardRef and memo exports to @ariakit/react-core/utils/system. (#2553)

• Added new experimental CollectionRenderer component. (#2553)

• Added new experimental CompositeRenderer component. (#2553)

• Added new experimental SelectRenderer component. (#2553)

• Fixed Combobox with autoSelect and autoComplete="both" so the value is maintained when the combobox input loses focus. (#2595)

• Fixed Combobox with autoSelect prop causing a scroll jump when the popover was opened by typing on the input. (#2599)

• Fixed Combobox with the autoSelect prop not automatically selecting the first option when used in combination with Select after the selected option is re-mounted. (#2592)

• Updated composite item components with the focusOnHover prop set to true so that they don't scroll into view when hovered. (#2590)

• Fixed Menu initial focus when used in combination with Combobox. (#2582)

• Fixed Popover not updating its position when the placement changes while the popover is closed. (#2587)

• Fixed Select not scrolling selected option into view in Safari. (#2591)

• Updated dependencies: @ariakit/[email protected].