@zag-js/tooltip 1.34.0 → 1.35.0

package/dist/tooltip.machine.mjs

@@ -0,0 +1,361 @@
+// src/tooltip.machine.ts
+import { createGuards, createMachine } from "@zag-js/core";
+import { addDomEvent, getOverflowAncestors, isComposingEvent } from "@zag-js/dom-query";
+import { trackFocusVisible } from "@zag-js/focus-visible";
+import { getPlacement } from "@zag-js/popper";
+import * as dom from "./tooltip.dom.mjs";
+import { store } from "./tooltip.store.mjs";
+import { ensureProps } from "@zag-js/utils";
+var { and, not } = createGuards();
+var machine = createMachine({
+  initialState: ({ prop }) => {
+    const open = prop("open") || prop("defaultOpen");
+    return open ? "open" : "closed";
+  },
+  props({ props }) {
+    ensureProps(props, ["id"]);
+    const closeOnClick = props.closeOnClick ?? true;
+    const closeOnPointerDown = props.closeOnPointerDown ?? closeOnClick;
+    return {
+      openDelay: 400,
+      closeDelay: 150,
+      closeOnEscape: true,
+      interactive: false,
+      closeOnScroll: true,
+      disabled: false,
+      ...props,
+      closeOnPointerDown,
+      closeOnClick,
+      positioning: {
+        placement: "bottom",
+        ...props.positioning
+      }
+    };
+  },
+  effects: ["trackFocusVisible", "trackStore"],
+  context: ({ bindable }) => ({
+    currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+    hasPointerMoveOpened: bindable(() => ({ defaultValue: false }))
+  }),
+  watch({ track, action, prop }) {
+    track([() => prop("disabled")], () => {
+      action(["closeIfDisabled"]);
+    });
+    track([() => prop("open")], () => {
+      action(["toggleVisibility"]);
+    });
+  },
+  states: {
+    closed: {
+      entry: ["clearGlobalId"],
+      on: {
+        "controlled.open": {
+          target: "open"
+        },
+        open: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"]
+          }
+        ],
+        "pointer.leave": {
+          actions: ["clearPointerMoveOpened"]
+        },
+        "pointer.move": [
+          {
+            guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
+            target: "opening"
+          },
+          {
+            guard: not("hasPointerMoveOpened"),
+            target: "open",
+            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+          }
+        ]
+      }
+    },
+    opening: {
+      effects: ["trackScroll", "trackPointerlockChange", "waitForOpenDelay"],
+      on: {
+        "after.openDelay": [
+          {
+            guard: "isOpenControlled",
+            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+          }
+        ],
+        "controlled.open": {
+          target: "open"
+        },
+        "controlled.close": {
+          target: "closed"
+        },
+        open: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"]
+          }
+        ],
+        "pointer.leave": [
+          {
+            guard: "isOpenControlled",
+            // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
+            actions: ["clearPointerMoveOpened", "invokeOnClose", "toggleVisibility"]
+          },
+          {
+            target: "closed",
+            actions: ["clearPointerMoveOpened", "invokeOnClose"]
+          }
+        ],
+        close: [
+          {
+            guard: "isOpenControlled",
+            // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
+            actions: ["invokeOnClose", "toggleVisibility"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ]
+      }
+    },
+    open: {
+      effects: ["trackEscapeKey", "trackScroll", "trackPointerlockChange", "trackPositioning"],
+      entry: ["setGlobalId"],
+      on: {
+        "controlled.close": {
+          target: "closed"
+        },
+        close: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        "pointer.leave": [
+          {
+            guard: "isVisible",
+            target: "closing",
+            actions: ["clearPointerMoveOpened"]
+          },
+          // == group ==
+          {
+            guard: "isOpenControlled",
+            actions: ["clearPointerMoveOpened", "invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["clearPointerMoveOpened", "invokeOnClose"]
+          }
+        ],
+        "content.pointer.leave": {
+          guard: "isInteractive",
+          target: "closing"
+        },
+        "positioning.set": {
+          actions: ["reposition"]
+        }
+      }
+    },
+    closing: {
+      effects: ["trackPositioning", "waitForCloseDelay"],
+      on: {
+        "after.closeDelay": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        "controlled.close": {
+          target: "closed"
+        },
+        "controlled.open": {
+          target: "open"
+        },
+        close: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        "pointer.move": [
+          {
+            guard: "isOpenControlled",
+            // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
+            actions: ["setPointerMoveOpened", "invokeOnOpen", "toggleVisibility"]
+          },
+          {
+            target: "open",
+            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+          }
+        ],
+        "content.pointer.move": {
+          guard: "isInteractive",
+          target: "open"
+        },
+        "positioning.set": {
+          actions: ["reposition"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      noVisibleTooltip: () => store.get("id") === null,
+      isVisible: ({ prop }) => prop("id") === store.get("id"),
+      isInteractive: ({ prop }) => !!prop("interactive"),
+      hasPointerMoveOpened: ({ context }) => context.get("hasPointerMoveOpened"),
+      isOpenControlled: ({ prop }) => prop("open") !== void 0
+    },
+    actions: {
+      setGlobalId: ({ prop }) => {
+        const prevId = store.get("id");
+        const isInstant = prevId !== null && prevId !== prop("id");
+        store.update({ id: prop("id"), prevId: isInstant ? prevId : null, instant: isInstant });
+      },
+      clearGlobalId: ({ prop }) => {
+        if (prop("id") === store.get("id")) {
+          store.update({ id: null, prevId: null, instant: false });
+        }
+      },
+      invokeOnOpen: ({ prop }) => {
+        prop("onOpenChange")?.({ open: true });
+      },
+      invokeOnClose: ({ prop }) => {
+        prop("onOpenChange")?.({ open: false });
+      },
+      closeIfDisabled: ({ prop, send }) => {
+        if (!prop("disabled")) return;
+        send({ type: "close", src: "disabled.change" });
+      },
+      reposition: ({ context, event, prop, scope }) => {
+        if (event.type !== "positioning.set") return;
+        const getPositionerEl2 = () => dom.getPositionerEl(scope);
+        return getPlacement(dom.getTriggerEl(scope), getPositionerEl2, {
+          ...prop("positioning"),
+          ...event.options,
+          defer: true,
+          listeners: false,
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
+      },
+      toggleVisibility: ({ prop, event, send }) => {
+        queueMicrotask(() => {
+          send({
+            type: prop("open") ? "controlled.open" : "controlled.close",
+            previousEvent: event
+          });
+        });
+      },
+      setPointerMoveOpened: ({ context }) => {
+        context.set("hasPointerMoveOpened", true);
+      },
+      clearPointerMoveOpened: ({ context }) => {
+        context.set("hasPointerMoveOpened", false);
+      }
+    },
+    effects: {
+      trackFocusVisible: ({ scope }) => {
+        return trackFocusVisible({ root: scope.getRootNode?.() });
+      },
+      trackPositioning: ({ context, prop, scope }) => {
+        if (!context.get("currentPlacement")) {
+          context.set("currentPlacement", prop("positioning").placement);
+        }
+        const getPositionerEl2 = () => dom.getPositionerEl(scope);
+        return getPlacement(dom.getTriggerEl(scope), getPositionerEl2, {
+          ...prop("positioning"),
+          defer: true,
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
+      },
+      trackPointerlockChange: ({ send, scope }) => {
+        const doc = scope.getDoc();
+        const onChange = () => send({ type: "close", src: "pointerlock:change" });
+        return addDomEvent(doc, "pointerlockchange", onChange, false);
+      },
+      trackScroll: ({ send, prop, scope }) => {
+        if (!prop("closeOnScroll")) return;
+        const triggerEl = dom.getTriggerEl(scope);
+        if (!triggerEl) return;
+        const overflowParents = getOverflowAncestors(triggerEl);
+        const cleanups = overflowParents.map((overflowParent) => {
+          const onScroll = () => {
+            send({ type: "close", src: "scroll" });
+          };
+          return addDomEvent(overflowParent, "scroll", onScroll, {
+            passive: true,
+            capture: true
+          });
+        });
+        return () => {
+          cleanups.forEach((fn) => fn?.());
+        };
+      },
+      trackStore: ({ prop, send }) => {
+        let cleanup;
+        queueMicrotask(() => {
+          cleanup = store.subscribe(() => {
+            if (store.get("id") !== prop("id")) {
+              send({ type: "close", src: "id.change" });
+            }
+          });
+        });
+        return () => cleanup?.();
+      },
+      trackEscapeKey: ({ send, prop }) => {
+        if (!prop("closeOnEscape")) return;
+        const onKeyDown = (event) => {
+          if (isComposingEvent(event)) return;
+          if (event.key !== "Escape") return;
+          event.stopPropagation();
+          send({ type: "close", src: "keydown.escape" });
+        };
+        return addDomEvent(document, "keydown", onKeyDown, true);
+      },
+      waitForOpenDelay: ({ send, prop }) => {
+        const id = setTimeout(() => {
+          send({ type: "after.openDelay" });
+        }, prop("openDelay"));
+        return () => clearTimeout(id);
+      },
+      waitForCloseDelay: ({ send, prop }) => {
+        const id = setTimeout(() => {
+          send({ type: "after.closeDelay" });
+        }, prop("closeDelay"));
+        return () => clearTimeout(id);
+      }
+    }
+  }
+});
+export {
+  machine
+};

package/dist/tooltip.props.d.mts

@@ -0,0 +1,9 @@
+import { TooltipProps } from './tooltip.types.mjs';
+import '@zag-js/core';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare const props: (keyof TooltipProps)[];
+declare const splitProps: <Props extends Partial<TooltipProps>>(props: Props) => [Partial<TooltipProps>, Omit<Props, keyof TooltipProps>];
+
+export { props, splitProps };

package/dist/tooltip.props.d.ts

@@ -0,0 +1,9 @@
+import { TooltipProps } from './tooltip.types.js';
+import '@zag-js/core';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare const props: (keyof TooltipProps)[];
+declare const splitProps: <Props extends Partial<TooltipProps>>(props: Props) => [Partial<TooltipProps>, Omit<Props, keyof TooltipProps>];
+
+export { props, splitProps };

package/dist/tooltip.props.js

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tooltip.props.ts
+var tooltip_props_exports = {};
+__export(tooltip_props_exports, {
+  props: () => props,
+  splitProps: () => splitProps
+});
+module.exports = __toCommonJS(tooltip_props_exports);
+var import_types = require("@zag-js/types");
+var import_utils = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "aria-label",
+  "closeDelay",
+  "closeOnEscape",
+  "closeOnPointerDown",
+  "closeOnScroll",
+  "closeOnClick",
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "interactive",
+  "onOpenChange",
+  "defaultOpen",
+  "open",
+  "openDelay",
+  "positioning"
+]);
+var splitProps = (0, import_utils.createSplitProps)(props);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  props,
+  splitProps
+});

package/dist/tooltip.props.mjs

@@ -0,0 +1,27 @@
+// src/tooltip.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "aria-label",
+  "closeDelay",
+  "closeOnEscape",
+  "closeOnPointerDown",
+  "closeOnScroll",
+  "closeOnClick",
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "interactive",
+  "onOpenChange",
+  "defaultOpen",
+  "open",
+  "openDelay",
+  "positioning"
+]);
+var splitProps = createSplitProps(props);
+export {
+  props,
+  splitProps
+};

