@rws-aoa/react-library
Version:
RWS AOA Design System
96 lines (95 loc) • 3.53 kB
JavaScript
import { jsxs as i, jsx as r } from "react/jsx-runtime";
import { useState as d, createElement as k } from "react";
import { Home as y, KeyboardArrowDown as C } from "@mui/icons-material";
import { MenuItem as g, Link as P, menuItemClasses as s, Typography as j, svgIconClasses as m, Popper as w } from "@mui/material";
import { Link as c } from "@tanstack/react-router";
import { l as u } from "../../../../chunks/lodash.CA_K01A9.js";
import { FontNormalSxProps as x } from "../../../../_constants.js";
function R(e) {
const [b, a] = d(null), [t, n] = d(!1);
function h(o) {
n(!0), a(o.currentTarget);
}
function l() {
n(!1), a(null);
}
function p() {
return e.page.externalPath ? {
href: e.page.to
} : {
to: e.page.to
};
}
return /* @__PURE__ */ k(g, { ...p(), "aria-controls": e.page.subItems?.length && t ? "submenu" : void 0, "aria-expanded": e.page.subItems?.length && t ? "true" : void 0, "aria-haspopup": e.page.subItems?.length ? "true" : "false", "aria-label": e.page.label, component: e.page.to && !e.page.externalPath ? c : P, key: e.index, onClick: () => e.setSelectedPage(e.index), onMouseEnter: (o) => h(o), onMouseLeave: () => l(), role: "menuitem", selected: e.selectedPage === e.index, sx: {
height: "100%",
borderBottom: "3px solid transparent",
padding: "6px 20px 3px",
":hover": {
backgroundColor: "var(--color-rijks-yellow-hover)",
...e.page.to && {
textDecoration: "underline"
}
},
[`&.${s.selected}`]: {
backgroundColor: "var(--color-rijks-yellow-light)",
borderBottomColor: "var(--color-rijks-skyblue)",
":hover": {
backgroundColor: "var(--color-rijks-yellow-hover)"
}
}
}, title: e.page.label }, /* @__PURE__ */ i(j, { "aria-hidden": !0, component: "span", sx: u.merge({
display: "flex",
alignItems: "center",
[`&.${m.root}`]: {
marginRight: "5px"
}
}, x), variant: "body1", children: [
e.index === 0 && /* @__PURE__ */ r(y, {}),
e.page.label,
e.page.subItems?.length ? /* @__PURE__ */ r(C, {}) : null
] }), e.page.subItems && /* @__PURE__ */ r(w, { anchorEl: b, id: "submenu", open: t, placement: "bottom-start", role: "menu", sx: {
backgroundColor: "var(--color-bg-light)",
padding: "4px 0",
borderRadius: "6px",
marginTop: "8px",
minWidth: "180px",
color: "var(--color-text)",
boxShadow: `
rgb(255 255 255) 0 0 0 0,
rgb(0 0 0 / 5%) 0 0 0 1px,
rgb(0 0 0 / 10%) 0 10px 15px -3px,
rgb(0 0 0 / 5%) 0 4px 6px -2px
`
}, children: e.page.subItems?.map((o, v) => /* @__PURE__ */ i(g, { "aria-label": o.label, component: c, disableRipple: !0, divider: o.divider ?? !1, onClick: (f) => {
f.stopPropagation(), e.setSelectedPage(e.index), l();
}, sx: u.merge({
":active": {
backgroundColor: "var(--color-bg-light)"
},
[`&.${s.divider}`]: {
borderBottom: "transparent",
position: "relative",
marginBottom: "16px",
"::after": {
content: '""',
position: "absolute",
bottom: "-8px",
left: "0",
width: "100%",
borderBottom: "1px solid rgba(0, 0, 0, 0.12)"
}
},
[`&.${m.root}`]: {
fontSize: "var(--font-size-text)",
color: "var(--color-rijks-grey-7)",
marginRight: "12px"
}
}, x), to: o.to, children: [
o.icon,
o.label
] }, v)) }));
}
export {
R as AoaMenuItem
};
//# sourceMappingURL=MenuItem.js.map