@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.11

package/es/components/DataSpreadsheet/utils/handleCellDeletion.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * 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 { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
+import { rangeWithCallback } from '../../../global/js/utils/rangeWithCallback';
+export var handleCellDeletion = function handleCellDeletion(_ref) {
+  var _selectionAreaToEmpty, _selectionAreaToEmpty2, _selectionAreaToEmpty3, _selectionAreaToEmpty4, _selectionAreaToEmpty5, _selectionAreaToEmpty6, _selectionAreaToEmpty7, _selectionAreaToEmpty8;
+
+  var activeCellCoordinates = _ref.activeCellCoordinates,
+      selectionAreas = _ref.selectionAreas,
+      currentMatcher = _ref.currentMatcher,
+      rows = _ref.rows,
+      setActiveCellContent = _ref.setActiveCellContent,
+      updateData = _ref.updateData;
+
+  // This means that the delete key has been pressed when the active cell is in a header,
+  // not within the spreadsheet body. To delete an entire row/column, it must first be
+  // selected, and then can be deleted.
+  if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header') {
+    return;
+  }
+
+  var selectionAreaClone = deepCloneObject(selectionAreas);
+  var indexOfCurrentSelectionArea = selectionAreaClone.findIndex(function (item) {
+    return item.matcher === currentMatcher;
+  });
+  var selectionAreaToEmptyContents = selectionAreaClone[indexOfCurrentSelectionArea];
+  var lowestColumnIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty === void 0 ? void 0 : _selectionAreaToEmpty.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty2 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty2 === void 0 ? void 0 : _selectionAreaToEmpty2.column);
+  var greatestColumnIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty3 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty3 === void 0 ? void 0 : _selectionAreaToEmpty3.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty4 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty4 === void 0 ? void 0 : _selectionAreaToEmpty4.column);
+  var lowestRowIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty5 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty5 === void 0 ? void 0 : _selectionAreaToEmpty5.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty6 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty6 === void 0 ? void 0 : _selectionAreaToEmpty6.row);
+  var greatestRowIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty7 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty7 === void 0 ? void 0 : _selectionAreaToEmpty7.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty8 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty8 === void 0 ? void 0 : _selectionAreaToEmpty8.row);
+  rangeWithCallback(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
+    rangeWithCallback(lowestRowIndex, greatestRowIndex, function (rowIndex) {
+      var cellProps = rows[rowIndex].cells[columnIndex];
+      updateData(rowIndex, cellProps === null || cellProps === void 0 ? void 0 : cellProps.column.id, '');
+    });
+  });
+  setActiveCellContent(null);
+};

package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js

@@ -288,7 +288,7 @@ export var handleMultipleKeys = function handleMultipleKeys(_ref) {
     } else {
       setTimeout(function () {
         updateToLastCell();
-      }, 1);
+      }, 1000);
     }
   }
 };

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["datagridState"];
 
@@ -11,21 +10,16 @@ var _excluded = ["datagridState"];
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DataTable } from '@carbon/react';
 import cx from 'classnames';
-import DatagridHead from './DatagridHead';
-import DatagridBody from './DatagridBody';
-import DatagridToolbar from './DatagridToolbar';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 import pconsole from '../../../global/js/utils/pconsole';
+import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext';
+import { DatagridContent } from './DatagridContent';
+import { FilterProvider } from './addons/Filtering/FilterProvider';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
-var TableContainer = DataTable.TableContainer,
-    Table = DataTable.Table;
 export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _getTableProps;
-
   var datagridState = _ref.datagridState,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -34,45 +28,27 @@ export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return null;
   }
 
-  var _datagridState$getTab = datagridState.getTableProps,
-      getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
-      withVirtualScroll = datagridState.withVirtualScroll,
+  var withVirtualScroll = datagridState.withVirtualScroll,
       DatagridPagination = datagridState.DatagridPagination,
       isFetching = datagridState.isFetching,
       tableId = datagridState.tableId,
-      CustomizeColumnsModal = datagridState.CustomizeColumnsModal,
       leftPanel = datagridState.leftPanel,
-      fullHeightDatagrid = datagridState.fullHeightDatagrid,
-      _datagridState$vertic = datagridState.verticalAlign,
-      verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
-      variableRowHeight = datagridState.variableRowHeight,
       className = datagridState.className,
