@zag-js/popover 0.0.0-dev-20220416104915 → 0.0.0-dev-20220418165817

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { connect } from "./popover.connect";
 export { machine } from "./popover.machine";
-export type { MachineContext, MachineState } from "./popover.types";
+export type { UserDefinedContext as Context } from "./popover.types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,YAAY,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -574,29 +574,29 @@ var dom = {
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
   getAnchorId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover-${ctx.uid}-anchor`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.uid}:anchor`;
   },
   getTriggerId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover-${ctx.uid}-trigger`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.uid}:trigger`;
   },
   getContentId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover-${ctx.uid}-content`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.uid}:content`;
   },
-  getPositionerId: (ctx) => `popover-${ctx.uid}-popper`,
-  getArrowId: (ctx) => `popover-${ctx.uid}-arrow`,
+  getPositionerId: (ctx) => `popover:${ctx.uid}:popper`,
+  getArrowId: (ctx) => `popover:${ctx.uid}:arrow`,
   getTitleId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover-${ctx.uid}-title`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.uid}:title`;
   },
   getDescriptionId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover-${ctx.uid}-desc`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.uid}:desc`;
   },
   getCloseButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover-${ctx.uid}-close-button`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.uid}:close-button`;
   },
   getAnchorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getAnchorId(ctx)),
   getTriggerEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getTriggerId(ctx)),
@@ -727,245 +727,249 @@ var import_popper2 = require("@zag-js/popper");
 var import_aria_hidden = require("aria-hidden");
 var import_focus_trap = require("focus-trap");
 var { and, or } = import_core.guards;
