@ariakit/react-core 0.3.1 → 0.3.3

package/esm/popover/popover-dismiss.js

@@ -1,14 +1,14 @@
 import {
   PopoverDismiss,
   usePopoverDismiss
-} from "../__chunks/4JNX5L5C.js";
-import "../__chunks/HMYMEP6U.js";
-import "../__chunks/QPWEKAWF.js";
-import "../__chunks/LND6SMHN.js";
+} from "../__chunks/T5VBGHBO.js";
+import "../__chunks/W5ZMSHVN.js";
+import "../__chunks/D2BRO4YW.js";
+import "../__chunks/XBIFFFUN.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/J7Q2EO23.js";

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

@@ -15,22 +15,28 @@ import type { PopoverStore } from "./popover-store.js";
  */
 export declare const usePopoverHeading: import("../utils/types.js").Hook<PopoverHeadingOptions<"h1">>;
 /**
- * Renders a heading in a popover. This component must be wrapped with `Popover`
- * so the `aria-labelledby` prop is properly set on the popover element.
+ * Renders a heading in a popover. This component must be wrapped with
+ * [`Popover`](https://ariakit.org/reference/popover) so the `aria-labelledby`
+ * prop is properly set on the popover element.
  * @see https://ariakit.org/components/popover
  * @example
  * ```jsx
- * const popover = usePopoverStore();
- * <Popover store={popover}>
- *   <PopoverHeading>Heading</PopoverHeading>
- * </Popover>
+ * <PopoverProvider>
+ *   <Popover>
+ *     <PopoverHeading>Heading</PopoverHeading>
+ *   </Popover>
+ * </PopoverProvider>
  * ```
  */
 export declare const PopoverHeading: import("../utils/types.js").Component<PopoverHeadingOptions<"h1">>;
 export interface PopoverHeadingOptions<T extends As = "h1"> extends DialogHeadingOptions<T> {
     /**
-     * Object returned by the `usePopoverStore` hook. If not provided, the parent
-     * `Popover` component's context will be used.
+     * Object returned by the
+     * [`usePopoverStore`](https://ariakit.org/reference/use-popover-store) hook.
+     * If not provided, the closest
+     * [`Popover`](https://ariakit.org/reference/popover) or
+     * [`PopoverProvider`](https://ariakit.org/reference/popover-provider)
+     * components' context will be used.
      */
     store?: PopoverStore;
 }

package/esm/popover/popover-provider.js

@@ -6,10 +6,10 @@ import "../__chunks/56KWVYDN.js";
 import "../__chunks/CFEUKV6C.js";
 import {
   usePopoverStore
-} from "../__chunks/XEZV3AK4.js";
-import "../__chunks/HCTAKPNS.js";
-import "../__chunks/E6GADH6Y.js";
-import "../__chunks/XXO3VVQU.js";
+} from "../__chunks/DO6GQUCF.js";
+import "../__chunks/DJUMA466.js";
+import "../__chunks/BWOZSOC7.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/popover/popover-store.js

@@ -1,10 +1,10 @@
 import {
   usePopoverStore,
   usePopoverStoreProps
-} from "../__chunks/XEZV3AK4.js";
-import "../__chunks/HCTAKPNS.js";
-import "../__chunks/E6GADH6Y.js";
-import "../__chunks/XXO3VVQU.js";
+} from "../__chunks/DO6GQUCF.js";
+import "../__chunks/DJUMA466.js";
+import "../__chunks/BWOZSOC7.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/popover/popover.d.ts

