@carbon/ibm-products 2.56.1 → 2.57.0-rc.0

package/lib/components/PageHeader/PageHeader.js

@@ -21,6 +21,7 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
+var checkForOverflow = require('../../global/js/utils/checkForOverflow.js');
 var useWindowScroll = require('../../global/js/hooks/useWindowScroll.js');
 var useWindowResize = require('../../global/js/hooks/useWindowResize.js');
 var BreadcrumbWithOverflow = require('../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js');
@@ -363,6 +364,12 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var displayedBreadcrumbs = getBreadcrumbs();
+  var subtitleRef = React.useRef(null);
+  var isOverflowing = checkForOverflow.checkHeightOverflow(subtitleRef.current);
+  var subtitleContent = /*#__PURE__*/React.createElement("span", {
+    ref: subtitleRef,
+    className: "".concat(PageHeaderUtils.blockClass, "__subtitle-text")
+  }, subtitle);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
@@ -414,11 +421,14 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     blockClass: PageHeaderUtils.blockClass,
     hasBreadcrumbRow: hasBreadcrumbRow,
     title: title
-  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/React.createElement(react.Row, {
+  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle && /*#__PURE__*/React.createElement(react.Row, {
     className: "".concat(PageHeaderUtils.blockClass, "__subtitle-row")
   }, /*#__PURE__*/React.createElement(react.Column, {
     className: "".concat(PageHeaderUtils.blockClass, "__subtitle")
-  }, subtitle)) : null, children ? /*#__PURE__*/React.createElement(react.Row, {
+  }, isOverflowing ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
+    definition: subtitle,
+    className: "".concat(PageHeaderUtils.blockClass, "__subtitle-tooltip")
+  }, subtitleContent) : subtitleContent)), children ? /*#__PURE__*/React.createElement(react.Row, {
     className: "".concat(PageHeaderUtils.blockClass, "__available-row")
   }, /*#__PURE__*/React.createElement(react.Column, {
     className: "".concat(PageHeaderUtils.blockClass, "__available-column")

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -13,6 +13,7 @@ var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var react = require('@carbon/react');
 var EditInPlace = require('../EditInPlace/EditInPlace.js');
+var checkForOverflow = require('../../global/js/utils/checkForOverflow.js');
 
 var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
@@ -45,31 +46,18 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;
-  var _useState = React.useState(),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isEllipsisApplied = _useState2[0],
-    setIsEllipsisApplied = _useState2[1];
-  var longTitleRef = React.useRef(undefined);
-  var titleRef = React.useRef(undefined);
-  React.useLayoutEffect(function () {
-    setIsEllipsisApplied(isEllipsisActive());
-  }, [longTitleRef, titleRef, title]);
-  var isEllipsisActive = function isEllipsisActive() {
-    if (longTitleRef.current) {
-      var _longTitleRef$current, _longTitleRef$current2;
-      return ((_longTitleRef$current = longTitleRef.current) === null || _longTitleRef$current === void 0 ? void 0 : _longTitleRef$current.offsetWidth) < ((_longTitleRef$current2 = longTitleRef.current) === null || _longTitleRef$current2 === void 0 ? void 0 : _longTitleRef$current2.scrollWidth);
-    } else if (titleRef.current) {
-      var _titleRef$current, _titleRef$current2;
-      return ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.offsetWidth) < ((_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth);
-    }
-    return false;
-  };
+  var titleRef = React.useRef();
+  var isEllipsisApplied = checkForOverflow.checkWidthOverflow(titleRef.current);
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
     var TitleIcon = icon;
+    var titleContent = /*#__PURE__*/React.createElement("span", {
+      ref: titleRef,
+      className: "".concat(blockClass, "__titleText")
+    }, text);
     titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(blockClass, "__title-icon-wrapper")
     }, /*#__PURE__*/React.createElement(TitleIcon, {
@@ -92,14 +80,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       align: tooltipAlignment,
       definition: text,
       className: "".concat(blockClass, "__tooltip")
-    }, /*#__PURE__*/React.createElement("span", {
-      ref: longTitleRef,
-      className: "".concat(blockClass, "__titleText")
-    }, text)) : /*#__PURE__*/React.createElement("span", {
-      ref: titleRef,
-      className: "".concat(blockClass, "__titleText"),
-      title: !loading ? asText : null
-    }, text));
+    }, titleContent) : titleContent);
   } else {
     titleInnards = content;
     titleText = asText;

package/lib/components/ProductiveCard/ProductiveCard.d.ts

@@ -66,7 +66,8 @@ export interface ProductiveCardProps extends PropsWithChildren {
      */
     overflowActions?: overflowAction[];
     /**
-     * Aria label prop required for OverflowMenu
+     * Sets the text for the OverflowMenu aria label and the OverflowMenu trigger button tooltip.
+     * Overrides `iconDescription` prop.
      */
     overflowAriaLabel?: string;
     /**
@@ -120,7 +121,10 @@ export interface ProductiveCardProps extends PropsWithChildren {
      */
     titleSize?: 'default' | 'large';
     /**
-     * Tooltip icon description
+     * Sets the text for the OverflowMenu trigger button tooltip and OverflowMenu aria label,
+     * gets overridden by the `overflowAriaLabel` prop.
+     *
+     * @deprecated Please use the `overflowAriaLabel` prop instead.
      */
     iconDescription?: string;
 }

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -15,16 +15,14 @@ var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var Card = require('../Card/Card.js');
 
-var _excluded = ["actionsPlacement", "iconDescription"];
+var _excluded = ["actionsPlacement"];
 var componentName = 'ProductiveCard';
 exports.ProductiveCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
-    iconDescription = _ref.iconDescription,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, validProps), {}, {
-    iconDescription: iconDescription,
     actionsPlacement: actionsPlacement,
     ref: ref,
     productive: true
@@ -71,7 +69,10 @@ exports.ProductiveCard.propTypes = {
    */
   description: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
   /**
-   * Tooltip icon description
+   * Sets the text for the OverflowMenu trigger button tooltip and OverflowMenu aria label,
+   * gets overridden by the `overflowAriaLabel` prop.
+   *
+   * @deprecated Please use the `overflowAriaLabel` prop instead.
    */
   iconDescription: index.default.string,
   /**
@@ -101,7 +102,8 @@ exports.ProductiveCard.propTypes = {
     onKeyDown: index.default.func
   })),
   /**
-   * Aria label prop required for OverflowMenu
+   * Sets the text for the OverflowMenu aria label and the OverflowMenu trigger button tooltip.
+   * Overrides `iconDescription` prop.
    */
   overflowAriaLabel: index.default.string,
   /**

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

@@ -110,14 +110,19 @@ type SidePanelBaseProps = {
      */
     slideIn?: boolean;
     /**
-     * @deprecated please use the `aiLabel` prop
+     * @deprecated please use the `decorator` instead
      *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
      */
     slug?: ReactNode;
     /**
+     * @deprecated please use the `decorator` instead
      * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
      */
     aiLabel?: ReactNode;
+    /**
+     * Provide a `decorator` component to be rendered inside the `SidePanel` component
+     */
+    decorator?: ReactNode;
     /**
      * Sets the subtitle text
      */

package/lib/components/SidePanel/SidePanel.js

@@ -26,7 +26,7 @@ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMo
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
-var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
+var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "decorator", "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';
@@ -59,6 +59,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     condensedActions = _ref.condensedActions,
     _ref$currentStep = _ref.currentStep,
     currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
+    decorator = _ref.decorator,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? blockClass : _ref$id,
     includeOverlay = _ref.includeOverlay,
@@ -268,7 +269,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (!open) {
       onUnmount === null || onUnmount === void 0 || onUnmount();
     }
-    setAnimationComplete(true);
+    setAnimationComplete(!animationComplete);
   };
 
   // Set the internal state `animationComplete` to true if
@@ -322,22 +323,24 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [slideIn, selectorPageContent, placement, size, shouldReduceMotion, open]);
   React.useEffect(function () {
-    if (open) {
-      setTimeout(function () {
-        if (selectorPrimaryFocus && useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
-          var _window2;
-          var primeFocusEl = useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus);
-          if (primeFocusEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
-            primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
-          }
-        } else if (!slideIn) {
-          firstElement === null || firstElement === void 0 || firstElement.focus();
+    if (open && animationComplete) {
+      if (selectorPrimaryFocus && useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
+        var _window2;
+        var primeFocusEl = useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus);
+        if (primeFocusEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
+          setTimeout(function () {
+            return primeFocusEl === null || primeFocusEl === void 0 ? void 0 : primeFocusEl.focus();
+          }, 0);
         }
-      }, 0);
+      } else if (!slideIn) {
+        setTimeout(function () {
+          return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+        }, 0);
+      }
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-ai-label"), !!aiLabel || !!slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-decorator"), decorator), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--has-ai-label"), aiLabel), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
     return /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -353,23 +356,29 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, title));
   };
   var renderHeader = function renderHeader() {
-    var _slug$type, _aiLabel$type;
-    var aiLabelCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
-    var normalizedAILabel;
+    var _slug$type, _aiLabel$type, _decorator$type;
+    var closeSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
+    var normalizedDecorator;
     /**
      * slug is deprecated
      * can remove this condition in future release
      */
-    if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
-      normalizedAILabel = /*#__PURE__*/React.cloneElement(slug, {
+    if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'AILabel') {
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(slug, {
         // slug size is sm unless actions and size > md
-        size: aiLabelCloseSize
+        size: closeSize
       });
     }
     if (aiLabel && ((_aiLabel$type = aiLabel['type']) === null || _aiLabel$type === void 0 ? void 0 : _aiLabel$type.displayName) === 'AILabel') {
-      normalizedAILabel = /*#__PURE__*/React.cloneElement(aiLabel, {
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(aiLabel, {
         // aiLabel size is sm unless actions and size > md
-        size: aiLabelCloseSize
+        size: closeSize
+      });
+    }
+    if ((decorator === null || decorator === void 0 || (_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) === 'AILabel') {
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(decorator, {
+        // decorator size is sm unless actions and size > md
+        size: closeSize
       });
     }
     return /*#__PURE__*/React.createElement("div", {
@@ -377,7 +386,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
       kind: "ghost",
-      size: aiLabelCloseSize,
+      size: closeSize,
       disabled: false,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React.createElement(icons.ArrowLeft, _rollupPluginBabelHelpers.extends({
@@ -391,8 +400,8 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__ai-label-and-close")
-    }, normalizedAILabel, /*#__PURE__*/React.createElement(react.IconButton, {
+      className: "".concat(blockClass, "__decorator-and-close")
+    }, normalizedDecorator, /*#__PURE__*/React.createElement(react.IconButton, {
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
@@ -495,7 +504,13 @@ var deprecatedProps = {
    * **deprecated**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
    */
-  slug: index.default.node
+  slug: index.default.node,
+  /**
+   * **deprecated**
+   * Please use the `decorator` instead
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: index.default.node
 };
 exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**

package/lib/components/TagOverflow/TagOverflow.js

@@ -191,9 +191,6 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
           return itemRefHandler(id, node);
         },
         key: id
-      }, /*#__PURE__*/React.createElement(react.Tooltip, {
-        align: overflowAlign,
-        label: label
       }, typeof _onClose === 'function' || filter ? /*#__PURE__*/React.createElement(react.DismissibleTag, _rollupPluginBabelHelpers.extends({}, other, {
         className: "".concat(blockClass, "__item--tag"),
         type: tagType,
@@ -204,7 +201,7 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       })) : /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
         className: "".concat(blockClass, "__item--tag"),
         type: tagType
-      }), label)));
+      }), label));
     }
   }), /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__indicator"),

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -19,6 +19,10 @@ interface TearsheetShellProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
+     */
+    currentStep?: number;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -23,7 +23,7 @@ var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
-var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
 var componentName = 'TearsheetShell';
@@ -70,6 +70,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     className = _ref.className,
     closeIconDescription = _ref.closeIconDescription,
+    currentStep = _ref.currentStep,
     description = _ref.description,
     hasCloseIcon = _ref.hasCloseIcon,
     headerActions = _ref.headerActions,
@@ -102,8 +103,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var prevOpen = usePreviousValue.usePreviousValue(open);
   var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener,
-    specifiedElement = _useFocus.specifiedElement;
+    keyDownListener = _useFocus.keyDownListener;
   var modalRefValue = modalRef.current;
 
   // Function to strip html tags out of a string.
@@ -139,23 +139,12 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setDepth(newDepth);
     setPosition(newPosition);
   }
-  handleStackChange.checkFocus = function () {
-    // if we are now the topmost tearsheet, ensure we have focus
-    if (open && position === depth && modalRefValue && !modalRefValue.contains(document.activeElement)) {
-      handleStackChange.claimFocus();
-    }
-  };
-
-  // Callback to give the tearsheet the opportunity to claim focus
-  handleStackChange.claimFocus = function () {
-    useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
-  };
   React.useEffect(function () {
-    if (open) {
+    if (open && position === depth) {
       // Focusing the first element or selectorPrimaryFocus element
       useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
     }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus]);
   React.useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
@@ -163,22 +152,10 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, 0);
     }
   }, [launcherButtonRef, open, prevOpen]);
