@zag-js/popover 0.1.7 → 0.1.10

package/dist/index.mjs

@@ -19,181 +19,62 @@ 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;
 };
-function getStyleCache() {
-  ;
-  globalThis.__styleCache__ = globalThis.__styleCache__ || /* @__PURE__ */ new WeakMap();
-  return globalThis.__styleCache__;
-}
-function getComputedStyle2(el) {
-  var _a;
-  if (!el)
-    return {};
-  const cache = getStyleCache();
-  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;
-}
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    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);
-function getListenerElements() {
-  ;
-  globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerElements__;
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
 }
-function getListenerCache() {
-  ;
-  globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerCache__;
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function addGlobalEventListener(node, type, handler, options) {
-  var _a;
-  if (!node)
-    return noop;
-  const hash = JSON.stringify({ type, options });
-  const listenerElements = getListenerElements();
-  const listenerCache = getListenerCache();
-  const group = listenerElements.get(node);
-  if (!listenerElements.has(node)) {
-    const group2 = /* @__PURE__ */ new Map([[hash, /* @__PURE__ */ new Set([handler])]]);
-    listenerElements.set(node, group2);
-  } else if (group == null ? void 0 : group.has(hash)) {
-    (_a = group == null ? void 0 : group.get(hash)) == null ? void 0 : _a.add(handler);
-  } else {
-    group == null ? void 0 : group.set(hash, /* @__PURE__ */ new Set([handler]));
-  }
-  function attach(node2) {
-    var _a2, _b;
-    function listener(event) {
-      var _a3;
-      const group2 = listenerElements.get(node2);
-      (_a3 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a3.forEach((fn) => fn(event));
-    }
-    if (!(listenerCache == null ? void 0 : listenerCache.has(node2))) {
-      listenerCache.set(node2, /* @__PURE__ */ new Map([[hash, listener]]));
-      node2.addEventListener(type, listener, options);
-      return;
-    }
-    if (!((_a2 = listenerCache == null ? void 0 : listenerCache.get(node2)) == null ? void 0 : _a2.has(hash))) {
-      (_b = listenerCache.get(node2)) == null ? void 0 : _b.set(hash, listener);
-      node2.addEventListener(type, listener, options);
-    }
-  }
-  attach(node);
-  return function remove() {
-    var _a2, _b, _c, _d;
-    if (!listenerElements.has(node))
-      return;
-    const group2 = listenerElements.get(node);
-    (_a2 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a2.delete(handler);
-    if (((_b = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _b.size) === 0) {
-      const listener = (_c = listenerCache.get(node)) == null ? void 0 : _c.get(hash);
-      node.removeEventListener(type, listener, options);
-      group2 == null ? void 0 : group2.delete(hash);
-      (_d = listenerCache.get(node)) == null ? void 0 : _d.delete(hash);
-      if ((group2 == null ? void 0 : group2.size) === 0) {
-        listenerElements.delete(node);
-        listenerCache.delete(node);
-      }
-    }
-  };
+function isFrame(element) {
+  return element.localName === "iframe";
 }
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, event, listener, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  return addGlobalEventListener(node, event, listener, options);
+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;
 }
-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 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)
@@ -203,147 +84,102 @@ 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)));
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
 }
-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 = getComputedStyle2(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;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+function hasNegativeTabIndex(element) {
+  const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
+  return tabIndex < 0;
 }
-var getFocusables = (el, includeContainer = false) => {
-  if (!el)
+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 itemById(v, id) {
-  return v.find((node) => node.id === id);
+  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);
+    }
+  });
+  if (!tabbableElements.length && includeContainer) {
+    return elements;
+  }
+  return tabbableElements;
 }
-function indexOfId(v, id) {
-  const item = itemById(v, id);
-  return item ? v.indexOf(item) : -1;
+function isTabbable(el) {
+  return isFocusable(el) && !hasNegativeTabIndex(el);
 }
-var getValueText = (item) => {
-  var _a, _b;
-  return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
-};
-var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
-var wrap = (v, idx) => {
-  return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
-};
-function findByText(v, text, currentId) {
-  const index = currentId ? indexOfId(v, currentId) : -1;
-  let items = currentId ? wrap(v, index) : v;
-  const isSingleKey = text.length === 1;
-  if (isSingleKey) {
-    items = items.filter((item) => item.id !== currentId);
-  }
-  return items.find((item) => match(getValueText(item), text));
+function getFirstTabbable(container, includeContainer) {
+  const [first] = getTabbables(container, includeContainer);
+  return first || null;
 }
-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);
-    }
+function getLastTabbable(container, includeContainer) {
+  const elements = getTabbables(container, includeContainer);
+  return elements[elements.length - 1] || null;
+}
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
   };
-  return addDomEvent(doc, "pointerdown", fn);
 }
