@frontify/fondue
Version:
Design system of Frontify
49 lines (48 loc) • 1.31 kB
JavaScript
import { jsx as r } from "react/jsx-runtime";
import { useListBox as f } from "@react-aria/listbox";
import { useRef as p } from "react";
import { getMenuItems as d, getKeyItemRecord as w } from "../../ActionMenu/Aria/helper.es.js";
import { merge as y } from "../../../utilities/merge.es.js";
import { SelectMenuItem as b } from "./SelectMenuItem.es.js";
import { SelectMenuSection as M } from "./SelectMenuSection.es.js";
const S = ({
menuBlocks: m,
ariaProps: n,
state: e,
ariaLabel: i = "Select Menu",
scrollable: s = !1
}) => {
const c = d(m), u = w(c), l = p(null), { listBoxProps: a } = f(
{
...n,
"aria-label": i
},
e,
l
);
return /* @__PURE__ */ r(
"ul",
{
...a,
ref: l,
className: y([
"tw-list-none tw-p-0 tw-m-0 tw-bg-base tw-z-20 focus-visible:tw-outline-none",
s && "tw-overflow-y-auto"
]),
children: [...e.collection].map((o) => /* @__PURE__ */ r(M, { ariaLabel: o["aria-label"], children: [...o.childNodes].map((t) => /* @__PURE__ */ r(
b,
{
state: e,
node: t,
menuItem: u[t.key]
},
t.key
)) }, o.key))
}
);
};
S.displayName = "FondueSelectMenu";
export {
S as SelectMenu
};
//# sourceMappingURL=SelectMenu.es.js.map