@ariakit/react-core 0.3.11 → 0.3.13

package/cjs/combobox/combobox-popover.d.ts

@@ -19,11 +19,10 @@ export declare const useComboboxPopover: import("../utils/types.js").Hook<Combob
 /**
  * Renders a combobox popover. The `role` prop is set to `listbox` by default,
  * but can be overriden by any other valid combobox popup role (`listbox`,
- * `menu`, `tree`, `grid` or `dialog`). The `aria-labelledby` prop is set to the
- * combobox input element's `id` by default.
+ * `menu`, `tree`, `grid` or `dialog`).
  * @see https://ariakit.org/components/combobox
  * @example
- * ```jsx
+ * ```jsx {3-7}
  * <ComboboxProvider>
  *   <Combobox />
  *   <ComboboxPopover>

package/cjs/combobox/combobox-provider.cjs

@@ -1,22 +1,22 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _47RLIVETcjs = require('../__chunks/47RLIVET.cjs');
+var _CFKRWKZRcjs = require('../__chunks/CFKRWKZR.cjs');
 
 
 var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
-require('../__chunks/N6CR2VNN.cjs');
-require('../__chunks/DKOWT2IJ.cjs');
+require('../__chunks/LUL2YWZ3.cjs');
+require('../__chunks/CDNJPIEG.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
 require('../__chunks/UVBBMANL.cjs');
 require('../__chunks/F2A2ZQDB.cjs');
 require('../__chunks/S6UU7NA4.cjs');
 require('../__chunks/RNZNGEL4.cjs');
-require('../__chunks/7BPAESN3.cjs');
-require('../__chunks/HRKRTCJC.cjs');
-require('../__chunks/EGAIDKB5.cjs');
-require('../__chunks/B233QVZE.cjs');
+require('../__chunks/NRGWVSB5.cjs');
+require('../__chunks/W5LJEMLB.cjs');
+require('../__chunks/JAQJG42R.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -24,7 +24,7 @@ require('../__chunks/AV6KTKLE.cjs');
 // src/combobox/combobox-provider.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function ComboboxProvider(props = {}) {
-  const store = _47RLIVETcjs.useComboboxStore.call(void 0, props);
+  const store = _CFKRWKZRcjs.useComboboxStore.call(void 0, props);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3WCBE6SUcjs.ComboboxContextProvider, { value: store, children: props.children });
 }
 

package/cjs/combobox/combobox-provider.d.cts

@@ -3,7 +3,8 @@ import type { PickRequired } from "@ariakit/core/utils/types";
 import type { ComboboxStoreProps, ComboboxStoreSelectedValue } from "./combobox-store.js";
 type Value = ComboboxStoreSelectedValue;
 /**
- * Provides a combobox store to Combobox components.
+ * Provides a combobox store that controls the state of
+ * [Combobox](https://ariakit.org/components/combobox) components.
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx

package/cjs/combobox/combobox-provider.d.ts

@@ -3,7 +3,8 @@ import type { PickRequired } from "@ariakit/core/utils/types";
 import type { ComboboxStoreProps, ComboboxStoreSelectedValue } from "./combobox-store.js";
 type Value = ComboboxStoreSelectedValue;
 /**
- * Provides a combobox store to Combobox components.
+ * Provides a combobox store that controls the state of
+ * [Combobox](https://ariakit.org/components/combobox) components.
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx

package/cjs/combobox/combobox-row.d.cts

@@ -19,10 +19,13 @@ import type { ComboboxStore } from "./combobox-store.js";
  */
 export declare const useComboboxRow: import("../utils/types.js").Hook<ComboboxRowOptions<"div">>;
 /**
- * Renders a combobox row.
+ * Renders a combobox row that allows two-dimensional arrow key navigation.
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) elements
+ * wrapped within this component will automatically receive a
+ * [`rowId`](https://ariakit.org/reference/combobox-item#rowid) prop.
  * @see https://ariakit.org/components/combobox
  * @example
- * ```jsx
+ * ```jsx {4-13}
  * <ComboboxProvider>
  *   <Combobox />
  *   <ComboboxPopover>
@@ -45,7 +48,7 @@ export interface ComboboxRowOptions<T extends As = "div"> extends CompositeRowOp
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
      * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
      * components' context will be used.

package/cjs/combobox/combobox-row.d.ts

@@ -19,10 +19,13 @@ import type { ComboboxStore } from "./combobox-store.js";
  */
 export declare const useComboboxRow: import("../utils/types.js").Hook<ComboboxRowOptions<"div">>;
 /**
- * Renders a combobox row.
+ * Renders a combobox row that allows two-dimensional arrow key navigation.
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) elements
+ * wrapped within this component will automatically receive a
+ * [`rowId`](https://ariakit.org/reference/combobox-item#rowid) prop.
  * @see https://ariakit.org/components/combobox
  * @example
- * ```jsx
+ * ```jsx {4-13}
  * <ComboboxProvider>
  *   <Combobox />
  *   <ComboboxPopover>
@@ -45,7 +48,7 @@ export interface ComboboxRowOptions<T extends As = "div"> extends CompositeRowOp
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
      * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
      * components' context will be used.

package/cjs/combobox/combobox-separator.d.cts

@@ -18,10 +18,11 @@ import type { ComboboxStore } from "./combobox-store.js";
  */
 export declare const useComboboxSeparator: import("../utils/types.js").Hook<ComboboxSeparatorOptions<"hr">>;
 /**
- * Renders a separator element for combobox items
+ * Renders a divider between
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) elements.
  * @see https://ariakit.org/components/combobox
  * @example
- * ```jsx
+ * ```jsx {5}
  * <ComboboxProvider>
  *   <Combobox />
  *   <ComboboxPopover>
@@ -38,7 +39,7 @@ export interface ComboboxSeparatorOptions<T extends As = "hr"> extends Composite
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
      * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
      * components' context will be used.

package/cjs/combobox/combobox-separator.d.ts

@@ -18,10 +18,11 @@ import type { ComboboxStore } from "./combobox-store.js";
  */
 export declare const useComboboxSeparator: import("../utils/types.js").Hook<ComboboxSeparatorOptions<"hr">>;
 /**
- * Renders a separator element for combobox items
+ * Renders a divider between
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) elements.
  * @see https://ariakit.org/components/combobox
  * @example
- * ```jsx
+ * ```jsx {5}
  * <ComboboxProvider>
  *   <Combobox />
  *   <ComboboxPopover>
@@ -38,7 +39,7 @@ export interface ComboboxSeparatorOptions<T extends As = "hr"> extends Composite
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
      * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
      * components' context will be used.

package/cjs/combobox/combobox-store.cjs

@@ -2,17 +2,17 @@
 
 
 
-var _47RLIVETcjs = require('../__chunks/47RLIVET.cjs');
-require('../__chunks/N6CR2VNN.cjs');
-require('../__chunks/DKOWT2IJ.cjs');
-require('../__chunks/7BPAESN3.cjs');
-require('../__chunks/HRKRTCJC.cjs');
-require('../__chunks/EGAIDKB5.cjs');
-require('../__chunks/B233QVZE.cjs');
+var _CFKRWKZRcjs = require('../__chunks/CFKRWKZR.cjs');
+require('../__chunks/LUL2YWZ3.cjs');
+require('../__chunks/CDNJPIEG.cjs');
+require('../__chunks/NRGWVSB5.cjs');
+require('../__chunks/W5LJEMLB.cjs');
+require('../__chunks/JAQJG42R.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.useComboboxStore = _47RLIVETcjs.useComboboxStore; exports.useComboboxStoreProps = _47RLIVETcjs.useComboboxStoreProps;
+exports.useComboboxStore = _CFKRWKZRcjs.useComboboxStore; exports.useComboboxStoreProps = _CFKRWKZRcjs.useComboboxStoreProps;

package/cjs/combobox/combobox-store.d.cts

@@ -5,17 +5,21 @@ import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } fr
 import type { Store } from "../utils/store.js";
 export declare function useComboboxStoreProps<T extends Core.ComboboxStore>(store: T, update: () => void, props: ComboboxStoreProps): T;
 /**
- * Creates a combobox store.
+ * Creates a combobox store to control the state of
+ * [Combobox](https://ariakit.org/components/combobox) components.
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
  * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Apple" />
- *   <ComboboxItem value="Banana" />
- *   <ComboboxItem value="Orange" />
- * </ComboboxPopover>
+ *
+ * <ComboboxProvider store={combobox}>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare function useComboboxStore<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue>(props: PickRequired<ComboboxStoreProps<T>, "selectedValue" | "defaultSelectedValue">): ComboboxStore<T>;

package/cjs/combobox/combobox-store.d.ts

@@ -5,17 +5,21 @@ import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } fr
 import type { Store } from "../utils/store.js";
 export declare function useComboboxStoreProps<T extends Core.ComboboxStore>(store: T, update: () => void, props: ComboboxStoreProps): T;
 /**
- * Creates a combobox store.
+ * Creates a combobox store to control the state of
+ * [Combobox](https://ariakit.org/components/combobox) components.
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
  * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Apple" />
- *   <ComboboxItem value="Banana" />
- *   <ComboboxItem value="Orange" />
- * </ComboboxPopover>
+ *
+ * <ComboboxProvider store={combobox}>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare function useComboboxStore<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue>(props: PickRequired<ComboboxStoreProps<T>, "selectedValue" | "defaultSelectedValue">): ComboboxStore<T>;

package/cjs/combobox/combobox.cjs

@@ -7,14 +7,14 @@ var _3QW6ELTGcjs = require('../__chunks/3QW6ELTG.cjs');
 var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 
 
-var _RM2WCNSUcjs = require('../__chunks/RM2WCNSU.cjs');
-require('../__chunks/RV3PHHWM.cjs');
+var _R7ERL264cjs = require('../__chunks/R7ERL264.cjs');
+require('../__chunks/6ZZYUFPW.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
 require('../__chunks/UVBBMANL.cjs');
 require('../__chunks/F2A2ZQDB.cjs');
 require('../__chunks/S6UU7NA4.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/VUEWHLYH.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
@@ -240,11 +240,10 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
     const resetValueOnSelect = store.useState("resetValueOnSelect");
     _EO6LS72Hcjs.useUpdateEffect.call(void 0, () => {
       var _a2;
+      const canAutoSelect = canAutoSelectRef.current;
       if (!store)
         return;
-      if (!autoSelect && !resetValueOnSelect)
-        return;
-      if (!canAutoSelectRef.current)
+      if ((!autoSelect || !canAutoSelect) && !resetValueOnSelect)
         return;
       const { baseElement, contentElement: contentElement2, activeId } = store.getState();
       if (baseElement && !_focus.hasFocus.call(void 0, baseElement))
@@ -254,7 +253,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
         observer.observe(contentElement2, { attributeFilter: ["data-placing"] });
         return () => observer.disconnect();
       }
-      if (autoSelect) {
+      if (autoSelect && canAutoSelect) {
         const userAutoSelectId = getAutoSelectIdProp(items);
         const autoSelectId = userAutoSelectId !== void 0 ? userAutoSelectId : store.first();
         autoSelectIdRef.current = autoSelectId;
@@ -371,6 +370,9 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
     const onKeyDown = _EO6LS72Hcjs.useEvent.call(void 0, 
       (event) => {
         onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+        if (!event.repeat) {
+          canAutoSelectRef.current = false;
+        }
         if (event.defaultPrevented)
           return;
         if (event.ctrlKey)
@@ -423,7 +425,7 @@ var useCombobox = _RNZNGEL4cjs.createHook.call(void 0,
       onKeyDown,
       onBlur
     });
-    props = _RM2WCNSUcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _R7ERL264cjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       focusable
     }, props), {

package/cjs/combobox/combobox.d.cts

@@ -21,10 +21,10 @@ import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
  */
 export declare const useCombobox: import("../utils/types.js").Hook<ComboboxOptions<"input">>;
 /**
- * Renders a combobox input.
+ * Renders a combobox input element that can be used to filter a list of items.
  * @see https://ariakit.org/components/combobox
  * @example
- * ```jsx
+ * ```jsx {2}
  * <ComboboxProvider>
  *   <Combobox />
  *   <ComboboxPopover>
@@ -46,9 +46,9 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      */
     store?: ComboboxStore;
     /**
-     * Whether the first item will be automatically selected when the combobox
-     * input value changes. When it's set to `true`, the exact behavior will
-     * depend on the value of
+     * Whether the first enabled item will be automatically selected when the
+     * combobox input value changes. When it's set to `true`, the exact behavior
+     * will depend on the value of the
      * [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete) prop:
      * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
      *   is `both` or `inline`, the first item is automatically focused when the
@@ -58,6 +58,10 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      *   is `list` or `none`, the first item is automatically focused when the
      *   popup opens, but the input value doesn't change.
      *
+     * To change which item is auto selected, use the
+     * [`getAutoSelectId`](https://ariakit.org/reference/combobox#getautoselectid)
+     * prop.
+     *
      * Live examples:
      * - [Combobox with integrated
      *   filter](https://ariakit.org/examples/combobox-filtering-integrated)
@@ -78,6 +82,9 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      *
      * By default, the first enabled item is auto selected. This function is handy
      * if you prefer a different item to be auto selected.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * ```jsx
      * <Combobox
@@ -103,22 +110,22 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * This prop is based on the standard
      * [`aria-autocomplete`](https://w3c.github.io/aria/#aria-autocomplete)
      * attribute, accepting the same values:
-     * - `both`: indicates that the items will be filtered based on
+     * - `list` (default): indicates that the items will be dynamically rendered
+     *   based on [`value`](https://ariakit.org/reference/combobox-provider#value)
+     *   and the input value will _not_ change based on the active item. The
+     *   filtering logic must be implemented by the consumer of this component.
+     * - `inline`: indicates that the items are static, that is, they won't be
+     *   filtered, but the input value will temporarily change based on the active
+     *   item. Ariakit will automatically provide the inline autocompletion
+     *   behavior.
+     * - `both`: indicates that the items will be dynamically rendered based on
      *   [`value`](https://ariakit.org/reference/combobox-provider#value) and the
      *   input value will temporarily change based on the active item. The
      *   filtering logic must be implemented by the consumer of this component,
      *   whereas Ariakit will automatically provide the inline autocompletion
      *   behavior.
-     * - `list` (default): indicates that the items will be filtered based on
-     *   [`value`](https://ariakit.org/reference/combobox-provider#value) and the
-     *   input value will NOT change based on the active item. The filtering logic
-     *   must be implemented by the consumer of this component.
-     * - `inline`: indicates that the items are static, that is, they won't be
-     *   filtered, but the input value will temporarily change based on the active
-     *   item. Ariakit will automatically provide the inline autocompletion
-     *   behavior
-     * - `none`: the items are static and the input value will NOT change based on
-     *   the active item.
+     * - `none`: the items are static and the input value will _not_ change based
+     *   on the active item.
      *
      * Live examples:
      * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
@@ -126,8 +133,9 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      */
     autoComplete?: StringWithValue<Required<AriaAttributes>["aria-autocomplete"]>;
     /**
-     * Whether the combobox list/popover should be shown when the input value is
-     * changed.
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the input value changes.
      *
      * Live examples:
      * - [Textarea with inline
@@ -139,17 +147,6 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * ```
      */
     showOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
