sheet-happens 0.0.40 → 0.0.42

package/dist/autosize.d.ts

@@ -0,0 +1,2 @@
+import { RowOrColumnPropertyFunction, CellPropertyFunction, CellContentType, Style } from './types';
+export declare const useAutoSizeColumn: (rows: number[], displayData: CellPropertyFunction<CellContentType>, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, canvasWidth: number) => (x: number) => number;

package/dist/index.js

@@ -351,11 +351,6 @@ var orientSelection = function orientSelection(normalized, to) {
   var swapY = (ay - hy || 1) * (bottom - top || 1) < 0;
   return [[swapX ? right : left, swapY ? bottom : top], [swapX ? left : right, swapY ? top : bottom]];
 };
-var clipSelection = function clipSelection(selection, max) {
-  var anchor = selection[0],
-      head = selection[1];
-  return [minXY(anchor, max), minXY(head, max)];
-};
 
 var LIMIT = 1000;
 
@@ -537,7 +532,7 @@ var findInDisplayData = function findInDisplayData(displayData, start, direction
   return maxXY(cell, [0, 0]);
 };
 
-var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, onEdit, onCommit, onKnobAreaChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
+var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, 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];
@@ -627,6 +622,11 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
     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) {
+      return null;
+    }
+
     return xy;
   }, []);
   var getScrollPosition = React.useCallback(function (e) {
@@ -1046,9 +1046,9 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         pixelToRow = _ref$current3$cellLay.pixelToRow,
         getIndentX = _ref$current3$cellLay.getIndentX,
         getIndentY = _ref$current3$cellLay.getIndentY;
+    window.document.body.style.cursor = 'auto';
     var xy = getMousePosition(e);
     if (!xy) return;
-    window.document.body.style.cursor = 'auto';
     var hitTarget = getMouseHit(xy);
 
     if (hitTarget) {
@@ -1291,11 +1291,48 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     }
   }, [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;
+    var _ref$current4 = ref.current,
+        selection = _ref$current4.selection,
+        _ref$current4$cellLay = _ref$current4.cellLayout,
+        pixelToCell = _ref$current4$cellLay.pixelToCell,
+        columnToPixel = _ref$current4$cellLay.columnToPixel;
     e.preventDefault();
     if (e.shiftKey) return;
     var xy = getMousePosition(e);
     if (!xy) return;
+    var x = xy[0];
+    var columns = visibleCells.columns;
+
+    if (onCellWidthChange) {
+      var autosized = [];
+
+      for (var _iterator10 = _createForOfIteratorHelperLoose(columns), _step10; !(_step10 = _iterator10()).done;) {
+        var index = _step10.value;
+        var edge = columnToPixel(index, 1);
+
+        if (Math.abs(edge - x) < SIZES.resizeZone && canSizeColumn(index)) {
+          var _normalizeSelection5 = normalizeSelection(selection),
+              _normalizeSelection5$ = _normalizeSelection5[0],
+              minX = _normalizeSelection5$[0],
+              _normalizeSelection5$2 = _normalizeSelection5[1],
+              maxX = _normalizeSelection5$2[0];
+
+          var indices = isColumnSelection(selection) && index >= minX && index <= maxX ? mapSelectionColumns(selection)(function (i) {
+            return i;
+          }) : [index];
+          autosized.push.apply(autosized, indices);
+        }
+      }
+
+      for (var _i = 0, _autosized = autosized; _i < _autosized.length; _i++) {
+        var column = _autosized[_i];
+        onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(column - 1);
+        onCellWidthChange([column], getAutoSizeWidth(column));
+      }
+
+      if (autosized.length) return;
+    }
+
     var hitTarget = getMouseHit(xy);
 
     if (hitTarget) {
@@ -1306,7 +1343,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     var editCell = pixelToCell(xy);
     if (editMode) onCommit === null || onCommit === void 0 ? void 0 : onCommit();
     onEdit === null || onEdit === void 0 ? void 0 : onEdit(editCell);
-  }, [getMousePosition, getMouseHit, onCommit, onEdit]);
+  }, [getMousePosition, getMouseHit, onCommit, onEdit, onInvalidateColumn, onCellWidthChange, getAutoSizeWidth, visibleCells, canSizeColumn]);
   var onContextMenu = React.useCallback(function (e) {
     var _ref$current$cellLayo2 = ref.current.cellLayout,
         pixelToCell = _ref$current$cellLayo2.pixelToCell,
@@ -1353,21 +1390,21 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 };
 
 var parseKnobOperation = function parseKnobOperation(knobArea, selection, sourceData, editData, cellReadOnly) {
-  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),
+  var _normalizeSelection6 = normalizeSelection(knobArea),
       _normalizeSelection6$ = _normalizeSelection6[0],
-      sx1 = _normalizeSelection6$[0],
-      sy1 = _normalizeSelection6$[1],
+      kx1 = _normalizeSelection6$[0],
+      ky1 = _normalizeSelection6$[1],
       _normalizeSelection6$2 = _normalizeSelection6[1],
-      sx2 = _normalizeSelection6$2[0],
-      sy2 = _normalizeSelection6$2[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];
 
   var fx1 = kx1;
   var fy1 = ky1;
@@ -1492,30 +1529,81 @@ var useScroll = function useScroll(offset, maxScroll, cellLayout, onOffsetChange
     }
   }, [cellLayout, onOffsetChange, onMaxScrollChange]);
 };
