@ariakit/react-core 0.3.0 → 0.3.2

package/esm/combobox/combobox-disclosure.d.ts

@@ -25,20 +25,25 @@ export declare const useComboboxDisclosure: import("../utils/types.js").Hook<Com
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxDisclosure store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Item 1" />
- *   <ComboboxItem value="Item 2" />
- *   <ComboboxItem value="Item 3" />
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxDisclosure />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxDisclosure: import("../utils/types.js").Component<ComboboxDisclosureOptions<"button">>;
 export interface ComboboxDisclosureOptions<T extends As = "button"> extends DialogDisclosureOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
      */
     store?: ComboboxStore;
 }

package/esm/combobox/combobox-group-label.d.ts

@@ -21,22 +21,27 @@ export declare const useComboboxGroupLabel: import("../utils/types.js").Hook<Com
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxGroup>
- *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
- *     <ComboboxItem value="Item 1" />
- *     <ComboboxItem value="Item 2" />
- *   </ComboboxGroup>
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxGroup>
+ *       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>
+ *       <ComboboxItem value="Apple" />
+ *       <ComboboxItem value="Banana" />
+ *     </ComboboxGroup>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxGroupLabel: import("../utils/types.js").Component<ComboboxGroupLabelOptions<"div">>;
 export interface ComboboxGroupLabelOptions<T extends As = "div"> extends CompositeGroupLabelOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook. If not provided, the parent
-     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
      */
     store?: ComboboxStore;
 }

package/esm/combobox/combobox-group.d.ts

@@ -24,22 +24,27 @@ export declare const useComboboxGroup: import("../utils/types.js").Hook<Combobox
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={store} />
- * <ComboboxPopover store={store}>
- *   <ComboboxGroup>
- *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
- *     <ComboboxItem value="Item 1" />
- *     <ComboboxItem value="Item 2" />
- *   </ComboboxGroup>
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxGroup>
+ *       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>
+ *       <ComboboxItem value="Apple" />
+ *       <ComboboxItem value="Banana" />
+ *     </ComboboxGroup>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxGroup: import("../utils/types.js").Component<ComboboxGroupOptions<"div">>;
 export interface ComboboxGroupOptions<T extends As = "div"> extends CompositeGroupOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook. If not provided, the parent
-     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
      */
     store?: ComboboxStore;
 }

package/esm/combobox/combobox-item-value.d.ts

@@ -30,14 +30,14 @@ export declare const useComboboxItemValue: import("../utils/types.js").Hook<Comb
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore({ value: "p" });
- *
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Apple">
- *     <ComboboxItemValue />
- *   </ComboboxItem>
- * </ComboboxPopover>
+ * <ComboboxProvider value="p">
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple">
+ *       <ComboboxItemValue />
+ *     </ComboboxItem>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  *
  * // The Apple item will have a value element that looks like this:
  * <span>
