@carbon/ibm-products 1.62.0 → 1.62.1

package/es/components/Carousel/Carousel.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "scrollableChange", "scrollTune"];
+var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 /**
  * Copyright IBM Corp. 2023, 2023
  *
@@ -9,20 +8,13 @@ var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor"
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-
-// Other standard imports.
-import { clamp, debounce } from 'lodash';
+import React, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { CarouselItem } from './CarouselItem';
-import { useIsOverflow, useWindowEvent } from './utils';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 
-// Carbon and package components we use.
-/* TODO: @import(s) of carbon components and other package components. */
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--carousel");
 var componentName = 'Carousel';
@@ -30,107 +22,178 @@ var componentName = 'Carousel';
 // Default values for props
 var defaults = {
   disableArrowScroll: false,
-  scrollTune: 0
+  onScroll: function onScroll() {},
+  onChangeIsScrollable: function onChangeIsScrollable() {}
 };
 
 /**
  * The Carousel acts as a scaffold for other Novice to Pro content.
  *
  * This component is not intended for general use.
+ *
+ * Expected scrolling behavior.
+ * 1. Scroll the maximum number of visible items at a time.
+ * 2. The left-most item should always be left-aligned in the viewport.
+ *
+ * Exception.
+ * 1. After scrolling to the last (right-most) item,
+ *      if some of its content remains hidden,
+ *      then nudge it to the right until it is right-aligned.
+ * 2. From the right-aligned position, when scrolling left,
+ *      the left-most item should again be left-aligned.
  */
-export var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$disableArrowScro = _ref.disableArrowScroll,
     disableArrowScroll = _ref$disableArrowScro === void 0 ? defaults.disableArrowScroll : _ref$disableArrowScro,
     fadedEdgeColor = _ref.fadedEdgeColor,
-    scrollableChange = _ref.scrollableChange,
-    _ref$scrollTune = _ref.scrollTune,
-    scrollTune = _ref$scrollTune === void 0 ? defaults.scrollTune : _ref$scrollTune,
+    _ref$onChangeIsScroll = _ref.onChangeIsScrollable,
+    onChangeIsScrollable = _ref$onChangeIsScroll === void 0 ? defaults.onChangeIsScrollable : _ref$onChangeIsScroll,
+    _ref$onScroll = _ref.onScroll,
+    onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var carouselScrollPromiseDelay = 700;
-  var totalViews = React.Children.count(children) || 1;
+  var carouselRef = useRef();
+  var scrollRef = useRef();
+  // Array of refs used to reference this component's children DOM elements
+  var childElementsRef = useRef(Array(React.Children.count(children)).fill(useRef(null)));
   var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left) || fadedEdgeColor;
   var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right) || fadedEdgeColor;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentViewID = _useState2[0],
