sheet-happens 0.0.13 → 0.0.15

package/dist/index.js

@@ -84,6 +84,8 @@ var scrollSpeed = 30;
 var resizeColumnRowMouseThreshold = 4;
 var minimumColumnWidth = 50;
 var minimumRowHeight = 22;
+var rowColHeaderSelectionColor = '#AAAAAA';
+var maxSearchableRowOrCol = 65536;
 var defaultCellStyle = {
   textAlign: 'left',
   fontSize: 13,
@@ -374,7 +376,124 @@ function cellToAbsCoordinate(cellX, cellY, rowSizes, columnSizes, dataOffset, ce
   };
 }
 
-function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset) {
+function findApproxMaxEditDataIndex(editData) {
+  var x = 0;
+  var y = 0;
+  var howManyEmpty = 0;
+  var growthIncrement = 10;
+  var growthIncrementFactor = 1.5;
+
+  while (howManyEmpty < 4) {
+    var allEmpty = true;
+
+    for (var yy = 0; yy < 10; yy++) {
+      var data = editData(x, yy);
+
+      if (data !== null && data !== undefined && data !== '') {
+        allEmpty = false;
+        break;
+      }
+    }
+
+    if (allEmpty) {
+      howManyEmpty += 1;
+    }
+
+    x += growthIncrement;
+    growthIncrement = Math.floor(growthIncrement * growthIncrementFactor);
+  }
+
+  howManyEmpty = 0;
+  growthIncrement = 10;
+  growthIncrementFactor = 1.5;
+
+  while (howManyEmpty < 4) {
+    var _allEmpty = true;
+
+    for (var xx = 0; xx < 10; xx++) {
+      var _data = editData(xx, y);
+
+      if (_data !== null && _data !== undefined && _data !== '') {
+        _allEmpty = false;
+        break;
+      }
+    }
+
+    if (_allEmpty) {
+      howManyEmpty += 1;
+    }
+
+    y += growthIncrement;
+    growthIncrement = Math.floor(growthIncrement * growthIncrementFactor);
+  }
+
+  return {
+    x: x,
+    y: y
+  };
+}
+
+function findInDisplayData(displayData, start, direction) {
+  var i = _extends({}, start);
+
+  var increment = {
+    x: 0,
+    y: 0
+  };
+
+  if (direction === 'up') {
+    increment.y = -1;
+  } else if (direction === 'down') {
+    increment.y = 1;
+  } else if (direction === 'left') {
+    increment.x = -1;
+  } else if (direction === 'right') {
+    increment.x = 1;
+  }
+
+  var max = {
+    x: maxSearchableRowOrCol,
+    y: maxSearchableRowOrCol
+  };
+
+  if (i.x > max.x) {
+    i.x = max.x;
+  }
+
+  if (i.y > max.y) {
+    i.y = max.y;
+  }
+
+  var first = displayData(i.x + increment.x, i.y + increment.y);
+  var firstFilled = first !== '' && first !== null && first !== undefined;
+
+  if (!firstFilled) {
+    i.x += increment.x;
+    i.y += increment.y;
+  }
+
+  while (i.x <= max.x && i.y <= max.y && i.x >= 0 && i.y >= 0) {
+    var data = displayData(i.x, i.y);
+
+    if (firstFilled && (data === '' || data === null || data === undefined)) {
+      return {
+        x: i.x - increment.x,
+        y: i.y - increment.y
+      };
+    }
+
+    if (!firstFilled && data !== '' && data !== null && data !== undefined) {
+      return _extends({}, i);
+    }
+
+    i.x += increment.x;
+    i.y += increment.y;
+  }
+
+  return i;
+}
+
+function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates) {
   resizeCanvas(context.canvas);
   context.clearRect(0, 0, context.canvas.width, context.canvas.height);
   context.fillStyle = 'white';
@@ -417,7 +536,9 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
     sely2 = selection.y1;
   }
 
