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

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -66,6 +66,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
       setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
       headerCellHoldActive = _ref.headerCellHoldActive,
+      selectAllAriaLabel = _ref.selectAllAriaLabel,
       visibleColumns = _ref.visibleColumns;
 
   var _useState = (0, _react.useState)(0),
@@ -198,6 +199,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       "data-column-index": "header",
       type: "button",
       tabIndex: -1,
+      "aria-label": selectAllAriaLabel,
       onClick: handleSelectAllClick,
       className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), (0, _defineProperty2.default)({}, "".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) {
@@ -282,6 +284,11 @@ DataSpreadsheetHeader.propTypes = {
    */
   scrollBarSize: _propTypes.default.number,
 
+  /**
+   * The aria label applied to the Select all button
+   */
+  selectAllAriaLabel: _propTypes.default.string.isRequired,
+
   /**
    * All of the cell selection area items
    */

package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js

@@ -49,7 +49,8 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
 
   var previousState = (0, _hooks.usePreviousValue)({
     isEditing: isEditing,
-    windowFocused: windowFocused
+    windowFocused: windowFocused,
+    containerHasFocus: containerHasFocus
   }); // useEffect to check for window focus, if window loses focus
   // we need to clear out the keysPressedList
 
@@ -80,7 +81,7 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
     };
   }, []);
   (0, _react.useEffect)(function () {
-    if (containerHasFocus && !isEditing) {
+    if (ref && containerHasFocus && !isEditing) {
       ref.current.onkeydown = ref.current.onkeyup = function (event) {
         // If keydown, we will add the new key to the keysPressedList array
         if (event.type === 'keydown') {
@@ -132,15 +133,15 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
     // or is currently in edit mode
 
 
-    if (!containerHasFocus || isEditing) {
+    if (ref && !containerHasFocus || isEditing) {
       ref.current.onkeydown = undefined;
       ref.current.onkeyup = undefined;
 
-      if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing) {
+      if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing || previousState !== null && previousState !== void 0 && previousState.containerHasFocus && !containerHasFocus) {
         setKeysPressedList([]);
       }
     }
-  }, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused, usingMac]);
+  }, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.containerHasFocus, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused, usingMac]);
   return {
     keysPressedList: keysPressedList,
     windowFocused: windowFocused,

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleCellDeletion = void 0;
+
+var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
+
+var _rangeWithCallback = require("../../../global/js/utils/rangeWithCallback");
+
+/**
+ * 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.
+ */
+var handleCellDeletion = function handleCellDeletion(_ref) {
+  var selectionAreas = _ref.selectionAreas,
+      currentMatcher = _ref.currentMatcher,
+      rows = _ref.rows,
+      setActiveCellContent = _ref.setActiveCellContent,
+      updateData = _ref.updateData;
+  var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
+  var indexOfCurrentSelectionArea = selectionAreaClone.findIndex(function (item) {
+    return item.matcher === currentMatcher;
+  });
+  var selectionAreaToEmptyContents = selectionAreaClone[indexOfCurrentSelectionArea];
+  var lowestColumnIndex = Math.min(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
+  var greatestColumnIndex = Math.max(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
+  var lowestRowIndex = Math.min(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
+  var greatestRowIndex = Math.max(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
+  (0, _rangeWithCallback.rangeWithCallback)(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
+    (0, _rangeWithCallback.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);
+};
+
+exports.handleCellDeletion = handleCellDeletion;

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

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

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

@@ -9,39 +9,29 @@ exports.Datagrid = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react2 = require("@carbon/react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
-
-var _DatagridBody = _interopRequireDefault(require("./DatagridBody"));
-
-var _DatagridToolbar = _interopRequireDefault(require("./DatagridToolbar"));
-
 var _devtools = require("../../../global/js/utils/devtools");
 
 var _settings = require("../../../settings");
 
 var _pconsole = _interopRequireDefault(require("../../../global/js/utils/pconsole"));
 
+var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
+
+var _DatagridContent = require("./DatagridContent");
+
 var _excluded = ["datagridState"];
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
-var TableContainer = _react2.DataTable.TableContainer,
-    Table = _react2.DataTable.Table;
 
 var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _getTableProps;
-
   var datagridState = _ref.datagridState,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
@@ -51,47 +41,24 @@ var Datagrid = /*#__PURE__*/_react.default.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;
+      className = datagridState.className;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
-
-  var dataGrid = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {
-    className: (0, _classnames.default)("".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.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__table-container")
-  }, leftPanel && leftPanel.isOpen && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__datagridLeftPanel")
-  }, leftPanel.panelContent), /*#__PURE__*/_react.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
-    className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className)
-  }), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
-    rows: rows
-  }))))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
-    instance: datagridState
-  }));
-
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     id: tableId,
     ref: ref,
     className: (0, _classnames.default)(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
   }, (0, _devtools.getDevtoolsProps)(componentName)), leftPanel && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex ").concat(blockClass, "__leftPanel-position")
