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

package/es/components/SearchBar/SearchBar.d.ts

@@ -1,5 +1,53 @@
 /**
- * Search bar with input field and search button
+ * 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.
  */
-export let SearchBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
+type Scopes = string[] | object[];
+interface SearchBarProps extends PropsWithChildren {
+    /** @type {string} Optional additional class name. */
+    className?: string;
+    /** @type {string} The label text for the search text input. */
+    clearButtonLabelText: string;
+    /**
+     * Whether or not the scopes MultiSelect label is visually hidden.
+     */
+    hideScopesLabel?: boolean;
+    /** @type {string} The label text for the search text input. */
+    labelText?: string;
+    /** @type {Function} Function handler for when the user changes their query search. */
+    onChange?: (event: any) => void;
+    /** @type {Function} Function handler for when the user submits a search. */
+    onSubmit?: (event: any) => void;
+    /** @type {string} Placeholder text to be displayed in the search input. */
+    placeHolderText: string;
+    /** @type {Function} Function to get the text for each scope to display in dropdown. */
+    scopeToString?: () => void;
+    /** @type {Array<any>} Array of allowed search scopes. */
+    scopes?: Scopes;
+    /** @type {string} The name text for the search scope type. */
+    scopesTypeLabel?: typeof conditionalScopePropValidator;
+    /** @type {Array<any> Array of initially selected search scopes. */
+    selectedScopes?: Scopes;
+    /**
+     * Optional custom sorting algorithm for an array of scope items.
+     * By default, scope items are sorted in ascending alphabetical order,
+     * with "selected" items moved to the start of the scope items array.
+     */
+    sortItems?: () => void;
+    /** @type {string} The label text for the search submit button. */
+    submitLabel: string;
+    /**
+     * Provide accessible label text for the scopes MultiSelect.
+     */
+    titleText?: string;
+    /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
+    translateWithId?: () => void;
+    /** @type {string} Search query value. */
+    value?: string;
+}
+export declare let SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLFormElement>>;
+declare const conditionalScopePropValidator: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
+export {};

package/es/components/SearchBar/SearchBar.js

@@ -29,10 +29,6 @@ var defaults = {
   selectedScopes: [],
   hideScopesLabel: true
 };
-
-/**
- * Search bar with input field and search button
- */
 var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     clearButtonLabelText = _ref.clearButtonLabelText,
@@ -45,11 +41,11 @@ var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     onSubmit = _ref$onSubmit === void 0 ? defaults.onSubmit : _ref$onSubmit,
     placeHolderText = _ref.placeHolderText,
     _ref$scopes = _ref.scopes,
-    scopes = _ref$scopes === void 0 ? defaults.scopes : _ref$scopes,
+    scopes = _ref$scopes === void 0 ? [] : _ref$scopes,
     scopesTypeLabel = _ref.scopesTypeLabel,
     scopeToString = _ref.scopeToString,
     _ref$selectedScopes = _ref.selectedScopes,
-    selectedScopes = _ref$selectedScopes === void 0 ? defaults.selectedScopes : _ref$selectedScopes,
+    selectedScopes = _ref$selectedScopes === void 0 ? [] : _ref$selectedScopes,
     sortItems = _ref.sortItems,
     submitLabel = _ref.submitLabel,
     translateWithId = _ref.translateWithId,
@@ -162,6 +158,7 @@ var conditionalScopePropValidator = function conditionalScopePropValidator(props
   if (props.scopes && props.scopes.length > 0 && !props[propName]) {
     return new Error("Required `".concat(propName, "` when `scopes` prop type is supplied to `").concat(componentName, "`. Validation failed."));
   }
+  /**@ts-ignore */
   for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
     rest[_key - 3] = arguments[_key];
   }
