@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/PageHeader/PageHeader.js

@@ -29,80 +29,77 @@ var BreadcrumbWithOverflow = require('../BreadcrumbWithOverflow/BreadcrumbWithOv
 var ActionBar = require('../ActionBar/ActionBar.js');
 var ButtonSetWithOverflow = require('../ButtonSetWithOverflow/ButtonSetWithOverflow.js');
 
-var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground", "breadcrumbOverflowTooltipAlign"];
-var componentName = 'PageHeader';
+const componentName = 'PageHeader';
 settings.pkg._silenceWarnings(true);
 settings.pkg.component.ActionBar = true;
 
 // Default values for props
-var defaults = {
+const defaults = {
   fullWidthGrid: false,
   narrowGrid: false,
   breadcrumbOverflowTooltipAlign: 'right'
 };
-exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var actionBarItems = _ref.actionBarItems,
-    actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
-    actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
-    allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
-    allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
-    allTagsModalTitle = _ref.allTagsModalTitle,
-    deprecated_hasBackgroundAlways = _ref.hasBackgroundAlways,
-    breadcrumbOverflowAriaLabel = _ref.breadcrumbOverflowAriaLabel,
-    breadcrumbLabel = _ref.breadcrumbLabel,
-    breadcrumbs = _ref.breadcrumbs,
-    children = _ref.children,
-    className = _ref.className,
-    collapseHeader = _ref.collapseHeader,
-    collapseHeaderIconDescription = _ref.collapseHeaderIconDescription,
-    collapseTitle = _ref.collapseTitle,
-    deprecated_disableBreadcrumbScroll = _ref.disableBreadcrumbScroll,
-    enableBreadcrumbScroll = _ref.enableBreadcrumbScroll,
-    expandHeaderIconDescription = _ref.expandHeaderIconDescription,
-    _ref$fullWidthGrid = _ref.fullWidthGrid,
-    fullWidthGrid = _ref$fullWidthGrid === void 0 ? defaults.fullWidthGrid : _ref$fullWidthGrid,
-    hasCollapseHeaderToggle = _ref.hasCollapseHeaderToggle,
-    _ref$narrowGrid = _ref.narrowGrid,
-    narrowGrid = _ref$narrowGrid === void 0 ? defaults.narrowGrid : _ref$narrowGrid,
-    navigation = _ref.navigation,
-    pageActions = _ref.pageActions,
-    pageActionsOverflowLabel = _ref.pageActionsOverflowLabel,
-    pageActionsMenuOptionsClass = _ref.pageActionsMenuOptionsClass,
-    showAllTagsLabel = _ref.showAllTagsLabel,
-    subtitle = _ref.subtitle,
-    tags = _ref.tags,
-    title = _ref.title,
-    withoutBackground = _ref.withoutBackground,
-    _ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
-    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? defaults.breadcrumbOverflowTooltipAlign : _ref$breadcrumbOverfl,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.PageHeader = /*#__PURE__*/React.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 !== null && withoutBackground !== void 0 ? withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true);
+  withoutBackground ??= !(deprecated_hasBackgroundAlways ?? true);
   // prefer enabled if nullish check deprecated_disableBreadcrumbScroll and default false
-  enableBreadcrumbScroll !== null && enableBreadcrumbScroll !== void 0 ? enableBreadcrumbScroll : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== void 0 ? deprecated_disableBreadcrumbScroll : true);
+  enableBreadcrumbScroll ??= !(deprecated_disableBreadcrumbScroll ?? true);
   // handle deprecated props - END
 
-  var _useState = React.useState({}),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    metrics = _useState2[0],
-    setMetrics = _useState2[1];
-  var _useState3 = React.useState(_rollupPluginBabelHelpers.objectSpread2({}, rest === null || rest === void 0 ? void 0 : rest.style)),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    pageHeaderStyles = _useState4[0],
-    setPageHeaderStyles = _useState4[1];
+  const [metrics, setMetrics] = React.useState({});
+  const [pageHeaderStyles, setPageHeaderStyles] = React.useState({
+    ...rest?.style
+  });
 
   // refs
-  var localHeaderRef = React.useRef(null);
-  var headerRef = ref || localHeaderRef;
-  var sizingContainerRef = React.useRef(null);
-  var offsetTopMeasuringRef = React.useRef(null);
-  var overflowMenuRef = React.useRef(null);
+  const localHeaderRef = React.useRef(null);
+  const headerRef = ref || localHeaderRef;
+  const sizingContainerRef = React.useRef(null);
+  const offsetTopMeasuringRef = React.useRef(null);
+  const overflowMenuRef = React.useRef(null);
 
   // state based on props only