-  var selectionActive = selx1 !== -1 && selx2 !== -1 && sely1 !== -1 && sely2 !== -1;
+  var selectionActive = selx1 !== -1 && selx2 !== -1 || sely1 !== -1 && sely2 !== -1;
+  var rowSelectionActive = selx1 === -1 && selx2 === -1 && sely1 !== -1 && sely2 !== -1;
+  var colSelectionActive = selx1 !== -1 && selx2 !== -1 && sely1 === -1 && sely2 === -1;
   var p1 = cellToAbsCoordinate(selx1, sely1, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
   var p2 = cellToAbsCoordinate(selx2, sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
   p2.x += cellWidth(selx2);
@@ -449,7 +570,16 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
 
   if (selectionActive) {
     context.fillStyle = selBackColor;
-    context.fillRect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
+    var p1x = Math.max(-100, p1.x);
+    var p1y = Math.max(-100, p1.y);
+
+    if (rowSelectionActive) {
+      context.fillRect(p1x, p1y, 100000, p2.y - p1.y);
+    } else if (colSelectionActive) {
+      context.fillRect(p1x, p1y, p2.x - p1.x, 100000);
+    } else {
+      context.fillRect(p1x, p1y, p2.x - p1.x, p2.y - p1.y);
+    }
   }
 
   context.fillStyle = rowHeaderBackgroundColor;
@@ -500,10 +630,16 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
 
   for (var _iterator5 = _createForOfIteratorHelperLoose(rowSizes.index), _step5; !(_step5 = _iterator5()).done;) {
     var _row = _step5.value;
-    var xx = rowHeaderWidth * 0.5;
-    var yy = startY + cellHeight(_row) * 0.5;
     var cellContent = _row + 1;
-    context.fillText('' + cellContent, xx, yy);
+    var chStyle = {};
+
+    if (rowSelectionActive && sely1 <= _row && sely2 >= _row) {
+      chStyle = _extends({}, chStyle, {
+        backgroundColor: rowColHeaderSelectionColor
+      });
+    }
+
+    drawCell(context, '' + cellContent, chStyle, defaultColumnHeaderStyle, 0, startY, rowHeaderWidth, cellHeight(_row));
     startY += cellHeight(_row);
   }
 
@@ -516,16 +652,37 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
     var cw = cellWidth(_col);
     var ch = columnHeaders(_col);
     var chcontent = ch !== null ? ch : excelHeaderString(_col + 1);
-    var chStyle = columnHeaderStyle(_col);
-    drawCell(context, chcontent, chStyle, defaultColumnHeaderStyle, startX, 0, cw, columnHeaderHeight);
+
+    var _chStyle = columnHeaderStyle(_col);
+
+    if (colSelectionActive && selx1 <= _col && selx2 >= _col) {
+      _chStyle = _extends({}, _chStyle, {
+        backgroundColor: rowColHeaderSelectionColor
+      });
+    }
+
+    drawCell(context, chcontent, _chStyle, defaultColumnHeaderStyle, startX, 0, cw, columnHeaderHeight);
     startX += cw;
   }
 
   if (selectionActive) {
     context.strokeStyle = selBorderColor;
     context.lineWidth = 1;
+
+    var _p1x = Math.max(-100, p1.x);
+
+    var _p1y = Math.max(-100, p1.y);
+
     context.beginPath();
-    context.rect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
+
+    if (rowSelectionActive) {
+      context.rect(_p1x, _p1y, 100000, p2.y - p1.y);
+    } else if (colSelectionActive) {
+      context.rect(_p1x, _p1y, p2.x - p1.x, 100000);
+    } else {
+      context.rect(_p1x, _p1y, p2.x - p1.x, p2.y - p1.y);
+    }
+
     context.stroke();
   }
 
@@ -552,14 +709,22 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
     context.setLineDash([3, 3]);
     context.lineWidth = 1;
     context.beginPath();
-    context.rect(knobPoint1.x, knobPoint1.y - 1, knobPoint2.x - knobPoint1.x, knobPoint2.y - knobPoint1.y);
+
+    if (rowSelectionActive) {
+      context.rect(knobPoint1.x, knobPoint1.y - 1, 100000, knobPoint2.y - knobPoint1.y);
+    } else if (colSelectionActive) {
+      context.rect(knobPoint1.x, knobPoint1.y - 1, knobPoint2.x - knobPoint1.x, 100000);
+    } else {
+      context.rect(knobPoint1.x, knobPoint1.y - 1, knobPoint2.x - knobPoint1.x, knobPoint2.y - knobPoint1.y);
+    }
+
     context.stroke();
     context.setLineDash([]);
   }
 
   if (selectionActive && !hideKnob) {
     context.fillStyle = selBorderColor;
-    context.fillRect(p2.x - knobSize * 0.5, p2.y - knobSize * 0.5, knobSize, knobSize);
+    context.fillRect(knobCoordinates.x - knobSize * 0.5, knobCoordinates.y - knobSize * 0.5, knobSize, knobSize);
   }
 
   context.textBaseline = 'middle';
