@zag-js/popover 0.1.9 → 0.1.10

package/dist/index.js

@@ -43,6 +43,22 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -51,6 +67,9 @@ var runIfFn = (v, ...a) => {
   return res != null ? res : void 0;
 };
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
 function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -61,11 +80,25 @@ function getDocument(el) {
   var _a;
   if (isWindow(el))
     return el.document;
+  if (isDocument(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
-function getEventTarget(event) {
-  var _a, _b;
-  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return __spreadValues2(__spreadValues2({}, dom2), helpers);
 }
 function contains(parent, child) {
   if (!parent)
@@ -193,52 +226,40 @@ var runIfFn2 = (v, ...a) => {
 };
 
 // src/popover.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getWin: (ctx) => {
-    var _a;
-    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-  },
+var dom = defineDomHelpers({
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
   getAnchorId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.uid}:anchor`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.id}:anchor`;
   },
   getTriggerId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.uid}:trigger`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
   },
   getContentId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.uid}:content`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
   },
-  getPositionerId: (ctx) => `popover:${ctx.uid}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.uid}:arrow`,
+  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.uid}:title`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.id}:title`;
   },
   getDescriptionId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.uid}:desc`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
   },
   getCloseButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.uid}:close-button`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.id}:close-button`;
   },
-  getAnchorEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getAnchorId(ctx)),
-  getTriggerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTriggerId(ctx)),
-  getContentEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getContentId(ctx)),
-  getPositionerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getPositionerId(ctx)),
-  getTitleEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTitleId(ctx)),
-  getDescriptionEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getDescriptionId(ctx)),
+  getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
+  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
+  getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
   getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
   getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
   getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
@@ -253,7 +274,7 @@ var dom = {
       el = dom.getContentEl(ctx);
     return el;
   }
-};
+});
 
 // src/popover.connect.ts
 function connect(state, send, normalize) {
@@ -342,335 +363,16 @@ function connect(state, send, normalize) {
 // src/popover.machine.ts
 var import_aria_hidden = require("@zag-js/aria-hidden");
 var import_core = require("@zag-js/core");
-
-// ../../utilities/interact-outside/dist/index.mjs
-var runIfFn3 = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
-var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  var _a;
-  const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-function isWindow2(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
-}
-function getDocument2(el) {
-  var _a;
-  if (isWindow2(el))
-    return el.document;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
-}
-function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
-}
-function getEventTarget2(event) {
-  var _a, _b;
-  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
-}
-function contains2(parent, child) {
-  if (!parent)
-    return false;
-  return parent === child || isHTMLElement2(parent) && isHTMLElement2(child) && parent.contains(child);
-}
-function isHTMLElement2(v) {
-  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
-}
-function isVisible2(el) {
-  if (!isHTMLElement2(el))
-    return false;
-  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
-}
-var isContextMenuEvent = (e) => {
-  return e.button === 2 || isCtrlKey(e) && e.button === 0;
-};
-var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
-function fireCustomEvent(el, type, init) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  const event = new win.CustomEvent(type, init);
-  return el.dispatchEvent(event);
-}
-var focusableSelector2 = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
-function isFocusable2(element) {
-  if (!element)
-    return false;
-  return element.matches(focusableSelector2) && isVisible2(element);
-}
-var isRef2 = (v) => hasProp2(v, "current");
-function addDomEvent2(target, eventName, handler, options) {
-  const node = isRef2(target) ? target.current : runIfFn3(target);
-  node == null ? void 0 : node.addEventListener(eventName, handler, options);
-  return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
-  };
-}
-var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
-var FOCUS_OUTSIDE_EVENT = "focus.outside";
-function trackInteractOutside(node, options) {
-  const { exclude, onFocusOutside, onPointerDownOutside } = options;
-  if (!node)
-    return;
-  const doc = getDocument2(node);
-  const win = getWindow(node);
-  function isEventOutside(event) {
-    const target = getEventTarget2(event);
-    if (!(target instanceof win.HTMLElement)) {
-      return false;
-    }
-    if (!contains2(doc.documentElement, target)) {
-      return false;
-    }
-    if (contains2(node, target)) {
-      return false;
-    }
-    return !(exclude == null ? void 0 : exclude(target));
-  }
-  let clickHandler;
-  function onPointerDown(event) {
-    function handler() {
-      if (!node || !isEventOutside(event))
-        return;
-      if (onPointerDownOutside) {
-        node.addEventListener(POINTER_OUTSIDE_EVENT, onPointerDownOutside, { once: true });
-      }
-      fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
-        bubbles: false,
-        cancelable: true,
-        detail: {
-          originalEvent: event,
-          contextmenu: isContextMenuEvent(event),
-          focusable: isFocusable2(getEventTarget2(event))
-        }
-      });
-    }
-    if (event.pointerType === "touch") {
-      doc.removeEventListener("click", handler);
-      clickHandler = handler;
-      doc.addEventListener("click", handler, { once: true });
-    } else {
-      handler();
-    }
-  }
-  const cleanups = /* @__PURE__ */ new Set();
-  const timer = setTimeout(() => {
-    cleanups.add(addDomEvent2(doc, "pointerdown", onPointerDown, true));
-  }, 0);
-  function onFocusin(event) {
-    if (!node || !isEventOutside(event))
-      return;
-    if (onFocusOutside) {
-      node.addEventListener(FOCUS_OUTSIDE_EVENT, onFocusOutside, { once: true });
-    }
-    fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
-      bubbles: false,
-      cancelable: true,
-      detail: {
-        originalEvent: event,
-        contextmenu: false,
-        focusable: isFocusable2(getEventTarget2(event))
-      }
-    });
-  }
-  cleanups.add(addDomEvent2(doc, "focusin", onFocusin, true));
-  return () => {
-    clearTimeout(timer);
-    if (clickHandler)
-      doc.removeEventListener("click", clickHandler);
-    cleanups.forEach((fn) => fn());
-  };
-}
-
-// ../../utilities/dismissable/src/escape-keydown.ts
-function trackEscapeKeydown(fn) {
-  const handleKeyDown = (event) => {
-    if (event.key === "Escape")
-      fn == null ? void 0 : fn(event);
-  };
-  return addDomEvent(document, "keydown", handleKeyDown);
-}
-
-// ../../utilities/dismissable/src/layer-stack.ts
-var layerStack = {
-  layers: [],
-  branches: [],
-  count() {
-    return this.layers.length;
-  },
-  pointerBlockingLayers() {
-    return this.layers.filter((layer) => layer.pointerBlocking);
-  },
-  topMostPointerBlockingLayer() {
-    return [...this.pointerBlockingLayers()].slice(-1)[0];
-  },
-  hasPointerBlockingLayer() {
-    return this.pointerBlockingLayers().length > 0;
-  },
-  isBelowPointerBlockingLayer(node) {
-    var _a;
-    const index = this.indexOf(node);
-    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
-    return index < highestBlockingIndex;
-  },
-  isTopMost(node) {
-    const layer = this.layers[this.count() - 1];
-    return (layer == null ? void 0 : layer.node) === node;
-  },
-  getNestedLayers(node) {
-    return Array.from(this.layers).slice(this.indexOf(node) + 1);
-  },
-  isInNestedLayer(node, target) {
-    return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
-  },
-  isInBranch(target) {
-    return Array.from(this.branches).some((branch) => contains(branch, target));
-  },
-  add(layer) {
-    this.layers.push(layer);
-  },
-  addBranch(node) {
-    this.branches.push(node);
-  },
-  remove(node) {
-    const index = this.indexOf(node);
-    if (index < 0)
-      return;
-    if (index < this.count() - 1) {
-      const _layers = this.getNestedLayers(node);
-      _layers.forEach((layer) => layer.dismiss());
-    }
-    this.layers.splice(index, 1);
-  },
-  removeBranch(node) {
-    const index = this.branches.indexOf(node);
-    if (index >= 0)
-      this.branches.splice(index, 1);
-  },
-  indexOf(node) {
-    return this.layers.findIndex((layer) => layer.node === node);
-  },
-  dismiss(node) {
-    var _a;
-    (_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
-  },
-  clear() {
-    this.remove(this.layers[0].node);
-  }
-};
-
-// ../../utilities/dismissable/src/pointer-event-outside.ts
-var originalBodyPointerEvents;
-function assignPointerEventToLayers() {
-  layerStack.layers.forEach(({ node }) => {
-    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
-  });
-}
-function clearPointerEvent(node) {
-  node.style.pointerEvents = "";
-}
-var DATA_ATTR = "data-inert";
-function disablePointerEventsOutside(node) {
-  const doc = getDocument(node);
-  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
-    originalBodyPointerEvents = document.body.style.pointerEvents;
-    doc.body.style.pointerEvents = "none";
-    doc.body.setAttribute(DATA_ATTR, "");
-  }
-  return () => {
-    if (layerStack.hasPointerBlockingLayer())
-      return;
-    doc.body.style.pointerEvents = originalBodyPointerEvents;
-    doc.body.removeAttribute(DATA_ATTR);
-    if (doc.body.style.length === 0)
-      doc.body.removeAttribute("style");
-  };
-}
-
-// ../../utilities/dismissable/src/dismissable-layer.ts
-function trackDismissableElement(node, options) {
-  if (!node)
-    return;
-  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
-  const layer = { dismiss: onDismiss, node, pointerBlocking };
-  layerStack.add(layer);
-  assignPointerEventToLayers();
-  function onPointerDownOutside(event) {
-    var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
-    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
-      return;
-    (_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
-    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onPointerDownOutside:", event.detail.originalEvent);
-    }
-    onDismiss == null ? void 0 : onDismiss();
-  }
-  function onFocusOutside(event) {
-    var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
-    if (layerStack.isInBranch(target))
-      return;
-    (_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
-    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onFocusOutside:", event.detail.originalEvent);
-    }
-    onDismiss == null ? void 0 : onDismiss();
-  }
-  function onEscapeKeyDown(event) {
-    var _a;
-    if (!layerStack.isTopMost(node))
-      return;
-    (_a = options.onEscapeKeyDown) == null ? void 0 : _a.call(options, event);
-    if (!event.defaultPrevented && onDismiss) {
-      event.preventDefault();
-      onDismiss();
-    }
-  }
-  function exclude(target) {
-    if (!node)
-      return false;
-    const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
-    const _containers = Array.isArray(containers) ? containers : [containers];
-    return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
-  }
-  const cleanups = [
-    pointerBlocking ? disablePointerEventsOutside(node) : void 0,
-    trackEscapeKeydown(onEscapeKeyDown),
-    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
-  ];
-  return () => {
-    layerStack.remove(node);
-    assignPointerEventToLayers();
-    clearPointerEvent(node);
-    cleanups.forEach((fn) => fn == null ? void 0 : fn());
-  };
-}
-
-// src/popover.machine.ts
+var import_dismissable = require("@zag-js/dismissable");
 var import_popper2 = require("@zag-js/popper");
 var import_remove_scroll = require("@zag-js/remove-scroll");
 var import_focus_trap = require("focus-trap");
 var { and, or, not } = import_core.guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return (0, import_core.createMachine)({
     id: "popover",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "",
       closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
@@ -695,12 +397,12 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: ctx.defaultOpen ? "open" : "closed",
-            actions: ["setupDocument", "checkRenderedElements"]
+            actions: "checkRenderedElements"
           }
         }
       },
       closed: {
-        entry: ["clearPointerDown", "invokeOnClose"],
+        entry: "invokeOnClose",
         on: {
           TOGGLE: "open",
           OPEN: "open"
@@ -762,7 +464,7 @@ function machine(ctx = {}) {
         }));
       },
       trackInteractionOutside(ctx2, _evt, { send }) {
-        return trackDismissableElement(dom.getContentEl(ctx2), {
+        return (0, import_dismissable.trackDismissableElement)(dom.getContentEl(ctx2), {
           pointerBlocking: ctx2.modal,
           exclude: dom.getTriggerEl(ctx2),
           onEscapeKeyDown(event) {
@@ -869,16 +571,6 @@ function machine(ctx = {}) {
           });
         });
       },
-      setupDocument(ctx2, evt) {
-        if (evt.doc)
-          ctx2.doc = (0, import_core.ref)(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = (0, import_core.ref)(evt.root);
-        ctx2.uid = evt.id;
-      },
-      clearPointerDown(ctx2) {
-        ctx2.pointerdownNode = null;
-      },
       setInitialFocus(ctx2) {
         raf(() => {
           var _a;

package/dist/index.mjs

@@ -19,6 +19,22 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -27,6 +43,9 @@ var runIfFn = (v, ...a) => {
   return res != null ? res : void 0;
 };
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
 function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -37,11 +56,25 @@ function getDocument(el) {
   var _a;
   if (isWindow(el))
     return el.document;
+  if (isDocument(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
-function getEventTarget(event) {
-  var _a, _b;
-  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return __spreadValues2(__spreadValues2({}, dom2), helpers);
 }
 function contains(parent, child) {
   if (!parent)
@@ -169,52 +202,40 @@ var runIfFn2 = (v, ...a) => {
 };
 
 // src/popover.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getWin: (ctx) => {
-    var _a;
-    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-  },
+var dom = defineDomHelpers({
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
   getAnchorId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.uid}:anchor`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.id}:anchor`;
   },
   getTriggerId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.uid}:trigger`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
   },
   getContentId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.uid}:content`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
   },
-  getPositionerId: (ctx) => `popover:${ctx.uid}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.uid}:arrow`,
+  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.uid}:title`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.id}:title`;
   },
   getDescriptionId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.uid}:desc`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
   },
   getCloseButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.uid}:close-button`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.id}:close-button`;
   },
