@ariakit/react-core 0.3.2 → 0.3.4

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

@@ -16,39 +16,64 @@ import type { SelectStore } from "./select-store.js";
  */
 export declare const useSelectItem: import("../utils/types.js").Hook<SelectItemOptions<"div">>;
 /**
- * Renders a select item inside a select list or select popover. The `role` prop
- * will be automatically set based on the `SelectList` or `SelectPopover` own
- * `role` prop. For example, if the `SelectPopover` component's `role` prop is
- * set to `listbox` (default), the `SelectItem` `role` will be set to `option`.
- * By default, the `value` prop will be rendered as the children, but this can
- * be overriden.
+ * Renders a select item inside a
+ * [`SelectList`](https://ariakit.org/reference/select-list) or
+ * [`SelectPopover`](https://ariakit.org/reference/select-popover).
+ *
+ * The `role` attribute will be automatically set on the item based on the
+ * list's own `role` attribute. For example, if the
+ * [`SelectPopover`](https://ariakit.org/reference/select-popover) component's
+ * `role` attribute is set to `listbox` (which is the default), the item `role`
+ * will be set to `option`.
+ *
+ * By default, the [`value`](https://ariakit.org/reference/select-item#value)
+ * prop will be rendered as the children, but this can be overriden if a custom
+ * children is provided.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectPopover>
+ * ```jsx {4-5}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectItem: import("../utils/types.js").Component<SelectItemOptions<"div">>;
 export interface SelectItemOptions<T extends As = "div"> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
     /**
-     * Object returned by the `useSelectStore` hook. If not provided, the parent
-     * `SelectList` or `SelectPopover` components' context will be used.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the parent
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components'
+     * context will be used.
      */
     store?: SelectStore;
     /**
      * The value of the item. This will be rendered as the children by default.
-     *   - If `setValueOnClick` is set to `true` on this component, the
-     *     `select.value` state will be set to this value when the user clicks on
-     *     it.
-     *   - If `select.setValueOnMove` is set to `true` on the select store, the
-     *     `select.value` state will be set to this value when the user moves to
-     *     it (which is usually the case when moving through the items using the
-     *     keyboard).
+     * - If
+     *   [`setValueOnClick`](https://ariakit.org/reference/select-item#setvalueonclick)
+     *   is set to `true`, the
+     *   [`value`](https://ariakit.org/reference/select-provider#value) state will
+     *   be set to this value when the user clicks on it.
+     * - If
+     *   [`setValueOnMove`](https://ariakit.org/reference/select-provider#setvalueonmove)
+     *   is set to `true`, the
+     *   [`value`](https://ariakit.org/reference/select-provider#value) state will
+     *   be set to this value when the user moves to it (which is usually the case
+     *   when moving through the items using the keyboard).
+     *
+     * Live examples:
+     * - [Form with Select](https://ariakit.org/examples/form-select)
+     * - [Animated Select](https://ariakit.org/examples/select-animated)
+     * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
+     * - [Select grid](https://ariakit.org/examples/select-grid)
+     * - [SelectGroup](https://ariakit.org/examples/select-group)
+     * - [Select with custom
+     *   item](https://ariakit.org/examples/select-item-custom)
      * @example
      * ```jsx
      * <SelectItem value="Apple" />
@@ -57,12 +82,14 @@ export interface SelectItemOptions<T extends As = "div"> extends CompositeItemOp
     value?: string;
     /**
      * Whether to hide the select when this item is clicked. By default, it's
-     * `true` when the `value` prop is also provided.
+     * `true` when the [`value`](https://ariakit.org/reference/select-item#value)
+     * prop is also provided.
      */
     hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * Whether to set the select value with this item's value, if any, when this
-     * item is clicked. By default, it's `true` when the `value` prop is also
+     * item is clicked. By default, it's `true` when the
+     * [`value`](https://ariakit.org/reference/select-item#value) prop is also
      * provided.
      */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;

package/esm/select/select-item.js

@@ -7,8 +7,8 @@ import {
 } from "../__chunks/US4OMDIO.js";
 import {
   useCompositeItem
-} from "../__chunks/72OJKUSZ.js";
-import "../__chunks/LND6SMHN.js";
+} from "../__chunks/IQXVWBXC.js";
+import "../__chunks/CAIAWNDV.js";
 import "../__chunks/XIA3HAXM.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
