@ringcentral/juno 2.4.1 → 2.5.0

package/es6/components/VirtualizedMenu/VirtualizedMenuList.js

@@ -1,9 +1,9 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useImperativeHandle, useMemo, useRef, } from 'react';
 import { isFragment } from 'react-is';
-import { combineProps, fixSafariTransitionStyle, getScrollbarSize, isRcElement, logInDev, styled, useDebounce, useEventCallback, useForkRef, useHiddenTabindex, useKeyboardMoveFocus, useMountState, useOnlyOneFocusable, useRcPortalWindowContext, useTheme, useThemeProps, } from '../../foundation';
+import { combineProps, getScrollbarSize, isRcElement, logInDev, styled, useDebounce, useEventCallback, useForkRef, useHiddenTabindex, useKeyboardMoveFocus, useMountState, useOnlyOneFocusable, useRcPortalWindowContext, useTheme, useThemeProps, } from '../../foundation';
 import { RcList } from '../List/List/List';
-import { isOutOfRange, useDynamicHeight, useHighlightScroll, Virtuoso, } from '../Virtuoso';
+import { isOutOfRange, modifyVlScrollerStyle, useDynamicHeight, useHighlightScroll, Virtuoso, } from '../Virtuoso';
 import { RcVisuallyHidden } from '../VisuallyHidden';
 import { StyledMenuListPadding } from './styles';
 var _RcVirtualizedMenuList = forwardRef(function (inProps, ref) {
@@ -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);
@@ -178,18 +182,7 @@ var _RcVirtualizedMenuList = forwardRef(function (inProps, ref) {
     []);
     var combine = combineProps(__assign({ tabIndex: -1, scrollerRef: function (scrollElm) {
             scrollerRefFn(scrollElm);
-            if (scrollElm) {
-                // * Mozilla/5.0 (iPhone; CPU iPhone OS 15_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/100.0.4896.77 Mobile/15E148 Safari/604.1
-                // * set that to make safari vl render correctly
-                scrollElm.style.transition = fixSafariTransitionStyle;
-                if (position) {
-                    var viewPortElm = scrollElm.firstChild;
-                    if (viewPortElm) {
-                        viewPortElm.style.position = position;
-                    }
-                }
-            }
-            // resetViewPortStyle
+            modifyVlScrollerStyle(scrollElm, position);
             // * when not have scrollerRef mean that is first render
             if (!isMountedRef.current) {
                 onMounted();

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',

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

@@ -1,23 +1,24 @@
 var _a;
 import { __assign, __read, __rest } from "tslib";
+/* eslint-disable no-console */
 import * as React from 'react';
 import { createElement } from 'react';
-/* eslint-disable no-console */
 import { systemToComponent } from '@virtuoso.dev/react-urx';
-import { compose, connect, distinctUntilChanged, getValue, map, noop, pipe, prop, publish, statefulStream, statefulStreamFromEmitter, stream, subscribe, system, tup, withLatestFrom, } from '@virtuoso.dev/urx';
-import { useRcPortalWindowContext } from '../../../foundation';
-import useChangedChildSizes from './hooks/useChangedChildSizes';
+import { compose, connect, distinctUntilChanged, getValue, map, noop, pipe, publish, statefulStream, statefulStreamFromEmitter, stream, subscribe, system, tup, withLatestFrom, } from '@virtuoso.dev/urx';
+import useChangedListContentsSizes from './hooks/useChangedChildSizes';
 import useIsomorphicLayoutEffect from './hooks/useIsomorphicLayoutEffect';
 import useScrollTop from './hooks/useScrollTop';
 import useSize from './hooks/useSize';
 import useWindowViewportRectRef from './hooks/useWindowViewportRect';
 import { listSystem } from './listSystem';
+import { correctItemSize } from './utils/correctItemSize';
 import { positionStickyCssValue } from './utils/positionStickyCssValue';
 export function identity(value) {
     return value;
 }
 var listComponentPropsSystem = system(function () {
     var itemContent = statefulStream(function (index) { return "Item " + index; });
+    var context = statefulStream(null);
     var groupContent = statefulStream(function (index) { return "Group " + index; });
     var components = statefulStream({});
     var computeItemKey = statefulStream(identity);
@@ -28,6 +29,7 @@ var listComponentPropsSystem = system(function () {
         return statefulStreamFromEmitter(pipe(components, map(function (components) { return components[propName]; }), distinctUntilChanged()), defaultValue);
     };
     return {
+        context: context,
         itemContent: itemContent,
         groupContent: groupContent,
         components: components,
@@ -115,17 +117,30 @@ var DefaultScrollSeekPlaceholder = function (_a) {
     var height = _a.height;
     return (React.createElement("div", { style: { height: height } }));
 };
-var GROUP_STYLE = { position: positionStickyCssValue(), zIndex: 1 };
+var GROUP_STYLE = {
+    position: positionStickyCssValue(),
+    zIndex: 1,
+    overflowAnchor: 'none',
+};
 export var Items = React.memo(function VirtuosoItems(_a) {
     var _b = _a.showTopList, showTopList = _b === void 0 ? false : _b;
     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 context = useEmitterValue('context');
     var groupContent = useEmitterValue('groupContent');
     var trackItemSizes = useEmitterValue('trackItemSizes');
     var itemSize = useEmitterValue('itemSize');
-    var ref = useChangedChildSizes(sizeRanges, itemSize, trackItemSizes);
+    var log = useEmitterValue('log');
+    var ref = useChangedListContentsSizes(sizeRanges, itemSize, trackItemSizes, showTopList ? noop : scrollContainerStateCallback, log, customScrollParent);
     var EmptyPlaceholder = useEmitterValue('EmptyPlaceholder');
     var ScrollSeekPlaceholder = useEmitterValue('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder;
     var ListComponent = useEmitterValue('ListComponent');
@@ -135,8 +150,8 @@ export var Items = React.memo(function VirtuosoItems(_a) {
     var isSeeking = useEmitterValue('isSeeking');
     var hasGroups = useEmitterValue('groupIndices').length > 0;
     var paddingTopAddition = useEmitterValue('paddingTopAddition');
-    var scrolledToInitialItem = useEmitterValue('scrolledToInitialItem');
-    // const calculatedHeight = listState.offsetBottom + listState.bottom
+    var firstItemIndex = useEmitterValue('firstItemIndex');
+    var statefulTotalCount = useEmitterValue('statefulTotalCount');
     var containerStyle = showTopList
         ? {}
         : {
@@ -145,40 +160,23 @@ export var Items = React.memo(function VirtuosoItems(_a) {
             paddingBottom: listState.offsetBottom,
             marginTop: deviation,
         };
-    if (!showTopList &&
-        listState.items.length === 0 &&
-        EmptyPlaceholder &&
-        scrolledToInitialItem) {
-        return createElement(EmptyPlaceholder);
+    if (!showTopList && statefulTotalCount === 0 && EmptyPlaceholder) {
+        return createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
     }
-    return createElement(ListComponent, { ref: ref, style: containerStyle }, (showTopList ? listState.topItems : listState.items).map(function (item) {
+    return createElement(ListComponent, __assign(__assign({}, contextPropIfNotDomElement(ListComponent, context)), { ref: ref, style: containerStyle, 'data-test-id': showTopList
+            ? 'virtuoso-top-item-list'
+            : 'virtuoso-item-list' }), (showTopList ? listState.topItems : listState.items).map(function (item) {
         var index = item.originalIndex;
-        var key = computeItemKey(index);
+        var key = computeItemKey(index + firstItemIndex, item.data, context);
         if (isSeeking) {
-            return createElement(ScrollSeekPlaceholder, {
-                key: key,
-                index: item.index,
-                height: item.size,
-            });
+            return createElement(ScrollSeekPlaceholder, __assign(__assign(__assign({}, contextPropIfNotDomElement(ScrollSeekPlaceholder, context)), { key: key, index: item.index, height: item.size, type: item.type || 'item' }), (item.type === 'group' ? {} : { groupIndex: item.groupIndex })));
         }
         if (item.type === 'group') {
-            return createElement(GroupComponent, {
-                key: key,
-                'data-index': index,
-                'data-known-size': item.size,
-                'data-item-index': item.index,
-                style: GROUP_STYLE,
-            }, groupContent(item.index));
+            return createElement(GroupComponent, __assign(__assign({}, contextPropIfNotDomElement(GroupComponent, context)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, style: GROUP_STYLE }), groupContent(item.index));
         }
-        return createElement(ItemComponent, {
-            key: key,
-            'data-index': index,
-            'data-known-size': item.size,
-            'data-item-index': item.index,
-            'data-item-group-index': item.groupIndex,
-        }, hasGroups
-            ? itemContent(item.index, item.groupIndex, item.data)
-            : itemContent(item.index, item.data));
+        return createElement(ItemComponent, __assign(__assign({}, contextPropIfNotDomElement(ItemComponent, context)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, 'data-item-group-index': item.groupIndex, style: { overflowAnchor: 'none' } }), hasGroups
+            ? itemContent(item.index, item.groupIndex, item.data, context)
+            : itemContent(item.index, item.data, context));
     }));
 });
 export var scrollerStyle = {
@@ -199,88 +197,101 @@ var topItemListStyle = {
     position: positionStickyCssValue(),
     top: 0,
 };
+export function contextPropIfNotDomElement(element, context) {
+    if (typeof element === 'string') {
+        return undefined;
+    }
+    return { context: context };
+}
 var Header = React.memo(function VirtuosoHeader() {
     var Header = useEmitterValue('HeaderComponent');
     var headerHeight = usePublisher('headerHeight');
     var headerFooterTag = useEmitterValue('headerFooterTag');
-    var ref = useSize(function (el) { return headerHeight(el.offsetHeight); });
+    var ref = useSize(function (el) { return headerHeight(correctItemSize(el, 'height')); });
+    var context = useEmitterValue('context');
     return Header
-        ? createElement(headerFooterTag, { ref: ref }, createElement(Header))
+        ? createElement(headerFooterTag, { ref: ref }, createElement(Header, contextPropIfNotDomElement(Header, context)))
         : null;
 });
 var Footer = React.memo(function VirtuosoFooter() {
     var Footer = useEmitterValue('FooterComponent');
     var footerHeight = usePublisher('footerHeight');
     var headerFooterTag = useEmitterValue('headerFooterTag');
-    var ref = useSize(function (el) { return footerHeight(el.offsetHeight); });
+    var ref = useSize(function (el) { return footerHeight(correctItemSize(el, 'height')); });
+    var context = useEmitterValue('context');
     return Footer
-        ? createElement(headerFooterTag, { ref: ref }, createElement(Footer))
+        ? createElement(headerFooterTag, { ref: ref }, createElement(Footer, contextPropIfNotDomElement(Footer, context)))
         : null;
 });
 export function buildScroller(_a) {
-    var usePublisher = _a.usePublisher, useEmitter = _a.useEmitter, useEmitterValue = _a.useEmitterValue, customWindow = _a.window;
+    var usePublisher = _a.usePublisher, useEmitter = _a.useEmitter, useEmitterValue = _a.useEmitterValue;
     var Scroller = React.memo(function VirtuosoScroller(_a) {
         var style = _a.style, children = _a.children, props = __rest(_a, ["style", "children"]);
-        var scrollTopCallback = usePublisher('scrollTop');
+        var scrollContainerStateCallback = usePublisher('scrollContainerState');
         var ScrollerComponent = useEmitterValue('ScrollerComponent');
         var smoothScrollTargetReached = usePublisher('smoothScrollTargetReached');
         var scrollerRefCallback = useEmitterValue('scrollerRef');
-        var _b = useScrollTop(scrollTopCallback, smoothScrollTargetReached, ScrollerComponent, scrollerRefCallback, customWindow), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
+        var context = useEmitterValue('context');
+        var _b = useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, ScrollerComponent, scrollerRefCallback), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
         useEmitter('scrollTo', scrollToCallback);
         useEmitter('scrollBy', scrollByCallback);
-        return createElement(ScrollerComponent, __assign({ ref: scrollerRef, style: __assign(__assign({}, scrollerStyle), style), tabIndex: 0 }, props), children);
+        return createElement(ScrollerComponent, __assign(__assign({ ref: scrollerRef, style: __assign(__assign({}, scrollerStyle), style), 'data-test-id': 'virtuoso-scroller', 'data-virtuoso-scroller': true, tabIndex: 0 }, props), contextPropIfNotDomElement(ScrollerComponent, context)), children);
     });
     return Scroller;
 }
 export function buildWindowScroller(_a) {
-    var usePublisher = _a.usePublisher, useEmitter = _a.useEmitter, useEmitterValue = _a.useEmitterValue, customWindow = _a.window;
+    var usePublisher = _a.usePublisher, useEmitter = _a.useEmitter, useEmitterValue = _a.useEmitterValue;
     var Scroller = React.memo(function VirtuosoWindowScroller(_a) {
         var style = _a.style, children = _a.children, props = __rest(_a, ["style", "children"]);
-        var scrollTopCallback = usePublisher('windowScrollTop');
+        var scrollContainerStateCallback = usePublisher('windowScrollContainerState');
         var ScrollerComponent = useEmitterValue('ScrollerComponent');
         var smoothScrollTargetReached = usePublisher('smoothScrollTargetReached');
         var totalListHeight = useEmitterValue('totalListHeight');
-        var _b = useScrollTop(scrollTopCallback, smoothScrollTargetReached, ScrollerComponent, undefined, customWindow), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
+        var deviation = useEmitterValue('deviation');
+        var customScrollParent = useEmitterValue('customScrollParent');
+        var context = useEmitterValue('context');
+        var _b = useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, ScrollerComponent, noop, customScrollParent), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
         useIsomorphicLayoutEffect(function () {
-            scrollerRef.current = window;
+            scrollerRef.current = customScrollParent ? customScrollParent : window;
             return function () {
                 scrollerRef.current = null;
             };
-        }, [scrollerRef]);
+        }, [scrollerRef, customScrollParent]);
         useEmitter('windowScrollTo', scrollToCallback);
         useEmitter('scrollBy', scrollByCallback);
-        return createElement(ScrollerComponent, __assign({ style: __assign(__assign({ position: 'relative' }, style), (totalListHeight !== 0 ? { height: totalListHeight } : {})) }, props), children);
+        return createElement(ScrollerComponent, __assign(__assign({ style: __assign(__assign({ position: 'relative' }, style), (totalListHeight !== 0
+                ? { height: totalListHeight + deviation }
+                : {})), 'data-virtuoso-scroller': true }, props), contextPropIfNotDomElement(ScrollerComponent, context)), children);
     });
     return Scroller;
 }
 var Viewport = function (_a) {
     var children = _a.children;
     var viewportHeight = usePublisher('viewportHeight');
-    var viewportRef = useSize(compose(viewportHeight, prop('offsetHeight')));
-    return (React.createElement("div", { style: viewportStyle, ref: viewportRef }, children));
+    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 externalWindow = useRcPortalWindowContext().externalWindow;
-    var viewportRef = useWindowViewportRectRef(windowViewportRect, externalWindow);
-    return (React.createElement("div", { ref: viewportRef, style: viewportStyle }, children));
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
+    return (React.createElement("div", { ref: viewportRef, style: viewportStyle, "data-viewport-type": "window" }, children));
 };
 var TopItemListContainer = function (_a) {
     var children = _a.children;
     var TopItemList = useEmitterValue('TopItemListComponent');
     var headerHeight = useEmitterValue('headerHeight');
     var style = __assign(__assign({}, topItemListStyle), { marginTop: headerHeight + "px" });
-    return createElement(TopItemList || 'div', { style: style }, children);
+    var context = useEmitterValue('context');
+    return createElement(TopItemList || 'div', { style: style, context: context }, children);
 };
 var ListRoot = React.memo(function VirtuosoRoot(props) {
     var useWindowScroll = useEmitterValue('useWindowScroll');
     var showTopList = useEmitterValue('topItemsIndexes').length > 0;
-    var externalWindow = useRcPortalWindowContext().externalWindow;
-    var TheScroller = React.useMemo(function () {
-        return (useWindowScroll ? createWindowScroller : createScroller)(externalWindow || window);
-    }, [externalWindow, useWindowScroll]);
-    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(Header, null),
@@ -292,16 +303,19 @@ var ListRoot = React.memo(function VirtuosoRoot(props) {
 export var List = (_a = systemToComponent(combinedSystem, {
     required: {},
     optional: {
+        context: 'context',
         followOutput: 'followOutput',
         firstItemIndex: 'firstItemIndex',
         itemContent: 'itemContent',
         groupContent: 'groupContent',
         overscan: 'overscan',
+        increaseViewportBy: 'increaseViewportBy',
         totalCount: 'totalCount',
         topItemCount: 'topItemCount',
         initialTopMostItemIndex: 'initialTopMostItemIndex',
         components: 'components',
         groupCounts: 'groupCounts',
+        atBottomThreshold: 'atBottomThreshold',
         computeItemKey: 'computeItemKey',
         defaultItemHeight: 'defaultItemHeight',
         fixedItemHeight: 'fixedItemHeight',
@@ -313,7 +327,9 @@ export var List = (_a = systemToComponent(combinedSystem, {
         initialScrollTop: 'initialScrollTop',
         alignToBottom: 'alignToBottom',
         useWindowScroll: 'useWindowScroll',
+        customScrollParent: 'customScrollParent',
         scrollerRef: 'scrollerRef',
+        logLevel: 'logLevel',
         // deprecated
         item: 'item',
         group: 'group',
@@ -334,6 +350,7 @@ export var List = (_a = systemToComponent(combinedSystem, {
     },
     methods: {
         scrollToIndex: 'scrollToIndex',
+        scrollIntoView: 'scrollIntoView',
         scrollTo: 'scrollTo',
         scrollBy: 'scrollBy',
         adjustForPrependedItems: 'adjustForPrependedItems',
@@ -350,14 +367,9 @@ export var List = (_a = systemToComponent(combinedSystem, {
         groupIndices: 'groupIndices',
     },
 }, ListRoot), _a.Component), usePublisher = _a.usePublisher, useEmitterValue = _a.useEmitterValue, useEmitter = _a.useEmitter;
-var createScroller = function (window) {
-    return buildScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter, window: window });
-};
-var createWindowScroller = function (window) {
-    return buildWindowScroller({
-        usePublisher: usePublisher,
-        useEmitterValue: useEmitterValue,
-        useEmitter: useEmitter,
-        window: window,
-    });
-};
+var Scroller = buildScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+var WindowScroller = buildWindowScroller({
+    usePublisher: usePublisher,
+    useEmitterValue: useEmitterValue,
+    useEmitter: useEmitter,
+});