@ariakit/react-core 0.3.14 → 0.4.0

package/esm/__chunks/{7QTPYGNZ.js → 6WQW7ZIA.js}

@@ -9,15 +9,15 @@ import {
 import {
   CompositeContextProvider,
   useCompositeProviderContext
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   useFocusable
-} from "./KK7H3W2B.js";
+} from "./VA234QKF.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -43,6 +43,7 @@ import {
 import { focusIntoView, hasFocus } from "@ariakit/core/utils/focus";
 import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 function isGrid(items) {
   return items.some((item) => !!item.rowId);
 }
@@ -109,7 +110,7 @@ function useScheduleFocus(store) {
   return schedule;
 }
 var useComposite = createHook(
-  (_a) => {
+  function useComposite2(_a) {
     var _b = _a, {
       store,
       composite = true,
@@ -350,13 +351,10 @@ var useComposite = createHook(
     return props;
   }
 );
-var Composite = createComponent((props) => {
+var Composite = forwardRef(function Composite2(props) {
   const htmlProps = useComposite(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Composite.displayName = "Composite";
-}
 
 export {
   useComposite,

package/esm/__chunks/7HFLDZTS.js

@@ -0,0 +1,51 @@
+"use client";
+import {
+  HeadingContext
+} from "./XPF5GU3Q.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useMergeRefs,
+  useTagName
+} from "./6O5OEQGF.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/heading/heading.tsx
+import { useContext, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var TagName = "h1";
+var useHeading = createHook(
+  function useHeading2(props) {
+    const ref = useRef(null);
+    const level = useContext(HeadingContext) || 1;
+    const Element = `h${level}`;
+    const tagName = useTagName(ref, Element);
+    const isNativeHeading = useMemo(
+      () => !!tagName && /^h\d$/.test(tagName),
+      [tagName]
+    );
+    props = __spreadProps(__spreadValues({
+      render: /* @__PURE__ */ jsx(Element, {}),
+      role: !isNativeHeading ? "heading" : void 0,
+      "aria-level": !isNativeHeading ? level : void 0
+    }, props), {
+      ref: useMergeRefs(ref, props.ref)
+    });
+    return props;
+  }
+);
+var Heading = forwardRef(function Heading2(props) {
+  const htmlProps = useHeading(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useHeading,
+  Heading
+};

package/esm/__chunks/{UH3I23HL.js → 7YKLTEOQ.js}

@@ -1,12 +1,12 @@
 "use client";
 import {
   useCollectionContext
-} from "./4UUKJZ4V.js";
+} from "./MADQZZRL.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useId,
   useMergeRefs
@@ -19,9 +19,10 @@ import {
 
 // src/collection/collection-item.ts
 import { useEffect, useRef } from "react";
-import { identity } from "@ariakit/core/utils/misc";
+import { identity, removeUndefinedValues } from "@ariakit/core/utils/misc";
+var TagName = "div";
 var useCollectionItem = createHook(
-  (_a) => {
+  function useCollectionItem2(_a) {
     var _b = _a, {
       store,
       shouldRegisterItem = true,
@@ -52,18 +53,13 @@ var useCollectionItem = createHook(
     props = __spreadProps(__spreadValues({}, props), {
       ref: useMergeRefs(ref, props.ref)
     });
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var CollectionItem = createComponent(
-  (props) => {
-    const htmlProps = useCollectionItem(props);
-    return createElement("div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  CollectionItem.displayName = "CollectionItem";
-}
+var CollectionItem = forwardRef(function CollectionItem2(props) {
+  const htmlProps = useCollectionItem(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   useCollectionItem,

package/esm/__chunks/A3BKKI3B.js

@@ -0,0 +1,44 @@
+"use client";
+import {
+  useSeparator
+} from "./SDQLXKEV.js";
+import {
+  useCompositeContext
+} from "./3D6OCOHF.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/composite/composite-separator.ts
+import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "hr";
+var useCompositeSeparator = createHook(function useCompositeSeparator2(_a) {
+  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+  const context = useCompositeContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "CompositeSeparator must be wrapped in a Composite component."
+  );
+  const orientation = store.useState(
+    (state) => state.orientation === "horizontal" ? "vertical" : "horizontal"
+  );
+  props = useSeparator(__spreadProps(__spreadValues({}, props), { orientation }));
+  return props;
+});
+var CompositeSeparator = forwardRef(function CompositeSeparator2(props) {
+  const htmlProps = useCompositeSeparator(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useCompositeSeparator,
+  CompositeSeparator
+};

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/{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/{LWHPHW7Q.js → CJ6B7ETA.js}

@@ -4,15 +4,14 @@ import {
 } from "./TL67WVI6.js";
 import {
   Role
-} from "./FSFPRQFR.js";
+} from "./CBTO7DFZ.js";
 import {
   useDisclosureContent
-} from "./CLE7NTOY.js";
+} from "./SOGTNTQC.js";
 import {
   useDisclosureStore
-} from "./SFCBA2JZ.js";
+} from "./HZJ2XALY.js";
 import {
-  useMergeRefs,
   useSafeLayoutEffect
 } from "./6O5OEQGF.js";
 import {
@@ -26,7 +25,6 @@ import { jsx } from "react/jsx-runtime";
 function DialogBackdrop({
   store,
   backdrop,
-  backdropProps,
   alwaysVisible,
   hidden
 }) {
@@ -51,24 +49,21 @@ function DialogBackdrop({
       return;
     return markAncestor(backdrop2, id);
   }, [contentElement]);
-  if (hidden != null) {
-    backdropProps = __spreadProps(__spreadValues({}, backdropProps), { hidden });
-  }
-  const props = useDisclosureContent(__spreadProps(__spreadValues({
+  const props = useDisclosureContent({
+    ref,
     store: disclosure,
     role: "presentation",
     "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "",
-    alwaysVisible
-  }, backdropProps), {
-    ref: useMergeRefs(backdropProps == null ? void 0 : backdropProps.ref, ref),
-    style: __spreadValues({
+    alwaysVisible,
+    hidden: hidden != null ? hidden : void 0,
+    style: {
       position: "fixed",
       top: 0,
       right: 0,
       bottom: 0,
       left: 0
-    }, backdropProps == null ? void 0 : backdropProps.style)
-  }));
+    }
+  });
   if (!backdrop)
     return null;
   if (isValidElement(backdrop)) {

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/{FGMA3QUS.js → CQJLVEBA.js}

@@ -1,23 +1,24 @@
 "use client";
 import {
   usePopoverDismiss
-} from "./F6PRXTDU.js";
+} from "./FY6FFKYI.js";
 import {
   useHovercardScopedContext
-} from "./TI7CMBHW.js";
+} from "./TWDHCE7Y.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/hovercard/hovercard-dismiss.ts
+var TagName = "button";
 var useHovercardDismiss = createHook(
-  (_a) => {
+  function useHovercardDismiss2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useHovercardScopedContext();
     store = store || context;
@@ -25,15 +26,10 @@ var useHovercardDismiss = createHook(
     return props;
   }
 );
-var HovercardDismiss = createComponent(
-  (props) => {
-    const htmlProps = useHovercardDismiss(props);
-    return createElement("button", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  HovercardDismiss.displayName = "HovercardDismiss";
-}
+var HovercardDismiss = forwardRef(function HovercardDismiss2(props) {
+  const htmlProps = useHovercardDismiss(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   useHovercardDismiss,