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

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ComposedModal, ModalHeader, ProgressIndicator, ProgressStep, ModalBody, ModalFooter, FlexGrid, Row, Column, Button } from '@carbon/react';
-import React__default, { useRef, useState, Children, useCallback, useEffect, isValidElement } from 'react';
+import React__default, { useRef, useState, Children, useCallback, useEffect, useMemo, isValidElement } from 'react';
 import { ArrowRight } from '@carbon/react/icons';
 import { Carousel } from '../Carousel/Carousel.js';
 import '../Carousel/CarouselItem.js';
@@ -172,6 +172,9 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
       return window.removeEventListener('keydown', close);
     };
   }, [handleClose]);
+  var stepSize = useMemo(function () {
+    return children && Children.count(children) > 1 ? parseFloat((1 / (Children.count(children) - 1)).toFixed(2)) : 0;
+  }, [children]);
   if (!isOpen) {
     return null;
   }
@@ -237,6 +240,10 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
       }
     })))), childElements, renderFooter()));
   };
+  var scrollToCurrentStep = function scrollToCurrentStep(scrollPercent) {
+    var currentStep = scrollPercent / stepSize;
+    setProgStep(Math.ceil(currentStep));
+  };
   var renderBody = function renderBody() {
     return /*#__PURE__*/React__default.createElement("div", {
       className: cx("".concat(blockClass, "--body")),
@@ -259,9 +266,7 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
     }, /*#__PURE__*/React__default.createElement(Carousel, {
       disableArrowScroll: true,
       ref: scrollRef,
-      onScroll: function onScroll(scrollPercent) {
-        scrollPercent === 0 && setProgStep(0);
-      }
+      onScroll: scrollToCurrentStep
     }, children)) : childArray[0])), mediaIsDefined && /*#__PURE__*/React__default.createElement(Column, {
       xlg: mediaBreakpoints.xlg,
       lg: mediaBreakpoints.lg,
@@ -281,9 +286,7 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
     }, /*#__PURE__*/React__default.createElement(Carousel, {
       disableArrowScroll: true,
       ref: scrollRef,
-      onScroll: function onScroll(scrollPercent) {
-        scrollPercent === 0 && setProgStep(0);
-      }
+      onScroll: scrollToCurrentStep
     }, children)) : /*#__PURE__*/React__default.createElement("div", null, childArray[0])));
   };
   var renderFooter = function renderFooter() {

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -27,6 +27,7 @@ import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMoti
 import wrapFocus from '../../global/js/utils/wrapFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
+import { useIsomorphicEffect } from '../../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"];
@@ -376,6 +377,17 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onDismissSingleNotification(notification);
   };
   var mainSectionClassName = cx(["".concat(blockClass, "__main-section"), _defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
+  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__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: "".concat(carbonPrefix, "--visually-hidden"),
@@ -389,9 +401,6 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_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
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {

package/es/components/PageHeader/PageHeader.js

@@ -22,6 +22,7 @@ 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 { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js';
 import { ActionBar } from '../ActionBar/ActionBar.js';
 import { ButtonSetWithOverflow } from '../ButtonSetWithOverflow/ButtonSetWithOverflow.js';
@@ -362,6 +363,16 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   };
   var displayedBreadcrumbs = getBreadcrumbs();
+  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 = useRef(null);
   var isOverflowing = checkHeightOverflow(subtitleRef.current);
   var subtitleContent = /*#__PURE__*/React__default.createElement("span", {
@@ -373,7 +384,6 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
     className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--has-navigation"), navigation || tags), "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags)]),
-    style: pageHeaderStyles,
     ref: headerRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(FlexGrid, {
     fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',

package/es/components/ScrollGradient/ScrollGradient.js

@@ -6,13 +6,14 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg, carbon } from '../../settings.js';
 import { throttle } from 'lodash';
-import { ScrollStates, getScrollState, useIsOverflow, ScrollDirection } from './constants.js';
+import { useIsOverflow, ScrollStates, getScrollState, ScrollDirection } from './constants.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "className", "color", "onScroll", "scrollElementClassName", "getScrollElementRef", "hideStartGradient"];
 var blockClass = "".concat(pkg.prefix, "--scroll-gradient");
@@ -42,6 +43,13 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _ref$hideStartGradien = _ref.hideStartGradient,
     hideStartGradient = _ref$hideStartGradien === void 0 ? defaults.hideStartGradient : _ref$hideStartGradien,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var scrollContainer = useRef(undefined);
+  var contentChildrenContainer = useRef(undefined);
+  var _useIsOverflow = useIsOverflow(scrollContainer),
+    xScrollable = _useIsOverflow.xScrollable,
+    yScrollable = _useIsOverflow.yScrollable;
+  var gradientRight = yScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetWidth - contentChildrenContainer.current.offsetWidth : 0;
+  var gradientBottom = xScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetHeight - contentChildrenContainer.current.offsetHeight : 0;
   var _useState = useState(ScrollStates.NONE),
     _useState2 = _slicedToArray(_useState, 2),
     verticalPosition = _useState2[0],
@@ -50,8 +58,26 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState4 = _slicedToArray(_useState3, 2),
     horizontalPosition = _useState4[0],
     setHorizontalPosition = _useState4[1];
-  var scrollContainer = useRef(undefined);
-  var contentChildrenContainer = useRef(undefined);
+  var startVerticalRef = useRef(null);
+  var startHorizontalRef = useRef(null);
+  var endVerticalRef = useRef(null);
+  var endHorizontalRef = useRef(null);
+  useIsomorphicEffect(function () {
+    // start vertical styles
+    startVerticalRef.current.style.right = gradientRight;
+    startVerticalRef.current.style.backgroundImage = "linear-gradient(0deg, transparent, ".concat(color, " 90%)");
+    // start horizontal styles
+    startHorizontalRef.current.backgroundImage = "linear-gradient(-90deg, transparent, ".concat(color, " 90%)");
+    startHorizontalRef.current.bottom = gradientBottom;
+    // end vertical styles
+    endVerticalRef.current.style.right = gradientRight;
+    endVerticalRef.current.style.bottom = gradientBottom;
+    endVerticalRef.current.style.backgroundImage = "linear-gradient(0deg, ".concat(color, " 10%, transparent)");
+    // end horizontal styles
+    endHorizontalRef.current.style.right = gradientRight;
+    endHorizontalRef.current.style.bottom = gradientBottom;
+    endHorizontalRef.current.style.backgroundImage = "linear-gradient(-90deg, ".concat(color, " 10%, transparent)");
+  }, [color, gradientRight, gradientBottom]);
   var updateScrollState = throttle(function () {
     var updatedVerticalVal = getScrollState(scrollContainer.current, ScrollDirection.Y);
     var updatedHorizontalVal = getScrollState(scrollContainer.current, ScrollDirection.X);
@@ -69,11 +95,6 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   useEffect(function () {
     scrollHandler();
   }, [scrollHandler]);
-  var _useIsOverflow = useIsOverflow(scrollContainer),
-    xScrollable = _useIsOverflow.xScrollable,
-    yScrollable = _useIsOverflow.yScrollable;
-  var gradientRight = yScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetWidth - contentChildrenContainer.current.offsetWidth : 0;
-  var gradientBottom = xScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetHeight - contentChildrenContainer.current.offsetHeight : 0;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "--x-").concat(horizontalPosition.toLowerCase()), "".concat(blockClass, "--y-").concat(verticalPosition.toLowerCase()), _defineProperty(_defineProperty({}, "".concat(blockClass, "--x-scrollable"), xScrollable), "".concat(blockClass, "--y-scrollable"), yScrollable), className),
     ref: ref,
@@ -87,37 +108,23 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     ref: contentChildrenContainer,
     className: "".concat(blockClass, "__content-children")
   }, children)), !hideStartGradient && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    ref: startVerticalRef,
     className: "".concat(blockClass, "__start-vertical"),