-  React.useEffect(function () {
-    if (open && position !== depth) {
-      setTimeout(function () {
-        if (selectorPrimaryFocus) {
-          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
-        }
-        firstElement === null || firstElement === void 0 || firstElement.focus();
-      }, 0);
-    }
-  }, [position, depth, firstElement, open, specifiedElement, selectorPrimaryFocus]);
   React.useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
-        var _handler$checkFocus;
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
-        (_handler$checkFocus = handler.checkFocus) === null || _handler$checkFocus === void 0 || _handler$checkFocus.call(handler);
       });
     };
 
@@ -213,14 +190,6 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     };
   }, [open, size]);
-  function handleFocus() {
-    // If something within us is receiving focus but we are not the topmost
-    // stacked tearsheet, transfer focus to the topmost tearsheet instead
-    if (position < depth) {
-      var _stack$open$claimFocu, _stack$open;
-      (_stack$open$claimFocu = (_stack$open = stack.open[stack.open.length - 1]).claimFocus) === null || _stack$open$claimFocu === void 0 || _stack$open$claimFocu.call(_stack$open);
-    }
-  }
   if (position <= depth) {
     var _prevDepth$current;
     // Include a modal header if and only if one or more of these is given.
@@ -252,7 +221,6 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
-      onFocus: handleFocus,
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,

package/lib/global/js/hooks/useFocus.d.ts

@@ -12,4 +12,4 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         specified: any;
     };
 };
