@zag-js/tooltip 0.0.0-dev-20220415160434 → 0.0.0-dev-20220417135151

package/dist/index.mjs

@@ -259,14 +259,14 @@ var dom = {
   },
   getTriggerId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip-${ctx.id}--trigger`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip:${ctx.id}:trigger`;
   },
   getContentId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip-${ctx.id}--content`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip:${ctx.id}:content`;
   },
-  getArrowId: (ctx) => `tooltip-${ctx.id}--arrow`,
-  getPositionerId: (ctx) => `tooltip-${ctx.id}--popper`,
+  getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
   portalId: "tooltip-portal",
   getTriggerEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getTriggerId(ctx)),
   getContentEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getContentId(ctx)),
@@ -275,7 +275,7 @@ var dom = {
   getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx)),
   getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
   createPortalEl: (ctx) => {
-    const portal = dom.getDoc(ctx).createElement("tooltip-portal");
+    const portal = dom.getDoc(ctx).createElement(dom.portalId);
     portal.id = dom.portalId;
     return portal;
   }
@@ -407,220 +407,225 @@ var isDom = () => !!(typeof window !== "undefined");
 var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
 
 // src/tooltip.machine.ts
-var machine = createMachine({
-  id: "tooltip",
-  initial: "unknown",
-  context: {
-    id: "",
-    openDelay: 1e3,
-    closeDelay: 500,
-    closeOnPointerDown: true,
-    closeOnEsc: true,
-    interactive: true,
-    positioning: { placement: "bottom" },
-    currentPlacement: void 0
-  },
-  computed: {
-    hasAriaLabel: (ctx) => !!ctx["aria-label"]
-  },
-  on: {
-    OPEN: "open",
-    CLOSE: "closed"
-  },
-  states: {
-    unknown: {
-      on: {
-        SETUP: {
-          target: "closed",
-          actions: "setupDocument"
-        }
-      }
+function machine(ctx = {}) {
+  return createMachine({
+    id: "tooltip",
+    initial: "unknown",
+    context: __spreadProps(__spreadValues({
+      id: "",
+      openDelay: 1e3,
+      closeDelay: 500,
+      closeOnPointerDown: true,
+      closeOnEsc: true,
+      interactive: true,
+      currentPlacement: void 0
+    }, ctx), {
+      positioning: __spreadValues({
+        placement: "bottom"
+      }, ctx.positioning)
+    }),
+    computed: {
+      hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
     },
-    closed: {
-      tags: ["closed"],
-      entry: ["clearGlobalId", "invokeOnClose"],
-      on: {
-        FOCUS: "open",
-        POINTER_ENTER: [
-          {
-            guard: "noVisibleTooltip",
-            target: "opening"
-          },
-          { target: "open" }
-        ]
-      }
+    on: {
+      OPEN: "open",
+      CLOSE: "closed"
     },
-    opening: {
-      tags: ["closed"],
-      activities: ["trackScroll", "trackPointerlockChange"],
-      after: {
-        OPEN_DELAY: "open"
+    states: {
+      unknown: {
+        on: {
+          SETUP: {
+            target: "closed",
+            actions: "setupDocument"
+          }
+        }
       },
-      on: {
-        POINTER_LEAVE: "closed",
-        BLUR: "closed",
-        SCROLL: "closed",
-        POINTER_LOCK_CHANGE: "closed",
-        POINTER_DOWN: {
-          guard: "closeOnPointerDown",
-          target: "closed"
+      closed: {
+        tags: ["closed"],
+        entry: ["clearGlobalId", "invokeOnClose"],
+        on: {
+          FOCUS: "open",
+          POINTER_ENTER: [
+            {
+              guard: "noVisibleTooltip",
+              target: "opening"
+            },
+            { target: "open" }
+          ]
         }
-      }
-    },
-    open: {
-      tags: ["open"],
-      activities: [
-        "trackEscapeKey",
-        "trackDisabledTriggerOnSafari",
-        "trackScroll",
-        "trackPointerlockChange",
-        "computePlacement"
-      ],
-      entry: ["setGlobalId", "invokeOnOpen"],
-      on: {
-        POINTER_LEAVE: [
-          {
-            guard: "isVisible",
+      },
+      opening: {
+        tags: ["closed"],
+        activities: ["trackScroll", "trackPointerlockChange"],
+        after: {
+          OPEN_DELAY: "open"
+        },
+        on: {
+          POINTER_LEAVE: "closed",
+          BLUR: "closed",
+          SCROLL: "closed",
+          POINTER_LOCK_CHANGE: "closed",
+          POINTER_DOWN: {
+            guard: "closeOnPointerDown",
+            target: "closed"
+          }
+        }
+      },
+      open: {
+        tags: ["open"],
+        activities: [
+          "trackEscapeKey",
+          "trackDisabledTriggerOnSafari",
+          "trackScroll",
+          "trackPointerlockChange",
+          "computePlacement"
+        ],
+        entry: ["setGlobalId", "invokeOnOpen"],
+        on: {
+          POINTER_LEAVE: [
+            {
+              guard: "isVisible",
+              target: "closing"
+            },
+            { target: "closed" }
+          ],
+          BLUR: "closed",
+          ESCAPE: "closed",
+          SCROLL: "closed",
+          POINTER_LOCK_CHANGE: "closed",
+          TOOLTIP_POINTER_LEAVE: {
+            guard: "isInteractive",
             target: "closing"
           },
-          { target: "closed" }
-        ],
-        BLUR: "closed",
-        ESCAPE: "closed",
-        SCROLL: "closed",
-        POINTER_LOCK_CHANGE: "closed",
-        TOOLTIP_POINTER_LEAVE: {
-          guard: "isInteractive",
-          target: "closing"
-        },
-        POINTER_DOWN: {
-          guard: "closeOnPointerDown",
-          target: "closed"
-        },
-        CLICK: "closed"
-      }
-    },
-    closing: {
-      tags: ["open"],
-      activities: ["trackStore", "computePlacement"],
-      after: {
-        CLOSE_DELAY: "closed"
+          POINTER_DOWN: {
+            guard: "closeOnPointerDown",
+            target: "closed"
+          },
+          CLICK: "closed"
+        }
       },
-      on: {
-        FORCE_CLOSE: "closed",
-        POINTER_ENTER: "open",
-        TOOLTIP_POINTER_ENTER: {
-          guard: "isInteractive",
-          target: "open"
+      closing: {
+        tags: ["open"],
+        activities: ["trackStore", "computePlacement"],
+        after: {
+          CLOSE_DELAY: "closed"
+        },
+        on: {
+          FORCE_CLOSE: "closed",
+          POINTER_ENTER: "open",
+          TOOLTIP_POINTER_ENTER: {
+            guard: "isInteractive",
+            target: "open"
+          }
         }
       }
     }
-  }
-}, {
-  activities: {
-    computePlacement(ctx) {
-      ctx.currentPlacement = ctx.positioning.placement;
-      let cleanup;
-      raf(() => {
-        cleanup = getPlacement(dom.getTriggerEl(ctx), dom.getPositionerEl(ctx), __spreadProps(__spreadValues({}, ctx.positioning), {
-          onComplete(data) {
-            ctx.currentPlacement = data.placement;
-            ctx.isPlacementComplete = true;
-          },
-          onCleanup() {
-            ctx.currentPlacement = void 0;
-            ctx.isPlacementComplete = false;
+  }, {
+    activities: {
+      computePlacement(ctx2) {
+        ctx2.currentPlacement = ctx2.positioning.placement;
+        let cleanup;
+        raf(() => {
+          cleanup = getPlacement(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), __spreadProps(__spreadValues({}, ctx2.positioning), {
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+              ctx2.isPlacementComplete = true;
+            },
+            onCleanup() {
+              ctx2.currentPlacement = void 0;
+              ctx2.isPlacementComplete = false;
+            }
+          }));
+        });
+        return cleanup;
+      },
+      trackPointerlockChange(ctx2, _evt, { send }) {
+        return addPointerlockChangeListener(dom.getDoc(ctx2), () => {
+          send("POINTER_LOCK_CHANGE");
+        });
+      },
+      trackScroll(ctx2, _evt, { send }) {
+        const trigger = dom.getTriggerEl(ctx2);
+        if (!trigger)
+          return;
+        const cleanups = getScrollParents(trigger).map((el) => {
+          const opts = { passive: true, capture: true };
+          return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
+        });
+        return () => {
+          cleanups.forEach((fn) => fn == null ? void 0 : fn());
+        };
+      },
+      trackStore(ctx2, _evt, { send }) {
+        return subscribe(store, () => {
+          if (store.id !== ctx2.id) {
+            send("FORCE_CLOSE");
           }
-        }));
-      });
-      return cleanup;
-    },
-    trackPointerlockChange(ctx, _evt, { send }) {
-      return addPointerlockChangeListener(dom.getDoc(ctx), () => {
-        send("POINTER_LOCK_CHANGE");
-      });
-    },
-    trackScroll(ctx, _evt, { send }) {
-      const trigger = dom.getTriggerEl(ctx);
-      if (!trigger)
-        return;
-      const cleanups = getScrollParents(trigger).map((el) => {
-        const opts = { passive: true, capture: true };
-        return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
-      });
-      return () => {
-        cleanups.forEach((fn) => fn == null ? void 0 : fn());
-      };
-    },
-    trackStore(ctx, _evt, { send }) {
-      return subscribe(store, () => {
-        if (store.id !== ctx.id) {
-          send("FORCE_CLOSE");
-        }
-      });
-    },
-    trackDisabledTriggerOnSafari(ctx, _evt, { send }) {
-      if (!isSafari())
-        return noop2;
-      const doc = dom.getDoc(ctx);
-      return addPointerEvent(doc, "pointermove", (event) => {
-        const selector = "[data-part=trigger][data-expanded]";
-        if (isHTMLElement(event.target) && event.target.closest(selector))
+        });
+      },
+      trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
+        if (!isSafari())
+          return noop2;
+        const doc = dom.getDoc(ctx2);
+        return addPointerEvent(doc, "pointermove", (event) => {
+          const selector = "[data-part=trigger][data-expanded]";
+          if (isHTMLElement(event.target) && event.target.closest(selector))
+            return;
+          send("POINTER_LEAVE");
+        });
+      },
+      trackEscapeKey(ctx2, _evt, { send }) {
+        if (!ctx2.closeOnEsc)
           return;
-        send("POINTER_LEAVE");
-      });
+        const doc = dom.getDoc(ctx2);
+        return addDomEvent(doc, "keydown", (event) => {
+          if (event.key === "Escape") {
+            send("ESCAPE");
+          }
+        });
+      }
     },
-    trackEscapeKey(ctx, _evt, { send }) {
-      if (!ctx.closeOnEsc)
-        return;
-      const doc = dom.getDoc(ctx);
-      return addDomEvent(doc, "keydown", (event) => {
-        if (event.key === "Escape") {
-          send("ESCAPE");
+    actions: {
+      setupDocument(ctx2, evt) {
+        ctx2.id = evt.id;
+        if (evt.doc)
+          ctx2.doc = ref(evt.doc);
+      },
+      setGlobalId(ctx2) {
+        store.setId(ctx2.id);
+      },
+      clearGlobalId(ctx2) {
+        if (ctx2.id === store.id) {
+          store.setId(null);
+        }
+      },
+      invokeOnOpen(ctx2, evt) {
+        var _a;
+        const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
+        if (!omit.includes(evt.type)) {
+          (_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
+        }
+      },
+      invokeOnClose(ctx2, evt) {
+        var _a;
+        const omit = ["SETUP"];
+        if (!omit.includes(evt.type)) {
+          (_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
         }
-      });
-    }
-  },
-  actions: {
-    setupDocument(ctx, evt) {
-      ctx.id = evt.id;
-      if (evt.doc)
-        ctx.doc = ref(evt.doc);
-    },
-    setGlobalId(ctx) {
-      store.setId(ctx.id);
-    },
-    clearGlobalId(ctx) {
-      if (ctx.id === store.id) {
-        store.setId(null);
       }
     },
-    invokeOnOpen(ctx, evt) {
-      var _a;
-      const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
-      if (!omit.includes(evt.type)) {
-        (_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
-      }
+    guards: {
+      closeOnPointerDown: (ctx2) => ctx2.closeOnPointerDown,
+      noVisibleTooltip: () => store.id === null,
+      isVisible: (ctx2) => ctx2.id === store.id,
+      isInteractive: (ctx2) => ctx2.interactive
     },
-    invokeOnClose(ctx, evt) {
-      var _a;
-      const omit = ["SETUP"];
-      if (!omit.includes(evt.type)) {
-        (_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
-      }
+    delays: {
+      OPEN_DELAY: (ctx2) => ctx2.openDelay,
+      CLOSE_DELAY: (ctx2) => ctx2.closeDelay
     }
-  },
-  guards: {
-    closeOnPointerDown: (ctx) => ctx.closeOnPointerDown,
-    noVisibleTooltip: () => store.id === null,
-    isVisible: (ctx) => ctx.id === store.id,
-    isInteractive: (ctx) => ctx.interactive
-  },
-  delays: {
-    OPEN_DELAY: (ctx) => ctx.openDelay,
-    CLOSE_DELAY: (ctx) => ctx.closeDelay
-  }
-});
+  });
+}
 export {
   connect,
   machine