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

package/es/components/PageHeader/PageHeader.js

@@ -27,6 +27,7 @@ import { ButtonSetWithOverflow } from '../ButtonSetWithOverflow/ButtonSetWithOve
 
 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';
+pkg.component.ActionBar = true;
 
 // Default values for props
 var defaults = {
@@ -81,7 +82,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     metrics = _useState2[0],
     setMetrics = _useState2[1];
-  var _useState3 = useState(_objectSpread2({}, rest.style)),
+  var _useState3 = useState(_objectSpread2({}, rest === null || rest === void 0 ? void 0 : rest.style)),
     _useState4 = _slicedToArray(_useState3, 2),
     pageHeaderStyles = _useState4[0],
     setPageHeaderStyles = _useState4[1];
@@ -89,16 +90,30 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // refs
   var localHeaderRef = useRef(null);
   var headerRef = ref || localHeaderRef;
-  var sizingContainerRef = useRef();
+  var sizingContainerRef = useRef(null);
   var offsetTopMeasuringRef = 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 utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics);
+    return 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
@@ -189,15 +204,16 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     checkUpdateVerticalSpace();
   };
   var handleCollapseToggle = function handleCollapseToggle() {
-    utilSetCollapsed(!fullyCollapsed, headerRef, metrics.headerOffset, metrics.headerTopValue);
+    utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset, metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue);
   };
 
   // use effects
   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
