@zag-js/popover 0.1.4 → 0.1.7

package/dist/index.mjs

@@ -18,115 +18,6 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
-// ../../../node_modules/compute-scroll-into-view/dist/index.module.js
-function t(t3) {
-  return typeof t3 == "object" && t3 != null && t3.nodeType === 1;
-}
-function e(t3, e2) {
-  return (!e2 || t3 !== "hidden") && t3 !== "visible" && t3 !== "clip";
-}
-function n(t3, n2) {
-  if (t3.clientHeight < t3.scrollHeight || t3.clientWidth < t3.scrollWidth) {
-    var r2 = getComputedStyle(t3, null);
-    return e(r2.overflowY, n2) || e(r2.overflowX, n2) || function(t4) {
-      var e2 = function(t5) {
-        if (!t5.ownerDocument || !t5.ownerDocument.defaultView)
-          return null;
-        try {
-          return t5.ownerDocument.defaultView.frameElement;
-        } catch (t6) {
-          return null;
-        }
-      }(t4);
-      return !!e2 && (e2.clientHeight < t4.scrollHeight || e2.clientWidth < t4.scrollWidth);
-    }(t3);
-  }
-  return false;
-}
-function r(t3, e2, n2, r2, i, o, l, d) {
-  return o < t3 && l > e2 || o > t3 && l < e2 ? 0 : o <= t3 && d <= n2 || l >= e2 && d >= n2 ? o - t3 - r2 : l > e2 && d < n2 || o < t3 && d > n2 ? l - e2 + i : 0;
-}
-function index_module_default(e2, i) {
-  var o = window, l = i.scrollMode, d = i.block, u = i.inline, h = i.boundary, a = i.skipOverflowHiddenElements, c = typeof h == "function" ? h : function(t3) {
-    return t3 !== h;
-  };
-  if (!t(e2))
-    throw new TypeError("Invalid target");
-  for (var f = document.scrollingElement || document.documentElement, s = [], p = e2; t(p) && c(p); ) {
-    if ((p = p.parentElement) === f) {
-      s.push(p);
-      break;
-    }
-    p != null && p === document.body && n(p) && !n(document.documentElement) || p != null && n(p, a) && s.push(p);
-  }
-  for (var m = o.visualViewport ? o.visualViewport.width : innerWidth, g = o.visualViewport ? o.visualViewport.height : innerHeight, w = window.scrollX || pageXOffset, v = window.scrollY || pageYOffset, W = e2.getBoundingClientRect(), b = W.height, H = W.width, y = W.top, E = W.right, M = W.bottom, V = W.left, x = d === "start" || d === "nearest" ? y : d === "end" ? M : y + b / 2, I = u === "center" ? V + H / 2 : u === "end" ? E : V, C = [], T = 0; T < s.length; T++) {
-    var k = s[T], B = k.getBoundingClientRect(), D = B.height, O = B.width, R = B.top, X = B.right, Y = B.bottom, L = B.left;
-    if (l === "if-needed" && y >= 0 && V >= 0 && M <= g && E <= m && y >= R && M <= Y && V >= L && E <= X)
-      return C;
-    var S = getComputedStyle(k), j = parseInt(S.borderLeftWidth, 10), q = parseInt(S.borderTopWidth, 10), z = parseInt(S.borderRightWidth, 10), A = parseInt(S.borderBottomWidth, 10), F = 0, G = 0, J = "offsetWidth" in k ? k.offsetWidth - k.clientWidth - j - z : 0, K = "offsetHeight" in k ? k.offsetHeight - k.clientHeight - q - A : 0;
-    if (f === k)
-      F = d === "start" ? x : d === "end" ? x - g : d === "nearest" ? r(v, v + g, g, q, A, v + x, v + x + b, b) : x - g / 2, G = u === "start" ? I : u === "center" ? I - m / 2 : u === "end" ? I - m : r(w, w + m, m, j, z, w + I, w + I + H, H), F = Math.max(0, F + v), G = Math.max(0, G + w);
-    else {
-      F = d === "start" ? x - R - q : d === "end" ? x - Y + A + K : d === "nearest" ? r(R, Y, D, q, A + K, x, x + b, b) : x - (R + D / 2) + K / 2, G = u === "start" ? I - L - j : u === "center" ? I - (L + O / 2) + J / 2 : u === "end" ? I - X + z + J : r(L, X, O, j, z + J, I, I + H, H);
-      var N = k.scrollLeft, P = k.scrollTop;
-      x += P - (F = Math.max(0, Math.min(P + F, k.scrollHeight - D + K))), I += N - (G = Math.max(0, Math.min(N + G, k.scrollWidth - O + J)));
-    }
-    C.push({ el: k, top: F, left: G });
-  }
-  return C;
-}
-
-// ../../utilities/dom/node_modules/scroll-into-view-if-needed/es/index.js
-function isOptionsObject(options) {
-  return options === Object(options) && Object.keys(options).length !== 0;
-}
-function defaultBehavior(actions, behavior) {
-  if (behavior === void 0) {
-    behavior = "auto";
-  }
-  var canSmoothScroll = "scrollBehavior" in document.body.style;
-  actions.forEach(function(_ref) {
-    var el = _ref.el, top = _ref.top, left = _ref.left;
-    if (el.scroll && canSmoothScroll) {
-      el.scroll({
-        top,
-        left,
-        behavior
-      });
-    } else {
-      el.scrollTop = top;
-      el.scrollLeft = left;
-    }
-  });
-}
-function getOptions(options) {
-  if (options === false) {
-    return {
-      block: "end",
-      inline: "nearest"
-    };
-  }
-  if (isOptionsObject(options)) {
-    return options;
-  }
-  return {
-    block: "start",
-    inline: "nearest"
-  };
-}
-function scrollIntoView(target, options) {
-  var isTargetAttached = target.isConnected || target.ownerDocument.documentElement.contains(target);
-  if (isOptionsObject(options) && typeof options.behavior === "function") {
-    return options.behavior(isTargetAttached ? index_module_default(target, options) : []);
-  }
-  if (!isTargetAttached) {
-    return;
-  }
-  var computeOptions = getOptions(options);
-  return defaultBehavior(index_module_default(target, computeOptions), computeOptions.behavior);
-}
-var es_default = scrollIntoView;
-
 // ../../utilities/dom/dist/index.mjs
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
@@ -168,16 +59,17 @@ function raf(fn) {
     globalThis.cancelAnimationFrame(id);
   };
 }