-export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): any;
+export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): void;

package/lib/global/js/hooks/useFocus.js

@@ -118,12 +118,15 @@ var claimFocus = function claimFocus(firstElement, modalRef) {
     var _window2;
     var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
     if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
-      return specifiedEl.focus();
+      setTimeout(function () {
+        return specifiedEl.focus();
+      }, 0);
     }
+  } else {
+    setTimeout(function () {
+      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+    }, 0);
   }
-  setTimeout(function () {
-    return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-  }, 0);
 };
 
 exports.claimFocus = claimFocus;

package/lib/global/js/utils/checkForOverflow.d.ts

@@ -0,0 +1,5 @@
+/**
+ * used to calculate if a element is overflowing the width or height of an area
+ */
+export declare const checkWidthOverflow: (el: HTMLElement | null) => boolean;
+export declare const checkHeightOverflow: (el: HTMLElement | null) => boolean;

package/lib/global/js/utils/checkForOverflow.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/**
+ * used to calculate if a element is overflowing the width or height of an area
+ */
+
+var checkWidthOverflow = function checkWidthOverflow(el) {
+  if (el) {
+    return (el === null || el === void 0 ? void 0 : el.offsetWidth) < (el === null || el === void 0 ? void 0 : el.scrollWidth);
+  }
+  return false;
+};
+var checkHeightOverflow = function checkHeightOverflow(el) {
+  if (el) {
+    return (el === null || el === void 0 ? void 0 : el.offsetHeight) < (el === null || el === void 0 ? void 0 : el.scrollHeight);
+  }
+  return false;
+};
+
+exports.checkHeightOverflow = checkHeightOverflow;
+exports.checkWidthOverflow = checkWidthOverflow;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.56.1",
+  "version": "2.57.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -72,7 +72,7 @@
     "@rollup/plugin-typescript": "^12.1.1",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.40",
