@ariakit/react-core 0.3.2 → 0.3.4

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

@@ -26,20 +26,27 @@ export declare const useMenuItem: import("../utils/types.js").Hook<MenuItemOptio
  * @see https://ariakit.org/components/menu
  * @example
  * ```jsx
- * const menu = useMenuStore();
- * <MenuButton store={menu}>Edit</MenuButton>
- * <Menu store={menu}>
- *   <MenuItem>Undo</MenuItem>
- *   <MenuItem>Redo</MenuItem>
- * </Menu>
+ * <MenuProvider>
+ *   <MenuButton>Edit</MenuButton>
+ *   <Menu>
+ *     <MenuItem>Undo</MenuItem>
+ *     <MenuItem>Redo</MenuItem>
+ *   </Menu>
+ * </MenuProvider>
  * ```
  */
 export declare const MenuItem: import("../utils/types.js").Component<MenuItemOptions<"div">>;
 export interface MenuItemOptions<T extends As = "div"> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
     /**
-     * Object returned by the `useMenuBarStore` or `useMenuStore` hooks. If not
-     * provided, the parent `Menu` or `MenuBar` components' context will be
-     * used.
+     * Object returned by the
+     * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) or
+     * [`useMenuBarStore`](https://ariakit.org/reference/use-menu-bar-store)
+     * hooks. If not provided, the closest
+     * [`Menu`](https://ariakit.org/reference/menu),
+     * [`MenuProvider`](https://ariakit.org/reference/menu-provider),
+     * [`MenuBar`](https://ariakit.org/reference/menu-bar), or
+     * [`MenuBarProvider`](https://ariakit.org/reference/menu-bar-provider)
+     * components' context will be used.
      */
     store?: MenuBarStore | MenuStore;
     /**

package/esm/menu/menu-item.js

@@ -1,12 +1,12 @@
 import {
   MenuItem,
   useMenuItem
-} from "../__chunks/EKIHOHWR.js";
+} from "../__chunks/JRZOTPWS.js";
 import "../__chunks/W7JXAQKF.js";
 import "../__chunks/2GC3IEM7.js";
 import "../__chunks/XCH4OEEE.js";
-import "../__chunks/72OJKUSZ.js";
-import "../__chunks/LND6SMHN.js";
+import "../__chunks/IQXVWBXC.js";
+import "../__chunks/CAIAWNDV.js";
 import "../__chunks/XIA3HAXM.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
@@ -15,10 +15,10 @@ import "../__chunks/5DA3HK6G.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/XXO3VVQU.js";
+import "../__chunks/WHAB4XD6.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

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

@@ -23,18 +23,23 @@ export declare const useMenuList: import("../utils/types.js").Hook<MenuListOptio
  * @see https://ariakit.org/components/menu
  * @example
  * ```jsx
- * const menu = useMenuStore();
- * <MenuButton store={menu}>Edit</MenuButton>
- * <MenuList store={menu}>
- *   <MenuItem>Undo</MenuItem>
- *   <MenuItem>Redo</MenuItem>
- * </MenuList>
+ * <MenuProvider>
+ *   <MenuButton>Edit</MenuButton>
+ *   <MenuList>
+ *     <MenuItem>Undo</MenuItem>
+ *     <MenuItem>Redo</MenuItem>
+ *   </MenuList>
+ * </MenuProvider>
  * ```
  */
 export declare const MenuList: import("../utils/types.js").Component<MenuListOptions<"div">>;
 export interface MenuListOptions<T extends As = "div"> extends CompositeOptions<T>, CompositeTypeaheadOptions<T>, Pick<DisclosureContentOptions, "alwaysVisible"> {
     /**
-     * Object returned by the `useMenuStore` hook.
+     * Object returned by the
+     * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
+     * provided, the closest
+     * [`MenuProvider`](https://ariakit.org/reference/menu-provider) component's
+     * context will be used.
      */
     store?: MenuStore;
 }

package/esm/menu/menu-list.js

@@ -1,22 +1,22 @@
 import {
   MenuList,
   useMenuList
-} from "../__chunks/VDTDCNMP.js";
+} from "../__chunks/2BTPJSKW.js";
 import "../__chunks/2GC3IEM7.js";
 import "../__chunks/YVYWIVKG.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/5DA3HK6G.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/XXO3VVQU.js";