@@ -16,14 +16,14 @@ import "../__chunks/74KKBFVP.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createElement,
   createHook,
   createMemoComponent
 } from "../__chunks/CFEUKV6C.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/WHAB4XD6.js";
 import {
   useBooleanEvent,
   useEvent,

package/esm/select/select-label.d.ts

@@ -16,27 +16,31 @@ import type { SelectStore } from "./select-store.js";
  */
 export declare const useSelectLabel: import("../utils/types.js").Hook<SelectLabelOptions<"div">>;
 /**
- * Renders a label for the `Select` component. Since it's not a native select
- * element, we can't use the native label element. The `SelectLabel` component
- * will move focus and click on the `Select` component when the user clicks on
- * the label.
+ * Renders a label for the [`Select`](https://ariakit.org/reference/select)
+ * component. Since it's not a native select element, we can't use the native
+ * label element. This component will move focus and click on the
+ * [`Select`](https://ariakit.org/reference/select) component when clicked.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore({ defaultValue: "Apple" });
- * <SelectLabel store={select}>Favorite fruit</SelectLabel>
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectPopover>
+ * ```jsx {2}
+ * <SelectProvider defaultValue="Apple">
+ *   <SelectLabel>Favorite fruit</SelectLabel>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectLabel: import("../utils/types.js").Component<SelectLabelOptions<"div">>;
 export interface SelectLabelOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `useSelectStore` hook. If not provided, the parent
-     * `Select` component's context will be used.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the closest
+     * [`SelectProvider`](https://ariakit.org/reference/select-provider)
+     * component's context will be used.
      */
     store?: SelectStore;
 }

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

@@ -20,37 +20,47 @@ import type { SelectStore } from "./select-store.js";
  */
 export declare const useSelectList: import("../utils/types.js").Hook<SelectListOptions<"div">>;
 /**
- * Renders a select list. The `role` prop is set to `listbox` by default, but
- * can be overriden by any other valid select popup role (`listbox`, `menu`,
- * `tree`, `grid` or `dialog`). The `aria-labelledby` prop is set to the select
- * input element's `id` by default.
+ * Renders a select list. The `role` attribute is set to `listbox` by default,
+ * but can be overriden by any other valid select popup role (`listbox`, `menu`,
+ * `tree`, `grid` or `dialog`).
+ *
+ * The `aria-labelledby` attribute is set to the
+ * [`Select`](https://ariakit.org/reference/select) element's `id` by default.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectList store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectList>
+ * ```jsx {3-6}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectList>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectList>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectList: import("../utils/types.js").Component<SelectListOptions<"div">>;
 export interface SelectListOptions<T extends As = "div"> extends CompositeOptions<T>, CompositeTypeaheadOptions<T>, Pick<DisclosureContentOptions, "alwaysVisible"> {
     /**
-     * Object returned by the `useSelectStore` hook.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the closest
+     * [`SelectProvider`](https://ariakit.org/reference/select-provider)
+     * component's context will be used.
      */
     store?: SelectStore;
     /**
      * Whether the select value should be reset to the value before the list got
-     * shown when Escape is pressed. This has effect only when `selectOnMove` is
-     * `true` on the select store.
+     * shown when Escape is pressed. This has effect only when
+     * [`setValueOnMove`](https://ariakit.org/reference/select-provider#setvalueonmove)
+     * is `true`.
      * @default true
      */
     resetOnEscape?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
     /**
-     * Whether the select list should be hidden when the user presses Enter or
-     * Space while the list is focused (that is, no item is selected).
+     * Whether the [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components
+     * should be hidden when the user presses Enter or Space while the list
+     * element is focused and no item is active.
      * @default true
      */
     hideOnEnter?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;

package/esm/select/select-list.js

@@ -1,20 +1,21 @@
 import {
   SelectList,
   useSelectList
-} from "../__chunks/QJMIKN5O.js";
+} from "../__chunks/3FLPLDNL.js";
 import "../__chunks/YVYWIVKG.js";
 import "../__chunks/US4OMDIO.js";
-import "../__chunks/HYNMOU7J.js";
+import "../__chunks/56TAEBRJ.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
-import "../__chunks/3D7ZB3CS.js";
+import "../__chunks/KK6NPMOP.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/CFEUKV6C.js";
+import "../__chunks/WHAB4XD6.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

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

