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

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/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.73+36bd4f96c",
+  "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": "36bd4f96c4d5ab6f3fd5ef1a732e9efbf6ec5212"
+  "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');