@zag-js/popover 0.5.0 → 0.7.0

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

@@ -3,7 +3,7 @@ import {
 } from "./chunk-KTOPDXGV.mjs";
 import {
   dom
-} from "./chunk-4IGGT6KB.mjs";
+} from "./chunk-UA4OMIJI.mjs";
 
 // src/popover.connect.ts
 import { dataAttr } from "@zag-js/dom-query";
@@ -40,7 +40,7 @@ function connect(state, send, normalize) {
     /**
      * Function to reposition the popover
      */
-    setPositioning(options) {
+    setPositioning(options = {}) {
       send({ type: "SET_POSITIONING", options });
     },
     arrowProps: normalize.element({

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

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-4IGGT6KB.mjs";
+} from "./chunk-UA4OMIJI.mjs";
 
 // src/popover.machine.ts
 import { ariaHidden } from "@zag-js/aria-hidden";
@@ -195,10 +195,10 @@ 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/{chunk-4IGGT6KB.mjs → chunk-UA4OMIJI.mjs}

@@ -7,8 +7,8 @@ var dom = createScope({
   getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
   getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
   getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
-  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
   getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
   getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,

package/dist/index.js

@@ -54,8 +54,8 @@ var dom = (0, import_dom_query.createScope)({
   getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
   getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
   getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
-  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
   getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
   getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
@@ -114,7 +114,7 @@ function connect(state, send, normalize) {
     /**
      * Function to reposition the popover
      */
-    setPositioning(options) {
+    setPositioning(options = {}) {
       send({ type: "SET_POSITIONING", options });
     },
     arrowProps: normalize.element({
@@ -375,10 +375,10 @@ 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

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-QLF6NDJW.mjs";
+} from "./chunk-HRZXZNMW.mjs";
 import {
   anatomy
 } from "./chunk-KTOPDXGV.mjs";
 import {
   machine
-} from "./chunk-I6GHRN6K.mjs";
-import "./chunk-4IGGT6KB.mjs";
+} from "./chunk-HXXI3VDD.mjs";
+import "./chunk-UA4OMIJI.mjs";
 export {
   anatomy,
   connect,

package/dist/popover.connect.d.ts

@@ -24,7 +24,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     /**
      * Function to reposition the popover
      */
-    setPositioning(options: Partial<PositioningOptions>): void;
+    setPositioning(options?: Partial<PositioningOptions>): void;
     arrowProps: T["element"];
     arrowTipProps: T["element"];
     anchorProps: T["element"];

package/dist/popover.connect.js

@@ -50,8 +50,8 @@ var dom = (0, import_dom_query.createScope)({
   getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
   getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
   getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
-  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
   getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
   getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
@@ -110,7 +110,7 @@ function connect(state, send, normalize) {
     /**
      * Function to reposition the popover
      */
-    setPositioning(options) {
+    setPositioning(options = {}) {
       send({ type: "SET_POSITIONING", options });
     },
     arrowProps: normalize.element({

package/dist/popover.connect.mjs

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

package/dist/popover.dom.js

@@ -31,8 +31,8 @@ var dom = (0, import_dom_query.createScope)({
   getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
   getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
   getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
-  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
   getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
   getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,

package/dist/popover.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-4IGGT6KB.mjs";
+} from "./chunk-UA4OMIJI.mjs";
 export {
   dom
 };

package/dist/popover.machine.js

@@ -42,8 +42,8 @@ var dom = (0, import_dom_query.createScope)({
   getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
   getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
   getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
-  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
   getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
   getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
@@ -253,10 +253,10 @@ 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,7 +1,7 @@
 import {
   machine
-} from "./chunk-I6GHRN6K.mjs";
-import "./chunk-4IGGT6KB.mjs";
+} from "./chunk-HXXI3VDD.mjs";
+import "./chunk-UA4OMIJI.mjs";
 export {
   machine
 };

package/dist/popover.types.d.ts

@@ -10,6 +10,8 @@ type ElementIds = Partial<{
     title: string;
     description: string;
     closeTrigger: string;
+    positioner: string;
+    arrow: string;
 }>;
 type PublicContext = DismissableElementHandlers & CommonProperties & {
     /**
@@ -48,9 +50,13 @@ 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
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,10 +29,10 @@
     "focus-trap": "7.4.0",
     "@zag-js/anatomy": "0.1.4",
     "@zag-js/aria-hidden": "0.2.2",
-    "@zag-js/core": "0.5.0",
+    "@zag-js/core": "0.7.0",
     "@zag-js/dom-query": "0.1.4",
     "@zag-js/utils": "0.3.4",
-    "@zag-js/dismissable": "0.5.0",
+    "@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",