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

package/lib/components/Card/CardFooter.js

@@ -44,6 +44,7 @@ var CardFooter = function CardFooter(_ref) {
       primaryButtonIcon = _ref.primaryButtonIcon,
       _ref$primaryButtonKin = _ref.primaryButtonKind,
       primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+      primaryButtonPlacement = _ref.primaryButtonPlacement,
       primaryButtonText = _ref.primaryButtonText,
       _ref$productive = _ref.productive,
       productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
@@ -63,7 +64,7 @@ var CardFooter = function CardFooter(_ref) {
     size: "md",
     renderIcon: secondaryButtonIcon,
     href: secondaryButtonHref
-  }, secondaryButtonText), primaryButtonText && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'bottom' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: productive ? 'ghost' : primaryButtonKind,
     onClick: onPrimaryButtonClick,
     size: "md",
@@ -84,6 +85,7 @@ CardFooter.propTypes = {
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.string,
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
   productive: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,

package/lib/components/Card/CardHeader.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _settings = require("../../settings");
 
+var _react2 = require("@carbon/react");
+
 //
 // Copyright IBM Corp. 2020, 2021
 //
@@ -33,6 +35,11 @@ var CardHeader = function CardHeader(_ref) {
   var _cx;
 
   var actions = _ref.actions,
+      noActionIcons = _ref.noActionIcons,
+      onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+      primaryButtonIcon = _ref.primaryButtonIcon,
+      primaryButtonPlacement = _ref.primaryButtonPlacement,
+      primaryButtonText = _ref.primaryButtonText,
       description = _ref.description,
       _ref$hasActions = _ref.hasActions,
       hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
@@ -43,6 +50,8 @@ var CardHeader = function CardHeader(_ref) {
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
   var headerClasses = (0, _classnames.default)(headerClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-label-only"), label && !title && !description), (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-has-label"), !!label), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-lg"), titleSize === 'large'), _cx));
+  var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
+  var actionGhostButtonClass = (0, _classnames.default)(actionGhostButton, (0, _defineProperty2.default)({}, "".concat(actionGhostButton, "--only"), noActionIcons));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -57,7 +66,13 @@ var CardHeader = function CardHeader(_ref) {
     className: "".concat(blockClass, "__description")
   }, description)), hasActions && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
-  }, actions)));
+  }, actions, primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    size: "small",
+    renderIcon: primaryButtonIcon,
+    onClick: onPrimaryButtonClick,
+    className: actionGhostButtonClass
+  }, primaryButtonText))));
 };
 
 exports.CardHeader = CardHeader;
@@ -66,6 +81,11 @@ CardHeader.propTypes = {
   description: _propTypes.default.string,
   hasActions: _propTypes.default.bool,
   label: _propTypes.default.string,
+  noActionIcons: _propTypes.default.bool,
+  onPrimaryButtonClick: _propTypes.default.func,
+  primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  primaryButtonText: _propTypes.default.string,
   title: _propTypes.default.string,
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };

package/lib/components/ComboButton/ComboButton.js

@@ -19,7 +19,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react = require("@carbon/react");
 
