@carbon/ibm-products 2.50.0 → 2.51.0

package/lib/components/PageHeader/PageHeader.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
 var React = require('react');
@@ -29,11 +27,6 @@ var BreadcrumbWithOverflow = require('../BreadcrumbWithOverflow/BreadcrumbWithOv
 var ActionBar = require('../ActionBar/ActionBar.js');
 var ButtonSetWithOverflow = require('../ButtonSetWithOverflow/ButtonSetWithOverflow.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 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", "breadcrumbOverflowTooltipAlign"];
 var componentName = 'PageHeader';
 settings.pkg._silenceWarnings(true);
@@ -45,7 +38,7 @@ var defaults = {
   narrowGrid: false,
   breadcrumbOverflowTooltipAlign: 'right'
 };
-exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _withoutBackground, _enableBreadcrumbScro;
   var actionBarItems = _ref.actionBarItems,
     actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
@@ -369,73 +362,73 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   };
   var displayedBreadcrumbs = getBreadcrumbs();
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
-  }), /*#__PURE__*/React__default["default"].createElement("section", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"]([PageHeaderUtils.blockClass, "".concat(PageHeaderUtils.blockClass, "--no-margins-below-row"), className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), "".concat(PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags)]),
+  }), /*#__PURE__*/React.createElement("section", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx([PageHeaderUtils.blockClass, "".concat(PageHeaderUtils.blockClass, "--no-margins-below-row"), className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), "".concat(PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags)]),
     style: pageHeaderStyles,
     ref: headerRef
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.FlexGrid, {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.FlexGrid, {
     fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',
     narrow: narrowGrid,
-    className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "--width--xl"), fullWidthGrid === 'xl'))
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cx(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "--width--xl"), fullWidthGrid === 'xl'))
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PageHeaderUtils.blockClass, "__non-navigation-row-content")
-  }, hasBreadcrumbRow ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
-    className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__breadcrumb-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), "".concat(PageHeaderUtils.blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions))
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, hasBreadcrumbRow ? /*#__PURE__*/React.createElement(react.Row, {
+    className: cx("".concat(PageHeaderUtils.blockClass, "__breadcrumb-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), "".concat(PageHeaderUtils.blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions))
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PageHeaderUtils.blockClass, "__breadcrumb-row--container")
-  }, /*#__PURE__*/React__default["default"].createElement(react.Column, {
-    className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__breadcrumb-column"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar || widthIsNarrow))
-  }, (breadcrumbs || breadcrumbItemForTitle) && /*#__PURE__*/React__default["default"].createElement(BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
+  }, /*#__PURE__*/React.createElement(react.Column, {
+    className: cx("".concat(PageHeaderUtils.blockClass, "__breadcrumb-column"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar || widthIsNarrow))
+  }, (breadcrumbs || breadcrumbItemForTitle) && /*#__PURE__*/React.createElement(BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
     className: "".concat(PageHeaderUtils.blockClass, "__breadcrumb"),
     noTrailingSlash: !!title,
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: displayedBreadcrumbs,
     overflowTooltipAlign: breadcrumbOverflowTooltipAlign,
     maxVisible: undefined
-  })), /*#__PURE__*/React__default["default"].createElement(react.Column, {
-    className: cx__default["default"](["".concat(PageHeaderUtils.blockClass, "__action-bar-column ").concat(PageHeaderUtils.blockClass, "__action-bar-column--background"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement(react.Column, {
+    className: cx(["".concat(PageHeaderUtils.blockClass, "__action-bar-column ").concat(PageHeaderUtils.blockClass, "__action-bar-column--background"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
+  }, /*#__PURE__*/React.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["default"].createElement(React__default["default"].Fragment, null, thePageActions(true, pageActionsInBreadcrumbRow), /*#__PURE__*/React__default["default"].createElement(ActionBar.ActionBar, {
+  React.createElement(React.Fragment, null, thePageActions(true, pageActionsInBreadcrumbRow), /*#__PURE__*/React.createElement(ActionBar.ActionBar, {
     actions: actionBarItems,
     className: "".concat(PageHeaderUtils.blockClass, "__action-bar"),
-    menuOptionsClass: "".concat(cx__default["default"](actionBarMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__action-bar-menu-options"))),
+    menuOptionsClass: "".concat(cx(actionBarMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__action-bar-menu-options"))),
     onWidthChange: handleActionBarWidthChange,
     overflowAriaLabel: actionBarOverflowAriaLabel,
     overflowMenuRef: overflowMenuRef,
     rightAlign: true
-  })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
-    className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__title-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
-  }, /*#__PURE__*/React__default["default"].createElement(react.Column, {
+  })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React.createElement(react.Row, {
+    className: cx("".concat(PageHeaderUtils.blockClass, "__title-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
+  }, /*#__PURE__*/React.createElement(react.Column, {
     className: "".concat(PageHeaderUtils.blockClass, "__title-column")
-  }, title ? /*#__PURE__*/React__default["default"].createElement(PageHeaderTitle.PageHeaderTitle, {
+  }, title ? /*#__PURE__*/React.createElement(PageHeaderTitle.PageHeaderTitle, {
     blockClass: PageHeaderUtils.blockClass,
     hasBreadcrumbRow: hasBreadcrumbRow,
     title: title
-  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
+  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/React.createElement(react.Row, {
     className: "".concat(PageHeaderUtils.blockClass, "__subtitle-row")
-  }, /*#__PURE__*/React__default["default"].createElement(react.Column, {
+  }, /*#__PURE__*/React.createElement(react.Column, {
     className: "".concat(PageHeaderUtils.blockClass, "__subtitle")
-  }, subtitle)) : null, children ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
+  }, subtitle)) : null, children ? /*#__PURE__*/React.createElement(react.Row, {
     className: "".concat(PageHeaderUtils.blockClass, "__available-row")
-  }, /*#__PURE__*/React__default["default"].createElement(react.Column, {
+  }, /*#__PURE__*/React.createElement(react.Column, {
     className: "".concat(PageHeaderUtils.blockClass, "__available-column")
-  }, children)) : null, (breadcrumbs || actionBarItems || title || pageActions || children || subtitle) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](["".concat(PageHeaderUtils.blockClass, "__last-row-buffer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__last-row-buffer--active"), lastRowBufferActive)])
+  }, children)) : null, (breadcrumbs || actionBarItems || title || pageActions || children || subtitle) && /*#__PURE__*/React.createElement("div", {
+    className: cx(["".concat(PageHeaderUtils.blockClass, "__last-row-buffer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__last-row-buffer--active"), lastRowBufferActive)])
   }),
   // this navigation row scrolls under the breadcrumb if there is one
-  tags && !navigation ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
-    className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__navigation-row"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
-  }, /*#__PURE__*/React__default["default"].createElement(react.Column, {
-    className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__navigation-tags"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
-  }, /*#__PURE__*/React__default["default"].createElement(TagSet.TagSet, {
+  tags && !navigation ? /*#__PURE__*/React.createElement(react.Row, {
+    className: cx("".concat(PageHeaderUtils.blockClass, "__navigation-row"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
+  }, /*#__PURE__*/React.createElement(react.Column, {
+    className: cx("".concat(PageHeaderUtils.blockClass, "__navigation-tags"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
+  }, /*#__PURE__*/React.createElement(TagSet.TagSet, {
     overflowAlign: "bottom-right",
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
@@ -445,13 +438,13 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     showAllTagsLabel: showAllTagsLabel || ''
   }))) : null),
   // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
-  navigation ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
-    className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__navigation-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-row--spacing-above-06"), !!navigation), "".concat(PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
-  }, /*#__PURE__*/React__default["default"].createElement(react.Column, {
+  navigation ? /*#__PURE__*/React.createElement(react.Row, {
+    className: cx("".concat(PageHeaderUtils.blockClass, "__navigation-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-row--spacing-above-06"), !!navigation), "".concat(PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
+  }, /*#__PURE__*/React.createElement(react.Column, {
     className: "".concat(PageHeaderUtils.blockClass, "__navigation-tabs")
-  }, navigation), tags ? /*#__PURE__*/React__default["default"].createElement(react.Column, {
-    className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__navigation-tags"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
-  }, /*#__PURE__*/React__default["default"].createElement(TagSet.TagSet, {
+  }, navigation), tags ? /*#__PURE__*/React.createElement(react.Column, {
+    className: cx("".concat(PageHeaderUtils.blockClass, "__navigation-tags"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
+  }, /*#__PURE__*/React.createElement(TagSet.TagSet, {
     overflowAlign: "bottom-right",
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
@@ -459,16 +452,16 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     showAllTagsLabel: showAllTagsLabel || '',
     tags: tags,
     overflowClassName: "".concat(PageHeaderUtils.blockClass, "__navigation-tags-overflow")
-  })) : null) : null), hasCollapseButton ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__collapse-expand-toggle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed))
-  }, /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(PageHeaderUtils.blockClass, "__collapse-expand-toggle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed))
+  }, /*#__PURE__*/React.createElement(react.Button, {
     hasIconOnly: true,
     iconDescription: /* istanbul ignore next */
     fullyCollapsed ? expandHeaderIconDescription : collapseHeaderIconDescription,
     kind: "ghost",
     onClick: handleCollapseToggle,
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default["default"].createElement(icons.ChevronUp, _rollupPluginBabelHelpers["extends"]({
+      return /*#__PURE__*/React.createElement(icons.ChevronUp, _rollupPluginBabelHelpers.extends({
         size: 16
       }, props));
     },
@@ -484,13 +477,13 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
       // 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["default"].createElement(_Tag, {
-        className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__page-actions"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: cx__default["default"]("".concat(PageHeaderUtils.blockClass, "__page-actions-content"))
-      }, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React__default["default"].createElement(ButtonSetWithOverflow.ButtonSetWithOverflow, {
+      return /*#__PURE__*/React.createElement(_Tag, {
+        className: cx("".concat(PageHeaderUtils.blockClass, "__page-actions"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cx("".concat(PageHeaderUtils.blockClass, "__page-actions-content"))
+      }, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React.createElement(ButtonSetWithOverflow.ButtonSetWithOverflow, {
         className: "".concat(PageHeaderUtils.blockClass, "__button-set-with-overflow"),
-        menuOptionsClass: cx__default["default"](pageActionsMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__button-set-menu-options")),
+        menuOptionsClass: cx(pageActionsMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__button-set-menu-options")),
         onWidthChange: handleWidthChange,
         buttons: pageActions,
         buttonSetOverflowLabel: pageActionsOverflowLabel,
@@ -523,11 +516,11 @@ var deprecatedProps = {
   /**
    * **Deprecated** see property `enableBreadcrumbScroll`
    */
-  disableBreadcrumbScroll: propsHelper.deprecateProp(index["default"].bool, 'Property replaced by `enableBreadcrumbScroll`'),
+  disableBreadcrumbScroll: propsHelper.deprecateProp(index.default.bool, 'Property replaced by `enableBreadcrumbScroll`'),
   /**
    * **Deprecated** see property `withoutBackground`
    */
-  hasBackgroundAlways: propsHelper.deprecateProp(index["default"].bool, 'Property replaced by `withoutBackground`')
+  hasBackgroundAlways: propsHelper.deprecateProp(index.default.bool, 'Property replaced by `withoutBackground`')
 };
 
 /**@ts-ignore */
@@ -539,15 +532,15 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Button kind, size, tooltipPosition, tooltipAlignment and type are ignored.
    */
   /**@ts-ignore */
-  actionBarItems: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
-    iconDescription: index["default"].string.isRequired,
+  actionBarItems: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
+    iconDescription: index.default.string.isRequired,
     onClick: react.Button.propTypes.onClick,
     renderIcon: react.Button.propTypes.renderIcon.isRequired
   }))),
   /**
    * class name applied to the action bar overflow options
    */
-  actionBarMenuOptionsClass: index["default"].string,
+  actionBarMenuOptionsClass: index.default.string,
   /**
    * When there is insufficient space for all actionBarItems to be displayed this
    * aria label is used for the action bar overflow menu
@@ -555,7 +548,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * NOTE: This prop is required if actionBarItems are supplied
    */
   /**@ts-ignore */
-  actionBarOverflowAriaLabel: index["default"].string.isRequired.if(function (_ref11) {
+  actionBarOverflowAriaLabel: index.default.string.isRequired.if(function (_ref11) {
     var actionBarItems = _ref11.actionBarItems;
     return actionBarItems && actionBarItems.length > 0;
   }),
@@ -588,7 +581,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
    */
   /**@ts-ignore */
-  breadcrumbOverflowAriaLabel: index["default"].string.isRequired.if(function (_ref12) {
+  breadcrumbOverflowAriaLabel: index.default.string.isRequired.if(function (_ref12) {
     var breadcrumbs = _ref12.breadcrumbs;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
@@ -608,28 +601,28 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * HTML attributes.
    */
   /**@ts-ignore */
-  breadcrumbs: index["default"].arrayOf(index["default"].shape({
+  breadcrumbs: index.default.arrayOf(index.default.shape({
     /**
      * Optional string representing the link location for the BreadcrumbItem
      */
-    href: index["default"].string,
+    href: index.default.string,
     /**
      * Provide if this breadcrumb item represents the current page
      */
-    isCurrentPage: index["default"].bool,
+    isCurrentPage: index.default.bool,
     /**
      * Key required to render array efficiently
      */
-    key: index["default"].string.isRequired,
+    key: index.default.string.isRequired,
     /**
      * Pass in content that will be inside of the BreadcrumbItem
      */
-    label: index["default"].node,
+    label: index.default.node,
     /**
      * A text version of the `label` for display, required if `label` is not a string.
      */
     /**@ts-ignore */
-    title: index["default"].string.isRequired.if(function (_ref13) {
+    title: index.default.string.isRequired.if(function (_ref13) {
       var label = _ref13.label;
       return typeof label !== 'string';
     })
@@ -638,12 +631,12 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * A zone for placing high-level, client content above the page tabs.
    * Accepts arbitrary renderable content as a React node. Optional.
    */
-  children: index["default"].node,
+  children: index.default.node,
   /**
    * Specifies class(es) to be applied to the top-level PageHeader node.
    * Optional.
    */
-  className: index["default"].string,
+  className: index.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
@@ -651,13 +644,13 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * 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: index["default"].bool,
+  collapseHeader: index.default.bool,
   /**
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
   /**@ts-ignore */
-  collapseHeaderIconDescription: index["default"].string.isRequired.if(function (_ref14) {
+  collapseHeaderIconDescription: index.default.string.isRequired.if(function (_ref14) {
     var withoutBackground = _ref14.withoutBackground,
       hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
@@ -666,18 +659,18 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * The title row typically starts below the breadcrumb row. This option
    * preCollapses it into the breadcrumb row.
    */
-  collapseTitle: index["default"].bool,
+  collapseTitle: index.default.bool,
   /**
    * Standard keeps the breadcrumb on the page. This option allows the breadcrumb
    * to scroll off
    */
-  enableBreadcrumbScroll: index["default"].bool,
+  enableBreadcrumbScroll: index.default.bool,
   /**
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
   /**@ts-ignore */
-  expandHeaderIconDescription: index["default"].string.isRequired.if(function (_ref15) {
+  expandHeaderIconDescription: index.default.string.isRequired.if(function (_ref15) {
     var withoutBackground = _ref15.withoutBackground,
       hasCollapseHeaderToggle = _ref15.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
@@ -687,7 +680,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * 'xl' is used to override the grid width setting. Can be used with narrowGrid: true to get the largest size.
    */
   /**@ts-ignore */
-  fullWidthGrid: index["default"].oneOfType([index["default"].bool, index["default"].oneOf(['xl'])]),
+  fullWidthGrid: index.default.oneOfType([index.default.bool, index.default.oneOf(['xl'])]),
   /**
    * Adds a button as the last element of the bottom row which collapses and expands the header.
    *
@@ -695,16 +688,16 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Collapsing has no effect if there is insufficient content to scroll.
    */
   /**@ts-ignore */
-  hasCollapseHeaderToggle: index["default"].bool,
+  hasCollapseHeaderToggle: index.default.bool,
   /**
    * The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid narrow prop
    */
-  narrowGrid: index["default"].bool,
+  narrowGrid: index.default.bool,
   /**
    * Content for the navigation area in the PageHeader. Should
    * be a React element that is normally a Carbon Tabs component. Optional.
    */
-  navigation: index["default"].element,
+  navigation: index.default.element,
   // Supports Tabs
   /**
    * Specifies the primary page actions which are placed at the same level in the page as the title.
@@ -722,24 +715,24 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   /**@ts-ignore */
-  pageActions: index["default"].oneOfType([index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
-    key: index["default"].string.isRequired,
+  pageActions: index.default.oneOfType([index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+    key: index.default.string.isRequired,
     kind: react.Button.propTypes.kind,
-    label: index["default"].node,
-    onClick: index["default"].func
-  }))), index["default"].shape({
+    label: index.default.node,
+    onClick: index.default.func
+  }))), index.default.shape({
     /**
      * minWidth should not be more than 180
      * The content is expected to adjust itself to fit in
      */
-    content: index["default"].node.isRequired,
-    minWidth: index["default"].number.isRequired,
-    maxWidth: index["default"].number.isRequired
+    content: index.default.node.isRequired,
+    minWidth: index.default.number.isRequired,
+    maxWidth: index.default.number.isRequired
   })]),
   /**
    * class name applied to the page actions overflow options
    */
-  pageActionsMenuOptionsClass: index["default"].string,
+  pageActionsMenuOptionsClass: index.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.
@@ -747,7 +740,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * NOTE: This prop is required if pageActions are supplied
    */
   /**@ts-ignore */
-  pageActionsOverflowLabel: index["default"].node.isRequired.if(function (_ref16) {
+  pageActionsOverflowLabel: index.default.node.isRequired.if(function (_ref16) {
     var pageActions = _ref16.pageActions;
     return pageActions && pageActions.length > 0 && !pageActions.content;
   }),
@@ -763,7 +756,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Sitting just below the title is this optional subtitle that provides additional context to
    * identify the current page.
    */
-  subtitle: index["default"].node,
+  subtitle: index.default.node,
   /**
    * An array of tags to be shown as the final content in the PageHeader.
    *
@@ -777,10 +770,10 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
   /**@ts-ignore */
-  tags: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Tag.propTypes, 'filter')), {}, {
-    label: index["default"].string.isRequired,
+  tags: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Tag.propTypes, 'filter')), {}, {
+    label: index.default.string.isRequired,
     // we duplicate this prop to improve the DocGen
-    type: index["default"].oneOf(tagTypes)
+    type: index.default.oneOf(tagTypes)
   }))),
   /**
    * An optional page title supplied as a string or object with the following attributes: text, icon, loading
@@ -803,37 +796,37 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *    - asText: String based representation of the title
    */
   /**@ts-ignore */
-  title: index["default"].oneOfType([index["default"].shape({
+  title: index.default.oneOfType([index.default.shape({
     // Update docgen if changed
-    text: index["default"].string.isRequired,
-    shortTitle: index["default"].string,
-    icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
-    loading: index["default"].bool,
+    text: index.default.string.isRequired,
+    shortTitle: index.default.string,
+    icon: index.default.oneOfType([index.default.func, index.default.object]),
+    loading: index.default.bool,
     // inline edit version properties
-    editableLabel: index["default"].string,
+    editableLabel: index.default.string,
     // .isRequired.if(editInPlaceRequired),
-    id: index["default"].string,
+    id: index.default.string,
     // .isRequired.if(editInPlaceRequired),
-    onCancel: index["default"].func,
-    onChange: index["default"].func,
-    onSave: index["default"].func,
-    cancelDescription: index["default"].string,
+    onCancel: index.default.func,
+    onChange: index.default.func,
+    onSave: index.default.func,
+    cancelDescription: index.default.string,
     //.isRequired.if(editInPlaceRequired),
-    editDescription: index["default"].string,
+    editDescription: index.default.string,
     // .isRequired.if(editInPlaceRequired),
-    saveDescription: index["default"].string //.isRequired.if(editInPlaceRequired),
+    saveDescription: index.default.string //.isRequired.if(editInPlaceRequired),
     // Update docgen if changed
-  }), index["default"].string, index["default"].shape({
-    content: index["default"].node.isRequired,
-    breadcrumbContent: index["default"].node,
-    asText: index["default"].string.isRequired
+  }), index.default.string, index.default.shape({
+    content: index.default.node.isRequired,
+    breadcrumbContent: index.default.node,
+    asText: index.default.string.isRequired
   })]),
   /**
    * Specifies if the PageHeader should appear without a background color, and defaults to the preferred `false` (a background color is shown).
    * Note that when `true` some parts of the header still gain a background if and when they stick to the top of the PageHeader on scroll.
    */
   /**@ts-ignore */
-  withoutBackground: index["default"].bool
+  withoutBackground: index.default.bool
 }, deprecatedProps);
 exports.PageHeader.displayName = componentName;
 

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
@@ -16,11 +14,6 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var EditInPlace = require('../EditInPlace/EditInPlace.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription"];
 
 /**
@@ -56,11 +49,11 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       asText = title;
     }
     var TitleIcon = icon;
-    titleInnards = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, icon && !loading ? /*#__PURE__*/React__default["default"].createElement(TitleIcon, {
+    titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement(TitleIcon, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, loading ? /*#__PURE__*/React__default["default"].createElement(react.SkeletonText, {
+    }) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
-    }) : isEditable ? /*#__PURE__*/React__default["default"].createElement(EditInPlace.EditInPlace, _rollupPluginBabelHelpers["extends"]({
+    }) : isEditable ? /*#__PURE__*/React.createElement(EditInPlace.EditInPlace, _rollupPluginBabelHelpers.extends({
       tooltipAlignment: "bottom",
       value: text,
       cancelLabel: cancelDescription,
@@ -71,15 +64,15 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave: onSave,
       size: "md",
       inheritTypography: true
-    }, rest)) : /*#__PURE__*/React__default["default"].createElement("span", {
+    }, rest)) : /*#__PURE__*/React.createElement("span", {
       title: !loading ? asText : null
     }, text));
   } else {
     titleInnards = content;
     titleText = asText;
   }
-  return /*#__PURE__*/React__default["default"].createElement("h1", {
-    className: cx__default["default"]("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
+  return /*#__PURE__*/React.createElement("h1", {
+    className: cx("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
     title: titleText
   }, titleInnards);
 };
@@ -89,11 +82,11 @@ var editInPlaceRequired = function editInPlaceRequired(_ref2) {
 };
 PageHeaderTitle.propTypes = {
   // passed from page header
-  blockClass: index["default"].string.isRequired,
+  blockClass: index.default.string.isRequired,
   /**
    * controlled from within page header
    */
-  hasBreadcrumbRow: index["default"].bool,
+  hasBreadcrumbRow: index.default.bool,
   /**
    * An optional page title supplied as a string or object with the following attributes: text, icon, loading
    *
@@ -114,24 +107,24 @@ PageHeaderTitle.propTypes = {
    *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
    *    - asText: String based representation of the title
    */
-  title: index["default"].oneOfType([index["default"].shape({
+  title: index.default.oneOfType([index.default.shape({
     // Update docgen if changed
-    text: index["default"].string.isRequired,
-    icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
-    loading: index["default"].bool,
+    text: index.default.string.isRequired,
+    icon: index.default.oneOfType([index.default.func, index.default.object]),
+    loading: index.default.bool,
     // inline edit version properties
-    editDescription: index["default"].string.isRequired.if(editInPlaceRequired),
-    editableLabel: index["default"].string.isRequired.if(editInPlaceRequired),
-    id: index["default"].string.isRequired.if(editInPlaceRequired),
-    onChange: index["default"].func,
-    onSave: index["default"].func,
-    cancelDescription: index["default"].string.isRequired.if(editInPlaceRequired),
-    saveDescription: index["default"].string.isRequired.if(editInPlaceRequired)
+    editDescription: index.default.string.isRequired.if(editInPlaceRequired),
+    editableLabel: index.default.string.isRequired.if(editInPlaceRequired),
+    id: index.default.string.isRequired.if(editInPlaceRequired),
+    onChange: index.default.func,
+    onSave: index.default.func,
+    cancelDescription: index.default.string.isRequired.if(editInPlaceRequired),
+    saveDescription: index.default.string.isRequired.if(editInPlaceRequired)
     // Update docgen if changed
-  }), index["default"].string, index["default"].shape({
-    content: index["default"].node.isRequired,
-    breadcrumbContent: index["default"].node,
-    asText: index["default"].string.isRequired
+  }), index.default.string, index.default.shape({
+    content: index.default.node.isRequired,
+    breadcrumbContent: index.default.node,
+    asText: index.default.string.isRequired
   })])
 };