@carbon/ibm-products 1.9.0 → 1.10.0

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -11,8 +11,12 @@ exports.DataSpreadsheet = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -41,11 +45,15 @@ var _hooks = require("../../global/js/hooks");
 
 var _createActiveCellFn = require("./createActiveCellFn");
 
+var _deepCloneObject = require("../../global/js/utils/deepCloneObject");
+
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+
 var _excluded = ["cellSize", "className", "columns", "data", "id", "onActiveCellChange"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -98,12 +106,17 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       clickAndHoldActive = _useState8[0],
       setClickAndHoldActive = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(null),
+  var _useState9 = (0, _react.useState)(''),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
       currentMatcher = _useState10[0],
       setCurrentMatcher = _useState10[1];
 
+  var previousState = (0, _hooks.usePreviousValue)({
+    activeCellCoordinates: activeCellCoordinates
+  });
   var cellSizeValue = (0, _getCellSize.getCellSize)(cellSize);
+  var currentMatcherRef = (0, _react.useRef)();
+  var activeKeys = (0, _react.useRef)([]);
   var defaultColumn = (0, _react.useMemo)(function () {
     return {
       width: 150,
@@ -132,6 +145,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     if (!focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
       setContainerHasFocus(false);
       removeActiveCell();
+      activeKeys.current = [];
     }
 
     if (focusedElement.classList.contains(blockClass) || focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
@@ -147,11 +161,19 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     }
   }, [spreadsheetRef]); // Removes the cell selection elements
 
-  var removeCellSelections = (0, _react.useCallback)(function () {
-    var cellSelections = spreadsheetRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
-    Array.from(cellSelections).forEach(function (element) {
-      return element.remove();
-    });
+  var removeCellSelections = (0, _react.useCallback)(function (matcher) {
+    if (matcher && typeof matcher === 'string') {
+      var selectionToRemove = spreadsheetRef.current.querySelector("[data-matcher-id=\"".concat(matcher, "\"]"));
+
+      if (selectionToRemove) {
+        selectionToRemove.remove();
+      }
+    } else {
+      var cellSelections = spreadsheetRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
+      (0, _toConsumableArray2.default)(cellSelections).forEach(function (element) {
+        return element.remove();
+      });
+    }
   }, [spreadsheetRef]); // Click outside useEffect
 
   (0, _react.useEffect)(function () {
@@ -160,11 +182,12 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         return;
       }
 
+      setActiveCellCoordinates(null);
       setSelectionAreas([]);
       removeActiveCell();
       removeCellSelections();
       setContainerHasFocus(false);
-      setActiveCellCoordinates(null);
+      activeKeys.current = [];
     };
 
     document.addEventListener('click', handleOutsideClick);
@@ -179,16 +202,26 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         addToHeader = _ref2$addToHeader === void 0 ? false : _ref2$addToHeader;
     var activeCellFullData = typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' && typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number' ? rows[coords === null || coords === void 0 ? void 0 : coords.row].cells[coords === null || coords === void 0 ? void 0 : coords.column] : null;
     var activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[coords === null || coords === void 0 ? void 0 : coords.column] : null;
-    (0, _createActiveCellFn.createActiveCellFn)({
-      placementElement: placementElement,
-      coords: coords,
-      addToHeader: addToHeader,
-      contextRef: spreadsheetRef,
-      blockClass: blockClass,
-      onActiveCellChange: onActiveCellChange,
-      activeCellValue: activeCellValue
-    });
-  }, [spreadsheetRef, rows, onActiveCellChange]);
+
+    var handleActiveCellMouseEnter = function handleActiveCellMouseEnter() {
+      handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
+    };
+
+    var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates; // Only create an active cell if the activeCellCoordinates have changed
+
+    if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (coords === null || coords === void 0 ? void 0 : coords.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (coords === null || coords === void 0 ? void 0 : coords.column)) {
+      (0, _createActiveCellFn.createActiveCellFn)({
+        placementElement: placementElement,
+        coords: coords,
+        addToHeader: addToHeader,
+        contextRef: spreadsheetRef,
+        blockClass: blockClass,
+        onActiveCellChange: onActiveCellChange,
+        activeCellValue: activeCellValue,
+        handleActiveCellMouseEnter: handleActiveCellMouseEnter
+      });
+    }
+  }, [spreadsheetRef, rows, onActiveCellChange, clickAndHoldActive, handleActiveCellMouseEnterCallback, selectionAreas, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates]);
   var handleInitialArrowPress = (0, _react.useCallback)(function () {
     // If activeCellCoordinates is null then we need to set an initial value
     // which will place the activeCell on the select all cell/button
@@ -201,182 +234,312 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
     return;
   }, [activeCellCoordinates]);