-var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, maxCells, maxScroll, cellLayout, callback) {
-  var x = cell[0],
-      y = cell[1];
-  var w = view[0],
-      h = view[1];
-  var offsetX = offset[0],
-      offsetY = offset[1];
+var clipDataOffset = function clipDataOffset(view, offset, freeze, maxCells, cellLayout) {
+  var newX = offset[0],
+      newY = offset[1];
   var maxColumns = maxCells[0],
       maxRows = maxCells[1];
+  var absoluteToColumn = cellLayout.absoluteToColumn,
+      columnToAbsolute = cellLayout.columnToAbsolute,
+      absoluteToRow = cellLayout.absoluteToRow,
+      rowToAbsolute = cellLayout.rowToAbsolute;
+
+  var _getViewExtent = getViewExtent(view, [newX, newY], freeze, cellLayout),
+      _getViewExtent$edge = _getViewExtent.edge,
+      rightEdge = _getViewExtent$edge[0],
+      bottomEdge = _getViewExtent$edge[1],
+      _getViewExtent$viewpo = _getViewExtent.viewport,
+      scrollW = _getViewExtent$viewpo[0],
+      scrollH = _getViewExtent$viewpo[1];
+
+  if (rightEdge > maxColumns) {
+    var remainder = columnToAbsolute(maxColumns) - columnToAbsolute(newX);
+    newX = absoluteToColumn(columnToAbsolute(newX) - scrollW + remainder) + 1;
+  }
+
+  if (bottomEdge > maxRows) {
+    var _remainder = rowToAbsolute(maxRows) - rowToAbsolute(newY);
+
+    newY = absoluteToRow(rowToAbsolute(newY) - scrollH + _remainder) + 1;
+  }
+
+  return [newX, newY];
+};
+var getViewExtent = function getViewExtent(view, offset, freeze, cellLayout) {
   var cellToAbsolute = cellLayout.cellToAbsolute,
-      cellToPixel = cellLayout.cellToPixel,
-      columnToPixel = cellLayout.columnToPixel,
-      rowToPixel = cellLayout.rowToPixel,
       absoluteToColumn = cellLayout.absoluteToColumn,
       columnToAbsolute = cellLayout.columnToAbsolute,
       absoluteToRow = cellLayout.absoluteToRow,
       rowToAbsolute = cellLayout.rowToAbsolute,
       getIndentX = cellLayout.getIndentX,
       getIndentY = cellLayout.getIndentY;
+  var x = offset[0],
+      y = offset[1];
+  var w = view[0],
+      h = view[1];
 
   var _cellToAbsolute2 = cellToAbsolute(freeze),
       frozenX = _cellToAbsolute2[0],
       frozenY = _cellToAbsolute2[1];
 
+  var scrollW = w - frozenX - getIndentX();
+  var scrollH = h - frozenY - getIndentY();
+  var leftEdge = x + freeze[0];
+  var topEdge = y + freeze[1];
+  var rightEdge = absoluteToColumn(columnToAbsolute(leftEdge) + scrollW);
+  var bottomEdge = absoluteToRow(rowToAbsolute(topEdge) + scrollH);
+  return {
+    edge: [rightEdge, bottomEdge],
+    viewport: [scrollW, scrollH]
+  };
+};
+var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, maxScroll, cellLayout, callback) {
+  var x = cell[0],
+      y = cell[1];
+  var w = view[0],
+      h = view[1];
+  var offsetX = offset[0],
+      offsetY = offset[1];
+  var cellToAbsolute = cellLayout.cellToAbsolute,
+      cellToPixel = cellLayout.cellToPixel,
+      columnToPixel = cellLayout.columnToPixel,
+      rowToPixel = cellLayout.rowToPixel;
+
+  var _cellToAbsolute3 = cellToAbsolute(freeze),
+      frozenX = _cellToAbsolute3[0],
+      frozenY = _cellToAbsolute3[1];
+
   var _cellToPixel = cellToPixel(cell),
       left = _cellToPixel[0],
       top = _cellToPixel[1];
@@ -1529,25 +1617,10 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
 
   if (left <= frozenX) {
     newX = x - freeze[0];
-    var scrollW = w - frozenX - getIndentX();
-    var rightEdge = absoluteToColumn(columnToAbsolute(newX) + scrollW);
-
-    if (rightEdge > maxColumns) {
-      var remainder = columnToAbsolute(maxColumns) - columnToAbsolute(newX);
-      newX = absoluteToColumn(columnToAbsolute(newX) - scrollW + remainder) + 1;
-    }
   }
 
   if (top <= frozenY) {
     newY = y - freeze[1];
-    var scrollH = h - frozenY - getIndentY();
-    var bottomEdge = absoluteToRow(rowToAbsolute(newY) + scrollH);
-
-    if (bottomEdge > maxRows) {
-      var _remainder = rowToAbsolute(maxRows) - rowToAbsolute(newY);
-
-      newY = absoluteToRow(rowToAbsolute(newY) - scrollH + _remainder) + 1;
-    }
   }
 
   if (right > w) {
@@ -1567,9 +1640,9 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
   if (!isSameXY(newOffset, offset)) {
     var scroll = cellToAbsolute(newOffset);
 
-    var _cellToAbsolute3 = cellToAbsolute([0, 0], [0.5, 0.5]),
-        nudgeX = _cellToAbsolute3[0],
-        nudgeY = _cellToAbsolute3[1];
+    var _cellToAbsolute4 = cellToAbsolute([0, 0], [0.5, 0.5]),
+        nudgeX = _cellToAbsolute4[0],
+        nudgeY = _cellToAbsolute4[1];
 
     callback(newOffset, maxXY(maxScroll, scroll));
     setTimeout(function () {
@@ -1581,6 +1654,112 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
   }
 };
 
+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,
+    hideColumnHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideColumnHeaders) || false,
+    hideRowHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideRowHeaders) || false,
+    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,
+    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) {
+  return _extends({}, defaultStyle, optionalStyle);
+};
+var applyAlignment = function applyAlignment(start, cellSize, style, imageWidth, alignment) {
+  if (alignment === void 0) {
+    alignment = style.textAlign;
+  }
+
+  if (alignment === 'left') {
+    return start + style.marginLeft;
+  } else if (alignment === 'center') {
+    return start + cellSize * 0.5 - imageWidth / 2;
+  } else if (alignment === 'right') {
+    return start + (cellSize - style.marginRight - imageWidth);
+  }
+
+  return start;
+};
+
+var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth) {
+  var context = React.useMemo(function () {
+    return document.createElement('canvas').getContext('2d');
+  }, []);
+  var getAutoSizeWidth = React.useCallback(function (x) {
+    if (!context) return 0;
+
+    var getWidth = function getWidth(cellContent, style) {
+      var finalStyle = resolveCellStyle(style, DEFAULT_CELL_STYLE);
+      context.font = finalStyle.weight + ' ' + finalStyle.fontSize + 'px ' + finalStyle.fontFamily;
+      var inlineMargin = finalStyle.marginLeft + finalStyle.marginRight;
+
+      if (typeof cellContent === 'string' || typeof cellContent === 'number') {
+        var _context$measureText = context.measureText(cellContent.toString()),
+            width = _context$measureText.width;
+
+        return width + inlineMargin;
+      } else if (typeof cellContent === 'object') {
+        var _maxWidth = 0;
+        var extraWidth = 0;
+
+        for (var _iterator = _createForOfIteratorHelperLoose(cellContent.items), _step; !(_step = _iterator()).done;) {
+          var obj = _step.value;
+          var _width = 0;
+
+          if (typeof obj.content === 'string' || typeof obj.content === 'number') {
+            var _context$measureText2 = context.measureText(obj.content.toString()),
+                w = _context$measureText2.width;
+
+            _width = obj.x + w + inlineMargin;
+          } else if (obj.width) {
+            _width = obj.width;
+          }
+
+          if (obj.horizontalAlign === 'right') {
+            extraWidth += _width;
+          } else {
+            _maxWidth = Math.max(_maxWidth, _width);
+          }
+        }
+
+        return _maxWidth + extraWidth;
+      }
+
+      return 0;
+    };
+
+    var maxWidth = SIZES.minimumWidth;
+    var headerContent = columnHeaders(x);
+
+    if (headerContent) {
+      var headerStyle = columnHeaderStyle(x);
+      maxWidth = Math.max(maxWidth, getWidth(headerContent, headerStyle));
+    }
+
+    for (var _iterator2 = _createForOfIteratorHelperLoose(rows), _step2; !(_step2 = _iterator2()).done;) {
+      var y = _step2.value;
+      var cellContent = displayData(x, y);
+
+      if (cellContent != null) {
+        var style = cellStyle(x, y);
+        maxWidth = Math.max(maxWidth, getWidth(cellContent, style));
+      }
+    }
+
+    return Math.ceil(Math.min(canvasWidth, maxWidth));
+  }, [context, displayData, cellStyle, columnHeaders, columnHeaderStyle]);
+  return getAutoSizeWidth;
+};
+
 var useClipboardCopy = function useClipboardCopy(textAreaRef, selection, editMode, editData) {
   React.useLayoutEffect(function () {
     var textArea = textAreaRef.current;
@@ -2203,42 +2382,6 @@ 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,
-    hideColumnHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideColumnHeaders) || false,
-    hideRowHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideRowHeaders) || false,
-    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,
-    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) {
-  return _extends({}, defaultStyle, optionalStyle);
-};
-var applyAlignment = function applyAlignment(start, cellSize, style, imageWidth, alignment) {
-  if (alignment === void 0) {
-    alignment = style.textAlign;
-  }
-
-  if (alignment === 'left') {
-    return start + style.marginLeft;
-  } else if (alignment === 'center') {
-    return start + cellSize * 0.5 - imageWidth / 2;
-  } else if (alignment === 'right') {
-    return start + (cellSize - style.marginRight - imageWidth);
-  }
-
-  return start;
-};
-
 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,
