@ariakit/react-core 0.2.16 → 0.3.0

package/esm/__chunks/{NQJBHION.js → CFEUKV6C.js}

@@ -40,6 +40,16 @@ function createElement(Type, props) {
   const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]);
   let element;
   const mergedRef = useMergeRefs(props.ref, getRefProperty(render));
+  if (process.env.NODE_ENV !== "production") {
+    React.useEffect(() => {
+      if (!As)
+        return;
+      console.warn(
+        "The `as` prop is deprecated. Use the `render` prop instead.",
+        "See https://ariakit.org/guide/composition"
+      );
+    }, [As]);
+  }
   if (As && typeof As !== "string") {
     element = /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, rest), { render }));
   } else if (React.isValidElement(render)) {
@@ -48,6 +58,14 @@ function createElement(Type, props) {
   } else if (render) {
     element = render(rest);
   } else if (isRenderProp(props.children)) {
+    if (process.env.NODE_ENV !== "production") {
+      React.useEffect(() => {
+        console.warn(
+          "The `children` prop as a function is deprecated. Use the `render` prop instead.",
+          "See https://ariakit.org/guide/composition"
+        );
+      }, []);
+    }
     const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]);
     element = props.children(otherProps);
   } else if (As) {
@@ -73,6 +91,46 @@ function createHook(useProps) {
   };
   return useRole;
 }
+function createStoreContext(providers = [], scopedProviders = []) {
+  const context = React.createContext(void 0);
+  const scopedContext = React.createContext(void 0);
+  const useContext2 = () => React.useContext(context);
+  const useScopedContext = (onlyScoped = false) => {
+    const scoped = React.useContext(scopedContext);
+    const store = useContext2();
+    if (onlyScoped)
+      return scoped;
+    return scoped || store;
+  };
+  const useProviderContext = () => {
+    const scoped = React.useContext(scopedContext);
+    const store = useContext2();
+    if (scoped && scoped === store)
+      return;
+    return store;
+  };
+  const ContextProvider = (props) => {
+    return providers.reduceRight(
+      (children, Provider) => /* @__PURE__ */ jsx(Provider, __spreadProps(__spreadValues({}, props), { children })),
+      /* @__PURE__ */ jsx(context.Provider, __spreadValues({}, props))
+    );
+  };
+  const ScopedContextProvider = (props) => {
+    return /* @__PURE__ */ jsx(ContextProvider, __spreadProps(__spreadValues({}, props), { children: scopedProviders.reduceRight(
+      (children, Provider) => /* @__PURE__ */ jsx(Provider, __spreadProps(__spreadValues({}, props), { children })),
+      /* @__PURE__ */ jsx(scopedContext.Provider, __spreadValues({}, props))
+    ) }));
+  };
+  return {
+    context,
+    scopedContext,
+    useContext: useContext2,
+    useScopedContext,
+    useProviderContext,
+    ContextProvider,
+    ScopedContextProvider
+  };
+}
 
 export {
   forwardRef2 as forwardRef,
@@ -80,5 +138,6 @@ export {
   createComponent,
   createMemoComponent,
   createElement,
-  createHook
+  createHook,
+  createStoreContext
 };

package/esm/__chunks/{ROOVOZJF.js → CX73JT3N.js}

@@ -1,11 +1,11 @@
 import {
   usePopoverDescription
-} from "./SRHDWRFI.js";
+} from "./DJJWAII5.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 
 // src/hovercard/hovercard-description.ts
 var useHovercardDescription = createHook(

package/esm/__chunks/{TG7IDXTX.js → D4PXCBCI.js}

@@ -1,54 +1,55 @@
 import {
   DialogBackdrop
-} from "./432NLB7J.js";
-import {
-  disableTreeOutside
-} from "./NHPU54IO.js";
-import {
-  disableAccessibilityTreeOutside
-} from "./GDORSOK6.js";
-import {
-  usePreventBodyScroll
-} from "./3LAWLNOX.js";
+} from "./HJPDTCDL.js";
 import {
   useNestedDialogs
 } from "./PLOINBVB.js";
 import {
   useHideOnInteractOutside
-} from "./E5XSMSHD.js";
+} from "./HAVCR65N.js";
+import {
+  prependHiddenDismiss
+} from "./62DFK33R.js";
 import {
   isElementMarked,
   markTreeOutside
-} from "./LEBYH5FW.js";
+} from "./KGDYSCOM.js";
 import {
-  prependHiddenDismiss
-} from "./62DFK33R.js";
+  disableTreeOutside
+} from "./XASENZA4.js";
+import {
+  disableAccessibilityTreeOutside
+} from "./X5VV5CBA.js";
+import {
+  usePreventBodyScroll
+} from "./3LGVTTHD.js";
 import {
   useFocusableContainer
-} from "./IYNN2ZO5.js";
+} from "./REKKG4AV.js";
 import {
   HeadingLevel
 } from "./6OMX4H3W.js";
 import {
   usePortal
-} from "./LL3AE4N4.js";
-import {
-  DialogContext,
-  DialogDescriptionContext,
-  DialogHeadingContext
-} from "./LNHZLQEK.js";
+} from "./IDYHJHXJ.js";
 import {
   isHidden,
   useDisclosureContent
-} from "./WHEEIXMF.js";
+} from "./3D7ZB3CS.js";
+import {
+  DialogDescriptionContext,
+  DialogHeadingContext,
+  DialogScopedContextProvider,
+  useDialogProviderContext
+} from "./5YYGDU4E.js";
 import {
   useFocusable
-} from "./MYID4V27.js";
+} from "./M4OAD5XF.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -82,7 +83,7 @@ import {
   getFirstTabbableIn,
   isFocusable
 } from "@ariakit/core/utils/focus";
