sheet-happens 0.0.36 → 0.0.37

package/dist/constants.d.ts

@@ -22,6 +22,7 @@ export declare const COLORS: {
     headerActiveText: string;
     headerSelected: string;
     headerSelectedText: string;
+    shadowColor: string;
 };
 export declare const SIZES: {
     knobArea: number;
@@ -32,6 +33,8 @@ export declare const SIZES: {
     resizeZone: number;
     scrollZone: number;
     scrollSpeed: number;
+    shadowBlur: number;
+    shadowOpacity: number;
 };
 export declare const DEFAULT_CELL_STYLE: Required<Style>;
 export declare const DEFAULT_COLUMN_HEADER_STYLE: Required<Style>;

package/dist/coordinate.d.ts

@@ -16,3 +16,4 @@ export declare const isCellSelection: (selection: Rectangle) => boolean;
 export declare const isEmptySelection: (selection: Rectangle) => boolean;
 export declare const isPointInsideSelection: (selection: Rectangle, point: XY) => boolean;
 export declare const normalizeSelection: (selection: Rectangle) => Rectangle;
+export declare const orientSelection: (normalized: Rectangle, to: Rectangle) => Rectangle;

package/dist/group.d.ts

@@ -0,0 +1,4 @@
+import { Rectangle, RowOrColumnPropertyFunction } from './types';
+export declare const expandSelectionToColumnGroups: (selection: Rectangle, columnGroupKeys: RowOrColumnPropertyFunction<string | number | null>) => Rectangle;
+export declare const expandSelectionToRowGroups: (selection: Rectangle, rowGroupKeys: RowOrColumnPropertyFunction<string | number | null>) => Rectangle;
+export declare const isBoundaryInsideGroup: (index: number, rowOrColumnGroupKeys: RowOrColumnPropertyFunction<string | number | null>) => boolean;

package/dist/index.css

@@ -1,18 +1,21 @@
 ._PxIi8::-webkit-scrollbar {
-  -webkit-appearance: none;
+    -webkit-appearance: none;
 }
 ._PxIi8::-webkit-scrollbar:vertical {
-  width: 13px;
+    width: 13px;
 }
 ._PxIi8::-webkit-scrollbar:horizontal {
-  height: 13px;
+    height: 13px;
+}
+._PxIi8::-webkit-scrollbar-corner {
+    background: #fff;
 }
 ._PxIi8::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background-color: #c1c1c1;
-  border: 2px solid #fff;
+    border-radius: 8px;
+    background-color: #c1c1c1;
+    border: 2px solid #fff;
 }
 ._PxIi8::-webkit-scrollbar-track {
-  background-color: #fff;
-  border-radius: 0px;
-}
+    background-color: #fff;
+    border-radius: 0px;
+}

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,8 @@ var COLORS = {
   headerActive: '#e8f0ff',
   headerActiveText: '#1a66ff',
   headerSelected: '#1a66ff',
-  headerSelectedText: '#ffffff'
+  headerSelectedText: '#ffffff',
+  shadowColor: '#000000'
 };
 var SIZES = {
   knobArea: 6,
@@ -98,7 +99,9 @@ var SIZES = {
   minimumHeight: 22,
   resizeZone: 4,
   scrollZone: 50,
-  scrollSpeed: 30
+  scrollSpeed: 30,
+  shadowBlur: 12,
+  shadowOpacity: 0.05
 };
 var DEFAULT_CELL_STYLE = {
   textAlign: 'left',
@@ -130,10 +133,10 @@ var HEADER_SELECTED_STYLE = {
   color: COLORS.headerSelectedText
 };
 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) {
@@ -264,26 +267,88 @@ var isPointInsideSelection = function isPointInsideSelection(selection, point) {
   return x >= left && x <= right && y >= top && y <= bottom;
 };
 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];
-
-  if (left > right) {
-    var _ref = [right, left];
-    left = _ref[0];
-    right = _ref[1];
-  }
+  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]];
+};
+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) * (left - right || 1) < 0;
+  var swapY = (ay - hy || 1) * (top - bottom || 1) < 0;
+  return [[swapX ? right : left, swapY ? bottom : top], [swapX ? left : right, swapY ? top : bottom]];
+};
 