+var isDom = () => typeof window !== "undefined";
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isTouchDevice = isDom() && !!navigator.maxTouchPoints;
+var isLeftClick = (v) => v.button === 0;
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
 var noop = () => {
 };
 var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-var platform = (v) => isDom() && v.test(navigator.platform);
-var isDom = () => !!(typeof window !== "undefined");
-var isMac = () => platform(/^Mac/);
-var isIPhone = () => platform(/^iPhone/);
-var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
-var isIos = () => isIPhone() || isIPad();
-var isLeftClick = (v) => v.button === 0;
 function getListenerElements() {
   ;
   globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
@@ -188,7 +80,7 @@ function getListenerCache() {
   globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
   return globalThis.__listenerCache__;
 }
-function globalEventBus(node, type, handler, options) {
+function addGlobalEventListener(node, type, handler, options) {
   var _a;
   if (!node)
     return noop;
@@ -240,12 +132,10 @@ function globalEventBus(node, type, handler, options) {
     }
   };
 }
-var t2 = (v) => Object.prototype.toString.call(v).slice(8, -1);
-var isRef = (v) => t2(v) === "Object" && "current" in v;
-var runIfFn = (fn) => t2(fn) === "Function" ? fn() : fn;
+var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, event, listener, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
-  return globalEventBus(node, event, listener, options);
+  return addGlobalEventListener(node, event, listener, options);
 }
 var changeCount = 0;
 var originalBodyPointerEvents;
@@ -305,21 +195,6 @@ function preventBodyPointerEvents(el, opts = {}) {
     cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
   };
 }
