@ariakit/react-core 0.1.8 → 0.2.0

package/esm/__chunks/{USCWE5QL.js → 2CA5JWPW.js}

@@ -62,10 +62,10 @@ var usePortal = createHook(
     const refProp = useForkRef(ref, props.ref);
     const context = useContext(PortalContext);
     const [portalNode, setPortalNode] = useState(null);
-    const beforeOutsideRef = useRef(null);
-    const beforeInsideRef = useRef(null);
-    const afterInsideRef = useRef(null);
-    const afterOutsideRef = useRef(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) {
@@ -83,7 +83,7 @@ var usePortal = createHook(
         rootElement.appendChild(portalEl);
       }
       if (!portalEl.id) {
-        portalEl.id = element.id ? `${element.id}-portal` : getRandomId();
+        portalEl.id = element.id ? `portal/${element.id}` : getRandomId();
       }
       setPortalNode(portalEl);
       setRef(portalRef, portalEl);
@@ -142,12 +142,13 @@ var usePortal = createHook(
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
-              ref: beforeInsideRef,
+              ref: innerBeforeRef,
+              className: "__focus-trap-inner-before",
               onFocus: (event) => {
                 if (isFocusEventOutside(event, portalNode)) {
                   queueFocus(getNextTabbable());
                 } else {
-                  queueFocus(beforeOutsideRef.current);
+                  queueFocus(outerBeforeRef.current);
                 }
               }
             }
@@ -156,12 +157,13 @@ var usePortal = createHook(
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
-              ref: afterInsideRef,
+              ref: innerAfterRef,
+              className: "__focus-trap-inner-after",
               onFocus: (event) => {
                 if (isFocusEventOutside(event, portalNode)) {
                   queueFocus(getPreviousTabbable());
                 } else {
-                  queueFocus(afterOutsideRef.current);
+                  queueFocus(outerAfterRef.current);
                 }
               }
             }
@@ -174,10 +176,12 @@ var usePortal = createHook(
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
-              ref: beforeOutsideRef,
+              ref: outerBeforeRef,
+              className: "__focus-trap-outer-before",
               onFocus: (event) => {
-                if (isFocusEventOutside(event, portalNode)) {
-                  queueFocus(beforeInsideRef.current);
+                const fromOuter = event.relatedTarget === outerAfterRef.current;
+                if (!fromOuter && isFocusEventOutside(event, portalNode)) {
+                  queueFocus(innerBeforeRef.current);
                 } else {
                   queueFocus(getPreviousTabbable());
                 }
@@ -191,12 +195,21 @@ var usePortal = createHook(
           preserveTabOrder && portalNode && /* @__PURE__ */ jsx(
             FocusTrap,
             {
-              ref: afterOutsideRef,
+              ref: outerAfterRef,
+              className: "__focus-trap-outer-after",
               onFocus: (event) => {
                 if (isFocusEventOutside(event, portalNode)) {
-                  queueFocus(afterInsideRef.current);
+                  queueFocus(innerAfterRef.current);
                 } else {
-                  queueFocus(getNextTabbable());
+                  const nextTabbable = getNextTabbable();
+                  if (nextTabbable === innerBeforeRef.current) {
+                    requestAnimationFrame(() => {
+                      var _a2;
+                      return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus();
+                    });
+                    return;
+                  }
+                  queueFocus(nextTabbable);
                 }
               }
             }

package/esm/__chunks/5PIH3SMS.js

@@ -0,0 +1,35 @@
+import {
+  useDialogStoreOptions,
+  useDialogStoreProps
+} from "./OBNQHP6V.js";
+import {
+  useStore,
+  useStoreProps
+} from "./AV5WE37O.js";
+import {
+  __spreadValues
+} from "./4BKCJXBM.js";
+
+// src/popover/popover-store.ts
+import * as Core from "@ariakit/core/popover/popover-store";
+function usePopoverStoreOptions(props) {
+  return useDialogStoreOptions(props);
+}
+function usePopoverStoreProps(store, props) {
+  store = useDialogStoreProps(store, props);
+  useStoreProps(store, props, "placement");
+  return store;
+}
+function usePopoverStore(props = {}) {
+  const options = usePopoverStoreOptions(props);
+  const store = useStore(
+    () => Core.createPopoverStore(__spreadValues(__spreadValues({}, props), options))
+  );
+  return usePopoverStoreProps(store, props);
+}
+
+export {
+  usePopoverStoreOptions,
+  usePopoverStoreProps,
+  usePopoverStore
+};

package/esm/__chunks/{PZK3B6LX.js → 776K5FXB.js}

@@ -6,7 +6,7 @@ import {
 } from "./EEVSGAZW.js";
 import {
   useComposite
-} from "./OY5YT7OV.js";
+} from "./RTOWJJVI.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{DQSQP4IL.js → GDDVBILZ.js}

@@ -7,7 +7,7 @@ import {
 } from "./KSVEVAMH.js";
 import {
   useComposite
-} from "./OY5YT7OV.js";
+} from "./RTOWJJVI.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{CXDKC5CW.js → HJWYYQGA.js}

@@ -5,7 +5,7 @@ import {
 } from "./X7FKJQME.js";
 import {
   usePopover
-} from "./JJHXFKMC.js";
+} from "./MLEIJKSM.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{3FKA4P4C.js → K5R24MFH.js}

@@ -1,7 +1,7 @@
 import {
   usePopoverStoreOptions,
   usePopoverStoreProps
-} from "./SHGWT5HV.js";
+} from "./5PIH3SMS.js";
 import {
   useStore
 } from "./AV5WE37O.js";

package/esm/__chunks/MLEIJKSM.js

@@ -0,0 +1,363 @@
+import {
+  useDialog
+} from "./NAG6UD2X.js";
+import {
+  PopoverContext
+} from "./6GS36SYX.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./5ETIGB6O.js";
+import {
+  useEvent,
+  usePortalRef,
+  useSafeLayoutEffect,
+  useWrapElement
+} from "./ASYR66PQ.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4BKCJXBM.js";
+
+// src/popover/popover.tsx
+import { useState } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+import {
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
+import { jsx } from "react/jsx-runtime";
+function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
+  if (typeof DOMRect === "function") {
+    return new DOMRect(x, y, width, height);
+  }
+  const rect = {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x
+  };
+  return __spreadProps(__spreadValues({}, rect), { toJSON: () => rect });
+}
+function getDOMRect(anchorRect) {
+  if (!anchorRect)
+    return createDOMRect();
+  const { x, y, width, height } = anchorRect;
+  return createDOMRect(x, y, width, height);
+}
+function getAnchorElement(anchorElement, getAnchorRect) {
+  const contextElement = anchorElement || void 0;
+  return {
+    contextElement,
+    getBoundingClientRect: () => {
+      const anchor = anchorElement;
+      const anchorRect = getAnchorRect == null ? void 0 : getAnchorRect(anchor);
+      if (anchorRect || !anchor) {
+        return getDOMRect(anchorRect);
+      }
+      return anchor.getBoundingClientRect();
+    }
+  };
+}
+function isValidPlacement(flip2) {
+  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(flip2);
+}
+function roundByDPR(value) {
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}
+function getOffsetMiddleware(arrowElement, props) {
+  return offset(({ placement }) => {
+    var _a;
+    const arrowOffset = ((arrowElement == null ? void 0 : arrowElement.clientHeight) || 0) / 2;
+    const finalGutter = typeof props.gutter === "number" ? props.gutter + arrowOffset : (_a = props.gutter) != null ? _a : arrowOffset;
+    const hasAlignment = !!placement.split("-")[1];
+    return {
+      crossAxis: !hasAlignment ? props.shift : void 0,
+      mainAxis: finalGutter,
+      alignmentAxis: props.shift
+    };
+  });
+}
+function getFlipMiddleware(props) {
+  if (props.flip === false)
+    return;
+  const fallbackPlacements = typeof props.flip === "string" ? props.flip.split(" ") : void 0;
+  invariant(
+    !fallbackPlacements || fallbackPlacements.every(isValidPlacement),
+    process.env.NODE_ENV !== "production" && "`flip` expects a spaced-delimited list of placements"
+  );
+  return flip({
+    padding: props.overflowPadding,
+    fallbackPlacements
+  });
+}
+function getShiftMiddleware(props) {
+  if (!props.slide && !props.overlap)
+    return;
+  return shift({
+    mainAxis: props.slide,
+    crossAxis: props.overlap,
+    padding: props.overflowPadding
+  });
+}
+function getSizeMiddleware(props) {
+  return size({
+    padding: props.overflowPadding,
+    apply({ elements, availableWidth, availableHeight, rects }) {
+      const wrapper = elements.floating;
+      const referenceWidth = Math.round(rects.reference.width);
+      availableWidth = Math.floor(availableWidth);
+      availableHeight = Math.floor(availableHeight);
+      wrapper.style.setProperty(
+        "--popover-anchor-width",
+        `${referenceWidth}px`
+      );
+      wrapper.style.setProperty(
+        "--popover-available-width",
+        `${availableWidth}px`
+      );
+      wrapper.style.setProperty(
+        "--popover-available-height",
+        `${availableHeight}px`
+      );
+      if (props.sameWidth) {
+        wrapper.style.width = `${referenceWidth}px`;
+      }
+      if (props.fitViewport) {
+        wrapper.style.maxWidth = `${availableWidth}px`;
+        wrapper.style.maxHeight = `${availableHeight}px`;
+      }
+    }
+  });
+}
+function getArrowMiddleware(arrowElement, props) {
+  if (!arrowElement)
+    return;
+  return arrow({
+    element: arrowElement,
+    padding: props.arrowPadding
+  });
+}
+var usePopover = createHook(
+  (_a) => {
+    var _b = _a, {
+      store,
+      modal = false,
+      portal = !!modal,
+      preserveTabOrder = true,
+      autoFocusOnShow = true,
+      wrapperProps,
+      fixed = false,
+      flip: flip2 = true,
+      shift: shift2 = 0,
+      slide = true,
+      overlap = false,
+      sameWidth = false,
+      fitViewport = false,
+      gutter,
+      arrowPadding = 4,
+      overflowPadding = 8,
+      getAnchorRect,
+      updatePosition
+    } = _b, props = __objRest(_b, [
+      "store",
+      "modal",
+      "portal",
+      "preserveTabOrder",
+      "autoFocusOnShow",
+      "wrapperProps",
+      "fixed",
+      "flip",
+      "shift",
+      "slide",
+      "overlap",
+      "sameWidth",
+      "fitViewport",
+      "gutter",
+      "arrowPadding",
+      "overflowPadding",
+      "getAnchorRect",
+      "updatePosition"
+    ]);
+    const arrowElement = store.useState("arrowElement");
+    const anchorElement = store.useState("anchorElement");
+    const popoverElement = store.useState("popoverElement");
+    const contentElement = store.useState("contentElement");
+    const placement = store.useState("placement");
+    const mounted = store.useState("mounted");
+    const rendered = store.useState("rendered");
+    const [positioned, setPositioned] = useState(false);
+    const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
+    const getAnchorRectProp = useEvent(getAnchorRect);
+    const hasCustomUpdatePosition = !!updatePosition;
+    const updatePositionProp = useEvent(updatePosition);
+    useSafeLayoutEffect(() => {
+      if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
+        return;
+      popoverElement.style.setProperty(
+        "--popover-overflow-padding",
+        `${overflowPadding}px`
+      );
+      const anchor = getAnchorElement(anchorElement, getAnchorRectProp);
+      const update = async () => {
+        if (!mounted)
+          return;
+        const middleware = [
+          getOffsetMiddleware(arrowElement, { gutter, shift: shift2 }),
+          getFlipMiddleware({ flip: flip2, overflowPadding }),
+          getShiftMiddleware({ slide, overlap, overflowPadding }),
+          getArrowMiddleware(arrowElement, { arrowPadding }),
+          getSizeMiddleware({
+            sameWidth,
+            fitViewport,
+            overflowPadding
+          })
+        ];
+        const pos = await computePosition(anchor, popoverElement, {
+          placement,
+          strategy: fixed ? "fixed" : "absolute",
+          middleware
+        });
+        store.setState("currentPlacement", pos.placement);
+        setPositioned(true);
+        const x = roundByDPR(pos.x);
+        const y = roundByDPR(pos.y);
+        Object.assign(popoverElement.style, {
+          top: "0",
+          left: "0",
+          transform: `translate3d(${x}px,${y}px,0)`
+        });
+        if (arrowElement && pos.middlewareData.arrow) {
+          const { x: arrowX, y: arrowY } = pos.middlewareData.arrow;
+          const dir = pos.placement.split("-")[0];
+          Object.assign(arrowElement.style, {
+            left: arrowX != null ? `${arrowX}px` : "",
+            top: arrowY != null ? `${arrowY}px` : "",
+            [dir]: "100%"
+          });
+        }
+      };
+      return autoUpdate(
+        anchor,
+        popoverElement,
+        () => {
+          if (hasCustomUpdatePosition) {
+            updatePositionProp({ updatePosition: update });
+          } else {
+            update();
+          }
+        },
+        {
+          // JSDOM doesn't support ResizeObserver
+          elementResize: typeof ResizeObserver === "function"
+        }
+      );
+    }, [
+      store,
+      rendered,
+      popoverElement,
+      arrowElement,
+      anchorElement,
+      popoverElement,
+      placement,
+      mounted,
+      domReady,
+      fixed,
+      flip2,
+      shift2,
+      slide,
+      overlap,
+      sameWidth,
+      fitViewport,
+      gutter,
+      arrowPadding,
+      overflowPadding,
+      getAnchorRectProp,
+      hasCustomUpdatePosition,
+      updatePositionProp
+    ]);
+    useSafeLayoutEffect(() => {
+      if (!mounted)
+        return;
+      if (!domReady)
+        return;
+      if (!(popoverElement == null ? void 0 : popoverElement.isConnected))
+        return;
+      if (!(contentElement == null ? void 0 : contentElement.isConnected))
+        return;
+      const applyZIndex = () => {
+        popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex;
+      };
+      applyZIndex();
+      let raf = requestAnimationFrame(() => {
+        raf = requestAnimationFrame(applyZIndex);
+      });
+      return () => cancelAnimationFrame(raf);
+    }, [mounted, domReady, popoverElement, contentElement]);
+    const position = fixed ? "fixed" : "absolute";
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          role: "presentation"
+        }, wrapperProps), {
+          style: __spreadValues({
+            // https://floating-ui.com/docs/computeposition#initial-layout
+            position,
+            top: 0,
+            left: 0,
+            width: "max-content"
+          }, wrapperProps == null ? void 0 : wrapperProps.style),
+          ref: store.setPopoverElement,
+          children: element
+        })
+      ),
+      [store, position, wrapperProps]
+    );
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(PopoverContext.Provider, { value: store, children: element }),
+      [store]
+    );
+    props = __spreadProps(__spreadValues({}, props), {
+      style: __spreadValues({
+        position: "relative"
+      }, props.style)
+    });
+    props = useDialog(__spreadProps(__spreadValues({
+      store,
+      modal,
+      preserveTabOrder,
+      portal,
+      autoFocusOnShow: positioned && autoFocusOnShow
+    }, props), {
+      portalRef
+    }));
+    return props;
+  }
+);
+var Popover = createComponent((props) => {
+  const htmlProps = usePopover(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Popover.displayName = "Popover";
+}
+
+export {
+  usePopover,
+  Popover
+};

package/esm/__chunks/{ZFMAA4DD.js → MR75RQGW.js}

@@ -1,6 +1,9 @@
 import {
   markAncestor
 } from "./BH4YAZB2.js";
+import {
+  Role
+} from "./XIACQCPS.js";
 import {
   useDisclosureContent
 } from "./6AJCHLAV.js";
@@ -14,15 +17,14 @@ import {
 } from "./4BKCJXBM.js";
 
 // src/dialog/dialog-backdrop.tsx
-import { useMemo, useRef } from "react";
+import { cloneElement, isValidElement, useMemo, useRef } from "react";
 import { noop } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 function DialogBackdrop({
   store,
   backdrop,
   backdropProps,
-  hidden,
-  children
+  hidden
 }) {
   const ref = useRef(null);
   store = useMemo(
@@ -52,11 +54,15 @@ function DialogBackdrop({
       return;
     return markAncestor(backdrop2, id);
   }, [contentElement]);
+  backdropProps = isValidElement(backdrop) ? __spreadValues(__spreadValues({
+    ref: "ref" in backdrop ? backdrop.ref : void 0
+  }, backdrop.props), backdropProps) : backdropProps;
   const props = useDisclosureContent(__spreadProps(__spreadValues({
     store,
     id: void 0,
     role: "presentation",
-    hidden
+    hidden,
+    "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || ""
   }, backdropProps), {
     ref: useForkRef(backdropProps == null ? void 0 : backdropProps.ref, ref),
     style: __spreadValues({
@@ -67,8 +73,13 @@ function DialogBackdrop({
       left: 0
     }, backdropProps == null ? void 0 : backdropProps.style)
   }));
+  if (!backdrop)
+    return null;
+  if (isValidElement(backdrop)) {
+    return /* @__PURE__ */ jsx(Role, __spreadProps(__spreadValues({}, props), { children: (props2) => cloneElement(backdrop, props2) }));
+  }
   const Component = typeof backdrop !== "boolean" ? backdrop || "div" : "div";
-  return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, props), { "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "", children }));
+  return /* @__PURE__ */ jsx(Role, __spreadProps(__spreadValues({}, props), { as: Component }));
 }
 
 export {

package/esm/__chunks/{EMZ4NQG4.js → NAG6UD2X.js}

@@ -1,6 +1,6 @@
 import {
   DialogBackdrop
-} from "./ZFMAA4DD.js";
+} from "./MR75RQGW.js";
 import {
   disableTreeOutside
 } from "./4H6H5RRM.js";
@@ -28,20 +28,20 @@ import {
 import {
   HeadingLevel
 } from "./6OMX4H3W.js";
+import {
+  usePortal
+} from "./2CA5JWPW.js";
 import {
   DialogContext,
   DialogDescriptionContext,
   DialogHeadingContext
 } from "./LNHZLQEK.js";
-import {
-  useFocusable
-} from "./AGWM73EZ.js";
-import {
-  usePortal
-} from "./USCWE5QL.js";
 import {
   useDisclosureContent
 } from "./6AJCHLAV.js";
+import {
+  useFocusable
+} from "./AGWM73EZ.js";
 import {
   createComponent,
   createElement,
@@ -82,7 +82,7 @@ import {
 } from "@ariakit/core/utils/focus";
 import { chain } from "@ariakit/core/utils/misc";
 import { isSafari } from "@ariakit/core/utils/platform";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var isSafariBrowser = isSafari();
 function isAlreadyFocusingAnotherElement(dialog) {
   const activeElement = getActiveElement();
@@ -152,7 +152,11 @@ var useDialog = createHook(
     const open = store.useState("open");
     const mounted = store.useState("mounted");
     const contentElement = store.useState("contentElement");
-    usePreventBodyScroll(store, mounted && preventBodyScroll);
+    const hiddenProp = props.hidden;
+    usePreventBodyScroll(
+      store,
+      (mounted || hiddenProp === false) && preventBodyScroll
+    );
     useHideOnInteractOutside(store, hideOnInteractOutside);
     const { wrapElement, nestedDialogs } = useNestedDialogs(store);
     props = useWrapElement(props, wrapElement, [wrapElement]);
@@ -392,21 +396,22 @@ var useDialog = createHook(
       (element) => /* @__PURE__ */ jsx(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
       [modal]
     );
-    const hiddenProp = props.hidden;
     props = useWrapElement(
       props,
       (element) => {
         if (backdrop) {
-          return /* @__PURE__ */ jsx(
-            DialogBackdrop,
-            {
-              store,
-              backdrop,
-              backdropProps,
-              hidden: hiddenProp,
-              children: element
-            }
-          );
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            backdrop && /* @__PURE__ */ jsx(
+              DialogBackdrop,
+              {
+                store,
+                backdrop,
+                backdropProps,
+                hidden: hiddenProp
+              }
+            ),
+            element
+          ] });
         }
         return element;
       },