beautiful-grid 1.0.2 → 1.0.3

package/README.md

@@ -5,7 +5,7 @@
 [![NPM version](https://img.shields.io/npm/v/beautiful-grid.svg?style=flat)](https://npmjs.org/package/beautiful-grid)
 [![NPM downloads](https://img.shields.io/npm/dm/beautiful-grid.svg?style=flat)](https://npmjs.org/package/beautiful-grid)
 [![License](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](LICENSE)
-[![Coverage](https://img.shields.io/badge/coverage-84.52%25-brightgreen.svg)](https://github.com/axisj/beautiful-grid/actions/workflows/tests.yml)
+[![Coverage](https://img.shields.io/badge/coverage-85.02%25-brightgreen.svg)](https://github.com/axisj/beautiful-grid/actions/workflows/tests.yml)
 
 BeautifulGrid is a high-performance, feature-packed, and beautifully designed open-source React Data Grid for data-heavy business applications. It combines zero-runtime-CSS styling with virtual scrolling, spreadsheet-like cell selection and clipboard operations, built-in and plugin cell editing, multi-level grouped headers, filtering & sorting toolboxes, server/client pagination, pivot table transforms, row reordering, and flexible theming.
 

package/cjs/components/Table.js

@@ -319,6 +319,25 @@ function Table(props) {
     var trHeight = itemHeight + itemPadding * 2;
     var scrollableBodyHeight = Math.max(contentBodyHeight - frozenRowsHeight, 0);
     var mainViewportWidth = Math.max(width - (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0), 0);
+    var logicalBodyContentHeight = data.length * trHeight;
+    var virtualScrollWindowMetrics = React.useMemo(function () {
+        return (0, utils_1.getVirtualScrollWindowMetrics)({
+            logicalContentHeight: logicalBodyContentHeight,
+            viewportHeight: contentBodyHeight,
+            enabled: scrollbar.variant !== 'native',
+        });
+    }, [contentBodyHeight, logicalBodyContentHeight, scrollbar.variant]);
+    var _18 = __read(React.useState(0), 2), virtualScrollBase = _18[0], setVirtualScrollBase = _18[1];
+    var virtualScrollBaseRef = (0, react_1.useRef)(0);
+    var containerRef = (0, react_1.useRef)(null);
+    var searchPopoverRef = (0, react_1.useRef)(null);
+    var editorPortalRef = (0, react_1.useRef)(null);
+    var bodyContainerRef = (0, react_1.useRef)(null);
+    var scrollContainerRef = (0, react_1.useRef)(null);
+    var logicalVerticalScrollState = React.useMemo(function () { return ({
+        scrollTop: scrollTop,
+        scrollHeight: virtualScrollWindowMetrics.logicalContentHeight,
+    }); }, [scrollTop, virtualScrollWindowMetrics.logicalContentHeight]);
     var hasMultiCellSelection = React.useMemo(function () {
         return cellSelectionRanges.length > 1 ||
             cellSelectionRanges.some(function (range) {
@@ -418,7 +437,7 @@ function Table(props) {
                 top: topQuadrant ? 0 : scrollTop,
                 width: leftQuadrant ? frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0 : mainViewportWidth,
                 height: topQuadrant ? frozenRowsHeight : scrollableBodyHeight,
-            } }));
+            }, offsetTop: !topQuadrant && virtualScrollWindowMetrics.enabled ? virtualScrollBase : 0 }));
     };
     var visibleScrollableRows = React.useMemo(function () {
         var _a;
@@ -436,15 +455,14 @@ function Table(props) {
         startRowIndex: visibleScrollableRows.startRowIndex,
         endRowIndex: visibleScrollableRows.endRowIndex,
     }); }, [visibleScrollableRows.endRowIndex, visibleScrollableRows.startRowIndex]);
-    var frozenScrollableBodyStyle = React.useMemo(function () { return ({ top: visibleScrollableRows.paddingTop }); }, [visibleScrollableRows.paddingTop]);
-    var containerRef = (0, react_1.useRef)(null);
-    var searchPopoverRef = (0, react_1.useRef)(null);
+    var frozenScrollableBodyStyle = React.useMemo(function () { return ({
+        top: virtualScrollWindowMetrics.enabled
+            ? visibleScrollableRows.paddingTop - virtualScrollBase
+            : visibleScrollableRows.paddingTop,
+    }); }, [virtualScrollBase, virtualScrollWindowMetrics.enabled, visibleScrollableRows.paddingTop]);
     var warnedContextMenuIdsRef = (0, react_1.useRef)(new Set());
     var warnedContextMenuFactoryRef = (0, react_1.useRef)(false);
-    var editorPortalRef = (0, react_1.useRef)(null);
     var editorPortalContext = React.useMemo(function () { return ({ gridRef: containerRef, portalRef: editorPortalRef }); }, []);
-    var bodyContainerRef = (0, react_1.useRef)(null);
-    var scrollContainerRef = (0, react_1.useRef)(null);
     var rowReorderController = (0, useRowReorderController_1.useRowReorderController)({
         containerRef: containerRef,
         bodyContainerRef: bodyContainerRef,
@@ -556,7 +574,8 @@ function Table(props) {
     var stickyBottomHeight = (summary === null || summary === void 0 ? void 0 : summary.position) === 'bottom' ? summaryHeight : 0;
     var stickyFixedHeight = stickyTopHeight + stickyBottomHeight;
     var scrollViewportHeight = contentBodyHeight + stickyFixedHeight;
-    var scrollPlaneHeight = stickyFixedHeight + frozenRowsHeight + visibleScrollableRows.scrollContentHeight;
+    var physicalScrollableRowsHeight = Math.max(virtualScrollWindowMetrics.physicalContentHeight - frozenRowsHeight, 0);
+    var scrollPlaneHeight = stickyFixedHeight + virtualScrollWindowMetrics.physicalContentHeight;
     var scrollPlaneContentWidth = (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) + scrollableColumnsWidth;
     var scrollPlaneWidth = Math.max(width, scrollPlaneContentWidth);
     var customVerticalScrollbarGutter = scrollbar.vertical.visible && scrollbar.variant === 'classic'
@@ -567,7 +586,16 @@ function Table(props) {
     var scrollPlaneMinWidth = customVerticalScrollbarGutter
         ? "max(100%, calc(".concat(scrollPlaneContentWidth, "px + ").concat(customVerticalScrollbarGutter, "))")
         : scrollPlaneWidth;
-    var scrollbarMetrics = (0, scrollbar_1.useScrollbarMetrics)(scrollContainerRef, [data.length, itemHeight, itemPadding, contentBodyHeight, width], scrollPlaneContentWidth, stickyFixedHeight);
+    var measuredScrollbarMetrics = (0, scrollbar_1.useScrollbarMetrics)(scrollContainerRef, [data.length, itemHeight, itemPadding, contentBodyHeight, width], scrollPlaneContentWidth, stickyFixedHeight);
+    var scrollbarMetrics = React.useMemo(function () {
+        return virtualScrollWindowMetrics.enabled
+            ? __assign(__assign({}, measuredScrollbarMetrics), { vertical: {
+                    viewportSize: contentBodyHeight,
+                    contentSize: virtualScrollWindowMetrics.logicalContentHeight,
+                    maxScroll: virtualScrollWindowMetrics.logicalMaxScroll,
+                    hasOverflow: virtualScrollWindowMetrics.logicalMaxScroll > 1,
+                } }) : measuredScrollbarMetrics;
+    }, [contentBodyHeight, measuredScrollbarMetrics, virtualScrollWindowMetrics]);
     var measuredVerticalScrollbarGutter = customVerticalScrollbarGutter && scrollbarMetrics.horizontal.hasOverflow
         ? Math.max(scrollbarMetrics.horizontal.contentSize - scrollPlaneContentWidth, 0)
         : 0;
@@ -587,11 +615,6 @@ function Table(props) {
             scrollContainerRef.current.scrollLeft = offset;
         }
     }, []);
-    var handleScrollTopChange = (0, react_1.useCallback)(function (offset) {
-        if (scrollContainerRef.current) {
-            scrollContainerRef.current.scrollTop = offset;
-        }
-    }, []);
     var latestScrollRef = (0, react_1.useRef)({ top: scrollTop, left: scrollLeft });
     var latestCommittedScrollRef = (0, react_1.useRef)({ top: scrollTop, left: scrollLeft });
     var scrollRafRef = (0, react_1.useRef)(null);
@@ -608,6 +631,7 @@ function Table(props) {
         frozenRowCount: frozenRowCount,
         frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
         frozenRowsHeight: frozenRowsHeight,
+        scrollTop: scrollTop,
         trHeight: trHeight,
     });
     (0, react_1.useEffect)(function () {
@@ -619,9 +643,10 @@ function Table(props) {
             frozenRowCount: frozenRowCount,
             frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
             frozenRowsHeight: frozenRowsHeight,
+            scrollTop: scrollTop,
             trHeight: trHeight,
         };
-    }, [columns, data.length, props.frozenColumnIndex, frozenColumnsWidth, frozenRowCount, frozenRowsHeight, trHeight]);
+    }, [columns, data.length, props.frozenColumnIndex, frozenColumnsWidth, frozenRowCount, frozenRowsHeight, scrollTop, trHeight]);
     var markScrollActive = (0, react_1.useCallback)(function () {
         var _a;
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-bgrid-scrolling', 'true');
@@ -633,6 +658,28 @@ function Table(props) {
             (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-bgrid-scrolling');
         }, SCROLL_IDLE_DELAY);
     }, []);
+    var commitScroll = (0, react_1.useCallback)(function (top, left) {
+        var scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        var position = (0, utils_1.getVirtualScrollWindowPosition)(top, virtualScrollWindowMetrics);
+        if (virtualScrollBaseRef.current !== position.base) {
+            virtualScrollBaseRef.current = position.base;
+            setVirtualScrollBase(position.base);
+        }
+        if (scrollContainer.scrollTop !== position.physicalScrollTop) {
+            scrollContainer.scrollTop = position.physicalScrollTop;
+        }
+        if (scrollContainer.scrollLeft !== left)
+            scrollContainer.scrollLeft = left;
+        latestScrollRef.current = { top: position.logicalScrollTop, left: left };
+        latestCommittedScrollRef.current = { top: position.logicalScrollTop, left: left };
+        setScroll(position.logicalScrollTop, left);
+    }, [setScroll, virtualScrollWindowMetrics]);
+    var handleScrollTopChange = (0, react_1.useCallback)(function (offset) {
+        var _a, _b;
+        commitScroll(offset, (_b = (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : scrollLeft);
+    }, [commitScroll, scrollLeft]);
     var scheduleScrollFrame = (0, react_1.useCallback)(function () {
         if (scrollRafRef.current !== null)
             return;
@@ -642,91 +689,42 @@ function Table(props) {
             var scrollContainer = scrollContainerRef.current;
             if (!scrollContainer)
                 return;
-            var scrollTop = scrollContainer.scrollTop, scrollLeft = scrollContainer.scrollLeft;
-            latestScrollRef.current = { top: scrollTop, left: scrollLeft };
+            var physicalScrollTop = scrollContainer.scrollTop, scrollLeft = scrollContainer.scrollLeft;
+            var position = (0, utils_1.rebaseVirtualScrollWindow)(virtualScrollBaseRef.current, physicalScrollTop, virtualScrollWindowMetrics);
+            if (virtualScrollBaseRef.current !== position.base) {
+                virtualScrollBaseRef.current = position.base;
+                setVirtualScrollBase(position.base);
+            }
+            if (physicalScrollTop !== position.physicalScrollTop) {
+                scrollContainer.scrollTop = position.physicalScrollTop;
+            }
+            var logicalScrollTop = position.logicalScrollTop;
+            latestScrollRef.current = { top: logicalScrollTop, left: scrollLeft };
             var _b = latestCommittedScrollRef.current, committedTop = _b.top, committedLeft = _b.left;
-            if (committedTop !== scrollTop || committedLeft !== scrollLeft) {
-                latestCommittedScrollRef.current = { top: scrollTop, left: scrollLeft };
-                setScroll(scrollTop, scrollLeft);
+            if (committedTop !== logicalScrollTop || committedLeft !== scrollLeft) {
+                latestCommittedScrollRef.current = { top: logicalScrollTop, left: scrollLeft };
+                setScroll(logicalScrollTop, scrollLeft);
             }
             if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-bgrid-scrolling')) {
                 scrollRafRef.current = requestAnimationFrame(pollNativeScrollPosition);
             }
         };
         scrollRafRef.current = requestAnimationFrame(pollNativeScrollPosition);
-    }, [setScroll]);
+    }, [setScroll, virtualScrollWindowMetrics]);
     var onScroll = (0, react_1.useCallback)(function () {
         if (scrollContainerRef.current) {
-            var _a = scrollContainerRef.current, scrollTop_1 = _a.scrollTop, scrollLeft_1 = _a.scrollLeft;
-            latestScrollRef.current = { top: scrollTop_1, left: scrollLeft_1 };
             markScrollActive();
             scheduleScrollFrame();
         }
     }, [markScrollActive, scheduleScrollFrame]);
-    var onWheel = (0, react_1.useCallback)(function (evt) {
-        var scrollContainer = scrollContainerRef.current;
-        if (!scrollContainer)
-            return;
-        var delta = { x: 0, y: 0 };
-        if (evt.detail) {
-            delta.y = evt.detail * 10;
-        }
-        else if (typeof evt.deltaY === 'undefined') {
-            delta.y = -evt.wheelDelta;
-            delta.x = 0;
-        }
-        else {
-            delta.y = evt.deltaY;
-            delta.x = evt.deltaX;
-        }
-        if (evt.deltaMode === 1) {
-            delta.y = delta.y * 16;
-            delta.x = delta.x * 16;
-        }
-        else if (evt.deltaMode === 2) {
-            delta.y = delta.y * scrollContainer.clientHeight;
-            delta.x = delta.x * scrollContainer.clientWidth;
-        }
-        var maxScrollTop = Math.max(scrollContainer.scrollHeight - scrollContainer.clientHeight, 0);
-        var maxScrollLeft = Math.max(scrollContainer.scrollWidth - scrollContainer.clientWidth, 0);
-        var nextScrollTop = Math.min(maxScrollTop, Math.max(0, scrollContainer.scrollTop + delta.y));
-        var nextScrollLeft = Math.min(maxScrollLeft, Math.max(0, scrollContainer.scrollLeft + delta.x));
-        var didScrollTop = nextScrollTop !== scrollContainer.scrollTop;
-        var didScrollLeft = nextScrollLeft !== scrollContainer.scrollLeft;
-        var isVertical = Math.abs(delta.y) > Math.abs(delta.x);
-        if (isVertical) {
-            if (!didScrollTop)
-                return;
-        }
-        else {
-            if (!didScrollLeft)
-                return;
-        }
-        evt.preventDefault();
-        if (didScrollTop)
-            scrollContainer.scrollTop = nextScrollTop;
-        if (didScrollLeft)
-            scrollContainer.scrollLeft = nextScrollLeft;
-    }, []);
     var resetScrollPosition = (0, react_1.useCallback)(function (type) {
-        var _a, _b;
-        if (type === 'all' || type === 'left')
-            (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ left: 0 });
-        if (type === 'all' || type === 'top')
-            (_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
-    }, []);
-    var commitScroll = (0, react_1.useCallback)(function (top, left) {
         var scrollContainer = scrollContainerRef.current;
         if (!scrollContainer)
             return;
-        if (scrollContainer.scrollTop !== top)
-            scrollContainer.scrollTop = top;
-        if (scrollContainer.scrollLeft !== left)
-            scrollContainer.scrollLeft = left;
-        latestScrollRef.current = { top: top, left: left };
-        latestCommittedScrollRef.current = { top: top, left: left };
-        setScroll(top, left);
-    }, [setScroll]);
+        var nextTop = type === 'all' || type === 'top' ? 0 : latestScrollRef.current.top;
+        var nextLeft = type === 'all' || type === 'left' ? 0 : scrollContainer.scrollLeft;
+        commitScroll(nextTop, nextLeft);
+    }, [commitScroll]);
     (0, react_1.useEffect)(function () {
         var _a, _b;
         if (!searchOpen || activeSearchMatchIndex === undefined)
@@ -751,6 +749,7 @@ function Table(props) {
             frozenRowCount: frozenRowCount,
             columns: columns,
             rowHeight: trHeight,
+            verticalScrollState: logicalVerticalScrollState,
             viewportInsets: viewportInsets,
         });
         if (result.didScroll)
@@ -760,6 +759,7 @@ function Table(props) {
         columns,
         commitScroll,
         frozenRowCount,
+        logicalVerticalScrollState,
         props.frozenColumnIndex,
         searchMatches,
         searchOpen,
@@ -992,18 +992,18 @@ function Table(props) {
         if (!dragState || !pointer || !scrollContainer || !bodyContainer)
             return;
         var delta = getSelectionAutoScrollDelta(pointer.clientX, pointer.clientY, bodyContainer, scrollContainer);
-        var maxScrollTop = Math.max(scrollContainer.scrollHeight - scrollContainer.clientHeight, 0);
+        var maxScrollTop = virtualScrollWindowMetrics.logicalMaxScroll;
         var maxScrollLeft = Math.max(scrollContainer.scrollWidth - scrollContainer.clientWidth, 0);
-        var nextScrollTop = (0, coordinate_1.clamp)(scrollContainer.scrollTop + delta.y, 0, maxScrollTop);
+        var nextScrollTop = (0, coordinate_1.clamp)(latestScrollRef.current.top + delta.y, 0, maxScrollTop);
         var nextScrollLeft = (0, coordinate_1.clamp)(scrollContainer.scrollLeft + delta.x, 0, maxScrollLeft);
-        if (nextScrollTop !== scrollContainer.scrollTop || nextScrollLeft !== scrollContainer.scrollLeft) {
+        if (nextScrollTop !== latestScrollRef.current.top || nextScrollLeft !== scrollContainer.scrollLeft) {
             commitScroll(nextScrollTop, nextScrollLeft);
         }
         updateSelectionByPointer(pointer.clientX, pointer.clientY);
         if (cellSelectionDragRef.current && (delta.x !== 0 || delta.y !== 0)) {
             selectionAutoScrollRafRef.current = requestAnimationFrame(runSelectionAutoScroll);
         }
-    }, [commitScroll, updateSelectionByPointer]);
+    }, [commitScroll, updateSelectionByPointer, virtualScrollWindowMetrics.logicalMaxScroll]);
     var selectAllCells = (0, react_1.useCallback)(function () {
         if (!cellSelectionEnabled)
             return false;
@@ -1693,8 +1693,6 @@ function Table(props) {
         if (scrollContainerRefCurrent) {
             scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
             scrollContainerRefCurrent.addEventListener('scroll', onScroll, { passive: true, capture: true });
-            // scrollContainerRefCurrent.removeEventListener('wheel', onWheel);
-            // scrollContainerRefCurrent.addEventListener('wheel', onWheel, { passive: false, capture: true });
         }
         return function () {
             if (scrollRafRef.current !== null) {
@@ -1708,18 +1706,17 @@ function Table(props) {
             containerRefCurrent === null || containerRefCurrent === void 0 ? void 0 : containerRefCurrent.removeAttribute('data-bgrid-scrolling');
             scrollContainerRefCurrent === null || scrollContainerRefCurrent === void 0 ? void 0 : scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
         };
-    }, [onScroll, onWheel, setInitialized]);
+    }, [onScroll, setInitialized]);
     React.useLayoutEffect(function () {
+        var _a, _b;
         if (!scrollContainerRef.current)
             return;
-        if (props.scrollLeft !== undefined) {
-            scrollContainerRef.current.scrollLeft = props.scrollLeft;
-        }
-        if (props.scrollTop !== undefined) {
-            scrollContainerRef.current.scrollTop = props.scrollTop;
-        }
-    }, [props.scrollLeft, props.scrollTop]);
+        var nextTop = (_a = props.scrollTop) !== null && _a !== void 0 ? _a : latestScrollRef.current.top;
+        var nextLeft = (_b = props.scrollLeft) !== null && _b !== void 0 ? _b : latestScrollRef.current.left;
+        commitScroll(nextTop, nextLeft);
+    }, [commitScroll, props.scrollLeft, props.scrollTop]);
     (0, react_1.useEffect)(function () {
+        latestScrollRef.current = { top: scrollTop, left: scrollLeft };
         latestCommittedScrollRef.current = { top: scrollTop, left: scrollLeft };
     }, [scrollTop, scrollLeft]);
     (0, react_1.useEffect)(function () {
@@ -1801,6 +1798,7 @@ function Table(props) {
         searchOpen: searchOpen,
         searchOptions: searchOptions,
         trHeight: trHeight,
+        verticalScrollState: logicalVerticalScrollState,
         viewportInsets: keyboardViewportInsets,
     });
     keyboardRuntimeRef.current = {
@@ -1833,6 +1831,7 @@ function Table(props) {
         searchOpen: searchOpen,
         searchOptions: searchOptions,
         trHeight: trHeight,
+        verticalScrollState: logicalVerticalScrollState,
         viewportInsets: keyboardViewportInsets,
     };
     (0, react_1.useEffect)(function () {
@@ -1849,7 +1848,7 @@ function Table(props) {
         };
         var moveWithArrowKey = function (key, extendSelection, toBoundary) {
             if (toBoundary === void 0) { toBoundary = false; }
-            var _a = keyboardRuntimeRef.current, activeCell = _a.activeCell, cellInteractionSession = _a.cellInteractionSession, cellNavigationOptions = _a.cellNavigationOptions, cellSelectionEnabled = _a.cellSelectionEnabled, columns = _a.columns, commitScroll = _a.commitScroll, dataLength = _a.dataLength, frozenColumnIndex = _a.frozenColumnIndex, frozenRowCount = _a.frozenRowCount, moveActiveCell = _a.moveActiveCell, trHeight = _a.trHeight, viewportInsets = _a.viewportInsets;
+            var _a = keyboardRuntimeRef.current, activeCell = _a.activeCell, cellInteractionSession = _a.cellInteractionSession, cellNavigationOptions = _a.cellNavigationOptions, cellSelectionEnabled = _a.cellSelectionEnabled, columns = _a.columns, commitScroll = _a.commitScroll, dataLength = _a.dataLength, frozenColumnIndex = _a.frozenColumnIndex, frozenRowCount = _a.frozenRowCount, moveActiveCell = _a.moveActiveCell, trHeight = _a.trHeight, verticalScrollState = _a.verticalScrollState, viewportInsets = _a.viewportInsets;
             var container = containerRef.current;
             var activeElement = document.activeElement;
             if (!container ||
@@ -1883,6 +1882,7 @@ function Table(props) {
                 frozenRowCount: frozenRowCount,
                 columns: columns,
                 rowHeight: trHeight,
+                verticalScrollState: verticalScrollState,
                 viewportInsets: viewportInsets,
             });
             if (result.didScroll) {
@@ -1916,7 +1916,7 @@ function Table(props) {
         };
         var handleKeyDown = function (evt) {
             var _a, _b, _c, _d, _e;
-            var _f = keyboardRuntimeRef.current, activeCell = _f.activeCell, cellInteractionSession = _f.cellInteractionSession, cellNavigationOptions = _f.cellNavigationOptions, cellSelectionEnabled = _f.cellSelectionEnabled, clearCellSelection = _f.clearCellSelection, clearCellSelectionOnEscape = _f.clearCellSelectionOnEscape, columns = _f.columns, commitCheckboxCell = _f.commitCheckboxCell, commitScroll = _f.commitScroll, copySelectedCells = _f.copySelectedCells, data = _f.data, dataLength = _f.dataLength, editable = _f.editable, editItemIndex = _f.editItemIndex, endCellSelectionDrag = _f.endCellSelectionDrag, frozenColumnIndex = _f.frozenColumnIndex, frozenRowCount = _f.frozenRowCount, height = _f.height, handleClick = _f.handleClick, moveActiveCell = _f.moveActiveCell, openCellContextMenu = _f.openCellContextMenu, selectAllCells = _f.selectAllCells, setEditItem = _f.setEditItem, requestSearchOpen = _f.requestSearchOpen, searchOpen = _f.searchOpen, searchOptions = _f.searchOptions, trHeight = _f.trHeight, viewportInsets = _f.viewportInsets;
+            var _f = keyboardRuntimeRef.current, activeCell = _f.activeCell, cellInteractionSession = _f.cellInteractionSession, cellNavigationOptions = _f.cellNavigationOptions, cellSelectionEnabled = _f.cellSelectionEnabled, clearCellSelection = _f.clearCellSelection, clearCellSelectionOnEscape = _f.clearCellSelectionOnEscape, columns = _f.columns, commitCheckboxCell = _f.commitCheckboxCell, commitScroll = _f.commitScroll, copySelectedCells = _f.copySelectedCells, data = _f.data, dataLength = _f.dataLength, editable = _f.editable, editItemIndex = _f.editItemIndex, endCellSelectionDrag = _f.endCellSelectionDrag, frozenColumnIndex = _f.frozenColumnIndex, frozenRowCount = _f.frozenRowCount, height = _f.height, handleClick = _f.handleClick, moveActiveCell = _f.moveActiveCell, openCellContextMenu = _f.openCellContextMenu, selectAllCells = _f.selectAllCells, setEditItem = _f.setEditItem, requestSearchOpen = _f.requestSearchOpen, searchOpen = _f.searchOpen, searchOptions = _f.searchOptions, trHeight = _f.trHeight, verticalScrollState = _f.verticalScrollState, viewportInsets = _f.viewportInsets;
             var container = containerRef.current;
             var activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
@@ -2045,6 +2045,7 @@ function Table(props) {
                             frozenRowCount: frozenRowCount,
                             columns: columns,
                             rowHeight: trHeight,
+                            verticalScrollState: verticalScrollState,
                             viewportInsets: viewportInsets,
                         });
                         if (result.didScroll) {
@@ -2088,6 +2089,7 @@ function Table(props) {
                             frozenRowCount: frozenRowCount,
                             columns: columns,
                             rowHeight: trHeight,
+                            verticalScrollState: verticalScrollState,
                             viewportInsets: viewportInsets,
                         });
                         if (result.didScroll) {
@@ -2115,6 +2117,7 @@ function Table(props) {
                             frozenRowCount: frozenRowCount,
                             columns: columns,
                             rowHeight: trHeight,
+                            verticalScrollState: verticalScrollState,
                             viewportInsets: viewportInsets,
                         });
                         if (result.didScroll) {
@@ -2222,7 +2225,7 @@ function Table(props) {
                         event.stopPropagation();
                     }
                 } },
-                React.createElement(ScrollPlane, { style: { height: scrollPlaneHeight, minWidth: scrollPlaneMinWidth } },
+                React.createElement(ScrollPlane, { style: { height: scrollPlaneHeight, minWidth: scrollPlaneMinWidth }, "data-bgrid-virtual-scroll-window": virtualScrollWindowMetrics.enabled ? 'true' : undefined, "data-bgrid-logical-height": virtualScrollWindowMetrics.logicalContentHeight, "data-bgrid-physical-height": virtualScrollWindowMetrics.physicalContentHeight, "data-bgrid-logical-scroll-top": Math.round(scrollTop), "data-bgrid-virtual-scroll-base": virtualScrollWindowMetrics.enabled ? Math.round(virtualScrollBase) : undefined },
                     React.createElement(HeaderContainer, { style: { height: headerHeight, top: 0 }, role: 'rfdg-header-container' },
                         (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenHeader, { style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-header' },
                             React.createElement(TableHeadFrozen_1.default, { container: containerRef }))),
@@ -2233,7 +2236,7 @@ function Table(props) {
                             React.createElement(TableSummaryFronzen_1.TableSummaryFrozen, { position: 'top' }))),
                         React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
                             React.createElement(TableSummary_1.TableSummary, { position: 'top' })))),
-                    React.createElement("div", { className: 'bgrid-body-scroll-content', style: { height: frozenRowsHeight + visibleScrollableRows.scrollContentHeight } },
+                    React.createElement("div", { className: 'bgrid-body-scroll-content', style: { height: virtualScrollWindowMetrics.physicalContentHeight } },
                         frozenRowCount > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-layer', style: { height: frozenRowsHeight, top: stickyTopHeight }, "data-bgrid-row-band": 'frozen' },
                             (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-left bgrid-frozen-column-boundary', style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-rows-left' },
                                 React.createElement(TableBodyFrozen_1.default, { scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top-frozen', quadrant: 'top-left', allowRowReorder: false }),
@@ -2241,17 +2244,19 @@ function Table(props) {
                             React.createElement("div", { className: 'bgrid-frozen-rows-main', style: { left: frozenColumnsWidth }, role: 'rfdg-frozen-rows-main' },
                                 React.createElement(TableBody_1.default, { scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top', quadrant: 'top-main', allowRowReorder: false }),
                                 renderSelectionOverlay('top-main')))),
-                        React.createElement("div", { className: 'bgrid-scrollable-rows-layer', style: { height: visibleScrollableRows.scrollContentHeight }, "data-bgrid-row-band": 'scrollable' },
+                        React.createElement("div", { className: 'bgrid-scrollable-rows-layer', style: { height: physicalScrollableRowsHeight }, "data-bgrid-row-band": 'scrollable' },
                             (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenScrollContent, { style: {
                                     width: frozenColumnsWidth,
-                                    height: visibleScrollableRows.scrollContentHeight,
+                                    height: physicalScrollableRowsHeight,
                                 }, role: 'rfdg-frozen-scroll-container' },
                                 React.createElement(TableBodyFrozen_1.default, { scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, style: frozenScrollableBodyStyle, quadrant: 'body-left', onRowReorderPointerDown: rowReorderController.onPointerDown, onRowReorderKeyDown: rowReorderController.onKeyDown }),
                                 renderSelectionOverlay('body-left'))),
                             React.createElement(ScrollContent, { style: {
                                     left: frozenColumnsWidth,
-                                    paddingTop: visibleScrollableRows.paddingTop,
-                                    height: visibleScrollableRows.scrollContentHeight,
+                                    paddingTop: virtualScrollWindowMetrics.enabled
+                                        ? visibleScrollableRows.paddingTop - virtualScrollBase
+                                        : visibleScrollableRows.paddingTop,
+                                    height: physicalScrollableRowsHeight,
                                 } },
                                 React.createElement(TableBody_1.default, { scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main' }),
                                 renderSelectionOverlay('body-main')))),
@@ -2343,7 +2348,7 @@ function getCellPositionFromPointer(_a) {
     var rowIndex = metrics.frozenRowCount > 0 && clientY < frozenRowsBottom
         ? (0, coordinate_1.clamp)(Math.floor((clientY - bodyRect.top) / metrics.trHeight), 0, metrics.frozenRowCount - 1)
         : (0, coordinate_1.clamp)(metrics.frozenRowCount +
-            Math.floor((scrollContainer.scrollTop +
+            Math.floor((metrics.scrollTop +
                 (0, coordinate_1.clamp)(clientY - scrollRect.top, 0, Math.max(scrollContainer.clientHeight - 1, 0))) /
                 metrics.trHeight), 0, metrics.dataLength - 1);
     var columnIndex = getColumnIndexFromPointer({

package/cjs/components/selection/CellSelectionOverlayLayer.js

@@ -37,15 +37,15 @@ exports.CellSelectionOverlayLayer = CellSelectionOverlayLayer;
 var React = __importStar(require("react"));
 var cellSelectionGeometry_1 = require("../../utils/cellSelectionGeometry");
 function CellSelectionOverlayLayer(_a) {
-    var quadrant = _a.quadrant, selectionFragments = _a.selectionFragments, activeFragments = _a.activeFragments, activeFill = _a.activeFill, activeRing = _a.activeRing, viewport = _a.viewport;
+    var quadrant = _a.quadrant, selectionFragments = _a.selectionFragments, activeFragments = _a.activeFragments, activeFill = _a.activeFill, activeRing = _a.activeRing, viewport = _a.viewport, _b = _a.offsetTop, offsetTop = _b === void 0 ? 0 : _b;
     var quadrantSelectionFragments = getVisibleFragments(selectionFragments, quadrant, viewport);
     var quadrantActiveFragments = getVisibleFragments(activeFragments, quadrant, viewport);
     if (quadrantSelectionFragments.length === 0 && quadrantActiveFragments.length === 0)
         return null;
     return (React.createElement("div", { className: 'bgrid-cell-selection-overlay-layer', "data-bgrid-selection-quadrant": quadrant, "aria-hidden": 'true' },
-        quadrantSelectionFragments.map(function (fragment) { return (React.createElement("div", { key: "selection-".concat(fragment.rangeIndex), className: 'bgrid-cell-selection-fragment', "data-bgrid-selection-fragment": 'true', "data-bgrid-selection-range-index": fragment.rangeIndex, "data-edge-top": fragment.edges.top ? 'true' : undefined, "data-edge-right": fragment.edges.right ? 'true' : undefined, "data-edge-bottom": fragment.edges.bottom ? 'true' : undefined, "data-edge-left": fragment.edges.left ? 'true' : undefined, style: getFragmentStyle(fragment) })); }),
+        quadrantSelectionFragments.map(function (fragment) { return (React.createElement("div", { key: "selection-".concat(fragment.rangeIndex), className: 'bgrid-cell-selection-fragment', "data-bgrid-selection-fragment": 'true', "data-bgrid-selection-range-index": fragment.rangeIndex, "data-edge-top": fragment.edges.top ? 'true' : undefined, "data-edge-right": fragment.edges.right ? 'true' : undefined, "data-edge-bottom": fragment.edges.bottom ? 'true' : undefined, "data-edge-left": fragment.edges.left ? 'true' : undefined, style: getFragmentStyle(fragment, offsetTop) })); }),
         (activeFill || activeRing) &&
-            quadrantActiveFragments.map(function (fragment) { return (React.createElement("div", { key: "active-".concat(fragment.rangeIndex), className: 'bgrid-cell-active-fragment', "data-bgrid-active-fragment": 'true', "data-active-fill": activeFill ? 'true' : undefined, "data-active-ring": activeRing ? 'true' : undefined, style: getFragmentStyle(fragment) })); })));
+            quadrantActiveFragments.map(function (fragment) { return (React.createElement("div", { key: "active-".concat(fragment.rangeIndex), className: 'bgrid-cell-active-fragment', "data-bgrid-active-fragment": 'true', "data-active-fill": activeFill ? 'true' : undefined, "data-active-ring": activeRing ? 'true' : undefined, style: getFragmentStyle(fragment, offsetTop) })); })));
 }
 function getVisibleFragments(fragments, quadrant, viewport) {
     return fragments.flatMap(function (fragment) {
@@ -55,10 +55,10 @@ function getVisibleFragments(fragments, quadrant, viewport) {
         return visibleFragment ? [visibleFragment] : [];
     });
 }
-function getFragmentStyle(fragment) {
+function getFragmentStyle(fragment, offsetTop) {
     return {
         left: fragment.left,
-        top: fragment.top,
+        top: fragment.top - offsetTop,
         width: fragment.width,
         height: fragment.height,
     };

package/cjs/utils/coordinate.js

@@ -53,10 +53,10 @@ function getRowBottom(rowIndex, rowHeight) {
     return (rowIndex + 1) * rowHeight;
 }
 function ensureCellVisible(_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var cell = _a.cell, scrollContainer = _a.scrollContainer, _h = _a.frozenColumnCount, frozenColumnCount = _h === void 0 ? 0 : _h, _j = _a.frozenRowCount, frozenRowCount = _j === void 0 ? 0 : _j, columns = _a.columns, rowHeight = _a.rowHeight, viewportInsets = _a.viewportInsets;
-    var currentScrollTop = (_b = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) !== null && _b !== void 0 ? _b : 0;
-    var currentScrollLeft = (_c = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollLeft) !== null && _c !== void 0 ? _c : 0;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var cell = _a.cell, scrollContainer = _a.scrollContainer, _k = _a.frozenColumnCount, frozenColumnCount = _k === void 0 ? 0 : _k, _l = _a.frozenRowCount, frozenRowCount = _l === void 0 ? 0 : _l, columns = _a.columns, rowHeight = _a.rowHeight, verticalScrollState = _a.verticalScrollState, viewportInsets = _a.viewportInsets;
+    var currentScrollTop = (_c = (_b = verticalScrollState === null || verticalScrollState === void 0 ? void 0 : verticalScrollState.scrollTop) !== null && _b !== void 0 ? _b : scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) !== null && _c !== void 0 ? _c : 0;
+    var currentScrollLeft = (_d = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollLeft) !== null && _d !== void 0 ? _d : 0;
     var nextScrollTop = currentScrollTop;
     var nextScrollLeft = currentScrollLeft;
     // Vertical scroll calculation
@@ -65,11 +65,11 @@ function ensureCellVisible(_a) {
         var rowTop = getRowTop(targetRowIndex, rowHeight);
         var rowBottom = getRowBottom(targetRowIndex, rowHeight);
         var clientHeight = scrollContainer.clientHeight;
-        var scrollHeight = scrollContainer.scrollHeight;
+        var scrollHeight = (_e = verticalScrollState === null || verticalScrollState === void 0 ? void 0 : verticalScrollState.scrollHeight) !== null && _e !== void 0 ? _e : scrollContainer.scrollHeight;
         var maxScrollTop = Math.max(0, scrollHeight - clientHeight);
         if (clientHeight > 0) {
-            var topInset = clamp((_d = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.top) !== null && _d !== void 0 ? _d : 0, 0, clientHeight);
-            var bottomInset = clamp((_e = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.bottom) !== null && _e !== void 0 ? _e : 0, 0, Math.max(clientHeight - topInset, 0));
+            var topInset = clamp((_f = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.top) !== null && _f !== void 0 ? _f : 0, 0, clientHeight);
+            var bottomInset = clamp((_g = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.bottom) !== null && _g !== void 0 ? _g : 0, 0, Math.max(clientHeight - topInset, 0));
             var viewportTop = currentScrollTop + topInset;
             var viewportBottom = currentScrollTop + clientHeight - bottomInset;
             if (rowTop < viewportTop) {
@@ -90,8 +90,8 @@ function ensureCellVisible(_a) {
         var scrollWidth = scrollContainer.scrollWidth;
         var maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
         if (clientWidth > 0) {
-            var leftInset = clamp((_f = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.left) !== null && _f !== void 0 ? _f : 0, 0, clientWidth);
-            var rightInset = clamp((_g = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.right) !== null && _g !== void 0 ? _g : 0, 0, Math.max(clientWidth - leftInset, 0));
+            var leftInset = clamp((_h = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.left) !== null && _h !== void 0 ? _h : 0, 0, clientWidth);
+            var rightInset = clamp((_j = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.right) !== null && _j !== void 0 ? _j : 0, 0, Math.max(clientWidth - leftInset, 0));
             var viewportLeft = currentScrollLeft + leftInset;
             var viewportRight = currentScrollLeft + clientWidth - rightInset;
             var visibleWidth = Math.max(clientWidth - leftInset - rightInset, 0);
@@ -108,7 +108,7 @@ function ensureCellVisible(_a) {
     var didScrollLeft = nextScrollLeft !== currentScrollLeft;
     var didScroll = didScrollTop || didScrollLeft;
     if (scrollContainer) {
-        if (didScrollTop) {
+        if (didScrollTop && !verticalScrollState) {
             scrollContainer.scrollTop = nextScrollTop;
         }
         if (didScrollLeft) {

package/cjs/utils/index.js

@@ -31,6 +31,7 @@ __exportStar(require("./scrollbar"), exports);
 __exportStar(require("./number"), exports);
 __exportStar(require("./buildHeaderMatrix"), exports);
 __exportStar(require("./getVisibleScrollableRowRange"), exports);
+__exportStar(require("./virtualScrollWindow"), exports);
 __exportStar(require("./cellEditState"), exports);
 __exportStar(require("./getCellSelectionAxisState"), exports);
 __exportStar(require("./mergedCells"), exports);

package/cjs/utils/virtualScrollWindow.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BGRID_MAX_PHYSICAL_SCROLL_HEIGHT = void 0;
+exports.getVirtualScrollWindowMetrics = getVirtualScrollWindowMetrics;
+exports.getLogicalScrollTop = getLogicalScrollTop;
+exports.getVirtualScrollWindowPosition = getVirtualScrollWindowPosition;
+exports.rebaseVirtualScrollWindow = rebaseVirtualScrollWindow;
+exports.BGRID_MAX_PHYSICAL_SCROLL_HEIGHT = 1000000;
+function getVirtualScrollWindowMetrics(_a) {
+    var logicalContentHeight = _a.logicalContentHeight, viewportHeight = _a.viewportHeight, enabled = _a.enabled, _b = _a.maxPhysicalHeight, maxPhysicalHeight = _b === void 0 ? exports.BGRID_MAX_PHYSICAL_SCROLL_HEIGHT : _b;
+    var safeViewportHeight = Math.max(viewportHeight, 0);
+    var safeLogicalContentHeight = Math.max(logicalContentHeight, safeViewportHeight);
+    var safeMaxPhysicalHeight = Math.max(maxPhysicalHeight, safeViewportHeight);
+    var windowingEnabled = enabled && safeLogicalContentHeight > safeMaxPhysicalHeight;
+    var physicalContentHeight = windowingEnabled ? safeMaxPhysicalHeight : safeLogicalContentHeight;
+    return {
+        enabled: windowingEnabled,
+        logicalContentHeight: safeLogicalContentHeight,
+        physicalContentHeight: physicalContentHeight,
+        logicalMaxScroll: Math.max(safeLogicalContentHeight - safeViewportHeight, 0),
+        physicalMaxScroll: Math.max(physicalContentHeight - safeViewportHeight, 0),
+    };
+}
+function getLogicalScrollTop(base, physicalScrollTop, metrics) {
+    return clamp(base + physicalScrollTop, 0, metrics.logicalMaxScroll);
+}
+function getVirtualScrollWindowPosition(logicalScrollTop, metrics) {
+    var logicalTop = clamp(logicalScrollTop, 0, metrics.logicalMaxScroll);
+    if (!metrics.enabled) {
+        return {
+            base: 0,
+            physicalScrollTop: logicalTop,
+            logicalScrollTop: logicalTop,
+        };
+    }
+    var preferredPhysicalTop = metrics.physicalMaxScroll / 2;
+    var maxBase = Math.max(metrics.logicalMaxScroll - metrics.physicalMaxScroll, 0);
+    var base = clamp(logicalTop - preferredPhysicalTop, 0, maxBase);
+    return {
+        base: base,
+        physicalScrollTop: logicalTop - base,
+        logicalScrollTop: logicalTop,
+    };
+}
+function rebaseVirtualScrollWindow(base, physicalScrollTop, metrics) {
+    var logicalScrollTop = getLogicalScrollTop(base, physicalScrollTop, metrics);
+    if (!metrics.enabled || metrics.physicalMaxScroll <= 0) {
+        return getVirtualScrollWindowPosition(logicalScrollTop, metrics);
+    }
+    var lowerGuard = metrics.physicalMaxScroll * 0.25;
+    var upperGuard = metrics.physicalMaxScroll * 0.75;
+    var maxBase = Math.max(metrics.logicalMaxScroll - metrics.physicalMaxScroll, 0);
+    var canMoveBackward = base > 0;
+    var canMoveForward = base < maxBase;
+    if ((physicalScrollTop < lowerGuard && canMoveBackward) ||
+        (physicalScrollTop > upperGuard && canMoveForward)) {
+        return getVirtualScrollWindowPosition(logicalScrollTop, metrics);
+    }
+    return {
+        base: base,
+        physicalScrollTop: clamp(physicalScrollTop, 0, metrics.physicalMaxScroll),
+        logicalScrollTop: logicalScrollTop,
+    };
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}