carbon-addons-iot-react 2.149.0-next.4 → 2.149.0-next.8

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.149.0-next.8](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.7...v2.149.0-next.8) (2022-02-21)
+
+**Note:** Version bump only for package carbon-addons-iot-react
+
+
+
+
+
+# [2.149.0-next.7](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.6...v2.149.0-next.7) (2022-02-21)
+
+**Note:** Version bump only for package carbon-addons-iot-react
+
+
+
+
+
+# [2.149.0-next.6](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.5...v2.149.0-next.6) (2022-02-18)
+
+
+### Bug Fixes
+
+* **card:** fix overflow tooltip for card ([68611c4](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/68611c412345ccfe29861fef1dfa17eeb9e32aed))
+
+
+### Features
+
+* **hierarchy-list:** call onExpandedChange after rows are expanded ([f6811a8](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f6811a89909d0de4df663883924429e6f4242b38))
+
+
+
+
+
+# [2.149.0-next.5](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.4...v2.149.0-next.5) (2022-02-16)
+
+**Note:** Version bump only for package carbon-addons-iot-react
+
+
+
+
+
 # [2.149.0-next.4](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.3...v2.149.0-next.4) (2022-02-16)
 
 

package/es/components/Card/Card.js

@@ -385,8 +385,8 @@ var Card = function Card(props) {
 
   var titleRef = useRef();
   var subTitleRef = useRef();
-  var hasTitleTooltip = useHasTextOverflow(titleRef);
-  var hasSubTitleTooltip = useHasTextOverflow(subTitleRef);
+  var hasTitleTooltip = useHasTextOverflow(titleRef, title);
+  var hasSubTitleTooltip = useHasTextOverflow(subTitleRef, subtitle);
   var visibilityRef = useRef(null);
 
   var _useVisibilityObserve = useVisibilityObserver(visibilityRef, {
@@ -449,6 +449,7 @@ var Card = function Card(props) {
     triggerText: title
   }, title) : /*#__PURE__*/React__default.createElement("div", {
     ref: titleRef,
+    "data-testid": "".concat(testId, "-title-notip"),
     className: classnames("".concat(iotPrefix, "--card--title--text"), _defineProperty({}, "".concat(iotPrefix, "--card--title--text--wrapped"), hasTitleWrap && !subtitle))
   }, title), tooltip && /*#__PURE__*/React__default.createElement(Tooltip, {
     "data-testid": "".concat(testID || testId, "-tooltip"),

package/es/components/List/HierarchyList/HierarchyList.js

@@ -379,14 +379,16 @@ var HierarchyList = function HierarchyList(_ref2) {
   }, [expandedIdsProp]);
   /**
    * effect to trigger calling the onExpandedChange callback. Ignore it on the initial render
-   * when previousExpandedIds is undefined, but fire it on every change afterward
+   * when previousExpandedIds is undefined, but fire it on every change afterward when using a
+   * virtualList. The regular list triggers the onExpandedChange callback in the handleAfterExpand
+   * function below.
    */
 
   useEffect(function () {
-    if (previousExpandedIds !== undefined && !isEqual(previousExpandedIds, expandedIds)) {
+    if (previousExpandedIds !== undefined && !isEqual(previousExpandedIds, expandedIds) && isVirtualList) {
       onExpandedChange(expandedIds);
     }
-  }, [expandedIds, onExpandedChange, previousExpandedIds]);
+  }, [expandedIds, isVirtualList, onExpandedChange, previousExpandedIds]);
   /**
    * Effect to handle indeterminate state for parent checkboxes. If we're in an editMode and
    * the selected ids changes, fire this effect to determine the currently indeterminate ids
@@ -640,7 +642,8 @@ var HierarchyList = function HierarchyList(_ref2) {
     onItemMoved: handleDrag,
     className: className,
     emptyState: emptyState,
-    emptySearchState: emptySearchState
+    emptySearchState: emptySearchState,
+    onExpandedChange: onExpandedChange
   }));
 };
 

package/es/components/List/List.js

@@ -131,7 +131,10 @@ var propTypes = {
   handleLoadMore: PropTypes.func,
 
   /** RowIds for rows currently loading more child rows */
-  loadingMoreIds: PropTypes.arrayOf(PropTypes.string)
+  loadingMoreIds: PropTypes.arrayOf(PropTypes.string),
+
+  /** called after the row has expanded or collapsed and is passed the array of expanded ids */
+  onExpandedChange: PropTypes.func
 };
 var defaultProps = {
   className: null,
@@ -170,7 +173,8 @@ var defaultProps = {
   emptyState: 'No list items to show',
   emptySearchState: 'No results found',
   testId: 'list',
-  handleLoadMore: function handleLoadMore() {}
+  handleLoadMore: function handleLoadMore() {},
+  onExpandedChange: null
 };
 var List = /*#__PURE__*/forwardRef(function (props, ref) {
   var _overrides$header, _overrides$content, _classnames, _overrides$header2, _overrides$header2$pr, _overrides$header3, _overrides$content2;
@@ -205,7 +209,8 @@ var List = /*#__PURE__*/forwardRef(function (props, ref) {
       emptySearchState = props.emptySearchState,
       testId = props.testId,
       handleLoadMore = props.handleLoadMore,
-      loadingMoreIds = props.loadingMoreIds;
+      loadingMoreIds = props.loadingMoreIds,
+      onExpandedChange = props.onExpandedChange;
   var mergedI18n = useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
   }, [i18n]);
@@ -248,7 +253,8 @@ var List = /*#__PURE__*/forwardRef(function (props, ref) {
     loadingMoreIds: loadingMoreIds,
     selectedItemRef: ref,
     i18n: mergedI18n,
-    lockedIds: lockedIds
+    lockedIds: lockedIds,
+    onExpandedChange: onExpandedChange
   }, overrides === null || overrides === void 0 ? void 0 : (_overrides$content2 = overrides.content) === null || _overrides$content2 === void 0 ? void 0 : _overrides$content2.props)), pagination && !isLoading ? /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(iotPrefix, "--list--page")
   }, /*#__PURE__*/React__default.createElement(SimplePagination, _extends({}, pagination, {
@@ -700,6 +706,17 @@ List.__docgenInfo = {
       },
       "required": false,
       "description": "call back function for when load more row is clicked  (rowId) => {}"
+    },
+    "onExpandedChange": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "called after the row has expanded or collapsed and is passed the array of expanded ids"
     }
   }
 };

package/es/components/List/ListContent/ListContent.js

@@ -5,11 +5,13 @@ import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import isEqual from '../../../packages/react/node_modules/lodash-es/isEqual.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.array.slice.js';
 import React__default, { useMemo } from 'react';
 import { Checkbox, SkeletonText } from 'carbon-components-react';
 import classnames from 'classnames';
@@ -22,6 +24,7 @@ import { EditingStyle, editingStyleIsMultiple } from '../../../utils/DragAndDrop
 import { ListItemPropTypes } from '../ListPropTypes.js';
 import { HtmlElementRefProp } from '../../../constants/SharedPropTypes.js';
 import { ITEM_LEVEL_OFFSET, ITEM_COLUMN_GAP } from '../VirtualListContent/listConstants.js';
+import { usePrevious } from '../../../hooks/usePrevious.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -100,7 +103,10 @@ var propTypes = {
 
   /** icon can be left or right side of list row primary value */
   iconPosition: PropTypes.oneOf(['left', 'right']),
-  selectedItemRef: HtmlElementRefProp
+  selectedItemRef: HtmlElementRefProp,
+
+  /** called after the row has expanded or collapsed and is passed the array of expanded ids */
+  onExpandedChange: PropTypes.func
 };
 var defaultProps = {
   editingStyle: null,
@@ -133,7 +139,8 @@ var defaultProps = {
   selectedIds: [],
   selectedItemRef: /*#__PURE__*/React__default.createRef(),
   testId: 'list',
-  toggleExpansion: function toggleExpansion() {}
+  toggleExpansion: function toggleExpansion() {},
+  onExpandedChange: null
 };
 
 var getAdjustedNestingLevel = function getAdjustedNestingLevel(items, currentLevel) {
@@ -166,7 +173,8 @@ var ListContent = function ListContent(_ref) {
       lockedIds = _ref.lockedIds,
       handleLoadMore = _ref.handleLoadMore,
       i18n = _ref.i18n,
-      selectedItemRef = _ref.selectedItemRef;
+      selectedItemRef = _ref.selectedItemRef,
+      onExpandedChange = _ref.onExpandedChange;
   var mergedI18n = useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
   }, [i18n]);
@@ -277,7 +285,34 @@ var ListContent = function ListContent(_ref) {
     }).concat(item.hasLoadMore ? [renderLoadMore(item, isLoadingMore, level + 1)] : []) : []), _toConsumableArray(!hasChildren && item.hasLoadMore ? [renderLoadMore(item, isLoadingMore, level)] : []));
   };
 
