@carbon/react
Version:
React components for the Carbon Design System
90 lines (88 loc) • 2.79 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import { Text } from "../Text/Text.js";
import Link_default from "../Link/index.js";
import classNames from "classnames";
import React, { cloneElement, forwardRef, isValidElement } from "react";
import PropTypes from "prop-types";
import { jsx } from "react/jsx-runtime";
import { OverflowMenuHorizontal } from "@carbon/icons-react";
//#region src/components/Breadcrumb/BreadcrumbItem.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const BreadcrumbItem = forwardRef((props, ref) => {
const { "aria-current": ariaCurrent, children, className: customClassName = "", href, isCurrentPage, ...rest } = props;
const prefix = usePrefix();
const className = classNames({
[`${prefix}--breadcrumb-item`]: true,
[`${prefix}--breadcrumb-item--current`]: isCurrentPage && ariaCurrent !== "page",
[customClassName]: !!customClassName
});
const child = isValidElement(children) ? children : null;
const childType = child?.type;
if (child && typeof child.type !== "string" && childType?.displayName?.includes("OverflowMenu")) {
const horizontalOverflowIcon = /* @__PURE__ */ jsx(OverflowMenuHorizontal, { className: `${prefix}--overflow-menu__icon` });
return /* @__PURE__ */ jsx("li", {
className,
...rest,
children: React.cloneElement(child, {
menuOptionsClass: `${prefix}--breadcrumb-menu-options`,
menuOffset: {
top: 10,
left: 59
},
renderIcon: () => horizontalOverflowIcon
})
});
}
if (typeof children === "string") return /* @__PURE__ */ jsx("li", {
className,
ref,
...rest,
children: href ? /* @__PURE__ */ jsx(Link_default, {
href,
"aria-current": ariaCurrent || isCurrentPage,
children
}) : /* @__PURE__ */ jsx(Text, {
"aria-current": ariaCurrent || isCurrentPage,
className: `${prefix}--link`,
children
})
});
return /* @__PURE__ */ jsx("li", {
className,
ref,
...rest,
children: child ? cloneElement(child, {
"aria-current": ariaCurrent,
className: classNames(`${prefix}--link`, child.props.className)
}) : children
});
});
BreadcrumbItem.displayName = "BreadcrumbItem";
BreadcrumbItem.propTypes = {
"aria-current": PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([
"false",
"true",
"page",
"step",
"location",
"date",
"time"
])]),
children: PropTypes.node,
className: PropTypes.string,
href: PropTypes.string,
isCurrentPage: PropTypes.bool
};
//#endregion
export { BreadcrumbItem as default };