@ringcentral/juno 2.40.1 → 2.41.0

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

@@ -1,18 +1,26 @@
 import { __assign, __read, __spread, __values } from "tslib";
-/* eslint-disable no-continue */
-import * as u from '@virtuoso.dev/urx';
-import { arrayToRanges, empty, findMaxKeyValue, insert, newTree, rangesWithin, remove, walk, } from './AATree';
-import { loggerSystem, LogLevel } from './loggerSystem';
+import * as u from './urx';
+import { arrayToRanges, empty, find, findMaxKeyValue, insert, newTree, rangesWithin, remove, walk } from './AATree';
 import * as arrayBinarySearch from './utils/binaryArraySearch';
 import { correctItemSize } from './utils/correctItemSize';
+import { loggerSystem, LogLevel } from './loggerSystem';
+import { recalcSystem } from './recalcSystem';
 function rangeIncludes(refRange) {
     var size = refRange.size, startIndex = refRange.startIndex, endIndex = refRange.endIndex;
     return function (range) {
-        return (range.start === startIndex &&
-            (range.end === endIndex || range.end === Infinity) &&
-            range.value === size);
+        return range.start === startIndex && (range.end === endIndex || range.end === Infinity) && range.value === size;
     };
 }
+function affectedGroupCount(offset, groupIndices) {
+    var recognizedOffsetItems = 0;
+    var groupIndex = 0;
+    while (recognizedOffsetItems < offset) {
+        recognizedOffsetItems += groupIndices[groupIndex + 1] - groupIndices[groupIndex] - 1;
+        groupIndex++;
+    }
+    var offsetIsExact = recognizedOffsetItems === offset;
+    return groupIndex - (offsetIsExact ? 0 : 1);
+}
 export function insertRanges(sizeTree, ranges) {
     var e_1, _a, e_2, _b;
     var syncStart = empty(sizeTree) ? 0 : Infinity;
@@ -42,10 +50,12 @@ export function insertRanges(sizeTree, ranges) {
                         shouldInsert = rangeValue !== size;
                         firstPassDone = true;
                     }
-                    // remove the range if it starts within the new range OR if
-                    // it has the same value as it, in order to perform a merge
-                    else if (endIndex >= rangeStart || size === rangeValue) {
-                        sizeTree = remove(sizeTree, rangeStart);
+                    else {
+                        // remove the range if it starts within the new range OR if
+                        // it has the same value as it, in order to perform a merge
+                        if (endIndex >= rangeStart || size === rangeValue) {
+                            sizeTree = remove(sizeTree, rangeStart);
+                        }
                     }
                     // next range
                     if (rangeEnd > endIndex && endIndex >= rangeStart) {
@@ -105,7 +115,7 @@ export function rangesWithinOffsets(tree, startOffset, endOffset, minStartIndex)
     }
     return arrayToRanges(arrayBinarySearch.findRange(tree, startOffset, endOffset, offsetComparator), offsetPointParser);
 }
-function createOffsetTree(prevOffsetTree, syncStart, sizeTree) {
+function createOffsetTree(prevOffsetTree, syncStart, sizeTree, gap) {
     var e_3, _a;
     var offsetTree = prevOffsetTree;
     var prevIndex = 0;
@@ -119,8 +129,7 @@ function createOffsetTree(prevOffsetTree, syncStart, sizeTree) {
         var kv = findMaxKeyValue(sizeTree, syncStart - 1);
         prevIndex = kv[0];
         prevSize = kv[1];
-        if (offsetTree.length &&
-            offsetTree[startIndex].size === findMaxKeyValue(sizeTree, syncStart)[1]) {
+        if (offsetTree.length && offsetTree[startIndex].size === findMaxKeyValue(sizeTree, syncStart)[1]) {
             startIndex -= 1;
         }
         offsetTree = offsetTree.slice(0, startIndex + 1);
@@ -131,7 +140,8 @@ function createOffsetTree(prevOffsetTree, syncStart, sizeTree) {
     try {
         for (var _b = __values(rangesWithin(sizeTree, syncStart, Infinity)), _c = _b.next(); !_c.done; _c = _b.next()) {
             var _d = _c.value, startIndex_1 = _d.start, value = _d.value;
-            var aOffset = (startIndex_1 - prevIndex) * prevSize + prevOffset;
+            var indexOffset = startIndex_1 - prevIndex;
+            var aOffset = indexOffset * prevSize + prevOffset + indexOffset * gap;
             offsetTree.push({
                 offset: aOffset,
                 size: value,
@@ -158,7 +168,7 @@ function createOffsetTree(prevOffsetTree, syncStart, sizeTree) {
 }
 export function sizeStateReducer(state, _a) {
     var _b;
-    var _c = __read(_a, 3), ranges = _c[0], groupIndices = _c[1], log = _c[2];
+    var _c = __read(_a, 4), ranges = _c[0], groupIndices = _c[1], log = _c[2], gap = _c[3];
     if (ranges.length > 0) {
         log('received item sizes', ranges, LogLevel.DEBUG);
     }
@@ -176,12 +186,13 @@ export function sizeStateReducer(state, _a) {
         }, newSizeTree);
     }
     else {
+        ;
         _b = __read(insertRanges(newSizeTree, ranges), 2), newSizeTree = _b[0], syncStart = _b[1];
     }
     if (newSizeTree === sizeTree) {
         return state;
     }
-    var _d = createOffsetTree(state.offsetTree, syncStart, newSizeTree), newOffsetTree = _d.offsetTree, lastIndex = _d.lastIndex, lastSize = _d.lastSize, lastOffset = _d.lastOffset;
+    var _d = createOffsetTree(state.offsetTree, syncStart, newSizeTree, gap), newOffsetTree = _d.offsetTree, lastIndex = _d.lastIndex, lastSize = _d.lastSize, lastOffset = _d.lastOffset;
     return {
         sizeTree: newSizeTree,
         offsetTree: newOffsetTree,
@@ -189,17 +200,36 @@ export function sizeStateReducer(state, _a) {
         lastOffset: lastOffset,
         lastSize: lastSize,
         groupOffsetTree: groupIndices.reduce(function (tree, index) {
-            return insert(tree, index, offsetOf(index, newOffsetTree));
+            return insert(tree, index, offsetOf(index, newOffsetTree, gap));
         }, newTree()),
         groupIndices: groupIndices,
     };
 }
-export function offsetOf(index, tree) {
+export function offsetOf(index, tree, gap) {
     if (tree.length === 0) {
         return 0;
     }
     var _a = arrayBinarySearch.findClosestSmallerOrEqual(tree, index, indexComparator), offset = _a.offset, startIndex = _a.index, size = _a.size;
-    return size * (index - startIndex) + offset;
+    var itemCount = index - startIndex;
+    var top = size * itemCount + (itemCount - 1) * gap + offset;
+    return top > 0 ? top + gap : top;
+}
+export function isGroupLocation(location) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    return typeof location.groupIndex !== 'undefined';
+}
+export function originalIndexFromLocation(location, sizes, lastIndex) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    if (isGroupLocation(location)) {
+        // return the index of the first item below the index
+        return sizes.groupIndices[location.groupIndex] + 1;
+    }
+    else {
+        var numericIndex = location.index === 'LAST' ? lastIndex : location.index;
+        var result = originalIndexFromItemIndex(numericIndex, sizes);
+        result = Math.max(0, result, Math.min(lastIndex, result));
+        return result;
+    }
 }
 export function originalIndexFromItemIndex(itemIndex, sizes) {
     if (!hasGroups(sizes)) {
@@ -215,12 +245,20 @@ export function originalIndexFromItemIndex(itemIndex, sizes) {
 export function hasGroups(sizes) {
     return !empty(sizes.groupOffsetTree);
 }
+export function sizeTreeToRanges(sizeTree) {
+    return walk(sizeTree).map(function (_a, index, sizeArray) {
+        var startIndex = _a.k, size = _a.v;
+        var nextSize = sizeArray[index + 1];
+        var endIndex = nextSize ? nextSize.k - 1 : Infinity;
+        return { startIndex: startIndex, endIndex: endIndex, size: size };
+    });
+}
 var SIZE_MAP = {
     offsetHeight: 'height',
     offsetWidth: 'width',
 };
 export var sizeSystem = u.system(function (_a) {
-    var _b = __read(_a, 1), log = _b[0].log;
+    var _b = __read(_a, 2), log = _b[0].log, recalcInProgress = _b[1].recalcInProgress;
     var sizeRanges = u.stream();
     var totalCount = u.stream();
     var statefulTotalCount = u.statefulStreamFromEmitter(totalCount, 0);
@@ -230,22 +268,30 @@ export var sizeSystem = u.system(function (_a) {
     var groupIndices = u.statefulStream([]);
     var fixedItemSize = u.statefulStream(undefined);
     var defaultItemSize = u.statefulStream(undefined);
-    var itemSize = u.statefulStream(function (el, field) {
-        return correctItemSize(el, SIZE_MAP[field]);
-    });
+    var itemSize = u.statefulStream(function (el, field) { return correctItemSize(el, SIZE_MAP[field]); });
     var data = u.statefulStream(undefined);
+    var gap = u.statefulStream(0);
     var initial = initialSizeState();
-    var sizes = u.statefulStreamFromEmitter(u.pipe(sizeRanges, u.withLatestFrom(groupIndices, log), u.scan(sizeStateReducer, initial), u.distinctUntilChanged()), initial);
-    u.connect(u.pipe(groupIndices, u.filter(function (indexes) { return indexes.length > 0; }), u.withLatestFrom(sizes), u.map(function (_a) {
-        var _b = __read(_a, 2), groupIndices = _b[0], sizes = _b[1];
+    var sizes = u.statefulStreamFromEmitter(u.pipe(sizeRanges, u.withLatestFrom(groupIndices, log, gap), u.scan(sizeStateReducer, initial), u.distinctUntilChanged()), initial);
+    var prevGroupIndices = u.statefulStreamFromEmitter(u.pipe(groupIndices, u.distinctUntilChanged(), u.scan(function (prev, curr) { return ({ prev: prev.current, current: curr }); }, {
+        prev: [],
+        current: [],
+    }), u.map(function (_a) {
+        var prev = _a.prev;
+        return prev;
+    })), []);
+    u.connect(u.pipe(groupIndices, u.filter(function (indexes) { return indexes.length > 0; }), u.withLatestFrom(sizes, gap), u.map(function (_a) {
+        var _b = __read(_a, 3), groupIndices = _b[0], sizes = _b[1], gap = _b[2];
         var groupOffsetTree = groupIndices.reduce(function (tree, index, idx) {
-            return insert(tree, index, offsetOf(index, sizes.offsetTree) || idx);
+            return insert(tree, index, offsetOf(index, sizes.offsetTree, gap) || idx);
         }, newTree());
         return __assign(__assign({}, sizes), { groupIndices: groupIndices,
             groupOffsetTree: groupOffsetTree });
     })), sizes);
     // decreasing the total count should remove any existing entries
     // beyond the last index - do this by publishing the default size as a range over them.
+    // This causes some size loss in for the last items, but it's better than having the wrong measurements
+    // see #896
     u.connect(u.pipe(totalCount, u.withLatestFrom(sizes), u.filter(function (_a) {
         var _b = __read(_a, 2), totalCount = _b[0], lastIndex = _b[1].lastIndex;
         return totalCount < lastIndex;
@@ -266,7 +312,7 @@ export var sizeSystem = u.system(function (_a) {
     }), u.map(function (size) { return [{ startIndex: 0, endIndex: 0, size: size }]; })), sizeRanges);
     var listRefresh = u.streamFromEmitter(u.pipe(sizeRanges, u.withLatestFrom(sizes), u.scan(function (_a, _b) {
         var oldSizes = _a.sizes;
-        var _c = __read(_b, 2), newSizes = _c[1];
+        var _c = __read(_b, 2), _ = _c[0], newSizes = _c[1];
         return {
             changed: newSizes !== oldSizes,
             sizes: newSizes,
@@ -275,10 +321,16 @@ export var sizeSystem = u.system(function (_a) {
     u.subscribe(u.pipe(firstItemIndex, u.scan(function (prev, next) {
         return { diff: prev.prev - next, prev: next };
     }, { diff: 0, prev: 0 }), u.map(function (val) { return val.diff; })), function (offset) {
+        var groupIndices = u.getValue(sizes).groupIndices;
         if (offset > 0) {
-            u.publish(unshiftWith, offset);
+            u.publish(recalcInProgress, true);
+            u.publish(unshiftWith, offset + affectedGroupCount(offset, groupIndices));
         }
         else if (offset < 0) {
+            var prevGroupIndicesValue = u.getValue(prevGroupIndices);
+            if (prevGroupIndicesValue.length > 0) {
+                offset -= affectedGroupCount(-offset, prevGroupIndicesValue);
+            }
             u.publish(shiftWith, offset);
         }
     });
@@ -292,43 +344,117 @@ export var sizeSystem = u.system(function (_a) {
     var beforeUnshiftWith = u.streamFromEmitter(unshiftWith);
     u.connect(u.pipe(unshiftWith, u.withLatestFrom(sizes), u.map(function (_a) {
         var _b = __read(_a, 2), unshiftWith = _b[0], sizes = _b[1];
-        if (sizes.groupIndices.length > 0) {
-            throw new Error('Virtuoso: prepending items does not work with groups');
+        var groupedMode = sizes.groupIndices.length > 0;
+        var initialRanges = [];
+        var defaultSize = sizes.lastSize;
+        if (groupedMode) {
+            var firstGroupSize = find(sizes.sizeTree, 0);
+            var prependedGroupItemsCount = 0;
+            var groupIndex = 0;
+            while (prependedGroupItemsCount < unshiftWith) {
+                var theGroupIndex = sizes.groupIndices[groupIndex];
+                var groupItemCount = sizes.groupIndices.length === groupIndex + 1 ? Infinity : sizes.groupIndices[groupIndex + 1] - theGroupIndex - 1;
+                initialRanges.push({
+                    startIndex: theGroupIndex,
+                    endIndex: theGroupIndex,
+                    size: firstGroupSize,
+                });
+                initialRanges.push({
+                    startIndex: theGroupIndex + 1,
+                    endIndex: theGroupIndex + 1 + groupItemCount - 1,
+                    size: defaultSize,
+                });
+                groupIndex++;
+                prependedGroupItemsCount += groupItemCount + 1;
+            }
+            var sizeTreeKV = walk(sizes.sizeTree);
+            // here, we detect if the first group item size has increased, so that we can delete its value.
+            var firstGroupIsExpanded = prependedGroupItemsCount !== unshiftWith;
+            if (firstGroupIsExpanded) {
+                // remove the first group item size, already incorporated
+                sizeTreeKV.shift();
+            }
+            return sizeTreeKV.reduce(function (acc, _a) {
+                var index = _a.k, size = _a.v;
+                var ranges = acc.ranges;
+                if (acc.prevSize !== 0) {
+                    ranges = __spread(acc.ranges, [
+                        {
+                            startIndex: acc.prevIndex,
+                            endIndex: index + unshiftWith - 1,
+                            size: acc.prevSize,
+                        },
+                    ]);
+                }
+                return {
+                    ranges: ranges,
+                    prevIndex: index + unshiftWith,
+                    prevSize: size,
+                };
+            }, {
+                ranges: initialRanges,
+                prevIndex: unshiftWith,
+                prevSize: 0,
+            }).ranges;
         }
         return walk(sizes.sizeTree).reduce(function (acc, _a) {
             var index = _a.k, size = _a.v;
             return {
-                ranges: __spread(acc.ranges, [
-                    {
-                        startIndex: acc.prevIndex,
-                        endIndex: index + unshiftWith - 1,
-                        size: acc.prevSize,
-                    },
-                ]),
+                ranges: __spread(acc.ranges, [{ startIndex: acc.prevIndex, endIndex: index + unshiftWith - 1, size: acc.prevSize }]),
                 prevIndex: index + unshiftWith,
                 prevSize: size,
             };
         }, {
             ranges: [],
             prevIndex: 0,
-            prevSize: sizes.lastSize,
+            prevSize: defaultSize,
         }).ranges;
     })), sizeRanges);
-    var shiftWithOffset = u.streamFromEmitter(u.pipe(shiftWith, u.withLatestFrom(sizes), u.map(function (_a) {
-        var _b = __read(_a, 2), shiftWith = _b[0], offsetTree = _b[1].offsetTree;
+    var shiftWithOffset = u.streamFromEmitter(u.pipe(shiftWith, u.withLatestFrom(sizes, gap), u.map(function (_a) {
+        var _b = __read(_a, 3), shiftWith = _b[0], offsetTree = _b[1].offsetTree, gap = _b[2];
         var newFirstItemIndex = -shiftWith;
-        return offsetOf(newFirstItemIndex, offsetTree);
+        return offsetOf(newFirstItemIndex, offsetTree, gap);
     })));
-    u.connect(u.pipe(shiftWith, u.withLatestFrom(sizes), u.map(function (_a) {
-        var _b = __read(_a, 2), shiftWith = _b[0], sizes = _b[1];
-        if (sizes.groupIndices.length > 0) {
-            throw new Error('Virtuoso: shifting items does not work with groups');
+    u.connect(u.pipe(shiftWith, u.withLatestFrom(sizes, gap), u.map(function (_a) {
+        var _b = __read(_a, 3), shiftWith = _b[0], sizes = _b[1], gap = _b[2];
+        var groupedMode = sizes.groupIndices.length > 0;
+        if (groupedMode) {
+            // we can't shift an empty tree
+            if (empty(sizes.sizeTree)) {
+                return sizes;
+            }
+            var newSizeTree = newTree();
+            var prevGroupIndicesValue = u.getValue(prevGroupIndices);
+            var removedItemsCount = 0;
+            var groupIndex = 0;
+            var groupOffset = 0;
+            while (removedItemsCount < -shiftWith) {
+                groupOffset = prevGroupIndicesValue[groupIndex];
+                var groupItemCount = prevGroupIndicesValue[groupIndex + 1] - groupOffset - 1;
+                groupIndex++;
+                removedItemsCount += groupItemCount + 1;
+            }
+            newSizeTree = walk(sizes.sizeTree).reduce(function (acc, _a) {
+                var k = _a.k, v = _a.v;
+                return insert(acc, Math.max(0, k + shiftWith), v);
+            }, newSizeTree);
+            // here, we detect if the first group item size has increased, so that we can delete its value.
+            var aGroupIsShrunk = removedItemsCount !== -shiftWith;
+            if (aGroupIsShrunk) {
+                var firstGroupSize = find(sizes.sizeTree, groupOffset);
+                newSizeTree = insert(newSizeTree, 0, firstGroupSize);
+                var nextItemSize = findMaxKeyValue(sizes.sizeTree, -shiftWith + 1)[1];
+                newSizeTree = insert(newSizeTree, 1, nextItemSize);
+            }
+            return __assign(__assign(__assign({}, sizes), { sizeTree: newSizeTree }), createOffsetTree(sizes.offsetTree, 0, newSizeTree, gap));
+        }
+        else {
+            var newSizeTree = walk(sizes.sizeTree).reduce(function (acc, _a) {
+                var k = _a.k, v = _a.v;
+                return insert(acc, Math.max(0, k + shiftWith), v);
+            }, newTree());
+            return __assign(__assign(__assign({}, sizes), { sizeTree: newSizeTree }), createOffsetTree(sizes.offsetTree, 0, newSizeTree, gap));
         }
-        var newSizeTree = walk(sizes.sizeTree).reduce(function (acc, _a) {
-            var k = _a.k, v = _a.v;
-            return insert(acc, Math.max(0, k + shiftWith), v);
-        }, newTree());
-        return __assign(__assign(__assign({}, sizes), { sizeTree: newSizeTree }), createOffsetTree(sizes.offsetTree, 0, newSizeTree));
     })), sizes);
     return {
         // input
@@ -343,6 +469,7 @@ export var sizeSystem = u.system(function (_a) {
         shiftWithOffset: shiftWithOffset,
         beforeUnshiftWith: beforeUnshiftWith,
         firstItemIndex: firstItemIndex,
+        gap: gap,
         // output
         sizes: sizes,
         listRefresh: listRefresh,
@@ -350,4 +477,4 @@ export var sizeSystem = u.system(function (_a) {
         trackItemSizes: trackItemSizes,
         itemSize: itemSize,
     };
-}, u.tup(loggerSystem), { singleton: true });
+}, u.tup(loggerSystem, recalcSystem), { singleton: true });

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

@@ -1,7 +1,8 @@
 import { __read } from "tslib";
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import * as u from '@virtuoso.dev/urx';
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import * as u from './urx';
 import { domIOSystem } from './domIOSystem';
+import { approximatelyEqual } from './utils/approximatelyEqual';
 export var UP = 'up';
 export var DOWN = 'down';
 export var NONE = 'none';
@@ -15,6 +16,7 @@ var INITIAL_BOTTOM_STATE = {
         scrollHeight: 0,
     },
 };
+var DEFAULT_AT_TOP_THRESHOLD = 0;
 export var stateFlagsSystem = u.system(function (_a) {
     var _b = __read(_a, 1), _c = _b[0], scrollContainerState = _c.scrollContainerState, scrollTop = _c.scrollTop, viewportHeight = _c.viewportHeight, headerHeight = _c.headerHeight, footerHeight = _c.footerHeight, scrollBy = _c.scrollBy;
     var isAtBottom = u.statefulStream(false);
@@ -22,12 +24,16 @@ export var stateFlagsSystem = u.system(function (_a) {
     var atBottomStateChange = u.stream();
     var atTopStateChange = u.stream();
     var atBottomThreshold = u.statefulStream(4);
+    var atTopThreshold = u.statefulStream(DEFAULT_AT_TOP_THRESHOLD);
     // skip 1 to avoid an initial on/off flick
-    var isScrolling = u.streamFromEmitter(u.pipe(u.merge(u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(true)), u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(false), u.debounceTime(100))), u.distinctUntilChanged()));
+    var isScrolling = u.statefulStreamFromEmitter(u.pipe(u.merge(u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(true)), u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(false), u.debounceTime(100))), u.distinctUntilChanged()), false);
     var isScrollingBy = u.statefulStreamFromEmitter(u.pipe(u.merge(u.pipe(scrollBy, u.mapTo(true)), u.pipe(scrollBy, u.mapTo(false), u.debounceTime(200))), u.distinctUntilChanged()), false);
     // u.subscribe(isScrollingBy, (isScrollingBy) => console.log({ isScrollingBy }))
-    u.connect(u.pipe(u.duc(scrollTop), u.map(function (top) { return top === 0; }), u.distinctUntilChanged()), isAtTop);
-    u.connect(isAtTop, atTopStateChange);
+    u.connect(u.pipe(u.combineLatest(u.duc(scrollTop), u.duc(atTopThreshold)), u.map(function (_a) {
+        var _b = __read(_a, 2), top = _b[0], atTopThreshold = _b[1];
+        return top <= atTopThreshold;
+    }), u.distinctUntilChanged()), isAtTop);
+    u.connect(u.pipe(isAtTop, u.throttleTime(50)), atTopStateChange);
     var atBottomState = u.streamFromEmitter(u.pipe(u.combineLatest(scrollContainerState, u.duc(viewportHeight), u.duc(headerHeight), u.duc(footerHeight), u.duc(atBottomThreshold)), u.scan(function (current, _a) {
         var _b = __read(_a, 5), _c = _b[0], scrollTop = _c.scrollTop, scrollHeight = _c.scrollHeight, viewportHeight = _b[1], _headerHeight = _b[2], _footerHeight = _b[3], atBottomThreshold = _b[4];
         var isAtBottom = scrollTop + viewportHeight - scrollHeight > -atBottomThreshold;
@@ -45,9 +51,7 @@ export var stateFlagsSystem = u.system(function (_a) {
             }
             else {
                 atBottomBecause = 'SIZE_DECREASED';
-                scrollTopDelta =
-                    current.state.scrollTop - scrollTop ||
-                        current.scrollTopDelta;
+                scrollTopDelta = current.state.scrollTop - scrollTop || current.scrollTopDelta;
             }
             return {
                 atBottom: true,
@@ -79,8 +83,8 @@ export var stateFlagsSystem = u.system(function (_a) {
     })));
     var lastJumpDueToItemResize = u.statefulStreamFromEmitter(u.pipe(scrollContainerState, u.scan(function (current, _a) {
         var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, viewportHeight = _a.viewportHeight;
-        if (current.scrollHeight !== scrollHeight) {
-            var atBottom = scrollTop === scrollHeight - viewportHeight;
+        if (!approximatelyEqual(current.scrollHeight, scrollHeight)) {
+            var atBottom = scrollHeight - (scrollTop + viewportHeight) < 1;
             if (current.scrollTop !== scrollTop && atBottom) {
                 return {
                     scrollHeight: scrollHeight,
@@ -89,19 +93,23 @@ export var stateFlagsSystem = u.system(function (_a) {
                     changed: true,
                 };
             }
+            else {
+                return {
+                    scrollHeight: scrollHeight,
+                    scrollTop: scrollTop,
+                    jump: 0,
+                    changed: true,
+                };
+            }
+        }
+        else {
             return {
-                scrollHeight: scrollHeight,
                 scrollTop: scrollTop,
+                scrollHeight: scrollHeight,
                 jump: 0,
-                changed: true,
+                changed: false,
             };
         }
-        return {
-            scrollTop: scrollTop,
-            scrollHeight: scrollHeight,
-            jump: 0,
-            changed: false,
-        };
     }, { scrollHeight: 0, jump: 0, scrollTop: 0, changed: false }), u.filter(function (value) { return value.changed; }), u.map(function (value) { return value.jump; })), 0);
     u.connect(u.pipe(atBottomState, u.map(function (state) { return state.atBottom; })), isAtBottom);
     u.connect(u.pipe(isAtBottom, u.throttleTime(50)), atBottomStateChange);
@@ -115,14 +123,14 @@ export var stateFlagsSystem = u.system(function (_a) {
         if (u.getValue(isScrollingBy)) {
             return { direction: acc.direction, prevScrollTop: scrollTop };
         }
-        return {
-            direction: scrollTop < acc.prevScrollTop ? UP : DOWN,
-            prevScrollTop: scrollTop,
-        };
+        return { direction: scrollTop < acc.prevScrollTop ? UP : DOWN, prevScrollTop: scrollTop };
     }, { direction: DOWN, prevScrollTop: 0 }), u.map(function (value) { return value.direction; })), scrollDirection);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     u.connect(u.pipe(scrollContainerState, u.throttleTime(50), u.mapTo(NONE)), scrollDirection);
     var scrollVelocity = u.statefulStream(0);
-    u.connect(u.pipe(isScrolling, u.filter(function (value) { return !value; }), u.mapTo(0)), scrollVelocity);
+    u.connect(u.pipe(isScrolling, u.filter(function (value) { return !value; }), 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    u.mapTo(0)), scrollVelocity);
     u.connect(u.pipe(scrollTop, u.throttleTime(100), u.withLatestFrom(isScrolling), u.filter(function (_a) {
         var _b = __read(_a, 2), _ = _b[0], isScrolling = _b[1];
         return !!isScrolling;
@@ -143,6 +151,7 @@ export var stateFlagsSystem = u.system(function (_a) {
         atBottomStateChange: atBottomStateChange,
         scrollDirection: scrollDirection,
         atBottomThreshold: atBottomThreshold,
+        atTopThreshold: atTopThreshold,
         scrollVelocity: scrollVelocity,
         lastJumpDueToItemResize: lastJumpDueToItemResize,
     };

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

@@ -0,0 +1,39 @@
+import { __read } from "tslib";
+import { domIOSystem } from './domIOSystem';
+import { initialTopMostItemIndexSystem } from './initialTopMostItemIndexSystem';
+import { propsReadySystem } from './propsReadySystem';
+import { sizeSystem, sizeTreeToRanges } from './sizeSystem';
+import * as u from './urx';
+import { windowScrollerSystem } from './windowScrollerSystem';
+export var stateLoadSystem = u.system(function (_a) {
+    var _b = __read(_a, 5), _c = _b[0], sizes = _c.sizes, sizeRanges = _c.sizeRanges, scrollTop = _b[1].scrollTop, initialTopMostItemIndex = _b[2].initialTopMostItemIndex, didMount = _b[3].didMount, _d = _b[4], useWindowScroll = _d.useWindowScroll, windowScrollContainerState = _d.windowScrollContainerState, windowViewportRect = _d.windowViewportRect;
+    var getState = u.stream();
+    var restoreStateFrom = u.statefulStream(undefined);
+    var statefulWindowScrollContainerState = u.statefulStream(null);
+    var statefulWindowViewportRect = u.statefulStream(null);
+    u.connect(windowScrollContainerState, statefulWindowScrollContainerState);
+    u.connect(windowViewportRect, statefulWindowViewportRect);
+    u.subscribe(u.pipe(getState, u.withLatestFrom(sizes, scrollTop, useWindowScroll, statefulWindowScrollContainerState, statefulWindowViewportRect)), function (_a) {
+        var _b = __read(_a, 6), callback = _b[0], sizes = _b[1], scrollTop = _b[2], useWindowScroll = _b[3], windowScrollContainerState = _b[4], windowViewportRect = _b[5];
+        var ranges = sizeTreeToRanges(sizes.sizeTree);
+        if (useWindowScroll && windowScrollContainerState !== null && windowViewportRect !== null) {
+            scrollTop = windowScrollContainerState.scrollTop - windowViewportRect.offsetTop;
+        }
+        callback({ ranges: ranges, scrollTop: scrollTop });
+    });
+    u.connect(u.pipe(restoreStateFrom, u.filter(u.isDefined), u.map(locationFromSnapshot)), initialTopMostItemIndex);
+    u.connect(u.pipe(didMount, u.withLatestFrom(restoreStateFrom), u.filter(function (_a) {
+        var _b = __read(_a, 2), state = _b[1];
+        return state !== undefined;
+    }), u.distinctUntilChanged(), u.map(function (_a) {
+        var _b = __read(_a, 2), snapshot = _b[1];
+        return snapshot.ranges;
+    })), sizeRanges);
+    return {
+        getState: getState,
+        restoreStateFrom: restoreStateFrom,
+    };
+}, u.tup(sizeSystem, domIOSystem, initialTopMostItemIndexSystem, propsReadySystem, windowScrollerSystem));
+function locationFromSnapshot(snapshot) {
+    return { offset: snapshot.scrollTop, index: 0, align: 'start' };
+}

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

@@ -1,9 +1,9 @@
 import { __read } from "tslib";
-import { connect, filter, map, pipe, statefulStream, system, tup, } from '@virtuoso.dev/urx';
+import * as u from './urx';
 import { listStateSystem } from './listStateSystem';
-export var topItemCountSystem = system(function (_a) {
+export var topItemCountSystem = u.system(function (_a) {
     var _b = __read(_a, 1), topItemsIndexes = _b[0].topItemsIndexes;
-    var topItemCount = statefulStream(0);
-    connect(pipe(topItemCount, filter(function (length) { return length > 0; }), map(function (length) { return Array.from({ length: length }).map(function (_, index) { return index; }); })), topItemsIndexes);
+    var topItemCount = u.statefulStream(0);
+    u.connect(u.pipe(topItemCount, u.filter(function (length) { return length > 0; }), u.map(function (length) { return Array.from({ length: length }).map(function (_, index) { return index; }); })), topItemsIndexes);
     return { topItemCount: topItemCount };
-}, tup(listStateSystem));
+}, u.tup(listStateSystem));

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

@@ -1,20 +1,13 @@
 import { __read } from "tslib";
-import * as u from '@virtuoso.dev/urx';
-import { domIOSystem } from './domIOSystem';
+import * as u from './urx';
 import { listStateSystem } from './listStateSystem';
+import { domIOSystem } from './domIOSystem';
 export var totalListHeightSystem = u.system(function (_a) {
-    var _b = __read(_a, 2), _c = _b[0], footerHeight = _c.footerHeight, headerHeight = _c.headerHeight, listState = _b[1].listState;
+    var _b = __read(_a, 2), _c = _b[0], footerHeight = _c.footerHeight, headerHeight = _c.headerHeight, fixedHeaderHeight = _c.fixedHeaderHeight, fixedFooterHeight = _c.fixedFooterHeight, listState = _b[1].listState;
     var totalListHeightChanged = u.stream();
-    var totalListHeight = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(footerHeight, headerHeight, listState), u.map(function (_a) {
-        var _b = __read(_a, 3), footerHeight = _b[0], headerHeight = _b[1], listState = _b[2];
-        // FIXME: this footerHeight, headerHeight calculate is not correct, should find where to apply totalListHeightSystem
-        // console.log('-------- [totalListHeightSystem Log] --------');
-        // console.log(footerHeight, headerHeight, listState);
-        // console.log('---------------- [Log End] ----------------');
-        return (footerHeight +
-            headerHeight +
-            listState.offsetBottom +
-            listState.bottom);
+    var totalListHeight = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(footerHeight, fixedFooterHeight, headerHeight, fixedHeaderHeight, listState), u.map(function (_a) {
+        var _b = __read(_a, 5), footerHeight = _b[0], fixedFooterHeight = _b[1], headerHeight = _b[2], fixedHeaderHeight = _b[3], listState = _b[4];
+        return footerHeight + fixedFooterHeight + headerHeight + fixedHeaderHeight + listState.offsetBottom + listState.bottom;
     })), 0);
     u.connect(u.duc(totalListHeight), totalListHeightChanged);
     return { totalListHeight: totalListHeight, totalListHeightChanged: totalListHeightChanged };