+  var previousExpandedIds = usePrevious(expandedIds, expandedIds);
+  var selectionChanged = !isEqual(expandedIds, previousExpandedIds); // get the lastId of the diff between previous and current, this handles closes
+
+  var previousLastId = selectionChanged && previousExpandedIds.filter(function (id) {
+    return !expandedIds.includes(id);
+  }).slice(-1)[0]; // get the lastId of the diff between current and previous, this handles opens
+
+  var lastId = selectionChanged && expandedIds.filter(function (id) {
+    return !previousExpandedIds.includes(id);
+  }).slice(-1)[0];
+
+  var notifyOnLastExpansionChange = function notifyOnLastExpansionChange(itemId) {
+    var isLastItem = lastId === itemId || previousLastId === itemId;
+
+    if (isLastItem && expandedIds.includes(itemId) !== previousExpandedIds.includes(itemId)) {
+      // the setTimeout within the request animation frame helps to ensure the event is fired
+      // immediately after a repaint. See:
+      // https://firefox-source-docs.mozilla.org/performance/bestpractices.html#how-do-i-avoid-triggering-uninterruptible-reflow
+      window.requestAnimationFrame(function () {
+        setTimeout(function () {
+          onExpandedChange(expandedIds);
+        });
+      }, 0);
+    }
+  };
+
   var listItems = items.map(function (item, index) {
+    notifyOnLastExpansionChange(item.id);
     return renderItemAndChildren(item, index, null, getAdjustedNestingLevel(items, 0));
   });
 
@@ -640,6 +675,17 @@ ListContent.__docgenInfo = {
       },
       "required": false,
       "description": "call back function of expansion"
+    },
+    "onExpandedChange": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "called after the row has expanded or collapsed and is passed the array of expanded ids"
     }
   }
 };

package/es/components/List/ListItem/ListItem.js

@@ -291,7 +291,7 @@ var dragSourceSpecification = {
       id: props.id
     };
   }
