@carbon/ibm-products 2.39.0 → 2.40.1-canary.10

package/lib/components/PageHeader/PageHeader.js

@@ -36,6 +36,7 @@ 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.component.ActionBar = true;
 
 // Default values for props
 var defaults = {
@@ -90,7 +91,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     metrics = _useState2[0],
     setMetrics = _useState2[1];
-  var _useState3 = React.useState(_rollupPluginBabelHelpers.objectSpread2({}, rest.style)),
+  var _useState3 = React.useState(_rollupPluginBabelHelpers.objectSpread2({}, rest === null || rest === void 0 ? void 0 : rest.style)),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     pageHeaderStyles = _useState4[0],
     setPageHeaderStyles = _useState4[1];
@@ -98,16 +99,30 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   // refs
   var localHeaderRef = React.useRef(null);
   var headerRef = ref || localHeaderRef;
-  var sizingContainerRef = React.useRef();
+  var sizingContainerRef = React.useRef(null);
   var offsetTopMeasuringRef = React.useRef(null);
 
   // state based on props only
   var hasActionBar = actionBarItems && actionBarItems.length > 0;
   var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
+  if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 10) {
+    if (!allTagsModalSearchLabel) {
+      throw new Error("allTagsModalSearchLabel' is required.");
+    }
+    if (!allTagsModalSearchPlaceholderText) {
+      throw new Error("'allTagsModalSearchPlaceholderText' is required.");
+    }
+    if (!allTagsModalTitle) {
+      throw new Error("'allTagsModalTitle' is required.");
+    }
+    if (!showAllTagsLabel) {
+      throw new Error("'showAllTagsLabel' is required.");
+    }
+  }
 
   // utility functions
   var checkUpdateVerticalSpace = function checkUpdateVerticalSpace() {
-    return PageHeaderUtils.utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics);
+    return PageHeaderUtils.utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar || false, widthIsNarrow, setMetrics);
   };
 
   // NOTE: The buffer is used to add space between the bottom of the header and the last content
