@ringcentral/juno 2.4.1 → 2.5.0

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

@@ -0,0 +1,182 @@
+var _a;
+import { __assign, __read, __spread } from "tslib";
+import * as React from 'react';
+import { createElement } from 'react';
+import { systemToComponent } from '@virtuoso.dev/react-urx';
+import { compose, distinctUntilChanged, map, noop, pipe, statefulStream, statefulStreamFromEmitter, system, tup, } from '@virtuoso.dev/urx';
+import useChangedListContentsSizes from './hooks/useChangedChildSizes';
+import useSize from './hooks/useSize';
+import useWindowViewportRectRef from './hooks/useWindowViewportRect';
+import { buildScroller, buildWindowScroller, contextPropIfNotDomElement, identity, viewportStyle, } from './List';
+import { listSystem } from './listSystem';
+import { correctItemSize } from './utils/correctItemSize';
+var tableComponentPropsSystem = system(function () {
+    var itemContent = statefulStream(function (index) { return React.createElement("td", null,
+        "Item $",
+        index); });
+    var context = statefulStream(null);
+    var fixedHeaderContent = statefulStream(null);
+    var components = statefulStream({});
+    var computeItemKey = statefulStream(identity);
+    var scrollerRef = statefulStream(noop);
+    var distinctProp = function (propName, defaultValue) {
+        if (defaultValue === void 0) { defaultValue = null; }
+        return statefulStreamFromEmitter(pipe(components, map(function (components) { return components[propName]; }), distinctUntilChanged()), defaultValue);
+    };
+    return {
+        context: context,
+        itemContent: itemContent,
+        fixedHeaderContent: fixedHeaderContent,
+        components: components,
+        computeItemKey: computeItemKey,
+        scrollerRef: scrollerRef,
+        TableComponent: distinctProp('Table', 'table'),
+        TableHeadComponent: distinctProp('TableHead', 'thead'),
+        TableBodyComponent: distinctProp('TableBody', 'tbody'),
+        TableRowComponent: distinctProp('TableRow', 'tr'),
+        ScrollerComponent: distinctProp('Scroller', 'div'),
+        EmptyPlaceholder: distinctProp('EmptyPlaceholder'),
+        ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder'),
+    };
+});
+var combinedSystem = system(function (_a) {
+    var _b = __read(_a, 2), listSystem = _b[0], propsSystem = _b[1];
+    return __assign(__assign({}, listSystem), propsSystem);
+}, tup(listSystem, tableComponentPropsSystem));
+var DefaultScrollSeekPlaceholder = function (_a) {
+    var height = _a.height;
+    return (React.createElement("tr", null,
+        React.createElement("td", { style: { height: height } })));
+};
+var FillerRow = function (_a) {
+    var height = _a.height;
+    return (React.createElement("tr", null,
+        React.createElement("td", { style: { height: height, padding: 0, border: 0 } })));
+};
+export var Items = React.memo(function VirtuosoItems() {
+    var listState = useEmitterValue('listState');
+    var deviation = useEmitterValue('deviation');
+    var sizeRanges = usePublisher('sizeRanges');
+    var useWindowScroll = useEmitterValue('useWindowScroll');
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var windowScrollContainerStateCallback = usePublisher('windowScrollContainerState');
+    var _scrollContainerStateCallback = usePublisher('scrollContainerState');
+    var scrollContainerStateCallback = customScrollParent || useWindowScroll
+        ? windowScrollContainerStateCallback
+        : _scrollContainerStateCallback;
+    var itemContent = useEmitterValue('itemContent');
+    var trackItemSizes = useEmitterValue('trackItemSizes');
+    var itemSize = useEmitterValue('itemSize');
+    var log = useEmitterValue('log');
+    var ref = useChangedListContentsSizes(sizeRanges, itemSize, trackItemSizes, scrollContainerStateCallback, log, customScrollParent);
+    var EmptyPlaceholder = useEmitterValue('EmptyPlaceholder');
+    var ScrollSeekPlaceholder = useEmitterValue('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder;
+    var TableBodyComponent = useEmitterValue('TableBodyComponent');
+    var TableRowComponent = useEmitterValue('TableRowComponent');
+    var computeItemKey = useEmitterValue('computeItemKey');
+    var isSeeking = useEmitterValue('isSeeking');
+    var paddingTopAddition = useEmitterValue('paddingTopAddition');
+    var firstItemIndex = useEmitterValue('firstItemIndex');
+    var statefulTotalCount = useEmitterValue('statefulTotalCount');
+    var context = useEmitterValue('context');
+    if (statefulTotalCount === 0 && EmptyPlaceholder) {
+        return createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
+    }
+    var paddingTop = listState.offsetTop + paddingTopAddition + deviation;
+    var paddingBottom = listState.offsetBottom;
+    var paddingTopEl = paddingTop > 0 ? React.createElement(FillerRow, { height: paddingTop, key: "padding-top" }) : null;
+    var paddingBottomEl = paddingBottom > 0 ? (React.createElement(FillerRow, { height: paddingBottom, key: "padding-bottom" })) : null;
+    var items = listState.items.map(function (item) {
+        var index = item.originalIndex;
+        var key = computeItemKey(index + firstItemIndex, item.data, context);
+        if (isSeeking) {
+            return createElement(ScrollSeekPlaceholder, __assign(__assign({}, contextPropIfNotDomElement(ScrollSeekPlaceholder, context)), { key: key, index: item.index, height: item.size, type: item.type || 'item' }));
+        }
+        return createElement(TableRowComponent, __assign(__assign({}, contextPropIfNotDomElement(TableRowComponent, context)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, style: { overflowAnchor: 'none' } }), itemContent(item.index, item.data, context));
+    });
+    return createElement(TableBodyComponent, __assign({ ref: ref, 'data-test-id': 'virtuoso-item-list' }, contextPropIfNotDomElement(TableBodyComponent, context)), __spread([paddingTopEl], items, [paddingBottomEl]));
+});
+var Viewport = function (_a) {
+    var children = _a.children;
+    var viewportHeight = usePublisher('viewportHeight');
+    var viewportRef = useSize(compose(viewportHeight, function (el) { return correctItemSize(el, 'height'); }));
+    return (React.createElement("div", { style: viewportStyle, ref: viewportRef, "data-viewport-type": "element" }, children));
+};
+var WindowViewport = function (_a) {
+    var children = _a.children;
+    var windowViewportRect = usePublisher('windowViewportRect');
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
+    return (React.createElement("div", { ref: viewportRef, style: viewportStyle, "data-viewport-type": "window" }, children));
+};
+var TableRoot = React.memo(function TableVirtuosoRoot(props) {
+    var useWindowScroll = useEmitterValue('useWindowScroll');
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var fixedHeaderHeight = usePublisher('fixedHeaderHeight');
+    var fixedHeaderContent = useEmitterValue('fixedHeaderContent');
+    var context = useEmitterValue('context');
+    var theadRef = useSize(compose(fixedHeaderHeight, function (el) { return correctItemSize(el, 'height'); }));
+    var TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller;
+    var TheViewport = customScrollParent || useWindowScroll ? WindowViewport : Viewport;
+    var TheTable = useEmitterValue('TableComponent');
+    var TheTHead = useEmitterValue('TableHeadComponent');
+    var theHead = fixedHeaderContent
+        ? React.createElement(TheTHead, __assign({ key: 'TableHead', style: { zIndex: 1, position: 'sticky', top: 0 }, ref: theadRef }, contextPropIfNotDomElement(TheTHead, context)), fixedHeaderContent())
+        : null;
+    return (React.createElement(TheScroller, __assign({}, props),
+        React.createElement(TheViewport, null, React.createElement(TheTable, __assign({ style: { borderSpacing: 0 } }, contextPropIfNotDomElement(TheTable, context)), [theHead, React.createElement(Items, { key: "TableBody" })]))));
+});
+export var Table = (_a = systemToComponent(combinedSystem, {
+    required: {},
+    optional: {
+        context: 'context',
+        followOutput: 'followOutput',
+        firstItemIndex: 'firstItemIndex',
+        itemContent: 'itemContent',
+        fixedHeaderContent: 'fixedHeaderContent',
+        overscan: 'overscan',
+        increaseViewportBy: 'increaseViewportBy',
+        totalCount: 'totalCount',
+        topItemCount: 'topItemCount',
+        initialTopMostItemIndex: 'initialTopMostItemIndex',
+        components: 'components',
+        groupCounts: 'groupCounts',
+        atBottomThreshold: 'atBottomThreshold',
+        computeItemKey: 'computeItemKey',
+        defaultItemHeight: 'defaultItemHeight',
+        fixedItemHeight: 'fixedItemHeight',
+        itemSize: 'itemSize',
+        scrollSeekConfiguration: 'scrollSeekConfiguration',
+        data: 'data',
+        initialItemCount: 'initialItemCount',
+        initialScrollTop: 'initialScrollTop',
+        alignToBottom: 'alignToBottom',
+        useWindowScroll: 'useWindowScroll',
+        customScrollParent: 'customScrollParent',
+        scrollerRef: 'scrollerRef',
+        logLevel: 'logLevel',
+    },
+    methods: {
+        scrollToIndex: 'scrollToIndex',
+        scrollIntoView: 'scrollIntoView',
+        scrollTo: 'scrollTo',
+        scrollBy: 'scrollBy',
+    },
+    events: {
+        isScrolling: 'isScrolling',
+        endReached: 'endReached',
+        startReached: 'startReached',
+        rangeChanged: 'rangeChanged',
+        atBottomStateChange: 'atBottomStateChange',
+        atTopStateChange: 'atTopStateChange',
+        totalListHeightChanged: 'totalListHeightChanged',
+        itemsRendered: 'itemsRendered',
+        groupIndices: 'groupIndices',
+    },
+}, TableRoot), _a.Component), usePublisher = _a.usePublisher, useEmitterValue = _a.useEmitterValue, useEmitter = _a.useEmitter;
+var Scroller = buildScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+var WindowScroller = buildWindowScroller({
+    usePublisher: usePublisher,
+    useEmitterValue: useEmitterValue,
+    useEmitter: useEmitter,
+});

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

@@ -1,5 +1,7 @@
 import { Grid } from './Grid';
 import { List } from './List';
+import { Table } from './Table';
 export var Virtuoso = List;
 export var GroupedVirtuoso = List;
+export var TableVirtuoso = Table;
 export var VirtuosoGrid = Grid;

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

@@ -1,37 +1,40 @@
+import { __read } from "tslib";
 import * as u from '@virtuoso.dev/urx';
-export var UP = 'up';
-export var DOWN = 'down';
 export var domIOSystem = u.system(function () {
+    var scrollContainerState = u.stream();
     var scrollTop = u.stream();
     var deviation = u.statefulStream(0);
     var smoothScrollTargetReached = u.stream();
     var statefulScrollTop = u.statefulStream(0);
     var viewportHeight = u.stream();
+    var scrollHeight = u.stream();
     var headerHeight = u.statefulStream(0);
     var footerHeight = u.statefulStream(0);
     var scrollTo = u.stream();
     var scrollBy = u.stream();
     var scrollingInProgress = u.statefulStream(false);
+    u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
+        var _b = __read(_a, 1), scrollTop = _b[0];
+        return scrollTop;
+    })), scrollTop);
+    u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
+        var _b = __read(_a, 2), scrollHeight = _b[1];
+        return scrollHeight;
+    })), scrollHeight);
     u.connect(scrollTop, statefulScrollTop);
