@carbon/ibm-products 2.33.0 → 2.34.0

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -23,14 +23,11 @@ var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
 var createActiveCellFn = require('./utils/createActiveCellFn.js');
 var getCellSize = require('./utils/getCellSize.js');
-var handleMultipleKeys = require('./utils/handleMultipleKeys.js');
 var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var removeCellSelections = require('./utils/removeCellSelections.js');
 var selectAllCells = require('./utils/selectAllCells.js');
 var handleEditSubmit = require('./utils/handleEditSubmit.js');
-var handleActiveCellInSelectionEnter = require('./utils/handleActiveCellInSelectionEnter.js');
-var handleActiveCellInSelectionTab = require('./utils/handleActiveCellInSelectionTab.js');
-var handleCellDeletion = require('./utils/handleCellDeletion.js');
+var commonEventHandlers = require('./utils/commonEventHandlers.js');
 var useActiveElement = require('../../global/js/hooks/useActiveElement.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useMultipleKeyTracking = require('./hooks/useMultipleKeyTracking.js');
@@ -45,7 +42,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
-// cspell:words rowcount colcount
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
@@ -413,117 +409,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       });
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
-  var handleKeyPress = React.useCallback(function (event) {
-    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);
-          }
-      }
-    }
+  var handleKeyPressEvent = React.useCallback(function (event) {
+    commonEventHandlers.handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent);
   }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress]);
   var startEditMode = function startEditMode() {
     setIsEditing(true);
@@ -687,6 +574,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   var handleActiveCellMouseEnter = React.useCallback(function () {
     handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
   }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
+  // cspell:words rowcount colcount
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, getTableProps(), devtools.getDevtoolsProps(componentName), {
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
     ref: spreadsheetRef,
@@ -695,7 +583,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     "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,
+    onKeyDown: handleKeyPressEvent,
     onFocus: function onFocus() {
       return setContainerHasFocus(true);
     }

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');
 
@@ -250,71 +248,10 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // 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);
 
-      // 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 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, activeCellRef]);
   var handleBodyScroll = function handleBodyScroll() {
@@ -330,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]);
 
@@ -423,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
@@ -445,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,

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,