-  getAnchorEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getAnchorId(ctx)),
-  getTriggerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTriggerId(ctx)),
-  getContentEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getContentId(ctx)),
-  getPositionerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getPositionerId(ctx)),
-  getTitleEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTitleId(ctx)),
-  getDescriptionEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getDescriptionId(ctx)),
+  getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
+  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
+  getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
   getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
   getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
   getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
@@ -229,7 +250,7 @@ var dom = {
       el = dom.getContentEl(ctx);
     return el;
   }
-};
+});
 
 // src/popover.connect.ts
 function connect(state, send, normalize) {
@@ -317,336 +338,17 @@ function connect(state, send, normalize) {
 
 // src/popover.machine.ts
 import { ariaHidden } from "@zag-js/aria-hidden";
-import { createMachine, guards, ref } from "@zag-js/core";
-
-// ../../utilities/interact-outside/dist/index.mjs
-var runIfFn3 = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
-var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  var _a;
-  const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-function isWindow2(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
-}
-function getDocument2(el) {
-  var _a;
-  if (isWindow2(el))
-    return el.document;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
-}
-function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
-}
-function getEventTarget2(event) {
-  var _a, _b;
-  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
-}
-function contains2(parent, child) {
-  if (!parent)
-    return false;
-  return parent === child || isHTMLElement2(parent) && isHTMLElement2(child) && parent.contains(child);
-}
-function isHTMLElement2(v) {
-  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
-}
-function isVisible2(el) {
-  if (!isHTMLElement2(el))
-    return false;
-  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
-}
-var isContextMenuEvent = (e) => {
-  return e.button === 2 || isCtrlKey(e) && e.button === 0;
-};
-var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
-function fireCustomEvent(el, type, init) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  const event = new win.CustomEvent(type, init);
-  return el.dispatchEvent(event);
-}
-var focusableSelector2 = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
-function isFocusable2(element) {
-  if (!element)
-    return false;
-  return element.matches(focusableSelector2) && isVisible2(element);
-}
-var isRef2 = (v) => hasProp2(v, "current");
-function addDomEvent2(target, eventName, handler, options) {
-  const node = isRef2(target) ? target.current : runIfFn3(target);
-  node == null ? void 0 : node.addEventListener(eventName, handler, options);
-  return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
-  };
-}
-var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
-var FOCUS_OUTSIDE_EVENT = "focus.outside";
-function trackInteractOutside(node, options) {
-  const { exclude, onFocusOutside, onPointerDownOutside } = options;
-  if (!node)
-    return;
-  const doc = getDocument2(node);
-  const win = getWindow(node);
-  function isEventOutside(event) {
-    const target = getEventTarget2(event);
-    if (!(target instanceof win.HTMLElement)) {
-      return false;
-    }
-    if (!contains2(doc.documentElement, target)) {
-      return false;
-    }
-    if (contains2(node, target)) {
-      return false;
-    }
-    return !(exclude == null ? void 0 : exclude(target));
-  }
-  let clickHandler;
-  function onPointerDown(event) {
-    function handler() {
-      if (!node || !isEventOutside(event))
-        return;
-      if (onPointerDownOutside) {
-        node.addEventListener(POINTER_OUTSIDE_EVENT, onPointerDownOutside, { once: true });
-      }
-      fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
-        bubbles: false,
-        cancelable: true,
-        detail: {
-          originalEvent: event,
-          contextmenu: isContextMenuEvent(event),
-          focusable: isFocusable2(getEventTarget2(event))
-        }
-      });
-    }
-    if (event.pointerType === "touch") {
-      doc.removeEventListener("click", handler);
-      clickHandler = handler;
-      doc.addEventListener("click", handler, { once: true });
-    } else {
-      handler();
-    }
-  }
-  const cleanups = /* @__PURE__ */ new Set();
-  const timer = setTimeout(() => {
-    cleanups.add(addDomEvent2(doc, "pointerdown", onPointerDown, true));
-  }, 0);
-  function onFocusin(event) {
-    if (!node || !isEventOutside(event))
-      return;
-    if (onFocusOutside) {
-      node.addEventListener(FOCUS_OUTSIDE_EVENT, onFocusOutside, { once: true });
-    }
-    fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
-      bubbles: false,
-      cancelable: true,
-      detail: {
-        originalEvent: event,
-        contextmenu: false,
-        focusable: isFocusable2(getEventTarget2(event))
-      }
-    });
-  }
-  cleanups.add(addDomEvent2(doc, "focusin", onFocusin, true));
-  return () => {
-    clearTimeout(timer);
-    if (clickHandler)
-      doc.removeEventListener("click", clickHandler);
-    cleanups.forEach((fn) => fn());
-  };
-}
-
-// ../../utilities/dismissable/src/escape-keydown.ts
-function trackEscapeKeydown(fn) {
-  const handleKeyDown = (event) => {
-    if (event.key === "Escape")
-      fn == null ? void 0 : fn(event);
-  };
-  return addDomEvent(document, "keydown", handleKeyDown);
-}
-
-// ../../utilities/dismissable/src/layer-stack.ts
-var layerStack = {
-  layers: [],
-  branches: [],
-  count() {
-    return this.layers.length;
-  },
-  pointerBlockingLayers() {
-    return this.layers.filter((layer) => layer.pointerBlocking);
-  },
-  topMostPointerBlockingLayer() {
-    return [...this.pointerBlockingLayers()].slice(-1)[0];
-  },
-  hasPointerBlockingLayer() {
-    return this.pointerBlockingLayers().length > 0;
-  },
-  isBelowPointerBlockingLayer(node) {
-    var _a;
-    const index = this.indexOf(node);
-    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
-    return index < highestBlockingIndex;
-  },
-  isTopMost(node) {
-    const layer = this.layers[this.count() - 1];
-    return (layer == null ? void 0 : layer.node) === node;
-  },
-  getNestedLayers(node) {
-    return Array.from(this.layers).slice(this.indexOf(node) + 1);
-  },
-  isInNestedLayer(node, target) {
-    return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
-  },
-  isInBranch(target) {
-    return Array.from(this.branches).some((branch) => contains(branch, target));
-  },
-  add(layer) {
-    this.layers.push(layer);
-  },
-  addBranch(node) {
-    this.branches.push(node);
-  },
-  remove(node) {
-    const index = this.indexOf(node);
-    if (index < 0)
-      return;
-    if (index < this.count() - 1) {
-      const _layers = this.getNestedLayers(node);
-      _layers.forEach((layer) => layer.dismiss());
-    }
-    this.layers.splice(index, 1);
-  },
-  removeBranch(node) {
-    const index = this.branches.indexOf(node);
-    if (index >= 0)
-      this.branches.splice(index, 1);
-  },
-  indexOf(node) {
-    return this.layers.findIndex((layer) => layer.node === node);
-  },
-  dismiss(node) {
-    var _a;
-    (_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
-  },
-  clear() {
-    this.remove(this.layers[0].node);
-  }
-};
-
-// ../../utilities/dismissable/src/pointer-event-outside.ts
-var originalBodyPointerEvents;
-function assignPointerEventToLayers() {
-  layerStack.layers.forEach(({ node }) => {
-    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
-  });
-}
-function clearPointerEvent(node) {
-  node.style.pointerEvents = "";
-}
-var DATA_ATTR = "data-inert";
-function disablePointerEventsOutside(node) {
-  const doc = getDocument(node);
-  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
-    originalBodyPointerEvents = document.body.style.pointerEvents;
-    doc.body.style.pointerEvents = "none";
-    doc.body.setAttribute(DATA_ATTR, "");
-  }
-  return () => {
-    if (layerStack.hasPointerBlockingLayer())
-      return;
-    doc.body.style.pointerEvents = originalBodyPointerEvents;
-    doc.body.removeAttribute(DATA_ATTR);
-    if (doc.body.style.length === 0)
-      doc.body.removeAttribute("style");
-  };
-}
-
-// ../../utilities/dismissable/src/dismissable-layer.ts
-function trackDismissableElement(node, options) {
-  if (!node)
-    return;
-  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
-  const layer = { dismiss: onDismiss, node, pointerBlocking };
-  layerStack.add(layer);
-  assignPointerEventToLayers();
-  function onPointerDownOutside(event) {
-    var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
-    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
-      return;
-    (_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
-    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onPointerDownOutside:", event.detail.originalEvent);
-    }
-    onDismiss == null ? void 0 : onDismiss();
-  }
-  function onFocusOutside(event) {
-    var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
-    if (layerStack.isInBranch(target))
-      return;
-    (_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
-    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
-    if (event.defaultPrevented)
-      return;
-    if (debug) {
-      console.log("onFocusOutside:", event.detail.originalEvent);
-    }
-    onDismiss == null ? void 0 : onDismiss();
-  }
-  function onEscapeKeyDown(event) {
-    var _a;
-    if (!layerStack.isTopMost(node))
-      return;
-    (_a = options.onEscapeKeyDown) == null ? void 0 : _a.call(options, event);
-    if (!event.defaultPrevented && onDismiss) {
-      event.preventDefault();
-      onDismiss();
-    }
-  }
-  function exclude(target) {
-    if (!node)
-      return false;
-    const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
-    const _containers = Array.isArray(containers) ? containers : [containers];
-    return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
-  }
-  const cleanups = [
-    pointerBlocking ? disablePointerEventsOutside(node) : void 0,
-    trackEscapeKeydown(onEscapeKeyDown),
-    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
-  ];
-  return () => {
-    layerStack.remove(node);
-    assignPointerEventToLayers();
-    clearPointerEvent(node);
-    cleanups.forEach((fn) => fn == null ? void 0 : fn());
-  };
-}
-
-// src/popover.machine.ts
+import { createMachine, guards } from "@zag-js/core";
+import { trackDismissableElement } from "@zag-js/dismissable";
 import { getPlacement } from "@zag-js/popper";
 import { preventBodyScroll } from "@zag-js/remove-scroll";
 import { createFocusTrap } from "focus-trap";
 var { and, or, not } = guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return createMachine({
     id: "popover",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "",
       closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
@@ -671,12 +373,12 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: ctx.defaultOpen ? "open" : "closed",
-            actions: ["setupDocument", "checkRenderedElements"]
+            actions: "checkRenderedElements"
           }
         }
       },
       closed: {
-        entry: ["clearPointerDown", "invokeOnClose"],
+        entry: "invokeOnClose",
         on: {
           TOGGLE: "open",
           OPEN: "open"
@@ -845,16 +547,6 @@ function machine(ctx = {}) {
           });
         });
       },
