sheet-happens 0.0.36 → 0.0.38

package/dist/index.js

@@ -78,7 +78,7 @@ var MAX_SEARCHABLE_INDEX = 65536;
 var MAX_XY = [MAX_SEARCHABLE_INDEX, MAX_SEARCHABLE_INDEX];
 var COLORS = {
   selectionBorder: '#1a66ff',
-  selectionBackground: '#e8f0ff',
+  selectionBackground: '#d8e6ff80',
   gridLine: '#0000001f',
   dragGhost: '#1a66ff30',
   dropTarget: '#1a66ff',
@@ -88,7 +88,10 @@ var COLORS = {
   headerActive: '#e8f0ff',
   headerActiveText: '#1a66ff',
   headerSelected: '#1a66ff',
-  headerSelectedText: '#ffffff'
+  headerSelectedGroup: '#1a66ff70',
+  headerSelectedText: '#ffffff',
+  headerSelectedGroupText: '#ffffff',
+  shadowColor: '#000000'
 };
 var SIZES = {
   knobArea: 6,
@@ -98,7 +101,9 @@ var SIZES = {
   minimumHeight: 22,
   resizeZone: 4,
   scrollZone: 50,
-  scrollSpeed: 30
+  scrollSpeed: 30,
+  shadowBlur: 12,
+  shadowOpacity: 0.05
 };
 var DEFAULT_CELL_STYLE = {
   textAlign: 'left',
@@ -129,11 +134,15 @@ 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',
-  'ArrowUp': 'up',
-  'ArrowDown': 'down'
+  ArrowRight: 'right',
+  ArrowLeft: 'left',
+  ArrowUp: 'up',
+  ArrowDown: 'down'
 };
 
 var clamp = function clamp(x, min, max) {
@@ -176,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];
@@ -200,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],
@@ -251,39 +307,86 @@ 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 _selection$13 = selection[0],
-      left = _selection$13[0],
-      top = _selection$13[1],
-      _selection$14 = selection[1],
-      right = _selection$14[0],
-      bottom = _selection$14[1];
+  var anchor = selection[0],
+      head = selection[1];
+  return [minXY(anchor, head), maxXY(anchor, head)];
+};
+var orientSelection = function orientSelection(normalized, to) {
+  var _normalized$ = normalized[0],
+      left = _normalized$[0],
+      top = _normalized$[1],
+      _normalized$2 = normalized[1],
+      right = _normalized$2[0],
+      bottom = _normalized$2[1];
+  var anchor = to[0],
+      head = to[1];
+  var ax = anchor[0],
+      ay = anchor[1];
+  var hx = head[0],
+      hy = head[1];
+  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]];
+};
 
-  if (left > right) {
-    var _ref = [right, left];
-    left = _ref[0];
-    right = _ref[1];
-  }
+var LIMIT = 1000;
+
+var scanGroup = function scanGroup(keys, index, direction, matchKeys) {
+  var i = 1;
+  var limit = direction > 0 ? LIMIT : Math.min(LIMIT, index + 1);
 
-  if (top > bottom) {
-    var _ref2 = [bottom, top];
-    top = _ref2[0];
-    bottom = _ref2[1];
+  for (; i < limit; i++) {
+    var key = keys(index + i * direction);
+    if (key == null || !matchKeys.has(key)) break;
   }
 
-  return [[left, top], [right, bottom]];
+  return index + (i - 1) * direction;
+};
+
+var expandSelectionToRowOrColumnGroups = function expandSelectionToRowOrColumnGroups(selection, groupKeys, matchKeys, coordinate) {
+  if (!matchKeys) return selection;
+
+  var _normalizeSelection = normalizeSelection(selection),
+      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, groupKeys) {
+  var before = groupKeys(index - 1);
+  var after = groupKeys(index);
+  return before != null && after != null && before === after;
 };
 
 var createRowOrColumnProp = function createRowOrColumnProp(rowColProp, defaultValue) {
@@ -429,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, 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];
@@ -579,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;
 
@@ -611,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),
@@ -626,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;
             }
           }
