@twilio-paste/breadcrumb
Version:
A Breadcrumb is text that shows navigation hierarchy and lets users navigate a nested path of pages.
92 lines (91 loc) • 2.92 kB
JavaScript
// src/Breadcrumb.tsx
import { Anchor } from "@twilio-paste/anchor";
import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
import { Text, safelySpreadTextProps } from "@twilio-paste/text";
import { useUIDSeed } from "@twilio-paste/uid-library";
import * as React from "react";
var BreadcrumbSeparator = ({
element
}) => /* @__PURE__ */ React.createElement(
Text,
{
as: "span",
color: "colorTextWeak",
fontSize: "fontSize20",
lineHeight: "lineHeight20",
paddingLeft: "space20",
paddingRight: "space20",
role: "presentation",
element: `${element}_SEPARATOR`
},
"/"
);
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
var DEFAULT_ELEMENT_NAME = "BREADCRUMB";
var BreadcrumbItem = React.forwardRef(
({ children, element, parentElement, href, last, ...props }, ref) => {
const elementName = element || parentElement || DEFAULT_ELEMENT_NAME;
return /* @__PURE__ */ React.createElement(
Box,
{
alignItems: "center",
as: "li",
display: "inline-flex",
element: `${elementName}_ITEM`,
fontSize: "fontSize20",
lineHeight: "lineHeight20"
},
href ? /* @__PURE__ */ React.createElement(
Anchor,
{
...props,
element: `${elementName}_ANCHOR`,
href,
ref
},
children
) : /* @__PURE__ */ React.createElement(
Text,
{
...safelySpreadTextProps(props),
"aria-current": "page",
as: "span",
color: "colorTextWeak",
element: `${elementName}_TEXT`,
fontSize: "fontSize20",
lineHeight: "lineHeight20",
ref
},
children
),
!last && /* @__PURE__ */ React.createElement(BreadcrumbSeparator, { element: elementName })
);
}
);
BreadcrumbItem.displayName = "BreadcrumbItem";
var Breadcrumb = React.forwardRef(
({ children, element = DEFAULT_ELEMENT_NAME, ...props }, ref) => {
const [childrenCount, validChildren] = React.useMemo(
() => [
React.Children.count(children),
React.Children.toArray(children).filter(
(child) => React.isValidElement(child) || typeof child === "string"
)
],
[children]
);
const keySeed = useUIDSeed();
return /* @__PURE__ */ React.createElement(Box, { "aria-label": "breadcrumb", ...safelySpreadBoxProps(props), as: "nav", element, ref }, /* @__PURE__ */ React.createElement(Box, { alignItems: "center", as: "ol", display: "inline-flex", listStyleType: "none", margin: "space0", padding: "space0" }, validChildren.map((child, index) => {
return React.cloneElement(child, {
last: childrenCount === index + 1,
key: keySeed(`breadcrumb-${index}`),
parentElement: element
});
})));
}
);
Breadcrumb.displayName = "Breadcrumb";
export {
Breadcrumb,
BreadcrumbItem
};