@transkripid/flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork
71 lines (70 loc) • 2.19 kB
JavaScript
import { jsxs as m, Fragment as j, jsx as o } from "react/jsx-runtime";
import { useState as B, useRef as D, isValidElement as I, useMemo as S, cloneElement as k } from "react";
import { useMergeRefs as A, FloatingFocusManager as C } from "@floating-ui/react";
import { mergeDeep as L } from "../../helpers/merge-deep.mjs";
import { getTheme as T } from "../../theme-store/index.mjs";
import { useBaseFLoating as U, useFloatingInteractions as V } from "../../hooks/use-floating.mjs";
import { getArrowPlacement as X } from "../Floating/helpers.mjs";
function W({
children: e,
content: p,
theme: i = {},
arrow: c = !0,
trigger: f = "click",
initialOpen: g,
open: d,
onOpenChange: u,
placement: w = "bottom",
...v
}) {
const [b, F] = B(!!g), n = D(null), t = L(T().popover, i), a = d ?? b, R = U({
open: a,
placement: w,
arrowRef: n,
setOpen: u ?? F
}), {
floatingStyles: h,
context: r,
placement: x,
middlewareData: {
arrow: {
x: O,
y: P
} = {}
},
refs: y
} = R, {
getFloatingProps: N,
getReferenceProps: s
} = V({
context: r,
role: "dialog",
trigger: f
}), E = e.ref, l = A([r.refs.setReference, E]);
if (!I(e))
throw Error("Invalid target element");
const M = S(() => k(e, s({
ref: l,
"data-testid": "flowbite-popover-target",
...e == null ? void 0 : e.props
})), [e, l, s]);
return /* @__PURE__ */ m(j, { children: [
M,
a && /* @__PURE__ */ o(C, { context: r, modal: !0, children: /* @__PURE__ */ o("div", { className: t.base, ref: y.setFloating, "data-testid": "flowbite-popover", ...v, style: h, ...N(), children: /* @__PURE__ */ m("div", { className: "relative", children: [
c && /* @__PURE__ */ o("div", { className: t.arrow.base, "data-testid": "flowbite-popover-arrow", ref: n, style: {
top: P ?? " ",
left: O ?? " ",
right: " ",
bottom: " ",
[X({
placement: x
})]: t.arrow.placement
}, children: " " }),
/* @__PURE__ */ o("div", { className: t.content, children: p })
] }) }) })
] });
}
export {
W as Popover
};
//# sourceMappingURL=Popover.mjs.map