@ringcentral/juno 2.4.1 → 2.5.0

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

@@ -2,7 +2,9 @@ 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 arrayBinarySearch from './utils/binaryArraySearch';
+import { correctItemSize } from './utils/correctItemSize';
 function rangeIncludes(refRange) {
     var size = refRange.size, startIndex = refRange.startIndex, endIndex = refRange.endIndex;
     return function (range) {
@@ -103,80 +105,92 @@ export function rangesWithinOffsets(tree, startOffset, endOffset, minStartIndex)
     }
     return arrayToRanges(arrayBinarySearch.findRange(tree, startOffset, endOffset, offsetComparator), offsetPointParser);
 }
-export function sizeStateReducer(state, _a) {
-    var _b, e_3, _c;
-    var _d = __read(_a, 2), ranges = _d[0], groupIndices = _d[1];
-    var sizeTree = state.sizeTree;
-    var offsetTree = state.offsetTree;
-    var newSizeTree = sizeTree;
-    var syncStart = 0;
-    // We receive probe item results from a group probe,
-    // which should always pass an item and a group
-    // the results contain two ranges, which we consider to mean that groups and items have different size
-    if (groupIndices.length > 0 && empty(sizeTree) && ranges.length === 2) {
-        var groupSize_1 = ranges[0].size;
-        var itemSize_1 = ranges[1].size;
-        newSizeTree = groupIndices.reduce(function (tree, groupIndex) {
-            return insert(insert(tree, groupIndex, groupSize_1), groupIndex + 1, itemSize_1);
-        }, newSizeTree);
-    }
-    else {
-        _b = __read(insertRanges(newSizeTree, ranges), 2), newSizeTree = _b[0], syncStart = _b[1];
-    }
-    if (newSizeTree === sizeTree) {
-        return state;
-    }
+function createOffsetTree(prevOffsetTree, syncStart, sizeTree) {
+    var e_3, _a;
+    var offsetTree = prevOffsetTree;
     var prevIndex = 0;
     var prevSize = 0;
-    var prevAOffset = 0;
-    var startAIndex = 0;
+    var prevOffset = 0;
+    var startIndex = 0;
     if (syncStart !== 0) {
-        startAIndex = arrayBinarySearch.findIndexOfClosestSmallerOrEqual(offsetTree, syncStart - 1, indexComparator);
-        var offsetInfo = offsetTree[startAIndex];
-        prevAOffset = offsetInfo.offset;
-        var kv = findMaxKeyValue(newSizeTree, syncStart - 1);
+        startIndex = arrayBinarySearch.findIndexOfClosestSmallerOrEqual(offsetTree, syncStart - 1, indexComparator);
+        var offsetInfo = offsetTree[startIndex];
+        prevOffset = offsetInfo.offset;
+        var kv = findMaxKeyValue(sizeTree, syncStart - 1);
         prevIndex = kv[0];
         prevSize = kv[1];
         if (offsetTree.length &&
-            offsetTree[startAIndex].size ===
-                findMaxKeyValue(newSizeTree, syncStart)[1]) {
-            startAIndex -= 1;
+            offsetTree[startIndex].size === findMaxKeyValue(sizeTree, syncStart)[1]) {
+            startIndex -= 1;
         }
-        offsetTree = offsetTree.slice(0, startAIndex + 1);
+        offsetTree = offsetTree.slice(0, startIndex + 1);
     }
     else {
         offsetTree = [];
     }
     try {
-        for (var _e = __values(rangesWithin(newSizeTree, syncStart, Infinity)), _f = _e.next(); !_f.done; _f = _e.next()) {
-            var _g = _f.value, startIndex = _g.start, value = _g.value;
-            var aOffset = (startIndex - prevIndex) * prevSize + prevAOffset;
+        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;
             offsetTree.push({
                 offset: aOffset,
                 size: value,
-                index: startIndex,
+                index: startIndex_1,
             });
-            prevIndex = startIndex;
-            prevAOffset = aOffset;
+            prevIndex = startIndex_1;
+            prevOffset = aOffset;
             prevSize = value;
         }
     }
     catch (e_3_1) { e_3 = { error: e_3_1 }; }
     finally {
         try {
-            if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
         }
         finally { if (e_3) throw e_3.error; }
     }
     return {
-        sizeTree: newSizeTree,
         offsetTree: offsetTree,
-        groupOffsetTree: groupIndices.reduce(function (tree, index) {
-            return insert(tree, index, offsetOf(index, offsetTree));
-        }, newTree()),
         lastIndex: prevIndex,
-        lastOffset: prevAOffset,
+        lastOffset: prevOffset,
         lastSize: prevSize,
+    };
+}
+export function sizeStateReducer(state, _a) {
+    var _b;
+    var _c = __read(_a, 3), ranges = _c[0], groupIndices = _c[1], log = _c[2];
+    if (ranges.length > 0) {
+        log('received item sizes', ranges, LogLevel.DEBUG);
+    }
+    var sizeTree = state.sizeTree;
+    var newSizeTree = sizeTree;
+    var syncStart = 0;
+    // We receive probe item results from a group probe,
+    // which should always pass an item and a group
+    // the results contain two ranges, which we consider to mean that groups and items have different size
+    if (groupIndices.length > 0 && empty(sizeTree) && ranges.length === 2) {
+        var groupSize_1 = ranges[0].size;
+        var itemSize_1 = ranges[1].size;
+        newSizeTree = groupIndices.reduce(function (tree, groupIndex) {
+            return insert(insert(tree, groupIndex, groupSize_1), groupIndex + 1, itemSize_1);
+        }, 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;
+    return {
+        sizeTree: newSizeTree,
+        offsetTree: newOffsetTree,
+        lastIndex: lastIndex,
+        lastOffset: lastOffset,
+        lastSize: lastSize,
+        groupOffsetTree: groupIndices.reduce(function (tree, index) {
+            return insert(tree, index, offsetOf(index, newOffsetTree));
+        }, newTree()),
         groupIndices: groupIndices,
     };
 }
@@ -201,18 +215,27 @@ export function originalIndexFromItemIndex(itemIndex, sizes) {
 export function hasGroups(sizes) {
     return !empty(sizes.groupOffsetTree);
 }
-export var sizeSystem = u.system(function () {
+var SIZE_MAP = {
+    offsetHeight: 'height',
+    offsetWidth: 'width',
+};
+export var sizeSystem = u.system(function (_a) {
+    var _b = __read(_a, 1), log = _b[0].log;
     var sizeRanges = u.stream();
     var totalCount = u.stream();
+    var statefulTotalCount = u.statefulStreamFromEmitter(totalCount, 0);
     var unshiftWith = u.stream();
+    var shiftWith = u.stream();
     var firstItemIndex = u.statefulStream(0);
     var groupIndices = u.statefulStream([]);
     var fixedItemSize = u.statefulStream(undefined);
     var defaultItemSize = u.statefulStream(undefined);
-    var itemSize = u.statefulStream(function (el, field) { return el[field]; });
+    var itemSize = u.statefulStream(function (el, field) {
+        return correctItemSize(el, SIZE_MAP[field]);
+    });
     var data = u.statefulStream(undefined);
     var initial = initialSizeState();
-    var sizes = u.statefulStreamFromEmitter(u.pipe(sizeRanges, u.withLatestFrom(groupIndices), u.scan(sizeStateReducer, initial), u.distinctUntilChanged()), initial);
+    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 groupOffsetTree = groupIndices.reduce(function (tree, index, idx) {
@@ -238,7 +261,9 @@ export var sizeSystem = u.system(function () {
     })), sizeRanges);
     u.connect(fixedItemSize, defaultItemSize);
     var trackItemSizes = u.statefulStreamFromEmitter(u.pipe(fixedItemSize, u.map(function (size) { return size === undefined; })), true);
-    u.connect(u.pipe(defaultItemSize, u.filter(function (value) { return value !== undefined; }), u.map(function (size) { return [{ startIndex: 0, endIndex: 0, size: size }]; })), sizeRanges);
+    u.connect(u.pipe(defaultItemSize, u.filter(function (value) {
+        return value !== undefined && empty(u.getValue(sizes).sizeTree);
+    }), 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];
@@ -247,9 +272,22 @@ export var sizeSystem = u.system(function () {
             sizes: newSizes,
         };
     }, { changed: false, sizes: initial }), u.map(function (value) { return value.changed; })));
-    u.connect(u.pipe(firstItemIndex, u.scan(function (prev, next) {
+    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; }), u.filter(function (value) { return value > 0; })), unshiftWith);
+    }, { diff: 0, prev: 0 }), u.map(function (val) { return val.diff; })), function (offset) {
+        if (offset > 0) {
+            u.publish(unshiftWith, offset);
+        }
+        else if (offset < 0) {
+            u.publish(shiftWith, offset);
+        }
+    });
+    u.subscribe(u.pipe(firstItemIndex, u.withLatestFrom(log)), function (_a) {
+        var _b = __read(_a, 2), index = _b[0], log = _b[1];
+        if (index < 0) {
+            log("`firstItemIndex` prop should not be set to less than zero. If you don't know the total count, just use a very high value", { firstItemIndex: firstItemIndex }, LogLevel.ERROR);
+        }
+    });
     // Capture the current list top item before the sizes get refreshed
     var beforeUnshiftWith = u.streamFromEmitter(unshiftWith);
     u.connect(u.pipe(unshiftWith, u.withLatestFrom(sizes), u.map(function (_a) {
@@ -276,6 +314,22 @@ export var sizeSystem = u.system(function () {
             prevSize: sizes.lastSize,
         }).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 newFirstItemIndex = -shiftWith;
+        return offsetOf(newFirstItemIndex, offsetTree);
+    })));
+    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');
+        }
+        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
         data: data,
@@ -285,12 +339,15 @@ export var sizeSystem = u.system(function () {
         defaultItemSize: defaultItemSize,
         fixedItemSize: fixedItemSize,
         unshiftWith: unshiftWith,
+        shiftWith: shiftWith,
+        shiftWithOffset: shiftWithOffset,
         beforeUnshiftWith: beforeUnshiftWith,
         firstItemIndex: firstItemIndex,
         // output
         sizes: sizes,
         listRefresh: listRefresh,
+        statefulTotalCount: statefulTotalCount,
         trackItemSizes: trackItemSizes,
         itemSize: itemSize,
     };
-}, [], { singleton: true });
+}, u.tup(loggerSystem), { singleton: true });

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

