@transkripid/flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork
132 lines (131 loc) • 4.91 kB
JavaScript
import { jsxs as x, jsx as g } from "react/jsx-runtime";
import { c as K } from "react/compiler-runtime";
import { useListNavigation as Q, useTypeahead as V, FloatingFocusManager as X, FloatingList as Y } from "@floating-ui/react";
import { useState as D, useRef as P, useCallback as C, useMemo as Z, useEffect as _, cloneElement as ee } from "react";
import { HiOutlineChevronDown as H, HiOutlineChevronUp as te, HiOutlineChevronRight as oe, HiOutlineChevronLeft as ne } from "react-icons/hi";
import { twMerge as F } from "tailwind-merge";
import { mergeDeep as re } from "../../helpers/merge-deep.mjs";
import { useBaseFLoating as ie, useFloatingInteractions as se } from "../../hooks/use-floating.mjs";
import { getTheme as ae } from "../../theme-store/index.mjs";
import { DropdownContext as le } from "./DropdownContext.mjs";
import { DropdownDivider as O } from "./DropdownDivider.mjs";
import { DropdownHeader as T } from "./DropdownHeader.mjs";
import { DropdownItem as ce } from "./DropdownItem.mjs";
import { Button as de } from "../Button/Button.mjs";
const pe = {
top: te,
right: oe,
bottom: H,
left: ne
}, fe = (w) => {
const e = K(24);
let d, a, s, p, n, r, l, o, t;
e[0] !== w ? ({
refs: r,
children: a,
inline: n,
theme: t,
disabled: s,
setButtonWidth: o,
getReferenceProps: p,
renderTrigger: l,
...d
} = w, e[0] = w, e[1] = d, e[2] = a, e[3] = s, e[4] = p, e[5] = n, e[6] = r, e[7] = l, e[8] = o, e[9] = t) : (d = e[1], a = e[2], s = e[3], p = e[4], n = e[5], r = e[6], l = e[7], o = e[8], t = e[9]);
const c = r.reference, f = p();
let h;
e[10] !== c.current || e[11] !== o ? (h = () => {
c.current && (o == null || o(c.current.clientWidth));
}, e[10] = c.current, e[11] = o, e[12] = h) : h = e[12];
let m;
if (e[13] !== c || e[14] !== o ? (m = [c, o], e[13] = c, e[14] = o, e[15] = m) : m = e[15], _(h, m), l) {
const i = l(t);
return ee(i, {
ref: r.setReference,
disabled: s,
...f,
...i.props
});
}
let u;
return e[16] !== f || e[17] !== d || e[18] !== a || e[19] !== s || e[20] !== n || e[21] !== r.setReference || e[22] !== (t == null ? void 0 : t.inlineWrapper) ? (u = n ? /* @__PURE__ */ g("button", { type: "button", ref: r.setReference, className: t == null ? void 0 : t.inlineWrapper, disabled: s, ...f, children: a }) : /* @__PURE__ */ g(de, { ...d, disabled: s, type: "button", ref: r.setReference, ...f, children: a }), e[16] = f, e[17] = d, e[18] = a, e[19] = s, e[20] = n, e[21] = r.setReference, e[22] = t == null ? void 0 : t.inlineWrapper, e[23] = u) : u = e[23], u;
}, W = ({
children: w,
className: e,
dismissOnClick: d = !0,
theme: a = {},
renderTrigger: s,
...p
}) => {
const [n, r] = D(!1), [l, o] = D(null), [t, c] = D(null), [f, h] = D(void 0), m = P([]), u = P([]), i = re(ae().dropdown, a), M = p, L = p["data-testid"] || "flowbite-dropdown-target", {
placement: I = p.inline ? "bottom-start" : "bottom",
trigger: S = "click",
label: j,
inline: E,
arrowIcon: k = !0,
...y
} = M, R = C((b) => {
c(b), r(!1);
}, []), B = C((b) => {
n ? o(b) : R(b);
}, [n, R]), {
context: v,
floatingStyles: A,
refs: N
} = ie({
open: n,
setOpen: r,
placement: I
}), U = Q(v, {
listRef: m,
activeIndex: l,
selectedIndex: t,
onNavigate: o
}), $ = V(v, {
listRef: u,
activeIndex: l,
selectedIndex: t,
onMatch: B
}), {
getReferenceProps: q,
getFloatingProps: z,
getItemProps: G
} = se({
context: v,
role: "menu",
trigger: S,
interactions: [U, $]
}), J = Z(() => {
const [b] = I.split("-");
return pe[b] ?? H;
}, [I]);
return /* @__PURE__ */ x(le.Provider, { value: {
theme: i,
activeIndex: l,
dismissOnClick: d,
getItemProps: G,
handleSelect: R
}, children: [
/* @__PURE__ */ x(fe, { ...y, refs: N, inline: E, theme: i, "data-testid": L, className: F(i.floating.target, y.className), setButtonWidth: h, getReferenceProps: q, renderTrigger: s, children: [
j,
k && /* @__PURE__ */ g(J, { className: i.arrowIcon })
] }),
n && /* @__PURE__ */ g(X, { context: v, modal: !1, children: /* @__PURE__ */ g("div", { ref: N.setFloating, style: {
...A,
minWidth: f
}, "data-testid": "flowbite-dropdown", "aria-expanded": n, ...z({
className: F(i.floating.base, i.floating.animation, "duration-100", !n && i.floating.hidden, i.floating.style.auto, e)
}), children: /* @__PURE__ */ g(Y, { elementsRef: m, labelsRef: u, children: /* @__PURE__ */ g("ul", { className: i.content, tabIndex: -1, children: w }) }) }) })
] });
};
W.displayName = "Dropdown";
T.displayName = "Dropdown.Header";
O.displayName = "Dropdown.Divider";
const Ce = Object.assign(W, {
Item: ce,
Header: T,
Divider: O
});
export {
Ce as Dropdown
};
//# sourceMappingURL=Dropdown.mjs.map