@zag-js/popover 0.1.8 → 0.1.11

package/dist/index.mjs

@@ -1,35 +1,116 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
 // ../../utilities/dom/dist/index.mjs
 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;
+  return res ?? void 0;
 };
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+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]";
+}
+function isFrame(element) {
+  return element.localName === "iframe";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+function contains(parent, child) {
+  if (!parent)
+    return false;
+  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
+}
+function isHTMLElement(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
+}
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+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 [];
+  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);
+  }
+  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;
+};
+function isFocusable(element) {
+  if (!element)
+    return false;
+  return element.matches(focusableSelector) && isVisible(element);
+}
+function getTabbables(container, includeContainer) {
+  if (!container)
+    return [];
+  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 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;
+}
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
@@ -57,179 +138,11 @@ 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 getStyleCache() {
-  ;
-  globalThis.__styleCache__ = globalThis.__styleCache__ || /* @__PURE__ */ new WeakMap();
-  return globalThis.__styleCache__;
-}
-function getComputedStyle(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 contains(parent, child) {
-  if (!parent)
-    return false;
-  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(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;
-}
-var getFocusables = (el, includeContainer = false) => {
-  if (!el)
-    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);
-  }
-  return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
-};
-var isFocusable = (el) => {
-  if (!isHTMLElement(el) || isHidden(el) || isDisabled(el))
-    return false;
-  return el == null ? void 0 : el.matches(focusableSelector);
-};
-var getTabbables = (el, includeContainer = false) => {
-  if (!el)
-    return [];
-  return getFocusables(el, includeContainer).filter(isTabbable);
-};
-var isTabbable = (el) => {
-  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);
-    }
-  };
-  return addDomEvent(doc, "pointerdown", fn);
-}
 
 // 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;
@@ -248,59 +161,50 @@ function next(v, idx, opts = {}) {
 }
 var runIfFn2 = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return 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`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.anchor) ?? `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`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `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`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `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`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.title) ?? `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`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.description) ?? `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`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.closeBtn) ?? `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)
@@ -309,19 +213,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");
@@ -352,12 +257,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({
@@ -372,34 +275,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",
@@ -415,7 +293,7 @@ function connect(state, send, normalize = normalizeProp) {
       type: "button",
       "aria-label": "close",
       onClick() {
-        send("CLOSE");
+        send("REQUEST_CLOSE");
       }
     })
   };
@@ -423,32 +301,34 @@ 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,
+    context: {
+      closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
       modal: false,
-      positioning: __spreadValues({
-        placement: "bottom"
-      }, ctx.positioning),
-      currentPlacement: void 0
-    }, ctx), {
+      positioning: {
+        placement: "bottom",
+        ...ctx.positioning
+      },
+      currentPlacement: void 0,
+      ...ctx,
+      focusTriggerOnClose: true,
       renderedElements: {
         title: true,
         description: true,
         anchor: false
       }
-    }),
+    },
     computed: {
       currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
     },
@@ -456,63 +336,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: {
+          CLOSE: "closed",
+          REQUEST_CLOSE: {
             target: "closed",
-            actions: "focusTrigger"
+            actions: "focusTriggerIfNeeded"
           },
-          TRIGGER_CLICK: {
-            target: "closed",
-            actions: "focusTrigger"
+          TOGGLE: "closed",
+          TRIGGER_BLUR: {
+            guard: not("isRelatedTargetWithinContent"),
+            target: "closed"
           },
-          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"
-          },
-          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"
+          }
         }
       }
     }
@@ -521,7 +392,8 @@ function machine(ctx = {}) {
       computePlacement(ctx2) {
         ctx2.currentPlacement = ctx2.positioning.placement;
         const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
-        return getPlacement(anchorEl, dom.getPositionerEl(ctx2), __spreadProps(__spreadValues({}, ctx2.positioning), {
+        return getPlacement(anchorEl, dom.getPositionerEl(ctx2), {
+          ...ctx2.positioning,
           onComplete(data) {
             ctx2.currentPlacement = data.placement;
             ctx2.isPlacementComplete = true;
@@ -530,34 +402,72 @@ function machine(ctx = {}) {
             ctx2.currentPlacement = void 0;
             ctx2.isPlacementComplete = false;
           }
-        }));
-      },
-      trackPointerDown(ctx2) {
-        return trackPointerDown(dom.getDoc(ctx2), (el) => {
-          ctx2.pointerdownNode = ref(el);
         });
       },
-      disableOutsidePointerEvents(ctx2) {
-        const el = dom.getContentEl(ctx2);
-        return preventBodyPointerEvents(el, {
-          document: dom.getDoc(ctx2),
-          disabled: !ctx2.modal
+      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" });
+          }
         });
       },
+      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)
@@ -577,20 +487,18 @@ function machine(ctx = {}) {
           });
           try {
             trap.activate();
-          } catch (e) {
+          } catch {
           }
         });
         return () => trap == null ? void 0 : trap.deactivate();
       }
     },
     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)
     },
@@ -604,48 +512,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 });