@@ -16,18 +16,19 @@ import type { SelectListOptions } from "./select-list.js";
  */
 export declare const useSelectPopover: import("../utils/types.js").Hook<SelectPopoverOptions<"div">>;
 /**
- * Renders a select popover. The `role` prop is set to `listbox` by default, but
- * can be overriden by any other valid select popup role (`listbox`, `menu`,
- * `tree`, `grid` or `dialog`).
+ * Renders a select popover. The `role` attribute is set to `listbox` by
+ * default, but can be overriden by any other valid select popup role
+ * (`listbox`, `menu`, `tree`, `grid` or `dialog`).
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectPopover>
+ * ```jsx {3-6}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectPopover: import("../utils/types.js").Component<SelectPopoverOptions<"div">>;

package/esm/select/select-popover.js

@@ -1,28 +1,30 @@
 import {
   useSelectList
-} from "../__chunks/QJMIKN5O.js";
+} from "../__chunks/3FLPLDNL.js";
 import "../__chunks/YVYWIVKG.js";
 import {
   useSelectProviderContext
 } from "../__chunks/US4OMDIO.js";
-import "../__chunks/HYNMOU7J.js";
+import "../__chunks/56TAEBRJ.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import {
   usePopover
-} from "../__chunks/GP4UGJIZ.js";
-import "../__chunks/4RP654JS.js";
-import "../__chunks/W575AF63.js";
-import "../__chunks/PLOINBVB.js";
-import "../__chunks/HAVCR65N.js";
+} from "../__chunks/H3CXUGYG.js";
+import {
+  createDialogComponent
+} from "../__chunks/UXIMR4AS.js";
+import "../__chunks/NXB7YL3C.js";
+import "../__chunks/HWJ7DGMR.js";
+import "../__chunks/7LB47D2O.js";
 import "../__chunks/62DFK33R.js";
-import "../__chunks/KGDYSCOM.js";
-import "../__chunks/XASENZA4.js";
-import "../__chunks/X5VV5CBA.js";
+import "../__chunks/FRKOFFMT.js";
+import "../__chunks/EGOOWJGN.js";
+import "../__chunks/7VWXICM7.js";
 import "../__chunks/KOVUJERF.js";
 import "../__chunks/IXXFVVA2.js";
-import "../__chunks/5M4ITSXL.js";
+import "../__chunks/VRCYQ6JX.js";
 import "../__chunks/7JNF6I52.js";
 import "../__chunks/3LGVTTHD.js";
 import "../__chunks/FW6QFGFT.js";
@@ -34,11 +36,11 @@ import "../__chunks/QW4PFVNF.js";
 import "../__chunks/LDDPB3PY.js";
 import "../__chunks/COQHFAEN.js";
 import "../__chunks/PGK6S5NC.js";
-import "../__chunks/3D7ZB3CS.js";
+import "../__chunks/KK6NPMOP.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/6XXSNRNX.js";
 import {
@@ -46,8 +48,9 @@ import {
   createElement,
   createHook
 } from "../__chunks/CFEUKV6C.js";
-import "../__chunks/A2ONBKVT.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/IZFXPXHG.js";
+import "../__chunks/OD3JT64N.js";
+import "../__chunks/WHAB4XD6.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {
@@ -66,10 +69,13 @@ var useSelectPopover = createHook(
     return props;
   }
 );
-var SelectPopover = createComponent((props) => {
-  const htmlProps = useSelectPopover(props);
-  return createElement("div", htmlProps);
-});
+var SelectPopover = createDialogComponent(
+  createComponent((props) => {
+    const htmlProps = useSelectPopover(props);
+    return createElement("div", htmlProps);
+  }),
+  useSelectProviderContext
+);
 if (process.env.NODE_ENV !== "production") {
   SelectPopover.displayName = "SelectPopover";
 }

package/esm/select/select-provider.js

@@ -1,22 +1,22 @@
 import {
   useSelectStore
-} from "../__chunks/4SB2BYFE.js";
+} from "../__chunks/3X3TLUHU.js";
 import "../__chunks/QP4RN5UY.js";
 import {
   SelectContextProvider
 } from "../__chunks/US4OMDIO.js";
-import "../__chunks/WGAKICTY.js";
-import "../__chunks/NWDF5QDV.js";
+import "../__chunks/WRZGD4DH.js";
+import "../__chunks/YS46MLTR.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/H2BG4QDT.js";
-import "../__chunks/UY3UQ4QI.js";
-import "../__chunks/A2ONBKVT.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/QTZ67ALK.js";
+import "../__chunks/IZFXPXHG.js";
+import "../__chunks/OD3JT64N.js";
+import "../__chunks/WHAB4XD6.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/select/select-renderer.js

@@ -1,10 +1,10 @@
 import {
   useCompositeRenderer
-} from "../__chunks/C5JX5C3O.js";
+} from "../__chunks/DCODCZJS.js";
 import {
   getCollectionRendererItem,
   getCollectionRendererItemId
-} from "../__chunks/3HFOFZP4.js";
+} from "../__chunks/2FIUKXIM.js";
 import {
   useSelectContext
 } from "../__chunks/US4OMDIO.js";
@@ -19,7 +19,7 @@ import {
 } from "../__chunks/CFEUKV6C.js";
 import {
   useStoreState
-} from "../__chunks/XXO3VVQU.js";
+} from "../__chunks/WHAB4XD6.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {

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

@@ -21,26 +21,31 @@ export declare const useSelectRow: import("../utils/types.js").Hook<SelectRowOpt
  * Renders a select row.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectRow>
- *     <SelectItem value="Apple" />
- *     <SelectItem value="Orange" />
- *   </SelectRow>
- *   <SelectRow>
- *     <SelectItem value="Banana" />
- *     <SelectItem value="Grape" />
- *   </SelectRow>
- * </SelectPopover>
+ * ```jsx {4-11}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectRow>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectRow>
+ *     <SelectRow>
+ *       <SelectItem value="Banana" />
+ *       <SelectItem value="Grape" />
+ *     </SelectRow>
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectRow: import("../utils/types.js").Component<SelectRowOptions<"div">>;
 export interface SelectRowOptions<T extends As = "div"> extends CompositeRowOptions<T> {
     /**
-     * Object returned by the `useSelectStore` hook. If not provided, the parent
-     * `SelectList` or `SelectPopover` components' context will be used.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the parent
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components'
+     * context will be used.
      */
     store?: SelectStore;
 }

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

