@carbon/ibm-products 1.54.2 → 1.55.0

package/es/components/ActionBar/ActionBar.js

@@ -74,13 +74,12 @@ export var ActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__hidden-sizing-items"),
       "aria-hidden": true,
       ref: sizingRef
-    }, /*#__PURE__*/React.createElement("span", {
-      "aria-hidden": false
-    }, /*#__PURE__*/React.createElement(ActionBarOverflowItems, {
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ActionBarOverflowItems, {
       className: "".concat(blockClass, "__hidden-sizing-item"),
       overflowAriaLabel: "hidden sizing overflow items",
       overflowItems: [],
-      key: "hidden-overflow-menu"
+      key: "hidden-overflow-menu",
+      tabIndex: -1
     }), actions.map(function (_ref2) {
       var key = _ref2.key,
         id = _ref2.id,
@@ -89,7 +88,8 @@ export var ActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         // ensure id is not duplicated
         "data-original-id": id,
         key: "hidden-item-".concat(key),
-        className: "".concat(blockClass, "__hidden-sizing-item")
+        className: "".concat(blockClass, "__hidden-sizing-item"),
+        tabIndex: -1
       }));
     }))));
   }, [actions]);

package/es/components/Carousel/Carousel.js

@@ -0,0 +1,237 @@
+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"];
+/**
+ * Copyright IBM Corp. 2023, 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.
+ */
+
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+// Other standard imports.
+import { clamp, debounce } from 'lodash';
+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';
+
+// Default values for props
+var defaults = {
+  disableArrowScroll: false,
+  scrollTune: 0
+};
+
+/**
+ * The Carousel acts as a scaffold for other Novice to Pro content.
+ *
+ * This component is not intended for general use.
+ */
+export 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,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var carouselScrollPromiseDelay = 700;
+  var totalViews = React.Children.count(children) || 1;
+  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 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) {
+      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();
+    }
+    return new Promise(function (resolve) {
+      return resolveScroll(resolve);
+    });
+  }, [isScrolling, resolveScroll, scrollPromise, scrollTune, totalViews]);
+  var scrollPromise = useCallback(function () {
+    return new Promise(function (resolve) {
+      setTimeout(function () {
+        return resolveScroll(resolve);
+      }, carouselScrollPromiseDelay);
+    });
+  }, [resolveScroll]);
+  var resolveScroll = useCallback(function (resolve) {
+    setIsScrolling(false);
+    var percentage = scrollPosition() / maxScroll();
+    return resolve(parseFloat(percentage.toFixed(2)));
+  }, []);
+  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);
+  useEffect(function () {
+    if (scrollableChange) {
+      scrollableChange(isScrollable);
+    }
+  }, [isScrollable, scrollableChange]);
+  useEffect(function () {
+    function updateScrollPosition(event) {
+      // update the scroll position
+      event.stopPropagation();
+      event.preventDefault();
+      event.cancelBubble = false;
+    }
+    var scrollDiv = scrollRef.current;
+    if (scrollDiv) {
+      scrollDiv.addEventListener('wheel', updateScrollPosition, {
+        passive: false
+      });
+      return function () {
+        scrollDiv.removeEventListener('wheel', updateScrollPosition, {
+          passive: false
+        });
+      };
+    }
+  }, []);
+  useEffect(function () {
+    function keypress(event) {
+      var key = event.key;
+      if ((key === 'ArrowLeft' || key === 'ArrowRight') && disableArrowScroll) {
+        event.stopPropagation();
+        event.preventDefault();
+        event.cancelBubble = false;
+      }
+    }
+    var outerDiv = carouselRef.current;
+    if (outerDiv) {
+      outerDiv.addEventListener('keydown', keypress);
+      return function () {
+        return outerDiv.removeEventListener('keydown', keypress);
+      };
+    }
+  }, [disableArrowScroll]);
+  useImperativeHandle(ref, function () {
+    return {
+      scrollNext: scrollNext,
+      scrollPrev: scrollPrev,
+      scrollToView: scrollToView,
+      maxScroll: maxScroll
+    };
+  }, [scrollNext, scrollPrev, scrollToView]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    tabIndex: -1,
+    className: cx(blockClass, className),
+    ref: carouselRef,
+    role: "main"
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "__elements-container"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__elements"),
+    ref: scrollRef
+  }, React.Children.map(children, function (child) {
+    return /*#__PURE__*/React.createElement(CarouselItem, null, child);
+  })), leftFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__elements-container--scrolled"),
+    style: {
+      background: "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)")
+    }
+  }), rightFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__elements-container--scroll-max"),
+    style: {
+      background: "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)")
+    }
+  })));
+});
+
+// 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,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+Carousel.propTypes = {
+  /**
+   * Provide the contents of the Carousel.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Disables the ability of the Carousel to scroll
+   * use a keyboard's left and right arrow keys.
+   */
+  disableArrowScroll: PropTypes.bool,
+  /**
+   * Enables the edges of the component to have faded styling.
+   *
+   * Pass a single string to specify the same color for left and right.
+   *
+   * Pass `{ 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.
+   */
+  scrollTune: PropTypes.number,
+  /**
+   * An optional callback function that returns `true`
+   * when the carousel has completed scrolling a single item.
+   */
+  scrollableChange: PropTypes.func
+};