-}; // These props origininate from React DND and are passed down to
+}; // These props originate from React DND and are passed down to
 // the ListItem via the DragSource wrapper.
 
 var dndPropsCollecting = function dndPropsCollecting(connect, monitor) {

package/es/components/Table/Table.js

@@ -301,7 +301,8 @@ var propTypes = {
   /** Callbacks for actions of the table, can be used to update state in wrapper component to update `view` props */
   actions: PropTypes.shape({
     pagination: PropTypes.shape({
-      /** Specify a callback for when the current page or page size is changed. This callback is passed an object parameter containing the current page and the current page size */
+      /** Specify a callback for when the current page or page size is changed.
+       * This callback is passed an object parameter containing the current page and the current page size */
       onChangePage: PropTypes.func
     }),
     toolbar: PropTypes.shape({
@@ -310,9 +311,15 @@ var propTypes = {
       onShowRowEdit: PropTypes.func,
       onToggleColumnSelection: PropTypes.func,
 
-      /** Specify a callback for when the user clicks toolbar button to clear all filters. Receives a parameter of the current filter values for each column */
+      /** Specify a callback for when the user clicks toolbar button to clear all filters.
+       * Receives a parameter of the current filter values for each column */
       onClearAllFilters: PropTypes.func,
+
+      /** Callback for when the automatcally generated Cancel action in the batch actions bar is clicked */
       onCancelBatchAction: PropTypes.func,
+
+      /** Callback for all the batch actions except the cancel. Is called with the id of the clicked action.
+       *  For the StatefulTable the current selections are received as second parameter  */
       onApplyBatchAction: PropTypes.func,
 
       /** Apply a search criteria to the table */
@@ -354,7 +361,8 @@ var propTypes = {
       onSelectAll: PropTypes.func,
       onChangeSort: PropTypes.func,
 
-      /** callback if a row action is clicked called with the id of the action then the id of the row if you return a promise from apply row action the stateful table will assume you're asynchronous and give a spinner */
+      /** callback if a row action is clicked called with the id of the action then the id of the row if you
+       * return a promise from apply row action the stateful table will assume you're asynchronous and give a spinner */
       onApplyRowAction: PropTypes.func,
       onClearRowError: PropTypes.func,
       onEmptyStateAction: PropTypes.func,
@@ -1668,7 +1676,7 @@ Table.__docgenInfo = {
             "value": {
               "onChangePage": {
                 "name": "func",
-                "description": "Specify a callback for when the current page or page size is changed. This callback is passed an object parameter containing the current page and the current page size",
+                "description": "Specify a callback for when the current page or page size is changed.\nThis callback is passed an object parameter containing the current page and the current page size",
                 "required": false
               }
             },
@@ -1695,15 +1703,17 @@ Table.__docgenInfo = {
               },
               "onClearAllFilters": {
                 "name": "func",
-                "description": "Specify a callback for when the user clicks toolbar button to clear all filters. Receives a parameter of the current filter values for each column",
+                "description": "Specify a callback for when the user clicks toolbar button to clear all filters.\nReceives a parameter of the current filter values for each column",
                 "required": false
               },
               "onCancelBatchAction": {
                 "name": "func",
+                "description": "Callback for when the automatcally generated Cancel action in the batch actions bar is clicked",
                 "required": false
               },
               "onApplyBatchAction": {
                 "name": "func",
+                "description": "Callback for all the batch actions except the cancel. Is called with the id of the clicked action.\n For the StatefulTable the current selections are received as second parameter",
                 "required": false
               },
               "onApplySearch": {
@@ -1784,7 +1794,7 @@ Table.__docgenInfo = {
               },
               "onApplyRowAction": {
                 "name": "func",
-                "description": "callback if a row action is clicked called with the id of the action then the id of the row if you return a promise from apply row action the stateful table will assume you're asynchronous and give a spinner",
+                "description": "callback if a row action is clicked called with the id of the action then the id of the row if you\nreturn a promise from apply row action the stateful table will assume you're asynchronous and give a spinner",
                 "required": false
               },
               "onClearRowError": {

package/es/hooks/useHasTextOverflow.js

@@ -2,15 +2,24 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useEffect } from 'react';
 
 var useHasTextOverflow = function useHasTextOverflow(elementRef) {
+  var _elementRef$current5, _elementRef$current6, _elementRef$current7, _elementRef$current8;
+
+  var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isOverflowed = _useState2[0],
       setIsOverflowed = _useState2[1];
 
   useEffect(function () {
-    var overFlowing = elementRef.current && (elementRef.current.scrollHeight > elementRef.current.clientHeight || elementRef.current.scrollWidth > elementRef.current.clientWidth);
+    var _elementRef$current, _elementRef$current2, _elementRef$current3, _elementRef$current4;
+
+    var overFlowing = elementRef.current && ((elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.scrollHeight) > (elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.clientHeight) || (elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.scrollWidth) > (elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current4 = elementRef.current) === null || _elementRef$current4 === void 0 ? void 0 : _elementRef$current4.clientWidth));
     setIsOverflowed(overFlowing);
-  }, [elementRef]);
+    /* disabling to not put the ref in dep array */
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+  }, [elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current5 = elementRef.current) === null || _elementRef$current5 === void 0 ? void 0 : _elementRef$current5.clientHeight, elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current6 = elementRef.current) === null || _elementRef$current6 === void 0 ? void 0 : _elementRef$current6.clientWidth, elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current7 = elementRef.current) === null || _elementRef$current7 === void 0 ? void 0 : _elementRef$current7.scrollHeight, elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current8 = elementRef.current) === null || _elementRef$current8 === void 0 ? void 0 : _elementRef$current8.scrollWidth, text]);
   return isOverflowed;
 };
 

package/lib/components/Card/Card.js

@@ -400,8 +400,8 @@ var Card = function Card(props) {
 
   var titleRef = React.useRef();
   var subTitleRef = React.useRef();
-  var hasTitleTooltip = useHasTextOverflow(titleRef);
-  var hasSubTitleTooltip = useHasTextOverflow(subTitleRef);
+  var hasTitleTooltip = useHasTextOverflow(titleRef, title);
+  var hasSubTitleTooltip = useHasTextOverflow(subTitleRef, subtitle);
   var visibilityRef = React.useRef(null);
 
   var _useVisibilityObserve = useVisibilityObserver(visibilityRef, {
@@ -464,6 +464,7 @@ var Card = function Card(props) {
     triggerText: title
   }, title) : /*#__PURE__*/React__default['default'].createElement("div", {
     ref: titleRef,
+    "data-testid": "".concat(testId, "-title-notip"),
     className: classnames__default['default']("".concat(iotPrefix, "--card--title--text"), _defineProperty__default['default']({}, "".concat(iotPrefix, "--card--title--text--wrapped"), hasTitleWrap && !subtitle))
   }, title), tooltip && /*#__PURE__*/React__default['default'].createElement(carbonComponentsReact.Tooltip, {
     "data-testid": "".concat(testID || testId, "-tooltip"),

package/lib/components/List/HierarchyList/HierarchyList.js

@@ -392,14 +392,16 @@ var HierarchyList = function HierarchyList(_ref2) {
   }, [expandedIdsProp]);
   /**
    * effect to trigger calling the onExpandedChange callback. Ignore it on the initial render
-   * when previousExpandedIds is undefined, but fire it on every change afterward
+   * when previousExpandedIds is undefined, but fire it on every change afterward when using a
+   * virtualList. The regular list triggers the onExpandedChange callback in the handleAfterExpand
+   * function below.
    */
 
   React.useEffect(function () {
-    if (previousExpandedIds !== undefined && !isEqual(previousExpandedIds, expandedIds)) {
+    if (previousExpandedIds !== undefined && !isEqual(previousExpandedIds, expandedIds) && isVirtualList) {
       onExpandedChange(expandedIds);
     }
-  }, [expandedIds, onExpandedChange, previousExpandedIds]);
+  }, [expandedIds, isVirtualList, onExpandedChange, previousExpandedIds]);
   /**
    * Effect to handle indeterminate state for parent checkboxes. If we're in an editMode and
    * the selected ids changes, fire this effect to determine the currently indeterminate ids
@@ -653,7 +655,8 @@ var HierarchyList = function HierarchyList(_ref2) {
     onItemMoved: handleDrag,
     className: className,
     emptyState: emptyState,
-    emptySearchState: emptySearchState
+    emptySearchState: emptySearchState,
+    onExpandedChange: onExpandedChange
   }));
 };
 

package/lib/components/List/List.js

@@ -143,7 +143,10 @@ var propTypes = {
   handleLoadMore: PropTypes__default['default'].func,
 
   /** RowIds for rows currently loading more child rows */
-  loadingMoreIds: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string)
+  loadingMoreIds: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
+
+  /** called after the row has expanded or collapsed and is passed the array of expanded ids */
+  onExpandedChange: PropTypes__default['default'].func
 };
 var defaultProps = {
   className: null,
@@ -182,7 +185,8 @@ var defaultProps = {
   emptyState: 'No list items to show',
   emptySearchState: 'No results found',
   testId: 'list',
-  handleLoadMore: function handleLoadMore() {}
+  handleLoadMore: function handleLoadMore() {},
+  onExpandedChange: null
 };
 var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _overrides$header, _overrides$content, _classnames, _overrides$header2, _overrides$header2$pr, _overrides$header3, _overrides$content2;
@@ -217,7 +221,8 @@ var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
       emptySearchState = props.emptySearchState,
       testId = props.testId,
       handleLoadMore = props.handleLoadMore,
-      loadingMoreIds = props.loadingMoreIds;
+      loadingMoreIds = props.loadingMoreIds,
+      onExpandedChange = props.onExpandedChange;
   var mergedI18n = React.useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
   }, [i18n]);
@@ -260,7 +265,8 @@ var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
     loadingMoreIds: loadingMoreIds,
     selectedItemRef: ref,
     i18n: mergedI18n,
-    lockedIds: lockedIds
+    lockedIds: lockedIds,
+    onExpandedChange: onExpandedChange
   }, overrides === null || overrides === void 0 ? void 0 : (_overrides$content2 = overrides.content) === null || _overrides$content2 === void 0 ? void 0 : _overrides$content2.props)), pagination && !isLoading ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(iotPrefix, "--list--page")
   }, /*#__PURE__*/React__default['default'].createElement(SimplePagination['default'], _extends__default['default']({}, pagination, {
@@ -712,6 +718,17 @@ List.__docgenInfo = {
       },
       "required": false,
       "description": "call back function for when load more row is clicked  (rowId) => {}"
+    },
+    "onExpandedChange": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "called after the row has expanded or collapsed and is passed the array of expanded ids"
     }
   }
 };

