@carbon/ibm-products 2.58.0 → 2.59.0-rc.0

package/lib/components/Tearsheet/TearsheetShell.js

@@ -16,12 +16,14 @@ var settings = require('../../settings.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var getNodeTextContent = require('../../global/js/utils/getNodeTextContent.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
+var checkForOverflow = require('../../global/js/utils/checkForOverflow.js');
 var react = require('@carbon/react');
 var ActionSet = require('../ActionSet/ActionSet.js');
 var Wrap = require('../../global/js/utils/Wrap.js');
 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 useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["actions", "decorator", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "hasError", "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).
@@ -69,7 +71,8 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
-    closeIconDescription = _ref.closeIconDescription,
+    _ref$closeIconDescrip = _ref.closeIconDescription,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close' : _ref$closeIconDescrip,
     currentStep = _ref.currentStep,
     description = _ref.description,
     hasCloseIcon = _ref.hasCloseIcon,
@@ -106,12 +109,12 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
   var modalRefValue = modalRef.current;
-
-  // Function to strip html tags out of a string.
-  var stripTags = React.useCallback(function (input) {
-    return input.replace(/<\/?[^>]+(>|$)/g, '');
-  }, []);
-  var titleText = stripTags(String(description));
+  var descriptionRef = React.useRef(null);
+  var isOverflowing = checkForOverflow.checkHeightOverflow(descriptionRef.current);
+  var descriptionContent = /*#__PURE__*/React.createElement("span", {
+    ref: descriptionRef,
+    className: "".concat(bc, "__description-text")
+  }, description);
   var wide = size === 'wide';
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
@@ -191,6 +194,25 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     };
   }, [open, size]);
+  var areAllSameSizeVariant = function areAllSameSizeVariant() {
+    return new Set(stack.sizes).size === 1;
+  };
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var setScaleValues = function setScaleValues() {
+      if (!areAllSameSizeVariant()) {
+        return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), 1), "--".concat(bc, "--stacking-scale-factor-double"), 1);
+      }
+      return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
+    };
+    if (modalRef.current) {
+      Object.entries(setScaleValues()).map(function (_ref4) {
+        var _ref5 = _rollupPluginBabelHelpers.slicedToArray(_ref4, 2),
+          key = _ref5[0],
+          value = _ref5[1];
+        modalRef.current.style.setProperty(key, String(value));
+      });
+    }
+  }, [modalRef, width]);
   if (position <= depth) {
     var _prevDepth$current, _decorator$type, _decorator$type2;
     // Include a modal header if and only if one or more of these is given.
@@ -200,15 +222,9 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
-    var areAllSameSizeVariant = function areAllSameSizeVariant() {
+    var _areAllSameSizeVariant = function _areAllSameSizeVariant() {
       return new Set(stack.sizes).size === 1;
     };
-    var setScaleValues = function setScaleValues() {
-      if (!areAllSameSizeVariant()) {
-        return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), 1), "--".concat(bc, "--stacking-scale-factor-double"), 1);
-      }
-      return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
-    };
     return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
       enableExperimentalFocusWrapWithoutSentinels: true
     }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
@@ -217,8 +233,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       // Don't apply this on the initial open of a single tearsheet.
       depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), !!decorator && ((_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) === 'AILabel'), "".concat(bc, "--has-decorator"), !!decorator && ((_decorator$type2 = decorator['type']) === null || _decorator$type2 === void 0 ? void 0 : _decorator$type2.displayName) !== 'AILabel'), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
       decorator: decorator || deprecated_slug,
-      style: setScaleValues(),
-      containerClassName: cx("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
+      containerClassName: cx("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !_areAllSameSizeVariant())),
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
@@ -244,9 +259,11 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       element: "h3",
       className: cx("".concat(bcModalHeader, "__heading"), "".concat(bc, "__heading"))
     }, title), /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__header-description"),
-      title: titleText
-    }, description)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      className: "".concat(bc, "__header-description")
+    }, isOverflowing ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
+      definition: description,
+      className: "".concat(bc, "__description-tooltip")
+    }, descriptionContent) : descriptionContent)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__header-actions")
     }, headerActions)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: "".concat(bc, "__header-navigation")
@@ -356,11 +373,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
   /**@ts-ignore*/
-  closeIconDescription: index.default.string.isRequired.if(function (_ref4) {
-    var actions = _ref4.actions,
-      hasCloseIcon = _ref4.hasCloseIcon;
-    return tearsheetHasCloseIcon(actions, hasCloseIcon);
-  }),
+  closeIconDescription: index.default.string,
   /**
    * Optional prop that allows you to pass any component.
    */