-function getOwnerDocument(el) {
-  var _a;
-  if (isWindow(el))
-    return el.document;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
-}
-function getNodeName(node) {
-  return isWindow(node) ? "" : node ? node.localName || "" : "";
-}
-function getParent(el) {
-  const doc = getOwnerDocument(el);
-  if (getNodeName(el) === "html")
-    return el;
-  return el.assignedSlot || el.parentElement || doc.documentElement;
-}
 function contains(parent, child) {
   if (!parent)
     return false;
@@ -328,124 +203,9 @@ function contains(parent, child) {
 function isHTMLElement(v) {
   return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
 }
-function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
-}
 var isDisabled = (el) => {
   return (el == null ? void 0 : el.getAttribute("disabled")) != null || !!(el == null ? void 0 : el.getAttribute("aria-disabled")) === true;
 };
-function isScrollParent(el) {
-  const { overflow, overflowX, overflowY } = getComputedStyle2(el);
-  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
-}
-function getScrollParent(el) {
-  if (["html", "body", "#document"].includes(getNodeName(el))) {
-    return getOwnerDocument(el).body;
-  }
-  if (isHTMLElement(el) && isScrollParent(el)) {
-    return el;
-  }
-  return getScrollParent(getParent(el));
-}
-var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
-function preventBodyScroll(opts) {
-  var _a;
-  const { document: docProp, disabled = false, allowPinchZoom } = opts != null ? opts : {};
-  const doc = docProp != null ? docProp : document;
-  const win = (_a = doc == null ? void 0 : doc.defaultView) != null ? _a : window;
-  const viewport = isDom() ? win.visualViewport : null;
-  const docEl = doc.documentElement;
-  function preventScrollStandard() {
-    if (docEl.hasAttribute("scroll-lock"))
-      return;
-    const fn = pipe(setStyle(docEl, "paddingRight", `${win.innerWidth - docEl.clientWidth}px`), setStyle(docEl, "overflow", "hidden"), () => docEl.setAttribute("scroll-lock", "true"));
-    return pipe(fn, () => docEl.removeAttribute("scroll-lock"));
-  }
-  function preventScrollMobileSafari() {
-    if (docEl.hasAttribute("scroll-lock"))
-      return;
-    let scrollable;
-    let lastY = 0;
-    let onTouchStart = (e2) => {
-      scrollable = getScrollParent(e2.target);
-      if (scrollable === docEl && scrollable === doc.body) {
-        return;
-      }
-      lastY = e2.changedTouches[0].pageY;
-    };
-    let onTouchMove = (e2) => {
-      if (e2.touches.length === 2 && allowPinchZoom)
-        return;
-      if (!scrollable || scrollable === docEl || scrollable === doc.body) {
-        e2.preventDefault();
-        return;
-      }
-      let y = e2.changedTouches[0].pageY;
-      let scrollTop = scrollable.scrollTop;
-      let bottom = scrollable.scrollHeight - scrollable.clientHeight;
-      if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
-        e2.preventDefault();
-      }
-      lastY = y;
-    };
-    let onTouchEnd = (e2) => {
-      let target = e2.target;
-      if (target instanceof win.HTMLInputElement && !nonTextInputTypes.has(target.type)) {
-        e2.preventDefault();
-        target.style.transform = "translateY(-2000px)";
-        target.focus();
-        win.requestAnimationFrame(() => {
-          target.style.transform = "";
-        });
-      }
-    };
-    let onFocus = (e2) => {
-      let target = e2.target;
-      if (target instanceof win.HTMLInputElement && !nonTextInputTypes.has(target.type)) {
-        target.style.transform = "translateY(-2000px)";
-        win.requestAnimationFrame(() => {
-          target.style.transform = "";
-          if (!viewport)
-            return;
-          if (viewport.height < win.innerHeight) {
-            win.requestAnimationFrame(function() {
-              es_default(target, { scrollMode: "if-needed" });
-            });
-          } else {
-            const onResize = () => {
-              es_default(target, { scrollMode: "if-needed" });
-            };
-            addDomEvent(viewport, "resize", onResize, { once: true });
-          }
-        });
-      }
-    };
-    let onWindowScroll = () => {
-      win.scrollTo(0, 0);
-    };
-    let scrollX = win.scrollX;
-    let scrollY = win.scrollY;
-    let restoreStyles = pipe(setStyle(docEl, "paddingRight", `${win.innerWidth - docEl.clientWidth}px`), setStyle(docEl, "overflow", "hidden"), setStyle(doc.body, "marginTop", `-${scrollY}px`));
-    win.scrollTo(0, 0);
-    let removeEvents = pipe(addDomEvent(doc, "touchstart", onTouchStart, { passive: false, capture: true }), addDomEvent(doc, "touchmove", onTouchMove, { passive: false, capture: true }), addDomEvent(doc, "touchend", onTouchEnd, { passive: false, capture: true }), addDomEvent(doc, "focus", onFocus, true), addDomEvent(win, "scroll", onWindowScroll), () => docEl.setAttribute("scroll-lock", "true"));
-    return () => {
-      restoreStyles();
-      removeEvents();
-      win.scrollTo(scrollX, scrollY);
-      docEl.removeAttribute("scroll-lock");
-    };
-  }
-  if (disabled)
-    return noop;
-  return isIos() ? preventScrollMobileSafari() : preventScrollStandard();
-}
-function setStyle(el, key, value) {
-  let cur = el.style[key];
-  el.style[key] = value;
-  return () => {
-    el.style[key] = cur;
-  };
-}
 function validateBlur(event, opts) {
   var _a;
   const exclude = Array.isArray(opts.exclude) ? opts.exclude : [opts.exclude];
@@ -486,7 +246,8 @@ var getFocusables = (el, includeContainer = false) => {
   if (!el)
     return [];
   let els = Array.from(el.querySelectorAll(focusableSelector));
-  if (includeContainer && isHTMLElement(el)) {
+  const shouldAddContainer = includeContainer == true || includeContainer == "if-empty" && els.length === 0;
+  if (shouldAddContainer && isHTMLElement(el)) {
     els.unshift(el);
   }
   return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
@@ -497,6 +258,8 @@ var isFocusable = (el) => {
   return el == null ? void 0 : el.matches(focusableSelector);
 };
 var getTabbables = (el, includeContainer = false) => {
+  if (!el)
+    return [];
   return getFocusables(el, includeContainer).filter(isTabbable);
 };
 var isTabbable = (el) => {
@@ -570,7 +333,11 @@ import { getPlacementStyles } from "@zag-js/popper";
 
 // ../../types/dist/index.mjs
 function createNormalizer(fn) {
-  return { button: fn, label: fn, input: fn, output: fn, element: fn };
+  return new Proxy({}, {
+    get() {
+      return fn;
+    }
+  });
 }
 var normalizeProp = createNormalizer((v) => v);
 
@@ -593,6 +360,8 @@ function nextIndex(v, idx, opts = {}) {
 function next(v, idx, opts = {}) {
   return v[nextIndex(v, idx, opts)];
 }
+var isDom2 = () => typeof window !== "undefined";
+var isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
 var runIfFn2 = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
@@ -645,15 +414,16 @@ var dom = {
   getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
   getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
   getDocTabbableEls: (ctx) => getTabbables(cast(dom.getDoc(ctx))),
-  getTabbableEls: (ctx) => {
-    const el = dom.getContentEl(ctx);
-    return el ? getTabbables(el) : [];
-  },
+  getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
   getFirstTabbableEl: (ctx) => first(dom.getTabbableEls(ctx)),
   getLastTabbableEl: (ctx) => last(dom.getTabbableEls(ctx)),
   getInitialFocusEl: (ctx) => {
-    var _a;
-    return (_a = runIfFn2(ctx.initialFocusEl)) != null ? _a : dom.getFirstFocusableEl(ctx);
+    let el = runIfFn2(ctx.initialFocusEl);
+    if (!el && ctx.autoFocus)
+      el = dom.getFirstFocusableEl(ctx);
+    if (!el)
+      el = dom.getContentEl(ctx);
+    return el;
   }
 };
 
@@ -661,9 +431,10 @@ var dom = {
 function connect(state, send, normalize = normalizeProp) {
   const isOpen = state.matches("open");
   const pointerdownNode = state.context.pointerdownNode;
+  const currentPlacement = state.context.currentPlacement;
   const popperStyles = getPlacementStyles({
     measured: !!state.context.isPlacementComplete,
-    placement: state.context.currentPlacement
+    placement: currentPlacement
   });
   return {
     portalled: state.context.currentPortalled,
@@ -690,7 +461,7 @@ function connect(state, send, normalize = normalizeProp) {
     triggerProps: normalize.button({
       "data-part": "trigger",
       type: "button",
-      "data-placement": state.context.currentPlacement,
+      "data-placement": currentPlacement,
       id: dom.getTriggerId(state.context),
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
@@ -698,6 +469,11 @@ function connect(state, send, normalize = normalizeProp) {
       "aria-controls": dom.getContentId(state.context),
       onClick() {
         send("TRIGGER_CLICK");
+      },
+      onKeyDown(event) {
+        if (event.key === "Escape") {
+          send("ESCAPE");
+        }
       }
     }),
     positionerProps: normalize.element({
@@ -711,9 +487,10 @@ function connect(state, send, normalize = normalizeProp) {
       tabIndex: -1,
       role: "dialog",
       hidden: !isOpen,
-      "aria-labelledby": state.context.isTitleRendered ? dom.getTitleId(state.context) : void 0,
-      "aria-describedby": state.context.isDescriptionRendered ? dom.getDescriptionId(state.context) : void 0,
-      "data-placement": state.context.currentPlacement,
+      "data-expanded": dataAttr(isOpen),
+      "aria-labelledby": state.context.renderedElements.title ? dom.getTitleId(state.context) : void 0,
+      "aria-describedby": state.context.renderedElements.description ? dom.getDescriptionId(state.context) : void 0,
+      "data-placement": currentPlacement,
       onKeyDown(event) {
         const keyMap = {
           Escape(event2) {
@@ -761,19 +538,17 @@ function connect(state, send, normalize = normalizeProp) {
 }
 
 // src/popover.machine.ts
-import { choose, createMachine, guards, ref } from "@zag-js/core";
-import { getPlacement } from "@zag-js/popper";
 import { ariaHidden } from "@zag-js/aria-hidden";
+import { createMachine, guards, ref } from "@zag-js/core";
+import { getPlacement } from "@zag-js/popper";
+import { preventBodyScroll } from "@zag-js/remove-scroll";
 import { createFocusTrap } from "focus-trap";
 var { and, or } = guards;
 function machine(ctx = {}) {
   return createMachine({
     id: "popover",
     initial: "unknown",
-    context: __spreadValues({
-      isTitleRendered: true,
-      isDescriptionRendered: true,
-      isAnchorRendered: false,
+    context: __spreadProps(__spreadValues({
       uid: "",
       closeOnBlur: true,
       closeOnEsc: true,
@@ -783,7 +558,13 @@ function machine(ctx = {}) {
         placement: "bottom"
       }, ctx.positioning),
       currentPlacement: void 0
-    }, ctx),
+    }, ctx), {
+      renderedElements: {
+        title: true,
+        description: true,
+        anchor: false
+      }
+    }),
     computed: {
       currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
     },
@@ -791,7 +572,7 @@ function machine(ctx = {}) {
       unknown: {
         on: {
           SETUP: {
-            target: "closed",
+            target: ctx.open ? "open" : "closed",
             actions: ["setupDocument", "checkRenderedElements"]
           }
         }
@@ -812,13 +593,7 @@ function machine(ctx = {}) {
           "disableOutsidePointerEvents",
           "computePlacement"
         ],
-        entry: choose([
-          {
-            guard: "autoFocus",
-            actions: ["setInitialFocus", "invokeOnOpen"]
-          },
-          { actions: ["focusContent", "invokeOnOpen"] }
-        ]),
+        entry: ["setInitialFocus", "invokeOnOpen"],
         on: {
           CLOSE: {
             target: "closed",
@@ -861,7 +636,7 @@ function machine(ctx = {}) {
     activities: {
       computePlacement(ctx2) {
         ctx2.currentPlacement = ctx2.positioning.placement;
-        const anchorEl = ctx2.isAnchorRendered ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+        const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
         return getPlacement(anchorEl, dom.getPositionerEl(ctx2), __spreadProps(__spreadValues({}, ctx2.positioning), {
           onComplete(data) {
             ctx2.currentPlacement = data.placement;
@@ -896,7 +671,6 @@ function machine(ctx = {}) {
       },
       preventScroll(ctx2) {
         return preventBodyScroll({
-          allowPinchZoom: true,
           disabled: !ctx2.modal,
           document: dom.getDoc(ctx2)
         });
@@ -919,7 +693,7 @@ function machine(ctx = {}) {
           });
           try {
             trap.activate();
-          } catch (e2) {
+          } catch (e) {
           }
         });
         return () => trap == null ? void 0 : trap.deactivate();
@@ -939,9 +713,11 @@ function machine(ctx = {}) {
     actions: {
       checkRenderedElements(ctx2) {
         raf(() => {
-          ctx2.isAnchorRendered = !!dom.getAnchorEl(ctx2);
-          ctx2.isTitleRendered = !!dom.getTitleEl(ctx2);
-          ctx2.isDescriptionRendered = !!dom.getDescriptionEl(ctx2);
+          Object.assign(ctx2.renderedElements, {
+            title: !!dom.getTitleEl(ctx2),
+            description: !!dom.getDescriptionEl(ctx2),
+            anchor: !!dom.getAnchorEl(ctx2)
+          });
         });
       },
       setupDocument(ctx2, evt) {
@@ -954,12 +730,6 @@ function machine(ctx = {}) {
       clearPointerDown(ctx2) {
         ctx2.pointerdownNode = null;
       },
-      focusContent(ctx2) {
-        raf(() => {
-          var _a;
-          (_a = dom.getContentEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
       setInitialFocus(ctx2) {
         raf(() => {
           var _a;