@zag-js/tooltip 0.10.5 → 0.11.0

package/dist/tooltip.machine.js

@@ -1,239 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const core = require('@zag-js/core');
-const domEvent = require('@zag-js/dom-event');
-const domQuery = require('@zag-js/dom-query');
-const popper = require('@zag-js/popper');
-const utils = require('@zag-js/utils');
-const tooltip_dom = require('./tooltip.dom.js');
-const tooltip_store = require('./tooltip.store.js');
-
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "tooltip",
-      initial: "closed",
-      context: {
-        openDelay: 1e3,
-        closeDelay: 500,
-        closeOnPointerDown: true,
-        closeOnEsc: true,
-        interactive: true,
-        currentPlacement: void 0,
-        ...ctx,
-        positioning: {
-          placement: "bottom",
-          ...ctx.positioning
-        }
-      },
-      computed: {
-        hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
-      },
-      watch: {
-        disabled: ["closeIfDisabled"],
-        open: ["toggleVisibility"]
-      },
-      on: {
-        OPEN: "open",
-        CLOSE: "closed"
-      },
-      states: {
-        closed: {
-          tags: ["closed"],
-          entry: ["clearGlobalId", "invokeOnClose"],
-          on: {
-            FOCUS: "open",
-            POINTER_ENTER: [
-              {
-                guard: "noVisibleTooltip",
-                target: "opening"
-              },
-              { target: "open" }
-            ]
-          }
-        },
-        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",
-            "trackPositioning"
-          ],
-          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"
-            },
-            POINTER_DOWN: {
-              guard: "closeOnPointerDown",
-              target: "closed"
-            },
-            CLICK: "closed",
-            SET_POSITIONING: {
-              actions: "setPositioning"
-            }
-          }
-        },
-        closing: {
-          tags: ["open"],
-          activities: ["trackStore", "trackPositioning"],
-          after: {
-            CLOSE_DELAY: "closed"
-          },
-          on: {
-            FORCE_CLOSE: "closed",
-            POINTER_ENTER: "open",
-            TOOLTIP_POINTER_ENTER: {
-              guard: "isInteractive",
-              target: "open"
-            }
-          }
-        }
-      }
-    },
-    {
-      activities: {
-        trackPositioning(ctx2) {
-          ctx2.currentPlacement = ctx2.positioning.placement;
-          const getPositionerEl = () => tooltip_dom.dom.getPositionerEl(ctx2);
-          return popper.getPlacement(tooltip_dom.dom.getTriggerEl(ctx2), getPositionerEl, {
-            ...ctx2.positioning,
-            defer: true,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            },
-            onCleanup() {
-              ctx2.currentPlacement = void 0;
-            }
-          });
-        },
-        trackPointerlockChange(ctx2, _evt, { send }) {
-          const onChange = () => send("POINTER_LOCK_CHANGE");
-          return domEvent.addDomEvent(tooltip_dom.dom.getDoc(ctx2), "pointerlockchange", onChange, false);
-        },
-        trackScroll(ctx2, _evt, { send }) {
-          const trigger = tooltip_dom.dom.getTriggerEl(ctx2);
-          if (!trigger)
-            return;
-          const cleanups = domQuery.getScrollParents(trigger).map((el) => {
-            const opts = { passive: true, capture: true };
-            return domEvent.addDomEvent(el, "scroll", () => send("SCROLL"), opts);
-          });
-          return () => {
-            cleanups.forEach((fn) => fn?.());
-          };
-        },
-        trackStore(ctx2, _evt, { send }) {
-          return core.subscribe(tooltip_store.store, () => {
-            if (tooltip_store.store.id !== ctx2.id) {
-              send("FORCE_CLOSE");
-            }
-          });
-        },
-        trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
-          if (!domQuery.isSafari())
-            return;
-          const doc = tooltip_dom.dom.getDoc(ctx2);
-          return domEvent.addDomEvent(doc, "pointermove", (event) => {
-            const selector = "[data-part=trigger][data-expanded]";
-            if (domQuery.isHTMLElement(event.target) && event.target.closest(selector))
-              return;
-            send("POINTER_LEAVE");
-          });
-        },
-        trackEscapeKey(ctx2, _evt, { send }) {
-          if (!ctx2.closeOnEsc)
-            return;
-          const doc = tooltip_dom.dom.getDoc(ctx2);
-          return domEvent.addDomEvent(doc, "keydown", (event) => {
-            if (event.key === "Escape") {
-              send("ESCAPE");
-            }
-          });
-        }
-      },
-      actions: {
-        setGlobalId(ctx2) {
-          tooltip_store.store.setId(ctx2.id);
-        },
-        clearGlobalId(ctx2) {
-          if (ctx2.id === tooltip_store.store.id) {
-            tooltip_store.store.setId(null);
-          }
-        },
-        invokeOnOpen(ctx2, evt) {
-          const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
-          if (!omit.includes(evt.type)) {
-            ctx2.onOpen?.();
-          }
-        },
-        invokeOnClose(ctx2) {
-          ctx2.onClose?.();
-        },
-        closeIfDisabled(ctx2, _evt, { send }) {
-          if (ctx2.disabled) {
-            send("CLOSE");
-          }
-        },
-        setPositioning(ctx2, evt) {
-          const getPositionerEl = () => tooltip_dom.dom.getPositionerEl(ctx2);
-          popper.getPlacement(tooltip_dom.dom.getTriggerEl(ctx2), getPositionerEl, {
-            ...ctx2.positioning,
-            ...evt.options,
-            defer: true,
-            listeners: false
-          });
-        },
-        toggleVisibility(ctx2, _evt, { send }) {
-          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
-        }
-      },
-      guards: {
-        closeOnPointerDown: (ctx2) => ctx2.closeOnPointerDown,
-        noVisibleTooltip: () => tooltip_store.store.id === null,
-        isVisible: (ctx2) => ctx2.id === tooltip_store.store.id,
-        isInteractive: (ctx2) => ctx2.interactive
-      },
-      delays: {
-        OPEN_DELAY: (ctx2) => ctx2.openDelay,
-        CLOSE_DELAY: (ctx2) => ctx2.closeDelay
-      }
-    }
-  );
-}
-
-exports.machine = machine;