@@ -51,8 +51,12 @@ export declare const useComboboxItemValue: import("../utils/types.js").Hook<Comb
 export declare const ComboboxItemValue: import("../utils/types.js").Component<ComboboxItemValueOptions<"span">>;
 export interface ComboboxItemValueOptions<T extends As = "span"> extends Options<T> {
     /**
-     * Object returned by the `useComboboxStore` hook. If not provided, the parent
-     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
      */
     store?: ComboboxStore;
     /**

package/esm/combobox/combobox-item.d.ts

@@ -16,42 +16,67 @@ import type { ComboboxStore } from "./combobox-store.js";
  */
 export declare const useComboboxItem: import("../utils/types.js").Hook<ComboboxItemOptions<"div">>;
 /**
- * Renders a combobox item inside a combobox list or popover. The `role` prop
- * will be automatically set based on the `ComboboxList` or `ComboboxPopover`
- * own `role` prop. For example, if the `ComboboxPopover` component's `role`
- * prop is set to `listbox` (default), the `ComboboxItem` `role` will be set to
- * `option`. By default, the `value` prop will be rendered as the children, but
- * this can be overriden.
+ * Renders a combobox item inside a
+ * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+ * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+ * components. The `role` prop will be automatically set based on the list's own
+ * `role` prop. For example, if the list `role` is set to `listbox` (default),
+ * the `ComboboxItem` `role` will be set to `option`.
+ *
+ * By default, the
+ * [`value`](https://ariakit.org/reference/combobox-item#value) prop will be
+ * rendered as the children, but this can be overriden.
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Item 1" />
- *   <ComboboxItem value="Item 2" />
- *   <ComboboxItem value="Item 3" />
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxItem: import("../utils/types.js").Component<ComboboxItemOptions<"div">>;
 export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook. If not provided, the parent
-     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
      */
     store?: ComboboxStore;
     /**
      * The value of the item. This will be rendered as the children by default.
-     *   - If `setValueOnClick` is set to `true`, this will be the value of the
-     *     combobox input when the user clicks on this item.
-     *   - If the `autoComplete` prop on the `Combobox` component is set to `both`
-     *     or `inline`, this will be the value of the combobox input when the
-     *     combobox loses focus.
+     *   - If
+     *     [`setValueOnClick`](https://ariakit.org/reference/combobox-item#setvalueonclick)
+     *     is set to `true`, this will be the value of the combobox input when the
+     *     user clicks on this item.
+     *   - If the
+     *     [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
+     *     prop on the [`Combobox`](https://ariakit.org/reference/combobox)
+     *     component is set to `both` or `inline`, this will be the value of the
+     *     combobox input when the combobox loses focus.
+     *
+     * Live examples:
+     * - [Animated Combobox](https://ariakit.org/examples/combobox-animated)
+     * - [ComboboxCancel](https://ariakit.org/examples/combobox-cancel)
+     * - [ComboboxDisclosure](https://ariakit.org/examples/combobox-disclosure)
+     * - [Combobox filtering](https://ariakit.org/examples/combobox-filtering)
+     * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
      */
     value?: string;
     /**
      * Whether to hide the combobox when this item is clicked.
+     *
+     * Live examples:
+     * - [Combobox with links](https://ariakit.org/examples/combobox-links)
      * @default true
      */
     hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;

package/esm/combobox/combobox-item.js

@@ -7,7 +7,7 @@ import {
 } from "../__chunks/QP4RN5UY.js";
 import {
   useCompositeItem
-} from "../__chunks/6TWF32ML.js";
+} from "../__chunks/72OJKUSZ.js";
 import "../__chunks/LND6SMHN.js";
 import "../__chunks/XIA3HAXM.js";
 import "../__chunks/OXPV2NBK.js";
@@ -23,7 +23,7 @@ import {
   createHook,
   createMemoComponent
 } from "../__chunks/CFEUKV6C.js";
-import "../__chunks/L3AX6U5E.js";
+import "../__chunks/XXO3VVQU.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/combobox/combobox-list.d.ts

@@ -20,24 +20,31 @@ export declare const useComboboxList: import("../utils/types.js").Hook<ComboboxL
 /**
  * Renders a combobox list. 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.
+ * `tree`, `grid` or `dialog`).
+ *
+ * The `aria-labelledby` prop is set to the combobox input element's `id` by
+ * default.
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxList store={combobox}>
- *   <ComboboxItem value="Item 1" />
- *   <ComboboxItem value="Item 2" />
- *   <ComboboxItem value="Item 3" />
- * </ComboboxList>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxList>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxList>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxList: import("../utils/types.js").Component<ComboboxListOptions<"div">>;
 export interface ComboboxListOptions<T extends As = "div"> extends FocusableOptions<T>, Pick<DisclosureContentOptions, "alwaysVisible"> {
     /**
-     * Object returned by the `useComboboxStore` hook.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
      */
     store?: ComboboxStore;
 }

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

@@ -24,13 +24,14 @@ export declare const useComboboxPopover: import("../utils/types.js").Hook<Combob
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Item 1" />
- *   <ComboboxItem value="Item 2" />
- *   <ComboboxItem value="Item 3" />
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxPopover: import("../utils/types.js").Component<ComboboxPopoverOptions<"div">>;

package/esm/combobox/combobox-popover.js

@@ -8,9 +8,9 @@ import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import {
   usePopover
-} from "../__chunks/XWFU333Y.js";
-import "../__chunks/D4PXCBCI.js";
-import "../__chunks/HJPDTCDL.js";
+} from "../__chunks/GP4UGJIZ.js";
+import "../__chunks/4RP654JS.js";
+import "../__chunks/W575AF63.js";
 import "../__chunks/PLOINBVB.js";
 import "../__chunks/HAVCR65N.js";
 import "../__chunks/62DFK33R.js";
@@ -43,8 +43,8 @@ import {
   createElement,
   createHook
 } from "../__chunks/CFEUKV6C.js";
