@ringcentral/juno 2.4.1 → 2.5.0

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

@@ -1,37 +1,35 @@
 import { useRef } from 'react';
-import { getResizeObserver, useRcPortalWindowContext, } from '../../../../foundation';
+import { useRcPortalWindowContext } from '../../../../foundation';
 export function useSizeWithElRef(callback, enabled) {
     if (enabled === void 0) { enabled = true; }
-    var externalWindow = useRcPortalWindowContext().externalWindow;
     var ref = useRef(null);
-    var observer = getResizeObserver(function (entries) {
-        var element = entries[0].target;
-        // Revert the RAF below - it causes a blink in the upward scrolling fix
-        // See e2e/chat example
-        // Avoid Resize loop limit exceeded error
-        // https://github.com/edunad/react-virtuoso/commit/581d4558f2994adea375291b76fe59605556c08f
-        // requestAnimationFrame(() => {
-        //
-        // if display: none, the element won't have an offsetParent
-        // measuring it at this mode is not going to work
-        // https://stackoverflow.com/a/21696585/1009797
-        if (element.offsetParent !== null) {
-            callback(element);
-        }
-        // })
-    }, externalWindow);
-    var callbackRef = function (elRef) {
-        if (elRef && enabled) {
-            observer.observe(elRef);
-            ref.current = elRef;
-        }
-        else {
-            if (ref.current) {
-                observer.unobserve(ref.current);
-            }
-            ref.current = null;
-        }
+    var _a = useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var callbackRef = function (_el) {
+        // eslint-disable-next-line no-void
+        void 0;
     };
+    // TODO: fix after upgrade ts
+    if (typeof externalWindow['ResizeObserver'] !== 'undefined') {
+        var observer_1 = new externalWindow['ResizeObserver'](function (entries) {
+            var element = entries[0].target;
+            if (element.offsetParent !== null) {
+                callback(element);
+            }
+        });
+        callbackRef = function (elRef) {
+            if (elRef && enabled) {
+                observer_1.observe(elRef);
+                ref.current = elRef;
+            }
+            else {
+                if (ref.current) {
+                    observer_1.unobserve(ref.current);
+                }
+                ref.current = null;
+            }
+        };
+    }
     return { ref: ref, callbackRef: callbackRef };
 }
 export default function useSize(callback, enabled) {

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

@@ -1,34 +1,54 @@
 import { useCallback, useEffect, useRef } from 'react';
+import { useRcPortalWindowContext } from '../../../../foundation';
 import { useSizeWithElRef } from './useSize';
-export default function useWindowViewportRectRef(callback, customWindow) {
-    if (customWindow === void 0) { customWindow = window; }
+export default function useWindowViewportRectRef(callback, customScrollParent) {
     var viewportInfo = useRef(null);
+    var _a = useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
     var calculateInfo = useCallback(function (element) {
         if (element === null) {
             return;
         }
         var rect = element.getBoundingClientRect();
-        var visibleHeight = customWindow.innerHeight - Math.max(0, rect.top);
         var visibleWidth = rect.width;
-        var offsetTop = rect.top + customWindow.pageYOffset;
+        var visibleHeight;
+        var offsetTop;
+        if (customScrollParent) {
+            var customScrollParentRect = customScrollParent.getBoundingClientRect();
+            var deltaTop = rect.top - customScrollParentRect.top;
+            visibleHeight = customScrollParentRect.height - Math.max(0, deltaTop);
+            offsetTop = deltaTop + customScrollParent.scrollTop;
+        }
+        else {
+            visibleHeight = externalWindow.innerHeight - Math.max(0, rect.top);
+            offsetTop = rect.top + externalWindow.pageYOffset;
+        }
         viewportInfo.current = {
             offsetTop: offsetTop,
             visibleHeight: visibleHeight,
             visibleWidth: visibleWidth,
         };
         callback(viewportInfo.current);
-    }, [callback, customWindow]);
-    var _a = useSizeWithElRef(calculateInfo), callbackRef = _a.callbackRef, ref = _a.ref;
-    var windowEH = useCallback(function () {
+    }, [callback, customScrollParent, externalWindow]);
+    var _b = useSizeWithElRef(calculateInfo), callbackRef = _b.callbackRef, ref = _b.ref;
+    var scrollAndResizeEventHandler = useCallback(function () {
         calculateInfo(ref.current);
     }, [calculateInfo, ref]);
     useEffect(function () {
-        customWindow.addEventListener('scroll', windowEH);
-        customWindow.addEventListener('resize', windowEH);
+        if (customScrollParent) {
+            customScrollParent.addEventListener('scroll', scrollAndResizeEventHandler);
+            var observer_1 = new externalWindow['ResizeObserver'](scrollAndResizeEventHandler);
+            observer_1.observe(customScrollParent);
+            return function () {
+                customScrollParent.removeEventListener('scroll', scrollAndResizeEventHandler);
+                observer_1.unobserve(customScrollParent);
+            };
+        }
+        externalWindow.addEventListener('scroll', scrollAndResizeEventHandler);
+        externalWindow.addEventListener('resize', scrollAndResizeEventHandler);
         return function () {
-            customWindow.removeEventListener('scroll', windowEH);
-            customWindow.removeEventListener('resize', windowEH);
+            externalWindow.removeEventListener('scroll', scrollAndResizeEventHandler);
+            externalWindow.removeEventListener('resize', scrollAndResizeEventHandler);
         };
-    }, [customWindow, windowEH]);
+    }, [scrollAndResizeEventHandler, customScrollParent, externalWindow]);
     return callbackRef;
 }

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

@@ -1 +1,2 @@
 export * from './components';
+export { LogLevel } from './loggerSystem';

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

@@ -32,14 +32,7 @@ export var initialItemCountSystem = u.system(function (_a) {
             }
         }
         var adjustedCount = count + includedGroupsCount;
-        var items = Array.from({
-            length: adjustedCount,
-        }).map(function (_, index) { return ({
-            index: index,
-            size: 0,
-            offset: 0,
-            data: data[index],
-        }); });
+        var items = Array.from({ length: adjustedCount }).map(function (_, index) { return ({ index: index, size: 0, offset: 0, data: data[index] }); });
         return buildListState(items, [], adjustedCount, sizes, firstItemIndex);
     })), listState);
     return { initialItemCount: initialItemCount };

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