@@ -667,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;
 
@@ -675,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);
 
@@ -691,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;
             }
           }
@@ -765,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]);
+  }, [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;
 
@@ -795,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);
@@ -814,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]]);
+        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));
         }
@@ -828,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));
+
+        if (!_insideSelection && !_insideGroup) {
+          var _preceding = _indices4.filter(function (i) {
+            return i < cellY;
+          });
 
-          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[minX, _order], [maxX, _order + maxY - minY]]);
+          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));
         }
@@ -857,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,
@@ -903,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;
 
@@ -919,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;
 
@@ -927,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;
               }
@@ -954,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;
 
@@ -962,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;
               }
@@ -1055,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);
@@ -1091,6 +1253,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         var _cellX = pixelToColumn(Math.max(_x, getIndentX()), 0.5);
 
         var insideSelection = _cellX >= minX && _cellX <= maxX + 1;
+        var insideGroup = isBoundaryInsideGroup(_cellX, columnGroupKeys);
         var _anchor3 = columnDrag.anchor,
             _scroll5 = columnDrag.scroll;
         var shift = _x - _anchor3;
@@ -1099,7 +1262,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
             _currentScroll2 = _getScrollPosition7[0];
 
         onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([shift + _currentScroll2 - _scroll5, 0]);
-        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(insideSelection ? null : [[_cellX, -1], [_cellX, -1]]);
+        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(insideSelection || insideGroup ? null : [[_cellX, -1], [_cellX, -1]]);
       }
 
       if (rowDrag) {
@@ -1107,6 +1270,8 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
         var _insideSelection2 = _cellY >= minY && _cellY <= maxY + 1;
 
+        var _insideGroup2 = isBoundaryInsideGroup(_cellY, rowGroupKeys);
+
         var _anchor4 = rowDrag.anchor,
             _scroll6 = rowDrag.scroll;
 
@@ -1116,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 ? 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]);
+  }, [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();
@@ -1183,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;
@@ -2011,6 +2176,8 @@ var makeIntMap = function makeIntMap(initialSize) {
 };
 
 var resolveSheetStyle = function resolveSheetStyle(sheetStyle) {
+  var _sheetStyle$shadowBlu, _sheetStyle$shadowOpa, _sheetStyle$shadowCol;
+
   return {
     freezeColumns: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeColumns) || 0,
     freezeRows: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeRows) || 0,
@@ -2019,7 +2186,10 @@ var resolveSheetStyle = function resolveSheetStyle(sheetStyle) {
     hideGridlines: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideGridlines) || false,
     hideScrollBars: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideScrollBars) || false,
     columnHeaderHeight: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideColumnHeaders ? 1 : SIZES.headerHeight,
-    rowHeaderWidth: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideRowHeaders ? 1 : SIZES.headerWidth
+    rowHeaderWidth: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideRowHeaders ? 1 : SIZES.headerWidth,
+    shadowBlur: (_sheetStyle$shadowBlu = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowBlur) != null ? _sheetStyle$shadowBlu : SIZES.shadowBlur,
+    shadowOpacity: (_sheetStyle$shadowOpa = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowOpacity) != null ? _sheetStyle$shadowOpa : SIZES.shadowOpacity,
+    shadowColor: (_sheetStyle$shadowCol = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowColor) != null ? _sheetStyle$shadowCol : COLORS.shadowColor
   };
 };
 var resolveCellStyle = function resolveCellStyle(optionalStyle, defaultStyle) {
@@ -2041,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;
@@ -2051,11 +2221,16 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
       rowHeaderWidth = sheetStyle.rowHeaderWidth,
       columnHeaderHeight = sheetStyle.columnHeaderHeight,
       freezeColumns = sheetStyle.freezeColumns,
-      freezeRows = sheetStyle.freezeRows;
+      freezeRows = sheetStyle.freezeRows,
+      shadowBlur = sheetStyle.shadowBlur,
+      shadowColor = sheetStyle.shadowColor,
+      shadowOpacity = sheetStyle.shadowOpacity;
   var columns = visibleCells.columns,
       rows = visibleCells.rows;
   var columnToPixel = cellLayout.columnToPixel,
-      rowToPixel = cellLayout.rowToPixel;
+      rowToPixel = cellLayout.rowToPixel,
+      columnToAbsolute = cellLayout.columnToAbsolute,
+      rowToAbsolute = cellLayout.rowToAbsolute;
   var clickables = [];
   var freeze = [freezeColumns, freezeRows];
   var indent = [rowHeaderWidth, columnHeaderHeight];
@@ -2063,12 +2238,13 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
   context.clearRect(0, 0, width, height);
   context.fillStyle = 'white';
   context.fillRect(0, 0, width, height);
+  context.shadowColor = '#00000080';
 
   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);
 