-  }, dataGrid), leftPanel === undefined && dataGrid);
+  }, /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
+    datagridState: datagridState
+  })), leftPanel === undefined && /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
+    datagridState: datagridState
+  })));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 

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

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatagridContent = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react2 = require("@carbon/react");
+
+var _layout = require("@carbon/layout");
+
+var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
+
+var _DatagridBody = _interopRequireDefault(require("./DatagridBody"));
+
+var _DatagridToolbar = _interopRequireDefault(require("./DatagridToolbar"));
+
+var _handleGridKeyPress = require("./addons/InlineEdit/handleGridKeyPress");
+
+var _settings = require("../../../settings");
+
+var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
+
+var _handleGridFocus = require("./addons/InlineEdit/handleGridFocus");
+
+var _hooks = require("../../../global/js/hooks");
+
+var _hooks2 = require("../../DataSpreadsheet/hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TableContainer = _react2.DataTable.TableContainer,
+    Table = _react2.DataTable.Table;
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var DatagridContent = function DatagridContent(_ref) {
+  var _cx4;
+
+  var datagridState = _ref.datagridState;
+
+  var _useContext = (0, _react.useContext)(_InlineEditContext.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;
+  var rows = DatagridPagination && datagridState.page || datagridState.rows;
+  var gridActive = state.gridActive,
+      editId = state.editId;
+  var gridAreaRef = (0, _react.useRef)();
+  var multiKeyTrackingRef = (0, _react.useRef)();
+  (0, _hooks.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.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
+      className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".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 (0, _handleGridKeyPress.handleGridKeyPress)({
+          event: event,
+          dispatch: dispatch,
+          state: state,
+          instance: datagridState,
+          keysPressedList: keysPressedList,
+          usingMac: usingMac
+        });
+      } : null,
+      onFocus: withInlineEdit ? function () {
+        return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
+      } : null
+    }), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
+      rows: rows
+    })));
+  };
+
+  var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
+    ref: withInlineEdit ? multiKeyTrackingRef : null,
+    containerHasFocus: gridActive,
+    isEditing: !!editId
+  }),
+      keysPressedList = _useMultipleKeyTracki.keysPressedList,
+      usingMac = _useMultipleKeyTracki.usingMac; // Provides a width for the region outline for useInlineEdit
+
+
+  (0, _react.useEffect)(function () {
+    if (!withInlineEdit) {
+      return;
+    }
+
+    var gridElement = document.querySelector("#".concat(tableId));
+    gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), (0, _layout.px)(totalColumnsWidth + 32));
+  }, [withInlineEdit, tableId, totalColumnsWidth, datagridState]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {
+    className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
+    title: gridTitle,
+    description: gridDescription
+  }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__table-container"),
+    ref: gridAreaRef
+  }, leftPanel && leftPanel.isOpen && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__datagridLeftPanel")
+  }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
+    ref: multiKeyTrackingRef
+  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
+    instance: datagridState
+  }));
+};
+
+exports.DatagridContent = DatagridContent;
+DatagridContent.propTypes = {
+  datagridState: _propTypes.default.shape({
+    getTableProps: _propTypes.default.func,
+    withVirtualScroll: _propTypes.default.bool,
+    DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    CustomizeColumnsModal: _propTypes.default.element,
+    isFetching: _propTypes.default.bool,
+    leftPanel: _propTypes.default.object,
+    fullHeightDatagrid: _propTypes.default.bool,
+    variableRowHeight: _propTypes.default.bool,
+    useDenseHeader: _propTypes.default.bool,
+    withInlineEdit: _propTypes.default.bool,
+    verticalAlign: _propTypes.default.string,
+    gridTitle: _propTypes.default.node,
+    gridDescription: _propTypes.default.node,
+    page: _propTypes.default.arrayOf(_propTypes.default.object),
+    rows: _propTypes.default.arrayOf(_propTypes.default.object),
+    tableId: _propTypes.default.string,
+    totalColumnsWidth: _propTypes.default.number
+  })
+};

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

