@carbon/ibm-products
Version:
Carbon for IBM Products
57 lines (55 loc) • 3.16 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.
*/
import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../../node_modules/classnames/index.js";
import { blockClass } from "../PageHeaderUtils.js";
import { PageHeaderContext, usePageHeader } from "./context.js";
import React from "react";
import { Column, Grid } from "@carbon/react";
//#region src/components/PageHeader/next/PageHeaderBreadcrumbBar.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__ */ __toESM(require_classnames());
const PageHeaderBreadcrumbBar = React.forwardRef(function PageHeaderBreadcrumbBar({ border = true, className, children, renderIcon: IconElement, contentActions, contentActionsFlush, pageActions, pageActionsFlush, actionsAriaLabel = "Page header actions", ...other }, ref) {
const context = usePageHeader();
const { pageActionsInstance: globalActions, observerState } = context;
const classNames = (0, import_classnames.default)({
[`${blockClass}__breadcrumb-bar`]: true,
[`${blockClass}__breadcrumb-bar-border`]: border,
[`${blockClass}__breadcrumb__actions-flush`]: pageActionsFlush
}, className);
const isFunctionalContentActions = typeof contentActions === "function";
const contentActionsClasses = (0, import_classnames.default)({
[`${blockClass}__breadcrumb__content-actions`]: !contentActionsFlush,
[`${blockClass}__breadcrumb__content-actions-with-global-actions`]: !!globalActions,
[`${blockClass}__breadcrumb__content-actions-with-global-actions--show`]: observerState.contentActionsClipped || isFunctionalContentActions
});
return /* @__PURE__ */ React.createElement(PageHeaderContext.Provider, { value: {
...context,
isContentActionsInBreadcrumbBar: true,
isFunctionalContentActions
} }, /* @__PURE__ */ React.createElement("div", {
className: classNames,
ref,
...other
}, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Column, {
lg: 16,
md: 8,
sm: 4
}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__breadcrumb-container` }, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__breadcrumb-wrapper` }, IconElement && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__breadcrumb__icon` }, /* @__PURE__ */ React.createElement(IconElement, null)), children), /* @__PURE__ */ React.createElement("div", {
className: `${blockClass}__breadcrumb__actions`,
role: "navigation",
"aria-label": actionsAriaLabel
}, /* @__PURE__ */ React.createElement("div", { className: contentActionsClasses }, typeof contentActions === "function" ? contentActions(observerState) : contentActions), typeof pageActions === "function" ? pageActions(observerState) : pageActions))))));
});
PageHeaderBreadcrumbBar.displayName = "PageHeaderBreadcrumbBar";
//#endregion
export { PageHeaderBreadcrumbBar };