@zag-js/popover 0.2.13 → 0.5.0

package/dist/{chunk-JT2RXXW4.mjs → chunk-I6GHRN6K.mjs}

@@ -4,21 +4,20 @@ import {
 
 // src/popover.machine.ts
 import { ariaHidden } from "@zag-js/aria-hidden";
-import { createMachine, guards } from "@zag-js/core";
+import { createMachine } from "@zag-js/core";
 import { trackDismissableElement } from "@zag-js/dismissable";
-import { contains, nextTick, raf } from "@zag-js/dom-query";
-import { addDomEvent, isModifiedEvent } from "@zag-js/dom-event";
+import { nextTick, raf } from "@zag-js/dom-query";
 import { getPlacement } from "@zag-js/popper";
 import { preventBodyScroll } from "@zag-js/remove-scroll";
-import { compact, next, runIfFn } from "@zag-js/utils";
+import { proxyTabFocus } from "@zag-js/tabbable";
+import { compact, runIfFn } from "@zag-js/utils";
 import { createFocusTrap } from "focus-trap";
-var { and, or, not } = guards;
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
     {
       id: "popover",
-      initial: ctx.defaultOpen ? "open" : "closed",
+      initial: ctx.open ? "open" : "closed",
       context: {
         closeOnInteractOutside: true,
         closeOnEsc: true,
@@ -33,13 +32,15 @@ function machine(userContext) {
         focusTriggerOnClose: true,
         renderedElements: {
           title: true,
-          description: true,
-          anchor: false
+          description: true
         }
       },
       computed: {
         currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
       },
+      watch: {
+        open: ["toggleVisibility"]
+      },
       entry: ["checkRenderedElements"],
       states: {
         closed: {
@@ -54,9 +55,9 @@ function machine(userContext) {
             "trapFocus",
             "preventScroll",
             "hideContentBelow",
-            "computePlacement",
-            "trackInteractionOutside",
-            "trackTabKeyDown"
+            "trackPositioning",
+            "trackDismissableElement",
+            "proxyTabFocus"
           ],
           entry: ["setInitialFocus", "invokeOnOpen"],
           on: {
@@ -66,24 +67,8 @@ function machine(userContext) {
               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"
+            SET_POSITIONING: {
+              actions: "setPositioning"
             }
           }
         }
@@ -91,22 +76,20 @@ function machine(userContext) {
     },
     {
       activities: {
-        computePlacement(ctx2) {
+        trackPositioning(ctx2) {
           ctx2.currentPlacement = ctx2.positioning.placement;
-          const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+          const anchorEl = 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 }) {
+        trackDismissableElement(ctx2, _evt, { send }) {
           return trackDismissableElement(dom.getContentEl(ctx2), {
             pointerBlocking: ctx2.modal,
             exclude: dom.getTriggerEl(ctx2),
@@ -131,32 +114,18 @@ function machine(userContext) {
             },
             onFocusOutside(event) {
               ctx2.onFocusOutside?.(event);
-              if (ctx2.currentPortalled) {
-                event.preventDefault();
-              }
             },
             onDismiss() {
               send({ type: "REQUEST_CLOSE", src: "#interact-outside" });
             }
           });
         },
-        trackTabKeyDown(ctx2, _evt, { send }) {
-          if (ctx2.modal)
+        proxyTabFocus(ctx2) {
+          if (ctx2.modal || !ctx2.portalled)
             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
-          );
+          return proxyTabFocus(dom.getContentEl(ctx2), dom.getTriggerEl(ctx2), (el) => {
+            el.focus({ preventScroll: true });
+          });
         },
         hideContentBelow(ctx2) {
           if (!ctx2.modal)
@@ -196,22 +165,22 @@ function machine(userContext) {
           return () => 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: {
+        setPositioning(ctx2, evt) {
+          raf(() => {
+            const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
+            getPlacement(anchorEl, dom.getPositionerEl(ctx2), {
+              ...ctx2.positioning,
+              ...evt.options,
+              listeners: false
+            });
+          });
+        },
         checkRenderedElements(ctx2) {
           raf(() => {
             Object.assign(ctx2.renderedElements, {
               title: !!dom.getTitleEl(ctx2),
-              description: !!dom.getDescriptionEl(ctx2),
-              anchor: !!dom.getAnchorEl(ctx2)
+              description: !!dom.getDescriptionEl(ctx2)
             });
           });
         },
@@ -225,38 +194,14 @@ function machine(userContext) {
             return;
           raf(() => dom.getTriggerEl(ctx2)?.focus());
         },
-        focusFirstTabbableElement(ctx2, evt) {
-          evt.preventDefault();
-          dom.getFirstTabbableEl(ctx2)?.focus();
-        },
-        invokeOnOpen(ctx2, evt) {
-          if (evt.type !== "SETUP") {
-            ctx2.onOpenChange?.(true);
-          }
+        invokeOnOpen(ctx2) {
+          ctx2.onOpenChange?.(true);
         },
-        invokeOnClose(ctx2, evt) {
-          if (evt.type !== "SETUP") {
-            ctx2.onOpenChange?.(false);
-          }
+        invokeOnClose(ctx2) {
+          ctx2.onOpenChange?.(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?.focus());
+        toggleVisibility(ctx2, _evt, { send }) {
+          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
         }
       }
     }

package/dist/{chunk-GKHXQZZB.mjs → chunk-QLF6NDJW.mjs}

@@ -14,7 +14,6 @@ function connect(state, send, normalize) {
   const portalled = state.context.currentPortalled;
   const rendered = state.context.renderedElements;
   const popperStyles = getPlacementStyles({
-    measured: !!state.context.isPlacementComplete,
     placement: currentPlacement
   });
   return {
@@ -38,6 +37,12 @@ function connect(state, send, normalize) {
     close() {
       send("CLOSE");
     },
+    /**
+     * Function to reposition the popover
+     */
+    setPositioning(options) {
+      send({ type: "SET_POSITIONING", options });
+    },
     arrowProps: normalize.element({
       id: dom.getArrowId(state.context),
       ...parts.arrow.attrs,

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { connect } from './popover.connect.js';
 export { machine } from './popover.machine.js';
 export { UserDefinedContext as Context } from './popover.types.js';
 import '@zag-js/anatomy';
+import '@zag-js/popper';
 import '@zag-js/types';
 import '@zag-js/core';
 import '@zag-js/dismissable';
-import '@zag-js/popper';

package/dist/index.js

@@ -88,7 +88,6 @@ function connect(state, send, normalize) {
   const portalled = state.context.currentPortalled;
   const rendered = state.context.renderedElements;
   const popperStyles = (0, import_popper.getPlacementStyles)({
-    measured: !!state.context.isPlacementComplete,
     placement: currentPlacement
   });
   return {
@@ -112,6 +111,12 @@ function connect(state, send, normalize) {
     close() {
       send("CLOSE");
     },
+    /**
+     * Function to reposition the popover
+     */
+    setPositioning(options) {
+      send({ type: "SET_POSITIONING", options });
+    },
     arrowProps: normalize.element({
       id: dom.getArrowId(state.context),
       ...parts.arrow.attrs,
@@ -182,18 +187,17 @@ var import_aria_hidden = require("@zag-js/aria-hidden");
 var import_core = require("@zag-js/core");
 var import_dismissable = require("@zag-js/dismissable");
 var import_dom_query3 = require("@zag-js/dom-query");
-var import_dom_event = require("@zag-js/dom-event");
 var import_popper2 = require("@zag-js/popper");
 var import_remove_scroll = require("@zag-js/remove-scroll");
+var import_tabbable2 = require("@zag-js/tabbable");
 var import_utils2 = require("@zag-js/utils");
 var import_focus_trap = require("focus-trap");
-var { and, or, not } = import_core.guards;
 function machine(userContext) {
   const ctx = (0, import_utils2.compact)(userContext);
   return (0, import_core.createMachine)(
     {
       id: "popover",
-      initial: ctx.defaultOpen ? "open" : "closed",
+      initial: ctx.open ? "open" : "closed",
       context: {
         closeOnInteractOutside: true,
         closeOnEsc: true,
@@ -208,13 +212,15 @@ function machine(userContext) {
         focusTriggerOnClose: true,
         renderedElements: {
           title: true,
-          description: true,
-          anchor: false
+          description: true
         }
       },
       computed: {
         currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
       },
+      watch: {
+        open: ["toggleVisibility"]
+      },
       entry: ["checkRenderedElements"],
       states: {
         closed: {
@@ -229,9 +235,9 @@ function machine(userContext) {
             "trapFocus",
             "preventScroll",
             "hideContentBelow",
-            "computePlacement",
-            "trackInteractionOutside",
-            "trackTabKeyDown"
+            "trackPositioning",
+            "trackDismissableElement",
+            "proxyTabFocus"
           ],
           entry: ["setInitialFocus", "invokeOnOpen"],
           on: {
@@ -241,24 +247,8 @@ function machine(userContext) {
               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"
+            SET_POSITIONING: {
+              actions: "setPositioning"
             }
           }
         }
@@ -266,22 +256,20 @@ function machine(userContext) {
     },
     {
       activities: {
-        computePlacement(ctx2) {
+        trackPositioning(ctx2) {
           ctx2.currentPlacement = ctx2.positioning.placement;
-          const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+          const anchorEl = 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 }) {
+        trackDismissableElement(ctx2, _evt, { send }) {
           return (0, import_dismissable.trackDismissableElement)(dom.getContentEl(ctx2), {
             pointerBlocking: ctx2.modal,
             exclude: dom.getTriggerEl(ctx2),
@@ -306,32 +294,18 @@ function machine(userContext) {
             },
             onFocusOutside(event) {
               ctx2.onFocusOutside?.(event);
-              if (ctx2.currentPortalled) {
-                event.preventDefault();
-              }
             },
             onDismiss() {
               send({ type: "REQUEST_CLOSE", src: "#interact-outside" });
             }
           });
         },
-        trackTabKeyDown(ctx2, _evt, { send }) {
-          if (ctx2.modal)
+        proxyTabFocus(ctx2) {
+          if (ctx2.modal || !ctx2.portalled)
             return;
-          return (0, import_dom_event.addDomEvent)(
-            dom.getWin(ctx2),
-            "keydown",
-            (event) => {
-              const isTabKey = event.key === "Tab" && !(0, import_dom_event.isModifiedEvent)(event);
-              if (!isTabKey)
-                return;
-              send({
-                type: event.shiftKey ? "SHIFT_TAB" : "TAB",
-                preventDefault: () => event.preventDefault()
-              });
-            },
-            true
-          );
+          return (0, import_tabbable2.proxyTabFocus)(dom.getContentEl(ctx2), dom.getTriggerEl(ctx2), (el) => {
+            el.focus({ preventScroll: true });
+          });
         },
         hideContentBelow(ctx2) {
           if (!ctx2.modal)
@@ -371,22 +345,22 @@ function machine(userContext) {
           return () => trap?.deactivate();
         }
       },
-      guards: {
-        portalled: (ctx2) => ctx2.currentPortalled,
-        isRelatedTargetWithinContent: (ctx2, evt) => (0, import_dom_query3.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: {
+        setPositioning(ctx2, evt) {
+          (0, import_dom_query3.raf)(() => {
+            const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
+            (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), {
+              ...ctx2.positioning,
+              ...evt.options,
+              listeners: false
+            });
+          });
+        },
         checkRenderedElements(ctx2) {
           (0, import_dom_query3.raf)(() => {
             Object.assign(ctx2.renderedElements, {
               title: !!dom.getTitleEl(ctx2),
-              description: !!dom.getDescriptionEl(ctx2),
-              anchor: !!dom.getAnchorEl(ctx2)
+              description: !!dom.getDescriptionEl(ctx2)
             });
           });
         },
@@ -400,38 +374,14 @@ function machine(userContext) {
             return;
           (0, import_dom_query3.raf)(() => dom.getTriggerEl(ctx2)?.focus());
         },
-        focusFirstTabbableElement(ctx2, evt) {
-          evt.preventDefault();
-          dom.getFirstTabbableEl(ctx2)?.focus();
-        },
-        invokeOnOpen(ctx2, evt) {
-          if (evt.type !== "SETUP") {
-            ctx2.onOpenChange?.(true);
-          }
+        invokeOnOpen(ctx2) {
+          ctx2.onOpenChange?.(true);
         },
-        invokeOnClose(ctx2, evt) {
-          if (evt.type !== "SETUP") {
-            ctx2.onOpenChange?.(false);
-          }
+        invokeOnClose(ctx2) {
+          ctx2.onOpenChange?.(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 = (0, import_utils2.next)(tabbables, tabbables.indexOf(button), { loop: false });
-          if (elementAfterTrigger === content) {
-            tabbables = tabbables.filter((el) => !(0, import_dom_query3.contains)(content, el));
-            elementAfterTrigger = (0, import_utils2.next)(tabbables, tabbables.indexOf(button), { loop: false });
-          }
-          if (!elementAfterTrigger || elementAfterTrigger === button)
-            return;
-          evt.preventDefault();
-          (0, import_dom_query3.raf)(() => elementAfterTrigger?.focus());
+        toggleVisibility(ctx2, _evt, { send }) {
+          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
         }
       }
     }

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import {
   connect
-} from "./chunk-GKHXQZZB.mjs";
+} from "./chunk-QLF6NDJW.mjs";
 import {
   anatomy
 } from "./chunk-KTOPDXGV.mjs";
 import {
   machine
-} from "./chunk-JT2RXXW4.mjs";
+} from "./chunk-I6GHRN6K.mjs";
 import "./chunk-4IGGT6KB.mjs";
 export {
   anatomy,

package/dist/popover.connect.d.ts

@@ -1,8 +1,8 @@
+import { PositioningOptions } from '@zag-js/popper';
 import { PropTypes, NormalizeProps } from '@zag-js/types';
 import { State, Send } from './popover.types.js';
 import '@zag-js/core';
 import '@zag-js/dismissable';
-import '@zag-js/popper';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
     /**
@@ -21,6 +21,10 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
      * Function to close the popover
      */
     close(): void;
+    /**
+     * Function to reposition the popover
+     */
+    setPositioning(options: Partial<PositioningOptions>): void;
     arrowProps: T["element"];
     arrowTipProps: T["element"];
     anchorProps: T["element"];

package/dist/popover.connect.js

@@ -84,7 +84,6 @@ function connect(state, send, normalize) {
   const portalled = state.context.currentPortalled;
   const rendered = state.context.renderedElements;
   const popperStyles = (0, import_popper.getPlacementStyles)({
-    measured: !!state.context.isPlacementComplete,
     placement: currentPlacement
   });
   return {
@@ -108,6 +107,12 @@ function connect(state, send, normalize) {
     close() {
       send("CLOSE");
     },
+    /**
+     * Function to reposition the popover
+     */
+    setPositioning(options) {
+      send({ type: "SET_POSITIONING", options });
+    },
     arrowProps: normalize.element({
       id: dom.getArrowId(state.context),
       ...parts.arrow.attrs,

package/dist/popover.connect.mjs

@@ -1,6 +1,6 @@
 import {
   connect
-} from "./chunk-GKHXQZZB.mjs";
+} from "./chunk-QLF6NDJW.mjs";
 import "./chunk-KTOPDXGV.mjs";
 import "./chunk-4IGGT6KB.mjs";
 export {

package/dist/popover.machine.js

@@ -27,9 +27,9 @@ var import_aria_hidden = require("@zag-js/aria-hidden");
 var import_core = require("@zag-js/core");
 var import_dismissable = require("@zag-js/dismissable");
 var import_dom_query2 = require("@zag-js/dom-query");
-var import_dom_event = require("@zag-js/dom-event");
 var import_popper = require("@zag-js/popper");
 var import_remove_scroll = require("@zag-js/remove-scroll");
+var import_tabbable2 = require("@zag-js/tabbable");
 var import_utils2 = require("@zag-js/utils");
 var import_focus_trap = require("focus-trap");
 
@@ -70,13 +70,12 @@ var dom = (0, import_dom_query.createScope)({
 });
 
 // src/popover.machine.ts
-var { and, or, not } = import_core.guards;
 function machine(userContext) {
   const ctx = (0, import_utils2.compact)(userContext);
   return (0, import_core.createMachine)(
     {
       id: "popover",
-      initial: ctx.defaultOpen ? "open" : "closed",
+      initial: ctx.open ? "open" : "closed",
       context: {
         closeOnInteractOutside: true,
         closeOnEsc: true,
@@ -91,13 +90,15 @@ function machine(userContext) {
         focusTriggerOnClose: true,
         renderedElements: {
           title: true,
-          description: true,
-          anchor: false
+          description: true
         }
       },
       computed: {
         currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
       },
+      watch: {
+        open: ["toggleVisibility"]
+      },
       entry: ["checkRenderedElements"],
       states: {
         closed: {
@@ -112,9 +113,9 @@ function machine(userContext) {
             "trapFocus",
             "preventScroll",
             "hideContentBelow",
-            "computePlacement",
-            "trackInteractionOutside",
-            "trackTabKeyDown"
+            "trackPositioning",
+            "trackDismissableElement",
+            "proxyTabFocus"
           ],
           entry: ["setInitialFocus", "invokeOnOpen"],
           on: {
@@ -124,24 +125,8 @@ function machine(userContext) {
               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"
+            SET_POSITIONING: {
+              actions: "setPositioning"
             }
           }
         }
@@ -149,22 +134,20 @@ function machine(userContext) {
     },
     {
       activities: {
-        computePlacement(ctx2) {
+        trackPositioning(ctx2) {
           ctx2.currentPlacement = ctx2.positioning.placement;
-          const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
           return (0, import_popper.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 }) {
+        trackDismissableElement(ctx2, _evt, { send }) {
           return (0, import_dismissable.trackDismissableElement)(dom.getContentEl(ctx2), {
             pointerBlocking: ctx2.modal,
             exclude: dom.getTriggerEl(ctx2),
@@ -189,32 +172,18 @@ function machine(userContext) {
             },
             onFocusOutside(event) {
               ctx2.onFocusOutside?.(event);
-              if (ctx2.currentPortalled) {
-                event.preventDefault();
-              }
             },
             onDismiss() {
               send({ type: "REQUEST_CLOSE", src: "#interact-outside" });
             }
           });
         },
-        trackTabKeyDown(ctx2, _evt, { send }) {
-          if (ctx2.modal)
+        proxyTabFocus(ctx2) {
+          if (ctx2.modal || !ctx2.portalled)
             return;
-          return (0, import_dom_event.addDomEvent)(
-            dom.getWin(ctx2),
-            "keydown",
-            (event) => {
-              const isTabKey = event.key === "Tab" && !(0, import_dom_event.isModifiedEvent)(event);
-              if (!isTabKey)
-                return;
-              send({
-                type: event.shiftKey ? "SHIFT_TAB" : "TAB",
-                preventDefault: () => event.preventDefault()
-              });
-            },
-            true
-          );
+          return (0, import_tabbable2.proxyTabFocus)(dom.getContentEl(ctx2), dom.getTriggerEl(ctx2), (el) => {
+            el.focus({ preventScroll: true });
+          });
         },
         hideContentBelow(ctx2) {
           if (!ctx2.modal)
@@ -254,22 +223,22 @@ function machine(userContext) {
           return () => trap?.deactivate();
         }
       },
-      guards: {
-        portalled: (ctx2) => ctx2.currentPortalled,
-        isRelatedTargetWithinContent: (ctx2, evt) => (0, import_dom_query2.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: {
+        setPositioning(ctx2, evt) {
+          (0, import_dom_query2.raf)(() => {
+            const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
+            (0, import_popper.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), {
+              ...ctx2.positioning,
+              ...evt.options,
+              listeners: false
+            });
+          });
+        },
         checkRenderedElements(ctx2) {
           (0, import_dom_query2.raf)(() => {
             Object.assign(ctx2.renderedElements, {
               title: !!dom.getTitleEl(ctx2),
-              description: !!dom.getDescriptionEl(ctx2),
-              anchor: !!dom.getAnchorEl(ctx2)
+              description: !!dom.getDescriptionEl(ctx2)
             });
           });
         },
@@ -283,38 +252,14 @@ function machine(userContext) {
             return;
           (0, import_dom_query2.raf)(() => dom.getTriggerEl(ctx2)?.focus());
         },
-        focusFirstTabbableElement(ctx2, evt) {
-          evt.preventDefault();
-          dom.getFirstTabbableEl(ctx2)?.focus();
-        },
-        invokeOnOpen(ctx2, evt) {
-          if (evt.type !== "SETUP") {
-            ctx2.onOpenChange?.(true);
-          }
+        invokeOnOpen(ctx2) {
+          ctx2.onOpenChange?.(true);
         },
-        invokeOnClose(ctx2, evt) {
-          if (evt.type !== "SETUP") {
-            ctx2.onOpenChange?.(false);
-          }
+        invokeOnClose(ctx2) {
+          ctx2.onOpenChange?.(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 = (0, import_utils2.next)(tabbables, tabbables.indexOf(button), { loop: false });
-          if (elementAfterTrigger === content) {
-            tabbables = tabbables.filter((el) => !(0, import_dom_query2.contains)(content, el));
-            elementAfterTrigger = (0, import_utils2.next)(tabbables, tabbables.indexOf(button), { loop: false });
-          }
-          if (!elementAfterTrigger || elementAfterTrigger === button)
-            return;
-          evt.preventDefault();
-          (0, import_dom_query2.raf)(() => elementAfterTrigger?.focus());
+        toggleVisibility(ctx2, _evt, { send }) {
+          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
         }
       }
     }

package/dist/popover.machine.mjs

@@ -1,6 +1,6 @@
 import {
   machine
-} from "./chunk-JT2RXXW4.mjs";
+} from "./chunk-I6GHRN6K.mjs";
 import "./chunk-4IGGT6KB.mjs";
 export {
   machine

package/dist/popover.types.d.ts

@@ -56,9 +56,9 @@ type PublicContext = DismissableElementHandlers & CommonProperties & {
      */
     positioning: PositioningOptions;
     /**
-     * Whether to open the popover on page load
+     * Whether the popover is open
      */
-    defaultOpen?: boolean;
+    open?: boolean;
 };
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.2.13",
+  "version": "0.5.0",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,18 +26,17 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "focus-trap": "7.3.1",
+    "focus-trap": "7.4.0",
     "@zag-js/anatomy": "0.1.4",
     "@zag-js/aria-hidden": "0.2.2",
-    "@zag-js/core": "0.2.10",
+    "@zag-js/core": "0.5.0",
     "@zag-js/dom-query": "0.1.4",
-    "@zag-js/dom-event": "0.0.1",
-    "@zag-js/utils": "0.3.3",
-    "@zag-js/dismissable": "0.2.4",
-    "@zag-js/tabbable": "0.0.1",
-    "@zag-js/popper": "0.2.5",
+    "@zag-js/utils": "0.3.4",
+    "@zag-js/dismissable": "0.5.0",
+    "@zag-js/tabbable": "0.1.1",
+    "@zag-js/popper": "0.2.7",
     "@zag-js/remove-scroll": "0.2.4",
-    "@zag-js/types": "0.3.4"
+    "@zag-js/types": "0.5.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"