@ringcentral/juno 2.4.2 → 2.5.0-beta.0

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

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

package/components/Virtuoso/react-virtuoso/utils/correctItemSize.d.ts

@@ -0,0 +1 @@
+export declare function correctItemSize(el: HTMLElement, dimension: 'height' | 'width'): number;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function correctItemSize(el, dimension) {
+    return Math.round(el.getBoundingClientRect()[dimension]);
+}
+exports.correctItemSize = correctItemSize;

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

@@ -1,32 +1,35 @@
 import * as u from '@virtuoso.dev/urx';
 import { WindowViewportInfo } from './interfaces';
 export declare const windowScrollerSystem: u.SystemSpec<[u.SystemSpec<never[], () => {
+    scrollContainerState: u.Stream<[number, number]>;
     scrollTop: u.Stream<number>;
     viewportHeight: u.Stream<number>;
     headerHeight: u.StatefulStream<number>;
     footerHeight: u.StatefulStream<number>;
+    scrollHeight: u.Stream<number>;
     smoothScrollTargetReached: u.Stream<true>;
     scrollTo: u.Stream<ScrollToOptions>;
     scrollBy: u.Stream<ScrollToOptions>;
-    scrollDirection: u.StatefulStream<import("./domIOSystem").ScrollDirection>;
     statefulScrollTop: u.StatefulStream<number>;
     deviation: u.StatefulStream<number>;
     scrollingInProgress: u.StatefulStream<boolean>;
-}>], ([{ scrollTop, scrollTo }]: [{
+}>], ([{ scrollTo, scrollContainerState }]: [{
+    scrollContainerState: u.Stream<[number, number]>;
     scrollTop: u.Stream<number>;
     viewportHeight: u.Stream<number>;
     headerHeight: u.StatefulStream<number>;
     footerHeight: u.StatefulStream<number>;
+    scrollHeight: u.Stream<number>;
     smoothScrollTargetReached: u.Stream<true>;
     scrollTo: u.Stream<ScrollToOptions>;
     scrollBy: u.Stream<ScrollToOptions>;
-    scrollDirection: u.StatefulStream<import("./domIOSystem").ScrollDirection>;
     statefulScrollTop: u.StatefulStream<number>;
     deviation: u.StatefulStream<number>;
     scrollingInProgress: u.StatefulStream<boolean>;
 }]) => {
     useWindowScroll: u.StatefulStream<boolean>;
-    windowScrollTop: u.Stream<number>;
+    customScrollParent: u.StatefulStream<HTMLElement | undefined>;
+    windowScrollContainerState: u.Stream<[number, number]>;
     windowViewportRect: u.Stream<WindowViewportInfo>;
     windowScrollTo: u.Stream<ScrollToOptions>;
 }>;

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

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

package/es6/components/Table/TableCell/TableCell.js

@@ -6,7 +6,7 @@ import { TableCellStyle } from './styles';
 import { RcTableCellClasses } from './utils';
 import { RcButtonBase } from '../../Buttons';
 import { RcIcon } from '../../Icon';
-import { JumpToLatest as AscSortIcon, JumpToUnread as DescSortIcon, } from '@ringcentral/juno-icon';
+import { JumpToLatest as DescSortIcon, JumpToUnread as AscSortIcon, } from '@ringcentral/juno-icon';
 import clsx from 'clsx';
 import { RcTableContext } from '../context';
 var _RcTableCell = forwardRef(function (props, ref) {
@@ -21,7 +21,7 @@ var _RcTableCell = forwardRef(function (props, ref) {
                     _a[classes.activeSort] = activeSort,
                     _a)) },
                 childrenProp,
-                React.createElement(RcIcon, { size: "small", className: classes.sortIcon, symbol: sortDirection === 'asc' ? DescSortIcon : AscSortIcon })));
+                React.createElement(RcIcon, { size: "small", className: classes.sortIcon, symbol: sortDirection === 'asc' ? AscSortIcon : DescSortIcon })));
         }
         return childrenProp;
     }, [activeSort, childrenProp, classes, sortDirection]);

package/es6/components/Table/TableCell/styles/TableCellStyle.js

@@ -2,12 +2,14 @@ import { __makeTemplateObject } from "tslib";
 import { css, fakeBorder, focusVisible, palette2, px, spacing, typography, } from '../../../../foundation';
 import { RcTableCellClasses } from '../utils';
 var SizeMap = {
+    xlarge: 64,
     large: 56,
     medium: 48,
     small: 40,
 };