package/dist/tooltip.store.d.mts

@@ -0,0 +1,9 @@
+import * as _zag_js_utils from '@zag-js/utils';
+
+declare const store: _zag_js_utils.Store<{
+    id: string | null;
+    prevId: string | null;
+    instant: boolean;
+}>;
+
+export { store };

package/dist/tooltip.store.d.ts

@@ -0,0 +1,9 @@
+import * as _zag_js_utils from '@zag-js/utils';
+
+declare const store: _zag_js_utils.Store<{
+    id: string | null;
+    prevId: string | null;
+    instant: boolean;
+}>;
+
+export { store };

package/dist/tooltip.store.js

@@ -0,0 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tooltip.store.ts
+var tooltip_store_exports = {};
+__export(tooltip_store_exports, {
+  store: () => store
+});
+module.exports = __toCommonJS(tooltip_store_exports);
+var import_utils = require("@zag-js/utils");
+var store = (0, import_utils.createStore)({
+  id: null,
+  prevId: null,
+  instant: false
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  store
+});

package/dist/tooltip.store.mjs

@@ -0,0 +1,10 @@
+// src/tooltip.store.ts
+import { createStore } from "@zag-js/utils";
+var store = createStore({
+  id: null,
+  prevId: null,
+  instant: false
+});
+export {
+  store
+};