-
-  var updateActiveCellCoordinates = function updateActiveCellCoordinates(_ref3) {
+  var updateActiveCellCoordinates = (0, _react.useCallback)(function (_ref3) {
     var coords = _ref3.coords,
         updatedValue = _ref3.updatedValue;
-    setActiveCellCoordinates(_objectSpread(_objectSpread({}, coords), updatedValue));
-  };
 
+    var newActiveCell = _objectSpread(_objectSpread({}, coords), updatedValue);
+
+    setActiveCellCoordinates(newActiveCell); // Only run if the active cell is _not_ a header cell. This will add a point1 object
+    // to selectionAreas every time the active cell changes, allowing us to create cell
+    // selections using keyboard
+
+    if (newActiveCell.row !== 'header' && newActiveCell.column !== 'header') {
+      var tempMatcher = (0, _uuidv.default)();
+      setSelectionAreas([{
+        point1: newActiveCell,
+        matcher: tempMatcher
+      }]);
+      setCurrentMatcher(tempMatcher);
+    }
+  }, []);
+  var handleMultipleKeys = (0, _react.useCallback)(function () {
+    var _selectionAreasClone$;
+
+    var activeKeyValues = activeKeys.current;
+    var selectionAreasClone = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
+    var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
+      return item.matcher === currentMatcher;
+    });
+    var pointToUpdate = (_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) !== null && _selectionAreasClone$ !== void 0 && _selectionAreasClone$.point2 ? selectionAreasClone[indexOfCurrentArea].point2 : selectionAreasClone[indexOfCurrentArea].point1; // Down + Shift
+
+    if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowDown')) {
+      if (rows.length - 1 === pointToUpdate.row) {
+        return;
+      }
+
+      var newPoint = {
+        row: pointToUpdate.row + 1,
+        column: pointToUpdate.column
+      };
+      selectionAreasClone[indexOfCurrentArea].point2 = newPoint;
+      selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+      setSelectionAreas(selectionAreasClone);
+    } // Right + Shift
+
+
+    if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowRight')) {
+      if (columns.length - 1 === pointToUpdate.column) {
+        return;
+      }
+
+      var _newPoint = {
+        row: pointToUpdate.row,
+        column: pointToUpdate.column + 1
+      };
+      selectionAreasClone[indexOfCurrentArea].point2 = _newPoint;
+      selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+      setSelectionAreas(selectionAreasClone);
+    } // Up + Shift
+
+
+    if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowUp')) {
+      if (pointToUpdate.row === 0) {
+        return;
+      }
+
+      var _newPoint2 = {
+        row: pointToUpdate.row - 1,
+        column: pointToUpdate.column
+      };
+      selectionAreasClone[indexOfCurrentArea].point2 = _newPoint2;
+      selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+      setSelectionAreas(selectionAreasClone);
+    } // Left + Shift
+
+
+    if (activeKeyValues.includes('Shift') && activeKeyValues.includes('ArrowLeft')) {
+      if (pointToUpdate.column === 0) {
+        return;
+      }
+
+      var _newPoint3 = {
+        row: pointToUpdate.row,
+        column: pointToUpdate.column - 1
+      };
+      selectionAreasClone[indexOfCurrentArea].point2 = _newPoint3;
+      selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+      setSelectionAreas(selectionAreasClone);
+    }
+  }, [selectionAreas, currentMatcher, columns, rows]);
   var handleKeyPress = (0, _react.useCallback)(function (event) {
-    var keyCode = event.keyCode; // Command keys need to be returned as there is default browser behavior with these keys
+    var _activeKeys$current, _activeKeys$current2;
+
+    var key = event.key; // Command keys need to be returned as there is default browser behavior with these keys
 
-    if (keyCode === 91 || keyCode === 93) {
+    if (key === 'Meta' || key === 'Control') {
       return;
     } // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
 
 
-    if ([35, 36, 37, 38, 39, 40].indexOf(keyCode) > -1) {
+    if (['End', 'Home', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
       event.preventDefault();
-    } // Clear out all cell selection areas if user uses any arrow key
+    } // Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
 
 
-    if ([37, 38, 39, 40].indexOf(keyCode) > -1) {
-      if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length) {
+    if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
+      if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && key !== 'Shift' && !activeKeys.current.includes('Shift')) {
         setSelectionAreas([]);
         removeCellSelections();
       }
+    } // Update list of activeKeys
+
+
+    if (!((_activeKeys$current = activeKeys.current) !== null && _activeKeys$current !== void 0 && _activeKeys$current.includes(key))) {
+      var activeClone = (0, _toConsumableArray2.default)(activeKeys.current);
+      activeKeys.current = [].concat((0, _toConsumableArray2.default)(activeClone), [key]);
     }
 
-    switch (keyCode) {
-      // Tab
-      case 9:
-        {
-          setSelectionAreas([]);
-          removeActiveCell();
-          setContainerHasFocus(false);
-          setActiveCellCoordinates(null);
-          break;
-        }
-      // Left
+    if (((_activeKeys$current2 = activeKeys.current) === null || _activeKeys$current2 === void 0 ? void 0 : _activeKeys$current2.length) > 1) {
+      handleMultipleKeys();
+    } // Allow arrow key navigation if there are less than two activeKeys OR
+    // if one of the activeCellCoordinates is in a header position
+
+
+    if (!activeKeys.current.includes('Shift') || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
+      switch (key) {
+        // Tab
+        case 'Tab':
+          {
+            setSelectionAreas([]);
+            removeActiveCell();
+            setContainerHasFocus(false);
+            setActiveCellCoordinates(null);
+            break;
+          }
+        // Left
 
-      case 37:
-        {
-          handleInitialArrowPress();
+        case 'ArrowLeft':
+          {
+            handleInitialArrowPress();
 
-          var coordinatesClone = _objectSpread({}, activeCellCoordinates);
+            var coordinatesClone = _objectSpread({}, activeCellCoordinates);
 
-          if (coordinatesClone.column === 'header') {
-            return;
-          }
+            if (coordinatesClone.column === 'header') {
+              return;
+            }
+
+            if (typeof coordinatesClone.column === 'number') {
+              if (coordinatesClone.column === 0) {
+                updateActiveCellCoordinates({
+                  coords: coordinatesClone,
+                  updatedValue: {
+                    column: 'header'
+                  }
+                });
+                return;
+              }
 
-          if (typeof coordinatesClone.column === 'number') {
-            if (coordinatesClone.column === 0) {
               updateActiveCellCoordinates({
                 coords: coordinatesClone,
                 updatedValue: {
-                  column: 'header'
+                  column: coordinatesClone.column - 1
                 }
               });
-              return;
             }
 
-            updateActiveCellCoordinates({
-              coords: coordinatesClone,
-              updatedValue: {
-                column: coordinatesClone.column - 1
-              }
-            });
+            break;
           }
+        // Up
 
-          break;
-        }
-      // Up
+        case 'ArrowUp':
+          {
+            handleInitialArrowPress();
 
-      case 38:
-        {
-          handleInitialArrowPress();
+            var _coordinatesClone = _objectSpread({}, activeCellCoordinates);
 
-          var _coordinatesClone = _objectSpread({}, activeCellCoordinates);
+            if (_coordinatesClone.row === 'header') {
+              return;
+            }
+
+            if (typeof _coordinatesClone.row === 'number') {
+              // set row back to header if we are at index 0
+              if (_coordinatesClone.row === 0) {
+                updateActiveCellCoordinates({
+                  coords: _coordinatesClone,
+                  updatedValue: {
+                    row: 'header'
+                  }
+                });
+                return;
+              } // if we are at any other index than 0, subtract 1 from current row index
 
-          if (_coordinatesClone.row === 'header') {
-            return;
-          }
 
-          if (typeof _coordinatesClone.row === 'number') {
-            // set row back to header if we are at index 0
-            if (_coordinatesClone.row === 0) {
               updateActiveCellCoordinates({
                 coords: _coordinatesClone,
                 updatedValue: {
-                  row: 'header'
+                  row: _coordinatesClone.row - 1
                 }
               });
-              return;
-            } // if we are at any other index than 0, subtract 1 from current row index
-
+            }
 
-            updateActiveCellCoordinates({
-              coords: _coordinatesClone,
-              updatedValue: {
-                row: _coordinatesClone.row - 1
-              }
-            });
+            break;
           }
+        // Right
 
-          break;
-        }
-      // Right
+        case 'ArrowRight':
+          {
+            handleInitialArrowPress();
 
-      case 39:
-        {
-          handleInitialArrowPress();
+            var _coordinatesClone2 = _objectSpread({}, activeCellCoordinates);
 
-          var _coordinatesClone2 = _objectSpread({}, activeCellCoordinates);
+            if (_coordinatesClone2.column === 'header') {
+              updateActiveCellCoordinates({
+                coords: _coordinatesClone2,
+                updatedValue: {
+                  column: 0
+                }
+              });
+            }
 
-          if (_coordinatesClone2.column === 'header') {
-            updateActiveCellCoordinates({
-              coords: _coordinatesClone2,
-              updatedValue: {
-                column: 0
+            if (typeof _coordinatesClone2.column === 'number') {
+              // Prevent active cell coordinates from updating if the active
+              // cell is in the last column, ie we can't go any further to the right
+              if (columns.length - 1 === _coordinatesClone2.column) {
+                return;
               }
-            });
-          }
 
-          if (typeof _coordinatesClone2.column === 'number') {
-            // Prevent active cell coordinates from updating if the active
-            // cell is in the last column, ie we can't go any further to the right
-            if (columns.length - 1 === _coordinatesClone2.column) {
-              return;
+              updateActiveCellCoordinates({
+                coords: _coordinatesClone2,
+                updatedValue: {
+                  column: _coordinatesClone2.column + 1
+                }
+              });
             }
 
-            updateActiveCellCoordinates({
-              coords: _coordinatesClone2,
-              updatedValue: {
-                column: _coordinatesClone2.column + 1
-              }
-            });
+            break;
           }
+        // Down
 
-          break;
-        }
-      // Down
+        case 'ArrowDown':
+          {
+            handleInitialArrowPress();
 
-      case 40:
-        {
-          handleInitialArrowPress();
+            var _coordinatesClone3 = _objectSpread({}, activeCellCoordinates);
 
-          var _coordinatesClone3 = _objectSpread({}, activeCellCoordinates);
+            if (_coordinatesClone3.row === 'header') {
+              updateActiveCellCoordinates({
+                coords: _coordinatesClone3,
+                updatedValue: {
+                  row: 0
+                }
+              });
+            }
 
-          if (_coordinatesClone3.row === 'header') {
-            updateActiveCellCoordinates({
-              coords: _coordinatesClone3,
-              updatedValue: {
-                row: 0
+            if (typeof _coordinatesClone3.row === 'number') {
+              // Prevent active cell coordinates from updating if the active
+              // cell is in the last row, ie we can't go any further down since
+              // we are in the last row
+              if (rows.length - 1 === _coordinatesClone3.row) {
+                return;
               }
-            });
-          }
 
-          if (typeof _coordinatesClone3.row === 'number') {
-            // Prevent active cell coordinates from updating if the active
-            // cell is in the last row, ie we can't go any further down since
-            // we are in the last row
-            if (rows.length - 1 === _coordinatesClone3.row) {
-              return;
+              updateActiveCellCoordinates({
+                coords: _coordinatesClone3,
+                updatedValue: {
+                  row: _coordinatesClone3.row + 1
+                }
+              });
             }
 
-            updateActiveCellCoordinates({
-              coords: _coordinatesClone3,
-              updatedValue: {
-                row: _coordinatesClone3.row + 1
-              }
-            });
+            break;
           }
+      }
+    }
+  }, [updateActiveCellCoordinates, handleInitialArrowPress, handleMultipleKeys, activeCellCoordinates, selectionAreas === null || selectionAreas === void 0 ? void 0 : selectionAreas.length, removeCellSelections, removeActiveCell, columns.length, rows.length]); // Only update if there are cell selection areas
+  // Find point object that matches currentMatcher and remove the second point
+  // because hovering over the active cell while clicking and holding should
+  // remove the previously existing selection area
 
-          break;
+  var handleActiveCellMouseEnterCallback = (0, _react.useCallback)(function (areas, clickHold) {
+    var freshMatcherValue = currentMatcherRef.current;
+
+    if (!freshMatcherValue) {
+      return;
+    }
+
+    if (areas && areas.length && clickHold && freshMatcherValue) {
+      setSelectionAreas(function (prev) {
+        var selectionAreaClone = (0, _deepCloneObject.deepCloneObject)(prev);
+        var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
+          return item.matcher === freshMatcherValue;
+        });
+
+        if (indexOfItemToUpdate === -1) {
+          return prev;
+        }
+
+        if ((0, _typeof2.default)(selectionAreaClone[indexOfItemToUpdate].point2) === 'object' && selectionAreaClone[indexOfItemToUpdate].areaCreated) {
+          selectionAreaClone[indexOfItemToUpdate].point2 = null;
+          selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
+          removeCellSelections(freshMatcherValue);
+          return selectionAreaClone;
         }
+
+        return prev;
+      });
     }
-  }, [handleInitialArrowPress, activeCellCoordinates, selectionAreas === null || selectionAreas === void 0 ? void 0 : selectionAreas.length, removeCellSelections, removeActiveCell, columns.length, rows.length]); // Adds active cell highlight to correct cell onKeyDown
+  }, [removeCellSelections]); // Adds active cell highlight to correct cell onKeyDown
 
   (0, _react.useEffect)(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, "\"]"));
@@ -391,6 +554,21 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       });
     }
   }, [activeCellCoordinates, spreadsheetRef, createActiveCell, containerHasFocus]);
+
+  var handleKeyUp = function handleKeyUp(event) {
+    var _activeKeys$current3;
+
+    var key = event.key; // Remove key from active keys array on key up
+
+    if ((_activeKeys$current3 = activeKeys.current) !== null && _activeKeys$current3 !== void 0 && _activeKeys$current3.includes(key)) {
+      var activeKeysClone = (0, _toConsumableArray2.default)(activeKeys.current);
+      var filteredKeysClone = activeKeysClone.filter(function (item) {
+        return item !== key;
+      });
+      activeKeys.current = filteredKeysClone;
+    }
+  };
+
   var localRef = (0, _react.useRef)();
   var spreadsheetRef = ref || localRef;
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, getTableProps(), (0, _devtools.getDevtoolsProps)(componentName), {
@@ -401,14 +579,19 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     "aria-rowcount": (rows === null || rows === void 0 ? void 0 : rows.length) || 0,
     "aria-colcount": (columns === null || columns === void 0 ? void 0 : columns.length) || 0,
     onKeyDown: handleKeyPress,
+    onKeyUp: handleKeyUp,
     onFocus: function onFocus() {
       return setContainerHasFocus(true);
     }
   }), /*#__PURE__*/_react.default.createElement(_DataSpreadsheetHeader.DataSpreadsheetHeader, {
+    activeCellCoordinates: activeCellCoordinates,
     cellSizeValue: cellSizeValue,
     defaultColumn: defaultColumn,
-    headerGroups: headerGroups
+    headerGroups: headerGroups,
+    selectionAreas: selectionAreas
   }), /*#__PURE__*/_react.default.createElement(_DataSpreadsheetBody.DataSpreadsheetBody, {
+    activeCellCoordinates: activeCellCoordinates,
+    ref: currentMatcherRef,
     clickAndHoldActive: clickAndHoldActive,
     setClickAndHoldActive: setClickAndHoldActive,
     currentMatcher: currentMatcher,