@carbon/ibm-products 2.32.0 → 2.34.0

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -17,14 +17,12 @@ var cx = require('classnames');
 var layout = require('@carbon/layout');
 var settings = require('../../settings.js');
 var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
-var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var removeCellSelections = require('./utils/removeCellSelections.js');
 var createCellSelectionArea = require('./utils/createCellSelectionArea.js');
 var checkActiveHeaderCell = require('./utils/checkActiveHeaderCell.js');
 var checkSelectedHeaderCell = require('./utils/checkSelectedHeaderCell.js');
-var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.js');
-var checkForHoldingKey = require('./utils/checkForHoldingKey.js');
+var commonEventHandlers = require('./utils/commonEventHandlers.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseUp = require('./hooks/useSpreadsheetMouseUp.js');
 
@@ -36,7 +34,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _div;
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
 var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var columns = _ref.columns,
+  var activeCellRef = _ref.activeCellRef,
+    columns = _ref.columns,
     activeCellCoordinates = _ref.activeCellCoordinates,
     defaultColumn = _ref.defaultColumn,
     defaultEmptyRowCount = _ref.defaultEmptyRowCount,
@@ -205,75 +204,56 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
+  //selectionAreas will be set when ever a selection area is made.
+  React.useEffect(function () {
+    removeDuplicateSelections();
+  }, [selectionAreas, removeDuplicateSelections]);
 
-  // onClick fn for each cell in the data spreadsheet body,
-  // adds the active cell highlight
-  var handleBodyCellClick = React.useCallback(function (cell, columnIndex) {
-    return function (event) {
-      event.preventDefault();
-      var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
-      var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
-      setValidStartingPoint(isValidSelectionAreaStart);
-      var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
-      var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
-      setContainerHasFocus(true);
-      var activeCoordinates = {
-        row: cell.row.index,
-        column: columnIndex
-      };
-      var tempMatcher = uuidv4["default"]();
-      setClickAndHoldActive(true);
+  //this method will check for any duplicate selection area and remove.
+  //same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
+  var removeDuplicateSelections = React.useCallback(function () {
+    var uniqueAttrArray = [],
+      removedSelectionAreaMatcherArr = [];
+    ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
+      var _selectorEl$style = selectorEl.style,
+        top = _selectorEl$style.top,
+        left = _selectorEl$style.left,
+        height = _selectorEl$style.height,
+        width = _selectorEl$style.width;
+      var uniqueAttrStr = "".concat(top).concat(left).concat(height).concat(width); // eg: 20px30px70px90px
+      if (uniqueAttrArray.indexOf(uniqueAttrStr) == -1) {
+        uniqueAttrArray.push(uniqueAttrStr);
+      } else {
+        selectorEl.remove(); // this is identified as duplicate selection and hence removing.
+        removedSelectionAreaMatcherArr.push(selectorEl.getAttribute('data-matcher-id'));
+      }
+    });
 
-      // prevent multiple selections unless cmd key is held
-      // meaning that selectionAreas should only have one item by default
-      if (isHoldingCommandKey) {
-        var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-        activeCellElement.setAttribute('data-selection-id', tempMatcher);
-        setActiveCellInsideSelectionArea(true);
-        setActiveCellCoordinates(activeCoordinates);
-        setCurrentMatcher(tempMatcher);
-        setSelectionAreas(function (prev) {
-          return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prev), [{
-            point1: activeCoordinates,
-            matcher: tempMatcher
-          }]);
+    //clean the duplicate selectionAreaData and selectionArea
+    if (removedSelectionAreaMatcherArr.length) {
+      setSelectionAreas(function (prev) {
+        var prevValues = deepCloneObject.deepCloneObject(prev);
+        return prevValues.filter(function (item) {
+          return !removedSelectionAreaMatcherArr.includes(item.matcher);
         });
-      } else if (isHoldingShiftKey) {
-        setContainerHasFocus(true);
-        var selectionAreaClone = deepCloneObject.deepCloneObject(selectionAreas);
-        var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-          return item.matcher === currentMatcher;
-        });
-        if (indexOfItemToUpdate === -1) {
-          // There is always a selectionArea with a point1 object that updates
-          // whenever the activeCellCoordinates update, we should always be able
-          // to find an index, but if we do not for some reason we should return
-          // at this point.
-          return;
-        } else {
-          // Update the selectionArea that was found, do not update currentMatcher
-          selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-          selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
-          setSelectionAreas(selectionAreaClone);
-        }
-      } else {
-        setActiveCellInsideSelectionArea(false);
-        setActiveCellCoordinates(activeCoordinates);
-        // remove all previous cell selections
-        removeCellSelections.removeCellSelections({
-          spreadsheetRef: ref
+      });
+      setSelectionAreaData(function (prev) {
+        var prevValues = deepCloneObject.deepCloneObject(prev);
+        return prevValues.filter(function (item) {
+          return !removedSelectionAreaMatcherArr.includes(item.selectionId);
         });
-        setSelectionAreas([{
-          point1: activeCoordinates,
-          matcher: tempMatcher
-        }]);
-        setCurrentMatcher(tempMatcher);
-        setSelectionAreaData([]);
-      }
+      });
+    }
+  }, [ref, setSelectionAreas, setSelectionAreaData]);
+
+  // onClick fn for each cell in the data spreadsheet body,
+  // adds the active cell highlight
+
+  var handleBodyCellClickEvent = React.useCallback(function (cell, columnIndex) {
+    return function (event) {
+      commonEventHandlers.handleBodyCellClick(cell, columnIndex, event, currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef, setValidStartingPoint);
     };
-  }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea]);
+  }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef]);
   var handleBodyScroll = function handleBodyScroll() {
     var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
     headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
@@ -287,50 +267,14 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
     };
   });
