streaksheet - npm Package Compare versions

Comparing version 0.7.3 to 0.7.4

build/src/CellContainer.d.ts

@@ -1,3 +0,3 @@
-import React from 'react';
-import type { ItemData } from './internalTypes';
+import * as React from 'react';
+import { ItemData } from './internalTypes';
 export interface Props<T> {
@@ -4,0 +4,0 @@ columnIndex: number;

build/src/CellContainer.js

@@ -16,4 +16,6 @@ "use strict";
 
-var _react = _interopRequireWildcard(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
+var _internalTypes = require("./internalTypes");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -25,3 +27,3 @@
 
-var _default = _react["default"].memo(function CellContainer(_ref) {
+var _default = React.memo(function CellContainer(_ref) {
   var columnIndex = _ref.columnIndex,
@@ -37,3 +39,3 @@ data = _ref.data,
   var position = sectionRowMatcher.getSectionRow(rowIndex);
-  var setEditing = (0, _react.useCallback)(function (isEditing) {
+  var setEditing = (0, React.useCallback)(function (isEditing) {
     if (isEditing) {
@@ -69,3 +71,3 @@ setCellBeingEdited([rowIndex, columnIndex]);
 
-    content = /*#__PURE__*/_react["default"].createElement(Cell, {
+    content = /*#__PURE__*/React.createElement(Cell, {
       columnKey: columnKey,
@@ -84,24 +86,63 @@ isEditing: isEditing,
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    "data-column-index": columnIndex,
-    "data-row-index": rowIndex,
-    style: data.styles.cell(_objectSpread({
-      borderBottom: DEFAULT_BORDER_STYLE,
-      borderLeft: DEFAULT_BORDER_STYLE,
-      borderRight: DEFAULT_BORDER_STYLE,
-      borderTop: DEFAULT_BORDER_STYLE,
-      boxSizing: 'border-box',
-      // elements that can be overlapped by sticky stuff can not be contain:layout
-      contain: 'size',
-      overflow: 'hidden',
-      userSelect: 'none'
-    }, style), {
-      columnIndex: columnIndex,
-      rowIndex: rowIndex
-    })
-  }, content);
+  return /*#__PURE__*/React.createElement(_internalTypes.CellContainerContext.Consumer, {
+    unstable_observedBits: 1 << rowIndex % 30
+  }, function (cellContainerContext) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cellContainerContext.hoveredRow === rowIndex ? data.rowHoveredClassName : undefined,
+      "data-column-index": columnIndex,
+      "data-row-index": rowIndex,
+      style: data.styles.cell(_objectSpread({
+        borderBottom: DEFAULT_BORDER_STYLE,
+        borderLeft: DEFAULT_BORDER_STYLE,
+        borderRight: DEFAULT_BORDER_STYLE,
+        borderTop: DEFAULT_BORDER_STYLE,
+        boxSizing: 'border-box',
+        // elements that can be overlapped by sticky stuff can not be contain:layout
+        contain: 'size',
+        overflow: 'hidden',
+        userSelect: 'none'
+      }, style), {
+        columnIndex: columnIndex,
+        rowIndex: rowIndex
+      })
+    }, content);
+  });
 }, function (prevProps, nextProps) {
   // Only the data prop may change.
-  // TODO only update if the specific cell content updated
-  return prevProps.data === nextProps.data;
+  var prevData = prevProps.data;
+  var nextData = nextProps.data;
+
+  if (prevData === nextData) {
+    return true;
+  }
+
+  if (prevData.Cell !== nextData.Cell || prevData.sectionRowMatcher !== nextData.sectionRowMatcher || prevData.styles !== nextData.styles || prevData.rowHoveredClassName !== nextData.rowHoveredClassName) {
+    return false;
+  }
+
+  var rowIndex = prevProps.rowIndex,
+      columnIndex = prevProps.columnIndex; // Check if there's a prop change that affects this row in particular
+
+  if (prevData.cellIndexesToKeysAndData !== nextData.cellIndexesToKeysAndData) {
+    var p = prevData.cellIndexesToKeysAndData(rowIndex, 0);
+    var n = prevData.cellIndexesToKeysAndData(rowIndex, 0);
+
+    if (p !== n) {
+      if ((p === null || p === void 0 ? void 0 : p.rowKey) !== (n === null || n === void 0 ? void 0 : n.rowKey) || (p === null || p === void 0 ? void 0 : p.rowData) !== (n === null || n === void 0 ? void 0 : n.rowData)) {
+        return false;
+      }
+    }
+  }
+
+  if (prevData.cellBeingEdited !== nextData.cellBeingEdited) {
+    if (prevData.cellBeingEdited && prevData.cellBeingEdited[0] === rowIndex && prevData.cellBeingEdited[1] === columnIndex) {
+      return false;
+    }
+
+    if (nextData.cellBeingEdited && nextData.cellBeingEdited[0] === rowIndex && nextData.cellBeingEdited[1] === columnIndex) {
+      return false;
+    }
+  }
+
+  return true;
 });
@@ -108,0 +149,0 @@

build/src/ColumnHeadersContainer.d.ts

@@ -1,2 +0,2 @@
-import { ComponentType } from 'react';
+import React, { ComponentType } from 'react';
 import type { VariableSizeGrid } from 'react-window';
@@ -17,4 +17,6 @@ import type { ColumnHeaderCellProps, Styles } from './';
     totalWidth: number;
+    topSection?: React.ReactNode;
+    topSectionHeight: number;
 }
-export default function ColumnHeadersContainer({ ColumnHeaderCell, columns, gridLeft, height, liveResize, minimumColumnWidth, onReorderColumn, onResizeColumn, resetAfterColumnIndex, styles, totalWidth, }: Props): JSX.Element;
+export default function ColumnHeadersContainer({ ColumnHeaderCell, columns, gridLeft, height, liveResize, minimumColumnWidth, onReorderColumn, onResizeColumn, resetAfterColumnIndex, styles, totalWidth, topSection, topSectionHeight, }: Props): JSX.Element;
 export {};

build/src/ColumnHeadersContainer.js

@@ -37,3 +37,5 @@ "use strict";
       styles = _ref.styles,
-      totalWidth = _ref.totalWidth;
+      totalWidth = _ref.totalWidth,
+      topSection = _ref.topSection,
+      topSectionHeight = _ref.topSectionHeight;
 
@@ -100,10 +102,20 @@ var _useState = (0, _react.useState)(null),
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.columnHeadersContainer({
+    style: {
       backgroundColor: '#fff',
       contain: 'size layout',
-      fontWeight: 'bold',
-      height: height,
       position: 'sticky',
       top: 0,
-      width: totalWidth
+      width: totalWidth,
+      height: height + topSectionHeight
+    }
+  }, topSection ? /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      contain: 'size layout',
+      height: topSectionHeight
+    }
+  }, topSection) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.columnHeadersContainer({
+      contain: 'size layout',
+      fontWeight: 'bold',
+      height: height
     })
@@ -156,3 +168,3 @@ }, columns.map(function (column, columnIndex) {
     });
-  })), columnDragging && /*#__PURE__*/_react["default"].createElement(_ColumnReorderOverlay["default"], {
+  }))), columnDragging && /*#__PURE__*/_react["default"].createElement(_ColumnReorderOverlay["default"], {
     columnHeaderHeight: height,
@@ -159,0 +171,0 @@ columnLeft: columnBounds[columnDragging.columnIndex].left,

build/src/getRectForRange.d.ts

 import type SectionRowMatcher from './SectionRowMatcher';
 import type { CellIndexes } from './internalTypes';
 import type { ColumnAndOverviewData } from './useSheetData';
-export default function getRectForRange(start: CellIndexes, end: CellIndexes, columnAndOverviewData: ColumnAndOverviewData, sectionRowMatcher: SectionRowMatcher, defaultRowHeight: number): {
+export default function getRectForRange(start: CellIndexes, end: CellIndexes, columnAndOverviewData: ColumnAndOverviewData, sectionRowMatcher: SectionRowMatcher, defaultRowHeight: number, topSectionHeight: number): {
     height: number;
@@ -6,0 +6,0 @@ left: number;

build/src/getRectForRange.js

@@ -17,3 +17,3 @@ "use strict";
 // getBoundlingClientRect, except relative rather than absolute.
-function getRectForRange(start, end, columnAndOverviewData, sectionRowMatcher, defaultRowHeight) {
+function getRectForRange(start, end, columnAndOverviewData, sectionRowMatcher, defaultRowHeight, topSectionHeight) {
   var columns = columnAndOverviewData.columns,
@@ -53,4 +53,4 @@ sections = columnAndOverviewData.sections;
   }, 0);
-  var y1 = getPreviousSectionsHeight(sections, minSectionIndex, defaultRowHeight) + sections[minSectionIndex].sectionRowHeight + minSectionRowIndex * defaultRowHeight;
-  var y2 = getPreviousSectionsHeight(sections, maxSectionIndex, defaultRowHeight) + sections[maxSectionIndex].sectionRowHeight + (maxSectionRowIndex + 1) * defaultRowHeight;
+  var y1 = getPreviousSectionsHeight(sections, minSectionIndex, defaultRowHeight, topSectionHeight) + sections[minSectionIndex].sectionRowHeight + minSectionRowIndex * defaultRowHeight;
+  var y2 = getPreviousSectionsHeight(sections, maxSectionIndex, defaultRowHeight, topSectionHeight) + sections[maxSectionIndex].sectionRowHeight + (maxSectionRowIndex + 1) * defaultRowHeight;
   return {
@@ -64,10 +64,9 @@ height: y2 - y1,
 
-function getPreviousSectionsHeight(sections, sectionIndex, defaultRowHeight) {
-  return (// Column header
-    defaultRowHeight + // Sections
-    (0, _take["default"])(sections, sectionIndex).reduce(function (height, section) {
-      return height + section.sectionRowHeight + section.rowCount * defaultRowHeight;
-    }, 0)
-  );
+function getPreviousSectionsHeight(sections, sectionIndex, defaultRowHeight, topSectionHeight) {
+  return topSectionHeight + // Column header
+  defaultRowHeight + // Sections
+  (0, _take["default"])(sections, sectionIndex).reduce(function (height, section) {
+    return height + section.sectionRowHeight + section.rowCount * defaultRowHeight;
+  }, 0);
 }
 //# sourceMappingURL=getRectForRange.js.map

build/src/index.d.ts

@@ -1,5 +0,5 @@
-import React, { ComponentType, CSSProperties } from 'react';
-import { VariableSizeGrid } from 'react-window';
+import * as React from 'react';
+import { ComponentType, CSSProperties } from 'react';
 import useSheetData from './useSheetData';
-import type { CellIndexes, RowsBySection, SelectionState, UnsupportedOperation } from './internalTypes';
+import { UnsupportedOperation } from './internalTypes';
 import type { ColumnAndOverviewData, ColumnInfo, Row, RowId, RowsResult, Section, SheetData, SheetDataOptions } from './useSheetData';
@@ -35,15 +35,2 @@ export { useSheetData };
 }
-export interface InnerElementCtx<T> {
-    copiedRegion?: [CellIndexes, CellIndexes];
-    handleGridDoubleClick: React.MouseEventHandler;
-    handleGridKeyDown: React.KeyboardEventHandler;
-    handleGridMouseDown: React.MouseEventHandler;
-    handleGridMouseMove: React.MouseEventHandler;
-    handleGridMouseUp: React.MouseEventHandler;
-    resetAfterColumnIndex: VariableSizeGrid['resetAfterColumnIndex'];
-    rowsBySection: RowsBySection<T>;
-    selection: SelectionState;
-    sheetProps: Props<T>;
-    styles: Styles;
-}
 export interface CellProps<T> {
@@ -117,2 +104,5 @@ columnKey: string;
     styles?: Partial<Styles>;
+    topSection?: React.ReactNode;
+    topSectionHeight?: number;
+    rowHoveredClassName?: string;
 }
@@ -119,0 +109,0 @@ export interface StreakSheetRef {

build/src/index.js

@@ -28,4 +28,6 @@ "use strict";
 
-var _react = _interopRequireWildcard(require("react"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
 
+var React = _interopRequireWildcard(require("react"));
+
 var _reactWindow = require("react-window");
@@ -57,2 +59,4 @@
 
+var _internalTypes = require("./internalTypes");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -64,3 +68,3 @@
 
-var InternalSheetInnerElementCtx = (0, _react.createContext)(undefined);
+var InternalSheetInnerElementCtx = (0, React.createContext)(undefined);
 
@@ -70,5 +74,5 @@ function InnerElement(props) {
 
-  var ref = (0, _react.useRef)(null);
+  var ref = (0, React.useRef)(null);
 
-  var _ref = (0, _react.useContext)(InternalSheetInnerElementCtx),
+  var _ref = (0, React.useContext)(InternalSheetInnerElementCtx),
       copiedRegion = _ref.copiedRegion,
@@ -83,3 +87,5 @@ handleGridDoubleClick = _ref.handleGridDoubleClick,
       sheetProps = _ref.sheetProps,
-      styles = _ref.styles;
+      styles = _ref.styles,
+      topSectionHeight = _ref.topSectionHeight,
+      setHoveredRow = _ref.setHoveredRow;
 
@@ -99,3 +105,3 @@ var ColumnHeaderCell = sheetProps.ColumnHeaderCell,
   }, 0);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     onDoubleClick: handleGridDoubleClick,
@@ -111,18 +117,31 @@ onKeyDown: handleGridKeyDown,
     }),
-    tabIndex: 0
-  }, /*#__PURE__*/_react["default"].createElement(_SelectionBackgrounds["default"], {
+    tabIndex: 0,
+    onMouseOver: function onMouseOver(event) {
+      var cellContainer = event.target.closest('div[data-row-index]');
+
+      if (cellContainer) {
+        var rowIndex = Number(cellContainer.dataset.rowIndex);
+        setHoveredRow(rowIndex);
+      }
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHoveredRow(undefined);
+    }
+  }, /*#__PURE__*/React.createElement(_SelectionBackgrounds["default"], {
     columnAndOverviewData: columnAndOverviewData,
     copiedRegion: copiedRegion,
     defaultRowHeight: defaultRowHeight,
+    topSectionHeight: topSectionHeight,
     sectionRowMatcher: sectionRowMatcher,
     selection: selection,
     styles: styles
-  }), props.children, /*#__PURE__*/_react["default"].createElement(_SelectionForegrounds["default"], {
+  }), props.children, /*#__PURE__*/React.createElement(_SelectionForegrounds["default"], {
     columnAndOverviewData: columnAndOverviewData,
     copiedRegion: copiedRegion,
     defaultRowHeight: defaultRowHeight,
+    topSectionHeight: topSectionHeight,
     sectionRowMatcher: sectionRowMatcher,
     selection: selection,
     styles: styles
-  }), /*#__PURE__*/_react["default"].createElement(_ColumnHeadersContainer["default"], {
+  }), /*#__PURE__*/React.createElement(_ColumnHeadersContainer["default"], {
     ColumnHeaderCell: ColumnHeaderCell,
@@ -138,5 +157,7 @@ columns: columnAndOverviewData.columns,
     styles: styles,
-    totalWidth: totalWidth
+    totalWidth: totalWidth,
+    topSection: sheetProps.topSection,
+    topSectionHeight: topSectionHeight
   }), columnAndOverviewData.sections.map(function (section) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: section.key,
@@ -153,3 +174,3 @@ style: {
     /*#__PURE__*/
-    _react["default"].createElement("div", {
+    React.createElement("div", {
       style: styles.sectionHeadersContainer({
@@ -162,7 +183,7 @@ backgroundColor: '#fff',
         position: 'sticky',
-        top: defaultRowHeight,
+        top: topSectionHeight + defaultRowHeight,
         width: totalWidth
       })
     }, columnAndOverviewData.columns.map(function (column, columnIndex) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: column.key,
@@ -183,3 +204,3 @@ style: styles.sectionHeaderCellContainer({
         })
-      }, /*#__PURE__*/_react["default"].createElement(SectionHeaderCell, {
+      }, /*#__PURE__*/React.createElement(SectionHeaderCell, {
         columnKey: column.key,
@@ -198,3 +219,3 @@ isHidden: section.isHidden,
 var _StreakSheet = function StreakSheet(props, ref) {
-  var _props$styles, _props$styles2, _props$styles3, _props$styles4, _props$styles5, _props$styles6, _props$styles7, _props$styles8, _props$styles9, _props$styles10, _props$styles11, _props$styles12, _props$styles13, _props$styles14, _props$styles15, _props$styles16, _props$styles17, _props$styles18;
+  var _props$topSectionHeig, _props$styles19, _props$styles20, _props$styles21, _props$styles22, _props$styles23, _props$styles24, _props$styles25, _props$styles26, _props$styles27, _props$styles28, _props$styles29, _props$styles30, _props$styles31, _props$styles32, _props$styles33, _props$styles34, _props$styles35, _props$styles36;
 
@@ -212,22 +233,27 @@ var Cell = props.Cell,
       width = props.width;
-  var styles = {
-    cell: ((_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.cell) || _identity["default"],
-    columnHeaderCellContainer: ((_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.columnHeaderCellContainer) || _identity["default"],
-    columnHeadersContainer: ((_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.columnHeadersContainer) || _identity["default"],
-    columnReorderIndicator: ((_props$styles4 = props.styles) === null || _props$styles4 === void 0 ? void 0 : _props$styles4.columnReorderIndicator) || _identity["default"],
-    columnReorderOverlay: ((_props$styles5 = props.styles) === null || _props$styles5 === void 0 ? void 0 : _props$styles5.columnReorderOverlay) || _identity["default"],
-    columnResizeHandle: ((_props$styles6 = props.styles) === null || _props$styles6 === void 0 ? void 0 : _props$styles6.columnResizeHandle) || _identity["default"],
-    columnResizeIndicator: ((_props$styles7 = props.styles) === null || _props$styles7 === void 0 ? void 0 : _props$styles7.columnResizeIndicator) || _identity["default"],
-    copiedRegionBackground: ((_props$styles8 = props.styles) === null || _props$styles8 === void 0 ? void 0 : _props$styles8.copiedRegionBackground) || _identity["default"],
-    copiedRegionForeground: ((_props$styles9 = props.styles) === null || _props$styles9 === void 0 ? void 0 : _props$styles9.copiedRegionForeground) || _identity["default"],
-    grid: ((_props$styles10 = props.styles) === null || _props$styles10 === void 0 ? void 0 : _props$styles10.grid) || _identity["default"],
-    highlightedRowBackground: ((_props$styles11 = props.styles) === null || _props$styles11 === void 0 ? void 0 : _props$styles11.highlightedRowBackground) || _identity["default"],
-    highlightedRowForeground: ((_props$styles12 = props.styles) === null || _props$styles12 === void 0 ? void 0 : _props$styles12.highlightedRowForeground) || _identity["default"],
-    primarySelectedCellBackground: ((_props$styles13 = props.styles) === null || _props$styles13 === void 0 ? void 0 : _props$styles13.primarySelectedCellBackground) || _identity["default"],
-    primarySelectedCellForeground: ((_props$styles14 = props.styles) === null || _props$styles14 === void 0 ? void 0 : _props$styles14.primarySelectedCellForeground) || _identity["default"],
-    sectionHeaderCellContainer: ((_props$styles15 = props.styles) === null || _props$styles15 === void 0 ? void 0 : _props$styles15.sectionHeaderCellContainer) || _identity["default"],
-    sectionHeadersContainer: ((_props$styles16 = props.styles) === null || _props$styles16 === void 0 ? void 0 : _props$styles16.sectionHeadersContainer) || _identity["default"],
-    selectionBackground: ((_props$styles17 = props.styles) === null || _props$styles17 === void 0 ? void 0 : _props$styles17.selectionBackground) || _identity["default"],
-    selectionForeground: ((_props$styles18 = props.styles) === null || _props$styles18 === void 0 ? void 0 : _props$styles18.selectionForeground) || _identity["default"]
-  };
+  var topSectionHeight = props.topSection ? (_props$topSectionHeig = props.topSectionHeight) !== null && _props$topSectionHeig !== void 0 ? _props$topSectionHeig : defaultRowHeight : 0;
+  var styles = (0, React.useMemo)(function () {
+    var _props$styles, _props$styles2, _props$styles3, _props$styles4, _props$styles5, _props$styles6, _props$styles7, _props$styles8, _props$styles9, _props$styles10, _props$styles11, _props$styles12, _props$styles13, _props$styles14, _props$styles15, _props$styles16, _props$styles17, _props$styles18;
+
+    return {
+      cell: ((_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.cell) || _identity["default"],
+      columnHeaderCellContainer: ((_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.columnHeaderCellContainer) || _identity["default"],
+      columnHeadersContainer: ((_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.columnHeadersContainer) || _identity["default"],
+      columnReorderIndicator: ((_props$styles4 = props.styles) === null || _props$styles4 === void 0 ? void 0 : _props$styles4.columnReorderIndicator) || _identity["default"],
+      columnReorderOverlay: ((_props$styles5 = props.styles) === null || _props$styles5 === void 0 ? void 0 : _props$styles5.columnReorderOverlay) || _identity["default"],
+      columnResizeHandle: ((_props$styles6 = props.styles) === null || _props$styles6 === void 0 ? void 0 : _props$styles6.columnResizeHandle) || _identity["default"],
+      columnResizeIndicator: ((_props$styles7 = props.styles) === null || _props$styles7 === void 0 ? void 0 : _props$styles7.columnResizeIndicator) || _identity["default"],
+      copiedRegionBackground: ((_props$styles8 = props.styles) === null || _props$styles8 === void 0 ? void 0 : _props$styles8.copiedRegionBackground) || _identity["default"],
+      copiedRegionForeground: ((_props$styles9 = props.styles) === null || _props$styles9 === void 0 ? void 0 : _props$styles9.copiedRegionForeground) || _identity["default"],
+      grid: ((_props$styles10 = props.styles) === null || _props$styles10 === void 0 ? void 0 : _props$styles10.grid) || _identity["default"],
+      highlightedRowBackground: ((_props$styles11 = props.styles) === null || _props$styles11 === void 0 ? void 0 : _props$styles11.highlightedRowBackground) || _identity["default"],
+      highlightedRowForeground: ((_props$styles12 = props.styles) === null || _props$styles12 === void 0 ? void 0 : _props$styles12.highlightedRowForeground) || _identity["default"],
+      primarySelectedCellBackground: ((_props$styles13 = props.styles) === null || _props$styles13 === void 0 ? void 0 : _props$styles13.primarySelectedCellBackground) || _identity["default"],
+      primarySelectedCellForeground: ((_props$styles14 = props.styles) === null || _props$styles14 === void 0 ? void 0 : _props$styles14.primarySelectedCellForeground) || _identity["default"],
+      sectionHeaderCellContainer: ((_props$styles15 = props.styles) === null || _props$styles15 === void 0 ? void 0 : _props$styles15.sectionHeaderCellContainer) || _identity["default"],
+      sectionHeadersContainer: ((_props$styles16 = props.styles) === null || _props$styles16 === void 0 ? void 0 : _props$styles16.sectionHeadersContainer) || _identity["default"],
+      selectionBackground: ((_props$styles17 = props.styles) === null || _props$styles17 === void 0 ? void 0 : _props$styles17.selectionBackground) || _identity["default"],
+      selectionForeground: ((_props$styles18 = props.styles) === null || _props$styles18 === void 0 ? void 0 : _props$styles18.selectionForeground) || _identity["default"]
+    };
+  }, [(_props$styles19 = props.styles) === null || _props$styles19 === void 0 ? void 0 : _props$styles19.cell, (_props$styles20 = props.styles) === null || _props$styles20 === void 0 ? void 0 : _props$styles20.columnHeaderCellContainer, (_props$styles21 = props.styles) === null || _props$styles21 === void 0 ? void 0 : _props$styles21.columnHeadersContainer, (_props$styles22 = props.styles) === null || _props$styles22 === void 0 ? void 0 : _props$styles22.columnReorderIndicator, (_props$styles23 = props.styles) === null || _props$styles23 === void 0 ? void 0 : _props$styles23.columnReorderOverlay, (_props$styles24 = props.styles) === null || _props$styles24 === void 0 ? void 0 : _props$styles24.columnResizeHandle, (_props$styles25 = props.styles) === null || _props$styles25 === void 0 ? void 0 : _props$styles25.columnResizeIndicator, (_props$styles26 = props.styles) === null || _props$styles26 === void 0 ? void 0 : _props$styles26.copiedRegionBackground, (_props$styles27 = props.styles) === null || _props$styles27 === void 0 ? void 0 : _props$styles27.copiedRegionForeground, (_props$styles28 = props.styles) === null || _props$styles28 === void 0 ? void 0 : _props$styles28.grid, (_props$styles29 = props.styles) === null || _props$styles29 === void 0 ? void 0 : _props$styles29.highlightedRowBackground, (_props$styles30 = props.styles) === null || _props$styles30 === void 0 ? void 0 : _props$styles30.highlightedRowForeground, (_props$styles31 = props.styles) === null || _props$styles31 === void 0 ? void 0 : _props$styles31.primarySelectedCellBackground, (_props$styles32 = props.styles) === null || _props$styles32 === void 0 ? void 0 : _props$styles32.primarySelectedCellForeground, (_props$styles33 = props.styles) === null || _props$styles33 === void 0 ? void 0 : _props$styles33.sectionHeaderCellContainer, (_props$styles34 = props.styles) === null || _props$styles34 === void 0 ? void 0 : _props$styles34.sectionHeadersContainer, (_props$styles35 = props.styles) === null || _props$styles35 === void 0 ? void 0 : _props$styles35.selectionBackground, (_props$styles36 = props.styles) === null || _props$styles36 === void 0 ? void 0 : _props$styles36.selectionForeground]);
   var columnAndOverviewData = sheetData.columnAndOverviewData,
@@ -242,3 +268,3 @@ getJumpPoint = sheetData.getJumpPoint,
 
-  var _useReducer = (0, _react.useReducer)(function (state, action) {
+  var _useReducer = (0, React.useReducer)(function (state, action) {
     return (0, _selectionReducer["default"])(state, action, totalRowCount, totalColumnCount);
@@ -250,3 +276,3 @@ }, []),
 
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, React.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -256,7 +282,7 @@ cellBeingEdited = _useState2[0],
 
-  var setCellBeingEdited = (0, _react.useCallback)(function (newValue) {
+  var setCellBeingEdited = (0, React.useCallback)(function (newValue) {
     _setCellBeingEdited(function (cellBeingEdited) {
       var newActual = typeof newValue === 'function' ? newValue(cellBeingEdited) : newValue; // keep exact old value if new value is equivalent
 
-      if (cellBeingEdited && newActual && cellBeingEdited[0] === newActual[0] && cellBeingEdited[1] === newActual[1]) {
+      if (cellBeingEdited !== newActual && cellBeingEdited && newActual && cellBeingEdited[0] === newActual[0] && cellBeingEdited[1] === newActual[1]) {
         return cellBeingEdited;
@@ -269,14 +295,29 @@ }
 
-  var _useState3 = (0, _react.useState)(null),
+  var _useState3 = (0, React.useState)(undefined),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      copyOperation = _useState4[0],
-      setCopyOperation = _useState4[1];
+      hoveredRow = _useState4[0],
+      setHoveredRow = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, React.useState)(null),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isDragging = _useState6[0],
-      setIsDragging = _useState6[1];
+      copyOperation = _useState6[0],
+      setCopyOperation = _useState6[1];
 
-  var gridRef = (0, _react.useRef)(null);
-  var cellIndexesToKeysAndData = (0, _react.useCallback)(function (rowIndex, columnIndex) {
+  var _useState7 = (0, React.useState)(false),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      isDragging = _useState8[0],
+      setIsDragging = _useState8[1];
+
+  var gridRef = (0, React.useRef)(null);
+  var firstRender = (0, React.useRef)(true);
+  (0, React.useEffect)(function () {
+    if (!firstRender.current) {
+      var _gridRef$current;
+
+      (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.resetAfterRowIndex(0);
+    } else {
+      firstRender.current = false;
+    }
+  }, [topSectionHeight]);
+  var cellIndexesToKeysAndData = (0, React.useCallback)(function (rowIndex, columnIndex) {
     var position = sectionRowMatcher.getSectionRow(rowIndex);
@@ -312,3 +353,3 @@
 
-  var cellIndexesToKeys = (0, _react.useCallback)(function (rowIndex, columnIndex) {
+  var cellIndexesToKeys = (0, React.useCallback)(function (rowIndex, columnIndex) {
     var result = cellIndexesToKeysAndData(rowIndex, columnIndex);
@@ -329,7 +370,7 @@
   }, [cellIndexesToKeysAndData]);
-  var cellKeysToIndexes = (0, _react.useCallback)(function (sectionKey, rowKey, columnKey) {
+  var cellKeysToIndexes = (0, React.useCallback)(function (sectionKey, rowKey, columnKey) {
     // TODO: implement
     return null;
   }, []);
-  var copy = (0, _react.useCallback)(function (didCut) {
+  var copy = (0, React.useCallback)(function (didCut) {
     if (selection.length === 0 || !onPaste) {
@@ -345,3 +386,3 @@ return false;
   }, [onPaste, selection]);
-  var paste = (0, _react.useCallback)(function () {
+  var paste = (0, React.useCallback)(function () {
     if (selection.length === 0 || !copyOperation || !onPaste) {
@@ -387,3 +428,3 @@ return false;
   }, [cellIndexesToKeys, copyOperation, onPaste, onUnsupportedOperation, selection]);
-  var handleGridDoubleClick = (0, _react.useCallback)(function (event) {
+  var handleGridDoubleClick = (0, React.useCallback)(function (event) {
     var cellIndexes = (0, _getCellIndexesFromMouseEvent["default"])(event);
@@ -399,3 +440,3 @@
   }, [setCellBeingEdited]);
-  var handleGridKeyDown = (0, _react.useCallback)(function (event) {
+  var handleGridKeyDown = (0, React.useCallback)(function (event) {
     var key = event.key,
@@ -699,4 +740,4 @@ metaKey = event.metaKey,
     event.stopPropagation();
-  }, [cellBeingEdited, cellIndexesToKeys, cellKeysToIndexes, copy, getJumpPoint, onOpenSearch, paste, selection]);
-  var handleGridMouseDown = (0, _react.useCallback)(function (event) {
+  }, [cellBeingEdited, setCellBeingEdited, cellIndexesToKeys, cellKeysToIndexes, copy, getJumpPoint, onOpenSearch, paste, selection]);
+  var handleGridMouseDown = (0, React.useCallback)(function (event) {
     var cellIndexes = (0, _getCellIndexesFromMouseEvent["default"])(event);
@@ -731,3 +772,3 @@
       if (cellBeingEdited && cellBeingEdited[0] === cellIndexes[0] && cellBeingEdited[1] === cellIndexes[1]) {
-        return cellIndexes;
+        return cellBeingEdited;
       }
@@ -738,4 +779,4 @@
     setIsDragging(true);
-  }, []);
-  var handleGridMouseMove = (0, _react.useCallback)(function (event) {
+  }, [setCellBeingEdited]);
+  var handleGridMouseMove = (0, React.useCallback)(function (event) {
     if (!isDragging) {
@@ -757,6 +798,6 @@ return;
   }, [isDragging]);
-  var handleGridMouseUp = (0, _react.useCallback)(function () {
+  var handleGridMouseUp = (0, React.useCallback)(function () {
     setIsDragging(false);
   }, []);
-  (0, _react.useImperativeHandle)(ref, function () {
+  (0, React.useImperativeHandle)(ref, function () {
     return {
@@ -793,3 +834,3 @@ getSelectedCells: function getSelectedCells() {
       moveColumnLeft: function moveColumnLeft(columnKey) {
-        var _gridRef$current;
+        var _gridRef$current2;
 
@@ -811,6 +852,6 @@ if (!onSwapColumns) {
         onSwapColumns(columnKey, leftColumnKey);
-        (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.resetAfterColumnIndex(leftColumnIndex);
+        (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.resetAfterColumnIndex(leftColumnIndex);
       },
       moveColumnRight: function moveColumnRight(columnKey) {
-        var _gridRef$current2;
+        var _gridRef$current3;
 
@@ -832,3 +873,3 @@ if (!onSwapColumns) {
         onSwapColumns(columnKey, rightColumnKey);
-        (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.resetAfterColumnIndex(columnIndex);
+        (_gridRef$current3 = gridRef.current) === null || _gridRef$current3 === void 0 ? void 0 : _gridRef$current3.resetAfterColumnIndex(columnIndex);
       },
@@ -839,5 +880,5 @@ refreshRows: function refreshRows() {
       scrollToSection: function scrollToSection(sectionKey) {
-        var _gridRef$current3;
+        var _gridRef$current4;
 
-        (_gridRef$current3 = gridRef.current) === null || _gridRef$current3 === void 0 ? void 0 : _gridRef$current3.scrollToItem({
+        (_gridRef$current4 = gridRef.current) === null || _gridRef$current4 === void 0 ? void 0 : _gridRef$current4.scrollToItem({
           align: 'start',
@@ -850,23 +891,85 @@ rowIndex: (0, _getSectionRowIndex["default"])(columnAndOverviewData.sections, sectionKey)
   // const frozenColumns = props.frozenColumns || 0;
-  // TODO memoize itemData
 
-  var itemData = {
-    Cell: Cell,
-    cellBeingEdited: cellBeingEdited,
-    cellIndexesToKeysAndData: cellIndexesToKeysAndData,
-    columnAndOverviewData: sheetData.columnAndOverviewData,
-    rowsBySection: sheetData.rowsBySection,
-    sectionRowMatcher: sectionRowMatcher,
-    styles: styles,
-    setCellBeingEdited: setCellBeingEdited
-  };
+  var itemData = (0, React.useMemo)(function () {
+    return {
+      Cell: Cell,
+      cellBeingEdited: cellBeingEdited,
+      cellIndexesToKeysAndData: cellIndexesToKeysAndData,
+      sectionRowMatcher: sectionRowMatcher,
+      styles: styles,
+      setCellBeingEdited: setCellBeingEdited,
+      rowHoveredClassName: props.rowHoveredClassName
+    };
+  }, [Cell, cellBeingEdited, cellIndexesToKeysAndData, sectionRowMatcher, styles, setCellBeingEdited, props.rowHoveredClassName]);
   var sheetDataForStreakSheet = sheetData.useByStreakSheet();
-
-  var onItemsRendered = function onItemsRendered(_ref8) {
+  var onItemsRendered = (0, React.useCallback)(function (_ref8) {
     var visibleRowStartIndex = _ref8.visibleRowStartIndex,
         visibleRowStopIndex = _ref8.visibleRowStopIndex;
     sheetDataForStreakSheet.onScroll(visibleRowStartIndex, visibleRowStopIndex);
-  };
+  }, [sheetDataForStreakSheet]);
+  var gridElement = (0, React.useMemo)(function () {
+    return /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid, {
+      ref: gridRef,
+      columnCount: columnAndOverviewData.columns.length,
+      estimatedColumnWidth: (0, _sumBy["default"])(columnAndOverviewData.columns, function (c) {
+        return c.width;
+      }) / columnAndOverviewData.columns.length,
+      columnWidth: function columnWidth(index) {
+        var columns = columnAndOverviewData.columns;
+        var column = columns[index];
 
-  return /*#__PURE__*/_react["default"].createElement(InternalSheetInnerElementCtx.Provider, {
+        if (!column) {
+          throw new Error("Column index outside bounds of columns array; columns length: ".concat(columns.length, "; index: ").concat(index));
+        }
+
+        return column.width;
+      },
+      rowCount: totalRowCount,
+      rowHeight: function rowHeight(index) {
+        var position = sectionRowMatcher.getSectionRow(index);
+
+        if (!position) {
+          return defaultRowHeight;
+        }
+
+        var sectionIndex = position.sectionIndex,
+            rowIndex = position.rowIndex;
+
+        if (sectionIndex === -1 && rowIndex === -1) {
+          // column header row
+          return topSectionHeight + defaultRowHeight;
+        } else if (sectionIndex !== -1 && rowIndex === -1) {
+          // section row
+          return columnAndOverviewData.sections[sectionIndex].sectionRowHeight;
+        } else {
+          // regular row
+          return defaultRowHeight;
+        }
+      },
+      estimatedRowHeight: defaultRowHeight,
+      width: width,
+      height: height,
+      innerElementType: InnerElement,
+      itemData: itemData,
+      itemKey: function itemKey(_ref9) {
+        var columnIndex = _ref9.columnIndex,
+            rowIndex = _ref9.rowIndex;
+        var keys = cellIndexesToKeys(rowIndex, columnIndex);
+
+        if (!keys) {
+          return "".concat(rowIndex, "-").concat(columnIndex);
+        }
+
+        var columnKey = keys.columnKey,
+            rowKey = keys.rowKey,
+            sectionKey = keys.sectionKey;
+        return "".concat(sectionKey, "-").concat(rowKey, "-").concat(columnKey);
+      },
+      overscanColumnCount: renderOverscanColumnCount,
+      overscanRowCount: renderOverscanRowCount,
+      onItemsRendered: onItemsRendered,
+      style: styles.grid({})
+    }, _CellContainer["default"]);
+  }, [cellIndexesToKeys, columnAndOverviewData, defaultRowHeight, height, itemData, onItemsRendered, renderOverscanColumnCount, renderOverscanRowCount, sectionRowMatcher, styles, topSectionHeight, totalRowCount, width]);
+  return /*#__PURE__*/React.createElement(InternalSheetInnerElementCtx.Provider, {
     value: {
@@ -882,5 +985,5 @@ // TODO put less in context? use observedBits?
       resetAfterColumnIndex: function resetAfterColumnIndex(index, shouldForceUpdate) {
-        var _gridRef$current4;
+        var _gridRef$current5;
 
-        return (_gridRef$current4 = gridRef.current) === null || _gridRef$current4 === void 0 ? void 0 : _gridRef$current4.resetAfterColumnIndex(index, shouldForceUpdate);
+        return (_gridRef$current5 = gridRef.current) === null || _gridRef$current5 === void 0 ? void 0 : _gridRef$current5.resetAfterColumnIndex(index, shouldForceUpdate);
       },
@@ -890,65 +993,15 @@ rowsBySection: sheetData.rowsBySection,
       sheetProps: props,
-      styles: styles
+      styles: styles,
+      topSectionHeight: topSectionHeight,
+      setHoveredRow: props.rowHoveredClassName == null ? _noop["default"] : setHoveredRow
     }
-  }, /*#__PURE__*/_react["default"].createElement(_reactWindow.VariableSizeGrid, {
-    ref: gridRef,
-    columnCount: columnAndOverviewData.columns.length,
-    estimatedColumnWidth: (0, _sumBy["default"])(columnAndOverviewData.columns, function (c) {
-      return c.width;
-    }) / columnAndOverviewData.columns.length,
-    columnWidth: function columnWidth(index) {
-      var columns = columnAndOverviewData.columns;
-      var column = columns[index];
-
-      if (!column) {
-        throw new Error("Column index outside bounds of columns array; columns length: ".concat(columns.length, "; index: ").concat(index));
-      }
-
-      return column.width;
-    },
-    rowCount: totalRowCount,
-    rowHeight: function rowHeight(index) {
-      var position = sectionRowMatcher.getSectionRow(index);
-
-      if (!position) {
-        return defaultRowHeight;
-      }
-
-      var sectionIndex = position.sectionIndex,
-          rowIndex = position.rowIndex;
-
-      if (sectionIndex !== -1 && rowIndex === -1) {
-        return columnAndOverviewData.sections[sectionIndex].sectionRowHeight;
-      } else {
-        return defaultRowHeight;
-      }
-    },
-    estimatedRowHeight: defaultRowHeight,
-    width: width,
-    height: height,
-    innerElementType: InnerElement,
-    itemData: itemData,
-    itemKey: function itemKey(_ref9) {
-      var columnIndex = _ref9.columnIndex,
-          rowIndex = _ref9.rowIndex;
-      var keys = cellIndexesToKeys(rowIndex, columnIndex);
-
-      if (!keys) {
-        return "".concat(rowIndex, "-").concat(columnIndex);
-      }
-
-      var columnKey = keys.columnKey,
-          rowKey = keys.rowKey,
-          sectionKey = keys.sectionKey;
-      return "".concat(sectionKey, "-").concat(rowKey, "-").concat(columnKey);
-    },
-    overscanColumnCount: renderOverscanColumnCount,
-    overscanRowCount: renderOverscanRowCount,
-    onItemsRendered: onItemsRendered,
-    style: styles.grid({})
-  }, _CellContainer["default"]));
+  }, /*#__PURE__*/React.createElement(_internalTypes.CellContainerContext.Provider, {
+    value: {
+      hoveredRow: hoveredRow
+    }
+  }, gridElement));
 }; // eslint-disable-next-line react/display-name
 
 
-var StreakSheet = _react["default"].memo((0, _react.forwardRef)(_StreakSheet));
+var StreakSheet = React.memo((0, React.forwardRef)(_StreakSheet));
 
@@ -955,0 +1008,0 @@ function searchForRowsChunk(sectionRows, rowIndex) {

build/src/internalTypes.d.ts

@@ -0,3 +1,4 @@
+import * as React from 'react';
 import type { ComponentType } from 'react';
-import type { CellProps, ColumnAndOverviewData, RowsResult, Styles } from '.';
+import type { CellProps, RowsResult, Styles } from '.';
 import type SectionRowMatcher from './SectionRowMatcher';
@@ -23,7 +24,6 @@ import type { SectionRow } from './SectionRowMatcher';
     cellIndexesToKeysAndData: (rowIndex: number, columnIndex: number) => CellIndexesToKeysAndDataResult | null;
-    columnAndOverviewData: ColumnAndOverviewData;
-    rowsBySection: RowsBySection<T>;
     sectionRowMatcher: SectionRowMatcher;
     styles: Styles;
     setCellBeingEdited: React.Dispatch<React.SetStateAction<CellIndexes | null>>;
+    rowHoveredClassName?: string;
 }
@@ -49,1 +49,5 @@ export interface InternalPasteTarget {
 export declare type UnsupportedOperation = 'PASTE_TO_MULTIPLE_SELECTIONS';
+export interface CellContainerContextI {
+    hoveredRow?: number;
+}
+export declare const CellContainerContext: React.Context<CellContainerContextI | undefined>;

build/src/internalTypes.js

 "use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CellContainerContext = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var CellContainerContext = React.createContext(undefined, function (prev, next) {
+  var r = 0;
+
+  if (prev.hoveredRow !== next.hoveredRow) {
+    if (prev.hoveredRow !== undefined) {
+      r |= 1 << prev.hoveredRow % 30;
+    }
+
+    if (next.hoveredRow !== undefined) {
+      r |= 1 << next.hoveredRow % 30;
+    }
+  }
+
+  return r;
+});
+exports.CellContainerContext = CellContainerContext;
 //# sourceMappingURL=internalTypes.js.map

build/src/RegionSpan.d.ts

@@ -8,2 +8,3 @@ import { CSSProperties } from 'react';
     defaultRowHeight: number;
+    topSectionHeight: number;
     region: [CellIndexes, CellIndexes];
@@ -13,3 +14,3 @@ sectionRowMatcher: SectionRowMatcher;
 }
-export default function RegionSpan({ columnAndOverviewData, defaultRowHeight, region, sectionRowMatcher, styleFunction, }: Props): JSX.Element | null;
+export default function RegionSpan({ columnAndOverviewData, defaultRowHeight, topSectionHeight, region, sectionRowMatcher, styleFunction, }: Props): JSX.Element | null;
 export {};

build/src/RegionSpan.js

@@ -25,2 +25,3 @@ "use strict";
       defaultRowHeight = _ref.defaultRowHeight,
+      topSectionHeight = _ref.topSectionHeight,
       region = _ref.region,
@@ -34,3 +35,3 @@ sectionRowMatcher = _ref.sectionRowMatcher,
 
-  var rectForRange = (0, _getRectForRange["default"])(start, end, columnAndOverviewData, sectionRowMatcher, defaultRowHeight);
+  var rectForRange = (0, _getRectForRange["default"])(start, end, columnAndOverviewData, sectionRowMatcher, defaultRowHeight, topSectionHeight);
   return rectForRange && /*#__PURE__*/_react["default"].createElement("div", {
@@ -37,0 +38,0 @@ style: styleFunction(_objectSpread({

build/src/SelectionBackgrounds.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" />
     defaultRowHeight: number;
+    topSectionHeight: number;
     sectionRowMatcher: SectionRowMatcher;
@@ -15,3 +16,3 @@ selection: SelectionState;
 }
-export default function SelectionBackgrounds({ columnAndOverviewData, copiedRegion, defaultRowHeight, sectionRowMatcher, selection, styles, }: Props): JSX.Element;
+export default function SelectionBackgrounds({ columnAndOverviewData, copiedRegion, defaultRowHeight, topSectionHeight, sectionRowMatcher, selection, styles, }: Props): JSX.Element;
 export {};

build/src/SelectionBackgrounds.js

@@ -28,2 +28,3 @@ "use strict";
       defaultRowHeight = _ref.defaultRowHeight,
+      topSectionHeight = _ref.topSectionHeight,
       sectionRowMatcher = _ref.sectionRowMatcher,
@@ -37,2 +38,3 @@ selection = _ref.selection,
     defaultRowHeight: defaultRowHeight,
+    topSectionHeight: topSectionHeight,
     region: highlightedRowRegion,
@@ -49,2 +51,3 @@ sectionRowMatcher: sectionRowMatcher,
       defaultRowHeight: defaultRowHeight,
+      topSectionHeight: topSectionHeight,
       key: index,
@@ -62,2 +65,3 @@ region: region,
     defaultRowHeight: defaultRowHeight,
+    topSectionHeight: topSectionHeight,
     region: primarySelectedCellRegion,
@@ -73,2 +77,3 @@ sectionRowMatcher: sectionRowMatcher,
     defaultRowHeight: defaultRowHeight,
+    topSectionHeight: topSectionHeight,
     region: copiedRegion,
@@ -75,0 +80,0 @@ sectionRowMatcher: sectionRowMatcher,

build/src/SelectionForegrounds.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" />
     defaultRowHeight: number;
+    topSectionHeight: number;
     sectionRowMatcher: SectionRowMatcher;
@@ -15,3 +16,3 @@ selection: SelectionState;
 }
-export default function SelectionForegrounds({ columnAndOverviewData, copiedRegion, defaultRowHeight, sectionRowMatcher, selection, styles, }: Props): JSX.Element;
+export default function SelectionForegrounds({ columnAndOverviewData, copiedRegion, defaultRowHeight, topSectionHeight, sectionRowMatcher, selection, styles, }: Props): JSX.Element;
 export {};

build/src/SelectionForegrounds.js

@@ -28,2 +28,3 @@ "use strict";
       defaultRowHeight = _ref.defaultRowHeight,
+      topSectionHeight = _ref.topSectionHeight,
       sectionRowMatcher = _ref.sectionRowMatcher,
@@ -37,2 +38,3 @@ selection = _ref.selection,
     defaultRowHeight: defaultRowHeight,
+    topSectionHeight: topSectionHeight,
     region: highlightedRowRegion,
@@ -47,2 +49,3 @@ sectionRowMatcher: sectionRowMatcher,
       defaultRowHeight: defaultRowHeight,
+      topSectionHeight: topSectionHeight,
       key: index,
@@ -60,2 +63,3 @@ region: region,
     defaultRowHeight: defaultRowHeight,
+    topSectionHeight: topSectionHeight,
     region: primarySelectedCellRegion,
@@ -71,2 +75,3 @@ sectionRowMatcher: sectionRowMatcher,
     defaultRowHeight: defaultRowHeight,
+    topSectionHeight: topSectionHeight,
     region: copiedRegion,
@@ -73,0 +78,0 @@ sectionRowMatcher: sectionRowMatcher,

build/src/useSheetData.js

@@ -148,170 +148,177 @@ "use strict";
 
-  var nextStreakSheetId = (0, _react.useRef)(0); // This function is to be used as a hook inside of a StreakSheet instance.
-  // This allows one SheetData instance to be used by several StreakSheet
-  // instances and tell them apart.
+  var nextStreakSheetId = (0, _react.useRef)(0); // This function is used inside useByStreaksheet. It needs to reference
+  // the latest state. This is a bit gross, sorry.
 
-  function useByStreakSheet() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var _useState5 = (0, _react.useState)(function () {
-      return nextStreakSheetId.current++;
-    }),
-        _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
-        sheetId = _useState6[0];
+  var onScrollLatest = (0, _react.useRef)();
 
-    (0, _react.useEffect)(function () {
-      return function () {
-        setTimeout(function () {// TODO unload rows for this streaksheet if there are still other
-          // streaksheets mounted with this same sheetdata. TODO cancel this
-          // timeout if component where useSheetData was called unmounts.
-        }, 1);
+  onScrollLatest.current = function (visibleRowStartIndex, visibleRowStopIndex) {
+    function getSectionRowRangeFromBufferAmount(bufferAmount) {
+      return {
+        start: adjustNegativeSectionOrRow(sectionRowMatcher.getSectionRow(Math.max(0, visibleRowStartIndex - bufferAmount))),
+        stop: adjustNegativeSectionOrRow(sectionRowMatcher.getSectionRow(Math.min(totalRowCount - 1, visibleRowStopIndex + bufferAmount)))
       };
-    }, []);
+    } // TODO
 
-    function onScroll(visibleRowStartIndex, visibleRowStopIndex) {
-      function getSectionRowRangeFromBufferAmount(bufferAmount) {
-        return {
-          start: adjustNegativeSectionOrRow(sectionRowMatcher.getSectionRow(Math.max(0, visibleRowStartIndex - bufferAmount))),
-          stop: adjustNegativeSectionOrRow(sectionRowMatcher.getSectionRow(Math.min(totalRowCount - 1, visibleRowStopIndex + bufferAmount)))
-        };
-      } // TODO
 
+    if (options.dataHandlers.length !== 1) {
+      throw new Error('Only one dataHandler is supported currently');
+    }
 
-      if (options.dataHandlers.length !== 1) {
-        throw new Error('Only one dataHandler is supported currently');
-      }
+    var _iterator2 = _createForOfIteratorHelper(options.dataHandlers),
+        _step2;
 
-      var _iterator2 = _createForOfIteratorHelper(options.dataHandlers),
-          _step2;
+    try {
+      var _loop = function _loop() {
+        var _dataHandler$requestT, _dataHandler$requestL, _dataHandler$dropLimi, _dataHandler$dropTrig;
 
-      try {
-        var _loop = function _loop() {
-          var _dataHandler$requestT, _dataHandler$requestL, _dataHandler$dropLimi, _dataHandler$dropTrig;
+        var dataHandler = _step2.value;
+        var requestTriggerRange = getSectionRowRangeFromBufferAmount((_dataHandler$requestT = dataHandler.requestTriggerDistance) !== null && _dataHandler$requestT !== void 0 ? _dataHandler$requestT : 50);
+        var requestLimitRange = getSectionRowRangeFromBufferAmount((_dataHandler$requestL = dataHandler.requestLimitDistance) !== null && _dataHandler$requestL !== void 0 ? _dataHandler$requestL : 100);
+        var dropLimitRange = getSectionRowRangeFromBufferAmount((_dataHandler$dropLimi = dataHandler.dropLimitDistance) !== null && _dataHandler$dropLimi !== void 0 ? _dataHandler$dropLimi : 150);
+        var dropTriggerRange = getSectionRowRangeFromBufferAmount((_dataHandler$dropTrig = dataHandler.dropTriggerDistance) !== null && _dataHandler$dropTrig !== void 0 ? _dataHandler$dropTrig : 250); // Check to see if any known rows or active requests are entirely outside the DropTriggerZone.
+        // TODO ignore rows that are needed by other sheetIds
 
-          var dataHandler = _step2.value;
-          var requestTriggerRange = getSectionRowRangeFromBufferAmount((_dataHandler$requestT = dataHandler.requestTriggerDistance) !== null && _dataHandler$requestT !== void 0 ? _dataHandler$requestT : 50);
-          var requestLimitRange = getSectionRowRangeFromBufferAmount((_dataHandler$requestL = dataHandler.requestLimitDistance) !== null && _dataHandler$requestL !== void 0 ? _dataHandler$requestL : 100);
-          var dropLimitRange = getSectionRowRangeFromBufferAmount((_dataHandler$dropLimi = dataHandler.dropLimitDistance) !== null && _dataHandler$dropLimi !== void 0 ? _dataHandler$dropLimi : 150);
-          var dropTriggerRange = getSectionRowRangeFromBufferAmount((_dataHandler$dropTrig = dataHandler.dropTriggerDistance) !== null && _dataHandler$dropTrig !== void 0 ? _dataHandler$dropTrig : 250); // Check to see if any known rows or active requests are entirely outside the DropTriggerZone.
-          // TODO ignore rows that are needed by other sheetIds
+        var dropTriggered = (0, _findStartedRowsRequestsOutsideRange["default"])(startedRowsRequests, sectionKeysToIndexes, dropTriggerRange, null);
 
-          var dropTriggered = (0, _findStartedRowsRequestsOutsideRange["default"])(startedRowsRequests, sectionKeysToIndexes, dropTriggerRange, null);
+        if (dropTriggered) {
+          (0, _findStartedRowsRequestsOutsideRange["default"])(startedRowsRequests, sectionKeysToIndexes, dropLimitRange, function (outsideRequests) {
+            var sectionKey = outsideRequests.sectionKey,
+                requestIndexes = outsideRequests.requestIndexes;
 
-          if (dropTriggered) {
-            (0, _findStartedRowsRequestsOutsideRange["default"])(startedRowsRequests, sectionKeysToIndexes, dropLimitRange, function (outsideRequests) {
-              var sectionKey = outsideRequests.sectionKey,
-                  requestIndexes = outsideRequests.requestIndexes;
+            if (requestIndexes === 'WHOLE SECTION') {
+              startedRowsRequests[sectionKey].forEach(function (request) {
+                var _request$abortControl2;
 
-              if (requestIndexes === 'WHOLE SECTION') {
-                startedRowsRequests[sectionKey].forEach(function (request) {
-                  var _request$abortControl2;
+                (_request$abortControl2 = request.abortController) === null || _request$abortControl2 === void 0 ? void 0 : _request$abortControl2.abort();
+                request.removerAbortController.abort();
+              });
+              delete startedRowsRequests[sectionKey];
+            } else {
+              (0, _pullAt["default"])(startedRowsRequests[sectionKey], requestIndexes).forEach(function (request) {
+                var _request$abortControl3;
 
-                  (_request$abortControl2 = request.abortController) === null || _request$abortControl2 === void 0 ? void 0 : _request$abortControl2.abort();
-                  request.removerAbortController.abort();
-                });
+                (_request$abortControl3 = request.abortController) === null || _request$abortControl3 === void 0 ? void 0 : _request$abortControl3.abort();
+                request.removerAbortController.abort();
+              });
+
+              if (startedRowsRequests[sectionKey].length === 0) {
                 delete startedRowsRequests[sectionKey];
-              } else {
-                (0, _pullAt["default"])(startedRowsRequests[sectionKey], requestIndexes).forEach(function (request) {
-                  var _request$abortControl3;
+              }
+            }
+          });
+        } // Done handling unloads.
+        // Now handle starting any necessary loads.
+        // Check if there are any gaps inside the requestTriggerZone
 
-                  (_request$abortControl3 = request.abortController) === null || _request$abortControl3 === void 0 ? void 0 : _request$abortControl3.abort();
-                  request.removerAbortController.abort();
-                });
 
-                if (startedRowsRequests[sectionKey].length === 0) {
-                  delete startedRowsRequests[sectionKey];
-                }
-              }
-            });
-          } // Done handling unloads.
-          // Now handle starting any necessary loads.
-          // Check if there are any gaps inside the requestTriggerZone
+        var requestTriggered = (0, _findMissingRowsInRange["default"])(startedRowsRequests, columnAndOverviewData.sections, requestTriggerRange, null);
 
+        if (requestTriggered) {
+          (0, _findMissingRowsInRange["default"])(startedRowsRequests, columnAndOverviewData.sections, requestLimitRange, function (missingRows) {
+            var section = columnAndOverviewData.sections[missingRows.sectionIndex];
+            var abortController = new AbortController();
+            var removerAbortController = new AbortController();
+            var request = {
+              startIndex: missingRows.startRowIndex,
+              countHint: missingRows.count,
+              abortController: abortController,
+              removerAbortController: removerAbortController
+            };
 
-          var requestTriggered = (0, _findMissingRowsInRange["default"])(startedRowsRequests, columnAndOverviewData.sections, requestTriggerRange, null);
+            if (!startedRowsRequests[section.key]) {
+              startedRowsRequests[section.key] = [request];
+            } else {
+              var newIndex = (0, _sortedIndexBy["default"])(startedRowsRequests[section.key], request, function (r) {
+                return r.startIndex;
+              });
+              startedRowsRequests[section.key].splice(newIndex, 0, request);
+            }
 
-          if (requestTriggered) {
-            (0, _findMissingRowsInRange["default"])(startedRowsRequests, columnAndOverviewData.sections, requestLimitRange, function (missingRows) {
-              var section = columnAndOverviewData.sections[missingRows.sectionIndex];
-              var abortController = new AbortController();
-              var removerAbortController = new AbortController();
-              var request = {
-                startIndex: missingRows.startRowIndex,
-                countHint: missingRows.count,
-                abortController: abortController,
-                removerAbortController: removerAbortController
-              };
-
-              if (!startedRowsRequests[section.key]) {
-                startedRowsRequests[section.key] = [request];
-              } else {
-                var newIndex = (0, _sortedIndexBy["default"])(startedRowsRequests[section.key], request, function (r) {
-                  return r.startIndex;
+            dataHandler.getRows(section.key, missingRows.startRowIndex, missingRows.count, abortController.signal).then(function (rowsResult) {
+              if (abortController.signal.aborted) return;
+              request.abortController = null;
+              request.countHint = rowsResult.rows.length;
+              setRowsBySection(function (rowsBySection) {
+                // TODO add handling elsewhere for case where new rowsBySection value
+                // conflicts with columnAndOverviewData (set a flag and refresh it).
+                var newEntry = {
+                  startIndex: missingRows.startRowIndex,
+                  rowsResult: rowsResult
+                };
+                var rowsChunk = Object.prototype.hasOwnProperty.call(rowsBySection, section.key) ? rowsBySection[section.key] : [];
+                var indexToInsertAt = (0, _sortedIndexBy["default"])(rowsChunk, newEntry, function (e) {
+                  return e.startIndex;
                 });
-                startedRowsRequests[section.key].splice(newIndex, 0, request);
-              }
+                var newRowsChunk = [].concat((0, _toConsumableArray2["default"])(rowsChunk.slice(0, indexToInsertAt)), [newEntry], (0, _toConsumableArray2["default"])(rowsChunk.slice(indexToInsertAt)));
+                return _objectSpread(_objectSpread({}, rowsBySection), {}, (0, _defineProperty2["default"])({}, section.key, newRowsChunk));
+              });
+              (0, _addEventListenerOnce["default"])(removerAbortController.signal, 'abort', function () {
+                var _dataHandler$unloadRo;
 
-              dataHandler.getRows(section.key, missingRows.startRowIndex, missingRows.count, abortController.signal).then(function (rowsResult) {
-                if (abortController.signal.aborted) return;
-                request.abortController = null;
-                request.countHint = rowsResult.rows.length;
                 setRowsBySection(function (rowsBySection) {
-                  // TODO add handling elsewhere for case where new rowsBySection value
-                  // conflicts with columnAndOverviewData (set a flag and refresh it).
-                  var newEntry = {
-                    startIndex: missingRows.startRowIndex,
-                    rowsResult: rowsResult
-                  };
-                  var rowsChunk = Object.prototype.hasOwnProperty.call(rowsBySection, section.key) ? rowsBySection[section.key] : [];
-                  var indexToInsertAt = (0, _sortedIndexBy["default"])(rowsChunk, newEntry, function (e) {
-                    return e.startIndex;
-                  });
-                  var newRowsChunk = [].concat((0, _toConsumableArray2["default"])(rowsChunk.slice(0, indexToInsertAt)), [newEntry], (0, _toConsumableArray2["default"])(rowsChunk.slice(indexToInsertAt)));
-                  return _objectSpread(_objectSpread({}, rowsBySection), {}, (0, _defineProperty2["default"])({}, section.key, newRowsChunk));
-                });
-                (0, _addEventListenerOnce["default"])(removerAbortController.signal, 'abort', function () {
-                  var _dataHandler$unloadRo;
+                  if (Object.prototype.hasOwnProperty.call(rowsBySection, section.key)) {
+                    var newRowsChunk = rowsBySection[section.key].filter(function (rowsChunk) {
+                      return rowsChunk.startIndex !== missingRows.startRowIndex;
+                    });
 
-                  setRowsBySection(function (rowsBySection) {
-                    if (Object.prototype.hasOwnProperty.call(rowsBySection, section.key)) {
-                      var newRowsChunk = rowsBySection[section.key].filter(function (rowsChunk) {
-                        return rowsChunk.startIndex !== missingRows.startRowIndex;
-                      });
+                    if (newRowsChunk.length) {
+                      return _objectSpread(_objectSpread({}, rowsBySection), {}, (0, _defineProperty2["default"])({}, section.key, newRowsChunk));
+                    } else {
+                      var newRowsBySection = _objectSpread({}, rowsBySection);
 
-                      if (newRowsChunk.length) {
-                        return _objectSpread(_objectSpread({}, rowsBySection), {}, (0, _defineProperty2["default"])({}, section.key, newRowsChunk));
-                      } else {
-                        var newRowsBySection = _objectSpread({}, rowsBySection);
-
-                        delete newRowsBySection[section.key];
-                        return newRowsBySection;
-                      }
-                    } else {
-                      return rowsBySection;
+                      delete newRowsBySection[section.key];
+                      return newRowsBySection;
                     }
-                  });
-                  (_dataHandler$unloadRo = dataHandler.unloadRows) === null || _dataHandler$unloadRo === void 0 ? void 0 : _dataHandler$unloadRo.call(dataHandler, section.key, rowsResult.rows.map(function (r) {
-                    return r.key;
-                  }));
+                  } else {
+                    return rowsBySection;
+                  }
                 });
-              }, function (err) {
-                if (abortController.signal.aborted) return;
-                throw err;
+                (_dataHandler$unloadRo = dataHandler.unloadRows) === null || _dataHandler$unloadRo === void 0 ? void 0 : _dataHandler$unloadRo.call(dataHandler, section.key, rowsResult.rows.map(function (r) {
+                  return r.key;
+                }));
               });
+            }, function (err) {
+              if (abortController.signal.aborted) return;
+              throw err;
             });
-          }
-        };
+          });
+        }
+      };
 
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          _loop();
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        _loop();
       }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
     }
+  }; // This function is to be used as a hook inside of a StreakSheet instance.
+  // This allows one SheetData instance to be used by several StreakSheet
+  // instances and tell them apart.
 
-    return {
-      onScroll: onScroll
-    };
+
+  function useByStreakSheet() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _useState5 = (0, _react.useState)(function () {
+      return nextStreakSheetId.current++;
+    }),
+        _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
+        sheetId = _useState6[0];
+
+    (0, _react.useEffect)(function () {
+      return function () {
+        setTimeout(function () {// TODO unload rows for this streaksheet if there are still other
+          // streaksheets mounted with this same sheetdata. TODO cancel this
+          // timeout if component where useSheetData was called unmounts.
+        }, 1);
+      };
+    }, []);
+    return (0, _react.useMemo)(function () {
+      return {
+        onScroll: function onScroll(visibleRowStartIndex, visibleRowStopIndex) {
+          return onScrollLatest.current(visibleRowStartIndex, visibleRowStopIndex);
+        }
+      };
+    }, []);
   }
@@ -318,0 +325,0 @@

package.json

 {
   "name": "streaksheet",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "author": "Chris Cowan <[e-mail]>",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

346924

increased by7.16%

Lines of code

3077

increased by4.59%

No dependency changes