@carbon/ibm-products
Version:
Carbon for IBM Products
66 lines (64 loc) • 3.1 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 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 require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../node_modules/classnames/index.js");
const require_settings = require("../../../settings.js");
const require_overflowHandler = require("./overflowHandler.js");
const require_PageHeaderTitleBreadcrumb = require("./PageHeaderTitleBreadcrumb.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _carbon_react = require("@carbon/react");
//#region src/components/PageHeader/next/PageHeaderBreadcrumbOverflow.tsx
/**
* Copyright IBM Corp. 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.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const PageHeaderBreadcrumbOverflow = (0, react.forwardRef)(({ renderOverflowBreadcrumb, className, children, ...other }, ref) => {
const [hiddenBreadcrumbs, setHiddenBreadcrumbs] = react.default.useState([]);
const fallbackRef = (0, react.useRef)(null);
const componentRef = ref ?? fallbackRef;
const carbonPrefix = (0, _carbon_react.usePrefix)();
(0, react.useEffect)(() => {
if (!componentRef) return;
const breadcrumbList = componentRef?.current.querySelector(`.${carbonPrefix}--breadcrumb`);
require_overflowHandler.createOverflowHandler({
container: breadcrumbList,
onChange: (_, hidden) => {
setHiddenBreadcrumbs(hidden);
}
});
}, []);
const renderChildren = () => {
const filteredBreadcrumbs = react.default.Children.toArray(children).filter((child) => {
if (react.default.isValidElement(child)) return child.type === _carbon_react.BreadcrumbItem || child.type === require_PageHeaderTitleBreadcrumb.PageHeaderTitleBreadcrumb;
});
if (filteredBreadcrumbs) {
const overflowBreadcrumb = renderOverflowBreadcrumb?.(hiddenBreadcrumbs);
if (!overflowBreadcrumb) return children;
const clonedTitleBreadcrumb = react.default.cloneElement(overflowBreadcrumb, {
key: "cloned overflow breadcrumb item",
"data-fixed": true,
className: (0, import_classnames.default)(`${require_settings.pkg.prefix}--page-header-breadcrumb-overflow-item`, { [`${require_settings.pkg.prefix}--page-header-overflow-breadcrumb-item-with-items`]: hiddenBreadcrumbs.length })
});
const clonedChildren = [...filteredBreadcrumbs];
clonedChildren.splice(filteredBreadcrumbs.length - 1, 0, clonedTitleBreadcrumb);
return clonedChildren;
}
return children;
};
return /* @__PURE__ */ react.default.createElement(_carbon_react.Breadcrumb, {
className: (0, import_classnames.default)(className, `${require_settings.pkg.prefix}--page-header-breadcrumb-overflow`),
ref: componentRef,
...other
}, renderChildren());
});
PageHeaderBreadcrumbOverflow.displayName = "PageHeaderBreadcrumbOverflow";
//#endregion
exports.PageHeaderBreadcrumbOverflow = PageHeaderBreadcrumbOverflow;