sheet-happens 0.0.43 → 0.0.44

package/dist/index.js

@@ -69,13 +69,13 @@ var styles = {"sheetscroll":"_PxIi8"};
 var INITIAL_MAX_SCROLL = [2000, 1000];
 var ORIGIN = [0, 0];
 var ONE_ONE = [1, 1];
+var NEG_NEG = [-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 MAX_SEARCHABLE_INDEX = 100000;
 var COLORS = {
   selectionBorder: '#1a66ff',
   selectionBackground: '#d8e6ff80',
@@ -145,9 +145,6 @@ var ARROW_KEYS = {
   ArrowDown: 'down'
 };
 
-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;
@@ -188,13 +185,6 @@ var maxXY = function maxXY(a, b) {
 var minXY = function minXY(a, b) {
   return [Math.min(a[0], b[0]), Math.min(a[1], b[1])];
 };
-var clampXY = function clampXY(p, min, max) {
-  if (max === void 0) {
-    max = [Infinity, Infinity];
-  }
-
-  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];
@@ -435,6 +425,52 @@ var createCellProp = function createCellProp(cellProp, defaultValue) {
     };
   }
 };
+var createRowOrColumnStyledProp = function createRowOrColumnStyledProp(rowColProp, defaultValue) {
+  if (Array.isArray(rowColProp)) {
+    return function (rowOrColIndex) {
+      if (rowOrColIndex >= 0 && rowOrColIndex < rowColProp.length) {
+        return rowColProp[rowOrColIndex];
+      } else {
+        return defaultValue;
+      }
+    };
+  } else if (typeof rowColProp === 'function') {
+    return rowColProp;
+  } else if (rowColProp !== null && rowColProp !== undefined) {
+    return function () {
+      return rowColProp;
+    };
+  } else {
+    return function () {
+      return defaultValue;
+    };
+  }
+};
+var createCellStyledProp = function createCellStyledProp(cellProp, defaultValue) {
+  if (Array.isArray(cellProp)) {
+    return function (x, y) {
+      if (y >= 0 && y < cellProp.length) {
+        if (x >= 0 && x < cellProp[y].length) {
+          return cellProp[y][x];
+        } else {
+          return defaultValue;
+        }
+      } else {
+        return defaultValue;
+      }
+    };
+  } else if (typeof cellProp === 'function') {
+    return cellProp;
+  } else if (cellProp !== null && cellProp !== undefined) {
+    return function () {
+      return cellProp;
+    };
+  } else {
+    return function () {
+      return defaultValue;
+    };
+  }
+};
 var findApproxMaxEditDataIndex = function findApproxMaxEditDataIndex(editData) {
   var x = 0;
   var y = 0;
@@ -500,8 +536,13 @@ var findApproxMaxEditDataIndex = function findApproxMaxEditDataIndex(editData) {
 };
 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 cell = maxXY(start, ORIGIN);
+
+  var _addXY = addXY(cell, step),
+      x = _addXY[0],
+      y = _addXY[1];
+
+  var first = displayData(x, y, DEFAULT_CELL_STYLE);
   var firstFilled = first !== '' && first !== null && first !== undefined;
 
   if (!firstFilled) {
@@ -511,9 +552,11 @@ var findInDisplayData = function findInDisplayData(displayData, start, direction
   var _cell = cell,
       cellX = _cell[0],
       cellY = _cell[1];
+  var maxX = cellX + MAX_SEARCHABLE_INDEX - 1;
+  var maxY = cellY + MAX_SEARCHABLE_INDEX - 1;
 
-  while (cellX <= MAX_SEARCHABLE_INDEX && cellY <= MAX_SEARCHABLE_INDEX && cellX >= 0 && cellY >= 0) {
-    var data = displayData(cellX, cellY);
+  while (cellX < maxX && cellY < maxY && cellX >= 0 && cellY >= 0) {
+    var data = displayData(cellX, cellY, DEFAULT_CELL_STYLE);
 
     if (firstFilled && (data === '' || data === null || data === undefined)) {
       return subXY(cell, step);
@@ -532,7 +575,7 @@ var findInDisplayData = function findInDisplayData(displayData, start, direction
   return maxXY(cell, [0, 0]);
 };
 
-var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, onEdit, onCommit, onKnobAreaChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
+var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, onEdit, onCommit, onKnobAreaChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onFocusChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
   var _useState = React.useState(null),
       hitTarget = _useState[0],
       setHitTarget = _useState[1];
@@ -673,6 +716,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         columns = _ref$current$visibleC.columns,
         rows = _ref$current$visibleC.rows,
         knobPosition = _ref$current.knobPosition;
+    onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
     if (e.button !== 0) return;
     (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : (_e$target2$setPointer = _e$target2.setPointerCapture) === null || _e$target2$setPointer === void 0 ? void 0 : _e$target2$setPointer.call(_e$target2, e.pointerId);
     var xy = getMousePosition(e);
@@ -939,6 +983,7 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         pixelToRow = _ref$current2$cellLay.pixelToRow,
         getIndentX = _ref$current2$cellLay.getIndentX,
         getIndentY = _ref$current2$cellLay.getIndentY;
+    onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
 
     if (knobArea && draggingKnob) {
       var changes = parseKnobOperation(knobArea, selection, sourceData, editData, cellReadOnly);
@@ -1174,7 +1219,9 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
         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);
+        onCellWidthChange(indices, indices.map(function (_) {
+          return newWidth / indices.length;
+        }));
       }
 
       return;
@@ -1192,7 +1239,9 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
 
         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);
+        onCellHeightChange(_indices5, _indices5.map(function (_) {
+          return newHeight / _indices5.length;
+        }));
       }
 
       return;
@@ -1327,9 +1376,11 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       for (var _i = 0, _autosized = autosized; _i < _autosized.length; _i++) {
         var column = _autosized[_i];
         onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(column - 1);
-        onCellWidthChange([column], getAutoSizeWidth(column));
       }
 
+      onCellWidthChange(autosized, autosized.map(function (column) {
+        return getAutoSizeWidth(column);
+      }));
       if (autosized.length) return;
     }
 
@@ -1497,6 +1548,162 @@ var parseKnobOperation = function parseKnobOperation(knobArea, selection, source
   return changes;
 };
 
+var useKeyboard = function useKeyboard(arrowKeyCommitMode, overlayRef, cellReadOnly, displayData, editCell, editMode, focused, rawSelection, selection, onEdit, onCommit, onCancel, onSelectionChange, onFocusChange, onClipboardCopy, onChange) {
+  var onInputKeyDown = function onInputKeyDown(e) {
+    if (e.key === 'Escape') {
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+      return;
+    }
+
+    var direction = e.key === 'Enter' ? 'down' : e.key === 'Tab' ? 'right' : arrowKeyCommitMode ? ARROW_KEYS[e.key] : null;
+
+    if (direction) {
+      e.preventDefault();
+      var step = getDirectionStep(direction);
+      var head = maxXY(addXY(editCell, step), ORIGIN);
+      onCommit === null || onCommit === void 0 ? void 0 : onCommit();
+      onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([head, head]);
+    }
+  };
+
+  var onGridKeyDown = function onGridKeyDown(e) {
+    if (editMode && arrowKeyCommitMode && e.key in ARROW_KEYS) {
+      onCommit === null || onCommit === void 0 ? void 0 : onCommit();
+      return;
+    }
+
+    if ((e.metaKey || e.ctrlKey) && String.fromCharCode(e.which).toLowerCase() === 'v') {
+      return;
+    }
+
+    if ((e.metaKey || e.ctrlKey) && String.fromCharCode(e.which).toLowerCase() === 'c') {
+      onClipboardCopy === null || onClipboardCopy === void 0 ? void 0 : onClipboardCopy(false);
+      return;
+    }
+
+    if ((e.metaKey || e.ctrlKey) && String.fromCharCode(e.which).toLowerCase() === 'x') {
+      onClipboardCopy === null || onClipboardCopy === void 0 ? void 0 : onClipboardCopy(true);
+      return;
+    }
+
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+      var _normalizeSelection = normalizeSelection(selection),
+          _normalizeSelection$ = _normalizeSelection[0],
+          x1 = _normalizeSelection$[0],
+          y1 = _normalizeSelection$[1],
+          _normalizeSelection$2 = _normalizeSelection[1],
+          x2 = _normalizeSelection$2[0],
+          y2 = _normalizeSelection$2[1];
+
+      if (isRowSelection(selection)) {
+        x1 = 0;
+        x2 = MAX_SEARCHABLE_INDEX;
+      }
+
+      if (isColumnSelection(selection)) {
+        y1 = 0;
+        y2 = MAX_SEARCHABLE_INDEX;
+      }
+
+      var changes = [];
+
+      for (var y = y1; y <= y2; y++) {
+        for (var x = x1; x <= x2; x++) {
+          if (!cellReadOnly(x, y)) {
+            changes.push({
+              x: x,
+              y: y,
+              value: null
+            });
+          }
+        }
+      }
+
+      onChange === null || onChange === void 0 ? void 0 : onChange(changes);
+      return;
+    }
+
+    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 === ',') {
+      var cell = selection[0];
+      var cellX = cell[0],
+          cellY = cell[1];
+
+      if (cellReadOnly(cellX, cellY)) {
+        return;
+      }
+
+      onEdit === null || onEdit === void 0 ? void 0 : onEdit(cell, e.key !== 'Enter');
+      return;
+    }
+
+    e.preventDefault();
+
+    if (e.key in ARROW_KEYS) {
+      var anchor = rawSelection[0],
+          head = rawSelection[1];
+      var direction = ARROW_KEYS[e.key];
+      var step = getDirectionStep(direction);
+      var shift = e.shiftKey;
+
+      if (e.metaKey || e.ctrlKey) {
+        head = findInDisplayData(displayData, head, direction);
+      } else {
+        var limit = shift ? isRowSelection(selection) ? [-1, 0] : isColumnSelection(selection) ? [0, -1] : NEG_NEG : ORIGIN;
+        head = maxXY(addXY(head, step), limit);
+      }
+
+      if (!shift) {
+        anchor = head;
+      }
+
+      onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([anchor, head], true, true);
+      return;
+    }
+  };
+
+  var onGridFocus = function onGridFocus() {
+    onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
+  };
+
+  var onGridBlur = function onGridBlur() {
+    onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false);
+  };
+
+  React.useLayoutEffect(function () {
+    var overlay = overlayRef.current;
+
+    if (!overlay) {
+      return;
+    }
+
+    if (editMode || !focused) {
+      return;
+    }
+
+    if (document.activeElement === overlay) {
+      return;
+    }
+
+    var activeTagName = document.activeElement.tagName.toLowerCase();
+
+    if (!(activeTagName === 'div' && document.activeElement.contentEditable === 'true' || activeTagName === 'input' || activeTagName === 'textarea' || activeTagName === 'select')) {
+      overlay.focus({
+        preventScroll: true
+      });
+    }
+  }, [editMode, focused]);
+  return {
+    onInputKeyDown: onInputKeyDown,
+    onGridFocus: onGridFocus,
+    onGridBlur: onGridBlur,
+    onGridKeyDown: onGridKeyDown
+  };
+};
+
 var useScroll = function useScroll(offset, maxScroll, cellLayout, onOffsetChange, onMaxScrollChange) {
   return React.useCallback(function (e) {
     if (!e.target || !(e.target instanceof Element)) {
@@ -1654,42 +1861,6 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
   }
 };
 
-var resolveSheetStyle = function resolveSheetStyle(sheetStyle) {
-  var _sheetStyle$shadowBlu, _sheetStyle$shadowOpa, _sheetStyle$shadowCol;
-
-  return {
-    freezeColumns: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeColumns) || 0,
-    freezeRows: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeRows) || 0,
-    hideColumnHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideColumnHeaders) || false,
-    hideRowHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideRowHeaders) || false,
-    hideGridlines: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideGridlines) || false,
-    hideScrollBars: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideScrollBars) || false,
-    columnHeaderHeight: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideColumnHeaders ? 1 : SIZES.headerHeight,
-    rowHeaderWidth: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideRowHeaders ? 1 : SIZES.headerWidth,
-    shadowBlur: (_sheetStyle$shadowBlu = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowBlur) != null ? _sheetStyle$shadowBlu : SIZES.shadowBlur,
-    shadowOpacity: (_sheetStyle$shadowOpa = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowOpacity) != null ? _sheetStyle$shadowOpa : SIZES.shadowOpacity,
-    shadowColor: (_sheetStyle$shadowCol = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowColor) != null ? _sheetStyle$shadowCol : COLORS.shadowColor
-  };
-};
-var resolveCellStyle = function resolveCellStyle(optionalStyle, defaultStyle) {
-  return _extends({}, defaultStyle, optionalStyle);
-};
-var applyAlignment = function applyAlignment(start, cellSize, style, imageWidth, alignment) {
-  if (alignment === void 0) {
-    alignment = style.textAlign;
-  }
-
-  if (alignment === 'left') {
-    return start + style.marginLeft;
-  } else if (alignment === 'center') {
-    return start + cellSize * 0.5 - imageWidth / 2;
-  } else if (alignment === 'right') {
-    return start + (cellSize - style.marginRight - imageWidth);
-  }
-
-  return start;
-};
-
 var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth) {
   var context = React.useMemo(function () {
     return document.createElement('canvas').getContext('2d');
@@ -1698,9 +1869,8 @@ var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle,
     if (!context) return 0;
 
     var getWidth = function getWidth(cellContent, style) {
-      var finalStyle = resolveCellStyle(style, DEFAULT_CELL_STYLE);
-      context.font = finalStyle.weight + ' ' + finalStyle.fontSize + 'px ' + finalStyle.fontFamily;
-      var inlineMargin = finalStyle.marginLeft + finalStyle.marginRight;
+      context.font = style.weight + ' ' + style.fontSize + 'px ' + style.fontFamily;
+      var inlineMargin = style.marginLeft + style.marginRight;
 
       if (typeof cellContent === 'string' || typeof cellContent === 'number') {
         var _context$measureText = context.measureText(cellContent.toString()),
@@ -1725,7 +1895,7 @@ var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle,
           }
 
           if (obj.horizontalAlign === 'right') {
-            extraWidth += _width;
+            extraWidth += style.textAlign === 'right' ? _width * 2 : _width;
           } else {
             _maxWidth = Math.max(_maxWidth, _width);
           }
@@ -1738,19 +1908,23 @@ var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle,
     };
 
     var maxWidth = SIZES.minimumWidth;
-    var headerContent = columnHeaders(x);
+
+    var headerStyle = _extends({}, DEFAULT_COLUMN_HEADER_STYLE, columnHeaderStyle(x));
+
+    var headerContent = columnHeaders(x, headerStyle);
 
     if (headerContent) {
-      var headerStyle = columnHeaderStyle(x);
       maxWidth = Math.max(maxWidth, getWidth(headerContent, headerStyle));
     }
 
     for (var _iterator2 = _createForOfIteratorHelperLoose(rows), _step2; !(_step2 = _iterator2()).done;) {
       var y = _step2.value;
-      var cellContent = displayData(x, y);
+
+      var style = _extends({}, DEFAULT_CELL_STYLE, cellStyle(x, y));
+
+      var cellContent = displayData(x, y, style);
 
       if (cellContent != null) {
-        var style = cellStyle(x, y);
         maxWidth = Math.max(maxWidth, getWidth(cellContent, style));
       }
     }
@@ -1760,90 +1934,349 @@ var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle,
   return getAutoSizeWidth;
 };
 
-var useClipboardCopy = function useClipboardCopy(textAreaRef, selection, editMode, editData) {
+// A type of promise-like that resolves synchronously and supports only one observer
+
+const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
+
+const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
+
+// Asynchronously call a function and send errors to recovery continuation
+function _catch(body, recover) {
+	try {
+		var result = body();
+	} catch(e) {
+		return recover(e);
+	}
+	if (result && result.then) {
+		return result.then(void 0, recover);
+	}
+	return result;
+}
+
+var EMPTY_TABLE = {
+  rows: []
+};
+var useClipboardTable = function useClipboardTable() {
+  var _useState = React.useState(),
+      peek = _useState[0],
+      setPeek = _useState[1];
+
   React.useLayoutEffect(function () {
-    var textArea = textAreaRef.current;
-    if (!textArea) return;
-    if (editMode) return;
-    if (isEmptySelection(selection)) return;
-    var v = formatSelectionAsTSV(selection, editData);
+    var softRefresh = function softRefresh() {
+      return Promise.resolve(_catch(function () {
+        return Promise.resolve(navigator.permissions.query({
+          name: 'clipboard-read'
+        })).then(function (status) {
+          if (status.state !== 'granted') return;
+          hardRefresh();
+        });
+      }, function () {}));
+    };
+
+    var hardRefresh = function hardRefresh() {
+      try {
+        var _temp3 = _catch(function () {
+          return Promise.resolve(navigator.clipboard.read()).then(function (items) {
+            var item = items[0];
+
+            var _temp = function () {
+              if (item) {
+                return Promise.resolve(parseClipboardTable(item)).then(function (peek) {
+                  setPeek(peek);
+                });
+              } else {
+                setPeek(EMPTY_TABLE);
+              }
+            }();
+
+            if (_temp && _temp.then) return _temp.then(function () {});
+          });
+        }, function () {});
+
+        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    var delayedRefresh = function delayedRefresh() {
+      return setTimeout(hardRefresh);
+    };
+
+    window.document.addEventListener('cut', delayedRefresh);
+    window.document.addEventListener('copy', delayedRefresh);
+    window.document.addEventListener('focus', softRefresh);
+    softRefresh();
+    return function () {
+      window.document.removeEventListener('cut', delayedRefresh);
+      window.document.removeEventListener('copy', delayedRefresh);
+      window.document.removeEventListener('focus', softRefresh);
+    };
+  }, []);
+  var canPaste = React.useCallback(function () {
+    var _peek$rows;
 
-    if (v.match(/^[\t\n]*$/)) {
-      v = ' ' + v;
+    return !!(peek == null || (_peek$rows = peek.rows) !== null && _peek$rows !== void 0 && _peek$rows.length);
+  }, [peek]);
+  return {
+    peek: peek,
+    canPaste: canPaste,
+    copyTable: copyClipboardTable,
+    pasteTable: pasteClipboardTable
+  };
+};
+var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly, addListener, onSelectionChange, onChange, onCopy, onPaste) {
+  var _useClipboardTable = useClipboardTable(),
+      canPaste = _useClipboardTable.canPaste,
+      copyTable = _useClipboardTable.copyTable,
+      pasteTable = _useClipboardTable.pasteTable;
+
+  var pasteIntoSelection = React.useCallback(function (selection, table) {
+    try {
+      var rows = table.rows,
+          payload = table.payload;
+
+      var _normalizeSelection = normalizeSelection(selection),
+          min = _normalizeSelection[0];
+
+      var minX = min[0],
+          minY = min[1];
+      var left = Math.max(0, minX);
+      var top = Math.max(0, minY);
+      var width = rows.reduce(function (a, b) {
+        return Math.max(a, b.length);
+      }, 0);
+      var height = rows.length;
+      var newSelection = [min, addXY(min, [width - 1, height - 1])];
+      return Promise.resolve(onPaste === null || onPaste === void 0 ? void 0 : onPaste(newSelection, rows, payload)).then(function (shouldPaste) {
+        if (shouldPaste !== false) {
+          var changes = rows.flatMap(function (row, j) {
+            return row.map(function (value, i) {
+              var x = left + i;
+              var y = top + j;
+              return !(cellReadOnly !== null && cellReadOnly !== void 0 && cellReadOnly(x, y)) ? {
+                x: x,
+                y: y,
+                value: value
+              } : null;
+            });
+          }).filter(function (change) {
+            return !!change;
+          });
+          onChange === null || onChange === void 0 ? void 0 : onChange(changes);
+          onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelection);
+        }
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [onChange, onSelectionChange, cellReadOnly]);
+  var copySelection = React.useCallback(function (selection, cut) {
+    if (cut === void 0) {
+      cut = false;
     }
 
-    textArea.value = v;
-  }, [selection, editMode, editData, textAreaRef]);
-  React.useLayoutEffect(function () {
-    var textArea = textAreaRef.current;
-    if (!textArea) return;
+    try {
+      var _payload$cut;
 
-    var focus = function focus() {
-      textArea.focus({
-        preventScroll: true
+      var rows = formatSelectionAsRows(selection, editData);
+      var payload = onCopy === null || onCopy === void 0 ? void 0 : onCopy(selection, rows, cut);
+      copyTable(rows, payload);
+
+      if ((_payload$cut = payload === null || payload === void 0 ? void 0 : payload.cut) != null ? _payload$cut : cut) {
+        var changes = [];
+        forSelectionRows(selection)(function (y) {
+          forSelectionColumns(selection)(function (x) {
+            if (!(cellReadOnly !== null && cellReadOnly !== void 0 && cellReadOnly(x, y))) {
+              var change = {
+                x: x,
+                y: y,
+                value: ''
+              };
+              changes.push(change);
+            }
+          });
+        });
+        onChange === null || onChange === void 0 ? void 0 : onChange(changes);
+      }
+
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [onCopy, onChange, cellReadOnly]);
+  var pasteSelection = React.useCallback(function (selection) {
+    try {
+      return Promise.resolve(pasteTable()).then(function (table) {
+        if (table) pasteIntoSelection(selection, table);
       });
-      textArea.select();
-    };
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [pasteIntoSelection]);
 
-    if (editMode) return;
-    if (document.activeElement === textArea) return;
-    var activeTagName = document.activeElement.tagName.toLowerCase();
+  var onClipboardCopy = function onClipboardCopy(cut) {
+    if (isEmptySelection(selection)) return;
+    return copySelection(selection, cut);
+  };
 
-    if (!(activeTagName === 'div' && document.activeElement.contentEditable === 'true' || activeTagName === 'input' || activeTagName === 'textarea' || activeTagName === 'select')) {
-      focus();
+  var onClipboardPaste = function onClipboardPaste(e) {
+    try {
+      e.preventDefault();
+      var clipboardData = e.clipboardData || window.clipboardData;
+      return Promise.resolve(parseClipboardTable(clipboardData)).then(function (table) {
+        if (table) pasteIntoSelection(selection, table);
+      });
+    } catch (e) {
+      return Promise.reject(e);
     }
+  };
+
+  React.useLayoutEffect(function () {
+    if (!addListener) return;
+    window.document.addEventListener('paste', onClipboardPaste);
+    return function () {
+      window.document.removeEventListener('paste', onClipboardPaste);
+    };
   });
+  var clipboardApi = React.useMemo(function () {
+    return {
+      copySelection: copySelection,
+      pasteSelection: pasteSelection,
+      canPasteSelection: canPaste
+    };
+  }, [copySelection, pasteSelection, canPaste]);
+  return {
+    clipboardApi: clipboardApi,
+    onClipboardCopy: onClipboardCopy,
+    onClipboardPaste: onClipboardPaste
+  };
+};
+
+var copyClipboardTable = function copyClipboardTable(rows, payload) {
+  try {
+    var text = formatRowsAsTSV(rows);
+    var html = formatRowsAsHTML(rows, payload != null ? payload : undefined);
+    return Promise.resolve(navigator.clipboard.write([new ClipboardItem({
+      'text/html': new Blob([html], {
+        type: 'text/html'
+      }),
+      'text/plain': new Blob([text], {
+        type: 'text/plain'
+      })
+    })])).then(function () {
+      var event = new Event('copy');
+      document.dispatchEvent(event);
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
-var useClipboardPaste = function useClipboardPaste(textAreaRef, selection, onSelectionChange, onChange, isReadOnly) {
-  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, isReadOnly);
-      } else if (types.includes('text/plain')) {
-        var text = clipboardData.getData('text/plain');
-        parsed = parsePastedText(selection, text, isReadOnly);
-      }
 
-      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);
+var pasteClipboardTable = function pasteClipboardTable() {
+  try {
+    return Promise.resolve(navigator.clipboard.read()).then(function (items) {
+      var item = items[0];
+      if (!item) return;
+      return parseClipboardTable(item);
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+var parseClipboardTable = function parseClipboardTable(item) {
+  try {
+    var _temp7 = function _temp7() {
+      return rows ? {
+        rows: rows,
+        payload: payload
+      } : {
+        rows: []
+      };
     };
 
-    window.document.addEventListener('paste', onPaste);
-    return function () {
-      window.document.removeEventListener('paste', onPaste);
+    var has = function has(type) {
+      return item.types.includes(type);
+    };
+
+    var get = function get(type) {
+      if ('getData' in item) return item.getData(type);else if ('getType' in item) return item.getType(type).then(function (blob) {
+        return blob.text();
+      });
+      return '';
     };
-  }, [textAreaRef, selection]);
+
+    var rows, payload;
+
+    var _temp8 = function () {
+      if (has('text/html')) {
+        return Promise.resolve(get('text/html')).then(function (pastedHtml) {
+          var _parsePastedHtml = parsePastedHtml(pastedHtml);
+
+          rows = _parsePastedHtml.rows;
+          payload = _parsePastedHtml.payload;
+        });
+      } else {
+        var _temp9 = function () {
+          if (has('text/plain')) {
+            return Promise.resolve(get('text/plain')).then(function (text) {
+              rows = parsePastedText(text);
+            });
+          }
+        }();
+
+        if (_temp9 && _temp9.then) return _temp9.then(function () {});
+      }
+    }();
+
+    return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8));
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
 
-var formatTSV = function formatTSV(rows) {
+var formatRowsAsTSV = function formatRowsAsTSV(rows) {
   return rows.map(function (row) {
     return row.join('\t');
   }).join('\n');
 };
 
-var formatSelectionAsTSV = function formatSelectionAsTSV(selection, editData) {
-  if (isEmptySelection(selection)) return '';
+var formatRowsAsHTML = function formatRowsAsHTML(rows, payload) {
+  var trs = rows.map(function (row) {
+    var tds = row.map(formatTextAsHTML).map(function (cell) {
+      return "<td>" + cell + "</td>";
+    });
+    return tds.join('');
+  }).map(function (row) {
+    return "<tr>" + row + "</tr>";
+  }).join('\n');
+  var table = "<table>" + trs + "</table>";
 
-  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 (payload) {
+    var extra = "<SheetHappens payload=\"" + formatTextAsHTML(JSON.stringify(payload)) + "\"></SheetHappens>";
+    return extra + table;
+  }
+
+  return table;
+};
+
+var formatTextAsHTML = function formatTextAsHTML(s) {
+  return s.replace(/[&"'<>]/g, function (i) {
+    return "&#" + i.charCodeAt(0) + ";";
+  });
+};
+
+var formatSelectionAsRows = function formatSelectionAsRows(selection, editData) {
+  if (isEmptySelection(selection)) return [];
+
+  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 (isMaybeRowSelection(selection)) {
     var _findApproxMaxEditDat = findApproxMaxEditDataIndex(editData),
@@ -1877,132 +2310,94 @@ var formatSelectionAsTSV = function formatSelectionAsTSV(selection, editData) {
     rows.push(row);
   }
 
-  return formatTSV(rows);
+  return rows;
 };
 
-var findTable = function findTable(element) {
+var findTag = function findTag(element, tagName) {
   for (var _iterator = _createForOfIteratorHelperLoose(element.children), _step; !(_step = _iterator()).done;) {
     var child = _step.value;
 
-    if (child.nodeName === 'TABLE') {
+    if (child.nodeName === tagName) {
       return child;
     }
 
-    var maybeTable = findTable(child);
+    var maybeTag = findTag(child, tagName);
 
-    if (maybeTable) {
-      return maybeTable;
+    if (maybeTag) {
+      return maybeTag;
     }
   }
 };
 
-var parsePastedHtml = function parsePastedHtml(selection, html, isReadOnly) {
+var parsePastedHtml = function parsePastedHtml(html) {
   var div = document.createElement('div');
   div.innerHTML = html.trim();
+  var rows = [];
+  var payload = undefined;
+  var sheetNode = findTag(div, 'SHEETHAPPENS');
 
-  var _normalizeSelection2 = normalizeSelection(selection),
-      _normalizeSelection2$ = _normalizeSelection2[0],
-      minX = _normalizeSelection2$[0],
-      minY = _normalizeSelection2$[1];
-
-  var left = isMaybeRowSelection(selection) ? 0 : minX;
-  var top = isMaybeColumnSelection(selection) ? 0 : minY;
-  var changes = [];
-  var tableNode = findTable(div);
+  if (sheetNode) {
+    var json = sheetNode.getAttribute('payload');
 
-  if (!tableNode) {
-    return null;
+    try {
+      payload = JSON.parse(json);
+    } catch (e) {}
   }
 
-  var right = left;
-  var bottom = top;
-  var y = top;
+  var tableNode = findTag(div, 'TABLE');
 
-  for (var _iterator2 = _createForOfIteratorHelperLoose(tableNode.children), _step2; !(_step2 = _iterator2()).done;) {
-    var tableChild = _step2.value;
+  if (tableNode) {
+    for (var _iterator2 = _createForOfIteratorHelperLoose(tableNode.children), _step2; !(_step2 = _iterator2()).done;) {
+      var tableChild = _step2.value;
 
-    if (tableChild.nodeName === 'TBODY') {
-      for (var _iterator3 = _createForOfIteratorHelperLoose(tableChild.children), _step3; !(_step3 = _iterator3()).done;) {
-        var tr = _step3.value;
-        var x = left;
+      if (tableChild.nodeName === 'TBODY') {
+        for (var _iterator3 = _createForOfIteratorHelperLoose(tableChild.children), _step3; !(_step3 = _iterator3()).done;) {
+          var tr = _step3.value;
 
-        if (tr.nodeName === 'TR') {
-          for (var _iterator4 = _createForOfIteratorHelperLoose(tr.children), _step4; !(_step4 = _iterator4()).done;) {
-            var td = _step4.value;
+          if (tr.nodeName === 'TR') {
+            var row = [];
 
-            if (td.nodeName === 'TD') {
-              var str = '';
+            for (var _iterator4 = _createForOfIteratorHelperLoose(tr.children), _step4; !(_step4 = _iterator4()).done;) {
+              var td = _step4.value;
 
-              if (td.children.length !== 0 && td.children[0].nodeName === 'P') {
-                var p = td.children[0];
+              if (td.nodeName === 'TD') {
+                var str = '';
 
-                if (p.children.length !== 0 && p.children[0].nodeName === 'FONT') {
-                  str = p.children[0].textContent.trim();
+                if (td.children.length !== 0 && td.children[0].nodeName === 'P') {
+                  var p = td.children[0];
+
+                  if (p.children.length !== 0 && p.children[0].nodeName === 'FONT') {
+                    str = p.children[0].textContent.trim();
+                  } else {
+                    str = p.textContent.trim();
+                  }
                 } else {
-                  str = p.textContent.trim();
+                  str = td.textContent.trim();
                 }
-              } else {
-                str = td.textContent.trim();
-              }
 
-              str = str.replaceAll('\n', '');
-              str = str.replaceAll(/\s\s+/g, ' ');
-              if (!(isReadOnly !== null && isReadOnly !== void 0 && isReadOnly(x, y))) changes.push({
-                x: x,
-                y: y,
-                value: str
-              });
-              x++;
+                str = str.replaceAll('\n', '');
+                str = str.replaceAll(/\s\s+/g, ' ');
+                row.push(str);
+              }
             }
-          }
 
-          y++;
+            rows.push(row);
+          }
         }
-
-        right = Math.max(right, x - 1);
       }
     }
   }
 
-  bottom = Math.max(top, y - 1);
   return {
-    selection: [[left, top], [right, bottom]],
-    changes: changes
+    rows: rows,
+    payload: payload
   };
 };
 
-var parsePastedText = function parsePastedText(selection, text, isReadOnly) {
-  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++) {
-      var X = left + x;
-      var Y = top + y;
-      if (!(isReadOnly !== null && isReadOnly !== void 0 && isReadOnly(X, Y))) changes.push({
-        x: X,
-        y: Y,
-        value: cols[x]
-      });
-    }
-  }
-
-  return {
-    selection: [[left, top], [right, bottom]],
-    changes: changes
-  };
+var parsePastedText = function parsePastedText(text) {
+  return text.split(/\r?\n/).map(function (line) {
+    return line.split('\t');
+  });
 };
 
 var INITIAL_SIZE = 256;
@@ -2385,7 +2780,40 @@ var makeIntMap = function makeIntMap(initialSize) {
   };
 };
 
-var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset) {
+var resolveSheetStyle = function resolveSheetStyle(sheetStyle) {
+  var _sheetStyle$shadowBlu, _sheetStyle$shadowOpa, _sheetStyle$shadowCol;
+
+  return {
+    freezeColumns: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeColumns) || 0,
+    freezeRows: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeRows) || 0,
+    hideColumnHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideColumnHeaders) || false,
+    hideRowHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideRowHeaders) || false,
+    hideGridlines: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideGridlines) || false,
+    hideScrollBars: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideScrollBars) || false,
+    columnHeaderHeight: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideColumnHeaders ? 1 : SIZES.headerHeight,
+    rowHeaderWidth: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideRowHeaders ? 1 : SIZES.headerWidth,
+    shadowBlur: (_sheetStyle$shadowBlu = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowBlur) != null ? _sheetStyle$shadowBlu : SIZES.shadowBlur,
+    shadowOpacity: (_sheetStyle$shadowOpa = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowOpacity) != null ? _sheetStyle$shadowOpa : SIZES.shadowOpacity,
+    shadowColor: (_sheetStyle$shadowCol = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowColor) != null ? _sheetStyle$shadowCol : COLORS.shadowColor
+  };
+};
+var applyAlignment = function applyAlignment(start, cellSize, style, imageWidth, alignment) {
+  if (alignment === void 0) {
+    alignment = style.textAlign;
+  }
+
+  if (alignment === 'left') {
+    return start + style.marginLeft;
+  } else if (alignment === 'center') {
+    return start + cellSize * 0.5 - imageWidth / 2;
+  } else if (alignment === 'right') {
+    return start + (cellSize - style.marginRight - imageWidth);
+  }
+
+  return start;
+};
+
+var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, isFocused, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset) {
   var canvas = context.canvas;
   var width = canvas.width,
       height = canvas.height;
@@ -2547,11 +2975,13 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
       var isGroupSelected = rowSelectionActive && isInRowGroup;
       var style = isSelfSelected ? HEADER_SELECTED_STYLE : isGroupSelected ? HEADER_GROUP_SELECTED_STYLE : isActive ? HEADER_ACTIVE_STYLE : NO_STYLE;
 
+      var resolvedStyle = _extends({}, DEFAULT_COLUMN_HEADER_STYLE, style);
+
       var _top2 = rowToPixel(row);
 
       var _bottom2 = rowToPixel(row, 1);
 
-      clickables.push.apply(clickables, renderCell(context, content, style, DEFAULT_COLUMN_HEADER_STYLE, 0, _top2, rowHeaderWidth, _bottom2 - _top2));
+      clickables.push.apply(clickables, renderCell(context, content, resolvedStyle, 0, _top2, rowHeaderWidth, _bottom2 - _top2));
     }
   }
 
@@ -2564,8 +2994,6 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
 
       var column = _step5.value;
 
-      var _content = (_columnHeaders = columnHeaders(column)) != null ? _columnHeaders : excelHeaderString(column + 1);
-
       var _isActive = isInRange(column, minX, maxX);
 
       var _groupKey = columnGroupKeys(column);
@@ -2575,19 +3003,22 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
       var selectedStyle = isSelected ? HEADER_SELECTED_STYLE : NO_STYLE;
       var activeStyle = _isActive ? HEADER_ACTIVE_STYLE : NO_STYLE;
 
-      var _style = _extends({}, columnHeaderStyle(column), activeStyle, selectedStyle);
+      var _style = _extends({}, DEFAULT_COLUMN_HEADER_STYLE, columnHeaderStyle(column), activeStyle, selectedStyle);
 
       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 _content = (_columnHeaders = columnHeaders(column, _style)) != null ? _columnHeaders : excelHeaderString(column + 1);
+
+      clickables.push.apply(clickables, renderCell(context, _content, _style, _left2, 0, _right2 - _left2, columnHeaderHeight));
     }
   }
 
   if (selectionActive) {
     context.strokeStyle = COLORS.selectionBorder;
     context.lineWidth = 2;
+    context.globalAlpha = isFocused ? 1 : 0.5;
     var _selected$7 = selected[0],
         _left3 = _selected$7[0],
         _top3 = _selected$7[1],
@@ -2595,6 +3026,7 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
         _right3 = _selected$8[0],
         _bottom3 = _selected$8[1];
     context.strokeRect(_left3, _top3, _right3 - _left3 - 1, _bottom3 - _top3 - 1);
+    context.globalAlpha = 1;
   }
 
   for (var _iterator6 = _createForOfIteratorHelperLoose(secondarySelections), _step6; !(_step6 = _iterator6()).done;) {
@@ -2744,43 +3176,42 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
 
       var _bottom10 = rowToPixel(_y, 1);
 
-      var cellContent = displayData(_x, _y);
+      var _style2 = _extends({}, DEFAULT_CELL_STYLE, cellStyle(_x, _y));
 
-      if (cellContent !== null && cellContent !== undefined) {
-        var _style2 = cellStyle(_x, _y);
+      var cellContent = displayData(_x, _y, _style2);
 
-        clickables.push.apply(clickables, renderCell(context, cellContent, _style2, DEFAULT_CELL_STYLE, _left9, _top9, _right10 - _left9, _bottom10 - _top9));
+      if (cellContent !== null && cellContent !== undefined) {
+        clickables.push.apply(clickables, renderCell(context, cellContent, _style2, _left9, _top9, _right10 - _left9, _bottom10 - _top9));
       }
     }
   }
 
   return clickables;
 };
-var renderCell = function renderCell(context, cellContent, style, defaultCellStyle, xCoord, yCoord, cellWidth, cellHeight) {
+var renderCell = function renderCell(context, cellContent, style, xCoord, yCoord, cellWidth, cellHeight) {
   var clickables = [];
 
   if (cellContent === null) {
     return clickables;
   }
 
-  var finalStyle = resolveCellStyle(style, defaultCellStyle);
-  context.fillStyle = finalStyle.color;
-  context.font = finalStyle.weight + ' ' + finalStyle.fontSize + 'px ' + finalStyle.fontFamily;
-  context.textAlign = finalStyle.textAlign;
+  context.fillStyle = style.color;
+  context.font = style.weight + ' ' + style.fontSize + 'px ' + style.fontFamily;
+  context.textAlign = style.textAlign;
   var yy = Math.floor(yCoord + cellHeight * 0.5);
   context.save();
   context.beginPath();
   context.rect(xCoord, yCoord, cellWidth, cellHeight);
   context.clip();
 
-  if (finalStyle.backgroundColor !== '') {
-    context.fillStyle = finalStyle.backgroundColor;
+  if (style.backgroundColor !== '') {
+    context.fillStyle = style.backgroundColor;
     context.fillRect(xCoord, yCoord, cellWidth, cellHeight);
-    context.fillStyle = finalStyle.color;
+    context.fillStyle = style.color;
   }
 
   if (typeof cellContent === 'string' || typeof cellContent === 'number') {
-    var xx = applyAlignment(xCoord, cellWidth, finalStyle, 0);
+    var xx = applyAlignment(xCoord, cellWidth, style, 0);
     var text = '' + cellContent;
     context.fillText(text, xx, yy);
   } else if (typeof cellContent === 'object') {
@@ -2794,7 +3225,7 @@ var renderCell = function renderCell(context, cellContent, style, defaultCellSty
       if (obj.content instanceof HTMLImageElement) {
         w = obj.width || cellWidth;
         h = obj.height || cellHeight;
-        var finalX = applyAlignment(xCoord, cellWidth, finalStyle, w, obj.horizontalAlign);
+        var finalX = applyAlignment(xCoord, cellWidth, style, w, obj.horizontalAlign);
         x = finalX + obj.x;
         y = yy + obj.y;
         context.drawImage(obj.content, x, y, w, h);
@@ -2803,7 +3234,7 @@ var renderCell = function renderCell(context, cellContent, style, defaultCellSty
           context.textAlign = obj.horizontalAlign;
         }
 
-        var _finalX = applyAlignment(xCoord, cellWidth, finalStyle, 0, obj.horizontalAlign);
+        var _finalX = applyAlignment(xCoord, cellWidth, style, 0, obj.horizontalAlign);
 
         var _text = '' + obj.content;
 
@@ -3029,8 +3460,8 @@ var Sheet = React.forwardRef(function (props, ref) {
   var selectionProp = (_props$selection = props.selection) != null ? _props$selection : NO_SELECTION;
 
   var _useState3 = React.useState(selectionProp),
-      selection = _useState3[0],
-      setSelection = _useState3[1];
+      rawSelection = _useState3[0],
+      setRawSelection = _useState3[1];
 
   var _useState4 = React.useState(null),
       knobArea = _useState4[0],
@@ -3052,22 +3483,26 @@ var Sheet = React.forwardRef(function (props, ref) {
       editCell = _useState8[0],
       setEditCell = _useState8[1];
 
-  var _useState9 = React.useState(selectionProp),
-      lastSelectionProp = _useState9[0],
-      setLastSelectionProp = _useState9[1];
+  var _useState9 = React.useState(!!props.autoFocus),
+      focused = _useState9[0],
+      setFocused = _useState9[1];
+
+  var _useState10 = React.useState(selectionProp),
+      lastSelectionProp = _useState10[0],
+      setLastSelectionProp = _useState10[1];
 
   if (lastSelectionProp !== selectionProp) {
     setLastSelectionProp(selectionProp);
-    setSelection(selectionProp);
+    setRawSelection(selectionProp);
   }
 
-  var _useState10 = React.useState(''),
-      editValue = _useState10[0],
-      setEditValue = _useState10[1];
+  var _useState11 = React.useState(''),
+      editValue = _useState11[0],
+      setEditValue = _useState11[1];
 
-  var _useState11 = React.useState(false),
-      arrowKeyCommitMode = _useState11[0],
-      setArrowKeyCommitMode = _useState11[1];
+  var _useState12 = React.useState(false),
+      arrowKeyCommitMode = _useState12[0],
+      setArrowKeyCommitMode = _useState12[1];
 
   var _useResizeObserver = useResizeObserver({
     ref: overlayRef
@@ -3084,7 +3519,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     return createRowOrColumnProp(props.cellHeight, 22);
   }, [props.cellHeight]);
   var columnHeaders = React.useMemo(function () {
-    return createRowOrColumnProp(props.columnHeaders, null);
+    return createRowOrColumnStyledProp(props.columnHeaders, null);
   }, [props.columnHeaders]);
   var columnHeaderStyle = React.useMemo(function () {
     return createRowOrColumnProp(props.columnHeaderStyle, {});
@@ -3114,7 +3549,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     return createCellProp(props.sourceData, null);
   }, [props.sourceData]);
   var displayData = React.useMemo(function () {
-    return createCellProp(props.displayData, '');
+    return createCellStyledProp(props.displayData, '');
   }, [props.displayData]);
   var editData = React.useMemo(function () {
     return createCellProp(props.editData, '');
@@ -3129,6 +3564,9 @@ var Sheet = React.forwardRef(function (props, ref) {
     return resolveSheetStyle(props.sheetStyle);
   }, [props.sheetStyle]);
   var secondarySelections = (_props$secondarySelec = props.secondarySelections) != null ? _props$secondarySelec : NO_SELECTIONS;
+  var selection = React.useMemo(function () {
+    return validateSelection(rawSelection);
+  }, [rawSelection]);
   var selectedColumnGroups = React.useMemo(function () {
     return props.columnGroupKeys ? new Set(mapSelectionColumns(selection)(function (x) {
       return columnGroupKeys(x);
@@ -3207,7 +3645,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
 
     if (!isSameSelection(selection, newSelection)) {
-      setSelection(validateSelection(newSelection));
+      setRawSelection(newSelection);
     }
 
     var overlay = overlayRef.current;
@@ -3218,7 +3656,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
 
     if (props.onSelectionChanged) {
-      var _normalizeSelection = normalizeSelection(newSelection),
+      var _normalizeSelection = normalizeSelection(validateSelection(newSelection)),
           _normalizeSelection$ = _normalizeSelection[0],
           minX = _normalizeSelection$[0],
           minY = _normalizeSelection$[1],
@@ -3230,6 +3668,11 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
   };
 
+  var cancelEditingCell = function cancelEditingCell() {
+    setEditCell(NO_CELL);
+    setFocused(true);
+  };
+
   var commitEditingCell = function commitEditingCell(value) {
     if (props.onChange) {
       var cellX = editCell[0],
@@ -3242,6 +3685,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
 
     setEditCell(NO_CELL);
+    setFocused(true);
   };
 
   var startEditingCell = function startEditingCell(editCell, arrowKeyCommitMode) {
@@ -3279,16 +3723,25 @@ var Sheet = React.forwardRef(function (props, ref) {
     setDataOffset(clipDataOffset(view, dataOffset, freeze, [maxColumns, maxRows], cellLayout));
   }, [maxRows, maxColumns]);
   var hitmapRef = React.useRef(NO_CLICKABLES);
-  var textAreaRef = React.useRef(null);
-  useClipboardCopy(textAreaRef, selection, editMode, editData);
-  useClipboardPaste(textAreaRef, selection, changeSelection, props.onChange, cellReadOnly);
+  var isFocused = focused || editMode;
+
+  var _useClipboardAPI = useClipboardAPI(selection, editData, cellReadOnly, isFocused, changeSelection, props.onChange, props.onCopy, props.onPaste),
+      clipboardApi = _useClipboardAPI.clipboardApi,
+      onClipboardCopy = _useClipboardAPI.onClipboardCopy;
+
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
   var getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth);
 
-  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange, props.dontChangeSelectionOnOrderChange),
+  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, setFocused, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange, props.dontChangeSelectionOnOrderChange),
       mouseHandlers = _useMouse.mouseHandlers,
       knobPosition = _useMouse.knobPosition;
 
+  var _useKeyboard = useKeyboard(arrowKeyCommitMode, overlayRef, cellReadOnly, displayData, editCell, editMode, focused, rawSelection, selection, startEditingCell, commitEditingCell, cancelEditingCell, changeSelection, setFocused, onClipboardCopy, props.onChange),
+      onInputKeyDown = _useKeyboard.onInputKeyDown,
+      onGridKeyDown = _useKeyboard.onGridKeyDown,
+      onGridFocus = _useKeyboard.onGridFocus,
+      onGridBlur = _useKeyboard.onGridBlur;
+
   React.useLayoutEffect(function () {
     var canvas = canvasRef.current;
 
@@ -3303,130 +3756,16 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
 
     var animationFrameId = window.requestAnimationFrame(function () {
-      hitmapRef.current = renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset);
+      hitmapRef.current = renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, isFocused, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset);
     });
     return function () {
       window.cancelAnimationFrame(animationFrameId);
     };
-  }, [cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset]);
-
-  var onKeyDown = function onKeyDown(e) {
-    if (e.key === 'Escape') {
-      setEditCell(NO_CELL);
-      return;
-    }
-
-    var direction = e.key === 'Enter' ? 'down' : e.key === 'Tab' ? 'right' : arrowKeyCommitMode ? ARROW_KEYS[e.key] : null;
-
-    if (direction) {
-      e.preventDefault();
-      var step = getDirectionStep(direction);
-      var head = maxXY(addXY(editCell, step), ORIGIN);
-      commitEditingCell();
-      changeSelection([head, head]);
-    }
-  };
-
-  var onGridKeyDown = function onGridKeyDown(e) {
-    if (editMode && arrowKeyCommitMode && e.key in ARROW_KEYS) {
-      commitEditingCell();
-      return;
-    }
-
-    if ((e.metaKey || e.ctrlKey) && String.fromCharCode(e.which).toLowerCase() === 'v') {
-      return;
-    }
+  }, [cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, isFocused, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset]);
 
-    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 _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 = MAX_SEARCHABLE_INDEX;
-      }
-
-      if (isColumnSelection(selection)) {
-        y1 = 0;
-        y2 = MAX_SEARCHABLE_INDEX;
-      }
-
-      var changes = [];
-
-      for (var y = y1; y <= y2; y++) {
-        for (var x = x1; x <= x2; x++) {
-          if (!cellReadOnly(x, y)) {
-            changes.push({
-              x: x,
-              y: y,
-              value: null
-            });
-          }
-        }
-      }
-
-      if (props.onChange) {
-        props.onChange(changes);
-      }
-
-      return;
-    }
-
-    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 === ',') {
-      var cell = selection[0];
-      var cellX = cell[0],
-          cellY = cell[1];
-
-      if (cellReadOnly(cellX, cellY)) {
-        e.preventDefault();
-        return;
-      }
-
-      startEditingCell(cell, e.key !== 'Enter');
-      return;
-    }
-
-    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) {
-        head = findInDisplayData(displayData, head, direction);
-      } else {
-        head = maxXY(addXY(head, step), ORIGIN);
-      }
-
-      if (!e.shiftKey) {
-        anchor = head;
-      }
-
-      changeSelection([anchor, head], true, true);
-      return;
-    }
-
-    e.preventDefault();
-  };
-
-  var _useState12 = React.useState(''),
-      lastEditKey = _useState12[0],
-      setLastEditKey = _useState12[1];
+  var _useState13 = React.useState(''),
+      lastEditKey = _useState13[0],
+      setLastEditKey = _useState13[1];
 
   var editTextPosition = ORIGIN;
   var editTextWidth = 0;
@@ -3454,7 +3793,7 @@ var Sheet = React.forwardRef(function (props, ref) {
   var inputProps = {
     value: editValue,
     autoFocus: true,
-    onKeyDown: onKeyDown,
+    onKeyDown: onInputKeyDown,
     style: {
       position: 'absolute',
       left: textX,
@@ -3481,6 +3820,7 @@ var Sheet = React.forwardRef(function (props, ref) {
     top: 0,
     left: 0,
     overflow: 'scroll',
+    outline: 0,
     borderBottom: '1px solid #ddd'
   };
   var canvasStyles = {
@@ -3516,10 +3856,10 @@ var Sheet = React.forwardRef(function (props, ref) {
     });
   }, [props.renderOutside, visibleCells, cellLayout, selection, editMode]);
   React.useImperativeHandle(ref, function () {
-    return _extends({}, cellLayout, {
+    return _extends({}, cellLayout, clipboardApi, {
       startEditingCell: startEditingCell
     });
-  }, [cellLayout, startEditingCell]);
+  }, [cellLayout, clipboardApi, startEditingCell]);
   return React__default.createElement("div", {
     style: {
       position: 'relative',
@@ -3532,6 +3872,10 @@ var Sheet = React.forwardRef(function (props, ref) {
   }), React__default.createElement("div", Object.assign({
     ref: overlayRef
   }, mouseHandlers, {
+    onKeyDown: onGridKeyDown,
+    onFocus: onGridFocus,
+    onBlur: onGridBlur,
+    tabIndex: 0,
     onScroll: onScroll,
     className: overlayDivClassName,
     style: overlayDivStyles
@@ -3568,26 +3912,7 @@ var Sheet = React.forwardRef(function (props, ref) {
       height: '100%',
       pointerEvents: 'none'
     }
-  }, renderedOutside) : null, React__default.createElement("textarea", {
-    style: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: 1,
-      height: 1,
-      opacity: 0.01
-    },
-    ref: textAreaRef,
-    autoComplete: "off",
-    autoCorrect: "off",
-    autoCapitalize: "off",
-    spellCheck: "false",
-    onFocus: function onFocus(e) {
-      return e.target.select();
-    },
-    tabIndex: 0,
-    onKeyDown: onGridKeyDown
-  }), editMode && (input !== undefined ? input : React__default.createElement("input", Object.assign({}, inputProps, {
+  }, renderedOutside) : null, editMode && (input !== undefined ? input : React__default.createElement("input", Object.assign({}, inputProps, {
     type: "text",
     onFocus: function onFocus(e) {
       return e.target.select();
@@ -3598,5 +3923,6 @@ var Sheet = React.forwardRef(function (props, ref) {
   }))));
 });
 
-module.exports = Sheet;
+exports.default = Sheet;
+exports.useClipboardTable = useClipboardTable;
 //# sourceMappingURL=index.js.map