-    style: {
-      right: gradientRight,
-      backgroundImage: "linear-gradient(0deg, transparent, ".concat(color, " 90%)")
-    },
     role: "presentation",
     "aria-hidden": true
   }), /*#__PURE__*/React__default.createElement("div", {
+    ref: startHorizontalRef,
     className: "".concat(blockClass, "__start-horizontal"),
-    style: {
-      backgroundImage: "linear-gradient(-90deg, transparent, ".concat(color, " 90%)"),
-      bottom: gradientBottom
-    },
     role: "presentation",
     "aria-hidden": true
   })), /*#__PURE__*/React__default.createElement("div", {
+    ref: endVerticalRef,
     className: "".concat(blockClass, "__end-vertical"),
-    style: {
-      right: gradientRight,
-      bottom: gradientBottom,
-      backgroundImage: "linear-gradient(0deg, ".concat(color, " 10%, transparent)")
-    },
     role: "presentation",
     "aria-hidden": true
   }), /*#__PURE__*/React__default.createElement("div", {
+    ref: endHorizontalRef,
     className: "".concat(blockClass, "__end-horizontal"),
-    style: {
-      right: gradientRight,
-      bottom: gradientBottom,
-      backgroundImage: "linear-gradient(-90deg, ".concat(color, " 10%, transparent)")
-    },
     role: "presentation",
     "aria-hidden": true
   }));

