@ringcentral/juno 2.40.0 → 2.41.0

package/es6/components/Virtuoso/react-virtuoso/{List.js → Virtuoso.js}

@@ -1,33 +1,31 @@
 var _a;
 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';
-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 { systemToComponent } from './react-urx';
+import * as u from './urx';
+import React from 'react';
 import useIsomorphicLayoutEffect from './hooks/useIsomorphicLayoutEffect';
+import useChangedListContentsSizes from './hooks/useChangedChildSizes';
 import useScrollTop from './hooks/useScrollTop';
 import useSize from './hooks/useSize';
-import useWindowViewportRectRef from './hooks/useWindowViewportRect';
 import { listSystem } from './listSystem';
-import conditionalFlushSync from './utils/conditionalFlushSync';
-import { correctItemSize } from './utils/correctItemSize';
 import { positionStickyCssValue } from './utils/positionStickyCssValue';
+import useWindowViewportRectRef from './hooks/useWindowViewportRect';
+import { correctItemSize } from './utils/correctItemSize';
+import { VirtuosoMockContext } from './utils/context';
 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);
-    var headerFooterTag = statefulStream('div');
-    var scrollerRef = statefulStream(noop);
+var listComponentPropsSystem = /*#__PURE__*/ u.system(function () {
+    var itemContent = u.statefulStream(function (index) { return "Item " + index; });
+    var context = u.statefulStream(null);
+    var groupContent = u.statefulStream(function (index) { return "Group " + index; });
+    var components = u.statefulStream({});
+    var computeItemKey = u.statefulStream(identity);
+    var headerFooterTag = u.statefulStream('div');
+    var scrollerRef = u.statefulStream(u.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 u.statefulStreamFromEmitter(u.pipe(components, u.map(function (components) { return components[propName]; }), u.distinctUntilChanged()), defaultValue);
     };
     return {
         context: context,
@@ -48,109 +46,40 @@ var listComponentPropsSystem = system(function () {
         ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder'),
     };
 });
-export function addDeprecatedAlias(prop, message) {
-    var alias = stream();
-    subscribe(alias, function () {
-        return console.warn("react-virtuoso: You are using a deprecated property. " + message, 'color: red;', 'color: inherit;', 'color: blue;');
-    });
-    connect(alias, prop);
-    return alias;
-}
-var combinedSystem = system(function (_a) {
+var combinedSystem = /*#__PURE__*/ u.system(function (_a) {
     var _b = __read(_a, 2), listSystem = _b[0], propsSystem = _b[1];
-    var deprecatedProps = {
-        item: addDeprecatedAlias(propsSystem.itemContent, 'Rename the %citem%c prop to %citemContent.'),
-        group: addDeprecatedAlias(propsSystem.groupContent, 'Rename the %cgroup%c prop to %cgroupContent.'),
-        topItems: addDeprecatedAlias(listSystem.topItemCount, 'Rename the %ctopItems%c prop to %ctopItemCount.'),
-        itemHeight: addDeprecatedAlias(listSystem.fixedItemHeight, 'Rename the %citemHeight%c prop to %cfixedItemHeight.'),
-        scrollingStateChange: addDeprecatedAlias(listSystem.isScrolling, 'Rename the %cscrollingStateChange%c prop to %cisScrolling.'),
-        adjustForPrependedItems: stream(),
-        maxHeightCacheSize: stream(),
-        footer: stream(),
-        header: stream(),
-        HeaderContainer: stream(),
-        FooterContainer: stream(),
-        ItemContainer: stream(),
-        ScrollContainer: stream(),
-        GroupContainer: stream(),
-        ListContainer: stream(),
-        emptyComponent: stream(),
-        scrollSeek: stream(),
-    };
-    subscribe(deprecatedProps.adjustForPrependedItems, function () {
-        console.warn("react-virtuoso: adjustForPrependedItems is no longer supported. Use the firstItemIndex property instead - https://virtuoso.dev/prepend-items.", 'color: red;', 'color: inherit;', 'color: blue;');
-    });
-    subscribe(deprecatedProps.maxHeightCacheSize, function () {
-        console.warn("react-virtuoso: maxHeightCacheSize is no longer necessary. Setting it has no effect - remove it from your code.");
-    });
-    subscribe(deprecatedProps.HeaderContainer, function () {
-        console.warn("react-virtuoso: HeaderContainer is deprecated. Use headerFooterTag if you want to change the wrapper of the header component and pass components.Header to change its contents.");
-    });
-    subscribe(deprecatedProps.FooterContainer, function () {
-        console.warn("react-virtuoso: FooterContainer is deprecated. Use headerFooterTag if you want to change the wrapper of the footer component and pass components.Footer to change its contents.");
-    });
-    function deprecateComponentProp(stream, componentName, propName) {
-        connect(pipe(stream, withLatestFrom(propsSystem.components), map(function (_a) {
-            var _b;
-            var _c = __read(_a, 2), comp = _c[0], components = _c[1];
-            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));
-        })), propsSystem.components);
-    }
-    subscribe(deprecatedProps.scrollSeek, function (_a) {
-        var placeholder = _a.placeholder, config = __rest(_a, ["placeholder"]);
-        console.warn("react-virtuoso: scrollSeek property is deprecated. Pass scrollSeekConfiguration and specify the placeholder in components.ScrollSeekPlaceholder instead.");
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        publish(propsSystem.components, __assign(__assign({}, getValue(propsSystem.components)), { ScrollSeekPlaceholder: placeholder }));
-        publish(listSystem.scrollSeekConfiguration, config);
-    });
-    deprecateComponentProp(deprecatedProps.footer, 'Footer', 'footer');
-    deprecateComponentProp(deprecatedProps.header, 'Header', 'header');
-    deprecateComponentProp(deprecatedProps.ItemContainer, 'Item', 'ItemContainer');
-    deprecateComponentProp(deprecatedProps.ListContainer, 'List', 'ListContainer');
-    deprecateComponentProp(deprecatedProps.ScrollContainer, 'Scroller', 'ScrollContainer');
-    deprecateComponentProp(deprecatedProps.emptyComponent, 'EmptyPlaceholder', 'emptyComponent');
-    deprecateComponentProp(deprecatedProps.GroupContainer, 'Group', 'GroupContainer');
-    return __assign(__assign(__assign({}, listSystem), propsSystem), deprecatedProps);
-}, tup(listSystem, listComponentPropsSystem));
+    return __assign(__assign({}, listSystem), propsSystem);
+}, u.tup(listSystem, listComponentPropsSystem));
 var DefaultScrollSeekPlaceholder = function (_a) {
     var height = _a.height;
-    return (React.createElement("div", { style: { height: height } }));
-};
-var GROUP_STYLE = {
-    position: positionStickyCssValue(),
-    zIndex: 1,
-    overflowAnchor: 'none',
+    return React.createElement("div", { style: { height: height } });
 };
