@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
134 lines (133 loc) • 4.57 kB
JavaScript
import { jsxs as f, jsx as e } from "react/jsx-runtime";
import { menu_exports as t } from "../../node_modules/@ark-ui/react/dist/components/menu/menu.js";
import { Portal as g } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
import { useRef as y, useEffect as h } from "react";
import { SerendieSymbolMenu as b, SerendieSymbolChevronDown as x } from "@serendie/symbols";
import { Button as S } from "../Button/Button.js";
import { IconButton as I } from "../IconButton/IconButton.js";
import { ListItem as v } from "../List/ListItem.js";
import { useAutoPortalContainer as w } from "../../hooks/useAutoPortalContainer.js";
import { css as C } from "../../styled-system/css/css.js";
import { sva as E } from "../../styled-system/css/sva.js";
const N = E({
slots: ["content", "itemGroup", "item", "button", "buttonIcon"],
base: {
content: {
bgColor: "sd.system.color.component.surfaceContainerBright",
borderRadius: "sd.system.dimension.radius.medium",
bg: "sd.system.color.component.surfaceContainerBright",
boxShadow: "sd.system.elevation.shadow.level1",
outline: "none",
zIndex: "sd.system.elevation.zIndex.dropdown"
},
itemGroup: {
width: 240
},
item: {
cursor: "pointer",
_highlighted: {
background: "color-mix(in srgb, {colors.sd.system.color.interaction.hoveredVariant}, {colors.sd.system.color.component.surface});"
}
},
button: {
paddingY: "sd.system.dimension.spacing.small",
paddingInlineStart: "sd.system.dimension.spacing.medium",
paddingRight: "sd.system.dimension.spacing.small",
color: "sd.system.color.component.onSurfaceVariant",
gap: "sd.system.dimension.spacing.extraSmall",
textStyle: "sd.system.typography.label.large_compact",
_expanded: {
textStyle: "sd.system.typography.label.large_expanded"
},
_disabled: {
outline: "solid",
outlineOffset: "0px",
outlineColor: "sd.system.color.component.outline",
outlineWidth: "sd.system.dimension.border.medium"
},
_ariaExpanded: {
// Note: leftIcon が _open を受け取れないため button 側で制御
"& svg": {
transform: "rotate(180deg)"
}
}
},
buttonIcon: {
color: "sd.system.color.component.onSurface",
marginLeft: "2px",
transition: "transform 0.2s"
}
}
}), j = ({
styleType: d = "default",
title: s,
items: r,
disabled: i,
icon: c,
portalled: a = !0,
...u
}) => {
const n = N(), { triggerRef: l, portalContainerRef: p } = w(a), m = y(!1);
return h(() => {
m.current || process.env.NODE_ENV !== "production" && r.some((o) => o.icon) && (m.current = !0, console.warn(
"[DropdownMenu] `icon` は廃止予定です。`headingElement` を使ってください。"
));
}, []), /* @__PURE__ */ f(
t.Root,
{
positioning: {
offset: {
mainAxis: 1,
crossAxis: 0
}
},
...u,
children: [
/* @__PURE__ */ e(t.Trigger, { asChild: !0, children: d === "iconButton" ? /* @__PURE__ */ e(
I,
{
ref: l,
icon: c || /* @__PURE__ */ e(b, { className: n.buttonIcon }),
shape: "rectangle",
disabled: i,
styleType: "outlined",
title: s
}
) : /* @__PURE__ */ e(
S,
{
ref: l,
styleType: "rectangle",
size: "medium",
disabled: i,
rightIcon: /* @__PURE__ */ e(x, { className: n.buttonIcon }),
className: n.button,
children: s
}
) }),
/* @__PURE__ */ e(g, { disabled: !a, container: p, children: /* @__PURE__ */ e(t.Positioner, { children: /* @__PURE__ */ e(t.Content, { className: n.content, children: /* @__PURE__ */ e(t.ItemGroup, { className: n.itemGroup, children: r.map((o) => /* @__PURE__ */ e(
t.Item,
{
value: o.value,
className: n.item,
children: /* @__PURE__ */ e(
v,
{
title: o.label,
headingElement: o.headingElement ?? o.icon,
trailingElement: o.trailingElement,
focusable: !1,
className: C({ width: "100%", listStyle: "none" })
}
)
},
o.value
)) }) }) }) })
]
}
);
};
export {
j as DropdownMenu,
N as DropdownMenuStyle
};