@ariakit/react-core 0.2.17 → 0.3.1

package/cjs/utils/store.d.ts

@@ -27,33 +27,13 @@ type UseState<S> = {
      */
     <V>(selector: (state: S) => V): V;
 };
-type StateStore<T = CoreStore> = T | null | undefined;
 type StateKey<T = CoreStore> = keyof StoreState<T>;
-type StateSelector<T = CoreStore, V = any> = (state: StoreState<T>) => V;
-/**
- * Subscribes to and returns the entire state of a store.
- * @param store The store to subscribe to.
- * @example
- * useStoreState(store)
- */
-export declare function useStoreState<T extends StateStore>(store: T): T extends CoreStore ? StoreState<T> : undefined;
-/**
- * Subscribes to and returns a specific key of a store.
- * @param store The store to subscribe to.
- * @param key The key to subscribe to.
- * @example
- * useStoreState(store, "key")
- */
-export declare function useStoreState<T extends StateStore, K extends StateKey<T>>(store: T, key: K): T extends CoreStore ? StoreState<T>[K] : undefined;
-/**
- * Subscribes to and returns a computed value of a store based on the selector
- * function.
- * @param store The store to subscribe to.
- * @param selector The selector function that computes the observed value.
- * @example
- * useStoreState(store, (state) => state.key)
- */
-export declare function useStoreState<T extends StateStore, V>(store: T, selector: StateSelector<T, V>): T extends CoreStore ? V : undefined;
+export declare function useStoreState<T extends CoreStore>(store: T): StoreState<T>;
+export declare function useStoreState<T extends CoreStore>(store: T | null | undefined): StoreState<T> | undefined;
+export declare function useStoreState<T extends CoreStore, K extends StateKey<T>>(store: T, key: K): StoreState<T>[K];
+export declare function useStoreState<T extends CoreStore, K extends StateKey<T>>(store: T | null | undefined, key: K): StoreState<T>[K] | undefined;
+export declare function useStoreState<T extends CoreStore, V>(store: T, selector: (state: StoreState<T>) => V): V;
+export declare function useStoreState<T extends CoreStore, V>(store: T | null | undefined, selector: (state?: StoreState<T>) => V): V;
 /**
  * Synchronizes the store with the props, including parent store props.
  * @param store The store to synchronize.
@@ -61,13 +41,18 @@ export declare function useStoreState<T extends StateStore, V>(store: T, selecto
  * @param key The key of the value prop.
  * @param setKey The key of the setValue prop.
  */
-export declare function useStoreProps<S extends State, T extends CoreStore<S>, P extends S, K extends keyof S & keyof P, SK extends keyof PickByValue<P, SetState<P[K]>>>(store: T, props: P, key: K, setKey?: SK): void;
+export declare function useStoreProps<S extends State, P extends Partial<S>, K extends keyof S, SK extends keyof PickByValue<P, SetState<P[K]>>>(store: CoreStore<S>, props: P, key: K, setKey?: SK): void;
 /**
- * Creates a React store from a core store object.
- * @param createStore The function that creates the core store object.
+ * Creates a React store from a core store object and returns a tuple with the
+ * store and a function to update the store.
+ * @param createStore A function that receives the props and returns a core
+ * store object.
+ * @param props The props to pass to the createStore function.
  */
