sheet-happens 0.0.52 → 0.0.53

package/dist/index.js

@@ -648,7 +648,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, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, getAutoSizeHeight, onEdit, onCommit, onKnobAreaChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onFocusChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
+var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, getAutoSizeHeight, onEdit, onCommit, onKnobAreaChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onFocusChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
   var _useState = React.useState(null),
     columnResize = _useState[0],
     setColumnResize = _useState[1];
@@ -664,18 +664,21 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
   var _useState5 = React.useState(null),
     hitTestDown = _useState5[0],
     setHitTestDown = _useState5[1];
-  var _useState6 = React.useState(false),
-    draggingKnob = _useState6[0],
-    setDraggingKnob = _useState6[1];
+  var _useState6 = React.useState(null),
+    autoScroll = _useState6[0],
+    setAutoScroll = _useState6[1];
   var _useState7 = React.useState(false),
-    draggingSelection = _useState7[0],
-    setDraggingSelection = _useState7[1];
+    draggingKnob = _useState7[0],
+    setDraggingKnob = _useState7[1];
   var _useState8 = React.useState(false),
-    draggingRowSelection = _useState8[0],
-    setDraggingRowSelection = _useState8[1];
+    draggingSelection = _useState8[0],
+    setDraggingSelection = _useState8[1];
   var _useState9 = React.useState(false),
-    draggingColumnSelection = _useState9[0],
-    setDraggingColumnSelection = _useState9[1];
+    draggingRowSelection = _useState9[0],
+    setDraggingRowSelection = _useState9[1];
+  var _useState10 = React.useState(false),
+    draggingColumnSelection = _useState10[0],
+    setDraggingColumnSelection = _useState10[1];
   var hideRowHeaders = sheetStyle.hideRowHeaders,
     hideColumnHeaders = sheetStyle.hideColumnHeaders;
   var cellToPixel = cellLayout.cellToPixel,
@@ -699,6 +702,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
   }, [selection, cellToPixel, version]);
   var refState = {
     selection: selection,
+    dataOffset: dataOffset,
     knobArea: knobArea,
     editMode: editMode,
     editData: editData,
@@ -717,27 +721,29 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
   };
   var ref = React.useRef(refState);
   ref.current = refState;
