@carbon/ibm-products 2.34.0 → 2.36.0-alpha.27

package/lib/components/SidePanel/SidePanel.js

@@ -14,7 +14,6 @@ var React = require('react');
 var framerMotion = require('framer-motion');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
-var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var carbonMotion = require('@carbon/motion');
 var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
@@ -34,7 +33,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
-  _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
+  _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
 // `any` is a work around until ActionSet is migrated to TS
@@ -119,14 +118,48 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var shouldReduceMotion = framerMotion.useReducedMotion();
+
+  // Title animation on scroll related state
+  var _useState7 = React.useState(0),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    labelTextHeight = _useState8[0],
+    setLabelTextHeight = _useState8[1];
+  React.useEffect(function () {
+    if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
+      setDoAnimateTitle(false);
+    } else {
+      setDoAnimateTitle(animateTitle);
+    }
+  }, [animateTitle, open]);
+  var titleItemsStyles = React.useCallback(function (progress) {
+    if (subtitleRef !== null && subtitleRef !== void 0 && subtitleRef.current) {
+      var _subtitleEl$style;
+      var subtitleEl = subtitleRef === null || subtitleRef === void 0 ? void 0 : subtitleRef.current;
+      var height = subtitleEl === null || subtitleEl === void 0 ? void 0 : subtitleEl.clientHeight;
+      var calculatedMargin = height * progress;
+      subtitleEl === null || subtitleEl === void 0 || (_subtitleEl$style = subtitleEl.style) === null || _subtitleEl$style === void 0 || _subtitleEl$style.setProperty('margin-top', "".concat(-calculatedMargin, "px"));
+    }
+    if (labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
+      var _labelTextRef$current;
+      var _calculatedMargin = labelTextHeight * progress;
+      labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current = labelTextRef.current) === null || _labelTextRef$current === void 0 || (_labelTextRef$current = _labelTextRef$current.style) === null || _labelTextRef$current === void 0 || _labelTextRef$current.setProperty('margin-top', "".concat(-_calculatedMargin, "px"));
+    }
+  }, [labelTextHeight]);
   React.useEffect(function () {
-    setDoAnimateTitle(animateTitle);
-  }, [animateTitle]);
+    if (open && animateTitle && labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
+      var _labelTextRef$current2;
+      setLabelTextHeight(Number((labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current2 = labelTextRef.current) === null || _labelTextRef$current2 === void 0 ? void 0 : _labelTextRef$current2.clientHeight) || null));
+    }
+  }, [animateTitle, labelTextRef, open]);
   var handleScroll = React.useCallback(function () {
-    var _animatedScrollRef$cu;
-    var scrollTop = animatedScrollRef === null || animatedScrollRef === void 0 || (_animatedScrollRef$cu = animatedScrollRef.current) === null || _animatedScrollRef$cu === void 0 ? void 0 : _animatedScrollRef$cu.scrollTop;
-    panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), (Math.min(Number(scrollTop), scrollAnimationDistance) / scrollAnimationDistance).toString());
-  }, [scrollAnimationDistance, panelRefValue]);
+    if (doAnimateTitle && innerContentRef !== null && innerContentRef !== void 0 && innerContentRef.current) {
+      var _innerContentRef$curr;
+      var scrollTop = innerContentRef === null || innerContentRef === void 0 || (_innerContentRef$curr = innerContentRef.current) === null || _innerContentRef$curr === void 0 ? void 0 : _innerContentRef$curr.scrollTop;
+      var animationProgress = Math.min(Number(scrollTop), scrollAnimationDistance) / scrollAnimationDistance;
+      panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), animationProgress.toString());
+      titleItemsStyles(animationProgress);
+    }
+  }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
   var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   };