package/lib/components/List/ListContent/ListContent.js

@@ -7,11 +7,13 @@ require('core-js/modules/web.dom-collections.for-each.js');
 require('core-js/modules/es.object.get-own-property-descriptors.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var isEqual = require('../../../packages/react/node_modules/lodash-es/isEqual.js');
 require('core-js/modules/es.array.concat.js');
 require('core-js/modules/es.array.filter.js');
 require('core-js/modules/es.array.includes.js');
 require('core-js/modules/es.string.includes.js');
 require('core-js/modules/es.array.map.js');
+require('core-js/modules/es.array.slice.js');
 var React = require('react');
 var carbonComponentsReact = require('carbon-components-react');
 var classnames = require('classnames');
@@ -24,6 +26,7 @@ var DragAndDropUtils = require('../../../utils/DragAndDropUtils.js');
 var ListPropTypes = require('../ListPropTypes.js');
 var SharedPropTypes = require('../../../constants/SharedPropTypes.js');
 var listConstants = require('../VirtualListContent/listConstants.js');
+var usePrevious = require('../../../hooks/usePrevious.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -110,7 +113,10 @@ var propTypes = {
 
   /** icon can be left or right side of list row primary value */
   iconPosition: PropTypes__default['default'].oneOf(['left', 'right']),
-  selectedItemRef: SharedPropTypes.HtmlElementRefProp
+  selectedItemRef: SharedPropTypes.HtmlElementRefProp,
+
+  /** called after the row has expanded or collapsed and is passed the array of expanded ids */
+  onExpandedChange: PropTypes__default['default'].func
 };
 var defaultProps = {
   editingStyle: null,
@@ -143,7 +149,8 @@ var defaultProps = {
   selectedIds: [],
   selectedItemRef: /*#__PURE__*/React__default['default'].createRef(),
   testId: 'list',
-  toggleExpansion: function toggleExpansion() {}
+  toggleExpansion: function toggleExpansion() {},
+  onExpandedChange: null
 };
 
 var getAdjustedNestingLevel = function getAdjustedNestingLevel(items, currentLevel) {
@@ -176,7 +183,8 @@ var ListContent = function ListContent(_ref) {
       lockedIds = _ref.lockedIds,
       handleLoadMore = _ref.handleLoadMore,
       i18n = _ref.i18n,
-      selectedItemRef = _ref.selectedItemRef;
+      selectedItemRef = _ref.selectedItemRef,
+      onExpandedChange = _ref.onExpandedChange;
   var mergedI18n = React.useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
   }, [i18n]);
@@ -287,7 +295,34 @@ var ListContent = function ListContent(_ref) {
     }).concat(item.hasLoadMore ? [renderLoadMore(item, isLoadingMore, level + 1)] : []) : []), _toConsumableArray__default['default'](!hasChildren && item.hasLoadMore ? [renderLoadMore(item, isLoadingMore, level)] : []));
   };
 
