@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/lib/components/PageHeader/PageHeader.js

@@ -1,257 +1,210 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.deprecatedProps = 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 _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _react2 = require("@carbon/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 _icons = require("@carbon/react/icons");
-
 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", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"];
-
+var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"]; //
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var componentName = 'PageHeader';
 // Default values for props
 var defaults = {
   fullWidthGrid: false,
   narrowGrid: false
 };
-
 var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _withoutBackground, _enableBreadcrumbScro, _ref6, _cx2, _ref7, _cx4, _cx7;
-
+  var _withoutBackground, _enableBreadcrumbScro, _ref7, _cx2, _ref8, _cx4, _cx7;
   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,
-      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,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
+    actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
+    allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
+    allTagsModalTitle = _ref.allTagsModalTitle,
+    deprecated_hasBackgroundAlways = _ref.hasBackgroundAlways,
+    breadcrumbOverflowAriaLabel = _ref.breadcrumbOverflowAriaLabel,
+    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,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // handle deprecated props - START
   // if withoutBackground is nullish check deprecated_hasBackgroundAlways and default false
-  (_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true); // prefer enabled if nullish check deprecated_disableBreadcrumbScroll and default false
-
-  (_enableBreadcrumbScro = enableBreadcrumbScroll) !== null && _enableBreadcrumbScro !== void 0 ? _enableBreadcrumbScro : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== void 0 ? deprecated_disableBreadcrumbScroll : true); // handle deprecated props - END
+  (_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true);
+  // prefer enabled if nullish check deprecated_disableBreadcrumbScroll and default false
+  (_enableBreadcrumbScro = enableBreadcrumbScroll) !== null && _enableBreadcrumbScro !== void 0 ? _enableBreadcrumbScro : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== void 0 ? deprecated_disableBreadcrumbScroll : true);
+  // handle deprecated props - END
 
   var _useState = (0, _react.useState)({}),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      metrics = _useState2[0],
-      setMetrics = _useState2[1];
-
+    _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
-
+    _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); // state based on props only
+  var offsetTopMeasuringRef = (0, _react.useRef)(null);
 
+  // state based on props only
   var hasActionBar = actionBarItems && actionBarItems.length > 0;
-  var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems; // utility functions
+  var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
 
