sheet-happens 0.0.23 → 0.0.25

package/dist/index.js

@@ -66,29 +66,43 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
 
 var styles = {"sheetscroll":"_PxIi8"};
 
-var selBorderColor = '#1b73e7';
-var selBackColor = '#e9f0fd';
-var knobSize = 6;
-var gridColor = '#e2e3e3';
-var knobAreaBorderColor = '#707070';
-var kRowHeaderWidth = 50;
-var rowHeaderBackgroundColor = '#f8f9fa';
-var rowHeaderTextColor = '#666666';
-var rowHeaderSelectedBackgroundColor = '#e8eaed';
-var kColumnHeaderHeight = 22;
-var columnHeaderBackgroundColor = rowHeaderBackgroundColor;
-var columnHeaderSelectedBackgroundColor = rowHeaderSelectedBackgroundColor;
-var xBinSize = 10;
-var yBinSize = 10;
-var scrollSpeed = 30;
-var resizeColumnRowMouseThreshold = 4;
-var minimumColumnWidth = 50;
-var minimumRowHeight = 22;
-var rowColHeaderSelectionColor = '#cccccc';
-var maxSearchableRowOrCol = 65536;
-var defaultCellStyle = {
+var INITIAL_MAX_SCROLL = [2000, 1000];
+var ORIGIN = [0, 0];
+var ONE_ONE = [1, 1];
+var NO_CELL = [-1, -1];
+var NO_SELECTION = [NO_CELL, NO_CELL];
+var NO_SELECTIONS = [];
+var NO_CLICKABLES = [];
+var NO_STYLE = {};
+var MAX_SEARCHABLE_INDEX = 65536;
+var MAX_XY = [MAX_SEARCHABLE_INDEX, MAX_SEARCHABLE_INDEX];
+var COLORS = {
+  selectionBorder: '#1a66ff',
+  selectionBackground: '#e8f0ff',
+  gridLine: '#0000001f',
+  dragGhost: '#1a66ff30',
+  dropTarget: '#1a66ff',
+  knobAreaBorder: '#707070',
+  headerBackground: '#f6f9fc',
+  headerText: '#666666',
+  headerActive: '#e8f0ff',
+  headerActiveText: '#1a66ff',
+  headerSelected: '#1a66ff',
+  headerSelectedText: '#ffffff'
+};
+var SIZES = {
+  knobArea: 6,
+  headerWidth: 50,
+  headerHeight: 22,
+  minimumWidth: 50,
+  minimumHeight: 22,
+  resizeZone: 4,
+  scrollZone: 50,
+  scrollSpeed: 30
+};
+var DEFAULT_CELL_STYLE = {
   textAlign: 'left',
-  fontSize: 13,
+  fontSize: 12,
   marginRight: 5,
   marginLeft: 5,
   color: '#000',
@@ -97,9 +111,9 @@ var defaultCellStyle = {
   fillColor: '',
   backgroundColor: ''
 };
-var defaultColumnHeaderStyle = {
+var DEFAULT_COLUMN_HEADER_STYLE = {
   textAlign: 'center',
-  fontSize: 13,
+  fontSize: 12,
   marginRight: 5,
   marginLeft: 5,
   color: '#000',
@@ -108,39 +122,174 @@ var defaultColumnHeaderStyle = {
   fillColor: '',
   backgroundColor: ''
 };
+var HEADER_ACTIVE_STYLE = {
+  color: COLORS.headerActiveText
+};
+var HEADER_SELECTED_STYLE = {
+  backgroundColor: COLORS.headerSelected,
+  color: COLORS.headerSelectedText
+};
+var ARROW_KEYS = {
+  'ArrowRight': 'right',
+  'ArrowLeft': 'left',
+  'ArrowUp': 'up',
+  'ArrowDown': 'down'
+};
 
-function resizeCanvas(canvas) {
-  var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
-      width = _canvas$getBoundingCl.width,
-      height = _canvas$getBoundingCl.height;
-
-  var _window = window,
-      _window$devicePixelRa = _window.devicePixelRatio,
-      ratio = _window$devicePixelRa === void 0 ? 1 : _window$devicePixelRa;
+var clamp = function clamp(x, min, max) {
+  return Math.max(Math.min(max, x), min);
+};
+var seq = function seq(n, s, d) {
+  if (s === void 0) {
+    s = 0;
+  }
 
-  if (ratio < 1) {
-    ratio = 1;
+  if (d === void 0) {
+    d = 1;
   }
 
-  var newCanvasWidth = Math.round(width * ratio);
-  var newCanvasHeight = Math.round(height * ratio);
+  return Array.from({
+    length: n
+  }).map(function (_, i) {
+    return s + d * i;
+  });
+};
+var isInRange = function isInRange(x, min, max) {
+  return min <= x && x <= max;
+};
+var isInRangeLeft = function isInRangeLeft(x, min, max) {
+  return min <= x && x < max;
+};
+var isInRangeRight = function isInRangeRight(x, min, max) {
+  return min < x && x <= max;
+};
+var isInRangeCenter = function isInRangeCenter(x, min, max) {
+  return min < x && x < max;
+};
 
-  if (canvas.width !== newCanvasWidth || canvas.height !== newCanvasHeight) {
-    var context = canvas.getContext('2d');
+var addXY = function addXY(a, b) {
+  return [a[0] + b[0], a[1] + b[1]];
+};
+var subXY = function subXY(a, b) {
+  return [a[0] - b[0], a[1] - b[1]];
+};
+var mulXY = function mulXY(a, b) {
+  return [a[0] * b[0], a[1] * b[1]];
+};
+var maxXY = function maxXY(a, b) {
+  return [Math.max(a[0], b[0]), Math.max(a[1], b[1])];
+};
+var clampXY = function clampXY(p, min, max) {
+  if (max === void 0) {
+    max = [Infinity, Infinity];
+  }
 
-    if (context) {
-      canvas.width = newCanvasWidth;
-      canvas.height = newCanvasHeight;
-      context.scale(ratio, ratio);
-    }
+  return [clamp(p[0], min[0], max[0]), clamp(p[1], min[1], max[1])];
+};
+var getDirectionStep = function getDirectionStep(direction) {
+  if (direction === 'left') return [-1, 0];
+  if (direction === 'right') return [1, 0];
+  if (direction === 'up') return [0, -1];
+  if (direction === 'down') return [0, 1];
+  return [0, 0];
+};
+var isSameXY = function isSameXY(a, b) {
+  return a[0] === b[0] && a[1] === b[1];
+};
+var isSameSelection = function isSameSelection(a, b) {
+  var a1 = a[0],
+      a2 = a[1];
+  var b1 = b[0],
+      b2 = b[1];
+  return isSameXY(a1, b1) && isSameXY(a2, b2);
+};
+var isMaybeRowSelection = function isMaybeRowSelection(selection) {
+  var _selection$ = selection[0],
+      left = _selection$[0],
+      _selection$2 = selection[1],
+      right = _selection$2[0];
+  return left === -1 && right === -1;
+};
+var isMaybeColumnSelection = function isMaybeColumnSelection(selection) {
+  var _selection$3 = selection[0],
+      top = _selection$3[1],
+      _selection$4 = selection[1],
+      bottom = _selection$4[1];
+  return top === -1 && bottom === -1;
+};
+var isRowSelection = function isRowSelection(selection) {
+  var _selection$5 = selection[0],
+      left = _selection$5[0],
+      top = _selection$5[1],
+      _selection$6 = selection[1],
+      right = _selection$6[0],
+      bottom = _selection$6[1];
+  return left === -1 && right === -1 && top !== -1 && bottom !== -1;
+};
+var isColumnSelection = function isColumnSelection(selection) {
+  var _selection$7 = selection[0],
+      left = _selection$7[0],
+      top = _selection$7[1],
+      _selection$8 = selection[1],
+      right = _selection$8[0],
+      bottom = _selection$8[1];
+  return top === -1 && bottom === -1 && left !== -1 && right !== -1;
+};
+var isCellSelection = function isCellSelection(selection) {
+  var _selection$9 = selection[0],
+      left = _selection$9[0],
+      top = _selection$9[1],
+      _selection$10 = selection[1],
+      right = _selection$10[0],
+      bottom = _selection$10[1];
+  return left !== -1 && right !== -1 && top !== -1 && bottom !== -1;
+};
+var isEmptySelection = function isEmptySelection(selection) {
+  var _selection$11 = selection[0],
+      left = _selection$11[0],
+      top = _selection$11[1],
+      _selection$12 = selection[1],
+      right = _selection$12[0],
+      bottom = _selection$12[1];
+  return left === -1 && right === -1 && top === -1 && bottom === -1;
+};
+var isPointInsideSelection = function isPointInsideSelection(selection, point) {
+  var _normalizeSelection = normalizeSelection(selection),
+      _normalizeSelection$ = _normalizeSelection[0],
+      left = _normalizeSelection$[0],
+      top = _normalizeSelection$[1],
+      _normalizeSelection$2 = _normalizeSelection[1],
+      right = _normalizeSelection$2[0],
+      bottom = _normalizeSelection$2[1];
+
+  var x = point[0],
+      y = point[1];
+  return x >= left && x <= right && y >= top && y <= bottom;
+};
+var normalizeSelection = function normalizeSelection(selection) {
+  var _selection$13 = selection[0],
+      left = _selection$13[0],
+      top = _selection$13[1],
+      _selection$14 = selection[1],
+      right = _selection$14[0],
+      bottom = _selection$14[1];
+
+  if (left > right) {
+    var _ref = [right, left];
+    left = _ref[0];
+    right = _ref[1];
+  }
 
-    return true;
+  if (top > bottom) {
+    var _ref2 = [bottom, top];
+    top = _ref2[0];
+    bottom = _ref2[1];
   }
 
-  return false;
-}
+  return [[left, top], [right, bottom]];
+};
 
-function createRowOrColumnPropFunction(rowColProp, defaultValue) {
+var createRowOrColumnProp = function createRowOrColumnProp(rowColProp, defaultValue) {
   if (Array.isArray(rowColProp)) {
     return function (rowOrColIndex) {
       if (rowOrColIndex >= 0 && rowOrColIndex < rowColProp.length) {
@@ -160,9 +309,8 @@ function createRowOrColumnPropFunction(rowColProp, defaultValue) {
       return defaultValue;
     };
   }
-}
-
-function createCellPropFunction(cellProp, defaultValue) {
+};
+var createCellProp = function createCellProp(cellProp, defaultValue) {
   if (Array.isArray(cellProp)) {
     return function (x, y) {
       if (y >= 0 && y < cellProp.length) {
@@ -186,217 +334,8 @@ function createCellPropFunction(cellProp, defaultValue) {
       return defaultValue;
     };
   }
-}
-
-function applyAlignment(start, cellSize, style, imageWidth, alignment) {
-  if (!alignment) {
-    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;
-}
-
-function drawCell(context, cellContent, style, defaultCellStyle, xCoord, yCoord, cellWidth, cellHeight) {
-  if (cellContent === null) {
-    return;
-  }
-
-  var finalStyle = createStyleObject(style, defaultCellStyle);
-  context.fillStyle = finalStyle.color;
-  context.font = finalStyle.weight + ' ' + finalStyle.fontSize + 'px ' + finalStyle.fontFamily;
-  context.textAlign = finalStyle.textAlign;
-  var yy = yCoord + cellHeight * 0.5;
-  context.save();
-  context.beginPath();
-  context.rect(xCoord, yCoord, cellWidth, cellHeight);
-  context.clip();
-
-  if (finalStyle.backgroundColor !== '') {
-    context.fillStyle = finalStyle.backgroundColor;
-    context.fillRect(xCoord, yCoord, cellWidth, cellHeight);
-    context.fillStyle = finalStyle.color;
-  }
-
-  if (typeof cellContent === 'string' || typeof cellContent === 'number') {
-    var xx = applyAlignment(xCoord, cellWidth, finalStyle, 0);
-    context.fillText('' + cellContent, xx, yy);
-  } else if (typeof cellContent === 'object') {
-    for (var _iterator = _createForOfIteratorHelperLoose(cellContent.items), _step; !(_step = _iterator()).done;) {
-      var obj = _step.value;
-
-      if (obj.content instanceof HTMLImageElement) {
-        var w = obj.width || cellWidth;
-        var finalX = applyAlignment(xCoord, cellWidth, finalStyle, w, obj.horiozntalAlign);
-        context.drawImage(obj.content, finalX + obj.x, yy + obj.y, obj.width || cellWidth, obj.height || cellHeight);
-      } else if (typeof obj.content === 'string' || typeof obj.content === 'number') {
-        if (obj.horiozntalAlign) {
-          context.textAlign = obj.horiozntalAlign;
-        }
-
-        var _finalX = applyAlignment(xCoord, cellWidth, finalStyle, 0, obj.horiozntalAlign);
-
-        context.fillText('' + obj.content, _finalX + obj.x, yy + obj.y);
-      }
-    }
-  }
-
-  context.restore();
-}
-
-function calculateRowsOrColsSizes(freezeCount, size, startingSize, startingIndex, visibleArea) {
-  var visible = [];
-  var start = [];
-  var end = [];
-  var prev = 0;
-  start.push(startingSize);
-  visible.push(freezeCount > 0 ? 0 : startingIndex);
-  var firstSize = freezeCount > 0 ? size(0) : size(startingIndex);
-  prev = startingSize + firstSize;
-  end.push(prev);
-  var ind = freezeCount > 0 ? 1 : startingIndex + 1;
-
-  if (freezeCount > 0) {
-    for (; ind < freezeCount; ind++) {
-      visible.push(ind);
-      start.push(prev);
-      prev = prev + size(ind);
-      end.push(prev);
-    }
-
-    ind = Math.max(startingIndex, freezeCount);
-  }
-
-  while (true) {
-    visible.push(ind);
-    start.push(prev);
-    prev = prev + size(ind);
-    end.push(prev);
-
-    if (end[end.length - 1] >= visibleArea) {
-      break;
-    }
-
-    ind++;
-  }
-
-  return {
-    index: visible,
-    start: start,
-    end: end
-  };
-}
-
-function createStyleObject(optionalStyle, defaultStyle) {
-  return _extends({}, defaultStyle, optionalStyle);
-}
-
-function excelHeaderString(num) {
-  var s = '';
-  var t = 0;
-
-  while (num > 0) {
-    t = (num - 1) % 26;
-    s = String.fromCharCode(65 + t) + s;
-    num = (num - t) / 26 | 0;
-  }
-
-  return s || '';
-}
-
-function absCoordianteToCell(absX, absY, rowSizes, columnSizes) {
-  var cellX = 0;
-  var cellY = 0;
-
-  for (var i = 0; i < columnSizes.index.length; i++) {
-    if (absX >= columnSizes.start[i] && absX <= columnSizes.end[i]) {
-      cellX = columnSizes.index[i];
-      break;
-    }
-  }
-
-  for (var _i = 0; _i < rowSizes.index.length; _i++) {
-    if (absY >= rowSizes.start[_i] && absY <= rowSizes.end[_i]) {
-      cellY = rowSizes.index[_i];
-      break;
-    }
-  }
-
-  return {
-    x: cellX,
-    y: cellY
-  };
-}
-
-function normalizeSelection(selection) {
-  var selx1 = selection.x1;
-  var selx2 = selection.x2;
-
-  if (selection.x1 > selection.x2) {
-    selx1 = selection.x2;
-    selx2 = selection.x1;
-  }
-
-  var sely1 = selection.y1;
-  var sely2 = selection.y2;
-
-  if (selection.y1 > selection.y2) {
-    sely1 = selection.y2;
-    sely2 = selection.y1;
-  }
-
-  return [selx1, sely1, selx2, sely2];
-}
-
-function cellToAbsCoordinate(cellX, cellY, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle) {
-  var absX = sheetStyle.rowHeaderWidth;
-  var indX = columnSizes.index.findIndex(function (i) {
-    return i === cellX;
-  });
-
-  if (indX !== -1) {
-    absX = columnSizes.start[indX];
-  } else {
-    for (var i = 0; i < dataOffset.x; i++) {
-      absX -= cellWidth(i);
-    }
-
-    for (var _i2 = 0; _i2 < cellX; _i2++) {
-      absX += cellWidth(_i2);
-    }
-  }
-
-  var absY = sheetStyle.columnHeaderHeight;
-  var indY = rowSizes.index.findIndex(function (i) {
-    return i === cellY;
-  });
-
-  if (indY !== -1) {
-    absY = rowSizes.start[indY];
-  } else {
-    for (var _i3 = 0; _i3 < dataOffset.y; _i3++) {
-      absY -= cellHeight(_i3);
-    }
-
-    for (var _i4 = 0; _i4 < cellY; _i4++) {
-      absY += cellHeight(_i4);
-    }
-  }
-
-  return {
-    x: absX,
-    y: absY
-  };
-}
-
-function findApproxMaxEditDataIndex(editData) {
+};
+var findApproxMaxEditDataIndex = function findApproxMaxEditDataIndex(editData) {
   var x = 0;
   var y = 0;
   var howManyEmpty = 0;
@@ -421,7 +360,7 @@ function findApproxMaxEditDataIndex(editData) {
 
     x += growthIncrement;
 
-    if (x > maxSearchableRowOrCol) {
+    if (x > MAX_SEARCHABLE_INDEX) {
       break;
     }
 
@@ -450,1823 +389,2439 @@ function findApproxMaxEditDataIndex(editData) {
 
     y += growthIncrement;
 
-    if (y > maxSearchableRowOrCol) {
+    if (y > MAX_SEARCHABLE_INDEX) {
       break;
     }
 
     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);
+  return [x, y];
+};
+var findInDisplayData = function findInDisplayData(displayData, start, direction) {
+  var step = getDirectionStep(direction);
+  var cell = clampXY(start, ORIGIN, MAX_XY);
+  var first = displayData.apply(void 0, addXY(cell, step));
   var firstFilled = first !== '' && first !== null && first !== undefined;
 
   if (!firstFilled) {
-    i.x += increment.x;
-    i.y += increment.y;
+    cell = addXY(cell, step);
   }
 
-  while (i.x <= max.x && i.y <= max.y && i.x >= 0 && i.y >= 0) {
-    var data = displayData(i.x, i.y);
+  var _cell = cell,
+      cellX = _cell[0],
+      cellY = _cell[1];
+
+  while (cellX <= MAX_SEARCHABLE_INDEX && cellY <= MAX_SEARCHABLE_INDEX && cellX >= 0 && cellY >= 0) {
+    var data = displayData(cellX, cellY);
 
     if (firstFilled && (data === '' || data === null || data === undefined)) {
-      return {
-        x: i.x - increment.x,
-        y: i.y - increment.y
-      };
+      return subXY(cell, step);
     }
 
     if (!firstFilled && data !== '' && data !== null && data !== undefined) {
-      return _extends({}, i);
+      return cell;
     }
 
-    i.x += increment.x;
-    i.y += increment.y;
-  }
+    var _cell2 = cell = addXY(cell, step);
 
-  return i;
-}
+    cellX = _cell2[0];
+    cellY = _cell2[1];
+  }
 
-function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, secondarySelections, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle) {
-  resizeCanvas(context.canvas);
-  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
-  context.fillStyle = 'white';
-  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
-  var yCoord1 = sheetStyle.columnHeaderHeight;
+  return maxXY(cell, [0, 0]);
+};
 
-  for (var _iterator2 = _createForOfIteratorHelperLoose(rowSizes.index), _step2; !(_step2 = _iterator2()).done;) {
-    var y = _step2.value;
-    var xCoord1 = sheetStyle.rowHeaderWidth;
+var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, onEdit, onCommit, onKnobAreaChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange) {
+  var _useState = React.useState(null),
+      hitTarget = _useState[0],
+      setHitTarget = _useState[1];
 
-    for (var _iterator9 = _createForOfIteratorHelperLoose(columnSizes.index), _step9; !(_step9 = _iterator9()).done;) {
-      var x = _step9.value;
-      var style = cellStyle(x, y);
+  var _useState2 = React.useState(null),
+      columnResize = _useState2[0],
+      setColumnResize = _useState2[1];
 
-      if (style.fillColor) {
-        context.fillStyle = style.fillColor;
-        context.fillRect(xCoord1, yCoord1, cellWidth(x), cellHeight(y));
-      }
+  var _useState3 = React.useState(null),
+      rowResize = _useState3[0],
+      setRowResize = _useState3[1];
 
-      xCoord1 += cellWidth(x);
-    }
+  var _useState4 = React.useState(null),
+      columnDrag = _useState4[0],
+      setColumnDrag = _useState4[1];
 
-    yCoord1 += cellHeight(y);
-  }
+  var _useState5 = React.useState(null),
+      rowDrag = _useState5[0],
+      setRowDrag = _useState5[1];
 
-  var hideKnob = false;
+  var _useState6 = React.useState(false),
+      draggingKnob = _useState6[0],
+      setDraggingKnob = _useState6[1];
 
-  var _normalizeSelection = normalizeSelection(selection),
-      selx1 = _normalizeSelection[0],
-      sely1 = _normalizeSelection[1],
-      selx2 = _normalizeSelection[2],
-      sely2 = _normalizeSelection[3];
+  var _useState7 = React.useState(false),
+      draggingSelection = _useState7[0],
+      setDraggingSelection = _useState7[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, sheetStyle);
-  var p2 = cellToAbsCoordinate(selx2, sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
-  p2.x += cellWidth(selx2);
-  p2.y += cellHeight(sely2);
+  var _useState8 = React.useState(false),
+      draggingRowSelection = _useState8[0],
+      setDraggingRowSelection = _useState8[1];
 
-  if (p1.x >= p2.x) {
-    p2.x = p1.x;
-    var currentCol = selx1;
+  var _useState9 = React.useState(false),
+      draggingColumnSelection = _useState9[0],
+      setDraggingColumnSelection = _useState9[1];
+
+  var hideRowHeaders = sheetStyle.hideRowHeaders,
+      hideColumnHeaders = sheetStyle.hideColumnHeaders;
+  var cellToPixel = cellLayout.cellToPixel,
+      getVersion = cellLayout.getVersion;
+  var version = getVersion();
+  var knobPosition = React.useMemo(function () {
+    var _normalizeSelection = normalizeSelection(selection),
+        _normalizeSelection$ = _normalizeSelection[1],
+        maxX = _normalizeSelection$[0],
+        maxY = _normalizeSelection$[1];
+
+    if (isRowSelection(selection)) {
+      return subXY(addXY(cellToPixel([0, maxY], [0, 1]), [SIZES.knobArea * 0.5, 0]), ONE_ONE);
+    }
+
+    if (isColumnSelection(selection)) {
+      return subXY(addXY(cellToPixel([maxX, 0], [1, 0]), [0, SIZES.knobArea * 0.5]), ONE_ONE);
+    }
+
+    if (isCellSelection(selection)) {
+      return subXY(cellToPixel([maxX, maxY], ONE_ONE), ONE_ONE);
+    }
+
+    return null;
+  }, [selection, cellToPixel, version]);
+  var refState = {
+    selection: selection,
+    knobArea: knobArea,
+    editMode: editMode,
+    editData: editData,
+    sourceData: sourceData,
+    cellLayout: cellLayout,
+    visibleCells: visibleCells,
+    knobPosition: knobPosition,
+    columnResize: columnResize,
+    rowResize: rowResize,
+    columnDrag: columnDrag,
+    rowDrag: rowDrag,
+    draggingKnob: draggingKnob,
+    draggingSelection: draggingSelection,
+    draggingRowSelection: draggingRowSelection,
+    draggingColumnSelection: draggingColumnSelection
+  };
+  var ref = React.useRef(refState);
+  ref.current = refState;
+  var getMousePosition = React.useCallback(function (e) {
+    if (!e.target || !(e.target instanceof Element)) {
+      return null;
+    }
 
-    while (columnSizes.index.includes(currentCol)) {
-      p2.x += cellWidth(currentCol);
-      currentCol++;
+    var rect = e.target.getBoundingClientRect();
+    var xy = [e.clientX - rect.left, e.clientY - rect.top];
+    return xy;
+  }, []);
+  var getScrollPosition = React.useCallback(function (e) {
+    if (!e.target || !(e.target instanceof Element)) {
+      return [0, 0];
     }
 
-    hideKnob = true;
-  }
+    var _e$target = e.target,
+        scrollLeft = _e$target.scrollLeft,
+        scrollTop = _e$target.scrollTop;
+    var xy = [scrollLeft, scrollTop];
+    return xy;
+  }, []);
+  var getMouseHit = React.useCallback(function (xy) {
+    var hitmap = hitmapRef.current;
+    if (!hitmap) return null;
 
-  if (p1.y >= p2.y) {
-    p2.y = p1.y;
-    var currentRow = sely1;
+    for (var _iterator = _createForOfIteratorHelperLoose(hitmap), _step; !(_step = _iterator()).done;) {
+      var object = _step.value;
+      var rect = object.rect;
 
-    while (rowSizes.index.includes(currentRow)) {
-      p2.y += cellHeight(currentRow);
-      currentRow++;
+      if (isPointInsideSelection(rect, xy)) {
+        return object;
+      }
     }
 
-    hideKnob = true;
-  }
-
-  if (selectionActive) {
-    context.fillStyle = selBackColor;
-
-    if (rowSelectionActive) {
-      var p1x = Math.max(-100, p1.x);
-      context.fillRect(p1x, p1.y, 100000, p2.y - p1.y);
-    } else if (colSelectionActive) {
-      var p1y = Math.max(0, p1.y);
-      context.fillRect(p1.x, p1y, p2.x - p1.x, 100000);
-    } else {
-      context.fillRect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
+    return null;
+  }, [hitmapRef]);
+  var onPointerLeave = React.useCallback(function () {
+    window.document.body.style.cursor = 'auto';
+  }, []);
+  var onPointerDown = React.useCallback(function (e) {
+    var _e$target2, _e$target2$setPointer;
+
+    var _ref$current = ref.current,
+        selection = _ref$current.selection,
+        _ref$current$cellLayo = _ref$current.cellLayout,
+        columnToPixel = _ref$current$cellLayo.columnToPixel,
+        rowToPixel = _ref$current$cellLayo.rowToPixel,
+        pixelToCell = _ref$current$cellLayo.pixelToCell,
+        getIndentX = _ref$current$cellLayo.getIndentX,
+        getIndentY = _ref$current$cellLayo.getIndentY,
+        _ref$current$visibleC = _ref$current.visibleCells,
+        columns = _ref$current$visibleC.columns,
+        rows = _ref$current$visibleC.rows,
+        knobPosition = _ref$current.knobPosition;
+    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);
+    if (!xy) return;
+    var x = xy[0],
+        y = xy[1];
+    var hitTarget = getMouseHit(xy);
+
+    if (hitTarget) {
+      setHitTarget(hitTarget);
+      return;
     }
-  }
 
-  if (!sheetStyle.hideRowHeaders) {
-    context.fillStyle = rowHeaderBackgroundColor;
-    context.fillRect(0, 0, sheetStyle.rowHeaderWidth, context.canvas.height);
+    var _normalizeSelection2 = normalizeSelection(selection),
+        _normalizeSelection2$ = _normalizeSelection2[0],
+        minX = _normalizeSelection2$[0],
+        minY = _normalizeSelection2$[1],
+        _normalizeSelection2$2 = _normalizeSelection2[1],
+        maxX = _normalizeSelection2$2[0],
+        maxY = _normalizeSelection2$2[1];
 
-    if (selectionActive) {
-      context.fillStyle = rowHeaderSelectedBackgroundColor;
-      context.fillRect(0, p1.y, sheetStyle.rowHeaderWidth, p2.y - p1.y);
-    }
-  }
+    var selectedColumns = [];
+    var selectedRows = [];
 
-  if (!sheetStyle.hideColumnHeaders) {
-    context.fillStyle = columnHeaderBackgroundColor;
-    context.fillRect(0, 0, context.canvas.width, sheetStyle.columnHeaderHeight);
-
-    if (selectionActive) {
-      context.fillStyle = columnHeaderSelectedBackgroundColor;
-      context.fillRect(p1.x, 0, p2.x - p1.x, sheetStyle.columnHeaderHeight);
+    for (var i = minX; i <= maxX; i++) {
+      selectedColumns.push(i);
     }
-  }
 
-  context.strokeStyle = gridColor;
-  context.lineWidth = 1;
-  var startX = sheetStyle.rowHeaderWidth;
-  var startY = sheetStyle.columnHeaderHeight;
-  var first = true;
-  var yGridlineEnd = sheetStyle.hideGridlines ? sheetStyle.columnHeaderHeight : context.canvas.height;
+    for (var _i = minY; _i <= maxY; _i++) {
+      selectedRows.push(_i);
+    }
 
-  for (var _iterator3 = _createForOfIteratorHelperLoose(columnSizes.index), _step3; !(_step3 = _iterator3()).done;) {
-    var _col = _step3.value;
-    context.beginPath();
-    context.moveTo(startX, 0);
+    if (!hideColumnHeaders && y < getIndentY()) {
+      if (onColumnOrderChange) {
+        var start = columnToPixel(minX) + SIZES.resizeZone;
+        var end = columnToPixel(maxX, 1) - SIZES.resizeZone;
 
-    if (first) {
-      if (!sheetStyle.hideRowHeaders) {
-        context.lineTo(startX, context.canvas.height);
-      }
+        if (isInRange(x, start, end)) {
+          for (var _iterator2 = _createForOfIteratorHelperLoose(columns), _step2; !(_step2 = _iterator2()).done;) {
+            var index = _step2.value;
 
-      first = false;
-    } else {
-      context.lineTo(startX, yGridlineEnd);
-    }
+            var _start = columnToPixel(index, 0);
 
-    context.stroke();
-    startX += cellWidth(_col);
-  }
+            var _end = columnToPixel(index, 1);
 
-  var xGridlineEnd = sheetStyle.hideGridlines ? sheetStyle.rowHeaderWidth : context.canvas.width;
-  first = true;
+            if (isColumnSelection(selection) && isInRange(x, _start, _end) && isInRange(index, minX, maxX) && canOrderColumn(index)) {
+              window.document.body.style.cursor = 'grabbing';
+              var indices = selectedColumns;
+              var size = columnToPixel(maxX, 1) - columnToPixel(minX);
 
-  for (var _iterator4 = _createForOfIteratorHelperLoose(rowSizes.index), _step4; !(_step4 = _iterator4()).done;) {
-    var _row = _step4.value;
-    context.beginPath();
-    context.moveTo(0, startY);
+              var _getScrollPosition = getScrollPosition(e),
+                  scroll = _getScrollPosition[0];
 
-    if (first) {
-      if (!sheetStyle.hideColumnHeaders) {
-        context.lineTo(context.canvas.width, startY);
+              setColumnDrag({
+                anchor: x,
+                scroll: scroll,
+                size: size,
+                indices: indices
+              });
+              onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, 0]);
+              return;
+            }
+          }
+        }
       }
 
-      first = false;
-    } else {
-      context.lineTo(xGridlineEnd, startY);
-    }
+      if (onCellWidthChange) {
+        for (var _iterator3 = _createForOfIteratorHelperLoose(columns), _step3; !(_step3 = _iterator3()).done;) {
+          var _index = _step3.value;
+          var edge = columnToPixel(_index, 1);
 
-    context.stroke();
-    startY += cellHeight(_row);
-  }
+          if (Math.abs(edge - x) < SIZES.resizeZone && canSizeColumn(_index)) {
+            window.document.body.style.cursor = 'col-resize';
 
-  if (!sheetStyle.hideRowHeaders) {
-    startY = sheetStyle.columnHeaderHeight;
-    context.textBaseline = 'middle';
-    context.textAlign = 'center';
-    context.font = defaultCellStyle.fontSize + 'px ' + defaultCellStyle.fontFamily;
-    context.fillStyle = rowHeaderTextColor;
+            var asGroup = isColumnSelection(selection) && maxX === _index;
 
-    for (var _iterator5 = _createForOfIteratorHelperLoose(rowSizes.index), _step5; !(_step5 = _iterator5()).done;) {
-      var row = _step5.value;
-      var cellContent = row + 1;
-      var chStyle = {};
+            var _indices = asGroup ? selectedColumns : [_index];
 
-      if (rowSelectionActive && sely1 <= row && sely2 >= row) {
-        chStyle = _extends({}, chStyle, {
-          backgroundColor: rowColHeaderSelectionColor
-        });
-      }
+            var _size = asGroup ? columnToPixel(maxX, 1) - columnToPixel(minX) : columnToPixel(_index, 1) - columnToPixel(_index);
 
-      drawCell(context, '' + cellContent, chStyle, defaultColumnHeaderStyle, 0, startY, sheetStyle.rowHeaderWidth, cellHeight(row));
-      startY += cellHeight(row);
+            var _getScrollPosition2 = getScrollPosition(e),
+                _scroll = _getScrollPosition2[0];
+
+            setColumnResize({
+              anchor: x,
+              scroll: _scroll,
+              size: _size,
+              indices: _indices
+            });
+            return;
+          }
+        }
+      }
     }
-  }
 
-  if (!sheetStyle.hideColumnHeaders) {
-    startX = sheetStyle.rowHeaderWidth;
-    context.textBaseline = 'middle';
-    context.textAlign = 'center';
+    if (!hideRowHeaders && x < getIndentX()) {
+      if (onRowOrderChange) {
+        var _start2 = rowToPixel(minY) + SIZES.resizeZone;
 
-    for (var _iterator6 = _createForOfIteratorHelperLoose(columnSizes.index), _step6; !(_step6 = _iterator6()).done;) {
-      var col = _step6.value;
-      var cw = cellWidth(col);
-      var ch = columnHeaders(col);
-      var chcontent = ch !== null ? ch : excelHeaderString(col + 1);
+        var _end2 = rowToPixel(maxY, 1) - SIZES.resizeZone;
 
-      var _chStyle = columnHeaderStyle(col);
+        if (isInRange(y, _start2, _end2)) {
+          for (var _iterator4 = _createForOfIteratorHelperLoose(rows), _step4; !(_step4 = _iterator4()).done;) {
+            var _index2 = _step4.value;
 
-      if (colSelectionActive && selx1 <= col && selx2 >= col) {
-        _chStyle = _extends({}, _chStyle, {
-          backgroundColor: rowColHeaderSelectionColor
-        });
-      }
+            var _start3 = rowToPixel(_index2, 0);
 
-      drawCell(context, chcontent, _chStyle, defaultColumnHeaderStyle, startX, 0, cw, sheetStyle.columnHeaderHeight);
-      startX += cw;
-    }
-  }
+            var _end3 = rowToPixel(_index2, 1);
 
-  if (selectionActive) {
-    context.strokeStyle = selBorderColor;
-    context.lineWidth = 1;
-    context.beginPath();
-
-    if (rowSelectionActive) {
-      var _p1x = Math.max(-100, p1.x);
+            if (isRowSelection(selection) && isInRange(y, _start3, _end3) && isInRange(_index2, minY, maxY) && canOrderRow(_index2)) {
+              window.document.body.style.cursor = 'grabbing';
+              var _indices2 = selectedRows;
 
-      context.rect(_p1x, p1.y, 100000, p2.y - p1.y);
-    } else if (colSelectionActive) {
-      var _p1y = Math.max(-100, p1.y);
+              var _size2 = rowToPixel(maxY, 1) - rowToPixel(minY);
 
-      context.rect(p1.x, _p1y, p2.x - p1.x, 100000);
-    } else {
-      context.rect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
-    }
+              var _getScrollPosition3 = getScrollPosition(e),
+                  _scroll2 = _getScrollPosition3[1];
 
-    context.stroke();
-  }
+              setRowDrag({
+                anchor: y,
+                scroll: _scroll2,
+                size: _size2,
+                indices: _indices2
+              });
+              onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, 0]);
+              return;
+            }
+          }
+        }
+      }
 
-  for (var _iterator7 = _createForOfIteratorHelperLoose(secondarySelections), _step7; !(_step7 = _iterator7()).done;) {
-    var secondarySelection = _step7.value;
+      if (onCellHeightChange) {
+        for (var _iterator5 = _createForOfIteratorHelperLoose(rows), _step5; !(_step5 = _iterator5()).done;) {
+          var _index3 = _step5.value;
 
-    var _normalizeSelection2 = normalizeSelection(secondarySelection.span),
-        _selx = _normalizeSelection2[0],
-        _sely = _normalizeSelection2[1],
-        _selx2 = _normalizeSelection2[2],
-        _sely2 = _normalizeSelection2[3];
+          var _edge = rowToPixel(_index3, 1);
 
-    var secondarySelectionActive = _selx !== -1 && _selx2 !== -1 || _sely !== -1 && _sely2 !== -1;
+          if (Math.abs(_edge - y) < SIZES.resizeZone && canSizeRow(_index3)) {
+            window.document.body.style.cursor = 'row-resize';
 
-    if (!secondarySelectionActive) {
-      continue;
-    }
+            var _asGroup = isRowSelection(selection) && maxY === _index3;
 
-    var rowSecondarySelectionActive = _selx === -1 && _selx2 === -1 && _sely !== -1 && _sely2 !== -1;
-    var colSecondarySelectionActive = _selx !== -1 && _selx2 !== -1 && _sely === -1 && _sely2 === -1;
+            var _indices3 = _asGroup ? selectedRows : [_index3];
 
-    var _p = cellToAbsCoordinate(_selx, _sely, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
+            var _size3 = _asGroup ? rowToPixel(maxY, 1) - rowToPixel(minY) : rowToPixel(_index3, 1) - rowToPixel(_index3);
 
-    var _p2 = cellToAbsCoordinate(_selx2, _sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
+            var _getScrollPosition4 = getScrollPosition(e),
+                _scroll3 = _getScrollPosition4[1];
 
-    _p2.x += cellWidth(_selx2);
-    _p2.y += cellHeight(_sely2);
+            setRowResize({
+              anchor: y,
+              scroll: _scroll3,
+              size: _size3,
+              indices: _indices3
+            });
+            return;
+          }
+        }
+      }
+    }
 
-    if (_p.x >= _p2.x) {
-      _p2.x = _p.x;
-      var _currentCol = _selx;
+    if (knobPosition) {
+      var knobX = knobPosition[0],
+          knobY = knobPosition[1];
 
-      while (columnSizes.index.includes(_currentCol)) {
-        _p2.x += cellWidth(_currentCol);
-        _currentCol++;
+      if (Math.abs(x - knobX) < SIZES.knobArea && Math.abs(y - knobY) < SIZES.knobArea) {
+        setDraggingKnob(true);
+        onKnobAreaChange === null || onKnobAreaChange === void 0 ? void 0 : onKnobAreaChange(selection);
+        return;
       }
     }
 
-    if (_p.y >= _p2.y) {
-      _p2.y = _p.y;
-      var _currentRow = _sely;
+    var head = pixelToCell(xy);
+    var anchor = e.shiftKey ? [].concat(selection[0]) : head;
 
-      while (rowSizes.index.includes(_currentRow)) {
-        _p2.y += cellHeight(_currentRow);
-        _currentRow++;
+    if (editMode) {
+      if (!dontCommitEditOnSelectionChange) {
+        onCommit === null || onCommit === void 0 ? void 0 : onCommit();
+      }
+    }
+
+    var scrollToHead = true;
+
+    if (!hideRowHeaders && x < getIndentX()) {
+      scrollToHead = false;
+      setDraggingRowSelection(true);
+      anchor[0] = -1;
+      head[0] = -1;
+    }
+
+    if (!hideColumnHeaders && y < getIndentY()) {
+      scrollToHead = false;
+      setDraggingColumnSelection(true);
+      anchor[1] = -1;
+      head[1] = -1;
+    }
+
+    setDraggingSelection(true);
+    onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([anchor, head], scrollToHead);
+  }, [getMousePosition, getScrollPosition, getMouseHit, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onKnobAreaChange, onSelectionChange, onCommit, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow]);
+  var onPointerUp = React.useCallback(function (e) {
+    var _ref$current2 = ref.current,
+        knobArea = _ref$current2.knobArea,
+        selection = _ref$current2.selection,
+        sourceData = _ref$current2.sourceData,
+        editData = _ref$current2.editData,
+        columnDrag = _ref$current2.columnDrag,
+        rowDrag = _ref$current2.rowDrag,
+        draggingKnob = _ref$current2.draggingKnob,
+        _ref$current2$cellLay = _ref$current2.cellLayout,
+        pixelToColumn = _ref$current2$cellLay.pixelToColumn,
+        pixelToRow = _ref$current2$cellLay.pixelToRow,
+        getIndentX = _ref$current2$cellLay.getIndentX,
+        getIndentY = _ref$current2$cellLay.getIndentY;
+
+    if (knobArea && draggingKnob) {
+      var changes = parseKnobOperation(knobArea, selection, sourceData, editData);
+      onChange === null || onChange === void 0 ? void 0 : onChange(changes);
+      onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(knobArea);
+      onKnobAreaChange === null || onKnobAreaChange === void 0 ? void 0 : onKnobAreaChange(null);
+    }
+
+    var xy = getMousePosition(e);
+
+    if (xy && (columnDrag || rowDrag)) {
+      window.document.body.style.cursor = 'auto';
+      onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange(null);
+      onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(null);
+      var x = xy[0],
+          y = xy[1];
+
+      var _normalizeSelection3 = normalizeSelection(selection),
+          _normalizeSelection3$ = _normalizeSelection3[0],
+          minX = _normalizeSelection3$[0],
+          minY = _normalizeSelection3$[1],
+          _normalizeSelection3$2 = _normalizeSelection3[1],
+          maxX = _normalizeSelection3$2[0],
+          maxY = _normalizeSelection3$2[1];
+
+      var cellX = pixelToColumn(Math.max(x, getIndentX()), 0.5);
+      var cellY = pixelToRow(Math.max(y, getIndentY()), 0.5);
+
+      if (columnDrag) {
+        var indices = columnDrag.indices;
+        var insideSelection = cellX >= minX && cellX <= maxX + 1;
+
+        if (!insideSelection) {
+          var order = cellX > minX ? cellX - indices.length : cellX;
+          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[order, minY], [order + maxX - minX, maxY]]);
+          onColumnOrderChange === null || onColumnOrderChange === void 0 ? void 0 : onColumnOrderChange(indices, order);
+          onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(Math.min(minX, order));
+        }
       }
-    }
 
-    context.strokeStyle = secondarySelection.color;
-    context.lineWidth = 1;
-    context.beginPath();
+      if (rowDrag) {
+        var _indices4 = rowDrag.indices;
 
-    if (rowSecondarySelectionActive) {
-      var _p1x2 = Math.max(-100, _p.x);
+        var _insideSelection = cellY >= minY && cellY <= maxY + 1;
 
-      context.rect(_p1x2, _p.y, 100000, _p2.y - _p.y);
-    } else if (colSecondarySelectionActive) {
-      var _p1y2 = Math.max(-100, _p.y);
+        if (!_insideSelection) {
+          var _order = cellY > minY ? cellY - _indices4.length : cellY;
 
-      context.rect(_p.x, _p1y2, _p2.x - _p.x, 100000);
-    } else {
-      context.rect(_p.x, _p.y, _p2.x - _p.x, _p2.y - _p.y);
+          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[minX, _order], [maxX, _order + maxY - minY]]);
+          onRowOrderChange === null || onRowOrderChange === void 0 ? void 0 : onRowOrderChange(_indices4, _order);
+          onInvalidateRow === null || onInvalidateRow === void 0 ? void 0 : onInvalidateRow(Math.min(minY, _order));
+        }
+      }
     }
 
-    context.stroke();
-  }
+    setDraggingSelection(false);
+    setDraggingRowSelection(false);
+    setDraggingColumnSelection(false);
+    setDraggingKnob(false);
+    setColumnResize(null);
+    setColumnDrag(null);
+    setRowResize(null);
+    setRowDrag(null);
+    if (!xy || !hitTarget) return;
+    setHitTarget(null);
+
+    if (hitTarget === getMouseHit(xy)) {
+      var _obj$onClick;
+
+      var obj = hitTarget.obj;
+      (_obj$onClick = obj.onClick) === null || _obj$onClick === void 0 ? void 0 : _obj$onClick.call(obj, e);
+    }
+  }, [getMousePosition, getMouseHit, onChange, onSelectionChange, onKnobAreaChange, onDropTargetChange, onColumnOrderChange, onRowOrderChange]);
+  var onPointerMove = React.useCallback(function (e) {
+    var _ref$current3 = ref.current,
+        selection = _ref$current3.selection,
+        visibleCells = _ref$current3.visibleCells,
+        knobPosition = _ref$current3.knobPosition,
+        columnResize = _ref$current3.columnResize,
+        columnDrag = _ref$current3.columnDrag,
+        rowResize = _ref$current3.rowResize,
+        rowDrag = _ref$current3.rowDrag,
+        draggingKnob = _ref$current3.draggingKnob,
+        draggingSelection = _ref$current3.draggingSelection,
+        draggingColumnSelection = _ref$current3.draggingColumnSelection,
+        draggingRowSelection = _ref$current3.draggingRowSelection,
+        _ref$current3$cellLay = _ref$current3.cellLayout,
+        columnToPixel = _ref$current3$cellLay.columnToPixel,
+        rowToPixel = _ref$current3$cellLay.rowToPixel,
+        pixelToCell = _ref$current3$cellLay.pixelToCell,
+        pixelToColumn = _ref$current3$cellLay.pixelToColumn,
+        pixelToRow = _ref$current3$cellLay.pixelToRow,
+        getIndentX = _ref$current3$cellLay.getIndentX,
+        getIndentY = _ref$current3$cellLay.getIndentY;
+    var xy = getMousePosition(e);
+    if (!xy) return;
+    window.document.body.style.cursor = 'auto';
+    var hitTarget = getMouseHit(xy);
+
+    if (hitTarget) {
+      window.document.body.style.cursor = 'pointer';
+    } else if (columnDrag || rowDrag) {
+      window.document.body.style.cursor = 'grabbing';
+    } else if (columnResize) {
+      window.document.body.style.cursor = 'col-resize';
+      e.preventDefault();
+    } else if (rowResize) {
+      window.document.body.style.cursor = 'row-resize';
+      e.preventDefault();
+    } else if (draggingRowSelection || draggingColumnSelection) {
+      e.preventDefault();
+    }
 
-  if (knobDragInProgress) {
-    var kx1 = knobArea.x1;
-    var kx2 = knobArea.x2;
+    var columns = visibleCells.columns,
+        rows = visibleCells.rows;
+    var x = xy[0],
+        y = xy[1];
 
-    if (knobArea.x1 > knobArea.x2) {
-      kx1 = knobArea.x2;
-      kx2 = knobArea.x1;
-    }
+    var _normalizeSelection4 = normalizeSelection(selection),
+        _normalizeSelection4$ = _normalizeSelection4[0],
+        minX = _normalizeSelection4$[0],
+        minY = _normalizeSelection4$[1],
+        _normalizeSelection4$2 = _normalizeSelection4[1],
+        maxX = _normalizeSelection4$2[0],
+        maxY = _normalizeSelection4$2[1];
 
-    var ky1 = knobArea.y1;
-    var ky2 = knobArea.y2;
+    var isDragging = columnResize || columnDrag || rowResize || rowDrag || draggingRowSelection || draggingColumnSelection;
 
-    if (knobArea.y1 > knobArea.y2) {
-      ky1 = knobArea.y2;
-      ky2 = knobArea.y1;
-    }
+    if (!isDragging) {
+      if (!hideColumnHeaders && y < getIndentY()) {
+        if (onColumnOrderChange) {
+          var start = columnToPixel(minX) + SIZES.resizeZone;
+          var end = columnToPixel(maxX, 1) - SIZES.resizeZone;
 
-    var knobPoint1 = cellToAbsCoordinate(kx1, ky1, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
-    var knobPoint2 = cellToAbsCoordinate(kx2 + 1, ky2 + 1, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
-    context.strokeStyle = knobAreaBorderColor;
-    context.setLineDash([3, 3]);
-    context.lineWidth = 1;
-    context.beginPath();
+          if (isInRange(x, start, end)) {
+            for (var _iterator6 = _createForOfIteratorHelperLoose(columns), _step6; !(_step6 = _iterator6()).done;) {
+              var index = _step6.value;
 
-    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);
-    }
+              var _start4 = columnToPixel(index);
 
-    context.stroke();
-    context.setLineDash([]);
-  }
+              var _end4 = columnToPixel(index, 1);
 
-  if (selectionActive && !hideKnob) {
-    context.fillStyle = selBorderColor;
-    context.fillRect(knobCoordinates.x - knobSize * 0.5, knobCoordinates.y - knobSize * 0.5, knobSize, knobSize);
-  }
+              if (!draggingColumnSelection && isColumnSelection(selection) && isInRange(x, _start4, _end4) && isInRange(index, minX, maxX) && canOrderColumn(index)) {
+                window.document.body.style.cursor = 'grab';
+                return;
+              }
+            }
+          }
+        }
 
-  context.textBaseline = 'middle';
-  var yCoord = sheetStyle.columnHeaderHeight;
+        if (onCellWidthChange) {
+          for (var _iterator7 = _createForOfIteratorHelperLoose(columns), _step7; !(_step7 = _iterator7()).done;) {
+            var _index4 = _step7.value;
+            var edge = columnToPixel(_index4, 1);
+
+            if (Math.abs(edge - x) < SIZES.resizeZone && canSizeColumn(_index4)) {
+              window.document.body.style.cursor = 'col-resize';
+              return;
+            }
+          }
+        }
+      }
+
+      if (!hideRowHeaders && x < getIndentX()) {
+        if (onRowOrderChange) {
+          var _start5 = rowToPixel(minY) + SIZES.resizeZone;
+
+          var _end5 = rowToPixel(maxY, 1) - SIZES.resizeZone;
 
-  for (var _iterator8 = _createForOfIteratorHelperLoose(rowSizes.index), _step8; !(_step8 = _iterator8()).done;) {
-    var _y = _step8.value;
-    var xCoord = sheetStyle.rowHeaderWidth;
+          if (isInRange(y, _start5, _end5)) {
+            for (var _iterator8 = _createForOfIteratorHelperLoose(rows), _step8; !(_step8 = _iterator8()).done;) {
+              var _index5 = _step8.value;
 
-    var _ch = cellHeight(_y);
+              var _start6 = rowToPixel(_index5);
 
-    for (var _iterator10 = _createForOfIteratorHelperLoose(columnSizes.index), _step10; !(_step10 = _iterator10()).done;) {
-      var _x = _step10.value;
+              var _end6 = rowToPixel(_index5, 1);
 
-      var _cellContent = displayData(_x, _y);
+              if (!draggingRowSelection && isRowSelection(selection) && isInRange(y, _start6, _end6) && isInRange(_index5, minY, maxY) && canOrderRow(_index5)) {
+                window.document.body.style.cursor = 'grab';
+                return;
+              }
+            }
+          }
+        }
 
-      var _cw = cellWidth(_x);
+        if (onCellHeightChange) {
+          for (var _iterator9 = _createForOfIteratorHelperLoose(rows), _step9; !(_step9 = _iterator9()).done;) {
+            var _index6 = _step9.value;
 
-      if (_cellContent !== null && _cellContent !== undefined) {
-        var _style = cellStyle(_x, _y);
+            var _edge2 = rowToPixel(_index6, 1);
 
-        drawCell(context, _cellContent, _style, defaultCellStyle, xCoord, yCoord, _cw, _ch);
+            if (Math.abs(_edge2 - y) < SIZES.resizeZone && canSizeRow(_index6)) {
+              window.document.body.style.cursor = 'row-resize';
+              return;
+            }
+          }
+        }
       }
 
-      xCoord += _cw;
+      if (knobPosition) {
+        var knobX = knobPosition[0],
+            knobY = knobPosition[1];
+
+        if (Math.abs(x - knobX) < SIZES.knobArea && Math.abs(y - knobY) < SIZES.knobArea) {
+          window.document.body.style.cursor = 'crosshair';
+          return;
+        }
+      }
     }
 
-    yCoord += _ch;
-  }
-}
+    if (columnResize) {
+      if (onCellWidthChange) {
+        var size = columnResize.size,
+            anchor = columnResize.anchor,
+            scroll = columnResize.scroll,
+            indices = columnResize.indices;
 
-function Sheet(props) {
-  var _props$sheetStyle9, _props$sheetStyle10, _props$sheetStyle11, _props$sheetStyle12, _props$sheetStyle13, _props$sheetStyle14, _props$inputComponent;
+        var _getScrollPosition5 = getScrollPosition(e),
+            currentScroll = _getScrollPosition5[0];
 
-  var canvasRef = React.useRef(null);
-  var overlayRef = React.useRef(null);
-  var copyPasteTextAreaRef = React.useRef(null);
+        var newWidth = Math.max(size + x - anchor + scroll - currentScroll, SIZES.minimumWidth * indices.length);
+        onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(indices[0] - 1);
+        onCellWidthChange(indices, newWidth / indices.length);
+      }
 
-  var _useState = React.useState({
-    x: 5000,
-    y: 5000
-  }),
-      maxScroll = _useState[0],
-      setMaxScroll = _useState[1];
+      return;
+    }
 
-  var _useState2 = React.useState({
-    x: 0,
-    y: 0
-  }),
-      dataOffset = _useState2[0],
-      setDataOffset = _useState2[1];
+    if (rowResize) {
+      if (onCellHeightChange) {
+        var _size4 = rowResize.size,
+            _anchor = rowResize.anchor,
+            _scroll4 = rowResize.scroll,
+            _indices5 = rowResize.indices;
 
-  var _useState3 = React.useState({
-    x1: -1,
-    y1: -1,
-    x2: -1,
-    y2: -1
-  }),
-      selection = _useState3[0],
-      setSelection = _useState3[1];
+        var _getScrollPosition6 = getScrollPosition(e),
+            _currentScroll = _getScrollPosition6[1];
 
-  var _useState4 = React.useState({
-    x1: -1,
-    y1: -1,
-    x2: -1,
-    y2: -1
-  }),
-      knobArea = _useState4[0],
-      setKnobArea = _useState4[1];
+        var newHeight = Math.max(_size4 + y - _anchor + _scroll4 - _currentScroll, SIZES.minimumHeight * _indices5.length);
+        onInvalidateRow === null || onInvalidateRow === void 0 ? void 0 : onInvalidateRow(_indices5[0] - 1);
+        onCellHeightChange(_indices5, newHeight / _indices5.length);
+      }
 
-  var _useState5 = React.useState({
-    x: -1,
-    y: -1
-  }),
-      editCell = _useState5[0],
-      setEditCell = _useState5[1];
+      return;
+    }
 
-  var _useState6 = React.useState(''),
-      editValue = _useState6[0],
-      setEditValue = _useState6[1];
+    if (draggingSelection) {
+      var _anchor2 = selection[0];
+      var head = pixelToCell(xy);
+      var anchorX = _anchor2[0],
+          anchorY = _anchor2[1];
+      var headX = head[0],
+          headY = head[1];
 
-  var _useState7 = React.useState(''),
-      editKey = _useState7[0],
-      setEditKey = _useState7[1];
+      if (draggingRowSelection) {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[-1, anchorY], [-1, Math.max(0, headY)]], false);
+      } else if (draggingColumnSelection) {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[anchorX, -1], [Math.max(0, headX), -1]], false);
+      } else {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([maxXY(_anchor2, ORIGIN), maxXY(head, ORIGIN)], false);
+      }
+    }
 
-  var _useState8 = React.useState(false),
-      arrowKeyCommitMode = _useState8[0],
-      setArrowKeyCommitMode = _useState8[1];
+    if (draggingKnob) {
+      window.document.body.style.cursor = 'crosshair';
 
-  var _useState9 = React.useState(false),
-      shiftKeyDown = _useState9[0],
-      setShiftKeyDown = _useState9[1];
+      var _pixelToCell = pixelToCell(xy),
+          cellX = _pixelToCell[0],
+          cellY = _pixelToCell[1];
+
+      var _normalizeSelection5 = normalizeSelection(selection),
+          _normalizeSelection5$ = _normalizeSelection5[0],
+          _minX = _normalizeSelection5$[0],
+          _minY = _normalizeSelection5$[1],
+          _normalizeSelection5$2 = _normalizeSelection5[1],
+          _maxX = _normalizeSelection5$2[0],
+          _maxY = _normalizeSelection5$2[1];
+
+      var xCellDiff = Math.min(cellX - _minX, _maxX - cellX, 0);
+      var yCellDiff = Math.min(cellY - _minY, _maxY - cellY, 0);
+
+      if (isMaybeRowSelection(selection) || xCellDiff > yCellDiff) {
+        if (cellY < _minY) {
+          _minY = cellY;
+        } else if (cellY > _maxY) {
+          _maxY = cellY;
+        }
+      } else {
+        if (cellX < _minX) {
+          _minX = cellX;
+        } else if (cellX > _maxX) {
+          _maxX = cellX;
+        }
+      }
 
-  var _useState10 = React.useState(false),
-      knobDragInProgress = _useState10[0],
-      setKnobDragInProgress = _useState10[1];
+      onKnobAreaChange === null || onKnobAreaChange === void 0 ? void 0 : onKnobAreaChange([[_minX, _minY], [_maxX, _maxY]]);
+    }
 
-  var _useState11 = React.useState(false),
-      selectionInProgress = _useState11[0],
-      setSelectionInProgress = _useState11[1];
+    if (columnDrag || rowDrag) {
+      var _x = xy[0],
+          _y = xy[1];
 
-  var _useState12 = React.useState(null),
-      columnResize = _useState12[0],
-      setColumnResize = _useState12[1];
+      if (columnDrag) {
+        var _cellX = pixelToColumn(Math.max(_x, getIndentX()), 0.5);
 
-  var _useState13 = React.useState(null),
-      rowResize = _useState13[0],
-      setRowResize = _useState13[1];
+        var insideSelection = _cellX >= minX && _cellX <= maxX + 1;
+        var _anchor3 = columnDrag.anchor,
+            _scroll5 = columnDrag.scroll;
+        var shift = _x - _anchor3;
 
-  var _useState14 = React.useState(false),
-      rowSelectionInProgress = _useState14[0],
-      setRowSelectionInProgress = _useState14[1];
+        var _getScrollPosition7 = getScrollPosition(e),
+            _currentScroll2 = _getScrollPosition7[0];
 
-  var _useState15 = React.useState(false),
-      columnSelectionInProgress = _useState15[0],
-      setColumnSelectionInProgress = _useState15[1];
+        onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([shift + _currentScroll2 - _scroll5, 0]);
+        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(insideSelection ? null : [[_cellX, -1], [_cellX, -1]]);
+      }
 
-  var _useState16 = React.useState({
-    x: -1,
-    y: -1,
-    hitTarget: null
-  }),
-      buttonClickMouseDownCoordinates = _useState16[0],
-      setButtonClickMouseDownCoordinates = _useState16[1];
+      if (rowDrag) {
+        var _cellY = pixelToRow(Math.max(_y, getIndentY()), 0.5);
 
-  var _useResizeObserver = useResizeObserver({
-    ref: canvasRef
-  }),
-      _useResizeObserver$wi = _useResizeObserver.width,
-      canvasWidth = _useResizeObserver$wi === void 0 ? 3000 : _useResizeObserver$wi,
-      _useResizeObserver$he = _useResizeObserver.height,
-      canvasHeight = _useResizeObserver$he === void 0 ? 3000 : _useResizeObserver$he;
+        var _insideSelection2 = _cellY >= minY && _cellY <= maxY + 1;
 
-  var cellWidth = React.useMemo(function () {
-    return createRowOrColumnPropFunction(props.cellWidth, 100);
-  }, [props.cellWidth]);
-  var cellHeight = React.useMemo(function () {
-    return createRowOrColumnPropFunction(props.cellHeight, 22);
-  }, [props.cellHeight]);
-  var columnHeaders = React.useMemo(function () {
-    return createRowOrColumnPropFunction(props.columnHeaders, null);
-  }, [props.columnHeaders]);
-  var columnHeaderStyle = React.useMemo(function () {
-    return createRowOrColumnPropFunction(props.columnHeaderStyle, {});
-  }, [props.columnHeaderStyle]);
-  var cellReadOnly = React.useMemo(function () {
-    return createCellPropFunction(props.readOnly, false);
-  }, [props.readOnly]);
-  var sourceData = React.useMemo(function () {
-    return createCellPropFunction(props.sourceData, null);
-  }, [props.sourceData]);
-  var displayData = React.useMemo(function () {
-    return createCellPropFunction(props.displayData, '');
-  }, [props.displayData]);
-  var editData = React.useMemo(function () {
-    return createCellPropFunction(props.editData, '');
-  }, [props.editData]);
-  var editKeys = React.useMemo(function () {
-    return createCellPropFunction(props.editKeys, '');
-  }, [props.editKeys]);
-  var cellStyle = React.useMemo(function () {
-    return createCellPropFunction(props.cellStyle, defaultCellStyle);
-  }, [props.cellStyle]);
-  var sheetStyle = React.useMemo(function () {
-    var _props$sheetStyle, _props$sheetStyle2, _props$sheetStyle3, _props$sheetStyle4, _props$sheetStyle5, _props$sheetStyle6, _props$sheetStyle7, _props$sheetStyle8;
+        var _anchor4 = rowDrag.anchor,
+            _scroll6 = rowDrag.scroll;
 
-    return {
-      freezeColumns: ((_props$sheetStyle = props.sheetStyle) === null || _props$sheetStyle === void 0 ? void 0 : _props$sheetStyle.freezeColumns) || 0,
-      freezeRows: ((_props$sheetStyle2 = props.sheetStyle) === null || _props$sheetStyle2 === void 0 ? void 0 : _props$sheetStyle2.freezeRows) || 0,
-      hideColumnHeaders: ((_props$sheetStyle3 = props.sheetStyle) === null || _props$sheetStyle3 === void 0 ? void 0 : _props$sheetStyle3.hideColumnHeaders) || false,
-      hideRowHeaders: ((_props$sheetStyle4 = props.sheetStyle) === null || _props$sheetStyle4 === void 0 ? void 0 : _props$sheetStyle4.hideRowHeaders) || false,
-      hideGridlines: ((_props$sheetStyle5 = props.sheetStyle) === null || _props$sheetStyle5 === void 0 ? void 0 : _props$sheetStyle5.hideGridlines) || false,
-      columnHeaderHeight: (_props$sheetStyle6 = props.sheetStyle) !== null && _props$sheetStyle6 !== void 0 && _props$sheetStyle6.hideColumnHeaders ? 1 : kColumnHeaderHeight,
-      rowHeaderWidth: (_props$sheetStyle7 = props.sheetStyle) !== null && _props$sheetStyle7 !== void 0 && _props$sheetStyle7.hideRowHeaders ? 1 : kRowHeaderWidth,
-      hideScrollBars: ((_props$sheetStyle8 = props.sheetStyle) === null || _props$sheetStyle8 === void 0 ? void 0 : _props$sheetStyle8.hideScrollBars) || false
-    };
-  }, [(_props$sheetStyle9 = props.sheetStyle) === null || _props$sheetStyle9 === void 0 ? void 0 : _props$sheetStyle9.freezeColumns, (_props$sheetStyle10 = props.sheetStyle) === null || _props$sheetStyle10 === void 0 ? void 0 : _props$sheetStyle10.freezeRows, (_props$sheetStyle11 = props.sheetStyle) === null || _props$sheetStyle11 === void 0 ? void 0 : _props$sheetStyle11.hideColumnHeaders, (_props$sheetStyle12 = props.sheetStyle) === null || _props$sheetStyle12 === void 0 ? void 0 : _props$sheetStyle12.hideGridlines, (_props$sheetStyle13 = props.sheetStyle) === null || _props$sheetStyle13 === void 0 ? void 0 : _props$sheetStyle13.hideRowHeaders, (_props$sheetStyle14 = props.sheetStyle) === null || _props$sheetStyle14 === void 0 ? void 0 : _props$sheetStyle14.hideScrollBars]);
-  React.useEffect(function () {
-    var currEditKey = editKeys ? editKeys(editCell.x, editCell.y) : '';
+        var _shift = _y - _anchor4;
 
-    if (currEditKey !== editKey) {
-      setEditCell({
-        x: -1,
-        y: -1
-      });
-      setEditKey('');
-    }
-  }, [editKeys]);
-  var columnSizes = React.useMemo(function () {
-    return calculateRowsOrColsSizes(sheetStyle.freezeColumns, cellWidth, sheetStyle.rowHeaderWidth, dataOffset.x, canvasWidth);
-  }, [sheetStyle, cellWidth, dataOffset.x, canvasWidth]);
-  var rowSizes = React.useMemo(function () {
-    return calculateRowsOrColsSizes(sheetStyle.freezeRows, cellHeight, sheetStyle.columnHeaderHeight, dataOffset.y, canvasHeight);
-  }, [sheetStyle, cellHeight, dataOffset.y, canvasHeight]);
-  React.useEffect(function () {
-    if (props.onScrollChange) {
-      props.onScrollChange([].concat(rowSizes.index), [].concat(columnSizes.index));
+        var _getScrollPosition8 = getScrollPosition(e),
+            _currentScroll3 = _getScrollPosition8[1];
+
+        onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, _shift + _currentScroll3 - _scroll6]);
+        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(_insideSelection2 ? null : [[-1, _cellY], [-1, _cellY]]);
+      }
     }
-  }, [rowSizes, columnSizes, props.onScrollChange]);
+  }, [getMousePosition, getScrollPosition, getMouseHit, onCellWidthChange, onCellHeightChange]);
+  var onDoubleClick = React.useCallback(function (e) {
+    var pixelToCell = ref.current.cellLayout.pixelToCell;
+    e.preventDefault();
+    if (e.shiftKey) return;
+    var xy = getMousePosition(e);
+    if (!xy) return;
+    var hitTarget = getMouseHit(xy);
 
-  var changeSelection = function changeSelection(x1, y1, x2, y2, scrollToP2) {
-    if (scrollToP2 === void 0) {
-      scrollToP2 = true;
+    if (hitTarget) {
+      window.document.body.style.cursor = 'pointer';
+      return;
     }
 
-    if (selection.x1 !== x1 || selection.x2 !== x2 || selection.y1 !== y1 || selection.y2 !== y2) {
-      setSelection({
-        x1: x1,
-        y1: y1,
-        x2: x2,
-        y2: y2
-      });
+    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]);
+  var onContextMenu = React.useCallback(function (e) {
+    var _ref$current$cellLayo2 = ref.current.cellLayout,
+        pixelToCell = _ref$current$cellLayo2.pixelToCell,
+        getIndentX = _ref$current$cellLayo2.getIndentX,
+        getIndentY = _ref$current$cellLayo2.getIndentY;
+    var xy = getMousePosition(e);
+    if (!xy) return;
+    var x = xy[0],
+        y = xy[1];
+
+    if (x <= getIndentX() || y <= getIndentY()) {
+      return;
     }
 
-    if (scrollToP2) {
-      var newDataOffset = {
-        x: dataOffset.x,
-        y: dataOffset.y
-      };
-      var newScrollLeft = -1;
-      var newScrollTop = -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[sheetStyle.freezeColumns];
-        var increment = 0;
-
-        if (x2 >= lastVisibleColumnIndex) {
-          increment = 1 + x2 - lastVisibleColumnIndex;
-        } else if (x2 < firstVisibleColumnIndex) {
-          increment = x2 - firstVisibleColumnIndex;
-        }
+    var cell = pixelToCell(xy);
 
-        var newX = Math.max(dataOffset.x, sheetStyle.freezeColumns) + increment;
-        newDataOffset.x = newX;
-        newScrollLeft = newX * scrollSpeed;
-      }
+    if (!isPointInsideSelection(selection, cell)) {
+      onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([cell, cell]);
+    }
 
-      if (y2 !== -1 && (!rowSizes.index.includes(y2) || rowSizes.index[rowSizes.index.length - 1] === y2)) {
-        var firstVisibleRowIndex = rowSizes.index[sheetStyle.freezeRows];
-        var lastVisibleRowIndex = rowSizes.index[rowSizes.index.length - 1];
-        var _increment = 0;
+    onPointerMove(e);
+    var cellX = cell[0],
+        cellY = cell[1];
 
-        if (y2 >= lastVisibleRowIndex) {
-          _increment = 1 + y2 - lastVisibleRowIndex;
-        } else if (y2 < firstVisibleRowIndex) {
-          _increment = y2 - firstVisibleRowIndex;
-        }
+    var event = _extends({}, e, {
+      cellX: cellX,
+      cellY: cellY
+    });
 
-        var newY = Math.max(dataOffset.y, sheetStyle.freezeRows) + _increment;
+    onRightClick === null || onRightClick === void 0 ? void 0 : onRightClick(event);
+  }, [getMousePosition, onSelectionChange, onPointerMove, onRightClick]);
+  var mouseHandlers = {
+    onPointerLeave: onPointerLeave,
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: onPointerUp,
+    onDoubleClick: onDoubleClick,
+    onContextMenu: onContextMenu
+  };
+  return {
+    knobPosition: knobPosition,
+    mouseHandlers: mouseHandlers
+  };
+};
 
-        newDataOffset.y = newY;
-        newScrollTop = newY * scrollSpeed;
-      }
+var parseKnobOperation = function parseKnobOperation(knobArea, selection, sourceData, editData) {
+  var _normalizeSelection6 = normalizeSelection(knobArea),
+      _normalizeSelection6$ = _normalizeSelection6[0],
+      kx1 = _normalizeSelection6$[0],
+      ky1 = _normalizeSelection6$[1],
+      _normalizeSelection6$2 = _normalizeSelection6[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;
+  var fx2 = kx2;
+  var fy2 = ky2;
+  var changes = [];
+
+  if (fx2 - fx1 === sx2 - sx1) {
+    if (fy1 === sy1) {
+      fy1 = sy2 + 1;
+    } else {
+      fy2 = sy1 - 1;
+    }
 
-      if (newDataOffset.x !== dataOffset.x || dataOffset.y !== newDataOffset.y) {
-        setDataOffset({
-          x: newDataOffset.x,
-          y: newDataOffset.y
-        });
+    if (fx1 === -1 && fx2 === -1) {
+      var _findApproxMaxEditDat = findApproxMaxEditDataIndex(editData),
+          maxX = _findApproxMaxEditDat[0];
 
-        var newMaxScroll = _extends({}, maxScroll);
+      fx1 = 0;
+      fx2 = maxX;
+    }
 
-        newMaxScroll.x = Math.max(newMaxScroll.x, newScrollLeft);
-        newMaxScroll.y = Math.max(newMaxScroll.y, newScrollTop);
-        setMaxScroll(newMaxScroll);
-        setTimeout(function () {
-          if (overlayRef.current) {
-            if (newScrollLeft !== -1) {
-              overlayRef.current.scrollLeft = newScrollLeft;
-            }
+    var srcY = sy1;
 
-            if (newScrollTop !== -1) {
-              overlayRef.current.scrollTop = newScrollTop;
-            }
+    for (var y = fy1; y <= fy2; y++) {
+      for (var x = fx1; x <= fx2; x++) {
+        var value = sourceData(x, srcY);
+        changes.push({
+          x: x,
+          y: y,
+          value: value,
+          source: {
+            x: x,
+            y: srcY
           }
-        }, 0);
+        });
       }
-    }
 
-    if (props.onSelectionChanged) {
-      var sx1 = x1;
-      var sy1 = y1;
-      var sx2 = x2;
-      var sy2 = y2;
-
-      if (sx1 > sx2) {
-        sx1 = x2;
-        sx2 = x1;
-      }
+      srcY = srcY + 1;
 
-      if (sy1 > sy2) {
-        sy1 = y2;
-        sy2 = y1;
+      if (srcY > sy2) {
+        srcY = sy1;
       }
-
-      props.onSelectionChanged(sx1, sy1, sx2, sy2);
     }
-  };
-
-  var knobCoordinates = React.useMemo(function () {
-    if (selection.x1 === -1 && selection.x2 === -1 && selection.y1 !== -1 && selection.y2 !== -1) {
-      var sely2 = selection.y2;
+  } else {
+    if (fx1 === sx1) {
+      fx1 = sx2 + 1;
+    } else {
+      fx2 = sx1 - 1;
+    }
 
-      if (selection.y1 > selection.y2) {
-        sely2 = selection.y1;
-      }
+    if (fy1 === -1 && fy2 === -1) {
+      var _findApproxMaxEditDat2 = findApproxMaxEditDataIndex(editData),
+          maxY = _findApproxMaxEditDat2[1];
 
-      var c = cellToAbsCoordinate(0, sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
-      return {
-        x: c.x + knobSize * 0.5,
-        y: c.y + cellHeight(sely2)
-      };
+      fy1 = 0;
+      fy2 = maxY;
     }
 
-    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 srcX = sx1;
 
-      var _c = cellToAbsCoordinate(selx2, 0, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
+    for (var _x2 = fx1; _x2 <= fx2; _x2++) {
+      for (var _y2 = fy1; _y2 <= fy2; _y2++) {
+        var _value = sourceData(srcX, _y2);
 
-      return {
-        x: _c.x + cellWidth(selx2),
-        y: _c.y + knobSize * 0.5
-      };
-    }
+        changes.push({
+          x: _x2,
+          y: _y2,
+          value: _value,
+          source: {
+            x: srcX,
+            y: _y2
+          }
+        });
+      }
 
-    if (selection.x2 !== -1 && selection.y2 !== -1) {
-      var _selx3 = selection.x2;
+      srcX = srcX + 1;
 
-      if (selection.x1 > selection.x2) {
-        _selx3 = selection.x1;
+      if (srcX > sx2) {
+        srcX = sx1;
       }
+    }
+  }
 
-      var _sely3 = selection.y2;
+  return changes;
+};
 
-      if (selection.y1 > selection.y2) {
-        _sely3 = selection.y1;
-      }
+var useScroll = function useScroll(offset, maxScroll, cellLayout, onOffsetChange, onMaxScrollChange) {
+  return React.useCallback(function (e) {
+    if (!e.target || !(e.target instanceof Element)) {
+      return;
+    }
 
-      var _c2 = cellToAbsCoordinate(_selx3, _sely3, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
+    var xy = [e.target.scrollLeft, e.target.scrollTop];
+    var absoluteToCell = cellLayout.absoluteToCell;
+    var cell = absoluteToCell(xy);
 
-      return {
-        x: _c2.x + cellWidth(_selx3),
-        y: _c2.y + cellHeight(_sely3)
-      };
+    if (!isSameXY(cell, offset)) {
+      onOffsetChange === null || onOffsetChange === void 0 ? void 0 : onOffsetChange(cell);
     }
 
-    return {
-      x: -1,
-      y: -1
-    };
-  }, [selection, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle]);
-  var hitMap = React.useMemo(function () {
-    var hitM = {};
-    var canvas = canvasRef.current;
+    var x = xy[0],
+        y = xy[1];
+    var maxScrollX = maxScroll[0],
+        maxScrollY = maxScroll[1];
+    var growX = maxScrollX < x + 1 ? 1.5 : 1;
+    var growY = maxScrollY < y + 1 ? 1.5 : 1;
 
-    if (!canvas) {
-      return hitM;
+    if (growX > 1 || growY > 1) {
+      onMaxScrollChange === null || onMaxScrollChange === void 0 ? void 0 : onMaxScrollChange(mulXY(maxScroll, [growX, growY]));
     }
+  }, [cellLayout, onOffsetChange, onMaxScrollChange]);
+};
+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 _cellToAbsolute = cellToAbsolute(freeze),
+      frozenX = _cellToAbsolute[0],
+      frozenY = _cellToAbsolute[1];
+
+  var _cellToPixel = cellToPixel(cell),
+      left = _cellToPixel[0],
+      top = _cellToPixel[1];
+
+  var _cellToPixel2 = cellToPixel(cell, ONE_ONE),
+      right = _cellToPixel2[0],
+      bottom = _cellToPixel2[1];
+
+  var newX = offset[0],
+      newY = offset[1];
+
+  if (left <= frozenX) {
+    newX = x;
+  }
 
-    resizeCanvas(canvas);
-    var yCoord = sheetStyle.columnHeaderHeight;
-    var xCoord = sheetStyle.rowHeaderWidth;
+  if (top <= frozenY) {
+    newY = y;
+  }
 
-    for (var _iterator11 = _createForOfIteratorHelperLoose(columnSizes.index), _step11; !(_step11 = _iterator11()).done;) {
-      var x = _step11.value;
-      var ch = columnHeaders(x);
-      var cellW = cellWidth(x);
+  if (right > w) {
+    var edge = right - w + columnToPixel(newX);
 
-      if (ch && typeof ch === 'object' && ch.items) {
-        var finalStyle = void 0;
+    while (columnToPixel(++newX) < edge) {}
+  }
 
-        for (var _iterator13 = _createForOfIteratorHelperLoose(ch.items), _step13; !(_step13 = _iterator13()).done;) {
-          var obj = _step13.value;
+  if (bottom > h) {
+    var _edge = bottom - h + rowToPixel(newY);
 
-          if (obj.onClick) {
-            if (!finalStyle) {
-              finalStyle = createStyleObject(columnHeaderStyle(x), defaultCellStyle);
-            }
+    while (rowToPixel(++newY) < _edge) {}
+  }
 
-            var w = obj.content instanceof HTMLImageElement ? obj.width || cellW : 0;
-            var absX1 = applyAlignment(xCoord, cellW, finalStyle, w, obj.horiozntalAlign) + obj.x;
-            var absY1 = sheetStyle.columnHeaderHeight * 0.5 + obj.y;
-            var absX2 = absX1 + (obj.width || 0);
-            var absY2 = absY1 + (obj.height || 0);
-            var hitTarget = {
-              x: absX1,
-              y: absY1,
-              w: obj.width,
-              h: obj.height,
-              onClick: obj.onClick
-            };
-            var x1key = Math.floor(absX1 / xBinSize);
-            var x2key = Math.floor(absX2 / xBinSize);
-            var y1key = Math.floor(absY1 / yBinSize);
-            var y2key = Math.floor(absY2 / yBinSize);
-
-            for (var xkey = x1key; xkey <= x2key; xkey++) {
-              if (!hitM[xkey]) {
-                hitM[xkey] = {};
-              }
+  var newOffset = [newX >= 0 ? newX : offsetX, newY >= 0 ? newY : offsetY];
 
-              var xbin = hitM[xkey];
+  if (!isSameXY(newOffset, offset)) {
+    var scroll = cellToAbsolute(newOffset);
+    callback(newOffset, maxXY(maxScroll, scroll));
+    setTimeout(function () {
+      var scrollX = scroll[0],
+          scrollY = scroll[1];
+      element.scrollLeft = scrollX;
+      element.scrollTop = scrollY;
+    });
+  }
+};
 
-              for (var ykey = y1key; ykey <= y2key; ykey++) {
-                if (!xbin[ykey]) {
-                  xbin[ykey] = [];
-                }
+var useClipboardCopy = function useClipboardCopy(textAreaRef, selection, editMode, editData) {
+  React.useLayoutEffect(function () {
+    var textArea = textAreaRef.current;
+    if (!textArea) return;
+    if (editMode) return;
+    if (isEmptySelection(selection)) return;
+    textArea.value = formatSelectionAsTSV(selection, editData);
+  }, [selection, editMode, editData, textAreaRef]);
+  React.useLayoutEffect(function () {
+    var textArea = textAreaRef.current;
+    if (!textArea) return;
+
+    var focus = function focus() {
+      textArea.focus({
+        preventScroll: true
+      });
+      textArea.select();
+    };
 
-                xbin[ykey].push(hitTarget);
-              }
-            }
-          }
-        }
-      }
+    if (editMode) return;
+    if (document.activeElement === textArea) return;
+    var activeTagName = document.activeElement.tagName.toLowerCase();
 
-      xCoord += cellW;
+    if (!(activeTagName === 'div' && document.activeElement.contentEditable === 'true' || activeTagName === 'input' || activeTagName === 'textarea' || activeTagName === 'select')) {
+      focus();
     }
+  });
+};
+var useClipboardPaste = function useClipboardPaste(textAreaRef, selection, onSelectionChange, onChange) {
+  React.useEffect(function () {
+    var onPaste = function onPaste(e) {
+      var textArea = textAreaRef.current;
+      if (!textArea) return;
+      if (e.target !== textArea) return;
+      e.preventDefault();
+      var clipboardData = e.clipboardData || window.clipboardData;
+      var types = clipboardData.types;
+      var parsed;
+
+      if (types.includes('text/html')) {
+        var pastedHtml = clipboardData.getData('text/html');
+        parsed = parsePastedHtml(selection, pastedHtml);
+      } else if (types.includes('text/plain')) {
+        var text = clipboardData.getData('text/plain');
+        parsed = parsePastedText(selection, text);
+      }
+
+      if (!parsed) return;
+      var _parsed = parsed,
+          s = _parsed.selection,
+          changes = _parsed.changes;
+      onChange === null || onChange === void 0 ? void 0 : onChange(changes);
+      onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(s);
+    };
+
+    window.document.addEventListener('paste', onPaste);
+    return function () {
+      window.document.removeEventListener('paste', onPaste);
+    };
+  }, [textAreaRef, selection]);
+};
+
+var formatTSV = function formatTSV(rows) {
+  return rows.map(function (row) {
+    return row.join('\t');
+  }).join('\n');
+};
 
-    for (var _iterator12 = _createForOfIteratorHelperLoose(rowSizes.index), _step12; !(_step12 = _iterator12()).done;) {
-      var y = _step12.value;
-      xCoord = sheetStyle.rowHeaderWidth;
+var formatSelectionAsTSV = function formatSelectionAsTSV(selection, editData) {
+  if (isEmptySelection(selection)) return '';
 
-      for (var _iterator14 = _createForOfIteratorHelperLoose(columnSizes.index), _step14; !(_step14 = _iterator14()).done;) {
-        var _x2 = _step14.value;
-        var cellContent = displayData(_x2, y);
+  var _normalizeSelection = normalizeSelection(selection),
+      _normalizeSelection$ = _normalizeSelection[0],
+      minX = _normalizeSelection$[0],
+      minY = _normalizeSelection$[1],
+      _normalizeSelection$2 = _normalizeSelection[1],
+      maxX = _normalizeSelection$2[0],
+      maxY = _normalizeSelection$2[1];
+
+  if (isMaybeRowSelection(selection)) {
+    var _findApproxMaxEditDat = findApproxMaxEditDataIndex(editData),
+        cellX = _findApproxMaxEditDat[0];
+
+    minX = 0;
+    maxX = cellX;
+  }
 
-        var _cellW = cellWidth(_x2);
+  if (isMaybeColumnSelection(selection)) {
+    var _findApproxMaxEditDat2 = findApproxMaxEditDataIndex(editData),
+        cellY = _findApproxMaxEditDat2[1];
 
-        if (cellContent === null || cellContent === undefined) {
-          xCoord += _cellW;
-          continue;
-        }
+    minY = 0;
+    maxY = cellY;
+  }
 
-        var xx = xCoord;
-        var yy = yCoord + cellHeight(y) * 0.5;
+  var rows = [];
 
-        if (typeof cellContent === 'object' && cellContent.items) {
-          var _finalStyle = void 0;
+  for (var y = minY; y <= maxY; y++) {
+    var row = [];
 
-          for (var _iterator15 = _createForOfIteratorHelperLoose(cellContent.items), _step15; !(_step15 = _iterator15()).done;) {
-            var _obj = _step15.value;
+    for (var x = minX; x <= maxX; x++) {
+      var value = editData(x, y);
 
-            if (_obj.onClick) {
-              if (!_finalStyle) {
-                _finalStyle = createStyleObject(cellStyle(_x2, y), defaultCellStyle);
-              }
+      if (value !== null && value !== undefined) {
+        row.push(value != null ? value : '');
+      }
+    }
+
+    rows.push(row);
+  }
 
-              var _w = _obj.content instanceof HTMLImageElement ? _obj.width || _cellW : 0;
+  return formatTSV(rows);
+};
+
+var findTable = function findTable(element) {
+  for (var _iterator = _createForOfIteratorHelperLoose(element.children), _step; !(_step = _iterator()).done;) {
+    var child = _step.value;
+
+    if (child.nodeName === 'TABLE') {
+      return child;
+    }
 
-              var _absX = applyAlignment(xx, _cellW, _finalStyle, _w, _obj.horiozntalAlign) + _obj.x;
+    var maybeTable = findTable(child);
 
-              var _absY = yy + _obj.y;
+    if (maybeTable) {
+      return maybeTable;
+    }
+  }
+};
 
-              var _absX2 = _absX + (_obj.width || 0);
+var parsePastedHtml = function parsePastedHtml(selection, html) {
+  var div = document.createElement('div');
+  div.innerHTML = html.trim();
 
-              var _absY2 = _absY + (_obj.height || 0);
+  var _normalizeSelection2 = normalizeSelection(selection),
+      _normalizeSelection2$ = _normalizeSelection2[0],
+      minX = _normalizeSelection2$[0],
+      minY = _normalizeSelection2$[1];
 
-              var _hitTarget = {
-                x: _absX,
-                y: _absY,
-                w: _obj.width,
-                h: _obj.height,
-                onClick: _obj.onClick
-              };
+  var left = isMaybeRowSelection(selection) ? 0 : minX;
+  var top = isMaybeColumnSelection(selection) ? 0 : minY;
+  var changes = [];
+  var tableNode = findTable(div);
 
-              var _x1key = Math.floor(_absX / xBinSize);
+  if (!tableNode) {
+    return null;
+  }
 
-              var _x2key = Math.floor(_absX2 / xBinSize);
+  var right = left;
+  var bottom = top;
+  var y = top;
 
-              var _y1key = Math.floor(_absY / yBinSize);
+  for (var _iterator2 = _createForOfIteratorHelperLoose(tableNode.children), _step2; !(_step2 = _iterator2()).done;) {
+    var tableChild = _step2.value;
 
-              var _y2key = Math.floor(_absY2 / yBinSize);
+    if (tableChild.nodeName === 'TBODY') {
+      for (var _iterator3 = _createForOfIteratorHelperLoose(tableChild.children), _step3; !(_step3 = _iterator3()).done;) {
+        var tr = _step3.value;
+        var x = left;
 
-              for (var _xkey = _x1key; _xkey <= _x2key; _xkey++) {
-                if (!hitM[_xkey]) {
-                  hitM[_xkey] = {};
-                }
+        if (tr.nodeName === 'TR') {
+          for (var _iterator4 = _createForOfIteratorHelperLoose(tr.children), _step4; !(_step4 = _iterator4()).done;) {
+            var td = _step4.value;
 
-                var _xbin = hitM[_xkey];
+            if (td.nodeName === 'TD') {
+              var str = '';
 
-                for (var _ykey = _y1key; _ykey <= _y2key; _ykey++) {
-                  if (!_xbin[_ykey]) {
-                    _xbin[_ykey] = [];
-                  }
+              if (td.children.length !== 0 && td.children[0].nodeName === 'P') {
+                var p = td.children[0];
 
-                  _xbin[_ykey].push(_hitTarget);
+                if (p.children.length !== 0 && p.children[0].nodeName === 'FONT') {
+                  str = p.children[0].textContent.trim();
+                } else {
+                  str = p.textContent.trim();
                 }
+              } else {
+                str = td.textContent.trim();
               }
+
+              str = str.replaceAll('\n', '');
+              str = str.replaceAll(/\s\s+/g, ' ');
+              changes.push({
+                x: x,
+                y: y,
+                value: str
+              });
+              x++;
             }
           }
+
+          y++;
         }
 
-        xCoord += _cellW;
+        right = Math.max(right, x);
       }
-
-      yCoord += cellHeight(y);
     }
+  }
 
-    return hitM;
-  }, [displayData, props.cellWidth, props.cellHeight, canvasRef, columnSizes, rowSizes, dataOffset.x, dataOffset.y, sheetStyle]);
-  React.useEffect(function () {
-    var canvas = canvasRef.current;
+  bottom = y;
+  return {
+    selection: [[left, top], [right, bottom]],
+    changes: changes
+  };
+};
 
-    if (!canvas) {
-      return;
+var parsePastedText = function parsePastedText(selection, text) {
+  var _normalizeSelection3 = normalizeSelection(selection),
+      _normalizeSelection3$ = _normalizeSelection3[0],
+      minX = _normalizeSelection3$[0],
+      minY = _normalizeSelection3$[1];
+
+  var left = isMaybeRowSelection(selection) ? 0 : minX;
+  var top = isMaybeColumnSelection(selection) ? 0 : minY;
+  var rows = text.split(/\r?\n/);
+  var right = left;
+  var bottom = top + rows.length - 1;
+  var changes = [];
+
+  for (var y = 0; y < rows.length; y++) {
+    var cols = rows[y].split('\t');
+    right = Math.max(right, left + cols.length - 1);
+
+    for (var x = 0; x < cols.length; x++) {
+      changes.push({
+        x: left + x,
+        y: top + y,
+        value: cols[x]
+      });
     }
+  }
 
-    var context = canvas.getContext('2d');
+  return {
+    selection: [[left, top], [right, bottom]],
+    changes: changes
+  };
+};
 
-    if (!context) {
-      return;
-    }
+var INITIAL_SIZE = 256;
+var makeCellLayout = function makeCellLayout(freeze, indent, offset, columns, rows) {
+  var freezeX = freeze[0],
+      freezeY = freeze[1];
+  var indentX = indent[0],
+      indentY = indent[1];
+  var offsetX = offset[0],
+      offsetY = offset[1];
+
+  var getIndentX = function getIndentX() {
+    return indentX;
+  };
 
-    var animationFrameId = window.requestAnimationFrame(function () {
-      renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, props.secondarySelections || [], knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle);
-    });
-    return function () {
-      window.cancelAnimationFrame(animationFrameId);
-    };
-  }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, props.secondarySelections, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle]);
+  var getIndentY = function getIndentY() {
+    return indentY;
+  };
 
-  var setFocusToTextArea = function setFocusToTextArea() {
-    if (copyPasteTextAreaRef.current) {
-      copyPasteTextAreaRef.current.focus({
-        preventScroll: true
-      });
-      copyPasteTextAreaRef.current.select();
-    }
+  var getBaseOriginFor = function getBaseOriginFor(index, freeze, offset) {
+    return index < freeze ? 0 : offset;
   };
 
-  React.useEffect(function () {
-    if (!editMode) {
-      setCopyPasteText();
+  var columnToPixel = function columnToPixel(column, anchor) {
+    if (anchor === void 0) {
+      anchor = 0;
     }
-  }, [selection, editData]);
-  React.useEffect(function () {
-    if (!editMode) {
-      if (document.activeElement === copyPasteTextAreaRef.current) {
-        setFocusToTextArea();
-      } else {
-        var activeTagName = document.activeElement.tagName.toLowerCase();
 
-        if (!(activeTagName === 'div' && document.activeElement.contentEditable === 'true' || activeTagName === 'input' || activeTagName === 'textarea' || activeTagName === 'select')) {
-          setFocusToTextArea();
-        }
-      }
-    }
-  });
+    var base = getBaseOriginFor(column, freezeX, offsetX);
+    var relative = columns.getStart(column) - columns.getStart(base);
+    var size = column < 0 ? indentX : columns.getSize(column);
+    return column < 0 ? 0 : indentX + relative + anchor * size;
+  };
 
-  var onPaste = function onPaste(e) {
-    if (!copyPasteTextAreaRef) {
-      return;
+  var rowToPixel = function rowToPixel(row, anchor) {
+    if (anchor === void 0) {
+      anchor = 0;
     }
 
-    if (e.target !== copyPasteTextAreaRef.current) {
-      return;
+    var base = getBaseOriginFor(row, freezeY, offsetY);
+    var relative = rows.getStart(row) - rows.getStart(base);
+    var size = row < 0 ? indentY : rows.getSize(row);
+    return row < 0 ? 0 : indentY + relative + anchor * size;
+  };
+
+  var cellToPixel = function cellToPixel(cell, anchor) {
+    if (anchor === void 0) {
+      anchor = ORIGIN;
     }
 
-    e.preventDefault();
-    var clipboardData = e.clipboardData || window.clipboardData;
-    var types = clipboardData.types;
+    var cellX = cell[0],
+        cellY = cell[1];
+    var _anchor = anchor,
+        anchorX = _anchor[0],
+        anchorY = _anchor[1];
+    return [columnToPixel(cellX, anchorX), rowToPixel(cellY, anchorY)];
+  };
 
-    if (types.includes('text/html')) {
-      var pastedHtml = clipboardData.getData('text/html');
-      parsePastedHtml(pastedHtml);
-    } else if (types.includes('text/plain')) {
-      var text = clipboardData.getData('text/plain');
-      parsePastedText(text);
+  var columnToAbsolute = function columnToAbsolute(column, anchorX) {
+    if (anchorX === void 0) {
+      anchorX = 0;
     }
+
+    var relative = columns.getStart(column);
+    var size = column < 0 ? 0 : columns.getSize(column);
+    return relative + anchorX * size;
   };
 
-  React.useEffect(function () {
-    window.document.addEventListener('paste', onPaste);
-    return function () {
-      window.document.removeEventListener('paste', onPaste);
-    };
-  });
+  var rowToAbsolute = function rowToAbsolute(row, anchorY) {
+    if (anchorY === void 0) {
+      anchorY = 0;
+    }
 
-  var findTable = function findTable(element) {
-    for (var _iterator16 = _createForOfIteratorHelperLoose(element.children), _step16; !(_step16 = _iterator16()).done;) {
-      var child = _step16.value;
+    var relative = rows.getStart(row);
+    var size = row < 0 ? 0 : rows.getSize(row);
+    return relative + anchorY * size;
+  };
 
-      if (child.nodeName === 'TABLE') {
-        return child;
-      }
+  var cellToAbsolute = function cellToAbsolute(cell, anchor) {
+    if (anchor === void 0) {
+      anchor = ORIGIN;
+    }
 
-      var maybeTable = findTable(child);
+    var cellX = cell[0],
+        cellY = cell[1];
+    var _anchor2 = anchor,
+        anchorX = _anchor2[0],
+        anchorY = _anchor2[1];
+    return [columnToAbsolute(cellX, anchorX), rowToAbsolute(cellY, anchorY)];
+  };
 
-      if (maybeTable) {
-        return maybeTable;
-      }
+  var pixelToIndex = function pixelToIndex(pixel, anchor, indent, freeze, offset, layout) {
+    var relative = pixel - indent;
+    if (relative < 0) return -1;
+    var getStart = layout.getStart,
+        lookupIndex = layout.lookupIndex;
+    var frozen = getStart(freeze);
+
+    if (relative < frozen) {
+      return lookupIndex(relative, anchor);
+    } else {
+      var base = getStart(offset);
+      return lookupIndex(base + relative, anchor);
     }
   };
 
-  var parsePastedHtml = function parsePastedHtml(html) {
-    var div = document.createElement('div');
-    div.innerHTML = html.trim();
-    var pasteLocX = -1;
-    var pasteLocY = -1;
-
-    if (selection.x1 !== -1 && selection.x2 === -1) {
-      pasteLocX = selection.x1;
+  var pixelToColumn = function pixelToColumn(pixelX, anchorX) {
+    if (anchorX === void 0) {
+      anchorX = 0;
     }
 
-    if (selection.y1 !== -1 && selection.y2 === -1) {
-      pasteLocY = selection.y1;
+    return pixelToIndex(pixelX, anchorX, indentX, freezeX, offsetX, columns);
+  };
+
+  var pixelToRow = function pixelToRow(pixelY, anchorY) {
+    if (anchorY === void 0) {
+      anchorY = 0;
     }
 
-    if (selection.x1 !== -1 && selection.x2 !== -1) {
-      pasteLocX = Math.min(selection.x1, selection.x2);
+    return pixelToIndex(pixelY, anchorY, indentY, freezeY, offsetY, rows);
+  };
+
+  var pixelToCell = function pixelToCell(pixel, anchor) {
+    if (anchor === void 0) {
+      anchor = ORIGIN;
     }
 
-    if (selection.y1 !== -1 && selection.y2 !== -1) {
-      pasteLocY = Math.min(selection.y1, selection.y2);
+    var pixelX = pixel[0],
+        pixelY = pixel[1];
+    var _anchor3 = anchor,
+        anchorX = _anchor3[0],
+        anchorY = _anchor3[1];
+    return [pixelToColumn(pixelX, anchorX), pixelToRow(pixelY, anchorY)];
+  };
+
+  var absoluteToIndex = function absoluteToIndex(pixel, anchor, layout) {
+    if (pixel < 0) return -1;
+    var lookupIndex = layout.lookupIndex;
+    return lookupIndex(pixel, anchor);
+  };
+
+  var absoluteToColumn = function absoluteToColumn(pixelX, anchorX) {
+    if (anchorX === void 0) {
+      anchorX = 0;
     }
 
-    if (pasteLocX === -1 || pasteLocY === -1) {
-      return;
+    return absoluteToIndex(pixelX, anchorX, columns);
+  };
+
+  var absoluteToRow = function absoluteToRow(pixelY, anchorY) {
+    if (anchorY === void 0) {
+      anchorY = 0;
     }
 
-    var x = pasteLocX;
-    var y = pasteLocY;
-    var changes = [];
-    var tableNode = findTable(div);
+    return absoluteToIndex(pixelY, anchorY, rows);
+  };
 
-    if (!tableNode) {
-      return;
+  var absoluteToCell = function absoluteToCell(pixel, anchor) {
+    if (anchor === void 0) {
+      anchor = ORIGIN;
     }
 
-    for (var _iterator17 = _createForOfIteratorHelperLoose(tableNode.children), _step17; !(_step17 = _iterator17()).done;) {
-      var tableChild = _step17.value;
+    var pixelX = pixel[0],
+        pixelY = pixel[1];
+    var _anchor4 = anchor,
+        anchorX = _anchor4[0],
+        anchorY = _anchor4[1];
+    return [absoluteToColumn(pixelX, anchorX), absoluteToRow(pixelY, anchorY)];
+  };
 
-      if (tableChild.nodeName === 'TBODY') {
-        for (var _iterator18 = _createForOfIteratorHelperLoose(tableChild.children), _step18; !(_step18 = _iterator18()).done;) {
-          var tr = _step18.value;
-          x = pasteLocX;
+  var getVisibleIndices = function getVisibleIndices(view, indent, freeze, offset, layout) {
+    var indices = [].concat(seq(freeze));
+    var getStart = layout.getStart;
+    var relative = view - indent + getStart(offset);
 
-          if (tr.nodeName === 'TR') {
-            for (var _iterator19 = _createForOfIteratorHelperLoose(tr.children), _step19; !(_step19 = _iterator19()).done;) {
-              var td = _step19.value;
+    for (var i = offset + freeze; getStart(i) <= relative; ++i) {
+      indices.push(i);
+    }
 
-              if (td.nodeName === 'TD') {
-                var str = '';
+    return indices;
+  };
 
-                if (td.children.length !== 0 && td.children[0].nodeName === 'P') {
-                  var p = td.children[0];
+  var getVisibleCells = function getVisibleCells(view) {
+    var viewX = view[0],
+        viewY = view[1];
+    return {
+      columns: getVisibleIndices(viewX, indentX, freezeX, offsetX, columns),
+      rows: getVisibleIndices(viewY, indentY, freezeY, offsetY, rows)
+    };
+  };
 
-                  if (p.children.length !== 0 && p.children[0].nodeName === 'FONT') {
-                    str = p.children[0].textContent.trim();
-                  } else {
-                    str = p.textContent.trim();
-                  }
-                } else {
-                  str = td.textContent.trim();
-                }
+  var getVersion = function getVersion() {
+    return columns.getVersion() + rows.getVersion();
+  };
 
-                str = str.replaceAll('\n', '');
-                str = str.replaceAll(/\s\s+/g, ' ');
-                changes.push({
-                  y: y,
-                  x: x,
-                  value: str
-                });
-                x++;
-              }
-            }
+  return {
+    columnToPixel: columnToPixel,
+    rowToPixel: rowToPixel,
+    cellToPixel: cellToPixel,
+    columnToAbsolute: columnToAbsolute,
+    rowToAbsolute: rowToAbsolute,
+    cellToAbsolute: cellToAbsolute,
+    pixelToColumn: pixelToColumn,
+    pixelToRow: pixelToRow,
+    pixelToCell: pixelToCell,
+    absoluteToColumn: absoluteToColumn,
+    absoluteToRow: absoluteToRow,
+    absoluteToCell: absoluteToCell,
+    getVisibleCells: getVisibleCells,
+    getIndentX: getIndentX,
+    getIndentY: getIndentY,
+    getVersion: getVersion
+  };
+};
+var makeLayoutCache = function makeLayoutCache(sizer) {
+  var offsets = makeIntMap(INITIAL_SIZE);
+  var sizes = makeIntMap(INITIAL_SIZE);
+  var version = 0;
+  offsets.set(0, 0);
+
+  var getSize = function getSize(i) {
+    if (i < 0) return 0;
+    if (sizes.has(i)) return sizes.get(i);
+    var size = sizer(i) || 0;
+    sizes.set(i, size);
+    return size;
+  };
 
-            y++;
-          }
-        }
-      }
-    }
+  var getOffset = function getOffset(i) {
+    if (i < 0) return 0;
+    if (offsets.has(i)) return offsets.get(i);
+    var j = offsets.tail() || 0;
 
-    if (props.onChange) {
-      props.onChange(changes);
+    while (j < i) {
+      var size = getSize(j);
+      var offset = (offsets.get(j) || 0) + size;
+      offsets.set(++j, offset);
     }
 
-    var pasteX2 = x - 1;
-    var pasteY2 = y - 1;
-    changeSelection(pasteLocX, pasteLocY, pasteX2, pasteY2, false);
+    return offsets.get(i);
   };
 
-  var parsePastedText = function parsePastedText(text) {
-    var pasteLocX = -1;
-    var pasteLocY = -1;
+  var getStart = function getStart(i) {
+    return getOffset(i);
+  };
 
-    if (selection.x1 !== -1 && selection.x2 === -1) {
-      pasteLocX = selection.x1;
-    }
+  var getEnd = function getEnd(i) {
+    return getOffset(i + 1);
+  };
 
-    if (selection.x1 !== -1 && selection.x2 !== -1) {
-      pasteLocX = Math.min(selection.x1, selection.x2);
+  var lookupIndex = function lookupIndex(x, anchor) {
+    if (anchor === void 0) {
+      anchor = 0;
     }
 
-    if (selection.x1 === -1 && selection.x2 === -1 && selection.y1 !== -1 && selection.y2 !== -1) {
-      pasteLocX = 0;
-    }
+    var last = offsets.tail() || 0;
 
-    if (selection.y1 !== -1 && selection.y2 === -1) {
-      pasteLocY = selection.y1;
+    while (getOffset(last) < x && getSize(last)) {
+      last += 64;
     }
 
-    if (selection.y1 !== -1 && selection.y2 !== -1) {
-      pasteLocY = Math.min(selection.y1, selection.y2);
-    }
+    var start = 0;
+    var end = last;
 
-    if (selection.y1 === -1 && selection.y2 === -1 && selection.x2 !== -1 && selection.x2 !== -1) {
-      pasteLocY = 0;
+    while (start < end) {
+      var mid = start + Math.floor((end - start) / 2) + 1;
+      var value = getOffset(mid) - (anchor ? anchor * getSize(mid - 1) : 0);
+      if (value <= x) start = mid;else end = mid - 1;
     }
 
-    if (pasteLocX === -1 || pasteLocY === -1) {
-      return;
-    }
+    return start;
+  };
 
-    var rows = text.split(/\r?\n/);
-    var pasteX2 = pasteLocX;
-    var pasteY2 = pasteLocY + rows.length - 1;
-    var changes = [];
+  var clearAfter = function clearAfter(index) {
+    index = Math.max(0, index);
+    offsets.truncate(index);
+    sizes.truncate(index);
+    version++;
+  };
 
-    for (var y = 0; y < rows.length; y++) {
-      var cols = rows[y].split('\t');
+  var setSizer = function setSizer(s) {
+    sizer = s;
+  };
 
-      if (pasteLocX + cols.length - 1 > pasteX2) {
-        pasteX2 = pasteLocX + cols.length - 1;
-      }
+  var getVersion = function getVersion() {
+    return version;
+  };
 
-      for (var x = 0; x < cols.length; x++) {
-        changes.push({
-          y: pasteLocY + y,
-          x: pasteLocX + x,
-          value: cols[x]
-        });
-      }
-    }
+  return {
+    getSize: getSize,
+    getStart: getStart,
+    getEnd: getEnd,
+    getVersion: getVersion,
+    lookupIndex: lookupIndex,
+    setSizer: setSizer,
+    clearAfter: clearAfter
+  };
+};
 
-    if (props.onChange) {
-      props.onChange(changes);
-    }
+var makeIntMap = function makeIntMap(initialSize) {
+  if (initialSize === void 0) {
+    initialSize = 128;
+  }
 
-    changeSelection(pasteLocX, pasteLocY, pasteX2, pasteY2, false);
+  var used;
+  var values;
+  var last = 0;
+  var GROW = 1.2;
+
+  var allocate = function allocate(size) {
+    var newUsed = new Uint8Array(size);
+    var newValues = new Uint32Array(size);
+    if (used) copy(used, newUsed);
+    if (values) copy(values, newValues);
+    used = newUsed;
+    values = newValues;
   };
 
-  var setCopyPasteText = function setCopyPasteText() {
-    if (selection.x1 === -1 && selection.y1 === -1 && selection.x2 === -1 && selection.y2 === -1) {
-      return;
-    }
+  allocate(initialSize);
 
-    var dy1 = selection.y1;
-    var dy2 = selection.y2;
+  var copy = function copy(from, to) {
+    var n = Math.min(from.length, to.length);
 
-    if (dy1 > dy2) {
-      dy1 = selection.y2;
-      dy2 = selection.y1;
+    for (var i = 0; i < n; ++i) {
+      to[i] = from[i];
     }
+  };
 
-    var dx1 = selection.x1;
-    var dx2 = selection.x2;
+  var ensure = function ensure(size) {
+    var l = values.length;
+    var grow = Math.round(l * GROW);
+    if (l < size) allocate(Math.max(grow, size));
+  };
 
-    if (dx1 > dx2) {
-      dx1 = selection.x2;
-      dx2 = selection.x1;
-    }
+  var truncate = function truncate(size) {
+    var l = values.length;
+    if (l < size) return;
+    var shrink = Math.round(size * GROW);
+    if (l > shrink) allocate(size);else for (var i = size; i < l; ++i) {
+        used[i] = 0;
+      }
+    last = Math.min(last, size);
 
-    if (dx1 === -1 && dx2 === -1) {
-      var max = findApproxMaxEditDataIndex(editData);
-      dx1 = 0;
-      dx2 = max.x;
+    while (last > 0 && !used[last]) {
+      last--;
     }
+  };
 
-    if (dy1 === -1 && dy2 === -1) {
-      var _max = findApproxMaxEditDataIndex(editData);
+  var getTail = function getTail() {
+    return used[last] ? last : null;
+  };
 
-      dy1 = 0;
-      dy2 = _max.y;
-    }
+  var setValue = function setValue(i, value) {
+    ensure(i + 1);
+    values[i] = value;
+    used[i] = 1;
+    last = Math.max(last, i);
+  };
 
-    var cptext = '';
-    var cptextTemp = '';
+  var getValue = function getValue(i) {
+    return used[i] ? values[i] : null;
+  };
 
-    for (var y = dy1; y <= dy2; y++) {
-      var nonEmpty = false;
+  var hasValue = function hasValue(i) {
+    return !!used[i];
+  };
 
-      for (var x = dx1; x <= dx2; x++) {
-        var value = editData(x, y);
+  return {
+    truncate: truncate,
+    set: setValue,
+    get: getValue,
+    has: hasValue,
+    tail: getTail
+  };
+};
 
-        if (value !== null && value !== undefined) {
-          cptextTemp += value;
-          nonEmpty = true;
-        }
+var resolveSheetStyle = function resolveSheetStyle(sheetStyle) {
+  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
+  };
+};
+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 (x !== dx2) {
-          cptextTemp += '\t';
-        }
-      }
+  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);
+  }
 
-      if (y !== dy2) {
-        cptextTemp += '\n';
-      }
+  return start;
+};
+
+var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, dataOffset) {
+  var canvas = context.canvas;
+  var width = canvas.width,
+      height = canvas.height;
+  var hideGridlines = sheetStyle.hideGridlines,
+      hideRowHeaders = sheetStyle.hideRowHeaders,
+      hideColumnHeaders = sheetStyle.hideColumnHeaders,
+      rowHeaderWidth = sheetStyle.rowHeaderWidth,
+      columnHeaderHeight = sheetStyle.columnHeaderHeight,
+      freezeColumns = sheetStyle.freezeColumns,
+      freezeRows = sheetStyle.freezeRows;
+  var columns = visibleCells.columns,
+      rows = visibleCells.rows;
+  var columnToPixel = cellLayout.columnToPixel,
+      rowToPixel = cellLayout.rowToPixel;
+  var clickables = [];
+  var freeze = [freezeColumns, freezeRows];
+  var indent = [rowHeaderWidth, columnHeaderHeight];
+  resizeCanvas(canvas);
+  context.clearRect(0, 0, width, height);
+  context.fillStyle = 'white';
+  context.fillRect(0, 0, width, height);
+
+  for (var _iterator = _createForOfIteratorHelperLoose(rows), _step; !(_step = _iterator()).done;) {
+    var y = _step.value;
+
+    for (var _iterator8 = _createForOfIteratorHelperLoose(columns), _step8; !(_step8 = _iterator8()).done;) {
+      var x = _step8.value;
+
+      var _left7 = columnToPixel(x);
 
-      if (nonEmpty) {
-        cptext += cptextTemp;
-        cptextTemp = '';
+      var _right7 = columnToPixel(x, 1);
+
+      var _top7 = rowToPixel(y);
+
+      var _bottom7 = rowToPixel(y, 1);
+
+      var _cellStyle = cellStyle(x, y),
+          fillColor = _cellStyle.fillColor;
+
+      if (fillColor) {
+        context.fillStyle = fillColor;
+        context.fillRect(_left7, _top7, _right7 - _left7, _bottom7 - _top7);
       }
     }
+  }
 
-    if (copyPasteTextAreaRef.current) {
-      copyPasteTextAreaRef.current.value = cptext;
-    }
-  };
+  var selectionActive = !isEmptySelection(selection);
+  var rowSelectionActive = isRowSelection(selection);
+  var columnSelectionActive = isColumnSelection(selection);
 
-  var commitEditingCell = function commitEditingCell(value) {
-    if (props.onChange) {
-      props.onChange([{
-        x: editCell.x,
-        y: editCell.y,
-        value: value !== undefined ? value : editValue
-      }]);
-    }
+  var _resolveFrozenSelecti = resolveFrozenSelection(selection, cellLayout, freeze, indent, dataOffset),
+      selected = _resolveFrozenSelecti[0],
+      hideKnob = _resolveFrozenSelecti[1];
 
-    setEditCell({
-      x: -1,
-      y: -1
-    });
-    setEditKey('');
-  };
+  if (selectionActive) {
+    var _selected$ = selected[0],
+        left = _selected$[0],
+        top = _selected$[1],
+        _selected$2 = selected[1],
+        right = _selected$2[0],
+        bottom = _selected$2[1];
+    context.fillStyle = COLORS.selectionBackground;
+    context.fillRect(left, top, right - left, bottom - top);
+  }
 
-  var startEditingCell = function startEditingCell(editCell) {
-    if (cellReadOnly(editCell.x, editCell.y)) {
-      return;
+  if (!hideRowHeaders) {
+    context.fillStyle = COLORS.headerBackground;
+    context.fillRect(0, 0, rowHeaderWidth, context.canvas.height);
+
+    if (selectionActive && !columnSelectionActive) {
+      var _selected$3 = selected[0],
+          _top = _selected$3[1],
+          _selected$4 = selected[1],
+          _bottom = _selected$4[1];
+      context.fillStyle = COLORS.headerActive;
+      context.fillRect(0, _top, rowHeaderWidth, _bottom - _top);
     }
+  }
 
-    var editDataValue = editData(editCell.x, editCell.y);
-    var val = '';
+  if (!hideColumnHeaders) {
+    context.fillStyle = COLORS.headerBackground;
+    context.fillRect(0, 0, context.canvas.width, columnHeaderHeight);
 
-    if (editDataValue !== null && editDataValue !== undefined) {
-      val = editDataValue;
+    if (selectionActive && !rowSelectionActive) {
+      var _selected$5 = selected[0],
+          _left = _selected$5[0],
+          _selected$6 = selected[1],
+          _right = _selected$6[0];
+      context.fillStyle = COLORS.headerActive;
+      context.fillRect(_left, 0, _right - _left, columnHeaderHeight);
     }
+  }
 
-    var editDataKey = editKeys ? editKeys(editCell.x, editCell.y) : '';
-    setEditCell(editCell);
-    setEditKey(editDataKey);
-    setEditValue(val);
-    setShiftKeyDown(false);
+  context.strokeStyle = COLORS.gridLine;
+  context.lineWidth = 1;
+  var gridRight = hideGridlines ? rowHeaderWidth : context.canvas.width;
+  var gridBottom = hideGridlines ? columnHeaderHeight : context.canvas.height;
+
+  var drawGridLineX = function drawGridLineX(x, height) {
+    context.beginPath();
+    context.moveTo(x - .5, 0);
+    context.lineTo(x - .5, height);
+    context.stroke();
   };
 
-  var onScroll = function onScroll(e) {
-    if (!e.target || !(e.target instanceof Element)) {
-      return;
-    }
+  var drawGridLineY = function drawGridLineY(y, width) {
+    context.beginPath();
+    context.moveTo(0, y - .5);
+    context.lineTo(width, y - .5);
+    context.stroke();
+  };
 
-    var absX = e.target.scrollLeft;
-    var absY = e.target.scrollTop;
-    var cellX = Math.floor(absX / scrollSpeed);
-    var cellY = Math.floor(absY / scrollSpeed);
+  drawGridLineX(rowHeaderWidth, context.canvas.height);
+  drawGridLineY(columnHeaderHeight, context.canvas.width);
 
-    if (cellX !== dataOffset.x || cellY !== dataOffset.y) {
-      setDataOffset({
-        x: cellX,
-        y: cellY
-      });
-    }
+  for (var _iterator2 = _createForOfIteratorHelperLoose(columns), _step2; !(_step2 = _iterator2()).done;) {
+    var _column = _step2.value;
 
-    var newMaxScroll = _extends({}, maxScroll);
+    var _right8 = columnToPixel(_column, 1);
 
-    if (maxScroll.x / (absX + 0.5) < 1) {
-      newMaxScroll.x *= 1.5;
-    }
+    drawGridLineX(_right8, gridBottom);
+  }
+
+  for (var _iterator3 = _createForOfIteratorHelperLoose(rows), _step3; !(_step3 = _iterator3()).done;) {
+    var _row = _step3.value;
+
+    var _bottom8 = rowToPixel(_row, 1);
+
+    drawGridLineY(_bottom8, gridRight);
+  }
+
+  var _normalizeSelection = normalizeSelection(selection),
+      _normalizeSelection$ = _normalizeSelection[0],
+      minX = _normalizeSelection$[0],
+      minY = _normalizeSelection$[1],
+      _normalizeSelection$2 = _normalizeSelection[1],
+      maxX = _normalizeSelection$2[0],
+      maxY = _normalizeSelection$2[1];
+
+  if (!hideRowHeaders) {
+    context.textBaseline = 'middle';
+    context.textAlign = 'center';
+    context.font = DEFAULT_CELL_STYLE.fontSize + 'px ' + DEFAULT_CELL_STYLE.fontFamily;
+    context.fillStyle = COLORS.headerText;
+
+    for (var _iterator4 = _createForOfIteratorHelperLoose(rows), _step4; !(_step4 = _iterator4()).done;) {
+      var row = _step4.value;
+      var content = "" + (row + 1);
+      var isActive = isInRange(row, minY, maxY);
+      var isSelected = rowSelectionActive && !columnSelectionActive && isActive;
+      var style = isSelected ? HEADER_SELECTED_STYLE : isActive ? HEADER_ACTIVE_STYLE : NO_STYLE;
+
+      var _top2 = rowToPixel(row);
 
-    if (maxScroll.y / (absY + 0.5) < 1) {
-      newMaxScroll.y *= 1.5;
+      var _bottom2 = rowToPixel(row, 1);
+
+      clickables.push.apply(clickables, renderCell(context, content, style, DEFAULT_COLUMN_HEADER_STYLE, 0, _top2, rowHeaderWidth, _bottom2 - _top2));
     }
+  }
+
+  if (!hideColumnHeaders) {
+    context.textBaseline = 'middle';
+    context.textAlign = 'center';
+
+    for (var _iterator5 = _createForOfIteratorHelperLoose(columns), _step5; !(_step5 = _iterator5()).done;) {
+      var _columnHeaders;
+
+      var column = _step5.value;
+
+      var _content = (_columnHeaders = columnHeaders(column)) != null ? _columnHeaders : excelHeaderString(column + 1);
+
+      var _isActive = isInRange(column, minX, maxX);
+
+      var selectedStyle = columnSelectionActive && !rowSelectionActive && _isActive ? HEADER_SELECTED_STYLE : NO_STYLE;
+      var activeStyle = _isActive ? HEADER_ACTIVE_STYLE : NO_STYLE;
+
+      var _style = _extends({}, columnHeaderStyle(column), activeStyle, selectedStyle);
 
-    if (newMaxScroll.x !== maxScroll.x || maxScroll.y !== newMaxScroll.y) {
-      setMaxScroll(_extends({}, newMaxScroll));
+      var _left2 = columnToPixel(column);
+
+      var _right2 = columnToPixel(column, 1);
+
+      clickables.push.apply(clickables, renderCell(context, _content, _style, DEFAULT_COLUMN_HEADER_STYLE, _left2, 0, _right2 - _left2, columnHeaderHeight));
     }
-  };
+  }
 
-  var onMouseLeave = function onMouseLeave() {
-    window.document.body.style.cursor = 'auto';
-  };
+  if (selectionActive) {
+    context.strokeStyle = COLORS.selectionBorder;
+    context.lineWidth = 2;
+    var _selected$7 = selected[0],
+        _left3 = _selected$7[0],
+        _top3 = _selected$7[1],
+        _selected$8 = selected[1],
+        _right3 = _selected$8[0],
+        _bottom3 = _selected$8[1];
+    context.strokeRect(_left3, _top3, _right3 - _left3 - 1, _bottom3 - _top3 - 1);
+  }
 
-  var onMouseDown = function onMouseDown(e) {
-    if (e.button !== 0) {
-      return;
+  for (var _iterator6 = _createForOfIteratorHelperLoose(secondarySelections), _step6; !(_step6 = _iterator6()).done;) {
+    var secondarySelection = _step6.value;
+    var _selection = secondarySelection.span;
+    if (isEmptySelection(_selection)) continue;
+
+    var _resolveFrozenSelecti2 = resolveFrozenSelection(_selection, cellLayout, freeze, indent, dataOffset),
+        _selected = _resolveFrozenSelecti2[0];
+
+    var _selected$9 = _selected[0],
+        _left8 = _selected$9[0],
+        _top8 = _selected$9[1],
+        _selected$10 = _selected[1],
+        _right9 = _selected$10[0],
+        _bottom9 = _selected$10[1];
+    context.strokeStyle = secondarySelection.color;
+    context.lineWidth = 1;
+    context.beginPath();
+    context.strokeRect(_left8 - 1, _top8 - 1, _right9 - _left8 + 1, _bottom9 - _top8 + 1);
+  }
+
+  if (knobArea) {
+    var _normalizeSelection2 = normalizeSelection(knobArea),
+        _normalizeSelection2$ = _normalizeSelection2[0],
+        _minX = _normalizeSelection2$[0],
+        _minY = _normalizeSelection2$[1],
+        _normalizeSelection2$2 = _normalizeSelection2[1],
+        _maxX = _normalizeSelection2$2[0],
+        _maxY = _normalizeSelection2$2[1];
+
+    var _left4 = columnToPixel(_minX);
+
+    var _top4 = rowToPixel(_minY);
+
+    var _right4 = columnToPixel(_maxX, 1);
+
+    var _bottom4 = rowToPixel(_maxY, 1);
+
+    context.strokeStyle = COLORS.knobAreaBorder;
+    context.setLineDash([3, 3]);
+    context.lineWidth = 1;
+    context.strokeRect(_left4 - 1, _top4 - 1, _right4 - _left4 + 1, _bottom4 - _top4 + 1);
+    context.setLineDash([]);
+  }
+
+  if (knobPosition && !hideKnob) {
+    var knobX = knobPosition[0],
+        knobY = knobPosition[1];
+    context.fillStyle = COLORS.selectionBorder;
+    context.fillRect(knobX - SIZES.knobArea * 0.5, knobY - SIZES.knobArea * 0.5, SIZES.knobArea, SIZES.knobArea);
+  }
+
+  if (dragOffset) {
+    var shiftX = dragOffset[0],
+        shiftY = dragOffset[1];
+
+    var _resolveSelection = resolveSelection(selection, cellLayout),
+        _resolveSelection$ = _resolveSelection[0],
+        _left5 = _resolveSelection$[0],
+        _top5 = _resolveSelection$[1],
+        _resolveSelection$2 = _resolveSelection[1],
+        _right5 = _resolveSelection$2[0],
+        _bottom5 = _resolveSelection$2[1];
+
+    context.fillStyle = COLORS.dragGhost;
+    context.fillRect(_left5 + shiftX, _top5 + shiftY, _right5 - _left5, _bottom5 - _top5);
+  }
+
+  if (dropTarget) {
+    var _resolveSelection2 = resolveSelection(dropTarget, cellLayout),
+        _resolveSelection2$ = _resolveSelection2[0],
+        _left6 = _resolveSelection2$[0],
+        _top6 = _resolveSelection2$[1],
+        _resolveSelection2$2 = _resolveSelection2[1],
+        _right6 = _resolveSelection2$2[0],
+        _bottom6 = _resolveSelection2$2[1];
+
+    context.strokeStyle = COLORS.dropTarget;
+    context.lineWidth = 2;
+
+    if (isColumnSelection(dropTarget)) {
+      _right6 = _left6;
     }
 
-    if (!e.target || !(e.target instanceof Element)) {
-      return;
+    if (isRowSelection(dropTarget)) {
+      _bottom6 = _top6;
     }
 
-    setSelectionInProgress(false);
-    var rect = e.target.getBoundingClientRect();
-    var x = e.clientX - rect.left;
-    var y = e.clientY - rect.top;
+    context.strokeRect(_left6 - 1, _top6 - 1, _right6 - _left6, _bottom6 - _top6);
+  }
 
-    if (x > canvasWidth || y > canvasHeight) {
-      return;
-    }
+  context.textBaseline = 'middle';
 
-    var hitTargetKeyX = Math.floor(x / xBinSize);
-    var hitTargetKeyY = Math.floor(y / yBinSize);
+  for (var _iterator7 = _createForOfIteratorHelperLoose(rows), _step7; !(_step7 = _iterator7()).done;) {
+    var _y = _step7.value;
 
-    if (hitMap[hitTargetKeyX] && hitMap[hitTargetKeyX][hitTargetKeyY]) {
-      for (var _iterator20 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step20; !(_step20 = _iterator20()).done;) {
-        var hitTarget = _step20.value;
+    for (var _iterator9 = _createForOfIteratorHelperLoose(columns), _step9; !(_step9 = _iterator9()).done;) {
+      var _x = _step9.value;
 
-        if (hitTarget.x <= x && x <= hitTarget.x + hitTarget.w && hitTarget.y <= y && y <= hitTarget.y + hitTarget.h) {
-          setButtonClickMouseDownCoordinates({
-            x: x,
-            y: y,
-            hitTarget: hitTarget
-          });
-          return;
-        }
-      }
-    }
+      var _left9 = columnToPixel(_x);
 
-    if (!sheetStyle.hideColumnHeaders && y < sheetStyle.columnHeaderHeight) {
-      for (var colIdx = 0; colIdx < columnSizes.index.length; colIdx++) {
-        var start = columnSizes.start[colIdx];
-        var end = columnSizes.end[colIdx];
-        var index = columnSizes.index[colIdx];
+      var _right10 = columnToPixel(_x, 1);
 
-        if (Math.abs(start - x) < resizeColumnRowMouseThreshold || Math.abs(end - x) < resizeColumnRowMouseThreshold) {
-          window.document.body.style.cursor = 'col-resize';
-          var indices = [];
+      var _top9 = rowToPixel(_y);
 
-          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);
+      var _bottom10 = rowToPixel(_y, 1);
 
-            for (var i = min; i <= max; i++) {
-              indices.push(i);
-            }
-          }
+      var cellContent = displayData(_x, _y);
 
-          if (indices.length === 0) {
-            indices.push(index);
-          }
+      if (cellContent !== null && cellContent !== undefined) {
+        var _style2 = cellStyle(_x, _y);
 
-          setColumnResize({
-            startX: end,
-            oldWidth: cellWidth(index),
-            colIndices: indices
-          });
-          return;
-        }
+        clickables.push.apply(clickables, renderCell(context, cellContent, _style2, DEFAULT_CELL_STYLE, _left9, _top9, _right10 - _left9, _bottom10 - _top9));
       }
     }
+  }
 
-    if (!sheetStyle.hideRowHeaders && x < sheetStyle.rowHeaderWidth) {
-      for (var rowIdx = 0; rowIdx < rowSizes.index.length; rowIdx++) {
-        var _start = rowSizes.start[rowIdx];
-        var _end = rowSizes.end[rowIdx];
-        var _index = rowSizes.index[rowIdx];
-
-        if (Math.abs(_start - y) < resizeColumnRowMouseThreshold || Math.abs(_end - y) < resizeColumnRowMouseThreshold) {
-          window.document.body.style.cursor = 'row-resize';
-          var _indices = [];
+  return clickables;
+};
+var renderCell = function renderCell(context, cellContent, style, defaultCellStyle, xCoord, yCoord, cellWidth, cellHeight) {
+  var clickables = [];
 
-          if (selection.x1 === -1 && selection.x2 === -1 && selection.y1 !== -1 && selection.y2 !== -1) {
-            var _min = Math.min(selection.y1, selection.y2);
+  if (cellContent === null) {
+    return clickables;
+  }
 
-            var _max2 = Math.max(selection.y1, selection.y2);
+  var finalStyle = resolveCellStyle(style, defaultCellStyle);
+  context.fillStyle = finalStyle.color;
+  context.font = finalStyle.weight + ' ' + finalStyle.fontSize + 'px ' + finalStyle.fontFamily;
+  context.textAlign = finalStyle.textAlign;
+  var yy = Math.floor(yCoord + cellHeight * 0.5);
+  context.save();
+  context.beginPath();
+  context.rect(xCoord, yCoord, cellWidth, cellHeight);
+  context.clip();
 
-            for (var _i5 = _min; _i5 <= _max2; _i5++) {
-              _indices.push(_i5);
-            }
-          }
+  if (finalStyle.backgroundColor !== '') {
+    context.fillStyle = finalStyle.backgroundColor;
+    context.fillRect(xCoord, yCoord, cellWidth, cellHeight);
+    context.fillStyle = finalStyle.color;
+  }
 
-          if (_indices.length === 0) {
-            _indices.push(_index);
-          }
+  if (typeof cellContent === 'string' || typeof cellContent === 'number') {
+    var xx = applyAlignment(xCoord, cellWidth, finalStyle, 0);
+    var text = '' + cellContent;
+    context.fillText(text, xx, yy);
+  } else if (typeof cellContent === 'object') {
+    for (var _iterator10 = _createForOfIteratorHelperLoose(cellContent.items), _step10; !(_step10 = _iterator10()).done;) {
+      var obj = _step10.value;
+      var x = 0;
+      var y = 0;
+      var w = 0;
+      var h = 0;
 
-          setRowResize({
-            startY: _end,
-            oldHeight: cellHeight(_index),
-            rowIndices: _indices
-          });
-          return;
+      if (obj.content instanceof HTMLImageElement) {
+        w = obj.width || cellWidth;
+        h = obj.height || cellHeight;
+        var finalX = applyAlignment(xCoord, cellWidth, finalStyle, w, obj.horizontalAlign);
+        x = finalX + obj.x;
+        y = yy + obj.y;
+        context.drawImage(obj.content, x, y, w, h);
+      } else if (typeof obj.content === 'string' || typeof obj.content === 'number') {
+        if (obj.horizontalAlign) {
+          context.textAlign = obj.horizontalAlign;
         }
-      }
-    }
 
-    if (Math.abs(x - knobCoordinates.x) < knobSize && Math.abs(y - knobCoordinates.y) < knobSize) {
-      setKnobDragInProgress(true);
-      setKnobArea({
-        x1: selection.x1,
-        y1: selection.y1,
-        x2: selection.x2,
-        y2: selection.y2
-      });
-      return;
-    }
+        var _finalX = applyAlignment(xCoord, cellWidth, finalStyle, 0, obj.horizontalAlign);
 
-    var sel2 = absCoordianteToCell(x, y, rowSizes, columnSizes);
-    var sel1 = shiftKeyDown ? {
-      x: selection.x1,
-      y: selection.y1
-    } : _extends({}, sel2);
+        var _text = '' + obj.content;
 
-    if (editMode) {
-      if (!props.dontCommitEditOnSelectionChange) {
-        commitEditingCell();
+        var left = _finalX + obj.x;
+        var top = yy + obj.y;
+        context.fillText(_text, left, top);
+        var measure = context.measureText(_text);
+        x = left - measure.actualBoundingBoxLeft;
+        y = top - measure.actualBoundingBoxAscent;
+        w = left + measure.actualBoundingBoxRight - x;
+        h = top + measure.actualBoundingBoxDescent - y;
+      }
+
+      if (obj.onClick) {
+        clickables.push({
+          rect: [[x, y], [x + w, y + h]],
+          obj: obj
+        });
       }
     }
+  }
 
-    var scrollToP2 = true;
+  context.restore();
+  return clickables;
+};
 
-    if (!sheetStyle.hideRowHeaders && x < sheetStyle.rowHeaderWidth) {
-      scrollToP2 = false;
-      setRowSelectionInProgress(true);
-      sel1.x = -1;
-      sel2.x = -1;
-    } else {
-      setRowSelectionInProgress(false);
-    }
+var resolveSelection = function resolveSelection(selection, cellLayout) {
+  var cellToPixel = cellLayout.cellToPixel;
+  var rowSelectionActive = isRowSelection(selection);
+  var columnSelectionActive = isColumnSelection(selection);
 
-    if (!sheetStyle.hideColumnHeaders && y < sheetStyle.columnHeaderHeight) {
-      scrollToP2 = false;
-      setColumnSelectionInProgress(true);
-      sel1.y = -1;
-      sel2.y = -1;
-    } else {
-      setColumnSelectionInProgress(false);
-    }
+  var _normalizeSelection3 = normalizeSelection(selection),
+      min = _normalizeSelection3[0],
+      max = _normalizeSelection3[1];
 
-    setSelectionInProgress(true);
-    changeSelection(sel1.x, sel1.y, sel2.x, sel2.y, scrollToP2);
+  var _cellToPixel = cellToPixel(min),
+      left = _cellToPixel[0],
+      top = _cellToPixel[1];
 
-    if (!props.dontCommitEditOnSelectionChange) {
-      setEditCell({
-        x: -1,
-        y: -1
-      });
-      setEditKey('');
-    }
-  };
+  var _cellToPixel2 = cellToPixel(max, ONE_ONE),
+      right = _cellToPixel2[0],
+      bottom = _cellToPixel2[1];
+
+  if (rowSelectionActive) {
+    right = 1e5;
+  }
 
-  var onMouseUp = function onMouseUp(e) {
-    if (knobDragInProgress) {
-      var sx1 = selection.x1;
-      var sx2 = selection.x2;
+  if (columnSelectionActive) {
+    bottom = 1e5;
+  }
 
-      if (selection.x1 > selection.x2) {
-        sx1 = selection.x2;
-        sx2 = selection.x1;
-      }
+  return [[left, top], [right, bottom]];
+};
+
+var resolveFrozenSelection = function resolveFrozenSelection(selection, cellLayout, freeze, indent, offset) {
+  var cellToPixel = cellLayout.cellToPixel,
+      columnToAbsolute = cellLayout.columnToAbsolute,
+      rowToAbsolute = cellLayout.rowToAbsolute;
+  var rowSelectionActive = isRowSelection(selection);
+  var columnSelectionActive = isColumnSelection(selection);
+  var freezeX = freeze[0],
+      freezeY = freeze[1];
+  var indentX = indent[0],
+      indentY = indent[1];
+  var offsetX = offset[0],
+      offsetY = offset[1];
+
+  var _normalizeSelection4 = normalizeSelection(selection),
+      min = _normalizeSelection4[0],
+      max = _normalizeSelection4[1];
+
+  var minX = min[0],
+      minY = min[1];
+  var maxX = max[0],
+      maxY = max[1];
+
+  var _cellToPixel3 = cellToPixel(min),
+      left = _cellToPixel3[0],
+      top = _cellToPixel3[1];
+
+  var _cellToPixel4 = cellToPixel(max, ONE_ONE),
+      right = _cellToPixel4[0],
+      bottom = _cellToPixel4[1];
+
+  var frozenX = columnToAbsolute(freezeX);
+  var frozenY = rowToAbsolute(freezeY);
+  var hideKnob = false;
+
+  if (isInRangeCenter(freezeX, minX, maxX + 1)) {
+    var edge = indentX + frozenX;
+
+    if (right <= edge) {
+      right = edge;
+      hideKnob = true;
+    }
+  }
 
-      var sy1 = selection.y1;
-      var sy2 = selection.y2;
+  if (isInRangeCenter(freezeY, minY, maxY + 1)) {
+    var _edge = indentY + frozenY;
 
-      if (selection.y1 > selection.y2) {
-        sy1 = selection.y2;
-        sy2 = selection.y1;
-      }
+    if (bottom <= _edge) {
+      bottom = _edge;
+      hideKnob = true;
+    }
+  }
 
-      var kx1 = knobArea.x1;
-      var kx2 = knobArea.x2;
+  if (isInRangeLeft(minX, freezeX, offsetX + freezeX)) {
+    left = -1e5;
 
-      if (knobArea.x1 > knobArea.x2) {
-        kx1 = knobArea.x2;
-        kx2 = knobArea.x1;
-      }
+    if (isInRangeRight(maxX + 1, freezeX, offsetX + freezeX)) {
+      right = indentX;
+      hideKnob = true;
+    }
+  }
 
-      var ky1 = knobArea.y1;
-      var ky2 = knobArea.y2;
+  if (isInRangeLeft(minY, freezeY, offsetY + freezeY)) {
+    top = -1e5;
 
-      if (knobArea.y1 > knobArea.y2) {
-        ky1 = knobArea.y2;
-        ky2 = knobArea.y1;
-      }
+    if (isInRangeRight(maxY + 1, freezeY, offsetY + freezeY)) {
+      bottom = indentY;
+      hideKnob = true;
+    }
+  }
 
-      var fx1 = kx1;
-      var fy1 = ky1;
-      var fx2 = kx2;
-      var fy2 = ky2;
-      var changes = [];
+  if (rowSelectionActive && offsetX > 0) {
+    hideKnob = true;
+  }
 
-      if (fx2 - fx1 === sx2 - sx1) {
-        if (fy1 === sy1) {
-          fy1 = sy2 + 1;
-        } else {
-          fy2 = sy1 - 1;
-        }
+  if (columnSelectionActive && offsetY > 0) {
+    hideKnob = true;
+  }
 
-        if (fx1 === -1 && fx2 === -1) {
-          var max = findApproxMaxEditDataIndex(editData);
-          fx1 = 0;
-          fx2 = max.x;
-        }
+  if (rowSelectionActive) {
+    right = 1e5;
+  }
 
-        var srcY = sy1;
+  if (columnSelectionActive) {
+    bottom = 1e5;
+  }
 
-        for (var y = fy1; y <= fy2; y++) {
-          for (var x = fx1; x <= fx2; x++) {
-            var value = sourceData(x, srcY);
-            changes.push({
-              x: x,
-              y: y,
-              value: value,
-              source: {
-                x: x,
-                y: srcY
-              }
-            });
-          }
+  return [[[left, top], [right, bottom]], hideKnob];
+};
 
-          srcY = srcY + 1;
+var resizeCanvas = function resizeCanvas(canvas) {
+  var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+      width = _canvas$getBoundingCl.width,
+      height = _canvas$getBoundingCl.height;
 
-          if (srcY > sy2) {
-            srcY = sy1;
-          }
-        }
-      } else {
-        if (fx1 === sx1) {
-          fx1 = sx2 + 1;
-        } else {
-          fx2 = sx1 - 1;
-        }
+  var _window = window,
+      _window$devicePixelRa = _window.devicePixelRatio,
+      ratio = _window$devicePixelRa === void 0 ? 1 : _window$devicePixelRa;
 
-        if (fy1 === -1 && fy2 === -1) {
-          var _max3 = findApproxMaxEditDataIndex(editData);
+  if (ratio < 1) {
+    ratio = 1;
+  }
 
-          fy1 = 0;
-          fy2 = _max3.y;
-        }
+  var newCanvasWidth = Math.round(width * ratio);
+  var newCanvasHeight = Math.round(height * ratio);
 
-        var srcX = sx1;
+  if (canvas.width !== newCanvasWidth || canvas.height !== newCanvasHeight) {
+    var context = canvas.getContext('2d');
 
-        for (var _x3 = fx1; _x3 <= fx2; _x3++) {
-          for (var _y2 = fy1; _y2 <= fy2; _y2++) {
-            var _value = sourceData(srcX, _y2);
+    if (context) {
+      canvas.width = newCanvasWidth;
+      canvas.height = newCanvasHeight;
+      context.scale(ratio, ratio);
+    }
 
-            changes.push({
-              x: _x3,
-              y: _y2,
-              value: _value,
-              source: {
-                x: srcX,
-                y: _y2
-              }
-            });
-          }
+    return true;
+  }
 
-          srcX = srcX + 1;
+  return false;
+};
 
-          if (srcX > sx2) {
-            srcX = sx1;
-          }
-        }
-      }
+var excelHeaderString = function excelHeaderString(num) {
+  var s = '';
+  var t = 0;
 
-      if (props.onChange) {
-        props.onChange(changes);
-      }
+  while (num > 0) {
+    t = (num - 1) % 26;
+    s = String.fromCharCode(65 + t) + s;
+    num = (num - t) / 26 | 0;
+  }
 
-      changeSelection(knobArea.x1, knobArea.y1, knobArea.x2, knobArea.y2);
-    }
+  return s || '';
+};
 
-    setSelectionInProgress(false);
-    setRowSelectionInProgress(false);
-    setColumnSelectionInProgress(false);
-    setKnobDragInProgress(false);
-    setColumnResize(null);
-    setRowResize(null);
+var Sheet = React.forwardRef(function (props, ref) {
+  var _props$secondarySelec, _props$inputComponent;
 
-    if (buttonClickMouseDownCoordinates.x !== -1 && buttonClickMouseDownCoordinates.y !== -1 && buttonClickMouseDownCoordinates.hitTarget !== null) {
-      if (!e.target || !(e.target instanceof Element)) {
-        return;
-      }
+  var canvasRef = React.useRef(null);
+  var overlayRef = React.useRef(null);
 
-      var rect = e.target.getBoundingClientRect();
+  var _useState = React.useState(INITIAL_MAX_SCROLL),
+      maxScroll = _useState[0],
+      setMaxScroll = _useState[1];
 
-      var _x4 = e.clientX - rect.left;
+  var _useState2 = React.useState(ORIGIN),
+      dataOffset = _useState2[0],
+      setDataOffset = _useState2[1];
 
-      var _y3 = e.clientY - rect.top;
+  var _useState3 = React.useState(NO_SELECTION),
+      selection = _useState3[0],
+      setSelection = _useState3[1];
 
-      var hitTarget = buttonClickMouseDownCoordinates.hitTarget;
+  var _useState4 = React.useState(null),
+      knobArea = _useState4[0],
+      setKnobArea = _useState4[1];
 
-      if (hitTarget.x <= _x4 && _x4 <= hitTarget.x + hitTarget.w && hitTarget.y <= _y3 && _y3 <= hitTarget.y + hitTarget.h) {
-        hitTarget.onClick(e);
-      }
+  var _useState5 = React.useState(null),
+      dragOffset = _useState5[0],
+      setDragOffset = _useState5[1];
 
-      setButtonClickMouseDownCoordinates({
-        x: -1,
-        y: -1,
-        hitTarget: null
-      });
-    }
-  };
+  var _useState6 = React.useState(null),
+      dropTarget = _useState6[0],
+      setDropTarget = _useState6[1];
 
-  React.useEffect(function () {
-    window.addEventListener('mouseup', onMouseUp);
-    return function () {
-      window.removeEventListener('mouseup', onMouseUp);
-    };
-  });
+  var _useState7 = React.useState(NO_CELL),
+      editCell = _useState7[0],
+      setEditCell = _useState7[1];
 
-  var onMouseMove = function onMouseMove(e) {
-    if (!e.target || !(e.target instanceof Element)) {
-      return;
-    }
+  var _useState8 = React.useState(''),
+      editValue = _useState8[0],
+      setEditValue = _useState8[1];
 
-    var rect = e.target.getBoundingClientRect();
-    var x = e.clientX - rect.left;
-    var y = e.clientY - rect.top;
-    window.document.body.style.cursor = 'auto';
-    var hitTargetKeyX = Math.floor(x / xBinSize);
-    var hitTargetKeyY = Math.floor(y / yBinSize);
+  var _useState9 = React.useState(false),
+      arrowKeyCommitMode = _useState9[0],
+      setArrowKeyCommitMode = _useState9[1];
 
-    if (hitMap[hitTargetKeyX] && hitMap[hitTargetKeyX][hitTargetKeyY]) {
-      for (var _iterator21 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step21; !(_step21 = _iterator21()).done;) {
-        var hitTarget = _step21.value;
+  var _useResizeObserver = useResizeObserver({
+    ref: canvasRef
+  }),
+      _useResizeObserver$wi = _useResizeObserver.width,
+      canvasWidth = _useResizeObserver$wi === void 0 ? 3000 : _useResizeObserver$wi,
+      _useResizeObserver$he = _useResizeObserver.height,
+      canvasHeight = _useResizeObserver$he === void 0 ? 3000 : _useResizeObserver$he;
 
-        if (hitTarget.x <= x && x <= hitTarget.x + hitTarget.w && hitTarget.y <= y && y <= hitTarget.y + hitTarget.h) {
-          window.document.body.style.cursor = 'pointer';
-        }
-      }
+  var cellWidth = React.useMemo(function () {
+    return createRowOrColumnProp(props.cellWidth, 100);
+  }, [props.cellWidth]);
+  var cellHeight = React.useMemo(function () {
+    return createRowOrColumnProp(props.cellHeight, 22);
+  }, [props.cellHeight]);
+  var columnHeaders = React.useMemo(function () {
+    return createRowOrColumnProp(props.columnHeaders, null);
+  }, [props.columnHeaders]);
+  var columnHeaderStyle = React.useMemo(function () {
+    return createRowOrColumnProp(props.columnHeaderStyle, {});
+  }, [props.columnHeaderStyle]);
+  var canSizeColumn = React.useMemo(function () {
+    return createRowOrColumnProp(props.canSizeColumn, true);
+  }, [props.canSizeColumn]);
+  var canSizeRow = React.useMemo(function () {
+    return createRowOrColumnProp(props.canSizeRow, true);
+  }, [props.canSizeRow]);
+  var canOrderColumn = React.useMemo(function () {
+    return createRowOrColumnProp(props.canOrderColumn, true);
+  }, [props.canOrderColumn]);
+  var canOrderRow = React.useMemo(function () {
+    return createRowOrColumnProp(props.canOrderRow, true);
+  }, [props.canOrderRow]);
+  var cellReadOnly = React.useMemo(function () {
+    return createCellProp(props.readOnly, false);
+  }, [props.readOnly]);
+  var sourceData = React.useMemo(function () {
+    return createCellProp(props.sourceData, null);
+  }, [props.sourceData]);
+  var displayData = React.useMemo(function () {
+    return createCellProp(props.displayData, '');
+  }, [props.displayData]);
+  var editData = React.useMemo(function () {
+    return createCellProp(props.editData, '');
+  }, [props.editData]);
+  var editKeys = React.useMemo(function () {
+    return createCellProp(props.editKeys, '');
+  }, [props.editKeys]);
+  var cellStyle = React.useMemo(function () {
+    return createCellProp(props.cellStyle, DEFAULT_CELL_STYLE);
+  }, [props.cellStyle]);
+  var sheetStyle = React.useMemo(function () {
+    return resolveSheetStyle(props.sheetStyle);
+  }, [props.sheetStyle]);
+  var secondarySelections = (_props$secondarySelec = props.secondarySelections) != null ? _props$secondarySelec : NO_SELECTIONS;
+  var maxScrollX = maxScroll[0],
+      maxScrollY = maxScroll[1];
+  var editCellX = editCell[0],
+      editCellY = editCell[1];
+  var editMode = editCellX !== -1 && editCellY !== -1;
+  var columnLayout = React.useMemo(function () {
+    return makeLayoutCache(cellWidth);
+  }, [props.cacheLayout ? null : cellWidth]);
+  var rowLayout = React.useMemo(function () {
+    return makeLayoutCache(cellHeight);
+  }, [props.cacheLayout ? null : cellHeight]);
+  React.useMemo(function () {
+    if (!props.cacheLayout) return;
+    columnLayout.setSizer(cellWidth);
+    rowLayout.setSizer(cellHeight);
+  }, [props.cacheLayout, cellWidth, cellHeight]);
+  var freezeColumns = sheetStyle.freezeColumns,
+      freezeRows = sheetStyle.freezeRows,
+      rowHeaderWidth = sheetStyle.rowHeaderWidth,
+      columnHeaderHeight = sheetStyle.columnHeaderHeight;
+  var cellLayout = React.useMemo(function () {
+    return makeCellLayout([freezeColumns, freezeRows], [rowHeaderWidth, columnHeaderHeight], dataOffset, columnLayout, rowLayout);
+  }, [freezeColumns, freezeRows, rowHeaderWidth, columnHeaderHeight, dataOffset, columnLayout, rowLayout]);
+  React.useImperativeHandle(ref, function () {
+    return cellLayout;
+  }, [cellLayout]);
+  var getVisibleCells = cellLayout.getVisibleCells,
+      cellToPixel = cellLayout.cellToPixel,
+      getVersion = cellLayout.getVersion;
+  var visibleCells = React.useMemo(function () {
+    return getVisibleCells([canvasWidth, canvasHeight]);
+  }, [getVisibleCells, canvasWidth, canvasHeight, getVersion()]);
+  React.useLayoutEffect(function () {
+    if (props.onScrollChange) {
+      props.onScrollChange([].concat(visibleCells.rows), [].concat(visibleCells.columns));
     }
+  }, [visibleCells, props.onScrollChange]);
 
-    if (!sheetStyle.hideColumnHeaders && props.onCellWidthChange && y < sheetStyle.columnHeaderHeight) {
-      var xx = sheetStyle.rowHeaderWidth;
-
-      for (var _iterator22 = _createForOfIteratorHelperLoose(columnSizes.index), _step22; !(_step22 = _iterator22()).done;) {
-        var col = _step22.value;
-
-        if (Math.abs(xx - x) < resizeColumnRowMouseThreshold) {
-          window.document.body.style.cursor = 'col-resize';
-          break;
-        }
+  var changeSelection = function changeSelection(newSelection, scrollToAnchor) {
+    if (scrollToAnchor === void 0) {
+      scrollToAnchor = true;
+    }
 
-        xx += cellWidth(col);
-      }
+    if (!isSameSelection(selection, newSelection)) {
+      setSelection(newSelection);
     }
 
-    if (!sheetStyle.hideRowHeaders && props.onCellHeightChange && x < sheetStyle.rowHeaderWidth) {
-      var yy = sheetStyle.columnHeaderHeight;
+    var overlay = overlayRef.current;
+    if (!overlay) return;
 
-      for (var _iterator23 = _createForOfIteratorHelperLoose(rowSizes.index), _step23; !(_step23 = _iterator23()).done;) {
-        var row = _step23.value;
+    if (scrollToAnchor) {
+      var anchor = newSelection[0];
+      scrollToCell(overlay, anchor, [canvasWidth, canvasHeight], [freezeColumns, freezeRows], dataOffset, maxScroll, cellLayout, function (dataOffset, maxScroll) {
+        setDataOffset(dataOffset);
+        setMaxScroll(maxScroll);
+      });
+    }
 
-        if (Math.abs(yy - y) < resizeColumnRowMouseThreshold) {
-          window.document.body.style.cursor = 'row-resize';
-          break;
-        }
+    if (props.onSelectionChanged) {
+      var _normalizeSelection = normalizeSelection(newSelection),
+          _normalizeSelection$ = _normalizeSelection[0],
+          minX = _normalizeSelection$[0],
+          minY = _normalizeSelection$[1],
+          _normalizeSelection$2 = _normalizeSelection[1],
+          maxX = _normalizeSelection$2[0],
+          maxY = _normalizeSelection$2[1];
 
-        yy += cellHeight(row);
-      }
+      props.onSelectionChanged(minX, minY, maxX, maxY);
     }
+  };
 
-    if (Math.abs(x - knobCoordinates.x) < knobSize && Math.abs(y - knobCoordinates.y) < knobSize) {
-      window.document.body.style.cursor = 'crosshair';
+  var commitEditingCell = function commitEditingCell(value) {
+    if (props.onChange) {
+      var cellX = editCell[0],
+          cellY = editCell[1];
+      props.onChange([{
+        x: cellX,
+        y: cellY,
+        value: value !== undefined ? value : editValue
+      }]);
     }
 
-    if (columnResize) {
-      if (props.onCellWidthChange) {
-        var newWidth = Math.max(columnResize.oldWidth + x - columnResize.startX, minimumColumnWidth);
-        props.onCellWidthChange(columnResize.colIndices, newWidth);
-      }
+    setEditCell(NO_CELL);
+  };
 
-      return;
+  var startEditingCell = function startEditingCell(editCell, arrowKeyCommitMode) {
+    if (arrowKeyCommitMode === void 0) {
+      arrowKeyCommitMode = false;
     }
 
-    if (rowResize) {
-      if (props.onCellHeightChange) {
-        var newHeight = Math.max(rowResize.oldHeight + y - rowResize.startY, minimumRowHeight);
-        props.onCellHeightChange(rowResize.rowIndices, newHeight);
-      }
+    var cellX = editCell[0],
+        cellY = editCell[1];
 
+    if (cellReadOnly(cellX, cellY)) {
       return;
     }
 
-    if (selectionInProgress) {
-      var sel2 = absCoordianteToCell(x, y, rowSizes, columnSizes);
+    var editDataValue = editData(cellX, cellY);
+    var val = '';
 
-      if (rowSelectionInProgress) {
-        changeSelection(-1, selection.y1, -1, sel2.y, false);
-      } else if (columnSelectionInProgress) {
-        changeSelection(selection.x1, -1, sel2.x, -1, false);
-      } else {
-        changeSelection(selection.x1, selection.y1, sel2.x, sel2.y);
-      }
+    if (editDataValue !== null && editDataValue !== undefined) {
+      val = editDataValue;
     }
 
-    if (knobDragInProgress) {
-      window.document.body.style.cursor = 'crosshair';
-      var cell = absCoordianteToCell(x, y, rowSizes, columnSizes);
-      var x1 = selection.x1;
-      var y1 = selection.y1;
-      var x2 = selection.x2;
-      var y2 = selection.y2;
-
-      if (x1 > x2) {
-        x1 = selection.x2;
-        x2 = selection.x1;
-      }
-
-      if (y1 > y2) {
-        y1 = selection.y2;
-        y2 = selection.y1;
-      }
-
-      var xCellDiff = 0;
-      if (cell.x < x1) xCellDiff = cell.x - x1;
-      if (cell.x > x2) xCellDiff = x2 - cell.x;
-      var yCellDiff = 0;
-      if (cell.y < y1) yCellDiff = cell.y - y1;
-      if (cell.y > y2) yCellDiff = y2 - cell.y;
-
-      if (x1 === -1 && x2 === -1 || xCellDiff > yCellDiff) {
-        if (cell.y < y1) {
-          y1 = cell.y;
-        } else {
-          y2 = cell.y;
-        }
-      } else {
-        if (cell.x < x1) {
-          x1 = cell.x;
-        } else {
-          x2 = cell.x;
-        }
-      }
-
-      setKnobArea({
-        x1: x1,
-        y1: y1,
-        x2: x2,
-        y2: y2
-      });
-    }
+    setEditCell(editCell);
+    setEditValue(val);
+    setArrowKeyCommitMode(arrowKeyCommitMode);
   };
 
-  var onDoubleClick = function onDoubleClick(e) {
-    e.preventDefault();
-
-    if (!e.target || !(e.target instanceof Element) || shiftKeyDown) {
-      return;
-    }
+  var hitmapRef = React.useRef(NO_CLICKABLES);
+  var textAreaRef = React.useRef(null);
+  useClipboardCopy(textAreaRef, selection, editMode, editData);
+  useClipboardPaste(textAreaRef, selection, changeSelection, props.onChange);
+  var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
 
-    var rect = e.target.getBoundingClientRect();
-    var x = e.clientX - rect.left;
-    var y = e.clientY - rect.top;
-    var hitTargetKeyX = Math.floor(x / xBinSize);
-    var hitTargetKeyY = Math.floor(y / yBinSize);
+  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, startEditingCell, commitEditingCell, setKnobArea, setDragOffset, setDropTarget, changeSelection, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange),
+      mouseHandlers = _useMouse.mouseHandlers,
+      knobPosition = _useMouse.knobPosition;
 
-    if (hitMap[hitTargetKeyX] && hitMap[hitTargetKeyX][hitTargetKeyY]) {
-      for (var _iterator24 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step24; !(_step24 = _iterator24()).done;) {
-        var hitTarget = _step24.value;
+  React.useLayoutEffect(function () {
+    var canvas = canvasRef.current;
 
-        if (hitTarget.x <= x && x <= hitTarget.x + hitTarget.w && hitTarget.y <= y && y <= hitTarget.y + hitTarget.h) {
-          return;
-        }
-      }
+    if (!canvas) {
+      return;
     }
 
-    var editCell = absCoordianteToCell(x, y, rowSizes, columnSizes);
-    setArrowKeyCommitMode(false);
+    var context = canvas.getContext('2d');
 
-    if (editMode) {
-      commitEditingCell();
+    if (!context) {
+      return;
     }
 
-    startEditingCell(editCell);
-  };
+    var animationFrameId = window.requestAnimationFrame(function () {
+      hitmapRef.current = renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, dataOffset);
+    });
+    return function () {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, dataOffset]);
 
   var onKeyDown = function onKeyDown(e) {
+    console.log('onKeyDown', e.key, e);
+
     if (e.key === 'Escape') {
-      setEditCell({
-        x: -1,
-        y: -1
-      });
-      setEditKey('');
+      setEditCell(NO_CELL);
       return;
     }
 
-    if (e.key === 'Enter') {
-      commitEditingCell();
-      changeSelection(selection.x1, selection.y1 + 1, selection.x1, selection.y1 + 1);
-    }
-
-    if (e.key === 'Tab') {
-      e.preventDefault();
-      commitEditingCell();
-      changeSelection(selection.x1 + 1, selection.y1, selection.x1 + 1, selection.y1);
-    }
+    var direction = e.key === 'Enter' || e.key === 'TAB' ? 'right' : arrowKeyCommitMode ? ARROW_KEYS[e.key] : null;
 
-    if (arrowKeyCommitMode && ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+    if (direction) {
       e.preventDefault();
+      var step = getDirectionStep(direction);
+      var head = maxXY(addXY(editCell, step), ORIGIN);
       commitEditingCell();
-      var x1 = selection.x1;
-      var y1 = selection.y1;
-      var x2 = selection.x1;
-      var y2 = selection.y1;
-
-      if (e.key === 'ArrowRight') {
-        x1 = selection.x1 + 1;
-        x2 = selection.x1 + 1;
-      } else if (e.key === 'ArrowLeft') {
-        x1 = selection.x1 - 1;
-        x2 = selection.x1 - 1;
-      } else if (e.key === 'ArrowUp') {
-        y1 = selection.y1 - 1;
-        y2 = selection.y1 - 1;
-      } else if (e.key === 'ArrowDown') {
-        y1 = selection.y1 + 1;
-        y2 = selection.y1 + 1;
-      }
-
-      changeSelection(x1, y1, x2, y2);
+      changeSelection([head, head]);
     }
   };
 
   var onGridKeyDown = function onGridKeyDown(e) {
-    if (editMode && arrowKeyCommitMode && ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
-      commitEditingCell();
-      return;
-    }
+    console.log('onGridKeydown', e.key, e);
 
-    if (e.key === 'Shift') {
-      setShiftKeyDown(true);
+    if (editMode && arrowKeyCommitMode && e.key in ARROW_KEYS) {
+      commitEditingCell();
       return;
     }
 
@@ -2275,33 +2830,28 @@ function Sheet(props) {
     }
 
     if ((e.metaKey || e.ctrlKey) && String.fromCharCode(e.which).toLowerCase() === 'c') {
+      var textArea = textAreaRef.current;
+      textArea === null || textArea === void 0 ? void 0 : textArea.select();
       return;
     }
 
     if (e.key === 'Backspace' || e.key === 'Delete') {
-      var x1 = selection.x1;
-      var y1 = selection.y1;
-      var x2 = selection.x2;
-      var y2 = selection.y2;
-
-      if (x1 > x2) {
-        x1 = selection.x2;
-        x2 = selection.x1;
-      }
-
-      if (y1 > y2) {
-        y1 = selection.y2;
-        y2 = selection.y1;
-      }
-
-      if (x1 === -1 && x2 === -1 && y1 !== -1 && y2 !== -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;
-        x2 = maxSearchableRowOrCol;
+        x2 = MAX_SEARCHABLE_INDEX;
       }
 
-      if (x1 !== -1 && x2 !== -1 && y1 === -1 && y2 === -1) {
+      if (isColumnSelection(selection)) {
         y1 = 0;
-        y2 = maxSearchableRowOrCol;
+        y2 = MAX_SEARCHABLE_INDEX;
       }
 
       var changes = [];
@@ -2323,171 +2873,95 @@ function Sheet(props) {
       return;
     }
 
-    if (selection.x1 === -1 || selection.x2 === -1 || selection.y1 === -1 || selection.y2 === -1) {
+    if (isEmptySelection(selection)) {
       return;
     }
 
     if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode >= 96 && e.keyCode <= 105 || e.keyCode >= 65 && e.keyCode <= 90 || e.key === 'Enter' || e.key === '-' || e.key === '.' || e.key === ',') {
-      if (cellReadOnly(selection.x1, selection.y1)) {
+      var cell = selection[0];
+      var cellX = cell[0],
+          cellY = cell[1];
+
+      if (cellReadOnly(cellX, cellY)) {
         e.preventDefault();
         return;
       }
 
-      startEditingCell({
-        x: selection.x1,
-        y: selection.y1
-      });
-      setArrowKeyCommitMode(e.key !== 'Enter');
+      startEditingCell(cell, e.key !== 'Enter');
       return;
     }
 
-    if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
-      var sel1 = {
-        x: selection.x1,
-        y: selection.y1
-      };
-      var sel2 = {
-        x: selection.x2,
-        y: selection.y2
-      };
-      var incr = {
-        x: 0,
-        y: 0
-      };
-      var direction = 'right';
-
-      if (e.key === 'ArrowRight' || e.key === 'Tab') {
-        incr.x = 1;
-        direction = 'right';
-      } else if (e.key === 'ArrowLeft') {
-        incr.x = -1;
-        direction = 'left';
-      } else if (e.key === 'ArrowUp') {
-        incr.y = -1;
-        direction = 'up';
-      } else if (e.key === 'ArrowDown') {
-        incr.y = 1;
-        direction = 'down';
-      }
+    if (e.key in ARROW_KEYS) {
+      var anchor = selection[0],
+          head = selection[1];
+      var direction = ARROW_KEYS[e.key];
+      var step = getDirectionStep(direction);
 
       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;
-      }
-
-      if (sel2.y < 0) {
-        sel2.y = 0;
+        head = findInDisplayData(displayData, head, direction);
+      } else {
+        head = maxXY(addXY(head, step), ORIGIN);
       }
 
       if (!e.shiftKey) {
-        sel1 = _extends({}, sel2);
+        anchor = head;
       }
 
-      changeSelection(sel1.x, sel1.y, sel2.x, sel2.y);
+      changeSelection([anchor, head]);
       return;
     }
 
     e.preventDefault();
   };
 
-  var onGridKeyUp = function onGridKeyUp(e) {
-    setShiftKeyDown(e.shiftKey);
-  };
-
-  var onContextMenu = function onContextMenu(e) {
-    var _props$onRightClick;
-
-    if (!e.target || !(e.target instanceof Element)) {
-      return;
-    }
-
-    var rect = e.target.getBoundingClientRect();
-    var x = e.clientX - rect.left;
-    var y = e.clientY - rect.top;
-    var cell = absCoordianteToCell(x, y, rowSizes, columnSizes);
-    var cellX = cell.x;
-    var cellY = cell.y;
-    var x1 = selection.x1,
-        x2 = selection.x2,
-        y1 = selection.y1,
-        y2 = selection.y2;
-
-    if (x1 > x2) {
-      var _ref = [x2, x1];
-      x1 = _ref[0];
-      x2 = _ref[1];
-    }
-
-    if (y1 > y2) {
-      var _ref2 = [y2, y1];
-      y1 = _ref2[0];
-      y2 = _ref2[1];
-    }
-
-    if (!(y > sheetStyle.columnHeaderHeight && x > sheetStyle.rowHeaderWidth)) {
-      return;
-    }
-
-    if (!(cellX >= x1 && cellX <= x2) || !(cellY >= y1 && cellY <= y2)) {
-      changeSelection(cellX, cellY, cellX, cellY);
-    }
-
-    onMouseMove(e);
+  var editKey = editKeys ? editKeys.apply(void 0, editCell) : '';
 
-    var ev = _extends({}, e, {
-      cellX: cellX,
-      cellY: cellY
-    });
+  var _useState10 = React.useState(editKey),
+      lastEditKey = _useState10[0],
+      setLastEditKey = _useState10[1];
 
-    (_props$onRightClick = props.onRightClick) === null || _props$onRightClick === void 0 ? void 0 : _props$onRightClick.call(props, ev);
-  };
+  if (lastEditKey !== editKey) {
+    setLastEditKey(editKey);
+    setEditCell(NO_CELL);
+  }
 
-  var editMode = editCell.x !== -1 && editCell.y !== -1;
-  var editTextPosition = {
-    x: 0,
-    y: 0
-  };
+  var editTextPosition = ORIGIN;
   var editTextWidth = 0;
   var editTextHeight = 0;
   var editTextTextAlign = 'right';
 
   if (editMode) {
-    editTextPosition = cellToAbsCoordinate(editCell.x, editCell.y, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
-    var style = cellStyle(editCell.x, editCell.y);
-    editTextPosition.x += 1;
-    editTextPosition.y += 1;
-    editTextWidth = cellWidth(editCell.x) - 2;
-    editTextHeight = cellHeight(editCell.y) - 2;
-    editTextTextAlign = style.textAlign || defaultCellStyle.textAlign || 'left';
+    var style = cellStyle.apply(void 0, editCell);
+    editTextPosition = cellToPixel(editCell);
+    editTextPosition = addXY(editTextPosition, ONE_ONE);
+    editTextWidth = cellWidth(editCellX) - 3;
+    editTextHeight = cellHeight(editCellY) - 3;
+    editTextTextAlign = style.textAlign || DEFAULT_CELL_STYLE.textAlign || 'left';
   }
 
+  var _editTextPosition = editTextPosition,
+      textX = _editTextPosition[0],
+      textY = _editTextPosition[1];
   var inputProps = {
     value: editValue,
     autoFocus: true,
     onKeyDown: onKeyDown,
     style: {
       position: 'absolute',
-      top: editTextPosition.y,
-      left: editTextPosition.x,
+      left: textX,
+      top: textY,
+      padding: '0px 4px',
       width: editTextWidth,
       height: editTextHeight,
       outline: 'none',
       border: 'none',
       textAlign: editTextTextAlign,
       color: 'black',
-      fontSize: defaultCellStyle.fontSize,
+      fontSize: DEFAULT_CELL_STYLE.fontSize,
       fontFamily: 'sans-serif'
     }
   };
-  var input = (_props$inputComponent = props.inputComponent) === null || _props$inputComponent === void 0 ? void 0 : _props$inputComponent.call(props, editCell.x, editCell.y, _extends({}, inputProps, {
+  var input = (_props$inputComponent = props.inputComponent) === null || _props$inputComponent === void 0 ? void 0 : _props$inputComponent.call(props, editCellX, editCellY, _extends({}, inputProps, {
     onChange: setEditValue
   }), commitEditingCell);
   var overlayDivClassName = styles.sheetscroll;
@@ -2521,23 +2995,19 @@ function Sheet(props) {
   }, React__default.createElement("canvas", {
     style: canvasStyles,
     ref: canvasRef
-  }), React__default.createElement("div", {
-    ref: overlayRef,
-    onDoubleClick: onDoubleClick,
-    onMouseDown: onMouseDown,
-    onMouseMove: onMouseMove,
-    onMouseLeave: onMouseLeave,
-    onContextMenu: onContextMenu,
+  }), React__default.createElement("div", Object.assign({
+    ref: overlayRef
+  }, mouseHandlers, {
     onScroll: onScroll,
     className: overlayDivClassName,
     style: overlayDivStyles
-  }, React__default.createElement("div", {
+  }), React__default.createElement("div", {
     style: {
       position: 'absolute',
       left: 0,
       top: 0,
       width: 1,
-      height: maxScroll.y + 2000,
+      height: maxScrollY + 2000,
       backgroundColor: 'rgba(0,0,0,0.0)'
     }
   }), React__default.createElement("div", {
@@ -2545,7 +3015,7 @@ function Sheet(props) {
       position: 'absolute',
       left: 0,
       top: 0,
-      width: maxScroll.x + 5000,
+      width: maxScrollX + 5000,
       height: 1,
       backgroundColor: 'rgba(0,0,0,0.0)'
     }
@@ -2558,7 +3028,7 @@ function Sheet(props) {
       height: 1,
       opacity: 0.01
     },
-    ref: copyPasteTextAreaRef,
+    ref: textAreaRef,
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -2567,8 +3037,7 @@ function Sheet(props) {
       return e.target.select();
     },
     tabIndex: 0,
-    onKeyDown: onGridKeyDown,
-    onKeyUp: onGridKeyUp
+    onKeyDown: onGridKeyDown
   }), editMode && (input !== undefined ? input : React__default.createElement("input", Object.assign({}, inputProps, {
     type: "text",
     onFocus: function onFocus(e) {
@@ -2578,7 +3047,7 @@ function Sheet(props) {
       return setEditValue(e.target.value);
     }
   }))));
-}
+});
 
 module.exports = Sheet;
 //# sourceMappingURL=index.js.map