+import "../__chunks/WHAB4XD6.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/menu/menu-provider.js

@@ -1,12 +1,12 @@
 import {
   useMenuStore
-} from "../__chunks/IFNQMENS.js";
+} from "../__chunks/DLZTS5NV.js";
 import {
   MenuContextProvider
 } from "../__chunks/2GC3IEM7.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/5DA3HK6G.js";
@@ -14,11 +14,11 @@ import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/UQFOL5I6.js";
-import "../__chunks/H2BG4QDT.js";
-import "../__chunks/UY3UQ4QI.js";
-import "../__chunks/A2ONBKVT.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/6W46XYWY.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/menu/menu-separator.d.ts

@@ -23,21 +23,25 @@ export declare const useMenuSeparator: import("../utils/types.js").Hook<MenuSepa
  * @see https://ariakit.org/components/menu
  * @example
  * ```jsx
- * const menu = useMenuStore();
- * <MenuButton store={menu}>Edit</MenuButton>
- * <Menu store={menu}>
- *   <MenuItem>Undo</MenuItem>
- *   <MenuItem>Redo</MenuItem>
- *   <MenuSeparator />
- *   <MenuItem>Cut</MenuItem>
- * </Menu>
+ * <MenuProvider>
+ *   <MenuButton>Edit</MenuButton>
+ *   <Menu>
+ *     <MenuItem>Undo</MenuItem>
+ *     <MenuItem>Redo</MenuItem>
+ *     <MenuSeparator />
+ *     <MenuItem>Cut</MenuItem>
+ *   </Menu>
+ * </MenuProvider>
  * ```
  */
 export declare const MenuSeparator: import("../utils/types.js").Component<MenuSeparatorOptions<"hr">>;
 export interface MenuSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
     /**
-     * Object returned by the `useMenuStore` hook. If not provided, the parent
-     * `Menu` component's context will be used.
+     * Object returned by the
+     * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
+     * provided, the closest [`Menu`](https://ariakit.org/reference/menu) or
+     * [`MenuProvider`](https://ariakit.org/reference/menu-provider) components'
+     * context will be used.
      */
     store?: MenuStore;
 }

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

