sheet-happens 0.0.51 → 0.0.53

package/dist/autosize.d.ts

@@ -1,3 +1,3 @@
-import { RowOrColumnPropertyFunction, RowOrColumnPropertyStyledFunction, CellPropertyFunction, CellPropertyStyledFunction, CellContentType, Style } from './types';
-export declare const useAutoSizeColumn: (rows: number[], displayData: CellPropertyStyledFunction<CellContentType>, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, canvasWidth: number) => (x: number) => number;
-export declare const useAutoSizeRow: (columns: number[], displayData: CellPropertyStyledFunction<CellContentType>, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, cellWidth: RowOrColumnPropertyFunction<number>, canvasHeight: number) => (y: number) => number;
+import { RowOrColumnPropertyFunction, RowOrColumnPropertyStyledFunction, CellLayout, CellPropertyFunction, CellPropertyStyledFunction, CellContentType, Style } from './types';
+export declare const useAutoSizeColumn: (rows: number[], displayData: CellPropertyStyledFunction<CellContentType>, cellLayout: CellLayout, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, canvasWidth: number, frozenColumns: number) => (x: number) => number;
+export declare const useAutoSizeRow: (columns: number[], displayData: CellPropertyStyledFunction<CellContentType>, cellLayout: CellLayout, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, cellWidth: RowOrColumnPropertyFunction<number>, canvasHeight: number, frozenRows: number) => (y: number) => number;

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,
@@ -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,
@@ -2018,12 +2044,13 @@ var wrapText = function wrapText(context, text, style, itemAlign, xCoord, yCoord
   newline(n);
 };
 
-var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth) {
+var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth, frozenColumns) {
   var context = React.useMemo(function () {
     return document.createElement('canvas').getContext('2d');
   }, []);
   var getAutoSizeWidth = React.useCallback(function (x) {
     if (!context) return 0;
+    var viewWidth = canvasWidth - cellLayout.columnToAbsolute(x < frozenColumns ? 0 : frozenColumns);
     var getWidth = function getWidth(cellContent, style) {
       context.font = style.fontWeight + ' ' + style.fontSize + 'px ' + style.fontFamily;
       var inlineMargin = style.marginLeft + style.marginRight;
@@ -2067,22 +2094,23 @@ var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle,
         maxWidth = Math.max(maxWidth, getWidth(cellContent, style));
       }
     }
-    return Math.ceil(Math.min(canvasWidth, maxWidth));
-  }, [context, displayData, cellStyle, columnHeaders, columnHeaderStyle]);
+    return Math.ceil(Math.min(viewWidth, maxWidth));
+  }, [context, rows, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth, frozenColumns]);
   return getAutoSizeWidth;
 };