+var HeadTypography = typography('caption2');
 export var TableCellStyle = function (prop) {
     var size = prop.size, sortDirection = prop.sortDirection;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      min-width: unset;\n      padding: ", ";\n    }\n\n    &.", " {\n      padding: unset;\n    }\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n          color: ", ";\n        }\n      }\n\n      .", " {\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "], ["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      min-width: unset;\n      padding: ", ";\n    }\n\n    &.", " {\n      padding: unset;\n    }\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n          color: ", ";\n        }\n      }\n\n      .", " {\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "])), spacing(0, 2), RcTableCellClasses.paddingCheckbox, spacing(0, 0, 0, 2), RcTableCellClasses.paddingNone, RcTableCellClasses.head, typography('caption2'), palette2('neutral', 'l02'), palette2('neutral', 'f05'), palette2('neutral', 'b02'), Boolean(sortDirection) && 'unset', RcTableCellClasses.sortIcon, spacing(0, 2), RcTableCellClasses.activeSort, palette2('interactive', 'f01'), RcTableCellClasses.sortIcon, palette2('neutral', 'f04'), RcTableCellClasses.sortButton, spacing(0, 2), RcTableCellClasses.sortIcon, palette2('neutral', 'f04'), palette2('neutral', 'b03'), RcTableCellClasses.sortIcon, focusVisible, fakeBorder({ color: palette2('interactive', 'f01') }), palette2('neutral', 'b03'), RcTableCellClasses.body, typography('body1'), palette2('neutral', 'f06'), size === 'auto' && spacing(3, 2), size !== 'auto' && px(SizeMap[size]));
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      min-width: unset;\n      padding: ", ";\n    }\n\n    &.", " {\n      padding: unset;\n    }\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n          color: ", ";\n        }\n      }\n\n      .", " {\n        ", "\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "], ["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      min-width: unset;\n      padding: ", ";\n    }\n\n    &.", " {\n      padding: unset;\n    }\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n          color: ", ";\n        }\n      }\n\n      .", " {\n        ", /** cover user agent stylesheet */ "\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "])), spacing(0, 2), RcTableCellClasses.paddingCheckbox, spacing(0, 0, 0, 2), RcTableCellClasses.paddingNone, RcTableCellClasses.head, HeadTypography, palette2('neutral', 'l02'), palette2('neutral', 'f05'), palette2('neutral', 'b02'), Boolean(sortDirection) && 'unset', RcTableCellClasses.sortIcon, spacing(0, 2), RcTableCellClasses.activeSort, palette2('interactive', 'f01'), RcTableCellClasses.sortIcon, palette2('neutral', 'f04'), RcTableCellClasses.sortButton, HeadTypography /** cover user agent stylesheet */, spacing(0, 2), RcTableCellClasses.sortIcon, palette2('neutral', 'f04'), palette2('neutral', 'b03'), RcTableCellClasses.sortIcon, focusVisible, fakeBorder({ color: palette2('interactive', 'f01') }), palette2('neutral', 'b03'), RcTableCellClasses.body, typography('body1'), palette2('neutral', 'f06'), size === 'auto' && spacing(3, 2), size !== 'auto' && px(SizeMap[size]));
 };
 var templateObject_1;

package/es6/components/VirtualizedMenu/VirtualizedMenu.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, useMemo, useRef } from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import clsx from 'clsx';
-import { combineClasses, combineProps, styled, useEventCallback, useForkRef, useRcPortalWindowContext, useThemeProps, } from '../../foundation';
+import { combineClasses, combineProps, styled, useEventCallback, useForceUpdate, useForkRef, useRcPortalWindowContext, useSleep, useThemeProps, } from '../../foundation';
 import { RcPopover } from '../Popover';
 import { VirtualizedMenuStyle } from './styles';
 import { RcVirtualizedMenuClasses } from './utils';
@@ -48,6 +48,17 @@ var _RcVirtualizedMenu = forwardRef(function (inProps, ref) {
             }
         }
     });
