@ariakit/react-core 0.3.14 → 0.4.0

package/esm/__chunks/IFT5JEUU.js

@@ -0,0 +1,40 @@
+"use client";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/visually-hidden/visually-hidden.ts
+var TagName = "span";
+var useVisuallyHidden = createHook(
+  function useVisuallyHidden2(props) {
+    props = __spreadProps(__spreadValues({}, props), {
+      style: __spreadValues({
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: "1px",
+        margin: "-1px",
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        whiteSpace: "nowrap",
+        width: "1px"
+      }, props.style)
+    });
+    return props;
+  }
+);
+var VisuallyHidden = forwardRef(function VisuallyHidden2(props) {
+  const htmlProps = useVisuallyHidden(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useVisuallyHidden,
+  VisuallyHidden
+};

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/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/{Y6467XPW.js → IU2VX2AY.js}

@@ -1,21 +1,22 @@
 "use client";
 import {
   useMenuScopedContext
-} from "./YGMEBI3A.js";
+} from "./IG6NVGLB.js";
 import {
   useMenubarScopedContext
-} from "./KA4GX64Z.js";
+} from "./VBF5EZBB.js";
 import {
   useCompositeHover
-} from "./G6ONQ5EH.js";
+} from "./WL6TTPTB.js";
 import {
   useCompositeItem
-} from "./QZLXIDNP.js";
+} from "./VVLSOSIG.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "./3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "./5M6RSQEC.js";
 import {
   useStoreState
 } from "./EKQEJRUF.js";