-  var hasActionBar = actionBarItems && actionBarItems.length > 0;
-  var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
-  if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 10) {
+  const hasActionBar = actionBarItems && actionBarItems.length > 0;
+  const hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
+  if (tags && tags?.length > 10) {
     if (!allTagsModalSearchLabel) {
       throw new Error("allTagsModalSearchLabel' is required.");
     }
@@ -118,69 +115,37 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }
 
   // utility functions
-  var checkUpdateVerticalSpace = function checkUpdateVerticalSpace() {
+  const checkUpdateVerticalSpace = function () {
     return PageHeaderUtils.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)
-  var lastRowBufferActive = (title || pageActions) && !collapseTitle || subtitle || children;
+  const lastRowBufferActive = (title || pageActions) && !collapseTitle || subtitle || children;
 
   // state based on scroll/resize based effects
-  var _useState5 = React.useState(false),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    pageActionsInBreadcrumbRow = _useState6[0],
-    setPageActionsInBreadcrumbRow = _useState6[1];
-  var _useState7 = React.useState(0),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    scrollYValue = _useState8[0],
-    setScrollYValue = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    hasCollapseButton = _useState10[0],
-    setHasCollapseButton = _useState10[1];
-  var _useState11 = React.useState(false),
-    _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-    spaceForCollapseButton = _useState12[0],
-    setSpaceForCollapseButton = _useState12[1];
-  var _useState13 = React.useState(0),
-    _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
-    actionBarMaxWidth = _useState14[0],
-    setActionBarMaxWidth = _useState14[1];
-  var _useState15 = React.useState(0),
-    _useState16 = _rollupPluginBabelHelpers.slicedToArray(_useState15, 2),
-    actionBarMinWidth = _useState16[0],
-    setActionBarMinWidth = _useState16[1];
-  var _useState17 = React.useState(0),
-    _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
-    pageActionInBreadcrumbMaxWidth = _useState18[0],
-    setPageActionInBreadcrumbMaxWidth = _useState18[1];
-  var _useState19 = React.useState(0),
-    _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
-    pageActionInBreadcrumbMinWidth = _useState20[0],
-    setPageActionInBreadcrumbMinWidth = _useState20[1];
-  var _useState21 = React.useState(0),
-    _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
-    actionBarColumnWidth = _useState22[0],
-    setActionBarColumnWidth = _useState22[1];
-  var _useState23 = React.useState(false),
-    _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
-    fullyCollapsed = _useState24[0],
-    setFullyCollapsed = _useState24[1];
-  var _useState25 = React.useState(false),
-    _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
-    widthIsNarrow = _useState26[0],
-    setWidthIsNarrow = _useState26[1];
-  var prefix = react.usePrefix();
+  const [pageActionsInBreadcrumbRow, setPageActionsInBreadcrumbRow] = React.useState(false);
+  const [scrollYValue, setScrollYValue] = React.useState(0);
+  const [hasCollapseButton, setHasCollapseButton] = React.useState(false);
+  const [spaceForCollapseButton, setSpaceForCollapseButton] = React.useState(false);
+  const [actionBarMaxWidth, setActionBarMaxWidth] = React.useState(0);
+  const [actionBarMinWidth, setActionBarMinWidth] = React.useState(0);
+  const [pageActionInBreadcrumbMaxWidth, setPageActionInBreadcrumbMaxWidth] = React.useState(0);
+  const [pageActionInBreadcrumbMinWidth, setPageActionInBreadcrumbMinWidth] = React.useState(0);
+  const [actionBarColumnWidth, setActionBarColumnWidth] = React.useState(0);
+  const [fullyCollapsed, setFullyCollapsed] = React.useState(false);
+  const [widthIsNarrow, setWidthIsNarrow] = React.useState(false);
+  const prefix = react.usePrefix();
 
   // handlers
-  var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
-    var minWidth = _ref2.minWidth,
-      maxWidth = _ref2.maxWidth;
+  const handleActionBarWidthChange = _ref2 => {
+    let {
+      minWidth,
+      maxWidth
+    } = _ref2;
     if (minWidth !== actionBarMinWidth || maxWidth !== actionBarMaxWidth) {
-      var _overflowMenuRef$curr;
-      var overflowMenuWidth = 0;
-      var overflowMenu = overflowMenuRef === null || overflowMenuRef === void 0 || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === void 0 ? void 0 : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
+      let overflowMenuWidth = 0;
+      const overflowMenu = overflowMenuRef?.current?.querySelector(`.${prefix}--overflow-menu`);
       if (overflowMenu) {
         overflowMenuWidth = overflowMenu.offsetWidth;
       }
@@ -193,9 +158,11 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setActionBarMinWidth(minWidth);
     }
   };
-  var handlePageActionWidthChange = function handlePageActionWidthChange(_ref3) {
-    var minWidth = _ref3.minWidth,
-      maxWidth = _ref3.maxWidth;
+  const handlePageActionWidthChange = _ref3 => {
+    let {
+      minWidth,
+      maxWidth
+    } = _ref3;
     /* don't know how to test resize */
     /* istanbul ignore next */
     setPageActionInBreadcrumbMaxWidth(maxWidth);
@@ -205,146 +172,165 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   /* istanbul ignore next */
-  var handleResizeActionBarColumn = function handleResizeActionBarColumn(_ref4) {
-    var width = _ref4.width;
+  const handleResizeActionBarColumn = _ref4 => {
+    let {
+      width
+    } = _ref4;
     /* don't know how to test resize */
     /* istanbul ignore next */
     setActionBarColumnWidth(width);
   };
 
   /* istanbul ignore next */
-  var handleResize = function handleResize() {
+  const handleResize = () => {
     // receives width and height parameters if needed
     /* don't know how to test resize */
     /* istanbul ignore next */
     checkUpdateVerticalSpace();
   };
-  var handleCollapseToggle = function handleCollapseToggle() {
-    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset, metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue);
+  const handleCollapseToggle = () => {
+    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics?.headerOffset, metrics?.headerTopValue);
   };
 
   // use effects
-  React.useEffect(function () {
+  React.useEffect(() => {
     /* istanbul ignore else */
-    if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
-      var _ref5 = pageActions,
-        minWidth = _ref5.minWidth,
-        maxWidth = _ref5.maxWidth;
+    if (pageActions?.content) {
+      const {
+        minWidth,
+        maxWidth
+      } = pageActions;
       handlePageActionWidthChange({
-        minWidth: minWidth,
-        maxWidth: maxWidth
+        minWidth,
+        maxWidth
       });
     }
   }, [pageActions]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Determine the location of the pageAction buttons
     /* istanbul ignore next */
-    if (metrics !== null && metrics !== void 0 && metrics.titleRowSpaceAbove && metrics !== null && metrics !== void 0 && metrics.pageActionsSpaceAbove) {
-      setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.titleRowSpaceAbove) || widthIsNarrow && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.pageActionsSpaceAbove));
+    if (metrics?.titleRowSpaceAbove && metrics?.pageActionsSpaceAbove) {
+      setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > metrics?.titleRowSpaceAbove || widthIsNarrow && scrollYValue > metrics?.pageActionsSpaceAbove);
     }
   }, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Assesses the size of the action bar and page action area and their required
     // space before setting their sizes
     //
-    var newActionBarWidth = 'initial';
-    var newPageActionInBreadcrumbWidth = 'initial';
+    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 = "".concat(pageActionInBreadcrumbMaxWidth, "px");
+        newPageActionInBreadcrumbWidth = `${pageActionInBreadcrumbMaxWidth}px`;
       } else if (pageActionInBreadcrumbMinWidth > 0) {
-        newPageActionInBreadcrumbWidth = "".concat(pageActionInBreadcrumbMinWidth, "px");
+        newPageActionInBreadcrumbWidth = `${pageActionInBreadcrumbMinWidth}px`;
       }
       if (actionBarMaxWidth > 0 && actionBarColumnWidth > pageActionInBreadcrumbMinWidth + actionBarMaxWidth) {
-        newActionBarWidth = "".concat(actionBarMaxWidth, "px");
+        newActionBarWidth = `${actionBarMaxWidth}px`;
       } else {
         if (actionBarMinWidth > 0) {
-          newActionBarWidth = "".concat(actionBarColumnWidth - pageActionInBreadcrumbMinWidth, "px");
+          newActionBarWidth = `${actionBarColumnWidth - pageActionInBreadcrumbMinWidth}px`;
         }
       }
     }
-    setPageHeaderStyles(function (prev) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--max-action-bar-width-px"), newActionBarWidth), "--".concat(PageHeaderUtils.blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)));
-    });
+    setPageHeaderStyles(prev => ({
+      ...prev,
+      [`--${PageHeaderUtils.blockClass}--max-action-bar-width-px`]: newActionBarWidth,
+      [`--${PageHeaderUtils.blockClass}--button-set-in-breadcrumb-width-px`]: `${newPageActionInBreadcrumbWidth}`
+    }));
   }, [actionBarColumnWidth, actionBarMaxWidth, actionBarMinWidth, pageActionInBreadcrumbMaxWidth, pageActionInBreadcrumbMinWidth, headerRef]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Updates custom CSS props used to manage scroll behavior
     /* istanbul ignore next */