@@ -98,25 +98,25 @@ export interface MenuStoreFunctions<T extends Values = Values> extends Pick<Menu
 export interface MenuStoreOptions<T extends Values = Values> extends Core.MenuStoreOptions<T>, CompositeStoreOptions, HovercardStoreOptions {
     /**
      * A callback that gets called when the `values` state changes.
-     * @param values The new values.
-     * @example
-     * const [values, setValues] = useState({});
-     * const menu = useMenuStore({ values, setValues });
+     *
+     * Live examples:
+     * - [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
      */
     setValues?: BivariantCallback<(values: MenuStoreState<T>["values"]) => void>;
     /**
      * A reference to a combobox store. This is used when combining the combobox
      * with a menu (e.g., dropdown menu with a search input). The stores will
      * share the same state.
-     *
-     * Live examples:
-     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
      */
     combobox?: ComboboxStore | null;
     /**
      * A reference to a parent menu store. It's automatically set when nesting
-     * menus in the React tree. You should manually set this if menus aren't nested
-     * in the React tree.
+     * menus in the React tree. You should manually set this if menus aren't
+     * nested in the React tree.
+     *
+     * Live examples:
+     * - [MenuBar](https://ariakit.org/examples/menu-bar)
+     * - [Submenu](https://ariakit.org/examples/menu-nested)
      */
     parent?: MenuStore | null;
     /**

package/esm/menu/menu-store.js

@@ -1,11 +1,11 @@
 import {
   useMenuStore,
   useMenuStoreProps
-} from "../__chunks/IFNQMENS.js";
+} from "../__chunks/DLZTS5NV.js";
 import "../__chunks/2GC3IEM7.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/5DA3HK6G.js";
@@ -13,11 +13,11 @@ import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/UQFOL5I6.js";
-import "../__chunks/H2BG4QDT.js";
-import "../__chunks/UY3UQ4QI.js";
-import "../__chunks/A2ONBKVT.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/6W46XYWY.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/menu/menu.d.ts

@@ -1,6 +1,6 @@
-import type { HovercardOptions } from "../hovercard/hovercard.js";
+import type { HovercardOptions } from "../hovercard/hovercard.jsx";
 import type { As, Props } from "../utils/types.js";
-import type { MenuListOptions } from "./menu-list.js";
+import type { MenuListOptions } from "./menu-list.jsx";
 /**
  * Returns props to create a `Menu` component.
  * @see https://ariakit.org/components/menu
@@ -21,12 +21,13 @@ export declare const useMenu: import("../utils/types.js").Hook<MenuOptions<"div"
  * @see https://ariakit.org/components/menu
  * @example
  * ```jsx
- * const menu = useMenuStore();
- * <MenuButton store={menu}>Edit</MenuButton>
- * <Menu store={menu}>
- *   <MenuItem>Undo</MenuItem>
- *   <MenuItem>Redo</MenuItem>
- * </Menu>
+ * <MenuProvider>
+ *   <MenuButton>Edit</MenuButton>
+ *   <Menu>
+ *     <MenuItem>Undo</MenuItem>
+ *     <MenuItem>Redo</MenuItem>
+ *   </Menu>
+ * </MenuProvider>
  * ```
  */
 export declare const Menu: import("../utils/types.js").Component<MenuOptions<"div">>;

package/esm/menu/menu.js

@@ -1,30 +1,32 @@
 import {
   useMenuList
-} from "../__chunks/VDTDCNMP.js";
+} from "../__chunks/2BTPJSKW.js";
 import {
   useMenuProviderContext
 } from "../__chunks/2GC3IEM7.js";
 import "../__chunks/YVYWIVKG.js";
-import "../__chunks/HYNMOU7J.js";
+import "../__chunks/56TAEBRJ.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import {
   useHovercard
-} from "../__chunks/34JEM52B.js";
+} from "../__chunks/F7UYWUBJ.js";
 import "../__chunks/X7FKJQME.js";
