@zag-js/tooltip 0.10.5 → 0.11.0

package/dist/index.d.mts

@@ -0,0 +1,122 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { PositioningOptions } from '@zag-js/popper';
+export { Placement, PositioningOptions } from '@zag-js/popper';
+import { RequiredBy, CommonProperties, RootProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"trigger" | "arrow" | "arrowTip" | "positioner" | "content" | "label">;
+
+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;
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{
+    /**
+     * @computed Whether an `aria-label` is set.
+     */
+    readonly hasAriaLabel: boolean;
+}>;
+type PrivateContext = RootProperties & {};
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "opening" | "open" | "closing" | "closed";
+    tags: "open" | "closed";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the tooltip is open.
+     */
+    isOpen: boolean;
+    /**
+     * Function to open the tooltip.
+     */
+    open(): void;
+    /**
+     * Function to close the tooltip.
+     */
+    close(): void;
+    /**
+     * Returns the animation state of the tooltip.
+     */
+    getAnimationState(): {
+        enter: boolean;
+        exit: boolean;
+    };
+    /**
+     * Function to reposition the popover
+     */
+    setPositioning(options?: Partial<PositioningOptions>): void;
+    triggerProps: T["button"];
+    arrowProps: T["element"];
+    arrowTipProps: T["element"];
+    positionerProps: T["element"];
+    contentProps: T["element"];
+    labelProps: T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,4 +1,122 @@
-export { anatomy } from "./tooltip.anatomy";
-export { connect } from "./tooltip.connect";
-export { machine } from "./tooltip.machine";
-export type { UserDefinedContext as Context, Placement, PositioningOptions } from "./tooltip.types";
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { PositioningOptions } from '@zag-js/popper';
+export { Placement, PositioningOptions } from '@zag-js/popper';
+import { RequiredBy, CommonProperties, RootProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"trigger" | "arrow" | "arrowTip" | "positioner" | "content" | "label">;
+
+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;
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{
+    /**
+     * @computed Whether an `aria-label` is set.
+     */
+    readonly hasAriaLabel: boolean;
+}>;
+type PrivateContext = RootProperties & {};
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "opening" | "open" | "closing" | "closed";
+    tags: "open" | "closed";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the tooltip is open.
+     */
+    isOpen: boolean;
+    /**
+     * Function to open the tooltip.
+     */
+    open(): void;
+    /**
+     * Function to close the tooltip.
+     */
+    close(): void;
+    /**
+     * Returns the animation state of the tooltip.
+     */
+    getAnimationState(): {
+        enter: boolean;
+        exit: boolean;
+    };
+    /**
+     * Function to reposition the popover
+     */
+    setPositioning(options?: Partial<PositioningOptions>): void;
+    triggerProps: T["button"];
+    arrowProps: T["element"];
+    arrowTipProps: T["element"];
+    positionerProps: T["element"];
+    contentProps: T["element"];
+    labelProps: T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.js

@@ -1,13 +1,452 @@
-'use strict';
+"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);
 
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  anatomy: () => anatomy,
+  connect: () => connect,
+  machine: () => machine
+});
+module.exports = __toCommonJS(src_exports);
 
-const tooltip_anatomy = require('./tooltip.anatomy.js');
-const tooltip_connect = require('./tooltip.connect.js');
-const tooltip_machine = require('./tooltip.machine.js');
+// src/tooltip.anatomy.ts
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content", "label");
+var parts = anatomy.build();
 
+// src/tooltip.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
+var import_popper = require("@zag-js/popper");
+var import_visually_hidden = require("@zag-js/visually-hidden");
 
+// src/tooltip.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
+  getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
+  getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
+  getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
+  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
+  getScrollParent: (ctx) => (0, import_dom_query.getScrollParent)(dom.getTriggerEl(ctx))
+});
 