package/dist/tooltip.machine.mjs

@@ -1,235 +0,0 @@
-import { createMachine, subscribe } from '@zag-js/core';
-import { addDomEvent } from '@zag-js/dom-event';
-import { getScrollParents, isSafari, isHTMLElement } from '@zag-js/dom-query';
-import { getPlacement } from '@zag-js/popper';
-import { compact } from '@zag-js/utils';
-import { dom } from './tooltip.dom.mjs';
-import { store } from './tooltip.store.mjs';
-
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "tooltip",
-      initial: "closed",
-      context: {
-        openDelay: 1e3,
-        closeDelay: 500,
-        closeOnPointerDown: true,
-        closeOnEsc: true,
-        interactive: true,
-        currentPlacement: void 0,
-        ...ctx,
-        positioning: {
-          placement: "bottom",
-          ...ctx.positioning
-        }
-      },
-      computed: {
-        hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
-      },
-      watch: {
-        disabled: ["closeIfDisabled"],
-        open: ["toggleVisibility"]
-      },
-      on: {
-        OPEN: "open",
-        CLOSE: "closed"
-      },
-      states: {
-        closed: {
-          tags: ["closed"],
-          entry: ["clearGlobalId", "invokeOnClose"],
-          on: {
-            FOCUS: "open",
-            POINTER_ENTER: [
-              {
-                guard: "noVisibleTooltip",
-                target: "opening"
-              },
-              { target: "open" }
-            ]
-          }
-        },
-        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",
-            "trackPositioning"
-          ],
-          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"
-            },
-            POINTER_DOWN: {
-              guard: "closeOnPointerDown",
-              target: "closed"
-            },
-            CLICK: "closed",
-            SET_POSITIONING: {
-              actions: "setPositioning"
-            }
-          }
-        },
-        closing: {
-          tags: ["open"],
-          activities: ["trackStore", "trackPositioning"],
-          after: {
-            CLOSE_DELAY: "closed"
-          },
-          on: {
-            FORCE_CLOSE: "closed",
-            POINTER_ENTER: "open",
-            TOOLTIP_POINTER_ENTER: {
-              guard: "isInteractive",
-              target: "open"
-            }
-          }
-        }
-      }
-    },
-    {
-      activities: {
-        trackPositioning(ctx2) {
-          ctx2.currentPlacement = ctx2.positioning.placement;
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          return getPlacement(dom.getTriggerEl(ctx2), getPositionerEl, {
-            ...ctx2.positioning,
-            defer: true,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            },
-            onCleanup() {
-              ctx2.currentPlacement = void 0;
-            }
-          });
-        },
-        trackPointerlockChange(ctx2, _evt, { send }) {
-          const onChange = () => send("POINTER_LOCK_CHANGE");
-          return addDomEvent(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
-        },
-        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?.());
-          };
-        },
-        trackStore(ctx2, _evt, { send }) {
-          return subscribe(store, () => {
-            if (store.id !== ctx2.id) {
-              send("FORCE_CLOSE");
-            }
-          });
-        },
-        trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
-          if (!isSafari())
-            return;
-          const doc = dom.getDoc(ctx2);
-          return addDomEvent(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;
-          const doc = dom.getDoc(ctx2);
-          return addDomEvent(doc, "keydown", (event) => {
-            if (event.key === "Escape") {
-              send("ESCAPE");
-            }
-          });
-        }
-      },
-      actions: {
-        setGlobalId(ctx2) {
-          store.setId(ctx2.id);
-        },
-        clearGlobalId(ctx2) {
-          if (ctx2.id === store.id) {
-            store.setId(null);
-          }
-        },
-        invokeOnOpen(ctx2, evt) {
-          const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
-          if (!omit.includes(evt.type)) {
-            ctx2.onOpen?.();
-          }
-        },
-        invokeOnClose(ctx2) {
-          ctx2.onClose?.();
-        },
-        closeIfDisabled(ctx2, _evt, { send }) {
-          if (ctx2.disabled) {
-            send("CLOSE");
-          }
-        },
-        setPositioning(ctx2, evt) {
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          getPlacement(dom.getTriggerEl(ctx2), getPositionerEl, {
-            ...ctx2.positioning,
-            ...evt.options,
-            defer: true,
-            listeners: false
-          });
-        },
-        toggleVisibility(ctx2, _evt, { send }) {
-          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
-        }
-      },
-      guards: {
-        closeOnPointerDown: (ctx2) => ctx2.closeOnPointerDown,
-        noVisibleTooltip: () => store.id === null,
-        isVisible: (ctx2) => ctx2.id === store.id,
-        isInteractive: (ctx2) => ctx2.interactive
-      },
-      delays: {
-        OPEN_DELAY: (ctx2) => ctx2.openDelay,
-        CLOSE_DELAY: (ctx2) => ctx2.closeDelay
-      }
-    }
-  );
-}
-
-export { machine };

