@ringcentral/juno 2.4.2 → 2.5.0-beta.0

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

@@ -4,7 +4,9 @@ var tslib_1 = require("tslib");
 /* eslint-disable no-continue */
 var u = tslib_1.__importStar(require("@virtuoso.dev/urx"));
 var AATree_1 = require("./AATree");
+var loggerSystem_1 = require("./loggerSystem");
 var arrayBinarySearch = tslib_1.__importStar(require("./utils/binaryArraySearch"));
+var correctItemSize_1 = require("./utils/correctItemSize");
 function rangeIncludes(refRange) {
     var size = refRange.size, startIndex = refRange.startIndex, endIndex = refRange.endIndex;
     return function (range) {
@@ -110,80 +112,92 @@ function rangesWithinOffsets(tree, startOffset, endOffset, minStartIndex) {
     return AATree_1.arrayToRanges(arrayBinarySearch.findRange(tree, startOffset, endOffset, offsetComparator), offsetPointParser);
 }
 exports.rangesWithinOffsets = rangesWithinOffsets;
-function sizeStateReducer(state, _a) {
-    var _b, e_3, _c;
-    var _d = tslib_1.__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 && AATree_1.empty(sizeTree) && ranges.length === 2) {
-        var groupSize_1 = ranges[0].size;
-        var itemSize_1 = ranges[1].size;
-        newSizeTree = groupIndices.reduce(function (tree, groupIndex) {
-            return AATree_1.insert(AATree_1.insert(tree, groupIndex, groupSize_1), groupIndex + 1, itemSize_1);
-        }, newSizeTree);
-    }
-    else {
-        _b = tslib_1.__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 = AATree_1.findMaxKeyValue(newSizeTree, syncStart - 1);
+        startIndex = arrayBinarySearch.findIndexOfClosestSmallerOrEqual(offsetTree, syncStart - 1, indexComparator);
+        var offsetInfo = offsetTree[startIndex];
+        prevOffset = offsetInfo.offset;
+        var kv = AATree_1.findMaxKeyValue(sizeTree, syncStart - 1);
         prevIndex = kv[0];
         prevSize = kv[1];
         if (offsetTree.length &&
-            offsetTree[startAIndex].size ===
-                AATree_1.findMaxKeyValue(newSizeTree, syncStart)[1]) {
-            startAIndex -= 1;
+            offsetTree[startIndex].size === AATree_1.findMaxKeyValue(sizeTree, syncStart)[1]) {
+            startIndex -= 1;
         }
-        offsetTree = offsetTree.slice(0, startAIndex + 1);
+        offsetTree = offsetTree.slice(0, startIndex + 1);
     }
     else {
         offsetTree = [];
     }
     try {
-        for (var _e = tslib_1.__values(AATree_1.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 = tslib_1.__values(AATree_1.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 AATree_1.insert(tree, index, offsetOf(index, offsetTree));
-        }, AATree_1.newTree()),
         lastIndex: prevIndex,
-        lastOffset: prevAOffset,
+        lastOffset: prevOffset,
         lastSize: prevSize,
+    };
+}
+function sizeStateReducer(state, _a) {
+    var _b;
+    var _c = tslib_1.__read(_a, 3), ranges = _c[0], groupIndices = _c[1], log = _c[2];
+    if (ranges.length > 0) {
+        log('received item sizes', ranges, loggerSystem_1.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 && AATree_1.empty(sizeTree) && ranges.length === 2) {
+        var groupSize_1 = ranges[0].size;
+        var itemSize_1 = ranges[1].size;
+        newSizeTree = groupIndices.reduce(function (tree, groupIndex) {
+            return AATree_1.insert(AATree_1.insert(tree, groupIndex, groupSize_1), groupIndex + 1, itemSize_1);
+        }, newSizeTree);
+    }
+    else {
+        _b = tslib_1.__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 AATree_1.insert(tree, index, offsetOf(index, newOffsetTree));
+        }, AATree_1.newTree()),
         groupIndices: groupIndices,
     };
 }
@@ -212,18 +226,27 @@ function hasGroups(sizes) {
     return !AATree_1.empty(sizes.groupOffsetTree);
 }
 exports.hasGroups = hasGroups;
-exports.sizeSystem = u.system(function () {
+var SIZE_MAP = {
+    offsetHeight: 'height',
+    offsetWidth: 'width',
+};
+exports.sizeSystem = u.system(function (_a) {
+    var _b = tslib_1.__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_1.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 = tslib_1.__read(_a, 2), groupIndices = _b[0], sizes = _b[1];
         var groupOffsetTree = groupIndices.reduce(function (tree, index, idx) {
@@ -249,7 +272,9 @@ exports.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 && AATree_1.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 = tslib_1.__read(_b, 2), newSizes = _c[1];
@@ -258,9 +283,22 @@ exports.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 = tslib_1.__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 }, loggerSystem_1.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) {
@@ -287,6 +325,22 @@ exports.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 = tslib_1.__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 = tslib_1.__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 = AATree_1.walk(sizes.sizeTree).reduce(function (acc, _a) {
+            var k = _a.k, v = _a.v;
+            return AATree_1.insert(acc, Math.max(0, k + shiftWith), v);
+        }, AATree_1.newTree());
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, sizes), { sizeTree: newSizeTree }), createOffsetTree(sizes.offsetTree, 0, newSizeTree));
+    })), sizes);
     return {
         // input
         data: data,
@@ -296,12 +350,15 @@ exports.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_1.loggerSystem), { singleton: true });