@@ -2142,15 +2318,15 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
 
   var drawGridLineX = function drawGridLineX(x, height) {
     context.beginPath();
-    context.moveTo(x - .5, 0);
-    context.lineTo(x - .5, height);
+    context.moveTo(x - 0.5, 0);
+    context.lineTo(x - 0.5, height);
     context.stroke();
   };
 
   var drawGridLineY = function drawGridLineY(y, width) {
     context.beginPath();
-    context.moveTo(0, y - .5);
-    context.lineTo(width, y - .5);
+    context.moveTo(0, y - 0.5);
+    context.lineTo(width, y - 0.5);
     context.stroke();
   };
 
@@ -2158,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);
   }
@@ -2191,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);
 
@@ -2215,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);
@@ -2294,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;
@@ -2330,13 +2529,38 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
     context.strokeRect(_left6 - 1, _top6 - 1, _right6 - _left6, _bottom6 - _top6);
   }
 
+  var scrollX = dataOffset[0],
+      scrollY = dataOffset[1];
+  var hasRowShadow = freezeRows > 0 && scrollY > 0;
+  var hasColumnShadow = freezeColumns > 0 && scrollX > 0;
+
+  if (hasRowShadow || hasColumnShadow) {
+    if (hasRowShadow) {
+      var h = columnHeaderHeight + rowToAbsolute(freezeRows);
+      var gradient = context.createLinearGradient(0, h, 0, h + shadowBlur);
+      halfShadowGradient(gradient, shadowColor, shadowOpacity);
+      context.fillStyle = gradient;
+      context.fillRect(0, h, width, shadowBlur);
+    }
+
+    if (hasColumnShadow) {
+      var w = rowHeaderWidth + columnToAbsolute(freezeColumns);
+
+      var _gradient = context.createLinearGradient(w, 0, w + shadowBlur, 0);
+
+      halfShadowGradient(_gradient, shadowColor, shadowOpacity);
+      context.fillStyle = _gradient;
+      context.fillRect(w, 0, shadowBlur, height);
+    }
+  }
+
   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);
 
@@ -2386,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;
@@ -2595,8 +2819,27 @@ var excelHeaderString = function excelHeaderString(num) {
   return s || '';
 };
 
