sheet-happens 0.0.50 → 0.0.52

package/dist/index.modern.js

@@ -1,64 +1,46 @@
-import React, { useState, useMemo, useRef, useCallback, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
+import React, { useState, useMemo, useCallback, useRef, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
 import useResizeObserver from 'use-resize-observer';
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
+import { renderToString } from 'react-dom/server';
+import toRGBA from 'color-rgba';
+import LineBreak from 'linebreak';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: !0
+      } : {
+        done: !1,
+        value: r[o++]
       };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
 }
 
 var styles = {"sheetscroll":"_PxIi8"};
@@ -105,22 +87,28 @@ var SIZES = {
 var DEFAULT_CELL_STYLE = {
   textAlign: 'left',
   fontSize: 12,
-  marginRight: 5,
+  lineHeight: 16,
+  marginTop: 3,
+  marginBottom: 3,
   marginLeft: 5,
+  marginRight: 5,
   color: '#000',
   fontFamily: 'sans-serif',
-  weight: '',
+  fontWeight: '',
   fillColor: '',
   backgroundColor: ''
 };
 var DEFAULT_COLUMN_HEADER_STYLE = {
   textAlign: 'center',
   fontSize: 12,
+  lineHeight: 16,
+  marginTop: 3,
+  marginBottom: 3,
   marginRight: 5,
   marginLeft: 5,
   color: '#000',
   fontFamily: 'sans-serif',
-  weight: '',
+  fontWeight: '',
   fillColor: '',
   backgroundColor: ''
 };
@@ -146,11 +134,9 @@ var seq = function seq(n, s, d) {
   if (s === void 0) {
     s = 0;
   }
-
   if (d === void 0) {
     d = 1;
   }
-
   return Array.from({
     length: n
   }).map(function (_, i) {
@@ -192,41 +178,47 @@ var getDirectionStep = function getDirectionStep(direction) {
 var isSameXY = function isSameXY(a, b) {
   return a[0] === b[0] && a[1] === b[1];
 };
-var isSameSelection = function isSameSelection(a, b) {
+var isSameRectangle = function isSameRectangle(a, b) {
   var a1 = a[0],
-      a2 = a[1];
+    a2 = a[1];
   var b1 = b[0],
-      b2 = b[1];
+    b2 = b[1];
   return isSameXY(a1, b1) && isSameXY(a2, b2);
 };
+var isPointInsideRectangle = function isPointInsideRectangle(rectangle, point) {
+  var _rectangle$ = rectangle[0],
+    left = _rectangle$[0],
+    top = _rectangle$[1],
+    _rectangle$2 = rectangle[1],
+    right = _rectangle$2[0],
+    bottom = _rectangle$2[1];
+  var x = point[0],
+    y = point[1];
+  return x >= left && x < right && y >= top && y < bottom;
+};
 var forRange = function forRange(min, max, callback) {
-  for (var i = min; i <= max; ++i) {
-    callback(i);
-  }
+  for (var i = min; i <= max; ++i) callback(i);
 };
 var forSelectionColumns = function forSelectionColumns(selection) {
   return function (callback) {
     var _normalizeSelection = normalizeSelection(selection),
-        _normalizeSelection$ = _normalizeSelection[0],
-        left = _normalizeSelection$[0],
-        _normalizeSelection$2 = _normalizeSelection[1],
-        right = _normalizeSelection$2[0];
-
+      _normalizeSelection$ = _normalizeSelection[0],
+      left = _normalizeSelection$[0],
+      _normalizeSelection$2 = _normalizeSelection[1],
+      right = _normalizeSelection$2[0];
     forRange(left, right, callback);
   };
 };
 var forSelectionRows = function forSelectionRows(selection) {
   return function (callback) {
     var _normalizeSelection2 = normalizeSelection(selection),
-        _normalizeSelection2$ = _normalizeSelection2[0],
-        top = _normalizeSelection2$[1],
-        _normalizeSelection2$2 = _normalizeSelection2[1],
-        bottom = _normalizeSelection2$2[1];
-
+      _normalizeSelection2$ = _normalizeSelection2[0],
+      top = _normalizeSelection2$[1],
+      _normalizeSelection2$2 = _normalizeSelection2[1],
+      bottom = _normalizeSelection2$2[1];
     forRange(top, bottom, callback);
   };
 };
-
 var forToMap = function forToMap(forLoop) {
   return function (map) {
     var out = [];
@@ -236,7 +228,6 @@ var forToMap = function forToMap(forLoop) {
     return out;
   };
 };
-
 var mapSelectionColumns = function mapSelectionColumns(selection) {
   return forToMap(forSelectionColumns(selection));
 };
@@ -245,70 +236,69 @@ var mapSelectionRows = function mapSelectionRows(selection) {
 };
 var isMaybeRowSelection = function isMaybeRowSelection(selection) {
   var _selection$ = selection[0],
-      left = _selection$[0],
-      _selection$2 = selection[1],
-      right = _selection$2[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];
+    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];
+    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];
+    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];
+    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];
+    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 _normalizeSelection3 = normalizeSelection(selection),
-      _normalizeSelection3$ = _normalizeSelection3[0],
-      left = _normalizeSelection3$[0],
-      top = _normalizeSelection3$[1],
-      _normalizeSelection3$2 = _normalizeSelection3[1],
-      right = _normalizeSelection3$2[0],
-      bottom = _normalizeSelection3$2[1];
-
+    _normalizeSelection3$ = _normalizeSelection3[0],
+    left = _normalizeSelection3$[0],
+    top = _normalizeSelection3$[1],
+    _normalizeSelection3$2 = _normalizeSelection3[1],
+    right = _normalizeSelection3$2[0],
+    bottom = _normalizeSelection3$2[1];
   var x = point[0],
-      y = point[1];
+    y = point[1];
   return x >= left && x <= right && y >= top && y <= bottom;
 };
 var validateSelection = function validateSelection(selection) {
   var anchor = selection[0],
-      head = selection[1];
+    head = selection[1];
   anchor = anchor.slice();
   head = head.slice();
   var min = minXY(anchor, head);
@@ -318,48 +308,157 @@ var validateSelection = function validateSelection(selection) {
 };
 var normalizeSelection = function normalizeSelection(selection) {
   var anchor = selection[0],
-      head = selection[1];
+    head = selection[1];
   return [minXY(anchor, head), maxXY(anchor, head)];
 };
 var orientSelection = function orientSelection(normalized, to) {
   var _normalized$ = normalized[0],
-      left = _normalized$[0],
-      top = _normalized$[1],
-      _normalized$2 = normalized[1],
-      right = _normalized$2[0],
-      bottom = _normalized$2[1];
+    left = _normalized$[0],
+    top = _normalized$[1],
+    _normalized$2 = normalized[1],
+    right = _normalized$2[0],
+    bottom = _normalized$2[1];
   var anchor = to[0],
-      head = to[1];
+    head = to[1];
   var ax = anchor[0],
-      ay = anchor[1];
+    ay = anchor[1];
   var hx = head[0],
-      hy = head[1];
+    hy = head[1];
   var swapX = (ax - hx || 1) * (right - left || 1) < 0;
   var swapY = (ay - hy || 1) * (bottom - top || 1) < 0;
   return [[swapX ? right : left, swapY ? bottom : top], [swapX ? left : right, swapY ? top : bottom]];
 };
 
-var LIMIT = 1000;
+var DEFAULT_ICON_SIZE = 32;
+var svgToImage = function svgToImage(icon) {
+  var image = new Image();
+  try {
+    var iconAsString = typeof icon === 'string' ? icon : renderToString(icon);
+    var base64String = window.btoa(iconAsString);
+    image.src = "data:image/svg+xml;base64," + base64String;
+  } catch (err) {
+    console.log(err);
+  }
+  return image;
+};
+var useImageRenderer = function useImageRenderer() {
+  var _useState = useState(0),
+    setVersion = _useState[1];
+  var _useState2 = useState(DEFAULT_ICON_SIZE),
+    canvasWidth = _useState2[0],
+    setCanvasWidth = _useState2[1];
+  var _useState3 = useState(DEFAULT_ICON_SIZE),
+    canvasHeight = _useState3[0],
+    setCanvasHeight = _useState3[1];
+  var imageMap = useMemo(function () {
+    return new Map();
+  }, []);
+  var loadImage = useCallback(function (src) {
+    var image = imageMap.get(src);
+    if (image) return image;
+    image = new Image();
+    image.src = src;
+    imageMap.set(src, image);
+    return image;
+  }, [imageMap]);
+  var dpi = window.devicePixelRatio;
+  var iconContext = useMemo(function () {
+    var canvas = document.createElement('canvas');
+    canvas.width = canvasWidth * dpi;
+    canvas.height = canvasHeight * dpi;
+    var context = canvas.getContext('2d', {
+      willReadFrequently: true
+    });
+    return context;
+  }, [canvasWidth, canvasHeight, dpi]);
+  return function (renderContext, item, style, box) {
+    if (!iconContext) return;
+    var display = item.display;
+    var image = 'image' in item ? item.image : 'src' in item ? loadImage(item.src) : null;
+    if (!image) return;
+    if (!image.complete) {
+      if (!image.onload) {
+        image.onload = function () {
+          setVersion(function (v) {
+            return v + 1;
+          });
+          setCanvasWidth(function (w) {
+            return Math.max(w, image.width);
+          });
+          setCanvasHeight(function (h) {
+            return Math.max(h, image.height);
+          });
+        };
+      }
+      return;
+    } else {
+      if (canvasWidth < image.width) setCanvasWidth(function (w) {
+        return Math.max(w, image.width);
+      });
+      if (canvasHeight < image.height) setCanvasHeight(function (h) {
+        return Math.max(h, image.height);
+      });
+    }
+    var _box$ = box[0],
+      left = _box$[0],
+      top = _box$[1],
+      _box$2 = box[1],
+      right = _box$2[0],
+      bottom = _box$2[1];
+    var width = right - left;
+    var height = bottom - top;
+    if (display === 'image') {
+      renderContext.drawImage(image, 0, 0, image.width, image.height, left, top, width, height);
+    } else if (display === 'icon') {
+      var _item$color;
+      var color = (_item$color = item.color) != null ? _item$color : style.color;
+      var rgba = toRGBA(color);
+      var _rgba$ = rgba[0],
+        r = _rgba$ === void 0 ? 0 : _rgba$,
+        _rgba$2 = rgba[1],
+        g = _rgba$2 === void 0 ? 0 : _rgba$2,
+        _rgba$3 = rgba[2],
+        b = _rgba$3 === void 0 ? 0 : _rgba$3,
+        _rgba$4 = rgba[3],
+        a = _rgba$4 === void 0 ? 1 : _rgba$4;
+      try {
+        var wDpi = width * dpi;
+        var hDpi = height * dpi;
+        iconContext.clearRect(0, 0, wDpi, hDpi);
+        iconContext.drawImage(image, 0, 0, image.width, image.height, 0, 0, wDpi, hDpi);
+        var imageData = iconContext.getImageData(0, 0, wDpi, hDpi);
+        var data = imageData.data;
+        var n = data.length;
+        for (var i = 0; i < n; i += 4) {
+          data[i] = r;
+          data[i + 1] = g;
+          data[i + 2] = b;
+          data[i + 3] = data[i + 3] * a;
+        }
+        iconContext.putImageData(imageData, 0, 0, 0, 0, wDpi, hDpi);
+        renderContext.drawImage(iconContext.canvas, 0, 0, wDpi, hDpi, left, top, width, height);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+};
 
+var LIMIT = 1000;
 var scanGroup = function scanGroup(keys, index, direction, matchKeys) {
   var i = 1;
   var limit = direction > 0 ? LIMIT : Math.min(LIMIT, index + 1);
-
   for (; i < limit; i++) {
     var key = keys(index + i * direction);
     if (key == null || !matchKeys.has(key)) break;
   }
-
   return index + (i - 1) * direction;
 };
-
 var expandSelectionToRowOrColumnGroups = function expandSelectionToRowOrColumnGroups(selection, groupKeys, matchKeys, coordinate) {
   if (!matchKeys) return selection;
-
   var _normalizeSelection = normalizeSelection(selection),
-      first = _normalizeSelection[0],
-      second = _normalizeSelection[1];
-
+    first = _normalizeSelection[0],
+    second = _normalizeSelection[1];
   var start = first[coordinate];
   var end = second[coordinate];
   var startIndex = scanGroup(groupKeys, start, -1, matchKeys);
@@ -474,164 +573,125 @@ var findApproxMaxEditDataIndex = function findApproxMaxEditDataIndex(editData) {
   var howManyEmpty = 0;
   var growthIncrement = 10;
   var growthIncrementFactor = 1.5;
-
   while (howManyEmpty < 4) {
     var allEmpty = true;
-
     for (var yy = 0; yy < 10; yy++) {
       var data = editData(x, yy);
-
       if (data !== null && data !== undefined && data !== '') {
         allEmpty = false;
         break;
       }
     }
-
     if (allEmpty) {
       howManyEmpty += 1;
     }
-
     x += growthIncrement;
-
     if (x > MAX_SEARCHABLE_INDEX) {
       break;
     }
-
     growthIncrement = Math.floor(growthIncrement * growthIncrementFactor);
   }
-
   howManyEmpty = 0;
   growthIncrement = 10;
   growthIncrementFactor = 1.5;
-
   while (howManyEmpty < 4) {
     var _allEmpty = true;
-
     for (var xx = 0; xx < 10; xx++) {
       var _data = editData(xx, y);
-
       if (_data !== null && _data !== undefined && _data !== '') {
         _allEmpty = false;
         break;
       }
     }
-
     if (_allEmpty) {
       howManyEmpty += 1;
     }
-
     y += growthIncrement;
-
     if (y > MAX_SEARCHABLE_INDEX) {
       break;
     }
-
     growthIncrement = Math.floor(growthIncrement * growthIncrementFactor);
   }
-
   return [x, y];
 };
 var findInDisplayData = function findInDisplayData(displayData, start, direction) {
   var step = getDirectionStep(direction);
   var cell = maxXY(start, ORIGIN);
-
   var _addXY = addXY(cell, step),
-      x = _addXY[0],
-      y = _addXY[1];
-
+    x = _addXY[0],
+    y = _addXY[1];
   var first = displayData(x, y, DEFAULT_CELL_STYLE);
   var firstFilled = first !== '' && first !== null && first !== undefined;
-
   if (!firstFilled) {
     cell = addXY(cell, step);
   }
-
   var _cell = cell,
-      cellX = _cell[0],
-      cellY = _cell[1];
+    cellX = _cell[0],
+    cellY = _cell[1];
   var maxX = cellX + MAX_SEARCHABLE_INDEX - 1;
   var maxY = cellY + MAX_SEARCHABLE_INDEX - 1;
-
   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);
     }
-
     if (!firstFilled && data !== '' && data !== null && data !== undefined) {
       return cell;
     }
-
     var _cell2 = cell = addXY(cell, step);
-
     cellX = _cell2[0];
     cellY = _cell2[1];
   }
-
   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, onFocusChange, 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, getAutoSizeHeight, onEdit, onCommit, onKnobAreaChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onFocusChange, onInvalidateColumn, onInvalidateRow, onChange, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
   var _useState = useState(null),
-      hitTarget = _useState[0],
-      setHitTarget = _useState[1];
-
+    columnResize = _useState[0],
+    setColumnResize = _useState[1];
   var _useState2 = useState(null),
-      columnResize = _useState2[0],
-      setColumnResize = _useState2[1];
-
+    rowResize = _useState2[0],
+    setRowResize = _useState2[1];
   var _useState3 = useState(null),
-      rowResize = _useState3[0],
-      setRowResize = _useState3[1];
-
+    columnDrag = _useState3[0],
+    setColumnDrag = _useState3[1];
   var _useState4 = useState(null),
-      columnDrag = _useState4[0],
-      setColumnDrag = _useState4[1];
-
+    rowDrag = _useState4[0],
+    setRowDrag = _useState4[1];
   var _useState5 = useState(null),
-      rowDrag = _useState5[0],
-      setRowDrag = _useState5[1];
-
+    hitTestDown = _useState5[0],
+    setHitTestDown = _useState5[1];
   var _useState6 = useState(false),
-      draggingKnob = _useState6[0],
-      setDraggingKnob = _useState6[1];
-
+    draggingKnob = _useState6[0],
+    setDraggingKnob = _useState6[1];
   var _useState7 = useState(false),
-      draggingSelection = _useState7[0],
-      setDraggingSelection = _useState7[1];
-
+    draggingSelection = _useState7[0],
+    setDraggingSelection = _useState7[1];
   var _useState8 = useState(false),
-      draggingRowSelection = _useState8[0],
-      setDraggingRowSelection = _useState8[1];
-
+    draggingRowSelection = _useState8[0],
+    setDraggingRowSelection = _useState8[1];
   var _useState9 = useState(false),
-      draggingColumnSelection = _useState9[0],
-      setDraggingColumnSelection = _useState9[1];
-
+    draggingColumnSelection = _useState9[0],
+    setDraggingColumnSelection = _useState9[1];
   var hideRowHeaders = sheetStyle.hideRowHeaders,
-      hideColumnHeaders = sheetStyle.hideColumnHeaders;
+    hideColumnHeaders = sheetStyle.hideColumnHeaders;
   var cellToPixel = cellLayout.cellToPixel,
-      getVersion = cellLayout.getVersion;
+    getVersion = cellLayout.getVersion;
   var version = getVersion();
   var knobPosition = useMemo(function () {
     var _normalizeSelection = normalizeSelection(selection),
-        _normalizeSelection$ = _normalizeSelection[1],
-        maxX = _normalizeSelection$[0],
-        maxY = _normalizeSelection$[1];
-
+      _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 = {
@@ -642,7 +702,6 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     sourceData: sourceData,
     cellLayout: cellLayout,
     visibleCells: visibleCells,
-    hitTarget: hitTarget,
     knobPosition: knobPosition,
     columnResize: columnResize,
     rowResize: rowResize,
@@ -659,40 +718,33 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     if (!e.target || !(e.target instanceof Element)) {
       return null;
     }
-
     var rect = e.target.getBoundingClientRect();
     var xy = [e.clientX - rect.left, e.clientY - rect.top];
-
     if (xy[0] > e.target.clientWidth || xy[1] > e.target.clientHeight) {
       return null;
     }
-
     return xy;
   }, []);
   var getScrollPosition = useCallback(function (e) {
     if (!e.target || !(e.target instanceof Element)) {
       return [0, 0];
     }
-
     var _e$target = e.target,
-        scrollLeft = _e$target.scrollLeft,
-        scrollTop = _e$target.scrollTop;
+      scrollLeft = _e$target.scrollLeft,
+      scrollTop = _e$target.scrollTop;
     var xy = [scrollLeft, scrollTop];
     return xy;
   }, []);
   var getMouseHit = useCallback(function (xy) {
     var hitmap = hitmapRef.current;
     if (!hitmap) return null;
-
     for (var _iterator = _createForOfIteratorHelperLoose(hitmap), _step; !(_step = _iterator()).done;) {
       var object = _step.value;
-      var rect = object.rect;
-
-      if (isPointInsideSelection(rect, xy)) {
+      var box = object.box;
+      if (isPointInsideRectangle(box, xy)) {
         return object;
       }
     }
-
     return null;
   }, [hitmapRef]);
   var onPointerLeave = useCallback(function () {
@@ -700,61 +752,49 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
   }, []);
   var onPointerDown = 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;
+      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;
     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);
     if (!xy) return;
-    var x = xy[0],
-        y = xy[1];
     var hitTarget = getMouseHit(xy);
-
-    if (hitTarget) {
-      setHitTarget(hitTarget);
-      ref.current.hitTarget = hitTarget;
-      return;
-    }
-
+    setHitTestDown(hitTarget);
+    var x = xy[0],
+      y = xy[1];
     var normalized = normalizeSelection(selection);
     var _normalized$ = normalized[0],
-        minX = _normalized$[0],
-        minY = _normalized$[1],
-        _normalized$2 = normalized[1],
-        maxX = _normalized$2[0],
-        maxY = _normalized$2[1];
+      minX = _normalized$[0],
+      minY = _normalized$[1],
+      _normalized$2 = normalized[1],
+      maxX = _normalized$2[0],
+      maxY = _normalized$2[1];
     var selectedColumns = mapSelectionColumns(selection)(function (i) {
       return i;
     });
     var selectedRows = mapSelectionRows(selection)(function (i) {
       return i;
     });
-
     if (!hideColumnHeaders && y < getIndentY()) {
       if (onColumnOrderChange) {
         var start = columnToPixel(minX) + SIZES.resizeZone;
         var end = columnToPixel(maxX, 1) - SIZES.resizeZone;
-
         if (isInRange(x, start, end) || selectedColumnGroups) {
           for (var _iterator2 = _createForOfIteratorHelperLoose(columns), _step2; !(_step2 = _iterator2()).done;) {
             var index = _step2.value;
-
             var _start = columnToPixel(index, 0);
-
             var _end = columnToPixel(index, 1);
-
             if (isColumnSelection(selection) && isInRange(x, _start, _end) && (isInRange(index, minX, maxX) || selectedColumnGroups !== null && selectedColumnGroups !== void 0 && selectedColumnGroups.has(columnGroupKeys(index))) && canOrderColumn(index)) {
               window.document.body.style.cursor = 'grabbing';
               var indices = Array.from(new Set([].concat(selectedColumns, selectedColumnGroups ? columns.filter(function (index) {
@@ -764,27 +804,21 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
                 return a - b;
               });
               var dragIndices = indices;
-
               if (selectedColumnGroups) {
                 var clickSelection = [[index, -1], [index, -1]];
-
                 var _expandSelectionToRow = expandSelectionToRowOrColumnGroups(clickSelection, columnGroupKeys, selectedColumnGroups, 0),
-                    _expandSelectionToRow2 = _expandSelectionToRow[0],
-                    left = _expandSelectionToRow2[0],
-                    _expandSelectionToRow3 = _expandSelectionToRow[1],
-                    right = _expandSelectionToRow3[0];
-
+                  _expandSelectionToRow2 = _expandSelectionToRow[0],
+                  left = _expandSelectionToRow2[0],
+                  _expandSelectionToRow3 = _expandSelectionToRow[1],
+                  right = _expandSelectionToRow3[0];
                 var connected = !(minX > right || maxX < left);
                 var dragStart = connected ? Math.min(minX, left) : left;
                 var dragEnd = connected ? Math.max(maxX, right) : right;
                 dragIndices = seq(dragEnd - dragStart + 1, dragStart);
               }
-
               var size = columnToPixel(maxX, 1) - columnToPixel(minX);
-
               var _getScrollPosition = getScrollPosition(e),
-                  scroll = _getScrollPosition[0];
-
+                scroll = _getScrollPosition[0];
               setColumnDrag({
                 anchor: x,
                 scroll: scroll,
@@ -798,24 +832,17 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
           }
         }
       }
-
       if (onCellWidthChange) {
-        for (var _iterator3 = _createForOfIteratorHelperLoose(columns), _step3; !(_step3 = _iterator3()).done;) {
-          var _index = _step3.value;
+        for (var _i = 0, _arr = [-1].concat(columns); _i < _arr.length; _i++) {
+          var _index = _arr[_i];
           var edge = columnToPixel(_index, 1);
-
           if (Math.abs(edge - x) < SIZES.resizeZone && canSizeColumn(_index)) {
             window.document.body.style.cursor = 'col-resize';
-
             var asGroup = isColumnSelection(selection) && maxX === _index;
-
             var _indices = asGroup ? selectedColumns : [_index];
-
             var _size = asGroup ? columnToPixel(maxX, 1) - columnToPixel(minX) : columnToPixel(_index, 1) - columnToPixel(_index);
-
             var _getScrollPosition2 = getScrollPosition(e),
-                _scroll = _getScrollPosition2[0];
-
+              _scroll = _getScrollPosition2[0];
             setColumnResize({
               anchor: x,
               scroll: _scroll,
@@ -827,59 +854,41 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         }
       }
     }
-
     if (!hideRowHeaders && x < getIndentX()) {
       if (onRowOrderChange) {
         var _start2 = rowToPixel(minY) + SIZES.resizeZone;
-
         var _end2 = rowToPixel(maxY, 1) - SIZES.resizeZone;
-
         if (isInRange(y, _start2, _end2) || selectedRowGroups) {
-          for (var _iterator4 = _createForOfIteratorHelperLoose(rows), _step4; !(_step4 = _iterator4()).done;) {
-            var _index2 = _step4.value;
-
+          for (var _iterator3 = _createForOfIteratorHelperLoose(rows), _step3; !(_step3 = _iterator3()).done;) {
+            var _index2 = _step3.value;
             var _start3 = rowToPixel(_index2, 0);
-
             var _end3 = rowToPixel(_index2, 1);
-
             if (isRowSelection(selection) && isInRange(y, _start3, _end3) && (isInRange(_index2, minY, maxY) || selectedRowGroups !== null && selectedRowGroups !== void 0 && selectedRowGroups.has(rowGroupKeys(_index2))) && canOrderRow(_index2)) {
               window.document.body.style.cursor = 'grabbing';
-
               var _indices2 = Array.from(new Set([].concat(selectedRows, selectedRowGroups ? rows.map(function (_, i) {
                 return i;
               }).filter(function (index) {
                 return selectedRowGroups.has(rowGroupKeys(index));
               }) : [])).values());
-
               _indices2.sort(function (a, b) {
                 return a - b;
               });
-
               var _dragIndices = _indices2;
-
               if (selectedRowGroups) {
                 var _clickSelection = [[-1, _index2], [-1, _index2]];
-
                 var _expandSelectionToRow4 = expandSelectionToRowOrColumnGroups(_clickSelection, rowGroupKeys, selectedRowGroups, 1),
-                    _expandSelectionToRow5 = _expandSelectionToRow4[0],
-                    top = _expandSelectionToRow5[1],
-                    _expandSelectionToRow6 = _expandSelectionToRow4[1],
-                    bottom = _expandSelectionToRow6[1];
-
+                  _expandSelectionToRow5 = _expandSelectionToRow4[0],
+                  top = _expandSelectionToRow5[1],
+                  _expandSelectionToRow6 = _expandSelectionToRow4[1],
+                  bottom = _expandSelectionToRow6[1];
                 var _connected = !(minY > bottom || maxY < top);
-
                 var _dragStart = _connected ? Math.min(minY, top) : top;
-
                 var _dragEnd = _connected ? Math.max(maxY, bottom) : bottom;
-
                 _dragIndices = seq(_dragEnd - _dragStart + 1, _dragStart);
               }
-
               var _size2 = rowToPixel(maxY, 1) - rowToPixel(minY);
-
               var _getScrollPosition3 = getScrollPosition(e),
-                  _scroll2 = _getScrollPosition3[1];
-
+                _scroll2 = _getScrollPosition3[1];
               setRowDrag({
                 anchor: y,
                 scroll: _scroll2,
@@ -893,25 +902,17 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
           }
         }
       }
-
       if (onCellHeightChange) {
-        for (var _iterator5 = _createForOfIteratorHelperLoose(rows), _step5; !(_step5 = _iterator5()).done;) {
-          var _index3 = _step5.value;
-
+        for (var _i2 = 0, _arr2 = [-1].concat(rows); _i2 < _arr2.length; _i2++) {
+          var _index3 = _arr2[_i2];
           var _edge = rowToPixel(_index3, 1);
-
           if (Math.abs(_edge - y) < SIZES.resizeZone && canSizeRow(_index3)) {
             window.document.body.style.cursor = 'row-resize';
-
             var _asGroup = isRowSelection(selection) && maxY === _index3;
-
             var _indices3 = _asGroup ? selectedRows : [_index3];
-
             var _size3 = _asGroup ? rowToPixel(maxY, 1) - rowToPixel(minY) : rowToPixel(_index3, 1) - rowToPixel(_index3);
-
             var _getScrollPosition4 = getScrollPosition(e),
-                _scroll3 = _getScrollPosition4[1];
-
+              _scroll3 = _getScrollPosition4[1];
             setRowResize({
               anchor: y,
               scroll: _scroll3,
@@ -923,95 +924,78 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         }
       }
     }
-
     if (knobPosition) {
       var knobX = knobPosition[0],
-          knobY = knobPosition[1];
-
+        knobY = knobPosition[1];
       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;
       }
     }
-
     var head = pixelToCell(xy);
     var anchor = e.shiftKey ? [].concat(selection[0]) : head;
-
     if (editMode) {
       if (!dontCommitEditOnSelectionChange) {
         onCommit === null || onCommit === void 0 ? void 0 : onCommit();
       }
     }
-
     var scrollTo = true;
-
     if (!hideRowHeaders && x < getIndentX()) {
       scrollTo = false;
       setDraggingRowSelection(true);
       anchor[0] = -1;
       head[0] = -1;
     }
-
     if (!hideColumnHeaders && y < getIndentY()) {
       scrollTo = false;
       setDraggingColumnSelection(true);
       anchor[1] = -1;
       head[1] = -1;
     }
-
     setDraggingSelection(true);
     onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([anchor, head], scrollTo, true);
   }, [getMousePosition, getScrollPosition, getMouseHit, onColumnOrderChange, onRowOrderChange, onCellWidthChange, onCellHeightChange, onKnobAreaChange, onSelectionChange, onCommit, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, dontCommitEditOnSelectionChange, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups]);
   var onPointerUp = 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;
+      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;
     onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
-
     if (knobArea && draggingKnob) {
       var changes = parseKnobOperation(knobArea, selection, sourceData, editData, cellReadOnly);
       onChange === null || onChange === void 0 ? void 0 : onChange(changes);
       onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(knobArea, true, true);
       onKnobAreaChange === null || onKnobAreaChange === void 0 ? void 0 : onKnobAreaChange(null);
     }
-
     var xy = getMousePosition(e);
-
     if (xy && (columnDrag || rowDrag)) {
       window.document.body.style.cursor = 'auto';
       onDragIndicesChange === null || onDragIndicesChange === void 0 ? void 0 : onDragIndicesChange([null, null]);
       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];
-
+        y = xy[1];
       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];
-
-      var cellX = pixelToColumn(Math.max(x, getIndentX()), 0.5);
-      var cellY = pixelToRow(Math.max(y, getIndentY()), 0.5);
-
+        _normalizeSelection2$ = _normalizeSelection2[0],
+        minX = _normalizeSelection2$[0],
+        minY = _normalizeSelection2$[1],
+        _normalizeSelection2$2 = _normalizeSelection2[1],
+        maxX = _normalizeSelection2$2[0],
+        maxY = _normalizeSelection2$2[1];
+      var cellX = Math.max(0, pixelToColumn(x, 0.5));
+      var cellY = Math.max(0, pixelToRow(y, 0.5));
       if (columnDrag) {
         var indices = columnDrag.indices;
         var insideSelection = cellX >= minX && cellX <= maxX + 1;
         var insideGroup = selectedColumnGroups === null || selectedColumnGroups === void 0 ? void 0 : selectedColumnGroups.has(columnGroupKeys(x));
-
         if (!insideSelection && !insideGroup) {
           var preceding = indices.filter(function (i) {
             return i < cellX;
@@ -1022,28 +1006,21 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
           onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(Math.min(minX, order));
         }
       }
-
       if (rowDrag) {
         var _indices4 = rowDrag.indices;
-
         var _insideSelection = cellY >= minY && cellY <= maxY + 1;
-
         var _insideGroup = selectedRowGroups === null || selectedRowGroups === void 0 ? void 0 : selectedRowGroups.has(rowGroupKeys(y));
-
         if (!_insideSelection && !_insideGroup) {
           var _preceding = _indices4.filter(function (i) {
             return i < cellY;
           });
-
           var _order = cellY - _preceding.length;
-
           dontChangeSelectionOnOrderChange || (onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[minX, _order], [maxX, _order + _indices4.length - 1]]));
           onRowOrderChange === null || onRowOrderChange === void 0 ? void 0 : onRowOrderChange(_indices4, _order);
           onInvalidateRow === null || onInvalidateRow === void 0 ? void 0 : onInvalidateRow(Math.min(minY, _order));
         }
       }
     }
-
     setDraggingSelection(false);
     setDraggingRowSelection(false);
     setDraggingColumnSelection(false);
@@ -1055,33 +1032,30 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
   }, [getMousePosition, getMouseHit, onChange, onSelectionChange, onKnobAreaChange, onDropTargetChange, onColumnOrderChange, onRowOrderChange, dontChangeSelectionOnOrderChange]);
   var onPointerMove = 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;
+      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;
     window.document.body.style.cursor = 'auto';
     var xy = getMousePosition(e);
     if (!xy) return;
     var hitTarget = getMouseHit(xy);
-
-    if (hitTarget) {
-      window.document.body.style.cursor = 'pointer';
-    } else if (columnDrag || rowDrag) {
+    if (columnDrag || rowDrag) {
       window.document.body.style.cursor = 'grabbing';
     } else if (columnResize) {
       window.document.body.style.cursor = 'col-resize';
@@ -1091,37 +1065,31 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       e.preventDefault();
     } else if (draggingRowSelection || draggingColumnSelection) {
       e.preventDefault();
+    } else if (hitTarget) {
+      window.document.body.style.cursor = 'pointer';
     }
-
     var columns = visibleCells.columns,
-        rows = visibleCells.rows;
+      rows = visibleCells.rows;
     var x = xy[0],
-        y = xy[1];
-
+      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];
-
+      _normalizeSelection3$ = _normalizeSelection3[0],
+      minX = _normalizeSelection3$[0],
+      minY = _normalizeSelection3$[1],
+      _normalizeSelection3$2 = _normalizeSelection3[1],
+      maxX = _normalizeSelection3$2[0],
+      maxY = _normalizeSelection3$2[1];
     var isDragging = columnResize || columnDrag || rowResize || rowDrag || draggingRowSelection || draggingColumnSelection;
-
     if (!isDragging) {
       if (!hideColumnHeaders && y < getIndentY()) {
         if (onColumnOrderChange) {
           var start = columnToPixel(minX) + SIZES.resizeZone;
           var end = columnToPixel(maxX, 1) - SIZES.resizeZone;
-
           if (isInRange(x, start, end) || selectedColumnGroups) {
-            for (var _iterator6 = _createForOfIteratorHelperLoose(columns), _step6; !(_step6 = _iterator6()).done;) {
-              var index = _step6.value;
-
+            for (var _iterator4 = _createForOfIteratorHelperLoose(columns), _step4; !(_step4 = _iterator4()).done;) {
+              var index = _step4.value;
               var _start4 = columnToPixel(index);
-
               var _end4 = columnToPixel(index, 1);
-
               if (!draggingColumnSelection && isColumnSelection(selection) && isInRange(x, _start4, _end4) && (isInRange(index, minX, maxX) || selectedColumnGroups !== null && selectedColumnGroups !== void 0 && selectedColumnGroups.has(columnGroupKeys(index))) && canOrderColumn(index)) {
                 window.document.body.style.cursor = 'grab';
                 return;
@@ -1129,12 +1097,10 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
             }
           }
         }
-
         if (onCellWidthChange) {
-          for (var _iterator7 = _createForOfIteratorHelperLoose(columns), _step7; !(_step7 = _iterator7()).done;) {
-            var _index4 = _step7.value;
+          for (var _i3 = 0, _arr3 = [-1].concat(columns); _i3 < _arr3.length; _i3++) {
+            var _index4 = _arr3[_i3];
             var edge = columnToPixel(_index4, 1);
-
             if (Math.abs(edge - x) < SIZES.resizeZone && canSizeColumn(_index4)) {
               window.document.body.style.cursor = 'col-resize';
               return;
@@ -1142,21 +1108,15 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
           }
         }
       }
-
       if (!hideRowHeaders && x < getIndentX()) {
         if (onRowOrderChange) {
           var _start5 = rowToPixel(minY) + SIZES.resizeZone;
-
           var _end5 = rowToPixel(maxY, 1) - SIZES.resizeZone;
-
           if (isInRange(y, _start5, _end5) || selectedRowGroups) {
-            for (var _iterator8 = _createForOfIteratorHelperLoose(rows), _step8; !(_step8 = _iterator8()).done;) {
-              var _index5 = _step8.value;
-
+            for (var _iterator5 = _createForOfIteratorHelperLoose(rows), _step5; !(_step5 = _iterator5()).done;) {
+              var _index5 = _step5.value;
               var _start6 = rowToPixel(_index5);
-
               var _end6 = rowToPixel(_index5, 1);
-
               if (!draggingRowSelection && isRowSelection(selection) && isInRange(y, _start6, _end6) && (isInRange(_index5, minY, maxY) || selectedRowGroups !== null && selectedRowGroups !== void 0 && selectedRowGroups.has(rowGroupKeys(_index5))) && canOrderRow(_index5)) {
                 window.document.body.style.cursor = 'grab';
                 return;
@@ -1164,13 +1124,10 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
             }
           }
         }
-
         if (onCellHeightChange) {
-          for (var _iterator9 = _createForOfIteratorHelperLoose(rows), _step9; !(_step9 = _iterator9()).done;) {
-            var _index6 = _step9.value;
-
+          for (var _i4 = 0, _arr4 = [-1].concat(rows); _i4 < _arr4.length; _i4++) {
+            var _index6 = _arr4[_i4];
             var _edge2 = rowToPixel(_index6, 1);
-
             if (Math.abs(_edge2 - y) < SIZES.resizeZone && canSizeRow(_index6)) {
               window.document.body.style.cursor = 'row-resize';
               return;
@@ -1178,66 +1135,54 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
           }
         }
       }
-
       if (knobPosition) {
         var knobX = knobPosition[0],
-            knobY = knobPosition[1];
-
+          knobY = knobPosition[1];
         if (Math.abs(x - knobX) < SIZES.knobArea && Math.abs(y - knobY) < SIZES.knobArea) {
           window.document.body.style.cursor = 'crosshair';
           return;
         }
       }
     }
-
     if (columnResize) {
       if (onCellWidthChange) {
         var size = columnResize.size,
-            anchor = columnResize.anchor,
-            scroll = columnResize.scroll,
-            indices = columnResize.indices;
-
+          anchor = columnResize.anchor,
+          scroll = columnResize.scroll,
+          indices = columnResize.indices;
         var _getScrollPosition5 = getScrollPosition(e),
-            currentScroll = _getScrollPosition5[0];
-
+          currentScroll = _getScrollPosition5[0];
         var newWidth = Math.round(Math.max(size + x - anchor + scroll - currentScroll, SIZES.minimumWidth * indices.length));
         onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(indices[0] - 1);
         onCellWidthChange(indices, indices.map(function (_) {
           return Math.round(newWidth / indices.length);
         }));
       }
-
       return;
     }
-
     if (rowResize) {
       if (onCellHeightChange) {
         var _size4 = rowResize.size,
-            _anchor = rowResize.anchor,
-            _scroll4 = rowResize.scroll,
-            _indices5 = rowResize.indices;
-
+          _anchor = rowResize.anchor,
+          _scroll4 = rowResize.scroll,
+          _indices5 = rowResize.indices;
         var _getScrollPosition6 = getScrollPosition(e),
-            _currentScroll = _getScrollPosition6[1];
-
+          _currentScroll = _getScrollPosition6[1];
         var newHeight = Math.round(Math.max(_size4 + y - _anchor + _scroll4 - _currentScroll, SIZES.minimumHeight * _indices5.length));
         onInvalidateRow === null || onInvalidateRow === void 0 ? void 0 : onInvalidateRow(_indices5[0] - 1);
         onCellHeightChange(_indices5, _indices5.map(function (_) {
           return newHeight / _indices5.length;
         }));
       }
-
       return;
     }
-
     if (draggingSelection) {
       var _anchor2 = selection[0];
       var head = pixelToCell(xy);
       var anchorX = _anchor2[0],
-          anchorY = _anchor2[1];
+        anchorY = _anchor2[1];
       var headX = head[0],
-          headY = head[1];
-
+        headY = head[1];
       if (draggingRowSelection) {
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[-1, anchorY], [-1, Math.max(0, headY)]], false);
       } else if (draggingColumnSelection) {
@@ -1246,25 +1191,20 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([maxXY(_anchor2, ORIGIN), maxXY(head, ORIGIN)], false);
       }
     }
-
     if (draggingKnob) {
       window.document.body.style.cursor = 'crosshair';
-
       var _pixelToCell = pixelToCell(xy),
-          cellX = _pixelToCell[0],
-          cellY = _pixelToCell[1];
-
+        cellX = _pixelToCell[0],
+        cellY = _pixelToCell[1];
       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];
-
+        _normalizeSelection4$ = _normalizeSelection4[0],
+        _minX = _normalizeSelection4$[0],
+        _minY = _normalizeSelection4$[1],
+        _normalizeSelection4$2 = _normalizeSelection4[1],
+        _maxX = _normalizeSelection4$2[0],
+        _maxY = _normalizeSelection4$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;
@@ -1278,156 +1218,152 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
           _maxX = cellX;
         }
       }
-
       onKnobAreaChange === null || onKnobAreaChange === void 0 ? void 0 : onKnobAreaChange([[_minX, _minY], [_maxX, _maxY]]);
     }
-
     if (columnDrag || rowDrag) {
       var _x = xy[0],
-          _y = xy[1];
-
+        _y = xy[1];
       if (columnDrag) {
-        var _cellX = pixelToColumn(Math.max(_x, getIndentX()), 0.5);
-
+        var _cellX = Math.max(0, pixelToColumn(_x, 0.5));
         var insideSelection = _cellX >= minX && _cellX <= maxX + 1;
         var insideGroup = isBoundaryInsideGroup(_cellX, columnGroupKeys);
         var _anchor3 = columnDrag.anchor,
-            _scroll5 = columnDrag.scroll;
+          _scroll5 = columnDrag.scroll;
         var shift = _x - _anchor3;
-
         var _getScrollPosition7 = getScrollPosition(e),
-            _currentScroll2 = _getScrollPosition7[0];
-
+          _currentScroll2 = _getScrollPosition7[0];
         onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([shift + _currentScroll2 - _scroll5, 0]);
         onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(insideSelection || insideGroup ? null : [[_cellX, -1], [_cellX, -1]]);
       }
-
       if (rowDrag) {
-        var _cellY = pixelToRow(Math.max(_y, getIndentY()), 0.5);
-
+        var _cellY = Math.max(0, pixelToRow(_y, 0.5));
         var _insideSelection2 = _cellY >= minY && _cellY <= maxY + 1;
-
         var _insideGroup2 = isBoundaryInsideGroup(_cellY, rowGroupKeys);
-
         var _anchor4 = rowDrag.anchor,
-            _scroll6 = rowDrag.scroll;
-
+          _scroll6 = rowDrag.scroll;
         var _shift = _y - _anchor4;
-
         var _getScrollPosition8 = getScrollPosition(e),
-            _currentScroll3 = _getScrollPosition8[1];
-
+          _currentScroll3 = _getScrollPosition8[1];
         onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, _shift + _currentScroll3 - _scroll6]);
         onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(_insideSelection2 || _insideGroup2 ? null : [[-1, _cellY], [-1, _cellY]]);
       }
     }
   }, [getMousePosition, getScrollPosition, getMouseHit, onCellWidthChange, onCellHeightChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onKnobAreaChange, onInvalidateRow, onInvalidateColumn, columnGroupKeys, rowGroupKeys]);
   var onClick = useCallback(function (e) {
-    var _getMouseHit;
-
-    var hitTarget = ref.current.hitTarget;
-    if (!hitTarget) return;
     var xy = getMousePosition(e);
     if (!xy) return;
-    setHitTarget(null);
-    var previousRect = JSON.stringify(hitTarget.rect);
-    var currentRect = JSON.stringify((_getMouseHit = getMouseHit(xy)) === null || _getMouseHit === void 0 ? void 0 : _getMouseHit.rect);
-
-    if (previousRect === currentRect) {
-      var _obj$onClick;
-
-      var obj = hitTarget.obj;
-      (_obj$onClick = obj.onClick) === null || _obj$onClick === void 0 ? void 0 : _obj$onClick.call(obj, e);
+    var mouseHit = getMouseHit(xy);
+    if (hitTestDown && mouseHit) {
+      if (isSameRectangle(hitTestDown.box, mouseHit.box)) {
+        var _mouseHit$item, _mouseHit$item$onClic;
+        mouseHit === null || mouseHit === void 0 ? void 0 : (_mouseHit$item = mouseHit.item) === null || _mouseHit$item === void 0 ? void 0 : (_mouseHit$item$onClic = _mouseHit$item.onClick) === null || _mouseHit$item$onClic === void 0 ? void 0 : _mouseHit$item$onClic.call(_mouseHit$item, e);
+      }
     }
-  }, [getMousePosition, getMouseHit]);
+    setHitTestDown(null);
+  }, [getMousePosition, getMouseHit, hitTestDown]);
   var onDoubleClick = useCallback(function (e) {
     var _ref$current4 = ref.current,
-        selection = _ref$current4.selection,
-        _ref$current4$cellLay = _ref$current4.cellLayout,
-        pixelToCell = _ref$current4$cellLay.pixelToCell,
-        columnToPixel = _ref$current4$cellLay.columnToPixel,
-        getIndentY = _ref$current4$cellLay.getIndentY;
+      selection = _ref$current4.selection,
+      _ref$current4$cellLay = _ref$current4.cellLayout,
+      pixelToCell = _ref$current4$cellLay.pixelToCell,
+      columnToPixel = _ref$current4$cellLay.columnToPixel,
+      rowToPixel = _ref$current4$cellLay.rowToPixel,
+      getIndentX = _ref$current4$cellLay.getIndentX,
+      getIndentY = _ref$current4$cellLay.getIndentY;
     e.preventDefault();
     if (e.shiftKey) return;
     var xy = getMousePosition(e);
     if (!xy) return;
     var x = xy[0],
-        y = xy[1];
+      y = xy[1];
     var indentY = getIndentY();
     var columns = visibleCells.columns;
-
     if (onCellWidthChange && y < indentY) {
       var autosized = [];
-
-      for (var _iterator10 = _createForOfIteratorHelperLoose(columns), _step10; !(_step10 = _iterator10()).done;) {
-        var index = _step10.value;
+      for (var _iterator6 = _createForOfIteratorHelperLoose(columns), _step6; !(_step6 = _iterator6()).done;) {
+        var index = _step6.value;
         var edge = columnToPixel(index, 1);
-
         if (Math.abs(edge - x) < SIZES.resizeZone && canSizeColumn(index)) {
           var _normalizeSelection5 = normalizeSelection(selection),
-              _normalizeSelection5$ = _normalizeSelection5[0],
-              minX = _normalizeSelection5$[0],
-              _normalizeSelection5$2 = _normalizeSelection5[1],
-              maxX = _normalizeSelection5$2[0];
-
+            _normalizeSelection5$ = _normalizeSelection5[0],
+            minX = _normalizeSelection5$[0],
+            _normalizeSelection5$2 = _normalizeSelection5[1],
+            maxX = _normalizeSelection5$2[0];
           var indices = isColumnSelection(selection) && index >= minX && index <= maxX ? mapSelectionColumns(selection)(function (i) {
             return i;
           }) : [index];
           autosized.push.apply(autosized, indices);
         }
       }
-
-      for (var _i = 0, _autosized = autosized; _i < _autosized.length; _i++) {
-        var column = _autosized[_i];
+      for (var _i5 = 0, _autosized = autosized; _i5 < _autosized.length; _i5++) {
+        var column = _autosized[_i5];
         onInvalidateColumn === null || onInvalidateColumn === void 0 ? void 0 : onInvalidateColumn(column - 1);
       }
-
       onCellWidthChange(autosized, autosized.map(function (column) {
         return getAutoSizeWidth(column);
       }));
       if (autosized.length) return;
     }
-
+    var indentX = getIndentX();
+    var rows = visibleCells.rows;
+    if (onCellHeightChange && x < indentX) {
+      var _autosized2 = [];
+      for (var _i6 = 0, _arr5 = [-1].concat(rows); _i6 < _arr5.length; _i6++) {
+        var _index7 = _arr5[_i6];
+        var _edge3 = _index7 < 0 ? rowToPixel(0) : rowToPixel(_index7, 1);
+        if (Math.abs(_edge3 - y) < SIZES.resizeZone && canSizeRow(_index7)) {
+          var _normalizeSelection6 = normalizeSelection(selection),
+            _normalizeSelection6$ = _normalizeSelection6[0],
+            minY = _normalizeSelection6$[1],
+            _normalizeSelection6$2 = _normalizeSelection6[1],
+            maxY = _normalizeSelection6$2[1];
+          var _indices6 = isRowSelection(selection) && _index7 >= minY && _index7 <= maxY ? mapSelectionRows(selection)(function (i) {
+            return i;
+          }) : [_index7];
+          _autosized2.push.apply(_autosized2, _indices6);
+        }
+      }
+      for (var _i7 = 0, _autosized3 = _autosized2; _i7 < _autosized3.length; _i7++) {
+        var row = _autosized3[_i7];
+        onInvalidateRow === null || onInvalidateRow === void 0 ? void 0 : onInvalidateRow(row - 1);
+      }
+      onCellHeightChange(_autosized2, _autosized2.map(function (row) {
+        return getAutoSizeHeight(row);
+      }));
+      if (_autosized2.length) return;
+    }
     var hitTarget = getMouseHit(xy);
-
     if (hitTarget) {
       window.document.body.style.cursor = 'pointer';
       return;
     }
-
     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, onInvalidateColumn, onCellWidthChange, getAutoSizeWidth, visibleCells, canSizeColumn]);
   var onContextMenu = 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;
+      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];
-
+      y = xy[1];
     if (x <= getIndentX() || y <= getIndentY()) {
       return;
     }
-
     var cell = pixelToCell(xy);
-
     if (!isPointInsideSelection(selection, cell)) {
       onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([cell, cell]);
     }
-
     onPointerMove(e);
     var cellX = cell[0],
-        cellY = cell[1];
-
+      cellY = cell[1];
     var event = _extends({}, e, {
       cellX: cellX,
       cellY: cellY
     });
-
     onRightClick === null || onRightClick === void 0 ? void 0 : onRightClick(event);
   }, [getMousePosition, onSelectionChange, onPointerMove, onRightClick]);
   var mouseHandlers = {
@@ -1444,51 +1380,42 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
     mouseHandlers: mouseHandlers
   };
 };
-
 var parseKnobOperation = function parseKnobOperation(knobArea, selection, sourceData, editData, cellReadOnly) {
-  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 _normalizeSelection7 = normalizeSelection(knobArea),
+    _normalizeSelection7$ = _normalizeSelection7[0],
+    kx1 = _normalizeSelection7$[0],
+    ky1 = _normalizeSelection7$[1],
+    _normalizeSelection7$2 = _normalizeSelection7[1],
+    kx2 = _normalizeSelection7$2[0],
+    ky2 = _normalizeSelection7$2[1];
+  var _normalizeSelection8 = normalizeSelection(selection),
+    _normalizeSelection8$ = _normalizeSelection8[0],
+    sx1 = _normalizeSelection8$[0],
+    sy1 = _normalizeSelection8$[1],
+    _normalizeSelection8$2 = _normalizeSelection8[1],
+    sx2 = _normalizeSelection8$2[0],
+    sy2 = _normalizeSelection8$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 (fx1 === -1 && fx2 === -1) {
       var _findApproxMaxEditDat = findApproxMaxEditDataIndex(editData),
-          maxX = _findApproxMaxEditDat[0];
-
+        maxX = _findApproxMaxEditDat[0];
       fx1 = 0;
       fx2 = maxX;
     }
-
     var srcY = sy1;
-
     for (var y = fy1; y <= fy2; y++) {
       for (var x = fx1; x <= fx2; x++) {
         var value = sourceData(x, srcY);
-
         if (!cellReadOnly(x, y)) {
           changes.push({
             x: x,
@@ -1501,9 +1428,7 @@ var parseKnobOperation = function parseKnobOperation(knobArea, selection, source
           });
         }
       }
-
       srcY = srcY + 1;
-
       if (srcY > sy2) {
         srcY = sy1;
       }
@@ -1514,21 +1439,16 @@ var parseKnobOperation = function parseKnobOperation(knobArea, selection, source
     } else {
       fx2 = sx1 - 1;
     }
-
     if (fy1 === -1 && fy2 === -1) {
       var _findApproxMaxEditDat2 = findApproxMaxEditDataIndex(editData),
-          maxY = _findApproxMaxEditDat2[1];
-
+        maxY = _findApproxMaxEditDat2[1];
       fy1 = 0;
       fy2 = maxY;
     }
-
     var srcX = sx1;
-
     for (var _x2 = fx1; _x2 <= fx2; _x2++) {
       for (var _y2 = fy1; _y2 <= fy2; _y2++) {
         var _value = sourceData(srcX, _y2);
-
         if (!cellReadOnly(_x2, _y2)) {
           changes.push({
             x: _x2,
@@ -1541,15 +1461,12 @@ var parseKnobOperation = function parseKnobOperation(knobArea, selection, source
           });
         }
       }
-
       srcX = srcX + 1;
-
       if (srcX > sx2) {
         srcX = sx1;
       }
     }
   }
-
   return changes;
 };
 
@@ -1559,9 +1476,7 @@ var useKeyboard = function useKeyboard(arrowKeyCommitMode, overlayRef, cellReadO
       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);
@@ -1570,48 +1485,39 @@ var useKeyboard = function useKeyboard(arrowKeyCommitMode, overlayRef, cellReadO
       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];
-
+        _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)) {
@@ -1623,79 +1529,61 @@ var useKeyboard = function useKeyboard(arrowKeyCommitMode, overlayRef, cellReadO
           }
         }
       }
-
       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];
-
+        cellY = cell[1];
       if (cellReadOnly(cellX, cellY)) {
         return;
       }
-
       if (e.key === 'Enter') e.preventDefault();
       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];
+        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);
   };
-
   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
@@ -1715,28 +1603,22 @@ var useScroll = function useScroll(offset, maxScroll, cellLayout, onOffsetChange
     if (!e.target || !(e.target instanceof Element)) {
       return;
     }
-
     var absoluteToCell = cellLayout.absoluteToCell,
-        cellToAbsolute = cellLayout.cellToAbsolute;
-
-    var _cellToAbsolute = cellToAbsolute([0, 0], [0.5, 0.5]),
-        nudgeX = _cellToAbsolute[0],
-        nudgeY = _cellToAbsolute[1];
-
+      cellToAbsolute = cellLayout.cellToAbsolute;
+    var _subXY = subXY(cellToAbsolute([0, 0], [0.5, 0.5]), cellToAbsolute([0, 0])),
+      nudgeX = _subXY[0],
+      nudgeY = _subXY[1];
     var xy = [e.target.scrollLeft + nudgeX, e.target.scrollTop + nudgeY];
     var cell = absoluteToCell(xy);
-
     if (!isSameXY(cell, offset)) {
       onOffsetChange === null || onOffsetChange === void 0 ? void 0 : onOffsetChange(cell);
     }
-
     var x = xy[0],
-        y = xy[1];
+      y = xy[1];
     var maxScrollX = maxScroll[0],
-        maxScrollY = maxScroll[1];
+      maxScrollY = maxScroll[1];
     var growX = maxScrollX < x + 1 ? 1.5 : 1;
     var growY = maxScrollY < y + 1 ? 1.5 : 1;
-
     if (growX > 1 || growY > 1) {
       onMaxScrollChange === null || onMaxScrollChange === void 0 ? void 0 : onMaxScrollChange(mulXY(maxScroll, [growX, growY]));
     }
@@ -1744,52 +1626,43 @@ var useScroll = function useScroll(offset, maxScroll, cellLayout, onOffsetChange
 };
 var clipDataOffset = function clipDataOffset(view, offset, freeze, maxCells, cellLayout) {
   var newX = offset[0],
-      newY = offset[1];
+    newY = offset[1];
   var freezeX = freeze[0],
-      freezeY = freeze[1];
+    freezeY = freeze[1];
   var maxColumns = maxCells[0],
-      maxRows = maxCells[1];
+    maxRows = maxCells[1];
   var absoluteToColumn = cellLayout.absoluteToColumn,
-      columnToAbsolute = cellLayout.columnToAbsolute,
-      absoluteToRow = cellLayout.absoluteToRow,
-      rowToAbsolute = cellLayout.rowToAbsolute;
-
+    columnToAbsolute = cellLayout.columnToAbsolute,
+    absoluteToRow = cellLayout.absoluteToRow,
+    rowToAbsolute = cellLayout.rowToAbsolute;
   var _getViewExtent = getViewExtent(view, [newX, newY], freeze, cellLayout),
-      _getViewExtent$edge = _getViewExtent.edge,
-      leftEdge = _getViewExtent$edge[0],
-      topEdge = _getViewExtent$edge[1],
-      _getViewExtent$viewpo = _getViewExtent.viewport,
-      scrollW = _getViewExtent$viewpo[0],
-      scrollH = _getViewExtent$viewpo[1];
-
+    _getViewExtent$edge = _getViewExtent.edge,
+    leftEdge = _getViewExtent$edge[0],
+    topEdge = _getViewExtent$edge[1],
+    _getViewExtent$viewpo = _getViewExtent.viewport,
+    scrollW = _getViewExtent$viewpo[0],
+    scrollH = _getViewExtent$viewpo[1];
   if (leftEdge >= maxColumns) {
     var remainder = columnToAbsolute(maxColumns) - columnToAbsolute(newX + freezeX);
     newX = Math.max(0, absoluteToColumn(columnToAbsolute(newX + freezeX) - scrollW + remainder) - freezeX + 1);
   }
-
   if (topEdge >= maxRows) {
     var _remainder = rowToAbsolute(maxRows) - rowToAbsolute(newY + freezeY);
-
     newY = Math.max(0, absoluteToRow(rowToAbsolute(newY + freezeY) - scrollH + _remainder) - freezeY + 1);
   }
-
   return [newX, newY];
 };
 var getViewExtent = function getViewExtent(view, offset, freeze, cellLayout) {
-  var cellToAbsolute = cellLayout.cellToAbsolute,
-      getIndentX = cellLayout.getIndentX,
-      getIndentY = cellLayout.getIndentY;
+  var cellToAbsolute = cellLayout.cellToAbsolute;
   var x = offset[0],
-      y = offset[1];
+    y = offset[1];
   var w = view[0],
-      h = view[1];
-
-  var _cellToAbsolute2 = cellToAbsolute(freeze),
-      frozenX = _cellToAbsolute2[0],
-      frozenY = _cellToAbsolute2[1];
-
-  var scrollW = w - frozenX - getIndentX();
-  var scrollH = h - frozenY - getIndentY();
+    h = view[1];
+  var _cellToAbsolute = cellToAbsolute(freeze),
+    frozenX = _cellToAbsolute[0],
+    frozenY = _cellToAbsolute[1];
+  var scrollW = w - frozenX;
+  var scrollH = h - frozenY;
   var leftEdge = x + freeze[0];
   var topEdge = y + freeze[1];
   return {
@@ -1799,55 +1672,44 @@ var getViewExtent = function getViewExtent(view, offset, freeze, cellLayout) {
 };
 var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, maxScroll, cellLayout, callback) {
   var x = cell[0],
-      y = cell[1];
+    y = cell[1];
   var w = view[0],
-      h = view[1];
+    h = view[1];
   var offsetX = offset[0],
-      offsetY = offset[1];
+    offsetY = offset[1];
   var cellToAbsolute = cellLayout.cellToAbsolute,
-      cellToPixel = cellLayout.cellToPixel,
-      columnToPixel = cellLayout.columnToPixel,
-      rowToPixel = cellLayout.rowToPixel;
-
-  var _cellToAbsolute3 = cellToAbsolute(freeze),
-      frozenX = _cellToAbsolute3[0],
-      frozenY = _cellToAbsolute3[1];
-
+    cellToPixel = cellLayout.cellToPixel,
+    columnToPixel = cellLayout.columnToPixel,
+    rowToPixel = cellLayout.rowToPixel;
+  var origin = cellToAbsolute([0, 0]);
+  var frozen = cellToAbsolute(freeze);
+  var frozenX = frozen[0],
+    frozenY = frozen[1];
   var _cellToPixel = cellToPixel(cell),
-      left = _cellToPixel[0],
-      top = _cellToPixel[1];
-
+    left = _cellToPixel[0],
+    top = _cellToPixel[1];
   var _cellToPixel2 = cellToPixel(cell, ONE_ONE),
-      right = _cellToPixel2[0],
-      bottom = _cellToPixel2[1];
-
+    right = _cellToPixel2[0],
+    bottom = _cellToPixel2[1];
   var newX = offset[0],
-      newY = offset[1];
-
+    newY = offset[1];
   if (left <= frozenX) {
     newX = x - freeze[0];
   }
-
   if (top <= frozenY) {
     newY = y - freeze[1];
   }
-
   if (right > w) {
     var edge = right - w + columnToPixel(newX);
-
     while (columnToPixel(++newX) < edge) {}
   }
-
   if (bottom > h) {
     var _edge = bottom - h + rowToPixel(newY);
-
     while (rowToPixel(++newY) < _edge) {}
   }
-
   var newOffset = [newX >= 0 ? newX : offsetX, newY >= 0 ? newY : offsetY];
-
   if (!isSameXY(newOffset, offset)) {
-    var scroll = cellToAbsolute(newOffset);
+    var scroll = subXY(cellToAbsolute(newOffset), origin);
     callback(newOffset, maxXY(maxScroll, scroll));
     setTimeout(function () {
       updateScrollPosition(element, newOffset, cellLayout);
@@ -1857,89 +1719,414 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
 var updateScrollPosition = function updateScrollPosition(element, dataOffset, cellLayout) {
   var cellToAbsolute = cellLayout.cellToAbsolute;
   var scroll = cellToAbsolute(dataOffset);
-
-  var _cellToAbsolute4 = cellToAbsolute([0, 0], [0.5, 0.5]),
-      nudgeX = _cellToAbsolute4[0],
-      nudgeY = _cellToAbsolute4[1];
-
+  var _subXY2 = subXY(cellToAbsolute([0, 0], [0.5, 0.5]), cellToAbsolute([0, 0])),
+    nudgeX = _subXY2[0],
+    nudgeY = _subXY2[1];
   var scrollX = scroll[0],
-      scrollY = scroll[1];
+    scrollY = scroll[1];
   element.scrollLeft = scrollX - nudgeX;
   element.scrollTop = scrollY - nudgeY;
 };
 
-var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth) {
+var getInlineAlignment = function getInlineAlignment(cellWidth, contentWidth, align) {
+  if (align === 'left') return 0;
+  if (align === 'right') return cellWidth - contentWidth;
+  return Math.round((cellWidth - contentWidth) / 2);
+};
+var measureFlexWidth = function measureFlexWidth(context, item) {
+  var width = item.width;
+  if (width != null) return width;
+  if (item.display === 'inline') {
+    var text = item.text;
+    if (text != null) {
+      var _context$measureText = context.measureText(text.toString()),
+        actualBoundingBoxLeft = _context$measureText.actualBoundingBoxLeft,
+        actualBoundingBoxRight = _context$measureText.actualBoundingBoxRight;
+      var w = actualBoundingBoxRight + actualBoundingBoxLeft;
+      return width != null ? width : w;
+    }
+  } else {
+    throw new Error('Image or JSX content must have dimension specified');
+  }
+  return 0;
+};
+var resolveCellFlexLayout = function resolveCellFlexLayout(context, cellContent, cellLeft, cellTop, cellWidth, cellHeight) {
+  var _cellContent$flexJust = cellContent.flexJustify,
+    flexJustify = _cellContent$flexJust === void 0 ? 'start' : _cellContent$flexJust,
+    _cellContent$flexAlig = cellContent.flexAlign,
+    flexAlign = _cellContent$flexAlig === void 0 ? 'center' : _cellContent$flexAlig,
+    _cellContent$flexGap = cellContent.flexGap,
+    flexGap = _cellContent$flexGap === void 0 ? 0 : _cellContent$flexGap,
+    items = cellContent.items;
+  var flexItems = items.filter(function (item) {
+    return !item.absolute;
+  });
+  var measuredWidths = cellContent.items.map(function (item) {
+    return measureFlexWidth(context, item);
+  });
+  var sizes = [];
+  var grows = [];
+  var shrinks = [];
+  var x = 0;
+  flexItems.forEach(function (item, i) {
+    var defaultGrow = item.display === 'inline' ? 1 : 0;
+    var defaultShrink = defaultGrow || (item.display === 'space' ? 1 : 0);
+    var _item$width = item.width,
+      width = _item$width === void 0 ? measuredWidths[i] : _item$width,
+      _item$flexGrow = item.flexGrow,
+      flexGrow = _item$flexGrow === void 0 ? defaultGrow : _item$flexGrow,
+      _item$flexShrink = item.flexShrink,
+      flexShrink = _item$flexShrink === void 0 ? defaultShrink : _item$flexShrink,
+      _item$marginLeft = item.marginLeft,
+      marginLeft = _item$marginLeft === void 0 ? 0 : _item$marginLeft,
+      _item$marginRight = item.marginRight,
+      marginRight = _item$marginRight === void 0 ? 0 : _item$marginRight;
+    sizes.push(width);
+    grows.push(flexGrow);
+    shrinks.push(flexShrink);
+    x += width + marginLeft + marginRight + flexGap;
+  });
+  var slackX = cellWidth - x + flexGap;
+  if (slackX > 0 && growRow(slackX, grows, sizes)) slackX = 0;
+  if (slackX < 0 && _shrinkRow(slackX, shrinks, sizes)) slackX = 0;
+  var _getAlignmentSpacing = getAlignmentSpacing(slackX, flexItems.length, flexJustify),
+    gapX = _getAlignmentSpacing[0],
+    leadX = _getAlignmentSpacing[1];
+  var combinedGapX = gapX + flexGap;
+  var maxHeight = flexItems.map(function (_ref) {
+    var height = _ref.height,
+      _ref$marginTop = _ref.marginTop,
+      marginTop = _ref$marginTop === void 0 ? 0 : _ref$marginTop,
+      _ref$marginBottom = _ref.marginBottom,
+      marginBottom = _ref$marginBottom === void 0 ? 0 : _ref$marginBottom;
+    return (height != null ? height : cellHeight) + marginTop + marginBottom;
+  }).reduce(function (a, b) {
+    return Math.max(a, b);
+  });
+  var slackY = Math.max(0, cellHeight - maxHeight);
+  var offsetY = getAlignmentAnchor(flexAlign) * slackY;
+  var leftCursor = leadX;
+  return flexItems.map(function (item, i) {
+    var fixedHeight = item.height,
+      _item$marginLeft2 = item.marginLeft,
+      marginLeft = _item$marginLeft2 === void 0 ? 0 : _item$marginLeft2,
+      _item$marginRight2 = item.marginRight,
+      marginRight = _item$marginRight2 === void 0 ? 0 : _item$marginRight2,
+      _item$marginTop = item.marginTop,
+      marginTop = _item$marginTop === void 0 ? 0 : _item$marginTop,
+      _item$marginBottom = item.marginBottom,
+      marginBottom = _item$marginBottom === void 0 ? 0 : _item$marginBottom,
+      _item$flexAlignSelf = item.flexAlignSelf,
+      flexAlignSelf = _item$flexAlignSelf === void 0 ? flexAlign : _item$flexAlignSelf;
+    var marginX = marginLeft + marginRight;
+    var marginY = marginTop + marginBottom;
+    var height = fixedHeight != null ? fixedHeight : maxHeight - marginY;
+    var slackSelfY = maxHeight - height - marginY;
+    var offsetSelfY = getAlignmentAnchor(flexAlignSelf) * slackSelfY;
+    var x = Math.round(cellLeft + marginLeft + leftCursor);
+    var y = Math.round(cellTop + marginTop + offsetY + offsetSelfY);
+    leftCursor += combinedGapX + marginX + sizes[i];
+    var boxW = sizes[i];
+    var boxH = height;
+    var box = [[x, y], [x + boxW, y + boxH]];
+    return {
+      box: box,
+      item: item
+    };
+  });
+};
+var resolveCellAbsoluteLayout = function resolveCellAbsoluteLayout(cellContent, cellLeft, cellTop, cellWidth, cellHeight) {
+  var items = cellContent.items;
+  var absoluteItems = items.filter(function (item) {
+    return item.absolute;
+  });
+  var resolvePosition = function resolvePosition(container, size, start, end, marginStart, marginEnd) {
+    if (marginStart === void 0) {
+      marginStart = 0;
+    }
+    if (marginEnd === void 0) {
+      marginEnd = 0;
+    }
+    if (start != null) return start + marginStart;
+    if (end != null) return container - end - marginEnd - size;
+    return 0;
+  };
+  var resolveSize = function resolveSize(container, span, start, end, marginStart, marginEnd) {
+    if (marginStart === void 0) {
+      marginStart = 0;
+    }
+    if (marginEnd === void 0) {
+      marginEnd = 0;
+    }
+    if (span != null) return span;
+    if (start != null && end != null) return container - start - end - marginStart - marginEnd;
+    return 0;
+  };
+  return absoluteItems.map(function (item) {
+    var left = item.left,
+      top = item.top,
+      right = item.right,
+      bottom = item.bottom,
+      width = item.width,
+      height = item.height,
+      marginLeft = item.marginLeft,
+      marginTop = item.marginTop,
+      marginRight = item.marginRight,
+      marginBottom = item.marginBottom;
+    var w = resolveSize(cellWidth, width, left, right, marginLeft, marginRight);
+    var h = resolveSize(cellHeight, height, top, bottom, marginTop, marginBottom);
+    var l = cellLeft + resolvePosition(cellWidth, w, left, right, marginLeft, marginRight);
+    var t = cellTop + resolvePosition(cellHeight, h, top, bottom, marginTop, marginBottom);
+    var box = [[l, t], [l + w, t + h]];
+    return {
+      box: box,
+      item: item
+    };
+  });
+};
+var growRow = function growRow(slack, grow, sizes) {
+  var n = grow.length;
+  var weight = 0;
+  for (var i = 0; i < n; ++i) if (grow[i] > 0) weight += grow[i];
+  if (weight > 0) {
+    for (var _i = 0; _i < n; ++_i) {
+      if (grow[_i] > 0) {
+        sizes[_i] += slack * grow[_i] / weight;
+      }
+    }
+    return true;
+  }
+  return false;
+};
+var _shrinkRow = function shrinkRow(slack, shrink, sizes) {
+  var n = shrink.length;
+  var weight = 0;
+  for (var i = 0; i < n; ++i) if (shrink[i]) weight += shrink[i] * sizes[i];
+  if (weight > 0) {
+    var negative = 0;
+    for (var _i2 = 0; _i2 < n; ++_i2) {
+      if (shrink[_i2] > 0 && sizes[_i2]) {
+        sizes[_i2] += slack * shrink[_i2] * sizes[_i2] / weight;
+        if (sizes[_i2] < 0) {
+          negative += sizes[_i2];
+          sizes[_i2] = 0;
+        }
+      }
+    }
+    if (negative) {
+      _shrinkRow(negative, shrink, sizes);
+    }
+    return true;
+  }
+  return false;
+};
+var getAlignmentAnchor = function getAlignmentAnchor(x) {
+  var isStart = x === 'start';
+  var isEnd = x === 'end';
+  var align = isStart ? 0 : isEnd ? 1 : 0.5;
+  return align;
+};
+var getAlignmentSpacing = function getAlignmentSpacing(slack, n, justify) {
+  var gap = 0;
+  var lead = 0;
+  var isJustify = justify === 'justify';
+  var isBetween = justify === 'between';
+  var isEvenly = justify === 'evenly';
+  if (slack > 0) {
+    if (isEvenly || isBetween || isJustify) {
+      if (n === 1) {
+        lead = slack / 2;
+      } else if (isEvenly) {
+        gap = Math.max(0, slack / (n + 1));
+        lead = gap;
+      } else if (isBetween) {
+        gap = Math.max(0, slack / n);
+        lead = gap / 2;
+      } else if (isJustify) {
+        gap = Math.max(0, slack / Math.max(1, n - 1));
+      }
+    } else {
+      lead = getAlignmentAnchor(justify) * slack;
+    }
+  }
+  return [gap, lead];
+};
+
+var wrapText = function wrapText(context, text, style, itemAlign, xCoord, yCoord, cellWidth, cellHeight, emit) {
+  var textAlign = style.textAlign,
+    lineHeight = style.lineHeight,
+    fontSize = style.fontSize,
+    marginBottom = style.marginBottom;
+  var align = itemAlign != null ? itemAlign : textAlign;
+  context.textAlign = align;
+  var x = xCoord + getInlineAlignment(cellWidth, 0, align);
+  var y = yCoord;
+  var s = text.toString();
+  var n = s.length;
+  var xCursor = 0;
+  var yCursor = 0;
+  var wordsPerLine = 0;
+  var startOfLine = 0;
+  var newline = function newline(endOfLine, ellipsis, endsInSpace) {
+    if (ellipsis === void 0) {
+      ellipsis = false;
+    }
+    if (endsInSpace === void 0) {
+      endsInSpace = false;
+    }
+    var line = s.slice(startOfLine, endOfLine - +endsInSpace);
+    emit(ellipsis ? line + '…' : line, x, y + yCursor);
+    startOfLine = endOfLine;
+    wordsPerLine = 0;
+    xCursor = 0;
+    yCursor += lineHeight;
+  };
+  var breaker = new LineBreak(s);
+  var lastPosition = 0;
+  var bk;
+  while (bk = breaker.nextBreak()) {
+    var _bk = bk,
+      position = _bk.position,
+      required = _bk.required;
+    var word = s.slice(lastPosition, position);
+    var _context$measureText = context.measureText(word),
+      width = _context$measureText.width;
+    var canNewLine = yCursor + lineHeight + marginBottom < cellHeight;
+    var hasMoreText = position < n;
+    var endsInSpace = word[word.length - 1] === ' ';
+    var ellipsisSpace = !canNewLine && hasMoreText ? (endsInSpace ? 0.5 : 1) * fontSize : 0;
+    var nextX = xCursor + width + ellipsisSpace;
+    if (wordsPerLine && nextX >= cellWidth) {
+      if (canNewLine) newline(lastPosition);else {
+        if (endsInSpace) {
+          var _context$measureText2 = context.measureText(' '),
+            _width = _context$measureText2.width;
+          xCursor -= _width;
+        }
+        newline(lastPosition, true, endsInSpace);
+        return;
+      }
+    }
+    xCursor += width;
+    wordsPerLine++;
+    if (required) newline(position);
+    lastPosition = position;
+  }
+  newline(n);
+};
+
+var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth, frozenColumns) {
   var context = useMemo(function () {
     return document.createElement('canvas').getContext('2d');
   }, []);
   var getAutoSizeWidth = useCallback(function (x) {
     if (!context) return 0;
-
+    var viewWidth = canvasWidth - cellLayout.columnToAbsolute(x < frozenColumns ? 0 : frozenColumns);
     var getWidth = function getWidth(cellContent, style) {
-      context.font = style.weight + ' ' + style.fontSize + 'px ' + style.fontFamily;
+      context.font = style.fontWeight + ' ' + 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()),
-            width = _context$measureText.width;
-
+          width = _context$measureText.width;
         return width + inlineMargin;
       } else if (typeof cellContent === 'object') {
-        var _maxWidth = 0;
-        var extraWidth = 0;
-
-        for (var _iterator = _createForOfIteratorHelperLoose(cellContent.items), _step; !(_step = _iterator()).done;) {
-          var obj = _step.value;
-          var _width = 0;
-
-          if (typeof obj.content === 'string' || typeof obj.content === 'number') {
-            var _context$measureText2 = context.measureText(obj.content.toString()),
-                w = _context$measureText2.width;
-
-            _width = obj.x + w + inlineMargin;
-          } else if (obj.width) {
-            _width = obj.width;
-          }
-
-          if (obj.horizontalAlign === 'right') {
-            extraWidth += style.textAlign === 'right' ? _width * 2 : _width;
-          } else {
-            _maxWidth = Math.max(_maxWidth, _width);
+        var totalWidth = inlineMargin;
+        var _cellContent$flexGap = cellContent.flexGap,
+          flexGap = _cellContent$flexGap === void 0 ? 0 : _cellContent$flexGap,
+          items = cellContent.items;
+        for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
+          var item = _step.value;
+          if (item.absolute) continue;
+          if (item.width != null) {
+            totalWidth += item.width;
+          } else if (item.display === 'inline' && item.text != null) {
+            var _context$measureText2 = context.measureText(item.text.toString()),
+              _width = _context$measureText2.width;
+            totalWidth += _width;
           }
+          totalWidth += flexGap;
         }
-
-        return _maxWidth + extraWidth;
+        totalWidth -= flexGap;
+        return totalWidth;
       }
-
       return 0;
     };
-
     var maxWidth = SIZES.minimumWidth;
-
     var headerStyle = _extends({}, DEFAULT_COLUMN_HEADER_STYLE, columnHeaderStyle(x));
-
     var headerContent = columnHeaders(x, headerStyle);
-
     if (headerContent) {
       maxWidth = Math.max(maxWidth, getWidth(headerContent, headerStyle));
     }
-
     for (var _iterator2 = _createForOfIteratorHelperLoose(rows), _step2; !(_step2 = _iterator2()).done;) {
       var y = _step2.value;
-
       var style = _extends({}, DEFAULT_CELL_STYLE, cellStyle(x, y));
-
       var cellContent = displayData(x, y, style);
-
       if (cellContent != null) {
         maxWidth = Math.max(maxWidth, getWidth(cellContent, style));
       }
     }
-
-    return Math.ceil(Math.min(canvasWidth, maxWidth));
-  }, [context, displayData, cellStyle, columnHeaders, columnHeaderStyle]);
+    return Math.ceil(Math.min(viewWidth, maxWidth));
+  }, [context, rows, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth, frozenColumns]);
   return getAutoSizeWidth;
 };
+var useAutoSizeRow = function useAutoSizeRow(columns, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight, frozenRows) {
+  var context = useMemo(function () {
+    return document.createElement('canvas').getContext('2d');
+  }, []);
+  var getAutoSizeHeight = useCallback(function (y) {
+    if (!context) return 0;
+    var viewHeight = canvasHeight - cellLayout.rowToAbsolute(y < frozenRows ? 0 : frozenRows);
+    var measureTextHeight = function measureTextHeight(text, style, columnWidth) {
+      var maxY = 0;
+      var measureY = function measureY(_t, _x, y) {
+        maxY = y + style.lineHeight;
+      };
+      wrapText(context, text, style, undefined, 0, 0, columnWidth, viewHeight, measureY);
+      return maxY;
+    };
+    var getHeight = function getHeight(cellContent, style, columnWidth) {
+      context.font = style.fontWeight + ' ' + style.fontSize + 'px ' + style.fontFamily;
+      var verticalMargin = style.marginTop + style.marginBottom;
+      if (typeof cellContent === 'string' || typeof cellContent === 'number') {
+        var height = measureTextHeight(cellContent.toString(), style, columnWidth);
+        return height + verticalMargin;
+      } else if (typeof cellContent === 'object') {
+        var _maxHeight = 0;
+        var flexLayout = resolveCellFlexLayout(context, cellContent, 0, 0, columnWidth, 0);
+        for (var _iterator3 = _createForOfIteratorHelperLoose(flexLayout), _step3; !(_step3 = _iterator3()).done;) {
+          var _step3$value = _step3.value,
+            box = _step3$value.box,
+            item = _step3$value.item;
+          if (item.height != null) {
+            _maxHeight = Math.max(_maxHeight, item.height);
+          } else if (item.display === 'inline' && item.text != null) {
+            var _box$ = box[0],
+              left = _box$[0],
+              _box$2 = box[1],
+              right = _box$2[0];
+            var _height = measureTextHeight(item.text.toString(), style, right - left);
+            _maxHeight = Math.max(_maxHeight, _height);
+          }
+        }
+        return _maxHeight + verticalMargin;
+      }
+      return 0;
+    };
+    var isHeader = y === -1;
+    var maxHeight = SIZES.minimumHeight;
+    for (var _iterator4 = _createForOfIteratorHelperLoose(columns), _step4; !(_step4 = _iterator4()).done;) {
+      var x = _step4.value;
+      var style = isHeader ? _extends({}, DEFAULT_COLUMN_HEADER_STYLE, columnHeaderStyle(x)) : _extends({}, DEFAULT_CELL_STYLE, cellStyle(x, y));
+      var cellContent = isHeader ? columnHeaders(x, style) : displayData(x, y, style);
+      if (cellContent != null) {
+        var columnWidth = cellWidth(x) - style.marginLeft - style.marginRight;
+        maxHeight = Math.max(maxHeight, getHeight(cellContent, style, columnWidth));
+      }
+    }
+    return Math.ceil(Math.min(viewHeight, maxHeight));
+  }, [context, columns, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight, frozenRows]);
+  return getAutoSizeHeight;
+};
 
 // A type of promise-like that resolves synchronously and supports only one observer
 
@@ -1965,9 +2152,8 @@ var EMPTY_TABLE = {
 };
 var useClipboardTable = function useClipboardTable() {
   var _useState = useState(),
-      peek = _useState[0],
-      setPeek = _useState[1];
-
+    peek = _useState[0],
+    setPeek = _useState[1];
   useLayoutEffect(function () {
     var softRefresh = function softRefresh() {
       return Promise.resolve(_catch(function () {
@@ -1979,13 +2165,11 @@ var useClipboardTable = function useClipboardTable() {
         });
       }, function () {}));
     };
-
     var hardRefresh = function hardRefresh() {
       try {
-        var _temp3 = _catch(function () {
+        var _temp2 = _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) {
@@ -1995,21 +2179,17 @@ var useClipboardTable = function useClipboardTable() {
                 setPeek(EMPTY_TABLE);
               }
             }();
-
             if (_temp && _temp.then) return _temp.then(function () {});
           });
         }, function () {});
-
-        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+        return Promise.resolve(_temp2 && _temp2.then ? _temp2.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);
@@ -2022,7 +2202,6 @@ var useClipboardTable = function useClipboardTable() {
   }, []);
   var canPaste = useCallback(function () {
     var _peek$rows;
-
     return !!(peek == null || (_peek$rows = peek.rows) !== null && _peek$rows !== void 0 && _peek$rows.length);
   }, [peek]);
   return {
@@ -2034,20 +2213,17 @@ var useClipboardTable = function useClipboardTable() {
 };
 var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly, addListener, onSelectionChange, onChange, onCopy, onPaste) {
   var _useClipboardTable = useClipboardTable(),
-      canPaste = _useClipboardTable.canPaste,
-      copyTable = _useClipboardTable.copyTable,
-      pasteTable = _useClipboardTable.pasteTable;
-
+    canPaste = _useClipboardTable.canPaste,
+    copyTable = _useClipboardTable.copyTable,
+    pasteTable = _useClipboardTable.pasteTable;
   var pasteIntoSelection = useCallback(function (selection, table) {
     try {
       var rows = table.rows,
-          payload = table.payload;
-
+        payload = table.payload;
       var _normalizeSelection = normalizeSelection(selection),
-          min = _normalizeSelection[0];
-
+        min = _normalizeSelection[0];
       var minX = min[0],
-          minY = min[1];
+        minY = min[1];
       var left = Math.max(0, minX);
       var top = Math.max(0, minY);
       var width = rows.reduce(function (a, b) {
@@ -2082,14 +2258,11 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
     if (cut === void 0) {
       cut = false;
     }
-
     try {
       var _payload$cut;
-
       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) {
@@ -2106,7 +2279,6 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
         });
         onChange === null || onChange === void 0 ? void 0 : onChange(changes);
       }
-
       return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
@@ -2121,12 +2293,10 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
       return Promise.reject(e);
     }
   }, [pasteIntoSelection]);
-
   var onClipboardCopy = function onClipboardCopy(cut) {
     if (isEmptySelection(selection)) return;
     return copySelection(selection, cut);
   };
-
   var onClipboardPaste = function onClipboardPaste(e) {
     try {
       e.preventDefault();
@@ -2138,7 +2308,6 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
       return Promise.reject(e);
     }
   };
-
   useLayoutEffect(function () {
     if (!addListener) return;
     window.document.addEventListener('paste', onClipboardPaste);
@@ -2159,7 +2328,6 @@ var useClipboardAPI = function useClipboardAPI(selection, editData, cellReadOnly
     onClipboardPaste: onClipboardPaste
   };
 };
-
 var copyClipboardTable = function copyClipboardTable(rows, payload) {
   try {
     var text = formatRowsAsTSV(rows);
@@ -2179,7 +2347,6 @@ var copyClipboardTable = function copyClipboardTable(rows, payload) {
     return Promise.reject(e);
   }
 };
-
 var pasteClipboardTable = function pasteClipboardTable() {
   try {
     return Promise.resolve(navigator.clipboard.read()).then(function (items) {
@@ -2191,10 +2358,9 @@ var pasteClipboardTable = function pasteClipboardTable() {
     return Promise.reject(e);
   }
 };
-
 var parseClipboardTable = function parseClipboardTable(item) {
   try {
-    var _temp7 = function _temp7() {
+    var _temp5 = function _temp5() {
       return rows ? {
         rows: rows,
         payload: payload
@@ -2202,53 +2368,44 @@ var parseClipboardTable = function parseClipboardTable(item) {
         rows: []
       };
     };
-
     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 '';
     };
-
     var rows, payload;
-
-    var _temp8 = function () {
+    var _temp4 = 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 () {
+        var _temp6 = 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 () {});
+        if (_temp6 && _temp6.then) return _temp6.then(function () {});
       }
     }();
-
-    return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8));
+    return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
   } catch (e) {
     return Promise.reject(e);
   }
 };
-
 var formatRowsAsTSV = function formatRowsAsTSV(rows) {
   return rows.map(function (row) {
     return row.join('\t');
   }).join('\n');
 };
-
 var formatRowsAsHTML = function formatRowsAsHTML(rows, payload) {
   var trs = rows.map(function (row) {
     var tds = row.map(formatTextAsHTML).map(function (cell) {
@@ -2259,120 +2416,90 @@ var formatRowsAsHTML = function formatRowsAsHTML(rows, payload) {
     return "<tr>" + row + "</tr>";
   }).join('\n');
   var table = "<table>" + trs + "</table>";
-
   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];
-
+    _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),
-        cellX = _findApproxMaxEditDat[0];
-
+      cellX = _findApproxMaxEditDat[0];
     minX = 0;
     maxX = cellX;
   }
-
   if (isMaybeColumnSelection(selection)) {
     var _findApproxMaxEditDat2 = findApproxMaxEditDataIndex(editData),
-        cellY = _findApproxMaxEditDat2[1];
-
+      cellY = _findApproxMaxEditDat2[1];
     minY = 0;
     maxY = cellY;
   }
-
   var rows = [];
-
   for (var y = minY; y <= maxY; y++) {
     var row = [];
-
     for (var x = minX; x <= maxX; x++) {
       var value = editData(x, y);
-
       if (value !== null && value !== undefined) {
         row.push(value != null ? value : '');
       }
     }
-
     rows.push(row);
   }
-
   return rows;
 };
-
-var findTag = function findTag(element, tagName) {
+var _findTag = function findTag(element, tagName) {
   for (var _iterator = _createForOfIteratorHelperLoose(element.children), _step; !(_step = _iterator()).done;) {
     var child = _step.value;
-
     if (child.nodeName === tagName) {
       return child;
     }
-
-    var maybeTag = findTag(child, tagName);
-
+    var maybeTag = _findTag(child, tagName);
     if (maybeTag) {
       return maybeTag;
     }
   }
 };
-
 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 sheetNode = _findTag(div, 'SHEETHAPPENS');
   if (sheetNode) {
     var json = sheetNode.getAttribute('payload');
-
     try {
       payload = JSON.parse(json);
     } catch (e) {}
   }
-
-  var tableNode = findTag(div, 'TABLE');
-
+  var tableNode = _findTag(div, 'TABLE');
   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;
-
           if (tr.nodeName === 'TR') {
             var row = [];
-
             for (var _iterator4 = _createForOfIteratorHelperLoose(tr.children), _step4; !(_step4 = _iterator4()).done;) {
               var td = _step4.value;
-
               if (td.nodeName === 'TD') {
                 var str = '';
-
                 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 {
@@ -2381,26 +2508,22 @@ var parsePastedHtml = function parsePastedHtml(html) {
                 } else {
                   str = td.textContent.trim();
                 }
-
                 str = str.replaceAll('\n', '');
                 str = str.replaceAll(/\s\s+/g, ' ');
                 row.push(str);
               }
             }
-
             rows.push(row);
           }
         }
       }
     }
   }
-
   return {
     rows: rows,
     payload: payload
   };
 };
-
 var parsePastedText = function parsePastedText(text) {
   return text.split(/\r?\n/).map(function (line) {
     return line.split('\t');
@@ -2408,204 +2531,167 @@ var parsePastedText = function parsePastedText(text) {
 };
 
 var INITIAL_SIZE = 256;
-var makeCellLayout = function makeCellLayout(freeze, indent, offset, columns, rows) {
+var makeCellLayout = function makeCellLayout(freeze, offset, columns, rows) {
   var freezeX = freeze[0],
-      freezeY = freeze[1];
-  var indentX = indent[0],
-      indentY = indent[1];
+    freezeY = freeze[1];
   var offsetX = offset[0],
-      offsetY = offset[1];
-
+    offsetY = offset[1];
   var getIndentX = function getIndentX() {
-    return indentX;
+    return columns.getStart(0);
   };
-
   var getIndentY = function getIndentY() {
-    return indentY;
+    return rows.getStart(0);
   };
-
   var getBaseOriginFor = function getBaseOriginFor(index, freeze, offset) {
     return index < freeze ? 0 : offset + freeze;
   };
-
   var columnToPixel = function columnToPixel(column, anchor) {
     if (anchor === void 0) {
       anchor = 0;
     }
-
     var base = getBaseOriginFor(column, freezeX, offsetX);
     var relative = columns.getStart(column) - columns.getStart(base);
     var adjust = column < freezeX ? 0 : columns.getStart(freezeX) - columns.getStart(0);
-    var size = column < 0 ? indentX : columns.getSize(column);
-    return column < 0 ? 0 : indentX + relative + adjust + anchor * size;
+    var size = columns.getSize(column);
+    return getIndentX() + relative + adjust + anchor * size;
   };
-
   var rowToPixel = function rowToPixel(row, anchor) {
     if (anchor === void 0) {
       anchor = 0;
     }
-
     var base = getBaseOriginFor(row, freezeY, offsetY);
     var relative = rows.getStart(row) - rows.getStart(base);
     var adjust = row < freezeY ? 0 : rows.getStart(freezeY) - rows.getStart(0);
-    var size = row < 0 ? indentY : rows.getSize(row);
-    return row < 0 ? 0 : indentY + relative + adjust + anchor * size;
+    var size = rows.getSize(row);
+    return getIndentY() + relative + adjust + anchor * size;
   };
-
   var cellToPixel = function cellToPixel(cell, anchor) {
     if (anchor === void 0) {
       anchor = ORIGIN;
     }
-
     var cellX = cell[0],
-        cellY = cell[1];
+      cellY = cell[1];
     var _anchor = anchor,
-        anchorX = _anchor[0],
-        anchorY = _anchor[1];
+      anchorX = _anchor[0],
+      anchorY = _anchor[1];
     return [columnToPixel(cellX, anchorX), rowToPixel(cellY, anchorY)];
   };
-
   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;
   };
-
   var rowToAbsolute = function rowToAbsolute(row, anchorY) {
     if (anchorY === void 0) {
       anchorY = 0;
     }
-
     var relative = rows.getStart(row);
     var size = row < 0 ? 0 : rows.getSize(row);
     return relative + anchorY * size;
   };
-
   var cellToAbsolute = function cellToAbsolute(cell, anchor) {
     if (anchor === void 0) {
       anchor = ORIGIN;
     }
-
     var cellX = cell[0],
-        cellY = cell[1];
+      cellY = cell[1];
     var _anchor2 = anchor,
-        anchorX = _anchor2[0],
-        anchorY = _anchor2[1];
+      anchorX = _anchor2[0],
+      anchorY = _anchor2[1];
     return [columnToAbsolute(cellX, anchorX), rowToAbsolute(cellY, anchorY)];
   };
-
-  var pixelToIndex = function pixelToIndex(pixel, anchor, indent, freeze, offset, layout) {
-    var relative = pixel - indent;
-    if (relative < 0) return -1;
+  var pixelToIndex = function pixelToIndex(pixel, anchor, freeze, offset, layout) {
     var getStart = layout.getStart,
-        lookupIndex = layout.lookupIndex;
+      lookupIndex = layout.lookupIndex;
+    var indent = getStart(0);
+    if (pixel < indent) return -1;
     var frozen = getStart(freeze);
-
-    if (relative < frozen) {
-      return lookupIndex(relative, anchor);
+    if (pixel < frozen) {
+      return lookupIndex(pixel, anchor);
     } else {
+      var relative = pixel - indent;
       var base = getStart(offset + freeze);
       var adjust = getStart(freeze) - getStart(0);
       return lookupIndex(base + relative - adjust, anchor);
     }
   };
-
   var pixelToColumn = function pixelToColumn(pixelX, anchorX) {
     if (anchorX === void 0) {
       anchorX = 0;
     }
-
-    return pixelToIndex(pixelX, anchorX, indentX, freezeX, offsetX, columns);
+    return pixelToIndex(pixelX, anchorX, freezeX, offsetX, columns);
   };
-
   var pixelToRow = function pixelToRow(pixelY, anchorY) {
     if (anchorY === void 0) {
       anchorY = 0;
     }
-
-    return pixelToIndex(pixelY, anchorY, indentY, freezeY, offsetY, rows);
+    return pixelToIndex(pixelY, anchorY, freezeY, offsetY, rows);
   };
-
   var pixelToCell = function pixelToCell(pixel, anchor) {
     if (anchor === void 0) {
       anchor = ORIGIN;
     }
-
     var pixelX = pixel[0],
-        pixelY = pixel[1];
+      pixelY = pixel[1];
     var _anchor3 = anchor,
-        anchorX = _anchor3[0],
-        anchorY = _anchor3[1];
+      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;
     }
-
     return absoluteToIndex(pixelX, anchorX, columns);
   };
-
   var absoluteToRow = function absoluteToRow(pixelY, anchorY) {
     if (anchorY === void 0) {
       anchorY = 0;
     }
-
     return absoluteToIndex(pixelY, anchorY, rows);
   };
-
   var absoluteToCell = function absoluteToCell(pixel, anchor) {
     if (anchor === void 0) {
       anchor = ORIGIN;
     }
-
     var pixelX = pixel[0],
-        pixelY = pixel[1];
+      pixelY = pixel[1];
     var _anchor4 = anchor,
-        anchorX = _anchor4[0],
-        anchorY = _anchor4[1];
+      anchorX = _anchor4[0],
+      anchorY = _anchor4[1];
     return [absoluteToColumn(pixelX, anchorX), absoluteToRow(pixelY, anchorY)];
   };
-
-  var getVisibleIndices = function getVisibleIndices(view, indent, freeze, offset, layout) {
+  var getVisibleIndices = function getVisibleIndices(view, freeze, offset, layout) {
     var indices = [].concat(seq(freeze));
     var getStart = layout.getStart,
-        getEnd = layout.getEnd;
+      getEnd = layout.getEnd;
     var frozen = getEnd(freeze - 1);
     var notFrozen = getStart(offset + freeze);
-    var relative = view - indent - frozen;
-
+    var relative = view - frozen;
     for (var i = offset + freeze; getStart(i) - notFrozen <= relative; ++i) {
       indices.push(i);
     }
-
     return indices;
   };
-
   var getVisibleCells = function getVisibleCells(view) {
     var viewX = view[0],
-        viewY = view[1];
+      viewY = view[1];
     return {
-      columns: getVisibleIndices(viewX, indentX, freezeX, offsetX, columns),
-      rows: getVisibleIndices(viewY, indentY, freezeY, offsetY, rows)
+      columns: getVisibleIndices(viewX, freezeX, offsetX, columns),
+      rows: getVisibleIndices(viewY, freezeY, offsetY, rows)
     };
   };
-
   var getVersion = function getVersion() {
     return columns.getVersion() + rows.getVersion();
   };
-
   return {
     columnToPixel: columnToPixel,
     rowToPixel: rowToPixel,
@@ -2629,76 +2715,58 @@ var makeLayoutCache = function makeLayoutCache(sizer) {
   var offsets = makeIntMap(INITIAL_SIZE);
   var sizes = makeIntMap(INITIAL_SIZE);
   var version = 0;
-  offsets.set(0, 0);
-
+  offsets.set(0, sizer(-1));
   var getSize = function getSize(i) {
-    if (i < 0) return 0;
+    if (i < 0) return sizer(i);
     if (sizes.has(i)) return sizes.get(i);
     var size = sizer(i) || 0;
     sizes.set(i, size);
     return size;
   };
-
   var getOffset = function getOffset(i) {
     if (i < 0) return 0;
     if (offsets.has(i)) return offsets.get(i);
-    var j = offsets.tail() || 0;
-
+    var j = offsets.tail() || -1;
     while (j < i) {
       var size = getSize(j);
       var offset = (offsets.get(j) || 0) + size;
       offsets.set(++j, offset);
     }
-
     return offsets.get(i);
   };
-
   var getStart = function getStart(i) {
     return getOffset(i);
   };
-
   var getEnd = function getEnd(i) {
     return getOffset(i + 1);
   };
-
   var lookupIndex = function lookupIndex(x, anchor) {
     if (anchor === void 0) {
       anchor = 0;
     }
-
     var last = offsets.tail() || 0;
-
-    while (getOffset(last) < x && getSize(last)) {
-      last += 64;
-    }
-
+    while (getOffset(last) < x && getSize(last)) last += 64;
     var start = 0;
     var end = last;
-
     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;
     }
-
     return start;
   };
-
   var clearAfter = function clearAfter(index) {
     index = Math.max(0, index);
     offsets.truncate(index);
     sizes.truncate(index);
     version++;
   };
-
   var setSizer = function setSizer(s) {
     sizer = s;
   };
-
   var getVersion = function getVersion() {
     return version;
   };
-
   return {
     getSize: getSize,
     getStart: getStart,
@@ -2709,17 +2777,14 @@ var makeLayoutCache = function makeLayoutCache(sizer) {
     clearAfter: clearAfter
   };
 };
-
 var makeIntMap = function makeIntMap(initialSize) {
   if (initialSize === void 0) {
     initialSize = 128;
   }
-
   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);
@@ -2728,56 +2793,41 @@ var makeIntMap = function makeIntMap(initialSize) {
     used = newUsed;
     values = newValues;
   };
-
   allocate(initialSize);
-
   var copy = function copy(from, to) {
     var n = Math.min(from.length, to.length);
-
     for (var i = 0; i < n; ++i) {
       to[i] = from[i];
     }
   };
-
   var ensure = function ensure(size) {
     var l = values.length;
     var grow = Math.round(l * GROW);
     if (l < size) allocate(Math.max(grow, size));
   };
-
   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;
-      }
+    if (l > shrink) allocate(size);else for (var i = size; i < l; ++i) used[i] = 0;
     last = Math.min(last, size);
-
-    while (last > 0 && !used[last]) {
-      last--;
-    }
+    while (last > 0 && !used[last]) last--;
   };
-
   var getTail = function getTail() {
     return used[last] ? last : null;
   };
-
   var setValue = function setValue(i, value) {
     ensure(i + 1);
     values[i] = value;
     used[i] = 1;
     last = Math.max(last, i);
   };
-
   var getValue = function getValue(i) {
     return used[i] ? values[i] : null;
   };
-
   var hasValue = function hasValue(i) {
     return !!used[i];
   };
-
   return {
     truncate: truncate,
     set: setValue,
@@ -2787,191 +2837,129 @@ var makeIntMap = function makeIntMap(initialSize) {
   };
 };
 
-var resolveSheetStyle = function resolveSheetStyle(sheetStyle) {
-  var _sheetStyle$shadowBlu, _sheetStyle$shadowOpa, _sheetStyle$shadowCol;
-
-  return {
-    freezeColumns: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeColumns) || 0,
-    freezeRows: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.freezeRows) || 0,
-    hideColumnHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideColumnHeaders) || false,
-    hideRowHeaders: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideRowHeaders) || false,
-    hideGridlines: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideGridlines) || false,
-    hideScrollBars: (sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.hideScrollBars) || false,
-    columnHeaderHeight: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideColumnHeaders ? 1 : SIZES.headerHeight,
-    rowHeaderWidth: sheetStyle !== null && sheetStyle !== void 0 && sheetStyle.hideRowHeaders ? 1 : SIZES.headerWidth,
-    shadowBlur: (_sheetStyle$shadowBlu = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowBlur) != null ? _sheetStyle$shadowBlu : SIZES.shadowBlur,
-    shadowOpacity: (_sheetStyle$shadowOpa = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowOpacity) != null ? _sheetStyle$shadowOpa : SIZES.shadowOpacity,
-    shadowColor: (_sheetStyle$shadowCol = sheetStyle === null || sheetStyle === void 0 ? void 0 : sheetStyle.shadowColor) != null ? _sheetStyle$shadowCol : COLORS.shadowColor
-  };
-};
-var 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 renderSheet = function renderSheet(context, imageRenderer, 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;
+    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,
-      shadowBlur = sheetStyle.shadowBlur,
-      shadowColor = sheetStyle.shadowColor,
-      shadowOpacity = sheetStyle.shadowOpacity;
+    hideRowHeaders = sheetStyle.hideRowHeaders,
+    hideColumnHeaders = sheetStyle.hideColumnHeaders,
+    freezeColumns = sheetStyle.freezeColumns,
+    freezeRows = sheetStyle.freezeRows,
+    shadowBlur = sheetStyle.shadowBlur,
+    shadowColor = sheetStyle.shadowColor,
+    shadowOpacity = sheetStyle.shadowOpacity;
   var columns = visibleCells.columns,
-      rows = visibleCells.rows;
+    rows = visibleCells.rows;
   var columnToPixel = cellLayout.columnToPixel,
-      rowToPixel = cellLayout.rowToPixel,
-      columnToAbsolute = cellLayout.columnToAbsolute,
-      rowToAbsolute = cellLayout.rowToAbsolute;
-  var clickables = [];
+    rowToPixel = cellLayout.rowToPixel,
+    columnToAbsolute = cellLayout.columnToAbsolute,
+    rowToAbsolute = cellLayout.rowToAbsolute;
+  var allClickables = [];
   var freeze = [freezeColumns, freezeRows];
-  var indent = [rowHeaderWidth, columnHeaderHeight];
-  var pixelRatio = resizeCanvas(canvas);
+  var indentX = columnToAbsolute(0);
+  var indentY = rowToAbsolute(0);
+  resizeCanvas(canvas);
   context.clearRect(0, 0, width, height);
   context.fillStyle = 'white';
   context.fillRect(0, 0, width, height);
   context.shadowColor = '#00000080';
-
   for (var _iterator = _createForOfIteratorHelperLoose(rows), _step; !(_step = _iterator()).done;) {
     var y = _step.value;
-
     for (var _iterator10 = _createForOfIteratorHelperLoose(columns), _step10; !(_step10 = _iterator10()).done;) {
       var x = _step10.value;
-
       var _left7 = columnToPixel(x);
-
       var _right7 = columnToPixel(x, 1);
-
       var _top7 = rowToPixel(y);
-
       var _bottom7 = rowToPixel(y, 1);
-
       var _cellStyle = cellStyle(x, y),
-          fillColor = _cellStyle.fillColor;
-
+        fillColor = _cellStyle.fillColor;
       if (fillColor) {
         context.fillStyle = fillColor;
         context.fillRect(_left7, _top7, _right7 - _left7, _bottom7 - _top7);
       }
     }
   }
-
   var selectionActive = !isEmptySelection(selection);
   var rowSelectionActive = isRowSelection(selection);
   var columnSelectionActive = isColumnSelection(selection);
-
-  var _resolveFrozenSelecti = resolveFrozenSelection(selection, cellLayout, freeze, indent, dataOffset),
-      selected = _resolveFrozenSelecti[0],
-      hideKnob = _resolveFrozenSelecti[1];
-
+  var _resolveFrozenSelecti = resolveFrozenSelection(selection, cellLayout, freeze, dataOffset),
+    selected = _resolveFrozenSelecti[0],
+    hideKnob = _resolveFrozenSelecti[1];
   if (selectionActive) {
     var _selected$ = selected[0],
-        left = _selected$[0],
-        top = _selected$[1],
-        _selected$2 = selected[1],
-        right = _selected$2[0],
-        bottom = _selected$2[1];
+      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);
   }
-
   if (!hideRowHeaders) {
     context.fillStyle = COLORS.headerBackground;
-    context.fillRect(0, 0, rowHeaderWidth, context.canvas.height);
-
+    context.fillRect(0, 0, indentX, context.canvas.height);
     if (selectionActive && !columnSelectionActive) {
       var _selected$3 = selected[0],
-          _top = _selected$3[1],
-          _selected$4 = selected[1],
-          _bottom = _selected$4[1];
+        _top = _selected$3[1],
+        _selected$4 = selected[1],
+        _bottom = _selected$4[1];
       context.fillStyle = COLORS.headerActive;
-      context.fillRect(0, _top, rowHeaderWidth, _bottom - _top);
+      context.fillRect(0, _top, indentX, _bottom - _top);
     }
   }
-
   if (!hideColumnHeaders) {
     context.fillStyle = COLORS.headerBackground;
-    context.fillRect(0, 0, context.canvas.width, columnHeaderHeight);
-
+    context.fillRect(0, 0, context.canvas.width, indentY);
     if (selectionActive && !rowSelectionActive) {
       var _selected$5 = selected[0],
-          _left = _selected$5[0],
-          _selected$6 = selected[1],
-          _right = _selected$6[0];
+        _left = _selected$5[0],
+        _selected$6 = selected[1],
+        _right = _selected$6[0];
       context.fillStyle = COLORS.headerActive;
-      context.fillRect(_left, 0, _right - _left, columnHeaderHeight);
+      context.fillRect(_left, 0, _right - _left, indentY);
     }
   }
-
   context.strokeStyle = COLORS.gridLine;
   context.lineWidth = 1;
-  var gridRight = hideGridlines ? rowHeaderWidth : context.canvas.width;
-  var gridBottom = hideGridlines ? columnHeaderHeight : context.canvas.height;
-
+  var gridRight = hideGridlines ? indentX : context.canvas.width;
+  var gridBottom = hideGridlines ? indentY : context.canvas.height;
   var drawGridLineX = function drawGridLineX(x, height) {
     context.beginPath();
     context.moveTo(x - 0.5, 0);
     context.lineTo(x - 0.5, height);
     context.stroke();
   };
-
   var drawGridLineY = function drawGridLineY(y, width) {
     context.beginPath();
     context.moveTo(0, y - 0.5);
     context.lineTo(width, y - 0.5);
     context.stroke();
   };
-
-  drawGridLineX(rowHeaderWidth, context.canvas.height);
-  drawGridLineY(columnHeaderHeight, context.canvas.width);
-
+  drawGridLineX(indentX, context.canvas.height);
+  drawGridLineY(indentY, context.canvas.width);
   for (var _iterator2 = _createForOfIteratorHelperLoose(columns), _step2; !(_step2 = _iterator2()).done;) {
     var _column2 = _step2.value;
-
     var _right8 = columnToPixel(_column2, 1);
-
     drawGridLineX(_right8, gridBottom);
   }
-
   for (var _iterator3 = _createForOfIteratorHelperLoose(rows), _step3; !(_step3 = _iterator3()).done;) {
     var _row2 = _step3.value;
-
     var _bottom8 = rowToPixel(_row2, 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];
-
+    _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);
@@ -2981,542 +2969,469 @@ var renderSheet = function renderSheet(context, cellLayout, visibleCells, sheetS
       var isSelfSelected = rowSelectionActive && isActive;
       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, resolvedStyle, 0, _top2, rowHeaderWidth, _bottom2 - _top2, pixelRatio));
+      var clickables = renderCell(context, imageRenderer, content, resolvedStyle, 0, _top2, indentX, _bottom2 - _top2);
+      if (clickables) allClickables.push.apply(allClickables, clickables);
     }
   }
-
   if (!hideColumnHeaders) {
     context.textBaseline = 'middle';
-    context.textAlign = 'center';
-
     for (var _iterator5 = _createForOfIteratorHelperLoose(columns), _step5; !(_step5 = _iterator5()).done;) {
       var _columnHeaders;
-
       var column = _step5.value;
-
       var _isActive = isInRange(column, minX, maxX);
-
       var _groupKey = columnGroupKeys(column);
-
       var isInColumnGroup = _groupKey != null && (selectedColumnGroups === null || selectedColumnGroups === void 0 ? void 0 : selectedColumnGroups.has(_groupKey));
       var isSelected = columnSelectionActive && !rowSelectionActive && (_isActive || isInColumnGroup);
       var selectedStyle = isSelected ? HEADER_SELECTED_STYLE : NO_STYLE;
       var activeStyle = _isActive ? HEADER_ACTIVE_STYLE : NO_STYLE;
-
       var _style = _extends({}, DEFAULT_COLUMN_HEADER_STYLE, columnHeaderStyle(column), activeStyle, selectedStyle);
-
       var _left2 = columnToPixel(column);
-
       var _right2 = columnToPixel(column, 1);
-
       var _content = (_columnHeaders = columnHeaders(column, _style)) != null ? _columnHeaders : excelHeaderString(column + 1);
-
-      clickables.push.apply(clickables, renderCell(context, _content, _style, _left2, 0, _right2 - _left2, columnHeaderHeight, pixelRatio));
+      var _clickables = renderCell(context, imageRenderer, _content, _style, _left2, 0, _right2 - _left2, indentY);
+      if (_clickables) allClickables.push.apply(allClickables, _clickables);
     }
   }
-
   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],
-        _selected$8 = selected[1],
-        _right3 = _selected$8[0],
-        _bottom3 = _selected$8[1];
+      _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);
     context.globalAlpha = 1;
   }
-
   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 _resolveFrozenSelecti2 = resolveFrozenSelection(_selection, cellLayout, freeze, 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];
+      _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];
-
+      _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];
+      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];
+      shiftY = dragOffset[1];
     var dragColumns = dragIndices[0],
-        dragRows = dragIndices[1];
+      dragRows = dragIndices[1];
     context.fillStyle = COLORS.dragGhost;
-
     if (dragColumns) {
       for (var _iterator7 = _createForOfIteratorHelperLoose(dragColumns), _step7; !(_step7 = _iterator7()).done;) {
         var _column = _step7.value;
-
         var _left5 = columnToPixel(_column);
-
         var _right5 = columnToPixel(_column, 1);
-
         context.fillRect(_left5 + shiftX, 0, _right5 - _left5, height);
       }
     }
-
     if (dragRows) {
       for (var _iterator8 = _createForOfIteratorHelperLoose(dragRows), _step8; !(_step8 = _iterator8()).done;) {
         var _row = _step8.value;
-
         var _top5 = rowToPixel(_row);
-
         var _bottom5 = rowToPixel(_row, 1);
-
         context.fillRect(0, _top5 + shiftY, width, _bottom5 - _top5);
       }
     }
   }
-
   if (dropTarget) {
     var _resolveSelection = resolveSelection(dropTarget, cellLayout),
-        _resolveSelection$ = _resolveSelection[0],
-        _left6 = _resolveSelection$[0],
-        _top6 = _resolveSelection$[1],
-        _resolveSelection$2 = _resolveSelection[1],
-        _right6 = _resolveSelection$2[0],
-        _bottom6 = _resolveSelection$2[1];
-
+      _resolveSelection$ = _resolveSelection[0],
+      _left6 = _resolveSelection$[0],
+      _top6 = _resolveSelection$[1],
+      _resolveSelection$2 = _resolveSelection[1],
+      _right6 = _resolveSelection$2[0],
+      _bottom6 = _resolveSelection$2[1];
     context.strokeStyle = COLORS.dropTarget;
     context.lineWidth = 4;
-
     if (isColumnSelection(dropTarget)) {
       _right6 = _left6;
     }
-
     if (isRowSelection(dropTarget)) {
       _bottom6 = _top6;
     }
-
     context.strokeRect(_left6 - 1, _top6 - 1, _right6 - _left6, _bottom6 - _top6);
   }
-
   var scrollX = dataOffset[0],
-      scrollY = dataOffset[1];
+    scrollY = dataOffset[1];
   var hasRowShadow = freezeRows > 0 && scrollY > 0;
   var hasColumnShadow = freezeColumns > 0 && scrollX > 0;
-
   if (hasRowShadow || hasColumnShadow) {
     if (hasRowShadow) {
-      var h = columnHeaderHeight + rowToAbsolute(freezeRows);
+      var h = rowToAbsolute(freezeRows);
       var gradient = context.createLinearGradient(0, h, 0, h + shadowBlur);
       halfShadowGradient(gradient, shadowColor, shadowOpacity);
       context.fillStyle = gradient;
       context.fillRect(0, h, width, shadowBlur);
     }
-
     if (hasColumnShadow) {
-      var w = rowHeaderWidth + columnToAbsolute(freezeColumns);
-
+      var w = columnToAbsolute(freezeColumns);
       var _gradient = context.createLinearGradient(w, 0, w + shadowBlur, 0);
-
       halfShadowGradient(_gradient, shadowColor, shadowOpacity);
       context.fillStyle = _gradient;
       context.fillRect(w, 0, shadowBlur, height);
     }
   }
-
   context.textBaseline = 'middle';
-
   for (var _iterator9 = _createForOfIteratorHelperLoose(rows), _step9; !(_step9 = _iterator9()).done;) {
     var _y = _step9.value;
-
     for (var _iterator11 = _createForOfIteratorHelperLoose(columns), _step11; !(_step11 = _iterator11()).done;) {
       var _x = _step11.value;
-
       var _left9 = columnToPixel(_x);
-
       var _right10 = columnToPixel(_x, 1);
-
       var _top9 = rowToPixel(_y);
-
       var _bottom10 = rowToPixel(_y, 1);
-
       var _style2 = _extends({}, DEFAULT_CELL_STYLE, cellStyle(_x, _y));
-
       var cellContent = displayData(_x, _y, _style2);
-
       if (cellContent !== null && cellContent !== undefined) {
-        clickables.push.apply(clickables, renderCell(context, cellContent, _style2, _left9, _top9, _right10 - _left9, _bottom10 - _top9, pixelRatio));
+        var _clickables2 = renderCell(context, imageRenderer, cellContent, _style2, _left9, _top9, _right10 - _left9, _bottom10 - _top9);
+        if (_clickables2) allClickables.push.apply(allClickables, _clickables2);
       }
     }
   }
-
-  return clickables;
+  return allClickables;
 };
-var renderCell = function renderCell(context, cellContent, style, xCoord, yCoord, cellWidth, cellHeight, pixelRatio) {
-  var clickables = [];
-
+var renderCell = function renderCell(context, imageRenderer, cellContent, style, xCoord, yCoord, cellWidth, cellHeight) {
   if (cellContent === null) {
-    return clickables;
+    return null;
   }
-
+  var fillText = context.fillText.bind(context);
+  var fontString = style.fontWeight + ' ' + style.fontSize + 'px ' + style.fontFamily;
+  context.font = fontString;
   context.fillStyle = style.color;
-  context.font = style.weight + ' ' + style.fontSize + 'px ' + style.fontFamily;
-  context.textAlign = style.textAlign;
-  var yy = Math.round((yCoord + cellHeight * 0.5) * pixelRatio) / pixelRatio;
-  context.save();
-  context.beginPath();
-  context.rect(xCoord, yCoord, cellWidth, cellHeight);
-  context.clip();
-
+  var marginTop = style.marginTop,
+    marginBottom = style.marginBottom,
+    marginLeft = style.marginLeft,
+    marginRight = style.marginRight,
+    lineHeight = style.lineHeight;
+  var innerX = Math.round(xCoord + marginLeft);
+  var innerY = Math.round(yCoord + marginTop);
+  var innerWidth = Math.round(cellWidth - marginRight - marginLeft);
+  var innerHeight = Math.round(cellHeight - marginTop - marginBottom);
+  var middleY = roundDpi(yCoord + marginTop + lineHeight / 2);
   if (style.backgroundColor !== '') {
     context.fillStyle = style.backgroundColor;
     context.fillRect(xCoord, yCoord, cellWidth, cellHeight);
     context.fillStyle = style.color;
   }
-
   if (typeof cellContent === 'string' || typeof cellContent === 'number') {
-    var xx = applyAlignment(xCoord, cellWidth, style, 0);
-    var text = '' + cellContent;
-    context.fillText(text, xx, yy);
+    clipToBox(context, xCoord, yCoord, cellWidth, cellHeight, function () {
+      wrapText(context, cellContent, style, undefined, innerX, middleY, innerWidth, innerHeight, fillText);
+    });
+    return null;
   } else if (typeof cellContent === 'object') {
-    for (var _iterator12 = _createForOfIteratorHelperLoose(cellContent.items), _step12; !(_step12 = _iterator12()).done;) {
-      var obj = _step12.value;
-      var x = 0;
-      var y = 0;
-      var w = 0;
-      var h = 0;
-
-      if (obj.content instanceof HTMLImageElement) {
-        w = obj.width || cellWidth;
-        h = obj.height || cellHeight;
-        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);
-      } else if (typeof obj.content === 'string' || typeof obj.content === 'number') {
-        if (obj.horizontalAlign) {
-          context.textAlign = obj.horizontalAlign;
+    var renderedFlex = resolveCellFlexLayout(context, cellContent, innerX, innerY, innerWidth, innerHeight);
+    var renderedAbsolute = resolveCellAbsoluteLayout(cellContent, innerX, innerY, innerWidth, innerHeight);
+    var rendered = [].concat(renderedFlex, renderedAbsolute);
+    clipToBox(context, xCoord, yCoord, cellWidth, cellHeight, function () {
+      var _loop = function _loop() {
+        var _step12$value = _step12.value,
+          i = _step12$value[0],
+          render = _step12$value[1];
+        var box = render.box,
+          item = render.item;
+        var _box$ = box[0],
+          left = _box$[0],
+          top = _box$[1],
+          _box$2 = box[1],
+          right = _box$2[0],
+          bottom = _box$2[1];
+        var width = right - left;
+        var height = bottom - top;
+        if (cellContent.inspect) {
+          context.lineWidth = 1;
+          context.strokeStyle = '#ff00ff';
+          context.strokeRect(left + 0.5, top + 0.5, width - 0.5, height - 0.5);
         }
-
-        var _finalX = applyAlignment(xCoord, cellWidth, style, 0, obj.horizontalAlign);
-
-        var _text = '' + obj.content;
-
-        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 clipLeft = i > 0 ? left : xCoord;
+        var clipRight = i < rendered.length ? right : yCoord + cellWidth;
+        var clipWidth = clipRight - clipLeft;
+        clipToBox(context, clipLeft, yCoord, clipWidth, cellHeight, function () {
+          if (item.display === 'inline') {
+            var text = item.text;
+            if (text != null) {
+              wrapText(context, text, style, item.textAlign, left, roundDpi(top + lineHeight / 2), width, height, fillText);
+            }
+          }
+          if (item.display === 'image' || item.display === 'icon') {
+            imageRenderer(context, item, style, box);
+          }
         });
+      };
+      for (var _iterator12 = _createForOfIteratorHelperLoose(rendered.entries()), _step12; !(_step12 = _iterator12()).done;) {
+        _loop();
       }
-    }
+    });
+    return rendered.filter(function (_ref) {
+      var item = _ref.item;
+      return item === null || item === void 0 ? void 0 : item.onClick;
+    });
   }
-
+  return null;
+};
+var clipToBox = function clipToBox(context, xCoord, yCoord, cellWidth, cellHeight, callback) {
+  context.save();
+  context.beginPath();
+  context.rect(xCoord, yCoord, cellWidth, cellHeight);
+  context.clip();
+  callback();
   context.restore();
-  return clickables;
 };
-
 var resolveSelection = function resolveSelection(selection, cellLayout) {
   var cellToPixel = cellLayout.cellToPixel;
   var rowSelectionActive = isRowSelection(selection);
   var columnSelectionActive = isColumnSelection(selection);
-
   var _normalizeSelection3 = normalizeSelection(selection),
-      min = _normalizeSelection3[0],
-      max = _normalizeSelection3[1];
-
+    min = _normalizeSelection3[0],
+    max = _normalizeSelection3[1];
   var _cellToPixel = cellToPixel(min),
-      left = _cellToPixel[0],
-      top = _cellToPixel[1];
-
+    left = _cellToPixel[0],
+    top = _cellToPixel[1];
   var _cellToPixel2 = cellToPixel(max, ONE_ONE),
-      right = _cellToPixel2[0],
-      bottom = _cellToPixel2[1];
-
+    right = _cellToPixel2[0],
+    bottom = _cellToPixel2[1];
   if (rowSelectionActive) {
     right = 1e5;
   }
-
   if (columnSelectionActive) {
     bottom = 1e5;
   }
-
   return [[left, top], [right, bottom]];
 };
-
-var resolveFrozenSelection = function resolveFrozenSelection(selection, cellLayout, freeze, indent, offset) {
+var resolveFrozenSelection = function resolveFrozenSelection(selection, cellLayout, freeze, offset) {
   var cellToPixel = cellLayout.cellToPixel,
-      columnToAbsolute = cellLayout.columnToAbsolute,
-      rowToAbsolute = cellLayout.rowToAbsolute;
+    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];
+    freezeY = freeze[1];
   var offsetX = offset[0],
-      offsetY = offset[1];
-
+    offsetY = offset[1];
   var _normalizeSelection4 = normalizeSelection(selection),
-      min = _normalizeSelection4[0],
-      max = _normalizeSelection4[1];
-
+    min = _normalizeSelection4[0],
+    max = _normalizeSelection4[1];
   var minX = min[0],
-      minY = min[1];
+    minY = min[1];
   var maxX = max[0],
-      maxY = max[1];
-
+    maxY = max[1];
   var _cellToPixel3 = cellToPixel(min),
-      left = _cellToPixel3[0],
-      top = _cellToPixel3[1];
-
+    left = _cellToPixel3[0],
+    top = _cellToPixel3[1];
   var _cellToPixel4 = cellToPixel(max, ONE_ONE),
-      right = _cellToPixel4[0],
-      bottom = _cellToPixel4[1];
-
+    right = _cellToPixel4[0],
+    bottom = _cellToPixel4[1];
+  var indentX = columnToAbsolute(0);
+  var indentY = rowToAbsolute(0);
   var frozenX = columnToAbsolute(freezeX);
   var frozenY = rowToAbsolute(freezeY);
   var hideKnob = false;
-
   if (isInRangeCenter(freezeX, minX, maxX + 1)) {
-    var edge = indentX + frozenX;
-
+    var edge = frozenX;
     if (right <= edge) {
       right = edge;
       hideKnob = true;
     }
   }
-
   if (isInRangeCenter(freezeY, minY, maxY + 1)) {
-    var _edge = indentY + frozenY;
-
+    var _edge = frozenY;
     if (bottom <= _edge) {
       bottom = _edge;
       hideKnob = true;
     }
   }
-
   if (isInRangeLeft(minX, freezeX, offsetX + freezeX)) {
     left = -1e5;
     var lastInvisibleX = offsetX + freezeX - 1;
-
     if (maxX <= lastInvisibleX) {
       if (maxX === lastInvisibleX) right = indentX;else right = -1e5;
       hideKnob = true;
     }
   }
-
   if (isInRangeLeft(minY, freezeY, offsetY + freezeY)) {
     top = -1e5;
     var lastInvisibleY = offsetY + freezeY - 1;
-
     if (maxY <= lastInvisibleY) {
       if (maxY === lastInvisibleY) bottom = indentY;else bottom = -1e5;
       hideKnob = true;
     }
   }
-
   if (rowSelectionActive && offsetX > 0) {
     hideKnob = true;
   }
-
   if (columnSelectionActive && offsetY > 0) {
     hideKnob = true;
   }
-
   if (rowSelectionActive) {
     right = 1e5;
   }
-
   if (columnSelectionActive) {
     bottom = 1e5;
   }
-
   return [[[left, top], [right, bottom]], hideKnob];
 };
-
 var resizeCanvas = function resizeCanvas(canvas) {
   var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
-      width = _canvas$getBoundingCl.width,
-      height = _canvas$getBoundingCl.height;
-
+    width = _canvas$getBoundingCl.width,
+    height = _canvas$getBoundingCl.height;
   var _window = window,
-      _window$devicePixelRa = _window.devicePixelRatio,
-      ratio = _window$devicePixelRa === void 0 ? 1 : _window$devicePixelRa;
-
+    _window$devicePixelRa = _window.devicePixelRatio,
+    ratio = _window$devicePixelRa === void 0 ? 1 : _window$devicePixelRa;
   if (ratio < 1) {
     ratio = 1;
   }
-
   var newCanvasWidth = Math.round(width * ratio);
   var newCanvasHeight = Math.round(height * ratio);
-
   if (canvas.width !== newCanvasWidth || canvas.height !== newCanvasHeight) {
     var context = canvas.getContext('2d');
-
     if (context) {
       canvas.width = newCanvasWidth;
       canvas.height = newCanvasHeight;
       context.scale(ratio, ratio);
     }
   }
-
-  return ratio;
 };
-
 var excelHeaderString = 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 || '';
 };
-
 var halfShadowGradient = function halfShadowGradient(gradient, rgb, opacity) {
   var hex = function hex(x) {
     return ('0' + Math.round(x).toString(16)).slice(-2);
   };
-
   var ease = function ease(x) {
     return 1.0 - Math.sin(x * Math.PI / 2);
   };
-
   var adjust = function adjust(x) {
     return 1.0 - Math.pow(1.0 - x, 2.2);
   };
-
   for (var i = 0; i <= 16; ++i) {
     var f = i / 16;
     gradient.addColorStop(f, rgb + hex(adjust(opacity * ease(f) * 0.5) * 255));
   }
 };
+var getDpiNudge = function getDpiNudge() {
+  var _window2 = window,
+    devicePixelRatio = _window2.devicePixelRatio;
+  return (devicePixelRatio - 1) / devicePixelRatio;
+};
+var roundDpi = function roundDpi(y) {
+  var _window3 = window,
+    devicePixelRatio = _window3.devicePixelRatio;
+  return Math.round((y + getDpiNudge()) * devicePixelRatio) / devicePixelRatio;
+};
+
+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,
+    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 Sheet = forwardRef(function (props, ref) {
   var _props$selection, _props$secondarySelec, _props$cacheLayout, _props$inputComponent;
-
   var canvasRef = useRef(null);
   var overlayRef = useRef(null);
-
   var _useState = useState(INITIAL_MAX_SCROLL),
-      maxScroll = _useState[0],
-      setMaxScroll = _useState[1];
-
+    maxScroll = _useState[0],
+    setMaxScroll = _useState[1];
   var _useState2 = useState(ORIGIN),
-      dataOffset = _useState2[0],
-      setDataOffset = _useState2[1];
-
+    dataOffset = _useState2[0],
+    setDataOffset = _useState2[1];
   var selectionProp = (_props$selection = props.selection) != null ? _props$selection : NO_SELECTION;
-
   var _useState3 = useState(selectionProp),
-      rawSelection = _useState3[0],
-      setRawSelection = _useState3[1];
-
+    rawSelection = _useState3[0],
+    setRawSelection = _useState3[1];
   var _useState4 = useState(null),
-      knobArea = _useState4[0],
-      setKnobArea = _useState4[1];
-
+    knobArea = _useState4[0],
+    setKnobArea = _useState4[1];
   var _useState5 = useState(null),
-      dragOffset = _useState5[0],
-      setDragOffset = _useState5[1];
-
+    dragOffset = _useState5[0],
+    setDragOffset = _useState5[1];
   var _useState6 = useState([null, null]),
-      dragIndices = _useState6[0],
-      setDragIndices = _useState6[1];
-
+    dragIndices = _useState6[0],
+    setDragIndices = _useState6[1];
   var _useState7 = useState(null),
-      dropTarget = _useState7[0],
-      setDropTarget = _useState7[1];
-
+    dropTarget = _useState7[0],
+    setDropTarget = _useState7[1];
   var _useState8 = useState(NO_CELL),
-      editCell = _useState8[0],
-      setEditCell = _useState8[1];
-
+    editCell = _useState8[0],
+    setEditCell = _useState8[1];
   var _useState9 = useState(!!props.autoFocus),
-      focused = _useState9[0],
-      setFocused = _useState9[1];
-
+    focused = _useState9[0],
+    setFocused = _useState9[1];
   var _useState10 = useState(selectionProp),
-      lastSelectionProp = _useState10[0],
-      setLastSelectionProp = _useState10[1];
-
+    lastSelectionProp = _useState10[0],
+    setLastSelectionProp = _useState10[1];
   if (lastSelectionProp !== selectionProp) {
     setLastSelectionProp(selectionProp);
     setRawSelection(selectionProp);
   }
-
   var _useState11 = useState(''),
-      editValue = _useState11[0],
-      setEditValue = _useState11[1];
-
+    editValue = _useState11[0],
+    setEditValue = _useState11[1];
   var _useState12 = useState(false),
-      arrowKeyCommitMode = _useState12[0],
-      setArrowKeyCommitMode = _useState12[1];
-
+    arrowKeyCommitMode = _useState12[0],
+    setArrowKeyCommitMode = _useState12[1];
   var _useResizeObserver = useResizeObserver({
-    ref: overlayRef
-  }),
-      _useResizeObserver$wi = _useResizeObserver.width,
-      canvasWidth = _useResizeObserver$wi === void 0 ? 3000 : _useResizeObserver$wi,
-      _useResizeObserver$he = _useResizeObserver.height,
-      canvasHeight = _useResizeObserver$he === void 0 ? 3000 : _useResizeObserver$he;
-
+      ref: overlayRef
+    }),
+    _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 cellWidth = useMemo(function () {
     return createRowOrColumnProp(props.cellWidth, 100);
   }, [props.cellWidth]);
@@ -3587,9 +3502,9 @@ var Sheet = forwardRef(function (props, ref) {
     })) : null;
   }, [props.rowGroupKeys, rowGroupKeys, selection]);
   var maxScrollX = maxScroll[0],