-exports.anatomy = tooltip_anatomy.anatomy;
-exports.connect = tooltip_connect.connect;
-exports.machine = tooltip_machine.machine;
+// src/tooltip.store.ts
+var import_core = require("@zag-js/core");
+var store = (0, import_core.proxy)({
+  id: null,
+  prevId: null,
+  setId(val) {
+    this.prevId = this.id;
+    this.id = val;
+  }
+});
+
+// src/tooltip.connect.ts
+function connect(state, send, normalize) {
+  const id = state.context.id;
+  const hasAriaLabel = state.context.hasAriaLabel;
+  const isOpen = state.hasTag("open");
+  const triggerId = dom.getTriggerId(state.context);
+  const contentId = dom.getContentId(state.context);
+  const isDisabled = state.context.disabled;
+  const popperStyles = (0, import_popper.getPlacementStyles)({
+    placement: state.context.currentPlacement
+  });
+  return {
+    /**
+     * Whether the tooltip is open.
+     */
+    isOpen,
+    /**
+     * Function to open the tooltip.
+     */
+    open() {
+      send("OPEN");
+    },
+    /**
+     * Function to close the tooltip.
+     */
+    close() {
+      send("CLOSE");
+    },
+    /**
+     * Returns the animation state of the tooltip.
+     */
+    getAnimationState() {
+      return {
+        enter: store.prevId === null && id === store.id,
+        exit: store.id === null
+      };
+    },
+    /**
+     * Function to reposition the popover
+     */
+    setPositioning(options = {}) {
+      send({ type: "SET_POSITIONING", options });
+    },
+    triggerProps: normalize.button({
+      ...parts.trigger.attrs,
+      id: triggerId,
+      "data-expanded": (0, import_dom_query2.dataAttr)(isOpen),
+      "aria-describedby": isOpen ? contentId : void 0,
+      onClick() {
+        send("CLICK");
+      },
+      onFocus() {
+        send("FOCUS");
+      },
+      onBlur() {
+        if (id === store.id) {
+          send("BLUR");
+        }
+      },
+      onPointerDown() {
+        if (isDisabled)
+          return;
+        if (id === store.id) {
+          send("POINTER_DOWN");
+        }
+      },
+      onPointerMove(event) {
+        if (isDisabled || event.pointerType === "touch")
+          return;
+        send("POINTER_MOVE");
+      },
+      onPointerLeave() {
+        if (isDisabled)
+          return;
+        send("POINTER_LEAVE");
+      },
+      onPointerCancel() {
+        if (isDisabled)
+          return;
+        send("POINTER_LEAVE");
+      }
+    }),
+    arrowProps: normalize.element({
+      id: dom.getArrowId(state.context),
+      ...parts.arrow.attrs,
+      style: popperStyles.arrow
+    }),
+    arrowTipProps: normalize.element({
+      ...parts.arrowTip.attrs,
+      style: popperStyles.arrowTip
+    }),
+    positionerProps: normalize.element({
+      id: dom.getPositionerId(state.context),
+      ...parts.positioner.attrs,
+      style: popperStyles.floating
+    }),
+    contentProps: normalize.element({
+      ...parts.content.attrs,
+      hidden: !isOpen,
+      role: hasAriaLabel ? void 0 : "tooltip",
+      id: hasAriaLabel ? void 0 : contentId,
+      "data-placement": state.context.currentPlacement,
+      onPointerEnter() {
+        send("CONTENT.POINTER_MOVE");
+      },
+      onPointerLeave() {
+        send("CONTENT.POINTER_LEAVE");
+      },
+      style: {
+        pointerEvents: state.context.interactive ? "auto" : "none"
+      }
+    }),
+    labelProps: normalize.element({
+      ...parts.label.attrs,
+      id: contentId,
+      role: "tooltip",
+      style: import_visually_hidden.visuallyHiddenStyle,
+      children: state.context["aria-label"]
+    })
+  };
+}
+
+// src/tooltip.machine.ts
+var import_core2 = require("@zag-js/core");
+var import_dom_event = require("@zag-js/dom-event");
+var import_dom_query3 = require("@zag-js/dom-query");
+var import_popper2 = require("@zag-js/popper");
+var import_utils = require("@zag-js/utils");
+var { and, not } = import_core2.guards;
+function machine(userContext) {
+  const ctx = (0, import_utils.compact)(userContext);
+  return (0, import_core2.createMachine)(
+    {
+      id: "tooltip",
+      initial: "closed",
+      context: {
+        openDelay: 1e3,
+        closeDelay: 500,
+        closeOnPointerDown: true,
+        closeOnEsc: true,
+        interactive: true,
+        currentPlacement: void 0,
+        ...ctx,
+        hasPointerMoveOpened: false,
+        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_LEAVE: {
+              actions: ["clearPointerMoveOpened"]
+            },
+            POINTER_MOVE: [
+              {
+                guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
+                target: "opening"
+              },
+              {
+                guard: not("hasPointerMoveOpened"),
+                target: "open",
+                actions: ["setPointerMoveOpened"]
+              }
+            ]
+          }
+        },
+        opening: {
+          tags: ["closed"],
+          activities: ["trackScroll", "trackPointerlockChange"],
+          after: {
+            OPEN_DELAY: {
+              target: "open",
+              actions: ["setPointerMoveOpened"]
+            }
+          },
+          on: {
+            POINTER_LEAVE: {
+              target: "closed",
+              actions: ["clearPointerMoveOpened"]
+            },
+            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",
+                actions: ["clearPointerMoveOpened"]
+              },
+              {
+                target: "closed",
+                actions: ["clearPointerMoveOpened"]
+              }
+            ],
+            BLUR: "closed",
+            ESCAPE: "closed",
+            SCROLL: "closed",
+            POINTER_LOCK_CHANGE: "closed",
+            "CONTENT.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_MOVE: {
+              target: "open",
+              actions: ["setPointerMoveOpened"]
+            },
+            "CONTENT.POINTER_MOVE": {
+              guard: "isInteractive",
+              target: "open"
+            }
+          }
+        }
+      }
+    },
+    {
+      activities: {
+        trackPositioning(ctx2) {
+          ctx2.currentPlacement = ctx2.positioning.placement;
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          return (0, import_popper2.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 (0, import_dom_event.addDomEvent)(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
+        },
+        trackScroll(ctx2, _evt, { send }) {
+          const trigger = dom.getTriggerEl(ctx2);
+          if (!trigger)
+            return;
+          const cleanups = (0, import_dom_query3.getScrollParents)(trigger).map((el) => {
+            const opts = { passive: true, capture: true };
+            return (0, import_dom_event.addDomEvent)(el, "scroll", () => send("SCROLL"), opts);
+          });
+          return () => {
+            cleanups.forEach((fn) => fn?.());
+          };
+        },
+        trackStore(ctx2, _evt, { send }) {
+          return (0, import_core2.subscribe)(store, () => {
+            if (store.id !== ctx2.id) {
+              send("FORCE_CLOSE");
+            }
+          });
+        },
+        trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
+          if (!(0, import_dom_query3.isSafari)())
+            return;
+          const doc = dom.getDoc(ctx2);
+          return (0, import_dom_event.addDomEvent)(doc, "pointermove", (event) => {
+            const selector = "[data-part=trigger][data-expanded]";
+            if ((0, import_dom_query3.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 (0, import_dom_event.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 = ["CONTENT.POINTER_MOVE", "POINTER_MOVE"];
+          if (!omit.includes(evt.type)) {
+            ctx2.onOpen?.();
+          }
+        },
+        invokeOnClose(ctx2) {
+          ctx2.onClose?.();
+        },
+        closeIfDisabled(ctx2, _evt, { send }) {
+          if (!ctx2.disabled)
+            return;
+          send("CLOSE");
+        },
+        setPositioning(ctx2, evt) {
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          (0, import_popper2.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" });
+        },
+        setPointerMoveOpened(ctx2) {
+          ctx2.hasPointerMoveOpened = true;
+        },
+        clearPointerMoveOpened(ctx2) {
+          ctx2.hasPointerMoveOpened = false;
+        }
+      },
+      guards: {
+        closeOnPointerDown: (ctx2) => ctx2.closeOnPointerDown,
+        noVisibleTooltip: () => store.id === null,
+        isVisible: (ctx2) => ctx2.id === store.id,
+        isInteractive: (ctx2) => ctx2.interactive,
+        hasPointerMoveOpened: (ctx2) => !!ctx2.hasPointerMoveOpened
+      },
+      delays: {
+        OPEN_DELAY: (ctx2) => ctx2.openDelay,
+        CLOSE_DELAY: (ctx2) => ctx2.closeDelay
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  machine
+});
+//# sourceMappingURL=index.js.map