-    setPageHeaderStyles(function (prev) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(PageHeaderUtils.blockClass, "--header-top"), "".concat(((metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue) || 0) + ((metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset) || 0), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
-      )))), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowWidth, "px")));
-    });
+    setPageHeaderStyles(prev => ({
+      ...prev,
+      [`--${PageHeaderUtils.blockClass}--height-px`]: `${metrics.headerHeight}px`,
+      [`--${PageHeaderUtils.blockClass}--width-px`]: `${metrics.headerWidth}px`,
+      [`--${PageHeaderUtils.blockClass}--header-top`]: `${(metrics?.headerTopValue || 0) + (metrics?.headerOffset || 0)}px`,
+      [`--${PageHeaderUtils.blockClass}--breadcrumb-title-visibility`]: scrollYValue > 0 ? 'visible' : 'hidden',
+      [`--${PageHeaderUtils.blockClass}--scroll`]: `${scrollYValue}`,
+      [`--${PageHeaderUtils.blockClass}--breadcrumb-title-top`]: `${metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue)}px`,
+      [`--${PageHeaderUtils.blockClass}--breadcrumb-title-opacity`]: `${Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
+      ))}`,
+      [`--${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]);
   useWindowScroll.useNearestScroll(headerRef,
   // on scroll or various layout changes check updates if needed
   // istanbul ignore next
-  function (_ref6) {
-    var current = _ref6.current;
-    setPageHeaderStyles(function (prev) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
-    });
-    var fullyCollapsed = current.scrollY + metrics.headerTopValue + metrics.headerOffset >= 0;
+  _ref5 => {
+    let {
+      current
+    } = _ref5;
+    setPageHeaderStyles(prev => ({
+      ...prev,
+      [`--${PageHeaderUtils.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 */
-    var tagsetTooltipOffset = fullyCollapsed && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics !== null && metrics !== void 0 && metrics.headerTopValue && metrics !== null && metrics !== void 0 && metrics.headerOffset ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : (metrics.headerHeight || 0) + (metrics.headerOffset || 0);
+    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("--".concat(PageHeaderUtils.blockClass, "--tagset-tooltip-position"), fullyCollapsed ? 'fixed' : 'absolute');
-    document.documentElement.style.setProperty("--".concat(PageHeaderUtils.blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
+    document.documentElement.style.setProperty(`--${PageHeaderUtils.blockClass}--tagset-tooltip-position`, fullyCollapsed ? 'fixed' : 'absolute');
+    document.documentElement.style.setProperty(`--${PageHeaderUtils.blockClass}--tagset-tooltip-offset`, `${tagsetTooltipOffset}px`);
     setScrollYValue(current.scrollY);
   }, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
-  useWindowResize.useWindowResize(function (_ref7) {
-    var current = _ref7.current;
+  useWindowResize.useWindowResize(_ref6 => {
+    let {
+      current
+    } = _ref6;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
     setWidthIsNarrow(current.innerWidth / 16 < parseInt(layout.breakpoints.md.width)); // small (below medium) media query
   }, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     checkUpdateVerticalSpace();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fullWidthGrid, narrowGrid]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
-    var result = withoutBackground ? 0 : 1;
-    if (!result && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
-      var startAddingAt = parseFloat("".concat(layout.spacing[9])) * parseInt("".concat(layout.baseFontSize));
-      var scrollRemaining = metrics.headerHeight - scrollYValue;
+    let result = withoutBackground ? 0 : 1;
+    if (!result && metrics?.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
+      const startAddingAt = parseFloat(`${layout.spacing[9]}`) * parseInt(`${layout.baseFontSize}`);
+      const scrollRemaining = metrics.headerHeight - scrollYValue;
 
       /* don't know how to test resize */
       /* istanbul ignore if */
       if (scrollRemaining < startAddingAt) {
-        var distanceAddingOver = startAddingAt - ((metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowHeight) || 0);
+        const distanceAddingOver = startAddingAt - (metrics?.breadcrumbRowHeight || 0);
         result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
       }
     }
-    setPageHeaderStyles(function (prev) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--background-opacity"), result));
-    });
+    setPageHeaderStyles(prev => ({
+      ...prev,
+      [`--${PageHeaderUtils.blockClass}--background-opacity`]: result
+    }));
   }, [actionBarItems, withoutBackground, breadcrumbs, headerRef, metrics.breadcrumbRowHeight, metrics.headerHeight, navigation, scrollYValue, hasCollapseHeaderToggle, tags]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     // only has toggle if requested and withoutBackground is unset/falsy
     // NOTE: prop-types isRequired.if for the expand and collapse
     // icon descriptions depends on the this.
     setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground || false);
   }, [withoutBackground, hasCollapseHeaderToggle]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Determine if space is needed in the breadcrumb for a collapse button
-    if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== void 0 && metrics.headerHeight) {
+    if (hasCollapseButton && !(navigation || tags) && metrics?.headerHeight) {
       setSpaceForCollapseButton(true);
     } else {
       setSpaceForCollapseButton(false);
     }
   }, [hasCollapseButton, navigation, tags, metrics.headerHeight]);
-  var nextToTabsCheck = function nextToTabsCheck() {
+  const nextToTabsCheck = () => {
     /* istanbul ignore next */
     return enableBreadcrumbScroll && !actionBarItems && metrics.headerTopValue && scrollYValue + metrics.headerTopValue >= 0;
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (collapseHeader === true) {
       PageHeaderUtils.utilSetCollapsed(collapseHeader, headerRef, metrics.headerOffset, metrics.headerTopValue);
     }
@@ -353,8 +339,8 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   useResizeObserver.useResizeObserver(headerRef, handleResize);
 
   // Determine what form of title to display in the breadcrumb
-  var breadcrumbItemForTitle = PageHeaderUtils.utilGetBreadcrumbItemForTitle(PageHeaderUtils.blockClass, collapseTitle, title);
-  var getBreadcrumbs = function getBreadcrumbs() {
+  const breadcrumbItemForTitle = PageHeaderUtils.utilGetBreadcrumbItemForTitle(PageHeaderUtils.blockClass, collapseTitle, title);
+  const getBreadcrumbs = () => {
     if (breadcrumbs && breadcrumbItemForTitle) {
       return breadcrumbs.concat(breadcrumbItemForTitle);
     } else {
@@ -365,9 +351,9 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   };
-  var displayedBreadcrumbs = getBreadcrumbs();
-  useIsomorphicEffect.useIsomorphicEffect(function () {
-    Object.keys(pageHeaderStyles).forEach(function (key) {
+  const displayedBreadcrumbs = getBreadcrumbs();
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    Object.keys(pageHeaderStyles).forEach(key => {
       // check if style is a css var
       if (key.startsWith('--')) {
         headerRef.current.style.setProperty(key, pageHeaderStyles[key]);
@@ -376,32 +362,45 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     });
   }, [headerRef, pageHeaderStyles]);
-  var subtitleRef = React.useRef(null);
-  var isOverflowing = useOverflowString.useOverflowStringHeight(subtitleRef);
-  var subtitleContent = /*#__PURE__*/React.createElement("span", {
+  const subtitleRef = React.useRef(null);
+  const isOverflowing = useOverflowString.useOverflowStringHeight(subtitleRef);
+  const subtitleContent = /*#__PURE__*/React.createElement("span", {
     ref: subtitleRef,
-    className: "".concat(PageHeaderUtils.blockClass, "__subtitle-text")
+    className: `${PageHeaderUtils.blockClass}__subtitle-text`
   }, subtitle);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
+    className: `${PageHeaderUtils.blockClass}--offset-top-measuring-element`,
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/React.createElement("section", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx([PageHeaderUtils.blockClass, "".concat(PageHeaderUtils.blockClass, "--no-margins-below-row"), className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), "".concat(PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), "".concat(PageHeaderUtils.blockClass, "--without-background"), withoutBackground)]),
+    className: cx([PageHeaderUtils.blockClass, `${PageHeaderUtils.blockClass}--no-margins-below-row`, className, {
+      [`${PageHeaderUtils.blockClass}--has-navigation`]: navigation || tags,
+      [`${PageHeaderUtils.blockClass}--has-navigation-tags-only`]: !navigation && tags,
+      [`${PageHeaderUtils.blockClass}--without-background`]: withoutBackground
+    }]),
     ref: headerRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.FlexGrid, {
     fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',
     narrow: narrowGrid,
-    className: cx(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "--width--xl"), fullWidthGrid === 'xl'))
+    className: cx({
+      [`${PageHeaderUtils.blockClass}--width--xl`]: fullWidthGrid === 'xl'
+    })
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PageHeaderUtils.blockClass, "__non-navigation-row-content")
+    className: `${PageHeaderUtils.blockClass}__non-navigation-row-content`
   }, hasBreadcrumbRow ? /*#__PURE__*/React.createElement(react.Row, {
-    className: cx("".concat(PageHeaderUtils.blockClass, "__breadcrumb-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), "".concat(PageHeaderUtils.blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions))
+    className: cx(`${PageHeaderUtils.blockClass}__breadcrumb-row`, {
+      [`${PageHeaderUtils.blockClass}__breadcrumb-row--next-to-tabs`]: nextToTabsCheck(),
+      [`${PageHeaderUtils.blockClass}__breadcrumb-row--has-breadcrumbs`]: breadcrumbs || breadcrumbItemForTitle,
+      [`${PageHeaderUtils.blockClass}__breadcrumb-row--has-action-bar`]: hasActionBar || widthIsNarrow,
+      [`${PageHeaderUtils.blockClass}__has-page-actions-without-action-bar`]: !hasActionBar && !widthIsNarrow && pageActions
+    })
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--container")
+    className: `${PageHeaderUtils.blockClass}__breadcrumb-row--container`
   }, /*#__PURE__*/React.createElement(react.Column, {
-    className: cx("".concat(PageHeaderUtils.blockClass, "__breadcrumb-column"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar || widthIsNarrow))
+    className: cx(`${PageHeaderUtils.blockClass}__breadcrumb-column`, {
+      [`${PageHeaderUtils.blockClass}__breadcrumb-column--background`]: !!breadcrumbs || hasActionBar || widthIsNarrow
+    })
   }, (breadcrumbs || breadcrumbItemForTitle) && /*#__PURE__*/React.createElement(BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
-    className: "".concat(PageHeaderUtils.blockClass, "__breadcrumb"),
+    className: `${PageHeaderUtils.blockClass}__breadcrumb`,
     noTrailingSlash: !!title,
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: displayedBreadcrumbs,
@@ -409,85 +408,104 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     maxVisible: undefined,
     label: breadcrumbLabel
   })), /*#__PURE__*/React.createElement(react.Column, {
-    className: cx(["".concat(PageHeaderUtils.blockClass, "__action-bar-column ").concat(PageHeaderUtils.blockClass, "__action-bar-column--background"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
+    className: cx([`${PageHeaderUtils.blockClass}__action-bar-column ${PageHeaderUtils.blockClass}__action-bar-column--background`, {
+      [`${PageHeaderUtils.blockClass}__action-bar-column--has-page-actions`]: pageActions,
+      [`${PageHeaderUtils.blockClass}__action-bar-column--influenced-by-collapse-button`]: spaceForCollapseButton
+    }])
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PageHeaderUtils.blockClass, "__action-bar-column-content"),
+    className: `${PageHeaderUtils.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.createElement(React.Fragment, null, thePageActions(true, pageActionsInBreadcrumbRow), /*#__PURE__*/React.createElement(ActionBar.ActionBar, {
     actions: actionBarItems,
-    className: "".concat(PageHeaderUtils.blockClass, "__action-bar"),
-    menuOptionsClass: "".concat(cx(actionBarMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__action-bar-menu-options"))),
+    className: `${PageHeaderUtils.blockClass}__action-bar`,
+    menuOptionsClass: `${cx(actionBarMenuOptionsClass, `${PageHeaderUtils.blockClass}__action-bar-menu-options`)}`,
     onWidthChange: handleActionBarWidthChange,
     overflowAriaLabel: actionBarOverflowAriaLabel,
-    overflowMenuRef: overflowMenuRef,
+    overflowMenuRef,
     rightAlign: true
   })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React.createElement(react.Row, {
-    className: cx("".concat(PageHeaderUtils.blockClass, "__title-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
+    className: cx(`${PageHeaderUtils.blockClass}__title-row`, {
+      [`${PageHeaderUtils.blockClass}__title-row--no-breadcrumb-row`]: !hasBreadcrumbRow,
+      [`${PageHeaderUtils.blockClass}__title-row--under-action-bar`]: hasActionBar || widthIsNarrow,
+      [`${PageHeaderUtils.blockClass}__title-row--has-page-actions`]: !!pageActions,
+      [`${PageHeaderUtils.blockClass}__title-row--sticky`]: !!pageActions && !actionBarItems && hasBreadcrumbRow
+    })
   }, /*#__PURE__*/React.createElement(react.Column, {
-    className: "".concat(PageHeaderUtils.blockClass, "__title-column")
+    className: `${PageHeaderUtils.blockClass}__title-column`
   }, title ? /*#__PURE__*/React.createElement(PageHeaderTitle.PageHeaderTitle, {
     blockClass: PageHeaderUtils.blockClass,
     hasBreadcrumbRow: hasBreadcrumbRow,
     title: title
   }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle && /*#__PURE__*/React.createElement(react.Row, {
-    className: "".concat(PageHeaderUtils.blockClass, "__subtitle-row")
+    className: `${PageHeaderUtils.blockClass}__subtitle-row`
   }, /*#__PURE__*/React.createElement(react.Column, {
-    className: "".concat(PageHeaderUtils.blockClass, "__subtitle")
+    className: `${PageHeaderUtils.blockClass}__subtitle`
   }, isOverflowing ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
     definition: subtitle,
-    className: "".concat(PageHeaderUtils.blockClass, "__subtitle-tooltip")
+    className: `${PageHeaderUtils.blockClass}__subtitle-tooltip`
   }, subtitleContent) : subtitleContent)), children ? /*#__PURE__*/React.createElement(react.Row, {
-    className: "".concat(PageHeaderUtils.blockClass, "__available-row")
+    className: `${PageHeaderUtils.blockClass}__available-row`
   }, /*#__PURE__*/React.createElement(react.Column, {
-    className: "".concat(PageHeaderUtils.blockClass, "__available-column")
+    className: `${PageHeaderUtils.blockClass}__available-column`
   }, children)) : null, (breadcrumbs || actionBarItems || title || pageActions || children || subtitle) && /*#__PURE__*/React.createElement("div", {
-    className: cx(["".concat(PageHeaderUtils.blockClass, "__last-row-buffer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__last-row-buffer--active"), lastRowBufferActive)])
+    className: cx([`${PageHeaderUtils.blockClass}__last-row-buffer`, {
+      [`${PageHeaderUtils.blockClass}__last-row-buffer--active`]: lastRowBufferActive
+    }])
   }),
   // this navigation row scrolls under the breadcrumb if there is one
   tags && !navigation ? /*#__PURE__*/React.createElement(react.Row, {
-    className: cx("".concat(PageHeaderUtils.blockClass, "__navigation-row"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
+    className: cx(`${PageHeaderUtils.blockClass}__navigation-row`, {
+      [`${PageHeaderUtils.blockClass}__navigation-row--has-tags`]: tags
+    })
   }, /*#__PURE__*/React.createElement(react.Column, {
-    className: cx("".concat(PageHeaderUtils.blockClass, "__navigation-tags"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
+    className: cx(`${PageHeaderUtils.blockClass}__navigation-tags`, {
+      [`${PageHeaderUtils.blockClass}__navigation-tags--tags-only`]: !navigation
+    })
   }, /*#__PURE__*/React.createElement(TagSet.TagSet, {
     overflowAlign: "bottom-right",
-    allTagsModalSearchLabel: allTagsModalSearchLabel,
-    allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
-    allTagsModalTitle: allTagsModalTitle,
-    tags: tags,
-    overflowClassName: "".concat(PageHeaderUtils.blockClass, "__navigation-tags-overflow"),
+    allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText,
+    allTagsModalTitle,
+    tags,
+    overflowClassName: `${PageHeaderUtils.blockClass}__navigation-tags-overflow`,
     showAllTagsLabel: showAllTagsLabel || ''
   }))) : null),
   // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
   navigation ? /*#__PURE__*/React.createElement(react.Row, {
-    className: cx("".concat(PageHeaderUtils.blockClass, "__navigation-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-row--spacing-above-06"), !!navigation), "".concat(PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
+    className: cx(`${PageHeaderUtils.blockClass}__navigation-row`, {
+      [`${PageHeaderUtils.blockClass}__navigation-row--spacing-above-06`]: !!navigation,
+      [`${PageHeaderUtils.blockClass}__navigation-row--has-tags`]: tags
+    })
   }, /*#__PURE__*/React.createElement(react.Column, {
-    className: "".concat(PageHeaderUtils.blockClass, "__navigation-tabs")
+    className: `${PageHeaderUtils.blockClass}__navigation-tabs`
   }, navigation), tags ? /*#__PURE__*/React.createElement(react.Column, {
-    className: cx("".concat(PageHeaderUtils.blockClass, "__navigation-tags"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
+    className: cx(`${PageHeaderUtils.blockClass}__navigation-tags`, {
+      [`${PageHeaderUtils.blockClass}__navigation-tags--tags-only`]: !navigation
+    })
   }, /*#__PURE__*/React.createElement(TagSet.TagSet, {
     overflowAlign: "bottom-right",
-    allTagsModalSearchLabel: allTagsModalSearchLabel,
-    allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
-    allTagsModalTitle: allTagsModalTitle,
+    allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText,
+    allTagsModalTitle,
     showAllTagsLabel: showAllTagsLabel || '',
-    tags: tags,
-    overflowClassName: "".concat(PageHeaderUtils.blockClass, "__navigation-tags-overflow")
+    tags,
+    overflowClassName: `${PageHeaderUtils.blockClass}__navigation-tags-overflow`
   })) : null) : null), hasCollapseButton ? /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(PageHeaderUtils.blockClass, "__collapse-expand-toggle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed))
+    className: cx(`${PageHeaderUtils.blockClass}__collapse-expand-toggle`, {
+      [`${PageHeaderUtils.blockClass}__collapse-expand-toggle--collapsed`]: fullyCollapsed
+    })
   }, /*#__PURE__*/React.createElement(react.Button, {
     hasIconOnly: true,
     iconDescription: /* istanbul ignore next */
     fullyCollapsed ? expandHeaderIconDescription : collapseHeaderIconDescription,
     kind: "ghost",
     onClick: handleCollapseToggle,
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(icons.ChevronUp, _rollupPluginBabelHelpers.extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React.createElement(icons.ChevronUp, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)),
     size: "md",
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
@@ -495,18 +513,19 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })) : null));
   function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
     if (pageActions) {
-      var _content;
-      var _Tag = isBreadcrumbRow ? 'div' : react.Column;
+      const Tag = isBreadcrumbRow ? 'div' : react.Column;
       // Only report size change of version action bar is rendered as part of the breadcrumb row.
       // and when there is an actionBar
-      var handleWidthChange = isBreadcrumbRow && hasBreadcrumbRow ? handlePageActionWidthChange : function () {};
-      return /*#__PURE__*/React.createElement(_Tag, {
-        className: cx("".concat(PageHeaderUtils.blockClass, "__page-actions"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
+      const handleWidthChange = isBreadcrumbRow && hasBreadcrumbRow ? handlePageActionWidthChange : () => {};
+      return /*#__PURE__*/React.createElement(Tag, {
+        className: cx(`${PageHeaderUtils.blockClass}__page-actions`, {
+          [`${PageHeaderUtils.blockClass}__page-actions--in-breadcrumb`]: inBreadcrumbRow
+        })
       }, /*#__PURE__*/React.createElement("div", {
-        className: cx("".concat(PageHeaderUtils.blockClass, "__page-actions-content"))
-      }, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React.createElement(ButtonSetWithOverflow.ButtonSetWithOverflow, {
-        className: "".concat(PageHeaderUtils.blockClass, "__button-set-with-overflow"),
-        menuOptionsClass: cx(pageActionsMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__button-set-menu-options")),
+        className: cx(`${PageHeaderUtils.blockClass}__page-actions-content`)
+      }, pageActions?.content ?? /*#__PURE__*/React.createElement(ButtonSetWithOverflow.ButtonSetWithOverflow, {
+        className: `${PageHeaderUtils.blockClass}__button-set-with-overflow`,
+        menuOptionsClass: cx(pageActionsMenuOptionsClass, `${PageHeaderUtils.blockClass}__button-set-menu-options`),
         onWidthChange: handleWidthChange,
         buttons: pageActions,
         buttonSetOverflowLabel: pageActionsOverflowLabel,
@@ -520,7 +539,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 exports.PageHeader = settings.pkg.checkComponentEnabled(exports.PageHeader, componentName);
 
 // copied from carbon-components-react/src/components/Tag/Tag.js for DocGen
-var TYPES = {
+const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
   purple: 'Purple',
@@ -534,8 +553,8 @@ var TYPES = {
   'high-contrast': 'High-Contrast',
   outline: 'Outline'
 };
-var tagTypes = Object.keys(TYPES);
-var deprecatedProps = {
+const tagTypes = Object.keys(TYPES);
+const deprecatedProps = {
   /**
    * **Deprecated** see property `enableBreadcrumbScroll`
    */
@@ -548,20 +567,22 @@ var deprecatedProps = {
 
 /**@ts-ignore */
 exports.PageHeader.tagTypes = tagTypes;
-exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
+exports.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: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
+  actionBarItems: index.default.arrayOf(index.default.shape({
+    /**@ts-ignore*/
+    ...propsHelper.prepareProps(react.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment']),
     iconDescription: index.default.string.isRequired,
     /**@ts-ignore*/
     onClick: react.Button.propTypes.onClick,
     /**@ts-ignore*/
     renderIcon: react.Button.propTypes.renderIcon.isRequired
-  }))),
+  })),
   /**
    * class name applied to the action bar overflow options
    */
@@ -573,8 +594,10 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * NOTE: This prop is required if actionBarItems are supplied
    */
   /**@ts-ignore */
-  actionBarOverflowAriaLabel: index.default.string.isRequired.if(function (_ref11) {
-    var actionBarItems = _ref11.actionBarItems;
+  actionBarOverflowAriaLabel: index.default.string.isRequired.if(_ref7 => {
+    let {
+      actionBarItems
+    } = _ref7;
     return actionBarItems && actionBarItems.length > 0;
   }),
   /**
@@ -606,8 +629,10 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
    */
   /**@ts-ignore */
-  breadcrumbOverflowAriaLabel: index.default.string.isRequired.if(function (_ref12) {
-    var breadcrumbs = _ref12.breadcrumbs;
+  breadcrumbOverflowAriaLabel: index.default.string.isRequired.if(_ref8 => {
+    let {
+      breadcrumbs
+    } = _ref8;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
   /**
@@ -647,8 +672,10 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
      * A text version of the `label` for display, required if `label` is not a string.
      */
     /**@ts-ignore */
-    title: index.default.string.isRequired.if(function (_ref13) {
-      var label = _ref13.label;
+    title: index.default.string.isRequired.if(_ref9 => {
+      let {
+        label
+      } = _ref9;
       return typeof label !== 'string';
     })
   })),
@@ -675,9 +702,11 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * required for both the expend and collapse states of the button component used.
    */
   /**@ts-ignore */
-  collapseHeaderIconDescription: index.default.string.isRequired.if(function (_ref14) {
-    var withoutBackground = _ref14.withoutBackground,
-      hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
+  collapseHeaderIconDescription: index.default.string.isRequired.if(_ref10 => {
+    let {
+      withoutBackground,
+      hasCollapseHeaderToggle
+    } = _ref10;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
   /**
@@ -695,9 +724,11 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * required for both the expend and collapse states of the button component used.
    */
   /**@ts-ignore */
-  expandHeaderIconDescription: index.default.string.isRequired.if(function (_ref15) {
-    var withoutBackground = _ref15.withoutBackground,
-      hasCollapseHeaderToggle = _ref15.hasCollapseHeaderToggle;
+  expandHeaderIconDescription: index.default.string.isRequired.if(_ref11 => {
+    let {
+      withoutBackground,
+      hasCollapseHeaderToggle
+    } = _ref11;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
   /**
@@ -740,13 +771,15 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   /**@ts-ignore */
-  pageActions: index.default.oneOfType([index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+  pageActions: index.default.oneOfType([index.default.arrayOf(index.default.shape({
+    /**@ts-ignore*/
+    ...react.Button.propTypes,
     key: index.default.string.isRequired,
     /**@ts-ignore*/
     kind: react.Button.propTypes.kind,
     label: index.default.node,
     onClick: index.default.func
-  }))), index.default.shape({
+  })), index.default.shape({
     /**
      * minWidth should not be more than 180
      * The content is expected to adjust itself to fit in
@@ -766,8 +799,10 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * NOTE: This prop is required if pageActions are supplied
    */
   /**@ts-ignore */
-  pageActionsOverflowLabel: index.default.node.isRequired.if(function (_ref16) {
-    var pageActions = _ref16.pageActions;
+  pageActionsOverflowLabel: index.default.node.isRequired.if(_ref12 => {
+    let {
+      pageActions
+    } = _ref12;
     return pageActions && pageActions.length > 0 && !pageActions.content;
   }),
   /**
@@ -796,11 +831,12 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
   /**@ts-ignore */
-  tags: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Tag.propTypes, 'filter')), {}, {
+  tags: index.default.arrayOf(index.default.shape({
+    ...propsHelper.prepareProps(react.Tag.propTypes, 'filter'),
     label: index.default.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: index.default.oneOf(tagTypes)
-  }))),
+  })),
   /**
    * An optional page title supplied as a string or object with the following attributes: text, icon, loading
    *
@@ -855,8 +891,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * 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: index.default.bool
-}, deprecatedProps);
+  withoutBackground: index.default.bool,
+  ...deprecatedProps
+};
 exports.PageHeader.displayName = componentName;
 
 exports.deprecatedProps = deprecatedProps;