-      maxScrollY = maxScroll[1];
+    maxScrollY = maxScroll[1];
   var editCellX = editCell[0],
-      editCellY = editCell[1];
+    editCellY = editCell[1];
   var editMode = editCellX !== -1 && editCellY !== -1;
   var shouldCacheLayout = ((_props$cacheLayout = props.cacheLayout) != null ? _props$cacheLayout : false) !== false;
   var layoutVersion = typeof props.cacheLayout === 'number' ? props.cacheLayout : 0;
@@ -3605,15 +3520,13 @@ var Sheet = forwardRef(function (props, ref) {
     rowLayout.setSizer(cellHeight);
   }, [shouldCacheLayout, layoutVersion, cellWidth, cellHeight]);
   var freezeColumns = sheetStyle.freezeColumns,
-      freezeRows = sheetStyle.freezeRows,
-      rowHeaderWidth = sheetStyle.rowHeaderWidth,
-      columnHeaderHeight = sheetStyle.columnHeaderHeight;
+    freezeRows = sheetStyle.freezeRows;
   var cellLayout = useMemo(function () {
-    return makeCellLayout([freezeColumns, freezeRows], [rowHeaderWidth, columnHeaderHeight], dataOffset, columnLayout, rowLayout);
-  }, [freezeColumns, freezeRows, rowHeaderWidth, columnHeaderHeight, dataOffset, columnLayout, rowLayout]);
+    return makeCellLayout([freezeColumns, freezeRows], dataOffset, columnLayout, rowLayout);
+  }, [freezeColumns, freezeRows, dataOffset, columnLayout, rowLayout]);
   var getVisibleCells = cellLayout.getVisibleCells,