-  var handleBodyCellHover = React.useCallback(function (cell, columnIndex) {
+  var handleBodyCellHoverEvent = React.useCallback(function (cell, columnIndex) {
     return function () {
-      if (clickAndHoldActive) {
-        var cellCoordinates = {
-          row: cell.row.index,
-          column: columnIndex
-        };
-        setSelectionAreas(function (prev) {
-          var _selectionAreaClone$i, _selectionAreaClone$i2;
-          var selectionAreaClone = deepCloneObject.deepCloneObject(prev);
-          var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-            return item.matcher === currentMatcher;
-          });
-          // No items in the array match up with the currentMatcher value
-          if (indexOfItemToUpdate === -1) {
-            return prev;
-          }
-          // Do not update state if you're still hovering on the same cell
-          if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
-            return prev;
-          }
-          selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-          return selectionAreaClone;
-        });
-      }
+      commonEventHandlers.handleBodyCellHover(cell, columnIndex, clickAndHoldActive, currentMatcher, setSelectionAreas);
     };
   }, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
-  var handleRowHeaderClick = React.useCallback(function (index) {
+  var handleRowHeaderClickEvent = React.useCallback(function (index) {
     return function (event) {
-      var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
-      handleHeaderCellSelection.handleHeaderCellSelection({
-        type: 'row',
-        activeCellCoordinates: activeCellCoordinates,
-        rows: rows,
-        columns: columns,
-        setActiveCellCoordinates: setActiveCellCoordinates,
-        setCurrentMatcher: setCurrentMatcher,
-        setSelectionAreas: setSelectionAreas,
-        spreadsheetRef: ref,
-        index: index,
-        setSelectionAreaData: setSelectionAreaData,
-        isHoldingCommandKey: isHoldingCommandKey
-      });
+      commonEventHandlers.handleRowHeaderClick(index, event, columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData);
     };
   }, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]);
 
@@ -380,7 +324,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "data-row-index": index,
         "data-column-index": "header",
         type: "button",
-        onClick: handleRowHeaderClick(index),
+        onClick: handleRowHeaderClickEvent(index),
         className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
         style: {
           width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
@@ -402,14 +346,14 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           "data-row-index": cell.row.index,
           "data-column-index": index,
           className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
-          onMouseDown: handleBodyCellClick(cell, index),
-          onMouseOver: handleBodyCellHover(cell, index),
+          onMouseDown: handleBodyCellClickEvent(cell, index),
+          onMouseOver: handleBodyCellHoverEvent(cell, index),
           onFocus: function onFocus() {},
           type: "button"
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn, columns]);
+  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
   var spreadsheetBodyRef = React.useRef();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: spreadsheetBodyRef,
