@carbon/ibm-products 2.58.0 → 2.59.0

package/es/components/Tearsheet/Tearsheet.js

@@ -8,7 +8,7 @@
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button } from '@carbon/react';
 import React__default from 'react';
-import { tearsheetHasCloseIcon, portalType, TearsheetShell } from './TearsheetShell.js';
+import { portalType, TearsheetShell } from './TearsheetShell.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import PropTypes from '../../_virtual/index.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
@@ -19,14 +19,6 @@ var _excluded = ["influencerPosition", "influencerWidth"];
 var componentName = 'Tearsheet';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-/**
- * The accessibility title for the close icon (if shown).
- *
- * **Note:** This prop is only required if a close icon is shown, i.e. if
- * there are a no navigation actions and/or hasCloseIcon is true.
- */
-
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
@@ -122,15 +114,8 @@ Tearsheet.propTypes = _objectSpread2({
   /**
    * The accessibility title for the close icon (if shown).
    *
-   * **Note:** This prop is only required if a close icon is shown, i.e. if
-   * there are a no navigation actions and/or hasCloseIcon is true.
    */
-  /**@ts-ignore */
-  closeIconDescription: PropTypes.string.isRequired.if(function (_ref2) {
-    var actions = _ref2.actions,
-      hasCloseIcon = _ref2.hasCloseIcon;
-    return tearsheetHasCloseIcon(actions, hasCloseIcon);
-  }),
+  closeIconDescription: PropTypes.string,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -143,7 +128,6 @@ Tearsheet.propTypes = _objectSpread2({
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
-  /**@ts-ignore */
   hasCloseIcon: PropTypes.bool,
   /**
    * The content for the header actions area, displayed alongside the title in

package/es/components/Tearsheet/TearsheetNarrow.d.ts

@@ -6,10 +6,9 @@
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
 import { ButtonProps } from '@carbon/react';
-import { CloseIconDescriptionTypes } from './TearsheetShell';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-interface TearsheetNarrowBaseProps extends PropsWithChildren {
+export interface TearsheetNarrowProps extends PropsWithChildren {
     /**
      * The navigation actions to be shown as buttons in the action area at the
      * bottom of the tearsheet. Each action is specified as an object with
@@ -33,6 +32,11 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * The accessibility title for the close icon (if shown).
+     *
+     */
+    closeIconDescription?: string;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */
@@ -90,7 +94,6 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      */
     verticalPosition?: 'normal' | 'lower';
 }
-export type TearsheetNarrowProps = TearsheetNarrowBaseProps & CloseIconDescriptionTypes;
 /**
  * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
  * that keeps users in-context and focused by bringing actionable content front
@@ -112,4 +115,3 @@ export declare const deprecatedProps: {
      */
     verticalPosition: PropTypes.Requireable<string>;
 };
-export {};

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -7,7 +7,7 @@
 
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button } from '@carbon/react';
-import { tearsheetHasCloseIcon, portalType, TearsheetShell, tearsheetShellWideProps } from './TearsheetShell.js';
+import { portalType, TearsheetShell, tearsheetShellWideProps } from './TearsheetShell.js';
 import React__default from 'react';
 import { allPropTypes, prepareProps } from '../../global/js/utils/props-helper.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
@@ -107,15 +107,8 @@ TearsheetNarrow.propTypes = _objectSpread2({
   /**
    * The accessibility title for the close icon (if shown).
    *
-   * **Note:** This prop is only required if a close icon is shown, i.e. if
-   * there are a no navigation actions and/or hasCloseIcon is true.
    */
-  /**@ts-ignore */
-  closeIconDescription: PropTypes.string.isRequired.if(function (_ref2) {
-    var actions = _ref2.actions,
-      hasCloseIcon = _ref2.hasCloseIcon;
-    return tearsheetHasCloseIcon(actions, hasCloseIcon);
-  }),
+  closeIconDescription: PropTypes.string,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -126,7 +119,6 @@ TearsheetNarrow.propTypes = _objectSpread2({
    * the tearsheet is read-only or has no navigation actions (sometimes called
    * a "passive tearsheet").
    */
-  /**@ts-ignore*/
   hasCloseIcon: PropTypes.bool,
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet

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

@@ -14,6 +14,13 @@ interface TearsheetShellProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * The accessibility title for the close icon (if shown).
+     *
+     * **Note:** This prop is only required if a close icon is shown, i.e. if
+     * there are a no navigation actions and/or hasCloseIcon is true.
+     */
+    closeIconDescription?: string;
     /**
      * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
      */
@@ -118,13 +125,6 @@ interface TearsheetShellProps extends PropsWithChildren {
      */
     slug?: ReactNode;
 }
-export type CloseIconDescriptionTypes = {
-    hasCloseIcon?: false;
-    closeIconDescription?: string;
-} | {
-    hasCloseIcon: true;
-    closeIconDescription: string;
-};
 export declare const tearsheetShellWideProps: string[];
 export declare const tearsheetIsPassive: (actions: any) => boolean;
 export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) => any;
@@ -135,7 +135,7 @@ export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) =>
  *
  * See the canvas tab for the component API details.
  * */
-export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetShellProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare const TearsheetShell: React.ForwardRefExoticComponent<TearsheetShellProps & React.RefAttributes<HTMLDivElement>>;
 export declare const portalType: PropTypes.Requireable<object>;
 export declare const deprecatedProps: {
     /**

package/es/components/Tearsheet/TearsheetShell.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useCallback, useState, useEffect } from 'react';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useEffect } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -14,12 +14,14 @@ import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
 import { deprecateProp } from '../../global/js/utils/props-helper.js';
-import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer } from '@carbon/react';
+import { checkHeightOverflow } from '../../global/js/utils/checkForOverflow.js';
+import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer, DefinitionTooltip } from '@carbon/react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
+import { useIsomorphicEffect } from '../../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).
@@ -67,7 +69,8 @@ var TearsheetShell = /*#__PURE__*/React__default.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,
@@ -104,12 +107,12 @@ var TearsheetShell = /*#__PURE__*/React__default.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 = useCallback(function (input) {
-    return input.replace(/<\/?[^>]+(>|$)/g, '');
-  }, []);
-  var titleText = stripTags(String(description));
+  var descriptionRef = useRef(null);
+  var isOverflowing = checkHeightOverflow(descriptionRef.current);
+  var descriptionContent = /*#__PURE__*/React__default.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)
@@ -189,6 +192,25 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       }
     };
   }, [open, size]);