@@ -1,6 +1,10 @@
 import { __read } from "tslib";
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import * as u from '@virtuoso.dev/urx';
 import { domIOSystem } from './domIOSystem';
+export var UP = 'up';
+export var DOWN = 'down';
+export var NONE = 'none';
 var INITIAL_BOTTOM_STATE = {
     atBottom: false,
     notAtBottomBecause: 'NOT_SHOWING_LAST_ITEM',
@@ -8,42 +12,54 @@ var INITIAL_BOTTOM_STATE = {
         offsetBottom: 0,
         scrollTop: 0,
         viewportHeight: 0,
-        totalHeight: 0,
+        scrollHeight: 0,
     },
 };
 export var stateFlagsSystem = u.system(function (_a) {
-    var _b = __read(_a, 1), _c = _b[0], scrollTop = _c.scrollTop, viewportHeight = _c.viewportHeight;
+    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);
     var isAtTop = u.statefulStream(true);
     var atBottomStateChange = u.stream();
     var atTopStateChange = u.stream();
-    var listStateListener = u.stream();
+    var atBottomThreshold = u.statefulStream(4);
     // 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 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);
-    var atBottomState = u.streamFromEmitter(u.pipe(u.combineLatest(listStateListener, u.duc(scrollTop), u.duc(viewportHeight)), u.scan(function (current, _a) {
-        var _b = __read(_a, 3), _c = _b[0], bottom = _c.bottom, offsetBottom = _c.offsetBottom, scrollTop = _b[1], viewportHeight = _b[2];
-        var isAtBottom = offsetBottom === 0 && scrollTop + viewportHeight - bottom > -4;
+    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 = __read(_b[0], 2), scrollTop = _c[0], scrollHeight = _c[1], viewportHeight = _b[1], _headerHeight = _b[2], _footerHeight = _b[3], atBottomThreshold = _b[4];
+        var isAtBottom = scrollTop + viewportHeight - scrollHeight > -atBottomThreshold;
         var state = {
             viewportHeight: viewportHeight,
             scrollTop: scrollTop,
-            offsetBottom: offsetBottom,
-            totalHeight: bottom + offsetBottom,
+            scrollHeight: scrollHeight,
         };
         if (isAtBottom) {
+            var atBottomBecause = void 0;
+            var scrollTopDelta = void 0;
+            if (scrollTop > current.state.scrollTop) {
+                atBottomBecause = 'SCROLLED_DOWN';
+                scrollTopDelta = current.state.scrollTop - scrollTop;
+            }
+            else {
+                atBottomBecause = 'SIZE_DECREASED';
+                scrollTopDelta =
+                    current.state.scrollTop - scrollTop ||
+                        current.scrollTopDelta;
+            }
             return {
                 atBottom: true,
                 state: state,
+                atBottomBecause: atBottomBecause,
+                scrollTopDelta: scrollTopDelta,
             };
         }
         var notAtBottomBecause;
-        if (state.totalHeight > current.state.totalHeight) {
+        if (state.scrollHeight > current.state.scrollHeight) {
             notAtBottomBecause = 'SIZE_INCREASED';
         }
-        else if (offsetBottom !== 0) {
-            notAtBottomBecause = 'NOT_SHOWING_LAST_ITEM';
-        }
         else if (viewportHeight < current.state.viewportHeight) {
             notAtBottomBecause = 'VIEWPORT_HEIGHT_DECREASING';
         }
@@ -59,14 +75,64 @@ export var stateFlagsSystem = u.system(function (_a) {
             state: state,
         };
     }, INITIAL_BOTTOM_STATE), u.distinctUntilChanged(function (prev, next) {
-        // prev && console.log(prev.atBottom, next.atBottom)
         return prev && prev.atBottom === next.atBottom;
     })));
+    var lastJumpDueToItemResize = u.statefulStreamFromEmitter(u.pipe(scrollContainerState, u.scan(function (current, _a) {
+        var _b = __read(_a, 2), scrollTop = _b[0], scrollHeight = _b[1];
+        if (current.scrollHeight !== scrollHeight) {
+            if (current.scrollTop !== scrollTop) {
+                return {
+                    scrollHeight: scrollHeight,
+                    scrollTop: scrollTop,
+                    jump: current.scrollTop - scrollTop,
+                    changed: true,
+                };
+            }
+            return {
+                scrollHeight: scrollHeight,
+                scrollTop: scrollTop,
+                jump: 0,
+                changed: true,
+            };
+        }
+        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.subscribe(isAtBottom, function (value) {
-        setTimeout(function () { return u.publish(atBottomStateChange, value); });
-    });
-    // connect(isAtBottom, atBottomStateChange)
+    u.connect(u.pipe(isAtBottom, u.throttleTime(50)), atBottomStateChange);
+    var scrollDirection = u.statefulStream(DOWN);
+    u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
+        var _b = __read(_a, 1), scrollTop = _b[0];
+        return scrollTop;
+    }), u.distinctUntilChanged(), u.scan(function (acc, scrollTop) {
+        // if things change while compensating for items, ignore,
+        // but store the new scrollTop
+        if (u.getValue(isScrollingBy)) {
+            return { direction: acc.direction, prevScrollTop: scrollTop };
+        }
+        return {
+            direction: scrollTop < acc.prevScrollTop ? UP : DOWN,
+            prevScrollTop: scrollTop,
+        };
+    }, { direction: DOWN, prevScrollTop: 0 }), u.map(function (value) { return value.direction; })), scrollDirection);
+    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(scrollTop, u.throttleTime(100), u.withLatestFrom(isScrolling), u.filter(function (_a) {
+        var _b = __read(_a, 2), _ = _b[0], isScrolling = _b[1];
+        return !!isScrolling;
+    }), u.scan(function (_a, _b) {
+        var _c = __read(_a, 2), _ = _c[0], prev = _c[1];
+        var _d = __read(_b, 1), next = _d[0];
+        return [prev, next];
+    }, [0, 0]), u.map(function (_a) {
+        var _b = __read(_a, 2), prev = _b[0], next = _b[1];
+        return next - prev;
+    })), scrollVelocity);
     return {
         isScrolling: isScrolling,
         isAtTop: isAtTop,
@@ -74,6 +140,9 @@ export var stateFlagsSystem = u.system(function (_a) {
         atBottomState: atBottomState,
         atTopStateChange: atTopStateChange,
         atBottomStateChange: atBottomStateChange,
-        listStateListener: listStateListener,
+        scrollDirection: scrollDirection,
+        atBottomThreshold: atBottomThreshold,
+        scrollVelocity: scrollVelocity,
+        lastJumpDueToItemResize: lastJumpDueToItemResize,
     };
 }, u.tup(domIOSystem));

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

@@ -1,43 +1,43 @@
 import { __read } from "tslib";
 /* eslint-disable no-continue */
 import * as u from '@virtuoso.dev/urx';
-import { domIOSystem, UP } from './domIOSystem';
+import { domIOSystem } from './domIOSystem';
 import { listStateSystem } from './listStateSystem';
+import { loggerSystem, LogLevel } from './loggerSystem';
 import { sizeSystem } from './sizeSystem';
-import { stateFlagsSystem } from './stateFlagsSystem';
+import { stateFlagsSystem, UP } from './stateFlagsSystem';
 /**
  * Fixes upward scrolling by calculating and compensation from changed item heights, using scrollBy.
  */
 export var upwardScrollFixSystem = u.system(function (_a) {
-    var _b = __read(_a, 4), _c = _b[0], scrollBy = _c.scrollBy, scrollTop = _c.scrollTop, scrollDirection = _c.scrollDirection, deviation = _c.deviation, scrollingInProgress = _c.scrollingInProgress, isScrolling = _b[1].isScrolling, listState = _b[2].listState, _d = _b[3], beforeUnshiftWith = _d.beforeUnshiftWith, sizes = _d.sizes;
-    var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress), u.filter(function (_a) {
-        var _b = __read(_a, 4), scrollTop = _b[1], scrollDirection = _b[2], scrollingInProgress = _b[3];
-        return (!scrollingInProgress && scrollTop !== 0 && scrollDirection === UP);
-    }), u.map(function (_a) {
-        var _b = __read(_a, 1), state = _b[0];
-        return state;
-    }), u.scan(function (_a, _b) {
-        var _c = __read(_a, 2), prevItems = _c[1];
-        var items = _b.items;
+    var _b = __read(_a, 5), _c = _b[0], scrollBy = _c.scrollBy, scrollTop = _c.scrollTop, deviation = _c.deviation, scrollingInProgress = _c.scrollingInProgress, _d = _b[1], isScrolling = _d.isScrolling, isAtBottom = _d.isAtBottom, atBottomState = _d.atBottomState, scrollDirection = _d.scrollDirection, lastJumpDueToItemResize = _d.lastJumpDueToItemResize, listState = _b[2].listState, _e = _b[3], beforeUnshiftWith = _e.beforeUnshiftWith, shiftWithOffset = _e.shiftWithOffset, sizes = _e.sizes, log = _b[4].log;
+    var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(lastJumpDueToItemResize), u.scan(function (_a, 
+    // @ts-ignore
+    _b) {
+        var _c = __read(_a, 3), prevItems = _c[1], prevTotalCount = _c[2];
+        var 
+        // @ts-ignore
+        _d = __read(_b, 2), _e = _d[0], items = _e.items, totalCount = _e.totalCount, lastJumpDueToItemResize = _d[1];
         var newDev = 0;
-        if (prevItems.length > 0 && items.length > 0) {
-            var firstItemIndex = items[0].originalIndex;
-            var prevFirstItemIndex = prevItems[0].originalIndex;
-            var atStart = firstItemIndex === 0 && prevFirstItemIndex === 0;
-            if (!atStart) {
-                // Handles an item taller than the viewport
-                if (firstItemIndex === prevFirstItemIndex) {
-                    newDev = items[0].size - prevItems[0].size;
-                }
-                else {
+        if (prevTotalCount === totalCount) {
+            if (prevItems.length > 0 && items.length > 0) {
+                var firstItemIndex = items[0].originalIndex;
+                var prevFirstItemIndex = prevItems[0].originalIndex;
+                var atStart = firstItemIndex === 0 && prevFirstItemIndex === 0;
+                var onlyItem = items.length === 1;
+                if (!atStart) {
                     var _loop_1 = function (index) {
                         var item = items[index];
                         var prevItem = prevItems.find(function (pItem) { return pItem.originalIndex === item.originalIndex; });
                         if (!prevItem) {
                             return "continue";
                         }
-                        if (item.offset !== prevItem.offset) {
-                            newDev = item.offset - prevItem.offset;
+                        if (item.offset !== prevItem.offset || onlyItem) {
+                            newDev =
+                                item.offset -
+                                    prevItem.offset +
+                                    item.size -
+                                    prevItem.size;
                             return "break";
                         }
                     };
@@ -48,13 +48,21 @@ export var upwardScrollFixSystem = u.system(function (_a) {
                     }
                 }
             }
+            if (newDev !== 0) {
+                newDev += lastJumpDueToItemResize;
+            }
         }
-        return [newDev, items];
-    }, [0, []]), u.filter(function (_a) {
+        return [newDev, items, totalCount];
+    }, [0, [], 0]), u.filter(function (_a) {
         var _b = __read(_a, 1), amount = _b[0];
         return amount !== 0;
+    }), u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress, log, isAtBottom, atBottomState), u.filter(function (_a) {
+        var _b = __read(_a, 4), scrollTop = _b[1], scrollDirection = _b[2], scrollingInProgress = _b[3];
+        // console.log({ amount, scrollTop, scrollDirection, scrollingInProgress, isAtBottom, atBottomState })
+        return (!scrollingInProgress && scrollTop !== 0 && scrollDirection === UP); // && (isAtBottom ? amount > 0 : true)
     }), u.map(function (_a) {
-        var _b = __read(_a, 1), amount = _b[0];
+        var _b = __read(_a, 5), _c = __read(_b[0], 1), amount = _c[0], log = _b[4];
+        log('Upward scrolling compensation', { amount: amount }, LogLevel.DEBUG);
         return amount;
     })));
     u.connect(u.pipe(deviationOffset, u.withLatestFrom(deviation), u.map(function (_a) {
@@ -79,9 +87,12 @@ export var upwardScrollFixSystem = u.system(function (_a) {
             u.publish(scrollBy, { top: -offset, behavior: 'auto' });
         }
     });
+    u.connect(u.pipe(shiftWithOffset, u.map(function (offset) {
+        return { top: -offset };
+    })), scrollBy);
     u.connect(u.pipe(beforeUnshiftWith, u.withLatestFrom(sizes), u.map(function (_a) {
         var _b = __read(_a, 2), offset = _b[0], lastSize = _b[1].lastSize;
         return offset * lastSize;
     })), deviationOffset);
     return { deviation: deviation };
-}, u.tup(domIOSystem, stateFlagsSystem, listStateSystem, sizeSystem));
+}, u.tup(domIOSystem, stateFlagsSystem, listStateSystem, sizeSystem, loggerSystem));

package/es6/components/Virtuoso/react-virtuoso/utils/correctItemSize.js

@@ -0,0 +1,3 @@
+export function correctItemSize(el, dimension) {
+    return Math.round(el.getBoundingClientRect()[dimension]);
+}

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

@@ -2,15 +2,16 @@ import { __assign, __read } from "tslib";
 import * as u from '@virtuoso.dev/urx';
 import { domIOSystem } from './domIOSystem';
 export var windowScrollerSystem = u.system(function (_a) {
-    var _b = __read(_a, 1), _c = _b[0], scrollTop = _c.scrollTop, scrollTo = _c.scrollTo;
+    var _b = __read(_a, 1), _c = _b[0], scrollTo = _c.scrollTo, scrollContainerState = _c.scrollContainerState;
+    var windowScrollContainerState = u.stream();
     var windowViewportRect = u.stream();
-    var windowScrollTop = u.stream();
     var windowScrollTo = u.stream();
     var useWindowScroll = u.statefulStream(false);
-    u.connect(u.pipe(u.combineLatest(windowScrollTop, windowViewportRect), u.map(function (_a) {
-        var _b = __read(_a, 2), windowScrollTop = _b[0], offsetTop = _b[1].offsetTop;
-        return Math.max(0, windowScrollTop - offsetTop);
-    })), scrollTop);
+    var customScrollParent = u.statefulStream(undefined);
+    u.connect(u.pipe(u.combineLatest(windowScrollContainerState, windowViewportRect), u.map(function (_a) {
+        var _b = __read(_a, 2), _c = __read(_b[0], 2), windowScrollTop = _c[0], scrollHeight = _c[1], offsetTop = _b[1].offsetTop;
+        return [Math.max(0, windowScrollTop - offsetTop), scrollHeight];
+    })), scrollContainerState);
     u.connect(u.pipe(scrollTo, u.withLatestFrom(windowViewportRect), u.map(function (_a) {
         var _b = __read(_a, 2), scrollTo = _b[0], offsetTop = _b[1].offsetTop;
         return __assign(__assign({}, scrollTo), { top: scrollTo.top + offsetTop });
@@ -18,8 +19,9 @@ export var windowScrollerSystem = u.system(function (_a) {
     return {
         // config
         useWindowScroll: useWindowScroll,
+        customScrollParent: customScrollParent,
         // input
-        windowScrollTop: windowScrollTop,
+        windowScrollContainerState: windowScrollContainerState,
         windowViewportRect: windowViewportRect,
         // signals
         windowScrollTo: windowScrollTo,

package/es6/components/Virtuoso/utils/useHighlightScroll.js

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { fixWebKitTransitionStyle } from '../../../foundation';
 /**
  * scroll into current highlight index
  */
@@ -98,3 +99,18 @@ export function useHighlightScroll(_a) {
         itemsRendered: function (e) { return (renderedItemsRef.current = e); },
     };
 }
+/**
+ * modify virtuoso style to fix safari scroll bug
+ */
+export function modifyVlScrollerStyle(scrollElm, position) {
+    if (position === void 0) { position = 'absolute'; }
+    if (scrollElm) {
+        scrollElm.style.transition = fixWebKitTransitionStyle;
+        if (position) {
+            var viewPortElm = scrollElm.firstChild;
+            if (viewPortElm) {
+                viewPortElm.style.position = position;
+            }
+        }
+    }
+}

package/es6/foundation/hooks/useLongPress/useLongPress.js

@@ -15,7 +15,7 @@ import { isElmEqualOrContain, useTouchMouseEvent, } from '../useTouchMouseEvent'
 export var useLongPress = function (_a, _b, _c) {
     var onTap = _a.onTap, onPress = _a.onPress;
     var _d = _b === void 0 ? {} : _b, onTouchStart = _d.onTouchStart, onTouchEnd = _d.onTouchEnd, onMouseDown = _d.onMouseDown, onKeyDown = _d.onKeyDown, onKeyUp = _d.onKeyUp, onContextMenu = _d.onContextMenu, onMouseUpArg = _d.onMouseUp;
-    var _e = _c === void 0 ? {} : _c, _f = _e.isPreventDefault, isPreventDefault = _f === void 0 ? true : _f, _g = _e.delay, delay = _g === void 0 ? 300 : _g;
+    var _e = _c === void 0 ? {} : _c, _f = _e.isPreventDefault, isPreventDefault = _f === void 0 ? true : _f, _g = _e.delay, delay = _g === void 0 ? 300 : _g, _h = _e.externalWindow, externalWindow = _h === void 0 ? window : _h;
     var isEmittedRef = useRef(false);
     var isA11yDownRef = useRef(false);
     var elmRef = useRef(null);
@@ -29,7 +29,7 @@ export var useLongPress = function (_a, _b, _c) {
     }, delay);
     var end = function (e) {
         // ! mouse up only trigger when up on element, so we host that in document
-        document.removeEventListener('mouseup', onMouseUp);
+        externalWindow.document.removeEventListener('mouseup', onMouseUp);
         if (!isEmittedRef.current && isElmEqualOrContain(e.target, elmRef)) {
             onTap === null || onTap === void 0 ? void 0 : onTap(e, reasonRef.current);
         }
@@ -39,7 +39,7 @@ export var useLongPress = function (_a, _b, _c) {
     };
     var start = function (e) {
         // ! mouse up only trigger when up on element, so we host that in document
-        document.addEventListener('mouseup', onMouseUp);
+        externalWindow.document.addEventListener('mouseup', onMouseUp);
         var isTouch = e.type === 'touchstart';
         if (!isTouch)
             e.preventDefault();
@@ -49,7 +49,7 @@ export var useLongPress = function (_a, _b, _c) {
         }
         emitLongPress(e);
     };
-    var _h = useTouchMouseEvent({
+    var _j = useTouchMouseEvent({
         onTouchStart: function (e) {
             onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
             start(e);
@@ -66,7 +66,7 @@ export var useLongPress = function (_a, _b, _c) {
             onMouseUpArg === null || onMouseUpArg === void 0 ? void 0 : onMouseUpArg(e);
             end(e);
         },
-    }, { isPreventDefault: isPreventDefault }), onMouseUp = _h.onMouseUp, events = __rest(_h, ["onMouseUp"]);
+    }, { isPreventDefault: isPreventDefault }), onMouseUp = _j.onMouseUp, events = __rest(_j, ["onMouseUp"]);
     var handleDeleteKeyDown = useA11yKeyEvent(function (e) {
         reasonRef.current = 'keyboard';
         // * keydown when hold will trigger many time, show when current is a11y down, not trigger again
@@ -92,8 +92,8 @@ export var useLongPress = function (_a, _b, _c) {
     useEffect(function () {
         return function () {
             // * clean when in start remove
-            document.removeEventListener('mouseup', onMouseUp);
+            externalWindow.document.removeEventListener('mouseup', onMouseUp);
         };
-    }, [onMouseUp]);
+    }, [onMouseUp, externalWindow]);
     return __assign({ ref: elmRef, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, events);
 };

package/es6/foundation/index.js

@@ -1,6 +1,6 @@
 import styled from './styled-components';
 export * from './config';
-export * from './isSafari154';
+export * from './isWebKit154';
 export * from './contexts';
 export * from './hoc';
 export * from './hooks';