@@ -198,15 +213,16 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     checkUpdateVerticalSpace();
   };
   var handleCollapseToggle = function handleCollapseToggle() {
-    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics.headerOffset, metrics.headerTopValue);
+    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset, metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue);
   };
 
   // use effects
   React.useEffect(function () {
     /* istanbul ignore else */
     if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
-      var minWidth = pageActions.minWidth,
-        maxWidth = pageActions.maxWidth;
+      var _ref5 = pageActions,
+        minWidth = _ref5.minWidth,
+        maxWidth = _ref5.maxWidth;
       handlePageActionWidthChange({
         minWidth: minWidth,
         maxWidth: maxWidth
@@ -216,7 +232,9 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(function () {
     // Determine the location of the pageAction buttons
     /* istanbul ignore next */
-    setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > metrics.titleRowSpaceAbove || widthIsNarrow && scrollYValue > metrics.pageActionsSpaceAbove);
+    if (metrics !== null && metrics !== void 0 && metrics.titleRowSpaceAbove && metrics !== null && metrics !== void 0 && metrics.pageActionsSpaceAbove) {
+      setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.titleRowSpaceAbove) || widthIsNarrow && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.pageActionsSpaceAbove));
+    }
   }, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
   React.useEffect(function () {
     // Assesses the size of the action bar and page action area and their required
@@ -249,15 +267,15 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     // Updates custom CSS props used to manage scroll behavior
     /* istanbul ignore next */
     setPageHeaderStyles(function (prev) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(PageHeaderUtils.blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
-      )))), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")));
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(PageHeaderUtils.blockClass, "--header-top"), "".concat(((metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue) || 0) + ((metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset) || 0), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
+      )))), "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowWidth, "px")));
     });
   }, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
   useWindowScroll.useNearestScroll(headerRef,
   // on scroll or various layout changes check updates if needed
   // istanbul ignore next
-  function (_ref5) {
-    var current = _ref5.current;
+  function (_ref6) {
+    var current = _ref6.current;
     setPageHeaderStyles(function (prev) {
       return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, _rollupPluginBabelHelpers.defineProperty({}, "--".concat(PageHeaderUtils.blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
     });
@@ -266,15 +284,15 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
 
     // set offset for tagset tooltip
     /* istanbul ignore next */
-    var tagsetTooltipOffset = fullyCollapsed ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : metrics.headerHeight + metrics.headerOffset;
+    var tagsetTooltipOffset = fullyCollapsed && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics !== null && metrics !== void 0 && metrics.headerTopValue && metrics !== null && metrics !== void 0 && metrics.headerOffset ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : (metrics.headerHeight || 0) + (metrics.headerOffset || 0);
 
     /* 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]);
-  useWindowResize.useWindowResize(function (_ref6) {
-    var current = _ref6.current;
+  useWindowResize.useWindowResize(function (_ref7) {
+    var current = _ref7.current;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
     setWidthIsNarrow(current.innerWidth / 16 < parseInt(layout.breakpoints.md.width)); // small (below medium) media query
@@ -286,14 +304,14 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   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);
+    if (!result && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
+      var startAddingAt = parseFloat(layout.spacing10) * 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;
+        var distanceAddingOver = startAddingAt - ((metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowHeight) || 0);
         result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
       }
     }
@@ -305,15 +323,19 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     // only has toggle if requested and withoutBackground is unset/falsy
     // NOTE: prop-types isRequired.if for the expand and collapse
     // icon descriptions depends on the this.
-    setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground);
+    setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground || false);
   }, [withoutBackground, hasCollapseHeaderToggle]);
   React.useEffect(function () {
     // Determine if space is needed in the breadcrumb for a collapse button
-    setSpaceForCollapseButton(hasCollapseButton && !(navigation || tags) && metrics.headerHeight);
+    if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== void 0 && metrics.headerHeight) {
+      setSpaceForCollapseButton(true);
+    } else {
+      setSpaceForCollapseButton(false);
+    }
   }, [hasCollapseButton, navigation, tags, metrics.headerHeight]);
   var nextToTabsCheck = function nextToTabsCheck() {
     /* istanbul ignore next */
-    return enableBreadcrumbScroll && !actionBarItems && scrollYValue + metrics.headerTopValue >= 0;
+    return enableBreadcrumbScroll && !actionBarItems && metrics.headerTopValue && scrollYValue + metrics.headerTopValue >= 0;
   };
   React.useEffect(function () {
     if (collapseHeader === true) {
@@ -325,6 +347,18 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
 
   // Determine what form of title to display in the breadcrumb
   var breadcrumbItemForTitle = PageHeaderUtils.utilGetBreadcrumbItemForTitle(PageHeaderUtils.blockClass, collapseTitle, title);
+  var getBreadcrumbs = function getBreadcrumbs() {
+    if (breadcrumbs && breadcrumbItemForTitle) {
+      return breadcrumbs.concat(breadcrumbItemForTitle);
+    } else {
+      if (breadcrumbItemForTitle) {
+        return [breadcrumbItemForTitle];
+      } else {
+        return breadcrumbs;
+      }
+    }
+  };
+  var displayedBreadcrumbs = getBreadcrumbs();
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
@@ -344,14 +378,14 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     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, {
+  }, (breadcrumbs || breadcrumbItemForTitle) && /*#__PURE__*/React__default["default"].createElement(BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
     className: "".concat(PageHeaderUtils.blockClass, "__breadcrumb"),
     noTrailingSlash: !!title,
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
-    breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
-    ,
-    overflowTooltipAlign: breadcrumbOverflowTooltipAlign
-  }) : null), /*#__PURE__*/React__default["default"].createElement(react.Column, {
+    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", {
     className: "".concat(PageHeaderUtils.blockClass, "__action-bar-column-content"),
@@ -360,11 +394,11 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   /*#__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, {
-    menuOptionsClass: cx__default["default"](actionBarMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__action-bar-menu-options")),
-    overflowAriaLabel: actionBarOverflowAriaLabel,
     actions: actionBarItems,
     className: "".concat(PageHeaderUtils.blockClass, "__action-bar"),
+    menuOptionsClass: "".concat(cx__default["default"](actionBarMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__action-bar-menu-options"))),
     onWidthChange: handleActionBarWidthChange,
+    overflowAriaLabel: actionBarOverflowAriaLabel,
     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))
@@ -395,9 +429,9 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
-    showAllTagsLabel: showAllTagsLabel,
     tags: tags,
-    overflowClassName: "".concat(PageHeaderUtils.blockClass, "__navigation-tags-overflow")
+    overflowClassName: "".concat(PageHeaderUtils.blockClass, "__navigation-tags-overflow"),
+    showAllTagsLabel: showAllTagsLabel || ''
   }))) : null),
   // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
   navigation ? /*#__PURE__*/React__default["default"].createElement(react.Row, {
@@ -411,7 +445,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
-    showAllTagsLabel: showAllTagsLabel,
+    showAllTagsLabel: showAllTagsLabel || '',
     tags: tags,
     overflowClassName: "".concat(PageHeaderUtils.blockClass, "__navigation-tags-overflow")
   })) : null) : null), hasCollapseButton ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -434,7 +468,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   })) : null));
   function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
     if (pageActions) {
-      var _pageActions$content;
+      var _content;
       var _Tag = isBreadcrumbRow ? 'div' : react.Column;
       // Only report size change of version action bar is rendered as part of the breadcrumb row.
       // and when there is an actionBar
@@ -443,8 +477,8 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
         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"))
-      }, (_pageActions$content = pageActions.content) !== null && _pageActions$content !== void 0 ? _pageActions$content : /*#__PURE__*/React__default["default"].createElement(ButtonSetWithOverflow.ButtonSetWithOverflow, {
-        classname: "".concat(PageHeaderUtils.blockClass, "__button-set-with-overflow"),
+      }, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React__default["default"].createElement(ButtonSetWithOverflow.ButtonSetWithOverflow, {
+        className: "".concat(PageHeaderUtils.blockClass, "__button-set-with-overflow"),
         menuOptionsClass: cx__default["default"](pageActionsMenuOptionsClass, "".concat(PageHeaderUtils.blockClass, "__button-set-menu-options")),
         onWidthChange: handleWidthChange,
         buttons: pageActions,
@@ -484,6 +518,8 @@ var deprecatedProps = {
    */
   hasBackgroundAlways: propsHelper.deprecateProp(index["default"].bool, 'Property replaced by `withoutBackground`')
 };
+
+/**@ts-ignore */
 exports.PageHeader.tagTypes = tagTypes;
 exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
@@ -491,6 +527,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Each item is specified as an object with the properties of a Carbon Button in icon only form.
    * Button kind, size, tooltipPosition, tooltipAlignment and type are ignored.
    */
+  /**@ts-ignore */
   actionBarItems: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
     iconDescription: index["default"].string.isRequired,
     onClick: react.Button.propTypes.onClick,
@@ -506,8 +543,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *
    * NOTE: This prop is required if actionBarItems are supplied
    */
-  actionBarOverflowAriaLabel: index["default"].string.isRequired.if(function (_ref10) {
-    var actionBarItems = _ref10.actionBarItems;
+  /**@ts-ignore */
+  actionBarOverflowAriaLabel: index["default"].string.isRequired.if(function (_ref11) {
+    var actionBarItems = _ref11.actionBarItems;
     return actionBarItems && actionBarItems.length > 0;
   }),
   /**
@@ -538,8 +576,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * 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: index["default"].string.isRequired.if(function (_ref11) {
-    var breadcrumbs = _ref11.breadcrumbs;
+  /**@ts-ignore */
+  breadcrumbOverflowAriaLabel: index["default"].string.isRequired.if(function (_ref12) {
+    var breadcrumbs = _ref12.breadcrumbs;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
   /**
@@ -557,6 +596,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * fields in the object will be passed through to the breadcrumb element as
    * HTML attributes.
    */
+  /**@ts-ignore */
   breadcrumbs: index["default"].arrayOf(index["default"].shape({
     /**
      * Optional string representing the link location for the BreadcrumbItem
@@ -577,8 +617,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     /**
      * A text version of the `label` for display, required if `label` is not a string.
      */
-    title: index["default"].string.isRequired.if(function (_ref12) {
-      var label = _ref12.label;
+    /**@ts-ignore */
+    title: index["default"].string.isRequired.if(function (_ref13) {
+      var label = _ref13.label;
       return typeof label !== 'string';
     })
   })),
@@ -604,9 +645,10 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * 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: index["default"].string.isRequired.if(function (_ref13) {
-    var withoutBackground = _ref13.withoutBackground,
-      hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
+  /**@ts-ignore */
+  collapseHeaderIconDescription: index["default"].string.isRequired.if(function (_ref14) {
+    var withoutBackground = _ref14.withoutBackground,
+      hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
   /**
@@ -623,15 +665,17 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * 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: index["default"].string.isRequired.if(function (_ref14) {
-    var withoutBackground = _ref14.withoutBackground,
-      hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
+  /**@ts-ignore */
+  expandHeaderIconDescription: index["default"].string.isRequired.if(function (_ref15) {
+    var withoutBackground = _ref15.withoutBackground,
+      hasCollapseHeaderToggle = _ref15.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.
    */
+  /**@ts-ignore */
   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.
@@ -639,6 +683,7 @@ 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.
    */
+  /**@ts-ignore */
   hasCollapseHeaderToggle: index["default"].bool,
   /**
    * The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid narrow prop
@@ -665,6 +710,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * - maxWidth: maximum number of pixels the content will grow to
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
+  /**@ts-ignore */
   pageActions: 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,
@@ -689,8 +735,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *
    * NOTE: This prop is required if pageActions are supplied
    */
-  pageActionsOverflowLabel: index["default"].node.isRequired.if(function (_ref15) {
-    var pageActions = _ref15.pageActions;
+  /**@ts-ignore */
+  pageActionsOverflowLabel: index["default"].node.isRequired.if(function (_ref16) {
+    var pageActions = _ref16.pageActions;
     return pageActions && pageActions.length > 0 && !pageActions.content;
   }),
   /**
@@ -718,6 +765,7 @@ 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,
     // we duplicate this prop to improve the DocGen
@@ -730,6 +778,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * - String
    * - Object containing
    *    - text: title string
+   *    - shortTitle: alternative title for exceptionally long titles
    *    - icon: optional icon
    *    - loading: boolean shows loading indicator if true
    *    - onChange: function to process the live value (React change === HTML Input)
@@ -742,9 +791,11 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
    *    - asText: String based representation of the title
    */
+  /**@ts-ignore */
   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,
     // inline edit version properties
@@ -770,6 +821,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * 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
 }, deprecatedProps);
 exports.PageHeader.displayName = componentName;

package/lib/components/PageHeader/PageHeaderUtils.d.ts

@@ -1,5 +1,5 @@
 export const blockClass: string;
-export function utilCheckUpdateVerticalSpace(headerRef: {}, offsetTopMeasuringRef: {}, navigation: {}, enableBreadcrumbScroll: boolean, hasActionBar: boolean, widthIsNarrow: boolean, setMetrics: () => any): void;
+export function utilCheckUpdateVerticalSpace(headerRef: {}, offsetTopMeasuringRef: {}, navigation: object, enableBreadcrumbScroll: boolean, hasActionBar: boolean, widthIsNarrow: boolean, setMetrics: () => any): void;
 export function utilSetCollapsed(collapse: any, headerRef: any, headerOffset: any, headerTopValue: any): void;
 export function utilGetBreadcrumbItemForTitle(blockClass: any, collapseTitle: any, title: any): {
     label: any;

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -28,7 +28,7 @@ var blockClass = "".concat(settings.pkg.prefix, "--page-header");
  * Assesses the vertical height of various elements and calls setMetrics with update
  * @param {{}} headerRef
  * @param {{}} offsetTopMeasuringRef
- * @param {{}} navigation
+ * @param {object} navigation
  * @param {boolean} enableBreadcrumbScroll
  * @param {boolean} hasActionBar
  * @param {boolean} widthIsNarrow
@@ -191,6 +191,9 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
       breadcrumbTitle.isCurrentPage = true;
       breadcrumbTitle.className = cx__default["default"](["".concat(blockClass, "__breadcrumb-title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__breadcrumb-title--pre-collapsed"), collapseTitle)]);
     }
+    if (title.shortTitle) {
+      breadcrumbTitle.shortTitle = title.shortTitle;
+    }
     return breadcrumbTitle;
   }
 };

package/lib/components/SidePanel/SidePanel.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject } from 'react';
 import { ButtonProps } from '@carbon/react';
 type SidePanelBaseProps = {
     /**
@@ -57,6 +57,10 @@ type SidePanelBaseProps = {
      * Sets the label text which will display above the title text
      */
     labelText?: string;
+    /**
+     * Provide a ref to return focus to once the side panel is closed.
+     */
+    launcherButtonRef?: RefObject<any>;
     /**
      * Sets the icon description for the navigation back icon button
      */
@@ -100,7 +104,7 @@ type SidePanelBaseProps = {
     /**
      * Sets the size of the side panel
      */
-    size: 'xs' | 'sm' | 'md' | 'lg' | '2xl';
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     /**
      * Determines if this panel slides in
      */

package/lib/components/SidePanel/SidePanel.js

@@ -32,7 +32,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
+var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
   _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
@@ -86,6 +86,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     slug = _ref.slug,
     subtitle = _ref.subtitle,
     title = _ref.title,
+    launcherButtonRef = _ref.launcherButtonRef,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -117,6 +118,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
+  var previousOpen = usePreviousValue.usePreviousValue(open);
   var shouldReduceMotion = framerMotion.useReducedMotion();
 
   // Title animation on scroll related state
@@ -188,6 +190,14 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       console.warn("".concat(componentName, ": The prop `labelText` was provided without a `title`. It is required to have a `title` when using the `labelText` prop."));
     }
   }, [labelText, title]);
+  React.useEffect(function () {
+    if (previousOpen && !open && launcherButtonRef) {
+      setTimeout(function () {
+        var _launcherButtonRef$cu;
+        launcherButtonRef === null || launcherButtonRef === void 0 || (_launcherButtonRef$cu = launcherButtonRef.current) === null || _launcherButtonRef$cu === void 0 || _launcherButtonRef$cu.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, open, previousOpen]);
   var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
     var canDoAnimateTitle = false;
     if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
@@ -541,6 +551,11 @@ exports.SidePanel.propTypes = {
    * Sets the label text which will display above the title text
    */
   labelText: index["default"].string,
+  /**
+   * Provide a ref to return focus to once the modal is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: index["default"].any,
   /**
    * Sets the icon description for the navigation back icon button
    */
@@ -590,7 +605,7 @@ exports.SidePanel.propTypes = {
    * Sets the size of the side panel
    */
   /**@ts-ignore*/
-  size: index["default"].oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
+  size: index["default"].oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
   /**
    * Determines if this panel slides in
    */

package/lib/components/SidePanel/constants.d.ts

@@ -3,5 +3,6 @@ export namespace SIDE_PANEL_SIZES {
     let sm: string;
     let md: string;
     let lg: string;
+    let xl: string;
     let max: string;
 }

package/lib/components/SidePanel/constants.js

@@ -14,6 +14,7 @@ var SIDE_PANEL_SIZES = {
   sm: '20rem',
   md: '30rem',
   lg: '40rem',
+  xl: '65rem',
   max: '75%'
 };
 

package/lib/components/SingleAddSelect/SingleAddSelect.d.ts

@@ -1,5 +1,72 @@
+import React from 'react';
+import { Entry } from '../AddSelect/types';
+interface SingleAddSelectProps {
+    /**
+     * optional class name
+     */
+    className?: string;
+    /**
+     * text description that appears under the title
+     */
+    description?: string;
+    /**
+     * label for global search input
+     */
+    globalSearchLabel?: string;
+    /**
+     * placeholder for global search input
+     */
+    globalSearchPlaceholder?: string;
+    /**
+     * object that contains the item data. for more information reference the
+     * "Structuring items" section in the docs tab
+     */
+    items?: {
+        entries: Entry[];
+    };
+    /**
+     * label that display above the list of items
+     */
+    itemsLabel?: string;
+    /**
+     * text to display when no results are found from the global search
+     */
+    noResultsDescription?: string;
+    /**
+     * title to display when no results are found from the global search
+     */
+    noResultsTitle?: string;
+    /**
+     * function to call when the close button clicked
+     */
+    onClose?: () => void;
+    /**
+     * text for close button
+     */
+    onCloseButtonText?: string;
+    /**
+     * function to call when the submit button is clicked. returns a selection
+     */
+    onSubmit?: () => void;
+    /**
+     * text for the submit button
+     */
+    onSubmitButtonText?: string;
+    /**
+     * specifies if the component is open or not
+     */
+    open?: boolean;
+    /**
+     * text that displays when displaying filtered items
+     */
+    searchResultsLabel?: string;
+    /**
+     * header text
+     */
+    title?: string;
+}
 /**
  * Used to add or select one or more items from larger lists or hierarchies.
  */
-export let SingleAddSelect: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let SingleAddSelect: React.ForwardRefExoticComponent<SingleAddSelectProps & React.RefAttributes<HTMLDivElement>>;
+export {};