package/es/components/StringFormatter/StringFormatter.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -14,6 +14,7 @@ import { pkg } from '../../settings.js';
 import { DefinitionTooltip } from '@carbon/react';
 import { propMappingFunction, StringFormatterAlignment, deprecated_StringFormatterAlignment } from './utils/enums.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["className", "lines", "tooltipDirection", "truncate", "width", "value"];
 var blockClass = "".concat(pkg.prefix, "--string-formatter");
@@ -41,12 +42,14 @@ var StringFormatter = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     width = _ref$width === void 0 ? defaults.width : _ref$width,
     value = _ref.value,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var contentRef = useRef(null);
+  useIsomorphicEffect(function () {
+    contentRef.current.style.maxWidth = width;
+    contentRef.current.style.WebkitLineClamp = lines;
+  }, [lines, width]);
   var stringFormatterContent = /*#__PURE__*/React__default.createElement("span", {
-    className: cx("".concat(blockClass, "--content"), _defineProperty({}, "".concat(blockClass, "--truncate"), truncate)),
-    style: {
-      maxWidth: width,
-      WebkitLineClamp: lines
-    }
+    ref: contentRef,
+    className: cx("".concat(blockClass, "--content"), _defineProperty({}, "".concat(blockClass, "--truncate"), truncate))
   }, value);
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
     className: cx(blockClass, className),

package/es/components/TagOverflow/TagOverflow.d.ts

@@ -26,10 +26,19 @@ export interface TagOverflowProps {
     allTagsModalTitle?: string;
     autoAlign?: boolean;
     className?: string;
-    containingElementRef?: RefObject<HTMLElement>;
+    /**
+     * @deprecated The `containingElementRef` prop is no longer going to be used in favor of the forwarded ref.
+     */
+    containingElementRef?: RefObject<HTMLDivElement>;
     items: TagOverflowItem[];
     maxVisible?: number;
+    /**
+     * @deprecated The `measurementOffset` prop is no longer going to be used. This value will now be calculated automatically.
+     */
     measurementOffset?: number;
+    /**
+     * @deprecated The `multiline` prop is no longer going to be used. This component should only be used when you need to hide overflowing items.
+     */
     multiline?: boolean;
     overflowAlign?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
     overflowClassName?: string;

package/es/components/TagOverflow/TagOverflow.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef, useState, useCallback, useEffect, createElement } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useState, useCallback, createElement } from 'react';
 import { DismissibleTag, Tag } from '@carbon/react';
 import PropTypes from '../../_virtual/index.js';
 import { TYPES } from './constants.js';
@@ -16,12 +16,11 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
-import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { useOverflowItems } from '../../global/js/hooks/useOverflowItems.js';
 