-export declare function useStore<T extends CoreStore>(createStore: () => T): Store<T>;
-export type Store<T extends CoreStore> = T & {
+export declare function useStore<T extends CoreStore, P>(createStore: (props: P) => T, props: P): readonly [T & {
+    useState: UseState<StoreState<T>>;
+}, () => void];
+export type Store<T extends CoreStore = CoreStore> = T & {
     /**
      * Re-renders the component when the state changes and returns the current
      * state.

package/cjs/utils/system.cjs

@@ -5,7 +5,8 @@
 
 
 
-var _CWY2PHPRcjs = require('../__chunks/CWY2PHPR.cjs');
+
+var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
 require('../__chunks/5WLTMVVQ.cjs');
 require('../__chunks/7WUTS26Y.cjs');
 require('../__chunks/72I2GWXF.cjs');
@@ -16,4 +17,5 @@ require('../__chunks/72I2GWXF.cjs');
 
 
 
-exports.createComponent = _CWY2PHPRcjs.createComponent; exports.createElement = _CWY2PHPRcjs.createElement; exports.createHook = _CWY2PHPRcjs.createHook; exports.createMemoComponent = _CWY2PHPRcjs.createMemoComponent; exports.forwardRef = _CWY2PHPRcjs.forwardRef; exports.memo = _CWY2PHPRcjs.memo;
+
+exports.createComponent = _Z5PUIG6Acjs.createComponent; exports.createElement = _Z5PUIG6Acjs.createElement; exports.createHook = _Z5PUIG6Acjs.createHook; exports.createMemoComponent = _Z5PUIG6Acjs.createMemoComponent; exports.createStoreContext = _Z5PUIG6Acjs.createStoreContext; exports.forwardRef = _Z5PUIG6Acjs.forwardRef; exports.memo = _Z5PUIG6Acjs.memo;

package/cjs/utils/system.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { Store } from "./store.js";
 import type { Component, HTMLProps, Hook, Options, Props } from "./types.js";
 /**
  * The same as `React.forwardRef` but passes the `ref` as a prop and returns a
@@ -78,3 +79,20 @@ export declare function createElement(Type: React.ElementType, props: HTMLProps<
  * const props = useComponent({ as: "button", customProp: true });
  */
 export declare function createHook<O extends Options>(useProps: (props: Props<O>) => HTMLProps<O>): Hook<O>;
+type StoreProvider<T extends Store> = React.ComponentType<{
+    value: T | undefined;
+    children?: React.ReactNode;
+}>;
+/**
+ * Creates an Ariakit store context with hooks and provider components.
+ */
+export declare function createStoreContext<T extends Store>(providers?: StoreProvider<T>[], scopedProviders?: StoreProvider<T>[]): {
+    context: React.Context<T | undefined>;
+    scopedContext: React.Context<T | undefined>;
+    useContext: () => T | undefined;
+    useScopedContext: (onlyScoped?: boolean) => T | undefined;
+    useProviderContext: () => T | undefined;
+    ContextProvider: (props: React.ProviderProps<T | undefined>) => import("react/jsx-runtime").JSX.Element;
+    ScopedContextProvider: (props: React.ProviderProps<T | undefined>) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/cjs/visually-hidden/visually-hidden.cjs

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _QR3ATHWUcjs = require('../__chunks/QR3ATHWU.cjs');
-require('../__chunks/CWY2PHPR.cjs');
+var _KSFAO77Ecjs = require('../__chunks/KSFAO77E.cjs');
+require('../__chunks/Z5PUIG6A.cjs');
 require('../__chunks/5WLTMVVQ.cjs');
 require('../__chunks/7WUTS26Y.cjs');
 require('../__chunks/72I2GWXF.cjs');
 
 
 
-exports.VisuallyHidden = _QR3ATHWUcjs.VisuallyHidden; exports.useVisuallyHidden = _QR3ATHWUcjs.useVisuallyHidden;
+exports.VisuallyHidden = _KSFAO77Ecjs.VisuallyHidden; exports.useVisuallyHidden = _KSFAO77Ecjs.useVisuallyHidden;

package/collection/collection-provider/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/react-core/collection/collection-provider",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/collection/collection-provider.cjs",
+  "module": "../../esm/collection/collection-provider.js",
+  "types": "../../cjs/collection/collection-provider.d.ts"
+}

package/combobox/combobox-provider/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/react-core/combobox/combobox-provider",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/combobox/combobox-provider.cjs",
+  "module": "../../esm/combobox/combobox-provider.js",
+  "types": "../../cjs/combobox/combobox-provider.d.ts"
+}

package/composite/composite-provider/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/react-core/composite/composite-provider",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/composite/composite-provider.cjs",
+  "module": "../../esm/composite/composite-provider.js",
+  "types": "../../cjs/composite/composite-provider.d.ts"
+}

package/dialog/dialog-provider/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/react-core/dialog/dialog-provider",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/dialog/dialog-provider.cjs",
+  "module": "../../esm/dialog/dialog-provider.js",
+  "types": "../../cjs/dialog/dialog-provider.d.ts"
+}

package/disclosure/disclosure-context/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/react-core/disclosure/disclosure-context",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/disclosure/disclosure-context.cjs",
+  "module": "../../esm/disclosure/disclosure-context.js",
+  "types": "../../cjs/disclosure/disclosure-context.d.ts"
+}

