@zag-js/popover 0.0.0-dev-20220627213111 → 0.0.0-dev-20220703123907

package/dist/index.js

@@ -47,12 +47,10 @@ var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-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 pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
@@ -80,81 +78,21 @@ function raf(fn) {
     globalThis.cancelAnimationFrame(id);
   };
 }
-var changeCount = 0;
-var originalBodyPointerEvents;
-function preventBodyPointerEvents(el, opts = {}) {
-  const { disabled = false, document: docProp } = opts;
-  const doc = docProp || document;
-  let isTouchOrPenPressed = false;
-  let isLeftClickPressed = false;
-  function listen() {
-    const onPointerDown = (event) => {
-      const isMouse = event.pointerType === "mouse";
-      isTouchOrPenPressed = !isMouse;
-      isLeftClickPressed = isMouse && isLeftClick(event);
-    };
-    const onPointerUp = () => {
-      isTouchOrPenPressed = false;
-      isLeftClickPressed = false;
-    };
-    return pipe(addDomEvent(doc, "pointerdown", onPointerDown), addDomEvent(doc, "pointerup", onPointerUp));
-  }
-  function reset() {
-    changeCount--;
-    if (changeCount === 0) {
-      doc.body.style.pointerEvents = originalBodyPointerEvents;
-    }
-    if (el) {
-      el.style.pointerEvents = "";
-    }
-  }
-  function apply() {
-    if (disabled)
-      return;
-    if (changeCount === 0) {
-      originalBodyPointerEvents = doc.body.style.pointerEvents;
-    }
-    doc.body.style.pointerEvents = "none";
-    if (el) {
-      el.style.pointerEvents = "auto";
-    }
-    changeCount++;
-    return function() {
-      if (isTouchOrPenPressed) {
-        addDomEvent(doc, "click", reset, { once: true });
-      } else if (isLeftClickPressed) {
-        addDomEvent(doc, "pointerup", reset, { once: true });
-      } else {
-        reset();
-      }
-    };
-  }
-  const cleanups = [];
-  cleanups.push(apply());
-  nextTick(() => {
-    cleanups.push(listen());
-  });
-  return function() {
-    cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
-  };
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getCache() {
-  const g = globalThis;
-  g.__styleCache__ = g.__styleCache__ || /* @__PURE__ */ new WeakMap();
-  return g.__styleCache__;
+function isFrame(element) {
+  return element.localName === "iframe";
 }
-function getComputedStyle(el) {
+function getDocument(el) {
   var _a;
-  if (!el)
-    return {};
-  const cache = getCache();
-  let style = cache.get(el);
-  if (!style) {
-    const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
-    style = win.getComputedStyle(el);
-    cache.set(el, style);
-  }
-  return style;
+  if (isWindow(el))
+    return el.document;
+  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 contains(parent, child) {
   if (!parent)
@@ -164,95 +102,74 @@ 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";
 }
-var isDisabled = (el) => {
-  return (el == null ? void 0 : el.getAttribute("disabled")) != null || !!(el == null ? void 0 : el.getAttribute("aria-disabled")) === true;
-};
-function validateBlur(event, opts) {
-  var _a;
-  const exclude = Array.isArray(opts.exclude) ? opts.exclude : [opts.exclude];
-  const relatedTarget = (_a = event.relatedTarget) != null ? _a : opts.fallback;
-  return exclude.every((el) => !(el == null ? void 0 : el.contains(relatedTarget)));
-}
-var focusableSelector = /* @__PURE__ */ [
-  "input:not([disabled]):not([type=hidden])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "button:not([disabled])",
-  "embed",
-  "iframe",
-  "object",
-  "a[href]",
-  "area[href]",
-  "[tabindex]",
-  "audio[controls]",
-  "video[controls]",
-  "*[tabindex]:not([aria-disabled])",
-  "[contenteditable]:not([contenteditable=false])",
-  "details > summary:first-of-type"
-].join(",");
-function isHidden(el, until) {
-  const style = getComputedStyle(el);
-  if (!el || style.getPropertyValue("visibility") === "hidden")
-    return true;
-  while (el) {
-    if (until != null && el === until)
-      return false;
-    if (style.getPropertyValue("display") === "none")
-      return true;
-    el = el.parentElement;
-  }
-  return false;
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
 }
-var getFocusables = (el, includeContainer = false) => {
-  if (!el)
+function hasNegativeTabIndex(element) {
+  const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
+  return tabIndex < 0;
+}
+var focusableSelector = "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";
+var getFocusables = (container, includeContainer = false) => {
+  if (!container)
     return [];
-  let els = Array.from(el.querySelectorAll(focusableSelector));
-  const shouldAddContainer = includeContainer == true || includeContainer == "if-empty" && els.length === 0;
-  if (shouldAddContainer && isHTMLElement(el)) {
-    els.unshift(el);
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
+  if (include && isHTMLElement(container) && isFocusable(container)) {
+    elements.unshift(container);
   }
-  return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
+  const focusableElements = elements.filter(isFocusable);
+  focusableElements.forEach((element, i) => {
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      focusableElements.splice(i, 1, ...getFocusables(frameBody));
+    }
+  });
+  return focusableElements;
 };
-var isFocusable = (el) => {
-  if (!isHTMLElement(el) || isHidden(el) || isDisabled(el))
+function isFocusable(element) {
+  if (!element)
     return false;
-  return el == null ? void 0 : el.matches(focusableSelector);
-};
-var getTabbables = (el, includeContainer = false) => {
-  if (!el)
+  return element.matches(focusableSelector) && isVisible(element);
+}
+function getTabbables(container, includeContainer) {
+  if (!container)
     return [];
-  return getFocusables(el, includeContainer).filter(isTabbable);
-};
-var isTabbable = (el) => {
-  return isFocusable(el) && !isDisabled(el) && !isHidden(el);
-};
-function trackPointerDown(doc, onPointerDown) {
-  var _a;
-  const win = (_a = doc.defaultView) != null ? _a : window;
-  const fn = (event) => {
-    if (event.target instanceof win.HTMLElement) {
-      onPointerDown(event.target);
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const tabbableElements = elements.filter(isTabbable);
+  if (includeContainer && isTabbable(container)) {
+    tabbableElements.unshift(container);
+  }
+  tabbableElements.forEach((element, i) => {
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      const allFrameTabbable = getTabbables(frameBody);
+      tabbableElements.splice(i, 1, ...allFrameTabbable);
     }
-  };
-  return addDomEvent(doc, "pointerdown", fn);
+  });
+  if (!tabbableElements.length && includeContainer) {
+    return elements;
+  }
+  return tabbableElements;
+}
+function isTabbable(el) {
+  return isFocusable(el) && !hasNegativeTabIndex(el);
+}
+function getFirstTabbable(container, includeContainer) {
+  const [first] = getTabbables(container, includeContainer);
+  return first || null;
+}
+function getLastTabbable(container, includeContainer) {
+  const elements = getTabbables(container, includeContainer);
+  return elements[elements.length - 1] || null;
 }
 
 // src/popover.connect.ts
 var import_popper = require("@zag-js/popper");
 
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
-}
-var normalizeProp = createNormalizer((v) => v);
-
 // ../../utilities/core/dist/index.mjs
-var first = (v) => v[0];
-var last = (v) => v[v.length - 1];
 function nextIndex(v, idx, opts = {}) {
   const { step = 1, loop = true } = opts;
   const next2 = idx + step;
@@ -269,11 +186,11 @@ function nextIndex(v, idx, opts = {}) {
 function next(v, idx, opts = {}) {
   return v[nextIndex(v, idx, opts)];
 }
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 var runIfFn2 = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
 };
-var cast = (v) => v;
 
 // src/popover.dom.ts
 var dom = {
@@ -281,6 +198,10 @@ var dom = {
     var _a;
     return (_a = ctx.doc) != null ? _a : document;
   },
+  getWin: (ctx) => {
+    var _a;
+    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
+  },
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
   getRootNode: (ctx) => {
     var _a;
@@ -320,10 +241,10 @@ var dom = {
   getDescriptionEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getDescriptionId(ctx)),
   getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
   getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
-  getDocTabbableEls: (ctx) => getTabbables(cast(dom.getDoc(ctx))),
+  getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
   getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
-  getFirstTabbableEl: (ctx) => first(dom.getTabbableEls(ctx)),
-  getLastTabbableEl: (ctx) => last(dom.getTabbableEls(ctx)),
+  getFirstTabbableEl: (ctx) => getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
+  getLastTabbableEl: (ctx) => getLastTabbable(dom.getContentEl(ctx), "if-empty"),
   getInitialFocusEl: (ctx) => {
     let el = runIfFn2(ctx.initialFocusEl);
     if (!el && ctx.autoFocus)
@@ -335,16 +256,17 @@ var dom = {
 };
 
 // src/popover.connect.ts
-function connect(state, send, normalize = normalizeProp) {
+function connect(state, send, normalize) {
   const isOpen = state.matches("open");
-  const pointerdownNode = state.context.pointerdownNode;
   const currentPlacement = state.context.currentPlacement;
+  const portalled = state.context.currentPortalled;
+  const rendered = state.context.renderedElements;
   const popperStyles = (0, import_popper.getPlacementStyles)({
     measured: !!state.context.isPlacementComplete,
     placement: currentPlacement
   });
   return {
-    portalled: state.context.currentPortalled,
+    portalled,
     isOpen,
     open() {
       send("OPEN");
@@ -375,12 +297,10 @@ function connect(state, send, normalize = normalizeProp) {
       "data-expanded": dataAttr(isOpen),
       "aria-controls": dom.getContentId(state.context),
       onClick() {
-        send("TRIGGER_CLICK");
+        send("TOGGLE");
       },
-      onKeyDown(event) {
-        if (event.key === "Escape") {
-          send("ESCAPE");
-        }
+      onBlur(event) {
+        send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
       }
     }),
     positionerProps: normalize.element({
@@ -395,34 +315,9 @@ function connect(state, send, normalize = normalizeProp) {
       role: "dialog",
       hidden: !isOpen,
       "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) {
-            send("ESCAPE");
-            event2.stopPropagation();
-          },
-          Tab(event2) {
-            const type = event2.shiftKey ? "SHIFT_TAB" : "TAB";
-            send({ type, preventDefault: () => event2.preventDefault() });
-          }
-        };
-        const exec = keyMap[event.key];
-        exec == null ? void 0 : exec(event);
-      },
-      onBlur(event) {
-        var _a;
-        const isValidBlur = validateBlur(event, {
-          exclude: [dom.getTriggerEl(state.context), dom.getContentEl(state.context)],
-          fallback: pointerdownNode
-        });
-        if (isValidBlur) {
-          const el = (_a = event.relatedTarget) != null ? _a : pointerdownNode;
-          send({ type: "INTERACT_OUTSIDE", focusable: isFocusable(el) });
-        }
-      }
+      "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
+      "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
+      "data-placement": currentPlacement
     }),
     titleProps: normalize.element({
       "data-part": "title",
@@ -438,7 +333,7 @@ function connect(state, send, normalize = normalizeProp) {
       type: "button",
       "aria-label": "close",
       onClick() {
-        send("CLOSE");
+        send("REQUEST_CLOSE");
       }
     })
   };
@@ -447,17 +342,324 @@ function connect(state, send, normalize = normalizeProp) {
 // 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 hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var runIfFn3 = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+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);
+  };
+}
+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;
+}
+function fireCustomEvent(el, type, init) {
+  if (!el)
+    return;
+  const event = new 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 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;
+var isContextMenuEvent = (e) => {
+  return e.button === 2 || isCtrlKey(e) && e.button === 0;
+};
+var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
+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;
+  },
+  getChildLayers(node) {
+    return this.layers.slice(this.indexOf(node));
+  },
+  isInChildLayer(node, target) {
+    return this.getChildLayers(node).some((layer) => contains(layer.node, target));
+  },
+  isInBranch(target) {
+    return [...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 + 1 < this.count() - 1) {
+      this.layers.splice(index, this.count()).forEach((item) => item.dismiss());
+    }
+    this.layers = this.layers.filter((item) => item.node !== node);
+  },
+  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 } = 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;
+    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;
+    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) {
+    const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
+    const inContainers = Array.isArray(containers) ? containers : [containers];
+    return inContainers.some((node2) => contains(node2, target)) || layerStack.isInChildLayer(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_popper2 = require("@zag-js/popper");
 var import_remove_scroll = require("@zag-js/remove-scroll");
 var import_focus_trap = require("focus-trap");
-var { and, or } = import_core.guards;
+var { and, or, not } = import_core.guards;
 function machine(ctx = {}) {
   return (0, import_core.createMachine)({
     id: "popover",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
       uid: "",
-      closeOnBlur: true,
+      closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
       modal: false,
@@ -466,6 +668,7 @@ function machine(ctx = {}) {
       }, ctx.positioning),
       currentPlacement: void 0
     }, ctx), {
+      preventReturnFocus: false,
       renderedElements: {
         title: true,
         description: true,
@@ -487,55 +690,46 @@ function machine(ctx = {}) {
       closed: {
         entry: ["clearPointerDown", "invokeOnClose"],
         on: {
-          TRIGGER_CLICK: "open",
+          TOGGLE: "open",
           OPEN: "open"
         }
       },
       open: {
         activities: [
-          "trackPointerDown",
           "trapFocus",
           "preventScroll",
           "hideContentBelow",
-          "disableOutsidePointerEvents",
-          "computePlacement"
+          "computePlacement",
+          "trackInteractionOutside",
+          "trackTabKeyDown"
         ],
         entry: ["setInitialFocus", "invokeOnOpen"],
         on: {
-          CLOSE: {
-            target: "closed",
-            actions: "focusTrigger"
-          },
-          TRIGGER_CLICK: {
+          CLOSE: "closed",
+          REQUEST_CLOSE: {
             target: "closed",
-            actions: "focusTrigger"
+            actions: "focusTriggerIfNeeded"
           },
-          ESCAPE: {
-            guard: "closeOnEsc",
-            target: "closed",
-            actions: "focusTrigger"
-          },
-          TAB: {
-            guard: and("isLastTabbableElement", "closeOnBlur", "portalled"),
-            target: "closed",
-            actions: "focusNextTabbableElementAfterTrigger"
-          },
-          SHIFT_TAB: {
-            guard: and(or("isFirstTabbableElement", "isContentFocused"), "closeOnBlur", "portalled"),
-            target: "closed",
-            actions: "focusTrigger"
+          TOGGLE: "closed",
+          TRIGGER_BLUR: {
+            guard: not("isRelatedTargetWithinContent"),
+            target: "closed"
           },
-          INTERACT_OUTSIDE: [
+          TAB: [
             {
-              guard: and("closeOnBlur", "isRelatedTargetFocusable"),
-              target: "closed"
+              guard: and("isTriggerFocused", "portalled"),
+              actions: "focusFirstTabbableElement"
             },
             {
-              guard: "closeOnBlur",
+              guard: and("isLastTabbableElement", "closeOnInteractOutside", "portalled"),
               target: "closed",
-              actions: "focusTrigger"
+              actions: "focusNextTabbableElementAfterTrigger"
             }
-          ]
+          ],
+          SHIFT_TAB: {
+            guard: and(or("isFirstTabbableElement", "isContentFocused"), "portalled"),
+            actions: "focusTriggerIfNeeded"
+          }
         }
       }
     }
@@ -555,32 +749,70 @@ function machine(ctx = {}) {
           }
         }));
       },
-      trackPointerDown(ctx2) {
-        return trackPointerDown(dom.getDoc(ctx2), (el) => {
-          ctx2.pointerdownNode = (0, import_core.ref)(el);
+      trackInteractionOutside(ctx2, _evt, { send }) {
+        return trackDismissableElement(dom.getContentEl(ctx2), {
+          pointerBlocking: ctx2.modal,
+          exclude: dom.getTriggerEl(ctx2),
+          onEscapeKeyDown(event) {
+            var _a;
+            (_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
+            if (ctx2.closeOnEsc)
+              return;
+            ctx2.preventReturnFocus = false;
+            event.preventDefault();
+          },
+          onInteractOutside(event) {
+            var _a;
+            (_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
+            if (event.defaultPrevented)
+              return;
+            ctx2.preventReturnFocus = event.detail.focusable || event.detail.contextmenu;
+            if (!ctx2.closeOnInteractOutside) {
+              event.preventDefault();
+            }
+          },
+          onPointerDownOutside(event) {
+            var _a;
+            (_a = ctx2.onPointerDownOutside) == null ? void 0 : _a.call(ctx2, event);
+          },
+          onFocusOutside(event) {
+            var _a;
+            (_a = ctx2.onFocusOutside) == null ? void 0 : _a.call(ctx2, event);
+            if (ctx2.currentPortalled) {
+              event.preventDefault();
+            }
+          },
+          onDismiss() {
+            send({ type: "REQUEST_CLOSE", src: "#interact-outside" });
+          }
         });
       },
-      disableOutsidePointerEvents(ctx2) {
-        const el = dom.getContentEl(ctx2);
-        return preventBodyPointerEvents(el, {
-          document: dom.getDoc(ctx2),
-          disabled: !ctx2.modal
-        });
+      trackTabKeyDown(ctx2, _evt, { send }) {
+        if (ctx2.modal)
+          return;
+        return addDomEvent(dom.getWin(ctx2), "keydown", (event) => {
+          const isTabKey = event.key === "Tab" && !isModifiedEvent(event);
+          if (!isTabKey)
+            return;
+          send({
+            type: event.shiftKey ? "SHIFT_TAB" : "TAB",
+            preventDefault: () => event.preventDefault()
+          });
+        }, true);
       },
       hideContentBelow(ctx2) {
         if (!ctx2.modal)
           return;
-        let unhide;
+        let cleanup;
         nextTick(() => {
-          unhide = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
+          cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
         });
-        return () => unhide == null ? void 0 : unhide();
+        return () => cleanup == null ? void 0 : cleanup();
       },
       preventScroll(ctx2) {
-        return (0, import_remove_scroll.preventBodyScroll)({
-          disabled: !ctx2.modal,
-          document: dom.getDoc(ctx2)
-        });
+        if (!ctx2.modal)
+          return;
+        return (0, import_remove_scroll.preventBodyScroll)(dom.getDoc(ctx2));
       },
       trapFocus(ctx2) {
         if (!ctx2.modal)
@@ -607,13 +839,11 @@ function machine(ctx = {}) {
       }
     },
     guards: {
-      closeOnEsc: (ctx2) => !!ctx2.closeOnEsc,
-      autoFocus: (ctx2) => !!ctx2.autoFocus,
-      modal: (ctx2) => !!ctx2.modal,
-      portalled: (ctx2) => !!ctx2.portalled,
-      isRelatedTargetFocusable: (_ctx, evt) => evt.focusable,
-      closeOnBlur: (ctx2) => !!ctx2.closeOnBlur,
+      portalled: (ctx2) => ctx2.currentPortalled,
+      isRelatedTargetWithinContent: (ctx2, evt) => contains(dom.getContentEl(ctx2), evt.target),
+      closeOnInteractOutside: (ctx2) => !!ctx2.closeOnInteractOutside,
       isContentFocused: (ctx2) => dom.getContentEl(ctx2) === dom.getActiveEl(ctx2),
+      isTriggerFocused: (ctx2) => dom.getTriggerEl(ctx2) === dom.getActiveEl(ctx2),
       isFirstTabbableElement: (ctx2) => dom.getFirstTabbableEl(ctx2) === dom.getActiveEl(ctx2),
       isLastTabbableElement: (ctx2) => dom.getLastTabbableEl(ctx2) === dom.getActiveEl(ctx2)
     },
@@ -643,32 +873,42 @@ function machine(ctx = {}) {
           (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
-      focusTrigger(ctx2) {
-        raf(() => {
+      focusTriggerIfNeeded(ctx2) {
+        const focus = () => {
           var _a;
-          (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
+          return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
+        };
+        raf(() => {
+          if (!ctx2.preventReturnFocus) {
+            focus();
+            ctx2.preventReturnFocus = false;
+          }
         });
       },
+      focusFirstTabbableElement(ctx2, evt) {
+        var _a;
+        evt.preventDefault();
+        (_a = dom.getFirstTabbableEl(ctx2)) == null ? void 0 : _a.focus();
+      },
       invokeOnOpen(ctx2, evt) {
         var _a;
         if (evt.type !== "SETUP") {
-          (_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
+          (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, true);
         }
       },
       invokeOnClose(ctx2, evt) {
         var _a;
         if (evt.type !== "SETUP") {
-          (_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
+          (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, false);
         }
       },
       focusNextTabbableElementAfterTrigger(ctx2, evt) {
         const content = dom.getContentEl(ctx2);
-        const doc = dom.getDoc(ctx2);
         const button = dom.getTriggerEl(ctx2);
         if (!content || !button)
           return;
         const lastTabbable = dom.getLastTabbableEl(ctx2);
-        if (lastTabbable !== doc.activeElement)
+        if (lastTabbable !== dom.getActiveEl(ctx2))
           return;
         let tabbables = dom.getDocTabbableEls(ctx2);
         let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });