@frontify/fondue
Version:
Design system of Frontify
60 lines (59 loc) • 1.89 kB
JavaScript
import { jsxs as c } from "react/jsx-runtime";
import { useRef as E, createElement as I } from "react";
import { useBreadcrumbItem as N } from "@react-aria/breadcrumbs";
import { useFocusRing as T } from "@react-aria/focus";
import { mergeProps as B } from "@react-aria/utils";
import { getItemElementType as P } from "../../utilities/elements.es.js";
import { FOCUS_STYLE_NO_OFFSET as C } from "../../utilities/focusStyle.es.js";
import { merge as a } from "../../utilities/merge.es.js";
import { Badge as O } from "../Badge/Badge.es.js";
const S = ({
label: r,
badges: e,
bold: u,
decorator: l,
link: m,
onClick: o,
activeInline: s,
"data-test-id": w = "breadcrumb"
}) => {
const n = E(null), t = P(m, o), i = t !== "span", { itemProps: d } = N(
{
isCurrent: !0,
children: r,
elementType: t
},
n
), p = {
a: { href: m },
button: { onClick: o, type: "button" },
span: { tabIndex: -1 }
}, { isFocusVisible: f, focusProps: x } = T(), b = i ? B(d, x, p[t]) : p[t], h = a([
"tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-font-medium tw-rounded",
u && "tw-font-bold",
s && "tw-text-xs",
i && f && C
]);
return /* @__PURE__ */ c(
"li",
{
className: a([
"tw-align-middle tw-gap-x-1 tw-text-m tw-text-text tw-items-center",
s ? "tw-flex tw-items-center" : "tw-w-full tw-inline-flex"
]),
"data-test-id": `${w}-item`,
children: [
/* @__PURE__ */ c(t, { ref: n, ...b, className: h, children: [
l,
r
] }),
e == null ? void 0 : e.map(({ children: g, ...y }, F) => /* @__PURE__ */ I(O, { ...y, key: `breadcrumb-badge-${F}` }, g))
]
}
);
};
S.displayName = "FondueCurrentBreadcrumbItem";
export {
S as CurrentBreadcrumbItem
};
//# sourceMappingURL=CurrentBreadcrumbItem.es.js.map