@ariakit/react-core 0.1.5 → 0.1.7

package/esm/dialog/utils/supports-inert.js

@@ -0,0 +1,7 @@
+import {
+  supportsInert
+} from "../../__chunks/KOVUJERF.js";
+import "../../__chunks/4BKCJXBM.js";
+export {
+  supportsInert
+};

package/esm/dialog/utils/use-hide-on-interact-outside.d.ts

@@ -1,6 +1,2 @@
 import type { DialogOptions } from "../dialog.js";
-type Options = Pick<DialogOptions, "store" | "modal" | "hideOnInteractOutside"> & {
-    nestedDialogs: HTMLElement[];
-};
-export declare function useHideOnInteractOutside({ store, modal, hideOnInteractOutside, nestedDialogs, }: Options): void;
-export {};
+export declare function useHideOnInteractOutside(store: DialogOptions["store"], hideOnInteractOutside: DialogOptions["hideOnInteractOutside"]): void;

package/esm/dialog/utils/use-hide-on-interact-outside.js

@@ -1,9 +1,13 @@
 import {
   useHideOnInteractOutside
-} from "../../__chunks/ARIIJA3Z.js";
+} from "../../__chunks/KUXENZYT.js";
+import "../../__chunks/BH4YAZB2.js";
+import "../../__chunks/DJESYNLE.js";
+import "../../__chunks/ISPCL6N4.js";
 import "../../__chunks/7JNF6I52.js";
-import "../../__chunks/B7MIN7YT.js";
+import "../../__chunks/ASYR66PQ.js";
 import "../../__chunks/SXC6BPOF.js";
+import "../../__chunks/4BKCJXBM.js";
 export {
   useHideOnInteractOutside
 };

package/esm/dialog/utils/use-nested-dialogs.d.ts

@@ -1,10 +1,6 @@
 import type { WrapElement } from "../../utils/types.js";
 import type { DialogStore } from "../dialog-store.js";
-/**
- * Handles nested dialogs.
- */
-export declare function useNestedDialogs(store: DialogStore, modal?: boolean): {
-    nestedDialogs: HTMLElement[];
-    openModals: HTMLElement[];
+export declare function useNestedDialogs(store: DialogStore): {
     wrapElement: WrapElement;
+    nestedDialogs: HTMLElement[];
 };

package/esm/dialog/utils/use-nested-dialogs.js

@@ -1,8 +1,9 @@
 import {
   useNestedDialogs
-} from "../../__chunks/IIX2NU6T.js";
-import "../../__chunks/B7MIN7YT.js";
+} from "../../__chunks/T3WBUAHU.js";
+import "../../__chunks/ASYR66PQ.js";
 import "../../__chunks/SXC6BPOF.js";
+import "../../__chunks/4BKCJXBM.js";
 export {
   useNestedDialogs
 };

package/esm/dialog/utils/use-prevent-body-scroll.js

@@ -1,9 +1,10 @@
 import {
   usePreventBodyScroll
-} from "../../__chunks/GWYHKM6Q.js";
-import "../../__chunks/FD7UP2TJ.js";
-import "../../__chunks/B7MIN7YT.js";
+} from "../../__chunks/RBUEJWRA.js";
+import "../../__chunks/DJESYNLE.js";
+import "../../__chunks/ASYR66PQ.js";
 import "../../__chunks/SXC6BPOF.js";
+import "../../__chunks/4BKCJXBM.js";
 export {
   usePreventBodyScroll
 };

package/esm/dialog/utils/use-previous-mouse-down-ref.js

@@ -1,6 +1,7 @@
 import {
   usePreviousMouseDownRef
 } from "../../__chunks/7JNF6I52.js";
+import "../../__chunks/4BKCJXBM.js";
 export {
   usePreviousMouseDownRef
 };

package/esm/dialog/utils/walk-tree-outside.d.ts

