@carbon/ibm-products 2.43.2-canary.307 → 2.43.2-canary.308

package/es/components/PageHeader/PageHeaderTitle.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+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 PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { SkeletonText } from '@carbon/react';
+import { SkeletonText, DefinitionTooltip } from '@carbon/react';
 import { EditInPlace } from '../EditInPlace/EditInPlace.js';
 
-var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription"];
+var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
 /**
  *
@@ -38,18 +38,41 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     editableLabel = title.editableLabel,
     cancelDescription = title.cancelDescription,
     saveDescription = title.saveDescription,
+    _title$tooltipAlignme = title.tooltipAlignment,
+    tooltipAlignment = _title$tooltipAlignme === void 0 ? 'bottom' : _title$tooltipAlignme,
     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;
+  };
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
     var TitleIcon = icon;
-    titleInnards = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && !loading ? /*#__PURE__*/React__default.createElement(TitleIcon, {
+    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, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, loading ? /*#__PURE__*/React__default.createElement(SkeletonText, {
+    })) : null, loading ? /*#__PURE__*/React__default.createElement(SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
     }) : isEditable ? /*#__PURE__*/React__default.createElement(EditInPlace, _extends({
       tooltipAlignment: "bottom",
@@ -62,7 +85,17 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave: onSave,
       size: "md",
       inheritTypography: true
-    }, rest)) : /*#__PURE__*/React__default.createElement("span", {
+    }, rest)) : isEllipsisApplied ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+      openOnHover: false,
+      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));
   } else {
@@ -117,7 +150,8 @@ PageHeaderTitle.propTypes = {
     onChange: PropTypes.func,
     onSave: PropTypes.func,
     cancelDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
-    saveDescription: PropTypes.string.isRequired.if(editInPlaceRequired)
+    saveDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), PropTypes.string, PropTypes.shape({
     content: PropTypes.node.isRequired,

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

@@ -149,6 +149,7 @@ interface TitleIcon {
     cancelDescription?: string;
     editDescription?: string;
     saveDescription?: string;
+    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
 }
 interface TitleContent {
     content: ReactNode;
@@ -269,6 +270,7 @@ interface PageHeaderBaseProps extends PropsWithChildren {
      *    - editableLabel: label for edit required if onChange supplied
      *    - cancelDescription: label for edit cancel button
      *    - saveDescription: label for edit save button
+     *    - tooltipAlignment: position for tooltip displayed for large titles. Default to "bottom"
      * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
      *    - content: title or name of current location shown in main part of page header
      *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied

package/lib/components/PageHeader/PageHeader.js

@@ -790,6 +790,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *    - editableLabel: label for edit required if onChange supplied
    *    - cancelDescription: label for edit cancel button
    *    - saveDescription: label for edit save button
+   *    - tooltipAlignment: position for tooltip displayed for large titles. Default to "bottom".
    * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
    *    - content: title or name of current location shown in main part of page header
    *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
@@ -814,7 +815,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     //.isRequired.if(editInPlaceRequired),
     editDescription: index.default.string,
     // .isRequired.if(editInPlaceRequired),
-    saveDescription: index.default.string //.isRequired.if(editInPlaceRequired),
+    saveDescription: index.default.string,
+    //.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), index.default.string, index.default.shape({
     content: index.default.node.isRequired,

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

@@ -18,6 +18,7 @@ export namespace PageHeaderTitle {
             onSave: PropTypes.Requireable<(...args: any[]) => any>;
             cancelDescription: any;
             saveDescription: any;
+            tooltipAlignment: PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             content: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
             breadcrumbContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -14,7 +14,7 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var EditInPlace = require('../EditInPlace/EditInPlace.js');
 
-var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription"];
+var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
 /**
  *
@@ -40,18 +40,41 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     editableLabel = title.editableLabel,
     cancelDescription = title.cancelDescription,
     saveDescription = title.saveDescription,
+    _title$tooltipAlignme = title.tooltipAlignment,
+    tooltipAlignment = _title$tooltipAlignme === void 0 ? 'bottom' : _title$tooltipAlignme,
     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;
+  };
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
     var TitleIcon = icon;
-    titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement(TitleIcon, {
+    titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "__title-icon-wrapper")
+    }, /*#__PURE__*/React.createElement(TitleIcon, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
+    })) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
     }) : isEditable ? /*#__PURE__*/React.createElement(EditInPlace.EditInPlace, _rollupPluginBabelHelpers.extends({
       tooltipAlignment: "bottom",
@@ -64,7 +87,17 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave: onSave,
       size: "md",
       inheritTypography: true
-    }, rest)) : /*#__PURE__*/React.createElement("span", {
+    }, rest)) : isEllipsisApplied ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
+      openOnHover: false,
+      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));
   } else {
@@ -119,7 +152,8 @@ PageHeaderTitle.propTypes = {
     onChange: index.default.func,
     onSave: index.default.func,
     cancelDescription: index.default.string.isRequired.if(editInPlaceRequired),
-    saveDescription: index.default.string.isRequired.if(editInPlaceRequired)
+    saveDescription: index.default.string.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), index.default.string, index.default.shape({
     content: index.default.node.isRequired,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.307+911c341d2",
+  "version": "2.43.2-canary.308+ed578ec0d",
   "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.23.1",
-    "@carbon/ibm-products-styles": "^2.39.1-canary.317+911c341d2",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.318+ed578ec0d",
     "@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": "911c341d258b410ff2109ecb39293c2670796a0e"
+  "gitHead": "ed578ec0d45dcd72a7c96fd1e8370d4a67019ec6"
 }

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

@@ -433,13 +433,26 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
   }
 
+  .#{$block-class}__tooltip {
+    min-width: 0;
+    flex-basis: auto;
+
+    button {
+      border-block-end: none;
+      cursor: default;
+    }
+  }
+  .#{$block-class}__titleText {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .#{$block-class}__title {
     @include type.type-style('heading-04');
 
+    display: flex;
     min-height: $spacing-08;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   .#{$block-class}__title--editable {