package/disclosure/disclosure-provider/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/react-core/disclosure/disclosure-provider",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/disclosure/disclosure-provider.cjs",
+  "module": "../../esm/disclosure/disclosure-provider.js",
+  "types": "../../cjs/disclosure/disclosure-provider.d.ts"
+}

package/esm/__chunks/{5QHNNZNE.js → 24EUVZFE.js}

@@ -1,14 +1,14 @@
 import {
-  FormContext
-} from "./P3I4MECH.js";
+  useFormContext
+} from "./NJS632IW.js";
 import {
   useCollectionItem
-} from "./VFNGSUSF.js";
+} from "./XIA3HAXM.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -22,7 +22,7 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/form/form-field.ts
-import { useCallback, useContext, useRef } from "react";
+import { useCallback, useRef } from "react";
 import { getDocument } from "@ariakit/core/utils/dom";
 import { cx, invariant } from "@ariakit/core/utils/misc";
 function getNamedElement(ref, name) {
@@ -55,11 +55,11 @@ var useFormField = createHook(
       "getItem",
       "touchOnBlur"
     ]);
-    const context = useContext(FormContext);
+    const context = useFormContext();
     store = store || context;
     invariant(
       store,
-      process.env.NODE_ENV !== "production" && "FormField must be wrapped in a Form component"
+      process.env.NODE_ENV !== "production" && "FormField must be wrapped in a Form component."
     );
     const name = `${nameProp}`;
     const id = useId(props.id);

package/esm/__chunks/2GC3IEM7.js

@@ -0,0 +1,49 @@
+import {
+  CompositeContextProvider,
+  CompositeScopedContextProvider
+} from "./5C7J4IAS.js";
+import {
+  HovercardContextProvider,
+  HovercardScopedContextProvider
+} from "./5DA3HK6G.js";
+import {
+  createStoreContext
+} from "./CFEUKV6C.js";
+
+// src/menu/menu-context.ts
+import { createContext } from "react";
+var menu = createStoreContext(
+  [CompositeContextProvider, HovercardContextProvider],
+  [CompositeScopedContextProvider, HovercardScopedContextProvider]
+);
+var useMenuContext = menu.useContext;
+var useMenuScopedContext = menu.useScopedContext;
+var useMenuProviderContext = menu.useProviderContext;
+var MenuContextProvider = menu.ContextProvider;
+var MenuScopedContextProvider = menu.ScopedContextProvider;
+var menubar = createStoreContext(
+  [CompositeContextProvider],
+  [CompositeScopedContextProvider]
+);
+var useMenuBarContext = menubar.useContext;
+var useMenuBarScopedContext = menubar.useScopedContext;
+var useMenuBarProviderContext = menubar.useProviderContext;
+var MenuBarContextProvider = menubar.ContextProvider;
+var MenuBarScopedContextProvider = menubar.ScopedContextProvider;
+var MenuItemCheckedContext = createContext(
+  void 0
+);
+
+export {
+  useMenuContext,
+  useMenuScopedContext,
+  useMenuProviderContext,
+  MenuContextProvider,
+  MenuScopedContextProvider,
+  useMenuBarContext,
+  useMenuBarScopedContext,
+  useMenuBarProviderContext,
+  MenuBarContextProvider,
+  MenuBarScopedContextProvider,
+  MenuItemCheckedContext
+};

package/esm/__chunks/35WVCYXU.js

@@ -0,0 +1,31 @@
+import {
+  useCompositeStoreProps
+} from "./WGAKICTY.js";
+import {
+  useStore,
+  useStoreProps
+} from "./XXO3VVQU.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./PNRLI7OV.js";
+
+// src/tab/tab-store.ts
+import { useMemo } from "react";
+import * as Core from "@ariakit/core/tab/tab-store";
+function useTabStoreProps(store, update, props) {
+  store = useCompositeStoreProps(store, update, props);
+  useStoreProps(store, props, "selectedId", "setSelectedId");
+  useStoreProps(store, props, "selectOnMove");
+  const [panels] = useStore(() => store.panels, {});
+  return useMemo(() => __spreadProps(__spreadValues({}, store), { panels }), []);
+}
+function useTabStore(props = {}) {
+  const [store, update] = useStore(Core.createTabStore, props);
+  return useTabStoreProps(store, update, props);
+}
+
+export {
+  useTabStoreProps,
+  useTabStore
+};

package/esm/__chunks/{SWPAMWUW.js → 3AVEDDB7.js}

