@carbon/ibm-products
Version:
Carbon for IBM Products
721 lines (719 loc) • 37.2 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_useIsomorphicEffect = require("../../global/js/hooks/useIsomorphicEffect.js");
const require_useWindowScroll = require("../../global/js/hooks/useWindowScroll.js");
const require_useWindowResize = require("../../global/js/hooks/useWindowResize.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_props_helper = require("../../global/js/utils/props-helper.js");
const require_useResizeObserver = require("../../global/js/hooks/useResizeObserver.js");
const require_ActionBar = require("../ActionBar/ActionBar.js");
const require_BreadcrumbWithOverflow = require("../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js");
const require_TagSet = require("../TagSet/TagSet.js");
const require_PageHeaderUtils = require("./PageHeaderUtils.js");
const require_ButtonSetWithOverflow = require("../ButtonSetWithOverflow/ButtonSetWithOverflow.js");
const require_PageHeaderTitle = require("./PageHeaderTitle.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
let _carbon_react_icons = require("@carbon/react/icons");
let _carbon_layout = require("@carbon/layout");
//#region src/components/PageHeader/PageHeader.tsx
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const componentName = "PageHeader";
const defaults = {
fullWidthGrid: false,
narrowGrid: false,
breadcrumbOverflowTooltipAlign: "right"
};
const PageHeader = react.default.forwardRef(({ actionBarItems, actionBarMenuOptionsClass, actionBarOverflowAriaLabel, allTagsModalSearchLabel, allTagsModalSearchPlaceholderText, allTagsModalTitle, hasBackgroundAlways: deprecated_hasBackgroundAlways, breadcrumbOverflowAriaLabel, breadcrumbLabel, breadcrumbs, children, className, collapseHeader, collapseHeaderIconDescription, collapseTitle, disableBreadcrumbScroll: deprecated_disableBreadcrumbScroll, enableBreadcrumbScroll, expandHeaderIconDescription, fullWidthGrid = defaults.fullWidthGrid, hasCollapseHeaderToggle, narrowGrid = defaults.narrowGrid, navigation, pageActions, pageActionsOverflowLabel, pageActionsMenuOptionsClass, showAllTagsLabel, subtitle, tags, title, withoutBackground, breadcrumbOverflowTooltipAlign = defaults.breadcrumbOverflowTooltipAlign, ...rest }, ref) => {
withoutBackground ??= !(deprecated_hasBackgroundAlways ?? true);
enableBreadcrumbScroll ??= !(deprecated_disableBreadcrumbScroll ?? true);
const [metrics, setMetrics] = (0, react.useState)({});
const [pageHeaderStyles, setPageHeaderStyles] = (0, react.useState)({ ...rest?.style });
const localHeaderRef = (0, react.useRef)(null);
const headerRef = ref || localHeaderRef;
const sizingContainerRef = (0, react.useRef)(null);
const offsetTopMeasuringRef = (0, react.useRef)(null);
const overflowMenuRef = (0, react.useRef)(null);
const hasActionBar = actionBarItems && actionBarItems.length > 0;
const hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
if (tags && tags?.length > 10) {
if (!allTagsModalSearchLabel) throw new Error("allTagsModalSearchLabel' is required.");
if (!allTagsModalSearchPlaceholderText) throw new Error("'allTagsModalSearchPlaceholderText' is required.");
if (!allTagsModalTitle) throw new Error("'allTagsModalTitle' is required.");
if (!showAllTagsLabel) throw new Error("'showAllTagsLabel' is required.");
}
const checkUpdateVerticalSpace = function() {
return require_PageHeaderUtils.utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar || false, widthIsNarrow, setMetrics);
};
const lastRowBufferActive = (title || pageActions) && !collapseTitle || subtitle || children;
const [pageActionsInBreadcrumbRow, setPageActionsInBreadcrumbRow] = (0, react.useState)(false);
const [scrollYValue, setScrollYValue] = (0, react.useState)(0);
const [hasCollapseButton, setHasCollapseButton] = (0, react.useState)(false);
const [spaceForCollapseButton, setSpaceForCollapseButton] = (0, react.useState)(false);
const [actionBarMaxWidth, setActionBarMaxWidth] = (0, react.useState)(0);
const [actionBarMinWidth, setActionBarMinWidth] = (0, react.useState)(0);
const [pageActionInBreadcrumbMaxWidth, setPageActionInBreadcrumbMaxWidth] = (0, react.useState)(0);
const [pageActionInBreadcrumbMinWidth, setPageActionInBreadcrumbMinWidth] = (0, react.useState)(0);
const [actionBarColumnWidth, setActionBarColumnWidth] = (0, react.useState)(0);
const [fullyCollapsed, setFullyCollapsed] = (0, react.useState)(false);
const [widthIsNarrow, setWidthIsNarrow] = (0, react.useState)(false);
const prefix = (0, _carbon_react.usePrefix)();
const handleActionBarWidthChange = ({ minWidth, maxWidth }) => {
if (minWidth !== actionBarMinWidth || maxWidth !== actionBarMaxWidth) {
let overflowMenuWidth = 0;
const overflowMenu = overflowMenuRef?.current?.querySelector(`.${prefix}--overflow-menu`);
if (overflowMenu) overflowMenuWidth = overflowMenu.offsetWidth;
/* istanbul ignore next */
setActionBarMaxWidth(maxWidth + overflowMenuWidth);
/* istanbul ignore next */
setActionBarMinWidth(minWidth);
}
};
const handlePageActionWidthChange = ({ minWidth, maxWidth }) => {
/* istanbul ignore next */
setPageActionInBreadcrumbMaxWidth(maxWidth);
/* istanbul ignore next */
setPageActionInBreadcrumbMinWidth(minWidth);
};
/* istanbul ignore next */
const handleResizeActionBarColumn = ({ width }) => {
/* istanbul ignore next */
setActionBarColumnWidth(width);
};
/* istanbul ignore next */
const handleResize = () => {
/* istanbul ignore next */
checkUpdateVerticalSpace();
};
const handleCollapseToggle = () => {
require_PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics?.headerOffset, metrics?.headerTopValue);
};
(0, react.useEffect)(() => {
/* istanbul ignore else */
if (pageActions?.content) {
const { minWidth, maxWidth } = pageActions;
handlePageActionWidthChange({
minWidth,
maxWidth
});
}
}, [pageActions]);
(0, react.useEffect)(() => {
setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && !!metrics?.titleRowSpaceAbove && scrollYValue > metrics?.titleRowSpaceAbove || widthIsNarrow && !!metrics?.pageActionsSpaceAbove && scrollYValue > metrics?.pageActionsSpaceAbove);
}, [
hasActionBar,
metrics.breadcrumbRowSpaceBelow,
metrics.titleRowSpaceAbove,
metrics.pageActionsSpaceAbove,
collapseTitle,
scrollYValue,
widthIsNarrow
]);
(0, react.useEffect)(() => {
let newActionBarWidth = "initial";
let newPageActionInBreadcrumbWidth = "initial";
/* istanbul ignore if */
if (actionBarColumnWidth > 0) {
if (pageActionInBreadcrumbMaxWidth > 0 && actionBarColumnWidth > actionBarMaxWidth + pageActionInBreadcrumbMaxWidth) newPageActionInBreadcrumbWidth = `${pageActionInBreadcrumbMaxWidth}px`;
else if (pageActionInBreadcrumbMinWidth > 0) newPageActionInBreadcrumbWidth = `${pageActionInBreadcrumbMinWidth}px`;
if (actionBarMaxWidth > 0 && actionBarColumnWidth > pageActionInBreadcrumbMinWidth + actionBarMaxWidth) newActionBarWidth = `${actionBarMaxWidth}px`;
else if (actionBarMinWidth > 0) newActionBarWidth = `${actionBarColumnWidth - pageActionInBreadcrumbMinWidth}px`;
}
setPageHeaderStyles((prev) => ({
...prev,
[`--${require_PageHeaderUtils.blockClass}--max-action-bar-width-px`]: newActionBarWidth,
[`--${require_PageHeaderUtils.blockClass}--button-set-in-breadcrumb-width-px`]: `${newPageActionInBreadcrumbWidth}`
}));
}, [
actionBarColumnWidth,
actionBarMaxWidth,
actionBarMinWidth,
pageActionInBreadcrumbMaxWidth,
pageActionInBreadcrumbMinWidth,
headerRef
]);
(0, react.useEffect)(() => {
/* istanbul ignore next */
setPageHeaderStyles((prev) => ({
...prev,
[`--${require_PageHeaderUtils.blockClass}--height-px`]: `${metrics.headerHeight}px`,
[`--${require_PageHeaderUtils.blockClass}--width-px`]: `${metrics.headerWidth}px`,
[`--${require_PageHeaderUtils.blockClass}--header-top`]: `${(metrics?.headerTopValue || 0) + (metrics?.headerOffset || 0)}px`,
[`--${require_PageHeaderUtils.blockClass}--breadcrumb-title-visibility`]: scrollYValue > 0 ? "visible" : "hidden",
[`--${require_PageHeaderUtils.blockClass}--scroll`]: `${scrollYValue}`,
[`--${require_PageHeaderUtils.blockClass}--breadcrumb-title-top`]: `${metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue)}px`,
[`--${require_PageHeaderUtils.blockClass}--breadcrumb-title-opacity`]: `${Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1)))}`,
[`--${require_PageHeaderUtils.blockClass}--breadcrumb-row-width-px`]: `${metrics?.breadcrumbRowWidth}px`
}));
}, [
headerRef,
enableBreadcrumbScroll,
metrics,
metrics.breadcrumbRowHeight,
metrics.breadcrumbRowSpaceBelow,
metrics.breadcrumbTitleHeight,
metrics.breadcrumbRowWidth,
metrics.headerHeight,
metrics.headerWidth,
metrics.headerOffset,
metrics.headerTopValue,
metrics.navigationRowHeight,
navigation,
scrollYValue,
tags
]);
require_useWindowScroll.useNearestScroll(
headerRef,
// istanbul ignore next
({ current }) => {
setPageHeaderStyles((prev) => ({
...prev,
[`--${require_PageHeaderUtils.blockClass}--breadcrumb-top`]: `${metrics.headerOffset}px`
}));
const fullyCollapsed = current.scrollY + metrics.headerTopValue + metrics.headerOffset >= 0;
setFullyCollapsed(fullyCollapsed);
/* istanbul ignore next */
const tagsetTooltipOffset = fullyCollapsed && metrics?.headerHeight && metrics?.headerTopValue && metrics?.headerOffset ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : (metrics.headerHeight || 0) + (metrics.headerOffset || 0);
/* istanbul ignore next */
document.documentElement.style.setProperty(`--${require_PageHeaderUtils.blockClass}--tagset-tooltip-position`, fullyCollapsed ? "fixed" : "absolute");
document.documentElement.style.setProperty(`--${require_PageHeaderUtils.blockClass}--tagset-tooltip-offset`, `${tagsetTooltipOffset}px`);
setScrollYValue(current.scrollY);
},
[
metrics.headerHeight,
metrics.headerTopValue,
metrics.headerOffset,
enableBreadcrumbScroll
]
);
require_useWindowResize.useWindowResize(({ current }) => {
checkUpdateVerticalSpace();
setWidthIsNarrow(current.innerWidth / 16 < parseInt(_carbon_layout.breakpoints.md.width));
}, [
actionBarItems,
children,
breadcrumbs,
enableBreadcrumbScroll,
navigation,
pageActions,
subtitle,
tags,
title
]);
(0, react.useEffect)(() => {
checkUpdateVerticalSpace();
}, [fullWidthGrid, narrowGrid]);
(0, react.useEffect)(() => {
let result = withoutBackground ? 0 : 1;
if (!result && metrics?.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
const startAddingAt = parseFloat(`${_carbon_layout.spacing[9]}`) * parseInt(`${_carbon_layout.baseFontSize}`);
const scrollRemaining = metrics.headerHeight - scrollYValue;
/* istanbul ignore if */
if (scrollRemaining < startAddingAt) {
const distanceAddingOver = startAddingAt - (metrics?.breadcrumbRowHeight || 0);
result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
}
}
setPageHeaderStyles((prev) => ({
...prev,
[`--${require_PageHeaderUtils.blockClass}--background-opacity`]: result
}));
}, [
actionBarItems,
withoutBackground,
breadcrumbs,
headerRef,
metrics.breadcrumbRowHeight,
metrics.headerHeight,
navigation,
scrollYValue,
hasCollapseHeaderToggle,
tags
]);
(0, react.useEffect)(() => {
setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground || false);
}, [withoutBackground, hasCollapseHeaderToggle]);
(0, react.useEffect)(() => {
if (hasCollapseButton && !(navigation || tags) && metrics?.headerHeight) setSpaceForCollapseButton(true);
else setSpaceForCollapseButton(false);
}, [
hasCollapseButton,
navigation,
tags,
metrics.headerHeight
]);
const nextToTabsCheck = () => {
/* istanbul ignore next */
return enableBreadcrumbScroll && !actionBarItems && metrics.headerTopValue && scrollYValue + metrics.headerTopValue >= 0;
};
(0, react.useEffect)(() => {
if (collapseHeader === true) require_PageHeaderUtils.utilSetCollapsed(collapseHeader, headerRef, metrics.headerOffset, metrics.headerTopValue);
}, [
collapseHeader,
metrics.headerOffset,
metrics.headerTopValue,
headerRef
]);
require_useResizeObserver.useResizeObserver(sizingContainerRef, handleResizeActionBarColumn);
require_useResizeObserver.useResizeObserver(headerRef, handleResize);
const breadcrumbItemForTitle = require_PageHeaderUtils.utilGetBreadcrumbItemForTitle(require_PageHeaderUtils.blockClass, collapseTitle, title);
const getBreadcrumbs = () => {
if (breadcrumbs && breadcrumbItemForTitle) return breadcrumbs.concat(breadcrumbItemForTitle);
else if (breadcrumbItemForTitle) return [breadcrumbItemForTitle];
else return breadcrumbs;
};
const displayedBreadcrumbs = getBreadcrumbs();
require_useIsomorphicEffect.useIsomorphicEffect(() => {
Object.keys(pageHeaderStyles).forEach((key) => {
if (key.startsWith("--")) headerRef.current.style.setProperty(key, pageHeaderStyles[key]);
else headerRef.current.style[key] = pageHeaderStyles[key];
});
}, [headerRef, pageHeaderStyles]);
return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", {
className: `${require_PageHeaderUtils.blockClass}--offset-top-measuring-element`,
ref: offsetTopMeasuringRef
}), /* @__PURE__ */ react.default.createElement("section", {
...rest,
className: (0, import_classnames.default)([
require_PageHeaderUtils.blockClass,
`${require_PageHeaderUtils.blockClass}--no-margins-below-row`,
className,
{
[`${require_PageHeaderUtils.blockClass}--has-navigation`]: navigation || tags,
[`${require_PageHeaderUtils.blockClass}--has-navigation-tags-only`]: !navigation && tags,
[`${require_PageHeaderUtils.blockClass}--without-background`]: withoutBackground
}
]),
ref: headerRef,
...require_devtools.getDevtoolsProps(componentName)
}, /* @__PURE__ */ react.default.createElement(_carbon_react.FlexGrid, {
fullWidth: fullWidthGrid === true || fullWidthGrid === "xl",
narrow: narrowGrid,
className: (0, import_classnames.default)({ [`${require_PageHeaderUtils.blockClass}--width--xl`]: fullWidthGrid === "xl" })
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__non-navigation-row-content` }, hasBreadcrumbRow ? /* @__PURE__ */ react.default.createElement(_carbon_react.Row, { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__breadcrumb-row`, {
[`${require_PageHeaderUtils.blockClass}__breadcrumb-row--next-to-tabs`]: nextToTabsCheck(),
[`${require_PageHeaderUtils.blockClass}__breadcrumb-row--has-breadcrumbs`]: breadcrumbs || breadcrumbItemForTitle,
[`${require_PageHeaderUtils.blockClass}__breadcrumb-row--has-action-bar`]: hasActionBar || widthIsNarrow,
[`${require_PageHeaderUtils.blockClass}__has-page-actions-without-action-bar`]: !hasActionBar && !widthIsNarrow && pageActions,
[`${require_PageHeaderUtils.blockClass}__has-page-actions-with-title-collapsed`]: collapseTitle && pageActions
}) }, /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__breadcrumb-row--container` }, /* @__PURE__ */ react.default.createElement(_carbon_react.Column, { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__breadcrumb-column`, { [`${require_PageHeaderUtils.blockClass}__breadcrumb-column--background`]: !!breadcrumbs || hasActionBar || widthIsNarrow }) }, (breadcrumbs || breadcrumbItemForTitle) && /* @__PURE__ */ react.default.createElement(require_BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
className: `${require_PageHeaderUtils.blockClass}__breadcrumb`,
noTrailingSlash: !!title,
overflowAriaLabel: breadcrumbOverflowAriaLabel,
breadcrumbs: displayedBreadcrumbs,
overflowTooltipAlign: breadcrumbOverflowTooltipAlign,
maxVisible: void 0,
label: breadcrumbLabel
})), /* @__PURE__ */ react.default.createElement(_carbon_react.Column, { className: (0, import_classnames.default)([`${require_PageHeaderUtils.blockClass}__action-bar-column ${require_PageHeaderUtils.blockClass}__action-bar-column--background`, {
[`${require_PageHeaderUtils.blockClass}__action-bar-column--has-page-actions`]: pageActions,
[`${require_PageHeaderUtils.blockClass}__action-bar-column--influenced-by-collapse-button`]: spaceForCollapseButton
}]) }, /* @__PURE__ */ react.default.createElement("div", {
className: `${require_PageHeaderUtils.blockClass}__action-bar-column-content`,
ref: sizingContainerRef
}, hasActionBar ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, thePageActions(true, pageActionsInBreadcrumbRow), /* @__PURE__ */ react.default.createElement(require_ActionBar.ActionBar, {
actions: actionBarItems,
className: `${require_PageHeaderUtils.blockClass}__action-bar`,
menuOptionsClass: `${(0, import_classnames.default)(actionBarMenuOptionsClass, `${require_PageHeaderUtils.blockClass}__action-bar-menu-options`)}`,
onWidthChange: handleActionBarWidthChange,
overflowAriaLabel: actionBarOverflowAriaLabel,
overflowMenuRef,
rightAlign: true
})) : (widthIsNarrow || pageActions) && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /* @__PURE__ */ react.default.createElement(_carbon_react.Row, { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__title-row`, {
[`${require_PageHeaderUtils.blockClass}__title-row--no-breadcrumb-row`]: !hasBreadcrumbRow,
[`${require_PageHeaderUtils.blockClass}__title-row--under-action-bar`]: hasActionBar || widthIsNarrow,
[`${require_PageHeaderUtils.blockClass}__title-row--has-page-actions`]: !!pageActions,
[`${require_PageHeaderUtils.blockClass}__title-row--sticky`]: !!pageActions && !actionBarItems && hasBreadcrumbRow
}) }, /* @__PURE__ */ react.default.createElement(_carbon_react.Column, { className: `${require_PageHeaderUtils.blockClass}__title-column` }, title ? /* @__PURE__ */ react.default.createElement(require_PageHeaderTitle.PageHeaderTitle, {
blockClass: require_PageHeaderUtils.blockClass,
hasBreadcrumbRow,
title
}) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle && /* @__PURE__ */ react.default.createElement(_carbon_react.Row, { className: `${require_PageHeaderUtils.blockClass}__subtitle-row` }, /* @__PURE__ */ react.default.createElement(_carbon_react.Column, { className: `${require_PageHeaderUtils.blockClass}__subtitle` }, /* @__PURE__ */ react.default.createElement("span", { className: `${require_PageHeaderUtils.blockClass}__subtitle-text` }, subtitle))), children ? /* @__PURE__ */ react.default.createElement(_carbon_react.Row, { className: `${require_PageHeaderUtils.blockClass}__available-row` }, /* @__PURE__ */ react.default.createElement(_carbon_react.Column, { className: `${require_PageHeaderUtils.blockClass}__available-column` }, children)) : null, (breadcrumbs || actionBarItems || title || pageActions || children || subtitle) && /* @__PURE__ */ react.default.createElement("div", { className: (0, import_classnames.default)([`${require_PageHeaderUtils.blockClass}__last-row-buffer`, { [`${require_PageHeaderUtils.blockClass}__last-row-buffer--active`]: lastRowBufferActive }]) }), tags && !navigation ? /* @__PURE__ */ react.default.createElement(_carbon_react.Row, { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__navigation-row`, { [`${require_PageHeaderUtils.blockClass}__navigation-row--has-tags`]: tags }) }, /* @__PURE__ */ react.default.createElement(_carbon_react.Column, { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__navigation-tags`, { [`${require_PageHeaderUtils.blockClass}__navigation-tags--tags-only`]: !navigation }) }, /* @__PURE__ */ react.default.createElement(require_TagSet.default, {
overflowAlign: "bottom-right",
allTagsModalSearchLabel,
allTagsModalSearchPlaceholderText,
allTagsModalTitle,
tags,
overflowClassName: `${require_PageHeaderUtils.blockClass}__navigation-tags-overflow`,
showAllTagsLabel: showAllTagsLabel || ""
}))) : null), navigation ? /* @__PURE__ */ react.default.createElement(_carbon_react.Row, { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__navigation-row`, {
[`${require_PageHeaderUtils.blockClass}__navigation-row--spacing-above-06`]: !!navigation,
[`${require_PageHeaderUtils.blockClass}__navigation-row--has-tags`]: tags
}) }, /* @__PURE__ */ react.default.createElement(_carbon_react.Column, { className: `${require_PageHeaderUtils.blockClass}__navigation-tabs` }, navigation), tags ? /* @__PURE__ */ react.default.createElement(_carbon_react.Column, { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__navigation-tags`, { [`${require_PageHeaderUtils.blockClass}__navigation-tags--tags-only`]: !navigation }) }, /* @__PURE__ */ react.default.createElement(require_TagSet.default, {
overflowAlign: "bottom-right",
allTagsModalSearchLabel,
allTagsModalSearchPlaceholderText,
allTagsModalTitle,
showAllTagsLabel: showAllTagsLabel || "",
tags,
overflowClassName: `${require_PageHeaderUtils.blockClass}__navigation-tags-overflow`
})) : null) : null), hasCollapseButton ? /* @__PURE__ */ react.default.createElement("div", { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__collapse-expand-toggle`, { [`${require_PageHeaderUtils.blockClass}__collapse-expand-toggle--collapsed`]: fullyCollapsed }) }, /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
hasIconOnly: true,
iconDescription: fullyCollapsed ? expandHeaderIconDescription : collapseHeaderIconDescription,
kind: "ghost",
onClick: handleCollapseToggle,
renderIcon: (props) => /* @__PURE__ */ react.default.createElement(_carbon_react_icons.ChevronUp, {
size: 16,
...props
}),
size: "md",
tooltipPosition: "bottom",
tooltipAlignment: "end",
type: "button"
})) : null));
function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
if (pageActions) {
const Tag = isBreadcrumbRow ? "div" : _carbon_react.Column;
const handleWidthChange = isBreadcrumbRow && hasBreadcrumbRow ? handlePageActionWidthChange : () => {};
return /* @__PURE__ */ react.default.createElement(Tag, { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__page-actions`, { [`${require_PageHeaderUtils.blockClass}__page-actions--in-breadcrumb`]: inBreadcrumbRow }) }, /* @__PURE__ */ react.default.createElement("div", { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__page-actions-content`) }, pageActions?.content ?? /* @__PURE__ */ react.default.createElement(require_ButtonSetWithOverflow.ButtonSetWithOverflow, {
className: `${require_PageHeaderUtils.blockClass}__button-set-with-overflow`,
menuOptionsClass: (0, import_classnames.default)(pageActionsMenuOptionsClass, `${require_PageHeaderUtils.blockClass}__button-set-menu-options`),
onWidthChange: handleWidthChange,
buttons: pageActions,
buttonSetOverflowLabel: pageActionsOverflowLabel,
rightAlign: !widthIsNarrow
})));
}
}
});
const tagTypes = Object.keys({
red: "Red",
magenta: "Magenta",
purple: "Purple",
blue: "Blue",
cyan: "Cyan",
teal: "Teal",
green: "Green",
gray: "Gray",
"cool-gray": "Cool-Gray",
"warm-gray": "Warm-Gray",
"high-contrast": "High-Contrast",
outline: "Outline"
});
const deprecatedProps = {
/**
* **Deprecated**
* see property `enableBreadcrumbScroll`
*/
disableBreadcrumbScroll: require_props_helper.deprecateProp(prop_types.default.bool, "Property replaced by `enableBreadcrumbScroll`"),
/**
* **Deprecated** see property `withoutBackground`
*/
hasBackgroundAlways: require_props_helper.deprecateProp(prop_types.default.bool, "Property replaced by `withoutBackground`")
};
/**@ts-ignore */
PageHeader.tagTypes = tagTypes;
PageHeader.propTypes = {
/**
* Specifies the action bar items which are the final items in the row top of the PageHeader.
* Each item is specified as an object with the properties of a Carbon Button in icon only form.
* Button kind, size, tooltipPosition, tooltipAlignment and type are ignored.
*/
/**@ts-ignore */
actionBarItems: prop_types.default.arrayOf(prop_types.default.shape({
/**@ts-ignore*/
...require_props_helper.prepareProps(_carbon_react.Button.propTypes, [
"kind",
"size",
"tooltipPosition",
"tooltipAlignment"
]),
iconDescription: prop_types.default.string.isRequired,
/**@ts-ignore*/
onClick: _carbon_react.Button.propTypes.onClick,
/**@ts-ignore*/
renderIcon: _carbon_react.Button.propTypes.renderIcon.isRequired
})),
/**
* class name applied to the action bar overflow options
*/
actionBarMenuOptionsClass: prop_types.default.string,
/**
* When there is insufficient space for all actionBarItems to be displayed this
* aria label is used for the action bar overflow menu
*
* NOTE: This prop is required if actionBarItems are supplied
*/
/**@ts-ignore */
actionBarOverflowAriaLabel: prop_types.default.string,
/**
* When tags are supplied there may not be sufficient space to display all of the tags. This results in an overflow
* menu being shown. If in the overflow menu there is still insufficient space this label is used in a dialog showing
* all tags.
*
* **Note: Required if more than 10 tags**
*/
allTagsModalSearchLabel: prop_types.default.string,
/**
* When tags are supplied there may not be sufficient space to display all of the tags. This results in an overflow
* menu being shown. If in the overflow menu there is still insufficient space this placeholder is used in a dialog
* showing all tags.
*
* **Note: Required if more than 10 tags**
*/
allTagsModalSearchPlaceholderText: prop_types.default.string,
/**
* When tags are supplied there may not be sufficient space to display all of the tags. This results in an overflow
* menu being shown. If in the overflow menu there is still insufficient space this title is used in a dialog showing
* all tags.
*
* **Note: Required if more than 10 tags**
*/
allTagsModalTitle: prop_types.default.string,
/**
* If the user supplies breadcrumbs then this property is required.
* It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
*/
/**@ts-ignore */
breadcrumbOverflowAriaLabel: prop_types.default.string,
/**
* align breadcrumb overflow tooltip
*/
breadcrumbOverflowTooltipAlign: _carbon_react.Tooltip.propTypes.align,
/**
* Specifies the breadcrumb components to be shown in the breadcrumb area of
* the page header. Each item is specified as an object with optional fields
* 'label' to supply the breadcrumb label, 'href' to supply the link location,
* and 'isCurrentPage' to specify whether this breadcrumb component represents
* the current page. Each item should also include a unique 'key' field to
* enable efficient rendering, and if the label is not a string then a 'title'
* field is required to provide a text alternative for display. Any other
* fields in the object will be passed through to the breadcrumb element as
* HTML attributes.
*/
/**@ts-ignore */
breadcrumbs: prop_types.default.arrayOf(prop_types.default.shape({
/**
* Optional string representing the link location for the BreadcrumbItem
*/
href: prop_types.default.string,
/**
* Provide if this breadcrumb item represents the current page
*/
isCurrentPage: prop_types.default.bool,
/**
* Key required to render array efficiently
*/
key: prop_types.default.string.isRequired,
/**
* Pass in content that will be inside of the BreadcrumbItem
*/
label: prop_types.default.node,
/**
* A text version of the `label` for display, required if `label` is not a string.
*/
/**@ts-ignore */
title: prop_types.default.string
})),
/**
* A zone for placing high-level, client content above the page tabs.
* Accepts arbitrary renderable content as a React node. Optional.
*/
children: prop_types.default.node,
/**
* Specifies class(es) to be applied to the top-level PageHeader node.
* Optional.
*/
className: prop_types.default.string,
/**
* The header can as a whole be collapsed, expanded or somewhere in between.
* This setting controls the initial value, but also takes effect on change
*
* NOTE: The header is collapsed by setting the scroll position to hide part of the header.
* Collapsing has no effect if there is insufficient content to scroll.
*/
collapseHeader: prop_types.default.bool,
/**
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
* required for both the expend and collapse states of the button component used.
*/
/**@ts-ignore */
collapseHeaderIconDescription: prop_types.default.string,
/**
* The title row typically starts below the breadcrumb row. This option
* preCollapses it into the breadcrumb row.
*/
collapseTitle: prop_types.default.bool,
/**
* Standard keeps the breadcrumb on the page. This option allows the breadcrumb
* to scroll off
*/
enableBreadcrumbScroll: prop_types.default.bool,
/**
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
* required for both the expend and collapse states of the button component used.
*/
/**@ts-ignore */
expandHeaderIconDescription: prop_types.default.string,
/**
* The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid fullWidth prop.
* 'xl' is used to override the grid width setting. Can be used with narrowGrid: true to get the largest size.
*/
/**@ts-ignore */
fullWidthGrid: prop_types.default.oneOfType([prop_types.default.bool, prop_types.default.oneOf(["xl"])]),
/**
* Adds a button as the last element of the bottom row which collapses and expands the header.
*
* NOTE: The header is collapsed by setting the scroll position to hide part of the header.
* Collapsing has no effect if there is insufficient content to scroll.
*/
/**@ts-ignore */
hasCollapseHeaderToggle: prop_types.default.bool,
/**
* The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid narrow prop
*/
narrowGrid: prop_types.default.bool,
/**
* Content for the navigation area in the PageHeader. Should
* be a React element that is normally a Carbon Tabs component. Optional.
*/
navigation: prop_types.default.element,
/**
* Specifies the primary page actions which are placed at the same level in the page as the title.
*
* Either a set of actions, each specified as an object with the properties of a Carbon Button plus:
*
* - label: node
*
* Or a single object
*
* - content: content to be rendered. NOTE: must be capable of restricting itself to the space provided. This 2.5rem height ($spacing-08)
* and the width not used by action bar items when scrolled into toolbar.
* - minWidth: smallest number of pixel width the content would like. NOTE: This is not guaranteed and may be less on small viewports.
* - maxWidth: maximum number of pixels the content will grow to
* Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
*/
/**@ts-ignore */
pageActions: prop_types.default.oneOfType([prop_types.default.arrayOf(prop_types.default.shape({
/**@ts-ignore*/
..._carbon_react.Button.propTypes,
key: prop_types.default.string.isRequired,
/**@ts-ignore*/
kind: _carbon_react.Button.propTypes.kind,
label: prop_types.default.node,
onClick: prop_types.default.func
})), prop_types.default.shape({
/**
* minWidth should not be more than 180
* The content is expected to adjust itself to fit in
*/
content: prop_types.default.node.isRequired,
minWidth: prop_types.default.number.isRequired,
maxWidth: prop_types.default.number.isRequired
})]),
/**
* class name applied to the page actions overflow options
*/
pageActionsMenuOptionsClass: prop_types.default.string,
/**
* When there is insufficient space to display all of hte page actions inline a dropdown button menu is shown,
* containing the page actions. This label is used as the display content of the dropdown button menu.
*
* NOTE: This prop is required if pageActions are supplied
*/
/**@ts-ignore */
pageActionsOverflowLabel: prop_types.default.node,
/**
* When tags are supplied there may not be sufficient space to display all of the tags. This results in an overflow
* menu being shown. If in the overflow menu there is still insufficient space this label is used to offer a
* "View all tags" option.
*
* **Note: Required if more than 10 tags**
*/
showAllTagsLabel: prop_types.default.string,
/**
* Sitting just below the title is this optional subtitle that provides additional context to
* identify the current page.
*/
subtitle: prop_types.default.node,
/**
* An array of tags to be shown as the final content in the PageHeader.
*
* Each tag is specified as an object with the following properties
* **label**\* (required) to supply the tag content, and properties of the the Carbon Tag component,
* such as **type**, **disabled**, **ref**, **className** , and any other Tag props.
*
* NOTE: **filter** is not supported. Any remaining fields in the object will be passed through to the HTML element
* as HTML attributes.
*
* See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
*/
/**@ts-ignore */
tags: prop_types.default.arrayOf(prop_types.default.shape({
...require_props_helper.prepareProps(_carbon_react.Tag.propTypes, "filter"),
label: prop_types.default.string.isRequired,
type: prop_types.default.oneOf(tagTypes)
})),
/**
* An optional page title supplied as a string or object with the following attributes: text, icon, loading
*
* Can be supplied either as:
* - String
* - Object containing
* - text: title string
* - shortTitle: alternative title for exceptionally long titles
* - icon: optional icon
* - loading: boolean shows loading indicator if true
* - onChange: function to process the live value (React change === HTML Input)
* - onSave: function to process a confirmed change
* - editableLabel: label for edit required if onChange supplied
* - cancelDescription: label for edit cancel button
* - saveDescription: label for edit save button
* - tooltipAlignment: position for tooltip displayed for large titles. Default to "bottom".
* - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
* - content: title or name of current location shown in main part of page header
* - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
* - asText: String based representation of the title
*/
/**@ts-ignore */
title: prop_types.default.oneOfType([
prop_types.default.shape({
text: prop_types.default.string.isRequired,
shortTitle: prop_types.default.string,
icon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
loading: prop_types.default.bool,
editableLabel: prop_types.default.string,
id: prop_types.default.string,
onCancel: prop_types.default.func,
onChange: prop_types.default.func,
onSave: prop_types.default.func,
cancelDescription: prop_types.default.string,
editDescription: prop_types.default.string,
saveDescription: prop_types.default.string,
tooltipAlignment: prop_types.default.oneOf([
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"right"
])
}),
prop_types.default.string,
prop_types.default.shape({
content: prop_types.default.node.isRequired,
breadcrumbContent: prop_types.default.node,
asText: prop_types.default.string.isRequired
})
]),
/**
* Specifies if the PageHeader should appear without a background color, and defaults to the preferred `false` (a background color is shown).
* Note that when `true` some parts of the header still gain a background if and when they stick to the top of the PageHeader on scroll.
*/
/**@ts-ignore */
withoutBackground: prop_types.default.bool,
...deprecatedProps
};
PageHeader.displayName = componentName;
//#endregion
exports.PageHeader = PageHeader;