-import { chain } from "@ariakit/core/utils/misc";
+import { chain, invariant } from "@ariakit/core/utils/misc";
 import { isSafari } from "@ariakit/core/utils/platform";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var isSafariBrowser = isSafari();
@@ -139,6 +140,12 @@ var useDialog = createHook(
       "initialFocus",
       "finalFocus"
     ]);
+    const context = useDialogProviderContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "Dialog must receive a `store` prop or be wrapped in a DialogProvider component."
+    );
     const ref = useRef(null);
     const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
     const preserveTabOrderProp = props.preserveTabOrder;
@@ -154,9 +161,21 @@ var useDialog = createHook(
     useHideOnInteractOutside(store, hideOnInteractOutside, domReady);
     const { wrapElement, nestedDialogs } = useNestedDialogs(store);
     props = useWrapElement(props, wrapElement, [wrapElement]);
+    if (process.env.NODE_ENV !== "production") {
+      useEffect(() => {
+        if (!backdropProps)
+          return;
+        console.warn(
+          "The `backdropProps` prop is deprecated. Use the `backdrop` prop instead.",
+          "See https://ariakit.org/reference/dialog#backdrop"
+        );
+      }, [backdropProps]);
+    }
     useSafeLayoutEffect(() => {
       if (!open)
         return;
+      if (!store)
+        return;
       const dialog = ref.current;
       const activeElement = getActiveElement(dialog, true);
       if (!activeElement)
@@ -166,9 +185,11 @@ var useDialog = createHook(
       if (dialog && contains(dialog, activeElement))
         return;
       store.setDisclosureElement(activeElement);
-    }, [open, store]);
+    }, [store, open]);
     if (isSafariBrowser) {
       useEffect(() => {
+        if (!store)
+          return;
         if (!mounted)
           return;
         const { disclosureElement } = store.getState();
@@ -194,7 +215,7 @@ var useDialog = createHook(
         return () => {
           disclosureElement.removeEventListener("mousedown", onMouseDown);
         };
-      }, [mounted, store]);
+      }, [store, mounted]);
     }
     const shouldDisableAccessibilityTree = modal || // Usually, we only want to disable the accessibility tree outside if the
     // dialog is a modal. But the Portal component can't preserve the tab