+  var areAllSameSizeVariant = function areAllSameSizeVariant() {
+    return new Set(stack.sizes).size === 1;
+  };
+  useIsomorphicEffect(function () {
+    var setScaleValues = function setScaleValues() {
+      if (!areAllSameSizeVariant()) {
+        return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), 1), "--".concat(bc, "--stacking-scale-factor-double"), 1);
+      }
+      return _defineProperty(_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 = _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.
@@ -198,15 +220,9 @@ var TearsheetShell = /*#__PURE__*/React__default.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 _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), 1), "--".concat(bc, "--stacking-scale-factor-double"), 1);
-      }
-      return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
-    };
     return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
       enableExperimentalFocusWrapWithoutSentinels: true
     }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
@@ -215,8 +231,7 @@ var TearsheetShell = /*#__PURE__*/React__default.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"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
+      containerClassName: cx("".concat(bc, "__container"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !_areAllSameSizeVariant())),
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
@@ -242,9 +257,11 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       element: "h3",
       className: cx("".concat(bcModalHeader, "__heading"), "".concat(bc, "__heading"))
     }, title), /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__header-description"),
-      title: titleText
-    }, description)), /*#__PURE__*/React__default.createElement(Wrap, {
+      className: "".concat(bc, "__header-description")
+    }, isOverflowing ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+      definition: description,
+      className: "".concat(bc, "__description-tooltip")
+    }, descriptionContent) : descriptionContent)), /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__header-actions")
     }, headerActions)), /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__header-navigation")
