koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
105 lines (104 loc) • 2.79 kB
JavaScript
"use client";
import { jsxs as D, jsx as s } from "react/jsx-runtime";
import { forwardRef as M, useState as T, useEffect as f, useCallback as E, Fragment as L } from "react";
import c from "classnames";
import { useFloating as S, size as k, offset as z, autoPlacement as C, autoUpdate as I } from "@floating-ui/react-dom";
import { useLocalTheme as P, useRootTheme as U } from "css-vars-hook";
import { Portal as V } from "../../internal/Portal/Portal.js";
import { useDismiss as $ } from "../../internal/hooks/useDismiss.js";
import { useFocusTrap as q } from "../../internal/hooks/useFocusTrap.js";
import { useInternalRef as A } from "../../internal/hooks/useInternalRef.js";
import e from "./Menu.module.css.js";
import { Variants as i } from "./Variants.js";
const B = [
"bottom",
"left",
"right",
"top",
"bottom-end",
"bottom-start",
"left-start",
"left-end",
"right-start",
"right-end",
"top-start",
"top-end"
], G = M(
({
children: d,
className: p,
isOpen: o = !1,
content: u,
referenceClassName: h,
onToggle: l = () => {
},
trapFocus: g = !0,
alignWidth: b = !0,
variant: n = i.plain,
allowedPlacements: w = B,
...y
}, N) => {
const m = A(N), [t, r] = T(o);
f(() => {
r(o);
}, [o, r]), f(() => {
l(t);
}, [t, l]);
const { refs: a, floatingStyles: R } = S({
strategy: "fixed",
whileElementsMounted: I,
middleware: [
b && k({
apply({ rects: j, elements: v }) {
Object.assign(v.floating.style, {
width: `${j.reference.width}px`
});
}
}),
z(18),
C({ allowedPlacements: w })
]
}), { LocalRoot: x } = P(), { getTheme: F } = U(), O = E(() => {
r(!1);
}, [r]);
return $(O, m, t), q(a.floating.current, t, g), /* @__PURE__ */ D(L, { children: [
/* @__PURE__ */ s(
"div",
{
ref: a.setReference,
className: c(e.reference, h),
children: d
}
),
t && /* @__PURE__ */ s(V, { children: /* @__PURE__ */ s(
"div",
{
ref: a.setFloating,
style: R,
className: e.floating,
children: /* @__PURE__ */ s(x, { className: e.provider, theme: F(), children: /* @__PURE__ */ s(
"div",
{
...y,
ref: m,
className: c(
e.menu,
{
[e.bordered]: n === i.bordered,
[e.plain]: n === i.plain
},
p
),
children: u
}
) })
}
) })
] });
}
);
G.displayName = "Menu";
export {
G as Menu
};
//# sourceMappingURL=Menu.js.map