@@ -207,7 +223,9 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   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]);
   useEffect(function () {
     // Assesses the size of the action bar and page action area and their required
@@ -240,15 +258,15 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     // Updates custom CSS props used to manage scroll behavior
     /* istanbul ignore next */
     setPageHeaderStyles(function (prev) {
-      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(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(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")));
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(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(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(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(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]);
   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 _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, "--".concat(blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
     });
@@ -257,15 +275,15 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
     // 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(blockClass, "--tagset-tooltip-position"), fullyCollapsed ? 'fixed' : 'absolute');
     document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
     setScrollYValue(current.scrollY);
   }, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
-  useWindowResize(function (_ref6) {
-    var current = _ref6.current;
+  useWindowResize(function (_ref7) {
+    var current = _ref7.current;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
     setWidthIsNarrow(current.innerWidth / 16 < parseInt(breakpoints.md.width)); // small (below medium) media query
@@ -277,14 +295,14 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   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(spacing10, 10) * parseInt(baseFontSize);
+    if (!result && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
+      var startAddingAt = parseFloat(spacing10) * parseInt(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);
       }
     }
@@ -296,15 +314,19 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     // 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]);
   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;
   };
   useEffect(function () {
     if (collapseHeader === true) {
@@ -316,6 +338,18 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // Determine what form of title to display in the breadcrumb
   var breadcrumbItemForTitle = utilGetBreadcrumbItemForTitle(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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
@@ -335,14 +369,14 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__breadcrumb-row--container")
   }, /*#__PURE__*/React__default.createElement(Column, {
     className: cx("".concat(blockClass, "__breadcrumb-column"), _defineProperty({}, "".concat(blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar || widthIsNarrow))
-  }, breadcrumbs || breadcrumbItemForTitle ? /*#__PURE__*/React__default.createElement(BreadcrumbWithOverflow, {
+  }, (breadcrumbs || breadcrumbItemForTitle) && /*#__PURE__*/React__default.createElement(BreadcrumbWithOverflow, {
     className: "".concat(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.createElement(Column, {
+    breadcrumbs: displayedBreadcrumbs,
+    overflowTooltipAlign: breadcrumbOverflowTooltipAlign,
+    maxVisible: undefined
+  })), /*#__PURE__*/React__default.createElement(Column, {
     className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__action-bar-column-content"),
@@ -351,11 +385,11 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   /*#__PURE__*/
   // Investigate the responsive behavior or this and the title also fix the ActionBar Item and PageAction story css
   React__default.createElement(React__default.Fragment, null, thePageActions(true, pageActionsInBreadcrumbRow), /*#__PURE__*/React__default.createElement(ActionBar, {
-    menuOptionsClass: cx(actionBarMenuOptionsClass, "".concat(blockClass, "__action-bar-menu-options")),
-    overflowAriaLabel: actionBarOverflowAriaLabel,
     actions: actionBarItems,
     className: "".concat(blockClass, "__action-bar"),
+    menuOptionsClass: "".concat(cx(actionBarMenuOptionsClass, "".concat(blockClass, "__action-bar-menu-options"))),
     onWidthChange: handleActionBarWidthChange,
+    overflowAriaLabel: actionBarOverflowAriaLabel,
     rightAlign: true
   })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default.createElement(Row, {
     className: cx("".concat(blockClass, "__title-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
@@ -386,9 +420,9 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
-    showAllTagsLabel: showAllTagsLabel,
     tags: tags,
-    overflowClassName: "".concat(blockClass, "__navigation-tags-overflow")
+    overflowClassName: "".concat(blockClass, "__navigation-tags-overflow"),
+    showAllTagsLabel: showAllTagsLabel || ''
   }))) : null),
   // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
   navigation ? /*#__PURE__*/React__default.createElement(Row, {
@@ -402,7 +436,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
-    showAllTagsLabel: showAllTagsLabel,
+    showAllTagsLabel: showAllTagsLabel || '',
     tags: tags,
     overflowClassName: "".concat(blockClass, "__navigation-tags-overflow")
   })) : null) : null), hasCollapseButton ? /*#__PURE__*/React__default.createElement("div", {
@@ -425,7 +459,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   })) : null));
   function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
     if (pageActions) {
-      var _pageActions$content;
+      var _content;
       var _Tag = isBreadcrumbRow ? 'div' : Column;
       // Only report size change of version action bar is rendered as part of the breadcrumb row.
       // and when there is an actionBar
@@ -434,8 +468,8 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         className: cx("".concat(blockClass, "__page-actions"), _defineProperty({}, "".concat(blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
       }, /*#__PURE__*/React__default.createElement("div", {
         className: cx("".concat(blockClass, "__page-actions-content"))
-      }, (_pageActions$content = pageActions.content) !== null && _pageActions$content !== void 0 ? _pageActions$content : /*#__PURE__*/React__default.createElement(ButtonSetWithOverflow, {
-        classname: "".concat(blockClass, "__button-set-with-overflow"),
+      }, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React__default.createElement(ButtonSetWithOverflow, {
+        className: "".concat(blockClass, "__button-set-with-overflow"),
         menuOptionsClass: cx(pageActionsMenuOptionsClass, "".concat(blockClass, "__button-set-menu-options")),
         onWidthChange: handleWidthChange,
         buttons: pageActions,
@@ -475,6 +509,8 @@ var deprecatedProps = {
    */
   hasBackgroundAlways: deprecateProp(PropTypes.bool, 'Property replaced by `withoutBackground`')
 };
+
+/**@ts-ignore */
 PageHeader.tagTypes = tagTypes;
 PageHeader.propTypes = _objectSpread2({
   /**
@@ -482,6 +518,7 @@ PageHeader.propTypes = _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: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
     iconDescription: PropTypes.string.isRequired,
     onClick: Button.propTypes.onClick,
@@ -497,8 +534,9 @@ PageHeader.propTypes = _objectSpread2({
    *
    * NOTE: This prop is required if actionBarItems are supplied
    */
-  actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref10) {
-    var actionBarItems = _ref10.actionBarItems;
+  /**@ts-ignore */
+  actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref11) {
+    var actionBarItems = _ref11.actionBarItems;
     return actionBarItems && actionBarItems.length > 0;
   }),
   /**
@@ -529,8 +567,9 @@ PageHeader.propTypes = _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: PropTypes.string.isRequired.if(function (_ref11) {
-    var breadcrumbs = _ref11.breadcrumbs;
+  /**@ts-ignore */
+  breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref12) {
+    var breadcrumbs = _ref12.breadcrumbs;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
   /**
@@ -548,6 +587,7 @@ PageHeader.propTypes = _objectSpread2({
    * fields in the object will be passed through to the breadcrumb element as
    * HTML attributes.
    */
+  /**@ts-ignore */
   breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
     /**
      * Optional string representing the link location for the BreadcrumbItem
@@ -568,8 +608,9 @@ PageHeader.propTypes = _objectSpread2({
     /**
      * A text version of the `label` for display, required if `label` is not a string.
      */
-    title: PropTypes.string.isRequired.if(function (_ref12) {
-      var label = _ref12.label;
+    /**@ts-ignore */
+    title: PropTypes.string.isRequired.if(function (_ref13) {
+      var label = _ref13.label;
       return typeof label !== 'string';
     })
   })),
@@ -595,9 +636,10 @@ PageHeader.propTypes = _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: PropTypes.string.isRequired.if(function (_ref13) {
-    var withoutBackground = _ref13.withoutBackground,
-      hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
+  /**@ts-ignore */
+  collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref14) {
+    var withoutBackground = _ref14.withoutBackground,
+      hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
   /**
@@ -614,15 +656,17 @@ PageHeader.propTypes = _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: PropTypes.string.isRequired.if(function (_ref14) {
-    var withoutBackground = _ref14.withoutBackground,
-      hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
+  /**@ts-ignore */
+  expandHeaderIconDescription: PropTypes.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: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['xl'])]),
   /**
    * Adds a button as the last element of the bottom row which collapses and expands the header.
@@ -630,6 +674,7 @@ PageHeader.propTypes = _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: PropTypes.bool,
   /**
    * The PageHeader is hosted in a Carbon grid, this value is passed through to the Carbon grid narrow prop
@@ -656,6 +701,7 @@ PageHeader.propTypes = _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: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
     key: PropTypes.string.isRequired,
     kind: Button.propTypes.kind,
@@ -680,8 +726,9 @@ PageHeader.propTypes = _objectSpread2({
    *
    * NOTE: This prop is required if pageActions are supplied
    */
-  pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (_ref15) {
-    var pageActions = _ref15.pageActions;
+  /**@ts-ignore */
+  pageActionsOverflowLabel: PropTypes.node.isRequired.if(function (_ref16) {
+    var pageActions = _ref16.pageActions;
     return pageActions && pageActions.length > 0 && !pageActions.content;
   }),
   /**
@@ -709,6 +756,7 @@ PageHeader.propTypes = _objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
+  /**@ts-ignore */
   tags: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Tag.propTypes, 'filter')), {}, {
     label: PropTypes.string.isRequired,
     // we duplicate this prop to improve the DocGen
@@ -721,6 +769,7 @@ PageHeader.propTypes = _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)
@@ -733,9 +782,11 @@ PageHeader.propTypes = _objectSpread2({
    *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
    *    - asText: String based representation of the title
    */
+  /**@ts-ignore */
   title: PropTypes.oneOfType([PropTypes.shape({
     // Update docgen if changed
     text: PropTypes.string.isRequired,
+    shortTitle: PropTypes.string,
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     loading: PropTypes.bool,
     // inline edit version properties
@@ -761,6 +812,7 @@ PageHeader.propTypes = _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: PropTypes.bool
 }, deprecatedProps);
 PageHeader.displayName = componentName;

package/es/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/es/components/PageHeader/PageHeaderUtils.js

@@ -19,7 +19,7 @@ var blockClass = "".concat(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
@@ -182,6 +182,9 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
       breadcrumbTitle.isCurrentPage = true;
       breadcrumbTitle.className = cx(["".concat(blockClass, "__breadcrumb-title"), _defineProperty({}, "".concat(blockClass, "__breadcrumb-title--pre-collapsed"), collapseTitle)]);
     }
+    if (title.shortTitle) {
+      breadcrumbTitle.shortTitle = title.shortTitle;
+    }
     return breadcrumbTitle;
   }
 };

package/es/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/es/components/SidePanel/SidePanel.js

@@ -23,7 +23,7 @@ import { ActionSet } from '../ActionSet/ActionSet.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useFocus } from '../../global/js/hooks/useFocus.js';
 
-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(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
@@ -77,6 +77,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     slug = _ref.slug,
     subtitle = _ref.subtitle,
     title = _ref.title,
+    launcherButtonRef = _ref.launcherButtonRef,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -108,6 +109,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
+  var previousOpen = usePreviousValue(open);
   var shouldReduceMotion = useReducedMotion();
 
   // Title animation on scroll related state
@@ -179,6 +181,14 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       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]);
+  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) {
@@ -532,6 +542,11 @@ SidePanel.propTypes = {
    * Sets the label text which will display above the title text
    */
   labelText: PropTypes.string,
+  /**
+   * Provide a ref to return focus to once the modal is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: PropTypes.any,
   /**
    * Sets the icon description for the navigation back icon button
    */
@@ -581,7 +596,7 @@ SidePanel.propTypes = {
    * Sets the size of the side panel
    */
   /**@ts-ignore*/
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
   /**
    * Determines if this panel slides in
    */

package/es/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/es/components/SidePanel/constants.js

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

package/es/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 {};

package/es/components/SingleAddSelect/SingleAddSelect.js

@@ -14,7 +14,6 @@ import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { AddSelect } from '../AddSelect/AddSelect.js';
 
 var componentName = 'SingleAddSelect';
-
 /**
  * Used to add or select one or more items from larger lists or hierarchies.
  */
@@ -30,6 +29,7 @@ SingleAddSelect.propTypes = {
   /**
    * optional class name
    */
+  /**@ts-ignore */
   className: PropTypes.string,
   /**
    * text description that appears under the title
@@ -47,6 +47,7 @@ SingleAddSelect.propTypes = {
    * object that contains the item data. for more information reference the
    * "Structuring items" section in the docs tab
    */
+  /**@ts-ignore */
   items: PropTypes.shape({
     entries: PropTypes.arrayOf(PropTypes.shape({
       children: PropTypes.object,