+  var previousExpandedIds = usePrevious.usePrevious(expandedIds, expandedIds);
+  var selectionChanged = !isEqual(expandedIds, previousExpandedIds); // get the lastId of the diff between previous and current, this handles closes
+
+  var previousLastId = selectionChanged && previousExpandedIds.filter(function (id) {
+    return !expandedIds.includes(id);
+  }).slice(-1)[0]; // get the lastId of the diff between current and previous, this handles opens
+
+  var lastId = selectionChanged && expandedIds.filter(function (id) {
+    return !previousExpandedIds.includes(id);
+  }).slice(-1)[0];
+
+  var notifyOnLastExpansionChange = function notifyOnLastExpansionChange(itemId) {
+    var isLastItem = lastId === itemId || previousLastId === itemId;
+
+    if (isLastItem && expandedIds.includes(itemId) !== previousExpandedIds.includes(itemId)) {
+      // the setTimeout within the request animation frame helps to ensure the event is fired
+      // immediately after a repaint. See:
+      // https://firefox-source-docs.mozilla.org/performance/bestpractices.html#how-do-i-avoid-triggering-uninterruptible-reflow
+      window.requestAnimationFrame(function () {
+        setTimeout(function () {
+          onExpandedChange(expandedIds);
+        });
+      }, 0);
+    }
+  };
+
   var listItems = items.map(function (item, index) {
+    notifyOnLastExpansionChange(item.id);
     return renderItemAndChildren(item, index, null, getAdjustedNestingLevel(items, 0));
   });
 
@@ -650,6 +685,17 @@ ListContent.__docgenInfo = {
       },
       "required": false,
       "description": "call back function of expansion"
+    },
+    "onExpandedChange": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "called after the row has expanded or collapsed and is passed the array of expanded ids"
     }
   }
 };

package/lib/components/List/ListItem/ListItem.js

@@ -304,7 +304,7 @@ var dragSourceSpecification = {
       id: props.id
     };
   }
