@ringcentral/juno 2.4.2 → 2.5.0-beta.0

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

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.4.2",
+  "version": "2.5.0-beta.0",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",
@@ -27,7 +27,7 @@
     "focus-visible": "^5.1.0",
     "lodash": "^4.17.21",
     "react-beautiful-dnd": "^13.0.0",
-    "react-virtuoso": "^1.9.3",
+    "react-virtuoso": "^2.8.3",
     "resize-observer-polyfill": "^1.5.1",
     "typeface-lato": "^0.0.75",
     "tslib": ">=2.0.0"