@carbon/ibm-products 1.9.0 → 1.10.0

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["cellSize", "className", "columns", "data", "id", "onActiveCellChange"];
@@ -27,7 +29,10 @@ import { DataSpreadsheetBody } from './DataSpreadsheetBody';
 import { getCellSize } from './getCellSize';
 import { DataSpreadsheetHeader } from './DataSpreadsheetHeader';
 import { useActiveElement } from '../../global/js/hooks';
-import { createActiveCellFn } from './createActiveCellFn'; // cspell:words rowcount colcount
+import { createActiveCellFn } from './createActiveCellFn';
+import { deepCloneObject } from '../../global/js/utils/deepCloneObject';
+import { usePreviousValue } from '../../global/js/hooks';
+import uuidv4 from '../../global/js/utils/uuidv4'; // cspell:words rowcount colcount
 // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
@@ -76,12 +81,17 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       clickAndHoldActive = _useState8[0],
       setClickAndHoldActive = _useState8[1];
 
-  var _useState9 = useState(null),
+  var _useState9 = useState(''),
       _useState10 = _slicedToArray(_useState9, 2),
       currentMatcher = _useState10[0],
       setCurrentMatcher = _useState10[1];
 
+  var previousState = usePreviousValue({
+    activeCellCoordinates: activeCellCoordinates
+  });
   var cellSizeValue = getCellSize(cellSize);
+  var currentMatcherRef = useRef();
+  var activeKeys = useRef([]);
   var defaultColumn = useMemo(function () {
     return {
       width: 150,
@@ -110,6 +120,7 @@ export var DataSpreadsheet = /*#__PURE__*/React.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"))) {
@@ -125,11 +136,20 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }
   }, [spreadsheetRef]); // Removes the cell selection elements
 
-  var removeCellSelections = useCallback(function () {
-    var cellSelections = spreadsheetRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
-    Array.from(cellSelections).forEach(function (element) {
-      return element.remove();
-    });
+  var removeCellSelections = 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"));
+
+      _toConsumableArray(cellSelections).forEach(function (element) {
+        return element.remove();
+      });
+    }
   }, [spreadsheetRef]); // Click outside useEffect
 
   useEffect(function () {
@@ -138,11 +158,12 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
         return;
       }
 
+      setActiveCellCoordinates(null);
       setSelectionAreas([]);
       removeActiveCell();
       removeCellSelections();
       setContainerHasFocus(false);
-      setActiveCellCoordinates(null);
+      activeKeys.current = [];
     };
 
     document.addEventListener('click', handleOutsideClick);
@@ -157,16 +178,26 @@ export var DataSpreadsheet = /*#__PURE__*/React.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;
-    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)) {
+      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 = 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
@@ -179,182 +210,313 @@ export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 
     return;
   }, [activeCellCoordinates]);
-
-  var updateActiveCellCoordinates = function updateActiveCellCoordinates(_ref3) {
+  var updateActiveCellCoordinates = 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 = uuidv4();
+      setSelectionAreas([{
+        point1: newActiveCell,
+        matcher: tempMatcher
+      }]);
+      setCurrentMatcher(tempMatcher);
+    }
+  }, []);
+  var handleMultipleKeys = useCallback(function () {
+    var _selectionAreasClone$;
+
+    var activeKeyValues = activeKeys.current;
+    var selectionAreasClone = 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 = 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;
 
-    if (keyCode === 91 || keyCode === 93) {
+    var key = event.key; // Command keys need to be returned as there is default browser behavior with these keys
+
+    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
 
-    switch (keyCode) {
-      // Tab
-      case 9:
-        {
-          setSelectionAreas([]);
-          removeActiveCell();
-          setContainerHasFocus(false);
-          setActiveCellCoordinates(null);
-          break;
-        }
-      // Left
 
-      case 37:
-        {
-          handleInitialArrowPress();
+    if (!((_activeKeys$current = activeKeys.current) !== null && _activeKeys$current !== void 0 && _activeKeys$current.includes(key))) {
+      var activeClone = _toConsumableArray(activeKeys.current);
 
-          var coordinatesClone = _objectSpread({}, activeCellCoordinates);
+      activeKeys.current = [].concat(_toConsumableArray(activeClone), [key]);
+    }
 
-          if (coordinatesClone.column === 'header') {
-            return;
+    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 'ArrowLeft':
+          {
+            handleInitialArrowPress();
+
+            var coordinatesClone = _objectSpread({}, activeCellCoordinates);
+
+            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
+
+  var handleActiveCellMouseEnterCallback = useCallback(function (areas, clickHold) {
+    var freshMatcherValue = currentMatcherRef.current;
+
+    if (!freshMatcherValue) {
+      return;
+    }
 
-          break;
+    if (areas && areas.length && clickHold && freshMatcherValue) {
+      setSelectionAreas(function (prev) {
+        var selectionAreaClone = deepCloneObject(prev);
+        var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
+          return item.matcher === freshMatcherValue;
+        });
+
+        if (indexOfItemToUpdate === -1) {
+          return prev;
+        }
+
+        if (_typeof(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
 
   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, "\"]"));
@@ -369,6 +531,22 @@ export var DataSpreadsheet = /*#__PURE__*/React.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 = _toConsumableArray(activeKeys.current);
+
+      var filteredKeysClone = activeKeysClone.filter(function (item) {
+        return item !== key;
+      });
+      activeKeys.current = filteredKeysClone;
+    }
+  };
+
   var localRef = useRef();
   var spreadsheetRef = ref || localRef;
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
@@ -379,14 +557,19 @@ export var DataSpreadsheet = /*#__PURE__*/React.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.createElement(DataSpreadsheetHeader, {
+    activeCellCoordinates: activeCellCoordinates,
     cellSizeValue: cellSizeValue,
     defaultColumn: defaultColumn,
-    headerGroups: headerGroups
+    headerGroups: headerGroups,
+    selectionAreas: selectionAreas
   }), /*#__PURE__*/React.createElement(DataSpreadsheetBody, {
+    activeCellCoordinates: activeCellCoordinates,
+    ref: currentMatcherRef,
     clickAndHoldActive: clickAndHoldActive,
     setClickAndHoldActive: setClickAndHoldActive,
     currentMatcher: currentMatcher,