sheet-happens 0.0.31 → 0.0.32

package/dist/index.js

@@ -160,9 +160,6 @@ var isInRange = function isInRange(x, min, max) {
 var isInRangeLeft = function isInRangeLeft(x, min, max) {
   return min <= x && x < max;
 };
-var isInRangeRight = function isInRangeRight(x, min, max) {
-  return min < x && x <= max;
-};
 var isInRangeCenter = function isInRangeCenter(x, min, max) {
   return min < x && x < max;
 };
@@ -748,24 +745,24 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
       }
     }
 
-    var scrollToHead = true;
+    var scrollTo = true;
 
     if (!hideRowHeaders && x < getIndentX()) {
-      scrollToHead = false;
+      scrollTo = false;
       setDraggingRowSelection(true);
       anchor[0] = -1;
       head[0] = -1;
     }
 
     if (!hideColumnHeaders && y < getIndentY()) {
-      scrollToHead = false;
+      scrollTo = false;
       setDraggingColumnSelection(true);
       anchor[1] = -1;
       head[1] = -1;
     }
 
     setDraggingSelection(true);
-    onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([anchor, head], scrollToHead);
+    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]);
   var onPointerUp = React.useCallback(function (e) {
     var _ref$current2 = ref.current,
@@ -1287,8 +1284,14 @@ var useScroll = function useScroll(offset, maxScroll, cellLayout, onOffsetChange
       return;
     }
 
-    var xy = [e.target.scrollLeft, e.target.scrollTop];
-    var absoluteToCell = cellLayout.absoluteToCell;
+    var absoluteToCell = cellLayout.absoluteToCell,
+        cellToAbsolute = cellLayout.cellToAbsolute;
+
+    var _cellToAbsolute = cellToAbsolute([0, 0], [0.5, 0.5]),
+        nudgeX = _cellToAbsolute[0],
+        nudgeY = _cellToAbsolute[1];
+
+    var xy = [e.target.scrollLeft + nudgeX, e.target.scrollTop + nudgeY];
     var cell = absoluteToCell(xy);
 
     if (!isSameXY(cell, offset)) {
@@ -1319,9 +1322,9 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
       columnToPixel = cellLayout.columnToPixel,
       rowToPixel = cellLayout.rowToPixel;
 
-  var _cellToAbsolute = cellToAbsolute(freeze),
-      frozenX = _cellToAbsolute[0],
-      frozenY = _cellToAbsolute[1];
+  var _cellToAbsolute2 = cellToAbsolute(freeze),
+      frozenX = _cellToAbsolute2[0],
+      frozenY = _cellToAbsolute2[1];
 
   var _cellToPixel = cellToPixel(cell),
       left = _cellToPixel[0],
@@ -1335,11 +1338,11 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
       newY = offset[1];
 
   if (left <= frozenX) {
-    newX = x;
+    newX = x - freeze[0];
   }
 
   if (top <= frozenY) {
-    newY = y;
+    newY = y - freeze[1];
   }
 
   if (right > w) {
@@ -1358,12 +1361,17 @@ var scrollToCell = function scrollToCell(element, cell, view, freeze, offset, ma
 
   if (!isSameXY(newOffset, offset)) {
     var scroll = cellToAbsolute(newOffset);
+
+    var _cellToAbsolute3 = cellToAbsolute([0, 0], [0.5, 0.5]),
+        nudgeX = _cellToAbsolute3[0],
+        nudgeY = _cellToAbsolute3[1];
+
     callback(newOffset, maxXY(maxScroll, scroll));
     setTimeout(function () {
       var scrollX = scroll[0],
           scrollY = scroll[1];
-      element.scrollLeft = scrollX;
-      element.scrollTop = scrollY;
+      element.scrollLeft = scrollX - nudgeX;
+      element.scrollTop = scrollY - nudgeY;
     });
   }
 };
@@ -2486,18 +2494,20 @@ var resolveFrozenSelection = function resolveFrozenSelection(selection, cellLayo
 
   if (isInRangeLeft(minX, freezeX, offsetX + freezeX)) {
     left = -1e5;
+    var lastInvisibleX = offsetX + freezeX - 1;
 
-    if (isInRangeRight(maxX + 1, freezeX, offsetX + freezeX)) {
-      right = indentX;
+    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 (isInRangeRight(maxY + 1, freezeY, offsetY + freezeY)) {
-      bottom = indentY;
+    if (maxY <= lastInvisibleY) {
+      if (maxY === lastInvisibleY) bottom = indentY;else bottom = -1e5;
       hideKnob = true;
     }
   }
@@ -2710,9 +2720,13 @@ var Sheet = React.forwardRef(function (props, ref) {
     }
   }, [visibleCells, props.onScrollChange]);
 
-  var changeSelection = function changeSelection(newSelection, scrollToAnchor) {
-    if (scrollToAnchor === void 0) {
-      scrollToAnchor = true;
+  var changeSelection = function changeSelection(newSelection, scrollTo, toHead) {
+    if (scrollTo === void 0) {
+      scrollTo = true;
+    }
+
+    if (toHead === void 0) {
+      toHead = false;
     }
 
     if (!isSameSelection(selection, newSelection)) {
@@ -2722,9 +2736,10 @@ var Sheet = React.forwardRef(function (props, ref) {
     var overlay = overlayRef.current;
     if (!overlay) return;
 
-    if (scrollToAnchor) {
-      var anchor = newSelection[0];
-      scrollToCell(overlay, anchor, [canvasWidth, canvasHeight], [freezeColumns, freezeRows], dataOffset, maxScroll, cellLayout, function (dataOffset, maxScroll) {
+    if (scrollTo) {
+      var anchor = newSelection[0],
+          head = newSelection[1];
+      scrollToCell(overlay, toHead ? head : anchor, [canvasWidth, canvasHeight], [freezeColumns, freezeRows], dataOffset, maxScroll, cellLayout, function (dataOffset, maxScroll) {
         setDataOffset(dataOffset);
         setMaxScroll(maxScroll);
       });
@@ -2918,7 +2933,7 @@ var Sheet = React.forwardRef(function (props, ref) {
         anchor = head;
       }
 
-      changeSelection([anchor, head]);
+      changeSelection([anchor, head], true, true);
       return;
     }
 
@@ -2997,16 +3012,26 @@ var Sheet = React.forwardRef(function (props, ref) {
     canvasStyles.width = 'calc(100%)';
   }
 
-  var userRendered = React.useMemo(function () {
-    var _props$render;
+  var renderedInside = React.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,
+      selection: selection,
+      editMode: editMode
+    });
+  }, [props.renderInside, visibleCells, cellLayout, selection, editMode]);
+  var renderedOutside = React.useMemo(function () {
+    var _props$renderOutside;
 
-    return (_props$render = props.render) === null || _props$render === void 0 ? void 0 : _props$render.call(props, {
+    return (_props$renderOutside = props.renderOutside) === null || _props$renderOutside === void 0 ? void 0 : _props$renderOutside.call(props, {
       visibleCells: visibleCells,
       cellLayout: cellLayout,
       selection: selection,
       editMode: editMode
     });
-  }, [props.render, visibleCells, cellLayout, selection, editMode]);
+  }, [props.renderOutside, visibleCells, cellLayout, selection, editMode]);
   return React__default.createElement("div", {
     style: {
       position: 'relative',
@@ -3040,13 +3065,19 @@ var Sheet = React.forwardRef(function (props, ref) {
       height: 1,
       backgroundColor: 'rgba(0,0,0,0.0)'
     }
-  }), userRendered ? React__default.createElement("div", {
+  }), renderedInside ? React__default.createElement("div", {
     style: {
       position: 'sticky',
       left: 0,
       top: 0
     }
-  }, userRendered) : null), React__default.createElement("textarea", {
+  }, renderedInside) : null), renderedOutside ? React__default.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0
+    }
+  }, renderedOutside) : null, React__default.createElement("textarea", {
     style: {
       position: 'absolute',
       top: 0,