package/dist/tooltip.types.d.mts

@@ -0,0 +1,119 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { PositioningOptions, Placement } from '@zag-js/popper';
+export { Placement, PositioningOptions } from '@zag-js/popper';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+
+interface OpenChangeDetails {
+    open: boolean;
+}
+type ElementIds = Partial<{
+    trigger: string;
+    content: string;
+    arrow: string;
+    positioner: string;
+}>;
+interface TooltipProps extends DirectionProperty, CommonProperties {
+    /**
+     * The ids of the elements in the tooltip. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * The open delay of the tooltip.
+     * @default 400
+     */
+    openDelay?: number | undefined;
+    /**
+     * The close delay of the tooltip.
+     * @default 150
+     */
+    closeDelay?: number | undefined;
+    /**
+     * Whether to close the tooltip on pointerdown.
+     * @default true
+     */
+    closeOnPointerDown?: boolean | undefined;
+    /**
+     * Whether to close the tooltip when the Escape key is pressed.
+     * @default true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * Whether the tooltip should close on scroll
+     * @default true
+     */
+    closeOnScroll?: boolean | undefined;
+    /**
+     * Whether the tooltip should close on click
+     * @default true
+     */
+    closeOnClick?: boolean | undefined;
+    /**
+     * 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
+     *
+     * @default false
+     */
+    interactive?: boolean | undefined;
+    /**
+     * Function called when the tooltip is opened.
+     */
+    onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+    /**
+     * Custom label for the tooltip.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * The user provided options used to position the popover content
+     */
+    positioning?: PositioningOptions | undefined;
+    /**
+     * Whether the tooltip is disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The controlled open state of the tooltip
+     */
+    open?: boolean | undefined;
+    /**
+     * The initial open state of the tooltip when rendered.
+     * Use when you don't need to control the open state of the tooltip.
+     */
+    defaultOpen?: boolean | undefined;
+}
+type PropsWithDefault = "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "closeOnScroll" | "closeOnClick" | "interactive" | "id" | "positioning";
+interface TooltipSchema {
+    state: "open" | "closed" | "opening" | "closing";
+    props: RequiredBy<TooltipProps, PropsWithDefault>;
+    context: {
+        currentPlacement: Placement | undefined;
+        hasPointerMoveOpened: boolean;
+    };
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+}
+type TooltipService = Service<TooltipSchema>;
+type TooltipMachine = Machine<TooltipSchema>;
+interface TooltipApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the tooltip is open.
+     */
+    open: boolean;
+    /**
+     * Function to open the tooltip.
+     */
+    setOpen: (open: boolean) => void;
+    /**
+     * Function to reposition the popover
+     */
+    reposition: (options?: Partial<PositioningOptions>) => void;
+    getTriggerProps: () => T["button"];
+    getArrowProps: () => T["element"];
+    getArrowTipProps: () => T["element"];
+    getPositionerProps: () => T["element"];
+    getContentProps: () => T["element"];
+}
+
+export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService };