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 U, g as q, y as J, a as f, x as H, h as Q, b as w, R as W, M as Z, _ as $ } from "../../index-DqTIeHVj-CYOpXZHK.js";
import * as i from "react";
import { j as A, V as ee, I as te, Y as ne, X as oe } from "../../index-DFLDO_Wj-BDd-yI_U.js";
import { n as re } from "../../index-CYIFqWxx-DtNoIOjh.js";
import { m as ie } from "../../utils-D0f6bOsw-HrLsble-.js";
var [_, Oe] = U("Tooltip", [
  A
]), k = A(), B = "TooltipProvider", ae = 700, L = "tooltip.open", [se, M] = _(B), z = (t) => {
  const {
    __scopeTooltip: n,
    delayDuration: e = ae,
    skipDelayDuration: o = 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: n,
      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,
          o
        );
      }, [o]),
      isPointerInTransitRef: x,
      onPointerInTransitChange: i.useCallback((d) => {
        x.current = d;
      }, []),
      disableHoverableContent: r,
      children: l
    }
  );
};
z.displayName = B;
var R = "Tooltip", [le, P] = _(R), F = (t) => {
  const {
    __scopeTooltip: n,
    children: e,
    open: o,
    defaultOpen: r,
    onOpenChange: l,
    disableHoverableContent: s,
    delayDuration: x
  } = t, a = M(R, t.__scopeTooltip), d = k(n), [c, p] = i.useState(null), h = q(), u = i.useRef(0), m = s ?? a.disableHoverableContent, v = x ?? a.delayDuration, g = i.useRef(!1), [b, y] = J({
    prop: o,
    defaultProp: r ?? !1,
    onChange: (N) => {
      N ? (a.onOpen(), document.dispatchEvent(new CustomEvent(L))) : a.onClose(), l == null || l(N);
    },
    caller: R
  }), 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]), j = 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: n,
      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 ? j() : (window.clearTimeout(u.current), u.current = 0);
      }, [j, m]),
      onOpen: E,
      onClose: j,
      disableHoverableContent: m,
      children: e
    }
  ) });
};
F.displayName = R;
var O = "TooltipTrigger", S = i.forwardRef(
  (t, n) => {
    const { __scopeTooltip: e, ...o } = t, r = P(O, e), l = M(O, e), s = k(e), x = i.useRef(null), a = H(n, 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(
      Q.button,
      {
        "aria-describedby": r.open ? r.contentId : void 0,
        "data-state": r.stateAttribute,
        ...o,
        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", X = i.forwardRef(
  (t, n) => {
    const e = ue(T, t.__scopeTooltip), { forceMount: o = e.forceMount, side: r = "top", ...l } = t, s = P(T, t.__scopeTooltip);
    return /* @__PURE__ */ f.jsx(W, { present: o || s.open, children: s.disableHoverableContent ? /* @__PURE__ */ f.jsx(Y, { side: r, ...l, ref: n }) : /* @__PURE__ */ f.jsx(de, { side: r, ...l, ref: n }) });
  }
), de = i.forwardRef((t, n) => {
  const e = P(T, t.__scopeTooltip), o = M(T, t.__scopeTooltip), r = i.useRef(null), l = H(n, r), [s, x] = i.useState(null), { trigger: a, onClose: d } = e, c = r.current, { onPointerInTransitChange: p } = o, 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()), j = be([...C, ...E]);
      x(j), 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(Y, { ...t, ref: l });
}), [pe, fe] = _(R, { isInside: !1 }), xe = $("TooltipContent"), Y = i.forwardRef(
  (t, n) => {
    const {
      __scopeTooltip: e,
      children: o,
      "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(
          ne,
          {
            "data-state": a.stateAttribute,
            ...d,
            ...x,
            ref: n,
            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: o }),
              /* @__PURE__ */ f.jsx(pe, { scope: e, isInside: !0, children: /* @__PURE__ */ f.jsx(re, { id: a.contentId, role: "tooltip", children: r || o }) })
            ]
          }
        )
      }
    );
  }
);
X.displayName = T;
var K = "TooltipArrow", he = i.forwardRef(
  (t, n) => {
    const { __scopeTooltip: e, ...o } = t, r = k(e);
    return fe(
      K,
      e
    ).isInside ? null : /* @__PURE__ */ f.jsx(oe, { ...r, ...o, ref: n });
  }
);
he.displayName = K;
function me(t, n) {
  const e = Math.abs(n.top - t.y), o = Math.abs(n.bottom - t.y), r = Math.abs(n.right - t.x), l = Math.abs(n.left - t.x);
  switch (Math.min(e, o, r, l)) {
    case l:
      return "left";
    case r:
      return "right";
    case e:
      return "top";
    case o:
      return "bottom";
    default:
      throw new Error("unreachable");
  }
}
function ge(t, n, e = 5) {
  const o = [];
  switch (n) {
    case "top":
      o.push(
        { x: t.x - e, y: t.y + e },
        { x: t.x + e, y: t.y + e }
      );
      break;
    case "bottom":
      o.push(
        { x: t.x - e, y: t.y - e },
        { x: t.x + e, y: t.y - e }
      );
      break;
    case "left":
      o.push(
        { x: t.x + e, y: t.y - e },
        { x: t.x + e, y: t.y + e }
      );
      break;
    case "right":
      o.push(
        { x: t.x - e, y: t.y - e },
        { x: t.x - e, y: t.y + e }
      );
      break;
  }
  return o;
}
function ve(t) {
  const { top: n, right: e, bottom: o, left: r } = t;
  return [
    { x: r, y: n },
    { x: e, y: n },
    { x: e, y: o },
    { x: r, y: o }
  ];
}
function ye(t, n) {
  const { x: e, y: o } = t;
  let r = !1;
  for (let l = 0, s = n.length - 1; l < n.length; s = l++) {
    const x = n[l], a = n[s], d = x.x, c = x.y, p = a.x, h = a.y;
    c > o != h > o && e < (p - d) * (o - c) / (h - c) + d && (r = !r);
  }
  return r;
}
function be(t) {
  const n = t.slice();
  return n.sort((e, o) => e.x < o.x ? -1 : e.x > o.x ? 1 : e.y < o.y ? -1 : e.y > o.y ? 1 : 0), we(n);
}
function we(t) {
  if (t.length <= 1) return t.slice();
  const n = [];
  for (let o = 0; o < t.length; o++) {
    const r = t[o];
    for (; n.length >= 2; ) {
      const l = n[n.length - 1], s = n[n.length - 2];
      if ((l.x - s.x) * (r.y - s.y) >= (l.y - s.y) * (r.x - s.x)) n.pop();
      else break;
    }
    n.push(r);
  }
  n.pop();
  const e = [];
  for (let o = t.length - 1; o >= 0; o--) {
    const r = t[o];
    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(), n.length === 1 && e.length === 1 && n[0].x === e[0].x && n[0].y === e[0].y ? n : n.concat(e);
}
var Te = z, Ce = F, Ee = S, V = X;
const Ie = Te, je = Ce, Re = Ee, G = i.forwardRef(({ className: t, sideOffset: n = 4, ...e }, o) => /* @__PURE__ */ f.jsx(
  V,
  {
    ref: o,
    sideOffset: n,
    className: ie(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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",
      t
    ),
    ...e
  }
));
G.displayName = V.displayName;
const Ne = ({
  content: t,
  children: n,
  show: e = !0,
  ...o
}) => e ? /* @__PURE__ */ D.jsxs(je, { children: [
  /* @__PURE__ */ D.jsx(G, { ...o, children: t }),
  /* @__PURE__ */ D.jsx(Re, { children: n })
] }) : n;
export {
  Ne as MyTooltip,
  je as Tooltip,
  G as TooltipContent,
  Ie as TooltipProvider,
  Re as TooltipTrigger
};