@carbon/ibm-products 1.62.0 → 1.62.1

package/lib/components/Carousel/Carousel.js

@@ -7,22 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Carousel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _lodash = require("lodash");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CarouselItem = require("./CarouselItem");
-var _utils = require("./utils");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
-var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "scrollableChange", "scrollTune"];
+var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// 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(_settings.pkg.prefix, "--carousel");
 var componentName = 'Carousel';
@@ -30,13 +24,25 @@ 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.
  */
 var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -44,93 +50,152 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     _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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var carouselScrollPromiseDelay = 700;
-  var totalViews = _react.default.Children.count(children) || 1;
+  var carouselRef = (0, _react.useRef)();
+  var scrollRef = (0, _react.useRef)();
+  // Array of refs used to reference this component's children DOM elements
+  var childElementsRef = (0, _react.useRef)(Array(_react.default.Children.count(children)).fill((0, _react.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 = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    currentViewID = _useState2[0],
-    _setCurrentViewID = _useState2[1];
-  var currentViewIDRef = (0, _react.useRef)(currentViewID);
-  var scrollRef = (0, _react.useRef)();
-  var carouselRef = (0, _react.useRef)();
-  var mountedRef = (0, _react.useRef)(true);
-  var isScrollable = (0, _utils.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 = (0, _react.useCallback)(function () {
-    return scrollToView(currentViewID + 1);
-  }, [currentViewID, scrollToView]);
-  var scrollPrev = (0, _react.useCallback)(function () {
-    return scrollToView(currentViewID - 1);
-  }, [currentViewID, scrollToView]);
-  var scrollToView = (0, _react.useCallback)(function (viewID) {
-    if (!isScrolling && scrollRef.current && mountedRef.current) {
-      var _scrollRef$current;
-      var targetViewID = (0, _lodash.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function () {
+    // This doesn't trigger "scrollend"...
+    scrollRef.current.scrollLeft = 0;
+    // ...so trigger a callback manually.
+    handleOnScroll();
+  }, [handleOnScroll]);
+  var handleScrollToView = (0, _react.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 = (0, _lodash.debounce)(function () {
-    scrollToView(currentViewIDRef.current);
-  }, 200);
-  var setCurrentViewID = function setCurrentViewID(val) {
-    currentViewIDRef.current = val;
-    _setCurrentViewID(val);
-  };
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isScrolling = _useState4[0],
-    setIsScrolling = _useState4[1];
-
-  // EFFECTS
-  (0, _utils.useWindowEvent)('resize', handleResize);
-  // SAVE POINT
 
+  // Trigger a callback after first render (and applied CSS).
   (0, _react.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.
   (0, _react.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.
+  (0, _react.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
+  (0, _react.useEffect)(function () {
+    function handleWheel(event) {
       // update the scroll position
       event.stopPropagation();
       event.preventDefault();
@@ -138,18 +203,20 @@ var Carousel = /*#__PURE__*/_react.default.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
   (0, _react.useEffect)(function () {
-    function keypress(event) {
+    function handleKeydown(event) {
       var key = event.key;
       if ((key === 'ArrowLeft' || key === 'ArrowRight') && disableArrowScroll) {
         event.stopPropagation();
@@ -157,27 +224,32 @@ var Carousel = /*#__PURE__*/_react.default.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]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      mountedRef.current = false;
-    };
-  }, []);
+
+  // Enable external function calls
   (0, _react.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.default.createElement("div", (0, _extends2.default)({}, rest, {
     tabIndex: -1,
     className: (0, _classnames.default)(blockClass, className),
@@ -188,8 +260,13 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__elements"),
     ref: scrollRef
-  }, _react.default.Children.map(children, function (child) {
-    return /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, null, child);
+  }, _react.default.Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, {
+      key: index,
+      ref: function ref(element) {
+        return childElementsRef.current[index] = element;
+      }
+    }, child);
   })), leftFadedEdgeColor && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__elements-container--scrolled"),
     style: {
@@ -202,9 +279,6 @@ var Carousel = /*#__PURE__*/_react.default.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.
 exports.Carousel = Carousel;
 Carousel.displayName = componentName;
 
@@ -228,21 +302,23 @@ 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.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
     left: _propTypes.default.string,
     right: _propTypes.default.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.default.number,
+  onChangeIsScrollable: _propTypes.default.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.default.func
+  onScroll: _propTypes.default.func
 };

package/lib/components/Carousel/CarouselItem.js

@@ -1,23 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CarouselItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("./utils");
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
 var _excluded = ["children", "className"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -28,32 +23,21 @@ var componentName = 'CarouselItem';
 /**
  * TODO: A description of the component.
  */
-var CarouselItem = function CarouselItem(_ref) {
+var CarouselItem = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var itemRef = (0, _react.useRef)();
-  var isInView = (0, _utils.useIntersection)(itemRef, 0.85);
-  (0, _react.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;
-      (0, _toConsumableArray2.default)(matches).forEach(function (match) {
-        match.tabIndex = ti;
-      });
-    }
-  }, [isInView]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, className),
-    ref: itemRef
-  }, (0, _devtools.getDevtoolsProps)(componentName)), children);
-};
-
+    className: (0, _classnames.default)(blockClass, className)
+  }, (0, _devtools.getDevtoolsProps)(componentName), {
+    ref: ref
+  }), children);
+});
+exports.CarouselItem = CarouselItem;
+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.
-exports.CarouselItem = CarouselItem;
 CarouselItem.propTypes = {
   /**
    * Provide the contents of the CarouselItem.

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -113,7 +113,10 @@ var CoachmarkOverlayElements = /*#__PURE__*/_react.default.forwardRef(function (
     ref: buttonFocusRef
   }), closeButtonLabel))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Carousel.Carousel, {
     disableArrowScroll: true,
-    ref: scrollRef
+    ref: scrollRef,
+    onScroll: function onScroll(scrollPercent) {
+      setScrollPosition(scrollPercent);
+    }
   }, children), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(blockClass, "__footer"))
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -125,9 +128,7 @@ var CoachmarkOverlayElements = /*#__PURE__*/_react.default.forwardRef(function (
     disabled: scrollPosition === 0,
     onClick: function onClick() {
       var targetStep = (0, _lodash.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.default.createElement(_carbonComponentsReact.Button, {
@@ -137,9 +138,7 @@ var CoachmarkOverlayElements = /*#__PURE__*/_react.default.forwardRef(function (
     disabled: scrollPosition === 1,
     onClick: function onClick() {
       var targetStep = (0, _lodash.clamp)(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef.current.scrollToView(targetStep).then(function (scrollPercentage) {
-        setScrollPosition(scrollPercentage);
-      });
+      scrollRef.current.scrollToView(targetStep);
       setCurrentProgStep(targetStep);
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({

package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js

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

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -64,6 +64,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/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -35,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;
@@ -64,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"), (0, _layout.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"));
     });
@@ -93,6 +95,14 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
   };
   var rowClassNames = (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.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.default.createElement(_react.default.Fragment, {
     key: key
   }, /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
@@ -106,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/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -14,6 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _carbonComponentsReact = require("carbon-components-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
+var _stateReducer = require("./addons/stateReducer");
 var _excluded = ["onChange"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,7 +43,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.default.createElement("div", {
@@ -57,12 +62,25 @@ var SelectAll = function SelectAll(datagridState) {
   var indeterminate = selectProps.indeterminate;
   var handleSelectAllChange = function handleSelectAllChange(event) {
     if (indeterminate) {
+      (0, _stateReducer.handleSelectAllRowData)({
+        dispatch: dispatch,
+        rows: rows,
+        getRowId: getRowId,
+        indeterminate: true
+      });
+      toggleAllRowsSelected(false);
       return onChange === null || onChange === void 0 ? void 0 : onChange({
         target: {
           checked: false
         }
       });
     }
+    (0, _stateReducer.handleSelectAllRowData)({
+      dispatch: dispatch,
+      rows: rows,
+      getRowId: getRowId,
+      isChecked: event.target.checked
+    });
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/_react.default.createElement("div", {