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