@@ -748,12 +913,14 @@ function Sheet(props) {
       scrollToP2 = true;
     }
 
-    setSelection({
-      x1: x1,
-      y1: y1,
-      x2: x2,
-      y2: y2
-    });
+    if (selection.x1 !== x1 || selection.x2 !== x2 || selection.y1 !== y1 || selection.y2 !== y2) {
+      setSelection({
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2
+      });
+    }
 
     if (scrollToP2) {
       var newDataOffset = {
@@ -763,15 +930,32 @@ function Sheet(props) {
       var newScrollLeft = -1;
       var newScrollTop = -1;
 
-      if (!columnSizes.index.includes(x2) || columnSizes.index[columnSizes.index.length - 1] === x2) {
-        var increment = columnSizes.index[columnSizes.index.length - 1] <= x2 ? 1 : -1;
+      if (x2 !== -1 && (!columnSizes.index.includes(x2) || columnSizes.index[columnSizes.index.length - 1] === x2)) {
+        var lastVisibleColumnIndex = columnSizes.index[columnSizes.index.length - 1];
+        var firstVisibleColumnIndex = columnSizes.index[freezeColumns];
+        var increment = 0;
+
+        if (x2 >= lastVisibleColumnIndex) {
+          increment = 1 + x2 - lastVisibleColumnIndex;
+        } else if (x2 < firstVisibleColumnIndex) {
+          increment = x2 - firstVisibleColumnIndex;
+        }
+
         var newX = Math.max(dataOffset.x, freezeColumns) + increment;
         newDataOffset.x = newX;
         newScrollLeft = newX * scrollSpeed;
       }
 
-      if (!rowSizes.index.includes(y2) || rowSizes.index[rowSizes.index.length - 1] === y2) {
-        var _increment = rowSizes.index[rowSizes.index.length - 1] <= y2 ? 1 : -1;
+      if (y2 !== -1 && (!rowSizes.index.includes(y2) || rowSizes.index[rowSizes.index.length - 1] === y2)) {
+        var firstVisibleRowIndex = rowSizes.index[freezeRows];
+        var lastVisibleRowIndex = rowSizes.index[rowSizes.index.length - 1];
+        var _increment = 0;
+
+        if (y2 >= lastVisibleRowIndex) {
+          _increment = 1 + y2 - lastVisibleRowIndex;
+        } else if (y2 < firstVisibleRowIndex) {
+          _increment = y2 - firstVisibleRowIndex;
+        }
 
         var newY = Math.max(dataOffset.y, freezeRows) + _increment;
 
@@ -784,6 +968,12 @@ function Sheet(props) {
           x: newDataOffset.x,
           y: newDataOffset.y
         });
+
+        var newMaxScroll = _extends({}, maxScroll);
+
+        newMaxScroll.x = Math.max(newMaxScroll.x, newScrollLeft);
+        newMaxScroll.y = Math.max(newMaxScroll.y, newScrollTop);
+        setMaxScroll(newMaxScroll);
         setTimeout(function () {
           if (overlayRef.current) {
             if (newScrollLeft !== -1) {
@@ -819,23 +1009,53 @@ function Sheet(props) {
   };
 
   var knobCoordinates = React.useMemo(function () {
-    if (selection.x2 !== -1 && selection.y2 !== -1) {
+    if (selection.x1 === -1 && selection.x2 === -1 && selection.y1 !== -1 && selection.y2 !== -1) {
+      var sely2 = selection.y2;
+
+      if (selection.y1 > selection.y2) {
+        sely2 = selection.y1;
+      }
+
+      var c = cellToAbsCoordinate(0, sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+      return {
+        x: c.x + knobSize * 0.5,
+        y: c.y + cellHeight(sely2)
+      };
+    }
+
+    if (selection.x1 !== -1 && selection.x2 !== -1 && selection.y1 === -1 && selection.y2 === -1) {
       var selx2 = selection.x2;
 
       if (selection.x1 > selection.x2) {
         selx2 = selection.x1;
       }
 
-      var sely2 = selection.y2;
+      var _c = cellToAbsCoordinate(selx2, 0, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+
+      return {
+        x: _c.x + cellWidth(selx2),
+        y: _c.y + knobSize * 0.5
+      };
+    }
+
+    if (selection.x2 !== -1 && selection.y2 !== -1) {
+      var _selx = selection.x2;
+
+      if (selection.x1 > selection.x2) {
+        _selx = selection.x1;
+      }
+
+      var _sely = selection.y2;
 
       if (selection.y1 > selection.y2) {
-        sely2 = selection.y1;
+        _sely = selection.y1;
       }
 
-      var c = cellToAbsCoordinate(selx2, sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+      var _c2 = cellToAbsCoordinate(_selx, _sely, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight);
+
       return {
-        x: c.x + cellWidth(selx2),
-        y: c.y + cellHeight(sely2)
+        x: _c2.x + cellWidth(_selx),
+        y: _c2.y + cellHeight(_sely)
       };
     }
 
@@ -1007,12 +1227,12 @@ function Sheet(props) {
     }
 
     var animationFrameId = window.requestAnimationFrame(function () {
-      renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset);
+      renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates);
     });
     return function () {
       window.cancelAnimationFrame(animationFrameId);
     };
-  }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset]);
+  }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates]);
 
   var setFocusToTextArea = function setFocusToTextArea() {
     if (copyPasteTextAreaRef.current) {
@@ -1026,7 +1246,10 @@ function Sheet(props) {
   React.useEffect(function () {
     if (!editMode) {
       setCopyPasteText();
-
+    }
+  }, [selection, editData]);
+  React.useEffect(function () {
+    if (!editMode) {
       if (document.activeElement === copyPasteTextAreaRef.current) {
         setFocusToTextArea();
       } else {
@@ -1180,18 +1403,26 @@ function Sheet(props) {
       pasteLocX = selection.x1;
     }
 
-    if (selection.y1 !== -1 && selection.y2 === -1) {
-      pasteLocY = selection.y1;
-    }
-
     if (selection.x1 !== -1 && selection.x2 !== -1) {
       pasteLocX = Math.min(selection.x1, selection.x2);
     }
 
+    if (selection.x1 === -1 && selection.x2 === -1 && selection.y1 !== -1 && selection.y2 !== -1) {
+      pasteLocX = 0;
+    }
+
+    if (selection.y1 !== -1 && selection.y2 === -1) {
+      pasteLocY = selection.y1;
+    }
+
     if (selection.y1 !== -1 && selection.y2 !== -1) {
       pasteLocY = Math.min(selection.y1, selection.y2);
     }
 
+    if (selection.y1 === -1 && selection.y2 === -1 && selection.x2 !== -1 && selection.x2 !== -1) {
+      pasteLocY = 0;
+    }
+
     if (pasteLocX === -1 || pasteLocY === -1) {
       return;
     }
@@ -1225,7 +1456,7 @@ function Sheet(props) {
   };
 
   var setCopyPasteText = function setCopyPasteText() {
-    if (selection.x1 === -1 || selection.y1 === -1 || selection.x2 === -1 || selection.y2 === -1) {
+    if (selection.x1 === -1 && selection.y1 === -1 && selection.x2 === -1 && selection.y2 === -1) {
       return;
     }
 
@@ -1245,25 +1476,46 @@ function Sheet(props) {
       dx2 = selection.x1;
     }
 
-    var rows = [];
+    var max = findApproxMaxEditDataIndex(editData);
+
+    if (dx1 === -1 && dx2 === -1) {
+      dx1 = 0;
+      dx2 = max.x;
+    }
+
+    if (dy1 === -1 && dy2 === -1) {
+      dy1 = 0;
+      dy2 = max.y;
+    }
+
+    var cptext = '';
+    var cptextTemp = '';
 
     for (var y = dy1; y <= dy2; y++) {
-      var row = [];
+      var nonEmpty = false;
 
       for (var x = dx1; x <= dx2; x++) {
         var value = editData(x, y);
 
         if (value !== null && value !== undefined) {
-          row.push(value);
-        } else {
-          row.push('');
+          cptextTemp += value;
+          nonEmpty = true;
+        }
+
+        if (x !== dx2) {
+          cptextTemp += '\t';
         }
       }
 
-      rows.push(row.join('\t'));
-    }
+      if (y !== dy2) {
+        cptextTemp += '\n';
+      }
 
-    var cptext = rows.join('\n');
+      if (nonEmpty) {
+        cptext += cptextTemp;
+        cptextTemp = '';
+      }
+    }
 
     if (copyPasteTextAreaRef.current) {
       copyPasteTextAreaRef.current.value = cptext;
@@ -1275,7 +1527,7 @@ function Sheet(props) {
       props.onChange([{
         x: editCell.x,
         y: editCell.y,
-        value: value != null ? value : editValue
+        value: value !== undefined ? value : editValue
       }]);
     }
 
@@ -1302,6 +1554,7 @@ function Sheet(props) {
     setEditCell(editCell);
     setEditKey(editDataKey);
     setEditValue(val);
+    setShiftKeyDown(false);
   };
 
   var onScroll = function onScroll(e) {
@@ -1388,10 +1641,25 @@ function Sheet(props) {
 
         if (Math.abs(start - x) < resizeColumnRowMouseThreshold || Math.abs(end - x) < resizeColumnRowMouseThreshold) {
           window.document.body.style.cursor = 'col-resize';
+          var indices = [];
+
+          if (selection.x1 !== -1 && selection.x2 !== -1 && selection.y1 === -1 && selection.y2 === -1) {
+            var min = Math.min(selection.x1, selection.x2);
+            var max = Math.max(selection.x1, selection.x2);
+
+            for (var i = min; i <= max; i++) {
+              indices.push(i);
+            }
+          }
+
+          if (indices.length === 0) {
+            indices.push(index);
+          }
+
           setColumnResize({
             startX: end,
             oldWidth: cellWidth(index),
-            colIdx: index
+            colIndices: indices
           });
           return;
         }
@@ -1406,10 +1674,26 @@ function Sheet(props) {
 
         if (Math.abs(_start - y) < resizeColumnRowMouseThreshold || Math.abs(_end - y) < resizeColumnRowMouseThreshold) {
           window.document.body.style.cursor = 'row-resize';
+          var _indices = [];
+
+          if (selection.x1 === -1 && selection.x2 === -1 && selection.y1 !== -1 && selection.y2 !== -1) {
+            var _min = Math.min(selection.y1, selection.y2);
+
+            var _max = Math.max(selection.y1, selection.y2);
+
+            for (var _i5 = _min; _i5 <= _max; _i5++) {
+              _indices.push(_i5);
+            }
+          }
+
+          if (_indices.length === 0) {
+            _indices.push(_index);
+          }
+
           setRowResize({
             startY: _end,
             oldHeight: cellHeight(_index),
-            rowIdx: _index
+            rowIndices: _indices
           });
           return;
         }
@@ -1440,17 +1724,19 @@ function Sheet(props) {
     var scrollToP2 = true;
 
     if (x < rowHeaderWidth) {
-      sel2.x = dataOffset.x + 100;
       scrollToP2 = false;
       setRowSelectionInProgress(true);
+      sel1.x = -1;
+      sel2.x = -1;
     } else {
       setRowSelectionInProgress(false);
     }
 
     if (y < columnHeaderHeight) {
-      sel2.y = dataOffset.y + 100;
       scrollToP2 = false;
       setColumnSelectionInProgress(true);
+      sel1.y = -1;
+      sel2.y = -1;
     } else {
       setColumnSelectionInProgress(false);
     }
@@ -1511,6 +1797,11 @@ function Sheet(props) {
           fy2 = sy1 - 1;
         }
 
+        if (fx1 === -1 && fx2 === -1) {
+          fx1 = 0;
+          fx2 = maxSearchableRowOrCol;
+        }
+
         var srcY = sy1;
 
         for (var y = fy1; y <= fy2; y++) {
@@ -1536,6 +1827,11 @@ function Sheet(props) {
           fx2 = sx1 - 1;
         }
 
+        if (fy1 === -1 && fy2 === -1) {
+          fy1 = 0;
+          fy2 = maxSearchableRowOrCol;
+        }
+
         var srcX = sx1;
 
         for (var _x3 = fx1; _x3 <= fx2; _x3++) {
@@ -1662,7 +1958,7 @@ function Sheet(props) {
     if (columnResize) {
       if (props.onCellWidthChange) {
         var newWidth = Math.max(columnResize.oldWidth + x - columnResize.startX, minimumColumnWidth);
-        props.onCellWidthChange(columnResize.colIdx, newWidth);
+        props.onCellWidthChange(columnResize.colIndices, newWidth);
       }
 
       return;
@@ -1671,7 +1967,7 @@ function Sheet(props) {
     if (rowResize) {
       if (props.onCellHeightChange) {
         var newHeight = Math.max(rowResize.oldHeight + y - rowResize.startY, minimumRowHeight);
-        props.onCellHeightChange(rowResize.rowIdx, newHeight);
+        props.onCellHeightChange(rowResize.rowIndices, newHeight);
       }
 
       return;
@@ -1681,9 +1977,9 @@ function Sheet(props) {
       var sel2 = absCoordianteToCell(x, y, rowSizes, columnSizes);
 
       if (rowSelectionInProgress) {
-        changeSelection(selection.x1, selection.y1, selection.x2, sel2.y, false);
+        changeSelection(-1, selection.y1, -1, sel2.y, false);
       } else if (columnSelectionInProgress) {
-        changeSelection(selection.x1, selection.y1, sel2.x, selection.y2, false);
+        changeSelection(selection.x1, -1, sel2.x, -1, false);
       } else {
         changeSelection(selection.x1, selection.y1, sel2.x, sel2.y);
       }
@@ -1714,7 +2010,7 @@ function Sheet(props) {
       if (cell.y < y1) yCellDiff = cell.y - y1;
       if (cell.y > y2) yCellDiff = y2 - cell.y;
 
-      if (xCellDiff > yCellDiff) {
+      if (x1 === -1 && x2 === -1 || xCellDiff > yCellDiff) {
         if (cell.y < y1) {
           y1 = cell.y;
         } else {
@@ -1847,6 +2143,16 @@ function Sheet(props) {
         y2 = selection.y1;
       }
 
+      if (x1 === -1 && x2 === -1 && y1 !== -1 && y2 !== -1) {
+        x1 = 0;
+        x2 = maxSearchableRowOrCol;
+      }
+
+      if (x1 !== -1 && x2 !== -1 && y1 === -1 && y2 === -1) {
+        y1 = 0;
+        y2 = maxSearchableRowOrCol;
+      }
+
       var changes = [];
 
       for (var y = y1; y <= y2; y++) {
@@ -1893,17 +2199,35 @@ function Sheet(props) {
         x: selection.x2,
         y: selection.y2
       };
+      var incr = {
+        x: 0,
+        y: 0
+      };
+      var direction = 'right';
 
       if (e.key === 'ArrowRight' || e.key === 'Tab') {
-        sel2.x += 1;
+        incr.x = 1;
+        direction = 'right';
       } else if (e.key === 'ArrowLeft') {
-        sel2.x -= 1;
+        incr.x = -1;
+        direction = 'left';
       } else if (e.key === 'ArrowUp') {
-        sel2.y -= 1;
+        incr.y = -1;
+        direction = 'up';
       } else if (e.key === 'ArrowDown') {
-        sel2.y += 1;
+        incr.y = 1;
+        direction = 'down';
       }
 
+      if (e.metaKey || e.ctrlKey) {
+        var val = findInDisplayData(displayData, sel2, direction);
+        incr.x = val.x - sel2.x;
+        incr.y = val.y - sel2.y;
+      }
+
+      sel2.x += incr.x;
+      sel2.y += incr.y;
+
       if (sel2.x < 0) {
         sel2.x = 0;
       }
@@ -2073,13 +2397,17 @@ function Sheet(props) {
       opacity: 0.01
     },
     ref: copyPasteTextAreaRef,
+    autoComplete: "off",
+    autoCorrect: "off",
+    autoCapitalize: "off",
+    spellCheck: "false",
     onFocus: function onFocus(e) {
       return e.target.select();
     },
     tabIndex: 0,
     onKeyDown: onGridKeyDown,
     onKeyUp: onGridKeyUp
-  }), editMode && (input != null ? input : React__default.createElement("input", Object.assign({}, inputProps, {
+  }), editMode && (input !== undefined ? input : React__default.createElement("input", Object.assign({}, inputProps, {
     type: "text",
     onFocus: function onFocus(e) {
       return e.target.select();