@ariakit/react-core 0.3.14 → 0.4.1

package/esm/__chunks/{BHEJ6NUH.js → AFNONYRE.js}

@@ -1,15 +1,15 @@
 "use client";
 import {
   useButton
-} from "./VDNZBO4W.js";
+} from "./JJ3MV4KB.js";
 import {
   useDisclosureProviderContext
-} from "./OAYFXAQ2.js";
+} from "./J55AVALY.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -25,9 +25,10 @@ import {
 // src/disclosure/disclosure.ts
 import { useEffect, useRef, useState } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "button";
 var symbol = Symbol("disclosure");
 var useDisclosure = createHook(
-  (_a) => {
+  function useDisclosure2(_a) {
     var _b = _a, { store, toggleOnClick = true } = _b, props = __objRest(_b, ["store", "toggleOnClick"]);
     const context = useDisclosureProviderContext();
     store = store || context;
@@ -73,13 +74,10 @@ var useDisclosure = createHook(
     return props;
   }
 );
-var Disclosure = createComponent((props) => {
+var Disclosure = forwardRef(function Disclosure2(props) {
   const htmlProps = useDisclosure(props);
-  return createElement("button", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Disclosure.displayName = "Disclosure";
-}
 
 export {
   useDisclosure,

package/esm/__chunks/{MW2F7SEA.js → BX7FFG2R.js}

@@ -3,10 +3,10 @@ import {
   CheckboxCheckedContext
 } from "./6XBVQI3K.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadProps,
@@ -15,7 +15,9 @@ import {
 
 // src/checkbox/checkbox-check.tsx
 import { useContext } from "react";
+import { removeUndefinedValues } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "span";
 var checkmark = /* @__PURE__ */ jsx(
   "svg",
   {
@@ -41,7 +43,7 @@ function getChildren(props) {
   return null;
 }
 var useCheckboxCheck = createHook(
-  (_a) => {
+  function useCheckboxCheck2(_a) {
     var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
     const context = useContext(CheckboxCheckedContext);
     checked = checked != null ? checked : context;
@@ -56,16 +58,13 @@ var useCheckboxCheck = createHook(
         pointerEvents: "none"
       }, props.style)
     });
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var CheckboxCheck = createComponent((props) => {
+var CheckboxCheck = forwardRef(function CheckboxCheck2(props) {
   const htmlProps = useCheckboxCheck(props);
-  return createElement("span", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  CheckboxCheck.displayName = "CheckboxCheck";
-}
 
 export {
   useCheckboxCheck,

package/esm/__chunks/{IRX7SFUJ.js → BYD75WXE.js}

@@ -2,16 +2,16 @@
 import {
   createDialogComponent,
   useDialog
-} from "./NERBASET.js";
+} from "./KXSO5EFT.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/{QZLXIDNP.js → C6OBNQ4F.js}

@@ -1,10 +1,10 @@
 "use client";
 import {
   useCommand
-} from "./NWCBQ4CV.js";
+} from "./KSZPJCUA.js";
 import {
   useCollectionItem
-} from "./UH3I23HL.js";
+} from "./7YKLTEOQ.js";
 import {
   focusSilently,
   getEnabledItem,
@@ -14,12 +14,13 @@ import {
   CompositeItemContext,
   CompositeRowContext,
   useCompositeContext
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "./3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "./5M6RSQEC.js";
 import {
   useStoreState
 } from "./EKQEJRUF.js";
@@ -45,8 +46,12 @@ import {
   isTextField
 } from "@ariakit/core/utils/dom";
 import { isPortalEvent, isSelfTarget } from "@ariakit/core/utils/events";
-import { disabledFromProps } from "@ariakit/core/utils/misc";
+import {
+  disabledFromProps,
+  removeUndefinedValues
+} from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "button";
 function isEditableElement(element) {
   if (element.isContentEditable)
     return true;
@@ -144,7 +149,7 @@ function supportsAriaSelected(role) {
   return false;
 }
 var useCompositeItem = createHook(
-  (_a) => {
+  function useCompositeItem2(_a) {
     var _b = _a, {
       store,
       rowId: rowIdProp,
@@ -373,7 +378,7 @@ var useCompositeItem = createHook(
     props = __spreadProps(__spreadValues({
       id,
       "aria-selected": ariaSelected,
-      "data-active-item": isActiveItem ? "" : void 0
+      "data-active-item": isActiveItem || void 0
     }, props), {
       ref: useMergeRefs(ref, props.ref),
       tabIndex: isTabbable ? props.tabIndex : -1,
@@ -388,21 +393,18 @@ var useCompositeItem = createHook(
       getItem,
       shouldRegisterItem: !!id ? props.shouldRegisterItem : false
     }));
-    return __spreadProps(__spreadValues({}, props), {
+    return removeUndefinedValues(__spreadProps(__spreadValues({}, props), {
       "aria-setsize": ariaSetSize,
       "aria-posinset": ariaPosInSet
-    });
+    }));
   }
 );
-var CompositeItem = createMemoComponent(
-  (props) => {
+var CompositeItem = memo(
+  forwardRef(function CompositeItem2(props) {
     const htmlProps = useCompositeItem(props);
-    return createElement("button", htmlProps);
-  }
+    return createElement(TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  CompositeItem.displayName = "CompositeItem";
-}
 
 export {
   useCompositeItem,

package/esm/__chunks/{FSFPRQFR.js → CBTO7DFZ.js}

@@ -1,11 +1,12 @@
 "use client";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 
 // src/role/role.ts
+var TagName = "div";
 var elements = [
   "a",
   "button",
@@ -34,19 +35,21 @@ var elements = [
   "ul",
   "svg"
 ];
-var useRole = createHook((props) => {
-  return props;
-});
-var Role = createComponent((props) => {
-  return createElement("div", props);
-});
-if (process.env.NODE_ENV !== "production") {
-  Role.displayName = "Role";
-}
+var useRole = createHook(
+  function useRole2(props) {
+    return props;
+  }
+);
+var Role = forwardRef(
+  // @ts-expect-error
+  function Role2(props) {
+    return createElement(TagName, props);
+  }
+);
 Object.assign(
   Role,
   elements.reduce((acc, element) => {
-    acc[element] = createComponent((props) => {
+    acc[element] = forwardRef(function Role3(props) {
       return createElement(element, props);
     });
     return acc;

package/esm/__chunks/CK3UW3AQ.js

@@ -0,0 +1,276 @@
+"use client";
+import {
+  FocusTrap
+} from "./WKWX2XLD.js";
+import {
+  PortalContext
+} from "./7452U3HH.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useMergeRefs,
+  useSafeLayoutEffect,
+  useWrapElement
+} from "./6O5OEQGF.js";
+import {
+  setRef
+} from "./XM66DUTO.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/portal/portal.tsx
+import { useContext, useEffect, useRef, useState } from "react";
+import { getDocument } from "@ariakit/core/utils/dom";
+import { isFocusEventOutside } from "@ariakit/core/utils/events";
+import {
+  disableFocusIn,
+  getNextTabbable,
+  getPreviousTabbable,
+  restoreFocusIn
+} from "@ariakit/core/utils/focus";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TagName = "div";
+function getRootElement(element) {
+  return getDocument(element).body;
+}
+function getPortalElement(element, portalElement) {
+  if (!portalElement) {
+    return getDocument(element).createElement("div");
+  }
+  if (typeof portalElement === "function") {
+    return portalElement(element);
+  }
+  return portalElement;
+}
+function getRandomId(prefix = "id") {
+  return `${prefix ? `${prefix}-` : ""}${Math.random().toString(36).substr(2, 6)}`;
+}
+function queueFocus(element) {
+  queueMicrotask(() => {
+    element == null ? void 0 : element.focus();
+  });
+}
+var usePortal = createHook(function usePortal2(_a) {
+  var _b = _a, {
+    preserveTabOrder,
+    preserveTabOrderAnchor,
+    portalElement,
+    portalRef,
+    portal = true
+  } = _b, props = __objRest(_b, [
+    "preserveTabOrder",
+    "preserveTabOrderAnchor",
+    "portalElement",
+    "portalRef",
+    "portal"
+  ]);
+  const ref = useRef(null);
+  const refProp = useMergeRefs(ref, props.ref);
+  const context = useContext(PortalContext);
+  const [portalNode, setPortalNode] = useState(null);
+  const [anchorPortalNode, setAnchorPortalNode] = useState(
+    null
+  );
+  const outerBeforeRef = useRef(null);
+  const innerBeforeRef = useRef(null);
+  const innerAfterRef = useRef(null);
+  const outerAfterRef = useRef(null);
+  useSafeLayoutEffect(() => {
+    const element = ref.current;
+    if (!element || !portal) {
+      setPortalNode(null);
+      return;
+    }
+    const portalEl = getPortalElement(element, portalElement);
+    if (!portalEl) {
+      setPortalNode(null);
+      return;
+    }
+    const isPortalInDocument = portalEl.isConnected;
+    if (!isPortalInDocument) {
+      const rootElement = context || getRootElement(element);
+      rootElement.appendChild(portalEl);
+    }
+    if (!portalEl.id) {
+      portalEl.id = element.id ? `portal/${element.id}` : getRandomId();
+    }
+    setPortalNode(portalEl);
+    setRef(portalRef, portalEl);
+    if (isPortalInDocument)
+      return;
+    return () => {
+      portalEl.remove();
+      setRef(portalRef, null);
+    };
+  }, [portal, portalElement, context, portalRef]);
+  useSafeLayoutEffect(() => {
+    if (!preserveTabOrder)
+      return;
+    if (!preserveTabOrderAnchor)
+      return;
+    const doc = getDocument(preserveTabOrderAnchor);
+    const element = doc.createElement("span");
+    element.style.position = "fixed";
+    preserveTabOrderAnchor.insertAdjacentElement("afterend", element);
+    setAnchorPortalNode(element);
+    return () => {
+      element.remove();
+      setAnchorPortalNode(null);
+    };
+  }, [preserveTabOrder, preserveTabOrderAnchor]);
+  useEffect(() => {
+    if (!portalNode)
+      return;
+    if (!preserveTabOrder)
+      return;
+    let raf = 0;
+    const onFocus = (event) => {
+      if (!isFocusEventOutside(event))
+        return;
+      const focusing = event.type === "focusin";
+      cancelAnimationFrame(raf);
+      if (focusing) {
+        return restoreFocusIn(portalNode);
+      }
+      raf = requestAnimationFrame(() => {
+        disableFocusIn(portalNode, true);
+      });
+    };
+    portalNode.addEventListener("focusin", onFocus, true);
+    portalNode.addEventListener("focusout", onFocus, true);
+    return () => {
+      cancelAnimationFrame(raf);
+      portalNode.removeEventListener("focusin", onFocus, true);
+      portalNode.removeEventListener("focusout", onFocus, true);
+    };
+  }, [portalNode, preserveTabOrder]);
+  props = useWrapElement(
+    props,
+    (element) => {
+      element = // While the portal node is not in the DOM, we need to pass the
+      // current context to the portal context, otherwise it's going to
+      // reset to the body element on nested portals.
+      /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalNode || context, children: element });
+      if (!portal)
+        return element;
+      if (!portalNode) {
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: refProp,
+            id: props.id,
+            style: { position: "fixed" },
+            hidden: true
+          }
+        );
+      }
+      element = /* @__PURE__ */ jsxs(Fragment, { children: [
+        preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
+          FocusTrap,
+          {
+            ref: innerBeforeRef,
+            className: "__focus-trap-inner-before",
+            onFocus: (event) => {
+              if (isFocusEventOutside(event, portalNode)) {
+                queueFocus(getNextTabbable());
+              } else {
+                queueFocus(outerBeforeRef.current);
+              }
+            }
+          }
+        ),
+        element,
+        preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
+          FocusTrap,
+          {
+            ref: innerAfterRef,
+            className: "__focus-trap-inner-after",
+            onFocus: (event) => {
+              if (isFocusEventOutside(event, portalNode)) {
+                queueFocus(getPreviousTabbable());
+              } else {
+                queueFocus(outerAfterRef.current);
+              }
+            }
+          }
+        )
+      ] });
+      if (portalNode) {
+        element = createPortal(element, portalNode);
+      }
+      let preserveTabOrderElement = /* @__PURE__ */ jsxs(Fragment, { children: [
+        preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
+          FocusTrap,
+          {
+            ref: outerBeforeRef,
+            className: "__focus-trap-outer-before",
+            onFocus: (event) => {
+              const fromOuter = event.relatedTarget === outerAfterRef.current;
+              if (!fromOuter && isFocusEventOutside(event, portalNode)) {
+                queueFocus(innerBeforeRef.current);
+              } else {
+                queueFocus(getPreviousTabbable());
+              }
+            }
+          }
+        ),
+        preserveTabOrder && // We're using position: fixed here so that the browser doesn't
+        // add margin to the element when setting gap on a parent element.
+        /* @__PURE__ */ jsx("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }),
+        preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
+          FocusTrap,
+          {
+            ref: outerAfterRef,
+            className: "__focus-trap-outer-after",
+            onFocus: (event) => {
+              if (isFocusEventOutside(event, portalNode)) {
+                queueFocus(innerAfterRef.current);
+              } else {
+                const nextTabbable = getNextTabbable();
+                if (nextTabbable === innerBeforeRef.current) {
+                  requestAnimationFrame(() => {
+                    var _a2;
+                    return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus();
+                  });
+                  return;
+                }
+                queueFocus(nextTabbable);
+              }
+            }
+          }
+        )
+      ] });
+      if (anchorPortalNode && preserveTabOrder) {
+        preserveTabOrderElement = createPortal(
+          preserveTabOrderElement,
+          anchorPortalNode
+        );
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        preserveTabOrderElement,
+        element
+      ] });
+    },
+    [portalNode, context, portal, props.id, preserveTabOrder, anchorPortalNode]
+  );
+  props = __spreadProps(__spreadValues({}, props), {
+    ref: refProp
+  });
+  return props;
+});
+var Portal = forwardRef(function Portal2(props) {
+  const htmlProps = usePortal(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  usePortal,
+  Portal
+};

package/esm/__chunks/CWDOOAGR.js

@@ -0,0 +1,45 @@
+"use client";
+import {
+  GroupLabelContext
+} from "./3X3MDQGM.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useWrapElement
+} from "./6O5OEQGF.js";
+import {
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/group/group.tsx
+import { useState } from "react";
+import { removeUndefinedValues } from "@ariakit/core/utils/misc";
+import { jsx } from "react/jsx-runtime";
+var TagName = "div";
+var useGroup = createHook(
+  function useGroup2(props) {
+    const [labelId, setLabelId] = useState();
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(GroupLabelContext.Provider, { value: setLabelId, children: element }),
+      []
+    );
+    props = __spreadValues({
+      role: "group",
+      "aria-labelledby": labelId
+    }, props);
+    return removeUndefinedValues(props);
+  }
+);
+var Group = forwardRef(function Group2(props) {
+  const htmlProps = useGroup(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useGroup,
+  Group
+};