@@ -354,11 +371,7 @@ TearsheetShell.propTypes = _objectSpread2({
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
   /**@ts-ignore*/
-  closeIconDescription: PropTypes.string.isRequired.if(function (_ref4) {
-    var actions = _ref4.actions,
-      hasCloseIcon = _ref4.hasCloseIcon;
-    return tearsheetHasCloseIcon(actions, hasCloseIcon);
-  }),
+  closeIconDescription: PropTypes.string,
   /**
    * Optional prop that allows you to pass any component.
    */

package/es/components/TruncatedList/TruncatedList.js

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

package/es/components/WebTerminal/WebTerminal.js

@@ -8,7 +8,7 @@
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectDestructuringEmpty as _objectDestructuringEmpty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { OverflowMenuItem, OverflowMenu, Button, Theme } from '@carbon/react';
 import { Help, Close } from '@carbon/react/icons';
-import React__default, { useState, useMemo, useEffect } from 'react';
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -16,6 +16,7 @@ import { moderate02 } from '@carbon/motion';
 import { pkg } from '../../settings.js';
 import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
 import { useWebTerminal } from './hooks/index.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
 
@@ -49,6 +50,8 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$webTerminalAriaL = _ref.webTerminalAriaLabel,
     webTerminalAriaLabel = _ref$webTerminalAriaL === void 0 ? defaults.webTerminalAriaLabel : _ref$webTerminalAriaL,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var localRef = useRef();
+  var webTerminalRef = ref !== null && ref !== void 0 ? ref : localRef;
   var _useWebTerminal = useWebTerminal(),
     open = _useWebTerminal.open,
     closeWebTerminal = _useWebTerminal.closeWebTerminal,
@@ -59,6 +62,16 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     setRender = _useState2[1];
   var shouldReduceMotion = usePrefersReducedMotion();
   var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(moderate02);
+  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 = useMemo(function () {
     return documentationLinks.length > 0;
   }, [documentationLinks]);
@@ -96,11 +109,8 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
   };
   return shouldRender ? /*#__PURE__*/React__default.createElement("div", _extends({}, _objectSpread2(_objectSpread2({}, rest), getDevtoolsProps(componentName)), {
-    ref: ref,
+    ref: webTerminalRef,
     className: cx([blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
-    style: {
-      animation: !shouldReduceMotion ? webTerminalAnimationName : ''
-    },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default.createElement("header", {
     "aria-label": webTerminalAriaLabel,

package/es/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/es/global/js/hooks/useOverflowItems.js

@@ -0,0 +1,88 @@
+/**
+ * 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.
+ */
+
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useRef, useState } from 'react';
+import { useResizeObserver } from './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 = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    maxWidth = _useState2[0],
+    setMaxWidth = _useState2[1];
+  var visibleItemCount = 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(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
+  };
+};
+
+export { useOverflowItems };

package/lib/components/ConditionBuilder/ConditionBuilder.types.d.ts

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { TextAreaProps, TextInputProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/react/icons';
+import { CarbonIconType } from '@carbon/icons-react';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
 import { Dispatch, ForwardedRef, PropsWithChildren, ReactNode, SetStateAction } from 'react';
 export type LogicalOperator = 'and' | 'or';

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js

@@ -154,7 +154,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     onChange: onSearchChangeHandler
   })), multiSelectable && /*#__PURE__*/React.createElement("div", {
     className: "".concat(util.blockClass, "__multiselectSelectionStatusContainer")
-  }, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement("label", null, selection.length, "/", allOptions.length, " Selected")), /*#__PURE__*/React.createElement(react.Button, {
+  }, /*#__PURE__*/React.createElement("label", null, selection.length, "/", allOptions.length, " Selected"), /*#__PURE__*/React.createElement(react.Button, {
     kind: 'ghost',
     size: 'sm',
     "data-selected-all": "".concat(selection.length == 0 ? true : false),

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -378,7 +378,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, renderRowHeader, renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
+  }, [prepareRow, renderRowHeader, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, columns, defaultColumn, renderRowHeaderDirection]);
   var spreadsheetBodyRef = React.useRef(undefined);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     ref: spreadsheetBodyRef,

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -174,6 +174,9 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       return window.removeEventListener('keydown', close);
     };
   }, [handleClose]);
+  var stepSize = React.useMemo(function () {
+    return children && React.Children.count(children) > 1 ? parseFloat((1 / (React.Children.count(children) - 1)).toFixed(2)) : 0;
+  }, [children]);
   if (!isOpen) {
     return null;
   }
@@ -239,6 +242,10 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       }
     })))), childElements, renderFooter()));
   };