-    var scrollDirection = u.statefulStream(DOWN);
-    u.connect(u.pipe(scrollTop, u.scan(function (acc, scrollTop) {
-        return {
-            direction: scrollTop < acc.prevScrollTop ? UP : DOWN,
-            prevScrollTop: scrollTop,
-        };
-    }, { direction: DOWN, prevScrollTop: 0 }), u.map(function (value) { return value.direction; })), scrollDirection);
     return {
         // input
+        scrollContainerState: scrollContainerState,
         scrollTop: scrollTop,
         viewportHeight: viewportHeight,
         headerHeight: headerHeight,
         footerHeight: footerHeight,
+        scrollHeight: scrollHeight,
         smoothScrollTargetReached: smoothScrollTargetReached,
         // signals
         scrollTo: scrollTo,
         scrollBy: scrollBy,
         // state
-        scrollDirection: scrollDirection,
         statefulScrollTop: statefulScrollTop,
         deviation: deviation,
         scrollingInProgress: scrollingInProgress,

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

@@ -1,6 +1,8 @@
 import { __read } from "tslib";
 import * as u from '@virtuoso.dev/urx';
+import { domIOSystem } from './domIOSystem';
 import { initialTopMostItemIndexSystem } from './initialTopMostItemIndexSystem';
+import { loggerSystem, LogLevel } from './loggerSystem';
 import { propsReadySystem } from './propsReadySystem';
 import { scrollToIndexSystem } from './scrollToIndexSystem';
 import { sizeSystem } from './sizeSystem';
@@ -18,21 +20,24 @@ var behaviorFromFollowOutput = function (follow, isAtBottom) {
     return isAtBottom && normalizeFollowOutput(follow);
 };
 export var followOutputSystem = u.system(function (_a) {
-    var _b = __read(_a, 5), _c = _b[0], totalCount = _c.totalCount, listRefresh = _c.listRefresh, _d = _b[1], isAtBottom = _d.isAtBottom, atBottomState = _d.atBottomState, scrollToIndex = _b[2].scrollToIndex, scrolledToInitialItem = _b[3].scrolledToInitialItem, _e = _b[4], propsReady = _e.propsReady, didMount = _e.didMount;
+    var _b = __read(_a, 7), _c = _b[0], totalCount = _c.totalCount, listRefresh = _c.listRefresh, _d = _b[1], isAtBottom = _d.isAtBottom, atBottomState = _d.atBottomState, scrollToIndex = _b[2].scrollToIndex, scrolledToInitialItem = _b[3].scrolledToInitialItem, _e = _b[4], propsReady = _e.propsReady, didMount = _e.didMount, log = _b[5].log, scrollingInProgress = _b[6].scrollingInProgress;
     var followOutput = u.statefulStream(false);
-    function scrollToBottom(totalCount, followOutputBehavior) {
+    var pendingScrollHandle = null;
+    function scrollToBottom(followOutputBehavior) {
         u.publish(scrollToIndex, {
-            index: totalCount - 1,
+            index: 'LAST',
             align: 'end',
             behavior: followOutputBehavior,
         });
     }
-    u.subscribe(u.pipe(u.combineLatest(u.duc(totalCount), didMount), u.withLatestFrom(u.duc(followOutput), isAtBottom, scrolledToInitialItem), u.map(function (_a) {
-        var _b = __read(_a, 4), _c = __read(_b[0], 2), totalCount = _c[0], didMount = _c[1], followOutput = _b[1], isAtBottom = _b[2], scrolledToInitialItem = _b[3];
+    u.subscribe(u.pipe(u.combineLatest(u.pipe(u.duc(totalCount), u.skip(1)), didMount), u.withLatestFrom(u.duc(followOutput), isAtBottom, scrolledToInitialItem, scrollingInProgress), u.map(function (_a) {
+        var _b = __read(_a, 5), _c = __read(_b[0], 2), totalCount = _c[0], didMount = _c[1], followOutput = _b[1], isAtBottom = _b[2], scrolledToInitialItem = _b[3], scrollingInProgress = _b[4];
         var shouldFollow = didMount && scrolledToInitialItem;
         var followOutputBehavior = 'auto';
         if (shouldFollow) {
-            followOutputBehavior = behaviorFromFollowOutput(followOutput, isAtBottom);
+            // if scrolling to index is in progress,
+            // assume that a previous followOutput response is going
+            followOutputBehavior = behaviorFromFollowOutput(followOutput, isAtBottom || scrollingInProgress);
             shouldFollow = shouldFollow && !!followOutputBehavior;
         }
         return { totalCount: totalCount, shouldFollow: shouldFollow, followOutputBehavior: followOutputBehavior };
@@ -41,8 +46,14 @@ export var followOutputSystem = u.system(function (_a) {
         return shouldFollow;
     })), function (_a) {
         var totalCount = _a.totalCount, followOutputBehavior = _a.followOutputBehavior;
-        u.handleNext(listRefresh, function () {
-            scrollToBottom(totalCount, followOutputBehavior);
+        if (pendingScrollHandle) {
+            pendingScrollHandle();
+            pendingScrollHandle = null;
+        }
+        pendingScrollHandle = u.handleNext(listRefresh, function () {
+            u.getValue(log)('following output to ', { totalCount: totalCount }, LogLevel.DEBUG);
+            scrollToBottom(followOutputBehavior);
+            pendingScrollHandle = null;
         });
     });
     u.subscribe(u.pipe(u.combineLatest(u.duc(followOutput), totalCount, propsReady), u.filter(function (_a) {
@@ -56,23 +67,25 @@ export var followOutputSystem = u.system(function (_a) {
         var refreshed = _a.refreshed;
         return refreshed;
     }), u.withLatestFrom(followOutput, totalCount)), function (_a) {
-        var _b = __read(_a, 3), followOutput = _b[1], totalCount = _b[2];
+        var _b = __read(_a, 2), followOutput = _b[1];
         var cancel = u.handleNext(atBottomState, function (state) {
             if (followOutput &&
                 !state.atBottom &&
-                state.notAtBottomBecause === 'SIZE_INCREASED') {
-                scrollToBottom(totalCount, 'auto');
+                state.notAtBottomBecause === 'SIZE_INCREASED' &&
+                !pendingScrollHandle) {
+                u.getValue(log)('scrolling to bottom due to increased size', {}, LogLevel.DEBUG);
+                scrollToBottom('auto');
             }
         });
         setTimeout(cancel, 100);
     });
-    u.subscribe(u.pipe(u.combineLatest(u.duc(followOutput), atBottomState), u.withLatestFrom(totalCount)), function (_a) {
-        var _b = __read(_a, 2), _c = __read(_b[0], 2), followOutput = _c[0], state = _c[1], totalCount = _b[1];
+    u.subscribe(u.combineLatest(u.duc(followOutput), atBottomState), function (_a) {
+        var _b = __read(_a, 2), followOutput = _b[0], state = _b[1];
         if (followOutput &&
             !state.atBottom &&
             state.notAtBottomBecause === 'VIEWPORT_HEIGHT_DECREASING') {
-            scrollToBottom(totalCount, 'auto');
+            scrollToBottom('auto');
         }
     });
     return { followOutput: followOutput };
-}, u.tup(sizeSystem, stateFlagsSystem, scrollToIndexSystem, initialTopMostItemIndexSystem, propsReadySystem));
+}, u.tup(sizeSystem, stateFlagsSystem, scrollToIndexSystem, initialTopMostItemIndexSystem, propsReadySystem, loggerSystem, domIOSystem));

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) {