@@ -24,16 +24,20 @@ export declare const usePopover: import("../utils/types.js").Hook<PopoverOptions
  * @see https://ariakit.org/components/popover
  * @example
  * ```jsx
- * const popover = usePopoverStore();
- * <PopoverDisclosure store={popover}>Disclosure</PopoverDisclosure>
- * <Popover store={popover}>Popover</Popover>
+ * <PopoverProvider>
+ *   <PopoverDisclosure>Disclosure</PopoverDisclosure>
+ *   <Popover>Popover</Popover>
+ * </PopoverProvider>
  * ```
  */
 export declare const Popover: import("../utils/types.js").Component<PopoverOptions<"div">>;
 export interface PopoverOptions<T extends As = "div"> extends DialogOptions<T> {
     /**
-     * Object returned by the `usePopoverStore` hook.
-     * @see https://ariakit.org/guide/component-stores
+     * Object returned by the
+     * [`usePopoverStore`](https://ariakit.org/reference/use-popover-store) hook.
+     * If not provided, the closest
+     * [`PopoverProvider`](https://ariakit.org/reference/popover-provider)
+     * component's context will be used.
      */
     store?: PopoverStore;
     /**
@@ -59,10 +63,10 @@ export interface PopoverOptions<T extends As = "div"> extends DialogOptions<T> {
     shift?: number;
     /**
      * Controls the behavior of the popover when it overflows the viewport:
-     *   - If a `boolean`, specifies whether the popover should flip to the
-     *     opposite side when it overflows.
-     *   - If a `string`, indicates the preferred fallback placements when it
-     *     overflows. The placements must be spaced-delimited, e.g. "top left".
+     * - If a `boolean`, specifies whether the popover should flip to the opposite
+     *   side when it overflows.
+     * - If a `string`, indicates the preferred fallback placements when it
+     *   overflows. The placements must be spaced-delimited, e.g. "top left".
      * @default true
      */
     flip?: boolean | string;

package/esm/popover/popover.js

@@ -1,18 +1,18 @@
 import {
   Popover,
   usePopover
-} from "../__chunks/RVGVDX6B.js";
-import "../__chunks/CJPLAYFB.js";
-import "../__chunks/NRLOAE2I.js";
-import "../__chunks/PLOINBVB.js";
-import "../__chunks/HAVCR65N.js";
+} from "../__chunks/MNVQ65E5.js";
+import "../__chunks/YGEFENKI.js";
+import "../__chunks/IAA7Y45N.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";
@@ -28,12 +28,12 @@ import "../__chunks/3D7ZB3CS.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 "../__chunks/CFEUKV6C.js";
-import "../__chunks/E6GADH6Y.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/BWOZSOC7.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/portal/portal.d.ts

@@ -22,8 +22,9 @@ export declare const Portal: import("../utils/types.js").Component<PortalOptions
 export interface PortalOptions<T extends As = "div"> extends Options<T> {
     /**
      * When enabled, `preserveTabOrder` will keep the DOM element's tab order the
-     * same as the order in which the `Portal` component was mounted in the React
-     * tree.
+     * same as the order in which the underlying
+     * [`Portal`](https://ariakit.org/reference/portal) component was mounted in
+     * the React tree.
      * @default false
      */
     preserveTabOrder?: boolean;
@@ -32,8 +33,11 @@ export interface PortalOptions<T extends As = "div"> extends Options<T> {
      * useful when you need to be informed when the portal element is appended to
      * the DOM or removed from the DOM.
      * @example
+     * ```jsx
      * const [portalElement, setPortalElement] = useState(null);
-     * <Portal portalRef={setPortalElement} />;
+     *
+     * <Portal portalRef={setPortalElement} />
+     * ```
      */
     portalRef?: RefCallback<HTMLElement> | MutableRefObject<HTMLElement | null>;
     /**
@@ -47,17 +51,24 @@ export interface PortalOptions<T extends As = "div"> extends Options<T> {
      * will be a `div` element appended to the `document.body`.
      * @default HTMLDivElement
      * @example
+     * ```jsx
      * const [portal, setPortal] = useState(null);
-     * <Portal portalElement={portal} />;
-     * <div ref={setPortal} />;
+     * <>
+     *   <Portal portalElement={portal} />
+     *   <div ref={setPortal} />
+     * </>
+     * ```
      * @example
+     * ```jsx
      * const getPortalElement = useCallback(() => {
      *   const div = document.createElement("div");
      *   const portalRoot = document.getElementById("portal-root");
      *   portalRoot.appendChild(div);
      *   return div;
      * }, []);
-     * <Portal portalElement={getPortalElement} />;
+     *
+     * <Portal portalElement={getPortalElement} />
+     * ```
      */
     portalElement?: ((element: HTMLElement) => HTMLElement | null) | HTMLElement | null;
 }

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

@@ -30,7 +30,11 @@ export declare const useRadioGroup: import("../utils/types.js").Hook<RadioGroupO
 export declare const RadioGroup: import("../utils/types.js").Component<RadioGroupOptions<"div">>;
 export interface RadioGroupOptions<T extends As = "div"> extends CompositeOptions<T> {
     /**
-     * Object returned by the `useRadioStore` hook.
+     * Object returned by the
+     * [`useRadioStore`](https://ariakit.org/reference/use-radio-store) hook. If
+     * not provided, the closest
+     * [`RadioProvider`](https://ariakit.org/reference/radio-provider) component's
+     * context will be used.
      */
     store?: RadioStore;
 }

package/esm/radio/radio-group.js

@@ -4,11 +4,11 @@ import {
 } from "../__chunks/NRFPH2ON.js";
 import {
   useComposite
-} from "../__chunks/HYNMOU7J.js";
+} from "../__chunks/56TAEBRJ.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,