-import "../__chunks/GP4UGJIZ.js";
-import "../__chunks/4RP654JS.js";
-import "../__chunks/W575AF63.js";
-import "../__chunks/PLOINBVB.js";
-import "../__chunks/HAVCR65N.js";
+import "../__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";
@@ -36,12 +38,12 @@ 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/5DA3HK6G.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 {
@@ -49,11 +51,10 @@ 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 {
-  useBooleanEvent,
-  useEvent,
   useMergeRefs
 } from "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
@@ -63,20 +64,24 @@ import {
   __spreadValues
 } from "../__chunks/PNRLI7OV.js";
 
-// src/menu/menu.ts
+// src/menu/menu.tsx
 import { createRef, useEffect, useRef, useState } from "react";
 import { hasFocusWithin } from "@ariakit/core/utils/focus";
-import { invariant } from "@ariakit/core/utils/misc";
+import { invariant, isFalsyBooleanCallback } from "@ariakit/core/utils/misc";
 var useMenu = createHook(
   (_a) => {
     var _b = _a, {
       store,
+      modal: modalProp = false,
+      portal = !!modalProp,
       hideOnEscape = true,
       autoFocusOnShow = true,
       hideOnHoverOutside,
       alwaysVisible
     } = _b, props = __objRest(_b, [
       "store",
+      "modal",
+      "portal",
       "hideOnEscape",
       "autoFocusOnShow",
       "hideOnHoverOutside",
@@ -93,24 +98,8 @@ var useMenu = createHook(
     const parentMenuBar = store.menubar;
     const hasParentMenu = !!parentMenu;
     const parentIsMenuBar = !!parentMenuBar && !hasParentMenu;
-    const onKeyDownProp = props.onKeyDown;
-    const hideOnEscapeProp = useBooleanEvent(hideOnEscape);
-    const onKeyDown = useEvent((event) => {
-      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
-      if (event.defaultPrevented)
-        return;
-      if (event.key === "Escape") {
-        if (!hideOnEscapeProp(event))
-          return;
-        if (!hasParentMenu) {
-          event.stopPropagation();
-        }
-        return store == null ? void 0 : store.hide();
-      }
-    });
     props = __spreadProps(__spreadValues({}, props), {
-      ref: useMergeRefs(ref, props.ref),
-      onKeyDown
+      ref: useMergeRefs(ref, props.ref)
     });
     const _a2 = useMenuList(
       __spreadValues({ store, alwaysVisible }, props)
@@ -150,14 +139,21 @@ var useMenu = createHook(
         cleaning = true;
       };
     }, [store, autoFocusOnShowState, initialFocus, items, baseElement]);
+    const modal = hasParentMenu ? false : modalProp;
     const mayAutoFocusOnShow = !!autoFocusOnShow;
-    const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || !!props.modal;
+    const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || !!modal;
     props = useHovercard(__spreadProps(__spreadValues({
       store,
       alwaysVisible,
       initialFocus: initialFocusRef,
-      autoFocusOnShow: mayAutoFocusOnShow ? canAutoFocusOnShow && autoFocusOnShow : autoFocusOnShowState || !!props.modal
+      autoFocusOnShow: mayAutoFocusOnShow ? canAutoFocusOnShow && autoFocusOnShow : autoFocusOnShowState || !!modal
     }, props), {
+      hideOnEscape: (event) => {
+        if (isFalsyBooleanCallback(hideOnEscape, event))
+          return false;
+        store == null ? void 0 : store.hideAll();
+        return true;
+      },
       hideOnHoverOutside: (event) => {
         if (typeof hideOnHoverOutside === "function") {
           return hideOnHoverOutside(event);
@@ -177,14 +173,9 @@ var useMenu = createHook(
           return false;
         return true;
       },
-      // If it's a submenu, it shouldn't behave like a modal dialog, nor display
-      // a backdrop.
-      modal: hasParentMenu ? false : props.modal,
-      backdrop: hasParentMenu ? false : props.backdrop,
-      // If it's a submenu, hide on esc will be handled differently. That is,
-      // event.stopPropagation() won't be called, so the parent menus will also
-      // be closed.
-      hideOnEscape: hasParentMenu ? false : hideOnEscape
+      modal,
+      portal,
+      backdrop: hasParentMenu ? false : props.backdrop
     }));
     props = __spreadValues({
       "aria-labelledby": ariaLabelledBy
@@ -192,10 +183,13 @@ var useMenu = createHook(
     return props;
   }
 );
-var Menu = createComponent((props) => {
-  const htmlProps = useMenu(props);
-  return createElement("div", htmlProps);
-});
+var Menu = createDialogComponent(
+  createComponent((props) => {
+    const htmlProps = useMenu(props);
+    return createElement("div", htmlProps);
+  }),
+  useMenuProviderContext
+);
 if (process.env.NODE_ENV !== "production") {
   Menu.displayName = "Menu";
 }

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

@@ -18,15 +18,20 @@ export declare const usePopoverAnchor: import("../utils/types.js").Hook<PopoverA
  * @see https://ariakit.org/components/popover
  * @example
  * ```jsx
- * const popover = usePopoverStore();
- * <PopoverAnchor store={popover}>Anchor</PopoverAnchor>
- * <Popover store={popover}>Popover</Popover>
+ * <PopoverProvider>
+ *   <PopoverAnchor>Anchor</PopoverAnchor>
+ *   <Popover>Popover</Popover>
+ * </PopoverProvider>
  * ```
  */
 export declare const PopoverAnchor: import("../utils/types.js").Component<PopoverAnchorOptions<"div">>;
 export interface PopoverAnchorOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `usePopoverStore` hook.
+     * 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;
 }

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

@@ -15,22 +15,28 @@ import type { PopoverStore } from "./popover-store.js";
  */
 export declare const usePopoverArrow: import("../utils/types.js").Hook<PopoverArrowOptions<"div">>;
 /**
- * Renders an arrow inside a `Popover` component.
+ * Renders an arrow inside a [`Popover`](https://ariakit.org/reference/popover)
+ * component.
  * @see https://ariakit.org/components/popover
  * @example
  * ```jsx
- * const popover = usePopoverStore();
- * <Popover store={popover}>
- *   <PopoverArrow />
- *   Popover
- * </Popover>
+ * <PopoverProvider>
+ *   <Popover>
+ *     <PopoverArrow />
+ *     Popover
+ *   </Popover>
+ * </PopoverProvider>
  * ```
  */
 export declare const PopoverArrow: import("../utils/types.js").Component<PopoverArrowOptions<"div">>;
 export interface PopoverArrowOptions<T extends As = "div"> extends Options<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-description.d.ts

@@ -16,22 +16,27 @@ import type { PopoverStore } from "./popover-store.js";
 export declare const usePopoverDescription: import("../utils/types.js").Hook<PopoverDescriptionOptions<"p">>;
 /**
  * Renders a description in a popover. This component must be wrapped with
- * `Popover` so the `aria-describedby` prop is properly set on the popover
- * element.
+ * [`Popover`](https://ariakit.org/reference/popover) so the `aria-describedby`
+ * prop is properly set on the popover element.
  * @see https://ariakit.org/components/popover
  * @example
  * ```jsx
- * const popover = usePopoverStore();
- * <Popover store={popover}>
- *   <PopoverDescription>Description</PopoverDescription>
- * </Popover>
+ * <PopoverProvider>
+ *   <Popover>
+ *     <PopoverDescription>Description</PopoverDescription>
+ *   </Popover>
+ * </PopoverProvider>
  * ```
  */
 export declare const PopoverDescription: import("../utils/types.js").Component<PopoverDescriptionOptions<"p">>;
 export interface PopoverDescriptionOptions<T extends As = "p"> extends DialogDescriptionOptions<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-disclosure-arrow.d.ts

@@ -16,28 +16,36 @@ import type { PopoverStore, PopoverStoreState } from "./popover-store.js";
 export declare const usePopoverDisclosureArrow: import("../utils/types.js").Hook<PopoverDisclosureArrowOptions<"span">>;
 /**
  * Renders an arrow pointing to the popover position. It's usually rendered
- * inside the `PopoverDisclosure` component.
+ * inside the
+ * [`PopoverDisclosure`](https://ariakit.org/reference/popover-disclosure)
+ * component.
  * @see https://ariakit.org/components/popover
  * @example
  * ```jsx
- * const popover = usePopoverStore();
- * <PopoverDisclosure store={popover}>
- *   Disclosure
- *   <PopoverDisclosureArrow />
- * </PopoverDisclosure>
- * <Popover store={popover}>Popover</Popover>
+ * <PopoverProvider>
+ *   <PopoverDisclosure>
+ *     Disclosure
+ *     <PopoverDisclosureArrow />
+ *   </PopoverDisclosure>
+ *   <Popover>Popover</Popover>
+ * </PopoverProvider>
  * ```
  */
 export declare const PopoverDisclosureArrow: import("../utils/types.js").Component<PopoverDisclosureArrowOptions<"span">>;
 export interface PopoverDisclosureArrowOptions<T extends As = "span"> extends Options<T> {
     /**
-     * Object returned by the `usePopoverStore` hook. If not provided, the parent
-     * `PopoverDisclosure` component's context will be used.
+     * Object returned by the
+     * [`usePopoverStore`](https://ariakit.org/reference/use-popover-store) hook.
+     * If not provided, the closest
+     * [`PopoverDisclosure`](https://ariakit.org/reference/popover-disclosure) or
+     * [`PopoverProvider`](https://ariakit.org/reference/popover-provider)
+     * components' context will be used.
      */
     store?: PopoverStore;
     /**
      * Placement to which the arrow should point. If not provided, the parent
-     * `PopoverDisclosure` component's context will be used.
+     * [`PopoverDisclosure`](https://ariakit.org/reference/popover-disclosure)
+     * component's context will be used.
      */
     placement?: PopoverStoreState["placement"];
 }

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

@@ -18,9 +18,10 @@ export declare const usePopoverDisclosure: import("../utils/types.js").Hook<Popo
  * @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 PopoverDisclosure: import("../utils/types.js").Component<PopoverDisclosureOptions<"button">>;