@carbon/ibm-products 1.0.0-rc.0 → 1.0.1

package/lib/components/PageHeader/PageHeader.js

@@ -0,0 +1,812 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageHeader = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _layout = require("@carbon/layout");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactResizeDetector = require("react-resize-detector");
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _hooks = require("../../global/js/hooks");
+
+var _devtools = require("../../global/js/utils/devtools");
+
+var _propsHelper = require("../../global/js/utils/props-helper");
+
+var _settings = require("../../settings");
+
+var _ActionBar = require("../ActionBar/");
+
+var _BreadcrumbWithOverflow = require("../BreadcrumbWithOverflow");
+
+var _TagSet = require("../TagSet/TagSet");
+
+var _ButtonSetWithOverflow = require("../ButtonSetWithOverflow");
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _PageHeaderUtils = require("./PageHeaderUtils");
+
+var _PageHeaderTitle = require("./PageHeaderTitle");
+
+var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var componentName = 'PageHeader';
+
+var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref5, _cx2, _ref6, _cx4, _cx7;
+
+  var actionBarItems = _ref.actionBarItems,
+      actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
+      actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
+      allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
+      allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
+      allTagsModalTitle = _ref.allTagsModalTitle,
+      hasBackgroundAlways = _ref.hasBackgroundAlways,
+      breadcrumbOverflowAriaLabel = _ref.breadcrumbOverflowAriaLabel,
+      breadcrumbs = _ref.breadcrumbs,
+      children = _ref.children,
+      className = _ref.className,
+      collapseHeader = _ref.collapseHeader,
+      collapseHeaderIconDescription = _ref.collapseHeaderIconDescription,
+      collapseTitle = _ref.collapseTitle,
+      disableBreadcrumbScroll = _ref.disableBreadcrumbScroll,
+      expandHeaderIconDescription = _ref.expandHeaderIconDescription,
+      fullWidthGrid = _ref.fullWidthGrid,
+      hasCollapseHeaderToggle = _ref.hasCollapseHeaderToggle,
+      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,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      metrics = _useState2[0],
+      setMetrics = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(_objectSpread({}, rest.style)),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      pageHeaderStyles = _useState4[0],
+      setPageHeaderStyles = _useState4[1]; // refs
+
+
+  var localHeaderRef = (0, _react.useRef)(null);
+  var headerRef = ref || localHeaderRef;
+  var sizingContainerRef = (0, _react.useRef)();
+  var offsetTopMeasuringRef = (0, _react.useRef)(null); // utility functions
+
+  var checkUpdateVerticalSpace = function checkUpdateVerticalSpace() {
+    return (0, _PageHeaderUtils.utilCheckUpdateVerticalSpace)(headerRef, offsetTopMeasuringRef, navigation, disableBreadcrumbScroll, setMetrics);
+  }; // state based on props only
+
+
+  var hasActionBar = actionBarItems && actionBarItems.length > 0;
+  var hasBreadcrumbRow = breadcrumbs || actionBarItems; // 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; // state based on scroll/resize based effects
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      pageActionsInBreadcrumbRow = _useState6[0],
+      setPageActionsInBreadcrumbRow = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      scrollYValue = _useState8[0],
+      setScrollYValue = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      hasCollapseButton = _useState10[0],
+      setHasCollapseButton = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      spaceForCollapseButton = _useState12[0],
+      setSpaceForCollapseButton = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(0),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      actionBarMaxWidth = _useState14[0],
+      setActionBarMaxWidth = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(0),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      actionBarMinWidth = _useState16[0],
+      setActionBarMinWidth = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(0),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      pageActionInBreadcrumbMaxWidth = _useState18[0],
+      setPageActionInBreadcrumbMaxWidth = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(0),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      pageActionInBreadcrumbMinWidth = _useState20[0],
+      setPageActionInBreadcrumbMinWidth = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(0),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      actionBarColumnWidth = _useState22[0],
+      setActionBarColumnWidth = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      fullyCollapsed = _useState24[0],
+      setFullyCollapsed = _useState24[1]; // handlers
+
+
+  var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
+    var minWidth = _ref2.minWidth,
+        maxWidth = _ref2.maxWidth;
+
+    /* don't know how to test resize */
+
+    /* istanbul ignore next */
+    setActionBarMaxWidth(maxWidth);
+    /* don't know how to test resize */
+
+    /* istanbul ignore next */
+
+    setActionBarMinWidth(minWidth);
+  };
+
+  var handlePageActionWidthChange = function handlePageActionWidthChange(_ref3) {
+    var minWidth = _ref3.minWidth,
+        maxWidth = _ref3.maxWidth;
+
+    /* 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 */
+
+
+  var handleResizeActionBarColumn = function handleResizeActionBarColumn(width) {
+    /* don't know how to test resize */
+
+    /* istanbul ignore next */
+    setActionBarColumnWidth(width);
+  };
+  /* istanbul ignore next */
+
+
+  var handleResize = function handleResize() {
+    // receives width and height parameters if needed
+
+    /* don't know how to test resize */
+
+    /* istanbul ignore next */
+    checkUpdateVerticalSpace();
+  };
+
+  var handleCollapseToggle = function handleCollapseToggle() {
+    (0, _PageHeaderUtils.utilSetCollapsed)(!fullyCollapsed, metrics.headerOffset, metrics.headerTopValue);
+  }; // use effects
+
+
+  (0, _react.useEffect)(function () {
+    if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
+      var minWidth = pageActions.minWidth,
+          maxWidth = pageActions.maxWidth;
+      handlePageActionWidthChange({
+        minWidth: minWidth,
+        maxWidth: maxWidth
+      });
+    }
+  }, [pageActions]);
+  (0, _react.useEffect)(function () {
+    // Determine the location of the pageAction buttons
+
+    /* istanbul ignore next */
+    setPageActionsInBreadcrumbRow(collapseTitle || scrollYValue > metrics.titleRowSpaceAbove && hasActionBar);
+  }, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, collapseTitle, scrollYValue]);
+  (0, _react.useEffect)(function () {
+    // 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';
+    /* don't know how to test resize */
+
+    /* istanbul ignore if */
+
+    if (actionBarColumnWidth > 0) {
+      if (pageActionInBreadcrumbMaxWidth > 0 && actionBarColumnWidth > actionBarMaxWidth + pageActionInBreadcrumbMaxWidth) {
+        newPageActionInBreadcrumbWidth = "".concat(pageActionInBreadcrumbMaxWidth, "px");
+      } else if (pageActionInBreadcrumbMinWidth > 0) {
+        newPageActionInBreadcrumbWidth = "".concat(pageActionInBreadcrumbMinWidth, "px");
+      }
+
+      if (actionBarMaxWidth > 0 && actionBarColumnWidth > pageActionInBreadcrumbMinWidth + actionBarMaxWidth) {
+        newActionBarWidth = "".concat(actionBarMaxWidth, "px");
+      } else {
+        if (actionBarMinWidth > 0) {
+          newActionBarWidth = "".concat(actionBarColumnWidth - pageActionInBreadcrumbMinWidth, "px");
+        }
+      }
+    }
+
+    setPageHeaderStyles(function (prev) {
+      var _objectSpread2;
+
+      return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, "--".concat(_PageHeaderUtils.blockClass, "--max-action-bar-width-px"), newActionBarWidth), (0, _defineProperty2.default)(_objectSpread2, "--".concat(_PageHeaderUtils.blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)), _objectSpread2));
+    });
+  }, [actionBarColumnWidth, actionBarMaxWidth, actionBarMinWidth, pageActionInBreadcrumbMaxWidth, pageActionInBreadcrumbMinWidth, headerRef]);
+  (0, _react.useEffect)(function () {
+    // Updates custom CSS props used to manage scroll behavior
+
+    /* istanbul ignore next */
+    setPageHeaderStyles(function (prev) {
+      var _objectSpread3;
+
+      return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread3 = {}, (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), (0, _defineProperty2.default)(_objectSpread3, "--".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
+      )))), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")), _objectSpread3));
+    });
+  }, [headerRef, disableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
+  (0, _hooks.useNearestScroll)(headerRef, // on scroll or various layout changes check updates if needed
+  function (_ref4) {
+    var current = _ref4.current;
+    setPageHeaderStyles(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
+    });
+    var fullyCollapsed = current.scrollY + metrics.headerTopValue + metrics.headerOffset >= 0;
+    setFullyCollapsed(fullyCollapsed); // set offset for tagset tooltip
+
+    /* istanbul ignore next */
+
+    var tagsetTooltipOffset = fullyCollapsed ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : metrics.headerHeight + metrics.headerOffset;
+    /* 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"));
+    setScrollYValue(current.scrollY);
+  }, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, disableBreadcrumbScroll]);
+  (0, _hooks.useWindowResize)(function () {
+    // on window resize and other updates some values may have changed
+    checkUpdateVerticalSpace();
+  }, [actionBarItems, children, breadcrumbs, disableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
+  (0, _react.useEffect)(function () {
+    checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fullWidthGrid, narrowGrid]);
+  (0, _react.useEffect)(function () {
+    // Determines if the hasBackgroundAlways should be one based on the header height or scroll
+    var result = hasBackgroundAlways ? 1 : 0;
+
+    if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
+      var startAddingAt = parseFloat(_layout.layout05, 10) * parseInt(_layout.baseFontSize);
+      var scrollRemaining = metrics.headerHeight - scrollYValue;
+      /* don't know how to test resize */
+
+      /* istanbul ignore if */
+
+      if (scrollRemaining < startAddingAt) {
+        var distanceAddingOver = startAddingAt - metrics.breadcrumbRowHeight;
+        result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
+      }
+    }
+
+    setPageHeaderStyles(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--background-opacity"), result));
+    });
+  }, [actionBarItems, hasBackgroundAlways, breadcrumbs, headerRef, metrics.breadcrumbRowHeight, metrics.headerHeight, navigation, scrollYValue, hasCollapseHeaderToggle, tags]);
+  (0, _react.useEffect)(function () {
+    // only has toggle if requested and has hasBackgroundAlways
+    // NOTE: prop-types isRequired.if for the expand and collapse
+    // icon descriptions depends on the this.
+    setHasCollapseButton(hasCollapseHeaderToggle && hasBackgroundAlways);
+  }, [hasBackgroundAlways, hasCollapseHeaderToggle]);
+  (0, _react.useEffect)(function () {
+    // Determine if space is needed in the breadcrumb for a collapse button
+    setSpaceForCollapseButton(hasCollapseButton && !(navigation || tags) && metrics.headerHeight);
+  }, [hasCollapseButton, navigation, tags, metrics.headerHeight]);
+
+  var nextToTabsCheck = function nextToTabsCheck() {
+    /* istanbul ignore next */
+    return disableBreadcrumbScroll && !actionBarItems && scrollYValue + metrics.headerTopValue >= 0;
+  };
+
+  (0, _react.useEffect)(function () {
+    if (typeof collapseHeader === 'boolean') {
+      (0, _PageHeaderUtils.utilSetCollapsed)(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
+    }
+  }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
+  (0, _reactResizeDetector.useResizeDetector)({
+    onResize: handleResizeActionBarColumn,
+    targetRef: sizingContainerRef,
+    handleWidth: true
+  });
+  (0, _reactResizeDetector.useResizeDetector)({
+    onResize: handleResize,
+    targetRef: headerRef,
+    handleHeight: true
+  }); // Determine what form of title to display in the breadcrumb
+
+  var breadcrumbItemForTitle = (0, _PageHeaderUtils.utilGetBreadcrumbItemForTitle)(_PageHeaderUtils.blockClass, collapseTitle, title);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
+    ref: offsetTopMeasuringRef
+  }), /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref5 = {}, (0, _defineProperty2.default)(_ref5, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref5, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref5)]),
+    style: pageHeaderStyles,
+    ref: headerRef
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, {
+    fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',
+    narrow: narrowGrid,
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "--width--xl"), fullWidthGrid === 'xl'))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_PageHeaderUtils.blockClass, "__non-navigation-row-content")
+  }, hasBreadcrumbRow ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && pageActions), _cx2))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--container")
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-column"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar))
+  }, breadcrumbs ? /*#__PURE__*/_react.default.createElement(_BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
+    className: "".concat(_PageHeaderUtils.blockClass, "__breadcrumb"),
+    noTrailingSlash: !!title,
+    overflowAriaLabel: breadcrumbOverflowAriaLabel,
+    breadcrumbs: breadcrumbs ? breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbs : null
+  }) : null), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref6)])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_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.default.createElement(_react.default.Fragment, null, thePageActions(true, pageActionsInBreadcrumbRow), /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
+    menuOptionsClass: (0, _classnames.default)(actionBarMenuOptionsClass, "".concat(_PageHeaderUtils.blockClass, "__action-bar-menu-options")),
+    overflowAriaLabel: actionBarOverflowAriaLabel,
+    actions: actionBarItems,
+    className: "".concat(_PageHeaderUtils.blockClass, "__action-bar"),
+    onWidthChange: handleActionBarWidthChange,
+    rightAlign: true
+  })) : null)))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__title-row"), (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow), _cx4))
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    className: "".concat(_PageHeaderUtils.blockClass, "__title-column")
+  }, title ? /*#__PURE__*/_react.default.createElement(_PageHeaderTitle.PageHeaderTitle, {
+    blockClass: _PageHeaderUtils.blockClass,
+    hasBreadcrumbRow: hasBreadcrumbRow,
+    title: title
+  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+    className: "".concat(_PageHeaderUtils.blockClass, "__subtitle-row")
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    className: "".concat(_PageHeaderUtils.blockClass, "__subtitle")
+  }, subtitle)) : null, children ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+    className: "".concat(_PageHeaderUtils.blockClass, "__available-row")
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    className: "".concat(_PageHeaderUtils.blockClass, "__available-column")
+  }, children)) : null, (breadcrumbs || actionBarItems || title || pageActions || children || subtitle) && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__last-row-buffer"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__last-row-buffer--active"), lastRowBufferActive)])
+  }), // this navigation row scrolls under the breadcrumb if there is one
+  tags && !navigation ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-tags"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
+  }, /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
+    overflowAlign: "start",
+    allTagsModalSearchLabel: allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
+    allTagsModalTitle: allTagsModalTitle,
+    showAllTagsLabel: showAllTagsLabel,
+    tags: tags,
+    overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
+  }))) : null), // this navigation pushes the breadcrumb off or settles underneath it depending on disableBreadcrumbScroll
+  navigation ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (_cx7 = {}, (0, _defineProperty2.default)(_cx7, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--spacing-above-06"), !!navigation), (0, _defineProperty2.default)(_cx7, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags), _cx7))
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    className: "".concat(_PageHeaderUtils.blockClass, "__navigation-tabs")
+  }, navigation), tags ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-tags"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
+  }, /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
+    overflowAlign: "end",
+    allTagsModalSearchLabel: allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
+    allTagsModalTitle: allTagsModalTitle,
+    showAllTagsLabel: showAllTagsLabel,
+    tags: tags,
+    overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed)),
+    hasIconOnly: true,
+    iconDescription:
+    /* istanbul ignore next */
+    fullyCollapsed ? expandHeaderIconDescription : collapseHeaderIconDescription,
+    kind: "ghost",
+    onClick: handleCollapseToggle,
+    renderIcon: _iconsReact.ChevronUp16,
+    size: "field",
+    tooltipPosition: "bottom",
+    tooltipAlignment: "end",
+    type: "button"
+  }) : null));
+
+  function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
+    if (pageActions) {
+      var _pageActions$content;
+
+      var _Tag = isBreadcrumbRow ? 'div' : _carbonComponentsReact.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.default.createElement(_Tag, {
+        className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__page-actions"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__page-actions-content"))
+      }, (_pageActions$content = pageActions.content) !== null && _pageActions$content !== void 0 ? _pageActions$content : /*#__PURE__*/_react.default.createElement(_ButtonSetWithOverflow.ButtonSetWithOverflow, {
+        classname: "".concat(_PageHeaderUtils.blockClass, "__button-set-with-overflow"),
+        menuOptionsClass: (0, _classnames.default)(pageActionsMenuOptionsClass, "".concat(_PageHeaderUtils.blockClass, "__button-set-menu-options")),
+        onWidthChange: handleWidthChange,
+        buttons: pageActions,
+        buttonSetOverflowLabel: pageActionsOverflowLabel,
+        rightAlign: true
+      })));
+    }
+  }
+}); // Return a placeholder if not released and not enabled by feature flag
+
+
+exports.PageHeader = PageHeader;
+exports.PageHeader = PageHeader = _settings.pkg.checkComponentEnabled(PageHeader, componentName); // copied from carbon-components-react/src/components/Tag/Tag.js for DocGen
+
+var 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'
+};
+var tagTypes = Object.keys(TYPES);
+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.
+   */
+  actionBarItems: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
+    iconDescription: _propTypes.default.string.isRequired,
+    onClick: _carbonComponentsReact.Button.propTypes.onClick,
+    renderIcon: _carbonComponentsReact.Button.propTypes.renderIcon.isRequired
+  }))),
+
+  /**
+   * class name applied to the action bar overflow options
+   */
+  actionBarMenuOptionsClass: _propTypes.default.string,
+
+  /**
+   * When there is insufficient space for all actionBarItems to be displayed this
+   * aria label is used for the action bar overflow menu
+   *
+   * NOTE: This prop is required if actionBarItems are supplied
+   */
+  actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref8) {
+    var actionBarItems = _ref8.actionBarItems;
+    return actionBarItems && actionBarItems.length > 0;
+  }),
+
+  /**
+   * 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: _TagSet.string_required_if_more_than_10_tags,
+
+  /**
+   * 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: _TagSet.string_required_if_more_than_10_tags,
+
+  /**
+   * 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: _TagSet.string_required_if_more_than_10_tags,
+
+  /**
+   * 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.
+   */
+  breadcrumbOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref9) {
+    var breadcrumbs = _ref9.breadcrumbs;
+    return breadcrumbs && breadcrumbs.length > 0;
+  }),
+
+  /**
+   * 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.
+   */
+  breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * Optional string representing the link location for the BreadcrumbItem
+     */
+    href: _propTypes.default.string,
+
+    /**
+     * Provide if this breadcrumb item represents the current page
+     */
+    isCurrentPage: _propTypes.default.bool,
+
+    /**
+     * Key required to render array efficiently
+     */
+    key: _propTypes.default.string.isRequired,
+
+    /**
+     * Pass in content that will be inside of the BreadcrumbItem
+     */
+    label: _propTypes.default.node,
+
+    /**
+     * A text version of the `label` for display, required if `label` is not a string.
+     */
+    title: _propTypes.default.string.isRequired.if(function (_ref10) {
+      var label = _ref10.label;
+      return typeof label !== 'string';
+    })
+  })),
+
+  /**
+   * A zone for placing high-level, client content above the page tabs.
+   * Accepts arbitrary renderable content as a React node. Optional.
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * Specifies class(es) to be applied to the top-level PageHeader node.
+   * Optional.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The header can as a whole be collapsed, expanded or somewhere in between.
+   * This setting controls the initial value, but also takes effect on change
+   *
+   * NOTE: The header is collapsed by setting the scroll position to hide part of the header.
+   * Collapsing has no effect if there is insufficient content to scroll.
+   */
+  collapseHeader: _propTypes.default.bool,
+
+  /**
+   * If `hasCollapseHeaderToggle` and `hasBackgroundAlways` are set then assistive text is required
+   * for both the expend and collapse states of the button component used.
+   */
+  collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref11) {
+    var hasBackgroundAlways = _ref11.hasBackgroundAlways,
+        hasCollapseHeaderToggle = _ref11.hasCollapseHeaderToggle;
+    return hasBackgroundAlways && hasCollapseHeaderToggle;
+  }),
+
+  /**
+   * The title row typically starts below the breadcrumb row. This option
+   * preCollapses it into the breadcrumb row.
+   */
+  collapseTitle: _propTypes.default.bool,
+
+  /**
+   * Standard behavior scrolls the breadcrumb off to leave just tabs. This
+   * option preserves vertical space for both the breadcrumb and tabs if they're supplied.
+   */
+  disableBreadcrumbScroll: _propTypes.default.bool,
+
+  /**
+   * If `hasCollapseHeaderToggle` and `hasBackgroundAlways` are set then assistive text is required
+   * for both the expend and collapse states of the button component used.
+   */
+  expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref12) {
+    var hasBackgroundAlways = _ref12.hasBackgroundAlways,
+        hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
+    return hasBackgroundAlways && hasCollapseHeaderToggle;
+  }),
+
+  /**
+   * 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.
+   */
+  fullWidthGrid: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOf(['xl'])]),
+
+  /**
+   * Specifies if the PageHeader should have a background always on and defaults to the preferred `true`.
+   * When false some parts of the header gain a background if they stick to the top of the PageHeader on scroll.
+   */
+  hasBackgroundAlways: _propTypes.default.bool,
+
+  /**
+   * 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.
+   */
+  hasCollapseHeaderToggle: _propTypes.default.bool,
+
+  /**
+   * The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid narrow prop
+   */
+  narrowGrid: _propTypes.default.bool,
+
+  /**
+   * Content for the navigation area in the PageHeader. Should
+   * be a React element that is normally a Carbon Tabs component. Optional.
+   */
+  navigation: _propTypes.default.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
+   */
+  pageActions: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+    key: _propTypes.default.string.isRequired,
+    kind: _carbonComponentsReact.Button.propTypes.kind,
+    label: _propTypes.default.node,
+    onClick: _propTypes.default.func
+  }))), _propTypes.default.shape({
+    /**
+     * minWidth should not be more than 180
+     * The content is expected to adjust itself to fit in
+     */
+    content: _propTypes.default.node.isRequired,
+    minWidth: _propTypes.default.number.isRequired,
+    maxWidth: _propTypes.default.number.isRequired
+  })]),
+
+  /**
+   * class name applied to the page actions overflow options
+   */
+  pageActionsMenuOptionsClass: _propTypes.default.string,
+
+  /**
+   * When there is insufficient space to display all of hte page actions inline a dropdown button menu is shown,
+   * containing the page actions. This label is used as the display content of the dropdown button menu.
+   *
+   * NOTE: This prop is required if pageActions are supplied
+   */
+  pageActionsOverflowLabel: _propTypes.default.node.isRequired.if(function (_ref13) {
+    var pageActions = _ref13.pageActions;
+    return pageActions && pageActions.length > 0 && !pageActions.content;
+  }),
+
+  /**
+   * 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: _TagSet.string_required_if_more_than_10_tags,
+
+  /**
+   * Sitting just below the title is this optional subtitle that provides additional context to
+   * identify the current page.
+   */
+  subtitle: _propTypes.default.string,
+
+  /**
+   * 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
+   */
+  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Tag.propTypes, 'filter')), {}, {
+    label: _propTypes.default.string.isRequired,
+    // we duplicate this prop to improve the DocGen
+    type: _propTypes.default.oneOf(tagTypes)
+  }))),
+
+  /**
+   * An optional page title supplied as a string or object with the following attributes: text, icon, loading
+   *
+   * Can be supplied either as:
+   * - String
+   * - Object containing
+   *    - text: title string
+   *    - icon: optional icon
+   *    - loading: boolean shows loading indicator if true
+   * - 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
+   */
+  title: _propTypes.default.oneOfType([_propTypes.default.shape({
+    // Update docgen if changed
+    text: _propTypes.default.string.isRequired,
+    icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    loading: _propTypes.default.bool // Update docgen if changed
+
+  }), _propTypes.default.string, _propTypes.default.shape({
+    content: _propTypes.default.node.isRequired,
+    breadcrumbContent: _propTypes.default.node,
+    asText: _propTypes.default.string.isRequired
+  })])
+};
+PageHeader.defaultProps = {
+  fullWidthGrid: false,
+  hasBackgroundAlways: true,
+  narrowGrid: false
+};
+PageHeader.displayName = componentName;