package/es/components/Carousel/CarouselItem.js

@@ -0,0 +1,66 @@
+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"];
+/**
+ * Copyright IBM Corp. 2023, 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.
+ */
+
+import React, { useEffect, useRef } 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';
+
+// 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__item");
+var componentName = 'CarouselItem';
+
+/**
+ * TODO: A description of the component.
+ */
+var CarouselItem = function CarouselItem(_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);
+};
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+CarouselItem.propTypes = {
+  /**
+   * Provide the contents of the CarouselItem.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string
+};
+export { CarouselItem };

package/es/components/Carousel/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2023, 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.
+ */
+
+export { Carousel } from './Carousel';
+export { CarouselItem } from './CarouselItem';

package/es/components/Carousel/utils.js

@@ -0,0 +1,98 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2023, 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.
+ */
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+export var useIntersection = function useIntersection(element, threshold) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    var el = element.current;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      setState(entry.isIntersecting);
+    }, {
+      threshold: threshold
+    });
+    el && observer.observe(el);
+    return function () {
+      return observer.unobserve(el);
+    };
+  }, [element, threshold]);
+  return isVisible;
+};
+export var useIsOverflow = function useIsOverflow(ref) {
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isScrollable = _useState4[0],
+    setIsScrollable = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mutationObserver = _useState6[0],
+    setMutationObserver = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    resizeObserver = _useState8[0],
+    setResizeObserver = _useState8[1];
+  var checkOverflow = useCallback(function () {
+    if (!ref.current) {
+      return;
+    }
+    var hasOverflow = ref.current.scrollWidth > ref.current.clientWidth;
+    setIsScrollable(hasOverflow);
+  }, [ref]);
+  useEffect(function () {
+    if (!mutationObserver) {
+      return;
+    }
+    return function () {
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  });
+  useLayoutEffect(function () {
+    var current = ref.current;
+    if (current) {
+      if ('ResizeObserver' in window && !resizeObserver) {
+        setResizeObserver(new ResizeObserver(checkOverflow).observe(current));
+      }
+      if ('MutationObserver' in window && !mutationObserver) {
+        setMutationObserver(new MutationObserver(checkOverflow).observe(current, {
+          attributes: false,
+          childList: true,
+          subtree: false
+        }));
+      }
+      checkOverflow();
+    }
+  }, [ref, checkOverflow, mutationObserver, resizeObserver]);
+  return isScrollable;
+};
+export var useWindowEvent = function useWindowEvent(eventName, callback) {
+  var savedCallback = useRef(null);
+  useEffect(function () {
+    savedCallback.current = callback;
+  });
+  useEffect(function () {
+    function handler(event) {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    }
+    window.addEventListener(eventName, handler);
+    return function () {
+      window.removeEventListener(eventName, handler);
+    };
+  }, [eventName]);
+};

package/es/components/CreateFullPage/CreateFullPage.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -49,6 +49,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onRequestSubmit = _ref.onRequestSubmit,
     firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
+    title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -159,7 +160,8 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-label": title
   }, /*#__PURE__*/React.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,

package/es/components/CreateModal/CreateModal.js

@@ -66,7 +66,8 @@ export var CreateModal = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, description && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__description")
   }, description), /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-label": title
   }, children)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     kind: "secondary",

package/es/components/CreateSidePanel/CreateSidePanel.js

@@ -23,6 +23,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 // Carbon and package components we use.
 import { Form } from 'carbon-components-react';
 import { SidePanel } from '../SidePanel';
+import uuidv4 from '../../global/js/utils/uuidv4';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--create-side-panel");
@@ -63,6 +64,7 @@ export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     onClick: onRequestClose,
     kind: 'secondary'
   }];
