@ariakit/react-core 0.3.14 → 0.4.1

package/esm/__chunks/{YGMEBI3A.js → IG6NVGLB.js}

@@ -5,18 +5,18 @@ import {
   useMenubarContext,
   useMenubarProviderContext,
   useMenubarScopedContext
-} from "./KA4GX64Z.js";
+} from "./VBF5EZBB.js";
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   HovercardContextProvider,
   HovercardScopedContextProvider
-} from "./TI7CMBHW.js";
+} from "./TWDHCE7Y.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/menu/menu-context.ts
 import { createContext } from "react";

package/esm/__chunks/{F6PRXTDU.js → IKMNNZAH.js}

@@ -1,23 +1,24 @@
 "use client";
 import {
   useDialogDismiss
-} from "./NKXUN25E.js";
+} from "./5KB2YIDT.js";
 import {
   usePopoverScopedContext
-} from "./7H5KSHHF.js";
+} from "./TE637IA7.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/popover/popover-dismiss.ts
+var TagName = "button";
 var usePopoverDismiss = createHook(
-  (_a) => {
+  function usePopoverDismiss2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = usePopoverScopedContext();
     store = store || context;
@@ -25,15 +26,10 @@ var usePopoverDismiss = createHook(
     return props;
   }
 );
-var PopoverDismiss = createComponent(
-  (props) => {
-    const htmlProps = usePopoverDismiss(props);
-    return createElement("button", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  PopoverDismiss.displayName = "PopoverDismiss";
-}
+var PopoverDismiss = forwardRef(function PopoverDismiss2(props) {
+  const htmlProps = usePopoverDismiss(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   usePopoverDismiss,

package/esm/__chunks/IKU53XMZ.js

@@ -0,0 +1,44 @@
+"use client";
+import {
+  DialogDescriptionContext
+} from "./XXVAHUAO.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useId,
+  useSafeLayoutEffect
+} from "./6O5OEQGF.js";
+import {
+  __objRest,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/dialog/dialog-description.ts
+import { useContext } from "react";
+import { removeUndefinedValues } from "@ariakit/core/utils/misc";
+var TagName = "p";
+var useDialogDescription = createHook(function useDialogDescription2(_a) {
+  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+  const setDescriptionId = useContext(DialogDescriptionContext);
+  const id = useId(props.id);
+  useSafeLayoutEffect(() => {
+    setDescriptionId == null ? void 0 : setDescriptionId(id);
+    return () => setDescriptionId == null ? void 0 : setDescriptionId(void 0);
+  }, [setDescriptionId, id]);
+  props = __spreadValues({
+    id
+  }, props);
+  return removeUndefinedValues(props);
+});
+var DialogDescription = forwardRef(function DialogDescription2(props) {
+  const htmlProps = useDialogDescription(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useDialogDescription,
+  DialogDescription
+};

package/esm/__chunks/{OAYFXAQ2.js → J55AVALY.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/disclosure/disclosure-context.tsx
 var ctx = createStoreContext();

package/esm/__chunks/JJ3MV4KB.js

@@ -0,0 +1,52 @@
+"use client";
+import {
+  useCommand
+} from "./KSZPJCUA.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useMergeRefs,
+  useTagName
+} from "./6O5OEQGF.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/button/button.ts
+import { useEffect, useRef, useState } from "react";
+import { isButton } from "@ariakit/core/utils/dom";
+var TagName = "button";
+var useButton = createHook(
+  function useButton2(props) {
+    const ref = useRef(null);
+    const tagName = useTagName(ref, TagName);
+    const [isNativeButton, setIsNativeButton] = useState(
+      () => !!tagName && isButton({ tagName, type: props.type })
+    );
+    useEffect(() => {
+      if (!ref.current)
+        return;
+      setIsNativeButton(isButton(ref.current));
+    }, []);
+    props = __spreadProps(__spreadValues({
+      role: !isNativeButton && tagName !== "a" ? "button" : void 0
+    }, props), {
+      ref: useMergeRefs(ref, props.ref)
+    });
+    props = useCommand(props);
+    return props;
+  }
+);
+var Button = forwardRef(function Button2(props) {
+  const htmlProps = useButton(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useButton,
+  Button
+};

package/esm/__chunks/{P5SOPKIM.js → K3QOUHVI.js}

@@ -1,31 +1,29 @@
 "use client";
 import {
   useGroup
-} from "./R2QZ3KXH.js";
+} from "./CWDOOAGR.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest
 } from "./4R3V3JGP.js";
 
 // src/form/form-group.ts
+var TagName = "div";
 var useFormGroup = createHook(
-  (_a) => {
+  function useFormGroup2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     props = useGroup(props);
     return props;
   }
 );
-var FormGroup = createComponent((props) => {
+var FormGroup = forwardRef(function FormGroup2(props) {
   const htmlProps = useFormGroup(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  FormGroup.displayName = "FormGroup";
-}
 
 export {
   useFormGroup,

package/esm/__chunks/{NWCBQ4CV.js → KSZPJCUA.js}

@@ -1,12 +1,12 @@
 "use client";
 import {
   useFocusable
-} from "./KK7H3W2B.js";
+} from "./WAZE6NXP.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useEvent,
   useMergeRefs,
@@ -29,6 +29,7 @@ import {
 } from "@ariakit/core/utils/events";
 import { disabledFromProps } from "@ariakit/core/utils/misc";
 import { isFirefox } from "@ariakit/core/utils/platform";
+var TagName = "button";
 function isNativeClick(event) {
   if (!event.isTrusted)
     return false;
@@ -43,10 +44,10 @@ function isNativeClick(event) {
 }
 var symbol = Symbol("command");
 var useCommand = createHook(
-  (_a) => {
+  function useCommand2(_a) {
     var _b = _a, { clickOnEnter = true, clickOnSpace = true } = _b, props = __objRest(_b, ["clickOnEnter", "clickOnSpace"]);
     const ref = useRef(null);
-    const tagName = useTagName(ref, props.as);
+    const tagName = useTagName(ref);
     const type = props.type;
     const [isNativeButton, setIsNativeButton] = useState(
       () => !!tagName && isButton({ tagName, type })
@@ -130,7 +131,7 @@ var useCommand = createHook(
       }
     });
     props = __spreadProps(__spreadValues(__spreadValues({
-      "data-active": active ? "" : void 0,
+      "data-active": active || void 0,
       type: isNativeButton ? "button" : void 0
     }, metadataProps), props), {
       ref: useMergeRefs(ref, props.ref),
@@ -141,13 +142,10 @@ var useCommand = createHook(
     return props;
   }
 );
-var Command = createComponent((props) => {
-  props = useCommand(props);
-  return createElement("button", props);
+var Command = forwardRef(function Command2(props) {
+  const htmlProps = useCommand(props);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Command.displayName = "Command";
-}
 
 export {
   useCommand,

package/esm/__chunks/KTZEHGAP.js

@@ -0,0 +1,186 @@
+"use client";
+import {
+  selectTextField
+} from "./3IEDWLST.js";
+import {
+  useCompositeContext
+} from "./3D6OCOHF.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useStoreState
+} from "./EKQEJRUF.js";
+import {
+  useEvent,
+  useMergeRefs
+} from "./6O5OEQGF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/composite/composite-container.ts
+import { useEffect, useRef } from "react";
+import { isButton, isTextField } from "@ariakit/core/utils/dom";
+import { isFocusEventOutside, isSelfTarget } from "@ariakit/core/utils/events";
+import {
+  disableFocusIn,
+  getFirstTabbableIn,
+  restoreFocusIn
+} from "@ariakit/core/utils/focus";
+import { removeUndefinedValues } from "@ariakit/core/utils/misc";
+var TagName = "div";
+function getFirstTabbable(container) {
+  restoreFocusIn(container);
+  const tabbable = getFirstTabbableIn(container);
+  disableFocusIn(container);
+  return tabbable;
+}
+var useCompositeContainer = createHook(function useCompositeContainer2(_a) {
+  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+  const context = useCompositeContext();
+  store = store || context;
+  const ref = useRef(null);
+  const isOpenRef = useRef(false);
+  const open = (collapseToEnd = false) => {
+    const container = ref.current;
+    if (!container)
+      return;
+    restoreFocusIn(container);
+    const tabbable = getFirstTabbableIn(container);
+    if (!tabbable) {
+      disableFocusIn(container);
+      return;
+    }
+    isOpenRef.current = true;
+    queueMicrotask(() => {
+      tabbable.focus();
+      if (isTextField(tabbable) || tabbable.isContentEditable) {
+        selectTextField(tabbable, collapseToEnd);
+      }
+    });
+  };
+  const close = () => {
+    const container = ref.current;
+    if (!container)
+      return;
+    isOpenRef.current = false;
+    disableFocusIn(container);
+  };
+  const renderedItems = useStoreState(store, "renderedItems");
+  useEffect(() => {
+    const container = ref.current;
+    if (!container)
+      return;
+    const isOpen = isOpenRef.current;
+    if (!isOpen && (renderedItems == null ? void 0 : renderedItems.length)) {
+      disableFocusIn(container);
+    }
+  }, [renderedItems]);
+  const onFocusProp = props.onFocus;
+  const onFocus = useEvent((event) => {
+    onFocusProp == null ? void 0 : onFocusProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (!store)
+      return;
+    const isOpen = isOpenRef.current;
+    if (isSelfTarget(event)) {
+      isOpenRef.current = false;
+      const { baseElement } = store.getState();
+      const composite = baseElement;
+      const selector = "[data-composite-container]";
+      const containers = composite == null ? void 0 : composite.querySelectorAll(selector);
+      containers == null ? void 0 : containers.forEach((container) => disableFocusIn(container));
+    } else if (!isOpen) {
+      isOpenRef.current = true;
+      restoreFocusIn(event.currentTarget);
+      store == null ? void 0 : store.setState("moves", 0);
+    }
+  });
+  const onBlurProp = props.onBlur;
+  const onBlur = useEvent((event) => {
+    onBlurProp == null ? void 0 : onBlurProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (isFocusEventOutside(event)) {
+      close();
+    }
+  });
+  const onKeyDownProp = props.onKeyDown;
+  const onKeyDown = useEvent((event) => {
+    onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (event.altKey)
+      return;
+    if (event.ctrlKey)
+      return;
+    if (event.metaKey)
+      return;
+    if (event.shiftKey)
+      return;
+    const container = event.currentTarget;
+    if (isSelfTarget(event)) {
+      if (event.key.length === 1 && event.key !== " ") {
+        const tabbable = getFirstTabbable(container);
+        if (!tabbable)
+          return;
+        if (isTextField(tabbable) || tabbable.isContentEditable) {
+          event.stopPropagation();
+          open();
+        }
+      } else if (event.key === "Delete" || event.key === "Backspace") {
+        const tabbable = getFirstTabbable(container);
+        if (!tabbable)
+          return;
+        if (isTextField(tabbable) || tabbable.isContentEditable) {
+          open();
+          const onInput = () => queueMicrotask(() => container.focus());
+          container.addEventListener("input", onInput, { once: true });
+        }
+      }
+    } else if (event.key === "Escape") {
+      queueMicrotask(() => container.focus());
+    } else if (event.key === "Enter") {
+      const target = event.target;
+      const isInput = target.tagName === "INPUT" && !isButton(target) || target.tagName === "TEXTAREA";
+      if (isInput || target.isContentEditable) {
+        event.preventDefault();
+        queueMicrotask(() => container.focus());
+      }
+    }
+  });
+  const onClickProp = props.onClick;
+  const onClick = useEvent((event) => {
+    onClickProp == null ? void 0 : onClickProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (isSelfTarget(event) && !event.detail) {
+      open(true);
+    }
+  });
+  props = __spreadProps(__spreadValues({
+    "data-composite-container": ""
+  }, props), {
+    ref: useMergeRefs(ref, props.ref),
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onClick
+  });
+  return removeUndefinedValues(props);
+});
+var CompositeContainer = forwardRef(function CompositeContainer2(props) {
+  const htmlProps = useCompositeContainer(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useCompositeContainer,
+  CompositeContainer
+};