package/dist/tooltip.store.d.ts

@@ -1,8 +0,0 @@
-type Id = string | null;
-type Store = {
-    id: Id;
-    prevId: Id;
-    setId: (val: Id) => void;
-};
-export declare const store: Store;
-export {};

package/dist/tooltip.store.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const core = require('@zag-js/core');
-
-const store = core.proxy({
-  id: null,
-  prevId: null,
-  setId(val) {
-    this.prevId = this.id;
-    this.id = val;
-  }
-});
-
-exports.store = store;

package/dist/tooltip.store.mjs

@@ -1,12 +0,0 @@
-import { proxy } from '@zag-js/core';
-
-const store = proxy({
-  id: null,
-  prevId: null,
-  setId(val) {
-    this.prevId = this.id;
-    this.id = val;
-  }
-});
-
-export { store };

package/dist/tooltip.types.d.ts

@@ -1,81 +0,0 @@
-import type { StateMachine as S } from "@zag-js/core";
-import type { Placement, PositioningOptions } from "@zag-js/popper";
-import type { CommonProperties, RequiredBy, RootProperties } from "@zag-js/types";
-type ElementIds = Partial<{
-    trigger: string;
-    content: string;
-    arrow: string;
-    positioner: string;
-}>;
-type PublicContext = CommonProperties & {
-    /**
-     * The ids of the elements in the tooltip. Useful for composition.
-     */
-    ids?: ElementIds;
-    /**
-     * The `id` of the tooltip.
-     */
-    id: string;
-    /**
-     * The open delay of the tooltip.
-     */
-    openDelay: number;
-    /**
-     * The close delay of the tooltip.
-     */
-    closeDelay: number;
-    /**
-     * Whether to close the tooltip on pointerdown.
-     */
-    closeOnPointerDown: boolean;
-    /**
-     * Whether to close the tooltip when the Escape key is pressed.
-     */
-    closeOnEsc?: boolean;
-    /**
-     * Whether the tooltip's content is interactive.
-     * In this mode, the tooltip will remain open when user hovers over the content.
-     * @see https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus
-     */
-    interactive: boolean;
-    /**
-     * Function called when the tooltip is opened.
-     */
-    onOpen?: VoidFunction;
-    /**
-     * Function called when the tooltip is closed.
-     */
-    onClose?: VoidFunction;
-    /**
-     * Custom label for the tooltip.
-     */
-    "aria-label"?: string;
-    /**
-     * The user provided options used to position the popover content
-     */
-    positioning: PositioningOptions;
-    /**
-     * Whether the tooltip is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the tooltip is open
-     */
-    open?: boolean;
-};
-export type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
-    /**
-     * @computed Whether an `aria-label` is set.
-     */
-    readonly hasAriaLabel: boolean;
-}>;
-type PrivateContext = RootProperties & {};
-export type MachineContext = PublicContext & ComputedContext & PrivateContext;
-export type MachineState = {
-    value: "opening" | "open" | "closing" | "closed";
-    tags: "open" | "closed";
-};
-export type State = S.State<MachineContext, MachineState>;
-export type Send = S.Send<S.AnyEventObject>;
-export type { PositioningOptions, Placement };