package/esm/radio/radio-provider.js

@@ -1,15 +1,15 @@
 import {
   useRadioStore
-} from "../__chunks/4WK6LN27.js";
+} from "../__chunks/XQCQJGZ3.js";
 import {
   RadioContextProvider
 } from "../__chunks/NRFPH2ON.js";
-import "../__chunks/WGAKICTY.js";
-import "../__chunks/NWDF5QDV.js";
+import "../__chunks/EZ23JQKA.js";
+import "../__chunks/C6MBVGZ2.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

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

@@ -22,11 +22,6 @@ export interface RadioStoreFunctions extends Core.RadioStoreFunctions, Composite
 export interface RadioStoreOptions extends Core.RadioStoreOptions, CompositeStoreOptions {
     /**
      * Function that will be called when the `value` state changes.
-     * @param value The new value.
-     * @example
-     * function RadioGroup({ value, onChange }) {
-     *   const radio = useRadioStore({ value, setValue: onChange });
-     * }
      */
     setValue?: (value: RadioStoreState["value"]) => void;
 }

package/esm/radio/radio-store.js

@@ -1,10 +1,10 @@
 import {
   useRadioStore,
   useRadioStoreProps
-} from "../__chunks/4WK6LN27.js";
-import "../__chunks/WGAKICTY.js";
-import "../__chunks/NWDF5QDV.js";
-import "../__chunks/XXO3VVQU.js";
+} from "../__chunks/XQCQJGZ3.js";
+import "../__chunks/EZ23JQKA.js";
+import "../__chunks/C6MBVGZ2.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/radio/radio.d.ts

@@ -32,8 +32,12 @@ export declare const useRadio: import("../utils/types.js").Hook<RadioOptions<"in
 export declare const Radio: import("../utils/types.js").Component<RadioOptions<"input">>;
 export interface RadioOptions<T extends As = "input"> extends CompositeItemOptions<T> {
     /**
-     * Object returned by the `useRadioStore` hook. If not provided, the parent
-     * `RadioGroup` component's context will be used.
+     * Object returned by the
+     * [`useRadioStore`](https://ariakit.org/reference/use-radio-store) hook. If
+     * not provided, the closest
+     * [`RadioGroup`](https://ariakit.org/reference/radio-group) or
+     * [`RadioProvider`](https://ariakit.org/reference/radio-provider) components'
+     * context will be used.
      */
     store?: RadioStore;
     /**

package/esm/radio/radio.js

@@ -1,18 +1,18 @@
 import {
   Radio,
   useRadio
-} from "../__chunks/R4FKKQYI.js";
+} from "../__chunks/OJDCQDIL.js";
 import "../__chunks/NRFPH2ON.js";
-import "../__chunks/72OJKUSZ.js";
-import "../__chunks/LND6SMHN.js";
+import "../__chunks/54J7EHCU.js";
+import "../__chunks/XBIFFFUN.js";
 import "../__chunks/XIA3HAXM.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

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

@@ -21,26 +21,31 @@ import type { SelectStore } from "./select-store.js";
 export declare const useSelectArrow: import("../utils/types.js").Hook<SelectArrowOptions<"span">>;
 /**
  * Renders an arrow pointing to the select popover position. It's usually
- * rendered inside the `Select` component.
+ * rendered inside the [`Select`](https://ariakit.org/reference/select)
+ * component.
  * @see https://ariakit.org/components/select
  * @example
  * ```jsx
- * const select = useSelectStore();
- * <Select store={select}>
- *   {select.value}
- *   <SelectArrow />
- * </Select>
- * <SelectPopover store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectPopover>
+ * <SelectProvider>
+ *   <Select>
+ *     {select.value}
+ *     <SelectArrow />
+ *   </Select>
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectArrow: import("../utils/types.js").Component<SelectArrowOptions<"span">>;
 export interface SelectArrowOptions<T extends As = "span"> extends PopoverDisclosureArrowOptions<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 [`Select`](https://ariakit.org/reference/select)
+     * or [`SelectProvider`](https://ariakit.org/reference/select-provider)
+     * components' context will be used.
      */
     store?: SelectStore;
 }

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

