@carbon/ibm-products 2.54.0-canary.71 → 2.54.0-canary.74

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -20,7 +20,7 @@ import { pkg } from '../../settings.js';
 import '../Coachmark/Coachmark.js';
 import { useCoachmark } from '../Coachmark/utils/context.js';
 
-var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
+var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "currentStep", "nextButtonText", "previousButtonLabel", "closeButtonLabel", "onNext", "onBack"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--coachmark-overlay-elements");
@@ -41,7 +41,10 @@ var defaults = {
   isVisible: false,
   nextButtonText: 'Next',
   previousButtonLabel: 'Back',
-  closeButtonLabel: 'Got it'
+  closeButtonLabel: 'Got it',
+  onNext: undefined,
+  onBack: undefined,
+  currentStep: 0
 };
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement
@@ -54,12 +57,18 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
     media = _ref.media,
     renderMedia = _ref.renderMedia,
+    _ref$currentStep = _ref.currentStep,
+    currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
     _ref$nextButtonText = _ref.nextButtonText,
     nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
     _ref$previousButtonLa = _ref.previousButtonLabel,
     previousButtonLabel = _ref$previousButtonLa === void 0 ? defaults.previousButtonLabel : _ref$previousButtonLa,
     _ref$closeButtonLabel = _ref.closeButtonLabel,
     closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
+    _ref$onNext = _ref.onNext,
+    onNext = _ref$onNext === void 0 ? defaults.onNext : _ref$onNext,
+    _ref$onBack = _ref.onBack,
+    onBack = _ref$onBack === void 0 ? defaults.onBack : _ref$onBack,
     rest = _objectWithoutProperties(_ref, _excluded);
   var buttonFocusRef = useRef(undefined);
   var scrollRef = useRef(undefined);
@@ -67,7 +76,7 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     _useState2 = _slicedToArray(_useState, 2),
     scrollPosition = _useState2[0],
     setScrollPosition = _useState2[1];
-  var _useState3 = useState(0),
+  var _useState3 = useState(currentStep),
     _useState4 = _slicedToArray(_useState3, 2),
     currentProgStep = _useState4[0],
     _setCurrentProgStep = _useState4[1];
@@ -90,6 +99,15 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
       playStep: currentProgStep
     });
   }, [currentProgStep, renderMedia]);