+  // utility functions
   var checkUpdateVerticalSpace = function checkUpdateVerticalSpace() {
     return (0, _PageHeaderUtils.utilCheckUpdateVerticalSpace)(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, 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; // state based on scroll/resize based effects
+  // 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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+    fullyCollapsed = _useState24[0],
+    setFullyCollapsed = _useState24[1];
   var _useState25 = (0, _react.useState)(false),
-      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-      widthIsNarrow = _useState26[0],
-      setWidthIsNarrow = _useState26[1]; // handlers
-
+    _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+    widthIsNarrow = _useState26[0],
+    setWidthIsNarrow = _useState26[1];
 
+  // handlers
   var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
     var minWidth = _ref2.minWidth,
-        maxWidth = _ref2.maxWidth;
-
+      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;
-
+      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) {
+  /* istanbul ignore next */
+  var handleResizeActionBarColumn = function handleResizeActionBarColumn(_ref4) {
+    var width = _ref4.width;
     /* don't know how to test resize */
-
     /* istanbul ignore next */
     setActionBarColumnWidth(width);
   };
-  /* istanbul ignore next */
-
 
+  /* 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
-
+  };
 
+  // use effects
   (0, _react.useEffect)(function () {
     /* istanbul ignore else */
     if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
       var minWidth = pageActions.minWidth,
-          maxWidth = pageActions.maxWidth;
+        maxWidth = pageActions.maxWidth;
       handlePageActionWidthChange({
         minWidth: minWidth,
         maxWidth: maxWidth
@@ -260,7 +213,6 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [pageActions]);
   (0, _react.useEffect)(function () {
     // Determine the location of the pageAction buttons
-
     /* istanbul ignore next */
     setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > metrics.titleRowSpaceAbove || widthIsNarrow && scrollYValue > metrics.pageActionsSpaceAbove);
   }, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
@@ -270,17 +222,15 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     //
     var newActionBarWidth = 'initial';
     var newPageActionInBreadcrumbWidth = 'initial';
-    /* don't know how to test resize */
 
+    /* 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 {
@@ -289,69 +239,64 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         }
       }
     }
-
     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, enableBreadcrumbScroll, 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
+  (0, _hooks.useNearestScroll)(headerRef,
+  // on scroll or various layout changes check updates if needed
   // istanbul ignore next
-  function (_ref4) {
-    var current = _ref4.current;
+  function (_ref5) {
+    var current = _ref5.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
+    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 */
 
+    /* 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, enableBreadcrumbScroll]);
-  (0, _hooks.useWindowResize)(function (_ref5) {
-    var current = _ref5.current;
+  (0, _hooks.useWindowResize)(function (_ref6) {
+    var current = _ref6.current;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
-    setWidthIsNarrow(current.innerWidth < _layout.breakpoints.md.width); // small (below medium) media query
+    setWidthIsNarrow(current.innerWidth / 16 < parseInt(_layout.breakpoints.md.width)); // small (below medium) media query
   }, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
   (0, _react.useEffect)(function () {
-    checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    checkUpdateVerticalSpace();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fullWidthGrid, narrowGrid]);
   (0, _react.useEffect)(function () {
     // 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.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
       var startAddingAt = parseFloat(_layout.spacing10, 10) * parseInt(_layout.baseFontSize);
       var scrollRemaining = metrics.headerHeight - scrollYValue;
-      /* don't know how to test resize */
 
+      /* 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));
     });
@@ -366,34 +311,29 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     // 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 enableBreadcrumbScroll && !actionBarItems && scrollYValue + metrics.headerTopValue >= 0;
   };
-
   (0, _react.useEffect)(function () {
-    if (typeof collapseHeader === 'boolean') {
+    if (collapseHeader === true) {
       (0, _PageHeaderUtils.utilSetCollapsed)(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
     }
   }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResizeActionBarColumn,
-    targetRef: sizingContainerRef,
-    handleWidth: true
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
+    callback: handleResizeActionBarColumn
+  });
+  (0, _useResizeObserver.useResizeObserver)(headerRef, {
+    callback: handleResize
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: headerRef,
-    handleHeight: true
-  }); // Determine what form of title to display in the breadcrumb
 
+  // 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, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref6)]),
+    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
     style: pageHeaderStyles,
     ref: headerRef
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_react2.FlexGrid, {
@@ -413,9 +353,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     noTrailingSlash: !!title,
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
-
   }) : null), /*#__PURE__*/_react.default.createElement(_react2.Column, {
-    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref7)])
+    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref8 = {}, (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__action-bar-column-content"),
     ref: sizingContainerRef
@@ -447,7 +386,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     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
+  }),
+  // this navigation row scrolls under the breadcrumb if there is one
   tags && !navigation ? /*#__PURE__*/_react.default.createElement(_react2.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(_react2.Column, {
@@ -460,7 +400,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     showAllTagsLabel: showAllTagsLabel,
     tags: tags,
     overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
-  }))) : null), // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
+  }))) : null),
+  // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
   navigation ? /*#__PURE__*/_react.default.createElement(_react2.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(_react2.Column, {
@@ -475,11 +416,11 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     showAllTagsLabel: showAllTagsLabel,
     tags: tags,
     overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
-  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed)),
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed))
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     hasIconOnly: true,
-    iconDescription:
-    /* istanbul ignore next */
+    iconDescription: /* istanbul ignore next */
     fullyCollapsed ? expandHeaderIconDescription : collapseHeaderIconDescription,
     kind: "ghost",
     onClick: handleCollapseToggle,
@@ -492,16 +433,13 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     type: "button"
-  }) : null));
-
+  })) : null));
   function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
     if (pageActions) {
       var _pageActions$content;
-
-      var _Tag = isBreadcrumbRow ? 'div' : _react2.Column; // Only report size change of version action bar is rendered as part of the breadcrumb row.
+      var _Tag = isBreadcrumbRow ? 'div' : _react2.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))
@@ -513,16 +451,17 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         onWidthChange: handleWidthChange,
         buttons: pageActions,
         buttonSetOverflowLabel: pageActionsOverflowLabel,
-        rightAlign: true
+        rightAlign: !widthIsNarrow
       })));
     }
   }
-}); // Return a placeholder if not released and not enabled by feature flag
-
+});
 