+    var forceUpdate = useForceUpdate();
+    var sleep = useSleep().sleep;
+    // TODO: fix that when that work
+    useEffect(function () {
+        if (open) {
+            sleep(200).then(function () {
+                forceUpdate();
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
     return (React.createElement(RcPopover, __assign({ ref: handleRef, container: document.body, classes: PopoverClasses, onClose: onClose, open: open, transitionDuration: transitionDuration, PaperProps: PaperProps, TransitionProps: TransitionProps }, rest),
         React.createElement(RcVirtualizedMenuList, __assign({ position: "unset", action: menuListActionRef, autoFocus: autoFocus, autoFocusItem: autoFocusItem, maxHeight: maxHeight, variant: variant, onKeyDown: handleListKeyDown }, MenuListProps, { className: clsx(classes.list, MenuListProps.className) }), children)));
 });

package/es6/components/VirtualizedMenu/VirtualizedMenuList.js

@@ -161,8 +161,12 @@ var _RcVirtualizedMenuList = forwardRef(function (inProps, ref) {
         },
     }); });
     var components = useMemo(function () { return ({
-        Header: disablePadding ? undefined : StyledMenuListPadding,
-        Footer: disablePadding ? undefined : StyledMenuListPadding,
+        Header: disablePadding
+            ? undefined
+            : StyledMenuListPadding,
+        Footer: disablePadding
+            ? undefined
+            : StyledMenuListPadding,
         List: React.forwardRef(function (_a, listRef) {
             var children = _a.children, listRest = __rest(_a, ["children"]);
             var toRef = useForkRef(handleRef, listRef);

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

@@ -132,22 +132,22 @@ function adjust(node) {
         }
         throw new Error('Unexpected empty nodes');
     }
+    else if (isSingle(node)) {
+        return split(clone(node, { lvl: lvl - 1 }));
+    }
+    else if (!empty(r) && !empty(r.l)) {
+        var rl = r.l;
+        var rlvl = isSingle(rl) ? r.lvl - 1 : r.lvl;
+        return clone(rl, {
+            l: clone(node, {
+                r: rl.l,
+                lvl: lvl - 1,
+            }),
+            r: split(clone(r, { l: rl.r, lvl: rlvl })),
+            lvl: rl.lvl + 1,
+        });
+    }
     else {
-        if (isSingle(node)) {
-            return split(clone(node, { lvl: lvl - 1 }));
-        }
-        if (!empty(r) && !empty(r.l)) {
-            var rl = r.l;
-            var rlvl = isSingle(rl) ? r.lvl - 1 : r.lvl;
-            return clone(rl, {
-                l: clone(node, {
-                    r: rl.l,
-                    lvl: lvl - 1,
-                }),
-                r: split(clone(r, { l: rl.r, lvl: rlvl })),
-                lvl: rl.lvl + 1,
-            });
-        }
         throw new Error('Unexpected empty nodes');
     }
 }

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

@@ -1,4 +1,5 @@
 import { __assign, __read, __rest } from "tslib";
+/* eslint-disable no-console */
 import * as React from 'react';
 import { createElement } from 'react';
 import { systemToComponent } from '@virtuoso.dev/react-urx';
@@ -6,10 +7,11 @@ import * as u from '@virtuoso.dev/urx';
 import { gridSystem } from './gridSystem';
 import useSize from './hooks/useSize';
 import useWindowViewportRectRef from './hooks/useWindowViewportRect';
-import { addDeprecatedAlias, buildScroller, buildWindowScroller, identity, viewportStyle, } from './List';
+import { addDeprecatedAlias, buildScroller, buildWindowScroller, contextPropIfNotDomElement, identity, viewportStyle, } from './List';
 var gridComponentPropsSystem = u.system(function () {
     var itemContent = u.statefulStream(function (index) { return "Item " + index; });
     var components = u.statefulStream({});
+    var context = u.statefulStream(null);
     var itemClassName = u.statefulStream('virtuoso-grid-item');
     var listClassName = u.statefulStream('virtuoso-grid-list');
     var computeItemKey = u.statefulStream(identity);
@@ -19,6 +21,7 @@ var gridComponentPropsSystem = u.system(function () {
         return u.statefulStreamFromEmitter(u.pipe(components, u.map(function (components) { return components[propName]; }), u.distinctUntilChanged()), defaultValue);
     };
     return {
+        context: context,
         itemContent: itemContent,
         components: components,
         computeItemKey: computeItemKey,
@@ -45,7 +48,6 @@ var combinedSystem = u.system(function (_a) {
         u.connect(u.pipe(stream, u.withLatestFrom(gridComponentPropsSystem.components), u.map(function (_a) {
             var _b;
             var _c = __read(_a, 2), comp = _c[0], components = _c[1];
-            // eslint-disable-next-line no-console
             console.warn("react-virtuoso: " + propName + " property is deprecated. Pass components." + componentName + " instead.");
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             return __assign(__assign({}, components), (_b = {}, _b[componentName] = comp, _b));
@@ -53,7 +55,6 @@ var combinedSystem = u.system(function (_a) {
     }
     u.subscribe(deprecatedProps.scrollSeek, function (_a) {
         var placeholder = _a.placeholder, config = __rest(_a, ["placeholder"]);
-        // eslint-disable-next-line no-console
         console.warn("react-virtuoso: scrollSeek property is deprecated. Pass scrollSeekConfiguration and specify the placeholder in components.ScrollSeekPlaceholder instead.");
         u.publish(gridComponentPropsSystem.components, __assign(__assign({}, u.getValue(gridComponentPropsSystem.components)), { 
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -72,58 +73,51 @@ var GridItems = React.memo(function GridItems() {
     var itemContent = useEmitterValue('itemContent');
     var computeItemKey = useEmitterValue('computeItemKey');
     var isSeeking = useEmitterValue('isSeeking');
+    var scrollHeightCallback = usePublisher('scrollHeight');
     var ItemComponent = useEmitterValue('ItemComponent');
     var ListComponent = useEmitterValue('ListComponent');
     var ScrollSeekPlaceholder = useEmitterValue('ScrollSeekPlaceholder');
+    var context = useEmitterValue('context');
     var itemDimensions = usePublisher('itemDimensions');
     var listRef = useSize(function (el) {
+        var scrollHeight = el.parentElement.parentElement.scrollHeight;
+        scrollHeightCallback(scrollHeight);
         var firstItem = el.firstChild;
         if (firstItem) {
-            itemDimensions({
-                width: firstItem.offsetWidth,
-                height: firstItem.offsetHeight,
-            });
+            itemDimensions(firstItem.getBoundingClientRect());
         }
     });
-    return createElement(ListComponent, {
-        ref: listRef,
-        className: listClassName,
-        style: {
+    return createElement(ListComponent, __assign(__assign({ ref: listRef, className: listClassName }, contextPropIfNotDomElement(ListComponent, context)), { style: {
             paddingTop: gridState.offsetTop,
             paddingBottom: gridState.offsetBottom,
-        },
-    }, gridState.items.map(function (item) {
+        } }), gridState.items.map(function (item) {
         var key = computeItemKey(item.index);
         return isSeeking
-            ? createElement(ScrollSeekPlaceholder, {
-                key: key,
-                style: { height: gridState.itemHeight, width: gridState.itemWidth },
-            })
-            : createElement(ItemComponent, { className: itemClassName, 'data-index': item.index, key: key }, itemContent(item.index));
+            ? createElement(ScrollSeekPlaceholder, __assign(__assign({ key: key }, contextPropIfNotDomElement(ScrollSeekPlaceholder, context)), { index: item.index, height: gridState.itemHeight, width: gridState.itemWidth }))
+            : createElement(ItemComponent, __assign(__assign({}, contextPropIfNotDomElement(ItemComponent, context)), { className: itemClassName, 'data-index': item.index, key: key }), itemContent(item.index, context));
     }));
 });
 var Viewport = function (_a) {
     var children = _a.children;
     var viewportDimensions = usePublisher('viewportDimensions');
     var viewportRef = useSize(function (el) {
-        viewportDimensions({
-            width: el.offsetWidth,
-            height: el.offsetHeight,
-        });
+        viewportDimensions(el.getBoundingClientRect());
     });
     return (React.createElement("div", { style: viewportStyle, ref: viewportRef }, children));
 };
 var WindowViewport = function (_a) {
     var children = _a.children;
     var windowViewportRect = usePublisher('windowViewportRect');
-    var viewportRef = useWindowViewportRectRef(windowViewportRect);
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
     return (React.createElement("div", { ref: viewportRef, style: viewportStyle }, children));
 };
 var GridRoot = React.memo(function GridRoot(_a) {
     var props = __rest(_a, []);
     var useWindowScroll = useEmitterValue('useWindowScroll');
-    var TheScroller = useWindowScroll ? WindowScroller : Scroller;
-    var TheViewport = useWindowScroll ? WindowViewport : Viewport;
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller;
+    var TheViewport = customScrollParent || useWindowScroll ? WindowViewport : Viewport;
     return (React.createElement(TheScroller, __assign({}, props),
         React.createElement(TheViewport, null,
             React.createElement(GridItems, null))));
@@ -140,6 +134,7 @@ var _a = systemToComponent(combinedSystem, {
         listClassName: 'listClassName',
         itemClassName: 'itemClassName',
         useWindowScroll: 'useWindowScroll',
+        customScrollParent: 'customScrollParent',
         scrollerRef: 'scrollerRef',
         // deprecated
         item: 'item',