-var useAutoSizeRow = function useAutoSizeRow(columns, displayData, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight) {
+var useAutoSizeRow = function useAutoSizeRow(columns, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight, frozenRows) {
   var context = React.useMemo(function () {
     return document.createElement('canvas').getContext('2d');
   }, []);
   var getAutoSizeHeight = React.useCallback(function (y) {
     if (!context) return 0;
+    var viewHeight = canvasHeight - cellLayout.rowToAbsolute(y < frozenRows ? 0 : frozenRows);
     var measureTextHeight = function measureTextHeight(text, style, columnWidth) {
       var maxY = 0;
       var measureY = function measureY(_t, _x, y) {
         maxY = y + style.lineHeight;
       };
-      wrapText(context, text, style, undefined, 0, 0, columnWidth, canvasHeight, measureY);
+      wrapText(context, text, style, undefined, 0, 0, columnWidth, viewHeight, measureY);
       return maxY;
     };
     var getHeight = function getHeight(cellContent, style, columnWidth) {
@@ -2093,13 +2121,19 @@ var useAutoSizeRow = function useAutoSizeRow(columns, displayData, cellStyle, co
         return height + verticalMargin;
       } else if (typeof cellContent === 'object') {
         var _maxHeight = 0;
-        for (var _iterator3 = _createForOfIteratorHelperLoose(cellContent.items), _step3; !(_step3 = _iterator3()).done;) {
-          var item = _step3.value;
-          if (item.absolute) continue;
+        var flexLayout = resolveCellFlexLayout(context, cellContent, 0, 0, columnWidth, 0);
+        for (var _iterator3 = _createForOfIteratorHelperLoose(flexLayout), _step3; !(_step3 = _iterator3()).done;) {
+          var _step3$value = _step3.value,
+            box = _step3$value.box,
+            item = _step3$value.item;
           if (item.height != null) {
             _maxHeight = Math.max(_maxHeight, item.height);
           } else if (item.display === 'inline' && item.text != null) {
-            var _height = measureTextHeight(item.text.toString(), style, columnWidth);
+            var _box$ = box[0],
+              left = _box$[0],
+              _box$2 = box[1],
+              right = _box$2[0];
+            var _height = measureTextHeight(item.text.toString(), style, right - left);
             _maxHeight = Math.max(_maxHeight, _height);
           }
         }
@@ -2118,8 +2152,8 @@ var useAutoSizeRow = function useAutoSizeRow(columns, displayData, cellStyle, co
         maxHeight = Math.max(maxHeight, getHeight(cellContent, style, columnWidth));
       }
     }
-    return Math.ceil(Math.min(canvasHeight, maxHeight));
-  }, [context, displayData, cellStyle, cellWidth]);
+    return Math.ceil(Math.min(viewHeight, maxHeight));
+  }, [context, columns, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight, frozenRows]);
   return getAutoSizeHeight;
 };
 
@@ -2216,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);
@@ -2225,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;
@@ -2602,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);
@@ -3156,9 +3200,11 @@ var renderCell = function renderCell(context, imageRenderer, cellContent, style,
     var renderedFlex = resolveCellFlexLayout(context, cellContent, innerX, innerY, innerWidth, innerHeight);
     var renderedAbsolute = resolveCellAbsoluteLayout(cellContent, innerX, innerY, innerWidth, innerHeight);
     var rendered = [].concat(renderedFlex, renderedAbsolute);
-    clipToBox(context, innerX, innerY, innerWidth, innerHeight, function () {
+    clipToBox(context, xCoord, yCoord, cellWidth, cellHeight, function () {
       var _loop = function _loop() {
-        var render = _step12.value;
+        var _step12$value = _step12.value,
+          i = _step12$value[0],
+          render = _step12$value[1];
         var box = render.box,
           item = render.item;
         var _box$ = box[0],
@@ -3174,7 +3220,10 @@ var renderCell = function renderCell(context, imageRenderer, cellContent, style,
           context.strokeStyle = '#ff00ff';
           context.strokeRect(left + 0.5, top + 0.5, width - 0.5, height - 0.5);
         }
-        clipToBox(context, left, top, width, height, function () {
+        var clipLeft = i > 0 ? left : xCoord;
+        var clipRight = i < rendered.length ? right : yCoord + cellWidth;
+        var clipWidth = clipRight - clipLeft;
+        clipToBox(context, clipLeft, yCoord, clipWidth, cellHeight, function () {
           if (item.display === 'inline') {
             var text = item.text;
             if (text != null) {
@@ -3186,7 +3235,7 @@ var renderCell = function renderCell(context, imageRenderer, cellContent, style,
           }
         });
       };
-      for (var _iterator12 = _createForOfIteratorHelperLoose(rendered), _step12; !(_step12 = _iterator12()).done;) {
+      for (var _iterator12 = _createForOfIteratorHelperLoose(rendered.entries()), _step12; !(_step12 = _iterator12()).done;) {
         _loop();
       }
     });
@@ -3621,9 +3670,9 @@ var Sheet = React.forwardRef(function (props, ref) {
     clipboardApi = _useClipboardAPI.clipboardApi,
     onClipboardCopy = _useClipboardAPI.onClipboardCopy;
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
-  var getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth);
-  var getAutoSizeHeight = useAutoSizeRow(visibleCells.columns, displayData, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight);
-  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 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(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),
@@ -3657,6 +3706,9 @@ var Sheet = React.forwardRef(function (props, ref) {
   var editTextAlign = 'right';
   var editTextLineHeight = '';
   var editTextMargin = '';
+  var editTextFontSize = DEFAULT_CELL_STYLE.fontSize;
+  var editTextFontFamily = DEFAULT_CELL_STYLE.fontFamily;
+  var editTextFontWeight = DEFAULT_CELL_STYLE.fontWeight;
   if (editMode) {
     var style = _extends({}, DEFAULT_CELL_STYLE, cellStyle.apply(void 0, editCell));
     editTextPosition = cellToPixel(editCell);
@@ -3665,6 +3717,9 @@ var Sheet = React.forwardRef(function (props, ref) {
     editTextHeight = cellHeight(editCellY) - 3;
     editTextAlign = style.textAlign;
     editTextLineHeight = style.lineHeight + "px";
+    editTextFontSize = style.fontSize;
+    editTextFontFamily = style.fontFamily;
+    editTextFontWeight = style.fontWeight;
     var yNudge = getDpiNudge();
     editTextMargin = style.marginTop - 1 + yNudge + "px " + (style.marginRight - 2) + "px " + (style.marginBottom - 2) + "px " + (style.marginLeft - 1) + "px";
     var editKey = editKeys.apply(void 0, editCell);
@@ -3692,8 +3747,9 @@ var Sheet = React.forwardRef(function (props, ref) {
       textAlign: editTextAlign,
       lineHeight: editTextLineHeight,
       color: 'black',
-      fontSize: DEFAULT_CELL_STYLE.fontSize,
-      fontFamily: 'sans-serif',
+      fontSize: editTextFontSize,
+      fontFamily: editTextFontFamily,
+      fontWeight: editTextFontWeight,
       resize: 'none'
     }
   };