+  useEffect(function () {
+    var _scrollRef$current, _scrollRef$current$sc;
+    // When current step is set by props
+    // scroll to the appropriate view on the carrousel
+    var targetStep = clamp(currentStep, progStepFloor, progStepCeil);
+    scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
+    // Avoid circular call to this hook
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStep]);
   useEffect(function () {
     // On mount, one of the two primary buttons ("next" or "close")
     // will be rendered and must have focus. (a11y)
@@ -131,7 +149,6 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
   }, coachmark.closeButtonProps, {
     ref: buttonFocusRef
   }), closeButtonLabel))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Carousel, {
-    disableArrowScroll: true,
     ref: scrollRef,
     onScroll: function onScroll(scrollPercent) {
       setScrollPosition(scrollPercent);
@@ -146,10 +163,11 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     title: previousButtonLabel,
     disabled: scrollPosition === 0,
     onClick: function onClick() {
-      var _scrollRef$current, _scrollRef$current$sc;
+      var _scrollRef$current2, _scrollRef$current2$s;
       var targetStep = clamp(currentProgStep - 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
       setCurrentProgStep(targetStep);
+      onBack === null || onBack === void 0 || onBack();
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React__default.createElement(Button, {
     size: "sm",
@@ -157,10 +175,11 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     title: nextButtonText,
     disabled: scrollPosition === 1,
     onClick: function onClick() {
-      var _scrollRef$current2, _scrollRef$current2$s;
+      var _scrollRef$current3, _scrollRef$current3$s;
       var targetStep = clamp(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 || (_scrollRef$current3$s = _scrollRef$current3.scrollToView) === null || _scrollRef$current3$s === void 0 || _scrollRef$current3$s.call(_scrollRef$current3, targetStep);
       setCurrentProgStep(targetStep);
+      onNext === null || onNext === void 0 || onNext();
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React__default.createElement(Button, _extends({
     size: "sm",
@@ -194,6 +213,10 @@ CoachmarkOverlayElements.propTypes = {
    * The label for the Close button.
    */
   closeButtonLabel: PropTypes.string,
+  /**
+   * Current step of the coachmarks
+   */
+  currentStep: PropTypes.number,
   /**
    * The visibility of CoachmarkOverlayElements is
    * managed in the parent component.
@@ -215,6 +238,14 @@ CoachmarkOverlayElements.propTypes = {
    * The label for the Next button.
    */
   nextButtonText: PropTypes.string,
+  /**
+   * Optional callback called when clicking on the Previous button.
+   */
+  onBack: PropTypes.func,
+  /**
+   * Optional callback called when clicking on the Next button.
+   */
+  onNext: PropTypes.func,
   /**
    * The label for the Previous button.
    */

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { Button, Tooltip, Tag, usePrefix, FlexGrid, Row, Column } from '@carbon/react';
+import { Button, Tooltip, Tag, usePrefix, FlexGrid, Row, Column, DefinitionTooltip } from '@carbon/react';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { string_required_if_more_than_10_tags, TagSet } from '../TagSet/TagSet.js';
 import { spacing, baseFontSize, breakpoints } from '@carbon/layout';
@@ -19,6 +19,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { checkHeightOverflow } from '../../global/js/utils/checkForOverflow.js';
 import { useNearestScroll } from '../../global/js/hooks/useWindowScroll.js';
 import { useWindowResize } from '../../global/js/hooks/useWindowResize.js';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js';
@@ -361,6 +362,12 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   };
   var displayedBreadcrumbs = getBreadcrumbs();
+  var subtitleRef = useRef(null);
+  var isOverflowing = checkHeightOverflow(subtitleRef.current);
+  var subtitleContent = /*#__PURE__*/React__default.createElement("span", {
+    ref: subtitleRef,
+    className: "".concat(blockClass, "__subtitle-text")
+  }, subtitle);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
@@ -412,11 +419,14 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     blockClass: blockClass,
     hasBreadcrumbRow: hasBreadcrumbRow,
     title: title
-  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/React__default.createElement(Row, {
+  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle && /*#__PURE__*/React__default.createElement(Row, {
     className: "".concat(blockClass, "__subtitle-row")
   }, /*#__PURE__*/React__default.createElement(Column, {
     className: "".concat(blockClass, "__subtitle")
-  }, subtitle)) : null, children ? /*#__PURE__*/React__default.createElement(Row, {
+  }, isOverflowing ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+    definition: subtitle,
+    className: "".concat(blockClass, "__subtitle-tooltip")
+  }, subtitleContent) : subtitleContent)), children ? /*#__PURE__*/React__default.createElement(Row, {
     className: "".concat(blockClass, "__available-row")
   }, /*#__PURE__*/React__default.createElement(Column, {
     className: "".concat(blockClass, "__available-column")

package/es/components/PageHeader/PageHeaderTitle.js

@@ -5,12 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef, useLayoutEffect } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { SkeletonText, DefinitionTooltip } from '@carbon/react';
 import { EditInPlace } from '../EditInPlace/EditInPlace.js';
+import { checkWidthOverflow } from '../../global/js/utils/checkForOverflow.js';
 
 var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
@@ -43,31 +44,18 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     rest = _objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    isEllipsisApplied = _useState2[0],
-    setIsEllipsisApplied = _useState2[1];
-  var longTitleRef = useRef(undefined);
-  var titleRef = useRef(undefined);
-  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 = useRef();
+  var isEllipsisApplied = checkWidthOverflow(titleRef.current);
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
     var TitleIcon = icon;
+    var titleContent = /*#__PURE__*/React__default.createElement("span", {
+      ref: titleRef,
+      className: "".concat(blockClass, "__titleText")
+    }, text);
     titleInnards = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && !loading ? /*#__PURE__*/React__default.createElement("span", {
       className: "".concat(blockClass, "__title-icon-wrapper")
     }, /*#__PURE__*/React__default.createElement(TitleIcon, {
@@ -90,14 +78,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       align: tooltipAlignment,
       definition: text,
       className: "".concat(blockClass, "__tooltip")
-    }, /*#__PURE__*/React__default.createElement("span", {
-      ref: longTitleRef,
-      className: "".concat(blockClass, "__titleText")
-    }, text)) : /*#__PURE__*/React__default.createElement("span", {
-      ref: titleRef,
-      className: "".concat(blockClass, "__titleText"),
-      title: !loading ? asText : null
-    }, text));
+    }, titleContent) : titleContent);
   } else {
     titleInnards = content;
     titleText = asText;

package/es/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/es/global/js/utils/checkForOverflow.js

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+// 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;
+};
+
+export { checkHeightOverflow, checkWidthOverflow };

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts

@@ -46,6 +46,18 @@ export interface CoachmarkOverlayElementsProps {
      * The label for the Close button.
      */
     closeButtonLabel?: string;
+    /**
+     * Callback called when clicking on the Next button.
+     */
+    onNext?: () => void;
+    /**
+     * Callback called when clicking on the Previous button.
+     */
+    onBack?: () => void;
+    /**
+     * Current step of the coachmarks.
+     */
+    currentStep?: number;
 }
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -22,7 +22,7 @@ var settings = require('../../settings.js');
 require('../Coachmark/Coachmark.js');
 var context = require('../Coachmark/utils/context.js');
 
-var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
+var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "currentStep", "nextButtonText", "previousButtonLabel", "closeButtonLabel", "onNext", "onBack"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay-elements");
@@ -43,7 +43,10 @@ var defaults = {
   isVisible: false,
   nextButtonText: 'Next',
   previousButtonLabel: 'Back',
-  closeButtonLabel: 'Got it'
+  closeButtonLabel: 'Got it',
+  onNext: undefined,
+  onBack: undefined,
+  currentStep: 0
 };
 /**
  * Composable container to allow for the displaying of CoachmarkOverlayElement
@@ -56,12 +59,18 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
     media = _ref.media,
     renderMedia = _ref.renderMedia,
+    _ref$currentStep = _ref.currentStep,
+    currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
     _ref$nextButtonText = _ref.nextButtonText,
     nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
     _ref$previousButtonLa = _ref.previousButtonLabel,
     previousButtonLabel = _ref$previousButtonLa === void 0 ? defaults.previousButtonLabel : _ref$previousButtonLa,
     _ref$closeButtonLabel = _ref.closeButtonLabel,
     closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
+    _ref$onNext = _ref.onNext,
+    onNext = _ref$onNext === void 0 ? defaults.onNext : _ref$onNext,
+    _ref$onBack = _ref.onBack,
+    onBack = _ref$onBack === void 0 ? defaults.onBack : _ref$onBack,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var buttonFocusRef = React.useRef(undefined);
   var scrollRef = React.useRef(undefined);
@@ -69,7 +78,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     scrollPosition = _useState2[0],
     setScrollPosition = _useState2[1];
-  var _useState3 = React.useState(0),
+  var _useState3 = React.useState(currentStep),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     currentProgStep = _useState4[0],
     _setCurrentProgStep = _useState4[1];
@@ -92,6 +101,15 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
       playStep: currentProgStep
     });
   }, [currentProgStep, renderMedia]);
+  React.useEffect(function () {
+    var _scrollRef$current, _scrollRef$current$sc;
+    // When current step is set by props
+    // scroll to the appropriate view on the carrousel
+    var targetStep = lodash.clamp(currentStep, progStepFloor, progStepCeil);
+    scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
+    // Avoid circular call to this hook
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStep]);
   React.useEffect(function () {
     // On mount, one of the two primary buttons ("next" or "close")
     // will be rendered and must have focus. (a11y)
@@ -133,7 +151,6 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
   }, coachmark.closeButtonProps, {
     ref: buttonFocusRef
   }), closeButtonLabel))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Carousel.Carousel, {
-    disableArrowScroll: true,
     ref: scrollRef,
     onScroll: function onScroll(scrollPercent) {
       setScrollPosition(scrollPercent);
@@ -148,10 +165,11 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     title: previousButtonLabel,
     disabled: scrollPosition === 0,
     onClick: function onClick() {
-      var _scrollRef$current, _scrollRef$current$sc;
+      var _scrollRef$current2, _scrollRef$current2$s;
       var targetStep = lodash.clamp(currentProgStep - 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
       setCurrentProgStep(targetStep);
+      onBack === null || onBack === void 0 || onBack();
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React.createElement(react.Button, {
     size: "sm",
@@ -159,10 +177,11 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     title: nextButtonText,
     disabled: scrollPosition === 1,
     onClick: function onClick() {
-      var _scrollRef$current2, _scrollRef$current2$s;
+      var _scrollRef$current3, _scrollRef$current3$s;
       var targetStep = lodash.clamp(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
+      scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 || (_scrollRef$current3$s = _scrollRef$current3.scrollToView) === null || _scrollRef$current3$s === void 0 || _scrollRef$current3$s.call(_scrollRef$current3, targetStep);
       setCurrentProgStep(targetStep);
+      onNext === null || onNext === void 0 || onNext();
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
     size: "sm",
@@ -196,6 +215,10 @@ exports.CoachmarkOverlayElements.propTypes = {
    * The label for the Close button.
    */
   closeButtonLabel: index.default.string,
+  /**
+   * Current step of the coachmarks
+   */
+  currentStep: index.default.number,
   /**
    * The visibility of CoachmarkOverlayElements is
    * managed in the parent component.
@@ -217,6 +240,14 @@ exports.CoachmarkOverlayElements.propTypes = {
    * The label for the Next button.
    */
   nextButtonText: index.default.string,
+  /**
+   * Optional callback called when clicking on the Previous button.
+   */
+  onBack: index.default.func,
+  /**
+   * Optional callback called when clicking on the Next button.
+   */
+  onNext: index.default.func,
   /**
    * The label for the Previous button.
    */

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/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.54.0-canary.71+1c918d160",
+  "version": "2.54.0-canary.74+26394dd2b",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.52.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.50.0-canary.74+26394dd2b",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "1c918d1605f2a370988d7ade503c1e57e0d43df1"
+  "gitHead": "26394dd2b740f19306e8fbbbd6c2195fc5a3bbed"
 }

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');