@@ -1,4 +1,4 @@
 type Elements = Array<Element | null>;
 export declare function isValidElement(element: Element, ignoredElements: Elements): boolean;
-export declare function walkTreeOutside(elements: Elements, callback: (element: Element) => void): void;
+export declare function walkTreeOutside(elements: Elements, callback: (element: Element) => void, ancestorCallback?: (element: Element) => void): void;
 export {};

package/esm/dialog/utils/walk-tree-outside.js

@@ -1,7 +1,8 @@
 import {
   isValidElement,
   walkTreeOutside
-} from "../../__chunks/HVXLVRRR.js";
+} from "../../__chunks/ISPCL6N4.js";
+import "../../__chunks/4BKCJXBM.js";
 export {
   isValidElement,
   walkTreeOutside

package/esm/disclosure/disclosure-content.js

@@ -1,10 +1,11 @@
 import {
   DisclosureContent,
   useDisclosureContent
-} from "../__chunks/FFRIGW5T.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+} from "../__chunks/6AJCHLAV.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   DisclosureContent,
   useDisclosureContent

package/esm/disclosure/disclosure-store.js

@@ -2,10 +2,11 @@ import {
   useDisclosureStore,
   useDisclosureStoreOptions,
   useDisclosureStoreProps
-} from "../__chunks/YHRHKO5B.js";
-import "../__chunks/LTH56VDS.js";
-import "../__chunks/B7MIN7YT.js";
+} from "../__chunks/HN4VMOUI.js";
+import "../__chunks/AV5WE37O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   useDisclosureStore,
   useDisclosureStoreOptions,

package/esm/disclosure/disclosure.js

@@ -1,13 +1,15 @@
 import {
   Disclosure,
   useDisclosure
-} from "../__chunks/57UTLR6J.js";
-import "../__chunks/I4MLEPTM.js";
-import "../__chunks/SAVDGYCC.js";
-import "../__chunks/5TGAWEHD.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+} from "../__chunks/24P2K6AU.js";
+import "../__chunks/OQUXG6FE.js";
+import "../__chunks/4QNHBDVS.js";
+import "../__chunks/AGWM73EZ.js";
+import "../__chunks/BMLNRUFQ.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   Disclosure,
   useDisclosure

package/esm/focus-trap/focus-trap-region.js

