@ringcentral/juno 2.4.2 → 2.6.0

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,
     };

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 });