-      gridTitle = datagridState.gridTitle,
-      gridDescription = datagridState.gridDescription,
-      useDenseHeader = datagridState.useDenseHeader;
+      filters = datagridState.state.filters;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
-  var dataGrid = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
-    className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : ''),
-    title: gridTitle,
-    description: gridDescription
-  }, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__table-container")
-  }, leftPanel && leftPanel.isOpen && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__datagridLeftPanel")
-  }, leftPanel.panelContent), /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
-    className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className)
-  }), /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
-    rows: rows
-  }))))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
-    instance: datagridState
-  }));
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(FilterProvider, {
+    filters: filters
+  }, /*#__PURE__*/React.createElement(InlineEditProvider, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     id: tableId,
     ref: ref,
     className: cx(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
   }, getDevtoolsProps(componentName)), leftPanel && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex ").concat(blockClass, "__leftPanel-position")
-  }, dataGrid), leftPanel === undefined && dataGrid);
+  }, /*#__PURE__*/React.createElement(DatagridContent, {
+    datagridState: datagridState
+  })), leftPanel === undefined && /*#__PURE__*/React.createElement(DatagridContent, {
+    datagridState: datagridState
+  }))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 Datagrid = pkg.checkComponentEnabled(Datagrid, componentName); // The display name of the component, used by React. Note that displayName

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -0,0 +1,159 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { useContext, useEffect, useRef } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { DataTable } from '@carbon/react';
+import { px } from '@carbon/layout';
+import DatagridHead from './DatagridHead';
+import DatagridBody from './DatagridBody';
+import DatagridToolbar from './DatagridToolbar';
+import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
+import { carbon, pkg } from '../../../settings';
+import { InlineEditContext } from './addons/InlineEdit/InlineEditContext';
+import { handleGridFocus } from './addons/InlineEdit/handleGridFocus';
+import { useClickOutside } from '../../../global/js/hooks';
+import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
+var TableContainer = DataTable.TableContainer,
+    Table = DataTable.Table;
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var DatagridContent = function DatagridContent(_ref) {
+  var _cx4;
+
+  var datagridState = _ref.datagridState;
+
+  var _useContext = useContext(InlineEditContext),
+      state = _useContext.state,
+      dispatch = _useContext.dispatch;
+
+  var activeCellId = state.activeCellId;
+  var _datagridState$getTab = datagridState.getTableProps,
+      getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
+      withVirtualScroll = datagridState.withVirtualScroll,
+      DatagridPagination = datagridState.DatagridPagination,
+      isFetching = datagridState.isFetching,
+      CustomizeColumnsModal = datagridState.CustomizeColumnsModal,
+      leftPanel = datagridState.leftPanel,
+      fullHeightDatagrid = datagridState.fullHeightDatagrid,
+      _datagridState$vertic = datagridState.verticalAlign,
+      verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
+      variableRowHeight = datagridState.variableRowHeight,
+      gridTitle = datagridState.gridTitle,
+      gridDescription = datagridState.gridDescription,
+      useDenseHeader = datagridState.useDenseHeader,
+      withInlineEdit = datagridState.withInlineEdit,
+      tableId = datagridState.tableId,
+      DatagridActions = datagridState.DatagridActions,
+      totalColumnsWidth = datagridState.totalColumnsWidth,
+      gridRef = datagridState.gridRef;
+  var rows = DatagridPagination && datagridState.page || datagridState.rows;
+  var gridActive = state.gridActive,
+      editId = state.editId;
+  var gridAreaRef = useRef();
+  var multiKeyTrackingRef = useRef();
+  useClickOutside(gridAreaRef, function (target) {
+    if (!withInlineEdit) {
+      return;
+    } // We return from here if we find a parent element with the selector below
+    // because that element was initially part of the grid area but was removed
+    // and swapped out with an input, i.e. text, number, selection, or date picker
+
+
+    if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select"))) {
+      return;
+    }
+
+    dispatch({
+      type: 'REMOVE_GRID_ACTIVE_FOCUS',
+      payload: activeCellId
+    });
+  });
+
+  var renderTable = function renderTable() {
+    var _getTableProps;
+
+    return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
+      className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      role: withInlineEdit && 'grid',
+      tabIndex: withInlineEdit && 0,
+      onKeyDown: withInlineEdit ? function (event) {
+        return handleGridKeyPress({
+          event: event,
+          dispatch: dispatch,
+          state: state,
+          instance: datagridState,
+          keysPressedList: keysPressedList,
+          usingMac: usingMac
+        });
+      } : null,
+      onFocus: withInlineEdit ? function () {
+        return handleGridFocus(state, dispatch);
+      } : null
+    }), !withVirtualScroll ? /*#__PURE__*/React.createElement(DatagridHead, datagridState) : null, /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
+      rows: rows
+    })));
+  };
+
+  var _useMultipleKeyTracki = useMultipleKeyTracking({
+    ref: withInlineEdit ? multiKeyTrackingRef : null,
+    containerHasFocus: gridActive,
+    isEditing: !!editId
+  }),
+      keysPressedList = _useMultipleKeyTracki.keysPressedList,
+      usingMac = _useMultipleKeyTracki.usingMac; // Provides a width for the region outline for useInlineEdit
+
+
+  useEffect(function () {
+    if (!withInlineEdit) {
+      return;
+    }
+
+    var gridElement = document.querySelector("#".concat(tableId));
+    var tableHeader = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(carbon.prefix, "--data-table-header"));
+    gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), px(totalColumnsWidth + 32));
+
+    if (gridActive) {
+      gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
+    }
+  }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
+    className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
+    title: gridTitle,
+    description: gridDescription
+  }, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__table-container"),
+    ref: gridAreaRef
+  }, leftPanel && leftPanel.isOpen && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__datagridLeftPanel")
+  }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
+    ref: multiKeyTrackingRef
+  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__virtualScrollContainer"),
+    ref: gridRef
+  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/React.createElement(CustomizeColumnsModal, {
+    instance: datagridState
+  }));
+};
+DatagridContent.propTypes = {
+  datagridState: PropTypes.shape({
+    getTableProps: PropTypes.func,
+    withVirtualScroll: PropTypes.bool,
+    DatagridActions: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    DatagridPagination: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    CustomizeColumnsModal: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    isFetching: PropTypes.bool,
+    leftPanel: PropTypes.object,
+    fullHeightDatagrid: PropTypes.bool,
+    variableRowHeight: PropTypes.bool,
+    useDenseHeader: PropTypes.bool,
+    withInlineEdit: PropTypes.bool,
+    verticalAlign: PropTypes.string,
+    gridTitle: PropTypes.node,
+    gridDescription: PropTypes.node,
+    page: PropTypes.arrayOf(PropTypes.object),
+    rows: PropTypes.arrayOf(PropTypes.object),
+    tableId: PropTypes.string,
+    totalColumnsWidth: PropTypes.number,
+    gridRef: PropTypes.object
+  })
+};

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { pkg } from '../../../settings';
 import { DataTable } from '@carbon/react';