@@ -2,13 +2,13 @@ import {
   POPOVER_ARROW_PATH
 } from "./GM7XQV7F.js";
 import {
-  PopoverContext
-} from "./6GS36SYX.js";
+  usePopoverContext
+} from "./547DFODS.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useMergeRefs,
   useSafeLayoutEffect
@@ -20,7 +20,7 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/popover/popover-arrow.tsx
-import { useContext, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { getWindow } from "@ariakit/core/utils/dom";
 import { invariant } from "@ariakit/core/utils/misc";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -47,11 +47,11 @@ function useComputedStyle(store) {
 var usePopoverArrow = createHook(
   (_a) => {
     var _b = _a, { store, size = defaultSize } = _b, props = __objRest(_b, ["store", "size"]);
-    const context = useContext(PopoverContext);
+    const context = usePopoverContext();
     store = store || context;
     invariant(
       store,
-      process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component"
+      process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
     );
     const dir = store.useState(
       (state) => state.currentPlacement.split("-")[0]

package/esm/__chunks/{WHEEIXMF.js → 3D7ZB3CS.js}

@@ -1,12 +1,19 @@
+import {
+  DialogScopedContextProvider
+} from "./5YYGDU4E.js";
+import {
+  useDisclosureProviderContext
+} from "./56KWVYDN.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useId,
   useMergeRefs,
-  useSafeLayoutEffect
+  useSafeLayoutEffect,
+  useWrapElement
 } from "./J7Q2EO23.js";
 import {
   __objRest,
@@ -14,8 +21,10 @@ import {
   __spreadValues
 } from "./PNRLI7OV.js";
 
-// src/disclosure/disclosure-content.ts
+// src/disclosure/disclosure-content.tsx
 import { useState } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+import { jsx } from "react/jsx-runtime";
 function afterTimeout(timeoutMs, cb) {
   const timeoutId = setTimeout(cb, timeoutMs);
   return () => clearTimeout(timeoutId);
@@ -40,6 +49,12 @@ function isHidden(mounted, hidden, alwaysVisible) {
 var useDisclosureContent = createHook(
   (_a) => {
     var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]);
+    const context = useDisclosureProviderContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "DisclosureContent must receive a `store` prop or be wrapped in a DisclosureProvider component."
+    );
     const id = useId(props.id);
     const [transition, setTransition] = useState(null);
     const open = store.useState("open");
@@ -58,6 +73,8 @@ var useDisclosureContent = createHook(
       });
     }, [animated, contentElement, open]);
     useSafeLayoutEffect(() => {
+      if (!store)
+        return;
       if (!animated)
         return;
       if (!contentElement)
@@ -84,7 +101,12 @@ var useDisclosureContent = createHook(
       if (!timeoutMs)
         return;
       return afterTimeout(timeoutMs, store.stopAnimation);
-    }, [animated, contentElement, open, transition]);
+    }, [store, animated, contentElement, open, transition]);
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(DialogScopedContextProvider, { value: store, children: element }),
+      [store]
+    );
     const hidden = isHidden(mounted, props.hidden, alwaysVisible);
     const style = hidden ? __spreadProps(__spreadValues({}, props.style), { display: "none" }) : props.style;
     props = __spreadProps(__spreadValues({

package/esm/__chunks/{ONFAHVST.js → 3HFOFZP4.js}

@@ -1,13 +1,13 @@
 import {
-  CollectionContext
-} from "./T3DJZG63.js";
+  useCollectionContext
+} from "./74KKBFVP.js";
 import {
   createElement,
   forwardRef
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useStoreState
-} from "./P63NRZ4A.js";
+} from "./XXO3VVQU.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -303,9 +303,12 @@ function useCollectionRenderer(_a) {
     "children"
   ]);
   var _a2, _b2;
-  const context = useContext(CollectionContext);
+  const context = useCollectionContext();
   store = store || context;