+    "babel-preset-ibm-cloud-cognitive": "^0.15.0-rc.0",
     "chalk": "^4.1.2",
     "change-case": "4.1.2",
     "classnames": "^2.5.1",
@@ -81,10 +81,10 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.15.0",
+    "jest-config-ibm-cloud-cognitive": "^1.16.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.14.12",
+    "npm-check-updates": "^17.1.11",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.5",
     "rollup": "^4.27.3",
@@ -96,14 +96,14 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.52.0",
+    "@carbon/ibm-products-styles": "^2.53.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@ibm/telemetry-js": "^1.5.0",
-    "framer-motion": "^6.5.1 < 7",
+    "framer-motion": "^11.11.17",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
@@ -114,11 +114,11 @@
     "@carbon/grid": "^11.29.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/react": "^1.71.1",
+    "@carbon/react": "^1.72.0",
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "c3d9280f5cd9debb7e3f6e611db79a1e01668cf5"
+  "gitHead": "3e6fe0b818ce98391ed417642a5dd66af9fb6980"
 }

package/scss/components/APIKeyModal/_api-key-modal.scss

@@ -50,3 +50,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
 .#{$block-class}__error-icon svg {
   fill: $button-danger-primary;
 }
+
+.#{$block-class}__checkmark-icon {
+  fill: $button-primary;
+}

package/scss/components/PageHeader/_page-header.scss

@@ -538,14 +538,8 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__subtitle-row {
-    display: -webkit-box;
-    overflow: hidden;
-    max-width: 100%;
     margin-top: $spacing-03;
 
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-
     @include breakpoint-up('md') {
       max-width: $left-section-std-width;
     }
@@ -559,6 +553,24 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     @include type.type-style('body-01');
   }
 
+  .#{$block-class}__subtitle-tooltip .#{$carbon-prefix}--definition-term {
+    border-bottom: 0;
+    letter-spacing: inherit;
+  }
+
+  // overwrites the existing styles to make the popover bigger because in some cases the narrow space can be too constricting for the header
+  .#{$block-class}__subtitle-tooltip
+    .#{$carbon-prefix}--popover-content.#{$carbon-prefix}--definition-tooltip {
+    max-inline-size: fit-content;
+  }
+
+  .#{$block-class}__subtitle-text {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
   .#{$block-class}__available-row {
     @include type.type-style('body-01');