-    _setCurrentViewID = _useState2[1];
-  var currentViewIDRef = useRef(currentViewID);
-  var scrollRef = useRef();
-  var carouselRef = useRef();
-  var mountedRef = useRef(true);
-  var isScrollable = useIsOverflow(scrollRef);
-  // Scrolling has no complete callback, nor does it return a promise.
-  // Since there is no way to tell when a scroll is finished we can set a timeout.
-  // Chrome appears to be the slowest implementation.
-  // Here is the spec: https://drafts.csswg.org/cssom-view/#concept-smooth-scroll
-  // found issue: https://github.com/w3c/csswg-drafts/issues/3744
-
-  var scrollNext = useCallback(function () {
-    return scrollToView(currentViewID + 1);
-  }, [currentViewID, scrollToView]);
-  var scrollPrev = useCallback(function () {
-    return scrollToView(currentViewID - 1);
-  }, [currentViewID, scrollToView]);
-  var scrollToView = useCallback(function (viewID) {
-    if (!isScrolling && scrollRef.current && mountedRef.current) {
-      var _scrollRef$current;
-      var targetViewID = clamp(viewID, 0, totalViews - 1);
-      setCurrentViewID(targetViewID);
-      setIsScrolling(true);
-      scrollRef.current.scrollLeft = ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.offsetWidth) * targetViewID + scrollTune;
-      return scrollPromise();
+
+  // Trigger callbacks to report state of the carousel
+  var handleOnScroll = useCallback(function () {
+    // viewport's width
+    var clientWidth = scrollRef.current.clientWidth;
+    // scroll position
+    var scrollLeft = parseInt(scrollRef.current.scrollLeft, 10);
+    // scrollable width
+    var scrollWidth = scrollRef.current.scrollWidth;
+
+    // The maximum scrollLeft achievable is the scrollable width - the viewport width.
+    var scrollLeftMax = scrollWidth - clientWidth;
+    // if isNaN(scrollLeft / scrollLeftMax), then set to zero
+    var scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
+    if (!scrollRef.current) {
+      return;
     }
-    return new Promise(function (resolve) {
-      return resolveScroll(resolve);
+
+    // Callback 1: Does the carousel have enough content to enable scrolling?
+    onChangeIsScrollable(scrollWidth > clientWidth);
+
+    // Callback 2: Return the percentage of current scroll, between 0 and 1.
+    onScroll(scrollPercent);
+  }, [onChangeIsScrollable, onScroll]);
+
+  // Check if an individual child element is visible in the container
+  var getElementInView = useCallback(function (containerRect, elementRect) {
+    // Is the element's left greater than or equal to the containers left
+    var elementLeftIsRightOfContainerLeft = elementRect.left >= containerRect.left;
+    // Is the element's right less than or equal to the containers right
+    var elementRightIsLeftOfContainerRight = elementRect.right <= containerRect.right;
+    return elementLeftIsRightOfContainerLeft && elementRightIsLeftOfContainerRight;
+  }, []);
+
+  // Get all elements that are visible in the container.
+  var getElementsInView = useCallback(function () {
+    var containerRect = scrollRef.current.getBoundingClientRect();
+    var inViewElements = childElementsRef.current.filter(function (el) {
+      return getElementInView(containerRect, el.getBoundingClientRect());
     });
-  }, [isScrolling, resolveScroll, scrollPromise, scrollTune, totalViews]);
-  var scrollPromise = useCallback(function () {
-    return new Promise(function (resolve) {
-      setTimeout(function () {
-        return resolveScroll(resolve);
-      }, carouselScrollPromiseDelay);
+    return inViewElements;
+  }, [getElementInView]);
+
+  // Return container's and children's rect data
+  var getContainerAndChildRectData = useCallback(function () {
+    // Get the rect of the container
+    var containerRect = scrollRef.current.getBoundingClientRect();
+    // Get all child elements that are in view of the container, and return their bounding rects.
+    var elementRectsInView = getElementsInView().map(function (el) {
+      return el.getBoundingClientRect();
     });
-  }, [resolveScroll]);
-  var resolveScroll = useCallback(function (resolve) {
-    if (mountedRef.current) {
-      setIsScrolling(false);
-      var percentage = scrollPosition() / maxScroll();
-      return resolve(parseFloat(percentage.toFixed(2)));
-    }
+
+    // What is the overall width of the visible elements in the container
+    // Note: may end up being 0 if the container's width is less than the child's width
+    var visibleWidth = elementRectsInView.reduce(function (accumulator, currentValue) {
+      return accumulator + currentValue.width;
+    }, 0);
+    return {
+      containerRect: containerRect,
+      elementRectsInView: elementRectsInView,
+      visibleWidth: visibleWidth
+    };
+  }, [getElementsInView]);
+  var handleScrollNext = useCallback(function () {
+    var _getContainerAndChild = getContainerAndChildRectData(),
+      containerRect = _getContainerAndChild.containerRect,
+      visibleWidth = _getContainerAndChild.visibleWidth;
+    // Set the scrollValue to the visibleWidth, but if the visibleWidth value is 0, set it to the container's width
+    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect.width;
+    // Increment the scrollLeft of the container
+    scrollRef.current.scrollLeft += scrollValue;
+  }, [getContainerAndChildRectData]);
+  var handleScrollPrev = useCallback(function () {
+    var _getContainerAndChild2 = getContainerAndChildRectData(),
+      containerRect = _getContainerAndChild2.containerRect,
+      elementRectsInView = _getContainerAndChild2.elementRectsInView,
+      visibleWidth = _getContainerAndChild2.visibleWidth;
+    // Set the scrollValue to the visibleWidth minus the first child's left value,
+    // but if the visibleWidth value is 0, set it to the container's width plus the container's left value
+    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : containerRect.width + containerRect.left;
+
+    // Decrement the scrollLeft of the container
+    scrollRef.current.scrollLeft -= scrollValue;
+  }, [getContainerAndChildRectData]);
+  var handleScrollReset = useCallback(function () {
+    // This doesn't trigger "scrollend"...
+    scrollRef.current.scrollLeft = 0;
+    // ...so trigger a callback manually.
+    handleOnScroll();
+  }, [handleOnScroll]);
+  var handleScrollToView = useCallback(function (itemNumber) {
+    childElementsRef.current[itemNumber].scrollIntoView();
   }, []);
-  var scrollPosition = function scrollPosition() {
-    var _scrollRef$current2;
-    return (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft;
-  };
-  var maxScroll = function maxScroll() {
-    var _scrollRef$current3, _scrollRef$current4;
-    return ((_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth) - ((_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.clientWidth);
-  };
-  var handleResize = debounce(function () {
-    scrollToView(currentViewIDRef.current);
-  }, 200);
-  var setCurrentViewID = function setCurrentViewID(val) {
-    currentViewIDRef.current = val;
-    _setCurrentViewID(val);
-  };
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isScrolling = _useState4[0],
-    setIsScrolling = _useState4[1];
-
-  // EFFECTS
-  useWindowEvent('resize', handleResize);
-  // SAVE POINT
 
+  // Trigger a callback after first render (and applied CSS).
   useEffect(function () {
-    if (scrollableChange && mountedRef.current) {
-      scrollableChange(isScrollable);
-    }
-  }, [isScrollable, scrollableChange]);
+    // Normally, we can trigger a callback "immediately after first
+    // render", because we will be doing more "logical" work (update
+    // a state, show / hide a feature, etc.), and the final, applied
+    // CSS can "catch up" asynchronously without breaking anything.
+    setTimeout(function () {
+      // But, because we are making calculations based on the final,
+      // applied CSS, we must wait for one more "tick".
+      handleOnScroll();
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // On window.resize, reset carousel to zero.
   useEffect(function () {
-    function updateScrollPosition(event) {
+    var handleWindowResize = function handleWindowResize() {
+      scrollRef.current.scrollLeft = 0;
+      handleOnScroll();
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return function () {
+      return window.removeEventListener('resize', handleWindowResize);
+    };
+  }, [handleOnScroll]);
+
+  // On scrollRef.scrollend, trigger a callback.
+  useEffect(function () {
+    var handleScrollend = function handleScrollend() {
+      handleOnScroll();
+    };
+    var scrollDiv = scrollRef.current;
+    scrollDiv.addEventListener('scrollend', handleScrollend);
+    return function () {
+      return scrollDiv.removeEventListener('scrollend', handleScrollend);
+    };
+  }, [handleOnScroll]);
+
+  // Disable wheel scrolling
+  useEffect(function () {
+    function handleWheel(event) {
       // update the scroll position
       event.stopPropagation();
       event.preventDefault();
@@ -138,18 +201,20 @@ export var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     var scrollDiv = scrollRef.current;
     if (scrollDiv) {
-      scrollDiv.addEventListener('wheel', updateScrollPosition, {
+      scrollDiv.addEventListener('wheel', handleWheel, {
         passive: false
       });
       return function () {
-        scrollDiv.removeEventListener('wheel', updateScrollPosition, {
+        scrollDiv.removeEventListener('wheel', handleWheel, {
           passive: false
         });
       };
     }
   }, []);
+
+  // Enable arrow scrolling from within the carousel
   useEffect(function () {
-    function keypress(event) {
+    function handleKeydown(event) {
       var key = event.key;
       if ((key === 'ArrowLeft' || key === 'ArrowRight') && disableArrowScroll) {
         event.stopPropagation();
@@ -157,27 +222,32 @@ export var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         event.cancelBubble = false;
       }
     }
-    var outerDiv = carouselRef.current;
-    if (outerDiv) {
-      outerDiv.addEventListener('keydown', keypress);
+    var carouselDiv = carouselRef.current;
+    if (carouselDiv) {
+      carouselDiv.addEventListener('keydown', handleKeydown);
       return function () {
-        return outerDiv.removeEventListener('keydown', keypress);
+        return carouselDiv.removeEventListener('keydown', handleKeydown);
       };
     }
   }, [disableArrowScroll]);
-  useEffect(function () {
-    return function () {
-      mountedRef.current = false;
-    };
-  }, []);
+
+  // Enable external function calls
   useImperativeHandle(ref, function () {
     return {
-      scrollNext: scrollNext,
-      scrollPrev: scrollPrev,
-      scrollToView: scrollToView,
-      maxScroll: maxScroll
+      scrollNext: function scrollNext() {
+        handleScrollNext();
+      },
+      scrollPrev: function scrollPrev() {
+        handleScrollPrev();
+      },
+      scrollReset: function scrollReset() {
+        handleScrollReset();
+      },
+      scrollToView: function scrollToView(itemNumber) {
+        handleScrollToView(itemNumber);
+      }
     };
-  }, [scrollNext, scrollPrev, scrollToView]);
+  }, [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     tabIndex: -1,
     className: cx(blockClass, className),
@@ -188,8 +258,13 @@ export var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__elements"),
     ref: scrollRef
-  }, React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.createElement(CarouselItem, null, child);
+  }, React.Children.map(children, function (child, index) {
+    return /*#__PURE__*/React.createElement(CarouselItem, {
+      key: index,
+      ref: function ref(element) {
+        return childElementsRef.current[index] = element;
+      }
+    }, child);
   })), leftFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__elements-container--scrolled"),
     style: {
@@ -202,9 +277,6 @@ export var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   })));
 });
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
 Carousel.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
@@ -227,21 +299,24 @@ Carousel.propTypes = {
   /**
    * Enables the edges of the component to have faded styling.
    *
-   * Pass a single string to specify the same color for left and right.
+   * Pass a single string (`$color`) to specify the same color for left and right.
    *
-   * Pass `{ left: $color1, right: $color2 }` to specify different colors.
+   * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
   fadedEdgeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     left: PropTypes.string,
     right: PropTypes.string
   })]),
   /**
-   * Determines how much of the Carousel moves into view on rotation.
+   * An optional callback function that returns `true`
+   * when the carousel has enough content to be scrollable,
+   * and `false` when there is not enough content.
    */
-  scrollTune: PropTypes.number,
+  onChangeIsScrollable: PropTypes.func,
   /**
-   * An optional callback function that returns `true`
-   * when the carousel has completed scrolling a single item.
+   * An optional callback function that returns the scroll position as
+   * a value between 0 and 1.
    */
-  scrollableChange: PropTypes.func
-};
+  onScroll: PropTypes.func
+};
+export { Carousel };

package/es/components/Carousel/CarouselItem.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className"];
 /**
@@ -9,12 +8,11 @@ var _excluded = ["children", "className"];
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useIntersection } from './utils';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 
@@ -28,28 +26,17 @@ var componentName = 'CarouselItem';
 /**
  * TODO: A description of the component.
  */
-var CarouselItem = function CarouselItem(_ref) {
+var CarouselItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var itemRef = useRef();
-  var isInView = useIntersection(itemRef, 0.85);
-  useEffect(function () {
-    var _itemRef$current;
-    var matches = (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 ? void 0 : _itemRef$current.querySelectorAll('a, button, [role="button"], [tabindex]');
-    if (matches) {
-      var ti = isInView ? 0 : -1;
-      _toConsumableArray(matches).forEach(function (match) {
-        match.tabIndex = ti;
-      });
-    }
-  }, [isInView]);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className),
-    ref: itemRef
-  }, getDevtoolsProps(componentName)), children);
-};
-
+    className: cx(blockClass, className)
+  }, getDevtoolsProps(componentName), {
+    ref: ref
+  }), children);
+});
+CarouselItem.displayName = componentName;
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -113,7 +113,10 @@ export var CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_r
     ref: buttonFocusRef
   }), closeButtonLabel))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Carousel, {
     disableArrowScroll: true,
-    ref: scrollRef
+    ref: scrollRef,
+    onScroll: function onScroll(scrollPercent) {
+      setScrollPosition(scrollPercent);
+    }
   }, children), /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__footer"))
   }, /*#__PURE__*/React.createElement("div", {
@@ -125,9 +128,7 @@ export var CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_r
     disabled: scrollPosition === 0,
     onClick: function onClick() {
       var targetStep = clamp(currentProgStep - 1, progStepFloor, progStepCeil);
-      scrollRef.current.scrollToView(targetStep).then(function (scrollPercentage) {
-        setScrollPosition(scrollPercentage);
-      });
+      scrollRef.current.scrollToView(targetStep);
       setCurrentProgStep(targetStep);
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React.createElement(Button, {
@@ -137,9 +138,7 @@ export var CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_r
     disabled: scrollPosition === 1,
     onClick: function onClick() {
       var targetStep = clamp(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef.current.scrollToView(targetStep).then(function (scrollPercentage) {
-        setScrollPosition(scrollPercentage);
-      });
+      scrollRef.current.scrollToView(targetStep);
       setCurrentProgStep(targetStep);
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React.createElement(Button, _extends({

package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -34,12 +34,14 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       onMouseLeave: function onMouseLeave(event) {
         return toggleParentHoverClass(event);
       }
+    }, /*#__PURE__*/React.createElement("td", {
+      className: "".concat(blockClass, "__expanded-row-cell-wrapper")
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__expanded-row-content"),
       style: {
         height: expandedContentHeight && expandedContentHeight
       }
-    }, /*#__PURE__*/React.createElement(ExpandedRowContentComponent, datagridState)));
+    }, /*#__PURE__*/React.createElement(ExpandedRowContentComponent, datagridState))));
   };
 };
 export default DatagridExpandedRow;

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -61,6 +61,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var handleOnMouseDownResize = function handleOnMouseDownResize(event, resizeProps) {
     var _resizeProps = _objectSpread({}, resizeProps()),
       onMouseDown = _resizeProps.onMouseDown;
+    event.target.focus();
     // When event.button is 2, that is a right click
     // and we do not want to resize
     if (event.button === 2 || event.ctrlKey) {

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -4,14 +4,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-// @flow
+
 import React from 'react';
 import { DataTable, SkeletonText } from 'carbon-components-react';
 import { px } from '@carbon/layout';
@@ -36,7 +35,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     rowSize = datagridState.rowSize,
     withNestedRows = datagridState.withNestedRows,
     prepareRow = datagridState.prepareRow,
-    key = datagridState.key;
+    key = datagridState.key,
+    tableId = datagridState.tableId,
+    withExpandedRows = datagridState.withExpandedRows;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -65,7 +66,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), px((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
   };
   var focusRemover = function focusRemover() {
-    var elements = document.querySelectorAll(".".concat(blockClass, "__carbon-row-expanded"));
+    var elements = document.querySelectorAll("#".concat(tableId, " .").concat(blockClass, "__carbon-row-expanded"));
     elements.forEach(function (el) {
       el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
     });
@@ -94,6 +95,14 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
   };
   var rowClassNames = cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
+  var setAdditionalRowProps = function setAdditionalRowProps() {
+    if (withNestedRows || withExpandedRows) {
+      return {
+        'data-nested-row-id': row.id
+      };
+    }
+    return {};
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, {
     key: key
   }, /*#__PURE__*/React.createElement(TableRow, _extends({
@@ -107,7 +116,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }), row.cells.map(function (cell, index) {
+  }, setAdditionalRowProps()), row.cells.map(function (cell, index) {
     var _cell$column;
     var cellProps = cell.getCellProps({
       role: false

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -14,6 +14,7 @@ import React, { useLayoutEffect, useState } from 'react';
 import { DataTable } from 'carbon-components-react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
+import { handleSelectAllRowData } from './addons/stateReducer';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var SelectAll = function SelectAll(datagridState) {
   var _columns$;
@@ -39,7 +40,11 @@ var SelectAll = function SelectAll(datagridState) {
     DatagridPagination = datagridState.DatagridPagination,
     radio = datagridState.radio,
     columns = datagridState.columns,
-    withStickyColumn = datagridState.withStickyColumn;
+    withStickyColumn = datagridState.withStickyColumn,
+    dispatch = datagridState.dispatch,
+    rows = datagridState.rows,
+    getRowId = datagridState.getRowId,
+    toggleAllRowsSelected = datagridState.toggleAllRowsSelected;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
     return /*#__PURE__*/React.createElement("div", {
@@ -54,12 +59,25 @@ var SelectAll = function SelectAll(datagridState) {
   var indeterminate = selectProps.indeterminate;
   var handleSelectAllChange = function handleSelectAllChange(event) {
     if (indeterminate) {
+      handleSelectAllRowData({
+        dispatch: dispatch,
+        rows: rows,
+        getRowId: getRowId,
+        indeterminate: true
+      });
+      toggleAllRowsSelected(false);
       return onChange === null || onChange === void 0 ? void 0 : onChange({
         target: {
           checked: false
         }
       });
     }
+    handleSelectAllRowData({
+      dispatch: dispatch,
+      rows: rows,
+      getRowId: getRowId,
+      isChecked: event.target.checked
+    });
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/React.createElement("div", {