@@ -3034,6 +3177,23 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
   }, [visibleCells, props.onScrollChange]);
 
+  var scrollToSelection = function scrollToSelection(selection, toHead) {
+    if (toHead === void 0) {
+      toHead = false;
+    }
+
+    var overlay = overlayRef.current;
+    if (!overlay) return;
+    var anchor = selection[0],
+        head = selection[1];
+    var view = [canvasWidth, canvasHeight];
+    var freeze = [freezeColumns, freezeRows];
+    scrollToCell(overlay, toHead ? head : anchor, view, freeze, dataOffset, maxScroll, cellLayout, function (dataOffset, maxScroll) {
+      setDataOffset(dataOffset);
+      setMaxScroll(maxScroll);
+    });
+  };
+
   var changeSelection = function changeSelection(newSelection, scrollTo, toHead) {
     if (scrollTo === void 0) {
       scrollTo = true;
@@ -3051,12 +3211,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     if (!overlay) return;
 
     if (scrollTo) {
-      var anchor = newSelection[0],
-          head = newSelection[1];
-      scrollToCell(overlay, toHead ? head : anchor, [canvasWidth, canvasHeight], [freezeColumns, freezeRows], dataOffset, [maxColumns, maxRows], maxScroll, cellLayout, function (dataOffset, maxScroll) {
-        setDataOffset(dataOffset);
-        setMaxScroll(maxScroll);
-      });
+      scrollToSelection(newSelection, toHead);
     }
 
     if (props.onSelectionChanged) {
@@ -3116,24 +3271,18 @@ var Sheet = React.forwardRef(function (props, ref) {
       _props$maxRows = props.maxRows,
       maxRows = _props$maxRows === void 0 ? Infinity : _props$maxRows;
   React.useLayoutEffect(function () {
-    var _normalizeSelection2 = normalizeSelection(selection),
-        _normalizeSelection2$ = _normalizeSelection2[1],
-        maxX = _normalizeSelection2$[0],
-        maxY = _normalizeSelection2$[1];
-
-    var overflowX = maxX > maxColumns;
-    var overflowY = maxY > maxRows;
-    if (!overflowX && !overflowY) return;
-    var corner = [maxColumns - 1, maxRows - 1];
-    changeSelection(clipSelection(selection, corner), true);
+    var view = [canvasWidth, canvasHeight];
+    var freeze = [freezeColumns, freezeRows];
+    setDataOffset(clipDataOffset(view, dataOffset, freeze, [maxColumns, maxRows], cellLayout));
   }, [maxRows, maxColumns]);
   var hitmapRef = React.useRef(NO_CLICKABLES);
   var textAreaRef = React.useRef(null);
   useClipboardCopy(textAreaRef, selection, editMode, editData);
   useClipboardPaste(textAreaRef, selection, changeSelection, props.onChange, cellReadOnly);
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
+  var getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth);
 
-  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),
+  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, 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;
 
@@ -3192,13 +3341,13 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
 
     if (e.key === 'Backspace' || e.key === 'Delete') {
-      var _normalizeSelection3 = normalizeSelection(selection),
-          _normalizeSelection3$ = _normalizeSelection3[0],
-          x1 = _normalizeSelection3$[0],
-          y1 = _normalizeSelection3$[1],
-          _normalizeSelection3$2 = _normalizeSelection3[1],
-          x2 = _normalizeSelection3$2[0],
-          y2 = _normalizeSelection3$2[1];
+      var _normalizeSelection2 = normalizeSelection(selection),
+          _normalizeSelection2$ = _normalizeSelection2[0],
+          x1 = _normalizeSelection2$[0],
+          y1 = _normalizeSelection2$[1],
+          _normalizeSelection2$2 = _normalizeSelection2[1],
+          x2 = _normalizeSelection2$2[0],
+          y2 = _normalizeSelection2$2[1];
 
       if (isRowSelection(selection)) {
         x1 = 0;