-  if (top > bottom) {
-    var _ref2 = [bottom, top];
-    top = _ref2[0];
-    bottom = _ref2[1];
+var LIMIT = 1000;
+
+var scanGroup = function scanGroup(keys, index, direction, match) {
+  if (match == null) return index;
+  var i = 0;
+  var limit = direction > 0 ? LIMIT : Math.min(LIMIT, index + 1);
+
+  for (; i < limit; i++) {
+    if (keys(index + i * direction) !== match) break;
   }
 
-  return [[left, top], [right, bottom]];
+  return index + (i - 1) * direction;
+};
+
+var expandSelectionToColumnGroups = function expandSelectionToColumnGroups(selection, columnGroupKeys) {
+  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]];
+  var oriented = orientSelection(expanded, selection);
+  return oriented;
+};
+var isBoundaryInsideGroup = function isBoundaryInsideGroup(index, rowOrColumnGroupKeys) {
+  var before = rowOrColumnGroupKeys(index - 1);
+  var after = rowOrColumnGroupKeys(index);
+  return before != null && after != null && before === after;
 };
 
 var createRowOrColumnProp = function createRowOrColumnProp(rowColProp, defaultValue) {
@@ -429,7 +494,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, onEdit, onCommit, onKnobAreaChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange) {
   var _useState = React.useState(null),
       hitTarget = _useState[0],
       setHitTarget = _useState[1];
@@ -765,7 +830,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]);
   var onPointerUp = React.useCallback(function (e) {
     var _getMouseHit;
 
@@ -817,7 +882,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
         if (!insideSelection) {
           var order = cellX > minX ? cellX - indices.length : cellX;
-          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[order, minY], [order + maxX - minX, maxY]]);
+          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[order, minY], [order + maxX - minX, maxY]], false, false, true);
           onColumnOrderChange === null || onColumnOrderChange === void 0 ? void 0 : onColumnOrderChange(indices, order);
           onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(Math.min(minX, order));
         }
@@ -831,7 +896,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         if (!_insideSelection) {
           var _order = cellY > minY ? cellY - _indices4.length : cellY;
 
-          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[minX, _order], [maxX, _order + maxY - minY]]);
+          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[minX, _order], [maxX, _order + maxY - minY]], false, false, true);
           onRowOrderChange === null || onRowOrderChange === void 0 ? void 0 : onRowOrderChange(_indices4, _order);
           onInvalidateRow === null || onInvalidateRow === void 0 ? void 0 : onInvalidateRow(Math.min(minY, _order));
         }
@@ -1091,6 +1156,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 +1165,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 +1173,8 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
         var _insideSelection2 = _cellY >= minY && _cellY <= maxY + 1;
 
+        var _insideGroup = isBoundaryInsideGroup(_cellY, rowGroupKeys);
+
         var _anchor4 = rowDrag.anchor,
             _scroll6 = rowDrag.scroll;
 
@@ -1116,10 +1184,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 || _insideGroup ? null : [[-1, _cellY], [-1, _cellY]]);
       }
     }
-  }, [getMousePosition, getScrollPosition, getMouseHit, onCellWidthChange, onCellHeightChange]);
+  }, [getMousePosition, getScrollPosition, getMouseHit, onCellWidthChange, onCellHeightChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onKnobAreaChange, onInvalidateRow, onInvalidateColumn]);
   var onDoubleClick = React.useCallback(function (e) {
     var pixelToCell = ref.current.cellLayout.pixelToCell;
     e.preventDefault();
@@ -2011,6 +2079,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 +2089,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) {
@@ -2051,11 +2124,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,6 +2141,7 @@ 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;
@@ -2142,15 +2221,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();
   };
 
@@ -2330,6 +2409,31 @@ 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;) {
@@ -2595,8 +2699,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);
@@ -2680,6 +2803,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]);
@@ -2707,17 +2836,19 @@ var Sheet = React.forwardRef(function (props, ref) {
   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,
@@ -2737,7 +2868,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
   }, [visibleCells, props.onScrollChange]);
 
-  var changeSelection = function changeSelection(newSelection, scrollTo, toHead) {
+  var changeSelection = function changeSelection(newSelection, scrollTo, toHead, dragOperation) {
     if (scrollTo === void 0) {
       scrollTo = true;
     }
@@ -2746,6 +2877,20 @@ 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);
     }
@@ -2754,8 +2899,9 @@ var Sheet = React.forwardRef(function (props, ref) {
     if (!overlay) return;
 
     if (scrollTo) {
-      var anchor = newSelection[0],
-          head = newSelection[1];
+      var _newSelection = newSelection,
+          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);
@@ -2820,7 +2966,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, 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),
       mouseHandlers = _useMouse.mouseHandlers,
       knobPosition = _useMouse.knobPosition;
 
@@ -3019,8 +3165,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 +3174,6 @@ var Sheet = React.forwardRef(function (props, ref) {
     delete canvasStyles['outline'];
     delete overlayDivStyles['borderBottom'];
     overlayDivClassName = '';
-    canvasStyles.width = 'calc(100%)';
   }
 
   var renderedInside = React.useMemo(function () {