package/components/Virtuoso/react-virtuoso/stateFlagsSystem.d.ts

@@ -1,4 +1,8 @@
 import * as u from '@virtuoso.dev/urx';
+export declare const UP: "up";
+export declare const DOWN: "down";
+export declare const NONE: "none";
+export declare type ScrollDirection = typeof UP | typeof DOWN | typeof NONE;
 export interface ListBottomInfo {
     bottom: number;
     offsetBottom: number;
@@ -7,9 +11,10 @@ export interface AtBottomParams {
     offsetBottom: number;
     scrollTop: number;
     viewportHeight: number;
-    totalHeight: number;
+    scrollHeight: number;
 }
 export declare type NotAtBottomReason = 'SIZE_INCREASED' | 'NOT_SHOWING_LAST_ITEM' | 'VIEWPORT_HEIGHT_DECREASING' | 'SCROLLING_UPWARDS' | 'NOT_FULLY_SCROLLED_TO_LAST_ITEM_BOTTOM';
+export declare type AtBottomReason = 'SIZE_DECREASED' | 'SCROLLED_DOWN';
 export declare type AtBottomState = {
     atBottom: false;
     notAtBottomBecause: NotAtBottomReason;
@@ -17,28 +22,32 @@ export declare type AtBottomState = {
 } | {
     atBottom: true;
     state: AtBottomParams;
+    atBottomBecause: AtBottomReason;
+    scrollTopDelta: number;
 };
 export declare const stateFlagsSystem: u.SystemSpec<[u.SystemSpec<never[], () => {
+    scrollContainerState: u.Stream<[number, number]>;
     scrollTop: u.Stream<number>;
     viewportHeight: u.Stream<number>;
     headerHeight: u.StatefulStream<number>;
     footerHeight: u.StatefulStream<number>;
+    scrollHeight: u.Stream<number>;
     smoothScrollTargetReached: u.Stream<true>;
     scrollTo: u.Stream<ScrollToOptions>;
     scrollBy: u.Stream<ScrollToOptions>;
-    scrollDirection: u.StatefulStream<import("./domIOSystem").ScrollDirection>;
     statefulScrollTop: u.StatefulStream<number>;
     deviation: u.StatefulStream<number>;
     scrollingInProgress: u.StatefulStream<boolean>;
-}>], ([{ scrollTop, viewportHeight }]: [{
+}>], ([{ scrollContainerState, scrollTop, viewportHeight, headerHeight, footerHeight, scrollBy, },]: [{
+    scrollContainerState: u.Stream<[number, number]>;
     scrollTop: u.Stream<number>;
     viewportHeight: u.Stream<number>;
     headerHeight: u.StatefulStream<number>;
     footerHeight: u.StatefulStream<number>;
+    scrollHeight: u.Stream<number>;
     smoothScrollTargetReached: u.Stream<true>;
     scrollTo: u.Stream<ScrollToOptions>;
     scrollBy: u.Stream<ScrollToOptions>;
-    scrollDirection: u.StatefulStream<import("./domIOSystem").ScrollDirection>;
     statefulScrollTop: u.StatefulStream<number>;
     deviation: u.StatefulStream<number>;
     scrollingInProgress: u.StatefulStream<boolean>;
@@ -49,5 +58,8 @@ export declare const stateFlagsSystem: u.SystemSpec<[u.SystemSpec<never[], () =>
     atBottomState: u.Stream<AtBottomState>;
     atTopStateChange: u.Stream<boolean>;
     atBottomStateChange: u.Stream<boolean>;
-    listStateListener: u.Stream<ListBottomInfo>;
+    scrollDirection: u.StatefulStream<ScrollDirection>;
+    atBottomThreshold: u.StatefulStream<number>;
+    scrollVelocity: u.StatefulStream<number>;
+    lastJumpDueToItemResize: u.StatefulStream<number>;
 }>;

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

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+/* eslint-disable @typescript-eslint/no-unused-vars */
 var u = tslib_1.__importStar(require("@virtuoso.dev/urx"));
 var domIOSystem_1 = require("./domIOSystem");
+exports.UP = 'up';
+exports.DOWN = 'down';
+exports.NONE = 'none';
 var INITIAL_BOTTOM_STATE = {
     atBottom: false,
     notAtBottomBecause: 'NOT_SHOWING_LAST_ITEM',
@@ -10,42 +14,54 @@ var INITIAL_BOTTOM_STATE = {
         offsetBottom: 0,
         scrollTop: 0,
         viewportHeight: 0,
-        totalHeight: 0,
+        scrollHeight: 0,
     },
 };
 exports.stateFlagsSystem = u.system(function (_a) {
-    var _b = tslib_1.__read(_a, 1), _c = _b[0], scrollTop = _c.scrollTop, viewportHeight = _c.viewportHeight;
+    var _b = tslib_1.__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 = tslib_1.__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 = tslib_1.__read(_a, 5), _c = tslib_1.__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';
         }
@@ -61,14 +77,64 @@ exports.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 = tslib_1.__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(exports.DOWN);
+    u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
+        var _b = tslib_1.__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 ? exports.UP : exports.DOWN,
+            prevScrollTop: scrollTop,
+        };
+    }, { direction: exports.DOWN, prevScrollTop: 0 }), u.map(function (value) { return value.direction; })), scrollDirection);
+    u.connect(u.pipe(scrollContainerState, u.throttleTime(50), u.mapTo(exports.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 = tslib_1.__read(_a, 2), _ = _b[0], isScrolling = _b[1];
+        return !!isScrolling;
+    }), u.scan(function (_a, _b) {
+        var _c = tslib_1.__read(_a, 2), _ = _c[0], prev = _c[1];
+        var _d = tslib_1.__read(_b, 1), next = _d[0];
+        return [prev, next];
+    }, [0, 0]), u.map(function (_a) {
+        var _b = tslib_1.__read(_a, 2), prev = _b[0], next = _b[1];
+        return next - prev;
+    })), scrollVelocity);
     return {
         isScrolling: isScrolling,
         isAtTop: isAtTop,
@@ -76,6 +142,9 @@ exports.stateFlagsSystem = u.system(function (_a) {
         atBottomState: atBottomState,
         atTopStateChange: atTopStateChange,
         atBottomStateChange: atBottomStateChange,
-        listStateListener: listStateListener,
+        scrollDirection: scrollDirection,
+        atBottomThreshold: atBottomThreshold,
+        scrollVelocity: scrollVelocity,
+        lastJumpDueToItemResize: lastJumpDueToItemResize,
     };
 }, u.tup(domIOSystem_1.domIOSystem));