@ringcentral/juno 2.4.2 → 2.5.0-beta.0

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

@@ -26,15 +26,12 @@ var PROBE_GRID_STATE = {
     itemHeight: 0,
     itemWidth: 0,
 };
-var ceil = Math.ceil, floor = Math.floor, min = Math.min, max = Math.max;
-function hackFloor(val) {
-    return ceil(val) - val < 0.03 ? ceil(val) : floor(val);
-}
+var round = Math.round, ceil = Math.ceil, floor = Math.floor, min = Math.min, max = Math.max;
 function buildItems(startIndex, endIndex) {
     return Array.from({ length: endIndex - startIndex + 1 }).map(function (_, i) { return ({ index: i + startIndex }); });
 }
 export var gridSystem = u.system(function (_a) {
-    var _b = __read(_a, 6), _c = _b[0], overscan = _c.overscan, visibleRange = _c.visibleRange, listBoundary = _c.listBoundary, _d = _b[1], scrollTop = _d.scrollTop, viewportHeight = _d.viewportHeight, scrollBy = _d.scrollBy, scrollTo = _d.scrollTo, smoothScrollTargetReached = _d.smoothScrollTargetReached, stateFlags = _b[2], scrollSeek = _b[3], _e = _b[4], propsReady = _e.propsReady, didMount = _e.didMount, _f = _b[5], windowViewportRect = _f.windowViewportRect, windowScrollTo = _f.windowScrollTo, useWindowScroll = _f.useWindowScroll, windowScrollTop = _f.windowScrollTop;
+    var _b = __read(_a, 6), _c = _b[0], overscan = _c.overscan, visibleRange = _c.visibleRange, listBoundary = _c.listBoundary, _d = _b[1], scrollTop = _d.scrollTop, viewportHeight = _d.viewportHeight, scrollBy = _d.scrollBy, scrollTo = _d.scrollTo, smoothScrollTargetReached = _d.smoothScrollTargetReached, scrollContainerState = _d.scrollContainerState, stateFlags = _b[2], scrollSeek = _b[3], _e = _b[4], propsReady = _e.propsReady, didMount = _e.didMount, _f = _b[5], windowViewportRect = _f.windowViewportRect, windowScrollTo = _f.windowScrollTo, useWindowScroll = _f.useWindowScroll, customScrollParent = _f.customScrollParent, windowScrollContainerState = _f.windowScrollContainerState;
     var totalCount = u.statefulStream(0);
     var initialItemCount = u.statefulStream(0);
     var gridState = u.statefulStream(INITIAL_GRID_STATE);
@@ -47,6 +44,8 @@ export var gridSystem = u.system(function (_a) {
         width: 0,
     });
     var scrollToIndex = u.stream();
+    var scrollHeight = u.stream();
+    var deviation = u.statefulStream(0);
     u.connect(u.pipe(didMount, u.withLatestFrom(initialItemCount), u.filter(function (_a) {
         var _b = __read(_a, 2), count = _b[1];
         return count !== 0;
@@ -74,7 +73,7 @@ export var gridSystem = u.system(function (_a) {
         if (itemWidth === 0) {
             return PROBE_GRID_STATE;
         }
-        var perRow = hackFloor(viewportWidth / itemWidth);
+        var perRow = itemsPerRow(viewportWidth, itemWidth);
         var startIndex = perRow * floor(startOffset / itemHeight);
         var endIndex = perRow * ceil(endOffset / itemHeight) - 1;
         endIndex = min(totalCount - 1, endIndex);
@@ -102,10 +101,6 @@ export var gridSystem = u.system(function (_a) {
         var _c = gridLayout(viewportDimensions, item, items), top = _c.top, bottom = _c.bottom;
         return [top, bottom];
     }), u.distinctUntilChanged(tupleComparator)), listBoundary);
-    u.connect(u.pipe(listBoundary, u.withLatestFrom(gridState), u.map(function (_a) {
-        var _b = __read(_a, 2), _c = __read(_b[0], 2), bottom = _c[1], offsetBottom = _b[1].offsetBottom;
-        return { bottom: bottom, offsetBottom: offsetBottom };
-    })), stateFlags.listStateListener);
     var endReached = u.streamFromEmitter(u.pipe(u.duc(gridState), u.filter(function (_a) {
         var items = _a.items;
         return items.length > 0;
@@ -136,13 +131,16 @@ export var gridSystem = u.system(function (_a) {
         var normalLocation = normalizeIndexLocation(location);
         var align = normalLocation.align, behavior = normalLocation.behavior, offset = normalLocation.offset;
         var index = normalLocation.index;
-        index = Math.max(0, index, Math.min(totalCount - 1, index));
+        if (index === 'LAST') {
+            index = totalCount - 1;
+        }
+        index = max(0, index, min(totalCount - 1, index));
         var top = itemTop(viewport, item, index);
         if (align === 'end') {
-            top = Math.round(top - viewport.height + item.height);
+            top = round(top - viewport.height + item.height);
         }
         else if (align === 'center') {
-            top = Math.round(top - viewport.height / 2 + item.height / 2);
+            top = round(top - viewport.height / 2 + item.height / 2);
         }
         if (offset) {
             top += offset;
@@ -162,6 +160,7 @@ export var gridSystem = u.system(function (_a) {
         viewportDimensions: viewportDimensions,
         itemDimensions: itemDimensions,
         scrollTop: scrollTop,
+        scrollHeight: scrollHeight,
         overscan: overscan,
         scrollBy: scrollBy,
         scrollTo: scrollTo,
@@ -170,7 +169,10 @@ export var gridSystem = u.system(function (_a) {
         windowViewportRect: windowViewportRect,
         windowScrollTo: windowScrollTo,
         useWindowScroll: useWindowScroll,
-        windowScrollTop: windowScrollTop,
+        customScrollParent: customScrollParent,
+        windowScrollContainerState: windowScrollContainerState,
+        deviation: deviation,
+        scrollContainerState: scrollContainerState,
         initialItemCount: initialItemCount }, scrollSeek), { 
         // output
         gridState: gridState,
@@ -193,5 +195,5 @@ function itemTop(viewport, item, index) {
     return floor(index / perRow) * item.height;
 }
 function itemsPerRow(viewportWidth, itemWidth) {
-    return hackFloor(viewportWidth / itemWidth);
+    return max(1, floor(viewportWidth / itemWidth));
 }

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

@@ -1,13 +1,37 @@
+/* eslint-disable no-continue */
+import { useRcPortalWindowContext } from '../../../../foundation';
+import { LogLevel } from '../loggerSystem';
 import useSize from './useSize';
-export default function useChangedChildSizes(callback, itemSize, enabled) {
+export default function useChangedListContentsSizes(callback, itemSize, enabled, scrollContainerStateCallback, log, customScrollParent) {
+    var _a = useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
     return useSize(function (el) {
-        var ranges = getChangedChildSizes(el.children, itemSize, 'offsetHeight');
+        var ranges = getChangedChildSizes(el.children, itemSize, 'offsetHeight', log);
+        var scrollableElement = el.parentElement;
+        while (!scrollableElement.dataset['virtuosoScroller']) {
+            scrollableElement = scrollableElement.parentElement;
+        }
+        var scrollTop = customScrollParent
+            ? customScrollParent.scrollTop
+            : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                scrollableElement.firstElementChild.dataset['viewportType'] === 'window'
+                    ? externalWindow.pageYOffset ||
+                        externalWindow.document.documentElement.scrollTop
+                    : scrollableElement.scrollTop;
+        customScrollParent
+            ? scrollContainerStateCallback([
+                Math.max(scrollTop, 0),
+                customScrollParent.scrollHeight,
+            ])
+            : scrollContainerStateCallback([
+                Math.max(scrollTop, 0),
+                scrollableElement.scrollHeight,
+            ]);
         if (ranges !== null) {
             callback(ranges);
         }
     }, enabled);
 }
-function getChangedChildSizes(children, itemSize, field) {
+function getChangedChildSizes(children, itemSize, field, log) {
     var length = children.length;
     if (length === 0) {
         return null;
@@ -18,11 +42,12 @@ function getChangedChildSizes(children, itemSize, field) {
         if (!child || child.dataset.index === undefined) {
             continue;
         }
-        var index = parseInt(child.dataset.index, 10);
-        var knownSize = parseInt(child.dataset.knownSize, 10);
+        // eslint-disable-next-line radix
+        var index = parseInt(child.dataset.index);
+        var knownSize = parseFloat(child.dataset.knownSize);
         var size = itemSize(child, field);
         if (size === 0) {
-            throw new Error('Zero-sized element, this should not happen');
+            log('Zero-sized element, this should not happen', { child: child }, LogLevel.ERROR);
         }
         if (size === knownSize) {
             continue;

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

@@ -1,22 +1,31 @@
 import { useCallback, useEffect, useRef } from 'react';
 import * as u from '@virtuoso.dev/urx';
-export default function useScrollTop(scrollTopCallback, smoothScrollTargetReached, scrollerElement, scrollerRefCallback, customWindow) {
+import { correctItemSize } from '../utils/correctItemSize';
+import { useRcPortalWindowContext } from '../../../../foundation';
+function approximatelyEqual(num1, num2) {
+    return Math.abs(num1 - num2) < 1.01;
+}
+export default function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, scrollerElement, scrollerRefCallback, customScrollParent) {
     if (scrollerRefCallback === void 0) { scrollerRefCallback = u.noop; }
-    if (customWindow === void 0) { customWindow = window; }
     var scrollerRef = useRef(null);
     var scrollTopTarget = useRef(null);
     var timeoutRef = useRef(null);
-    var customDocument = customWindow.document;
+    var _a = useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
     var handler = useCallback(function (ev) {
         var el = ev.target;
-        var scrollTop = el === customWindow || el === customDocument
-            ? customWindow.pageYOffset || customDocument.documentElement.scrollTop
+        var scrollTop = el === externalWindow ||
+            el === externalWindow.document
+            ? externalWindow.pageYOffset ||
+                externalWindow.document.documentElement.scrollTop
             : el.scrollTop;
-        scrollTopCallback(Math.max(scrollTop, 0));
+        var scrollHeight = el === externalWindow
+            ? externalWindow.document.documentElement.scrollHeight
+            : el.scrollHeight;
+        scrollContainerStateCallback([Math.max(scrollTop, 0), scrollHeight]);
         if (scrollTopTarget.current !== null) {
             if (scrollTop === scrollTopTarget.current ||
                 scrollTop <= 0 ||
-                scrollTop === el.scrollHeight - el.offsetHeight) {
+                scrollTop === el.scrollHeight - correctItemSize(el, 'height')) {
                 scrollTopTarget.current = null;
                 smoothScrollTargetReached(true);
                 if (timeoutRef.current) {
@@ -25,54 +34,59 @@ export default function useScrollTop(scrollTopCallback, smoothScrollTargetReache
                 }
             }
         }
-    }, [
-        customDocument,
-        customWindow,
-        scrollTopCallback,
-        smoothScrollTargetReached,
-    ]);
+    }, [externalWindow, scrollContainerStateCallback, smoothScrollTargetReached]);
     useEffect(function () {
-        var localRef = scrollerRef.current;
-        scrollerRefCallback(scrollerRef.current);
+        var localRef = customScrollParent
+            ? customScrollParent
+            : scrollerRef.current;
+        scrollerRefCallback(customScrollParent ? customScrollParent : scrollerRef.current);
         handler({ target: localRef });
         localRef.addEventListener('scroll', handler, { passive: true });
         return function () {
             scrollerRefCallback(null);
             localRef.removeEventListener('scroll', handler);
         };
-    }, [scrollerRef, handler, scrollerElement, scrollerRefCallback]);
+    }, [
+        scrollerRef,
+        handler,
+        scrollerElement,
+        scrollerRefCallback,
+        customScrollParent,
+    ]);
     function scrollToCallback(location) {
         var scrollerElement = scrollerRef.current;
-        if (!scrollerElement) {
+        if (!scrollerElement ||
+            ('offsetHeight' in scrollerElement && scrollerElement.offsetHeight === 0)) {
             return;
         }
         var isSmooth = location.behavior === 'smooth';
         var offsetHeight;
         var scrollHeight;
         var scrollTop;
-        if (scrollerElement === customWindow) {
+        if (scrollerElement === externalWindow) {
             // this is not a mistake
-            scrollHeight = Math.max(customDocument.documentElement.offsetHeight, customDocument.documentElement.scrollHeight);
-            offsetHeight = customWindow.innerHeight;
-            scrollTop = customDocument.documentElement.scrollTop;
+            scrollHeight = Math.max(correctItemSize(externalWindow.document.documentElement, 'height'), externalWindow.document.documentElement.scrollHeight);
+            offsetHeight = externalWindow.window.innerHeight;
+            scrollTop = externalWindow.document.documentElement.scrollTop;
         }
         else {
             scrollHeight = scrollerElement.scrollHeight;
-            offsetHeight = scrollerElement.offsetHeight;
+            offsetHeight = correctItemSize(scrollerElement, 'height');
             scrollTop = scrollerElement.scrollTop;
         }
+        var maxScrollTop = scrollHeight - offsetHeight;
+        location.top = Math.ceil(Math.max(Math.min(maxScrollTop, location.top), 0));
         // avoid system hanging because the DOM never called back
         // with the scrollTop
         // scroller is already at this location
-        if (offsetHeight === scrollHeight || location.top === scrollTop) {
-            scrollTopCallback(scrollTop);
+        if (approximatelyEqual(offsetHeight, scrollHeight) ||
+            location.top === scrollTop) {
+            scrollContainerStateCallback([scrollTop, scrollHeight]);
             if (isSmooth) {
                 smoothScrollTargetReached(true);
             }
             return;
         }
-        var maxScrollTop = scrollHeight - offsetHeight;
-        location.top = Math.max(Math.min(maxScrollTop, location.top), 0);
         if (isSmooth) {
             scrollTopTarget.current = location.top;
             if (timeoutRef.current) {

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