dgz-ui-shared/dist/components/tooltip/index.es.js

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library

import { j as D } from "../../jsx-runtime-C5mzlN2N.js";
import { j as q, g as J, y as Q, a as f, x as H, h as V, b as w, R as W, M as Z, _ as $ } from "../../index-DqTIeHVj-CeLMF2B2.js";
import * as i from "react";
import { o as A, i as ee, r as te, s as oe, c as ne } from "../../index-VIo8j85K-Gso9ejBr.js";
import { n as re } from "../../index-CYIFqWxx-6SIsOs0F.js";
import { m as ie } from "../../utils-B6fNqzRf-B1_jG1K7.js";
var [_, Oe] = q("Tooltip", [
  A
]), k = A(), B = "TooltipProvider", ae = 700, L = "tooltip.open", [se, M] = _(B), z = (t) => {
  const {
    __scopeTooltip: o,
    delayDuration: e = ae,
    skipDelayDuration: n = 300,
    disableHoverableContent: r = !1,
    children: l
  } = t, s = i.useRef(!0), x = i.useRef(!1), a = i.useRef(0);
  return i.useEffect(() => {
    const d = a.current;
    return () => window.clearTimeout(d);
  }, []), /* @__PURE__ */ f.jsx(
    se,
    {
      scope: o,
      isOpenDelayedRef: s,
      delayDuration: e,
      onOpen: i.useCallback(() => {
        window.clearTimeout(a.current), s.current = !1;
      }, []),
      onClose: i.useCallback(() => {
        window.clearTimeout(a.current), a.current = window.setTimeout(
          () => s.current = !0,
          n
        );
      }, [n]),
      isPointerInTransitRef: x,
      onPointerInTransitChange: i.useCallback((d) => {
        x.current = d;
      }, []),
      disableHoverableContent: r,
      children: l
    }
  );
};
z.displayName = B;
var j = "Tooltip", [le, P] = _(j), F = (t) => {
  const {
    __scopeTooltip: o,
    children: e,
    open: n,
    defaultOpen: r,
    onOpenChange: l,
    disableHoverableContent: s,
    delayDuration: x
  } = t, a = M(j, t.__scopeTooltip), d = k(o), [c, p] = i.useState(null), h = J(), u = i.useRef(0), m = s ?? a.disableHoverableContent, v = x ?? a.delayDuration, g = i.useRef(!1), [b, y] = Q({
    prop: n,
    defaultProp: r ?? !1,
    onChange: (N) => {
      N ? (a.onOpen(), document.dispatchEvent(new CustomEvent(L))) : a.onClose(), l == null || l(N);
    },
    caller: j
  }), C = i.useMemo(() => b ? g.current ? "delayed-open" : "instant-open" : "closed", [b]), E = i.useCallback(() => {
    window.clearTimeout(u.current), u.current = 0, g.current = !1, y(!0);
  }, [y]), R = i.useCallback(() => {
    window.clearTimeout(u.current), u.current = 0, y(!1);
  }, [y]), I = i.useCallback(() => {
    window.clearTimeout(u.current), u.current = window.setTimeout(() => {
      g.current = !0, y(!0), u.current = 0;
    }, v);
  }, [v, y]);
  return i.useEffect(() => () => {
    u.current && (window.clearTimeout(u.current), u.current = 0);
  }, []), /* @__PURE__ */ f.jsx(ee, { ...d, children: /* @__PURE__ */ f.jsx(
    le,
    {
      scope: o,
      contentId: h,
      open: b,
      stateAttribute: C,
      trigger: c,
      onTriggerChange: p,
      onTriggerEnter: i.useCallback(() => {
        a.isOpenDelayedRef.current ? I() : E();
      }, [a.isOpenDelayedRef, I, E]),
      onTriggerLeave: i.useCallback(() => {
        m ? R() : (window.clearTimeout(u.current), u.current = 0);
      }, [R, m]),
      onOpen: E,
      onClose: R,
      disableHoverableContent: m,
      children: e
    }
  ) });
};
F.displayName = j;
var O = "TooltipTrigger", S = i.forwardRef(
  (t, o) => {
    const { __scopeTooltip: e, ...n } = t, r = P(O, e), l = M(O, e), s = k(e), x = i.useRef(null), a = H(o, x, r.onTriggerChange), d = i.useRef(!1), c = i.useRef(!1), p = i.useCallback(() => d.current = !1, []);
    return i.useEffect(() => () => document.removeEventListener("pointerup", p), [p]), /* @__PURE__ */ f.jsx(te, { asChild: !0, ...s, children: /* @__PURE__ */ f.jsx(
      V.button,
      {
        "aria-describedby": r.open ? r.contentId : void 0,
        "data-state": r.stateAttribute,
        ...n,
        ref: a,
        onPointerMove: w(t.onPointerMove, (h) => {
          h.pointerType !== "touch" && !c.current && !l.isPointerInTransitRef.current && (r.onTriggerEnter(), c.current = !0);
        }),
        onPointerLeave: w(t.onPointerLeave, () => {
          r.onTriggerLeave(), c.current = !1;
        }),
        onPointerDown: w(t.onPointerDown, () => {
          r.open && r.onClose(), d.current = !0, document.addEventListener("pointerup", p, { once: !0 });
        }),
        onFocus: w(t.onFocus, () => {
          d.current || r.onOpen();
        }),
        onBlur: w(t.onBlur, r.onClose),
        onClick: w(t.onClick, r.onClose)
      }
    ) });
  }
);
S.displayName = O;
var ce = "TooltipPortal", [Me, ue] = _(ce, {
  forceMount: void 0
}), T = "TooltipContent", K = i.forwardRef(
  (t, o) => {
    const e = ue(T, t.__scopeTooltip), { forceMount: n = e.forceMount, side: r = "top", ...l } = t, s = P(T, t.__scopeTooltip);
    return /* @__PURE__ */ f.jsx(W, { present: n || s.open, children: s.disableHoverableContent ? /* @__PURE__ */ f.jsx(X, { side: r, ...l, ref: o }) : /* @__PURE__ */ f.jsx(de, { side: r, ...l, ref: o }) });
  }
), de = i.forwardRef((t, o) => {
  const e = P(T, t.__scopeTooltip), n = M(T, t.__scopeTooltip), r = i.useRef(null), l = H(o, r), [s, x] = i.useState(null), { trigger: a, onClose: d } = e, c = r.current, { onPointerInTransitChange: p } = n, h = i.useCallback(() => {
    x(null), p(!1);
  }, [p]), u = i.useCallback(
    (m, v) => {
      const g = m.currentTarget, b = { x: m.clientX, y: m.clientY }, y = me(b, g.getBoundingClientRect()), C = ge(b, y), E = ve(v.getBoundingClientRect()), R = be([...C, ...E]);
      x(R), p(!0);
    },
    [p]
  );
  return i.useEffect(() => () => h(), [h]), i.useEffect(() => {
    if (a && c) {
      const m = (g) => u(g, c), v = (g) => u(g, a);
      return a.addEventListener("pointerleave", m), c.addEventListener("pointerleave", v), () => {
        a.removeEventListener("pointerleave", m), c.removeEventListener("pointerleave", v);
      };
    }
  }, [a, c, u, h]), i.useEffect(() => {
    if (s) {
      const m = (v) => {
        const g = v.target, b = { x: v.clientX, y: v.clientY }, y = (a == null ? void 0 : a.contains(g)) || (c == null ? void 0 : c.contains(g)), C = !ye(b, s);
        y ? h() : C && (h(), d());
      };
      return document.addEventListener("pointermove", m), () => document.removeEventListener("pointermove", m);
    }
  }, [a, c, s, d, h]), /* @__PURE__ */ f.jsx(X, { ...t, ref: l });
}), [pe, fe] = _(j, { isInside: !1 }), xe = $("TooltipContent"), X = i.forwardRef(
  (t, o) => {
    const {
      __scopeTooltip: e,
      children: n,
      "aria-label": r,
      onEscapeKeyDown: l,
      onPointerDownOutside: s,
      ...x
    } = t, a = P(T, e), d = k(e), { onClose: c } = a;
    return i.useEffect(() => (document.addEventListener(L, c), () => document.removeEventListener(L, c)), [c]), i.useEffect(() => {
      if (a.trigger) {
        const p = (h) => {
          const u = h.target;
          u != null && u.contains(a.trigger) && c();
        };
        return window.addEventListener("scroll", p, { capture: !0 }), () => window.removeEventListener("scroll", p, { capture: !0 });
      }
    }, [a.trigger, c]), /* @__PURE__ */ f.jsx(
      Z,
      {
        asChild: !0,
        disableOutsidePointerEvents: !1,
        onEscapeKeyDown: l,
        onPointerDownOutside: s,
        onFocusOutside: (p) => p.preventDefault(),
        onDismiss: c,
        children: /* @__PURE__ */ f.jsxs(
          oe,
          {
            "data-state": a.stateAttribute,
            ...d,
            ...x,
            ref: o,
            style: {
              ...x.style,
              "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
              "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
              "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
              "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
              "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
            },
            children: [
              /* @__PURE__ */ f.jsx(xe, { children: n }),
              /* @__PURE__ */ f.jsx(pe, { scope: e, isInside: !0, children: /* @__PURE__ */ f.jsx(re, { id: a.contentId, role: "tooltip", children: r || n }) })
            ]
          }
        )
      }
    );
  }
);
K.displayName = T;
var Y = "TooltipArrow", he = i.forwardRef(
  (t, o) => {
    const { __scopeTooltip: e, ...n } = t, r = k(e);
    return fe(
      Y,
      e
    ).isInside ? null : /* @__PURE__ */ f.jsx(ne, { ...r, ...n, ref: o });
  }
);
he.displayName = Y;
function me(t, o) {
  const e = Math.abs(o.top - t.y), n = Math.abs(o.bottom - t.y), r = Math.abs(o.right - t.x), l = Math.abs(o.left - t.x);
  switch (Math.min(e, n, r, l)) {
    case l:
      return "left";
    case r:
      return "right";
    case e:
      return "top";
    case n:
      return "bottom";
    default:
      throw new Error("unreachable");
  }
}
function ge(t, o, e = 5) {
  const n = [];
  switch (o) {
    case "top":
      n.push(
        { x: t.x - e, y: t.y + e },
        { x: t.x + e, y: t.y + e }
      );
      break;
    case "bottom":
      n.push(
        { x: t.x - e, y: t.y - e },
        { x: t.x + e, y: t.y - e }
      );
      break;
    case "left":
      n.push(
        { x: t.x + e, y: t.y - e },
        { x: t.x + e, y: t.y + e }
      );
      break;
    case "right":
      n.push(
        { x: t.x - e, y: t.y - e },
        { x: t.x - e, y: t.y + e }
      );
      break;
  }
  return n;
}
function ve(t) {
  const { top: o, right: e, bottom: n, left: r } = t;
  return [
    { x: r, y: o },
    { x: e, y: o },
    { x: e, y: n },
    { x: r, y: n }
  ];
}
function ye(t, o) {
  const { x: e, y: n } = t;
  let r = !1;
  for (let l = 0, s = o.length - 1; l < o.length; s = l++) {
    const x = o[l], a = o[s], d = x.x, c = x.y, p = a.x, h = a.y;
    c > n != h > n && e < (p - d) * (n - c) / (h - c) + d && (r = !r);
  }
  return r;
}
function be(t) {
  const o = t.slice();
  return o.sort((e, n) => e.x < n.x ? -1 : e.x > n.x ? 1 : e.y < n.y ? -1 : e.y > n.y ? 1 : 0), we(o);
}
function we(t) {
  if (t.length <= 1) return t.slice();
  const o = [];
  for (let n = 0; n < t.length; n++) {
    const r = t[n];
    for (; o.length >= 2; ) {
      const l = o[o.length - 1], s = o[o.length - 2];
      if ((l.x - s.x) * (r.y - s.y) >= (l.y - s.y) * (r.x - s.x)) o.pop();
      else break;
    }
    o.push(r);
  }
  o.pop();
  const e = [];
  for (let n = t.length - 1; n >= 0; n--) {
    const r = t[n];
    for (; e.length >= 2; ) {
      const l = e[e.length - 1], s = e[e.length - 2];
      if ((l.x - s.x) * (r.y - s.y) >= (l.y - s.y) * (r.x - s.x)) e.pop();
      else break;
    }
    e.push(r);
  }
  return e.pop(), o.length === 1 && e.length === 1 && o[0].x === e[0].x && o[0].y === e[0].y ? o : o.concat(e);
}
var Te = z, Ce = F, Ee = S, G = K;
const Ie = Te, Re = Ce, je = Ee, U = i.forwardRef(({ className: t, sideOffset: o = 4, ...e }, n) => /* @__PURE__ */ f.jsx(
  G,
  {
    ref: n,
    sideOffset: o,
    className: ie(
      "bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
      t
    ),
    ...e
  }
));
U.displayName = G.displayName;
const Ne = ({
  content: t,
  children: o,
  show: e = !0,
  ...n
}) => e ? /* @__PURE__ */ D.jsxs(Re, { children: [
  /* @__PURE__ */ D.jsx(U, { ...n, children: t }),
  /* @__PURE__ */ D.jsx(je, { children: o })
] }) : o;
export {
  Ne as MyTooltip,
  Re as Tooltip,
  U as TooltipContent,
  Ie as TooltipProvider,
  je as TooltipTrigger
};