@zag-js/tooltip - npm Package Compare versions

Comparing version 0.0.0-dev-20220416152643 to 0.0.0-dev-20220417135151

dist/index.d.ts

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

dist/index.js

@@ -433,216 +433,221 @@ var __defProp = Object.defineProperty;
 // src/tooltip.machine.ts
-var machine = (0, import_core2.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 (0, import_core2.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"
-      }
-    },
-    closing: {
-      tags: ["open"],
-      activities: ["trackStore", "computePlacement"],
-      after: {
-        CLOSE_DELAY: "closed"
-      },
-      on: {
-        FORCE_CLOSE: "closed",
-        POINTER_ENTER: "open",
-        TOOLTIP_POINTER_ENTER: {
-          guard: "isInteractive",
-          target: "open"
+        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 = (0, import_popper2.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 = (0, import_popper2.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 (0, import_core2.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 (0, import_core2.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 = (0, import_core2.ref)(evt.doc);
+      },
+      setGlobalId(ctx2) {
+        store.setId(ctx2.id);
+      },
+      clearGlobalId(ctx2) {
+        if (ctx2.id === store.id) {
+          store.setId(null);
         }
-      });
-    }
-  },
-  actions: {
-    setupDocument(ctx, evt) {
-      ctx.id = evt.id;
-      if (evt.doc)
-        ctx.doc = (0, import_core2.ref)(evt.doc);
-    },
-    setGlobalId(ctx) {
-      store.setId(ctx.id);
-    },
-    clearGlobalId(ctx) {
-      if (ctx.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);
+        }
       }
     },
-    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
-  }
-});
+  });
+}
 //# sourceMappingURL=index.js.map

dist/tooltip.connect.d.ts

@@ -1,5 +0,4 @@
-import { StateMachine as S } from "@zag-js/core";
 import { PropTypes, ReactPropTypes } from "@zag-js/types";
-import { MachineContext, MachineState } from "./tooltip.types";
-export declare function connect<T extends PropTypes = ReactPropTypes>(state: S.State<MachineContext, MachineState>, send: (event: S.Event<S.AnyEventObject>) => void, normalize?: import("@zag-js/types").NormalizeProps): {
+import { Send, State } from "./tooltip.types";
+export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
     isOpen: boolean;
@@ -6,0 +5,0 @@ open(): void;

dist/tooltip.machine.d.ts

@@ -1,3 +0,3 @@
-import { MachineContext, MachineState } from "./tooltip.types";
-export declare const machine: import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
+import { UserDefinedContext, MachineContext, MachineState } from "./tooltip.types";
+export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
 //# sourceMappingURL=tooltip.machine.d.ts.map

dist/tooltip.types.d.ts

@@ -0,16 +1,13 @@
+import type { StateMachine as S } from "@zag-js/core";
 import { Placement, PositioningOptions } from "@zag-js/popper";
-declare type IdMap = Partial<{
+declare type ElementIds = Partial<{
     trigger: string;
     content: string;
 }>;
-export declare type MachineContext = {
+declare type PublicContext = {
     /**
      * The ids of the elements in the tooltip. Useful for composition.
      */
-    ids?: IdMap;
+    ids?: ElementIds;
     /**
-     * @internal The owner document of the tooltip.
-     */
-    doc?: Document;
-    /**
      * The `id` of the tooltip.
@@ -54,18 +51,31 @@ */
     /**
+     * The user provided options used to position the popover content
+     */
+    positioning: PositioningOptions;
+};
+export declare type UserDefinedContext = Partial<PublicContext>;
+declare type ComputedContext = Readonly<{
+    /**
      * @computed Whether an `aria-label` is set.
      */
     readonly hasAriaLabel: boolean;
+}>;
+declare type PrivateContext = {
     /**
-     * The user provided options used to position the popover content
+     * @internal
+     * The owner document of the tooltip.
      */
-    positioning: PositioningOptions;
+    doc?: Document;
     /**
-     * @internal The computed placement of the tooltip.
+     * @internal
+     * The computed placement of the tooltip.
      */
     currentPlacement?: Placement;
     /**
-     * @computed Whether the dynamic placement has been computed
+     * @internal
+     * Whether the dynamic placement has been computed
      */
     isPlacementComplete?: boolean;
 };
+export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
 export declare type MachineState = {
@@ -75,3 +85,5 @@ value: "unknown" | "opening" | "open" | "closing" | "closed";
 };
+export declare type State = S.State<MachineContext, MachineState>;
+export declare type Send = S.Send<S.AnyEventObject>;
 export {};
 //# sourceMappingURL=tooltip.types.d.ts.map

package.json

 {
   "name": "@zag-js/tooltip",
-  "version": "0.0.0-dev-20220416152643",
+  "version": "0.0.0-dev-20220417135151",
   "description": "Core logic for the tooltip widget implemented as a state machine",
@@ -32,6 +32,6 @@ "keywords": [
   "dependencies": {
-    "@zag-js/core": "^0.0.0-dev-20220416152643",
-    "@zag-js/popper": "^0.0.0-dev-20220416152643",
-    "@zag-js/dom-utils": "^0.0.0-dev-20220416152643",
-    "@zag-js/types": "^0.0.0-dev-20220416152643"
+    "@zag-js/core": "^0.0.0-dev-20220417135151",
+    "@zag-js/popper": "^0.0.0-dev-20220417135151",
+    "@zag-js/dom-utils": "^0.0.0-dev-20220417135151",
+    "@zag-js/types": "^0.0.0-dev-20220417135151"
   },
@@ -38,0 +38,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

213624

increased by1.29%

Lines of code

1400

increased by1.52%

Dependency changes

• Updated@zag-js/core@^0.0.0-dev-20220417135151

• Updated@zag-js/dom-utils@^0.0.0-dev-20220417135151

• Updated@zag-js/popper@^0.0.0-dev-20220417135151

• Updated@zag-js/types@^0.0.0-dev-20220417135151