-    /**
-     * Whether the combobox store value will be updated when the input value
-     * changes. This is useful if you want to customize how the store value is
-     * updated based on the input value.
-     *
-     * Live examples:
-     * - [Textarea with inline
-     *   Combobox](https://ariakit.org/examples/combobox-textarea)
-     * @default true
-     */
-    setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
@@ -182,11 +179,29 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      */
     showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
     /**
-     * Whether the combobox store value will be updated when the combobox input
-     * element gets clicked. This usually only applies when `autoComplete` is
+     * Whether the combobox
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) state
+     * should be updated when the input value changes. This is useful if you want
+     * to customize how the store
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) is updated
+     * based on the input element's value.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * @default true
+     */
+    setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+    /**
+     * Whether the combobox
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) state
+     * should be updated when the combobox input element gets clicked. This
+     * usually only applies when
+     * [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete) is
      * `both` or `inline`, because the input value will temporarily change based
-     * on the active item and the store value will not be updated until the user
-     * confirms the selection.
+     * on the active item and the store
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) will not
+     * be updated until the user confirms the selection.
      * @default true
      */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;

package/cjs/combobox/combobox.d.ts

@@ -21,10 +21,10 @@ import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
  */
 export declare const useCombobox: import("../utils/types.js").Hook<ComboboxOptions<"input">>;
 /**
- * Renders a combobox input.
+ * Renders a combobox input element that can be used to filter a list of items.
  * @see https://ariakit.org/components/combobox
  * @example
- * ```jsx
+ * ```jsx {2}
  * <ComboboxProvider>
  *   <Combobox />
  *   <ComboboxPopover>
@@ -46,9 +46,9 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      */
     store?: ComboboxStore;
     /**
-     * Whether the first item will be automatically selected when the combobox
-     * input value changes. When it's set to `true`, the exact behavior will
-     * depend on the value of
+     * Whether the first enabled item will be automatically selected when the
+     * combobox input value changes. When it's set to `true`, the exact behavior
+     * will depend on the value of the
      * [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete) prop:
      * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
      *   is `both` or `inline`, the first item is automatically focused when the
@@ -58,6 +58,10 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      *   is `list` or `none`, the first item is automatically focused when the
      *   popup opens, but the input value doesn't change.
      *
+     * To change which item is auto selected, use the
+     * [`getAutoSelectId`](https://ariakit.org/reference/combobox#getautoselectid)
+     * prop.
+     *
      * Live examples:
      * - [Combobox with integrated
      *   filter](https://ariakit.org/examples/combobox-filtering-integrated)
@@ -78,6 +82,9 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      *
      * By default, the first enabled item is auto selected. This function is handy
      * if you prefer a different item to be auto selected.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * ```jsx
      * <Combobox
@@ -103,22 +110,22 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * This prop is based on the standard
      * [`aria-autocomplete`](https://w3c.github.io/aria/#aria-autocomplete)
      * attribute, accepting the same values:
-     * - `both`: indicates that the items will be filtered based on
+     * - `list` (default): indicates that the items will be dynamically rendered
+     *   based on [`value`](https://ariakit.org/reference/combobox-provider#value)
+     *   and the input value will _not_ change based on the active item. The
+     *   filtering logic must be implemented by the consumer of this component.
+     * - `inline`: indicates that the items are static, that is, they won't be
+     *   filtered, but the input value will temporarily change based on the active
+     *   item. Ariakit will automatically provide the inline autocompletion
+     *   behavior.
+     * - `both`: indicates that the items will be dynamically rendered based on
      *   [`value`](https://ariakit.org/reference/combobox-provider#value) and the
      *   input value will temporarily change based on the active item. The
      *   filtering logic must be implemented by the consumer of this component,
      *   whereas Ariakit will automatically provide the inline autocompletion
      *   behavior.
-     * - `list` (default): indicates that the items will be filtered based on
-     *   [`value`](https://ariakit.org/reference/combobox-provider#value) and the
-     *   input value will NOT change based on the active item. The filtering logic
-     *   must be implemented by the consumer of this component.
-     * - `inline`: indicates that the items are static, that is, they won't be
-     *   filtered, but the input value will temporarily change based on the active
-     *   item. Ariakit will automatically provide the inline autocompletion
-     *   behavior
-     * - `none`: the items are static and the input value will NOT change based on
-     *   the active item.
+     * - `none`: the items are static and the input value will _not_ change based
+     *   on the active item.
      *
      * Live examples:
      * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
@@ -126,8 +133,9 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      */
     autoComplete?: StringWithValue<Required<AriaAttributes>["aria-autocomplete"]>;
     /**
-     * Whether the combobox list/popover should be shown when the input value is
-     * changed.
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the input value changes.
      *
      * Live examples:
      * - [Textarea with inline
@@ -139,17 +147,6 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * ```
      */
     showOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