-}; // These props origininate from React DND and are passed down to
+}; // These props originate from React DND and are passed down to
 // the ListItem via the DragSource wrapper.
 
 var dndPropsCollecting = function dndPropsCollecting(connect, monitor) {

package/lib/components/Table/Table.js

@@ -318,7 +318,8 @@ var propTypes = {
   /** Callbacks for actions of the table, can be used to update state in wrapper component to update `view` props */
   actions: PropTypes__default['default'].shape({
     pagination: PropTypes__default['default'].shape({
-      /** Specify a callback for when the current page or page size is changed. This callback is passed an object parameter containing the current page and the current page size */
+      /** Specify a callback for when the current page or page size is changed.
+       * This callback is passed an object parameter containing the current page and the current page size */
       onChangePage: PropTypes__default['default'].func
     }),
     toolbar: PropTypes__default['default'].shape({
@@ -327,9 +328,15 @@ var propTypes = {
       onShowRowEdit: PropTypes__default['default'].func,
       onToggleColumnSelection: PropTypes__default['default'].func,
 
-      /** Specify a callback for when the user clicks toolbar button to clear all filters. Receives a parameter of the current filter values for each column */
+      /** Specify a callback for when the user clicks toolbar button to clear all filters.
+       * Receives a parameter of the current filter values for each column */
       onClearAllFilters: PropTypes__default['default'].func,
+
+      /** Callback for when the automatcally generated Cancel action in the batch actions bar is clicked */
       onCancelBatchAction: PropTypes__default['default'].func,
+
+      /** Callback for all the batch actions except the cancel. Is called with the id of the clicked action.
+       *  For the StatefulTable the current selections are received as second parameter  */
       onApplyBatchAction: PropTypes__default['default'].func,
 
       /** Apply a search criteria to the table */
@@ -371,7 +378,8 @@ var propTypes = {
       onSelectAll: PropTypes__default['default'].func,
       onChangeSort: PropTypes__default['default'].func,
 
-      /** callback if a row action is clicked called with the id of the action then the id of the row if you return a promise from apply row action the stateful table will assume you're asynchronous and give a spinner */
+      /** callback if a row action is clicked called with the id of the action then the id of the row if you
+       * return a promise from apply row action the stateful table will assume you're asynchronous and give a spinner */
       onApplyRowAction: PropTypes__default['default'].func,
       onClearRowError: PropTypes__default['default'].func,
       onEmptyStateAction: PropTypes__default['default'].func,
@@ -1685,7 +1693,7 @@ Table.__docgenInfo = {
             "value": {
               "onChangePage": {
                 "name": "func",
-                "description": "Specify a callback for when the current page or page size is changed. This callback is passed an object parameter containing the current page and the current page size",
+                "description": "Specify a callback for when the current page or page size is changed.\nThis callback is passed an object parameter containing the current page and the current page size",
                 "required": false
               }
             },
@@ -1712,15 +1720,17 @@ Table.__docgenInfo = {
               },
               "onClearAllFilters": {
                 "name": "func",
-                "description": "Specify a callback for when the user clicks toolbar button to clear all filters. Receives a parameter of the current filter values for each column",
+                "description": "Specify a callback for when the user clicks toolbar button to clear all filters.\nReceives a parameter of the current filter values for each column",
                 "required": false
               },
               "onCancelBatchAction": {
                 "name": "func",
+                "description": "Callback for when the automatcally generated Cancel action in the batch actions bar is clicked",
                 "required": false
               },
               "onApplyBatchAction": {
                 "name": "func",
+                "description": "Callback for all the batch actions except the cancel. Is called with the id of the clicked action.\n For the StatefulTable the current selections are received as second parameter",
                 "required": false
               },
               "onApplySearch": {
@@ -1801,7 +1811,7 @@ Table.__docgenInfo = {
               },
               "onApplyRowAction": {
                 "name": "func",
-                "description": "callback if a row action is clicked called with the id of the action then the id of the row if you return a promise from apply row action the stateful table will assume you're asynchronous and give a spinner",
+                "description": "callback if a row action is clicked called with the id of the action then the id of the row if you\nreturn a promise from apply row action the stateful table will assume you're asynchronous and give a spinner",
                 "required": false
               },
               "onClearRowError": {

package/lib/hooks/useHasTextOverflow.js

@@ -8,15 +8,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 
 var useHasTextOverflow = function useHasTextOverflow(elementRef) {
+  var _elementRef$current5, _elementRef$current6, _elementRef$current7, _elementRef$current8;
+
+  var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
       isOverflowed = _useState2[0],
       setIsOverflowed = _useState2[1];
 
   React.useEffect(function () {
-    var overFlowing = elementRef.current && (elementRef.current.scrollHeight > elementRef.current.clientHeight || elementRef.current.scrollWidth > elementRef.current.clientWidth);
+    var _elementRef$current, _elementRef$current2, _elementRef$current3, _elementRef$current4;
+
+    var overFlowing = elementRef.current && ((elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.scrollHeight) > (elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.clientHeight) || (elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.scrollWidth) > (elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current4 = elementRef.current) === null || _elementRef$current4 === void 0 ? void 0 : _elementRef$current4.clientWidth));
     setIsOverflowed(overFlowing);
-  }, [elementRef]);
+    /* disabling to not put the ref in dep array */
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+  }, [elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current5 = elementRef.current) === null || _elementRef$current5 === void 0 ? void 0 : _elementRef$current5.clientHeight, elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current6 = elementRef.current) === null || _elementRef$current6 === void 0 ? void 0 : _elementRef$current6.clientWidth, elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current7 = elementRef.current) === null || _elementRef$current7 === void 0 ? void 0 : _elementRef$current7.scrollHeight, elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current8 = elementRef.current) === null || _elementRef$current8 === void 0 ? void 0 : _elementRef$current8.scrollWidth, text]);
   return isOverflowed;
 };
 

package/package.json

@@ -339,10 +339,10 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.149.0-next.4",
+  "version": "2.149.0-next.8",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2"
   },
-  "gitHead": "f534fed80c7aaf17902ae756f6e30dc9bbeaddce"
+  "gitHead": "cd70f9aa373747754c8107c5a03bc83b881e549e"
 }

package/umd/carbon-addons-iot-react.js

@@ -43614,7 +43614,8 @@
 	  /** Callbacks for actions of the table, can be used to update state in wrapper component to update `view` props */
 	  actions: PropTypes__default['default'].shape({
 	    pagination: PropTypes__default['default'].shape({
-	      /** Specify a callback for when the current page or page size is changed. This callback is passed an object parameter containing the current page and the current page size */
+	      /** Specify a callback for when the current page or page size is changed.
+	       * This callback is passed an object parameter containing the current page and the current page size */
 	      onChangePage: PropTypes__default['default'].func
 	    }),
 	    toolbar: PropTypes__default['default'].shape({
@@ -43623,9 +43624,15 @@
 	      onShowRowEdit: PropTypes__default['default'].func,
 	      onToggleColumnSelection: PropTypes__default['default'].func,
 
-	      /** Specify a callback for when the user clicks toolbar button to clear all filters. Receives a parameter of the current filter values for each column */
+	      /** Specify a callback for when the user clicks toolbar button to clear all filters.
+	       * Receives a parameter of the current filter values for each column */
 	      onClearAllFilters: PropTypes__default['default'].func,
+
+	      /** Callback for when the automatcally generated Cancel action in the batch actions bar is clicked */
 	      onCancelBatchAction: PropTypes__default['default'].func,
+
+	      /** Callback for all the batch actions except the cancel. Is called with the id of the clicked action.
+	       *  For the StatefulTable the current selections are received as second parameter  */
 	      onApplyBatchAction: PropTypes__default['default'].func,
 
 	      /** Apply a search criteria to the table */
@@ -43667,7 +43674,8 @@
 	      onSelectAll: PropTypes__default['default'].func,
 	      onChangeSort: PropTypes__default['default'].func,
 
-	      /** callback if a row action is clicked called with the id of the action then the id of the row if you return a promise from apply row action the stateful table will assume you're asynchronous and give a spinner */
+	      /** callback if a row action is clicked called with the id of the action then the id of the row if you
+	       * return a promise from apply row action the stateful table will assume you're asynchronous and give a spinner */
 	      onApplyRowAction: PropTypes__default['default'].func,
 	      onClearRowError: PropTypes__default['default'].func,
 	      onEmptyStateAction: PropTypes__default['default'].func,
@@ -44981,7 +44989,7 @@
 	            "value": {
 	              "onChangePage": {
 	                "name": "func",
-	                "description": "Specify a callback for when the current page or page size is changed. This callback is passed an object parameter containing the current page and the current page size",
+	                "description": "Specify a callback for when the current page or page size is changed.\nThis callback is passed an object parameter containing the current page and the current page size",
 	                "required": false
 	              }
 	            },
@@ -45008,15 +45016,17 @@
 	              },
 	              "onClearAllFilters": {
 	                "name": "func",
-	                "description": "Specify a callback for when the user clicks toolbar button to clear all filters. Receives a parameter of the current filter values for each column",
+	                "description": "Specify a callback for when the user clicks toolbar button to clear all filters.\nReceives a parameter of the current filter values for each column",
 	                "required": false
 	              },
 	              "onCancelBatchAction": {
 	                "name": "func",
+	                "description": "Callback for when the automatcally generated Cancel action in the batch actions bar is clicked",
 	                "required": false
 	              },
 	              "onApplyBatchAction": {
 	                "name": "func",
+	                "description": "Callback for all the batch actions except the cancel. Is called with the id of the clicked action.\n For the StatefulTable the current selections are received as second parameter",
 	                "required": false
 	              },
 	              "onApplySearch": {
@@ -45097,7 +45107,7 @@
 	              },
 	              "onApplyRowAction": {
 	                "name": "func",
-	                "description": "callback if a row action is clicked called with the id of the action then the id of the row if you return a promise from apply row action the stateful table will assume you're asynchronous and give a spinner",
+	                "description": "callback if a row action is clicked called with the id of the action then the id of the row if you\nreturn a promise from apply row action the stateful table will assume you're asynchronous and give a spinner",
 	                "required": false
 	              },
 	              "onClearRowError": {
@@ -46996,7 +47006,7 @@
 	      id: props.id
 	    };
 	  }
-	}; // These props origininate from React DND and are passed down to
+	}; // These props originate from React DND and are passed down to
 	// the ListItem via the DragSource wrapper.
 
 	var dndPropsCollecting = function dndPropsCollecting(connect, monitor) {
@@ -47506,7 +47516,10 @@
 
 	  /** icon can be left or right side of list row primary value */
 	  iconPosition: PropTypes__default['default'].oneOf(['left', 'right']),
-	  selectedItemRef: HtmlElementRefProp
+	  selectedItemRef: HtmlElementRefProp,
+
+	  /** called after the row has expanded or collapsed and is passed the array of expanded ids */
+	  onExpandedChange: PropTypes__default['default'].func
 	};
 	var defaultProps$1U = {
 	  editingStyle: null,
@@ -47539,7 +47552,8 @@
 	  selectedIds: [],
 	  selectedItemRef: /*#__PURE__*/React__default['default'].createRef(),
 	  testId: 'list',
-	  toggleExpansion: function toggleExpansion() {}
+	  toggleExpansion: function toggleExpansion() {},
+	  onExpandedChange: null
 	};
 
 	var getAdjustedNestingLevel$1 = function getAdjustedNestingLevel(items, currentLevel) {
@@ -47572,7 +47586,8 @@
 	      lockedIds = _ref.lockedIds,
 	      handleLoadMore = _ref.handleLoadMore,
 	      i18n = _ref.i18n,
-	      selectedItemRef = _ref.selectedItemRef;
+	      selectedItemRef = _ref.selectedItemRef,
+	      onExpandedChange = _ref.onExpandedChange;
 	  var mergedI18n = React$1.useMemo(function () {
 	    return _objectSpread$1H(_objectSpread$1H({}, defaultProps$1U.i18n), i18n);
 	  }, [i18n]);
@@ -47683,7 +47698,34 @@
 	    }).concat(item.hasLoadMore ? [renderLoadMore(item, isLoadingMore, level + 1)] : []) : []), toConsumableArray(!hasChildren && item.hasLoadMore ? [renderLoadMore(item, isLoadingMore, level)] : []));
 	  };
 