-function findByTypeahead(_items, options) {
-  const { state: state2, activeId, key, timeout = 350 } = options;
-  const search = state2.keysSoFar + key;
-  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
-  const query2 = isRepeated ? search[0] : search;
-  let items = _items.slice();
-  const next2 = findByText(items, query2, activeId);
-  function cleanup() {
-    clearTimeout(state2.timer);
-    state2.timer = -1;
-  }
-  function update(value) {
-    state2.keysSoFar = value;
-    cleanup();
-    if (value !== "") {
-      state2.timer = +setTimeout(() => {
-        update("");
-        cleanup();
-      }, timeout);
-    }
+function nextTick(fn) {
+  const set = /* @__PURE__ */ new Set();
+  function raf2(fn2) {
+    const id = globalThis.requestAnimationFrame(fn2);
+    set.add(() => globalThis.cancelAnimationFrame(id));
   }
-  update(search);
-  return next2;
+  raf2(() => raf2(fn));
+  return function cleanup() {
+    set.forEach(function(fn2) {
+      fn2();
+    });
+  };
+}
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
 }
-findByTypeahead.defaultOptions = {
-  keysSoFar: "",
-  timer: -1
-};
 
 // src/popover.connect.ts
 import { getPlacementStyles } from "@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;
@@ -360,63 +196,52 @@ 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;
 };
-var cast = (v) => v;
 
 // src/popover.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
+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(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)
@@ -425,19 +250,20 @@ var dom = {
       el = dom.getContentEl(ctx);
     return el;
   }
-};
+});
 
 // 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 = getPlacementStyles({
     measured: !!state.context.isPlacementComplete,
     placement: currentPlacement
   });
   return {
-    portalled: state.context.currentPortalled,
+    portalled,
     isOpen,
     open() {
       send("OPEN");
@@ -468,12 +294,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({
@@ -488,34 +312,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",
@@ -531,7 +330,7 @@ function connect(state, send, normalize = normalizeProp) {
       type: "button",
       "aria-label": "close",
       onClick() {
-        send("CLOSE");
+        send("REQUEST_CLOSE");
       }
     })
   };
@@ -539,18 +338,18 @@ function connect(state, send, normalize = normalizeProp) {
 
 // src/popover.machine.ts
 import { ariaHidden } from "@zag-js/aria-hidden";
-import { createMachine, guards, ref } from "@zag-js/core";
+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 } = guards;
-function machine(ctx = {}) {
+var { and, or, not } = guards;
+function machine(ctx) {
   return createMachine({
     id: "popover",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "",
-      closeOnBlur: true,
+      closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
       modal: false,
@@ -559,6 +358,7 @@ function machine(ctx = {}) {
       }, ctx.positioning),
       currentPlacement: void 0
     }, ctx), {
+      focusTriggerOnClose: true,
       renderedElements: {
         title: true,
         description: true,
@@ -572,63 +372,54 @@ function machine(ctx = {}) {
       unknown: {
         on: {
           SETUP: {
-            target: ctx.open ? "open" : "closed",
-            actions: ["setupDocument", "checkRenderedElements"]
+            target: ctx.defaultOpen ? "open" : "closed",
+            actions: "checkRenderedElements"
           }
         }
       },
       closed: {
-        entry: ["clearPointerDown", "invokeOnClose"],
+        entry: "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: {
-            target: "closed",
-            actions: "focusTrigger"
-          },
-          ESCAPE: {
-            guard: "closeOnEsc",
-            target: "closed",
-            actions: "focusTrigger"
-          },
-          TAB: {
-            guard: and("isLastTabbableElement", "closeOnBlur", "portalled"),
+          CLOSE: "closed",
+          REQUEST_CLOSE: {
             target: "closed",
-            actions: "focusNextTabbableElementAfterTrigger"
+            actions: "focusTriggerIfNeeded"
           },
-          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"
+          }
         }
       }
     }
@@ -648,32 +439,70 @@ function machine(ctx = {}) {
           }
         }));
       },
-      trackPointerDown(ctx2) {
-        return trackPointerDown(dom.getDoc(ctx2), (el) => {
-          ctx2.pointerdownNode = 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.focusTriggerOnClose = true;
+            event.preventDefault();
+          },
+          onInteractOutside(event) {
+            var _a;
+            (_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
+            if (event.defaultPrevented)
+              return;
+            ctx2.focusTriggerOnClose = !(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 = ariaHidden([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
+          cleanup = ariaHidden([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
         });
-        return () => unhide == null ? void 0 : unhide();
+        return () => cleanup == null ? void 0 : cleanup();
       },
       preventScroll(ctx2) {
-        return preventBodyScroll({
-          disabled: !ctx2.modal,
-          document: dom.getDoc(ctx2)
-        });
+        if (!ctx2.modal)
+          return;
+        return preventBodyScroll(dom.getDoc(ctx2));
       },
       trapFocus(ctx2) {
         if (!ctx2.modal)
@@ -700,13 +529,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)
     },
@@ -720,48 +547,44 @@ 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;
           (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
-      focusTrigger(ctx2) {
+      focusTriggerIfNeeded(ctx2) {
+        if (!ctx2.focusTriggerOnClose)
+          return;
         raf(() => {
           var _a;
-          (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
+          return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
+      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 });
@@ -781,4 +604,3 @@ export {
   connect,
   machine
 };
-//# sourceMappingURL=index.mjs.map