-  const items = useStoreState(store, (state) => itemsProp != null ? itemsProp : state.items) || itemsProp;
+  const items = useStoreState(
+    store,
+    (state) => itemsProp != null ? itemsProp : state == null ? void 0 : state.items
+  );
   invariant(
     items != null,
     process.env.NODE_ENV !== "production" && "CollectionRenderer must be either wrapped in a Collection component or be given an `items` prop."

package/esm/__chunks/3QOG4FFB.js

@@ -0,0 +1,26 @@
+import {
+  HovercardContextProvider,
+  HovercardScopedContextProvider
+} from "./5DA3HK6G.js";
+import {
+  createStoreContext
+} from "./CFEUKV6C.js";
+
+// src/tooltip/tooltip-context.tsx
+var ctx = createStoreContext(
+  [HovercardContextProvider],
+  [HovercardScopedContextProvider]
+);
+var useTooltipContext = ctx.useContext;
+var useTooltipScopedContext = ctx.useScopedContext;
+var useTooltipProviderContext = ctx.useProviderContext;
+var TooltipContextProvider = ctx.ContextProvider;
+var TooltipScopedContextProvider = ctx.ScopedContextProvider;
+
+export {
+  useTooltipContext,
+  useTooltipScopedContext,
+  useTooltipProviderContext,
+  TooltipContextProvider,
+  TooltipScopedContextProvider
+};

package/esm/__chunks/{37OBPWF6.js → 3Z4KAOQS.js}

@@ -5,7 +5,7 @@ import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   __objRest,
   __spreadProps,

package/esm/__chunks/{7PHM3O7I.js → 4FNI7F6H.js}

@@ -1,8 +1,11 @@
+import {
+  usePopoverProviderContext
+} from "./547DFODS.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useMergeRefs
 } from "./J7Q2EO23.js";
@@ -16,8 +19,10 @@ import {
 var usePopoverAnchor = createHook(
   (_a) => {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+    const context = usePopoverProviderContext();
+    store = store || context;
     props = __spreadProps(__spreadValues({}, props), {
-      ref: useMergeRefs(store.setAnchorElement, props.ref)
+      ref: useMergeRefs(store == null ? void 0 : store.setAnchorElement, props.ref)
     });
     return props;
   }

package/esm/__chunks/4JNX5L5C.js

@@ -0,0 +1,40 @@
+import {
+  useDialogDismiss
+} from "./HMYMEP6U.js";
+import {
+  usePopoverScopedContext
+} from "./547DFODS.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./CFEUKV6C.js";
+import {
+  __objRest,
+  __spreadValues
+} from "./PNRLI7OV.js";
+
+// src/popover/popover-dismiss.ts
+var usePopoverDismiss = createHook(
+  (_a) => {
+    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+    const context = usePopoverScopedContext();
+    store = store || context;
+    props = useDialogDismiss(__spreadValues({ store }, props));
+    return props;
+  }
+);
+var PopoverDismiss = createComponent(
+  (props) => {
+    const htmlProps = usePopoverDismiss(props);
+    return createElement("button", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  PopoverDismiss.displayName = "PopoverDismiss";
+}
+
+export {
+  usePopoverDismiss,
+  PopoverDismiss
+};

package/esm/__chunks/4WK6LN27.js

@@ -0,0 +1,24 @@
+import {
+  useCompositeStoreProps
+} from "./WGAKICTY.js";
+import {
+  useStore,
+  useStoreProps
+} from "./XXO3VVQU.js";
+
+// src/radio/radio-store.ts
+import * as Core from "@ariakit/core/radio/radio-store";
+function useRadioStoreProps(store, update, props) {
+  store = useCompositeStoreProps(store, update, props);
+  useStoreProps(store, props, "value", "setValue");
+  return store;
+}
+function useRadioStore(props = {}) {
+  const [store, update] = useStore(Core.createRadioStore, props);
+  return useRadioStoreProps(store, update, props);
+}
+
+export {
+  useRadioStoreProps,
+  useRadioStore
+};

package/esm/__chunks/547DFODS.js

@@ -0,0 +1,26 @@
+import {
+  DialogContextProvider,
+  DialogScopedContextProvider
+} from "./5YYGDU4E.js";
+import {
+  createStoreContext
+} from "./CFEUKV6C.js";
+
+// src/popover/popover-context.tsx
+var ctx = createStoreContext(
+  [DialogContextProvider],
+  [DialogScopedContextProvider]
+);
+var usePopoverContext = ctx.useContext;
+var usePopoverScopedContext = ctx.useScopedContext;
+var usePopoverProviderContext = ctx.useProviderContext;
+var PopoverContextProvider = ctx.ContextProvider;
+var PopoverScopedContextProvider = ctx.ScopedContextProvider;
+
+export {
+  usePopoverContext,
+  usePopoverScopedContext,
+  usePopoverProviderContext,
+  PopoverContextProvider,
+  PopoverScopedContextProvider
+};