@@ -34,6 +35,7 @@ import { getDocument, getPopupItemRole } from "@ariakit/core/utils/dom";
 import { isDownloading, isOpeningInNewTab } from "@ariakit/core/utils/events";
 import { hasFocusWithin } from "@ariakit/core/utils/focus";
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "div";
 function menuHasFocus(baseElement, items, currentTarget) {
   var _a;
   if (!baseElement)
@@ -58,7 +60,7 @@ function menuHasFocus(baseElement, items, currentTarget) {
   return !!expandedMenu.querySelector("[role=menuitem][aria-expanded=true]");
 }
 var useMenuItem = createHook(
-  (_a) => {
+  function useMenuItem2(_a) {
     var _b = _a, {
       store,
       hideOnClick = true,
@@ -110,7 +112,10 @@ var useMenuItem = createHook(
     }, props), {
       onClick
     });
-    props = useCompositeItem(__spreadValues({ store, preventScrollOnKeyDown }, props));
+    props = useCompositeItem(__spreadValues({
+      store,
+      preventScrollOnKeyDown
+    }, props));
     props = useCompositeHover(__spreadProps(__spreadValues({
       store
     }, props), {
@@ -150,13 +155,12 @@ var useMenuItem = createHook(
     return props;
   }
 );
-var MenuItem = createMemoComponent((props) => {
-  const htmlProps = useMenuItem(props);
-  return createElement("div", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  MenuItem.displayName = "MenuItem";
-}
+var MenuItem = memo(
+  forwardRef(function MenuItem2(props) {
+    const htmlProps = useMenuItem(props);
+    return createElement(TagName, htmlProps);
+  })
+);
 
 export {
   useMenuItem,

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/{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/{IRX7SFUJ.js → KMWSQ7OZ.js}

@@ -2,16 +2,16 @@
 import {
   createDialogComponent,
   useDialog
-} from "./NERBASET.js";
+} from "./SSK5L4K7.js";
 import {
   PopoverScopedContextProvider,
   usePopoverProviderContext
-} from "./7H5KSHHF.js";
+} from "./TE637IA7.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useEvent,
   usePortalRef,
@@ -38,6 +38,7 @@ import {
   size
 } from "@floating-ui/dom";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
   if (typeof DOMRect === "function") {
     return new DOMRect(x, y, width, height);
@@ -156,7 +157,7 @@ function getArrowMiddleware(arrowElement, props) {
   });
 }
 var usePopover = createHook(
-  (_a) => {
+  function usePopover2(_a) {
     var _b = _a, {
       store,
       modal = false,
@@ -324,9 +325,7 @@ var usePopover = createHook(
       props,
       (element) => /* @__PURE__ */ jsx(
         "div",
-        __spreadProps(__spreadValues({
-          role: "presentation"
-        }, wrapperProps), {
+        __spreadProps(__spreadValues({}, wrapperProps), {
           style: __spreadValues({
             // https://floating-ui.com/docs/computeposition#initial-layout
             position,
@@ -350,7 +349,7 @@ var usePopover = createHook(
       // we can wait for the popover to be positioned before other components
       // move focus into it. For example, this attribute is observed by the
       // Combobox component with the autoSelect behavior.
-      "data-placing": !positioned ? "" : void 0
+      "data-placing": !positioned || void 0
     }, props), {
       style: __spreadValues({
         position: "relative"
@@ -370,15 +369,12 @@ var usePopover = createHook(
   }
 );
 var Popover = createDialogComponent(
-  createComponent((props) => {
+  forwardRef(function Popover2(props) {
     const htmlProps = usePopover(props);
-    return createElement("div", htmlProps);
+    return createElement(TagName, htmlProps);
   }),
   usePopoverProviderContext
 );
-if (process.env.NODE_ENV !== "production") {
-  Popover.displayName = "Popover";
-}
 
 export {
   usePopover,

package/esm/__chunks/{7NHUGSTF.js → KTPXKSJN.js}

@@ -1,23 +1,25 @@
 "use client";
 import {
   useCompositeItem
-} from "./QZLXIDNP.js";
+} from "./VVLSOSIG.js";
 import {
   useToolbarContext
-} from "./SOK7T35T.js";
+} from "./2OCM6QMR.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "./3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/toolbar/toolbar-item.ts
+var TagName = "button";
 var useToolbarItem = createHook(
-  (_a) => {
+  function useToolbarItem2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useToolbarContext();
     store = store || context;
@@ -25,13 +27,12 @@ var useToolbarItem = createHook(
     return props;
   }
 );
-var ToolbarItem = createMemoComponent((props) => {
-  const htmlProps = useToolbarItem(props);
-  return createElement("button", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  ToolbarItem.displayName = "ToolbarItem";
-}
+var ToolbarItem = memo(
+  forwardRef(function ToolbarItem2(props) {
+    const htmlProps = useToolbarItem(props);
+    return createElement(TagName, htmlProps);
+  })
+);
 
 export {
   useToolbarItem,

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
+};

package/esm/__chunks/{4UUKJZ4V.js → MADQZZRL.js}

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

package/esm/__chunks/{XJXP7ZSQ.js → MAMNGFY7.js}

@@ -1,19 +1,19 @@
 "use client";
 import {
   useMenuContext
-} from "./YGMEBI3A.js";
+} from "./IG6NVGLB.js";
 import {
   useMenubarContext
-} from "./KA4GX64Z.js";
+} from "./VBF5EZBB.js";
 import {
   useComboboxProviderContext
-} from "./W76OTZCC.js";
+} from "./UNDSQXBK.js";
 import {
   useCompositeStoreProps
 } from "./7GBW5FLS.js";
 import {
   useHovercardStoreProps
-} from "./ZU7LQC5V.js";
+} from "./E5E7G32I.js";
 import {
   useStore,
   useStoreProps
@@ -30,14 +30,19 @@ import {
 import * as Core from "@ariakit/core/menu/menu-store";
 function useMenuStoreProps(store, update, props) {
   useUpdateEffect(update, [props.combobox, props.parent, props.menubar]);
-  store = useCompositeStoreProps(store, update, props);
-  store = useHovercardStoreProps(store, update, props);
   useStoreProps(store, props, "values", "setValues");
-  return Object.assign(store, {
-    combobox: props.combobox,
-    parent: props.parent,
-    menubar: props.menubar
-  });
+  return Object.assign(
+    useHovercardStoreProps(
+      useCompositeStoreProps(store, update, props),
+      update,
+      props
+    ),
+    {
+      combobox: props.combobox,
+      parent: props.parent,
+      menubar: props.menubar
+    }
+  );
 }
 function useMenuStore(props = {}) {
   const parent = useMenuContext();