@zag-js/popover 0.1.11 → 0.1.12

package/dist/index.js

@@ -335,262 +335,270 @@ var import_remove_scroll = require("@zag-js/remove-scroll");
 var import_focus_trap = require("focus-trap");
 var { and, or, not } = import_core.guards;
 function machine(ctx) {
-  return (0, import_core.createMachine)({
-    id: "popover",
-    initial: "unknown",
-    context: {
-      closeOnInteractOutside: true,
-      closeOnEsc: true,
-      autoFocus: true,
-      modal: false,
-      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
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: ctx.defaultOpen ? "open" : "closed",
-            actions: "checkRenderedElements"
-          }
+  return (0, import_core.createMachine)(
+    {
+      id: "popover",
+      initial: "unknown",
+      context: {
+        closeOnInteractOutside: true,
+        closeOnEsc: true,
+        autoFocus: true,
+        modal: false,
+        positioning: {
+          placement: "bottom",
+          ...ctx.positioning
+        },
+        currentPlacement: void 0,
+        ...ctx,
+        focusTriggerOnClose: true,
+        renderedElements: {
+          title: true,
+          description: true,
+          anchor: false
         }
       },
-      closed: {
-        entry: "invokeOnClose",
-        on: {
-          TOGGLE: "open",
-          OPEN: "open"
-        }
+      computed: {
+        currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
       },
-      open: {
-        activities: [
-          "trapFocus",
-          "preventScroll",
-          "hideContentBelow",
-          "computePlacement",
-          "trackInteractionOutside",
-          "trackTabKeyDown"
-        ],
-        entry: ["setInitialFocus", "invokeOnOpen"],
-        on: {
-          CLOSE: "closed",
-          REQUEST_CLOSE: {
-            target: "closed",
-            actions: "focusTriggerIfNeeded"
-          },
-          TOGGLE: "closed",
-          TRIGGER_BLUR: {
-            guard: not("isRelatedTargetWithinContent"),
-            target: "closed"
-          },
-          TAB: [
-            {
-              guard: and("isTriggerFocused", "portalled"),
-              actions: "focusFirstTabbableElement"
-            },
-            {
-              guard: and("isLastTabbableElement", "closeOnInteractOutside", "portalled"),
-              target: "closed",
-              actions: "focusNextTabbableElementAfterTrigger"
+      states: {
+        unknown: {
+          on: {
+            SETUP: {
+              target: ctx.defaultOpen ? "open" : "closed",
+              actions: "checkRenderedElements"
             }
+          }
+        },
+        closed: {
+          entry: "invokeOnClose",
+          on: {
+            TOGGLE: "open",
+            OPEN: "open"
+          }
+        },
+        open: {
+          activities: [
+            "trapFocus",
+            "preventScroll",
+            "hideContentBelow",
+            "computePlacement",
+            "trackInteractionOutside",
+            "trackTabKeyDown"
           ],
-          SHIFT_TAB: {
-            guard: and(or("isFirstTabbableElement", "isContentFocused"), "portalled"),
-            actions: "focusTriggerIfNeeded"
+          entry: ["setInitialFocus", "invokeOnOpen"],
+          on: {
+            CLOSE: "closed",
+            REQUEST_CLOSE: {
+              target: "closed",
+              actions: "focusTriggerIfNeeded"
+            },
+            TOGGLE: "closed",
+            TRIGGER_BLUR: {
+              guard: not("isRelatedTargetWithinContent"),
+              target: "closed"
+            },
+            TAB: [
+              {
+                guard: and("isTriggerFocused", "portalled"),
+                actions: "focusFirstTabbableElement"
+              },
+              {
+                guard: and("isLastTabbableElement", "closeOnInteractOutside", "portalled"),
+                target: "closed",
+                actions: "focusNextTabbableElementAfterTrigger"
+              }
+            ],
+            SHIFT_TAB: {
+              guard: and(or("isFirstTabbableElement", "isContentFocused"), "portalled"),
+              actions: "focusTriggerIfNeeded"
+            }
           }
         }
       }
-    }
-  }, {
-    activities: {
-      computePlacement(ctx2) {
-        ctx2.currentPlacement = ctx2.positioning.placement;
-        const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
-        return (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), {
-          ...ctx2.positioning,
-          onComplete(data) {
-            ctx2.currentPlacement = data.placement;
-            ctx2.isPlacementComplete = true;
-          },
-          onCleanup() {
-            ctx2.currentPlacement = void 0;
-            ctx2.isPlacementComplete = false;
-          }
-        });
-      },
-      trackInteractionOutside(ctx2, _evt, { send }) {
-        return (0, import_dismissable.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();
+    },
+    {
+      activities: {
+        computePlacement(ctx2) {
+          ctx2.currentPlacement = ctx2.positioning.placement;
+          const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+          return (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), {
+            ...ctx2.positioning,
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+              ctx2.isPlacementComplete = true;
+            },
+            onCleanup() {
+              ctx2.currentPlacement = void 0;
+              ctx2.isPlacementComplete = false;
             }
-          },
-          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) {
+          });
+        },
+        trackInteractionOutside(ctx2, _evt, { send }) {
+          return (0, import_dismissable.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" });
             }
-          },
-          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)
+          });
+        },
+        trackTabKeyDown(ctx2, _evt, { send }) {
+          if (ctx2.modal)
             return;
-          send({
-            type: event.shiftKey ? "SHIFT_TAB" : "TAB",
-            preventDefault: () => event.preventDefault()
+          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 cleanup;
+          nextTick(() => {
+            cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
           });
-        }, true);
-      },
-      hideContentBelow(ctx2) {
-        if (!ctx2.modal)
-          return;
-        let cleanup;
-        nextTick(() => {
-          cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
-        });
-        return () => cleanup == null ? void 0 : cleanup();
+          return () => cleanup == null ? void 0 : cleanup();
+        },
+        preventScroll(ctx2) {
+          if (!ctx2.modal)
+            return;
+          return (0, import_remove_scroll.preventBodyScroll)(dom.getDoc(ctx2));
+        },
+        trapFocus(ctx2) {
+          if (!ctx2.modal)
+            return;
+          let trap;
+          nextTick(() => {
+            const el = dom.getContentEl(ctx2);
+            if (!el)
+              return;
+            trap = (0, import_focus_trap.createFocusTrap)(el, {
+              escapeDeactivates: false,
+              allowOutsideClick: true,
+              returnFocusOnDeactivate: true,
+              document: dom.getDoc(ctx2),
+              fallbackFocus: el,
+              initialFocus: runIfFn2(ctx2.initialFocusEl)
+            });
+            try {
+              trap.activate();
+            } catch {
+            }
+          });
+          return () => trap == null ? void 0 : trap.deactivate();
+        }
       },
-      preventScroll(ctx2) {
-        if (!ctx2.modal)
-          return;
-        return (0, import_remove_scroll.preventBodyScroll)(dom.getDoc(ctx2));
+      guards: {
+        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)
       },
-      trapFocus(ctx2) {
-        if (!ctx2.modal)
-          return;
-        let trap;
-        nextTick(() => {
-          const el = dom.getContentEl(ctx2);
-          if (!el)
-            return;
-          trap = (0, import_focus_trap.createFocusTrap)(el, {
-            escapeDeactivates: false,
-            allowOutsideClick: true,
-            returnFocusOnDeactivate: true,
-            document: dom.getDoc(ctx2),
-            fallbackFocus: el,
-            initialFocus: runIfFn2(ctx2.initialFocusEl)
+      actions: {
+        checkRenderedElements(ctx2) {
+          raf(() => {
+            Object.assign(ctx2.renderedElements, {
+              title: !!dom.getTitleEl(ctx2),
+              description: !!dom.getDescriptionEl(ctx2),
+              anchor: !!dom.getAnchorEl(ctx2)
+            });
           });
-          try {
-            trap.activate();
-          } catch {
-          }
-        });
-        return () => trap == null ? void 0 : trap.deactivate();
-      }
-    },
-    guards: {
-      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)
-    },
-    actions: {
-      checkRenderedElements(ctx2) {
-        raf(() => {
-          Object.assign(ctx2.renderedElements, {
-            title: !!dom.getTitleEl(ctx2),
-            description: !!dom.getDescriptionEl(ctx2),
-            anchor: !!dom.getAnchorEl(ctx2)
+        },
+        setInitialFocus(ctx2) {
+          raf(() => {
+            var _a;
+            (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
           });
-        });
-      },
-      setInitialFocus(ctx2) {
-        raf(() => {
+        },
+        focusTriggerIfNeeded(ctx2) {
+          if (!ctx2.focusTriggerOnClose)
+            return;
+          raf(() => {
+            var _a;
+            return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        focusFirstTabbableElement(ctx2, evt) {
           var _a;
-          (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      focusTriggerIfNeeded(ctx2) {
-        if (!ctx2.focusTriggerOnClose)
-          return;
-        raf(() => {
+          evt.preventDefault();
+          (_a = dom.getFirstTabbableEl(ctx2)) == null ? void 0 : _a.focus();
+        },
+        invokeOnOpen(ctx2, evt) {
           var _a;
-          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.onOpenChange) == null ? void 0 : _a.call(ctx2, true);
-        }
-      },
-      invokeOnClose(ctx2, evt) {
-        var _a;
-        if (evt.type !== "SETUP") {
-          (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, false);
-        }
-      },
-      focusNextTabbableElementAfterTrigger(ctx2, evt) {
-        const content = dom.getContentEl(ctx2);
-        const button = dom.getTriggerEl(ctx2);
-        if (!content || !button)
-          return;
-        const lastTabbable = dom.getLastTabbableEl(ctx2);
-        if (lastTabbable !== dom.getActiveEl(ctx2))
-          return;
-        let tabbables = dom.getDocTabbableEls(ctx2);
-        let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
-        if (elementAfterTrigger === content) {
-          tabbables = tabbables.filter((el) => !contains(content, el));
-          elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+          if (evt.type !== "SETUP") {
+            (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, true);
+          }
+        },
+        invokeOnClose(ctx2, evt) {
+          var _a;
+          if (evt.type !== "SETUP") {
+            (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, false);
+          }
+        },
+        focusNextTabbableElementAfterTrigger(ctx2, evt) {
+          const content = dom.getContentEl(ctx2);
+          const button = dom.getTriggerEl(ctx2);
+          if (!content || !button)
+            return;
+          const lastTabbable = dom.getLastTabbableEl(ctx2);
+          if (lastTabbable !== dom.getActiveEl(ctx2))
+            return;
+          let tabbables = dom.getDocTabbableEls(ctx2);
+          let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+          if (elementAfterTrigger === content) {
+            tabbables = tabbables.filter((el) => !contains(content, el));
+            elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+          }
+          if (!elementAfterTrigger || elementAfterTrigger === button)
+            return;
+          evt.preventDefault();
+          raf(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
         }
-        if (!elementAfterTrigger || elementAfterTrigger === button)
-          return;
-        evt.preventDefault();
-        raf(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
       }
     }
-  });
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -308,262 +308,270 @@ import { preventBodyScroll } from "@zag-js/remove-scroll";
 import { createFocusTrap } from "focus-trap";
 var { and, or, not } = guards;
 function machine(ctx) {
-  return createMachine({
-    id: "popover",
-    initial: "unknown",
-    context: {
-      closeOnInteractOutside: true,
-      closeOnEsc: true,
-      autoFocus: true,
-      modal: false,
-      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
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: ctx.defaultOpen ? "open" : "closed",
-            actions: "checkRenderedElements"
-          }
+  return createMachine(
+    {
+      id: "popover",
+      initial: "unknown",
+      context: {
+        closeOnInteractOutside: true,
+        closeOnEsc: true,
+        autoFocus: true,
+        modal: false,
+        positioning: {
+          placement: "bottom",
+          ...ctx.positioning
+        },
+        currentPlacement: void 0,
+        ...ctx,
+        focusTriggerOnClose: true,
+        renderedElements: {
+          title: true,
+          description: true,
+          anchor: false
         }
       },
-      closed: {
-        entry: "invokeOnClose",
-        on: {
-          TOGGLE: "open",
-          OPEN: "open"
-        }
+      computed: {
+        currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
       },
-      open: {
-        activities: [
-          "trapFocus",
-          "preventScroll",
-          "hideContentBelow",
-          "computePlacement",
-          "trackInteractionOutside",
-          "trackTabKeyDown"
-        ],
-        entry: ["setInitialFocus", "invokeOnOpen"],
-        on: {
-          CLOSE: "closed",
-          REQUEST_CLOSE: {
-            target: "closed",
-            actions: "focusTriggerIfNeeded"
-          },
-          TOGGLE: "closed",
-          TRIGGER_BLUR: {
-            guard: not("isRelatedTargetWithinContent"),
-            target: "closed"
-          },
-          TAB: [
-            {
-              guard: and("isTriggerFocused", "portalled"),
-              actions: "focusFirstTabbableElement"
-            },
-            {
-              guard: and("isLastTabbableElement", "closeOnInteractOutside", "portalled"),
-              target: "closed",
-              actions: "focusNextTabbableElementAfterTrigger"
+      states: {
+        unknown: {
+          on: {
+            SETUP: {
+              target: ctx.defaultOpen ? "open" : "closed",
+              actions: "checkRenderedElements"
             }
+          }
+        },
+        closed: {
+          entry: "invokeOnClose",
+          on: {
+            TOGGLE: "open",
+            OPEN: "open"
+          }
+        },
+        open: {
+          activities: [
+            "trapFocus",
+            "preventScroll",
+            "hideContentBelow",
+            "computePlacement",
+            "trackInteractionOutside",
+            "trackTabKeyDown"
           ],
-          SHIFT_TAB: {
-            guard: and(or("isFirstTabbableElement", "isContentFocused"), "portalled"),
-            actions: "focusTriggerIfNeeded"
+          entry: ["setInitialFocus", "invokeOnOpen"],
+          on: {
+            CLOSE: "closed",
+            REQUEST_CLOSE: {
+              target: "closed",
+              actions: "focusTriggerIfNeeded"
+            },
+            TOGGLE: "closed",
+            TRIGGER_BLUR: {
+              guard: not("isRelatedTargetWithinContent"),
+              target: "closed"
+            },
+            TAB: [
+              {
+                guard: and("isTriggerFocused", "portalled"),
+                actions: "focusFirstTabbableElement"
+              },
+              {
+                guard: and("isLastTabbableElement", "closeOnInteractOutside", "portalled"),
+                target: "closed",
+                actions: "focusNextTabbableElementAfterTrigger"
+              }
+            ],
+            SHIFT_TAB: {
+              guard: and(or("isFirstTabbableElement", "isContentFocused"), "portalled"),
+              actions: "focusTriggerIfNeeded"
+            }
           }
         }
       }
-    }
-  }, {
-    activities: {
-      computePlacement(ctx2) {
-        ctx2.currentPlacement = ctx2.positioning.placement;
-        const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
-        return getPlacement(anchorEl, dom.getPositionerEl(ctx2), {
-          ...ctx2.positioning,
-          onComplete(data) {
-            ctx2.currentPlacement = data.placement;
-            ctx2.isPlacementComplete = true;
-          },
-          onCleanup() {
-            ctx2.currentPlacement = void 0;
-            ctx2.isPlacementComplete = false;
-          }
-        });
-      },
-      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();
+    },
+    {
+      activities: {
+        computePlacement(ctx2) {
+          ctx2.currentPlacement = ctx2.positioning.placement;
+          const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+          return getPlacement(anchorEl, dom.getPositionerEl(ctx2), {
+            ...ctx2.positioning,
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+              ctx2.isPlacementComplete = true;
+            },
+            onCleanup() {
+              ctx2.currentPlacement = void 0;
+              ctx2.isPlacementComplete = false;
             }
-          },
-          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) {
+          });
+        },
+        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" });
             }
-          },
-          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)
+          });
+        },
+        trackTabKeyDown(ctx2, _evt, { send }) {
+          if (ctx2.modal)
             return;
-          send({
-            type: event.shiftKey ? "SHIFT_TAB" : "TAB",
-            preventDefault: () => event.preventDefault()
+          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 cleanup;
+          nextTick(() => {
+            cleanup = ariaHidden([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
           });
-        }, true);
-      },
-      hideContentBelow(ctx2) {
-        if (!ctx2.modal)
-          return;
-        let cleanup;
-        nextTick(() => {
-          cleanup = ariaHidden([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
-        });
-        return () => cleanup == null ? void 0 : cleanup();
+          return () => cleanup == null ? void 0 : cleanup();
+        },
+        preventScroll(ctx2) {
+          if (!ctx2.modal)
+            return;
+          return preventBodyScroll(dom.getDoc(ctx2));
+        },
+        trapFocus(ctx2) {
+          if (!ctx2.modal)
+            return;
+          let trap;
+          nextTick(() => {
+            const el = dom.getContentEl(ctx2);
+            if (!el)
+              return;
+            trap = createFocusTrap(el, {
+              escapeDeactivates: false,
+              allowOutsideClick: true,
+              returnFocusOnDeactivate: true,
+              document: dom.getDoc(ctx2),
+              fallbackFocus: el,
+              initialFocus: runIfFn2(ctx2.initialFocusEl)
+            });
+            try {
+              trap.activate();
+            } catch {
+            }
+          });
+          return () => trap == null ? void 0 : trap.deactivate();
+        }
       },
-      preventScroll(ctx2) {
-        if (!ctx2.modal)
-          return;
-        return preventBodyScroll(dom.getDoc(ctx2));
+      guards: {
+        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)
       },
-      trapFocus(ctx2) {
-        if (!ctx2.modal)
-          return;
-        let trap;
-        nextTick(() => {
-          const el = dom.getContentEl(ctx2);
-          if (!el)
-            return;
-          trap = createFocusTrap(el, {
-            escapeDeactivates: false,
-            allowOutsideClick: true,
-            returnFocusOnDeactivate: true,
-            document: dom.getDoc(ctx2),
-            fallbackFocus: el,
-            initialFocus: runIfFn2(ctx2.initialFocusEl)
+      actions: {
+        checkRenderedElements(ctx2) {
+          raf(() => {
+            Object.assign(ctx2.renderedElements, {
+              title: !!dom.getTitleEl(ctx2),
+              description: !!dom.getDescriptionEl(ctx2),
+              anchor: !!dom.getAnchorEl(ctx2)
+            });
           });
-          try {
-            trap.activate();
-          } catch {
-          }
-        });
-        return () => trap == null ? void 0 : trap.deactivate();
-      }
-    },
-    guards: {
-      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)
-    },
-    actions: {
-      checkRenderedElements(ctx2) {
-        raf(() => {
-          Object.assign(ctx2.renderedElements, {
-            title: !!dom.getTitleEl(ctx2),
-            description: !!dom.getDescriptionEl(ctx2),
-            anchor: !!dom.getAnchorEl(ctx2)
+        },
+        setInitialFocus(ctx2) {
+          raf(() => {
+            var _a;
+            (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
           });
-        });
-      },
-      setInitialFocus(ctx2) {
-        raf(() => {
+        },
+        focusTriggerIfNeeded(ctx2) {
+          if (!ctx2.focusTriggerOnClose)
+            return;
+          raf(() => {
+            var _a;
+            return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        focusFirstTabbableElement(ctx2, evt) {
           var _a;
-          (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      focusTriggerIfNeeded(ctx2) {
-        if (!ctx2.focusTriggerOnClose)
-          return;
-        raf(() => {
+          evt.preventDefault();
+          (_a = dom.getFirstTabbableEl(ctx2)) == null ? void 0 : _a.focus();
+        },
+        invokeOnOpen(ctx2, evt) {
           var _a;
-          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.onOpenChange) == null ? void 0 : _a.call(ctx2, true);
-        }
-      },
-      invokeOnClose(ctx2, evt) {
-        var _a;
-        if (evt.type !== "SETUP") {
-          (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, false);
-        }
-      },
-      focusNextTabbableElementAfterTrigger(ctx2, evt) {
-        const content = dom.getContentEl(ctx2);
-        const button = dom.getTriggerEl(ctx2);
-        if (!content || !button)
-          return;
-        const lastTabbable = dom.getLastTabbableEl(ctx2);
-        if (lastTabbable !== dom.getActiveEl(ctx2))
-          return;
-        let tabbables = dom.getDocTabbableEls(ctx2);
-        let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
-        if (elementAfterTrigger === content) {
-          tabbables = tabbables.filter((el) => !contains(content, el));
-          elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+          if (evt.type !== "SETUP") {
+            (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, true);
+          }
+        },
+        invokeOnClose(ctx2, evt) {
+          var _a;
+          if (evt.type !== "SETUP") {
+            (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, false);
+          }
+        },
+        focusNextTabbableElementAfterTrigger(ctx2, evt) {
+          const content = dom.getContentEl(ctx2);
+          const button = dom.getTriggerEl(ctx2);
+          if (!content || !button)
+            return;
+          const lastTabbable = dom.getLastTabbableEl(ctx2);
+          if (lastTabbable !== dom.getActiveEl(ctx2))
+            return;
+          let tabbables = dom.getDocTabbableEls(ctx2);
+          let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+          if (elementAfterTrigger === content) {
+            tabbables = tabbables.filter((el) => !contains(content, el));
+            elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+          }
+          if (!elementAfterTrigger || elementAfterTrigger === button)
+            return;
+          evt.preventDefault();
+          raf(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
         }
-        if (!elementAfterTrigger || elementAfterTrigger === button)
-          return;
-        evt.preventDefault();
-        raf(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
       }
     }
-  });
+  );
 }
 export {
   connect,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -32,13 +32,13 @@
     "@zag-js/aria-hidden": "0.1.1",
     "@zag-js/core": "0.1.9",
     "@zag-js/dismissable": "0.1.3",
-    "@zag-js/popper": "0.1.9",
+    "@zag-js/popper": "0.1.10",
     "@zag-js/remove-scroll": "0.1.3",
     "@zag-js/types": "0.2.3",
     "focus-trap": "6.9.4"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.8",
+    "@zag-js/dom-utils": "0.1.9",
     "@zag-js/utils": "0.1.3"
   },
   "scripts": {