koval-ui/dist/src/lib/Tooltip/Tooltip.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as d, jsx as t } from "react/jsx-runtime";
import { forwardRef as O, useState as j, useEffect as u, useRef as E, useCallback as L, Fragment as S } from "react";
import l from "classnames";
import { useFloating as k, offset as A, flip as C, arrow as M, autoUpdate as U } from "@floating-ui/react-dom";
import { useLocalTheme as q, useRootTheme as z } from "css-vars-hook";
import { Portal as B } from "../../internal/Portal/Portal.js";
import { useDismiss as G } from "../../internal/hooks/useDismiss.js";
import { useFocusTrap as H } from "../../internal/hooks/useFocusTrap.js";
import { Arrow as I } from "./Arrow.js";
import o from "./Tooltip.module.css.js";
const J = O(
  ({
    children: h,
    className: w,
    isOpen: a = !1,
    content: N,
    referenceClassName: R,
    onToggle: m = () => {
    },
    interactive: i = !0,
    placement: g = "bottom",
    ...x
  }, y) => {
    var n, p;
    const [e, r] = j(a);
    u(() => {
      r(a);
    }, [a, r]), u(() => {
      m(e);
    }, [e, m]);
    const f = E(null), { refs: s, floatingStyles: T, middlewareData: c, placement: F } = k({
      strategy: "fixed",
      placement: g,
      whileElementsMounted: U,
      middleware: [
        A(18),
        C(),
        M({
          element: f
        })
      ]
    }), { LocalRoot: b } = q(), { getTheme: v } = z(), D = L(() => {
      r(!1);
    }, [r]);
    return G(D, s.reference, e), H(s.floating.current, e, i), /* @__PURE__ */ d(S, { children: [
      /* @__PURE__ */ t(
        "div",
        {
          ref: s.setReference,
          className: l(o.reference, R),
          children: h
        }
      ),
      e && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
        "div",
        {
          ref: s.setFloating,
          style: T,
          className: l({ [o.unfocusable]: !i }),
          children: /* @__PURE__ */ t(b, { className: o.provider, theme: v(), children: /* @__PURE__ */ d(
            "div",
            {
              ...x,
              ref: y,
              className: l(o.tooltip, w),
              children: [
                /* @__PURE__ */ t(
                  I,
                  {
                    ref: f,
                    placement: F,
                    left: (n = c.arrow) == null ? void 0 : n.x,
                    top: (p = c.arrow) == null ? void 0 : p.y
                  }
                ),
                N
              ]
            }
          ) })
        }
      ) })
    ] });
  }
);
J.displayName = "Tooltip";
export {
  J as Tooltip
};
//# sourceMappingURL=Tooltip.js.map