@zag-js/popover 0.7.0 → 0.8.0

package/dist/{chunk-HXXI3VDD.mjs → chunk-KWS6ZCAX.mjs}

@@ -29,7 +29,6 @@ function machine(userContext) {
         },
         currentPlacement: void 0,
         ...ctx,
-        focusTriggerOnClose: true,
         renderedElements: {
           title: true,
           description: true
@@ -44,10 +43,15 @@ function machine(userContext) {
       entry: ["checkRenderedElements"],
       states: {
         closed: {
-          entry: "invokeOnClose",
           on: {
-            TOGGLE: "open",
-            OPEN: "open"
+            TOGGLE: {
+              target: "open",
+              actions: ["invokeOnOpen"]
+            },
+            OPEN: {
+              target: "open",
+              actions: ["invokeOnOpen"]
+            }
           }
         },
         open: {
@@ -59,14 +63,20 @@ function machine(userContext) {
             "trackDismissableElement",
             "proxyTabFocus"
           ],
-          entry: ["setInitialFocus", "invokeOnOpen"],
+          entry: ["setInitialFocus"],
           on: {
-            CLOSE: "closed",
+            CLOSE: {
+              target: "closed",
+              actions: ["invokeOnClose"]
+            },
             REQUEST_CLOSE: {
               target: "closed",
-              actions: "focusTriggerIfNeeded"
+              actions: ["restoreFocusIfNeeded", "invokeOnClose"]
+            },
+            TOGGLE: {
+              target: "closed",
+              actions: ["invokeOnClose"]
             },
-            TOGGLE: "closed",
             SET_POSITIONING: {
               actions: "setPositioning"
             }
@@ -79,8 +89,10 @@ function machine(userContext) {
         trackPositioning(ctx2) {
           ctx2.currentPlacement = ctx2.positioning.placement;
           const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
-          return getPlacement(anchorEl, dom.getPositionerEl(ctx2), {
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          return getPlacement(anchorEl, getPositionerEl, {
             ...ctx2.positioning,
+            defer: true,
             onComplete(data) {
               ctx2.currentPlacement = data.placement;
             },
@@ -90,21 +102,23 @@ function machine(userContext) {
           });
         },
         trackDismissableElement(ctx2, _evt, { send }) {
-          return trackDismissableElement(dom.getContentEl(ctx2), {
+          const getContentEl = () => dom.getContentEl(ctx2);
+          let restoreFocus = true;
+          return trackDismissableElement(getContentEl, {
             pointerBlocking: ctx2.modal,
             exclude: dom.getTriggerEl(ctx2),
+            defer: true,
             onEscapeKeyDown(event) {
               ctx2.onEscapeKeyDown?.(event);
               if (ctx2.closeOnEsc)
                 return;
-              ctx2.focusTriggerOnClose = true;
               event.preventDefault();
             },
             onInteractOutside(event) {
               ctx2.onInteractOutside?.(event);
               if (event.defaultPrevented)
                 return;
-              ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
               if (!ctx2.closeOnInteractOutside) {
                 event.preventDefault();
               }
@@ -116,25 +130,27 @@ function machine(userContext) {
               ctx2.onFocusOutside?.(event);
             },
             onDismiss() {
-              send({ type: "REQUEST_CLOSE", src: "#interact-outside" });
+              send({ type: "REQUEST_CLOSE", src: "interact-outside", restoreFocus });
             }
           });
         },
         proxyTabFocus(ctx2) {
           if (ctx2.modal || !ctx2.portalled)
             return;
-          return proxyTabFocus(dom.getContentEl(ctx2), dom.getTriggerEl(ctx2), (el) => {
-            el.focus({ preventScroll: true });
+          const getContentEl = () => dom.getContentEl(ctx2);
+          return proxyTabFocus(getContentEl, {
+            triggerElement: dom.getTriggerEl(ctx2),
+            defer: true,
+            onFocus(el) {
+              el.focus({ preventScroll: true });
+            }
           });
         },
         hideContentBelow(ctx2) {
           if (!ctx2.modal)
             return;
-          let cleanup;
-          nextTick(() => {
-            cleanup = ariaHidden([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
-          });
-          return () => cleanup?.();
+          const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
+          return ariaHidden(getElements, { defer: true });
         },
         preventScroll(ctx2) {
           if (!ctx2.modal)
@@ -167,13 +183,13 @@ function machine(userContext) {
       },
       actions: {
         setPositioning(ctx2, evt) {
-          raf(() => {
-            const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
-            getPlacement(anchorEl, dom.getPositionerEl(ctx2), {
-              ...ctx2.positioning,
-              ...evt.options,
-              listeners: false
-            });
+          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          getPlacement(anchorEl, getPositionerEl, {
+            ...ctx2.positioning,
+            ...evt.options,
+            defer: true,
+            listeners: false
           });
         },
         checkRenderedElements(ctx2) {
@@ -189,10 +205,12 @@ function machine(userContext) {
             dom.getInitialFocusEl(ctx2)?.focus();
           });
         },
-        focusTriggerIfNeeded(ctx2) {
-          if (!ctx2.focusTriggerOnClose)
+        restoreFocusIfNeeded(ctx2, evt) {
+          if (!evt.restoreFocus)
             return;
-          raf(() => dom.getTriggerEl(ctx2)?.focus());
+          raf(() => {
+            dom.getTriggerEl(ctx2)?.focus();
+          });
         },
         invokeOnOpen(ctx2) {
           ctx2.onOpen?.();

package/dist/index.js

@@ -209,7 +209,6 @@ function machine(userContext) {
         },
         currentPlacement: void 0,
         ...ctx,
-        focusTriggerOnClose: true,
         renderedElements: {
           title: true,
           description: true
@@ -224,10 +223,15 @@ function machine(userContext) {
       entry: ["checkRenderedElements"],
       states: {
         closed: {
-          entry: "invokeOnClose",
           on: {
-            TOGGLE: "open",
-            OPEN: "open"
+            TOGGLE: {
+              target: "open",
+              actions: ["invokeOnOpen"]
+            },
+            OPEN: {
+              target: "open",
+              actions: ["invokeOnOpen"]
+            }
           }
         },
         open: {
@@ -239,14 +243,20 @@ function machine(userContext) {
             "trackDismissableElement",
             "proxyTabFocus"
           ],
-          entry: ["setInitialFocus", "invokeOnOpen"],
+          entry: ["setInitialFocus"],
           on: {
-            CLOSE: "closed",
+            CLOSE: {
+              target: "closed",
+              actions: ["invokeOnClose"]
+            },
             REQUEST_CLOSE: {
               target: "closed",
-              actions: "focusTriggerIfNeeded"
+              actions: ["restoreFocusIfNeeded", "invokeOnClose"]
+            },
+            TOGGLE: {
+              target: "closed",
+              actions: ["invokeOnClose"]
             },
-            TOGGLE: "closed",
             SET_POSITIONING: {
               actions: "setPositioning"
             }
@@ -259,8 +269,10 @@ function machine(userContext) {
         trackPositioning(ctx2) {
           ctx2.currentPlacement = ctx2.positioning.placement;
           const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
-          return (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), {
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          return (0, import_popper2.getPlacement)(anchorEl, getPositionerEl, {
             ...ctx2.positioning,
+            defer: true,
             onComplete(data) {
               ctx2.currentPlacement = data.placement;
             },
@@ -270,21 +282,23 @@ function machine(userContext) {
           });
         },
         trackDismissableElement(ctx2, _evt, { send }) {
-          return (0, import_dismissable.trackDismissableElement)(dom.getContentEl(ctx2), {
+          const getContentEl = () => dom.getContentEl(ctx2);
+          let restoreFocus = true;
+          return (0, import_dismissable.trackDismissableElement)(getContentEl, {
             pointerBlocking: ctx2.modal,
             exclude: dom.getTriggerEl(ctx2),
+            defer: true,
             onEscapeKeyDown(event) {
               ctx2.onEscapeKeyDown?.(event);
               if (ctx2.closeOnEsc)
                 return;
-              ctx2.focusTriggerOnClose = true;
               event.preventDefault();
             },
             onInteractOutside(event) {
               ctx2.onInteractOutside?.(event);
               if (event.defaultPrevented)
                 return;
-              ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
               if (!ctx2.closeOnInteractOutside) {
                 event.preventDefault();
               }
@@ -296,25 +310,27 @@ function machine(userContext) {
               ctx2.onFocusOutside?.(event);
             },
             onDismiss() {
-              send({ type: "REQUEST_CLOSE", src: "#interact-outside" });
+              send({ type: "REQUEST_CLOSE", src: "interact-outside", restoreFocus });
             }
           });
         },
         proxyTabFocus(ctx2) {
           if (ctx2.modal || !ctx2.portalled)
             return;
-          return (0, import_tabbable2.proxyTabFocus)(dom.getContentEl(ctx2), dom.getTriggerEl(ctx2), (el) => {
-            el.focus({ preventScroll: true });
+          const getContentEl = () => dom.getContentEl(ctx2);
+          return (0, import_tabbable2.proxyTabFocus)(getContentEl, {
+            triggerElement: dom.getTriggerEl(ctx2),
+            defer: true,
+            onFocus(el) {
+              el.focus({ preventScroll: true });
+            }
           });
         },
         hideContentBelow(ctx2) {
           if (!ctx2.modal)
             return;
-          let cleanup;
-          (0, import_dom_query3.nextTick)(() => {
-            cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
-          });
-          return () => cleanup?.();
+          const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
+          return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
         },
         preventScroll(ctx2) {
           if (!ctx2.modal)
@@ -347,13 +363,13 @@ function machine(userContext) {
       },
       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
-            });
+          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          (0, import_popper2.getPlacement)(anchorEl, getPositionerEl, {
+            ...ctx2.positioning,
+            ...evt.options,
+            defer: true,
+            listeners: false
           });
         },
         checkRenderedElements(ctx2) {
@@ -369,10 +385,12 @@ function machine(userContext) {
             dom.getInitialFocusEl(ctx2)?.focus();
           });
         },
-        focusTriggerIfNeeded(ctx2) {
-          if (!ctx2.focusTriggerOnClose)
+        restoreFocusIfNeeded(ctx2, evt) {
+          if (!evt.restoreFocus)
             return;
-          (0, import_dom_query3.raf)(() => dom.getTriggerEl(ctx2)?.focus());
+          (0, import_dom_query3.raf)(() => {
+            dom.getTriggerEl(ctx2)?.focus();
+          });
         },
         invokeOnOpen(ctx2) {
           ctx2.onOpen?.();

package/dist/index.mjs

@@ -6,7 +6,7 @@ import {
 } from "./chunk-KTOPDXGV.mjs";
 import {
   machine
-} from "./chunk-HXXI3VDD.mjs";
+} from "./chunk-KWS6ZCAX.mjs";
 import "./chunk-UA4OMIJI.mjs";
 export {
   anatomy,

package/dist/popover.machine.js

@@ -87,7 +87,6 @@ function machine(userContext) {
         },
         currentPlacement: void 0,
         ...ctx,
-        focusTriggerOnClose: true,
         renderedElements: {
           title: true,
           description: true
@@ -102,10 +101,15 @@ function machine(userContext) {
       entry: ["checkRenderedElements"],
       states: {
         closed: {
-          entry: "invokeOnClose",
           on: {
-            TOGGLE: "open",
-            OPEN: "open"
+            TOGGLE: {
+              target: "open",
+              actions: ["invokeOnOpen"]
+            },
+            OPEN: {
+              target: "open",
+              actions: ["invokeOnOpen"]
+            }
           }
         },
         open: {
@@ -117,14 +121,20 @@ function machine(userContext) {
             "trackDismissableElement",
             "proxyTabFocus"
           ],
-          entry: ["setInitialFocus", "invokeOnOpen"],
+          entry: ["setInitialFocus"],
           on: {
-            CLOSE: "closed",
+            CLOSE: {
+              target: "closed",
+              actions: ["invokeOnClose"]
+            },
             REQUEST_CLOSE: {
               target: "closed",
-              actions: "focusTriggerIfNeeded"
+              actions: ["restoreFocusIfNeeded", "invokeOnClose"]
+            },
+            TOGGLE: {
+              target: "closed",
+              actions: ["invokeOnClose"]
             },
-            TOGGLE: "closed",
             SET_POSITIONING: {
               actions: "setPositioning"
             }
@@ -137,8 +147,10 @@ function machine(userContext) {
         trackPositioning(ctx2) {
           ctx2.currentPlacement = ctx2.positioning.placement;
           const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
-          return (0, import_popper.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), {
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          return (0, import_popper.getPlacement)(anchorEl, getPositionerEl, {
             ...ctx2.positioning,
+            defer: true,
             onComplete(data) {
               ctx2.currentPlacement = data.placement;
             },
@@ -148,21 +160,23 @@ function machine(userContext) {
           });
         },
         trackDismissableElement(ctx2, _evt, { send }) {
-          return (0, import_dismissable.trackDismissableElement)(dom.getContentEl(ctx2), {
+          const getContentEl = () => dom.getContentEl(ctx2);
+          let restoreFocus = true;
+          return (0, import_dismissable.trackDismissableElement)(getContentEl, {
             pointerBlocking: ctx2.modal,
             exclude: dom.getTriggerEl(ctx2),
+            defer: true,
             onEscapeKeyDown(event) {
               ctx2.onEscapeKeyDown?.(event);
               if (ctx2.closeOnEsc)
                 return;
-              ctx2.focusTriggerOnClose = true;
               event.preventDefault();
             },
             onInteractOutside(event) {
               ctx2.onInteractOutside?.(event);
               if (event.defaultPrevented)
                 return;
-              ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
               if (!ctx2.closeOnInteractOutside) {
                 event.preventDefault();
               }
@@ -174,25 +188,27 @@ function machine(userContext) {
               ctx2.onFocusOutside?.(event);
             },
             onDismiss() {
-              send({ type: "REQUEST_CLOSE", src: "#interact-outside" });
+              send({ type: "REQUEST_CLOSE", src: "interact-outside", restoreFocus });
             }
           });
         },
         proxyTabFocus(ctx2) {
           if (ctx2.modal || !ctx2.portalled)
             return;
-          return (0, import_tabbable2.proxyTabFocus)(dom.getContentEl(ctx2), dom.getTriggerEl(ctx2), (el) => {
-            el.focus({ preventScroll: true });
+          const getContentEl = () => dom.getContentEl(ctx2);
+          return (0, import_tabbable2.proxyTabFocus)(getContentEl, {
+            triggerElement: dom.getTriggerEl(ctx2),
+            defer: true,
+            onFocus(el) {
+              el.focus({ preventScroll: true });
+            }
           });
         },
         hideContentBelow(ctx2) {
           if (!ctx2.modal)
             return;
-          let cleanup;
-          (0, import_dom_query2.nextTick)(() => {
-            cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
-          });
-          return () => cleanup?.();
+          const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
+          return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
         },
         preventScroll(ctx2) {
           if (!ctx2.modal)
@@ -225,13 +241,13 @@ function machine(userContext) {
       },
       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
-            });
+          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          (0, import_popper.getPlacement)(anchorEl, getPositionerEl, {
+            ...ctx2.positioning,
+            ...evt.options,
+            defer: true,
+            listeners: false
           });
         },
         checkRenderedElements(ctx2) {
@@ -247,10 +263,12 @@ function machine(userContext) {
             dom.getInitialFocusEl(ctx2)?.focus();
           });
         },
-        focusTriggerIfNeeded(ctx2) {
-          if (!ctx2.focusTriggerOnClose)
+        restoreFocusIfNeeded(ctx2, evt) {
+          if (!evt.restoreFocus)
             return;
-          (0, import_dom_query2.raf)(() => dom.getTriggerEl(ctx2)?.focus());
+          (0, import_dom_query2.raf)(() => {
+            dom.getTriggerEl(ctx2)?.focus();
+          });
         },
         invokeOnOpen(ctx2) {
           ctx2.onOpen?.();

package/dist/popover.machine.mjs

@@ -1,6 +1,6 @@
 import {
   machine
-} from "./chunk-HXXI3VDD.mjs";
+} from "./chunk-KWS6ZCAX.mjs";
 import "./chunk-UA4OMIJI.mjs";
 export {
   machine

package/dist/popover.types.d.ts

@@ -74,12 +74,7 @@ type ComputedContext = Readonly<{
      */
     currentPortalled: boolean;
 }>;
-type PrivateContext = Context<{
-    /**
-     * Whether to prevent returning focus to the trigger
-     */
-    focusTriggerOnClose?: boolean;
-}>;
+type PrivateContext = Context<{}>;
 type MachineContext = PublicContext & ComputedContext & PrivateContext;
 type MachineState = {
     value: "open" | "closed";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,13 +28,13 @@
   "dependencies": {
     "focus-trap": "7.4.0",
     "@zag-js/anatomy": "0.1.4",
-    "@zag-js/aria-hidden": "0.2.2",
+    "@zag-js/aria-hidden": "0.8.0",
     "@zag-js/core": "0.7.0",
     "@zag-js/dom-query": "0.1.4",
     "@zag-js/utils": "0.3.4",
-    "@zag-js/dismissable": "0.6.0",
-    "@zag-js/tabbable": "0.1.1",
-    "@zag-js/popper": "0.2.7",
+    "@zag-js/dismissable": "0.8.0",
+    "@zag-js/tabbable": "0.8.0",
+    "@zag-js/popper": "0.8.0",
     "@zag-js/remove-scroll": "0.2.4",
     "@zag-js/types": "0.5.0"
   },