@lunalytics/ui/dist/components/tooltip/tooltip.js

React based component library created to be used in Lunalytics

import { jsx as y, jsxs as F } from "react/jsx-runtime";
import { c as ye } from "../../index-2w0W-O47.js";
import * as t from "react";
import { c as Pe, a as _, T as Te, b as A, u as U, P as ve, D as Re, E as xe } from "../../useTimeout-BZrhyGBQ.js";
import { g as Ce, a as Ee, i as Ne, b as we, c as Me, u as De, r as ne, d as Se, e as Oe, f as oe, h as be, j as Ie, s as Le, k as Ve, l as ke, m as Ae, t as He, n as _e, o as Ue, p as Y, q as Be } from "../../useAnchorPositioning-DkEGnORe.js";
import '../../assets/tooltip.css';const j = /* @__PURE__ */ t.createContext({
  hasProvider: !1,
  timeoutMs: 0,
  delayRef: {
    current: 0
  },
  initialDelayRef: {
    current: 0
  },
  timeout: new Te(),
  currentIdRef: {
    current: null
  },
  currentContextRef: {
    current: null
  }
});
process.env.NODE_ENV !== "production" && (j.displayName = "FloatingDelayGroupContext");
function Fe(n) {
  const {
    children: e,
    delay: r,
    timeoutMs: c = 0
  } = n, a = t.useRef(r), o = t.useRef(r), f = t.useRef(null), s = t.useRef(null), u = Pe();
  return /* @__PURE__ */ y(j.Provider, {
    value: t.useMemo(() => ({
      hasProvider: !0,
      delayRef: a,
      initialDelayRef: o,
      currentIdRef: f,
      timeoutMs: c,
      currentContextRef: s,
      timeout: u
    }), [c, u]),
    children: e
  });
}
function Ye(n, e = {}) {
  const {
    open: r,
    onOpenChange: c,
    floatingId: a
  } = n, {
    enabled: o = !0
  } = e, f = t.useContext(j), {
    currentIdRef: s,
    delayRef: u,
    timeoutMs: p,
    initialDelayRef: i,
    currentContextRef: l,
    hasProvider: d,
    timeout: m
  } = f, [E, R] = t.useState(!1);
  return _(() => {
    function h() {
      var T;
      R(!1), (T = l.current) == null || T.setIsInstantPhase(!1), s.current = null, l.current = null, u.current = i.current;
    }
    if (o && s.current && !r && s.current === a) {
      if (R(!1), p)
        return m.start(p, h), () => {
          m.clear();
        };
      h();
    }
  }, [o, r, a, s, u, p, i, l, m]), _(() => {
    if (!o || !r)
      return;
    const h = l.current, T = s.current;
    l.current = {
      onOpenChange: c,
      setIsInstantPhase: R
    }, s.current = a, u.current = {
      open: 0,
      close: Ce(i.current, "close")
    }, T !== null && T !== a ? (m.clear(), R(!0), h == null || h.setIsInstantPhase(!0), h == null || h.onOpenChange(!1)) : (R(!1), h == null || h.setIsInstantPhase(!1));
  }, [o, r, a, c, s, u, p, i, l, m]), _(() => () => {
    l.current = null;
  }, [l]), t.useMemo(() => ({
    hasProvider: d,
    delayRef: u,
    isInstantPhase: E
  }), [d, u, E]);
}
function je(n, e) {
  let r = null, c = null, a = !1;
  return {
    contextElement: n || void 0,
    getBoundingClientRect() {
      var m;
      const o = (n == null ? void 0 : n.getBoundingClientRect()) || {
        width: 0,
        height: 0,
        x: 0,
        y: 0
      }, f = e.axis === "x" || e.axis === "both", s = e.axis === "y" || e.axis === "both", u = ["mouseenter", "mousemove"].includes(((m = e.dataRef.current.openEvent) == null ? void 0 : m.type) || "") && e.pointerType !== "touch";
      let p = o.width, i = o.height, l = o.x, d = o.y;
      return r == null && e.x && f && (r = o.x - e.x), c == null && e.y && s && (c = o.y - e.y), l -= r || 0, d -= c || 0, p = 0, i = 0, !a || u ? (p = e.axis === "y" ? o.width : 0, i = e.axis === "x" ? o.height : 0, l = f && e.x != null ? e.x : l, d = s && e.y != null ? e.y : d) : a && !u && (i = e.axis === "x" ? o.height : i, p = e.axis === "y" ? o.width : p), a = !0, {
        width: p,
        height: i,
        x: l,
        y: d,
        top: d,
        right: l + p,
        bottom: d + i,
        left: l
      };
    }
  };
}
function te(n) {
  return n != null && n.clientX != null;
}
function Xe(n, e = {}) {
  const {
    open: r,
    dataRef: c,
    elements: {
      floating: a,
      domReference: o
    },
    refs: f
  } = n, {
    enabled: s = !0,
    axis: u = "both",
    x: p = null,
    y: i = null
  } = e, l = t.useRef(!1), d = t.useRef(null), [m, E] = t.useState(), [R, h] = t.useState([]), T = A((P, v) => {
    l.current || c.current.openEvent && !te(c.current.openEvent) || f.setPositionReference(je(o, {
      x: P,
      y: v,
      axis: u,
      dataRef: c,
      pointerType: m
    }));
  }), N = A((P) => {
    p != null || i != null || (r ? d.current || h([]) : T(P.clientX, P.clientY));
  }), O = Ne(m) ? a : r, x = t.useCallback(() => {
    if (!O || !s || p != null || i != null)
      return;
    const P = Ee(a);
    function v(w) {
      const D = we(w);
      Me(a, D) ? (P.removeEventListener("mousemove", v), d.current = null) : T(w.clientX, w.clientY);
    }
    if (!c.current.openEvent || te(c.current.openEvent)) {
      P.addEventListener("mousemove", v);
      const w = () => {
        P.removeEventListener("mousemove", v), d.current = null;
      };
      return d.current = w, w;
    }
    f.setPositionReference(o);
  }, [O, s, p, i, a, c, f, o, T]);
  t.useEffect(() => x(), [x, R]), t.useEffect(() => {
    s && !a && (l.current = !1);
  }, [s, a]), t.useEffect(() => {
    !s && r && (l.current = !0);
  }, [s, r]), _(() => {
    s && (p != null || i != null) && (l.current = !1, T(p, i));
  }, [s, p, i, T]);
  const I = t.useMemo(() => {
    function P(v) {
      E(v.pointerType);
    }
    return {
      onPointerDown: P,
      onPointerEnter: P,
      onMouseMove: N,
      onMouseEnter: N
    };
  }, [N]);
  return t.useMemo(() => s ? {
    reference: I
  } : {}, [s, I]);
}
function Ge(n) {
  const e = De({
    root: n.root
  });
  return e && /* @__PURE__ */ ne.createPortal(n.children, e);
}
const X = /* @__PURE__ */ t.createContext(void 0);
process.env.NODE_ENV !== "production" && (X.displayName = "TooltipRootContext");
function B() {
  const n = t.useContext(X);
  if (n === void 0)
    throw new Error("Base UI: TooltipRootContext is missing. Tooltip parts must be placed within <Tooltip.Root>.");
  return n;
}
const We = 600, G = /* @__PURE__ */ t.createContext(void 0);
process.env.NODE_ENV !== "production" && (G.displayName = "TooltipProviderContext");
function Ze() {
  return t.useContext(G);
}
function qe(n) {
  const {
    disabled: e = !1,
    defaultOpen: r = !1,
    onOpenChange: c,
    open: a,
    delay: o,
    closeDelay: f,
    hoverable: s = !0,
    trackCursorAxis: u = "none",
    actionsRef: p,
    onOpenChangeComplete: i
  } = n, l = o ?? We, d = f ?? 0, [m, E] = t.useState(null), [R, h] = t.useState(null), [T, N] = t.useState(), O = t.useRef(null), [x, I] = Se({
    controlled: a,
    default: r,
    name: "Tooltip",
    state: "open"
  }), P = A(c), v = A((S, b, C) => {
    const he = C === "trigger-hover", Q = S && C === "trigger-focus", ge = !S && (C === "trigger-press" || C === "escape-key");
    function ee() {
      P(S, b, C), I(S);
    }
    he ? ne.flushSync(ee) : ee(), Q || ge ? N(Q ? "focus" : "dismiss") : C === "trigger-hover" && N(void 0);
  });
  x && e && v(!1, void 0, "disabled");
  const {
    mounted: w,
    setMounted: D,
    transitionStatus: V
  } = Oe(x), g = A(() => {
    D(!1), i == null || i(!1);
  });
  oe({
    enabled: !p,
    open: x,
    ref: O,
    onComplete() {
      x || g();
    }
  }), t.useImperativeHandle(p, () => ({
    unmount: g
  }), [g]);
  const M = be({
    elements: {
      reference: m,
      floating: R
    },
    open: x,
    onOpenChange(S, b, C) {
      v(S, b, He(C));
    }
  }), k = Ze(), {
    delayRef: L,
    isInstantPhase: H,
    hasProvider: q
  } = Ye(M), J = H ? "delay" : T, ae = Ie(M, {
    enabled: !e,
    mouseOnly: !0,
    move: !1,
    handleClose: s && u !== "both" ? Le() : null,
    restMs() {
      const S = k == null ? void 0 : k.delay, b = typeof L.current == "object" ? L.current.open : void 0;
      let C = l;
      return q && (b !== 0 ? C = o ?? S ?? l : C = 0), C;
    },
    delay() {
      const S = typeof L.current == "object" ? L.current.close : void 0;
      let b = d;
      return f == null && q && (b = S), {
        close: b
      };
    }
  }), pe = Ve(M, {
    enabled: !e
  }), fe = ke(M, {
    enabled: !e,
    referencePress: !0
  }), de = Xe(M, {
    enabled: !e && u !== "none",
    axis: u === "none" ? void 0 : u
  }), {
    getReferenceProps: $,
    getFloatingProps: z
  } = Ae([ae, pe, fe, de]), K = t.useMemo(() => ({
    open: x,
    setOpen: v,
    mounted: w,
    setMounted: D,
    setTriggerElement: E,
    positionerElement: R,
    setPositionerElement: h,
    popupRef: O,
    triggerProps: $(),
    popupProps: z(),
    floatingRootContext: M,
    instantType: J,
    transitionStatus: V,
    onOpenChangeComplete: i
  }), [x, v, w, D, E, R, h, O, $, z, M, J, V, i]), me = t.useMemo(() => ({
    ...K,
    delay: l,
    closeDelay: d,
    trackCursorAxis: u,
    hoverable: s
  }), [K, l, d, u, s]);
  return /* @__PURE__ */ y(X.Provider, {
    value: me,
    children: n.children
  });
}
const se = /* @__PURE__ */ t.forwardRef(function(e, r) {
  const {
    className: c,
    render: a,
    ...o
  } = e, {
    open: f,
    setTriggerElement: s,
    triggerProps: u
  } = B(), p = t.useMemo(() => ({
    open: f
  }), [f]);
  return U("button", e, {
    state: p,
    ref: [r, s],
    props: [u, o],
    customStyleHookMapping: _e
  });
});
process.env.NODE_ENV !== "production" && (se.displayName = "TooltipTrigger");
const W = /* @__PURE__ */ t.createContext(void 0);
process.env.NODE_ENV !== "production" && (W.displayName = "TooltipPortalContext");
function Je() {
  const n = t.useContext(W);
  if (n === void 0)
    throw new Error("Base UI: <Tooltip.Portal> is missing.");
  return n;
}
function $e(n) {
  const {
    children: e,
    keepMounted: r = !1,
    container: c
  } = n, {
    mounted: a
  } = B();
  return a || r ? /* @__PURE__ */ y(W.Provider, {
    value: r,
    children: /* @__PURE__ */ y(Ge, {
      root: c,
      children: e
    })
  }) : null;
}
const Z = /* @__PURE__ */ t.createContext(void 0);
process.env.NODE_ENV !== "production" && (Z.displayName = "TooltipPositionerContext");
function re() {
  const n = t.useContext(Z);
  if (n === void 0)
    throw new Error("Base UI: TooltipPositionerContext is missing. TooltipPositioner parts must be placed within <Tooltip.Positioner>.");
  return n;
}
const ie = /* @__PURE__ */ t.forwardRef(function(e, r) {
  const {
    render: c,
    className: a,
    anchor: o,
    positionMethod: f = "absolute",
    side: s = "top",
    align: u = "center",
    sideOffset: p = 0,
    alignOffset: i = 0,
    collisionBoundary: l = "clipping-ancestors",
    collisionPadding: d = 5,
    arrowPadding: m = 5,
    sticky: E = !1,
    trackAnchor: R = !0,
    collisionAvoidance: h = ve,
    ...T
  } = e, {
    open: N,
    setPositionerElement: O,
    mounted: x,
    floatingRootContext: I,
    trackCursorAxis: P,
    hoverable: v
  } = B(), w = Je(), D = Ue({
    anchor: o,
    positionMethod: f,
    floatingRootContext: I,
    mounted: x,
    side: s,
    sideOffset: p,
    align: u,
    alignOffset: i,
    collisionBoundary: l,
    collisionPadding: d,
    sticky: E,
    arrowPadding: m,
    trackAnchor: R,
    keepMounted: w,
    collisionAvoidance: h
  }), V = t.useMemo(() => {
    const H = {};
    return (!N || P === "both" || !v) && (H.pointerEvents = "none"), {
      role: "presentation",
      hidden: !x,
      style: {
        ...D.positionerStyles,
        ...H
      }
    };
  }, [N, P, v, x, D.positionerStyles]), g = t.useMemo(() => ({
    props: V,
    ...D
  }), [V, D]), M = t.useMemo(() => ({
    open: N,
    side: g.side,
    align: g.align,
    anchorHidden: g.anchorHidden
  }), [N, g.side, g.align, g.anchorHidden]), k = t.useMemo(() => ({
    ...M,
    arrowRef: g.arrowRef,
    arrowStyles: g.arrowStyles,
    arrowUncentered: g.arrowUncentered
  }), [M, g.arrowRef, g.arrowStyles, g.arrowUncentered]), L = U("div", e, {
    state: M,
    props: [g.props, T],
    ref: [r, O],
    customStyleHookMapping: Y
  });
  return /* @__PURE__ */ y(Z.Provider, {
    value: k,
    children: L
  });
});
process.env.NODE_ENV !== "production" && (ie.displayName = "TooltipPositioner");
const ze = {
  ...Y,
  ...Be
}, le = /* @__PURE__ */ t.forwardRef(function(e, r) {
  const {
    className: c,
    render: a,
    ...o
  } = e, {
    open: f,
    instantType: s,
    transitionStatus: u,
    popupProps: p,
    popupRef: i,
    onOpenChangeComplete: l
  } = B(), {
    side: d,
    align: m
  } = re();
  oe({
    open: f,
    ref: i,
    onComplete() {
      f && (l == null || l(!0));
    }
  });
  const E = t.useMemo(() => ({
    open: f,
    side: d,
    align: m,
    instant: s,
    transitionStatus: u
  }), [f, d, m, s, u]);
  return U("div", e, {
    state: E,
    ref: [r, i],
    props: [p, u === "starting" ? Re : xe, o],
    customStyleHookMapping: ze
  });
});
process.env.NODE_ENV !== "production" && (le.displayName = "TooltipPopup");
const ue = /* @__PURE__ */ t.forwardRef(function(e, r) {
  const {
    className: c,
    render: a,
    ...o
  } = e, {
    open: f,
    arrowRef: s,
    side: u,
    align: p,
    arrowUncentered: i,
    arrowStyles: l
  } = re(), d = t.useMemo(() => ({
    open: f,
    side: u,
    align: p,
    uncentered: i
  }), [f, u, p, i]);
  return U("div", e, {
    state: d,
    ref: [r, s],
    props: [{
      style: l,
      "aria-hidden": !0
    }, o],
    customStyleHookMapping: Y
  });
});
process.env.NODE_ENV !== "production" && (ue.displayName = "TooltipArrow");
const ce = function(e) {
  const {
    delay: r,
    closeDelay: c,
    timeout: a = 400
  } = e, o = t.useMemo(() => ({
    delay: r,
    closeDelay: c
  }), [r, c]);
  return /* @__PURE__ */ y(G.Provider, {
    value: o,
    children: /* @__PURE__ */ y(Fe, {
      delay: {
        open: r,
        close: c
      },
      timeoutMs: a,
      children: e.children
    })
  });
};
process.env.NODE_ENV !== "production" && (ce.displayName = "TooltipProvider");
const Ke = (n) => /* @__PURE__ */ F("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...n, children: [
  /* @__PURE__ */ y(
    "path",
    {
      d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
      className: "luna-tooltip--arrow-fill"
    }
  ),
  /* @__PURE__ */ y(
    "path",
    {
      d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
      className: "luna-tooltip--arrow-outer-stroke"
    }
  ),
  /* @__PURE__ */ y(
    "path",
    {
      d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
      className: "luna-tooltip--arrow-inner-stroke"
    }
  )
] }), Qe = ({
  children: n,
  text: e,
  position: r = "top",
  color: c = "red"
}) => {
  const a = ye("luna-tooltip", {
    [`${c}`]: c
  });
  return /* @__PURE__ */ y(ce, { children: /* @__PURE__ */ F(qe, { delay: 0, children: [
    /* @__PURE__ */ y(
      se,
      {
        render: (o, f) => /* @__PURE__ */ y("div", { ...o, ...f, children: n }),
        children: n
      }
    ),
    /* @__PURE__ */ y($e, { children: /* @__PURE__ */ y(ie, { sideOffset: 10, side: r, children: /* @__PURE__ */ F(le, { className: a, children: [
      /* @__PURE__ */ y(ue, { className: "luna-tooltip--arrow", children: /* @__PURE__ */ y(Ke, {}) }),
      e
    ] }) }) })
  ] }) });
};
Qe.displayName = "Tooltip";
export {
  Qe as default
};