-import { NoDataEmptyState } from '../../EmptyStates/NoDataEmptyState';
+import { NoDataEmptyState, ErrorEmptyState } from '../../EmptyStates';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableBody = DataTable.TableBody,
     TableRow = DataTable.TableRow,
@@ -22,16 +22,29 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
       emptyStateTitle = datagridState.emptyStateTitle,
       emptyStateDescription = datagridState.emptyStateDescription,
       emptyStateSize = datagridState.emptyStateSize,
-      illustrationTheme = datagridState.illustrationTheme;
+      _datagridState$emptyS = datagridState.emptyStateType,
+      emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
+      illustrationTheme = datagridState.illustrationTheme,
+      emptyStateAction = datagridState.emptyStateAction,
+      emptyStateLink = datagridState.emptyStateLink;
   return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
     colSpan: headers.length
-  }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
+  }, emptyStateType === 'error' && /*#__PURE__*/React.createElement(ErrorEmptyState, {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
-    subtitle: emptyStateDescription
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
+  }), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, {
+    illustrationTheme: illustrationTheme,
+    size: emptyStateSize,
+    title: emptyStateTitle,
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
   }))));
 };
 

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

@@ -13,13 +13,21 @@ var DatagridExpandedRow = function DatagridExpandedRow(PreviousRowRenderer, Expa
   return function (datagridState) {
     var row = datagridState.row;
 
+    var _ref = row || {},
+        expandedContentHeight = _ref.expandedContentHeight;
+
     if (!row.isExpanded) {
       return PreviousRowRenderer(datagridState);
     }
 
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__expanded-row")
-    }, PreviousRowRenderer(datagridState), ExpandedRowContentComponent(datagridState));
+    }, PreviousRowRenderer(datagridState), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__expanded-row-content"),
+      style: {
+        height: expandedContentHeight ? expandedContentHeight : null
+      }
+    }, ExpandedRowContentComponent(datagridState)));
   };
 };
 

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