-      setupDocument(ctx2, evt) {
-        if (evt.doc)
-          ctx2.doc = ref(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = ref(evt.root);
-        ctx2.uid = evt.id;
-      },
-      clearPointerDown(ctx2) {
-        ctx2.pointerdownNode = null;
-      },
       setInitialFocus(ctx2) {
         raf(() => {
           var _a;

package/dist/popover.dom.d.ts

@@ -1,9 +1,22 @@
 import type { MachineContext as Ctx } from "./popover.types";
 export declare const dom: {
-    getDoc: (ctx: Ctx) => Document;
-    getWin: (ctx: Ctx) => Window & typeof globalThis;
+    getRootNode: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => HTMLElement;
+    getById: <T_1 = HTMLElement>(ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }, id: string) => T_1;
+} & {
     getActiveEl: (ctx: Ctx) => Element;
-    getRootNode: (ctx: Ctx) => Document | ShadowRoot;
     getAnchorId: (ctx: Ctx) => string;
     getTriggerId: (ctx: Ctx) => string;
     getContentId: (ctx: Ctx) => string;

package/dist/popover.machine.d.ts

@@ -1,2 +1,2 @@
 import type { MachineContext, MachineState, UserDefinedContext } from "./popover.types";
-export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
+export declare function machine(ctx: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/popover.types.d.ts

@@ -1,7 +1,7 @@
 import type { StateMachine as S } from "@zag-js/core";
-import type { DismissableElementHandlers } from "@zag-js/dimissable";
+import type { DismissableElementHandlers } from "@zag-js/dismissable";
 import type { PositioningOptions, Placement } from "@zag-js/popper";
-import type { Context, MaybeElement } from "@zag-js/types";
+import type { CommonProperties, Context, MaybeElement, RequiredBy } from "@zag-js/types";
 declare type ElementIds = Partial<{
     anchor: string;
     trigger: string;
@@ -10,7 +10,7 @@ declare type ElementIds = Partial<{
     description: string;
     closeBtn: string;
 }>;
-declare type PublicContext = DismissableElementHandlers & {
+declare type PublicContext = DismissableElementHandlers & CommonProperties & {
     /**
      * The ids of the elements in the popover. Useful for composition.
      */
@@ -59,7 +59,7 @@ declare type PublicContext = DismissableElementHandlers & {
      */
     defaultOpen?: boolean;
 };
-export declare type UserDefinedContext = Partial<PublicContext>;
+export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
 declare type ComputedContext = Readonly<{
     /**
      * @computed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,14 +30,17 @@
   },
   "dependencies": {
     "@zag-js/aria-hidden": "0.1.0",
-    "@zag-js/core": "0.1.7",
-    "@zag-js/dom-utils": "0.1.6",
-    "@zag-js/popper": "0.1.7",
-    "@zag-js/remove-scroll": "0.1.1",
-    "@zag-js/types": "0.2.1",
-    "@zag-js/utils": "0.1.2",
+    "@zag-js/core": "0.1.8",
+    "@zag-js/dismissable": "0.1.2",
+    "@zag-js/popper": "0.1.8",
+    "@zag-js/remove-scroll": "0.1.2",
+    "@zag-js/types": "0.2.2",
     "focus-trap": "6.9.4"
   },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.1.7",
+    "@zag-js/utils": "0.1.2"
+  },
   "scripts": {
     "build:fast": "zag build",
     "start": "zag build --watch",