@@ -437,6 +381,10 @@ DataSpreadsheetBody.propTypes = {
     row: index["default"].oneOfType([index["default"].string, index["default"].number]),
     column: index["default"].oneOfType([index["default"].string, index["default"].number])
   }),
+  /**
+   *This is the ref of the button input, which is the active cell element
+   */
+  activeCellRef: index["default"].object,
   /**
    * Is the user clicking and holding in the data spreadsheet body
    */

package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.d.ts

@@ -1,6 +1,8 @@
-export function useMoveActiveCell({ spreadsheetRef, activeCellCoordinates, containerHasFocus, createActiveCell, }: {
+export function useMoveActiveCell({ spreadsheetRef, activeCellCoordinates, containerHasFocus, createActiveCell, activeCellContent, isActiveHeaderCellChanged, }: {
     spreadsheetRef: any;
     activeCellCoordinates: any;
     containerHasFocus: any;
     createActiveCell: any;
+    activeCellContent: any;
+    isActiveHeaderCellChanged: any;
 }): void;

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

@@ -16,8 +16,15 @@ var useMoveActiveCell = function useMoveActiveCell(_ref) {
   var spreadsheetRef = _ref.spreadsheetRef,
     activeCellCoordinates = _ref.activeCellCoordinates,
     containerHasFocus = _ref.containerHasFocus,
-    createActiveCell = _ref.createActiveCell;
+    createActiveCell = _ref.createActiveCell,
+    activeCellContent = _ref.activeCellContent,
+    isActiveHeaderCellChanged = _ref.isActiveHeaderCellChanged;
+  //new active cell is created when the activeCellContent changes or navigate through headers
+  // Otherwise new active cell will display the old value in a glance
   React.useEffect(function () {
+    performCreateActiveCell();
+  }, [activeCellContent, performCreateActiveCell, isActiveHeaderCellChanged]);
+  var performCreateActiveCell = React.useCallback(function () {
     var activeCellPlacementElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]"));
     var shouldPlaceActiveCellInHeader = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && true;
     var selectAllElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"header\"][data-column-index=\"header\"]");
@@ -28,7 +35,7 @@ var useMoveActiveCell = function useMoveActiveCell(_ref) {
         addToHeader: shouldPlaceActiveCellInHeader
       });
     }
-  }, [activeCellCoordinates, spreadsheetRef, createActiveCell, containerHasFocus]);
+  }, [spreadsheetRef, activeCellCoordinates, containerHasFocus, createActiveCell]);
 };
 
 exports.useMoveActiveCell = useMoveActiveCell;

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

@@ -0,0 +1,4 @@
+export function handleBodyCellClick(cell: any, columnIndex: any, event: any, ...rest: any[]): void;
+export function handleBodyCellHover(cell: any, columnIndex: any, ...rest: any[]): void;
+export function handleRowHeaderClick(index: any, event: any, ...rest: any[]): void;
+export function handleKeyPress(event: any, ...rest: any[]): any;

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

