@carbon/ibm-products 2.81.0-rc.0 → 2.82.0-rc.0

package/es/components/PageHeader/PageHeader.js

@@ -0,0 +1,856 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { Tooltip, Tag, Button, usePrefix, FlexGrid, Row, Column, DefinitionTooltip } from '@carbon/react';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { TagSet } from '../TagSet/TagSet.js';
+import { spacing, baseFontSize, breakpoints } from '@carbon/layout';
+import { blockClass, utilSetCollapsed, utilGetBreadcrumbItemForTitle, utilCheckUpdateVerticalSpace } from './PageHeaderUtils.js';
+import { deprecateProp, prepareProps } from '../../global/js/utils/props-helper.js';
+import { ChevronUp } from '@carbon/react/icons';
+import { PageHeaderTitle } from './PageHeaderTitle.js';
+import PropTypes from '../../_virtual/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { useOverflowStringHeight } from '../../global/js/hooks/useOverflowString.js';
+import { useNearestScroll } from '../../global/js/hooks/useWindowScroll.js';
+import { useWindowResize } from '../../global/js/hooks/useWindowResize.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
+import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js';
+import { ActionBar } from '../ActionBar/ActionBar.js';
+import { ButtonSetWithOverflow } from '../ButtonSetWithOverflow/ButtonSetWithOverflow.js';
+
+const componentName = 'PageHeader';
+pkg._silenceWarnings(true);
+pkg.component.ActionBar = true;
+
+// Default values for props
+const defaults = {
+  fullWidthGrid: false,
+  narrowGrid: false,
+  breadcrumbOverflowTooltipAlign: 'right'
+};
+const PageHeader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    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,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  // handle deprecated props - START
+  // if withoutBackground is nullish check deprecated_hasBackgroundAlways and default false
+  withoutBackground ??= !(deprecated_hasBackgroundAlways ?? true);
+  // prefer enabled if nullish check deprecated_disableBreadcrumbScroll and default false
+  enableBreadcrumbScroll ??= !(deprecated_disableBreadcrumbScroll ?? true);
+  // handle deprecated props - END
+
+  const [metrics, setMetrics] = useState({});
+  const [pageHeaderStyles, setPageHeaderStyles] = useState({
+    ...rest?.style
+  });
+
+  // refs
+  const localHeaderRef = useRef(null);
+  const headerRef = ref || localHeaderRef;
+  const sizingContainerRef = useRef(null);
+  const offsetTopMeasuringRef = useRef(null);
+  const overflowMenuRef = useRef(null);
+
+  // state based on props only
+  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.");
+    }
+  }
+
+  // utility functions
+  const checkUpdateVerticalSpace = function () {
+    return utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar || false, widthIsNarrow, setMetrics);
+  };
+
+  // NOTE: The buffer is used to add space between the bottom of the header and the last content
+  // Not pre-collapsed and (subtitle or children)
+  const lastRowBufferActive = (title || pageActions) && !collapseTitle || subtitle || children;
+
+  // state based on scroll/resize based effects
+  const [pageActionsInBreadcrumbRow, setPageActionsInBreadcrumbRow] = useState(false);
+  const [scrollYValue, setScrollYValue] = useState(0);
+  const [hasCollapseButton, setHasCollapseButton] = useState(false);
+  const [spaceForCollapseButton, setSpaceForCollapseButton] = useState(false);
+  const [actionBarMaxWidth, setActionBarMaxWidth] = useState(0);
+  const [actionBarMinWidth, setActionBarMinWidth] = useState(0);
+  const [pageActionInBreadcrumbMaxWidth, setPageActionInBreadcrumbMaxWidth] = useState(0);
+  const [pageActionInBreadcrumbMinWidth, setPageActionInBreadcrumbMinWidth] = useState(0);
+  const [actionBarColumnWidth, setActionBarColumnWidth] = useState(0);
+  const [fullyCollapsed, setFullyCollapsed] = useState(false);
+  const [widthIsNarrow, setWidthIsNarrow] = useState(false);
+  const prefix = usePrefix();
+
+  // handlers
+  const handleActionBarWidthChange = _ref2 => {
+    let {
+      minWidth,
+      maxWidth
+    } = _ref2;
+    if (minWidth !== actionBarMinWidth || maxWidth !== actionBarMaxWidth) {
+      let overflowMenuWidth = 0;
+      const overflowMenu = overflowMenuRef?.current?.querySelector(`.${prefix}--overflow-menu`);
+      if (overflowMenu) {
+        overflowMenuWidth = overflowMenu.offsetWidth;
+      }
+
+      /* don't know how to test resize */
+      /* istanbul ignore next */
+      setActionBarMaxWidth(maxWidth + overflowMenuWidth);
+      /* don't know how to test resize */
+      /* istanbul ignore next */
+      setActionBarMinWidth(minWidth);
+    }
+  };
+  const handlePageActionWidthChange = _ref3 => {
+    let {
+      minWidth,
+      maxWidth
+    } = _ref3;
+    /* don't know how to test resize */
+    /* istanbul ignore next */
+    setPageActionInBreadcrumbMaxWidth(maxWidth);
+    /* don't know how to test resize */
+    /* istanbul ignore next */
+    setPageActionInBreadcrumbMinWidth(minWidth);
+  };
+
+  /* istanbul ignore next */
+  const handleResizeActionBarColumn = _ref4 => {
+    let {
+      width
+    } = _ref4;
+    /* don't know how to test resize */
+    /* istanbul ignore next */
+    setActionBarColumnWidth(width);
+  };
+
+  /* istanbul ignore next */
+  const handleResize = () => {
+    // receives width and height parameters if needed
+    /* don't know how to test resize */
+    /* istanbul ignore next */
+    checkUpdateVerticalSpace();
+  };
+  const handleCollapseToggle = () => {
+    utilSetCollapsed(!fullyCollapsed, headerRef, metrics?.headerOffset, metrics?.headerTopValue);
+  };
+
+  // use effects
+  useEffect(() => {
+    /* istanbul ignore else */
+    if (pageActions?.content) {
+      const {
+        minWidth,
+        maxWidth
+      } = pageActions;
+      handlePageActionWidthChange({
+        minWidth,
+        maxWidth
+      });
+    }
+  }, [pageActions]);
+  useEffect(() => {
+    // Determine the location of the pageAction buttons
+    setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && !!metrics?.titleRowSpaceAbove && scrollYValue > metrics?.titleRowSpaceAbove || widthIsNarrow && !!metrics?.pageActionsSpaceAbove && scrollYValue > metrics?.pageActionsSpaceAbove);
+  }, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
+  useEffect(() => {
+    // Assesses the size of the action bar and page action area and their required
+    // space before setting their sizes
+    //
+    let newActionBarWidth = 'initial';
+    let newPageActionInBreadcrumbWidth = 'initial';
+
+    /* don't know how to test resize */
+    /* 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,
+      [`--${blockClass}--max-action-bar-width-px`]: newActionBarWidth,
+      [`--${blockClass}--button-set-in-breadcrumb-width-px`]: `${newPageActionInBreadcrumbWidth}`
+    }));
+  }, [actionBarColumnWidth, actionBarMaxWidth, actionBarMinWidth, pageActionInBreadcrumbMaxWidth, pageActionInBreadcrumbMinWidth, headerRef]);
+  useEffect(() => {
+    // Updates custom CSS props used to manage scroll behavior
+    /* istanbul ignore next */
+    setPageHeaderStyles(prev => ({
+      ...prev,
+      [`--${blockClass}--height-px`]: `${metrics.headerHeight}px`,
+      [`--${blockClass}--width-px`]: `${metrics.headerWidth}px`,
+      [`--${blockClass}--header-top`]: `${(metrics?.headerTopValue || 0) + (metrics?.headerOffset || 0)}px`,
+      [`--${blockClass}--breadcrumb-title-visibility`]: scrollYValue > 0 ? 'visible' : 'hidden',
+      [`--${blockClass}--scroll`]: `${scrollYValue}`,
+      [`--${blockClass}--breadcrumb-title-top`]: `${metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue)}px`,
+      [`--${blockClass}--breadcrumb-title-opacity`]: `${Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
+      ))}`,
+      [`--${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]);
+  useNearestScroll(headerRef,
+  // on scroll or various layout changes check updates if needed
+  // istanbul ignore next
+  _ref5 => {
+    let {
+      current
+    } = _ref5;
+    setPageHeaderStyles(prev => ({
+      ...prev,
+      [`--${blockClass}--breadcrumb-top`]: `${metrics.headerOffset}px`
+    }));
+    const fullyCollapsed = current.scrollY + metrics.headerTopValue + metrics.headerOffset >= 0;
+    setFullyCollapsed(fullyCollapsed);
+
+    // set offset for tagset tooltip
+    /* 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(`--${blockClass}--tagset-tooltip-position`, fullyCollapsed ? 'fixed' : 'absolute');
+    document.documentElement.style.setProperty(`--${blockClass}--tagset-tooltip-offset`, `${tagsetTooltipOffset}px`);
+    setScrollYValue(current.scrollY);
+  }, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
+  useWindowResize(_ref6 => {
+    let {
+      current
+    } = _ref6;
+    // on window resize and other updates some values may have changed
+    checkUpdateVerticalSpace();
+    setWidthIsNarrow(current.innerWidth / 16 < parseInt(breakpoints.md.width)); // small (below medium) media query
+  }, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
+  useEffect(() => {
+    checkUpdateVerticalSpace();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fullWidthGrid, narrowGrid]);
+  useEffect(() => {
+    // Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
+    let result = withoutBackground ? 0 : 1;
+    if (!result && metrics?.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
+      const startAddingAt = parseFloat(`${spacing[9]}`) * parseInt(`${baseFontSize}`);
+      const scrollRemaining = metrics.headerHeight - scrollYValue;
+
+      /* don't know how to test resize */
+      /* istanbul ignore if */
+      if (scrollRemaining < startAddingAt) {
+        const distanceAddingOver = startAddingAt - (metrics?.breadcrumbRowHeight || 0);
+        result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
+      }
+    }
+    setPageHeaderStyles(prev => ({
+      ...prev,
+      [`--${blockClass}--background-opacity`]: result
+    }));
+  }, [actionBarItems, withoutBackground, breadcrumbs, headerRef, metrics.breadcrumbRowHeight, metrics.headerHeight, navigation, scrollYValue, hasCollapseHeaderToggle, tags]);
+  useEffect(() => {
+    // only has toggle if requested and withoutBackground is unset/falsy
+    setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground || false);
+  }, [withoutBackground, hasCollapseHeaderToggle]);
+  useEffect(() => {
+    // Determine if space is needed in the breadcrumb for a collapse button
+    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;
+  };
+  useEffect(() => {
+    if (collapseHeader === true) {
+      utilSetCollapsed(collapseHeader, headerRef, metrics.headerOffset, metrics.headerTopValue);
+    }
+  }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue, headerRef]);
+  useResizeObserver(sizingContainerRef, handleResizeActionBarColumn);
+  useResizeObserver(headerRef, handleResize);
+
+  // Determine what form of title to display in the breadcrumb
+  const breadcrumbItemForTitle = utilGetBreadcrumbItemForTitle(blockClass, collapseTitle, title);
+  const getBreadcrumbs = () => {
+    if (breadcrumbs && breadcrumbItemForTitle) {
+      return breadcrumbs.concat(breadcrumbItemForTitle);
+    } else {
+      if (breadcrumbItemForTitle) {
+        return [breadcrumbItemForTitle];
+      } else {
+        return breadcrumbs;
+      }
+    }
+  };
+  const displayedBreadcrumbs = getBreadcrumbs();
+  useIsomorphicEffect(() => {
+    Object.keys(pageHeaderStyles).forEach(key => {
+      // check if style is a css var
+      if (key.startsWith('--')) {
+        headerRef.current.style.setProperty(key, pageHeaderStyles[key]);
+      } else {
+        headerRef.current.style[key] = pageHeaderStyles[key];
+      }
+    });
+  }, [headerRef, pageHeaderStyles]);
+  const subtitleRef = useRef(null);
+  const isOverflowing = useOverflowStringHeight(subtitleRef);
+  const subtitleContent = /*#__PURE__*/React__default.createElement("span", {
+    ref: subtitleRef,
+    className: `${blockClass}__subtitle-text`
+  }, subtitle);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}--offset-top-measuring-element`,
+    ref: offsetTopMeasuringRef
+  }), /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
+    className: cx([blockClass, `${blockClass}--no-margins-below-row`, className, {
+      [`${blockClass}--has-navigation`]: navigation || tags,
+      [`${blockClass}--has-navigation-tags-only`]: !navigation && tags,
+      [`${blockClass}--without-background`]: withoutBackground
+    }]),
+    ref: headerRef
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(FlexGrid, {
+    fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',
+    narrow: narrowGrid,
+    className: cx({
+      [`${blockClass}--width--xl`]: fullWidthGrid === 'xl'
+    })
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__non-navigation-row-content`
+  }, hasBreadcrumbRow ? /*#__PURE__*/React__default.createElement(Row, {
+    className: cx(`${blockClass}__breadcrumb-row`, {
+      [`${blockClass}__breadcrumb-row--next-to-tabs`]: nextToTabsCheck(),
+      [`${blockClass}__breadcrumb-row--has-breadcrumbs`]: breadcrumbs || breadcrumbItemForTitle,
+      [`${blockClass}__breadcrumb-row--has-action-bar`]: hasActionBar || widthIsNarrow,
+      [`${blockClass}__has-page-actions-without-action-bar`]: !hasActionBar && !widthIsNarrow && pageActions,
+      [`${blockClass}__has-page-actions-with-title-collapsed`]: collapseTitle && pageActions
+    })
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__breadcrumb-row--container`
+  }, /*#__PURE__*/React__default.createElement(Column, {
+    className: cx(`${blockClass}__breadcrumb-column`, {
+      [`${blockClass}__breadcrumb-column--background`]: !!breadcrumbs || hasActionBar || widthIsNarrow
+    })
+  }, (breadcrumbs || breadcrumbItemForTitle) && /*#__PURE__*/React__default.createElement(BreadcrumbWithOverflow, {
+    className: `${blockClass}__breadcrumb`,
+    noTrailingSlash: !!title,
+    overflowAriaLabel: breadcrumbOverflowAriaLabel,
+    breadcrumbs: displayedBreadcrumbs,
+    overflowTooltipAlign: breadcrumbOverflowTooltipAlign,
+    maxVisible: undefined,
+    label: breadcrumbLabel
+  })), /*#__PURE__*/React__default.createElement(Column, {
+    className: cx([`${blockClass}__action-bar-column ${blockClass}__action-bar-column--background`, {
+      [`${blockClass}__action-bar-column--has-page-actions`]: pageActions,
+      [`${blockClass}__action-bar-column--influenced-by-collapse-button`]: spaceForCollapseButton
+    }])
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__action-bar-column-content`,
+    ref: sizingContainerRef
+  }, hasActionBar ?
+  /*#__PURE__*/
+  // Investigate the responsive behavior or this and the title also fix the ActionBar Item and PageAction story css
+  React__default.createElement(React__default.Fragment, null, thePageActions(true, pageActionsInBreadcrumbRow), /*#__PURE__*/React__default.createElement(ActionBar, {
+    actions: actionBarItems,
+    className: `${blockClass}__action-bar`,
+    menuOptionsClass: `${cx(actionBarMenuOptionsClass, `${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(Row, {
+    className: cx(`${blockClass}__title-row`, {
+      [`${blockClass}__title-row--no-breadcrumb-row`]: !hasBreadcrumbRow,
+      [`${blockClass}__title-row--under-action-bar`]: hasActionBar || widthIsNarrow,
+      [`${blockClass}__title-row--has-page-actions`]: !!pageActions,
+      [`${blockClass}__title-row--sticky`]: !!pageActions && !actionBarItems && hasBreadcrumbRow
+    })
+  }, /*#__PURE__*/React__default.createElement(Column, {
+    className: `${blockClass}__title-column`
+  }, title ? /*#__PURE__*/React__default.createElement(PageHeaderTitle, {
+    blockClass: blockClass,
+    hasBreadcrumbRow: hasBreadcrumbRow,
+    title: title
+  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle && /*#__PURE__*/React__default.createElement(Row, {
+    className: `${blockClass}__subtitle-row`
+  }, /*#__PURE__*/React__default.createElement(Column, {
+    className: `${blockClass}__subtitle`
+  }, isOverflowing ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+    definition: subtitle,
+    className: `${blockClass}__subtitle-tooltip`
+  }, subtitleContent) : subtitleContent)), children ? /*#__PURE__*/React__default.createElement(Row, {
+    className: `${blockClass}__available-row`
+  }, /*#__PURE__*/React__default.createElement(Column, {
+    className: `${blockClass}__available-column`
+  }, children)) : null, (breadcrumbs || actionBarItems || title || pageActions || children || subtitle) && /*#__PURE__*/React__default.createElement("div", {
+    className: cx([`${blockClass}__last-row-buffer`, {
+      [`${blockClass}__last-row-buffer--active`]: lastRowBufferActive
+    }])
+  }),
+  // this navigation row scrolls under the breadcrumb if there is one
+  tags && !navigation ? /*#__PURE__*/React__default.createElement(Row, {
+    className: cx(`${blockClass}__navigation-row`, {
+      [`${blockClass}__navigation-row--has-tags`]: tags
+    })
+  }, /*#__PURE__*/React__default.createElement(Column, {
+    className: cx(`${blockClass}__navigation-tags`, {
+      [`${blockClass}__navigation-tags--tags-only`]: !navigation
+    })
+  }, /*#__PURE__*/React__default.createElement(TagSet, {
+    overflowAlign: "bottom-right",
+    allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText,
+    allTagsModalTitle,
+    tags,
+    overflowClassName: `${blockClass}__navigation-tags-overflow`,
+    showAllTagsLabel: showAllTagsLabel || ''
+  }))) : null),
+  // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
+  navigation ? /*#__PURE__*/React__default.createElement(Row, {
+    className: cx(`${blockClass}__navigation-row`, {
+      [`${blockClass}__navigation-row--spacing-above-06`]: !!navigation,
+      [`${blockClass}__navigation-row--has-tags`]: tags
+    })
+  }, /*#__PURE__*/React__default.createElement(Column, {
+    className: `${blockClass}__navigation-tabs`
+  }, navigation), tags ? /*#__PURE__*/React__default.createElement(Column, {
+    className: cx(`${blockClass}__navigation-tags`, {
+      [`${blockClass}__navigation-tags--tags-only`]: !navigation
+    })
+  }, /*#__PURE__*/React__default.createElement(TagSet, {
+    overflowAlign: "bottom-right",
+    allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText,
+    allTagsModalTitle,
+    showAllTagsLabel: showAllTagsLabel || '',
+    tags,
+    overflowClassName: `${blockClass}__navigation-tags-overflow`
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: cx(`${blockClass}__collapse-expand-toggle`, {
+      [`${blockClass}__collapse-expand-toggle--collapsed`]: fullyCollapsed
+    })
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    hasIconOnly: true,
+    iconDescription: /* istanbul ignore next */
+    fullyCollapsed ? expandHeaderIconDescription : collapseHeaderIconDescription,
+    kind: "ghost",
+    onClick: handleCollapseToggle,
+    renderIcon: props => /*#__PURE__*/React__default.createElement(ChevronUp, _extends({
+      size: 16
+    }, props)),
+    size: "md",
+    tooltipPosition: "bottom",
+    tooltipAlignment: "end",
+    type: "button"
+  })) : null));
+  function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
+    if (pageActions) {
+      const Tag = isBreadcrumbRow ? 'div' : Column;
+      // Only report size change of version action bar is rendered as part of the breadcrumb row.
+      // and when there is an actionBar
+      const handleWidthChange = isBreadcrumbRow && hasBreadcrumbRow ? handlePageActionWidthChange : () => {};
+      return /*#__PURE__*/React__default.createElement(Tag, {
+        className: cx(`${blockClass}__page-actions`, {
+          [`${blockClass}__page-actions--in-breadcrumb`]: inBreadcrumbRow
+        })
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: cx(`${blockClass}__page-actions-content`)
+      }, pageActions?.content ?? /*#__PURE__*/React__default.createElement(ButtonSetWithOverflow, {
+        className: `${blockClass}__button-set-with-overflow`,
+        menuOptionsClass: cx(pageActionsMenuOptionsClass, `${blockClass}__button-set-menu-options`),
+        onWidthChange: handleWidthChange,
+        buttons: pageActions,
+        buttonSetOverflowLabel: pageActionsOverflowLabel,
+        rightAlign: !widthIsNarrow
+      })));
+    }
+  }
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+
+// copied from carbon-components-react/src/components/Tag/Tag.js for DocGen
+const TYPES = {
+  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 tagTypes = Object.keys(TYPES);
+const deprecatedProps = {
+  /**
+   * **Deprecated**
+   * see property `enableBreadcrumbScroll`
+   */
+  disableBreadcrumbScroll: deprecateProp(PropTypes.bool, 'Property replaced by `enableBreadcrumbScroll`'),
+  /**
+   * **Deprecated** see property `withoutBackground`
+   */
+  hasBackgroundAlways: deprecateProp(PropTypes.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: PropTypes.arrayOf(PropTypes.shape({
+    /**@ts-ignore*/
+    ...prepareProps(Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment']),
+    iconDescription: PropTypes.string.isRequired,
+    /**@ts-ignore*/
+    onClick: Button.propTypes.onClick,
+    /**@ts-ignore*/
+    renderIcon: Button.propTypes.renderIcon.isRequired
+  })),
+  /**
+   * class name applied to the action bar overflow options
+   */
+  actionBarMenuOptionsClass: PropTypes.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: PropTypes.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: PropTypes.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: PropTypes.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: PropTypes.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: PropTypes.string,
+  /**
+   * align breadcrumb overflow tooltip
+   */
+  breadcrumbOverflowTooltipAlign: 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: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * Optional string representing the link location for the BreadcrumbItem
+     */
+    href: PropTypes.string,
+    /**
+     * Provide if this breadcrumb item represents the current page
+     */
+    isCurrentPage: PropTypes.bool,
+    /**
+     * Key required to render array efficiently
+     */
+    key: PropTypes.string.isRequired,
+    /**
+     * Pass in content that will be inside of the BreadcrumbItem
+     */
+    label: PropTypes.node,
+    /**
+     * A text version of the `label` for display, required if `label` is not a string.
+     */
+    /**@ts-ignore */
+    title: PropTypes.string
+  })),
+  /**
+   * A zone for placing high-level, client content above the page tabs.
+   * Accepts arbitrary renderable content as a React node. Optional.
+   */
+  children: PropTypes.node,
+  /**
+   * Specifies class(es) to be applied to the top-level PageHeader node.
+   * Optional.
+   */
+  className: PropTypes.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: PropTypes.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: PropTypes.string,
+  /**
+   * The title row typically starts below the breadcrumb row. This option
+   * preCollapses it into the breadcrumb row.
+   */
+  collapseTitle: PropTypes.bool,
+  /**
+   * Standard keeps the breadcrumb on the page. This option allows the breadcrumb
+   * to scroll off
+   */
+  enableBreadcrumbScroll: PropTypes.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: PropTypes.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: PropTypes.oneOfType([PropTypes.bool, PropTypes.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: PropTypes.bool,
+  /**
+   * The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid narrow prop
+   */
+  narrowGrid: PropTypes.bool,
+  /**
+   * Content for the navigation area in the PageHeader. Should
+   * be a React element that is normally a Carbon Tabs component. Optional.
+   */
+  navigation: PropTypes.element,
+  // Supports Tabs
+  /**
+   * 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: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
+    /**@ts-ignore*/
+    ...Button.propTypes,
+    key: PropTypes.string.isRequired,
+    /**@ts-ignore*/
+    kind: Button.propTypes.kind,
+    label: PropTypes.node,
+    onClick: PropTypes.func
+  })), PropTypes.shape({
+    /**
+     * minWidth should not be more than 180
+     * The content is expected to adjust itself to fit in
+     */
+    content: PropTypes.node.isRequired,
+    minWidth: PropTypes.number.isRequired,
+    maxWidth: PropTypes.number.isRequired
+  })]),
+  /**
+   * class name applied to the page actions overflow options
+   */
+  pageActionsMenuOptionsClass: PropTypes.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: PropTypes.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: PropTypes.string,
+  /**
+   * Sitting just below the title is this optional subtitle that provides additional context to
+   * identify the current page.
+   */
+  subtitle: PropTypes.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: PropTypes.arrayOf(PropTypes.shape({
+    ...prepareProps(Tag.propTypes, 'filter'),
+    label: PropTypes.string.isRequired,
+    // we duplicate this prop to improve the DocGen
+    type: PropTypes.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: PropTypes.oneOfType([PropTypes.shape({
+    // Update docgen if changed
+    text: PropTypes.string.isRequired,
+    shortTitle: PropTypes.string,
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    loading: PropTypes.bool,
+    // inline edit version properties
+    editableLabel: PropTypes.string,
+    id: PropTypes.string,
+    onCancel: PropTypes.func,
+    onChange: PropTypes.func,
+    onSave: PropTypes.func,
+    cancelDescription: PropTypes.string,
+    editDescription: PropTypes.string,
+    saveDescription: PropTypes.string,
+    tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
+    // Update docgen if changed
+  }), PropTypes.string, PropTypes.shape({
+    content: PropTypes.node.isRequired,
+    breadcrumbContent: PropTypes.node,
+    asText: PropTypes.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: PropTypes.bool,
+  ...deprecatedProps
+};
+PageHeader.displayName = componentName;
+
+export { PageHeader, deprecatedProps };