@carbon/ibm-products 2.26.0 → 2.28.0-alpha.4

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var layout = require('@carbon/layout');
 var settings = require('../../settings.js');
 var checkActiveHeaderCell = require('./utils/checkActiveHeaderCell.js');
@@ -20,12 +20,14 @@ var checkSelectedHeaderCell = require('./utils/checkSelectedHeaderCell.js');
 var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var selectAllCells = require('./utils/selectAllCells.js');
 var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.js');
+var checkForHoldingKey = require('./utils/checkForHoldingKey.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseMove = require('./hooks/useSpreadsheetMouseMove.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
 var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -70,8 +72,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
   var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
     return function (event) {
-      var isHoldingCommandKey = event.metaKey || event.ctrlKey;
-      var isHoldingShiftKey = event.shiftKey;
+      var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
+      var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
       handleHeaderCellSelection.handleHeaderCellSelection({
         type: 'column',
         activeCellCoordinates: activeCellCoordinates,
@@ -138,11 +140,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultColumn: defaultColumn
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(blockClass, "__header--container")),
+    className: cx__default["default"]("".concat(blockClass, "__header--container")),
     role: "rowgroup"
-  }, headerGroups.map(function (headerGroup, index$1) {
+  }, headerGroups.map(function (headerGroup, index) {
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-      key: "header_".concat(index$1)
+      key: "header_".concat(index)
     }, headerGroup.getHeaderGroupProps(), {
       style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, headerGroup.getHeaderGroupProps().style), {}, {
         width: getSpreadsheetWidth.getSpreadsheetWidth({
@@ -171,28 +173,28 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       tabIndex: -1,
       "aria-label": selectAllAriaLabel,
       onClick: handleSelectAllClick,
-      className: index["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
-    }, "\xA0")), headerGroup.headers.map(function (column, index$1) {
-      var selectedHeader = checkSelectedHeaderCell.checkSelectedHeaderCell(index$1, selectionAreas, 'column', rows);
+      className: cx__default["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
+    }, "\xA0")), headerGroup.headers.map(function (column, index) {
+      var selectedHeader = checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-        key: "column_".concat(index$1),
+        key: "column_".concat(index),
         role: "columnheader",
         className: "".concat(blockClass, "__columnheader")
       }, column.getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("button", {
-        id: "".concat(blockClass, "__cell--header--").concat(index$1),
+        id: "".concat(blockClass, "__cell--header--").concat(index),
         "data-row-index": "header",
-        "data-column-index": index$1,
+        "data-column-index": index,
         tabIndex: -1,
-        onMouseDown: selectedHeader ? handleHeaderMouseDown(index$1) : null,
+        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : null,
         onMouseUp: selectedHeader ? function () {
           return setSelectedHeaderReorderActive(false);
         } : null,
-        onClick: !selectedHeader ? handleColumnHeaderClick(index$1) : null,
+        onClick: !selectedHeader ? handleColumnHeaderClick(index) : null,
         style: {
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
         },
-        className: index["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index$1 || checkActiveHeaderCell.checkActiveHeaderCell(index$1, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
+        className: cx__default["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
         type: "button"
       }, column.render('Header')));
     }));
@@ -202,87 +204,87 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
-  activeCellCoordinates: index$1["default"].shape({
-    row: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
-    column: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string])
+  activeCellCoordinates: index["default"].shape({
+    row: index["default"].oneOfType([index["default"].number, index["default"].string]),
+    column: index["default"].oneOfType([index["default"].number, index["default"].string])
   }),
   /**
    * Specifies the cell height
    */
-  cellSize: index$1["default"].oneOf(['xs', 'sm', 'md', 'lg']),
+  cellSize: index["default"].oneOf(['xs', 'sm', 'md', 'lg']),
   /**
    * All of the spreadsheet columns
    */
-  columns: index$1["default"].array,
+  columns: index["default"].array,
   /**
    * uuid that corresponds to the current selection area
    */
-  currentMatcher: index$1["default"].string,
+  currentMatcher: index["default"].string,
   /**
    * Default spreadsheet sizing values
    */
-  defaultColumn: index$1["default"].shape({
-    rowHeight: index$1["default"].number,
-    rowHeaderWidth: index$1["default"].number,
-    width: index$1["default"].number
+  defaultColumn: index["default"].shape({
+    rowHeight: index["default"].number,
+    rowHeaderWidth: index["default"].number,
+    width: index["default"].number
   }),
   /**
    * Whether or not a click/hold is active on a header cell
    */
-  headerCellHoldActive: index$1["default"].bool,
+  headerCellHoldActive: index["default"].bool,
   /**
    * Headers provided from useTable hook
    */
-  headerGroups: index$1["default"].arrayOf(index$1["default"].object),
+  headerGroups: index["default"].arrayOf(index["default"].object),
   /**
    * All of the spreadsheet row data
    */
-  rows: index$1["default"].arrayOf(index$1["default"].object),
+  rows: index["default"].arrayOf(index["default"].object),
   /**
    * The scrollbar width
    */
-  scrollBarSize: index$1["default"].number,
+  scrollBarSize: index["default"].number,
   /**
    * The aria label applied to the Select all button
    */
-  selectAllAriaLabel: index$1["default"].string.isRequired,
+  selectAllAriaLabel: index["default"].string.isRequired,
   /**
    * All of the cell selection area items
    */
-  selectionAreas: index$1["default"].arrayOf(index$1["default"].object),
+  selectionAreas: index["default"].arrayOf(index["default"].object),
   /**
    * Setter fn for activeCellCoordinates value
    */
-  setActiveCellCoordinates: index$1["default"].func,
+  setActiveCellCoordinates: index["default"].func,
   /**
    * Setter fn for currentMatcher value
    */
-  setCurrentMatcher: index$1["default"].func,
+  setCurrentMatcher: index["default"].func,
   /**
    * Setter fn for header cell hold active value
    */
-  setHeaderCellHoldActive: index$1["default"].func,
+  setHeaderCellHoldActive: index["default"].func,
   /**
    * Setter fn for selectionAreaData state value
    */
-  setSelectionAreaData: index$1["default"].func,
+  setSelectionAreaData: index["default"].func,
   /**
    * Setter fn for selectionAreas value
    */
-  setSelectionAreas: index$1["default"].func,
+  setSelectionAreas: index["default"].func,
   /**
    * The total number of columns to be initially visible, additional columns will be rendered and
    * visible via horizontal scrollbar
    */
-  totalVisibleColumns: index$1["default"].number,
+  totalVisibleColumns: index["default"].number,
   /**
    * Function used to update the active cell coordinates
    */
-  updateActiveCellCoordinates: index$1["default"].func,
+  updateActiveCellCoordinates: index["default"].func,
   /**
    * Array of visible columns provided by react-table useTable hook
    */
-  visibleColumns: index$1["default"].array
+  visibleColumns: index["default"].array
 };
 
 exports.DataSpreadsheetHeader = DataSpreadsheetHeader;

package/lib/components/DataSpreadsheet/utils/checkForHoldingKey.d.ts

@@ -0,0 +1 @@
+export function checkForHoldingKey(event: any, key: any): any;

package/lib/components/DataSpreadsheet/utils/checkForHoldingKey.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var checkForHoldingKey = function checkForHoldingKey(event, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key == 'cmd') {
+    return event.metaKey || event.ctrlKey;
+  } else {
+    return event[key];
+  }
+};
+
+exports.checkForHoldingKey = checkForHoldingKey;

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

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/classnames/index.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var devtools = require('../../../global/js/utils/devtools.js');
 var settings = require('../../../settings.js');
 var pconsole = require('../../../global/js/utils/pconsole.js');
@@ -23,8 +23,9 @@ var InlineEditContext = require('./addons/InlineEdit/InlineEditContext/InlineEdi
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["datagridState", "title"];
+var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 
@@ -34,6 +35,7 @@ var componentName = 'Datagrid';
 exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
     title = _ref.title,
+    ariaToolbarLabel = _ref.ariaToolbarLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
     pconsole["default"].warn('Datagrid was not passed datagridState which is required to render this component.');
@@ -49,7 +51,8 @@ exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var props = {
     title: title,
-    datagridState: datagridState
+    datagridState: datagridState,
+    ariaToolbarLabel: ariaToolbarLabel
   };
   return /*#__PURE__*/React__default["default"].createElement(FilterProvider.FilterProvider, {
     filters: filters,
@@ -57,7 +60,7 @@ exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_
   }, /*#__PURE__*/React__default["default"].createElement(InlineEditContext.InlineEditProvider, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     id: tableId,
     ref: ref,
-    className: index["default"](className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
+    className: cx__default["default"](className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
   }, devtools.getDevtoolsProps(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex")
   }, /*#__PURE__*/React__default["default"].createElement(DatagridContent.DatagridContent, props)) : /*#__PURE__*/React__default["default"].createElement(DatagridContent.DatagridContent, props))));
@@ -70,12 +73,17 @@ exports.Datagrid = settings.pkg.checkComponentEnabled(exports.Datagrid, componen
 // is used in preference to relying on function.name.
 exports.Datagrid.displayName = componentName;
 exports.Datagrid.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   * 'aria-label' of the TableToolbar component.
+   */
+  ariaToolbarLabel: index["default"].string,
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
-  datagridState: index$1["default"].object.isRequired,
+  datagridState: index["default"].object.isRequired,
   /**
    * Table title
    */
-  title: index$1["default"].string
+  title: index["default"].string
 };

package/lib/components/Datagrid/Datagrid/DatagridContent.d.ts

@@ -1,9 +1,11 @@
-export function DatagridContent({ datagridState, title }: {
+export function DatagridContent({ datagridState, title, ariaToolbarLabel }: {
     datagridState: any;
     title: any;
+    ariaToolbarLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace DatagridContent {
     namespace propTypes {
+        let ariaToolbarLabel: PropTypes.Requireable<string>;
         let datagridState: PropTypes.Requireable<PropTypes.InferProps<{
             getTableProps: PropTypes.Requireable<(...args: any[]) => any>;
             getFilterFlyoutProps: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -17,8 +17,8 @@ var constants = require('./addons/Filtering/constants.js');
 var DatagridBody = require('./DatagridBody.js');
 var DatagridHead = require('./DatagridHead.js');
 var DatagridToolbar = require('./DatagridToolbar.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/classnames/index.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var handleGridFocus = require('./addons/InlineEdit/handleGridFocus.js');
 var handleGridKeyPress = require('./addons/InlineEdit/handleGridKeyPress.js');
 var layout = require('@carbon/layout');
@@ -33,12 +33,14 @@ var FilterSummary = require('../../FilterSummary/FilterSummary.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = function DatagridContent(_ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title;
+    title = _ref.title,
+    ariaToolbarLabel = _ref.ariaToolbarLabel;
   var _useContext = React.useContext(InlineEditContext.InlineEditContext),
     inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -94,7 +96,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Table, _rollupPluginBabelHelpers["extends"]({}, getTableProps(), {
-      className: index["default"](withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: cx__default["default"](withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: /* istanbul ignore next */
@@ -156,11 +158,13 @@ var DatagridContent = function DatagridContent(_ref) {
     }
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.TableContainer, {
-    className: index["default"]("".concat(gcClass), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(gcClass, "-active"), gridActive), "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), "".concat(gcClass, "-inline-edit"), withInlineEdit), "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), "".concat(blockClass, "__with-pagination"), DatagridPagination), "".concat(blockClass, "__dense-header"), useDenseHeader)),
+    className: cx__default["default"]("".concat(gcClass), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(gcClass, "-active"), gridActive), "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), "".concat(gcClass, "-inline-edit"), withInlineEdit), "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), "".concat(blockClass, "__with-pagination"), DatagridPagination), "".concat(blockClass, "__dense-header"), useDenseHeader)),
     title: gridTitle,
     description: gridDescription
-  }, /*#__PURE__*/React__default["default"].createElement(DatagridToolbar["default"], datagridState), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
+  }, /*#__PURE__*/React__default["default"].createElement(DatagridToolbar["default"], _rollupPluginBabelHelpers["extends"]({}, datagridState, {
+    ariaToolbarLabel: ariaToolbarLabel
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cx__default["default"]("".concat(blockClass, "__table-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
   }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React__default["default"].createElement(FilterPanel["default"], _rollupPluginBabelHelpers["extends"]({}, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
@@ -179,32 +183,33 @@ var DatagridContent = function DatagridContent(_ref) {
   }));
 };
 DatagridContent.propTypes = {
-  datagridState: index$1["default"].shape({
-    getTableProps: index$1["default"].func,
-    getFilterFlyoutProps: index$1["default"].func,
-    withVirtualScroll: index$1["default"].bool,
-    DatagridActions: index$1["default"].oneOfType([index$1["default"].element, index$1["default"].func]),
-    DatagridPagination: index$1["default"].oneOfType([index$1["default"].element, index$1["default"].func]),
-    CustomizeColumnsTearsheet: index$1["default"].oneOfType([index$1["default"].element, index$1["default"].func]),
-    isFetching: index$1["default"].bool,
-    fullHeightDatagrid: index$1["default"].bool,
-    filterProps: index$1["default"].object,
-    variableRowHeight: index$1["default"].bool,
-    useDenseHeader: index$1["default"].bool,
-    withInlineEdit: index$1["default"].bool,
-    verticalAlign: index$1["default"].string,
-    gridTitle: index$1["default"].node,
-    gridDescription: index$1["default"].node,
-    page: index$1["default"].arrayOf(index$1["default"].object),
-    rows: index$1["default"].arrayOf(index$1["default"].object),
-    tableId: index$1["default"].string,
-    totalColumnsWidth: index$1["default"].number,
-    gridRef: index$1["default"].object,
-    setAllFilters: index$1["default"].func,
-    getFilterProps: index$1["default"].func,
-    state: index$1["default"].object
+  ariaToolbarLabel: index["default"].string,
+  datagridState: index["default"].shape({
+    getTableProps: index["default"].func,
+    getFilterFlyoutProps: index["default"].func,
+    withVirtualScroll: index["default"].bool,
+    DatagridActions: index["default"].oneOfType([index["default"].element, index["default"].func]),
+    DatagridPagination: index["default"].oneOfType([index["default"].element, index["default"].func]),
+    CustomizeColumnsTearsheet: index["default"].oneOfType([index["default"].element, index["default"].func]),
+    isFetching: index["default"].bool,
+    fullHeightDatagrid: index["default"].bool,
+    filterProps: index["default"].object,
+    variableRowHeight: index["default"].bool,
+    useDenseHeader: index["default"].bool,
+    withInlineEdit: index["default"].bool,
+    verticalAlign: index["default"].string,
+    gridTitle: index["default"].node,
+    gridDescription: index["default"].node,
+    page: index["default"].arrayOf(index["default"].object),
+    rows: index["default"].arrayOf(index["default"].object),
+    tableId: index["default"].string,
+    totalColumnsWidth: index["default"].number,
+    gridRef: index["default"].object,
+    setAllFilters: index["default"].func,
+    getFilterProps: index["default"].func,
+    state: index["default"].object
   }),
-  title: index$1["default"].string
+  title: index["default"].string
 };
 
 exports.DatagridContent = DatagridContent;

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

@@ -9,25 +9,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var settings = require('../../../settings.js');
+var cx = require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 
 // eslint-disable-next-line react/prop-types
 var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
   return function (datagridState) {
+    var _row$original;
     var row = datagridState.row;
     var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
       var _event$target;
       /* istanbul ignore else */
-      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target = _event$target.parentNode) !== null && _event$target !== void 0 && _event$target.previousElementSibling) {
-        var parentNode = event.target.parentNode.previousElementSibling;
+      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.closest('tr').previousElementSibling) {
+        var _event$target2;
+        var parentNode = event === null || event === void 0 || (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.closest('tr').previousElementSibling;
         if (eventType === 'enter') {
           parentNode.classList.add("".concat(blockClass, "__expandable-row--hover"));
         } else {
@@ -36,7 +41,7 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       }
     };
     return /*#__PURE__*/React__default["default"].createElement("tr", {
-      className: "".concat(blockClass, "__expanded-row"),
+      className: cx__default["default"]("".concat(blockClass, "__expanded-row"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__slug--row"), /*#__PURE__*/React.isValidElement(row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slug))),
       onMouseEnter: function onMouseEnter(event) {
         return toggleParentHoverClass(event, 'enter');
       },

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

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var react = require('@carbon/react');
 var layout = require('@carbon/layout');
 var commonColumnIds = require('../common-column-ids.js');
@@ -23,6 +23,7 @@ var DatagridSlug = require('./addons/Slug/DatagridSlug.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _th;
 var _excluded = ["role"],
@@ -50,7 +51,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
     minWidth = _ref.minWidth,
     dispatch = _ref.dispatch,
     onColResizeEnd = _ref.onColResizeEnd,
-    resizerAriaLabel = _ref.resizerAriaLabel;
+    resizerAriaLabel = _ref.resizerAriaLabel,
+    isFetching = _ref.isFetching;
   // eslint-disable-next-line no-unused-vars
   resizerProps.role;
     var headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(resizerProps, _excluded);
@@ -88,7 +90,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
     className: "".concat(blockClass, "__col-resizer-range"),
     type: "range",
     defaultValue: originalCol.width,
-    "aria-label": resizerAriaLabel || 'Resize column'
+    "aria-label": resizerAriaLabel || 'Resize column',
+    disabled: isFetching
   })), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
@@ -96,7 +99,8 @@ var ResizeHeader = function ResizeHeader(_ref) {
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var resizerAriaLabel = datagridState.resizerAriaLabel,
     isTableSortable = datagridState.isTableSortable,
-    rows = datagridState.rows;
+    rows = datagridState.rows,
+    isFetching = datagridState.isFetching;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   React.useEffect(function () {
@@ -151,7 +155,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     return /*#__PURE__*/React.isValidElement(r === null || r === void 0 || (_r$original = r.original) === null || _r$original === void 0 ? void 0 : _r$original.slug);
   });
   return /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({}, headerGroupProps, {
-    className: index["default"]("".concat(blockClass, "__head"), headerGroupClassName),
+    className: cx__default["default"]("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
   }), foundAIRow ? _th || (_th = /*#__PURE__*/React__default["default"].createElement("th", {
     scope: "col",
@@ -159,7 +163,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   })) : null, datagridState.headers.filter(function (_ref3) {
     var isVisible = _ref3.isVisible;
     return isVisible;
-  }).map(function (header, index$1) {
+  }).map(function (header, index) {
     var _header$getResizerPro;
     if (header.id === commonColumnIds.selectionColumnId) {
       // render directly without the wrapper TableHeader
@@ -176,14 +180,14 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var columnResizing = state.columnResizing;
     var _ref5 = columnResizing || {},
       columnWidths = _ref5.columnWidths;
-    var originalCol = visibleColumns[index$1];
+    var originalCol = visibleColumns[index];
     var _header$getHeaderProp = header.getHeaderProps();
       _header$getHeaderProp.role;
       var headerClassName = _header$getHeaderProp.className,
       headerProps = _rollupPluginBabelHelpers.objectWithoutProperties(_header$getHeaderProp, _excluded3);
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/React__default["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
-      className: index["default"](headerClassName, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
+      className: cx__default["default"](headerClassName, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header.slug))),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default["default"].createElement(ResizeHeader, {
@@ -197,7 +201,8 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       minWidth: minWidth,
       dispatch: dispatch,
       onColResizeEnd: onColResizeEnd,
-      resizerAriaLabel: resizerAriaLabel
+      resizerAriaLabel: resizerAriaLabel,
+      isFetching: isFetching
     }));
   }));
 };

package/lib/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -11,12 +11,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var settings = require('../../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 
@@ -29,7 +30,7 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
   return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps(), {
-    className: index["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
+    className: cx__default["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);
     var _row$getRowProps = row.getRowProps(),