@@ -203,6 +224,8 @@ var useDialog = createHook(
     // disable pointer events because it's just for screen readers.
     portal && preserveTabOrder && isSafari();
     useEffect(() => {
+      if (!store)
+        return;
       if (!mounted)
         return;
       if (!domReady)
@@ -216,9 +239,11 @@ var useDialog = createHook(
       if (existingDismiss)
         return;
       return prependHiddenDismiss(dialog, store.hide);
-    }, [mounted, domReady, shouldDisableAccessibilityTree]);
+    }, [store, mounted, domReady, shouldDisableAccessibilityTree]);
     const getPersistentElementsProp = useEvent(getPersistentElements);
     useSafeLayoutEffect(() => {
+      if (!store)
+        return;
       if (!domReady)
         return;
       if (!id)
@@ -247,10 +272,10 @@ var useDialog = createHook(
         disableAccessibilityTreeOutside(...allElements)
       );
     }, [
+      store,
       domReady,
       id,
       open,
-      store,
       getPersistentElementsProp,
       nestedDialogs,
       shouldDisableAccessibilityTree,
@@ -311,6 +336,8 @@ var useDialog = createHook(
     }, [open]);
     const focusOnHide = useCallback(
       (dialog, retry = true) => {
+        if (!store)
+          return;
         const { open: open2, disclosureElement } = store.getState();
         if (open2)
           return;
@@ -378,6 +405,8 @@ var useDialog = createHook(
           return;
         if (event.defaultPrevented)
           return;
+        if (!store)
+          return;
         const dialog = ref.current;
         if (!dialog)
           return;
@@ -405,7 +434,7 @@ var useDialog = createHook(
         store.hide();
       };
       return addGlobalEventListener("keydown", onKeyDown);
-    }, [mounted, domReady, store, hideOnEscapeProp]);
+    }, [store, mounted, domReady, hideOnEscapeProp]);
     props = useWrapElement(
       props,
       (element) => /* @__PURE__ */ jsx(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
@@ -416,6 +445,8 @@ var useDialog = createHook(
     props = useWrapElement(
       props,
       (element) => {
+        if (!store)
+          return element;
         if (!backdrop)
           return element;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -438,7 +469,7 @@ var useDialog = createHook(
     const [descriptionId, setDescriptionId] = useState();
     props = useWrapElement(
       props,
-      (element) => /* @__PURE__ */ jsx(DialogContext.Provider, { value: store, children: /* @__PURE__ */ jsx(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ jsx(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
+      (element) => /* @__PURE__ */ jsx(DialogScopedContextProvider, { value: store, children: /* @__PURE__ */ jsx(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ jsx(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }),
       [store]
     );
     props = __spreadProps(__spreadValues({

package/esm/__chunks/{P634EF77.js → D5TF3EQR.js}

@@ -1,17 +1,18 @@
 import {
-  ComboboxContext
-} from "./5VGBBGF5.js";
+  ComboboxScopedContextProvider,
+  useComboboxProviderContext
+} from "./QP4RN5UY.js";
 import {
   isHidden
-} from "./WHEEIXMF.js";
+} from "./3D7ZB3CS.js";
 import {
   useFocusable
-} from "./MYID4V27.js";
+} from "./M4OAD5XF.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useEvent,
   useId,
@@ -27,10 +28,17 @@ import {
 // src/combobox/combobox-list.tsx
 import { useRef } from "react";
 import { isFocusEventOutside } from "@ariakit/core/utils/events";
+import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 var useComboboxList = createHook(
   (_a) => {
     var _b = _a, { store, focusable = true, alwaysVisible } = _b, props = __objRest(_b, ["store", "focusable", "alwaysVisible"]);
+    const context = useComboboxProviderContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "ComboboxList must receive a `store` prop or be wrapped in a ComboboxProvider component."
+    );
     const ref = useRef(null);
     const id = useId(props.id);
     const onKeyDownProp = props.onKeyDown;
@@ -39,7 +47,7 @@ var useComboboxList = createHook(
       if (event.defaultPrevented)
         return;
       if (event.key === "Escape") {
-        store.move(null);
+        store == null ? void 0 : store.move(null);
       }
     });
     const restoreVirtualFocus = useRef(false);
@@ -50,6 +58,8 @@ var useComboboxList = createHook(
         return;
       if (event.type !== "focus")
         return;
+      if (!store)
+        return;
       const { virtualFocus } = store.getState();
       if (!virtualFocus)
         return;
@@ -69,11 +79,11 @@ var useComboboxList = createHook(
       if (!isFocusEventOutside(event))
         return;
       restoreVirtualFocus.current = false;
-      store.setState("virtualFocus", true);
+      store == null ? void 0 : store.setState("virtualFocus", true);
     });
     props = useWrapElement(
       props,
-      (element) => /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: store, children: element }),
+      (element) => /* @__PURE__ */ jsx(ComboboxScopedContextProvider, { value: store, children: element }),
       [store]
     );
     const mounted = store.useState("mounted");

package/esm/__chunks/{SRHDWRFI.js → DJJWAII5.js}

@@ -1,11 +1,11 @@
 import {
   useDialogDescription
-} from "./YSASCXX3.js";
+} from "./PTJJY26M.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 
 // src/popover/popover-description.ts
 var usePopoverDescription = createHook(

package/esm/__chunks/DL4RBG46.js

@@ -0,0 +1,26 @@
+import {
+  CompositeContextProvider,
+  CompositeScopedContextProvider
+} from "./5C7J4IAS.js";
+import {
+  createStoreContext
+} from "./CFEUKV6C.js";
+
+// src/tab/tab-context.tsx
+var ctx = createStoreContext(
+  [CompositeContextProvider],
+  [CompositeScopedContextProvider]
+);
+var useTabContext = ctx.useContext;
+var useTabScopedContext = ctx.useScopedContext;
+var useTabProviderContext = ctx.useProviderContext;
+var TabContextProvider = ctx.ContextProvider;
+var TabScopedContextProvider = ctx.ScopedContextProvider;
+
+export {
+  useTabContext,
+  useTabScopedContext,
+  useTabProviderContext,
+  TabContextProvider,
+  TabScopedContextProvider
+};

package/esm/__chunks/DORFNB2S.js

@@ -0,0 +1,28 @@
+import {
+  useDialogStoreProps
+} from "./6X2TPJLY.js";
+import {
+  useStore,
+  useStoreProps
+} from "./L3AX6U5E.js";
+import {
+  useUpdateEffect
+} from "./J7Q2EO23.js";
+
+// src/popover/popover-store.ts
+import * as Core from "@ariakit/core/popover/popover-store";
+function usePopoverStoreProps(store, update, props) {
+  useUpdateEffect(update, [props.popover]);
+  store = useDialogStoreProps(store, update, props);
+  useStoreProps(store, props, "placement");
+  return store;
+}
+function usePopoverStore(props = {}) {
+  const [store, update] = useStore(Core.createPopoverStore, props);
+  return usePopoverStoreProps(store, update, props);
+}
+
+export {
+  usePopoverStoreProps,
+  usePopoverStore
+};

package/esm/__chunks/{6FAQA4RZ.js → E5S26AHF.js}

@@ -1,11 +1,11 @@
 import {
   useGroup
-} from "./2NIRKFVH.js";
+} from "./JCUV76PT.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   __objRest
 } from "./PNRLI7OV.js";

package/esm/__chunks/{X5CHG5LF.js → FGP6QO3O.js}

@@ -1,22 +1,15 @@
 import {
-  useCollectionStoreOptions,
   useCollectionStoreProps
-} from "./FSTINJD5.js";
+} from "./JEQRR7AL.js";
 import {
   useStore,
   useStoreProps
-} from "./QPTZ2G2N.js";
-import {
-  __spreadValues
-} from "./PNRLI7OV.js";
+} from "./L3AX6U5E.js";
 
 // src/composite/composite-store.ts
 import * as Core from "@ariakit/core/composite/composite-store";
-function useCompositeStoreOptions(props) {
-  return useCollectionStoreOptions(props);
-}
-function useCompositeStoreProps(store, props) {
-  store = useCollectionStoreProps(store, props);
+function useCompositeStoreProps(store, update, props) {
+  store = useCollectionStoreProps(store, update, props);
   useStoreProps(store, props, "activeId", "setActiveId");
   useStoreProps(store, props, "includesBaseElement");
   useStoreProps(store, props, "virtualFocus");
@@ -28,15 +21,11 @@ function useCompositeStoreProps(store, props) {
   return store;
 }
 function useCompositeStore(props = {}) {
-  const options = useCompositeStoreOptions(props);
-  const store = useStore(
-    () => Core.createCompositeStore(__spreadValues(__spreadValues({}, props), options))
-  );
-  return useCompositeStoreProps(store, props);
+  const [store, update] = useStore(Core.createCompositeStore, props);
+  return useCompositeStoreProps(store, update, props);
 }
 
 export {
-  useCompositeStoreOptions,
   useCompositeStoreProps,
   useCompositeStore
 };

package/esm/__chunks/{YAQX4NUA.js → FK7TLQA3.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useMergeRefs,
   useTagName
@@ -15,19 +15,20 @@ import {
   __spreadValues
 } from "./PNRLI7OV.js";
 
-// src/heading/heading.ts
+// src/heading/heading.tsx
 import { useContext, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 var useHeading = createHook((props) => {
   const ref = useRef(null);
   const level = useContext(HeadingContext) || 1;
-  const as = `h${level}`;
-  const tagName = useTagName(ref, props.as || as);
+  const Element = `h${level}`;
+  const tagName = useTagName(ref, Element);
   const isNativeHeading = useMemo(
     () => !!tagName && /^h\d$/.test(tagName),
     [tagName]
   );
   props = __spreadProps(__spreadValues({
-    as,
+    render: /* @__PURE__ */ jsx(Element, {}),
     role: !isNativeHeading ? "heading" : void 0,
     "aria-level": !isNativeHeading ? level : void 0
   }, props), {

package/esm/__chunks/{HIJMOAZK.js → FV4UX26M.js}

@@ -1,12 +1,12 @@
 import {
-  CompositeContext,
-  CompositeRowContext
-} from "./WJ37OVG2.js";
+  CompositeRowContext,
+  useCompositeContext
+} from "./5C7J4IAS.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useId,
   useWrapElement
@@ -17,7 +17,7 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/composite/composite-row.tsx
-import { useContext, useMemo } from "react";
+import { useMemo } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 var useCompositeRow = createHook(
@@ -31,11 +31,11 @@ var useCompositeRow = createHook(
       "aria-setsize",
       "aria-posinset"
     ]);
-    const context = useContext(CompositeContext);
+    const context = useCompositeContext();
     store = store || context;
     invariant(
       store,
-      process.env.NODE_ENV !== "production" && "CompositeRow must be wrapped in a Composite component"
+      process.env.NODE_ENV !== "production" && "CompositeRow must be wrapped in a Composite component."
     );
     const id = useId(props.id);
     const baseElement = store.useState(

package/esm/__chunks/{E5XSMSHD.js → HAVCR65N.js}

@@ -1,6 +1,6 @@
 import {
   isElementMarked
-} from "./LEBYH5FW.js";
+} from "./KGDYSCOM.js";
 import {
   usePreviousMouseDownRef
 } from "./7JNF6I52.js";

package/esm/__chunks/{432NLB7J.js → HJPDTCDL.js}

@@ -1,15 +1,15 @@
 import {
   markAncestor
-} from "./LEBYH5FW.js";
+} from "./KGDYSCOM.js";
 import {
   Role
-} from "./M5I7AM4N.js";
+} from "./PGK6S5NC.js";
 import {
   useDisclosureContent
-} from "./WHEEIXMF.js";
+} from "./3D7ZB3CS.js";
 import {
   useDisclosureStore
-} from "./F6PEGR7W.js";
+} from "./UHPQRTV4.js";
 import {
   useMergeRefs,
   useSafeLayoutEffect

package/esm/__chunks/{4GZAUH66.js → HMYMEP6U.js}

@@ -1,14 +1,14 @@
 import {
   useButton
-} from "./O6CV6VRM.js";
+} from "./QPWEKAWF.js";
 import {
-  DialogContext
-} from "./LNHZLQEK.js";
+  useDialogScopedContext
+} from "./5YYGDU4E.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useEvent
 } from "./J7Q2EO23.js";
@@ -19,12 +19,12 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/dialog/dialog-dismiss.tsx
-import { useContext, useMemo } from "react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var useDialogDismiss = createHook(
   (_a) => {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
-    const context = useContext(DialogContext);
+    const context = useDialogScopedContext();
     store = store || context;
     const onClickProp = props.onClick;
     const onClick = useEvent((event) => {