@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
269 lines (268 loc) • 8.46 kB
JavaScript
import { jsx as e, jsxs as y, Fragment as j } from "react/jsx-runtime";
import l, { useState as P, useEffect as F, useContext as L, createContext as T } from "react";
import { SerendieSymbolMoreHorizontal as A, SerendieSymbolChevronRight as D } from "@serendie/symbols";
import { useTranslations as q } from "../../i18n/index.js";
import { cx as g } from "../../styled-system/css/cx.js";
import { css as k } from "../../styled-system/css/css.js";
import { sva as G } from "../../styled-system/css/sva.js";
const C = G({
slots: ["root", "list", "item", "link", "separator", "ellipsis", "icon"],
base: {
root: {
display: "inline-flex",
alignItems: "center"
},
list: {
display: "flex",
alignItems: "center",
listStyle: "none",
margin: 0,
padding: 0,
flexWrap: "wrap"
},
item: {
display: "inline-flex",
alignItems: "center"
},
link: {
display: "inline-flex",
alignItems: "center",
gap: "sd.system.dimension.spacing.extraSmall",
color: "sd.system.color.impression.primary",
textDecoration: "none",
cursor: "pointer",
borderRadius: "sd.system.dimension.radius.small",
transition: "background-color 0.2s",
_hover: {
backgroundColor: "sd.system.color.interaction.hoveredVariant"
},
_focusVisible: {
outlineWidth: "sd.system.dimension.border.medium",
outlineStyle: "solid",
outlineColor: "sd.system.color.impression.primary"
},
"&[aria-current='page']": {
color: "sd.system.color.component.onSurface",
fontWeight: "sd.reference.typography.fontWeight.regular",
cursor: "default",
_hover: {
backgroundColor: "transparent"
}
}
},
separator: {
display: "inline-flex",
alignItems: "center",
color: "sd.system.color.component.onSurfaceVariant",
userSelect: "none"
},
ellipsis: {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
color: "sd.system.color.impression.primary",
cursor: "pointer",
"& button": {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
background: "none",
border: "none",
color: "inherit",
cursor: "pointer",
borderRadius: "sd.system.dimension.radius.small",
transition: "background-color 0.2s",
_hover: {
backgroundColor: "sd.system.color.interaction.hoveredVariant"
},
_focusVisible: {
outlineWidth: "sd.system.dimension.border.medium",
outlineStyle: "solid",
outlineColor: "sd.system.color.impression.primary"
}
}
},
icon: {
display: "inline-flex",
alignItems: "center",
flexShrink: 0
}
},
variants: {
size: {
medium: {
link: {
textStyle: "sd.system.typography.body.small_compact",
paddingInline: "sd.system.dimension.spacing.extraSmall",
paddingBlock: "sd.system.dimension.spacing.twoExtraSmall",
minHeight: "sd.reference.dimension.scale.10",
_expanded: {
textStyle: "sd.system.typography.body.small_expanded"
}
},
separator: {
_expanded: {
textStyle: "sd.system.typography.body.small_expanded"
}
},
ellipsis: {
"& button": {
paddingInline: "sd.system.dimension.spacing.extraSmall",
paddingBlock: "sd.system.dimension.spacing.twoExtraSmall",
minHeight: "sd.reference.dimension.scale.10"
}
},
icon: {
width: "sd.reference.dimension.scale.7",
height: "sd.reference.dimension.scale.7",
"& svg": {
width: "sd.reference.dimension.scale.7",
height: "sd.reference.dimension.scale.7"
}
}
},
small: {
link: {
textStyle: "sd.system.typography.label.medium_compact",
paddingInline: "sd.system.dimension.spacing.twoExtraSmall",
paddingBlock: "sd.system.dimension.spacing.twoExtraSmall",
gap: "sd.system.dimension.spacing.twoExtraSmall",
minHeight: "sd.reference.dimension.scale.10",
_expanded: {
textStyle: "sd.system.typography.label.medium_expanded"
}
},
separator: {
_expanded: {
textStyle: "sd.system.typography.label.medium_expanded"
}
},
ellipsis: {
"& button": {
paddingInline: "sd.system.dimension.spacing.twoExtraSmall",
paddingBlock: "sd.system.dimension.spacing.twoExtraSmall",
minHeight: "sd.reference.dimension.scale.10"
}
},
icon: {
width: "14px",
height: "14px",
"& svg": {
width: "14px",
height: "14px"
}
}
}
}
},
defaultVariants: {
size: "medium"
}
}), _ = T(null), J = () => {
const i = L(_);
return i || {
styles: C(),
size: "medium"
};
}, K = l.forwardRef(
({
children: i,
separator: o = "chevron",
className: a,
size: s = "medium",
maxItems: d,
itemsBeforeCollapse: m = 1,
itemsAfterCollapse: c = 1,
...r
}, p) => {
const n = C({ size: s }), [I, u] = P(!1), x = q(), t = l.Children.toArray(i).filter(
l.isValidElement
), B = t.length;
F(() => {
u(!1);
}, [B]);
const f = d !== void 0 && t.length > d && t.length > m + c && !I, b = Math.max(0, m), E = Math.max(0, c), S = f ? [
...t.slice(0, b),
...t.slice(t.length - E)
] : t, w = s === "small" ? 16 : 24, N = s === "small" ? 16 : 32, V = 32, W = s === "medium" ? k({
padding: "sd.system.dimension.spacing.twoExtraSmall"
}) : k({
paddingBlock: "sd.system.dimension.spacing.twoExtraSmall"
}), v = () => /* @__PURE__ */ e(
"li",
{
className: g(
n.separator,
o === "chevron" ? W : void 0
),
role: "presentation",
"aria-hidden": "true",
children: o === "chevron" ? /* @__PURE__ */ e(
D,
{
width: w,
height: w
}
) : /* @__PURE__ */ e(
"svg",
{
width: N,
height: V,
viewBox: "0 0 32 32",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ e("path", { d: "M18.5 10L13 21", stroke: "currentColor", strokeWidth: "1.2" })
}
)
}
);
return /* @__PURE__ */ e(_.Provider, { value: { styles: n, size: s }, children: /* @__PURE__ */ e(
"nav",
{
ref: p,
"aria-label": x("breadcrumbs.label"),
className: g(n.root, a),
...r,
children: /* @__PURE__ */ e("ol", { className: n.list, children: S.map((H, h) => {
const R = h === S.length - 1, M = f && h === b;
return /* @__PURE__ */ y(l.Fragment, { children: [
M && /* @__PURE__ */ y(j, { children: [
/* @__PURE__ */ e("li", { className: n.ellipsis, children: /* @__PURE__ */ e(
"button",
{
type: "button",
"aria-label": x("breadcrumbs.showMore"),
onClick: () => u(!0),
children: /* @__PURE__ */ e(
A,
{
width: s === "small" ? 14 : 20,
height: s === "small" ? 17 : 20
}
)
}
) }),
v()
] }),
H,
!R && v()
] }, h);
}) })
}
) });
}
);
K.displayName = "Breadcrumbs";
const O = l.forwardRef(({ children: i, href: o, current: a, icon: s, className: d, ...m }, c) => {
const { styles: r } = J(), p = a ? "span" : o ? "a" : "span", n = a ? { "aria-current": "page" } : o ? { href: o } : {};
return /* @__PURE__ */ e("li", { ref: c, className: g(r.item, d), ...m, children: /* @__PURE__ */ y(p, { className: r.link, ...n, children: [
s && /* @__PURE__ */ e("span", { className: r.icon, children: s }),
i
] }) });
});
O.displayName = "BreadcrumbItem";
export {
O as BreadcrumbItem,
K as Breadcrumbs,
C as breadcrumbsStyle
};