sheet-happens 0.0.37 → 0.0.38

package/dist/index.js

@@ -88,7 +88,9 @@ var COLORS = {
   headerActive: '#e8f0ff',
   headerActiveText: '#1a66ff',
   headerSelected: '#1a66ff',
+  headerSelectedGroup: '#1a66ff70',
   headerSelectedText: '#ffffff',
+  headerSelectedGroupText: '#ffffff',
   shadowColor: '#000000'
 };
 var SIZES = {
@@ -132,6 +134,10 @@ var HEADER_SELECTED_STYLE = {
   backgroundColor: COLORS.headerSelected,
   color: COLORS.headerSelectedText
 };
+var HEADER_GROUP_SELECTED_STYLE = {
+  backgroundColor: COLORS.headerSelectedGroup,
+  color: COLORS.headerSelectedGroupText
+};
 var ARROW_KEYS = {
   ArrowRight: 'right',
   ArrowLeft: 'left',
@@ -179,6 +185,9 @@ var mulXY = function mulXY(a, b) {
 var maxXY = function maxXY(a, b) {
   return [Math.max(a[0], b[0]), Math.max(a[1], b[1])];
 };
+var minXY = function minXY(a, b) {
+  return [Math.min(a[0], b[0]), Math.min(a[1], b[1])];
+};
 var clampXY = function clampXY(p, min, max) {
   if (max === void 0) {
     max = [Infinity, Infinity];
@@ -203,6 +212,50 @@ var isSameSelection = function isSameSelection(a, b) {
       b2 = b[1];
   return isSameXY(a1, b1) && isSameXY(a2, b2);
 };
+var forRange = function forRange(min, max, callback) {
+  for (var i = min; i <= max; ++i) {
+    callback(i);
+  }
+};
+var forSelectionColumns = function forSelectionColumns(selection) {
+  return function (callback) {
+    var _normalizeSelection = normalizeSelection(selection),
+        _normalizeSelection$ = _normalizeSelection[0],
+        left = _normalizeSelection$[0],
+        _normalizeSelection$2 = _normalizeSelection[1],
+        right = _normalizeSelection$2[0];
+
+    forRange(left, right, callback);
+  };
+};
+var forSelectionRows = function forSelectionRows(selection) {
+  return function (callback) {
+    var _normalizeSelection2 = normalizeSelection(selection),
+        _normalizeSelection2$ = _normalizeSelection2[0],
+        top = _normalizeSelection2$[1],
+        _normalizeSelection2$2 = _normalizeSelection2[1],
+        bottom = _normalizeSelection2$2[1];
+
+    forRange(top, bottom, callback);
+  };
+};
+
+var forToMap = function forToMap(forLoop) {
+  return function (map) {
+    var out = [];
+    forLoop(function () {
+      return out.push(map.apply(void 0, arguments));
+    });
+    return out;
+  };
+};
+
+var mapSelectionColumns = function mapSelectionColumns(selection) {
+  return forToMap(forSelectionColumns(selection));
+};
+var mapSelectionRows = function mapSelectionRows(selection) {
+  return forToMap(forSelectionRows(selection));
+};
 var isMaybeRowSelection = function isMaybeRowSelection(selection) {
   var _selection$ = selection[0],
       left = _selection$[0],
@@ -254,30 +307,32 @@ var isEmptySelection = function isEmptySelection(selection) {
   return left === -1 && right === -1 && top === -1 && bottom === -1;
 };
 var isPointInsideSelection = function isPointInsideSelection(selection, point) {
-  var _normalizeSelection = normalizeSelection(selection),
-      _normalizeSelection$ = _normalizeSelection[0],
-      left = _normalizeSelection$[0],
-      top = _normalizeSelection$[1],
-      _normalizeSelection$2 = _normalizeSelection[1],
-      right = _normalizeSelection$2[0],
-      bottom = _normalizeSelection$2[1];
+  var _normalizeSelection3 = normalizeSelection(selection),
+      _normalizeSelection3$ = _normalizeSelection3[0],
+      left = _normalizeSelection3$[0],
+      top = _normalizeSelection3$[1],
+      _normalizeSelection3$2 = _normalizeSelection3[1],
+      right = _normalizeSelection3$2[0],
+      bottom = _normalizeSelection3$2[1];
 
   var x = point[0],
       y = point[1];
   return x >= left && x <= right && y >= top && y <= bottom;
 };
+var validateSelection = function validateSelection(selection) {
+  var anchor = selection[0],
+      head = selection[1];
+  anchor = anchor.slice();
+  head = head.slice();
+  var min = minXY(anchor, head);
+  if (min[0] === -1) anchor[0] = head[0] = -1;
+  if (min[1] === -1) anchor[1] = head[1] = -1;
+  return [anchor, head];
+};
 var normalizeSelection = function normalizeSelection(selection) {
   var anchor = selection[0],
       head = selection[1];
-  var ax = anchor[0],
-      ay = anchor[1];
-  var hx = head[0],
-      hy = head[1];
-  var left = Math.min(ax, hx);
-  var right = Math.max(ax, hx);
-  var top = Math.min(ay, hy);
-  var bottom = Math.max(ay, hy);
-  return [[left, top], [right, bottom]];
+  return [minXY(anchor, head), maxXY(anchor, head)];
 };
 var orientSelection = function orientSelection(normalized, to) {
   var _normalized$ = normalized[0],
@@ -292,62 +347,45 @@ var orientSelection = function orientSelection(normalized, to) {
       ay = anchor[1];
   var hx = head[0],
       hy = head[1];
-  var swapX = (ax - hx || 1) * (left - right || 1) < 0;
-  var swapY = (ay - hy || 1) * (top - bottom || 1) < 0;
+  var swapX = (ax - hx || 1) * (right - left || 1) < 0;
+  var swapY = (ay - hy || 1) * (bottom - top || 1) < 0;
   return [[swapX ? right : left, swapY ? bottom : top], [swapX ? left : right, swapY ? top : bottom]];
 };
 
 var LIMIT = 1000;
 
-var scanGroup = function scanGroup(keys, index, direction, match) {
-  if (match == null) return index;
-  var i = 0;
+var scanGroup = function scanGroup(keys, index, direction, matchKeys) {
+  var i = 1;
   var limit = direction > 0 ? LIMIT : Math.min(LIMIT, index + 1);
 
   for (; i < limit; i++) {
-    if (keys(index + i * direction) !== match) break;
+    var key = keys(index + i * direction);
+    if (key == null || !matchKeys.has(key)) break;
   }
 
   return index + (i - 1) * direction;
 };
 
-var expandSelectionToColumnGroups = function expandSelectionToColumnGroups(selection, columnGroupKeys) {
+var expandSelectionToRowOrColumnGroups = function expandSelectionToRowOrColumnGroups(selection, groupKeys, matchKeys, coordinate) {
+  if (!matchKeys) return selection;
+
   var _normalizeSelection = normalizeSelection(selection),
-      _normalizeSelection$ = _normalizeSelection[0],
-      left = _normalizeSelection$[0],
-      top = _normalizeSelection$[1],
-      _normalizeSelection$2 = _normalizeSelection[1],
-      right = _normalizeSelection$2[0],
-      bottom = _normalizeSelection$2[1];
-
-  var leftKey = columnGroupKeys(left);
-  var rightKey = columnGroupKeys(right);
-  var startColumn = scanGroup(columnGroupKeys, left, -1, leftKey);
-  var endColumn = scanGroup(columnGroupKeys, right, 1, rightKey);
-  var expanded = [[startColumn, top], [endColumn, bottom]];
-  var oriented = orientSelection(expanded, selection);
-  return oriented;
-};
-var expandSelectionToRowGroups = function expandSelectionToRowGroups(selection, rowGroupKeys) {
-  var _normalizeSelection2 = normalizeSelection(selection),
-      _normalizeSelection2$ = _normalizeSelection2[0],
-      left = _normalizeSelection2$[0],
-      top = _normalizeSelection2$[1],
-      _normalizeSelection2$2 = _normalizeSelection2[1],
-      right = _normalizeSelection2$2[0],
-      bottom = _normalizeSelection2$2[1];
-
-  var topKey = rowGroupKeys(top);
-  var bottomKey = rowGroupKeys(bottom);
-  var startRow = scanGroup(rowGroupKeys, top, -1, topKey);
-  var endRow = scanGroup(rowGroupKeys, bottom, 1, bottomKey);
-  var expanded = [[left, startRow], [right, endRow]];
+      first = _normalizeSelection[0],
+      second = _normalizeSelection[1];
+
+  var start = first[coordinate];
+  var end = second[coordinate];
+  var startIndex = scanGroup(groupKeys, start, -1, matchKeys);
+  var endIndex = scanGroup(groupKeys, end, 1, matchKeys);
+  var expanded = [first.slice(), second.slice()];
+  expanded[0][coordinate] = startIndex;
+  expanded[1][coordinate] = endIndex;
   var oriented = orientSelection(expanded, selection);
   return oriented;
 };
-var isBoundaryInsideGroup = function isBoundaryInsideGroup(index, rowOrColumnGroupKeys) {
-  var before = rowOrColumnGroupKeys(index - 1);
-  var after = rowOrColumnGroupKeys(index);
+var isBoundaryInsideGroup = function isBoundaryInsideGroup(index, groupKeys) {
+  var before = groupKeys(index - 1);
+  var after = groupKeys(index);
   return before != null && after != null && before === after;
 };
 
@@ -494,7 +532,7 @@ var findInDisplayData = function findInDisplayData(displayData, start, direction
   return maxXY(cell, [0, 0]);
 };
 
-var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, onEdit, onCommit, onKnobAreaChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange) {
+var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, onEdit, onCommit, onKnobAreaChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
   var _useState = React.useState(null),
       hitTarget = _useState[0],
       setHitTarget = _useState[1];
@@ -644,31 +682,26 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       return;
     }
 
-    var _normalizeSelection2 = normalizeSelection(selection),
-        _normalizeSelection2$ = _normalizeSelection2[0],
-        minX = _normalizeSelection2$[0],
-        minY = _normalizeSelection2$[1],
-        _normalizeSelection2$2 = _normalizeSelection2[1],
-        maxX = _normalizeSelection2$2[0],
-        maxY = _normalizeSelection2$2[1];
-
-    var selectedColumns = [];
-    var selectedRows = [];
-
-    for (var i = minX; i <= maxX; i++) {
-      selectedColumns.push(i);
-    }
-
-    for (var _i = minY; _i <= maxY; _i++) {
-      selectedRows.push(_i);
-    }
+    var normalized = normalizeSelection(selection);
+    var _normalized$ = normalized[0],
+        minX = _normalized$[0],
+        minY = _normalized$[1],
+        _normalized$2 = normalized[1],
+        maxX = _normalized$2[0],
+        maxY = _normalized$2[1];
+    var selectedColumns = mapSelectionColumns(selection)(function (i) {
+      return i;
+    });
+    var selectedRows = mapSelectionRows(selection)(function (i) {
+      return i;
+    });
 
     if (!hideColumnHeaders && y < getIndentY()) {
       if (onColumnOrderChange) {
         var start = columnToPixel(minX) + SIZES.resizeZone;
         var end = columnToPixel(maxX, 1) - SIZES.resizeZone;
 
-        if (isInRange(x, start, end)) {
+        if (isInRange(x, start, end) || selectedColumnGroups) {
           for (var _iterator2 = _createForOfIteratorHelperLoose(columns), _step2; !(_step2 = _iterator2()).done;) {
             var index = _step2.value;
 
@@ -676,9 +709,31 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
             var _end = columnToPixel(index, 1);
 
-            if (isColumnSelection(selection) && isInRange(x, _start, _end) && isInRange(index, minX, maxX) && canOrderColumn(index)) {
+            if (isColumnSelection(selection) && isInRange(x, _start, _end) && (isInRange(index, minX, maxX) || selectedColumnGroups !== null && selectedColumnGroups !== void 0 && selectedColumnGroups.has(columnGroupKeys(index))) && canOrderColumn(index)) {
               window.document.body.style.cursor = 'grabbing';
-              var indices = selectedColumns;
+              var indices = [].concat(new Set([].concat(selectedColumns, selectedColumnGroups ? columns.filter(function (index) {
+                return selectedColumnGroups.has(columnGroupKeys(index));
+              }) : [])).values());
+              indices.sort(function (a, b) {
+                return a - b;
+              });
+              var dragIndices = indices;
+
+              if (selectedColumnGroups) {
+                var clickSelection = [[index, -1], [index, -1]];
+
+                var _expandSelectionToRow = expandSelectionToRowOrColumnGroups(clickSelection, columnGroupKeys, selectedColumnGroups, 0),
+                    _expandSelectionToRow2 = _expandSelectionToRow[0],
+                    left = _expandSelectionToRow2[0],
+                    _expandSelectionToRow3 = _expandSelectionToRow[1],
+                    right = _expandSelectionToRow3[0];
+
+                var connected = !(minX > right || maxX < left);
+                var dragStart = connected ? Math.min(minX, left) : left;
+                var dragEnd = connected ? Math.max(maxX, right) : right;
+                dragIndices = seq(dragEnd - dragStart + 1, dragStart);
+              }
+
               var size = columnToPixel(maxX, 1) - columnToPixel(minX);
 
               var _getScrollPosition = getScrollPosition(e),
@@ -691,6 +746,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
                 indices: indices
               });
               onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, 0]);
+              onDragIndicesChange === null || onDragIndicesChange === void 0 ? void 0 : onDragIndicesChange([dragIndices, null]);
               return;
             }
           }
@@ -732,7 +788,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
         var _end2 = rowToPixel(maxY, 1) - SIZES.resizeZone;
 
-        if (isInRange(y, _start2, _end2)) {
+        if (isInRange(y, _start2, _end2) || selectedRowGroups) {
           for (var _iterator4 = _createForOfIteratorHelperLoose(rows), _step4; !(_step4 = _iterator4()).done;) {
             var _index2 = _step4.value;
 
@@ -740,9 +796,38 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
             var _end3 = rowToPixel(_index2, 1);
 
-            if (isRowSelection(selection) && isInRange(y, _start3, _end3) && isInRange(_index2, minY, maxY) && canOrderRow(_index2)) {
+            if (isRowSelection(selection) && isInRange(y, _start3, _end3) && (isInRange(_index2, minY, maxY) || selectedRowGroups !== null && selectedRowGroups !== void 0 && selectedRowGroups.has(rowGroupKeys(_index2))) && canOrderRow(_index2)) {
               window.document.body.style.cursor = 'grabbing';
-              var _indices2 = selectedRows;
+
+              var _indices2 = [].concat(new Set([].concat(selectedRows, selectedRowGroups ? rows.map(function (_, i) {
+                return i;
+              }).filter(function (index) {
+                return selectedRowGroups.has(rowGroupKeys(index));
+              }) : [])).values());
+
+              _indices2.sort(function (a, b) {
+                return a - b;
+              });
+
+              var _dragIndices = _indices2;
+
+              if (selectedRowGroups) {
+                var _clickSelection = [[-1, _index2], [-1, _index2]];
+
+                var _expandSelectionToRow4 = expandSelectionToRowOrColumnGroups(_clickSelection, rowGroupKeys, selectedRowGroups, 1),
+                    _expandSelectionToRow5 = _expandSelectionToRow4[0],
+                    top = _expandSelectionToRow5[1],
+                    _expandSelectionToRow6 = _expandSelectionToRow4[1],
+                    bottom = _expandSelectionToRow6[1];
+
+                var _connected = !(minY > bottom || maxY < top);
+
+                var _dragStart = _connected ? Math.min(minY, top) : top;
+
+                var _dragEnd = _connected ? Math.max(maxY, bottom) : bottom;
+
+                _dragIndices = seq(_dragEnd - _dragStart + 1, _dragStart);
+              }
 
               var _size2 = rowToPixel(maxY, 1) - rowToPixel(minY);
 
@@ -756,6 +841,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
                 indices: _indices2
               });
               onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, 0]);
+              onDragIndicesChange === null || onDragIndicesChange === void 0 ? void 0 : onDragIndicesChange([null, _dragIndices]);
               return;
             }
           }
@@ -830,7 +916,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
     setDraggingSelection(true);
     onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([anchor, head], scrollTo, true);
-  }, [getMousePosition, getScrollPosition, getMouseHit, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onKnobAreaChange, onSelectionChange, onCommit, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, dontCommitEditOnSelectionChange]);
+  }, [getMousePosition, getScrollPosition, getMouseHit, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onKnobAreaChange, onSelectionChange, onCommit, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, dontCommitEditOnSelectionChange, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups]);
   var onPointerUp = React.useCallback(function (e) {
     var _getMouseHit;
 
@@ -860,18 +946,19 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
     if (xy && (columnDrag || rowDrag)) {
       window.document.body.style.cursor = 'auto';
+      onDragIndicesChange === null || onDragIndicesChange === void 0 ? void 0 : onDragIndicesChange([null, null]);
       onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange(null);
       onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(null);
       var x = xy[0],
           y = xy[1];
 
-      var _normalizeSelection3 = normalizeSelection(selection),
-          _normalizeSelection3$ = _normalizeSelection3[0],
-          minX = _normalizeSelection3$[0],
-          minY = _normalizeSelection3$[1],
-          _normalizeSelection3$2 = _normalizeSelection3[1],
-          maxX = _normalizeSelection3$2[0],
-          maxY = _normalizeSelection3$2[1];
+      var _normalizeSelection2 = normalizeSelection(selection),
+          _normalizeSelection2$ = _normalizeSelection2[0],
+          minX = _normalizeSelection2$[0],
+          minY = _normalizeSelection2$[1],
+          _normalizeSelection2$2 = _normalizeSelection2[1],
+          maxX = _normalizeSelection2$2[0],
+          maxY = _normalizeSelection2$2[1];
 
       var cellX = pixelToColumn(Math.max(x, getIndentX()), 0.5);
       var cellY = pixelToRow(Math.max(y, getIndentY()), 0.5);
@@ -879,10 +966,14 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       if (columnDrag) {
         var indices = columnDrag.indices;
         var insideSelection = cellX >= minX && cellX <= maxX + 1;
+        var insideGroup = selectedColumnGroups === null || selectedColumnGroups === void 0 ? void 0 : selectedColumnGroups.has(columnGroupKeys(x));
 
-        if (!insideSelection) {
-          var order = cellX > minX ? cellX - indices.length : cellX;
-          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[order, minY], [order + maxX - minX, maxY]], false, false, true);
+        if (!insideSelection && !insideGroup) {
+          var preceding = indices.filter(function (i) {
+            return i < cellX;
+          });
+          var order = cellX - preceding.length;
+          dontChangeSelectionOnOrderChange || (onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[order, minY], [order + indices.length - 1, maxY]]));
           onColumnOrderChange === null || onColumnOrderChange === void 0 ? void 0 : onColumnOrderChange(indices, order);
           onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(Math.min(minX, order));
         }
@@ -893,10 +984,16 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
         var _insideSelection = cellY >= minY && cellY <= maxY + 1;
 
-        if (!_insideSelection) {
-          var _order = cellY > minY ? cellY - _indices4.length : cellY;
+        var _insideGroup = selectedRowGroups === null || selectedRowGroups === void 0 ? void 0 : selectedRowGroups.has(rowGroupKeys(y));
 
-          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[minX, _order], [maxX, _order + maxY - minY]], false, false, true);
+        if (!_insideSelection && !_insideGroup) {
+          var _preceding = _indices4.filter(function (i) {
+            return i < cellY;
+          });
+
+          var _order = cellY - _preceding.length;
+
+          dontChangeSelectionOnOrderChange || (onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[minX, _order], [maxX, _order + _indices4.length - 1]]));
           onRowOrderChange === null || onRowOrderChange === void 0 ? void 0 : onRowOrderChange(_indices4, _order);
           onInvalidateRow === null || onInvalidateRow === void 0 ? void 0 : onInvalidateRow(Math.min(minY, _order));
         }
@@ -922,7 +1019,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       var obj = hitTarget.obj;
       (_obj$onClick = obj.onClick) === null || _obj$onClick === void 0 ? void 0 : _obj$onClick.call(obj, e);
     }
-  }, [getMousePosition, getMouseHit, onChange, onSelectionChange, onKnobAreaChange, onDropTargetChange, onColumnOrderChange, onRowOrderChange]);
+  }, [getMousePosition, getMouseHit, onChange, onSelectionChange, onKnobAreaChange, onDropTargetChange, onColumnOrderChange, onRowOrderChange, dontChangeSelectionOnOrderChange]);
   var onPointerMove = React.useCallback(function (e) {
     var _ref$current3 = ref.current,
         selection = _ref$current3.selection,
@@ -968,13 +1065,13 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     var x = xy[0],
         y = xy[1];
 
-    var _normalizeSelection4 = normalizeSelection(selection),
-        _normalizeSelection4$ = _normalizeSelection4[0],
-        minX = _normalizeSelection4$[0],
-        minY = _normalizeSelection4$[1],
-        _normalizeSelection4$2 = _normalizeSelection4[1],
-        maxX = _normalizeSelection4$2[0],
-        maxY = _normalizeSelection4$2[1];
+    var _normalizeSelection3 = normalizeSelection(selection),
+        _normalizeSelection3$ = _normalizeSelection3[0],
+        minX = _normalizeSelection3$[0],
+        minY = _normalizeSelection3$[1],
+        _normalizeSelection3$2 = _normalizeSelection3[1],
+        maxX = _normalizeSelection3$2[0],
+        maxY = _normalizeSelection3$2[1];
 
     var isDragging = columnResize || columnDrag || rowResize || rowDrag || draggingRowSelection || draggingColumnSelection;
 
@@ -984,7 +1081,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
           var start = columnToPixel(minX) + SIZES.resizeZone;
           var end = columnToPixel(maxX, 1) - SIZES.resizeZone;
 
-          if (isInRange(x, start, end)) {
+          if (isInRange(x, start, end) || selectedColumnGroups) {
             for (var _iterator6 = _createForOfIteratorHelperLoose(columns), _step6; !(_step6 = _iterator6()).done;) {
               var index = _step6.value;
 
@@ -992,7 +1089,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
               var _end4 = columnToPixel(index, 1);
 
-              if (!draggingColumnSelection && isColumnSelection(selection) && isInRange(x, _start4, _end4) && isInRange(index, minX, maxX) && canOrderColumn(index)) {
+              if (!draggingColumnSelection && isColumnSelection(selection) && isInRange(x, _start4, _end4) && (isInRange(index, minX, maxX) || selectedColumnGroups !== null && selectedColumnGroups !== void 0 && selectedColumnGroups.has(columnGroupKeys(index))) && canOrderColumn(index)) {
                 window.document.body.style.cursor = 'grab';
                 return;
               }
@@ -1019,7 +1116,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
           var _end5 = rowToPixel(maxY, 1) - SIZES.resizeZone;
 
-          if (isInRange(y, _start5, _end5)) {
+          if (isInRange(y, _start5, _end5) || selectedRowGroups) {
             for (var _iterator8 = _createForOfIteratorHelperLoose(rows), _step8; !(_step8 = _iterator8()).done;) {
               var _index5 = _step8.value;
 
@@ -1027,7 +1124,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
               var _end6 = rowToPixel(_index5, 1);
 
-              if (!draggingRowSelection && isRowSelection(selection) && isInRange(y, _start6, _end6) && isInRange(_index5, minY, maxY) && canOrderRow(_index5)) {
+              if (!draggingRowSelection && isRowSelection(selection) && isInRange(y, _start6, _end6) && (isInRange(_index5, minY, maxY) || selectedRowGroups !== null && selectedRowGroups !== void 0 && selectedRowGroups.has(rowGroupKeys(_index5))) && canOrderRow(_index5)) {
                 window.document.body.style.cursor = 'grab';
                 return;
               }
@@ -1120,13 +1217,13 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
           cellX = _pixelToCell[0],
           cellY = _pixelToCell[1];
 
-      var _normalizeSelection5 = normalizeSelection(selection),
-          _normalizeSelection5$ = _normalizeSelection5[0],
-          _minX = _normalizeSelection5$[0],
-          _minY = _normalizeSelection5$[1],
-          _normalizeSelection5$2 = _normalizeSelection5[1],
-          _maxX = _normalizeSelection5$2[0],
-          _maxY = _normalizeSelection5$2[1];
+      var _normalizeSelection4 = normalizeSelection(selection),
+          _normalizeSelection4$ = _normalizeSelection4[0],
+          _minX = _normalizeSelection4$[0],
+          _minY = _normalizeSelection4$[1],
+          _normalizeSelection4$2 = _normalizeSelection4[1],
+          _maxX = _normalizeSelection4$2[0],
+          _maxY = _normalizeSelection4$2[1];
 
       var xCellDiff = Math.min(cellX - _minX, _maxX - cellX, 0);
       var yCellDiff = Math.min(cellY - _minY, _maxY - cellY, 0);
@@ -1173,7 +1270,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
         var _insideSelection2 = _cellY >= minY && _cellY <= maxY + 1;
 
-        var _insideGroup = isBoundaryInsideGroup(_cellY, rowGroupKeys);
+        var _insideGroup2 = isBoundaryInsideGroup(_cellY, rowGroupKeys);
 
         var _anchor4 = rowDrag.anchor,
             _scroll6 = rowDrag.scroll;
@@ -1184,10 +1281,10 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
             _currentScroll3 = _getScrollPosition8[1];
 
         onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, _shift + _currentScroll3 - _scroll6]);
-        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(_insideSelection2 || _insideGroup ? null : [[-1, _cellY], [-1, _cellY]]);
+        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(_insideSelection2 || _insideGroup2 ? null : [[-1, _cellY], [-1, _cellY]]);
       }
     }
-  }, [getMousePosition, getScrollPosition, getMouseHit, onCellWidthChange, onCellHeightChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onKnobAreaChange, onInvalidateRow, onInvalidateColumn]);
+  }, [getMousePosition, getScrollPosition, getMouseHit, onCellWidthChange, onCellHeightChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onKnobAreaChange, onInvalidateRow, onInvalidateColumn, columnGroupKeys, rowGroupKeys]);
   var onDoubleClick = React.useCallback(function (e) {
     var pixelToCell = ref.current.cellLayout.pixelToCell;
     e.preventDefault();
@@ -1251,21 +1348,21 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 };
 
 var parseKnobOperation = function parseKnobOperation(knobArea, selection, sourceData, editData, cellReadOnly) {
-  var _normalizeSelection6 = normalizeSelection(knobArea),
+  var _normalizeSelection5 = normalizeSelection(knobArea),
+      _normalizeSelection5$ = _normalizeSelection5[0],
+      kx1 = _normalizeSelection5$[0],
+      ky1 = _normalizeSelection5$[1],
+      _normalizeSelection5$2 = _normalizeSelection5[1],
+      kx2 = _normalizeSelection5$2[0],
+      ky2 = _normalizeSelection5$2[1];
+
+  var _normalizeSelection6 = normalizeSelection(selection),
       _normalizeSelection6$ = _normalizeSelection6[0],
-      kx1 = _normalizeSelection6$[0],
-      ky1 = _normalizeSelection6$[1],
+      sx1 = _normalizeSelection6$[0],
+      sy1 = _normalizeSelection6$[1],
       _normalizeSelection6$2 = _normalizeSelection6[1],
-      kx2 = _normalizeSelection6$2[0],
-      ky2 = _normalizeSelection6$2[1];
-
-  var _normalizeSelection7 = normalizeSelection(selection),
-      _normalizeSelection7$ = _normalizeSelection7[0],
-      sx1 = _normalizeSelection7$[0],
-      sy1 = _normalizeSelection7$[1],
-      _normalizeSelection7$2 = _normalizeSelection7[1],
-      sx2 = _normalizeSelection7$2[0],
-      sy2 = _normalizeSelection7$2[1];
+      sx2 = _normalizeSelection6$2[0],
+      sy2 = _normalizeSelection6$2[1];
 
   var fx1 = kx1;
   var fy1 = ky1;
@@ -2114,7 +2211,7 @@ var applyAlignment = function applyAlignment(start, cellSize, style, imageWidth,
   return start;
 };
 
-var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, dataOffset) {
+var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset) {
   var canvas = context.canvas;
   var width = canvas.width,
       height = canvas.height;
@@ -2146,8 +2243,8 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
   for (var _iterator = _createForOfIteratorHelperLoose(rows), _step; !(_step = _iterator()).done;) {
     var y = _step.value;
 
-    for (var _iterator8 = _createForOfIteratorHelperLoose(columns), _step8; !(_step8 = _iterator8()).done;) {
-      var x = _step8.value;
+    for (var _iterator10 = _createForOfIteratorHelperLoose(columns), _step10; !(_step10 = _iterator10()).done;) {
+      var x = _step10.value;
 
       var _left7 = columnToPixel(x);
 
@@ -2237,17 +2334,17 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
   drawGridLineY(columnHeaderHeight, context.canvas.width);
 
   for (var _iterator2 = _createForOfIteratorHelperLoose(columns), _step2; !(_step2 = _iterator2()).done;) {
-    var _column = _step2.value;
+    var _column2 = _step2.value;
 
-    var _right8 = columnToPixel(_column, 1);
+    var _right8 = columnToPixel(_column2, 1);
 
     drawGridLineX(_right8, gridBottom);
   }
 
   for (var _iterator3 = _createForOfIteratorHelperLoose(rows), _step3; !(_step3 = _iterator3()).done;) {
-    var _row = _step3.value;
+    var _row2 = _step3.value;
 
-    var _bottom8 = rowToPixel(_row, 1);
+    var _bottom8 = rowToPixel(_row2, 1);
 
     drawGridLineY(_bottom8, gridRight);
   }
@@ -2270,8 +2367,11 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
       var row = _step4.value;
       var content = "" + (row + 1);
       var isActive = isInRange(row, minY, maxY);
-      var isSelected = rowSelectionActive && !columnSelectionActive && isActive;
-      var style = isSelected ? HEADER_SELECTED_STYLE : isActive ? HEADER_ACTIVE_STYLE : NO_STYLE;
+      var groupKey = rowGroupKeys(row);
+      var isInRowGroup = groupKey != null && (selectedRowGroups === null || selectedRowGroups === void 0 ? void 0 : selectedRowGroups.has(groupKey));
+      var isSelfSelected = rowSelectionActive && isActive;
+      var isGroupSelected = rowSelectionActive && isInRowGroup;
+      var style = isSelfSelected ? HEADER_SELECTED_STYLE : isGroupSelected ? HEADER_GROUP_SELECTED_STYLE : isActive ? HEADER_ACTIVE_STYLE : NO_STYLE;
 
       var _top2 = rowToPixel(row);
 
@@ -2294,7 +2394,11 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
 
       var _isActive = isInRange(column, minX, maxX);
 
-      var selectedStyle = columnSelectionActive && !rowSelectionActive && _isActive ? HEADER_SELECTED_STYLE : NO_STYLE;
+      var _groupKey = columnGroupKeys(column);
+
+      var isInColumnGroup = _groupKey != null && (selectedColumnGroups === null || selectedColumnGroups === void 0 ? void 0 : selectedColumnGroups.has(_groupKey));
+      var isSelected = columnSelectionActive && !rowSelectionActive && (_isActive || isInColumnGroup);
+      var selectedStyle = isSelected ? HEADER_SELECTED_STYLE : NO_STYLE;
       var activeStyle = _isActive ? HEADER_ACTIVE_STYLE : NO_STYLE;
 
       var _style = _extends({}, columnHeaderStyle(column), activeStyle, selectedStyle);
@@ -2373,30 +2477,46 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
   if (dragOffset) {
     var shiftX = dragOffset[0],
         shiftY = dragOffset[1];
+    var dragColumns = dragIndices[0],
+        dragRows = dragIndices[1];
+    context.fillStyle = COLORS.dragGhost;
 
-    var _resolveSelection = resolveSelection(selection, cellLayout),
-        _resolveSelection$ = _resolveSelection[0],
-        _left5 = _resolveSelection$[0],
-        _top5 = _resolveSelection$[1],
-        _resolveSelection$2 = _resolveSelection[1],
-        _right5 = _resolveSelection$2[0],
-        _bottom5 = _resolveSelection$2[1];
+    if (dragColumns) {
+      for (var _iterator7 = _createForOfIteratorHelperLoose(dragColumns), _step7; !(_step7 = _iterator7()).done;) {
+        var _column = _step7.value;
 
-    context.fillStyle = COLORS.dragGhost;
-    context.fillRect(_left5 + shiftX, _top5 + shiftY, _right5 - _left5, _bottom5 - _top5);
+        var _left5 = columnToPixel(_column);
+
+        var _right5 = columnToPixel(_column, 1);
+
+        context.fillRect(_left5 + shiftX, 0, _right5 - _left5, height);
+      }
+    }
+
+    if (dragRows) {
+      for (var _iterator8 = _createForOfIteratorHelperLoose(dragRows), _step8; !(_step8 = _iterator8()).done;) {
+        var _row = _step8.value;
+
+        var _top5 = rowToPixel(_row);
+
+        var _bottom5 = rowToPixel(_row, 1);
+
+        context.fillRect(0, _top5 + shiftY, width, _bottom5 - _top5);
+      }
+    }
   }
 
   if (dropTarget) {
-    var _resolveSelection2 = resolveSelection(dropTarget, cellLayout),
-        _resolveSelection2$ = _resolveSelection2[0],
-        _left6 = _resolveSelection2$[0],
-        _top6 = _resolveSelection2$[1],
-        _resolveSelection2$2 = _resolveSelection2[1],
-        _right6 = _resolveSelection2$2[0],
-        _bottom6 = _resolveSelection2$2[1];
+    var _resolveSelection = resolveSelection(dropTarget, cellLayout),
+        _resolveSelection$ = _resolveSelection[0],
+        _left6 = _resolveSelection$[0],
+        _top6 = _resolveSelection$[1],
+        _resolveSelection$2 = _resolveSelection[1],
+        _right6 = _resolveSelection$2[0],
+        _bottom6 = _resolveSelection$2[1];
 
     context.strokeStyle = COLORS.dropTarget;
-    context.lineWidth = 2;
+    context.lineWidth = 4;
 
     if (isColumnSelection(dropTarget)) {
       _right6 = _left6;
@@ -2436,11 +2556,11 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
 
   context.textBaseline = 'middle';
 
-  for (var _iterator7 = _createForOfIteratorHelperLoose(rows), _step7; !(_step7 = _iterator7()).done;) {
-    var _y = _step7.value;
+  for (var _iterator9 = _createForOfIteratorHelperLoose(rows), _step9; !(_step9 = _iterator9()).done;) {
+    var _y = _step9.value;
 
-    for (var _iterator9 = _createForOfIteratorHelperLoose(columns), _step9; !(_step9 = _iterator9()).done;) {
-      var _x = _step9.value;
+    for (var _iterator11 = _createForOfIteratorHelperLoose(columns), _step11; !(_step11 = _iterator11()).done;) {
+      var _x = _step11.value;
 
       var _left9 = columnToPixel(_x);
 
@@ -2490,8 +2610,8 @@ var renderCell = function renderCell(context, cellContent, style, defaultCellSty
     var text = '' + cellContent;
     context.fillText(text, xx, yy);
   } else if (typeof cellContent === 'object') {
-    for (var _iterator10 = _createForOfIteratorHelperLoose(cellContent.items), _step10; !(_step10 = _iterator10()).done;) {
-      var obj = _step10.value;
+    for (var _iterator12 = _createForOfIteratorHelperLoose(cellContent.items), _step12; !(_step12 = _iterator12()).done;) {
+      var obj = _step12.value;
       var x = 0;
       var y = 0;
       var w = 0;
@@ -2746,33 +2866,37 @@ var Sheet = React.forwardRef(function (props, ref) {
       dragOffset = _useState5[0],
       setDragOffset = _useState5[1];
 
-  var _useState6 = React.useState(null),
-      dropTarget = _useState6[0],
-      setDropTarget = _useState6[1];
+  var _useState6 = React.useState([null, null]),
+      dragIndices = _useState6[0],
+      setDragIndices = _useState6[1];
+
+  var _useState7 = React.useState(null),
+      dropTarget = _useState7[0],
+      setDropTarget = _useState7[1];
 
-  var _useState7 = React.useState(NO_CELL),
-      editCell = _useState7[0],
-      setEditCell = _useState7[1];
+  var _useState8 = React.useState(NO_CELL),
+      editCell = _useState8[0],
+      setEditCell = _useState8[1];
 
-  var _useState8 = React.useState(selectionProp),
-      lastSelectionProp = _useState8[0],
-      setLastSelectionProp = _useState8[1];
+  var _useState9 = React.useState(selectionProp),
+      lastSelectionProp = _useState9[0],
+      setLastSelectionProp = _useState9[1];
 
   if (lastSelectionProp !== selectionProp) {
     setLastSelectionProp(selectionProp);
     setSelection(selectionProp);
   }
 
-  var _useState9 = React.useState(''),
-      editValue = _useState9[0],
-      setEditValue = _useState9[1];
+  var _useState10 = React.useState(''),
+      editValue = _useState10[0],
+      setEditValue = _useState10[1];
 
-  var _useState10 = React.useState(false),
-      arrowKeyCommitMode = _useState10[0],
-      setArrowKeyCommitMode = _useState10[1];
+  var _useState11 = React.useState(false),
+      arrowKeyCommitMode = _useState11[0],
+      setArrowKeyCommitMode = _useState11[1];
 
   var _useResizeObserver = useResizeObserver({
-    ref: canvasRef
+    ref: overlayRef
   }),
       _useResizeObserver$wi = _useResizeObserver.width,
       canvasWidth = _useResizeObserver$wi === void 0 ? 3000 : _useResizeObserver$wi,
@@ -2831,6 +2955,20 @@ var Sheet = React.forwardRef(function (props, ref) {
     return resolveSheetStyle(props.sheetStyle);
   }, [props.sheetStyle]);
   var secondarySelections = (_props$secondarySelec = props.secondarySelections) != null ? _props$secondarySelec : NO_SELECTIONS;
+  var selectedColumnGroups = React.useMemo(function () {
+    return props.columnGroupKeys ? new Set(mapSelectionColumns(selection)(function (x) {
+      return columnGroupKeys(x);
+    }).filter(function (x) {
+      return x != null;
+    })) : null;
+  }, [props.columnGroupKeys, columnGroupKeys, selection]);
+  var selectedRowGroups = React.useMemo(function () {
+    return props.rowGroupKeys ? new Set(mapSelectionRows(selection)(function (y) {
+      return rowGroupKeys(y);
+    }).filter(function (x) {
+      return x != null;
+    })) : null;
+  }, [props.rowGroupKeys, rowGroupKeys, selection]);
   var maxScrollX = maxScroll[0],
       maxScrollY = maxScroll[1];
   var editCellX = editCell[0],
@@ -2868,7 +3006,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
   }, [visibleCells, props.onScrollChange]);
 
-  var changeSelection = function changeSelection(newSelection, scrollTo, toHead, dragOperation) {
+  var changeSelection = function changeSelection(newSelection, scrollTo, toHead) {
     if (scrollTo === void 0) {
       scrollTo = true;
     }
@@ -2877,31 +3015,16 @@ var Sheet = React.forwardRef(function (props, ref) {
       toHead = false;
     }
 
-    if (dragOperation === void 0) {
-      dragOperation = false;
-    }
-
-    if (!dragOperation) {
-      if (isColumnSelection(newSelection) && columnGroupKeys) {
-        newSelection = expandSelectionToColumnGroups(newSelection, columnGroupKeys);
-      }
-
-      if (isRowSelection(newSelection) && rowGroupKeys) {
-        newSelection = expandSelectionToRowGroups(newSelection, rowGroupKeys);
-      }
-    }
-
     if (!isSameSelection(selection, newSelection)) {
-      setSelection(newSelection);
+      setSelection(validateSelection(newSelection));
     }
 
     var overlay = overlayRef.current;
     if (!overlay) return;
 
     if (scrollTo) {
-      var _newSelection = newSelection,
-          anchor = _newSelection[0],
-          head = _newSelection[1];
+      var anchor = newSelection[0],
+          head = newSelection[1];
       scrollToCell(overlay, toHead ? head : anchor, [canvasWidth, canvasHeight], [freezeColumns, freezeRows], dataOffset, maxScroll, cellLayout, function (dataOffset, maxScroll) {
         setDataOffset(dataOffset);
         setMaxScroll(maxScroll);
@@ -2966,7 +3089,7 @@ var Sheet = React.forwardRef(function (props, ref) {
   useClipboardPaste(textAreaRef, selection, changeSelection, props.onChange, cellReadOnly);
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
 
-  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, startEditingCell, commitEditingCell, setKnobArea, setDragOffset, setDropTarget, changeSelection, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange),
+  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange, props.dontChangeSelectionOnOrderChange),
       mouseHandlers = _useMouse.mouseHandlers,
       knobPosition = _useMouse.knobPosition;
 
@@ -2984,12 +3107,12 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
 
     var animationFrameId = window.requestAnimationFrame(function () {
-      hitmapRef.current = renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, dataOffset);
+      hitmapRef.current = renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset);
     });
     return function () {
       window.cancelAnimationFrame(animationFrameId);
     };
-  }, [cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, dataOffset]);
+  }, [cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset]);
 
   var onKeyDown = function onKeyDown(e) {
     if (e.key === 'Escape') {
@@ -3105,9 +3228,9 @@ var Sheet = React.forwardRef(function (props, ref) {
     e.preventDefault();
   };
 
-  var _useState11 = React.useState(''),
-      lastEditKey = _useState11[0],
-      setLastEditKey = _useState11[1];
+  var _useState12 = React.useState(''),
+      lastEditKey = _useState12[0],
+      setLastEditKey = _useState12[1];
 
   var editTextPosition = ORIGIN;
   var editTextWidth = 0;