-import "../__chunks/UHPQRTV4.js";
-import "../__chunks/L3AX6U5E.js";
+import "../__chunks/A2ONBKVT.js";
+import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {

package/esm/combobox/combobox-provider.js

@@ -1,21 +1,21 @@
 import {
   useComboboxStore
-} from "../__chunks/2JWPGQQP.js";
+} from "../__chunks/V5EW3YHP.js";
 import {
   ComboboxContextProvider
 } from "../__chunks/QP4RN5UY.js";
-import "../__chunks/FGP6QO3O.js";
-import "../__chunks/JEQRR7AL.js";
+import "../__chunks/WGAKICTY.js";
+import "../__chunks/NWDF5QDV.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/DORFNB2S.js";
-import "../__chunks/6X2TPJLY.js";
-import "../__chunks/UHPQRTV4.js";
-import "../__chunks/L3AX6U5E.js";
+import "../__chunks/H2BG4QDT.js";
+import "../__chunks/UY3UQ4QI.js";
+import "../__chunks/A2ONBKVT.js";
+import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

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

@@ -23,27 +23,32 @@ export declare const useComboboxRow: import("../utils/types.js").Hook<ComboboxRo
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxRow>
- *     <ComboboxItem value="Item 1.1" />
- *     <ComboboxItem value="Item 1.2" />
- *     <ComboboxItem value="Item 1.3" />
- *   </ComboboxRow>
- *   <ComboboxRow>
- *     <ComboboxItem value="Item 2.1" />
- *     <ComboboxItem value="Item 2.2" />
- *     <ComboboxItem value="Item 2.3" />
- *   </ComboboxRow>
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxRow>
+ *       <ComboboxItem value="Item 1.1" />
+ *       <ComboboxItem value="Item 1.2" />
+ *       <ComboboxItem value="Item 1.3" />
+ *     </ComboboxRow>
+ *     <ComboboxRow>
+ *       <ComboboxItem value="Item 2.1" />
+ *       <ComboboxItem value="Item 2.2" />
+ *       <ComboboxItem value="Item 2.3" />
+ *     </ComboboxRow>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxRow: import("../utils/types.js").Component<ComboboxRowOptions<"div">>;
 export interface ComboboxRowOptions<T extends As = "div"> extends CompositeRowOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook. If not provided, the parent
-     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
      */
     store?: ComboboxStore;
 }

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

@@ -22,21 +22,26 @@ export declare const useComboboxSeparator: import("../utils/types.js").Hook<Comb
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Item 1" />
- *   <ComboboxSeparator />
- *   <ComboboxItem value="Item 2" />
- *   <ComboboxItem value="Item 3" />
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxSeparator />
+ *     <ComboboxItem value="Item 2" />
+ *     <ComboboxItem value="Item 3" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxSeparator: import("../utils/types.js").Component<ComboboxSeparatorOptions<"hr">>;
 export interface ComboboxSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook. If not provided, the parent
-     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
      */
     store?: ComboboxStore;
 }

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

@@ -26,11 +26,16 @@ export interface ComboboxStoreFunctions extends Core.ComboboxStoreFunctions, Com
 export interface ComboboxStoreOptions extends Core.ComboboxStoreOptions, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
     /**
      * A callback that gets called when the `value` state changes.
+     *
+     * Live examples:
+     * - [Combobox filtering](https://ariakit.org/examples/combobox-filtering)
+     * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
+     * - [Combobox with links](https://ariakit.org/examples/combobox-links)
+     * - [Multi-selectable
+     *   Combobox](https://ariakit.org/examples/combobox-multiple)
+     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * @param value The new value.
-     * @example
-     * function MyCombobox({ value, onChange }) {
-     *   const combobox = useComboboxStore({ value, setValue: onChange });
-     * }
      */
     setValue?: (value: ComboboxStoreState["value"]) => void;
 }

package/esm/combobox/combobox-store.js

@@ -1,13 +1,13 @@
 import {
   useComboboxStore,
   useComboboxStoreProps
-} from "../__chunks/2JWPGQQP.js";
-import "../__chunks/FGP6QO3O.js";
-import "../__chunks/JEQRR7AL.js";
-import "../__chunks/DORFNB2S.js";
-import "../__chunks/6X2TPJLY.js";
-import "../__chunks/UHPQRTV4.js";
-import "../__chunks/L3AX6U5E.js";
+} from "../__chunks/V5EW3YHP.js";
+import "../__chunks/WGAKICTY.js";
+import "../__chunks/NWDF5QDV.js";
+import "../__chunks/H2BG4QDT.js";
+import "../__chunks/UY3UQ4QI.js";
+import "../__chunks/A2ONBKVT.js";
+import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";