@ringcentral/juno 2.40.1 → 2.41.0

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

@@ -1,38 +1,37 @@
-import { useCallback, useEffect, useRef } from 'react';
-import * as u from '@virtuoso.dev/urx';
-import { useRcPortalWindowContext } from '../../../../foundation';
+import React from 'react';
+import * as u from '../urx';
 import { correctItemSize } from '../utils/correctItemSize';
-function approximatelyEqual(num1, num2) {
-    return Math.abs(num1 - num2) < 1.01;
-}
+import ReactDOM from 'react-dom';
+import { approximatelyEqual } from '../utils/approximatelyEqual';
+import { useRcPortalWindowContext } from './useRcPortalWindowContext';
 export default function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, scrollerElement, scrollerRefCallback, customScrollParent) {
     if (scrollerRefCallback === void 0) { scrollerRefCallback = u.noop; }
-    var scrollerRef = useRef(null);
-    var scrollTopTarget = useRef(null);
-    var timeoutRef = useRef(null);
+    var scrollerRef = React.useRef(null);
+    var scrollTopTarget = React.useRef(null);
+    var timeoutRef = React.useRef(null);
     var _a = useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
-    var handler = useCallback(function (ev) {
+    var handler = React.useCallback(function (ev) {
         var el = ev.target;
-        var scrollTop = el === externalWindow ||
-            el === externalWindow.document
-            ? externalWindow.pageYOffset ||
-                externalWindow.document.documentElement.scrollTop
-            : el.scrollTop;
-        var scrollHeight = el === externalWindow
-            ? externalWindow.document.documentElement.scrollHeight
-            : el.scrollHeight;
-        var viewportHeight = el === externalWindow
-            ? externalWindow.innerHeight
-            : el.offsetHeight;
-        scrollContainerStateCallback({
-            scrollTop: Math.max(scrollTop, 0),
-            scrollHeight: scrollHeight,
-            viewportHeight: viewportHeight,
-        });
+        var windowScroll = el === externalWindow || el === externalWindow.document;
+        var scrollTop = windowScroll ? externalWindow.pageYOffset || externalWindow.document.documentElement.scrollTop : el.scrollTop;
+        var scrollHeight = windowScroll ? externalWindow.document.documentElement.scrollHeight : el.scrollHeight;
+        var viewportHeight = windowScroll ? externalWindow.innerHeight : el.offsetHeight;
+        var call = function () {
+            scrollContainerStateCallback({
+                scrollTop: Math.max(scrollTop, 0),
+                scrollHeight: scrollHeight,
+                viewportHeight: viewportHeight,
+            });
+        };
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (ev.suppressFlushSync) {
+            call();
+        }
+        else {
+            ReactDOM.flushSync(call);
+        }
         if (scrollTopTarget.current !== null) {
-            if (scrollTop === scrollTopTarget.current ||
-                scrollTop <= 0 ||
-                scrollTop === el.scrollHeight - correctItemSize(el, 'height')) {
+            if (scrollTop === scrollTopTarget.current || scrollTop <= 0 || scrollTop === scrollHeight - viewportHeight) {
                 scrollTopTarget.current = null;
                 smoothScrollTargetReached(true);
                 if (timeoutRef.current) {
@@ -42,28 +41,19 @@ export default function useScrollTop(scrollContainerStateCallback, smoothScrollT
             }
         }
     }, [externalWindow, scrollContainerStateCallback, smoothScrollTargetReached]);
-    useEffect(function () {
-        var localRef = customScrollParent
-            ? customScrollParent
-            : scrollerRef.current;
+    React.useEffect(function () {
+        var localRef = customScrollParent ? customScrollParent : scrollerRef.current;
         scrollerRefCallback(customScrollParent ? customScrollParent : scrollerRef.current);
-        handler({ target: localRef });
+        handler({ target: localRef, suppressFlushSync: true });
         localRef.addEventListener('scroll', handler, { passive: true });
         return function () {
             scrollerRefCallback(null);
             localRef.removeEventListener('scroll', handler);
         };
-    }, [
-        scrollerRef,
-        handler,
-        scrollerElement,
-        scrollerRefCallback,
-        customScrollParent,
-    ]);
+    }, [scrollerRef, handler, scrollerElement, scrollerRefCallback, customScrollParent]);
     function scrollToCallback(location) {
         var scrollerElement = scrollerRef.current;
-        if (!scrollerElement ||
-            ('offsetHeight' in scrollerElement && scrollerElement.offsetHeight === 0)) {
+        if (!scrollerElement || ('offsetHeight' in scrollerElement && scrollerElement.offsetHeight === 0)) {
             return;
         }
         var isSmooth = location.behavior === 'smooth';
@@ -86,13 +76,8 @@ export default function useScrollTop(scrollContainerStateCallback, smoothScrollT
         // avoid system hanging because the DOM never called back
         // with the scrollTop
         // scroller is already at this location
-        if (approximatelyEqual(offsetHeight, scrollHeight) ||
-            location.top === scrollTop) {
-            scrollContainerStateCallback({
-                scrollTop: scrollTop,
-                scrollHeight: scrollHeight,
-                viewportHeight: offsetHeight,
-            });
+        if (approximatelyEqual(offsetHeight, scrollHeight) || location.top === scrollTop) {
+            scrollContainerStateCallback({ scrollTop: scrollTop, scrollHeight: scrollHeight, viewportHeight: offsetHeight });
             if (isSmooth) {
                 smoothScrollTargetReached(true);
             }

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

@@ -1,22 +1,21 @@
-import { useRef } from 'react';
-import { useRcPortalWindowContext } from '../../../../foundation';
+import React from 'react';
+import { useRcPortalWindowContext } from './useRcPortalWindowContext';
 export function useSizeWithElRef(callback, enabled) {
     if (enabled === void 0) { enabled = true; }
-    var ref = useRef(null);
+    var ref = React.useRef(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);
-            }
-        });
+        var observer_1 = React.useMemo(function () {
+            return new externalWindow['ResizeObserver'](function (entries) {
+                var element = entries[0].target;
+                if (element.offsetParent !== null) {
+                    callback(element);
+                }
+            });
+        }, [callback]);
         callbackRef = function (elRef) {
             if (elRef && enabled) {
                 observer_1.observe(elRef);

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

@@ -1,16 +1,15 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useRcPortalWindowContext } from '../../../../foundation';
+import React from 'react';
 import { useSizeWithElRef } from './useSize';
+import { useRcPortalWindowContext } from './useRcPortalWindowContext';
 export default function useWindowViewportRectRef(callback, customScrollParent) {
-    var viewportInfo = useRef(null);
+    var viewportInfo = React.useRef(null);
     var _a = useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
-    var calculateInfo = useCallback(function (element) {
-        if (element === null) {
+    var calculateInfo = React.useCallback(function (element) {
+        if (element === null || !element.offsetParent) {
             return;
         }
         var rect = element.getBoundingClientRect();
         var visibleWidth = rect.width;
-        // eslint-disable-next-line one-var
         var visibleHeight, offsetTop;
         if (customScrollParent) {
             var customScrollParentRect = customScrollParent.getBoundingClientRect();
@@ -30,10 +29,10 @@ export default function useWindowViewportRectRef(callback, customScrollParent) {
         callback(viewportInfo.current);
     }, [callback, customScrollParent, externalWindow]);
     var _b = useSizeWithElRef(calculateInfo), callbackRef = _b.callbackRef, ref = _b.ref;
-    var scrollAndResizeEventHandler = useCallback(function () {
+    var scrollAndResizeEventHandler = React.useCallback(function () {
         calculateInfo(ref.current);
     }, [calculateInfo, ref]);
-    useEffect(function () {
+    React.useEffect(function () {
         if (customScrollParent) {
             customScrollParent.addEventListener('scroll', scrollAndResizeEventHandler);
             var observer_1 = new externalWindow['ResizeObserver'](scrollAndResizeEventHandler);
@@ -43,12 +42,14 @@ export default function useWindowViewportRectRef(callback, customScrollParent) {
                 observer_1.unobserve(customScrollParent);
             };
         }
-        externalWindow.addEventListener('scroll', scrollAndResizeEventHandler);
-        externalWindow.addEventListener('resize', scrollAndResizeEventHandler);
-        return function () {
-            externalWindow.removeEventListener('scroll', scrollAndResizeEventHandler);
-            externalWindow.removeEventListener('resize', scrollAndResizeEventHandler);
-        };
+        else {
+            externalWindow.addEventListener('scroll', scrollAndResizeEventHandler);
+            externalWindow.addEventListener('resize', scrollAndResizeEventHandler);
+            return function () {
+                externalWindow.removeEventListener('scroll', scrollAndResizeEventHandler);
+                externalWindow.removeEventListener('resize', scrollAndResizeEventHandler);
+            };
+        }
     }, [scrollAndResizeEventHandler, customScrollParent, externalWindow]);
     return callbackRef;
 }

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

@@ -1,2 +1,5 @@
-export * from './components';
+export { GroupedVirtuoso, Virtuoso } from './Virtuoso';
+export { VirtuosoGrid } from './VirtuosoGrid';
+export { TableVirtuoso } from './TableVirtuoso';
 export { LogLevel } from './loggerSystem';
+export * from './utils/context';

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

@@ -1,39 +1,17 @@
-import { __read, __values } from "tslib";
-import * as u from '@virtuoso.dev/urx';
-import { buildListState, listStateSystem } from './listStateSystem';
-import { propsReadySystem } from './propsReadySystem';
+import { __read } from "tslib";
+import * as u from './urx';
+import { listStateSystem, buildListStateFromItemCount } from './listStateSystem';
 import { sizeSystem } from './sizeSystem';
+import { propsReadySystem } from './propsReadySystem';
+import { initialTopMostItemIndexSystem } from './initialTopMostItemIndexSystem';
 export var initialItemCountSystem = u.system(function (_a) {
-    var _b = __read(_a, 3), _c = _b[0], sizes = _c.sizes, firstItemIndex = _c.firstItemIndex, data = _c.data, listState = _b[1].listState, didMount = _b[2].didMount;
-    var initialItemCount = u.statefulStream(0);
+    var _b = __read(_a, 4), _c = _b[0], sizes = _c.sizes, firstItemIndex = _c.firstItemIndex, data = _c.data, gap = _c.gap, initialTopMostItemIndex = _b[1].initialTopMostItemIndex, _d = _b[2], initialItemCount = _d.initialItemCount, listState = _d.listState, didMount = _b[3].didMount;
     u.connect(u.pipe(didMount, u.withLatestFrom(initialItemCount), u.filter(function (_a) {
         var _b = __read(_a, 2), count = _b[1];
         return count !== 0;
-    }), u.withLatestFrom(sizes, firstItemIndex, data), u.map(function (_a) {
-        var e_1, _b;
-        var _c = __read(_a, 4), _d = __read(_c[0], 2), count = _d[1], sizes = _c[1], firstItemIndex = _c[2], _e = _c[3], data = _e === void 0 ? [] : _e;
-        var includedGroupsCount = 0;
-        if (sizes.groupIndices.length > 0) {
-            try {
-                for (var _f = __values(sizes.groupIndices), _g = _f.next(); !_g.done; _g = _f.next()) {
-                    var index = _g.value;
-                    if (index - includedGroupsCount >= count) {
-                        break;
-                    }
-                    includedGroupsCount++;
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-        }
-        var adjustedCount = count + includedGroupsCount;
-        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);
+    }), u.withLatestFrom(initialTopMostItemIndex, sizes, firstItemIndex, gap, data), u.map(function (_a) {
+        var _b = __read(_a, 6), _c = __read(_b[0], 2), count = _c[1], initialTopMostItemIndexValue = _b[1], sizes = _b[2], firstItemIndex = _b[3], gap = _b[4], _d = _b[5], data = _d === void 0 ? [] : _d;
+        return buildListStateFromItemCount(count, initialTopMostItemIndexValue, sizes, firstItemIndex, gap, data);
     })), listState);
-    return { initialItemCount: initialItemCount };
-}, u.tup(sizeSystem, listStateSystem, propsReadySystem), { singleton: true });
+    return {};
+}, u.tup(sizeSystem, initialTopMostItemIndexSystem, listStateSystem, propsReadySystem), { singleton: true });

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

@@ -1,10 +1,10 @@
 import { __read } from "tslib";
-import * as u from '@virtuoso.dev/urx';
-import { domIOSystem } from './domIOSystem';
+import * as u from './urx';
 import { propsReadySystem } from './propsReadySystem';
-import { totalListHeightSystem } from './totalListHeightSystem';
+import { domIOSystem } from './domIOSystem';
+import { listStateSystem } from './listStateSystem';
 export var initialScrollTopSystem = u.system(function (_a) {
-    var _b = __read(_a, 3), totalListHeight = _b[0].totalListHeight, didMount = _b[1].didMount, scrollTo = _b[2].scrollTo;
+    var _b = __read(_a, 3), didMount = _b[0].didMount, scrollTo = _b[1].scrollTo, listState = _b[2].listState;
     var initialScrollTop = u.statefulStream(0);
     u.subscribe(u.pipe(didMount, u.withLatestFrom(initialScrollTop), u.filter(function (_a) {
         var _b = __read(_a, 2), offset = _b[1];
@@ -13,8 +13,8 @@ export var initialScrollTopSystem = u.system(function (_a) {
         var _b = __read(_a, 2), offset = _b[1];
         return ({ top: offset });
     })), function (location) {
-        u.handleNext(u.pipe(totalListHeight, u.filter(function (val) { return val !== 0; })), function () {
-            setTimeout(function () {
+        u.handleNext(u.pipe(listState, u.skip(1), u.filter(function (state) { return state.items.length > 1; })), function () {
+            requestAnimationFrame(function () {
                 u.publish(scrollTo, location);
             });
         });
@@ -22,4 +22,4 @@ export var initialScrollTopSystem = u.system(function (_a) {
     return {
         initialScrollTop: initialScrollTop,
     };
-}, u.tup(totalListHeightSystem, propsReadySystem, domIOSystem), { singleton: true });
+}, u.tup(propsReadySystem, domIOSystem, listStateSystem), { singleton: true });

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

@@ -1,40 +1,33 @@
 import { __read } from "tslib";
-import * as u from '@virtuoso.dev/urx';
+import * as u from './urx';
 import { empty } from './AATree';
+import { sizeSystem } from './sizeSystem';
 import { domIOSystem } from './domIOSystem';
-import { propsReadySystem } from './propsReadySystem';
 import { scrollToIndexSystem } from './scrollToIndexSystem';
-import { sizeSystem } from './sizeSystem';
+import { propsReadySystem } from './propsReadySystem';
+import { skipFrames } from './utils/skipFrames';
 export function getInitialTopMostItemIndexNumber(location, totalCount) {
     var lastIndex = totalCount - 1;
-    var index = typeof location === 'number'
-        ? location
-        : location.index === 'LAST'
-            ? lastIndex
-            : location.index;
+    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, 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), 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    u.filter(function (_a) {
+    var scrollScheduled = u.statefulStream(false);
+    u.connect(u.pipe(didMount, u.withLatestFrom(initialTopMostItemIndex), u.filter(function (_a) {
         var _b = __read(_a, 2), _ = _b[0], location = _b[1];
         return !!location;
     }), u.mapTo(false)), 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.subscribe(u.pipe(u.combineLatest(listRefresh, didMount), u.withLatestFrom(scrolledToInitialItem, sizes, defaultItemSize, scrollScheduled), u.filter(function (_a) {
+        var _b = __read(_a, 5), _c = __read(_b[0], 2), didMount = _c[1], scrolledToInitialItem = _b[1], sizeTree = _b[2].sizeTree, defaultItemSize = _b[3], scrollScheduled = _b[4];
+        return didMount && (!empty(sizeTree) || u.isDefined(defaultItemSize)) && !scrolledToInitialItem && !scrollScheduled;
     }), u.withLatestFrom(initialTopMostItemIndex)), function (_a) {
         var _b = __read(_a, 2), initialTopMostItemIndex = _b[1];
-        setTimeout(function () {
-            u.handleNext(scrollTop, function () {
-                u.publish(scrolledToInitialItem, true);
-            });
+        u.publish(scrollScheduled, true);
+        skipFrames(3, function () {
+            u.handleNext(scrollTop, function () { return u.publish(scrolledToInitialItem, true); });
             u.publish(scrollToIndex, initialTopMostItemIndex);
         });
     });

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

@@ -1,14 +1,15 @@
 import { __assign, __read, __values } from "tslib";
-import * as u from '@virtuoso.dev/urx';
+import * as u from './urx';
 import { empty, findMaxKeyValue, rangesWithin } from './AATree';
-import { rangeComparator, tupleComparator } from './comparators';
 import { groupedListSystem } from './groupedListSystem';
-import { getInitialTopMostItemIndexNumber, initialTopMostItemIndexSystem, } from './initialTopMostItemIndexSystem';
+import { getInitialTopMostItemIndexNumber, initialTopMostItemIndexSystem } from './initialTopMostItemIndexSystem';
 import { propsReadySystem } from './propsReadySystem';
 import { scrollToIndexSystem } from './scrollToIndexSystem';
 import { sizeRangeSystem } from './sizeRangeSystem';
-import { hasGroups, originalIndexFromItemIndex, rangesWithinOffsets, sizeSystem, } from './sizeSystem';
+import { originalIndexFromItemIndex, sizeSystem, hasGroups, rangesWithinOffsets } from './sizeSystem';
 import { stateFlagsSystem } from './stateFlagsSystem';
+import { rangeComparator, tupleComparator } from './comparators';
+import { recalcSystem } from './recalcSystem';
 function probeItemSet(index, sizes, data) {
     if (hasGroups(sizes)) {
         var itemIndex = originalIndexFromItemIndex(index, sizes);
@@ -29,6 +30,7 @@ var EMPTY_LIST_STATE = {
     bottom: 0,
     topListHeight: 0,
     totalCount: 0,
+    firstItemIndex: 0,
 };
 function transposeItems(items, sizes, firstItemIndex) {
     var e_1, _a;
@@ -42,7 +44,7 @@ function transposeItems(items, sizes, firstItemIndex) {
     var endIndex = items[items.length - 1].index;
     var transposedItems = [];
     var groupRanges = rangesWithin(sizes.groupOffsetTree, startIndex, endIndex);
-    var currentRange;
+    var currentRange = undefined;
     var currentGroupIndex = 0;
     try {
         for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
@@ -76,7 +78,7 @@ function transposeItems(items, sizes, firstItemIndex) {
     }
     return transposedItems;
 }
-export function buildListState(items, topItems, totalCount, sizes, firstItemIndex) {
+export function buildListState(items, topItems, totalCount, gap, sizes, firstItemIndex) {
     var lastSize = sizes.lastSize, lastOffset = sizes.lastOffset, lastIndex = sizes.lastIndex;
     var offsetTop = 0;
     var bottom = 0;
@@ -85,7 +87,8 @@ export function buildListState(items, topItems, totalCount, sizes, firstItemInde
         var lastItem = items[items.length - 1];
         bottom = lastItem.offset + lastItem.size;
     }
-    var total = lastOffset + (totalCount - lastIndex) * lastSize;
+    var itemCount = totalCount - lastIndex;
+    var total = lastOffset + itemCount * lastSize + (itemCount - 1) * gap;
     var top = offsetTop;
     var offsetBottom = total - bottom;
     return {
@@ -97,26 +100,76 @@ export function buildListState(items, topItems, totalCount, sizes, firstItemInde
         top: top,
         bottom: bottom,
         totalCount: totalCount,
+        firstItemIndex: firstItemIndex,
     };
 }
+export function buildListStateFromItemCount(itemCount, initialTopMostItemIndex, sizes, firstItemIndex, gap, data) {
+    var e_2, _a;
+    var includedGroupsCount = 0;
+    if (sizes.groupIndices.length > 0) {
+        try {
+            for (var _b = __values(sizes.groupIndices), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var index = _c.value;
+                if (index - includedGroupsCount >= itemCount) {
+                    break;
+                }
+                includedGroupsCount++;
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    }
+    var adjustedCount = itemCount + includedGroupsCount;
+    var initialTopMostItemIndexNumber = getInitialTopMostItemIndexNumber(initialTopMostItemIndex, adjustedCount);
+    var items = Array.from({ length: adjustedCount }).map(function (_, index) { return ({
+        index: index + initialTopMostItemIndexNumber,
+        size: 0,
+        offset: 0,
+        data: data[index + initialTopMostItemIndexNumber],
+    }); });
+    return buildListState(items, [], adjustedCount, gap, sizes, firstItemIndex);
+}
 export var listStateSystem = u.system(function (_a) {
-    var _b = __read(_a, 7), _c = _b[0], sizes = _c.sizes, totalCount = _c.totalCount, data = _c.data, firstItemIndex = _c.firstItemIndex, groupedListSystem = _b[1], _d = _b[2], visibleRange = _d.visibleRange, listBoundary = _d.listBoundary, rangeTopListHeight = _d.topListHeight, _e = _b[3], scrolledToInitialItem = _e.scrolledToInitialItem, initialTopMostItemIndex = _e.initialTopMostItemIndex, topListHeight = _b[4].topListHeight, stateFlags = _b[5], didMount = _b[6].didMount;
+    var _b = __read(_a, 8), _c = _b[0], sizes = _c.sizes, totalCount = _c.totalCount, data = _c.data, firstItemIndex = _c.firstItemIndex, gap = _c.gap, groupedListSystem = _b[1], _d = _b[2], visibleRange = _d.visibleRange, listBoundary = _d.listBoundary, rangeTopListHeight = _d.topListHeight, _e = _b[3], scrolledToInitialItem = _e.scrolledToInitialItem, initialTopMostItemIndex = _e.initialTopMostItemIndex, topListHeight = _b[4].topListHeight, stateFlags = _b[5], didMount = _b[6].didMount, recalcInProgress = _b[7].recalcInProgress;
     var topItemsIndexes = u.statefulStream([]);
+    var initialItemCount = u.statefulStream(0);
     var itemsRendered = u.stream();
     u.connect(groupedListSystem.topItemsIndexes, topItemsIndexes);
-    var listState = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(didMount, u.duc(visibleRange), u.duc(totalCount), u.duc(sizes), u.duc(initialTopMostItemIndex), scrolledToInitialItem, u.duc(topItemsIndexes), u.duc(firstItemIndex), data), u.filter(function (_a) {
-        var _b = __read(_a, 1), mount = _b[0];
-        return mount;
+    var listState = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(didMount, recalcInProgress, u.duc(visibleRange, tupleComparator), u.duc(totalCount), u.duc(sizes), u.duc(initialTopMostItemIndex), scrolledToInitialItem, u.duc(topItemsIndexes), u.duc(firstItemIndex), u.duc(gap), data), u.filter(function (_a) {
+        var _b = __read(_a, 11), mount = _b[0], recalcInProgress = _b[1], totalCount = _b[3], data = _b[10];
+        // When data length changes, it is synced to totalCount, both of which trigger a recalc separately.
+        // Recalc should be skipped then, as the calculation expects both data and totalCount to be in sync.
+        var dataChangeInProgress = data && data.length !== totalCount;
+        return mount && !recalcInProgress && !dataChangeInProgress;
     }), u.map(function (_a) {
-        var e_2, _b;
-        var _c = __read(_a, 9), _d = __read(_c[1], 2), startOffset = _d[0], endOffset = _d[1], totalCount = _c[2], sizes = _c[3], initialTopMostItemIndex = _c[4], scrolledToInitialItem = _c[5], topItemsIndexes = _c[6], firstItemIndex = _c[7], data = _c[8];
+        var e_3, _b;
+        var _c = __read(_a, 11), _d = __read(_c[2], 2), startOffset = _d[0], endOffset = _d[1], totalCount = _c[3], sizes = _c[4], initialTopMostItemIndex = _c[5], scrolledToInitialItem = _c[6], topItemsIndexes = _c[7], firstItemIndex = _c[8], gap = _c[9], data = _c[10];
         var sizesValue = sizes;
         var sizeTree = sizesValue.sizeTree, offsetTree = sizesValue.offsetTree;
-        if (totalCount === 0 || (startOffset === 0 && endOffset === 0)) {
-            return EMPTY_LIST_STATE;
+        var initialItemCountValue = u.getValue(initialItemCount);
+        if (totalCount === 0) {
+            return __assign(__assign({}, EMPTY_LIST_STATE), { totalCount: totalCount });
+        }
+        // no container measruements yet
+        if (startOffset === 0 && endOffset === 0) {
+            if (initialItemCountValue === 0) {
+                return __assign(__assign({}, EMPTY_LIST_STATE), { totalCount: totalCount });
+            }
+            else {
+                return buildListStateFromItemCount(initialItemCountValue, initialTopMostItemIndex, sizes, firstItemIndex, gap, data || []);
+            }
         }
         if (empty(sizeTree)) {
-            return buildListState(probeItemSet(getInitialTopMostItemIndexNumber(initialTopMostItemIndex, totalCount), sizesValue, data), [], totalCount, sizesValue, firstItemIndex);
+            if (initialItemCountValue > 0) {
+                return null;
+            }
+            var state = buildListState(probeItemSet(getInitialTopMostItemIndexNumber(initialTopMostItemIndex, totalCount), sizesValue, data), [], totalCount, gap, sizesValue, firstItemIndex);
+            return state;
         }
         var topItems = [];
         if (topItemsIndexes.length > 0) {
@@ -130,42 +183,35 @@ export var listStateSystem = u.system(function (_a) {
                     var rangeStartIndex = Math.max(range.start, startIndex);
                     var rangeEndIndex = Math.min(range.end, endIndex);
                     for (var i = rangeStartIndex; i <= rangeEndIndex; i++) {
-                        topItems.push({
-                            index: i,
-                            size: size,
-                            offset: offset,
-                            data: data && data[i],
-                        });
+                        topItems.push({ index: i, size: size, offset: offset, data: data && data[i] });
                         offset += size;
                     }
                 }
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
                     if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
                 }
-                finally { if (e_2) throw e_2.error; }
+                finally { if (e_3) throw e_3.error; }
             }
         }
         // If the list hasn't scrolled to the initial item because the initial item was set,
         // render empty list.
         //
-        // This is a condition to be evaluated past the probe check, do not merge
+        // This is a condition to be evaluated after the probe check cycle, do not merge
         // with the totalCount check above
         if (!scrolledToInitialItem) {
-            return buildListState([], topItems, totalCount, sizesValue, firstItemIndex);
+            return buildListState([], topItems, totalCount, gap, sizesValue, firstItemIndex);
         }
-        var minStartIndex = topItemsIndexes.length > 0
-            ? topItemsIndexes[topItemsIndexes.length - 1] + 1
-            : 0;
+        var minStartIndex = topItemsIndexes.length > 0 ? topItemsIndexes[topItemsIndexes.length - 1] + 1 : 0;
         var offsetPointRanges = rangesWithinOffsets(offsetTree, startOffset, endOffset, minStartIndex);
         if (offsetPointRanges.length === 0) {
             return null;
         }
         var maxIndex = totalCount - 1;
         var items = u.tap([], function (result) {
-            var e_3, _a;
+            var e_4, _a;
             try {
                 for (var offsetPointRanges_1 = __values(offsetPointRanges), offsetPointRanges_1_1 = offsetPointRanges_1.next(); !offsetPointRanges_1_1.done; offsetPointRanges_1_1 = offsetPointRanges_1.next()) {
                     var range = offsetPointRanges_1_1.value;
@@ -174,8 +220,9 @@ export var listStateSystem = u.system(function (_a) {
                     var rangeStartIndex = range.start;
                     var size = point.size;
                     if (point.offset < startOffset) {
-                        rangeStartIndex += Math.floor((startOffset - point.offset) / size);
-                        offset += (rangeStartIndex - range.start) * size;
+                        rangeStartIndex += Math.floor((startOffset - point.offset + gap) / (size + gap));
+                        var itemCount = rangeStartIndex - range.start;
+                        offset += itemCount * size + itemCount * gap;
                     }
                     if (rangeStartIndex < minStartIndex) {
                         offset += (minStartIndex - rangeStartIndex) * size;
@@ -186,28 +233,25 @@ export var listStateSystem = u.system(function (_a) {
                         if (offset >= endOffset) {
                             break;
                         }
-                        result.push({
-                            index: i,
-                            size: size,
-                            offset: offset,
-                            data: data && data[i],
-                        });
-                        offset += size;
+                        result.push({ index: i, size: size, offset: offset, data: data && data[i] });
+                        offset += size + gap;
                     }
                 }
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
                     if (offsetPointRanges_1_1 && !offsetPointRanges_1_1.done && (_a = offsetPointRanges_1.return)) _a.call(offsetPointRanges_1);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_4) throw e_4.error; }
             }
         });
-        return buildListState(items, topItems, totalCount, sizesValue, firstItemIndex);
-    }), u.filter(function (value) { return value !== null; }), u.distinctUntilChanged()), EMPTY_LIST_STATE);
-    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);
+        return buildListState(items, topItems, totalCount, gap, sizesValue, firstItemIndex);
+    }), 
+    //@ts-expect-error filter needs to be fixed
+    u.filter(function (value) { return value !== null; }), u.distinctUntilChanged()), EMPTY_LIST_STATE);
+    u.connect(u.pipe(data, u.filter(u.isDefined), u.map(function (data) { return data === null || data === void 0 ? void 0 : data.length; })), totalCount);
+    u.connect(u.pipe(listState, u.map(function (value) { return value.topListHeight; })), topListHeight);
     u.connect(topListHeight, rangeTopListHeight);
     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);
@@ -236,15 +280,18 @@ export var listStateSystem = u.system(function (_a) {
         return items.length > 0;
     }), u.map(function (_a) {
         var items = _a.items;
+        var startIndex = 0;
+        var endIndex = items.length - 1;
+        while (items[startIndex].type === 'group' && startIndex < endIndex) {
+            startIndex++;
+        }
+        while (items[endIndex].type === 'group' && endIndex > startIndex) {
+            endIndex--;
+        }
         return {
-            startIndex: items[0].index,
-            endIndex: items[items.length - 1].index,
+            startIndex: items[startIndex].index,
+            endIndex: items[endIndex].index,
         };
     }), u.distinctUntilChanged(rangeComparator)));
-    return __assign({ listState: listState,
-        topItemsIndexes: topItemsIndexes,
-        endReached: endReached,
-        startReached: startReached,
-        rangeChanged: rangeChanged,
-        itemsRendered: itemsRendered }, stateFlags);
-}, u.tup(sizeSystem, groupedListSystem, sizeRangeSystem, initialTopMostItemIndexSystem, scrollToIndexSystem, stateFlagsSystem, propsReadySystem), { singleton: true });
+    return __assign({ listState: listState, topItemsIndexes: topItemsIndexes, endReached: endReached, startReached: startReached, rangeChanged: rangeChanged, itemsRendered: itemsRendered, initialItemCount: initialItemCount }, stateFlags);
+}, u.tup(sizeSystem, groupedListSystem, sizeRangeSystem, initialTopMostItemIndexSystem, scrollToIndexSystem, stateFlagsSystem, propsReadySystem, recalcSystem), { singleton: true });