-    /**
-     * Whether the combobox store value will be updated when the input value
-     * changes. This is useful if you want to customize how the store value is
-     * updated based on the input value.
-     *
-     * Live examples:
-     * - [Textarea with inline
-     *   Combobox](https://ariakit.org/examples/combobox-textarea)
-     * @default true
-     */
-    setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
@@ -182,11 +179,29 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      */
     showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
     /**
-     * Whether the combobox store value will be updated when the combobox input
-     * element gets clicked. This usually only applies when `autoComplete` is
+     * Whether the combobox
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) state
+     * should be updated when the input value changes. This is useful if you want
+     * to customize how the store
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) is updated
+     * based on the input element's value.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * @default true
+     */
+    setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+    /**
+     * Whether the combobox
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) state
+     * should be updated when the combobox input element gets clicked. This
+     * usually only applies when
+     * [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete) is
      * `both` or `inline`, because the input value will temporarily change based
-     * on the active item and the store value will not be updated until the user
-     * confirms the selection.
+     * on the active item and the store
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) will not
+     * be updated until the user confirms the selection.
      * @default true
      */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;

package/cjs/command/command.cjs

@@ -2,8 +2,8 @@
 
 
 
-var _DAJUUBUIcjs = require('../__chunks/DAJUUBUI.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+var _OSTQZD2Ecjs = require('../__chunks/OSTQZD2E.cjs');
+require('../__chunks/VUEWHLYH.cjs');
 require('../__chunks/75KXQZJX.cjs');
 require('../__chunks/RNZNGEL4.cjs');
 require('../__chunks/EO6LS72H.cjs');
@@ -12,4 +12,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Command = _DAJUUBUIcjs.Command; exports.useCommand = _DAJUUBUIcjs.useCommand;
+exports.Command = _OSTQZD2Ecjs.Command; exports.useCommand = _OSTQZD2Ecjs.useCommand;

package/cjs/command/command.d.cts

@@ -26,7 +26,7 @@ export declare const useCommand: import("../utils/types.js").Hook<CommandOptions
  * @see https://ariakit.org/components/command
  * @example
  * ```jsx
- * <Command render={<div />}>Accessible button</Command>
+ * <Command>Button</Command>
  * ```
  */
 export declare const Command: import("../utils/types.js").Component<CommandOptions<"button">>;

package/cjs/command/command.d.ts

@@ -26,7 +26,7 @@ export declare const useCommand: import("../utils/types.js").Hook<CommandOptions
  * @see https://ariakit.org/components/command
  * @example
  * ```jsx
- * <Command render={<div />}>Accessible button</Command>
+ * <Command>Button</Command>
  * ```
  */
 export declare const Command: import("../utils/types.js").Component<CommandOptions<"button">>;