@@ -5,23 +5,38 @@ import { domIOSystem } from './domIOSystem';
 import { propsReadySystem } from './propsReadySystem';
 import { scrollToIndexSystem } from './scrollToIndexSystem';
 import { sizeSystem } from './sizeSystem';
+export function getInitialTopMostItemIndexNumber(location, totalCount) {
+    var lastIndex = totalCount - 1;
+    var index = typeof location === 'number'
+        ? location
+        : location.index === 'LAST'
+            ? lastIndex
+            : location.index;
+    return index;
+}
 export var initialTopMostItemIndexSystem = u.system(function (_a) {
-    var _b = __read(_a, 4), _c = _b[0], sizes = _c.sizes, listRefresh = _c.listRefresh, scrollTop = _b[1].scrollTop, scrollToIndex = _b[2].scrollToIndex, didMount = _b[3].didMount;
+    var _b = __read(_a, 4), _c = _b[0], sizes = _c.sizes, listRefresh = _c.listRefresh, defaultItemSize = _c.defaultItemSize, scrollTop = _b[1].scrollTop, scrollToIndex = _b[2].scrollToIndex, didMount = _b[3].didMount;
     var scrolledToInitialItem = u.statefulStream(true);
     var initialTopMostItemIndex = u.statefulStream(0);
-    u.connect(u.pipe(didMount, u.withLatestFrom(initialTopMostItemIndex), u.filter(function (_a) {
-        var _b = __read(_a, 2), index = _b[1];
-        return index !== 0;
+    u.connect(u.pipe(didMount, u.withLatestFrom(initialTopMostItemIndex), 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    u.filter(function (_a) {
+        var _b = __read(_a, 2), location = _b[1];
+        return !!location;
     }), u.mapTo(false)), scrolledToInitialItem);
-    u.subscribe(u.pipe(listRefresh, u.withLatestFrom(scrolledToInitialItem, sizes), u.filter(function (_a) {
-        var _b = __read(_a, 3), scrolledToInitialItem = _b[1], sizeTree = _b[2].sizeTree;
-        return !empty(sizeTree) && !scrolledToInitialItem;
+    u.subscribe(u.pipe(u.combineLatest(listRefresh, didMount), u.withLatestFrom(scrolledToInitialItem, sizes, defaultItemSize), u.filter(function (_a) {
+        var _b = __read(_a, 4), _c = __read(_b[0], 2), didMount = _c[1], scrolledToInitialItem = _b[1], sizeTree = _b[2].sizeTree, defaultItemSize = _b[3];
+        return (didMount &&
+            (!empty(sizeTree) || defaultItemSize !== undefined) &&
+            !scrolledToInitialItem);
     }), u.withLatestFrom(initialTopMostItemIndex)), function (_a) {
         var _b = __read(_a, 2), initialTopMostItemIndex = _b[1];
-        u.handleNext(scrollTop, function () {
-            u.publish(scrolledToInitialItem, true);
+        setTimeout(function () {
+            u.handleNext(scrollTop, function () {
+                u.publish(scrolledToInitialItem, true);
+            });
+            u.publish(scrollToIndex, initialTopMostItemIndex);
         });
-        u.publish(scrollToIndex, initialTopMostItemIndex);
     });
     return {
         scrolledToInitialItem: scrolledToInitialItem,

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

@@ -3,7 +3,7 @@ import * as u from '@virtuoso.dev/urx';
 import { empty, findMaxKeyValue, rangesWithin } from './AATree';
 import { rangeComparator, tupleComparator } from './comparators';
 import { groupedListSystem } from './groupedListSystem';
-import { initialTopMostItemIndexSystem } from './initialTopMostItemIndexSystem';
+import { getInitialTopMostItemIndexNumber, initialTopMostItemIndexSystem, } from './initialTopMostItemIndexSystem';
 import { propsReadySystem } from './propsReadySystem';
 import { scrollToIndexSystem } from './scrollToIndexSystem';
 import { sizeRangeSystem } from './sizeRangeSystem';
@@ -116,7 +116,7 @@ export var listStateSystem = u.system(function (_a) {
             return EMPTY_LIST_STATE;
         }
         if (empty(sizeTree)) {
-            return buildListState(probeItemSet(initialTopMostItemIndex, sizesValue, data), [], totalCount, sizesValue, firstItemIndex);
+            return buildListState(probeItemSet(getInitialTopMostItemIndexNumber(initialTopMostItemIndex, totalCount), sizesValue, data), [], totalCount, sizesValue, firstItemIndex);
         }
         var topItems = [];
         if (topItemsIndexes.length > 0) {
@@ -209,7 +209,6 @@ export var listStateSystem = u.system(function (_a) {
     u.connect(u.pipe(data, u.filter(function (data) { return data !== undefined; }), u.map(function (data) { return data.length; })), totalCount);
     u.connect(u.pipe(listState, u.map(u.prop('topListHeight'))), topListHeight);
     u.connect(topListHeight, rangeTopListHeight);
-    u.connect(listState, stateFlags.listStateListener);
     u.connect(u.pipe(listState, u.map(function (state) { return [state.top, state.bottom]; })), listBoundary);
     u.connect(u.pipe(listState, u.map(function (state) { return state.items; })), itemsRendered);
     var endReached = u.streamFromEmitter(u.pipe(listState, u.filter(function (_a) {

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

@@ -8,7 +8,9 @@ import { initialItemCountSystem } from './initialItemCountSystem';
 import { initialScrollTopSystem } from './initialScrollTopSystem';
 import { initialTopMostItemIndexSystem } from './initialTopMostItemIndexSystem';
 import { listStateSystem } from './listStateSystem';
+import { loggerSystem } from './loggerSystem';
 import { propsReadySystem } from './propsReadySystem';
+import { scrollIntoViewSystem } from './scrollIntoViewSystem';
 import { scrollSeekSystem } from './scrollSeekSystem';
 import { scrollToIndexSystem } from './scrollToIndexSystem';
 import { sizeRangeSystem } from './sizeRangeSystem';
@@ -20,14 +22,14 @@ import { windowScrollerSystem } from './windowScrollerSystem';
 // workaround the growing list of systems below
 // fix this with 4.1 recursive conditional types
 var featureGroup1System = u.system(function (_a) {
-    var _b = __read(_a, 8), sizeRange = _b[0], initialItemCount = _b[1], propsReady = _b[2], scrollSeek = _b[3], totalListHeight = _b[4], initialScrollTopSystem = _b[5], alignToBottom = _b[6], windowScroller = _b[7];
-    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, sizeRange), initialItemCount), propsReady), scrollSeek), totalListHeight), initialScrollTopSystem), alignToBottom), windowScroller);
-}, u.tup(sizeRangeSystem, initialItemCountSystem, propsReadySystem, scrollSeekSystem, totalListHeightSystem, initialScrollTopSystem, alignToBottomSystem, windowScrollerSystem));
+    var _b = __read(_a, 9), sizeRange = _b[0], initialItemCount = _b[1], propsReady = _b[2], scrollSeek = _b[3], totalListHeight = _b[4], initialScrollTopSystem = _b[5], alignToBottom = _b[6], windowScroller = _b[7], scrollIntoView = _b[8];
+    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, sizeRange), initialItemCount), propsReady), scrollSeek), totalListHeight), initialScrollTopSystem), alignToBottom), windowScroller), scrollIntoView);
+}, u.tup(sizeRangeSystem, initialItemCountSystem, propsReadySystem, scrollSeekSystem, totalListHeightSystem, initialScrollTopSystem, alignToBottomSystem, windowScrollerSystem, scrollIntoViewSystem));
 export var listSystem = u.system(function (_a) {
-    var _b = _a, _c = __read(_b, 10), _d = _c[0], totalCount = _d.totalCount, sizeRanges = _d.sizeRanges, fixedItemSize = _d.fixedItemSize, defaultItemSize = _d.defaultItemSize, trackItemSizes = _d.trackItemSizes, itemSize = _d.itemSize, data = _d.data, firstItemIndex = _d.firstItemIndex, groupIndices = _d.groupIndices, _e = _c[1], initialTopMostItemIndex = _e.initialTopMostItemIndex, scrolledToInitialItem = _e.scrolledToInitialItem, domIO = _c[2], followOutput = _c[3], _f = _c[4], scrollToIndex = _c[5].scrollToIndex, topItemCount = _c[7].topItemCount, groupCounts = _c[8].groupCounts, featureGroup1 = _c[9], listState = _f.listState, topItemsIndexes = _f.topItemsIndexes, flags = __rest(_f, ["listState", "topItemsIndexes"]);
+    var _b = _a, _c = __read(_b, 11), _d = _c[0], totalCount = _d.totalCount, sizeRanges = _d.sizeRanges, fixedItemSize = _d.fixedItemSize, defaultItemSize = _d.defaultItemSize, trackItemSizes = _d.trackItemSizes, itemSize = _d.itemSize, data = _d.data, firstItemIndex = _d.firstItemIndex, groupIndices = _d.groupIndices, statefulTotalCount = _d.statefulTotalCount, _e = _c[1], initialTopMostItemIndex = _e.initialTopMostItemIndex, scrolledToInitialItem = _e.scrolledToInitialItem, domIO = _c[2], followOutput = _c[3], _f = _c[4], scrollToIndex = _c[5].scrollToIndex, topItemCount = _c[7].topItemCount, groupCounts = _c[8].groupCounts, featureGroup1 = _c[9], log = _c[10], listState = _f.listState, topItemsIndexes = _f.topItemsIndexes, flags = __rest(_f, ["listState", "topItemsIndexes"]);
     u.connect(flags.rangeChanged, featureGroup1.scrollSeekRangeChanged);
     u.connect(u.pipe(featureGroup1.windowViewportRect, u.map(u.prop('visibleHeight'))), domIO.viewportHeight);
-    return __assign(__assign(__assign(__assign(__assign({ 
+    return __assign(__assign(__assign(__assign(__assign(__assign({ 
         // input
         totalCount: totalCount,
         data: data,
@@ -39,9 +41,10 @@ export var listSystem = u.system(function (_a) {
         topItemCount: topItemCount,
         groupCounts: groupCounts, fixedItemHeight: fixedItemSize, defaultItemHeight: defaultItemSize }, followOutput), { 
         // output
+        statefulTotalCount: statefulTotalCount,
         listState: listState,
         scrollToIndex: scrollToIndex,
         trackItemSizes: trackItemSizes,
         itemSize: itemSize,
-        groupIndices: groupIndices }), flags), featureGroup1), domIO);
-}, u.tup(sizeSystem, initialTopMostItemIndexSystem, domIOSystem, followOutputSystem, listStateSystem, scrollToIndexSystem, upwardScrollFixSystem, topItemCountSystem, groupedListSystem, featureGroup1System));
+        groupIndices: groupIndices }), flags), featureGroup1), domIO), log);
+}, u.tup(sizeSystem, initialTopMostItemIndexSystem, domIOSystem, followOutputSystem, listStateSystem, scrollToIndexSystem, upwardScrollFixSystem, topItemCountSystem, groupedListSystem, featureGroup1System, loggerSystem));

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

@@ -0,0 +1,34 @@
+var _a;
+import * as u from '@virtuoso.dev/urx';
+export var LogLevel;
+(function (LogLevel) {
+    LogLevel[LogLevel["DEBUG"] = 0] = "DEBUG";
+    LogLevel[LogLevel["INFO"] = 1] = "INFO";
+    LogLevel[LogLevel["WARN"] = 2] = "WARN";
+    LogLevel[LogLevel["ERROR"] = 3] = "ERROR";
+})(LogLevel || (LogLevel = {}));
+var CONSOLE_METHOD_MAP = (_a = {},
+    _a[LogLevel.DEBUG] = 'debug',
+    _a[LogLevel.INFO] = 'log',
+    _a[LogLevel.WARN] = 'warn',
+    _a[LogLevel.ERROR] = 'error',
+    _a);
+var getGlobalThis = function () {
+    return typeof globalThis === 'undefined' ? window : globalThis;
+};
+export var loggerSystem = u.system(function () {
+    var logLevel = u.statefulStream(LogLevel.ERROR);
+    var log = u.statefulStream(function (label, message, level) {
+        if (level === void 0) { level = LogLevel.INFO; }
+        var _a;
+        var currentLevel = (_a = getGlobalThis()['VIRTUOSO_LOG_LEVEL']) !== null && _a !== void 0 ? _a : u.getValue(logLevel);
+        if (level >= currentLevel) {
+            // eslint-disable-next-line no-console
+            console[CONSOLE_METHOD_MAP[level]]('%creact-virtuoso: %c%s %o', 'color: #0253b3; font-weight: bold', 'color: initial', label, message);
+        }
+    });
+    return {
+        log: log,
+        logLevel: logLevel,
+    };
+}, [], { singleton: true });

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

@@ -1,6 +1,13 @@
+import { __read } from "tslib";
 import * as u from '@virtuoso.dev/urx';
-export var propsReadySystem = u.system(function () {
+import { getValue, tup } from '@virtuoso.dev/urx';
+import { loggerSystem, LogLevel } from './loggerSystem';
+export var propsReadySystem = u.system(function (_a) {
+    var _b = __read(_a, 1), log = _b[0].log;
     var propsReady = u.statefulStream(false);
     var didMount = u.streamFromEmitter(u.pipe(propsReady, u.filter(function (ready) { return ready; }), u.distinctUntilChanged()));
+    u.subscribe(propsReady, function (value) {
+        value && getValue(log)('props updated', {}, LogLevel.DEBUG);
+    });
     return { propsReady: propsReady, didMount: didMount };
-}, [], { singleton: true });
+}, tup(loggerSystem), { singleton: true });

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

@@ -0,0 +1,40 @@
+import { __read } from "tslib";
+import * as u from '@virtuoso.dev/urx';
+import { findMaxKeyValue } from './AATree';
+import { domIOSystem } from './domIOSystem';
+import { listStateSystem } from './listStateSystem';
+import { loggerSystem } from './loggerSystem';
+import { scrollToIndexSystem } from './scrollToIndexSystem';
+import { offsetOf, originalIndexFromItemIndex, sizeSystem } from './sizeSystem';
+export var scrollIntoViewSystem = u.system(function (_a) {
+    var _b = __read(_a, 3), _c = _b[0], sizes = _c.sizes, totalCount = _c.totalCount, _d = _b[1], scrollTop = _d.scrollTop, viewportHeight = _d.viewportHeight, headerHeight = _d.headerHeight, scrollingInProgress = _d.scrollingInProgress, scrollToIndex = _b[2].scrollToIndex;
+    var scrollIntoView = u.stream();
+    u.connect(u.pipe(scrollIntoView, u.withLatestFrom(sizes, viewportHeight, totalCount, headerHeight, scrollTop), u.map(function (_a) {
+        var _b = __read(_a, 6), _c = _b[0], index = _c.index, _d = _c.behavior, behavior = _d === void 0 ? 'auto' : _d, done = _c.done, sizes = _b[1], viewportHeight = _b[2], totalCount = _b[3], headerHeight = _b[4], scrollTop = _b[5];
+        var lastIndex = totalCount - 1;
+        var location = null;
+        index = originalIndexFromItemIndex(index, sizes);
+        index = Math.max(0, index, Math.min(lastIndex, index));
+        var itemTop = offsetOf(index, sizes.offsetTree) + headerHeight;
+        if (itemTop < scrollTop) {
+            location = { index: index, behavior: behavior, align: 'start' };
+        }
+        else {
+            var itemBottom = itemTop + findMaxKeyValue(sizes.sizeTree, index)[1];
+            if (itemBottom > scrollTop + viewportHeight) {
+                location = { index: index, behavior: behavior, align: 'end' };
+            }
+        }
+        if (location) {
+            done &&
+                u.handleNext(u.pipe(scrollingInProgress, u.skip(1), u.filter(function (value) { return value === false; })), done);
+        }
+        else {
+            done && done();
+        }
+        return location;
+    }), u.filter(function (value) { return value !== null; })), scrollToIndex);
+    return {
+        scrollIntoView: scrollIntoView,
+    };
+}, u.tup(sizeSystem, domIOSystem, scrollToIndexSystem, listStateSystem, loggerSystem), { singleton: true });

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

@@ -1,29 +1,15 @@
 import { __read } from "tslib";
-import { combineLatest, connect, distinctUntilChanged, filter, map, mapTo, pipe, scan, statefulStream, stream, subscribe, system, throttleTime, tup, withLatestFrom, } from '@virtuoso.dev/urx';
-import { domIOSystem } from './domIOSystem';
+import * as u from '@virtuoso.dev/urx';
 import { stateFlagsSystem } from './stateFlagsSystem';
-export var scrollSeekSystem = system(function (_a) {
-    var _b = __read(_a, 2), scrollTop = _b[0].scrollTop, isScrolling = _b[1].isScrolling;
-    var scrollVelocity = statefulStream(0);
-    var isSeeking = statefulStream(false);
-    var rangeChanged = stream();
-    var scrollSeekConfiguration = statefulStream(false);
-    connect(pipe(isScrolling, filter(function (value) { return !value; }), mapTo(0)), scrollVelocity);
-    connect(pipe(scrollTop, throttleTime(100), withLatestFrom(isScrolling), filter(function (_a) {
-        var _b = __read(_a, 2), isScrolling = _b[1];
-        return !!isScrolling;
-    }), scan(function (_a, _b) {
-        var _c = __read(_a, 2), prev = _c[1];
-        var _d = __read(_b, 1), next = _d[0];
-        return [prev, next];
-    }, [0, 0]), map(function (_a) {
-        var _b = __read(_a, 2), prev = _b[0], next = _b[1];
-        return next - prev;
-    })), scrollVelocity);
-    connect(pipe(scrollVelocity, withLatestFrom(scrollSeekConfiguration, isSeeking, rangeChanged), filter(function (_a) {
+export var scrollSeekSystem = u.system(function (_a) {
+    var _b = __read(_a, 1), scrollVelocity = _b[0].scrollVelocity;
+    var isSeeking = u.statefulStream(false);
+    var rangeChanged = u.stream();
+    var scrollSeekConfiguration = u.statefulStream(false);
+    u.connect(u.pipe(scrollVelocity, u.withLatestFrom(scrollSeekConfiguration, isSeeking, rangeChanged), u.filter(function (_a) {
         var _b = __read(_a, 2), config = _b[1];
         return !!config;
-    }), map(function (_a) {
+    }), u.map(function (_a) {
         var _b = __read(_a, 4), speed = _b[0], config = _b[1], isSeeking = _b[2], range = _b[3];
         var _c = config, exit = _c.exit, enter = _c.enter;
         if (isSeeking) {
@@ -35,8 +21,8 @@ export var scrollSeekSystem = system(function (_a) {
             return true;
         }
         return isSeeking;
-    }), distinctUntilChanged()), isSeeking);
-    subscribe(pipe(combineLatest(isSeeking, scrollVelocity, rangeChanged), withLatestFrom(scrollSeekConfiguration)), function (_a) {
+    }), u.distinctUntilChanged()), isSeeking);
+    u.subscribe(u.pipe(u.combineLatest(isSeeking, scrollVelocity, rangeChanged), u.withLatestFrom(scrollSeekConfiguration)), function (_a) {
         var _b = __read(_a, 2), _c = __read(_b[0], 3), isSeeking = _c[0], velocity = _c[1], range = _c[2], config = _b[1];
         return isSeeking && config && config.change && config.change(velocity, range);
     });
@@ -46,4 +32,4 @@ export var scrollSeekSystem = system(function (_a) {
         scrollVelocity: scrollVelocity,
         scrollSeekRangeChanged: rangeChanged,
     };
-}, tup(domIOSystem, stateFlagsSystem), { singleton: true });
+}, u.tup(stateFlagsSystem), { singleton: true });

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

@@ -3,6 +3,7 @@ import { __read } from "tslib";
 import * as u from '@virtuoso.dev/urx';
 import { findMaxKeyValue } from './AATree';
 import { domIOSystem } from './domIOSystem';
+import { loggerSystem, LogLevel } from './loggerSystem';
 import { offsetOf, originalIndexFromItemIndex, sizeSystem } from './sizeSystem';
 var SUPPORTS_SCROLL_TO_OPTIONS = typeof document !== 'undefined' &&
     'scrollBehavior' in document.documentElement.style;
@@ -20,13 +21,13 @@ export function normalizeIndexLocation(location) {
     return result;
 }
 export var scrollToIndexSystem = u.system(function (_a) {
-    var _b = __read(_a, 2), _c = _b[0], sizes = _c.sizes, totalCount = _c.totalCount, listRefresh = _c.listRefresh, _d = _b[1], scrollingInProgress = _d.scrollingInProgress, viewportHeight = _d.viewportHeight, scrollTo = _d.scrollTo, smoothScrollTargetReached = _d.smoothScrollTargetReached, headerHeight = _d.headerHeight, footerHeight = _d.footerHeight;
+    var _b = __read(_a, 3), _c = _b[0], sizes = _c.sizes, totalCount = _c.totalCount, listRefresh = _c.listRefresh, _d = _b[1], scrollingInProgress = _d.scrollingInProgress, viewportHeight = _d.viewportHeight, scrollTo = _d.scrollTo, smoothScrollTargetReached = _d.smoothScrollTargetReached, headerHeight = _d.headerHeight, footerHeight = _d.footerHeight, log = _b[2].log;
     var scrollToIndex = u.stream();
     var topListHeight = u.statefulStream(0);
     var unsubscribeNextListRefresh = null;
     var cleartTimeoutRef = null;
     var unsubscribeListRefresh = null;
-    var cleanup = function () {
+    function cleanup() {
         if (unsubscribeNextListRefresh) {
             unsubscribeNextListRefresh();
             unsubscribeNextListRefresh = null;
@@ -40,28 +41,33 @@ export var scrollToIndexSystem = u.system(function (_a) {
             cleartTimeoutRef = null;
         }
         u.publish(scrollingInProgress, false);
-    };
-    u.connect(u.pipe(scrollToIndex, u.withLatestFrom(sizes, viewportHeight, totalCount, topListHeight, headerHeight, footerHeight), u.map(function (_a) {
-        var _b = __read(_a, 7), location = _b[0], sizes = _b[1], viewportHeight = _b[2], totalCount = _b[3], topListHeight = _b[4], headerHeight = _b[5], footerHeight = _b[6];
+    }
+    u.connect(u.pipe(scrollToIndex, u.withLatestFrom(sizes, viewportHeight, totalCount, topListHeight, headerHeight, footerHeight, log), u.map(function (_a) {
+        var _b = __read(_a, 8), location = _b[0], sizes = _b[1], viewportHeight = _b[2], totalCount = _b[3], topListHeight = _b[4], headerHeight = _b[5], footerHeight = _b[6], log = _b[7];
         var normalLocation = normalizeIndexLocation(location);
         var align = normalLocation.align, behavior = normalLocation.behavior, offset = normalLocation.offset;
         var lastIndex = totalCount - 1;
         var index = normalLocation.index;
+        if (index === 'LAST') {
+            index = lastIndex;
+        }
         index = originalIndexFromItemIndex(index, sizes);
         index = Math.max(0, index, Math.min(lastIndex, index));
         var top = offsetOf(index, sizes.offsetTree) + headerHeight;
         if (align === 'end') {
-            top = Math.round(top -
-                viewportHeight +
-                findMaxKeyValue(sizes.sizeTree, index)[1]);
+            top =
+                top -
+                    viewportHeight +
+                    findMaxKeyValue(sizes.sizeTree, index)[1];
             if (index === lastIndex) {
                 top += footerHeight;
             }
         }
         else if (align === 'center') {
-            top = Math.round(top -
-                viewportHeight / 2 +
-                findMaxKeyValue(sizes.sizeTree, index)[1] / 2);
+            top =
+                top -
+                    viewportHeight / 2 +
+                    findMaxKeyValue(sizes.sizeTree, index)[1] / 2;
         }
         else {
             top -= topListHeight;
@@ -72,8 +78,12 @@ export var scrollToIndexSystem = u.system(function (_a) {
         var retry = function (listChanged) {
             cleanup();
             if (listChanged) {
+                log('retrying to scroll to', { location: location }, LogLevel.DEBUG);
                 u.publish(scrollToIndex, location);
             }
+            else {
+                log('list did not change, scroll successful', {}, LogLevel.DEBUG);
+            }
         };
         cleanup();
         if (behavior === 'smooth') {
@@ -86,7 +96,7 @@ export var scrollToIndexSystem = u.system(function (_a) {
             });
         }
         else {
-            unsubscribeNextListRefresh = u.handleNext(listRefresh, retry);
+            unsubscribeNextListRefresh = u.handleNext(u.pipe(listRefresh, watchChangesFor(50)), retry);
         }
         // if the scroll jump is too small, the list won't get rerendered.
         // clean this listener
@@ -94,10 +104,24 @@ export var scrollToIndexSystem = u.system(function (_a) {
             cleanup();
         }, 1200);
         u.publish(scrollingInProgress, true);
+        log('scrolling from index to', { index: index, top: top, behavior: behavior }, LogLevel.DEBUG);
         return { top: top, behavior: behavior };
     })), scrollTo);
     return {
         scrollToIndex: scrollToIndex,
         topListHeight: topListHeight,
     };
-}, u.tup(sizeSystem, domIOSystem), { singleton: true });
+}, u.tup(sizeSystem, domIOSystem, loggerSystem), { singleton: true });
+function watchChangesFor(limit) {
+    return function (done) {
+        var timeoutRef = setTimeout(function () {
+            done(false);
+        }, limit);
+        return function (value) {
+            if (value) {
+                done(true);
+                clearTimeout(timeoutRef);
+            }
+        };
+    };
+}

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

@@ -1,11 +1,12 @@
 import { __read } from "tslib";
 import * as u from '@virtuoso.dev/urx';
 import { tupleComparator } from './comparators';
-import { domIOSystem, DOWN, UP } from './domIOSystem';
+import { domIOSystem } from './domIOSystem';
+import { DOWN, UP } from './stateFlagsSystem';
 export var TOP = 'top';
 export var BOTTOM = 'bottom';
 export var NONE = 'none';
-export var getOverscan = function (overscan, end, direction) {
+export function getOverscan(overscan, end, direction) {
     if (typeof overscan === 'number') {
         return (direction === UP && end === TOP) ||
             (direction === DOWN && end === BOTTOM)
@@ -16,30 +17,55 @@ export var getOverscan = function (overscan, end, direction) {
         return end === TOP ? overscan.main : overscan.reverse;
     }
     return end === BOTTOM ? overscan.main : overscan.reverse;
-};
+}
+function getViewportIncrease(value, end) {
+    return typeof value === 'number' ? value : value[end] || 0;
+}
 export var sizeRangeSystem = u.system(function (_a) {
     var _b = __read(_a, 1), _c = _b[0], scrollTop = _c.scrollTop, viewportHeight = _c.viewportHeight, deviation = _c.deviation, headerHeight = _c.headerHeight;
     var listBoundary = u.stream();
     var topListHeight = u.statefulStream(0);
+    var fixedHeaderHeight = u.statefulStream(0);
+    var increaseViewportBy = u.statefulStream(0);
     var overscan = u.statefulStream(0);
-    var visibleRange = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(u.duc(scrollTop), u.duc(viewportHeight), u.duc(headerHeight), u.duc(listBoundary, tupleComparator), u.duc(overscan), u.duc(topListHeight), u.duc(deviation)), u.map(function (_a) {
-        var _b = __read(_a, 7), scrollTop = _b[0], viewportHeight = _b[1], headerHeight = _b[2], 
+    var visibleRange = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(u.duc(scrollTop), u.duc(viewportHeight), u.duc(headerHeight), u.duc(listBoundary, tupleComparator), u.duc(overscan), u.duc(topListHeight), u.duc(fixedHeaderHeight), u.duc(deviation), u.duc(increaseViewportBy)), u.map(function (_a) {
+        var _b = __read(_a, 9), scrollTop = _b[0], viewportHeight = _b[1], headerHeight = _b[2], 
         // @ts-ignore
-        _c = __read(_b[3], 2), listTop = _c[0], listBottom = _c[1], overscan = _b[4], topListHeight = _b[5], deviation = _b[6];
-        var top = scrollTop - headerHeight - deviation;
+        _c = __read(_b[3], 2), listTop = _c[0], listBottom = _c[1], overscan = _b[4], topListHeight = _b[5], fixedHeaderHeight = _b[6], deviation = _b[7], increaseViewportBy = _b[8];
+        var top = scrollTop - deviation;
+        var stickyHeaderHeight = topListHeight + fixedHeaderHeight;
+        var headerVisible = Math.max(headerHeight - top, 0);
         var direction = NONE;
+        var topViewportAddition = getViewportIncrease(increaseViewportBy, TOP);
+        var bottomViewportAddition = getViewportIncrease(increaseViewportBy, BOTTOM);
         listTop -= deviation;
+        listTop += headerHeight + fixedHeaderHeight;
+        listBottom += headerHeight + fixedHeaderHeight;
         listBottom -= deviation;
-        if (listTop > scrollTop + topListHeight) {
+        // console.log({ listTop, scrollTop, stickyHeaderHeight, topViewportAddition })
+        if (listTop >
+            scrollTop + stickyHeaderHeight - topViewportAddition) {
             direction = UP;
         }
-        if (listBottom < scrollTop + viewportHeight) {
+        if (listBottom <
+            scrollTop -
+                headerVisible +
+                viewportHeight +
+                bottomViewportAddition) {
             direction = DOWN;
         }
         if (direction !== NONE) {
             return [
-                Math.max(top - getOverscan(overscan, TOP, direction), 0),
-                top + viewportHeight + getOverscan(overscan, BOTTOM, direction),
+                Math.max(top -
+                    headerHeight -
+                    getOverscan(overscan, TOP, direction) -
+                    topViewportAddition, 0),
+                top -
+                    headerVisible -
+                    fixedHeaderHeight +
+                    viewportHeight +
+                    getOverscan(overscan, BOTTOM, direction) +
+                    bottomViewportAddition,
             ];
         }
         return null;
@@ -49,6 +75,8 @@ export var sizeRangeSystem = u.system(function (_a) {
         listBoundary: listBoundary,
         overscan: overscan,
         topListHeight: topListHeight,
+        fixedHeaderHeight: fixedHeaderHeight,
+        increaseViewportBy: increaseViewportBy,
         // output
         visibleRange: visibleRange,
     };