+var halfShadowGradient = function halfShadowGradient(gradient, rgb, opacity) {
+  var hex = function hex(x) {
+    return ('0' + Math.round(x).toString(16)).slice(-2);
+  };
+
+  var ease = function ease(x) {
+    return 1.0 - Math.sin(x * Math.PI / 2);
+  };
+
+  var adjust = function adjust(x) {
+    return 1.0 - Math.pow(1.0 - x, 2.2);
+  };
+
+  for (var i = 0; i <= 16; ++i) {
+    var f = i / 16;
+    gradient.addColorStop(f, rgb + hex(adjust(opacity * ease(f) * 0.5) * 255));
+  }
+};
+
 var Sheet = React.forwardRef(function (props, ref) {
-  var _props$selection, _props$secondarySelec, _props$inputComponent;
+  var _props$selection, _props$secondarySelec, _props$cacheLayout, _props$inputComponent;
 
   var canvasRef = React.useRef(null);
   var overlayRef = React.useRef(null);
@@ -2623,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(NO_CELL),
-      editCell = _useState7[0],
-      setEditCell = _useState7[1];
+  var _useState7 = React.useState(null),
+      dropTarget = _useState7[0],
+      setDropTarget = _useState7[1];
 
-  var _useState8 = React.useState(selectionProp),
-      lastSelectionProp = _useState8[0],
-      setLastSelectionProp = _useState8[1];
+  var _useState8 = React.useState(NO_CELL),
+      editCell = _useState8[0],
+      setEditCell = _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,
@@ -2680,6 +2927,12 @@ var Sheet = React.forwardRef(function (props, ref) {
   var canOrderRow = React.useMemo(function () {
     return createRowOrColumnProp(props.canOrderRow, true);
   }, [props.canOrderRow]);
+  var rowGroupKeys = React.useMemo(function () {
+    return createRowOrColumnProp(props.rowGroupKeys, null);
+  }, [props.rowGroupKeys]);
+  var columnGroupKeys = React.useMemo(function () {
+    return createRowOrColumnProp(props.columnGroupKeys, null);
+  }, [props.columnGroupKeys]);
   var cellReadOnly = React.useMemo(function () {
     return createCellProp(props.readOnly, false);
   }, [props.readOnly]);
@@ -2702,22 +2955,38 @@ 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],
       editCellY = editCell[1];
   var editMode = editCellX !== -1 && editCellY !== -1;
+  var shouldCacheLayout = ((_props$cacheLayout = props.cacheLayout) != null ? _props$cacheLayout : false) !== false;
+  var layoutVersion = typeof props.cacheLayout === 'number' ? props.cacheLayout : 0;
   var columnLayout = React.useMemo(function () {
     return makeLayoutCache(cellWidth);
-  }, [props.cacheLayout ? null : cellWidth]);
+  }, [shouldCacheLayout ? layoutVersion : cellWidth]);
   var rowLayout = React.useMemo(function () {
     return makeLayoutCache(cellHeight);
-  }, [props.cacheLayout ? null : cellHeight]);
+  }, [shouldCacheLayout ? layoutVersion : cellHeight]);
   React.useMemo(function () {
-    if (!props.cacheLayout) return;
+    if (!shouldCacheLayout) return;
     columnLayout.setSizer(cellWidth);
     rowLayout.setSizer(cellHeight);
-  }, [props.cacheLayout, cellWidth, cellHeight]);
+  }, [shouldCacheLayout, layoutVersion, cellWidth, cellHeight]);
   var freezeColumns = sheetStyle.freezeColumns,
       freezeRows = sheetStyle.freezeRows,
       rowHeaderWidth = sheetStyle.rowHeaderWidth,
@@ -2747,7 +3016,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
 
     if (!isSameSelection(selection, newSelection)) {
-      setSelection(newSelection);
+      setSelection(validateSelection(newSelection));
     }
 
     var overlay = overlayRef.current;
@@ -2820,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, 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;
 
@@ -2838,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') {
@@ -2959,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;
@@ -3019,8 +3288,8 @@ var Sheet = React.forwardRef(function (props, ref) {
     borderBottom: '1px solid #ddd'
   };
   var canvasStyles = {
-    width: 'calc(100% - 14px)',
-    height: 'calc(100% - 15px)',
+    width: canvasWidth,
+    height: canvasHeight,
     outline: '1px solid #ddd'
   };
 
@@ -3028,7 +3297,6 @@ var Sheet = React.forwardRef(function (props, ref) {
     delete canvasStyles['outline'];
     delete overlayDivStyles['borderBottom'];
     overlayDivClassName = '';
-    canvasStyles.width = 'calc(100%)';
   }
 
   var renderedInside = React.useMemo(function () {