@@ -13,30 +13,69 @@ var _excluded = ["children"];
 // @flow
 import React from 'react';
 import { DataTable, SkeletonText } from '@carbon/react';
+import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import cx from 'classnames';
 import { pkg, carbon } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableRow = DataTable.TableRow,
-    TableCell = DataTable.TableCell; // eslint-disable-next-line react/prop-types
+    TableCell = DataTable.TableCell;
+var rowHeights = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64
+}; // eslint-disable-next-line react/prop-types
 
 var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
 
-  var row = datagridState.row;
+  var row = datagridState.row,
+      rowSize = datagridState.rowSize,
+      withNestedRows = datagridState.withNestedRows;
+
+  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
+    var isExpanded = _ref.isExpanded,
+        subRows = _ref.subRows;
+    var size = 0;
+
+    if (isExpanded && subRows) {
+      size += subRows.length;
+      subRows.forEach(function (child) {
+        size += getVisibleNestedRowCount(child);
+      });
+    }
+
+    return size;
+  };
+
   return /*#__PURE__*/React.createElement(TableRow, _extends({
-    className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
+    className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {
+      var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
+
+      if (!withNestedRows) {
+        return;
+      }
+
+      var subRowCount = getVisibleNestedRowCount(row);
+      var totalNestedRowIndicatorHeight = px(subRowCount * rowHeights[rowSize]);
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+      var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
+      var rowSizeValue = rowSize || 'lg';
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), px(rowHeights[rowSizeValue]));
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), px((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
     },
     onMouseLeave: function onMouseLeave(event) {
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
     }
-  }), row.cells.map(function (cell) {
+  }), row.cells.map(function (cell, index) {
     var cellProps = cell.getCellProps();
 
     var children = cellProps.children,
@@ -52,7 +91,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
 
     return /*#__PURE__*/React.createElement(TableCell, _extends({
-      className: "".concat(blockClass, "__cell")
+      className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
     }, restProps, {
       key: cell.column.id
     }), content);

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["onChange"];
 
 /*
@@ -12,21 +13,27 @@ var _excluded = ["onChange"];
 // @flow
 import React from 'react';
 import { DataTable } from '@carbon/react';
+import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var SelectAll = function SelectAll(datagridState) {
+  var _columns$;
+
   var isFetching = datagridState.isFetching,
       getToggleAllRowsSelectedProps = datagridState.getToggleAllRowsSelectedProps,
       getToggleAllPageRowsSelectedProps = datagridState.getToggleAllPageRowsSelectedProps,
       tableId = datagridState.tableId,
       hideSelectAll = datagridState.hideSelectAll,
       DatagridPagination = datagridState.DatagridPagination,
-      radio = datagridState.radio;
+      radio = datagridState.radio,
+      columns = datagridState.columns,
+      withStickyColumn = datagridState.withStickyColumn;
+  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
 
   if (hideSelectAll || radio) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__head-hidden-select-all")
+      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
     });
   }
 
@@ -37,7 +44,7 @@ var SelectAll = function SelectAll(datagridState) {
       selectProps = _objectWithoutProperties(_getProps, _excluded);
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__head-select-all ").concat(blockClass, "__checkbox-cell")
+    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft))
   }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: onChange,

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["onChange"];
@@ -13,8 +14,9 @@ var _excluded = ["onChange"];
 // @flow
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { CaretDown } from '@carbon/icons-react';
+import { CaretDown } from '@carbon/react/icons';
 import { pkg } from '../../../settings'; // cspell:words columnheader
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -22,6 +24,8 @@ var SELECT_ALL_PAGE_ROWS = 'pageRows';
 var SELECT_ALL_ROWS = 'allRows';
 
 var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
+  var _columns$;
+
   var tableId = _ref.tableId,
       isFetching = _ref.isFetching,
       isAllRowsSelected = _ref.isAllRowsSelected,
@@ -31,7 +35,9 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       _ref$allPageRowsLabel = _ref.allPageRowsLabel,
       allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
       _ref$allRowsLabel = _ref.allRowsLabel,
-      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel;
+      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
+      columns = _ref.columns,
+      withStickyColumn = _ref.withStickyColumn;
 
   var _useState = useState(SELECT_ALL_PAGE_ROWS),
       _useState2 = _slicedToArray(_useState, 2),
@@ -60,10 +66,11 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       selectProps = _objectWithoutProperties(_getProps, _excluded);
 
   var disabled = isFetching || selectProps.disabled;
+  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React.createElement("th", {
     role: "columnheader",
     scope: "col",
-    className: "".concat(blockClass, "__select-all-toggle-on")
+    className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {
@@ -118,11 +125,13 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
 SelectAllWithToggle.propTypes = {
   allPageRowsLabel: PropTypes.string,
   allRowsLabel: PropTypes.string,
+  columns: PropTypes.arrayOf(PropTypes.object),
   getToggleAllPageRowsSelectedProps: PropTypes.func.isRequired,
   getToggleAllRowsSelectedProps: PropTypes.func.isRequired,
   isAllRowsSelected: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool,
   selectAllToggle: PropTypes.object,
-  tableId: PropTypes.string.isRequired
+  tableId: PropTypes.string.isRequired,
+  withStickyColumn: PropTypes.bool
 };
 export default SelectAllWithToggle;

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

@@ -7,13 +7,16 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * 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, useState } from 'react';
-import { Add, OverflowMenuVertical } from '@carbon/icons-react';
+import React, { useEffect, useState, useContext } from 'react';
+import { Add, OverflowMenuVertical } from '@carbon/react/icons';
 import { DataTable, TableBatchActions, TableBatchAction } from '@carbon/react';
 import { useResizeDetector } from 'react-resize-detector';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
 import { pkg, carbon } from '../../../settings';
 import cx from 'classnames';
+import { FilterSummary } from '../../FilterSummary';
+import { FilterContext } from './addons/Filtering/FilterProvider';
+import { CLEAR_FILTERS } from './addons/Filtering/constants';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableToolbar = DataTable.TableToolbar;
 
@@ -35,7 +38,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
 
   var selectedFlatRows = datagridState.selectedFlatRows,
       toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-      toolbarBatchActions = datagridState.toolbarBatchActions;
+      toolbarBatchActions = datagridState.toolbarBatchActions,
+      setGlobalFilter = datagridState.setGlobalFilter;
   var totalSelected = selectedFlatRows && selectedFlatRows.length; // Get initial width of batch actions container,
   // used to measure when all items are put inside
   // the ButtonMenu
@@ -70,7 +74,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       renderIcon: width > minWidthBeforeOverflowIcon ? Add : OverflowMenuVertical,
       className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
       menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
-      flipped: true
+      flipped: true,
+      menuAriaLabel: 'Batch actions'
     }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
       if (index < 2) {
         if (displayAllInMenu) {
@@ -111,7 +116,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
     onCancel: function onCancel() {
-      return toggleAllRowsSelected(false);
+      toggleAllRowsSelected(false);
+      setGlobalFilter(null);
     }
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {
@@ -138,13 +144,28 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
 
   var DatagridActions = datagridState.DatagridActions,
       DatagridBatchActions = datagridState.DatagridBatchActions,
-      batchActions = datagridState.batchActions;
+      batchActions = datagridState.batchActions,
+      state = datagridState.state;
+
+  var _useContext = useContext(FilterContext),
+      filterTags = _useContext.filterTags,
+      EventEmitter = _useContext.EventEmitter;
+
+  var renderFilterSummary = function renderFilterSummary() {
+    return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
+      filters: filterTags,
+      clearFilters: function clearFilters() {
+        return EventEmitter.dispatch(CLEAR_FILTERS);
+      }
+    });
+  };
+
   return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref)), renderFilterSummary()) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)));
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
 };
 
 export default DatagridToolbar;