@@ -24,13 +24,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.default.createElement("div", {
       className: "".concat(blockClass, "__expanded-row")
-    }, PreviousRowRenderer(datagridState), ExpandedRowContentComponent(datagridState));
+    }, PreviousRowRenderer(datagridState), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__expanded-row-content"),
+      style: {
+        height: expandedContentHeight ? expandedContentHeight : null
+      }
+    }, ExpandedRowContentComponent(datagridState)));
   };
 };
 

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@carbon/react");
 
@@ -23,7 +25,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../../settings");
 
+var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext/InlineEditContext");
+
+var _getCellIdAsObject = require("./addons/InlineEdit/InlineEditContext/getCellIdAsObject");
+
 var _excluded = ["children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var TableRow = _react2.DataTable.TableRow,
     TableCell = _react2.DataTable.TableCell; // eslint-disable-next-line react/prop-types
@@ -32,8 +43,14 @@ var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
 
   var row = datagridState.row;
+
+  var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
+      state = _useContext.state;
+
+  var activeCellId = state.activeCellId;
+  var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
-    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
+    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {

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

@@ -11,27 +11,36 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@carbon/react");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _settings = require("../../../settings");
 
 var _excluded = ["onChange"];
 var blockClass = "".concat(_settings.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.default.createElement("div", {
-      className: "".concat(blockClass, "__head-hidden-select-all")
+      className: (0, _classnames.default)("".concat(blockClass, "__head-hidden-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
     });
   }
 
@@ -42,7 +51,7 @@ var SelectAll = function SelectAll(datagridState) {
       selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__head-select-all ").concat(blockClass, "__checkbox-cell")
+    className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft))
   }, /*#__PURE__*/_react.default.createElement(TableSelectAll, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: onChange,

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

@@ -11,6 +11,8 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,9 +21,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _settings = require("../../../settings");
 
@@ -37,6 +41,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,
@@ -46,7 +52,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 = (0, _react.useState)(SELECT_ALL_PAGE_ROWS),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -75,10 +83,11 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       selectProps = (0, _objectWithoutProperties2.default)(_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.default.createElement("th", {
     role: "columnheader",
     scope: "col",
-    className: "".concat(blockClass, "__select-all-toggle-on")
+    className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
   }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {
@@ -90,7 +99,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
     hideLabel: true
   }))), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.CaretDown, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.CaretDown, (0, _extends2.default)({
         size: 16
       }, props));
     },
@@ -133,12 +142,14 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
 SelectAllWithToggle.propTypes = {
   allPageRowsLabel: _propTypes.default.string,
   allRowsLabel: _propTypes.default.string,
+  columns: _propTypes.default.arrayOf(_propTypes.default.object),
   getToggleAllPageRowsSelectedProps: _propTypes.default.func.isRequired,
   getToggleAllRowsSelectedProps: _propTypes.default.func.isRequired,
   isAllRowsSelected: _propTypes.default.bool.isRequired,
   isFetching: _propTypes.default.bool,
   selectAllToggle: _propTypes.default.object,
-  tableId: _propTypes.default.string.isRequired
+  tableId: _propTypes.default.string.isRequired,
+  withStickyColumn: _propTypes.default.bool
 };
 var _default = SelectAllWithToggle;
 exports.default = _default;

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

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react2 = require("@carbon/react");
 
@@ -90,10 +90,11 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
 
     return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
       label: width > minWidthBeforeOverflowIcon ? 'More' : null,
-      renderIcon: width > minWidthBeforeOverflowIcon ? _iconsReact.Add : _iconsReact.OverflowMenuVertical,
+      renderIcon: width > minWidthBeforeOverflowIcon ? _icons.Add : _icons.OverflowMenuVertical,
       className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".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) {
@@ -165,9 +166,9 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)));
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 
 var _default = DatagridToolbar;