@ringcentral/juno 2.40.1 → 2.41.0

package/es6/components/Virtuoso/react-virtuoso/domIOSystem.js

@@ -1,4 +1,4 @@
-import * as u from '@virtuoso.dev/urx';
+import * as u from './urx';
 export var domIOSystem = u.system(function () {
     var scrollContainerState = u.stream();
     var scrollTop = u.stream();
@@ -8,11 +8,12 @@ export var domIOSystem = u.system(function () {
     var viewportHeight = u.stream();
     var scrollHeight = u.stream();
     var headerHeight = u.statefulStream(0);
+    var fixedHeaderHeight = u.statefulStream(0);
+    var fixedFooterHeight = u.statefulStream(0);
     var footerHeight = u.statefulStream(0);
     var scrollTo = u.stream();
     var scrollBy = u.stream();
     var scrollingInProgress = u.statefulStream(false);
-    var react18ConcurrentRendering = u.statefulStream(false);
     u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
         var scrollTop = _a.scrollTop;
         return scrollTop;
@@ -28,10 +29,11 @@ export var domIOSystem = u.system(function () {
         scrollTop: scrollTop,
         viewportHeight: viewportHeight,
         headerHeight: headerHeight,
+        fixedHeaderHeight: fixedHeaderHeight,
+        fixedFooterHeight: fixedFooterHeight,
         footerHeight: footerHeight,
         scrollHeight: scrollHeight,
         smoothScrollTargetReached: smoothScrollTargetReached,
-        react18ConcurrentRendering: react18ConcurrentRendering,
         // signals
         scrollTo: scrollTo,
         scrollBy: scrollBy,

package/es6/components/Virtuoso/react-virtuoso/followOutputSystem.js

@@ -1,13 +1,13 @@
 import { __read } from "tslib";
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import * as u from '@virtuoso.dev/urx';
-import { domIOSystem } from './domIOSystem';
-import { initialTopMostItemIndexSystem } from './initialTopMostItemIndexSystem';
-import { loggerSystem, LogLevel } from './loggerSystem';
-import { propsReadySystem } from './propsReadySystem';
+import * as u from './urx';
 import { scrollToIndexSystem } from './scrollToIndexSystem';
 import { sizeSystem } from './sizeSystem';
 import { stateFlagsSystem } from './stateFlagsSystem';
+import { initialTopMostItemIndexSystem } from './initialTopMostItemIndexSystem';
+import { propsReadySystem } from './propsReadySystem';
+import { loggerSystem, LogLevel } from './loggerSystem';
+import { domIOSystem } from './domIOSystem';
 function normalizeFollowOutput(follow) {
     if (!follow) {
         return false;
@@ -23,6 +23,7 @@ var behaviorFromFollowOutput = function (follow, isAtBottom) {
 export var followOutputSystem = u.system(function (_a) {
     var _b = __read(_a, 7), _c = _b[0], totalCount = _c.totalCount, listRefresh = _c.listRefresh, _d = _b[1], isAtBottom = _d.isAtBottom, atBottomState = _d.atBottomState, scrollToIndex = _b[2].scrollToIndex, scrolledToInitialItem = _b[3].scrolledToInitialItem, _e = _b[4], propsReady = _e.propsReady, didMount = _e.didMount, log = _b[5].log, scrollingInProgress = _b[6].scrollingInProgress;
     var followOutput = u.statefulStream(false);
+    var autoscrollToBottom = u.stream();
     var pendingScrollHandle = null;
     function scrollToBottom(followOutputBehavior) {
         u.publish(scrollToIndex, {
@@ -57,6 +58,15 @@ export var followOutputSystem = u.system(function (_a) {
             pendingScrollHandle = null;
         });
     });
+    function trapNextSizeIncrease(followOutput) {
+        var cancel = u.handleNext(atBottomState, function (state) {
+            if (followOutput && !state.atBottom && state.notAtBottomBecause === 'SIZE_INCREASED' && !pendingScrollHandle) {
+                u.getValue(log)('scrolling to bottom due to increased size', {}, LogLevel.DEBUG);
+                scrollToBottom('auto');
+            }
+        });
+        setTimeout(cancel, 100);
+    }
     u.subscribe(u.pipe(u.combineLatest(u.duc(followOutput), totalCount, propsReady), u.filter(function (_a) {
         var _b = __read(_a, 3), follow = _b[0], ready = _b[2];
         return follow && ready;
@@ -69,24 +79,16 @@ export var followOutputSystem = u.system(function (_a) {
         return refreshed;
     }), u.withLatestFrom(followOutput, totalCount)), function (_a) {
         var _b = __read(_a, 2), followOutput = _b[1];
-        var cancel = u.handleNext(atBottomState, function (state) {
-            if (followOutput &&
-                !state.atBottom &&
-                state.notAtBottomBecause === 'SIZE_INCREASED' &&
-                !pendingScrollHandle) {
-                u.getValue(log)('scrolling to bottom due to increased size', {}, LogLevel.DEBUG);
-                scrollToBottom('auto');
-            }
-        });
-        setTimeout(cancel, 100);
+        trapNextSizeIncrease(followOutput !== false);
+    });
+    u.subscribe(autoscrollToBottom, function () {
+        trapNextSizeIncrease(u.getValue(followOutput) !== false);
     });
     u.subscribe(u.combineLatest(u.duc(followOutput), atBottomState), function (_a) {
         var _b = __read(_a, 2), followOutput = _b[0], state = _b[1];
-        if (followOutput &&
-            !state.atBottom &&
-            state.notAtBottomBecause === 'VIEWPORT_HEIGHT_DECREASING') {
+        if (followOutput && !state.atBottom && state.notAtBottomBecause === 'VIEWPORT_HEIGHT_DECREASING') {
             scrollToBottom('auto');
         }
     });
-    return { followOutput: followOutput };
+    return { followOutput: followOutput, autoscrollToBottom: autoscrollToBottom };
 }, u.tup(sizeSystem, stateFlagsSystem, scrollToIndexSystem, initialTopMostItemIndexSystem, propsReadySystem, loggerSystem, domIOSystem));

package/es6/components/Virtuoso/react-virtuoso/gridSystem.js

@@ -1,5 +1,5 @@
 import { __assign, __read } from "tslib";
-import * as u from '@virtuoso.dev/urx';
+import * as u from './urx';
 import { rangeComparator, tupleComparator } from './comparators';
 import { domIOSystem } from './domIOSystem';
 import { propsReadySystem } from './propsReadySystem';
@@ -7,7 +7,10 @@ import { scrollSeekSystem } from './scrollSeekSystem';
 import { normalizeIndexLocation } from './scrollToIndexSystem';
 import { sizeRangeSystem } from './sizeRangeSystem';
 import { stateFlagsSystem } from './stateFlagsSystem';
+import { loggerSystem } from './loggerSystem';
 import { windowScrollerSystem } from './windowScrollerSystem';
+import { getInitialTopMostItemIndexNumber } from './initialTopMostItemIndexSystem';
+import { skipFrames } from './utils/skipFrames';
 var INITIAL_GRID_STATE = {
     items: [],
     offsetBottom: 0,
@@ -27,86 +30,161 @@ var PROBE_GRID_STATE = {
     itemWidth: 0,
 };
 var round = Math.round, ceil = Math.ceil, floor = Math.floor, min = Math.min, max = Math.max;
-function buildItems(startIndex, endIndex) {
-    return Array.from({ length: endIndex - startIndex + 1 }).map(function (_, i) { return ({ index: i + startIndex }); });
+function buildProbeGridState(items) {
+    return __assign(__assign({}, PROBE_GRID_STATE), { items: items });
 }
-export var gridSystem = u.system(function (_a) {
-    var _b = __read(_a, 6), _c = _b[0], overscan = _c.overscan, visibleRange = _c.visibleRange, listBoundary = _c.listBoundary, _d = _b[1], scrollTop = _d.scrollTop, viewportHeight = _d.viewportHeight, scrollBy = _d.scrollBy, scrollTo = _d.scrollTo, smoothScrollTargetReached = _d.smoothScrollTargetReached, scrollContainerState = _d.scrollContainerState, stateFlags = _b[2], scrollSeek = _b[3], _e = _b[4], propsReady = _e.propsReady, didMount = _e.didMount, _f = _b[5], windowViewportRect = _f.windowViewportRect, windowScrollTo = _f.windowScrollTo, useWindowScroll = _f.useWindowScroll, customScrollParent = _f.customScrollParent, windowScrollContainerState = _f.windowScrollContainerState;
+function buildItems(startIndex, endIndex, data) {
+    return Array.from({ length: endIndex - startIndex + 1 }).map(function (_, i) {
+        var dataItem = data === null ? null : data[i + startIndex];
+        return { index: i + startIndex, data: dataItem };
+    });
+}
+function gapComparator(prev, next) {
+    return prev && prev.column === next.column && prev.row === next.row;
+}
+function dimensionComparator(prev, next) {
+    return prev && prev.width === next.width && prev.height === next.height;
+}
+export var gridSystem = /*#__PURE__*/ u.system(function (_a) {
+    var _b = __read(_a, 7), _c = _b[0], overscan = _c.overscan, visibleRange = _c.visibleRange, listBoundary = _c.listBoundary, _d = _b[1], scrollTop = _d.scrollTop, viewportHeight = _d.viewportHeight, scrollBy = _d.scrollBy, scrollTo = _d.scrollTo, smoothScrollTargetReached = _d.smoothScrollTargetReached, scrollContainerState = _d.scrollContainerState, footerHeight = _d.footerHeight, headerHeight = _d.headerHeight, stateFlags = _b[2], scrollSeek = _b[3], _e = _b[4], propsReady = _e.propsReady, didMount = _e.didMount, _f = _b[5], windowViewportRect = _f.windowViewportRect, useWindowScroll = _f.useWindowScroll, customScrollParent = _f.customScrollParent, windowScrollContainerState = _f.windowScrollContainerState, windowScrollTo = _f.windowScrollTo, log = _b[6];
     var totalCount = u.statefulStream(0);
     var initialItemCount = u.statefulStream(0);
     var gridState = u.statefulStream(INITIAL_GRID_STATE);
-    var viewportDimensions = u.statefulStream({
-        height: 0,
-        width: 0,
-    });
-    var itemDimensions = u.statefulStream({
-        height: 0,
-        width: 0,
-    });
+    var viewportDimensions = u.statefulStream({ height: 0, width: 0 });
+    var itemDimensions = u.statefulStream({ height: 0, width: 0 });
     var scrollToIndex = u.stream();
     var scrollHeight = u.stream();
     var deviation = u.statefulStream(0);
-    u.connect(u.pipe(didMount, u.withLatestFrom(initialItemCount), u.filter(function (_a) {
-        var _b = __read(_a, 2), count = _b[1];
-        return count !== 0;
+    var data = u.statefulStream(null);
+    var gap = u.statefulStream({ row: 0, column: 0 });
+    var stateChanged = u.stream();
+    var restoreStateFrom = u.stream();
+    var stateRestoreInProgress = u.statefulStream(false);
+    var initialTopMostItemIndex = u.statefulStream(0);
+    var scrolledToInitialItem = u.statefulStream(true);
+    var scrollScheduled = u.statefulStream(false);
+    u.subscribe(u.pipe(didMount, u.withLatestFrom(initialTopMostItemIndex), u.filter(function (_a) {
+        var _b = __read(_a, 2), _ = _b[0], location = _b[1];
+        return !!location;
+    })), function () {
+        // console.log('block rendering')
+        u.publish(scrolledToInitialItem, false);
+        // topmost item index takes precedence over initial item count
+        u.publish(initialItemCount, 0);
+    });
+    u.subscribe(u.pipe(u.combineLatest(didMount, scrolledToInitialItem, itemDimensions, viewportDimensions, initialTopMostItemIndex, scrollScheduled), u.filter(function (_a) {
+        var _b = __read(_a, 6), didMount = _b[0], scrolledToInitialItem = _b[1], itemDimensions = _b[2], viewportDimensions = _b[3], scrollScheduled = _b[5];
+        return didMount && !scrolledToInitialItem && itemDimensions.height !== 0 && viewportDimensions.height !== 0 && !scrollScheduled;
+    })), function (_a) {
+        var _b = __read(_a, 5), initialTopMostItemIndex = _b[4];
+        u.publish(scrollScheduled, true);
+        skipFrames(1, function () {
+            u.publish(scrollToIndex, initialTopMostItemIndex);
+        });
+        u.handleNext(u.pipe(scrollTop), function () {
+            // this refreshes the sizeRangeSystem start/endOffset
+            u.publish(listBoundary, [0, 0]);
+            // console.log('resume rendering')
+            u.publish(scrolledToInitialItem, true);
+        });
+    });
+    // state snapshot takes precedence over initial item count
+    u.connect(u.pipe(restoreStateFrom, u.filter(function (value) { return value !== undefined && value !== null && value.scrollTop > 0; }), u.mapTo(0)), initialItemCount);
+    u.subscribe(u.pipe(didMount, u.withLatestFrom(restoreStateFrom), u.filter(function (_a) {
+        var _b = __read(_a, 2), snapshot = _b[1];
+        return snapshot !== undefined && snapshot !== null;
+    })), function (_a) {
+        var _b = __read(_a, 2), snapshot = _b[1];
+        if (!snapshot) {
+            return;
+        }
+        u.publish(viewportDimensions, snapshot.viewport), u.publish(itemDimensions, snapshot === null || snapshot === void 0 ? void 0 : snapshot.item);
+        u.publish(gap, snapshot.gap);
+        if (snapshot.scrollTop > 0) {
+            u.publish(stateRestoreInProgress, true);
+            u.handleNext(u.pipe(scrollTop, u.skip(1)), function (_value) {
+                u.publish(stateRestoreInProgress, false);
+            });
+            u.publish(scrollTo, { top: snapshot.scrollTop });
+        }
+    });
+    u.connect(u.pipe(viewportDimensions, u.map(function (_a) {
+        var height = _a.height;
+        return height;
+    })), viewportHeight);
+    u.connect(u.pipe(u.combineLatest(u.duc(viewportDimensions, dimensionComparator), u.duc(itemDimensions, dimensionComparator), u.duc(gap, function (prev, next) { return prev && prev.column === next.column && prev.row === next.row; }), u.duc(scrollTop)), u.map(function (_a) {
+        var _b = __read(_a, 4), viewport = _b[0], item = _b[1], gap = _b[2], scrollTop = _b[3];
+        return ({
+            viewport: viewport,
+            item: item,
+            gap: gap,
+            scrollTop: scrollTop,
+        });
+    })), stateChanged);
+    u.connect(u.pipe(u.combineLatest(u.duc(totalCount), visibleRange, u.duc(gap, gapComparator), u.duc(itemDimensions, dimensionComparator), u.duc(viewportDimensions, dimensionComparator), u.duc(data), u.duc(initialItemCount), u.duc(stateRestoreInProgress), u.duc(scrolledToInitialItem), u.duc(initialTopMostItemIndex)), u.filter(function (_a) {
+        var _b = __read(_a, 8), stateRestoreInProgress = _b[7];
+        return !stateRestoreInProgress;
     }), u.map(function (_a) {
-        var _b = __read(_a, 2), count = _b[1];
-        return {
-            items: buildItems(0, count - 1),
-            top: 0,
-            bottom: 0,
-            offsetBottom: 0,
-            offsetTop: 0,
-            itemHeight: 0,
-            itemWidth: 0,
-        };
-    })), gridState);
-    u.connect(u.pipe(u.combineLatest(u.duc(totalCount), visibleRange, u.duc(itemDimensions, function (prev, next) {
-        return prev && prev.width === next.width && prev.height === next.height;
-    })), u.withLatestFrom(viewportDimensions), u.map(function (_a) {
-        var _b = __read(_a, 2), _c = __read(_b[0], 3), totalCount = _c[0], _d = __read(_c[1], 2), startOffset = _d[0], endOffset = _d[1], item = _c[2], viewport = _b[1];
+        var _b = __read(_a, 10), totalCount = _b[0], _c = __read(_b[1], 2), startOffset = _c[0], endOffset = _c[1], gap = _b[2], item = _b[3], viewport = _b[4], data = _b[5], initialItemCount = _b[6], scrolledToInitialItem = _b[8], initialTopMostItemIndex = _b[9];
+        var rowGap = gap.row, columnGap = gap.column;
         var itemHeight = item.height, itemWidth = item.width;
         var viewportWidth = viewport.width;
-        if (totalCount === 0 || viewportWidth === 0) {
+        // don't wipeout the already rendered state if there's an initial item count
+        if (initialItemCount === 0 && (totalCount === 0 || viewportWidth === 0)) {
             return INITIAL_GRID_STATE;
         }
         if (itemWidth === 0) {
-            return PROBE_GRID_STATE;
+            var startIndex_1 = getInitialTopMostItemIndexNumber(initialTopMostItemIndex, totalCount);
+            // if the initial item count is set, we don't render the items from the initial item count.
+            var endIndex_1 = startIndex_1 === 0 ? Math.max(initialItemCount - 1, 0) : startIndex_1;
+            return buildProbeGridState(buildItems(startIndex_1, endIndex_1, data));
+        }
+        var perRow = itemsPerRow(viewportWidth, itemWidth, columnGap);
+        var startIndex;
+        var endIndex;
+        // render empty items until the scroller reaches the initial item
+        if (!scrolledToInitialItem) {
+            startIndex = 0;
+            endIndex = -1;
+        }
+        // we know the dimensions from a restored state, but the offsets are not calculated yet
+        else if (startOffset === 0 && endOffset === 0 && initialItemCount > 0) {
+            startIndex = 0;
+            endIndex = initialItemCount - 1;
         }
-        var perRow = itemsPerRow(viewportWidth, itemWidth);
-        var startIndex = perRow * floor(startOffset / itemHeight);
-        var endIndex = perRow * ceil(endOffset / itemHeight) - 1;
-        endIndex = min(totalCount - 1, endIndex);
-        startIndex = min(endIndex, max(0, startIndex));
-        var items = buildItems(startIndex, endIndex);
-        var _e = gridLayout(viewport, item, items), top = _e.top, bottom = _e.bottom;
-        var totalHeight = ceil(totalCount / perRow) * itemHeight;
+        else {
+            startIndex = perRow * floor((startOffset + rowGap) / (itemHeight + rowGap));
+            endIndex = perRow * ceil((endOffset + rowGap) / (itemHeight + rowGap)) - 1;
+            endIndex = min(totalCount - 1, max(endIndex, perRow - 1));
+            startIndex = min(endIndex, max(0, startIndex));
+        }
+        var items = buildItems(startIndex, endIndex, data);
+        var _d = gridLayout(viewport, gap, item, items), top = _d.top, bottom = _d.bottom;
+        var rowCount = ceil(totalCount / perRow);
+        var totalHeight = rowCount * itemHeight + (rowCount - 1) * rowGap;
         var offsetBottom = totalHeight - bottom;
-        return {
-            items: items,
-            offsetTop: top,
-            offsetBottom: offsetBottom,
-            top: top,
-            bottom: bottom,
-            itemHeight: itemHeight,
-            itemWidth: itemWidth,
-        };
+        return { items: items, offsetTop: top, offsetBottom: offsetBottom, top: top, bottom: bottom, itemHeight: itemHeight, itemWidth: itemWidth };
     })), gridState);
-    u.connect(u.pipe(viewportDimensions, u.map(function (_a) {
-        var height = _a.height;
-        return height;
-    })), viewportHeight);
-    u.connect(u.pipe(u.combineLatest(viewportDimensions, itemDimensions, gridState), u.map(function (_a) {
-        var _b = __read(_a, 3), viewportDimensions = _b[0], item = _b[1], items = _b[2].items;
-        var _c = gridLayout(viewportDimensions, item, items), top = _c.top, bottom = _c.bottom;
+    u.connect(u.pipe(data, u.filter(function (data) { return data !== null; }), u.map(function (data) { return data.length; })), totalCount);
+    u.connect(u.pipe(u.combineLatest(viewportDimensions, itemDimensions, gridState, gap), u.filter(function (_a) {
+        var _b = __read(_a, 3), viewportDimensions = _b[0], itemDimensions = _b[1], items = _b[2].items;
+        return items.length > 0 && itemDimensions.height !== 0 && viewportDimensions.height !== 0;
+    }), u.map(function (_a) {
+        var _b = __read(_a, 4), viewportDimensions = _b[0], itemDimensions = _b[1], items = _b[2].items, gap = _b[3];
+        var _c = gridLayout(viewportDimensions, gap, itemDimensions, items), top = _c.top, bottom = _c.bottom;
         return [top, bottom];
     }), u.distinctUntilChanged(tupleComparator)), listBoundary);
+    var hasScrolled = u.statefulStream(false);
+    u.connect(u.pipe(scrollTop, u.withLatestFrom(hasScrolled), u.map(function (_a) {
+        var _b = __read(_a, 2), scrollTop = _b[0], hasScrolled = _b[1];
+        return hasScrolled || scrollTop !== 0;
+    })), hasScrolled);
     var endReached = u.streamFromEmitter(u.pipe(u.duc(gridState), u.filter(function (_a) {
         var items = _a.items;
         return items.length > 0;
-    }), u.withLatestFrom(totalCount), u.filter(function (_a) {
-        var _b = __read(_a, 2), items = _b[0].items, totalCount = _b[1];
-        return items[items.length - 1].index === totalCount - 1;
+    }), u.withLatestFrom(totalCount, hasScrolled), u.filter(function (_a) {
+        var _b = __read(_a, 3), items = _b[0].items, totalCount = _b[1], hasScrolled = _b[2];
+        return hasScrolled && items[items.length - 1].index === totalCount - 1;
     }), u.map(function (_a) {
         var _b = __read(_a, 2), totalCount = _b[1];
         return totalCount - 1;
@@ -114,20 +192,22 @@ export var gridSystem = u.system(function (_a) {
     var startReached = u.streamFromEmitter(u.pipe(u.duc(gridState), u.filter(function (_a) {
         var items = _a.items;
         return items.length > 0 && items[0].index === 0;
-    }), u.mapTo(0), u.distinctUntilChanged()));
-    var rangeChanged = u.streamFromEmitter(u.pipe(u.duc(gridState), u.filter(function (_a) {
-        var items = _a.items;
-        return items.length > 0;
+    }), 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    u.mapTo(0), u.distinctUntilChanged()));
+    var rangeChanged = u.streamFromEmitter(u.pipe(u.duc(gridState), u.withLatestFrom(stateRestoreInProgress), u.filter(function (_a) {
+        var _b = __read(_a, 2), items = _b[0].items, stateRestoreInProgress = _b[1];
+        return items.length > 0 && !stateRestoreInProgress;
     }), u.map(function (_a) {
-        var items = _a.items;
+        var _b = __read(_a, 1), items = _b[0].items;
         return {
             startIndex: items[0].index,
             endIndex: items[items.length - 1].index,
         };
-    }), u.distinctUntilChanged(rangeComparator)));
+    }), u.distinctUntilChanged(rangeComparator), u.throttleTime(0)));
     u.connect(rangeChanged, scrollSeek.scrollSeekRangeChanged);
-    u.connect(u.pipe(scrollToIndex, u.withLatestFrom(viewportDimensions, itemDimensions, totalCount), u.map(function (_a) {
-        var _b = __read(_a, 4), location = _b[0], viewport = _b[1], item = _b[2], totalCount = _b[3];
+    u.connect(u.pipe(scrollToIndex, u.withLatestFrom(viewportDimensions, itemDimensions, totalCount, gap), u.map(function (_a) {
+        var _b = __read(_a, 5), location = _b[0], viewportDimensions = _b[1], itemDimensions = _b[2], totalCount = _b[3], gap = _b[4];
         var normalLocation = normalizeIndexLocation(location);
         var align = normalLocation.align, behavior = normalLocation.behavior, offset = normalLocation.offset;
         var index = normalLocation.index;
@@ -135,12 +215,12 @@ export var gridSystem = u.system(function (_a) {
             index = totalCount - 1;
         }
         index = max(0, index, min(totalCount - 1, index));
-        var top = itemTop(viewport, item, index);
+        var top = itemTop(viewportDimensions, gap, itemDimensions, index);
         if (align === 'end') {
-            top = round(top - viewport.height + item.height);
+            top = round(top - viewportDimensions.height + itemDimensions.height);
         }
         else if (align === 'center') {
-            top = round(top - viewport.height / 2 + item.height / 2);
+            top = round(top - viewportDimensions.height / 2 + itemDimensions.height / 2);
         }
         if (offset) {
             top += offset;
@@ -150,12 +230,10 @@ export var gridSystem = u.system(function (_a) {
     var totalListHeight = u.statefulStreamFromEmitter(u.pipe(gridState, u.map(function (gridState) {
         return gridState.offsetBottom + gridState.bottom;
     })), 0);
-    u.connect(u.pipe(windowViewportRect, u.map(function (viewportInfo) { return ({
-        width: viewportInfo.visibleWidth,
-        height: viewportInfo.visibleHeight,
-    }); })), viewportDimensions);
-    return __assign(__assign(__assign(__assign({ 
+    u.connect(u.pipe(windowViewportRect, u.map(function (viewportInfo) { return ({ width: viewportInfo.visibleWidth, height: viewportInfo.visibleHeight }); })), viewportDimensions);
+    return __assign(__assign(__assign(__assign(__assign({ 
         // input
+        data: data,
         totalCount: totalCount,
         viewportDimensions: viewportDimensions,
         itemDimensions: itemDimensions,
@@ -173,27 +251,35 @@ export var gridSystem = u.system(function (_a) {
         windowScrollContainerState: windowScrollContainerState,
         deviation: deviation,
         scrollContainerState: scrollContainerState,
-        initialItemCount: initialItemCount }, scrollSeek), { 
+        footerHeight: footerHeight,
+        headerHeight: headerHeight,
+        initialItemCount: initialItemCount,
+        gap: gap,
+        restoreStateFrom: restoreStateFrom }, scrollSeek), { initialTopMostItemIndex: initialTopMostItemIndex,
         // output
         gridState: gridState,
         totalListHeight: totalListHeight }), stateFlags), { startReached: startReached,
         endReached: endReached,
         rangeChanged: rangeChanged,
-        propsReady: propsReady });
-}, u.tup(sizeRangeSystem, domIOSystem, stateFlagsSystem, scrollSeekSystem, propsReadySystem, windowScrollerSystem));
-function gridLayout(viewport, item, items) {
+        stateChanged: stateChanged,
+        propsReady: propsReady,
+        stateRestoreInProgress: stateRestoreInProgress }), log);
+}, u.tup(sizeRangeSystem, domIOSystem, stateFlagsSystem, scrollSeekSystem, propsReadySystem, windowScrollerSystem, loggerSystem));
+function gridLayout(viewport, gap, item, items) {
     var itemHeight = item.height;
     if (itemHeight === undefined || items.length === 0) {
         return { top: 0, bottom: 0 };
     }
-    var top = itemTop(viewport, item, items[0].index);
-    var bottom = itemTop(viewport, item, items[items.length - 1].index) + itemHeight;
+    var top = itemTop(viewport, gap, item, items[0].index);
+    var bottom = itemTop(viewport, gap, item, items[items.length - 1].index) + itemHeight;
     return { top: top, bottom: bottom };
 }
-function itemTop(viewport, item, index) {
-    var perRow = itemsPerRow(viewport.width, item.width);
-    return floor(index / perRow) * item.height;
+function itemTop(viewport, gap, item, index) {
+    var perRow = itemsPerRow(viewport.width, item.width, gap.column);
+    var rowCount = floor(index / perRow);
+    var top = rowCount * item.height + max(0, rowCount - 1) * gap.row;
+    return top > 0 ? top + gap.row : top;
 }
-function itemsPerRow(viewportWidth, itemWidth) {
-    return max(1, floor(viewportWidth / itemWidth));
+export function itemsPerRow(viewportWidth, itemWidth, gap) {
+    return max(1, floor((viewportWidth + gap) / (floor(itemWidth) + gap)));
 }

package/es6/components/Virtuoso/react-virtuoso/groupedListSystem.js

@@ -1,8 +1,8 @@
 import { __read } from "tslib";
-import { combineLatest, connect, distinctUntilChanged, filter, map, pipe, prop, stream, streamFromEmitter, system, tup, } from '@virtuoso.dev/urx';
+import * as u from './urx';
 import { findMaxKeyValue } from './AATree';
 import { domIOSystem } from './domIOSystem';
-import { hasGroups, sizeSystem } from './sizeSystem';
+import { sizeSystem, hasGroups } from './sizeSystem';
 export function groupCountsToIndicesAndCount(counts) {
     return counts.reduce(function (acc, groupCount) {
         acc.groupIndices.push(acc.totalCount);
@@ -13,19 +13,19 @@ export function groupCountsToIndicesAndCount(counts) {
         groupIndices: [],
     });
 }
-export var groupedListSystem = system(function (_a) {
+export var groupedListSystem = u.system(function (_a) {
     var _b = __read(_a, 2), _c = _b[0], totalCount = _c.totalCount, groupIndices = _c.groupIndices, sizes = _c.sizes, _d = _b[1], scrollTop = _d.scrollTop, headerHeight = _d.headerHeight;
-    var groupCounts = stream();
-    var topItemsIndexes = stream();
-    var groupIndicesAndCount = streamFromEmitter(pipe(groupCounts, map(groupCountsToIndicesAndCount)));
-    connect(pipe(groupIndicesAndCount, map(prop('totalCount'))), totalCount);
-    connect(pipe(groupIndicesAndCount, map(prop('groupIndices'))), groupIndices);
-    connect(pipe(combineLatest(scrollTop, sizes, headerHeight), filter(function (_a) {
-        var _b = __read(_a, 2), sizes = _b[1];
+    var groupCounts = u.stream();
+    var topItemsIndexes = u.stream();
+    var groupIndicesAndCount = u.streamFromEmitter(u.pipe(groupCounts, u.map(groupCountsToIndicesAndCount)));
+    u.connect(u.pipe(groupIndicesAndCount, u.map(function (value) { return value.totalCount; })), totalCount);
+    u.connect(u.pipe(groupIndicesAndCount, u.map(function (value) { return value.groupIndices; })), groupIndices);
+    u.connect(u.pipe(u.combineLatest(scrollTop, sizes, headerHeight), u.filter(function (_a) {
+        var _b = __read(_a, 2), _ = _b[0], sizes = _b[1];
         return hasGroups(sizes);
-    }), map(function (_a) {
+    }), u.map(function (_a) {
         var _b = __read(_a, 3), scrollTop = _b[0], state = _b[1], headerHeight = _b[2];
         return findMaxKeyValue(state.groupOffsetTree, Math.max(scrollTop - headerHeight, 0), 'v')[0];
-    }), distinctUntilChanged(), map(function (index) { return [index]; })), topItemsIndexes);
+    }), u.distinctUntilChanged(), u.map(function (index) { return [index]; })), topItemsIndexes);
     return { groupCounts: groupCounts, topItemsIndexes: topItemsIndexes };
-}, tup(sizeSystem, domIOSystem));
+}, u.tup(sizeSystem, domIOSystem));

package/es6/components/Virtuoso/react-virtuoso/hooks/useChangedChildSizes.js

@@ -1,30 +1,43 @@
-import { useRcPortalWindowContext } from '../../../../foundation';
+import React from 'react';
 import { LogLevel } from '../loggerSystem';
-import useSize from './useSize';
-export default function useChangedListContentsSizes(callback, itemSize, enabled, scrollContainerStateCallback, log, customScrollParent) {
+import { useSizeWithElRef } from './useSize';
+import { useRcPortalWindowContext } from './useRcPortalWindowContext';
+export default function useChangedListContentsSizes(callback, itemSize, enabled, scrollContainerStateCallback, log, gap, customScrollParent) {
     var _a = useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
-    return useSize(function (el) {
+    var memoedCallback = React.useCallback(function (el) {
         var ranges = getChangedChildSizes(el.children, itemSize, 'offsetHeight', log);
         var scrollableElement = el.parentElement;
         while (!scrollableElement.dataset['virtuosoScroller']) {
             scrollableElement = scrollableElement.parentElement;
         }
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        var windowScrolling = scrollableElement.lastElementChild.dataset['viewportType'] === 'window';
         var scrollTop = customScrollParent
             ? customScrollParent.scrollTop
-            : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                scrollableElement.firstElementChild.dataset['viewportType'] === 'window'
-                    ? externalWindow.pageYOffset ||
-                        externalWindow.document.documentElement.scrollTop
-                    : scrollableElement.scrollTop;
+            : windowScrolling
+                ? externalWindow.pageYOffset || externalWindow.document.documentElement.scrollTop
+                : scrollableElement.scrollTop;
+        var scrollHeight = customScrollParent
+            ? customScrollParent.scrollHeight
+            : windowScrolling
+                ? externalWindow.document.documentElement.scrollHeight
+                : scrollableElement.scrollHeight;
+        var viewportHeight = customScrollParent
+            ? customScrollParent.offsetHeight
+            : windowScrolling
+                ? externalWindow.innerHeight
+                : scrollableElement.offsetHeight;
         scrollContainerStateCallback({
             scrollTop: Math.max(scrollTop, 0),
-            scrollHeight: (customScrollParent !== null && customScrollParent !== void 0 ? customScrollParent : scrollableElement).scrollHeight,
-            viewportHeight: (customScrollParent !== null && customScrollParent !== void 0 ? customScrollParent : scrollableElement).offsetHeight,
+            scrollHeight: scrollHeight,
+            viewportHeight: viewportHeight,
         });
+        gap === null || gap === void 0 ? void 0 : gap(resolveGapValue('row-gap', getComputedStyle(el).rowGap, log));
         if (ranges !== null) {
             callback(ranges);
         }
-    }, enabled);
+    }, [callback, itemSize, log, gap, customScrollParent, scrollContainerStateCallback, externalWindow]);
+    return useSizeWithElRef(memoedCallback, enabled);
 }
 function getChangedChildSizes(children, itemSize, field, log) {
     var length = children.length;
@@ -37,7 +50,6 @@ function getChangedChildSizes(children, itemSize, field, log) {
         if (!child || child.dataset.index === undefined) {
             continue;
         }
-        // eslint-disable-next-line radix
         var index = parseInt(child.dataset.index);
         var knownSize = parseFloat(child.dataset.knownSize);
         var size = itemSize(child, field);
@@ -48,9 +60,7 @@ function getChangedChildSizes(children, itemSize, field, log) {
             continue;
         }
         var lastResult = results[results.length - 1];
-        if (results.length === 0 ||
-            lastResult.size !== size ||
-            lastResult.endIndex !== index - 1) {
+        if (results.length === 0 || lastResult.size !== size || lastResult.endIndex !== index - 1) {
             results.push({ startIndex: index, endIndex: index, size: size });
         }
         else {
@@ -59,3 +69,12 @@ function getChangedChildSizes(children, itemSize, field, log) {
     }
     return results;
 }
+function resolveGapValue(property, value, log) {
+    if (value !== 'normal' && !(value === null || value === void 0 ? void 0 : value.endsWith('px'))) {
+        log(property + " was not resolved to pixel value correctly", value, LogLevel.WARN);
+    }
+    if (value === 'normal') {
+        return 0;
+    }
+    return parseInt(value !== null && value !== void 0 ? value : '0', 10);
+}

package/es6/components/Virtuoso/react-virtuoso/hooks/useIsomorphicLayoutEffect.js

@@ -1,3 +1,3 @@
-import { useEffect, useLayoutEffect } from 'react';
-var useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+import React from 'react';
+var useIsomorphicLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 export default useIsomorphicLayoutEffect;

package/es6/components/Virtuoso/react-virtuoso/hooks/useRcPortalWindowContext.js

@@ -0,0 +1,2 @@
+import { RcPortalWindowContext, useRcPortalWindowContext } from "../../../../foundation";
+export { RcPortalWindowContext, useRcPortalWindowContext };