sheet-happens 0.0.59 → 0.0.61

package/dist/index.js

@@ -657,7 +657,7 @@ var findInDisplayData = function findInDisplayData(displayData, start, direction
   return maxXY(cell, [0, 0]);
 };
 
-var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, maxColumns, maxRows, 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 useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, maxColumns, maxRows, 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, onColumnDrop, onRowDrop, onCellWidthChange, onCellHeightChange, onRightClick, dontCommitEditOnSelectionChange, dontChangeSelectionOnOrderChange) {
   var _useState = React.useState(null),
     columnResize = _useState[0],
     setColumnResize = _useState[1];
@@ -806,7 +806,7 @@ var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, k
       return i;
     });
     if (!hideColumnHeaders && y < getIndentY()) {
-      if (onColumnOrderChange) {
+      if (onColumnOrderChange || onColumnDrop) {
         var start = columnToPixel(minX) + SIZES.resizeZone;
         var end = columnToPixel(maxX, 1) - SIZES.resizeZone;
         if (isInRange(x, start, end) || selectedColumnGroups) {
@@ -870,7 +870,7 @@ var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, k
       }
     }
     if (!hideRowHeaders && x < getIndentX()) {
-      if (onRowOrderChange) {
+      if (onRowOrderChange || onRowDrop) {
         var _start2 = rowToPixel(minY) + SIZES.resizeZone;
         var _end2 = rowToPixel(maxY, 1) - SIZES.resizeZone;
         if (isInRange(y, _start2, _end2) || selectedRowGroups) {
@@ -1009,33 +1009,45 @@ var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, k
         _normalizeSelection2$2 = _normalizeSelection2[1],
         maxX = _normalizeSelection2$2[0],
         maxY = _normalizeSelection2$2[1];
-      var cellX = pixelToColumn(x, 0.5);
-      var cellY = 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 startX = pixelToColumn(x, 0);
+        var midX = pixelToColumn(x, 0.5);
+        var leftX = pixelToColumn(x, 0.25);
+        var rightX = pixelToColumn(x, 0.75) - 1;
+        var insideGroup = isBoundaryInsideGroup(midX, columnGroupKeys);
+        var dropOn = onColumnDrop && (insideGroup || leftX === rightX) || !onColumnOrderChange;
+        var dropX = dropOn ? startX : midX;
+        var insideSelection = dropX >= minX && dropX <= maxX + +!dropOn;
+        if (!insideSelection && (dropOn || !insideGroup)) {
+          var _ref;
           var preceding = indices.filter(function (i) {
-            return i < cellX;
+            return i < dropX;
           });
-          var order = cellX - preceding.length;
-          dontChangeSelectionOnOrderChange || (onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[order, minY], [order + indices.length - 1, maxY]]));
-          onColumnOrderChange === null || onColumnOrderChange === void 0 ? void 0 : onColumnOrderChange(indices, order);
+          var order = dropX - preceding.length;
+          dontChangeSelectionOnOrderChange || (onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[order, minY], [order + (dropOn ? 0 : indices.length - 1), maxY]]));
+          (_ref = dropOn ? onColumnDrop : onColumnOrderChange) === null || _ref === void 0 ? void 0 : _ref(indices, order);
           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 startY = pixelToRow(y, 0);
+        var midY = pixelToRow(y, 0.5);
+        var topY = pixelToRow(y, 0.25);
+        var bottomY = pixelToRow(y, 0.75) - 1;
+        var _insideGroup = isBoundaryInsideGroup(midY, rowGroupKeys);
+        var _dropOn = onRowDrop && (_insideGroup || topY === bottomY) || !onRowOrderChange;
+        var dropY = _dropOn ? startY : midY;
+        var _insideSelection = dropY >= minY && dropY <= maxY + +!_dropOn;
+        if (!_insideSelection && (_dropOn || !_insideGroup)) {
+          var _ref2;
           var _preceding = _indices4.filter(function (i) {
-            return i < cellY;
+            return i < dropY;
           });
-          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);
+          var _order = dropY - _preceding.length;
+          dontChangeSelectionOnOrderChange || (onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([[minX, _order], [maxX, _order + (_dropOn ? 0 : _indices4.length - 1)]]));
+          (_ref2 = _dropOn ? onRowDrop : onRowOrderChange) === null || _ref2 === void 0 ? void 0 : _ref2(_indices4, _order);
           onInvalidateRow === null || onInvalidateRow === void 0 ? void 0 : onInvalidateRow(Math.min(minY, _order));
         }
       }
@@ -1111,7 +1123,7 @@ var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, k
     };
     if (!isDragging) {
       if (!hideColumnHeaders && y < getIndentY()) {
-        if (onColumnOrderChange) {
+        if (onColumnOrderChange || onColumnDrop) {
           var start = columnToPixel(minX) + SIZES.resizeZone;
           var end = columnToPixel(maxX, 1) - SIZES.resizeZone;
           if (isInRange(x, start, end) || selectedColumnGroups) {
@@ -1138,7 +1150,7 @@ var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, k
         }
       }
       if (!hideRowHeaders && x < getIndentX()) {
-        if (onRowOrderChange) {
+        if (onRowOrderChange || onRowDrop) {
           var _start5 = rowToPixel(minY) + SIZES.resizeZone;
           var _end5 = rowToPixel(maxY, 1) - SIZES.resizeZone;
           if (isInRange(y, _start5, _end5) || selectedRowGroups) {
@@ -1253,31 +1265,61 @@ var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, k
       var _x = xy[0],
         _y = xy[1];
       if (columnDrag) {
-        var _cellX = pixelToColumn(_x, 0.5);
-        var insideSelection = _cellX >= minX && _cellX <= maxX + 1;
-        var insideGroup = isBoundaryInsideGroup(_cellX, columnGroupKeys);
+        var _expandSelectionToRow7 = expandSelectionToRowOrColumnGroups(selection, columnGroupKeys, selectedColumnGroups, 0),
+          _expandSelectionToRow8 = _expandSelectionToRow7[0],
+          _minX2 = _expandSelectionToRow8[0],
+          _expandSelectionToRow9 = _expandSelectionToRow7[1],
+          _maxX2 = _expandSelectionToRow9[0];
+        var startX = pixelToColumn(_x, 0);
+        var midX = pixelToColumn(_x, 0.5);
+        var leftX = pixelToColumn(_x, 0.25);
+        var rightX = pixelToColumn(_x, 0.75) - 1;
+        var insideGroup = isBoundaryInsideGroup(midX, columnGroupKeys);
+        var dropOn = onColumnDrop && (insideGroup || leftX === rightX) && startX < maxColumns || !onColumnOrderChange;
+        var dropX = dropOn ? startX : midX;
         var _anchor3 = columnDrag.anchor,
           _offset2 = columnDrag.offset;
         var shift = _x - _anchor3[0];
         var _getDragScrollOffset3 = getDragScrollOffset(_offset2),
           _scrollOffset2 = _getDragScrollOffset3[0];
+        var insideSelection = dropX >= _minX2 && dropX <= _maxX2 + +!dropOn;
+        var dropSelection = [[dropX, -1], [dropX, -1]];
+        if (dropOn) {
+          var dropOnColumnGroup = new Set([columnGroupKeys(dropX)]);
+          dropSelection = expandSelectionToRowOrColumnGroups(dropSelection, columnGroupKeys, dropOnColumnGroup, 0);
+        }
         onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([shift + _scrollOffset2, 0]);
-        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(insideSelection || insideGroup ? null : [[_cellX, -1], [_cellX, -1]]);
+        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(!insideSelection && (dropOn || !insideGroup) ? dropSelection : null, dropOn);
       }
       if (rowDrag) {
-        var _cellY = pixelToRow(_y, 0.5);
-        var _insideSelection2 = _cellY >= minY && _cellY <= maxY + 1;
-        var _insideGroup2 = isBoundaryInsideGroup(_cellY, rowGroupKeys);
+        var _expandSelectionToRow10 = expandSelectionToRowOrColumnGroups(selection, rowGroupKeys, selectedRowGroups, 1),
+          _expandSelectionToRow11 = _expandSelectionToRow10[0],
+          _minY2 = _expandSelectionToRow11[1],
+          _expandSelectionToRow12 = _expandSelectionToRow10[1],
+          _maxY2 = _expandSelectionToRow12[1];
+        var startY = pixelToRow(_y, 0);
+        var midY = pixelToRow(_y, 0.5);
+        var topY = pixelToRow(_y, 0.25);
+        var bottomY = pixelToRow(_y, 0.75) - 1;
+        var _insideGroup2 = isBoundaryInsideGroup(midY, rowGroupKeys);
+        var _dropOn2 = onRowDrop && (_insideGroup2 || topY === bottomY) && startY < maxRows || !onRowOrderChange;
+        var dropY = _dropOn2 ? startY : midY;
         var _anchor4 = rowDrag.anchor,
           _offset3 = rowDrag.offset;
         var _shift = _y - _anchor4[1];
         var _getDragScrollOffset4 = getDragScrollOffset(_offset3),
           _scrollOffset3 = _getDragScrollOffset4[1];
+        var _insideSelection2 = dropY >= _minY2 && dropY <= _maxY2 + +!_dropOn2;
+        var _dropSelection = [[-1, dropY], [-1, dropY]];
+        if (_dropOn2) {
+          var dropOnRowGroup = new Set([rowGroupKeys(dropY)]);
+          _dropSelection = expandSelectionToRowOrColumnGroups(_dropSelection, rowGroupKeys, dropOnRowGroup, 1);
+        }
         onDragOffsetChange === null || onDragOffsetChange === void 0 ? void 0 : onDragOffsetChange([0, _shift + _scrollOffset3]);
-        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(_insideSelection2 || _insideGroup2 ? null : [[-1, _cellY], [-1, _cellY]]);
+        onDropTargetChange === null || onDropTargetChange === void 0 ? void 0 : onDropTargetChange(!_insideSelection2 && (_dropOn2 || !_insideGroup2) ? _dropSelection : null, _dropOn2);
       }
     }
-  }, [getMousePosition, getMouseOutOfBounds, getMouseHit, onCellWidthChange, onCellHeightChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onKnobAreaChange, onInvalidateRow, onInvalidateColumn, columnGroupKeys, rowGroupKeys]);
+  }, [getMousePosition, getMouseOutOfBounds, getMouseHit, onCellWidthChange, onCellHeightChange, onDragIndicesChange, onDragOffsetChange, onDropTargetChange, onSelectionChange, onKnobAreaChange, onInvalidateRow, onInvalidateColumn, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, maxColumns, maxRows]);
   var onClick = React.useCallback(function (e) {
     var xy = getMousePosition(e);
     if (!xy) return;
@@ -1379,10 +1421,16 @@ var useMouse = function useMouse(elementRef, dataOffset, hitmapRef, selection, k
     if (!xy) return;
     var x = xy[0],
       y = xy[1];
-    if (x <= getIndentX() || y <= getIndentY()) {
+    if (x <= getIndentX() && y <= getIndentY()) {
       return;
     }
     var cell = pixelToCell(xy);
+    if (!hideRowHeaders && x < getIndentX()) {
+      cell[0] = -1;
+    }
+    if (!hideColumnHeaders && y < getIndentY()) {
+      cell[1] = -1;
+    }
     if (!isPointInsideSelection(selection, cell)) {
       onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([cell, cell]);
     }
@@ -2955,7 +3003,7 @@ var makeIntMap = function makeIntMap(initialSize) {
   };
 };
 
-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 renderSheet = function renderSheet(context, imageRenderer, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, isFocused, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, dropOn, columnHeaders, columnHeaderStyle, displayData, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, dataOffset) {
   var canvas = context.canvas;
   var width = canvas.width,
     height = canvas.height;
@@ -3086,7 +3134,8 @@ var renderSheet = function renderSheet(context, imageRenderer, cellLayout, visib
       var isInRowGroup = groupKey != null && (selectedRowGroups === null || selectedRowGroups === void 0 ? void 0 : selectedRowGroups.has(groupKey));
       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 isDropSelected = dropOn && dropTarget && row >= dropTarget[0][1] && row <= dropTarget[1][1];
+      var style = isSelfSelected ? HEADER_SELECTED_STYLE : isGroupSelected || isDropSelected ? 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);
@@ -3103,7 +3152,8 @@ var renderSheet = function renderSheet(context, imageRenderer, cellLayout, visib
       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 _isDropSelected = dropOn && dropTarget && column >= dropTarget[0][0] && column <= dropTarget[1][0];
+      var selectedStyle = isSelected ? HEADER_SELECTED_STYLE : _isDropSelected ? HEADER_GROUP_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);
@@ -3190,7 +3240,7 @@ var renderSheet = function renderSheet(context, imageRenderer, cellLayout, visib
       }
     }
   }
-  if (dropTarget) {
+  if (dropTarget && !dropOn) {
     var _resolveSelection = resolveSelection(dropTarget, cellLayout),
       _resolveSelection$ = _resolveSelection[0],
       _left6 = _resolveSelection$[0],
@@ -3524,28 +3574,31 @@ var Sheet = React.forwardRef(function (props, ref) {
   var _useState7 = React.useState(null),
     dropTarget = _useState7[0],
     setDropTarget = _useState7[1];
-  var _useState8 = React.useState(NO_CELL),
-    editCell = _useState8[0],
-    setEditCell = _useState8[1];
-  var _useState9 = React.useState(!!props.autoFocus),
-    focused = _useState9[0],
-    setFocused = _useState9[1];
-  var _useState10 = React.useState(selectionProp),
-    lastSelectionProp = _useState10[0],
-    setLastSelectionProp = _useState10[1];
+  var _useState8 = React.useState(false),
+    dropOn = _useState8[0],
+    setDropOn = _useState8[1];
+  var _useState9 = React.useState(NO_CELL),
+    editCell = _useState9[0],
+    setEditCell = _useState9[1];
+  var _useState10 = React.useState(!!props.autoFocus),
+    focused = _useState10[0],
+    setFocused = _useState10[1];
+  var _useState11 = React.useState(selectionProp),
+    lastSelectionProp = _useState11[0],
+    setLastSelectionProp = _useState11[1];
   if (lastSelectionProp !== selectionProp) {
     setLastSelectionProp(selectionProp);
     setRawSelection(selectionProp);
   }
-  var _useState11 = React.useState(''),
-    editValue = _useState11[0],
-    setEditValue = _useState11[1];
-  var _useState12 = React.useState(null),
-    sourceValue = _useState12[0],
-    setSourceValue = _useState12[1];
-  var _useState13 = React.useState(false),
-    arrowKeyCommitMode = _useState13[0],
-    setArrowKeyCommitMode = _useState13[1];
+  var _useState12 = React.useState(''),
+    editValue = _useState12[0],
+    setEditValue = _useState12[1];
+  var _useState13 = React.useState(null),
+    sourceValue = _useState13[0],
+    setSourceValue = _useState13[1];
+  var _useState14 = React.useState(false),
+    arrowKeyCommitMode = _useState14[0],
+    setArrowKeyCommitMode = _useState14[1];
   var _useResizeObserver = useResizeObserver({
       ref: overlayRef
     }),
@@ -3671,6 +3724,13 @@ var Sheet = React.forwardRef(function (props, ref) {
       setMaxScroll(maxScroll);
     });
   };
+  var changeDropTarget = function changeDropTarget(newSelection, dropOn) {
+    if (dropOn === void 0) {
+      dropOn = false;
+    }
+    setDropTarget(newSelection);
+    setDropOn(dropOn);
+  };
   var changeSelection = function changeSelection(newSelection, scrollTo, toHead) {
     if (scrollTo === void 0) {
       scrollTo = true;
@@ -3687,14 +3747,14 @@ var Sheet = React.forwardRef(function (props, ref) {
       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];
-      props.onSelectionChanged(minX, minY, maxX, maxY);
+      var _validateSelection = validateSelection(newSelection),
+        _validateSelection$ = _validateSelection[0],
+        anchorX = _validateSelection$[0],
+        anchorY = _validateSelection$[1],
+        _validateSelection$2 = _validateSelection[1],
+        headX = _validateSelection$2[0],
+        headY = _validateSelection$2[1];
+      props.onSelectionChanged(anchorX, anchorY, headX, headY);
     }
   };
   var cancelEditingCell = function cancelEditingCell() {
@@ -3768,7 +3828,7 @@ var Sheet = React.forwardRef(function (props, ref) {
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll, props.onScrollAction);
   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(overlayRef, dataOffset, hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, maxColumns, maxRows, 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),
+  var _useMouse = useMouse(overlayRef, dataOffset, hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, maxColumns, maxRows, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, getAutoSizeHeight, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, changeDropTarget, changeSelection, setFocused, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onColumnDrop, props.onRowDrop, 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),
@@ -3787,15 +3847,15 @@ var Sheet = React.forwardRef(function (props, ref) {
       return;
     }
     var animationFrameId = window.requestAnimationFrame(function () {
-      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);
+      hitmapRef.current = renderSheet(context, imageRenderer, cellLayout, visibleCells, sheetStyle, cellStyle, selection, secondarySelections, isFocused, knobPosition, knobArea, dragIndices, dragOffset, dropTarget, dropOn, 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 _useState14 = React.useState(''),
-    lastEditKey = _useState14[0],
-    setLastEditKey = _useState14[1];
+  var _useState15 = React.useState(''),
+    lastEditKey = _useState15[0],
+    setLastEditKey = _useState15[1];
   var editTextPosition = ORIGIN;
   var editTextWidth = 0;
   var editTextHeight = 0;