@@ -1,12 +1,83 @@
 import {
-  FocusTrapRegion,
-  useFocusTrapRegion
-} from "../__chunks/2SVAPVVI.js";
-import "../__chunks/NDTB3OGK.js";
-import "../__chunks/SDULECC7.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+  FocusTrap
+} from "../__chunks/DIO64N2C.js";
+import "../__chunks/JQEVJM46.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/5ETIGB6O.js";
+import {
+  useForkRef,
+  useWrapElement
+} from "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
+
+// src/focus-trap/focus-trap-region.tsx
+import { useRef } from "react";
+import { getAllTabbableIn } from "@ariakit/core/utils/focus";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var useFocusTrapRegion = createHook(
+  (_a) => {
+    var _b = _a, { enabled = false } = _b, props = __objRest(_b, ["enabled"]);
+    const ref = useRef(null);
+    props = useWrapElement(
+      props,
+      (element) => {
+        const renderFocusTrap = () => {
+          if (!enabled)
+            return null;
+          return /* @__PURE__ */ jsx(
+            FocusTrap,
+            {
+              onFocus: (event) => {
+                const container = ref.current;
+                if (!container)
+                  return;
+                const tabbables = getAllTabbableIn(container, true);
+                const first = tabbables[0];
+                const last = tabbables[tabbables.length - 1];
+                if (!tabbables.length) {
+                  container.focus();
+                  return;
+                }
+                if (event.relatedTarget === first) {
+                  last == null ? void 0 : last.focus();
+                } else {
+                  first == null ? void 0 : first.focus();
+                }
+              }
+            }
+          );
+        };
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderFocusTrap(),
+          element,
+          renderFocusTrap()
+        ] });
+      },
+      [enabled]
+    );
+    props = __spreadProps(__spreadValues({}, props), {
+      ref: useForkRef(ref, props.ref)
+    });
+    return props;
+  }
+);
+var FocusTrapRegion = createComponent(
+  (props) => {
+    const htmlProps = useFocusTrapRegion(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  FocusTrapRegion.displayName = "FocusTrapRegion";
+}
 export {
   FocusTrapRegion,
   useFocusTrapRegion

package/esm/focus-trap/focus-trap.js

@@ -1,9 +1,10 @@
 import {
   FocusTrap,
   useFocusTrap
-} from "../__chunks/NDTB3OGK.js";
-import "../__chunks/SDULECC7.js";
-import "../__chunks/JE5NWDDX.js";
+} from "../__chunks/DIO64N2C.js";
+import "../__chunks/JQEVJM46.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   FocusTrap,
   useFocusTrap

package/esm/focusable/focusable-container.d.ts

@@ -0,0 +1,33 @@
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `FocusableContainer` component.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * const props = useFocusableContainer();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useFocusableContainer: import("../utils/types.js").Hook<FocusableContainerOptions<"div">>;
+/**
+ * Renders a div that wraps `Focusable` components and controls whether they
+ * can be auto focused.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * <FocusableContainer autoFocusOnShow={false}>
+ *   <Focusable autoFocus />
+ * </FocusableContainer>
+ * ```
+ */
+export declare const FocusableContainer: import("../utils/types.js").Component<FocusableContainerOptions<"div">>;
+export type FocusableContainerOptions<T extends As = "div"> = Options<T> & {
+    /**
+     * Determines whether focusable elements inside the container should be
+     * automatically focused when the container is shown and they have the
+     * `autoFocus` prop.
+     * @default true
+     */
+    autoFocusOnShow?: boolean;
+};
+export type FocusableContainerProps<T extends As = "div"> = Props<FocusableContainerOptions<T>>;

package/esm/focusable/focusable-container.js

@@ -0,0 +1,13 @@
+import {
+  FocusableContainer,
+  useFocusableContainer
+} from "../__chunks/6WVG5KFF.js";
+import "../__chunks/BMLNRUFQ.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
+import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
+export {
+  FocusableContainer,
+  useFocusableContainer
+};

package/esm/focusable/focusable-context.d.ts

@@ -0,0 +1 @@
+export declare const FocusableContext: import("react").Context<boolean>;

package/esm/focusable/focusable-context.js

@@ -0,0 +1,7 @@
+import {
+  FocusableContext
+} from "../__chunks/BMLNRUFQ.js";
+import "../__chunks/4BKCJXBM.js";
+export {
+  FocusableContext
+};

package/esm/focusable/focusable.d.ts

@@ -32,6 +32,10 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      * Automatically focus the element when it is mounted. It works similarly to
      * the native `autoFocus` prop, but solves an issue where the element is given
      * focus before React effects can run.
+     *
+     * Live examples:
+     * - [Dialog with React
+     *   Router](https://ariakit.org/examples/dialog-react-router)
      * @default false
      */
     autoFocus?: boolean;
@@ -59,6 +63,9 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
     /**
      * Custom event handler that is called when the element is focused via the
      * keyboard or when a key is pressed while the element is focused.
+     *
+     * Live examples:
+     * - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)
      */
     onFocusVisible?: BivariantCallback<(event: SyntheticEvent) => void>;
 }

package/esm/focusable/focusable.js

@@ -1,10 +1,12 @@
 import {
   Focusable,
   useFocusable
-} from "../__chunks/5TGAWEHD.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+} from "../__chunks/AGWM73EZ.js";
+import "../__chunks/BMLNRUFQ.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   Focusable,
   useFocusable

package/esm/form/form-checkbox.js

@@ -1,34 +1,40 @@
 import {
   useFormField
-} from "../__chunks/CDHQAO3X.js";
+} from "../__chunks/6M5FZNI5.js";
 import {
   FormContext
 } from "../__chunks/P3I4MECH.js";
-import {
-  useCheckboxStore
-} from "../__chunks/MAJ5ZZ2S.js";
 import {
   useCheckbox
-} from "../__chunks/GM2BWWHD.js";
+} from "../__chunks/HFDCAETG.js";
+import {
+  useCheckboxStore
+} from "../__chunks/KCAKBKAU.js";
 import "../__chunks/M5KYRTQG.js";