+var GROUP_STYLE = { position: positionStickyCssValue(), zIndex: 1, overflowAnchor: 'none' };
 var ITEM_STYLE = { overflowAnchor: 'none' };
-export var Items = React.memo(function VirtuosoItems(_a) {
+var Items = /*#__PURE__*/ React.memo(function VirtuosoItems(_a) {
     var _b = _a.showTopList, showTopList = _b === void 0 ? false : _b;
     var listState = useEmitterValue('listState');
-    var _c = __read(React.useState(0), 2), deviation = _c[0], setDeviation = _c[1];
-    var react18ConcurrentRendering = useEmitterValue('react18ConcurrentRendering');
-    useEmitter('deviation', function (value) {
-        if (deviation !== value) {
-            conditionalFlushSync(react18ConcurrentRendering)(function () {
-                return setDeviation(value);
-            });
-        }
-    });
     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 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 log = useEmitterValue('log');
-    var ref = useChangedListContentsSizes(sizeRanges, itemSize, trackItemSizes, showTopList ? noop : scrollContainerStateCallback, log, customScrollParent);
+    var listGap = usePublisher('gap');
+    var callbackRef = useChangedListContentsSizes(sizeRanges, itemSize, trackItemSizes, showTopList ? u.noop : scrollContainerStateCallback, log, listGap, customScrollParent).callbackRef;
+    var _c = __read(React.useState(0), 2), deviation = _c[0], setDeviation = _c[1];
+    useEmitter('deviation', function (value) {
+        if (deviation !== value) {
+            // ref.current!.style.marginTop = `${value}px`
+            setDeviation(value);
+        }
+    });
     var EmptyPlaceholder = useEmitterValue('EmptyPlaceholder');
     var ScrollSeekPlaceholder = useEmitterValue('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder;
     var ListComponent = useEmitterValue('ListComponent');
@@ -160,33 +89,27 @@ export var Items = React.memo(function VirtuosoItems(_a) {
     var isSeeking = useEmitterValue('isSeeking');
     var hasGroups = useEmitterValue('groupIndices').length > 0;
     var paddingTopAddition = useEmitterValue('paddingTopAddition');
-    var firstItemIndex = useEmitterValue('firstItemIndex');
-    var statefulTotalCount = useEmitterValue('statefulTotalCount');
+    var scrolledToInitialItem = useEmitterValue('scrolledToInitialItem');
     var containerStyle = showTopList
         ? {}
-        : {
-            boxSizing: 'border-box',
-            paddingTop: listState.offsetTop + paddingTopAddition,
-            paddingBottom: listState.offsetBottom,
-            marginTop: deviation,
-        };
-    if (!showTopList && statefulTotalCount === 0 && EmptyPlaceholder) {
-        return createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
+        : __assign({ boxSizing: 'border-box', paddingTop: listState.offsetTop + paddingTopAddition, paddingBottom: listState.offsetBottom, marginTop: deviation }, (scrolledToInitialItem ? {} : { visibility: 'hidden' }));
+    if (!showTopList && listState.totalCount === 0 && EmptyPlaceholder) {
+        return React.createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
     }
-    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) {
+    return React.createElement(ListComponent, __assign(__assign({}, contextPropIfNotDomElement(ListComponent, context)), { ref: callbackRef, 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 + firstItemIndex, item.data, context);
+        var key = computeItemKey(index + listState.firstItemIndex, item.data, context);
         if (isSeeking) {
-            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 })));
+            return React.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, __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 React.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, context));
+        }
+        else {
+            return React.createElement(ItemComponent, __assign(__assign(__assign({}, contextPropIfNotDomElement(ItemComponent, context)), itemPropIfNotDomElement(ItemComponent, item.data)), { key: key, 'data-index': index, 'data-known-size': item.size, 'data-item-index': item.index, 'data-item-group-index': item.groupIndex, style: ITEM_STYLE }), hasGroups
+                ? itemContent(item.index, item.groupIndex, item.data, context)
+                : itemContent(item.index, item.data, context));
         }
-        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: ITEM_STYLE }), hasGroups
-            ? itemContent(item.index, item.groupIndex, item.data, context)
-            : itemContent(item.index, item.data, context));
     }));
 });
 export var scrollerStyle = {
@@ -206,6 +129,7 @@ var topItemListStyle = {
     width: '100%',
     position: positionStickyCssValue(),
     top: 0,
+    zIndex: 1,
 };
 export function contextPropIfNotDomElement(element, context) {
     if (typeof element === 'string') {
@@ -213,6 +137,9 @@ export function contextPropIfNotDomElement(element, context) {
     }
     return { context: context };
 }
+export function itemPropIfNotDomElement(element, item) {
+    return { item: typeof element === 'string' ? undefined : item };
+}
 var Header = React.memo(function VirtuosoHeader() {
     var Header = useEmitterValue('HeaderComponent');
     var headerHeight = usePublisher('headerHeight');
@@ -220,7 +147,7 @@ var Header = React.memo(function VirtuosoHeader() {
     var ref = useSize(function (el) { return headerHeight(correctItemSize(el, 'height')); });
     var context = useEmitterValue('context');
     return Header
-        ? createElement(headerFooterTag, { ref: ref }, createElement(Header, contextPropIfNotDomElement(Header, context)))
+        ? React.createElement(headerFooterTag, { ref: ref }, React.createElement(Header, contextPropIfNotDomElement(Header, context)))
         : null;
 });
 var Footer = React.memo(function VirtuosoFooter() {
@@ -230,7 +157,7 @@ var Footer = React.memo(function VirtuosoFooter() {
     var ref = useSize(function (el) { return footerHeight(correctItemSize(el, 'height')); });
     var context = useEmitterValue('context');
     return Footer
-        ? createElement(headerFooterTag, { ref: ref }, createElement(Footer, contextPropIfNotDomElement(Footer, context)))
+        ? React.createElement(headerFooterTag, { ref: ref }, React.createElement(Footer, contextPropIfNotDomElement(Footer, context)))
         : null;
 });
 export function buildScroller(_a) {
@@ -245,7 +172,7 @@ export function buildScroller(_a) {
         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(__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 React.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;
 }
@@ -260,7 +187,7 @@ export function buildWindowScroller(_a) {
         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;
+        var _b = useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, ScrollerComponent, u.noop, customScrollParent), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
         useIsomorphicLayoutEffect(function () {
             scrollerRef.current = customScrollParent ? customScrollParent : window;
             return function () {
@@ -269,23 +196,37 @@ export function buildWindowScroller(_a) {
         }, [scrollerRef, customScrollParent]);
         useEmitter('windowScrollTo', scrollToCallback);
         useEmitter('scrollBy', scrollByCallback);
-        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 React.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 ctx = React.useContext(VirtuosoMockContext);
     var viewportHeight = usePublisher('viewportHeight');
-    var viewportRef = useSize(compose(viewportHeight, function (el) { return correctItemSize(el, 'height'); }));
+    var fixedItemHeight = usePublisher('fixedItemHeight');
+    var viewportRef = useSize(u.compose(viewportHeight, function (el) { return correctItemSize(el, 'height'); }));
+    React.useEffect(function () {
+        if (ctx) {
+            viewportHeight(ctx.viewportHeight);
+            fixedItemHeight(ctx.itemHeight);
+        }
+    }, [ctx, viewportHeight, fixedItemHeight]);
     return (React.createElement("div", { style: viewportStyle, ref: viewportRef, "data-viewport-type": "element" }, children));
 };
 var WindowViewport = function (_a) {
     var children = _a.children;
+    var ctx = React.useContext(VirtuosoMockContext);
     var windowViewportRect = usePublisher('windowViewportRect');
+    var fixedItemHeight = usePublisher('fixedItemHeight');
     var customScrollParent = useEmitterValue('customScrollParent');
     var viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
+    React.useEffect(function () {
+        if (ctx) {
+            fixedItemHeight(ctx.itemHeight);
+            windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 });
+        }
+    }, [ctx, windowViewportRect, fixedItemHeight]);
     return (React.createElement("div", { ref: viewportRef, style: viewportStyle, "data-viewport-type": "window" }, children));
 };
 var TopItemListContainer = function (_a) {
@@ -294,7 +235,7 @@ var TopItemListContainer = function (_a) {
     var headerHeight = useEmitterValue('headerHeight');
     var style = __assign(__assign({}, topItemListStyle), { marginTop: headerHeight + "px" });
     var context = useEmitterValue('context');
-    return createElement(TopItemList || 'div', { style: style, context: context }, children);
+    return React.createElement(TopItemList || 'div', { style: style, context: context }, children);
 };
 var ListRoot = React.memo(function VirtuosoRoot(props) {
     var useWindowScroll = useEmitterValue('useWindowScroll');
@@ -303,29 +244,31 @@ var ListRoot = React.memo(function VirtuosoRoot(props) {
     var TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller;
     var TheViewport = customScrollParent || useWindowScroll ? WindowViewport : Viewport;
     return (React.createElement(TheScroller, __assign({}, props),
+        showTopList && (React.createElement(TopItemListContainer, null,
+            React.createElement(Items, { showTopList: true }))),
         React.createElement(TheViewport, null,
             React.createElement(Header, null),
             React.createElement(Items, null),
-            React.createElement(Footer, null)),
-        showTopList && (React.createElement(TopItemListContainer, null,
-            React.createElement(Items, { showTopList: true })))));
+            React.createElement(Footer, null))));
 });
 export var List = (_a = systemToComponent(combinedSystem, {
     required: {},
     optional: {
+        restoreStateFrom: 'restoreStateFrom',
         context: 'context',
         followOutput: 'followOutput',
-        firstItemIndex: 'firstItemIndex',
         itemContent: 'itemContent',
         groupContent: 'groupContent',
         overscan: 'overscan',
         increaseViewportBy: 'increaseViewportBy',
         totalCount: 'totalCount',
+        groupCounts: 'groupCounts',
         topItemCount: 'topItemCount',
+        firstItemIndex: 'firstItemIndex',
         initialTopMostItemIndex: 'initialTopMostItemIndex',
         components: 'components',
-        groupCounts: 'groupCounts',
         atBottomThreshold: 'atBottomThreshold',
+        atTopThreshold: 'atTopThreshold',
         computeItemKey: 'computeItemKey',
         defaultItemHeight: 'defaultItemHeight',
         fixedItemHeight: 'fixedItemHeight',
@@ -340,31 +283,14 @@ export var List = (_a = systemToComponent(combinedSystem, {
         customScrollParent: 'customScrollParent',
         scrollerRef: 'scrollerRef',
         logLevel: 'logLevel',
-        react18ConcurrentRendering: 'react18ConcurrentRendering',
-        // deprecated
-        item: 'item',
-        group: 'group',
-        topItems: 'topItems',
-        itemHeight: 'itemHeight',
-        scrollingStateChange: 'scrollingStateChange',
-        maxHeightCacheSize: 'maxHeightCacheSize',
-        footer: 'footer',
-        header: 'header',
-        ItemContainer: 'ItemContainer',
-        ScrollContainer: 'ScrollContainer',
-        ListContainer: 'ListContainer',
-        GroupContainer: 'GroupContainer',
-        emptyComponent: 'emptyComponent',
-        HeaderContainer: 'HeaderContainer',
-        FooterContainer: 'FooterContainer',
-        scrollSeek: 'scrollSeek',
     },
     methods: {
         scrollToIndex: 'scrollToIndex',
         scrollIntoView: 'scrollIntoView',
         scrollTo: 'scrollTo',
         scrollBy: 'scrollBy',
-        adjustForPrependedItems: 'adjustForPrependedItems',
+        autoscrollToBottom: 'autoscrollToBottom',
+        getState: 'getState',
     },
     events: {
         isScrolling: 'isScrolling',
@@ -378,9 +304,7 @@ export var List = (_a = systemToComponent(combinedSystem, {
         groupIndices: 'groupIndices',
     },
 }, ListRoot), _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,
-});
+var Scroller = /*#__PURE__*/ buildScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+var WindowScroller = /*#__PURE__*/ buildWindowScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+export var Virtuoso = List;
+export var GroupedVirtuoso = List;

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

@@ -0,0 +1,198 @@
+import { __assign, __read, __rest } from "tslib";
+import { systemToComponent } from './react-urx';
+import * as u from './urx';
+import React from 'react';
+import { gridSystem } from './gridSystem';
+import useSize from './hooks/useSize';
+import useWindowViewportRectRef from './hooks/useWindowViewportRect';
+import { buildScroller, buildWindowScroller, contextPropIfNotDomElement, identity, viewportStyle } from './Virtuoso';
+import { LogLevel } from './loggerSystem';
+import { correctItemSize } from './utils/correctItemSize';
+import { VirtuosoGridMockContext } from './utils/context';
+var gridComponentPropsSystem = /*#__PURE__*/ 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);
+    var headerFooterTag = u.statefulStream('div');
+    var scrollerRef = u.statefulStream(u.noop);
+    var distinctProp = function (propName, defaultValue) {
+        if (defaultValue === void 0) { defaultValue = null; }
+        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,
+        itemClassName: itemClassName,
+        listClassName: listClassName,
+        headerFooterTag: headerFooterTag,
+        scrollerRef: scrollerRef,
+        FooterComponent: distinctProp('Footer'),
+        HeaderComponent: distinctProp('Header'),
+        ListComponent: distinctProp('List', 'div'),
+        ItemComponent: distinctProp('Item', 'div'),
+        ScrollerComponent: distinctProp('Scroller', 'div'),
+        ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder', 'div'),
+    };
+});
+var combinedSystem = /*#__PURE__*/ u.system(function (_a) {
+    var _b = __read(_a, 2), gridSystem = _b[0], gridComponentPropsSystem = _b[1];
+    return __assign(__assign({}, gridSystem), gridComponentPropsSystem);
+}, u.tup(gridSystem, gridComponentPropsSystem));
+var GridItems = React.memo(function GridItems() {
+    var gridState = useEmitterValue('gridState');
+    var listClassName = useEmitterValue('listClassName');
+    var itemClassName = useEmitterValue('itemClassName');
+    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 gridGap = usePublisher('gap');
+    var log = useEmitterValue('log');
+    var stateRestoreInProgress = useEmitterValue('stateRestoreInProgress');
+    var listRef = useSize(function (el) {
+        var scrollHeight = el.parentElement.parentElement.scrollHeight;
+        scrollHeightCallback(scrollHeight);
+        var firstItem = el.firstChild;
+        if (firstItem) {
+            var _a = firstItem.getBoundingClientRect(), width = _a.width, height = _a.height;
+            itemDimensions({ width: width, height: height });
+        }
+        gridGap({
+            row: resolveGapValue('row-gap', getComputedStyle(el).rowGap, log),
+            column: resolveGapValue('column-gap', getComputedStyle(el).columnGap, log),
+        });
+    });
+    if (stateRestoreInProgress) {
+        return null;
+    }
+    //   console.log('rendering items', gridState.items)
+    return React.createElement(ListComponent, __assign(__assign({ ref: listRef, className: listClassName }, contextPropIfNotDomElement(ListComponent, context)), { style: { paddingTop: gridState.offsetTop, paddingBottom: gridState.offsetBottom }, 'data-test-id': 'virtuoso-item-list' }), gridState.items.map(function (item) {
+        var key = computeItemKey(item.index, item.data, context);
+        return isSeeking
+            ? React.createElement(ScrollSeekPlaceholder, __assign(__assign({ key: key }, contextPropIfNotDomElement(ScrollSeekPlaceholder, context)), { index: item.index, height: gridState.itemHeight, width: gridState.itemWidth }))
+            : React.createElement(ItemComponent, __assign(__assign({}, contextPropIfNotDomElement(ItemComponent, context)), { className: itemClassName, 'data-index': item.index, key: key }), itemContent(item.index, item.data, 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(correctItemSize(el, 'height')); });
+    var context = useEmitterValue('context');
+    return Header
+        ? React.createElement(headerFooterTag, { ref: ref }, React.createElement(Header, contextPropIfNotDomElement(Header, context)))
+        : null;
+});
+var Footer = React.memo(function VirtuosoGridFooter() {
+    var Footer = useEmitterValue('FooterComponent');
+    var footerHeight = usePublisher('footerHeight');
+    var headerFooterTag = useEmitterValue('headerFooterTag');
+    var ref = useSize(function (el) { return footerHeight(correctItemSize(el, 'height')); });
+    var context = useEmitterValue('context');
+    return Footer
+        ? React.createElement(headerFooterTag, { ref: ref }, React.createElement(Footer, contextPropIfNotDomElement(Footer, context)))
+        : null;
+});
+var Viewport = function (_a) {
+    var children = _a.children;
+    var ctx = React.useContext(VirtuosoGridMockContext);
+    var itemDimensions = usePublisher('itemDimensions');
+    var viewportDimensions = usePublisher('viewportDimensions');
+    var viewportRef = useSize(function (el) {
+        viewportDimensions(el.getBoundingClientRect());
+    });
+    React.useEffect(function () {
+        if (ctx) {
+            viewportDimensions({ height: ctx.viewportHeight, width: ctx.viewportWidth });
+            itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth });
+        }
+    }, [ctx, viewportDimensions, itemDimensions]);
+    return (React.createElement("div", { style: viewportStyle, ref: viewportRef }, children));
+};
+var WindowViewport = function (_a) {
+    var children = _a.children;
+    var ctx = React.useContext(VirtuosoGridMockContext);
+    var windowViewportRect = usePublisher('windowViewportRect');
+    var itemDimensions = usePublisher('itemDimensions');
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
+    React.useEffect(function () {
+        if (ctx) {
+            itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth });
+            windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: ctx.viewportWidth });
+        }
+    }, [ctx, windowViewportRect, itemDimensions]);
+    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 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),
+            React.createElement(GridItems, null),
+            React.createElement(Footer, null))));
+});
+var _a = systemToComponent(combinedSystem, {
+    optional: {
+        context: 'context',
+        totalCount: 'totalCount',
+        overscan: 'overscan',
+        itemContent: 'itemContent',
+        components: 'components',
+        computeItemKey: 'computeItemKey',
+        data: 'data',
+        initialItemCount: 'initialItemCount',
+        scrollSeekConfiguration: 'scrollSeekConfiguration',
+        headerFooterTag: 'headerFooterTag',
+        listClassName: 'listClassName',
+        itemClassName: 'itemClassName',
+        useWindowScroll: 'useWindowScroll',
+        customScrollParent: 'customScrollParent',
+        scrollerRef: 'scrollerRef',
+        logLevel: 'logLevel',
+        restoreStateFrom: 'restoreStateFrom',
+        initialTopMostItemIndex: 'initialTopMostItemIndex',
+    },
+    methods: {
+        scrollTo: 'scrollTo',
+        scrollBy: 'scrollBy',
+        scrollToIndex: 'scrollToIndex',
+    },
+    events: {
+        isScrolling: 'isScrolling',
+        endReached: 'endReached',
+        startReached: 'startReached',
+        rangeChanged: 'rangeChanged',
+        atBottomStateChange: 'atBottomStateChange',
+        atTopStateChange: 'atTopStateChange',
+        stateChanged: 'stateChanged',
+    },
+}, GridRoot), Grid = _a.Component, usePublisher = _a.usePublisher, useEmitterValue = _a.useEmitterValue, useEmitter = _a.useEmitter;
+// Fix
+export { Grid };
+var Scroller = /*#__PURE__*/ buildScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+var WindowScroller = /*#__PURE__*/ buildWindowScroller({ usePublisher: usePublisher, useEmitterValue: useEmitterValue, useEmitter: useEmitter });
+function resolveGapValue(property, value, log) {
+    if (value !== 'normal' && !(value === null || value === void 0 ? void 0 : value.endsWith('px'))) {
+        log(property + " was not resolved to pixel value correctly", value, LogLevel.WARN);
+    }
+    if (value === 'normal') {
+        return 0;
+    }
+    return parseInt(value !== null && value !== void 0 ? value : '0', 10);
+}
+export var VirtuosoGrid = Grid;

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

@@ -1,7 +1,7 @@
 import { __read } from "tslib";
-import * as u from '@virtuoso.dev/urx';
-import { domIOSystem } from './domIOSystem';
+import * as u from './urx';
 import { totalListHeightSystem } from './totalListHeightSystem';
+import { domIOSystem } from './domIOSystem';
 export var alignToBottomSystem = u.system(function (_a) {
     var _b = __read(_a, 2), viewportHeight = _b[0].viewportHeight, totalListHeight = _b[1].totalListHeight;
     var alignToBottom = u.statefulStream(false);
@@ -11,6 +11,6 @@ export var alignToBottomSystem = u.system(function (_a) {
     }), u.map(function (_a) {
         var _b = __read(_a, 3), viewportHeight = _b[1], totalListHeight = _b[2];
         return Math.max(0, viewportHeight - totalListHeight);
-    }), u.distinctUntilChanged()), 0);
+    }), u.throttleTime(0), u.distinctUntilChanged()), 0);
     return { alignToBottom: alignToBottom, paddingTopAddition: paddingTopAddition };
 }, u.tup(domIOSystem, totalListHeightSystem), { singleton: true });

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

@@ -2,7 +2,5 @@ export function tupleComparator(prev, current) {
     return !!(prev && prev[0] === current[0] && prev[1] === current[1]);
 }
 export function rangeComparator(prev, next) {
-    return !!(prev &&
-        prev.startIndex === next.startIndex &&
-        prev.endIndex === next.endIndex);
+    return !!(prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex);
 }