-  var getMousePosition = React.useCallback(function (e) {
+  var getMousePosition = React.useCallback(function (e, strict) {
     if (!e.target || !(e.target instanceof Element)) {
       return null;
     }
     var rect = e.target.getBoundingClientRect();
     var xy = [e.clientX - rect.left, e.clientY - rect.top];
-    if (xy[0] > e.target.clientWidth || xy[1] > e.target.clientHeight) {
+    if (strict && (xy[0] > e.target.clientWidth || xy[1] > e.target.clientHeight)) {
       return null;
     }
     return xy;
   }, []);
-  var getScrollPosition = React.useCallback(function (e) {
+  var getMouseOutOfBounds = React.useCallback(function (e, allowX, allowY) {
     if (!e.target || !(e.target instanceof Element)) {
-      return [0, 0];
+      return null;
     }
-    var _e$target = e.target,
-      scrollLeft = _e$target.scrollLeft,
-      scrollTop = _e$target.scrollTop;
-    var xy = [scrollLeft, scrollTop];
-    return xy;
-  }, []);
+    var rect = e.target.getBoundingClientRect();
+    var xy = [e.clientX - rect.left, e.clientY - rect.top];
+    var indentX = cellLayout.getIndentX();
+    var indentY = cellLayout.getIndentY();
+    var xSign = allowX ? xy[0] < indentX ? -1 : xy[0] > e.target.clientWidth ? 1 : 0 : 0;
+    var ySign = allowY ? xy[1] < indentY ? -1 : xy[1] > e.target.clientHeight ? 1 : 0 : 0;
+    return xSign || ySign ? [xSign, ySign] : null;
+  }, [cellLayout]);
   var getMouseHit = React.useCallback(function (xy) {
     var hitmap = hitmapRef.current;
     if (!hitmap) return null;
@@ -754,9 +760,10 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     window.document.body.style.cursor = 'auto';
   }, []);
   var onPointerDown = React.useCallback(function (e) {
-    var _e$target2, _e$target2$setPointer;
+    var _e$target, _e$target$setPointerC;
     var _ref$current = ref.current,
       selection = _ref$current.selection,
+      dataOffset = _ref$current.dataOffset,
       _ref$current$cellLayo = _ref$current.cellLayout,
       columnToPixel = _ref$current$cellLayo.columnToPixel,
       rowToPixel = _ref$current$cellLayo.rowToPixel,
@@ -769,8 +776,8 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       knobPosition = _ref$current.knobPosition;
     onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
     if (e.button !== 0) return;
-    (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : (_e$target2$setPointer = _e$target2.setPointerCapture) === null || _e$target2$setPointer === void 0 ? void 0 : _e$target2$setPointer.call(_e$target2, e.pointerId);
-    var xy = getMousePosition(e);
+    (_e$target = e.target) === null || _e$target === void 0 ? void 0 : (_e$target$setPointerC = _e$target.setPointerCapture) === null || _e$target$setPointerC === void 0 ? void 0 : _e$target$setPointerC.call(_e$target, e.pointerId);
+    var xy = getMousePosition(e, true);
     if (!xy) return;
     var hitTarget = getMouseHit(xy);
     setHitTestDown(hitTarget);
@@ -820,11 +827,9 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
                 dragIndices = seq(dragEnd - dragStart + 1, dragStart);
               }
               var size = columnToPixel(maxX, 1) - columnToPixel(minX);
-              var _getScrollPosition = getScrollPosition(e),
-                scroll = _getScrollPosition[0];
               setColumnDrag({
-                anchor: x,
-                scroll: scroll,
+                anchor: xy,
+                offset: dataOffset,
                 size: size,
                 indices: indices
               });
@@ -844,11 +849,9 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
             var asGroup = isColumnSelection(selection) && maxX === _index;
             var _indices = asGroup ? selectedColumns : [_index];
             var _size = asGroup ? columnToPixel(maxX, 1) - columnToPixel(minX) : columnToPixel(_index, 1) - columnToPixel(_index);
-            var _getScrollPosition2 = getScrollPosition(e),
-              _scroll = _getScrollPosition2[0];
             setColumnResize({
-              anchor: x,
-              scroll: _scroll,
+              anchor: xy,
+              offset: dataOffset,
               size: _size,
               indices: _indices
             });
@@ -890,11 +893,9 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
                 _dragIndices = seq(_dragEnd - _dragStart + 1, _dragStart);
               }
               var _size2 = rowToPixel(maxY, 1) - rowToPixel(minY);
-              var _getScrollPosition3 = getScrollPosition(e),
-                _scroll2 = _getScrollPosition3[1];
               setRowDrag({
-                anchor: y,
-                scroll: _scroll2,
+                anchor: xy,
+                offset: dataOffset,
                 size: _size2,
                 indices: _indices2
               });
@@ -914,11 +915,9 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
             var _asGroup = isRowSelection(selection) && maxY === _index3;
             var _indices3 = _asGroup ? selectedRows : [_index3];
             var _size3 = _asGroup ? rowToPixel(maxY, 1) - rowToPixel(minY) : rowToPixel(_index3, 1) - rowToPixel(_index3);
-            var _getScrollPosition4 = getScrollPosition(e),
-              _scroll3 = _getScrollPosition4[1];
             setRowResize({
-              anchor: y,
-              scroll: _scroll3,
+              anchor: xy,
+              offset: dataOffset,
               size: _size3,
               indices: _indices3
             });
@@ -958,7 +957,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, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups]);
+  }, [getMousePosition, getMouseHit, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onKnobAreaChange, onSelectionChange, onCommit, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, dontCommitEditOnSelectionChange, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups]);
   var onPointerUp = React.useCallback(function (e) {
     var _ref$current2 = ref.current,
       knobArea = _ref$current2.knobArea,
@@ -993,8 +992,8 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         _normalizeSelection2$2 = _normalizeSelection2[1],
         maxX = _normalizeSelection2$2[0],
         maxY = _normalizeSelection2$2[1];
-      var cellX = Math.max(0, pixelToColumn(x, 0.5));
-      var cellY = Math.max(0, pixelToRow(y, 0.5));
+      var cellX = pixelToColumn(x, 0.5);
+      var cellY = pixelToRow(y, 0.5);
       if (columnDrag) {
         var indices = columnDrag.indices;
         var insideSelection = cellX >= minX && cellX <= maxX + 1;
@@ -1032,10 +1031,12 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     setColumnDrag(null);
     setRowResize(null);
     setRowDrag(null);
+    setAutoScroll(null);
   }, [getMousePosition, getMouseHit, onChange, onSelectionChange, onKnobAreaChange, onDropTargetChange, onColumnOrderChange, onRowOrderChange, dontChangeSelectionOnOrderChange]);
   var onPointerMove = React.useCallback(function (e) {
     var _ref$current3 = ref.current,
       selection = _ref$current3.selection,
+      dataOffset = _ref$current3.dataOffset,
       visibleCells = _ref$current3.visibleCells,
       knobPosition = _ref$current3.knobPosition,
       columnResize = _ref$current3.columnResize,
@@ -1047,6 +1048,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       draggingColumnSelection = _ref$current3.draggingColumnSelection,
       draggingRowSelection = _ref$current3.draggingRowSelection,
       _ref$current3$cellLay = _ref$current3.cellLayout,
+      cellToPixel = _ref$current3$cellLay.cellToPixel,
       columnToPixel = _ref$current3$cellLay.columnToPixel,
       rowToPixel = _ref$current3$cellLay.rowToPixel,
       pixelToCell = _ref$current3$cellLay.pixelToCell,
@@ -1055,6 +1057,11 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       getIndentX = _ref$current3$cellLay.getIndentX,
       getIndentY = _ref$current3$cellLay.getIndentY;
     window.document.body.style.cursor = 'auto';
+    var isDraggingX = !!columnResize || !!columnDrag || draggingColumnSelection || draggingSelection || draggingKnob;
+    var isDraggingY = !!rowResize || !!rowDrag || draggingRowSelection || draggingSelection || draggingKnob;
+    var isDragging = isDraggingX || isDraggingY;
+    var outOfBounds = getMouseOutOfBounds(e, isDraggingX, isDraggingY);
+    if (isDragging) setAutoScroll(outOfBounds);
     var xy = getMousePosition(e);
     if (!xy) return;
     var hitTarget = getMouseHit(xy);
@@ -1082,7 +1089,9 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       _normalizeSelection3$2 = _normalizeSelection3[1],
       maxX = _normalizeSelection3$2[0],
       maxY = _normalizeSelection3$2[1];
-    var isDragging = columnResize || columnDrag || rowResize || rowDrag || draggingRowSelection || draggingColumnSelection;
+    var getDragScrollOffset = function getDragScrollOffset(startOffset) {
+      return subXY(cellToPixel(dataOffset), cellToPixel(startOffset));
+    };
     if (!isDragging) {
       if (!hideColumnHeaders && y < getIndentY()) {
         if (onColumnOrderChange) {
@@ -1151,11 +1160,11 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       if (onCellWidthChange) {
         var size = columnResize.size,
           anchor = columnResize.anchor,
-          scroll = columnResize.scroll,
+          offset = columnResize.offset,
           indices = columnResize.indices;
-        var _getScrollPosition5 = getScrollPosition(e),
-          currentScroll = _getScrollPosition5[0];
-        var newWidth = Math.round(Math.max(size + x - anchor + scroll - currentScroll, SIZES.minimumWidth * indices.length));
+        var _getDragScrollOffset = getDragScrollOffset(offset),
+          scrollOffset = _getDragScrollOffset[0];
+        var newWidth = Math.round(Math.max(size + x - anchor[0] + scrollOffset, SIZES.minimumWidth * indices.length));
         onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(indices[0] - 1);
         onCellWidthChange(indices, indices.map(function (_) {
           return Math.round(newWidth / indices.length);
@@ -1167,11 +1176,11 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       if (onCellHeightChange) {
         var _size4 = rowResize.size,
           _anchor = rowResize.anchor,
-          _scroll4 = rowResize.scroll,
+          _offset = rowResize.offset,
           _indices5 = rowResize.indices;
-        var _getScrollPosition6 = getScrollPosition(e),
-          _currentScroll = _getScrollPosition6[1];
-        var newHeight = Math.round(Math.max(_size4 + y - _anchor + _scroll4 - _currentScroll, SIZES.minimumHeight * _indices5.length));
+        var _getDragScrollOffset2 = getDragScrollOffset(_offset),
+          _scrollOffset = _getDragScrollOffset2[1];
+        var newHeight = Math.round(Math.max(_size4 + y - _anchor[1] + _scrollOffset, SIZES.minimumHeight * _indices5.length));
         onInvalidateRow === null || onInvalidateRow === void 0 ? void 0 : onInvalidateRow(_indices5[0] - 1);
         onCellHeightChange(_indices5, _indices5.map(function (_) {
           return newHeight / _indices5.length;
@@ -1181,7 +1190,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     }
     if (draggingSelection) {
       var _anchor2 = selection[0];
-      var head = pixelToCell(xy);
+      var head = maxXY(dataOffset, pixelToCell(xy));
       var anchorX = _anchor2[0],
         anchorY = _anchor2[1];
       var headX = head[0],
@@ -1227,31 +1236,31 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       var _x = xy[0],
         _y = xy[1];
       if (columnDrag) {
-        var _cellX = Math.max(0, pixelToColumn(_x, 0.5));
+        var _cellX = pixelToColumn(_x, 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;
-        var _getScrollPosition7 = getScrollPosition(e),
-          _currentScroll2 = _getScrollPosition7[0];
-        onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([shift + _currentScroll2 - _scroll5, 0]);
+          _offset2 = columnDrag.offset;
+        var shift = _x - _anchor3[0];
+        var _getDragScrollOffset3 = getDragScrollOffset(_offset2),
+          _scrollOffset2 = _getDragScrollOffset3[0];
+        onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([shift + _scrollOffset2, 0]);
         onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(insideSelection || insideGroup ? null : [[_cellX, -1], [_cellX, -1]]);
       }
       if (rowDrag) {
-        var _cellY = Math.max(0, pixelToRow(_y, 0.5));
+        var _cellY = pixelToRow(_y, 0.5);
         var _insideSelection2 = _cellY >= minY && _cellY <= maxY + 1;
         var _insideGroup2 = isBoundaryInsideGroup(_cellY, rowGroupKeys);
         var _anchor4 = rowDrag.anchor,
-          _scroll6 = rowDrag.scroll;
-        var _shift = _y - _anchor4;
-        var _getScrollPosition8 = getScrollPosition(e),
-          _currentScroll3 = _getScrollPosition8[1];
-        onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, _shift + _currentScroll3 - _scroll6]);
+          _offset3 = rowDrag.offset;
+        var _shift = _y - _anchor4[1];
+        var _getDragScrollOffset4 = getDragScrollOffset(_offset3),
+          _scrollOffset3 = _getDragScrollOffset4[1];
+        onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, _shift + _scrollOffset3]);
         onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(_insideSelection2 || _insideGroup2 ? null : [[-1, _cellY], [-1, _cellY]]);
       }
     }
-  }, [getMousePosition, getScrollPosition, getMouseHit, onCellWidthChange, onCellHeightChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onKnobAreaChange, onInvalidateRow, onInvalidateColumn, columnGroupKeys, rowGroupKeys]);
+  }, [getMousePosition, getMouseOutOfBounds, getMouseHit, onCellWidthChange, onCellHeightChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onKnobAreaChange, onInvalidateRow, onInvalidateColumn, columnGroupKeys, rowGroupKeys]);
   var onClick = React.useCallback(function (e) {
     var xy = getMousePosition(e);
     if (!xy) return;
@@ -1369,6 +1378,23 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     });
     onRightClick === null || onRightClick === void 0 ? void 0 : onRightClick(event);
   }, [getMousePosition, onSelectionChange, onPointerMove, onRightClick]);
+  React.useLayoutEffect(function () {
+    if (!autoScroll) return;
+    var loop = function loop() {
+      var element = elementRef.current;
+      if (!element) return;
+      var x = autoScroll[0],
+        y = autoScroll[1];
+      var speed = 4;
+      element.scrollLeft += x * speed * 2;
+      element.scrollTop += y * speed;
+    };
+    var timer = setInterval(loop, 33);
+    loop();
+    return function () {
+      clearInterval(timer);
+    };
+  }, [elementRef, autoScroll]);
   var mouseHandlers = {
     onPointerLeave: onPointerLeave,
     onPointerDown: onPointerDown,
@@ -2224,7 +2250,8 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
       var rows = table.rows,
         payload = table.payload;
       var _normalizeSelection = normalizeSelection(selection),
-        min = _normalizeSelection[0];
+        min = _normalizeSelection[0],
+        max = _normalizeSelection[1];
       var minX = min[0],
         minY = min[1];
       var left = Math.max(0, minX);
@@ -2233,18 +2260,27 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
         return Math.max(a, b.length);
       }, 0);
       var height = rows.length;
-      var newSelection = [min, addXY(min, [width - 1, height - 1])];
+      var selectionSize = mulXY(addXY(subXY(max, min), [1, 1]), [1 / width, 1 / height]);
+      var repeatX = Math.max(1, Math.floor(selectionSize[0]));
+      var repeatY = Math.max(1, Math.floor(selectionSize[1]));
+      var newSelection = [min, addXY(min, [width * repeatX - 1, height * repeatY - 1])];
       return Promise.resolve(onPaste === null || onPaste === void 0 ? void 0 : onPaste(newSelection, rows, payload)).then(function (shouldPaste) {
         if (shouldPaste !== false) {
           var changes = rows.flatMap(function (row, j) {
-            return row.map(function (value, i) {
-              var x = left + i;
-              var y = top + j;
-              return !(cellReadOnly !== null && cellReadOnly !== void 0 && cellReadOnly(x, y)) ? {
-                x: x,
-                y: y,
-                value: value
-              } : null;
+            return row.flatMap(function (value, i) {
+              var cells = [];
+              for (var rx = 0; rx < repeatX; ++rx) {
+                for (var ry = 0; ry < repeatY; ++ry) {
+                  var x = left + i + rx * width;
+                  var y = top + j + ry * height;
+                  if (!(cellReadOnly !== null && cellReadOnly !== void 0 && cellReadOnly(x, y))) cells.push({
+                    x: x,
+                    y: y,
+                    value: value
+                  });
+                }
+              }
+              return cells;
             });
           }).filter(function (change) {
             return !!change;
@@ -2610,7 +2646,7 @@ var makeCellLayout = function makeCellLayout(freeze, offset, columns, rows) {
     var getStart = layout.getStart,
       lookupIndex = layout.lookupIndex;
     var indent = getStart(0);
-    if (pixel < indent) return -1;
+    if (pixel < indent) return 0;
     var frozen = getStart(freeze);
     if (pixel < frozen) {
       return lookupIndex(pixel, anchor);
@@ -3636,7 +3672,7 @@ var Sheet = React.forwardRef(function (props, ref) {
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
   var getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth, freezeColumns);
   var getAutoSizeHeight = useAutoSizeRow(visibleCells.columns, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight, freezeRows);
-  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, getAutoSizeHeight, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, setFocused, 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),
+  var _useMouse = useMouse(overlayRef, dataOffset, hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, getAutoSizeHeight, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, setFocused, 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;
   var _useKeyboard = useKeyboard(arrowKeyCommitMode, overlayRef, cellReadOnly, displayData, editCell, editMode, focused, rawSelection, selection, startEditingCell, commitEditingCell, cancelEditingCell, changeSelection, setFocused, onClipboardCopy, props.onChange),