-import "../__chunks/SAVDGYCC.js";
-import "../__chunks/ON2AV7GH.js";
+import "../__chunks/4QNHBDVS.js";
+import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
-import "../__chunks/5TGAWEHD.js";
+import "../__chunks/AGWM73EZ.js";
+import "../__chunks/BMLNRUFQ.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "../__chunks/JE5NWDDX.js";
-import "../__chunks/LTH56VDS.js";
-import "../__chunks/B7MIN7YT.js";
+} from "../__chunks/5ETIGB6O.js";
+import "../__chunks/AV5WE37O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __objRest,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/form/form-checkbox.ts
 import { useContext } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
 var useFormCheckbox = createHook(
-  ({ store, name: nameProp, value, checked, defaultChecked, ...props }) => {
+  (_a) => {
+    var _b = _a, { store, name: nameProp, value, checked, defaultChecked } = _b, props = __objRest(_b, ["store", "name", "value", "checked", "defaultChecked"]);
     const context = useContext(FormContext);
     store = store || context;
     invariant(
@@ -38,15 +44,14 @@ var useFormCheckbox = createHook(
     const name = `${nameProp}`;
     const checkboxStore = useCheckboxStore({
       value: store.useValue(name),
-      setValue: (value2) => store?.setValue(name, value2)
+      setValue: (value2) => store == null ? void 0 : store.setValue(name, value2)
     });
-    props = useCheckbox({ store: checkboxStore, value, checked, ...props });
-    props = useFormField({
+    props = useCheckbox(__spreadValues({ store: checkboxStore, value, checked }, props));
+    props = useFormField(__spreadValues({
       store,
       name,
-      "aria-labelledby": void 0,
-      ...props
-    });
+      "aria-labelledby": void 0
+    }, props));
     return props;
   }
 );

package/esm/form/form-context.js

@@ -1,6 +1,7 @@
 import {
   FormContext
 } from "../__chunks/P3I4MECH.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   FormContext
 };

package/esm/form/form-description.js

@@ -3,24 +3,30 @@ import {
 } from "../__chunks/P3I4MECH.js";
 import {
   useCollectionItem
-} from "../__chunks/ON2AV7GH.js";
+} from "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "../__chunks/JE5NWDDX.js";
+} from "../__chunks/5ETIGB6O.js";
 import {
   useForkRef,
   useId
-} from "../__chunks/B7MIN7YT.js";
+} from "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/form/form-description.ts
 import { useCallback, useContext, useRef } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
 var useFormDescription = createHook(
-  ({ store, name: nameProp, getItem: getItemProp, ...props }) => {
+  (_a) => {
+    var _b = _a, { store, name: nameProp, getItem: getItemProp } = _b, props = __objRest(_b, ["store", "name", "getItem"]);
     const context = useContext(FormContext);
     store = store || context;
     invariant(
@@ -32,12 +38,11 @@ var useFormDescription = createHook(
     const name = `${nameProp}`;
     const getItem = useCallback(
       (item) => {
-        const nextItem = {
-          ...item,
+        const nextItem = __spreadProps(__spreadValues({}, item), {
           id: id || item.id,
           name,
           type: "description"
-        };
+        });
         if (getItemProp) {
           return getItemProp(nextItem);
         }
@@ -45,12 +50,12 @@ var useFormDescription = createHook(
       },
       [id, name, getItemProp]
     );
-    props = {
-      id,
-      ...props,
+    props = __spreadProps(__spreadValues({
+      id
+    }, props), {
       ref: useForkRef(ref, props.ref)
-    };
-    props = useCollectionItem({ store, ...props, getItem });
+    });
+    props = useCollectionItem(__spreadProps(__spreadValues({ store }, props), { getItem }));
     return props;
   }
 );

package/esm/form/form-error.js

@@ -3,24 +3,30 @@ import {
 } from "../__chunks/P3I4MECH.js";
 import {
   useCollectionItem
-} from "../__chunks/ON2AV7GH.js";
+} from "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "../__chunks/JE5NWDDX.js";
+} from "../__chunks/5ETIGB6O.js";
 import {
   useForkRef,
   useId
-} from "../__chunks/B7MIN7YT.js";
+} from "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/form/form-error.ts
 import { useCallback, useContext, useRef } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
 var useFormError = createHook(
-  ({ store, name: nameProp, getItem: getItemProp, ...props }) => {
+  (_a) => {
+    var _b = _a, { store, name: nameProp, getItem: getItemProp } = _b, props = __objRest(_b, ["store", "name", "getItem"]);
     const context = useContext(FormContext);
     store = store || context;
     invariant(
@@ -32,7 +38,7 @@ var useFormError = createHook(
     const name = `${nameProp}`;
     const getItem = useCallback(
       (item) => {
-        const nextItem = { ...item, id: id || item.id, name, type: "error" };
+        const nextItem = __spreadProps(__spreadValues({}, item), { id: id || item.id, name, type: "error" });
         if (getItemProp) {
           return getItemProp(nextItem);
         }
@@ -41,21 +47,21 @@ var useFormError = createHook(
       [id, name, getItemProp]
     );
     const children = store.useState(() => {
-      const error = store?.getError(name);
+      const error = store == null ? void 0 : store.getError(name);
       if (error == null)
         return;
-      if (!store?.getFieldTouched(name))
+      if (!(store == null ? void 0 : store.getFieldTouched(name)))
         return;
       return error;
     });
-    props = {
+    props = __spreadProps(__spreadValues({
       id,
       role: "alert",
-      children,
-      ...props,
+      children
+    }, props), {
       ref: useForkRef(ref, props.ref)
-    };
-    props = useCollectionItem({ store, ...props, getItem });
+    });
+    props = useCollectionItem(__spreadProps(__spreadValues({ store }, props), { getItem }));
     return props;
   }
 );

package/esm/form/form-field.js

@@ -1,13 +1,14 @@
 import {
   FormField,
   useFormField
-} from "../__chunks/CDHQAO3X.js";
+} from "../__chunks/6M5FZNI5.js";
 import "../__chunks/P3I4MECH.js";
-import "../__chunks/ON2AV7GH.js";
+import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   FormField,
   useFormField

package/esm/form/form-group-label.js

@@ -1,18 +1,22 @@
 import {
   useGroupLabel
-} from "../__chunks/SE7IFIBU.js";
+} from "../__chunks/JNCKMFIN.js";
 import "../__chunks/F5VAC7MB.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+} from "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __objRest
+} from "../__chunks/4BKCJXBM.js";
 
 // src/form/form-group-label.ts
 var useFormGroupLabel = createHook(
-  ({ store, ...props }) => {
+  (_a) => {
+    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     props = useGroupLabel(props);
     return props;
   }

package/esm/form/form-group.js

@@ -1,12 +1,13 @@
 import {
   FormGroup,
   useFormGroup
-} from "../__chunks/KO6UUYKG.js";
-import "../__chunks/SG5D3YRB.js";
+} from "../__chunks/AWLCMCCK.js";
+import "../__chunks/ECY3BFPU.js";
 import "../__chunks/F5VAC7MB.js";
-import "../__chunks/JE5NWDDX.js";
-import "../__chunks/B7MIN7YT.js";
+import "../__chunks/5ETIGB6O.js";
+import "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   FormGroup,
   useFormGroup