@carbon/ibm-products 1.62.0 → 1.63.0

package/es/components/TagSet/TagSet.js

@@ -2,13 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label"];
 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; }
 //
-// Copyright IBM Corp. 2020, 2021
+// 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.
@@ -33,6 +33,7 @@ var allTagsModalSearchThreshold = 10;
 var defaults = {
   align: 'start',
   // allTagsModalTarget: document.body,
+  measurementOffset: 0,
   overflowAlign: 'center',
   overflowDirection: 'bottom',
   overflowType: 'default'
@@ -56,6 +57,9 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
     showAllTagsLabel = _ref.showAllTagsLabel,
     tags = _ref.tags,
+    containingElementRef = _ref.containingElementRef,
+    _ref$measurementOffse = _ref.measurementOffset,
+    measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(3),
     _useState2 = _slicedToArray(_useState, 2),
@@ -160,7 +164,9 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // how many will fit?
     var willFit = 0;
     if (sizingTags.length > 0) {
-      var spaceAvailable = tagSetRef.current.offsetWidth;
+      var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
+      var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
+      var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef.current.offsetWidth;
       for (var i in sizingTags) {
         var tagWidth = sizingTags[i].offsetWidth;
         if (spaceAvailable >= tagWidth) {
@@ -183,7 +189,7 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     } else {
       setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
     }
-  }, [maxVisible, multiline, sizingTags, tagSetRef]);
+  }, [maxVisible, multiline, sizingTags, tagSetRef, containingElementRef, measurementOffset]);
   useEffect(function () {
     checkFullyVisibleTags();
   }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
@@ -205,7 +211,8 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setShowAllModalOpen(false);
   };
   useResizeObserver(sizingContainerRef, handleSizerTagsResize);
-  useResizeObserver(tagSetRef, handleResize);
+  var resizeOption = containingElementRef ? containingElementRef : tagSetRef;
+  useResizeObserver(resizeOption, handleResize);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx([blockClass, className]),
     ref: tagSetRef
@@ -284,10 +291,20 @@ TagSet.propTypes = {
    * className
    */
   className: PropTypes.string,
+  /**
+   * Optional ref for custom resize container to measure available space
+   * Default will measure the available space of the TagSet container itself.
+   */
+  containingElementRef: PropTypes.object,
   /**
    * maximum visible tags
    */
   maxVisible: PropTypes.number,
+  /**
+   * Specify offset amount for measure available space, only used when `containingElementSelector`
+   * is also provided
+   */
+  measurementOffset: PropTypes.number,
   /**
    * display tags in multiple lines
    */

package/es/global/js/package-settings.js

@@ -95,8 +95,6 @@ var defaults = {
   feature: {
     'a-new-feature': false,
     'default-portal-target-body': true,
-    'Datagrid.useExpandedRow': false,
-    'Datagrid.useNestedRows': false,
     'Datagrid.useInlineEdit': false,
     'Datagrid.useFiltering': false,
     'Datagrid.useCustomizeColumns': false,

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) {