@@ -191,11 +188,13 @@ SearchBar.propTypes = {
   /** @type {Function} Function to get the text for each scope to display in dropdown. */
   scopeToString: PropTypes.func,
   /** @type {Array<any>} Array of allowed search scopes. */
+  /**@ts-ignore */
   scopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   /** @type {string} The name text for the search scope type. */
   // eslint-disable-next-line react/require-default-props
   scopesTypeLabel: conditionalScopePropValidator,
   /** @type {Array<any> Array of initially selected search scopes. */
+  /**@ts-ignore */
   selectedScopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   /**
    * Optional custom sorting algorithm for an array of scope items.

package/es/components/SidePanel/SidePanel.js

@@ -10,7 +10,6 @@ import React__default, { useState, useRef, useEffect, useCallback } from 'react'
 import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
-import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import { moderate02 } from '@carbon/motion';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
@@ -25,7 +24,7 @@ import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useFocus } from '../../global/js/hooks/useFocus.js';
 
 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(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
 // `any` is a work around until ActionSet is migrated to TS
@@ -110,14 +109,48 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var shouldReduceMotion = useReducedMotion();
+
+  // Title animation on scroll related state
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    labelTextHeight = _useState8[0],
+    setLabelTextHeight = _useState8[1];
+  useEffect(function () {
+    if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
+      setDoAnimateTitle(false);
+    } else {
+      setDoAnimateTitle(animateTitle);
+    }
+  }, [animateTitle, open]);
+  var titleItemsStyles = 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]);
   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 = 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
   };
@@ -125,8 +158,8 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // scroll panel to top going between steps
   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;
       }
@@ -149,9 +182,9 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   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
@@ -162,11 +195,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
       // 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);
@@ -180,20 +209,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   };
   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
   useEffect(function () {
@@ -202,7 +221,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
 
     // 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
   useEffect(function () {
@@ -301,7 +320,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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.createElement("div", {
       className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -368,7 +387,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }, 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,
@@ -380,11 +402,13 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         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(["".concat(blockClass, "__action-toolbar-button"), className, _defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
         onClick: onClick
@@ -394,10 +418,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var renderMain = function renderMain() {
     return /*#__PURE__*/React__default.createElement("div", {
       ref: innerContentRef,
-      className: cx("".concat(blockClass, "__inner-content"), _defineProperty({}, "".concat(blockClass, "--scrolls"), !doAnimateTitle))
+      onScroll: handleScroll,
+      className: cx("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
-  useResizeObserver(sidePanelRef, handleResize, [open]);
   return /*#__PURE__*/React__default.createElement(AnimatePresence, null, open && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
@@ -415,11 +439,8 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       shouldReduceMotion: shouldReduceMotion
     },
     onKeyDown: keyDownListener
-  }), doAnimateTitle ? /*#__PURE__*/React__default.createElement("div", {
-    ref: animatedScrollRef,
-    className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
-  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
-    actions: actions,
+  }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
+    actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
     size: size === 'xs' ? 'sm' : size,
     custom: shouldReduceMotion,

package/es/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/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -26,7 +26,6 @@ var componentName = 'SteppedAnimatedMedia';
 var defaults = {
   playStep: 0
 };
-
 /**
  * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
  */
@@ -41,8 +40,9 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
     jsonData = _useState2[0],
     setJsonData = _useState2[1];
   var animRef = useRef();
-  var backupRef = useRef();
+  var backupRef = useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
+  var localRefValue = localRef.current;
   // load animation source
   useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -89,11 +89,11 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
   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.loadAnimation({
-        container: localRef.current,
+        container: localRefValue,
         renderer: 'svg',
         animationData: jsonData[clamp(playStep, 0, jsonData.length - 1)],
         loop: false,
@@ -108,7 +108,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
       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;
   }
@@ -127,6 +127,7 @@ SteppedAnimatedMedia.propTypes = {
   /**
    * The file path(s) to json formatted Lottie animation files.
    */
+  /**@ts-ignore*/
   filePaths: PropTypes.arrayOf(PropTypes.string).isRequired,
   /**
    * Which animation step from the filePaths array to play.

package/es/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/es/components/TagOverflow/TagOverflow.js

@@ -0,0 +1,209 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { Tooltip, Tag } from '@carbon/react';
+import { TYPES } from './constants.js';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { TagSet } from '../TagSet/TagSet.js';
+
+var _excluded = ["className", "items", "tagComponent", "maxVisible", "multiline"],
+  _excluded2 = ["className", "id"];
+var blockClass = "".concat(pkg.prefix, "--tag-overflow");
+var componentName = 'TagOverflow';
+
+// Default values for props
+var defaults = {
+  items: []
+};
+
+/**
+ * TODO: A description of the component.
+ */
+var TagOverflow = /*#__PURE__*/React__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 = _objectWithoutProperties(_ref, _excluded);
+  var localContainerRef = useRef(null);
+  var containerRef = ref || localContainerRef;
+  var itemRefs = useRef(null);
+  var overflowRef = 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 = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerWidth = _useState2[0],
+    setContainerWidth = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visibleItems = _useState4[0],
+    setVisibleItems = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    overflowItems = _useState6[0],
+    setOverflowItems = _useState6[1];
+  var handleResize = function handleResize() {
+    setContainerWidth(containerRef.current.offsetWidth);
+  };
+  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 = 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 = _objectWithoutProperties(item, _excluded2);
+    return /*#__PURE__*/React__default.createElement(tagComponent, _objectSpread2(_objectSpread2({}, other), {}, {
+      className: cx("".concat(blockClass, "__item"), className),
+      ref: function ref(node) {
+        return itemRefHandler(id, node);
+      }
+    }));
+  };
+  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.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
+    ref: containerRef,
+    role: "main"
+  }, 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.createElement("div", {
+        ref: function ref(node) {
+          return itemRefHandler(item.id, node);
+        },
+        key: item.id
+      }, /*#__PURE__*/React__default.createElement(Tooltip, {
+        align: "bottom",
+        label: item.label
+      }, /*#__PURE__*/React__default.createElement(Tag, {
+        className: "".concat(blockClass, "__item--tag"),
+        type: item.tagType
+      }, item.label)));
+    }
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(blockClass, "__indicator"),
+    ref: overflowRef
+  }, overflowItems.length > 0 && /*#__PURE__*/React__default.createElement(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
+TagOverflow = pkg.checkComponentEnabled(TagOverflow, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+TagOverflow.displayName = componentName;
+var tagTypes = Object.keys(TYPES);
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+TagOverflow.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.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: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    tagType: PropTypes.oneOf(tagTypes)
+  }).isRequired),
+  /**
+   * maximum visible items
+   */
+  maxVisible: PropTypes.number,
+  /**
+   * display items in multiple lines
+   */
+  multiline: PropTypes.bool,
+  /** Component definition of the items to be rendered inside TagOverflow.
+   * If this is not passed, items will be rendered as Tag component
+   */
+  tagComponent: PropTypes.elementType
+};
+
+export { TagOverflow };

package/es/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/es/components/TagOverflow/constants.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// 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'
+};
+
+export { TYPES };

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

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