+// 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
+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',
@@ -543,7 +482,6 @@ var deprecatedProps = {
    * **Deprecated** see property `enableBreadcrumbScroll`
    */
   disableBreadcrumbScroll: (0, _propsHelper.deprecateProp)(_propTypes.default.bool, 'Property replaced by `enableBreadcrumbScroll`'),
-
   /**
    * **Deprecated** see property `withoutBackground`
    */
@@ -562,23 +500,20 @@ PageHeader.propTypes = _objectSpread({
     onClick: _react2.Button.propTypes.onClick,
     renderIcon: _react2.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 (_ref9) {
-    var actionBarItems = _ref9.actionBarItems;
+  actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref10) {
+    var actionBarItems = _ref10.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
@@ -587,7 +522,6 @@ PageHeader.propTypes = _objectSpread({
    * **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
@@ -596,7 +530,6 @@ PageHeader.propTypes = _objectSpread({
    * **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
@@ -605,16 +538,14 @@ PageHeader.propTypes = _objectSpread({
    * **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 (_ref10) {
-    var breadcrumbs = _ref10.breadcrumbs;
+  breadcrumbOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref11) {
+    var breadcrumbs = _ref11.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
@@ -631,43 +562,36 @@ PageHeader.propTypes = _objectSpread({
      * 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 (_ref11) {
-      var label = _ref11.label;
+    title: _propTypes.default.string.isRequired.if(function (_ref12) {
+      var label = _ref12.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
@@ -676,45 +600,39 @@ PageHeader.propTypes = _objectSpread({
    * Collapsing has no effect if there is insufficient content to scroll.
    */
   collapseHeader: _propTypes.default.bool,
-
   /**
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
-  collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref12) {
-    var withoutBackground = _ref12.withoutBackground,
-        hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
+  collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref13) {
+    var withoutBackground = _ref13.withoutBackground,
+      hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
-
   /**
    * The title row typically starts below the breadcrumb row. This option
    * preCollapses it into the breadcrumb row.
    */
   collapseTitle: _propTypes.default.bool,
-
   /**
    * Standard keeps the breadcrumb on the page. This option allows the breadcrumb
    * to scroll off
    */
   enableBreadcrumbScroll: _propTypes.default.bool,
-
   /**
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
-  expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref13) {
-    var withoutBackground = _ref13.withoutBackground,
-        hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
+  expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref14) {
+    var withoutBackground = _ref14.withoutBackground,
+      hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
     return !withoutBackground && 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'])]),
-
   /**
    * Adds a button as the last element of the bottom row which collapses and expands the header.
    *
@@ -722,19 +640,16 @@ PageHeader.propTypes = _objectSpread({
    * 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.
    *
@@ -764,23 +679,20 @@ PageHeader.propTypes = _objectSpread({
     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 (_ref14) {
-    var pageActions = _ref14.pageActions;
+  pageActionsOverflowLabel: _propTypes.default.node.isRequired.if(function (_ref15) {
+    var pageActions = _ref15.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
@@ -789,13 +701,11 @@ PageHeader.propTypes = _objectSpread({
    * **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.
    *
@@ -813,7 +723,6 @@ PageHeader.propTypes = _objectSpread({
     // 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
    *
@@ -840,22 +749,23 @@ PageHeader.propTypes = _objectSpread({
     loading: _propTypes.default.bool,
     // inline edit version properties
     editableLabel: _propTypes.default.string,
-    // .isRequired.if(inlineEditRequired),
+    // .isRequired.if(editInPlaceRequired),
     id: _propTypes.default.string,
-    // .isRequired.if(inlineEditRequired),
+    // .isRequired.if(editInPlaceRequired),
+    onCancel: _propTypes.default.func,
     onChange: _propTypes.default.func,
     onSave: _propTypes.default.func,
     cancelDescription: _propTypes.default.string,
-    //.isRequired.if(inlineEditRequired),
-    saveDescription: _propTypes.default.string //.isRequired.if(inlineEditRequired),
+    //.isRequired.if(editInPlaceRequired),
+    editDescription: _propTypes.default.string,
+    // .isRequired.if(editInPlaceRequired),
+    saveDescription: _propTypes.default.string //.isRequired.if(editInPlaceRequired),
     // Update docgen if changed
-
   }), _propTypes.default.string, _propTypes.default.shape({
     content: _propTypes.default.node.isRequired,
     breadcrumbContent: _propTypes.default.node,
     asText: _propTypes.default.string.isRequired
   })]),
-
   /**
    * Specifies if the PageHeader should appear without a background color, and defaults to the preferred `false` (a background color is shown).
    * Note that when `true` some parts of the header still gain a background if and when they stick to the top of the PageHeader on scroll.