-      cellToPixel = cellLayout.cellToPixel,
-      getVersion = cellLayout.getVersion;
+    cellToPixel = cellLayout.cellToPixel,
+    getVersion = cellLayout.getVersion;
   var visibleCells = useMemo(function () {
     return getVisibleCells([canvasWidth, canvasHeight]);
   }, [getVisibleCells, canvasWidth, canvasHeight, getVersion()]);
@@ -3622,16 +3535,14 @@ var Sheet = forwardRef(function (props, ref) {
       props.onScrollChange([].concat(visibleCells.rows), [].concat(visibleCells.columns));
     }
   }, [visibleCells, props.onScrollChange]);
-
   var scrollToSelection = function scrollToSelection(selection, toHead) {
     if (toHead === void 0) {
       toHead = false;
     }
-
     var overlay = overlayRef.current;
     if (!overlay) return;
     var anchor = selection[0],
-        head = selection[1];
+      head = selection[1];
     var view = [canvasWidth, canvasHeight];
     var freeze = [freezeColumns, freezeRows];
     scrollToCell(overlay, toHead ? head : anchor, view, freeze, dataOffset, maxScroll, cellLayout, function (dataOffset, maxScroll) {
@@ -3639,89 +3550,72 @@ var Sheet = forwardRef(function (props, ref) {
       setMaxScroll(maxScroll);
     });
   };
-
   var changeSelection = function changeSelection(newSelection, scrollTo, toHead) {
     if (scrollTo === void 0) {
       scrollTo = true;
     }
-
     if (toHead === void 0) {
       toHead = false;
     }
-
-    if (!isSameSelection(selection, newSelection)) {
+    if (!isSameRectangle(selection, newSelection)) {
       setRawSelection(newSelection);
     }
-
     var overlay = overlayRef.current;
     if (!overlay) return;
-
     if (scrollTo) {
       scrollToSelection(newSelection, toHead);
     }
-
     if (props.onSelectionChanged) {
       var _normalizeSelection = normalizeSelection(validateSelection(newSelection)),
-          _normalizeSelection$ = _normalizeSelection[0],
-          minX = _normalizeSelection$[0],
-          minY = _normalizeSelection$[1],
-          _normalizeSelection$2 = _normalizeSelection[1],
-          maxX = _normalizeSelection$2[0],
-          maxY = _normalizeSelection$2[1];
-
+        _normalizeSelection$ = _normalizeSelection[0],
+        minX = _normalizeSelection$[0],
+        minY = _normalizeSelection$[1],
+        _normalizeSelection$2 = _normalizeSelection[1],
+        maxX = _normalizeSelection$2[0],
+        maxY = _normalizeSelection$2[1];
       props.onSelectionChanged(minX, minY, maxX, maxY);
     }
   };
-
   var cancelEditingCell = function cancelEditingCell() {
     setEditCell(NO_CELL);
     setFocused(true);
   };
-
   var commitEditingCell = function commitEditingCell(value) {
     if (props.onChange) {
       var cellX = editCell[0],
-          cellY = editCell[1];
+        cellY = editCell[1];
       props.onChange([{
         x: cellX,
         y: cellY,
         value: value !== undefined ? value : editValue
       }]);
     }
-
     setEditCell(NO_CELL);
     setFocused(true);
   };
-
   var startEditingCell = function startEditingCell(editCell, arrowKeyCommitMode) {
     if (arrowKeyCommitMode === void 0) {
       arrowKeyCommitMode = false;
     }
-
     var cellX = editCell[0],
-        cellY = editCell[1];
-
+      cellY = editCell[1];
     if (cellReadOnly(cellX, cellY)) {
       return;
     }
-
     var editDataValue = editData(cellX, cellY);
     var val = '';
-
     if (editDataValue !== null && editDataValue !== undefined) {
       val = editDataValue;
     }
-
     setEditCell(editCell);
     setEditValue(val);
     setArrowKeyCommitMode(arrowKeyCommitMode);
     setLastEditKey(editKeys.apply(void 0, editCell));
   };
-
   var _props$maxColumns = props.maxColumns,
-      maxColumns = _props$maxColumns === void 0 ? Infinity : _props$maxColumns,
-      _props$maxRows = props.maxRows,
-      maxRows = _props$maxRows === void 0 ? Infinity : _props$maxRows;
+    maxColumns = _props$maxColumns === void 0 ? Infinity : _props$maxColumns,
+    _props$maxRows = props.maxRows,
+    maxRows = _props$maxRows === void 0 ? Infinity : _props$maxRows;
   useLayoutEffect(function () {
     var overlay = overlayRef.current;
     if (!overlay) return;
@@ -3733,72 +3627,71 @@ var Sheet = forwardRef(function (props, ref) {
   }, [maxRows, maxColumns]);
   var hitmapRef = useRef(NO_CLICKABLES);
   var isFocused = focused || editMode;
-
   var _useClipboardAPI = useClipboardAPI(selection, editData, cellReadOnly, isFocused && !editMode, changeSelection, props.onChange, props.onCopy, props.onPaste),
-      clipboardApi = _useClipboardAPI.clipboardApi,
-      onClipboardCopy = _useClipboardAPI.onClipboardCopy;
-
+    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, 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 getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth, freezeColumns);
+  var getAutoSizeHeight = useAutoSizeRow(visibleCells.columns, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight, freezeRows);
+  var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, getAutoSizeHeight, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, setFocused, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange, props.dontChangeSelectionOnOrderChange),
+    mouseHandlers = _useMouse.mouseHandlers,
+    knobPosition = _useMouse.knobPosition;
   var _useKeyboard = useKeyboard(arrowKeyCommitMode, overlayRef, cellReadOnly, displayData, editCell, editMode, focused, rawSelection, selection, startEditingCell, commitEditingCell, cancelEditingCell, changeSelection, setFocused, onClipboardCopy, props.onChange),
-      onInputKeyDown = _useKeyboard.onInputKeyDown,
-      onGridKeyDown = _useKeyboard.onGridKeyDown,
-      onGridFocus = _useKeyboard.onGridFocus,
-      onGridBlur = _useKeyboard.onGridBlur;
-
+    onInputKeyDown = _useKeyboard.onInputKeyDown,
+    onGridKeyDown = _useKeyboard.onGridKeyDown,
+    onGridFocus = _useKeyboard.onGridFocus,
+    onGridBlur = _useKeyboard.onGridBlur;
+  var imageRenderer = useImageRenderer();
   useLayoutEffect(function () {
     var canvas = canvasRef.current;
-
     if (!canvas) {
       return;
     }
-
     var context = canvas.getContext('2d');
-
     if (!context) {
       return;
     }
-
     var animationFrameId = window.requestAnimationFrame(function () {
-      hitmapRef.current = renderSheet(context, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, isFocused, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset);
+      hitmapRef.current = renderSheet(context, imageRenderer, 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, isFocused, knobPosition, knobArea, dragOffset, dropTarget, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset]);
-
   var _useState13 = useState(''),
-      lastEditKey = _useState13[0],
-      setLastEditKey = _useState13[1];
-
+    lastEditKey = _useState13[0],
+    setLastEditKey = _useState13[1];
   var editTextPosition = ORIGIN;
   var editTextWidth = 0;
   var editTextHeight = 0;
-  var editTextTextAlign = 'right';
-
+  var editTextAlign = 'right';
+  var editTextLineHeight = '';
+  var editTextMargin = '';
+  var editTextFontSize = DEFAULT_CELL_STYLE.fontSize;
+  var editTextFontFamily = DEFAULT_CELL_STYLE.fontFamily;
+  var editTextFontWeight = DEFAULT_CELL_STYLE.fontWeight;
   if (editMode) {
-    var style = cellStyle.apply(void 0, editCell);
+    var style = _extends({}, DEFAULT_CELL_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';
+    editTextAlign = style.textAlign;
+    editTextLineHeight = style.lineHeight + "px";
+    editTextFontSize = style.fontSize;
+    editTextFontFamily = style.fontFamily;
+    editTextFontWeight = style.fontWeight;
+    var yNudge = getDpiNudge();
+    editTextMargin = style.marginTop - 1 + yNudge + "px " + (style.marginRight - 2) + "px " + (style.marginBottom - 2) + "px " + (style.marginLeft - 1) + "px";
     var editKey = editKeys.apply(void 0, editCell);
-
     if (editKey !== lastEditKey) {
       setLastEditKey('');
       setEditCell(NO_CELL);
     }
   }
-
   var _editTextPosition = editTextPosition,
-      textX = _editTextPosition[0],
-      textY = _editTextPosition[1];
+    textX = _editTextPosition[0],
+    textY = _editTextPosition[1];
   var inputProps = {
     value: editValue,
     autoFocus: true,
@@ -3807,15 +3700,18 @@ var Sheet = forwardRef(function (props, ref) {
       position: 'absolute',
       left: textX,
       top: textY,
-      padding: '0px 4px',
+      padding: editTextMargin,
       width: editTextWidth,
       height: editTextHeight,
       outline: 'none',
       border: 'none',
-      textAlign: editTextTextAlign,
+      textAlign: editTextAlign,
+      lineHeight: editTextLineHeight,
       color: 'black',
-      fontSize: DEFAULT_CELL_STYLE.fontSize,
-      fontFamily: 'sans-serif'
+      fontSize: editTextFontSize,
+      fontFamily: editTextFontFamily,
+      fontWeight: editTextFontWeight,
+      resize: 'none'
     }
   };
   var input = (_props$inputComponent = props.inputComponent) === null || _props$inputComponent === void 0 ? void 0 : _props$inputComponent.call(props, editCellX, editCellY, _extends({}, inputProps, {
@@ -3837,16 +3733,13 @@ var Sheet = forwardRef(function (props, ref) {
     height: canvasHeight,
     outline: '1px solid #ddd'
   };
-
   if (sheetStyle.hideScrollBars) {
     delete canvasStyles['outline'];
     delete overlayDivStyles['borderBottom'];
     overlayDivClassName = '';
   }
-
   var renderedInside = useMemo(function () {
     var _props$renderInside;
-
     return (_props$renderInside = props.renderInside) === null || _props$renderInside === void 0 ? void 0 : _props$renderInside.call(props, {
       visibleCells: visibleCells,
       cellLayout: cellLayout,
@@ -3856,7 +3749,6 @@ var Sheet = forwardRef(function (props, ref) {
   }, [props.renderInside, visibleCells, cellLayout, selection, editMode]);
   var renderedOutside = useMemo(function () {
     var _props$renderOutside;
-
     return (_props$renderOutside = props.renderOutside) === null || _props$renderOutside === void 0 ? void 0 : _props$renderOutside.call(props, {
       visibleCells: visibleCells,
       cellLayout: cellLayout,
@@ -3921,8 +3813,7 @@ var Sheet = forwardRef(function (props, ref) {
       height: '100%',
       pointerEvents: 'none'
     }
-  }, renderedOutside) : null, editMode && (input !== undefined ? input : React.createElement("input", Object.assign({}, inputProps, {
-    type: "text",
+  }, renderedOutside) : null, editMode && (input !== undefined ? input : React.createElement("textarea", Object.assign({}, inputProps, {
     onFocus: function onFocus(e) {
       return e.target.select();
     },
@@ -3933,5 +3824,5 @@ var Sheet = forwardRef(function (props, ref) {
 });
 
 export default Sheet;
-export { useClipboardTable };
+export { svgToImage, useClipboardTable };
 //# sourceMappingURL=index.modern.js.map