-var _excluded = ["align", "allTagsModalAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
-  _excluded2 = ["className", "id"],
-  _excluded3 = ["tagType"],
-  _excluded4 = ["id", "label", "tagType", "onClose", "filter"];
+var _excluded = ["align", "allTagsModalAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "items", "maxVisible", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
+  _excluded2 = ["className"],
+  _excluded3 = ["id", "label", "tagType", "onClose", "filter"];
 var blockClass = "".concat(pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
@@ -35,12 +34,8 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
     allTagsModalTitle = props.allTagsModalTitle,
     autoAlign = props.autoAlign,
     className = props.className,
-    containingElementRef = props.containingElementRef,
     items = props.items,
     maxVisible = props.maxVisible,
-    _props$measurementOff = props.measurementOffset,
-    measurementOffset = _props$measurementOff === void 0 ? 0 : _props$measurementOff,
-    multiline = props.multiline,
     _props$overflowAlign = props.overflowAlign,
     overflowAlign = _props$overflowAlign === void 0 ? 'bottom' : _props$overflowAlign,
     overflowClassName = props.overflowClassName,
@@ -50,119 +45,33 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
     showAllTagsLabel = props.showAllTagsLabel,
     tagComponent = props.tagComponent,
     rest = _objectWithoutProperties(props, _excluded);
-  var localContainerRef = useRef(null);
-  var containerRef = ref || localContainerRef;
-  var itemRefs = useRef(null);
-  var overflowRef = useRef(null);
-  // itemOffset is the value of margin applied on each items
-  // This value is required for calculating how many items will fit within the container
-  var itemOffset = 4;
-  var overflowIndicatorWidth = 40;
-  var _useState = useState(0),
+  var containerRef = useRef(null);
+  var offsetRef = useRef(null);
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    containerWidth = _useState2[0],
-    setContainerWidth = _useState2[1];
-  var _useState3 = useState([]),
+    showAllModalOpen = _useState2[0],
+    setShowAllModalOpen = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    visibleItems = _useState4[0],
-    setVisibleItems = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    overflowItems = _useState6[0],
-    setOverflowItems = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showAllModalOpen = _useState8[0],
-    setShowAllModalOpen = _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    popoverOpen = _useState10[0],
-    setPopoverOpen = _useState10[1];
-  var resizeElm = containingElementRef && containingElementRef.current ? containingElementRef : containerRef;
+    popoverOpen = _useState4[0],
+    setPopoverOpen = _useState4[1];
+  var _useOverflowItems = useOverflowItems(items, containerRef, offsetRef, maxVisible, onOverflowTagChange),
+    visibleItems = _useOverflowItems.visibleItems,
+    overflowItems = _useOverflowItems.hiddenItems,
+    itemRefHandler = _useOverflowItems.itemRefHandler;
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
   var handleModalClose = function handleModalClose() {
     setShowAllModalOpen(false);
   };
-  var handleResize = function handleResize() {
-    if (typeof resizeElm !== 'function' && resizeElm.current) {
-      setContainerWidth(resizeElm.current.offsetWidth);
-    }
-  };
-  useResizeObserver(resizeElm, handleResize);
-  var getMap = function getMap() {
-    if (!itemRefs.current) {
-      itemRefs.current = new Map();
-    }
-    return itemRefs.current;
-  };
-  var itemRefHandler = function itemRefHandler(id, node) {
-    var map = getMap();
-    if (id && node && map.get(id) !== node.offsetWidth) {
-      map.set(id, node.offsetWidth);
-    }
-  };
-  var getVisibleItems = useCallback(function () {
-    if (!itemRefs.current) {
-      return items;
-    }
-    if (multiline) {
-      var _visibleItems = maxVisible ? items === null || items === void 0 ? void 0 : items.slice(0, maxVisible) : items;
-      return _visibleItems;
-    }
-    var map = getMap();
-    var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
-    var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
-    var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : containerWidth;
-    var overflowContainerWidth = overflowRef && overflowRef.current && overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
-    var maxWidth = spaceAvailable - overflowContainerWidth;
-    var childrenWidth = 0;
-    var maxReached = false;
-    return items.reduce(function (prev, cur) {
-      if (!maxReached) {
-        var itemWidth = (map ? Number(map.get(cur.id)) : 0) + itemOffset;
-        var fits = itemWidth + childrenWidth < maxWidth;
-        if (fits) {
-          childrenWidth += itemWidth;
-          prev.push(cur);
-        } else {
-          maxReached = true;
-        }
-      }
-      return prev;
-    }, []);
-  }, [containerWidth, containingElementRef, items, maxVisible, measurementOffset, multiline]);
   var getCustomComponent = function getCustomComponent(item, tagComponent) {
     var className = item.className,
-      id = item.id,
       other = _objectWithoutProperties(item, _excluded2);
     return /*#__PURE__*/createElement(tagComponent, _objectSpread2(_objectSpread2({}, other), {}, {
-      key: id,
-      className: cx("".concat(blockClass, "__item"), className),
-      ref: function ref(node) {
-        return itemRefHandler(id, node);
-      }
+      className: cx("".concat(blockClass, "__item"), className)
     }));
   };
-  useEffect(function () {
-    var visibleItemsArr = getVisibleItems();
-    if (maxVisible && maxVisible < visibleItemsArr.length) {
-      var _visibleItemsArr;
-      visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
-    }
-    var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
-    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref) {
-      var tagType = _ref.tagType,
-        other = _objectWithoutProperties(_ref, _excluded3);
-      return _objectSpread2({
-        type: tagType
-      }, other);
-    });
-    setVisibleItems(visibleItemsArr);
-    setOverflowItems(overflowItemsArr);
-    onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
-  }, [getVisibleItems, items, maxVisible, onOverflowTagChange]);
   var handleTagOnClose = useCallback(function (onClose, index) {
     onClose === null || onClose === void 0 || onClose();
     if (index <= (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) - 1) {
@@ -170,41 +79,40 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [visibleItems]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className, "".concat(blockClass, "--align-").concat(align), _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
+    className: cx(blockClass, className)
+  }, getDevtoolsProps(componentName), {
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: cx("".concat(blockClass, "__visible-tags"), "".concat(blockClass, "--align-").concat(align)),
     ref: containerRef
-  }, getDevtoolsProps(componentName)), (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0 && visibleItems.map(function (item, index) {
-    // Render custom components
-    if (tagComponent) {
-      return getCustomComponent(item, tagComponent);
-    } else {
-      var id = item.id,
-        label = item.label,
-        tagType = item.tagType,
-        _onClose = item.onClose,
-        filter = item.filter,
-        other = _objectWithoutProperties(item, _excluded4);
-      // If there is no template prop, then render items as Tags
-      return /*#__PURE__*/React__default.createElement("div", {
-        ref: function ref(node) {
-          return itemRefHandler(id, node);
-        },
-        key: id
-      }, typeof _onClose === 'function' || filter ? /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
-        className: "".concat(blockClass, "__item--tag"),
-        type: tagType,
-        onClose: function onClose() {
-          return handleTagOnClose(_onClose, index);
-        },
-        text: label
-      })) : /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-        className: "".concat(blockClass, "__item--tag"),
-        type: tagType
-      }), label));
-    }
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }, visibleItems.map(function (item, index) {
+    var id = item.id,
+      label = item.label,
+      tagType = item.tagType,
+      _onClose = item.onClose,
+      filter = item.filter,
+      other = _objectWithoutProperties(item, _excluded3);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(blockClass, "__tag-container"),
+      ref: function ref(node) {
+        itemRefHandler(id, node);
+      },
+      key: id
+    }, tagComponent ? getCustomComponent(item, tagComponent) : typeof _onClose === 'function' || filter ? /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
+      className: "".concat(blockClass, "__item--tag"),
+      type: tagType,
+      onClose: function onClose() {
+        return handleTagOnClose(_onClose, index);
+      },
+      text: label
+    })) : /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
+      className: "".concat(blockClass, "__item--tag"),
+      type: tagType
+    }), label));
+  }), overflowItems.length > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__indicator"),
-    ref: overflowRef
-  }, (overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagOverflowPopover, {
+    ref: offsetRef
+  }, /*#__PURE__*/React__default.createElement(TagOverflowPopover, {
     allTagsModalSearchThreshold: allTagsModalSearchThreshold,
     className: overflowClassName,
     onShowAllClick: handleShowAllClick,
@@ -213,7 +121,7 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
     overflowType: overflowType,
     showAllTagsLabel: showAllTagsLabel,
     key: "tag-overflow-popover",
-    ref: overflowRef,
+    ref: offsetRef,
     popoverOpen: popoverOpen,
     setPopoverOpen: setPopoverOpen,
     autoAlign: autoAlign
@@ -242,8 +150,8 @@ var tagTypes = Object.keys(TYPES);
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref2) {
-  var items = _ref2.items;
+var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref) {
+  var items = _ref.items;
   return (items === null || items === void 0 ? void 0 : items.length) > allTagsModalSearchThreshold;
 });
 

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

@@ -8,19 +8,6 @@
 import { type ButtonProps } from '@carbon/react';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-/**
- * 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.
- */
-export type CloseIconDescriptionTypes = {
-    hasCloseIcon?: false;
-    closeIconDescription?: string;
-} | {
-    hasCloseIcon: true;
-    closeIconDescription: string;
-};
 export interface TearsheetAction extends ButtonProps<'button'> {
     label?: string;
 }
@@ -48,6 +35,11 @@ export interface TearsheetProps 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.
      */
@@ -145,7 +137,7 @@ export interface TearsheetProps extends PropsWithChildren {
  * panel on either the left or right side, the main content area, and a set of
  * action buttons.
  */
-export declare let Tearsheet: React.ForwardRefExoticComponent<(TearsheetProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare let Tearsheet: React.ForwardRefExoticComponent<TearsheetProps & React.RefAttributes<HTMLDivElement>>;
 export declare const deprecatedProps: {
     /**
      * **Deprecated**