@ariakit/react-core 0.1.6 → 0.1.8

package/esm/disclosure/disclosure.js

@@ -1,14 +1,15 @@
 import {
   Disclosure,
   useDisclosure
-} from "../__chunks/UBWZV2LZ.js";
-import "../__chunks/GEZPJZJE.js";
-import "../__chunks/SMBMF2TX.js";
-import "../__chunks/HBXYECGK.js";
+} from "../__chunks/24P2K6AU.js";
+import "../__chunks/OQUXG6FE.js";
+import "../__chunks/4QNHBDVS.js";
+import "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.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 {
   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.js

@@ -1,11 +1,12 @@
 import {
   FocusableContainer,
   useFocusableContainer
-} from "../__chunks/D6AEGMVG.js";
+} from "../__chunks/6WVG5KFF.js";
 import "../__chunks/BMLNRUFQ.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 {
   FocusableContainer,
   useFocusableContainer

package/esm/focusable/focusable-context.js

@@ -1,6 +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;

package/esm/focusable/focusable.js

@@ -1,11 +1,12 @@
 import {
   Focusable,
   useFocusable
-} from "../__chunks/HBXYECGK.js";
+} from "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.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 {
   Focusable,
   useFocusable

package/esm/form/form-checkbox.js

@@ -1,35 +1,40 @@
 import {
   useFormField
-} from "../__chunks/CDHQAO3X.js";
+} from "../__chunks/6M5FZNI5.js";
 import {
   FormContext
 } from "../__chunks/P3I4MECH.js";
 import {
   useCheckbox
-} from "../__chunks/LMKEQY3H.js";
+} from "../__chunks/HFDCAETG.js";
 import {
   useCheckboxStore
-} from "../__chunks/3QLNHI3O.js";
+} from "../__chunks/KCAKBKAU.js";
 import "../__chunks/M5KYRTQG.js";
-import "../__chunks/SMBMF2TX.js";
-import "../__chunks/ON2AV7GH.js";
+import "../__chunks/4QNHBDVS.js";
+import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
-import "../__chunks/HBXYECGK.js";
+import "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "../__chunks/JE5NWDDX.js";
-import "../__chunks/EUGPS2W3.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(
@@ -39,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

package/esm/form/form-input.js

@@ -1,30 +1,36 @@
 import {
   useFormField
-} from "../__chunks/CDHQAO3X.js";
+} from "../__chunks/6M5FZNI5.js";
 import {
   FormContext
 } from "../__chunks/P3I4MECH.js";
-import "../__chunks/ON2AV7GH.js";
+import "../__chunks/X7UZWWYG.js";
 import "../__chunks/T3DJZG63.js";
 import {
   useFocusable
-} from "../__chunks/HBXYECGK.js";
+} from "../__chunks/AGWM73EZ.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "../__chunks/JE5NWDDX.js";
+} from "../__chunks/5ETIGB6O.js";
 import {
   useEvent
-} from "../__chunks/B7MIN7YT.js";
+} from "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/form/form-input.ts
 import { useContext } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
 var useFormInput = createHook(
-  ({ store, name: nameProp, ...props }) => {
+  (_a) => {
+    var _b = _a, { store, name: nameProp } = _b, props = __objRest(_b, ["store", "name"]);
     const context = useContext(FormContext);
     store = store || context;
     invariant(
@@ -34,19 +40,19 @@ var useFormInput = createHook(
     const name = `${nameProp}`;
     const onChangeProp = props.onChange;
     const onChange = useEvent((event) => {
-      onChangeProp?.(event);
+      onChangeProp == null ? void 0 : onChangeProp(event);
       if (event.defaultPrevented)
         return;
-      store?.setValue(name, event.target.value);
+      store == null ? void 0 : store.setValue(name, event.target.value);
     });
     const value = store.useValue(name);
-    props = {
-      value,
-      ...props,
+    props = __spreadProps(__spreadValues({
+      value
+    }, props), {
       onChange
-    };
+    });
     props = useFocusable(props);
-    props = useFormField({ store, name, ...props });
+    props = useFormField(__spreadValues({ store, name }, props));
     return props;
   }
 );

package/esm/form/form-label.js

@@ -3,20 +3,25 @@ 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 {
   useEvent,
   useForkRef,
   useId,
   useTagName
-} from "../__chunks/B7MIN7YT.js";
+} from "../__chunks/ASYR66PQ.js";
 import "../__chunks/SXC6BPOF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/form/form-label.ts
 import { useCallback, useContext, useRef } from "react";
@@ -26,7 +31,8 @@ function supportsNativeLabel(tagName) {
   return tagName === "input" || tagName === "textarea" || tagName === "select" || tagName === "meter" || tagName === "progress";
 }
 var useFormLabel = 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(
@@ -38,7 +44,7 @@ var useFormLabel = createHook(
     const name = `${nameProp}`;
     const getItem = useCallback(
       (item) => {
-        const nextItem = { ...item, id: id || item.id, name, type: "label" };
+        const nextItem = __spreadProps(__spreadValues({}, item), { id: id || item.id, name, type: "label" });
         if (getItemProp) {
           return getItemProp(nextItem);
         }
@@ -49,43 +55,41 @@ var useFormLabel = createHook(
     const field = store.useState(
       (state) => state.items.find((item) => item.type === "field" && item.name === name)
     );
-    const fieldTagName = useTagName(field?.element, "input");
+    const fieldTagName = useTagName(field == null ? void 0 : field.element, "input");
     const isNativeLabel = supportsNativeLabel(fieldTagName);
     const onClickProp = props.onClick;
     const onClick = useEvent((event) => {
-      onClickProp?.(event);
+      onClickProp == null ? void 0 : onClickProp(event);
       if (event.defaultPrevented)
         return;
       if (isNativeLabel)
         return;
-      const fieldElement = field?.element;
+      const fieldElement = field == null ? void 0 : field.element;
       if (!fieldElement)
         return;
       queueMicrotask(() => {
         const focusableElement = getFirstTabbableIn(fieldElement, true, true);
-        focusableElement?.focus();
-        focusableElement?.click();
+        focusableElement == null ? void 0 : focusableElement.focus();
+        focusableElement == null ? void 0 : focusableElement.click();
       });
     });
-    props = {
+    props = __spreadProps(__spreadValues({
       id,
       // @ts-expect-error
       as: isNativeLabel ? "label" : "span",
-      htmlFor: isNativeLabel ? field?.id : void 0,
-      ...props,
+      htmlFor: isNativeLabel ? field == null ? void 0 : field.id : void 0
+    }, props), {
       ref: useForkRef(ref, props.ref),
       onClick
-    };
+    });
     if (!isNativeLabel) {
-      props = {
-        ...props,
-        style: {
-          cursor: "default",
-          ...props.style
-        }
-      };
+      props = __spreadProps(__spreadValues({}, props), {
+        style: __spreadValues({
+          cursor: "default"
+        }, props.style)
+      });
     }
-    props = useCollectionItem({ store, ...props, getItem });
+    props = useCollectionItem(__spreadProps(__spreadValues({ store }, props), { getItem }));
     return props;
   }
 );