@@ -21,27 +21,32 @@ export declare const useSelectGroupLabel: import("../utils/types.js").Hook<Selec
  * @see https://ariakit.org/components/select
  * @example
  * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectGroup>
- *     <SelectGroupLabel>Fruits</SelectGroupLabel>
- *     <SelectItem value="Apple" />
- *     <SelectItem value="Orange" />
- *   </SelectGroup>
- *   <SelectGroup>
- *     <SelectGroupLabel>Meat</SelectGroupLabel>
- *     <SelectItem value="Beef" />
- *     <SelectItem value="Chicken" />
- *   </SelectGroup>
- * </SelectPopover>
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Fruits</SelectGroupLabel>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectGroup>
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Meat</SelectGroupLabel>
+ *       <SelectItem value="Beef" />
+ *       <SelectItem value="Chicken" />
+ *     </SelectGroup>
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectGroupLabel: import("../utils/types.js").Component<SelectGroupLabelOptions<"div">>;
 export interface SelectGroupLabelOptions<T extends As = "div"> extends CompositeGroupLabelOptions<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-group.d.ts

@@ -24,22 +24,27 @@ export declare const useSelectGroup: import("../utils/types.js").Hook<SelectGrou
  * @see https://ariakit.org/components/select
  * @example
  * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectGroup>
- *     <SelectGroupLabel>Fruits</SelectGroupLabel>
- *     <SelectItem value="Apple" />
- *     <SelectItem value="Orange" />
- *   </SelectGroup>
- * </SelectPopover>
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Fruits</SelectGroupLabel>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectGroup>
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectGroup: import("../utils/types.js").Component<SelectGroupOptions<"div">>;
 export interface SelectGroupOptions<T extends As = "div"> extends CompositeGroupOptions<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-item-check.d.ts

@@ -20,31 +20,37 @@ export declare const useSelectItemCheck: import("../utils/types.js").Hook<Select
  * @see https://ariakit.org/components/select
  * @example
  * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Apple">
- *     <SelectItemCheck />
- *     Apple
- *   </SelectItem>
- *   <SelectItem value="Orange">
- *     <SelectItemCheck />
- *     Orange
- *   </SelectItem>
- * </SelectPopover>
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple">
+ *       <SelectItemCheck />
+ *       Apple
+ *     </SelectItem>
+ *     <SelectItem value="Orange">
+ *       <SelectItemCheck />
+ *       Orange
+ *     </SelectItem>
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectItemCheck: import("../utils/types.js").Component<SelectItemCheckOptions<"span">>;
 export interface SelectItemCheckOptions<T extends As = "span"> extends CheckboxCheckOptions<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;
     /**
      * Whether the check mark should be shown. This value is automatically
-     * inferred from the parent `SelectItem` component. Manually setting this prop
-     * will override the inferred value.
+     * inferred from the parent
+     * [`SelectItem`](https://ariakit.org/reference/select-item) component.
+     * Manually setting this prop will override the inferred value.
      */
     checked?: boolean;
 }