@zag-js/popover 0.2.15 → 0.6.0

package/dist/{chunk-NPQGVKMX.mjs → chunk-D27LEJFX.mjs}

@@ -17,7 +17,7 @@ function machine(userContext) {
   return createMachine(
     {
       id: "popover",
-      initial: ctx.defaultOpen ? "open" : "closed",
+      initial: ctx.open ? "open" : "closed",
       context: {
         closeOnInteractOutside: true,
         closeOnEsc: true,
@@ -38,6 +38,9 @@ function machine(userContext) {
       computed: {
         currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
       },
+      watch: {
+        open: ["toggleVisibility"]
+      },
       entry: ["checkRenderedElements"],
       states: {
         closed: {
@@ -192,10 +195,13 @@ function machine(userContext) {
           raf(() => dom.getTriggerEl(ctx2)?.focus());
         },
         invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.(true);
+          ctx2.onOpen?.();
         },
         invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.(false);
+          ctx2.onClose?.();
+        },
+        toggleVisibility(ctx2, _evt, { send }) {
+          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
         }
       }
     }

package/dist/index.js

@@ -197,7 +197,7 @@ function machine(userContext) {
   return (0, import_core.createMachine)(
     {
       id: "popover",
-      initial: ctx.defaultOpen ? "open" : "closed",
+      initial: ctx.open ? "open" : "closed",
       context: {
         closeOnInteractOutside: true,
         closeOnEsc: true,
@@ -218,6 +218,9 @@ function machine(userContext) {
       computed: {
         currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
       },
+      watch: {
+        open: ["toggleVisibility"]
+      },
       entry: ["checkRenderedElements"],
       states: {
         closed: {
@@ -372,10 +375,13 @@ function machine(userContext) {
           (0, import_dom_query3.raf)(() => dom.getTriggerEl(ctx2)?.focus());
         },
         invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.(true);
+          ctx2.onOpen?.();
         },
         invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.(false);
+          ctx2.onClose?.();
+        },
+        toggleVisibility(ctx2, _evt, { send }) {
+          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
         }
       }
     }

package/dist/index.mjs

@@ -6,7 +6,7 @@ import {
 } from "./chunk-KTOPDXGV.mjs";
 import {
   machine
-} from "./chunk-NPQGVKMX.mjs";
+} from "./chunk-D27LEJFX.mjs";
 import "./chunk-4IGGT6KB.mjs";
 export {
   anatomy,

package/dist/popover.machine.js

@@ -75,7 +75,7 @@ function machine(userContext) {
   return (0, import_core.createMachine)(
     {
       id: "popover",
-      initial: ctx.defaultOpen ? "open" : "closed",
+      initial: ctx.open ? "open" : "closed",
       context: {
         closeOnInteractOutside: true,
         closeOnEsc: true,
@@ -96,6 +96,9 @@ function machine(userContext) {
       computed: {
         currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
       },
+      watch: {
+        open: ["toggleVisibility"]
+      },
       entry: ["checkRenderedElements"],
       states: {
         closed: {
@@ -250,10 +253,13 @@ function machine(userContext) {
           (0, import_dom_query2.raf)(() => dom.getTriggerEl(ctx2)?.focus());
         },
         invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.(true);
+          ctx2.onOpen?.();
         },
         invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.(false);
+          ctx2.onClose?.();
+        },
+        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-NPQGVKMX.mjs";
+} from "./chunk-D27LEJFX.mjs";
 import "./chunk-4IGGT6KB.mjs";
 export {
   machine

package/dist/popover.types.d.ts

@@ -48,17 +48,21 @@ type PublicContext = DismissableElementHandlers & CommonProperties & {
      */
     closeOnEsc?: boolean;
     /**
-     * Function invoked when the popover is opened.
+     * Function invoked when the popover is closed
      */
-    onOpenChange?: (open: boolean) => void;
+    onClose?: VoidFunction;
+    /**
+     * Function invoked when the popover is opened
+     */
+    onOpen?: VoidFunction;
     /**
      * The user provided options used to position the popover content
      */
     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.15",
+  "version": "0.6.0",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,14 +29,14 @@
     "focus-trap": "7.4.0",
     "@zag-js/anatomy": "0.1.4",
     "@zag-js/aria-hidden": "0.2.2",
-    "@zag-js/core": "0.2.12",
+    "@zag-js/core": "0.5.0",
     "@zag-js/dom-query": "0.1.4",
     "@zag-js/utils": "0.3.4",
-    "@zag-js/dismissable": "0.2.6",
+    "@zag-js/dismissable": "0.6.0",
+    "@zag-js/tabbable": "0.1.1",
     "@zag-js/popper": "0.2.7",
     "@zag-js/remove-scroll": "0.2.4",
-    "@zag-js/tabbable": "0.1.1",
-    "@zag-js/types": "0.3.4"
+    "@zag-js/types": "0.5.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"