+	  var previousExpandedIds = usePrevious(expandedIds, expandedIds);
+	  var selectionChanged = !isEqual$2(expandedIds, previousExpandedIds); // get the lastId of the diff between previous and current, this handles closes
+
+	  var previousLastId = selectionChanged && previousExpandedIds.filter(function (id) {
+	    return !expandedIds.includes(id);
+	  }).slice(-1)[0]; // get the lastId of the diff between current and previous, this handles opens
+
+	  var lastId = selectionChanged && expandedIds.filter(function (id) {
+	    return !previousExpandedIds.includes(id);
+	  }).slice(-1)[0];
+
+	  var notifyOnLastExpansionChange = function notifyOnLastExpansionChange(itemId) {
+	    var isLastItem = lastId === itemId || previousLastId === itemId;
+
+	    if (isLastItem && expandedIds.includes(itemId) !== previousExpandedIds.includes(itemId)) {
+	      // the setTimeout within the request animation frame helps to ensure the event is fired
+	      // immediately after a repaint. See:
+	      // https://firefox-source-docs.mozilla.org/performance/bestpractices.html#how-do-i-avoid-triggering-uninterruptible-reflow
+	      window.requestAnimationFrame(function () {
+	        setTimeout(function () {
+	          onExpandedChange(expandedIds);
+	        });
+	      }, 0);
+	    }
+	  };
+
 	  var listItems = items.map(function (item, index) {
+	    notifyOnLastExpansionChange(item.id);
 	    return renderItemAndChildren(item, index, null, getAdjustedNestingLevel$1(items, 0));
 	  });
 
@@ -48046,6 +48088,17 @@
 	      },
 	      "required": false,
 	      "description": "call back function of expansion"
+	    },
+	    "onExpandedChange": {
+	      "defaultValue": {
+	        "value": "null",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": false,
+	      "description": "called after the row has expanded or collapsed and is passed the array of expanded ids"
 	    }
 	  }
 	};
@@ -49861,7 +49914,10 @@
 	  handleLoadMore: PropTypes__default['default'].func,
 
 	  /** RowIds for rows currently loading more child rows */