@@ -91,11 +91,11 @@ var ComboButton = function ComboButton(_ref) {
     },
     renderIcon: function renderIcon() {
       return /*#__PURE__*/(0, _react2.createElement)(isOpen ? function (props) {
-        return /*#__PURE__*/_react2.default.createElement(_iconsReact.ChevronUp, (0, _extends2.default)({
+        return /*#__PURE__*/_react2.default.createElement(_icons.ChevronUp, (0, _extends2.default)({
           size: 16
         }, props));
       } : function (props) {
-        return /*#__PURE__*/_react2.default.createElement(_iconsReact.ChevronDown, (0, _extends2.default)({
+        return /*#__PURE__*/_react2.default.createElement(_icons.ChevronDown, (0, _extends2.default)({
           size: 16
         }, props));
       }, {

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -63,7 +63,9 @@ var _handleActiveCellInSelectionEnter = require("./utils/handleActiveCellInSelec
 
 var _handleActiveCellInSelectionTab = require("./utils/handleActiveCellInSelectionTab");
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "totalVisibleColumns"];
+var _handleCellDeletion = require("./utils/handleCellDeletion");
+
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 
 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); }
 
@@ -85,13 +87,16 @@ var defaults = {
   defaultEmptyRowCount: 16,
   onDataUpdate: Object.freeze(function () {}),
   onActiveCellChange: Object.freeze(function () {}),
-  onSelectionAreaChange: Object.freeze(function () {})
+  onSelectionAreaChange: Object.freeze(function () {}),
+  theme: 'light'
 };
 /**
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
 
 var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _cx;
+
   var _ref$cellSize = _ref.cellSize,
       cellSize = _ref$cellSize === void 0 ? defaults.cellSize : _ref$cellSize,
       className = _ref.className,
@@ -108,6 +113,9 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
       _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
       onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
+      selectAllAriaLabel = _ref.selectAllAriaLabel,
+      spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
+      theme = _ref.theme,
       totalVisibleColumns = _ref.totalVisibleColumns,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var multiKeyTrackingRef = (0, _react.useRef)();
@@ -214,11 +222,11 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       visibleColumns = _useTable.visibleColumns; // Update the spreadsheet data after editing a cell
 
 
-  var updateData = (0, _react.useCallback)(function (rowIndex, columnId) {
+  var updateData = (0, _react.useCallback)(function (rowIndex, columnId, newValue) {
     onDataUpdate(function (prev) {
       return prev.map(function (row, index) {
         if (index === rowIndex) {
-          return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, (0, _defineProperty2.default)({}, columnId, cellEditorValue));
+          return _objectSpread(_objectSpread({}, prev[rowIndex]), {}, (0, _defineProperty2.default)({}, columnId, cellEditorValue || newValue));
         }
 
         return row;
@@ -406,13 +414,34 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         setCurrentMatcher: setCurrentMatcher,
         usingMac: usingMac
       });
-    } // Allow arrow key navigation if there are less than two activeKeys OR
-    // if one of the activeCellCoordinates is in a header position
+    }
 
+    var deleteParams = {
+      selectionAreas: selectionAreas,
+      currentMatcher: currentMatcher,
+      rows: rows,
+      setActiveCellContent: setActiveCellContent,
+      updateData: updateData
+    }; // Allow arrow key navigation if there are less than two activeKeys OR
+    // if one of the activeCellCoordinates is in a header position
 
     if (keysPressedList.length < 2 && !(0, _handleMultipleKeys.includesShift)(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
       switch (key) {
+        // Backspace
+        case 'Backspace':
+          {
+            (0, _handleCellDeletion.handleCellDeletion)(deleteParams);
+            break;
+          }
+        // Delete
+
+        case 'Delete':
+          {
+            (0, _handleCellDeletion.handleCellDeletion)(deleteParams);
+            break;
+          }
         // Enter
+
         case 'Enter':
           {
             (0, _handleActiveCellInSelectionEnter.handleActiveCellInSelectionEnter)({
@@ -610,7 +639,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
           }
       }
     }
-  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac]);
+  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData]);
 
   var startEditMode = function startEditMode() {
     setIsEditing(true);
@@ -646,6 +675,11 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     }
 
     return;
+  }; // Mouse up on active cell
+
+
+  var handleActiveCellMouseUp = function handleActiveCellMouseUp() {
+    setClickAndHoldActive(false);
   }; // Mouse down on active cell
 
 
@@ -784,12 +818,13 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     }
   }, [spreadsheetRef, currentMatcher]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, getTableProps(), (0, _devtools.getDevtoolsProps)(componentName), {
-    className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus)),
+    className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__container-has-focus"), containerHasFocus), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__").concat(theme), theme === 'dark'), _cx)),
     ref: spreadsheetRef,
     role: "grid",
     tabIndex: 0,
     "aria-rowcount": (rows === null || rows === void 0 ? void 0 : rows.length) || 0,
     "aria-colcount": (columns === null || columns === void 0 ? void 0 : columns.length) || 0,
+    "aria-label": spreadsheetAriaLabel,
     onKeyDown: handleKeyPress,
     onFocus: function onFocus() {
       return setContainerHasFocus(true);
@@ -815,7 +850,8 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     updateActiveCellCoordinates: updateActiveCellCoordinates,
     setHeaderCellHoldActive: setHeaderCellHoldActive,
     headerCellHoldActive: headerCellHoldActive,
-    visibleColumns: visibleColumns
+    visibleColumns: visibleColumns,
+    selectAllAriaLabel: selectAllAriaLabel
   }), /*#__PURE__*/_react.default.createElement(_DataSpreadsheetBody.DataSpreadsheetBody, {
     activeCellCoordinates: activeCellCoordinates,
     ref: spreadsheetRef,
@@ -850,6 +886,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     visibleColumns: visibleColumns
   }), /*#__PURE__*/_react.default.createElement("button", {
     onMouseDown: handleActiveCellMouseDown,
+    onMouseUp: handleActiveCellMouseUp,
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
     onDoubleClick: handleActiveCellDoubleClick,
@@ -858,6 +895,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     className: (0, _classnames.default)("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
     type: "button"
   }, activeCellContent), /*#__PURE__*/_react.default.createElement("textarea", {
+    id: "".concat(blockClass, "__cell-editor-text-area"),
     value: cellEditorValue,
     onKeyDown: (0, _handleEditSubmit.handleEditSubmit)({
       activeCellCoordinates: activeCellCoordinates,
@@ -877,7 +915,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       cellEditorRulerRef.current.textContent = event.target.value;
     },
     ref: cellEditorRef,
-    "aria-labelledby": activeCellCoordinates ? "#".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : null,
+    "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : null,
     className: (0, _classnames.default)("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), (0, _defineProperty2.default)({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
   }), /*#__PURE__*/_react.default.createElement("pre", {
     "aria-hidden": true,
@@ -946,6 +984,21 @@ DataSpreadsheet.propTypes = {
    */
   onSelectionAreaChange: _propTypes.default.func,
 
+  /**
+   * The aria label applied to the Select all button
+   */
+  selectAllAriaLabel: _propTypes.default.string.isRequired,
+
+  /**
+   * The aria label applied to the Data spreadsheet component
+   */
+  spreadsheetAriaLabel: _propTypes.default.string.isRequired,
+
+  /**
+   * The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
+   */
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+
   /**
    * The total number of columns to be initially visible, additional columns will be rendered and
    * visible via horizontal scrollbar

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -411,7 +411,8 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
       }), {
         className: (0, _classnames.default)("".concat(blockClass, "__tr")),
         "data-row-index": index,
-        "aria-rowindex": index + 1
+        "aria-rowindex": index + 1,
+        "aria-owns": "".concat(blockClass, "__cell-editor-text-area")
       }), /*#__PURE__*/_react.default.createElement("div", {
         role: "rowheader",
         className: "".concat(blockClass, "__td-th--cell-container")

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