braid-design-system
Version:
Themeable design system for the SEEK Group
72 lines (71 loc) • 1.86 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { Box } from "../Box/Box.mjs";
import { useMenuItem } from "../MenuItem/useMenuItem.mjs";
import { IconTick } from "../icons/IconTick/IconTick.mjs";
import { checkboxSize } from "./MenuItemCheckbox.css.mjs";
const MenuItemCheckbox = ({
children,
onChange,
checked,
data,
badge,
id
}) => {
const { menuItemProps, MenuItemChildren } = useMenuItem({
onClick: () => onChange(!checked),
formElement: true,
data,
id
});
return /* @__PURE__ */ jsx(
Box,
{
...menuItemProps,
"aria-checked": checked,
role: "menuitemcheckbox",
component: "button",
type: "button",
display: "flex",
alignItems: "center",
children: /* @__PURE__ */ jsx(
MenuItemChildren,
{
tone: void 0,
leftSlot: /* @__PURE__ */ jsx(
Box,
{
component: "span",
display: "block",
borderRadius: "standard",
boxShadow: "borderField",
position: "relative",
background: { lightMode: "surface" },
flexShrink: 0,
className: checkboxSize,
children: /* @__PURE__ */ jsx(
Box,
{
component: "span",
position: "absolute",
inset: 0,
background: "formAccent",
borderRadius: "standard",
transition: "fast",
opacity: checked ? void 0 : 0,
children: /* @__PURE__ */ jsx(IconTick, { size: "fill" })
}
)
}
),
badge,
isCheckbox: true,
children
}
)
}
);
};
MenuItemCheckbox.__isMenuItem__ = true;
export {
MenuItemCheckbox
};