@@ -21,22 +21,27 @@ export declare const useSelectSeparator: import("../utils/types.js").Hook<Select
  * Renders a separator element for select items.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Item 1" />
- *   <SelectSeparator />
- *   <SelectItem value="Item 2" />
- *   <SelectItem value="Item 3" />
- * </SelectPopover>
+ * ```jsx {5}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Item 1" />
+ *     <SelectSeparator />
+ *     <SelectItem value="Item 2" />
+ *     <SelectItem value="Item 3" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectSeparator: import("../utils/types.js").Component<SelectSeparatorOptions<"hr">>;
 export interface SelectSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
     /**
-     * Object returned by the `useSelectStore` hook. If not provided, the parent
-     * `SelectList` or `SelectPopover` components' context will be used.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the parent
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components'
+     * context will be used.
      */
     store?: SelectStore;
 }

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

@@ -40,10 +40,6 @@ export interface SelectStoreOptions<T extends Value = Value> extends Core.Select
     /**
      * Function that will be called when the `value` state changes.
      * @param value The new value.
-     * @example
-     * function MySelect({ value, onChange }) {
-     *   const select = useSelectStore({ value, setValue: onChange });
-     * }
      */
     setValue?: BivariantCallback<(value: SelectStoreState<T>["value"]) => void>;
     /**

package/esm/select/select-store.js

@@ -1,20 +1,20 @@
 import {
   useSelectStore,
   useSelectStoreProps
-} from "../__chunks/4SB2BYFE.js";
+} from "../__chunks/3X3TLUHU.js";
 import "../__chunks/QP4RN5UY.js";
-import "../__chunks/WGAKICTY.js";
-import "../__chunks/NWDF5QDV.js";
+import "../__chunks/WRZGD4DH.js";
+import "../__chunks/YS46MLTR.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/H2BG4QDT.js";
-import "../__chunks/UY3UQ4QI.js";
-import "../__chunks/A2ONBKVT.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/QTZ67ALK.js";
+import "../__chunks/IZFXPXHG.js";
+import "../__chunks/OD3JT64N.js";
+import "../__chunks/WHAB4XD6.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";