+  var scrollToCurrentStep = function scrollToCurrentStep(scrollPercent) {
+    var currentStep = scrollPercent / stepSize;
+    setProgStep(Math.ceil(currentStep));
+  };
   var renderBody = function renderBody() {
     return /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "--body")),
@@ -261,9 +268,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
       disableArrowScroll: true,
       ref: scrollRef,
-      onScroll: function onScroll(scrollPercent) {
-        scrollPercent === 0 && setProgStep(0);
-      }
+      onScroll: scrollToCurrentStep
     }, children)) : childArray[0])), mediaIsDefined && /*#__PURE__*/React.createElement(react.Column, {
       xlg: mediaBreakpoints.xlg,
       lg: mediaBreakpoints.lg,
@@ -283,9 +288,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
       disableArrowScroll: true,
       ref: scrollRef,
-      onScroll: function onScroll(scrollPercent) {
-        scrollPercent === 0 && setProgStep(0);
-      }
+      onScroll: scrollToCurrentStep
     }, children)) : /*#__PURE__*/React.createElement("div", null, childArray[0])));
   };
   var renderFooter = function renderFooter() {

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -29,6 +29,7 @@ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMo
 var wrapFocus = require('../../global/js/utils/wrapFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _Close;
 var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "selectorsFloatingMenus", "triggerButtonRef"];
@@ -378,6 +379,17 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     onDismissSingleNotification(notification);
   };
   var mainSectionClassName = cx(["".concat(blockClass, "__main-section"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    // setTimeout ensures that this gets run
+    var timeout = setTimeout(function () {
+      if (notificationPanelRef.current && !reducedMotion) {
+        notificationPanelRef.current.style.animation = open ? 'fade-in 250ms' : 'fade-out forwards 250ms';
+      }
+    }, 0);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [open, reducedMotion]);
   return shouldRender ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "".concat(carbonPrefix, "--visually-hidden"),
@@ -391,9 +403,6 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, rest, {
     id: blockClass,
     className: cx(blockClass, className, "".concat(blockClass, "__container")),
-    style: {
-      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : undefined
-    },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {

package/lib/components/PageHeader/PageHeader.js

@@ -24,6 +24,7 @@ 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 useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 var BreadcrumbWithOverflow = require('../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js');
 var ActionBar = require('../ActionBar/ActionBar.js');
 var ButtonSetWithOverflow = require('../ButtonSetWithOverflow/ButtonSetWithOverflow.js');
@@ -364,6 +365,16 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var displayedBreadcrumbs = getBreadcrumbs();
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    Object.keys(pageHeaderStyles).forEach(function (key) {
+      // check if style is a css var
+      if (key.startsWith('--')) {
+        headerRef.current.style.setProperty(key, pageHeaderStyles[key]);
+      } else {
+        headerRef.current.style[key] = pageHeaderStyles[key];
+      }
+    });
+  }, [headerRef, pageHeaderStyles]);
   var subtitleRef = React.useRef(null);
   var isOverflowing = checkForOverflow.checkHeightOverflow(subtitleRef.current);
   var subtitleContent = /*#__PURE__*/React.createElement("span", {
@@ -375,7 +386,6 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/React.createElement("section", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx([PageHeaderUtils.blockClass, "".concat(PageHeaderUtils.blockClass, "--no-margins-below-row"), className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), "".concat(PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags)]),
-    style: pageHeaderStyles,
     ref: headerRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.FlexGrid, {
     fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',