package/lib/components/TruncatedList/TruncatedList.js

@@ -14,6 +14,7 @@ var react = require('@carbon/react');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["children", "className", "as", "buttonClassName", "collapsedItemsLimit", "expandedItemsLimit", "onClick", "viewLessLabel", "viewMoreLabel"];
 
@@ -100,6 +101,11 @@ exports.TruncatedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setListHeight(_listHeight);
     }
   }, [childrenArray, minItems, maxItems, isCollapsed, listRef]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (listRef.current) {
+      listRef.current.style.height = "".concat(listHeight, "px");
+    }
+  }, [listHeight]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className, isCollapsed ? "".concat(blockClass, "--collapsed") : "".concat(blockClass, "--expanded"),
     // If the list is expanded && showing all the items,
@@ -108,10 +114,7 @@ exports.TruncatedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(List, {
     className: "".concat(blockClass, "__list"),
-    ref: listRef,
-    style: {
-      height: listHeight
-    }
+    ref: listRef
   }, isCollapsed ? childrenArray.slice(0, minItems) : children), childrenArray.length > minItems && /*#__PURE__*/React.createElement(react.Button, {
     className: cx("".concat(blockClass, "__button"), "".concat(settings.carbon.prefix, "--link"), buttonClassName),
     kind: "ghost",

package/lib/components/WebTerminal/WebTerminal.js

@@ -18,6 +18,7 @@ var carbonMotion = require('@carbon/motion');
 var settings = require('../../settings.js');
 var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var index$1 = require('./hooks/index.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
 
@@ -51,6 +52,8 @@ exports.WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$webTerminalAriaL = _ref.webTerminalAriaLabel,
     webTerminalAriaLabel = _ref$webTerminalAriaL === void 0 ? defaults.webTerminalAriaLabel : _ref$webTerminalAriaL,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var localRef = React.useRef();
+  var webTerminalRef = ref !== null && ref !== void 0 ? ref : localRef;
   var _useWebTerminal = index$1.useWebTerminal(),
     open = _useWebTerminal.open,
     closeWebTerminal = _useWebTerminal.closeWebTerminal,
@@ -61,6 +64,16 @@ exports.WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setRender = _useState2[1];
   var shouldReduceMotion = usePrefersReducedMotion.default();
   var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(carbonMotion.moderate02);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var timeout = setTimeout(function () {
+      if (webTerminalRef.current && !shouldReduceMotion) {
+        webTerminalRef.current.style.animation = webTerminalAnimationName;
+      }
+    }, 0);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [shouldReduceMotion, webTerminalAnimationName, webTerminalRef]);
   var showDocumentationLinks = React.useMemo(function () {
     return documentationLinks.length > 0;
   }, [documentationLinks]);
@@ -98,11 +111,8 @@ exports.WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
   };
   return shouldRender ? /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), devtools.getDevtoolsProps(componentName)), {
-    ref: ref,
+    ref: webTerminalRef,
     className: cx([blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
-    style: {
-      animation: !shouldReduceMotion ? webTerminalAnimationName : ''
-    },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React.createElement("header", {
     "aria-label": webTerminalAriaLabel,

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

@@ -0,0 +1,16 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { RefObject } from 'react';
+type Item = {
+    id: string;
+};
+export declare const useOverflowItems: <T extends Item>(items: T[] | undefined, containerRef: RefObject<HTMLDivElement>, offsetRef?: RefObject<HTMLDivElement>, maxItems?: number, onChange?: (hiddenItems: T[]) => void) => {
+    visibleItems: T[];
+    itemRefHandler: (id: string, node: HTMLDivElement | null) => () => void;
+    hiddenItems: T[];
+};
+export {};

package/lib/global/js/hooks/useOverflowItems.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var useResizeObserver = require('./useResizeObserver.js');
+
+var useOverflowItems = function useOverflowItems() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var containerRef = arguments.length > 1 ? arguments[1] : undefined;
+  var offsetRef = arguments.length > 2 ? arguments[2] : undefined;
+  var maxItems = arguments.length > 3 ? arguments[3] : undefined;
+  var onChange = arguments.length > 4 ? arguments[4] : undefined;
+  var itemsRef = React.useRef(null);
+  var _useState = React.useState(0),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    maxWidth = _useState2[0],
+    setMaxWidth = _useState2[1];
+  var visibleItemCount = React.useRef(0);
+  var handleResize = function handleResize() {
+    if (containerRef.current) {
+      var _offsetRef$current;
+      var offset = (offsetRef === null || offsetRef === void 0 || (_offsetRef$current = offsetRef.current) === null || _offsetRef$current === void 0 ? void 0 : _offsetRef$current.offsetWidth) || 0;
+      var newMax = containerRef.current.offsetWidth - offset;
+      setMaxWidth(newMax);
+    }
+  };
+  useResizeObserver.useResizeObserver(containerRef, handleResize);
+  var getMap = function getMap() {
+    if (!itemsRef.current) {
+      itemsRef.current = new Map();
+    }
+    return itemsRef.current;
+  };
+  var itemRefHandler = function itemRefHandler(id, node) {
+    var map = getMap();
+    if (node) {
+      var _getComputedStyle;
+      var style = (_getComputedStyle = getComputedStyle) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle(node);
+      var totalWidth = node.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
+      map.set(id, totalWidth);
+    }
+    return function () {
+      map.delete(id);
+    };
+  };
+  var getVisibleItems = function getVisibleItems() {
+    if (!containerRef) {
+      return items;
+    }
+    var map = getMap();
+    var maxReached = false;
+    var accumulatedWidth = 0;
+    var visibleItems = items.slice(0, maxItems).reduce(function (prev, cur) {
+      if (maxReached) {
+        return prev;
+      }
+      var itemWidth = map.get(cur.id) || 0;
+      var willFit = accumulatedWidth + itemWidth <= maxWidth;
+      if (willFit) {
+        accumulatedWidth += itemWidth;
+        prev.push(cur);
+      } else {
+        maxReached = true;
+      }
+      return prev;
+    }, []);
+    return visibleItems;
+  };
+  var visibleItems = getVisibleItems();
+  var hiddenItems = items.slice(visibleItems.length);
+  // only call the change handler when the number of visible items has changed
+  if (visibleItems.length !== visibleItemCount.current) {
+    visibleItemCount.current = visibleItems.length;
+    onChange === null || onChange === void 0 || onChange(hiddenItems);
+  }
+  return {
+    visibleItems: visibleItems,
+    itemRefHandler: itemRefHandler,
+    hiddenItems: hiddenItems
+  };
+};
+
+exports.useOverflowItems = useOverflowItems;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.58.0",
+  "version": "2.59.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.16.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.17.0-rc.0",
     "chalk": "^4.1.2",
     "change-case": "4.1.2",
     "classnames": "^2.5.1",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.17.0",
+    "jest-config-ibm-cloud-cognitive": "^1.18.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^17.1.11",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.54.0",
+    "@carbon/ibm-products-styles": "^2.55.0-rc.0",
     "@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": "a1011556f663c12bbaea5811271fa5e537397a9c"
+  "gitHead": "4fef191d8edeab2fd1bb5ecd379a12b79c043889"
 }

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -24,12 +24,6 @@
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
-// .#{$block-class} {
-//   // TODO: Styles.
-// }
-.#{$block-class} {
-  padding: $spacing-06;
-}
 .#{$block-class}__condition-builder__group {
   display: flex;
 }

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -26,13 +26,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
 $block-class-overflow: #{$block-class}-popover;
 $block-class-modal: #{$block-class}-modal;
 
-.#{$block-class} {
+.#{$block-class}__visible-tags {
   display: flex;
-  width: 100%;
-  min-width: $spacing-12;
-  align-items: center;
-  justify-content: flex-start;
-  white-space: nowrap;
 }
 
 .#{$block-class}--align-end {

package/scss/components/Tearsheet/_tearsheet.scss

@@ -247,15 +247,9 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__header-description {
-    display: -webkit-box;
-    overflow: hidden;
     max-width: 100%;
     margin-top: $spacing-05;
     @include type.type-style('body-compact-01');
-
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-
     @include breakpoint-up('md') {
       max-width: 60%;
     }
@@ -263,6 +257,27 @@ $motion-duration: $duration-moderate-02;
     word-break: break-word;
   }
 
+  .#{$block-class}__description-tooltip .#{$carbon-prefix}--definition-term {
+    border-bottom: 0;
+    letter-spacing: inherit;
+    word-break: break-word;
+  }
+
+  // overwrites the existing styles to make the popover bigger because in some cases the narrow space can be too constricting for the description
+  .#{$block-class}__description-tooltip {
+    display: inline-flex;
+    .#{$carbon-prefix}--popover-content.#{$carbon-prefix}--definition-tooltip {
+      max-inline-size: fit-content;
+    }
+  }
+
+  .#{$block-class}__description-text {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
   &.#{$block-class}--narrow .#{$block-class}__header-description {
     margin-top: $spacing-03;
   }