@transkripid/flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork
79 lines (78 loc) • 2.33 kB
JavaScript
import { jsxs as f, Fragment as B, jsx as a } from "react/jsx-runtime";
import { useFocus as D, autoUpdate as E } from "@floating-ui/react";
import { useRef as I, useState as L, useEffect as M } from "react";
import { twMerge as p } from "tailwind-merge";
import { useBaseFLoating as O, useFloatingInteractions as S } from "../../hooks/use-floating.mjs";
import { getArrowPlacement as U } from "./helpers.mjs";
const H = ({
animation: n = "duration-300",
arrow: d = !0,
children: u,
className: g,
content: w,
placement: m = "top",
style: e = "dark",
theme: t,
trigger: F = "hover",
minWidth: b,
...x
}) => {
const s = I(null), [o, y] = L(!1), i = O({
open: o,
placement: m,
arrowRef: s,
setOpen: y
}), {
context: l,
middlewareData: {
arrow: {
x: v,
y: N
} = {}
},
refs: r,
strategy: P,
update: c,
x: R,
y: k
} = i, j = D(l), {
getFloatingProps: $,
getReferenceProps: A
} = S({
context: l,
role: "tooltip",
trigger: F,
interactions: [j]
});
return M(() => {
if (r.reference.current && r.floating.current && o)
return E(r.reference.current, r.floating.current, c);
}, [o, r.floating, r.reference, c]), /* @__PURE__ */ f(B, { children: [
/* @__PURE__ */ a("div", { ref: r.setReference, className: t.target, "data-testid": "flowbite-tooltip-target", ...A(), children: u }),
/* @__PURE__ */ f("div", { ref: r.setFloating, "data-testid": "flowbite-tooltip", ...$({
className: p(t.base, n && `${t.animation} ${n}`, !o && t.hidden, t.style[e], g),
style: {
position: P,
top: k ?? " ",
left: R ?? " ",
minWidth: b
},
...x
}), children: [
/* @__PURE__ */ a("div", { className: t.content, children: w }),
d && /* @__PURE__ */ a("div", { className: p(t.arrow.base, e === "dark" && t.arrow.style.dark, e === "light" && t.arrow.style.light, e === "auto" && t.arrow.style.auto), "data-testid": "flowbite-tooltip-arrow", ref: s, style: {
top: N ?? " ",
left: v ?? " ",
right: " ",
bottom: " ",
[U({
placement: i.placement
})]: t.arrow.placement
}, children: " " })
] })
] });
};
export {
H as Floating
};
//# sourceMappingURL=Floating.mjs.map