+  var formTitleId = uuidv4();
   return selectorPageContent && /*#__PURE__*/React.createElement(SidePanel, _extends({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -79,11 +81,13 @@ export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     size: "md",
     actions: actions
   }), /*#__PURE__*/React.createElement("h3", {
-    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
+    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text"),
+    id: formTitleId
   }, formTitle), /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 CreateSidePanel = pkg.checkComponentEnabled(CreateSidePanel, componentName);

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -196,7 +196,9 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     onBlur: handleBlur,
     ref: contentRef
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(StepsContext.Provider, {
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, {
+    "aria-label": title
+  }, /*#__PURE__*/React.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,
       setIsDisabled: setIsDisabled,

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -18,6 +18,7 @@ import { Form } from 'carbon-components-react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 import { TearsheetNarrow } from '../Tearsheet/TearsheetNarrow';
+import uuidv4 from '../../global/js/utils/uuidv4';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--create-tearsheet-narrow");
@@ -57,6 +58,7 @@ export var CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref,
     kind: 'secondary'
   }];
   var formTextClass = "".concat(blockClass, "__content-text");
+  var formTitleId = uuidv4();
   return /*#__PURE__*/React.createElement(TearsheetNarrow, _extends({}, rest, {
     title: title,
     description: description,
@@ -73,11 +75,13 @@ export var CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref,
     verticalPosition: verticalPosition,
     role: "presentation"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("h3", {
-    className: cx("".concat(blockClass, "__form-title-text"), formTextClass)
+    className: cx("".concat(blockClass, "__form-title-text"), formTextClass),
+    id: formTitleId
   }, formTitle), /*#__PURE__*/React.createElement("p", {
     className: cx("".concat(blockClass, "__form-description-text"), formTextClass)
   }, formDescription), /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 

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

@@ -34,7 +34,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps({
       role: false
     }), {
-      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), header.canSort), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
+      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
     }), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement("div", _extends({}, header.getResizerProps(), {
       className: "".concat(blockClass, "__resizer")

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -17,6 +17,7 @@ import cx from 'classnames';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableToolbar = DataTable.TableToolbar;
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
+  var _Object$keys;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     displayAllInMenu = _useState2[0],
@@ -29,11 +30,11 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     _useState6 = _slicedToArray(_useState5, 2),
     receivedInitialWidth = _useState6[0],
     setReceivedInitialWidth = _useState6[1];
-  var selectedFlatRows = datagridState.selectedFlatRows,
+  var selectedRowIds = datagridState.state.selectedRowIds,
     toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     toolbarBatchActions = datagridState.toolbarBatchActions,
     setGlobalFilter = datagridState.setGlobalFilter;
-  var totalSelected = selectedFlatRows && selectedFlatRows.length;
+  var totalSelected = (_Object$keys = Object.keys(selectedRowIds || {})) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length;
 
   // Get initial width of batch actions container,
   // used to measure when all items are put inside

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js

@@ -7,4 +7,5 @@
 
 export { default as useSubscribeToEventEmitter } from './useSubscribeToEventEmitter';
 export { default as useShouldDisableButtons } from './useShouldDisableButtons';
-export { default as useFilters } from './useFilters';
+export { default as useFilters } from './useFilters';
+export { default as useFilterContext } from './useFilterContext';

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js

@@ -0,0 +1,13 @@
+import { FilterContext } from '../FilterProvider';
+import { useContext } from 'react';
+var useFilterContext = function useFilterContext() {
+  // get the context
+  var context = useContext(FilterContext);
+
+  // if `undefined`, throw an error
+  if (context === undefined) {
+    throw new Error('useFilterContext was used outside of its Provider');
+  }
+  return context;
+};
+export default useFilterContext;

package/es/components/Datagrid/index.js

@@ -25,4 +25,5 @@ export { default as useColumnOrder } from './useColumnOrder';
 export { default as useInlineEdit } from './useInlineEdit';
 export { default as useEditableCell } from './useEditableCell';
 export { default as useFiltering } from './useFiltering';
-export { getAutoSizedColumnWidth } from './utils/getAutoSizedColumnWidth';
+export { getAutoSizedColumnWidth } from './utils/getAutoSizedColumnWidth';
+export { useFilterContext } from './Datagrid/addons/Filtering/hooks';

package/es/components/Datagrid/useActionsColumn.js

@@ -24,7 +24,16 @@ var useActionsColumn = function useActionsColumn(hooks) {
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
     var rowActions = instance.rowActions,
       isFetching = instance.isFetching,
-      selectedFlatRows = instance.selectedFlatRows;
+      selectedRowIds = instance.state.selectedRowIds;
+    var getDisabledState = function getDisabledState(rowIndex) {
+      var selectedRowIndexes = Object.keys(selectedRowIds).map(function (n) {
+        return Number(n);
+      });
+      if (selectedRowIndexes.includes(rowIndex)) {
+        return true;
+      }
+      return false;
+    };
     if (rowActions && Array.isArray(rowActions)) {
       var addActionsMenu = function addActionsMenu(props, cellData) {
         var cell = cellData.cell;
@@ -53,11 +62,8 @@ var useActionsColumn = function useActionsColumn(hooks) {
               if (hidden) {
                 return null;
               }
-              var selectedRowId = selectedFlatRows === null || selectedFlatRows === void 0 ? void 0 : selectedFlatRows.filter(function (item) {
-                return item.id === row.id ? item.id : null;
-              });
               return /*#__PURE__*/React.createElement("div", {
-                className: cx("".concat(blockClass, "__actions-column-button"), _defineProperty({}, "".concat(blockClass, "__disabled-row-action-button"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
+                className: cx("".concat(blockClass, "__actions-column-button"), _defineProperty({}, "".concat(blockClass, "__disabled-row-action-button"), getDisabledState(row.index))),
                 key: "".concat(itemText, "__").concat(index)
               }, /*#__PURE__*/React.createElement(OverflowMenu, _extends({}, rest, {
                 renderIcon: icon,
@@ -65,9 +71,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 light: true,
                 iconDescription: itemText,
                 kind: "ghost",
-                className: cx(_defineProperty({}, "".concat(blockClass, "__disabled-row-action"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
+                className: cx(_defineProperty({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
                 onClick: function onClick(e) {
-                  if (selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length) {
+                  if (getDisabledState(row.index)) {
                     // Row actions should be disabled if row is selected and batchActions toolbar is active
                     return;
                   }