@@ -0,0 +1,311 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var settings = require('../../../settings.js');
+var checkForHoldingKey = require('./checkForHoldingKey.js');
+var deepCloneObject = require('../../../global/js/utils/deepCloneObject.js');
+var uuidv4 = require('../../../global/js/utils/uuidv4.js');
+var removeCellSelections = require('./removeCellSelections.js');
+var handleHeaderCellSelection = require('./handleHeaderCellSelection.js');
+var handleMultipleKeys = require('./handleMultipleKeys.js');
+var handleActiveCellInSelectionEnter = require('./handleActiveCellInSelectionEnter.js');
+var handleActiveCellInSelectionTab = require('./handleActiveCellInSelectionTab.js');
+var handleCellDeletion = require('./handleCellDeletion.js');
+
+var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
+
+// onClick fn for each cell in the data spreadsheet body,
+// adds the active cell highlight
+
+var handleBodyCellClick = function handleBodyCellClick(cell, columnIndex, event) {
+  for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+    rest[_key - 3] = arguments[_key];
+  }
+  var currentMatcher = rest[0],
+    activeCellCoordinates = rest[1],
+    selectionAreas = rest[2],
+    setActiveCellCoordinates = rest[3],
+    setSelectionAreas = rest[4],
+    setContainerHasFocus = rest[5],
+    setClickAndHoldActive = rest[6],
+    setCurrentMatcher = rest[7],
+    ref = rest[8],
+    setSelectionAreaData = rest[9],
+    setActiveCellInsideSelectionArea = rest[10],
+    activeCellRef = rest[11],
+    setValidStartingPoint = rest[12];
+  event.preventDefault();
+  var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
+  var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
+  setValidStartingPoint(isValidSelectionAreaStart);
+  var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
+  var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
+  setContainerHasFocus(true);
+  var activeCoordinates = {
+    row: cell.row.index,
+    column: columnIndex
+  };
+  var tempMatcher = uuidv4["default"]();
+  setClickAndHoldActive(true);
+
+  // prevent multiple selections unless cmd key is held
+  // meaning that selectionAreas should only have one item by default
+  if (isHoldingCommandKey) {
+    var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    activeCellElement.setAttribute('data-selection-id', tempMatcher);
+    setActiveCellInsideSelectionArea(true);
+    setActiveCellCoordinates(activeCoordinates);
+    setCurrentMatcher(tempMatcher);
+    setSelectionAreas(function (prev) {
+      return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prev), [{
+        point1: activeCoordinates,
+        matcher: tempMatcher
+      }]);
+    });
+  } else if (isHoldingShiftKey) {
+    setContainerHasFocus(true);
+    var selectionAreaClone = deepCloneObject.deepCloneObject(selectionAreas);
+    var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
+      return item.matcher === currentMatcher;
+    });
+    if (indexOfItemToUpdate === -1) {
+      // There is always a selectionArea with a point1 object that updates
+      // whenever the activeCellCoordinates update, we should always be able
+      // to find an index, but if we do not for some reason we should return
+      // at this point.
+      return;
+    } else {
+      // Update the selectionArea that was found, do not update currentMatcher
+      selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
+      selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
+      selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
+      selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
+      setSelectionAreas(selectionAreaClone);
+    }
+  } else {
+    activeCellRef.current.style.display = 'none';
+    setActiveCellInsideSelectionArea(false);
+    setActiveCellCoordinates(activeCoordinates);
+    // remove all previous cell selections
+    removeCellSelections.removeCellSelections({
+      spreadsheetRef: ref
+    });
+    setSelectionAreas([{
+      point1: activeCoordinates,
+      matcher: tempMatcher
+    }]);
+    setCurrentMatcher(tempMatcher);
+    setSelectionAreaData([]);
+  }
+};
+var handleBodyCellHover = function handleBodyCellHover(cell, columnIndex) {
+  for (var _len2 = arguments.length, rest = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+    rest[_key2 - 2] = arguments[_key2];
+  }
+  var clickAndHoldActive = rest[0],
+    currentMatcher = rest[1],
+    setSelectionAreas = rest[2];
+  if (clickAndHoldActive) {
+    var cellCoordinates = {
+      row: cell.row.index,
+      column: columnIndex
+    };
+    setSelectionAreas(function (prev) {
+      var _selectionAreaClone$i, _selectionAreaClone$i2;
+      var selectionAreaClone = deepCloneObject.deepCloneObject(prev);
+      var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
+        return item.matcher === currentMatcher;
+      });
+      // No items in the array match up with the currentMatcher value
+      if (indexOfItemToUpdate === -1) {
+        return prev;
+      }
+      // Do not update state if you're still hovering on the same cell
+      if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
+        return prev;
+      }
+      selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
+      selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
+      return selectionAreaClone;
+    });
+  }
+};
+var handleRowHeaderClick = function handleRowHeaderClick(index, event) {
+  for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
+    rest[_key3 - 2] = arguments[_key3];
+  }
+  var columns = rest[0],
+    ref = rest[1],
+    setSelectionAreas = rest[2],
+    setCurrentMatcher = rest[3],
+    setActiveCellCoordinates = rest[4],
+    activeCellCoordinates = rest[5],
+    rows = rest[6],
+    setSelectionAreaData = rest[7];
+  var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
+  handleHeaderCellSelection.handleHeaderCellSelection({
+    type: 'row',
+    activeCellCoordinates: activeCellCoordinates,
+    rows: rows,
+    columns: columns,
+    setActiveCellCoordinates: setActiveCellCoordinates,
+    setCurrentMatcher: setCurrentMatcher,
+    setSelectionAreas: setSelectionAreas,
+    spreadsheetRef: ref,
+    index: index,
+    setSelectionAreaData: setSelectionAreaData,
+    isHoldingCommandKey: isHoldingCommandKey
+  });
+};
+var handleKeyPress = function handleKeyPress(event) {
+  for (var _len4 = arguments.length, rest = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+    rest[_key4 - 1] = arguments[_key4];
+  }
+  var activeCellInsideSelectionArea = rest[0],
+    updateActiveCellCoordinates = rest[1],
+    activeCellCoordinates = rest[2],
+    removeActiveCell = rest[3],
+    columns = rest[4],
+    rows = rest[5],
+    spreadsheetRef = rest[6],
+    currentMatcher = rest[7],
+    removeCellEditor = rest[8],
+    selectionAreas = rest[9],
+    handleHomeEndKey = rest[10],
+    keysPressedList = rest[11],
+    usingMac = rest[12],
+    updateData = rest[13],
+    checkForReturnCondition = rest[14],
+    handleArrowKeyPress = rest[15],
+    setSelectionAreas = rest[16],
+    setSelectionAreaData = rest[17],
+    setCurrentMatcher = rest[18],
+    activeCellRef = rest[19],
+    setActiveCellCoordinates = rest[20],
+    setContainerHasFocus = rest[21],
+    setActiveCellContent = rest[22];
+  var key = event.key;
+  // Command keys need to be returned as there is default browser behavior with these keys
+  // Needs to be returned in editing mode
+  if (checkForReturnCondition(key)) {
+    return;
+  }
+
+  // Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
+  if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
+    if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList)) {
+      setSelectionAreas([]);
+      setSelectionAreaData([]);
+      removeCellSelections.removeCellSelections({
+        spreadsheetRef: spreadsheetRef
+      });
+    }
+  }
+  if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
+    handleMultipleKeys.handleMultipleKeys({
+      activeCellCoordinates: activeCellCoordinates,
+      event: event,
+      keysPressedList: keysPressedList,
+      selectionAreas: selectionAreas,
+      currentMatcher: currentMatcher,
+      rows: rows,
+      setSelectionAreas: setSelectionAreas,
+      columns: columns,
+      updateActiveCellCoordinates: updateActiveCellCoordinates,
+      spreadsheetRef: spreadsheetRef,
+      removeCellSelections: removeCellSelections.removeCellSelections,
+      blockClass: blockClass,
+      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
+  // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
+
+  if (keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
+    switch (key) {
+      case 'Backspace':
+      case 'Delete':
+        {
+          var deleteParams = {
+            selectionAreas: selectionAreas,
+            currentMatcher: currentMatcher,
+            rows: rows,
+            setActiveCellContent: setActiveCellContent,
+            updateData: updateData,
+            activeCellCoordinates: activeCellCoordinates
+          };
+          handleCellDeletion.handleCellDeletion(deleteParams);
+          break;
+        }
+      // Enter
+      case 'Enter':
+        {
+          handleActiveCellInSelectionEnter.handleActiveCellInSelectionEnter({
+            activeCellInsideSelectionArea: activeCellInsideSelectionArea,
+            activeCellCoordinates: activeCellCoordinates,
+            activeCellRef: activeCellRef,
+            selectionAreas: selectionAreas,
+            updateActiveCellCoordinates: updateActiveCellCoordinates
+          });
+          break;
+        }
+      // HOME
+      case 'Home':
+      case 'End':
+        {
+          event.preventDefault();
+          if (handleMultipleKeys.includesResourceKey(keysPressedList, usingMac)) {
+            return;
+          }
+          handleHomeEndKey({
+            type: key
+          });
+          break;
+        }
+      // Tab
+      case 'Tab':
+        {
+          if (activeCellInsideSelectionArea) {
+            event.preventDefault();
+            return handleActiveCellInSelectionTab.handleActiveCellInSelectionTab({
+              activeCellInsideSelectionArea: activeCellInsideSelectionArea,
+              activeCellCoordinates: activeCellCoordinates,
+              activeCellRef: activeCellRef,
+              selectionAreas: selectionAreas,
+              updateActiveCellCoordinates: updateActiveCellCoordinates
+            });
+          }
+          setSelectionAreas([]);
+          removeActiveCell();
+          removeCellEditor();
+          setContainerHasFocus(false);
+          setActiveCellCoordinates(null);
+          break;
+        }
+      case 'ArrowLeft':
+      case 'ArrowUp':
+      case 'ArrowRight':
+      case 'ArrowDown':
+        {
+          handleArrowKeyPress(key);
+        }
+    }
+  }
+};
+
+exports.handleBodyCellClick = handleBodyCellClick;
+exports.handleBodyCellHover = handleBodyCellHover;
+exports.handleKeyPress = handleKeyPress;
+exports.handleRowHeaderClick = handleRowHeaderClick;

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

@@ -107,7 +107,8 @@ var DatagridContent = function DatagridContent(_ref) {
           instance: datagridState,
           keysPressedList: keysPressedList,
           state: inlineEditState,
-          usingMac: usingMac
+          usingMac: usingMac,
+          ref: multiKeyTrackingRef
         });
       },
       onFocus: withInlineEdit && function () {

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

@@ -43,7 +43,10 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     link: emptyStateLink
   };
   var validEmptyStates = ['error', 'noData', 'notFound'];
-  return /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps(), {
+  return /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
+    role: undefined
+  }), {
+    "aria-live": null,
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/React__default["default"].createElement(react.TableRow, null, /*#__PURE__*/React__default["default"].createElement(react.TableCell, {
     colSpan: headers.length,

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

@@ -29,7 +29,9 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps(), {
+  return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
+    role: undefined
+  }), {
     className: cx__default["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

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

@@ -25,7 +25,10 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps(), {
+  return /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
+    role: undefined
+  }), {
+    "aria-live": null,
     className: cx__default["default"]("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

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

@@ -85,7 +85,11 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState)), /*#__PURE__*/React__default["default"].createElement(react.TableBody, getTableBodyProps(), /*#__PURE__*/React__default["default"].createElement(reactWindow.VariableSizeList, {
+  }, /*#__PURE__*/React__default["default"].createElement(DatagridHead["default"], datagridState)), /*#__PURE__*/React__default["default"].createElement(react.TableBody, _rollupPluginBabelHelpers["extends"]({}, getTableBodyProps({
+    role: undefined
+  }), {
+    "aria-live": null
+  }), /*#__PURE__*/React__default["default"].createElement(reactWindow.VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
     itemSize: function itemSize(index) {