@zag-js/tooltip 0.2.5 → 0.2.6

package/dist/tooltip.connect.js

@@ -0,0 +1,308 @@
+"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.connect.ts
+var tooltip_connect_exports = {};
+__export(tooltip_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(tooltip_connect_exports);
+
+// ../../utilities/dom/src/attrs.ts
+var dataAttr = (guard) => {
+  return guard ? "" : void 0;
+};
+
+// ../../utilities/dom/src/get-computed-style.ts
+function getCache() {
+  const g = globalThis;
+  g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
+  return g.__styleCache;
+}
+function getComputedStyle(el) {
+  var _a;
+  if (!el)
+    return {};
+  const cache = getCache();
+  let style = cache.get(el);
+  if (!style) {
+    const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+    style = win.getComputedStyle(el);
+    cache.set(el, style);
+  }
+  return style;
+}
+
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getNodeName(node) {
+  var _a;
+  return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
+}
+function getParent(el) {
+  const doc = getDocument(el);
+  if (getNodeName(el) === "html")
+    return el;
+  return el.assignedSlot || el.parentElement || doc.documentElement;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+function isHTMLElement(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+
+// ../../utilities/dom/src/scrollable.ts
+function isScrollParent(el) {
+  const { overflow, overflowX, overflowY } = getComputedStyle(el);
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+}
+function getScrollParent(el) {
+  if (["html", "body", "#document"].includes(getNodeName(el))) {
+    return getDocument(el).body;
+  }
+  if (isHTMLElement(el) && isScrollParent(el)) {
+    return el;
+  }
+  return getScrollParent(getParent(el));
+}
+
+// ../../utilities/dom/src/visually-hidden.ts
+var visuallyHiddenStyle = {
+  border: "0",
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: "0",
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap",
+  wordWrap: "normal"
+};
+
+// src/tooltip.connect.ts
+var import_popper = require("@zag-js/popper");
+
+// src/tooltip.dom.ts
+var dom = defineDomHelpers({
+  getTriggerId: (ctx) => {
+    var _a, _b;
+    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`;
+  },
+  getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
+  portalId: "tooltip-portal",
+  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) => getScrollParent(dom.getTriggerEl(ctx)),
+  getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
+  createPortalEl: (ctx) => {
+    const portal = dom.getDoc(ctx).createElement(dom.portalId);
+    portal.id = dom.portalId;
+    return portal;
+  }
+});
+
+// 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.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
+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)({
+    measured: !!state.context.isPlacementComplete,
+    placement: state.context.currentPlacement
+  });
+  return {
+    isOpen,
+    open() {
+      send("OPEN");
+    },
+    close() {
+      send("CLOSE");
+    },
+    getAnimationState() {
+      return {
+        enter: store.prevId === null && id === store.id,
+        exit: store.id === null
+      };
+    },
+    triggerProps: normalize.button({
+      ...parts.trigger.attrs,
+      id: triggerId,
+      "data-expanded": 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() {
+        if (isDisabled)
+          return;
+        send("POINTER_ENTER");
+      },
+      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("TOOLTIP_POINTER_ENTER");
+      },
+      onPointerLeave() {
+        send("TOOLTIP_POINTER_LEAVE");
+      },
+      style: {
+        pointerEvents: state.context.interactive ? "auto" : "none"
+      }
+    }),
+    labelProps: normalize.element({
+      ...parts.label.attrs,
+      id: contentId,
+      role: "tooltip",
+      style: visuallyHiddenStyle,
+      children: state.context["aria-label"]
+    }),
+    createPortal() {
+      const doc = dom.getDoc(state.context);
+      const exist = dom.getPortalEl(state.context);
+      if (exist)
+        return exist;
+      const portal = dom.createPortalEl(state.context);
+      doc.body.appendChild(portal);
+      return portal;
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/tooltip.connect.mjs

@@ -0,0 +1,9 @@
+import {
+  connect
+} from "./chunk-XZ6HXWV2.mjs";
+import "./chunk-RRQRIZBA.mjs";
+import "./chunk-PFKIRGNP.mjs";
+import "./chunk-GQYNO326.mjs";
+export {
+  connect
+};

package/dist/tooltip.dom.d.ts

@@ -0,0 +1,41 @@
+import { MachineContext } from './tooltip.types.js';
+import '@zag-js/core';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare const dom: {
+    getRootNode: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => HTMLElement | null;
+    getById: <T = HTMLElement>(ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, id: string) => T | null;
+    createEmitter: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, target: HTMLElement) => (evt: string, detail: Record<string, any>, options?: EventInit | undefined) => void;
+    createListener: (target: HTMLElement) => <T_1 = any>(evt: string, handler: (e: CustomEvent<T_1>) => void) => () => void;
+} & {
+    getTriggerId: (ctx: MachineContext) => string;
+    getContentId: (ctx: MachineContext) => string;
+    getArrowId: (ctx: MachineContext) => string;
+    getPositionerId: (ctx: MachineContext) => string;
+    portalId: string;
+    getTriggerEl: (ctx: MachineContext) => HTMLElement | null;
+    getContentEl: (ctx: MachineContext) => HTMLElement | null;
+    getPositionerEl: (ctx: MachineContext) => HTMLElement | null;
+    getArrowEl: (ctx: MachineContext) => HTMLElement | null;
+    getScrollParent: (ctx: MachineContext) => HTMLElement;
+    getPortalEl: (ctx: MachineContext) => HTMLElement | null;
+    createPortalEl: (ctx: MachineContext) => HTMLElement;
+};
+
+export { dom };

package/dist/tooltip.dom.js

@@ -0,0 +1,156 @@
+"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.dom.ts
+var tooltip_dom_exports = {};
+__export(tooltip_dom_exports, {
+  dom: () => dom
+});
+module.exports = __toCommonJS(tooltip_dom_exports);
+
+// ../../utilities/dom/src/get-computed-style.ts
+function getCache() {
+  const g = globalThis;
+  g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
+  return g.__styleCache;
+}
+function getComputedStyle(el) {
+  var _a;
+  if (!el)
+    return {};
+  const cache = getCache();
+  let style = cache.get(el);
+  if (!style) {
+    const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+    style = win.getComputedStyle(el);
+    cache.set(el, style);
+  }
+  return style;
+}
+
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getNodeName(node) {
+  var _a;
+  return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
+}
+function getParent(el) {
+  const doc = getDocument(el);
+  if (getNodeName(el) === "html")
+    return el;
+  return el.assignedSlot || el.parentElement || doc.documentElement;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+function isHTMLElement(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+
+// ../../utilities/dom/src/scrollable.ts
+function isScrollParent(el) {
+  const { overflow, overflowX, overflowY } = getComputedStyle(el);
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+}
+function getScrollParent(el) {
+  if (["html", "body", "#document"].includes(getNodeName(el))) {
+    return getDocument(el).body;
+  }
+  if (isHTMLElement(el) && isScrollParent(el)) {
+    return el;
+  }
+  return getScrollParent(getParent(el));
+}
+
+// src/tooltip.dom.ts
+var dom = defineDomHelpers({
+  getTriggerId: (ctx) => {
+    var _a, _b;
+    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`;
+  },
+  getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
+  portalId: "tooltip-portal",
+  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) => getScrollParent(dom.getTriggerEl(ctx)),
+  getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
+  createPortalEl: (ctx) => {
+    const portal = dom.getDoc(ctx).createElement(dom.portalId);
+    portal.id = dom.portalId;
+    return portal;
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dom
+});

package/dist/tooltip.dom.mjs

@@ -0,0 +1,6 @@
+import {
+  dom
+} from "./chunk-PFKIRGNP.mjs";
+export {
+  dom
+};

package/dist/tooltip.machine.d.ts

@@ -0,0 +1,8 @@
+import * as _zag_js_core from '@zag-js/core';
+import { UserDefinedContext, MachineContext, MachineState } from './tooltip.types.js';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { machine };