-	  loadingMoreIds: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string)
+	  loadingMoreIds: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
+
+	  /** called after the row has expanded or collapsed and is passed the array of expanded ids */
+	  onExpandedChange: PropTypes__default['default'].func
 	};
 	var defaultProps$1S = {
 	  className: null,
@@ -49900,7 +49956,8 @@
 	  emptyState: 'No list items to show',
 	  emptySearchState: 'No results found',
 	  testId: 'list',
-	  handleLoadMore: function handleLoadMore() {}
+	  handleLoadMore: function handleLoadMore() {},
+	  onExpandedChange: null
 	};
 	var List = /*#__PURE__*/React$1.forwardRef(function (props, ref) {
 	  var _overrides$header, _overrides$content, _classnames, _overrides$header2, _overrides$header2$pr, _overrides$header3, _overrides$content2;
@@ -49935,7 +49992,8 @@
 	      emptySearchState = props.emptySearchState,
 	      testId = props.testId,
 	      handleLoadMore = props.handleLoadMore,
-	      loadingMoreIds = props.loadingMoreIds;
+	      loadingMoreIds = props.loadingMoreIds,
+	      onExpandedChange = props.onExpandedChange;
 	  var mergedI18n = React$1.useMemo(function () {
 	    return _objectSpread$1F(_objectSpread$1F({}, defaultProps$1S.i18n), i18n);
 	  }, [i18n]);
@@ -49978,7 +50036,8 @@
 	    loadingMoreIds: loadingMoreIds,
 	    selectedItemRef: ref,
 	    i18n: mergedI18n,
-	    lockedIds: lockedIds
+	    lockedIds: lockedIds,
+	    onExpandedChange: onExpandedChange
 	  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$content2 = overrides.content) === null || _overrides$content2 === void 0 ? void 0 : _overrides$content2.props)), pagination && !isLoading ? /*#__PURE__*/React__default['default'].createElement("div", {
 	    className: "".concat(iotPrefix$1z, "--list--page")
 	  }, /*#__PURE__*/React__default['default'].createElement(SimplePagination, _extends_1$1({}, pagination, {
@@ -50430,6 +50489,17 @@
 	      },
 	      "required": false,
 	      "description": "call back function for when load more row is clicked  (rowId) => {}"
+	    },
+	    "onExpandedChange": {
+	      "defaultValue": {
+	        "value": "null",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": false,
+	      "description": "called after the row has expanded or collapsed and is passed the array of expanded ids"
 	    }
 	  }
 	};
@@ -60287,14 +60357,16 @@
 	  }, [expandedIdsProp]);
 	  /**
 	   * effect to trigger calling the onExpandedChange callback. Ignore it on the initial render
-	   * when previousExpandedIds is undefined, but fire it on every change afterward
+	   * when previousExpandedIds is undefined, but fire it on every change afterward when using a
+	   * virtualList. The regular list triggers the onExpandedChange callback in the handleAfterExpand
+	   * function below.
 	   */
 
 	  React$1.useEffect(function () {
-	    if (previousExpandedIds !== undefined && !isEqual$2(previousExpandedIds, expandedIds)) {
+	    if (previousExpandedIds !== undefined && !isEqual$2(previousExpandedIds, expandedIds) && isVirtualList) {
 	      onExpandedChange(expandedIds);
 	    }
-	  }, [expandedIds, onExpandedChange, previousExpandedIds]);
+	  }, [expandedIds, isVirtualList, onExpandedChange, previousExpandedIds]);
 	  /**
 	   * Effect to handle indeterminate state for parent checkboxes. If we're in an editMode and
 	   * the selected ids changes, fire this effect to determine the currently indeterminate ids
@@ -60548,7 +60620,8 @@
 	    onItemMoved: handleDrag,
 	    className: className,
 	    emptyState: emptyState,
-	    emptySearchState: emptySearchState
+	    emptySearchState: emptySearchState,
+	    onExpandedChange: onExpandedChange
 	  }));
 	};
 
@@ -109047,15 +109120,24 @@
 	};
 
 	var useHasTextOverflow = function useHasTextOverflow(elementRef) {
+	  var _elementRef$current5, _elementRef$current6, _elementRef$current7, _elementRef$current8;
+
+	  var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
 	  var _useState = React$1.useState(false),
 	      _useState2 = slicedToArray$1(_useState, 2),
 	      isOverflowed = _useState2[0],
 	      setIsOverflowed = _useState2[1];
 
 	  React$1.useEffect(function () {
-	    var overFlowing = elementRef.current && (elementRef.current.scrollHeight > elementRef.current.clientHeight || elementRef.current.scrollWidth > elementRef.current.clientWidth);
+	    var _elementRef$current, _elementRef$current2, _elementRef$current3, _elementRef$current4;
+
+	    var overFlowing = elementRef.current && ((elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.scrollHeight) > (elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.clientHeight) || (elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.scrollWidth) > (elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current4 = elementRef.current) === null || _elementRef$current4 === void 0 ? void 0 : _elementRef$current4.clientWidth));
 	    setIsOverflowed(overFlowing);
-	  }, [elementRef]);
+	    /* disabling to not put the ref in dep array */
+
+	    /* eslint-disable react-hooks/exhaustive-deps */
+	  }, [elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current5 = elementRef.current) === null || _elementRef$current5 === void 0 ? void 0 : _elementRef$current5.clientHeight, elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current6 = elementRef.current) === null || _elementRef$current6 === void 0 ? void 0 : _elementRef$current6.clientWidth, elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current7 = elementRef.current) === null || _elementRef$current7 === void 0 ? void 0 : _elementRef$current7.scrollHeight, elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current8 = elementRef.current) === null || _elementRef$current8 === void 0 ? void 0 : _elementRef$current8.scrollWidth, text]);
 	  return isOverflowed;
 	};
 
@@ -110183,8 +110265,8 @@
 
 	  var titleRef = React$1.useRef();
 	  var subTitleRef = React$1.useRef();
-	  var hasTitleTooltip = useHasTextOverflow(titleRef);
-	  var hasSubTitleTooltip = useHasTextOverflow(subTitleRef);
+	  var hasTitleTooltip = useHasTextOverflow(titleRef, title);
+	  var hasSubTitleTooltip = useHasTextOverflow(subTitleRef, subtitle);
 	  var visibilityRef = React$1.useRef(null);
 
 	  var _useVisibilityObserve = useVisibilityObserver(visibilityRef, {
@@ -110247,6 +110329,7 @@
 	    triggerText: title
 	  }, title) : /*#__PURE__*/React__default['default'].createElement("div", {
 	    ref: titleRef,
+	    "data-testid": "".concat(testId, "-title-notip"),
 	    className: classnames$1("".concat(iotPrefix$1e, "--card--title--text"), defineProperty$c({}, "".concat(iotPrefix$1e, "--card--title--text--wrapped"), hasTitleWrap && !subtitle))
 	  }, title), tooltip && /*#__PURE__*/React__default['default'].createElement(carbonComponentsReact.Tooltip, {
 	    "data-testid": "".concat(testID || testId, "-tooltip"),