-var machine = (0, import_core.createMachine)({
-  id: "popover",
-  initial: "unknown",
-  context: {
-    isTitleRendered: true,
-    isDescriptionRendered: true,
-    isAnchorRendered: false,
-    uid: "",
-    closeOnBlur: true,
-    closeOnEsc: true,
-    autoFocus: true,
-    modal: false,
-    positioning: { placement: "bottom" },
-    currentPlacement: void 0
-  },
-  computed: {
-    currentPortalled: (ctx) => !!ctx.modal || !!ctx.portalled
-  },
-  states: {
-    unknown: {
-      on: {
-        SETUP: {
-          target: "closed",
-          actions: ["setupDocument", "checkRenderedElements"]
-        }
-      }
+function machine(ctx = {}) {
+  return (0, import_core.createMachine)({
+    id: "popover",
+    initial: "unknown",
+    context: __spreadValues({
+      isTitleRendered: true,
+      isDescriptionRendered: true,
+      isAnchorRendered: false,
+      uid: "",
+      closeOnBlur: true,
+      closeOnEsc: true,
+      autoFocus: true,
+      modal: false,
+      positioning: __spreadValues({
+        placement: "bottom"
+      }, ctx.positioning),
+      currentPlacement: void 0
+    }, ctx),
+    computed: {
+      currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
     },
-    closed: {
-      entry: ["clearPointerDown", "invokeOnClose"],
-      on: {
-        TRIGGER_CLICK: "open",
-        OPEN: "open"
-      }
-    },
-    open: {
-      activities: [
-        "trackPointerDown",
-        "trapFocus",
-        "preventScroll",
-        "hideContentBelow",
-        "disableOutsidePointerEvents",
-        "computePlacement"
-      ],
-      entry: (0, import_core.choose)([
-        {
-          guard: "autoFocus",
-          actions: ["setInitialFocus", "invokeOnOpen"]
-        },
-        { actions: ["focusContent", "invokeOnOpen"] }
-      ]),
-      on: {
-        CLOSE: {
-          target: "closed",
-          actions: "focusTrigger"
-        },
-        TRIGGER_CLICK: {
-          target: "closed",
-          actions: "focusTrigger"
-        },
-        ESCAPE: {
-          guard: "closeOnEsc",
-          target: "closed",
-          actions: "focusTrigger"
-        },
-        TAB: {
-          guard: and("isLastTabbableElement", "closeOnBlur", "portalled"),
-          target: "closed",
-          actions: "focusNextTabbableElementAfterTrigger"
-        },
-        SHIFT_TAB: {
-          guard: and(or("isFirstTabbableElement", "isContentFocused"), "closeOnBlur", "portalled"),
-          target: "closed",
-          actions: "focusTrigger"
-        },
-        INTERACT_OUTSIDE: [
+    states: {
+      unknown: {
+        on: {
+          SETUP: {
+            target: "closed",
+            actions: ["setupDocument", "checkRenderedElements"]
+          }
+        }
+      },
+      closed: {
+        entry: ["clearPointerDown", "invokeOnClose"],
+        on: {
+          TRIGGER_CLICK: "open",
+          OPEN: "open"
+        }
+      },
+      open: {
+        activities: [
+          "trackPointerDown",
+          "trapFocus",
+          "preventScroll",
+          "hideContentBelow",
+          "disableOutsidePointerEvents",
+          "computePlacement"
+        ],
+        entry: (0, import_core.choose)([
           {
-            guard: and("closeOnBlur", "isRelatedTargetFocusable"),
-            target: "closed"
+            guard: "autoFocus",
+            actions: ["setInitialFocus", "invokeOnOpen"]
           },
-          {
-            guard: "closeOnBlur",
+          { actions: ["focusContent", "invokeOnOpen"] }
+        ]),
+        on: {
+          CLOSE: {
             target: "closed",
             actions: "focusTrigger"
-          }
-        ]
+          },
+          TRIGGER_CLICK: {
+            target: "closed",
+            actions: "focusTrigger"
+          },
+          ESCAPE: {
+            guard: "closeOnEsc",
+            target: "closed",
+            actions: "focusTrigger"
+          },
+          TAB: {
+            guard: and("isLastTabbableElement", "closeOnBlur", "portalled"),
+            target: "closed",
+            actions: "focusNextTabbableElementAfterTrigger"
+          },
+          SHIFT_TAB: {
+            guard: and(or("isFirstTabbableElement", "isContentFocused"), "closeOnBlur", "portalled"),
+            target: "closed",
+            actions: "focusTrigger"
+          },
+          INTERACT_OUTSIDE: [
+            {
+              guard: and("closeOnBlur", "isRelatedTargetFocusable"),
+              target: "closed"
+            },
+            {
+              guard: "closeOnBlur",
+              target: "closed",
+              actions: "focusTrigger"
+            }
+          ]
+        }
       }
     }
-  }
-}, {
-  activities: {
-    computePlacement(ctx) {
-      ctx.currentPlacement = ctx.positioning.placement;
-      const anchorEl = ctx.isAnchorRendered ? dom.getAnchorEl(ctx) : dom.getTriggerEl(ctx);
-      return (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx), __spreadProps(__spreadValues({}, ctx.positioning), {
-        onComplete(data) {
-          ctx.currentPlacement = data.placement;
-          ctx.isPlacementComplete = true;
-        },
-        onCleanup() {
-          ctx.currentPlacement = void 0;
-          ctx.isPlacementComplete = false;
-        }
-      }));
-    },
-    trackPointerDown(ctx) {
-      return trackPointerDown(dom.getDoc(ctx), (el) => {
-        ctx.pointerdownNode = (0, import_core.ref)(el);
-      });
-    },
-    disableOutsidePointerEvents(ctx) {
-      const el = dom.getContentEl(ctx);
-      return preventBodyPointerEvents(el, {
-        document: dom.getDoc(ctx),
-        disabled: !ctx.modal
-      });
-    },
-    hideContentBelow(ctx) {
-      if (!ctx.modal)
-        return;
-      let unhide;
-      nextTick(() => {
-        const el = dom.getContentEl(ctx);
-        if (!el)
+  }, {
+    activities: {
+      computePlacement(ctx2) {
+        ctx2.currentPlacement = ctx2.positioning.placement;
+        const anchorEl = ctx2.isAnchorRendered ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+        return (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), __spreadProps(__spreadValues({}, ctx2.positioning), {
+          onComplete(data) {
+            ctx2.currentPlacement = data.placement;
+            ctx2.isPlacementComplete = true;
+          },
+          onCleanup() {
+            ctx2.currentPlacement = void 0;
+            ctx2.isPlacementComplete = false;
+          }
+        }));
+      },
+      trackPointerDown(ctx2) {
+        return trackPointerDown(dom.getDoc(ctx2), (el) => {
+          ctx2.pointerdownNode = (0, import_core.ref)(el);
+        });
+      },
+      disableOutsidePointerEvents(ctx2) {
+        const el = dom.getContentEl(ctx2);
+        return preventBodyPointerEvents(el, {
+          document: dom.getDoc(ctx2),
+          disabled: !ctx2.modal
+        });
+      },
+      hideContentBelow(ctx2) {
+        if (!ctx2.modal)
           return;
-        try {
-          unhide = (0, import_aria_hidden.hideOthers)(el);
-        } catch (e2) {
-        }
-      });
-      return () => unhide == null ? void 0 : unhide();
-    },
-    preventScroll(ctx) {
-      return preventBodyScroll({
-        allowPinchZoom: true,
-        disabled: !ctx.modal,
-        document: dom.getDoc(ctx)
-      });
-    },
-    trapFocus(ctx) {
-      if (!ctx.modal)
-        return;
-      let trap;
-      nextTick(() => {
-        const el = dom.getContentEl(ctx);
-        if (!el)
+        let unhide;
+        nextTick(() => {
+          const el = dom.getContentEl(ctx2);
+          if (!el)
+            return;
+          try {
+            unhide = (0, import_aria_hidden.hideOthers)(el);
+          } catch (e2) {
+          }
+        });
+        return () => unhide == null ? void 0 : unhide();
+      },
+      preventScroll(ctx2) {
+        return preventBodyScroll({
+          allowPinchZoom: true,
+          disabled: !ctx2.modal,
+          document: dom.getDoc(ctx2)
+        });
+      },
+      trapFocus(ctx2) {
+        if (!ctx2.modal)
           return;
-        trap = (0, import_focus_trap.createFocusTrap)(el, {
-          escapeDeactivates: false,
-          allowOutsideClick: true,
-          returnFocusOnDeactivate: true,
-          document: dom.getDoc(ctx),
-          fallbackFocus: el,
-          initialFocus: runIfFn2(ctx.initialFocusEl)
+        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 (e2) {
+          }
         });
-        try {
-          trap.activate();
-        } catch (e2) {
-        }
-      });
-      return () => trap == null ? void 0 : trap.deactivate();
-    }
-  },
-  guards: {
-    closeOnEsc: (ctx) => !!ctx.closeOnEsc,
-    autoFocus: (ctx) => !!ctx.autoFocus,
-    modal: (ctx) => !!ctx.modal,
-    portalled: (ctx) => !!ctx.portalled,
-    isRelatedTargetFocusable: (_ctx, evt) => evt.focusable,
-    closeOnBlur: (ctx) => !!ctx.closeOnBlur,
-    isContentFocused: (ctx) => dom.getContentEl(ctx) === dom.getActiveEl(ctx),
-    isFirstTabbableElement: (ctx) => dom.getFirstTabbableEl(ctx) === dom.getActiveEl(ctx),
-    isLastTabbableElement: (ctx) => dom.getLastTabbableEl(ctx) === dom.getActiveEl(ctx)
-  },
-  actions: {
-    checkRenderedElements(ctx) {
-      raf(() => {
-        ctx.isAnchorRendered = !!dom.getAnchorEl(ctx);
-        ctx.isTitleRendered = !!dom.getTitleEl(ctx);
-        ctx.isDescriptionRendered = !!dom.getDescriptionEl(ctx);
-      });
-    },
-    setupDocument(ctx, evt) {
-      if (evt.doc)
-        ctx.doc = (0, import_core.ref)(evt.doc);
-      ctx.uid = evt.id;
+        return () => trap == null ? void 0 : trap.deactivate();
+      }
     },
-    clearPointerDown(ctx) {
-      ctx.pointerdownNode = null;
+    guards: {
+      closeOnEsc: (ctx2) => !!ctx2.closeOnEsc,
+      autoFocus: (ctx2) => !!ctx2.autoFocus,
+      modal: (ctx2) => !!ctx2.modal,
+      portalled: (ctx2) => !!ctx2.portalled,
+      isRelatedTargetFocusable: (_ctx, evt) => evt.focusable,
+      closeOnBlur: (ctx2) => !!ctx2.closeOnBlur,
+      isContentFocused: (ctx2) => dom.getContentEl(ctx2) === dom.getActiveEl(ctx2),
+      isFirstTabbableElement: (ctx2) => dom.getFirstTabbableEl(ctx2) === dom.getActiveEl(ctx2),
+      isLastTabbableElement: (ctx2) => dom.getLastTabbableEl(ctx2) === dom.getActiveEl(ctx2)
     },
-    focusContent(ctx) {
-      nextTick(() => {
-        var _a;
-        (_a = dom.getContentEl(ctx)) == null ? void 0 : _a.focus();
-      });
-    },
-    setInitialFocus(ctx) {
-      nextTick(() => {
+    actions: {
+      checkRenderedElements(ctx2) {
+        raf(() => {
+          ctx2.isAnchorRendered = !!dom.getAnchorEl(ctx2);
+          ctx2.isTitleRendered = !!dom.getTitleEl(ctx2);
+          ctx2.isDescriptionRendered = !!dom.getDescriptionEl(ctx2);
+        });
+      },
+      setupDocument(ctx2, evt) {
+        if (evt.doc)
+          ctx2.doc = (0, import_core.ref)(evt.doc);
+        ctx2.uid = evt.id;
+      },
+      clearPointerDown(ctx2) {
+        ctx2.pointerdownNode = null;
+      },
+      focusContent(ctx2) {
+        nextTick(() => {
+          var _a;
+          (_a = dom.getContentEl(ctx2)) == null ? void 0 : _a.focus();
+        });
+      },
+      setInitialFocus(ctx2) {
+        nextTick(() => {
+          var _a;
+          (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
+        });
+      },
+      focusTrigger(ctx2) {
+        nextTick(() => {
+          var _a;
+          (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
+        });
+      },
+      invokeOnOpen(ctx2, evt) {
         var _a;
-        (_a = dom.getInitialFocusEl(ctx)) == null ? void 0 : _a.focus();
-      });
-    },
-    focusTrigger(ctx) {
-      nextTick(() => {
+        if (evt.type !== "SETUP") {
+          (_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
+        }
+      },
+      invokeOnClose(ctx2, evt) {
         var _a;
-        (_a = dom.getTriggerEl(ctx)) == null ? void 0 : _a.focus();
-      });
-    },
-    invokeOnOpen(ctx, evt) {
-      var _a;
-      if (evt.type !== "SETUP") {
-        (_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
-      }
-    },
-    invokeOnClose(ctx, evt) {
-      var _a;
-      if (evt.type !== "SETUP") {
-        (_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
-      }
-    },
-    focusNextTabbableElementAfterTrigger(ctx, evt) {
-      const content = dom.getContentEl(ctx);
-      const doc = dom.getDoc(ctx);
-      const button = dom.getTriggerEl(ctx);
-      if (!content || !button)
-        return;
-      const lastTabbable = dom.getLastTabbableEl(ctx);
-      if (lastTabbable !== doc.activeElement)
-        return;
-      let tabbables = dom.getDocTabbableEls(ctx);
-      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.onClose) == null ? void 0 : _a.call(ctx2);
+        }
+      },
+      focusNextTabbableElementAfterTrigger(ctx2, evt) {
+        const content = dom.getContentEl(ctx2);
+        const doc = dom.getDoc(ctx2);
+        const button = dom.getTriggerEl(ctx2);
+        if (!content || !button)
+          return;
+        const lastTabbable = dom.getLastTabbableEl(ctx2);
+        if (lastTabbable !== doc.activeElement)
+          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();
+        nextTick(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
       }
-      if (!elementAfterTrigger || elementAfterTrigger === button)
-        return;
-      evt.preventDefault();
-      nextTick(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
     }
-  }
-});
+  });
+}
 //# sourceMappingURL=index.js.map