@@ -134,8 +167,8 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   // scroll panel to top going between steps
   React.useEffect(function () {
     if (sidePanelRef && panelRefValue) {
-      var _animatedScrollRef$cu2;
-      var scrollableSection = (_animatedScrollRef$cu2 = animatedScrollRef.current) !== null && _animatedScrollRef$cu2 !== void 0 ? _animatedScrollRef$cu2 : innerContentRef.current;
+      var _animatedScrollRef$cu;
+      var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
       if (scrollableSection) {
         scrollableSection.scrollTop = 0;
       }
@@ -158,9 +191,9 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
     var canDoAnimateTitle = false;
     if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
-      var _labelTextRef$current, _labelTextRef$current2, _subtitleRef$current$, _subtitleRef$current;
+      var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
       var titleEl = titleRef.current;
-      var labelHeight = (_labelTextRef$current = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current2 = labelTextRef.current) === null || _labelTextRef$current2 === void 0 ? void 0 : _labelTextRef$current2.offsetHeight) !== null && _labelTextRef$current !== void 0 ? _labelTextRef$current : 0;
+      var labelHeight = (_labelTextRef$current3 = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current4 = labelTextRef.current) === null || _labelTextRef$current4 === void 0 ? void 0 : _labelTextRef$current4.offsetHeight) !== null && _labelTextRef$current3 !== void 0 ? _labelTextRef$current3 : 0;
       var subtitleHeight = (_subtitleRef$current$ = subtitleRef === null || subtitleRef === void 0 || (_subtitleRef$current = subtitleRef.current) === null || _subtitleRef$current === void 0 ? void 0 : _subtitleRef$current.offsetHeight) !== null && _subtitleRef$current$ !== void 0 ? _subtitleRef$current$ : 0;
 
       // Adjusts space at bottom of titles by changing where scrolling finishes
@@ -171,11 +204,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
 
       // used to calculate the header moves
       panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
-      var scrollEl = animatedScrollRef.current;
-      if (!scrollEl && animateTitle && !doAnimateTitle) {
-        // may be switching back based on resize
-        scrollEl = innerContentRef.current;
-      }
+      var scrollEl = innerContentRef.current;
       if (scrollEl) {
         var _window2;
         var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
@@ -189,20 +218,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   };
   React.useEffect(function () {
-    if (doAnimateTitle && animatedScrollRef.current) {
-      // only add scroll if the doAnimateTitle is already true
-      // should come back through if false and canDoAnimateTitle is true
-      animatedScrollRef.current.addEventListener('scroll', handleScroll);
-    }
     if (!doAnimateTitle && sidePanelRef.current) {
       panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), '0');
     }
-  }, [animatedScrollRef, doAnimateTitle, handleScroll, sidePanelRef, panelRefValue]);
-
-  /* istanbul ignore next */
-  var handleResize = function handleResize() {
-    checkSetDoAnimateTitle();
-  };
+  }, [doAnimateTitle, handleScroll, sidePanelRef, innerContentRef, open, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style]);
 
   // Calculate scroll distances
   React.useEffect(function () {
@@ -211,7 +230,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id, animatedScrollRef.current]);
+  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id]);
 
   // click outside functionality if `includeOverlay` prop is set
   React.useEffect(function () {
@@ -310,7 +329,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
   var primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--animated-title"), doAnimateTitle), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: cx__default["default"]("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -377,7 +396,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }, actionToolbarButtons.map(function (_ref4) {
       var label = _ref4.label,
         kind = _ref4.kind,
+        _ref4$hasIconOnly = _ref4.hasIconOnly,
+        hasIconOnly = _ref4$hasIconOnly === void 0 ? false : _ref4$hasIconOnly,
         icon = _ref4.icon,
+        renderIcon = _ref4.renderIcon,
         tooltipPosition = _ref4.tooltipPosition,
         tooltipAlignment = _ref4.tooltipAlignment,
         leading = _ref4.leading,
@@ -389,11 +411,13 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
         key: label,
         kind: kind || 'ghost',
         size: "sm",
-        renderIcon: icon,
-        iconDescription: label,
+        renderIcon: renderIcon || icon,
+        iconDescription: label
+      }, hasIconOnly && {
         tooltipPosition: tooltipPosition || 'bottom',
-        tooltipAlignment: tooltipAlignment || 'start',
-        hasIconOnly: !leading,
+        tooltipAlignment: tooltipAlignment || 'start'
+      }, {
+        hasIconOnly: hasIconOnly,
         disabled: disabled,
         className: cx__default["default"](["".concat(blockClass, "__action-toolbar-button"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
         onClick: onClick
@@ -403,10 +427,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   var renderMain = function renderMain() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       ref: innerContentRef,
-      className: cx__default["default"]("".concat(blockClass, "__inner-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--scrolls"), !doAnimateTitle))
+      onScroll: handleScroll,
+      className: cx__default["default"]("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
-  useResizeObserver.useResizeObserver(sidePanelRef, handleResize, [open]);
   return /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, _rollupPluginBabelHelpers["extends"]({}, devtools.getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
@@ -424,11 +448,8 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       shouldReduceMotion: shouldReduceMotion
     },
     onKeyDown: keyDownListener
-  }), doAnimateTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: animatedScrollRef,
-    className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
-  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
-    actions: actions,
+  }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
+    actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
     size: size === 'xs' ? 'sm' : size,
     custom: shouldReduceMotion,

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts

@@ -1,5 +1,26 @@
 /**
- * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
+ * Copyright IBM Corp. 2023, 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.
  */
-export const SteppedAnimatedMedia: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+interface SteppedAnimatedMediaProps {
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The file path(s) to json formatted Lottie animation files.
+     */
+    filePaths: string[] | undefined;
+    /**
+     * Which animation step from the filePaths array to play.
+     */
+    playStep?: number;
+}
+/**
+ * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
+ */
+export declare const SteppedAnimatedMedia: React.ForwardRefExoticComponent<SteppedAnimatedMediaProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -37,7 +37,6 @@ var componentName = 'SteppedAnimatedMedia';
 var defaults = {
   playStep: 0
 };
-
 /**
  * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
  */
@@ -52,8 +51,9 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default["default"].forwardRef(fun
     jsonData = _useState2[0],
     setJsonData = _useState2[1];
   var animRef = React.useRef();
-  var backupRef = React.useRef();
+  var backupRef = React.useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
+  var localRefValue = localRef.current;
   // load animation source
   React.useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -100,11 +100,11 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default["default"].forwardRef(fun
   React.useEffect(function () {
     var _window;
     var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;
-    if (localRef.current) {
+    if (localRefValue) {
       var _animRef$current, _animRef$current2, _animRef$current3;
       (_animRef$current = animRef.current) === null || _animRef$current === void 0 || _animRef$current.destroy();
       animRef.current = lottie__default["default"].loadAnimation({
-        container: localRef.current,
+        container: localRefValue,
         renderer: 'svg',
         animationData: jsonData[clamp__default["default"](playStep, 0, jsonData.length - 1)],
         loop: false,
@@ -119,7 +119,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default["default"].forwardRef(fun
       var _animRef$current4;
       return (_animRef$current4 = animRef.current) === null || _animRef$current4 === void 0 ? void 0 : _animRef$current4.destroy();
     };
-  }, [jsonData, localRef, playStep]);
+  }, [jsonData, localRefValue, playStep]);
   if (!jsonData) {
     return null;
   }
@@ -138,6 +138,7 @@ SteppedAnimatedMedia.propTypes = {
   /**
    * The file path(s) to json formatted Lottie animation files.
    */
+  /**@ts-ignore*/
   filePaths: index["default"].arrayOf(index["default"].string).isRequired,
   /**
    * Which animation step from the filePaths array to play.

package/lib/components/TagOverflow/TagOverflow.d.ts

@@ -0,0 +1,5 @@
+/**
+ * TODO: A description of the component.
+ */
+export let TagOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/TagOverflow/TagOverflow.js

@@ -0,0 +1,216 @@
+/**
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var react = require('@carbon/react');
+var constants = require('./constants.js');
+var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
+var TagSet = require('../TagSet/TagSet.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "items", "tagComponent", "maxVisible", "multiline"],
+  _excluded2 = ["className", "id"];
+var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
+var componentName = 'TagOverflow';
+
+// Default values for props
+var defaults = {
+  items: []
+};
+
+/**
+ * TODO: A description of the component.
+ */
+exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? defaults.items : _ref$items,
+    tagComponent = _ref.tagComponent,
+    maxVisible = _ref.maxVisible,
+    multiline = _ref.multiline,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var localContainerRef = React.useRef(null);
+  var containerRef = ref || localContainerRef;
+  var itemRefs = React.useRef(null);
+  var overflowRef = React.useRef(null);
+  // measurementOffset is the value of margin applied on each items
+  // This value is required for calculating how many items will fit within the container
+  var measurementOffset = 4;
+  var overflowIndicatorWidth = 40;
+  var _useState = React.useState(0),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    containerWidth = _useState2[0],
+    setContainerWidth = _useState2[1];
+  var _useState3 = React.useState([]),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    visibleItems = _useState4[0],
+    setVisibleItems = _useState4[1];
+  var _useState5 = React.useState([]),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    overflowItems = _useState6[0],
+    setOverflowItems = _useState6[1];
+  var handleResize = function handleResize() {
+    setContainerWidth(containerRef.current.offsetWidth);
+  };
+  useResizeObserver.useResizeObserver(containerRef, 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 = React.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 overflowContainerWidth = overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
+    var maxWidth = containerWidth - overflowContainerWidth;
+    var childrenWidth = 0;
+    var maxReached = false;
+    return items.reduce(function (prev, cur) {
+      if (!maxReached) {
+        var itemWidth = map.get(cur.id) + measurementOffset;
+        var fits = itemWidth + childrenWidth < maxWidth;
+        if (fits) {
+          childrenWidth += itemWidth;
+          prev.push(cur);
+        } else {
+          maxReached = true;
+        }
+      }
+      return prev;
+    }, []);
+  }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible]);
+  var getCustomComponent = function getCustomComponent(item) {
+    var className = item.className,
+      id = item.id,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded2);
+    return /*#__PURE__*/React__default["default"].createElement(tagComponent, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
+      className: cx__default["default"]("".concat(blockClass, "__item"), className),
+      ref: function ref(node) {
+        return itemRefHandler(id, node);
+      }
+    }));
+  };
+  React.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 (item) {
+      return {
+        type: item.tagType,
+        label: item.label
+      };
+    });
+    setVisibleItems(visibleItemsArr);
+    setOverflowItems(overflowItemsArr);
+  }, [containerWidth, items, maxVisible, getVisibleItems]);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
+    ref: containerRef,
+    role: "main"
+  }, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
+    // Render custom components
+    if (tagComponent) {
+      return getCustomComponent(item);
+    } else {
+      // If there is no template prop, then render items as Tags
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        ref: function ref(node) {
+          return itemRefHandler(item.id, node);
+        },
+        key: item.id
+      }, /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
+        align: "bottom",
+        label: item.label
+      }, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
+        className: "".concat(blockClass, "__item--tag"),
+        type: item.tagType
+      }, item.label)));
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__indicator"),
+    ref: overflowRef
+  }, overflowItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(TagSet.TagSet, {
+    tags: overflowItems,
+    allTagsModalTitle: "All tags",
+    containingElementRef: overflowRef,
+    allTagsModalSearchLabel: "Search all tags",
+    allTagsModalSearchPlaceholderText: "Search all tags",
+    showAllTagsLabel: "Show all tags"
+  })));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.TagOverflow = settings.pkg.checkComponentEnabled(exports.TagOverflow, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.TagOverflow.displayName = componentName;
+var tagTypes = Object.keys(constants.TYPES);
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.TagOverflow.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * The items to be shown in the TagOverflow. Each item is specified as an object with properties:
+   * **label**\* (required) to supply the item content,
+   * **id**\* (required) to uniquely identify the each item.
+   * **tagType** the type value to be passed to the Carbon Tag component
+   * if you are passing an tagComponent prop for rendering custom components,
+   * then pass the props required for your custom component as the properties of item object
+   */
+  items: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].string.isRequired,
+    label: index["default"].string.isRequired,
+    tagType: index["default"].oneOf(tagTypes)
+  }).isRequired),
+  /**
+   * maximum visible items
+   */
+  maxVisible: index["default"].number,
+  /**
+   * display items in multiple lines
+   */
+  multiline: index["default"].bool,
+  /** Component definition of the items to be rendered inside TagOverflow.
+   * If this is not passed, items will be rendered as Tag component
+   */
+  tagComponent: index["default"].elementType
+};

package/lib/components/TagOverflow/constants.d.ts

@@ -0,0 +1,14 @@
+export const TYPES: {
+    red: string;
+    magenta: string;
+    purple: string;
+    blue: string;
+    cyan: string;
+    teal: string;
+    green: string;
+    gray: string;
+    'cool-gray': string;
+    'warm-gray': string;
+    'high-contrast': string;
+    outline: string;
+};

package/lib/components/TagOverflow/constants.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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// 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.
+//
+
+// Copied from @carbon/react/es/components/Tag/Tag.js
+var TYPES = {
+  red: 'Red',
+  magenta: 'Magenta',
+  purple: 'Purple',
+  blue: 'Blue',
+  cyan: 'Cyan',
+  teal: 'Teal',
+  green: 'Green',
+  gray: 'Gray',
+  'cool-gray': 'Cool-Gray',
+  'warm-gray': 'Warm-Gray',
+  'high-contrast': 'High-Contrast',
+  outline: 'Outline'
+};
+
+exports.TYPES = TYPES;

package/lib/components/TagOverflow/index.d.ts

@@ -0,0 +1 @@
+export { TagOverflow } from "./TagOverflow";