@ringcentral/juno 2.4.0 → 2.5.0-beta.0

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

@@ -2,18 +2,18 @@
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+/* eslint-disable no-console */
 var React = tslib_1.__importStar(require("react"));
 var react_1 = require("react");
-/* eslint-disable no-console */
 var react_urx_1 = require("@virtuoso.dev/react-urx");
 var urx_1 = require("@virtuoso.dev/urx");
-var foundation_1 = require("../../../foundation");
 var useChangedChildSizes_1 = tslib_1.__importDefault(require("./hooks/useChangedChildSizes"));
 var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./hooks/useIsomorphicLayoutEffect"));
 var useScrollTop_1 = tslib_1.__importDefault(require("./hooks/useScrollTop"));
 var useSize_1 = tslib_1.__importDefault(require("./hooks/useSize"));
 var useWindowViewportRect_1 = tslib_1.__importDefault(require("./hooks/useWindowViewportRect"));
 var listSystem_1 = require("./listSystem");
+var correctItemSize_1 = require("./utils/correctItemSize");
 var positionStickyCssValue_1 = require("./utils/positionStickyCssValue");
 function identity(value) {
     return value;
@@ -21,6 +21,7 @@ function identity(value) {
 exports.identity = identity;
 var listComponentPropsSystem = urx_1.system(function () {
     var itemContent = urx_1.statefulStream(function (index) { return "Item " + index; });
+    var context = urx_1.statefulStream(null);
     var groupContent = urx_1.statefulStream(function (index) { return "Group " + index; });
     var components = urx_1.statefulStream({});
     var computeItemKey = urx_1.statefulStream(identity);
@@ -31,6 +32,7 @@ var listComponentPropsSystem = urx_1.system(function () {
         return urx_1.statefulStreamFromEmitter(urx_1.pipe(components, urx_1.map(function (components) { return components[propName]; }), urx_1.distinctUntilChanged()), defaultValue);
     };
     return {
+        context: context,
         itemContent: itemContent,
         groupContent: groupContent,
         components: components,
@@ -119,17 +121,30 @@ var DefaultScrollSeekPlaceholder = function (_a) {
     var height = _a.height;
     return (React.createElement("div", { style: { height: height } }));
 };
-var GROUP_STYLE = { position: positionStickyCssValue_1.positionStickyCssValue(), zIndex: 1 };
+var GROUP_STYLE = {
+    position: positionStickyCssValue_1.positionStickyCssValue(),
+    zIndex: 1,
+    overflowAnchor: 'none',
+};
 exports.Items = React.memo(function VirtuosoItems(_a) {
     var _b = _a.showTopList, showTopList = _b === void 0 ? false : _b;
     var listState = exports.useEmitterValue('listState');
     var deviation = exports.useEmitterValue('deviation');
     var sizeRanges = exports.usePublisher('sizeRanges');
+    var useWindowScroll = exports.useEmitterValue('useWindowScroll');
+    var customScrollParent = exports.useEmitterValue('customScrollParent');
+    var windowScrollContainerStateCallback = exports.usePublisher('windowScrollContainerState');
+    var _scrollContainerStateCallback = exports.usePublisher('scrollContainerState');
+    var scrollContainerStateCallback = customScrollParent || useWindowScroll
+        ? windowScrollContainerStateCallback
+        : _scrollContainerStateCallback;
     var itemContent = exports.useEmitterValue('itemContent');
+    var context = exports.useEmitterValue('context');
     var groupContent = exports.useEmitterValue('groupContent');
     var trackItemSizes = exports.useEmitterValue('trackItemSizes');
     var itemSize = exports.useEmitterValue('itemSize');
-    var ref = useChangedChildSizes_1.default(sizeRanges, itemSize, trackItemSizes);
+    var log = exports.useEmitterValue('log');
+    var ref = useChangedChildSizes_1.default(sizeRanges, itemSize, trackItemSizes, showTopList ? urx_1.noop : scrollContainerStateCallback, log, customScrollParent);
     var EmptyPlaceholder = exports.useEmitterValue('EmptyPlaceholder');
     var ScrollSeekPlaceholder = exports.useEmitterValue('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder;
     var ListComponent = exports.useEmitterValue('ListComponent');
@@ -139,8 +154,8 @@ exports.Items = React.memo(function VirtuosoItems(_a) {
     var isSeeking = exports.useEmitterValue('isSeeking');
     var hasGroups = exports.useEmitterValue('groupIndices').length > 0;
     var paddingTopAddition = exports.useEmitterValue('paddingTopAddition');
-    var scrolledToInitialItem = exports.useEmitterValue('scrolledToInitialItem');
-    // const calculatedHeight = listState.offsetBottom + listState.bottom
+    var firstItemIndex = exports.useEmitterValue('firstItemIndex');
+    var statefulTotalCount = exports.useEmitterValue('statefulTotalCount');
     var containerStyle = showTopList
         ? {}
         : {
@@ -149,40 +164,23 @@ exports.Items = React.memo(function VirtuosoItems(_a) {
             paddingBottom: listState.offsetBottom,
             marginTop: deviation,
         };
-    if (!showTopList &&
-        listState.items.length === 0 &&
-        EmptyPlaceholder &&
-        scrolledToInitialItem) {
-        return react_1.createElement(EmptyPlaceholder);
+    if (!showTopList && statefulTotalCount === 0 && EmptyPlaceholder) {
+        return react_1.createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
     }
-    return react_1.createElement(ListComponent, { ref: ref, style: containerStyle }, (showTopList ? listState.topItems : listState.items).map(function (item) {
+    return react_1.createElement(ListComponent, tslib_1.__assign(tslib_1.__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 react_1.createElement(ScrollSeekPlaceholder, {
-                key: key,
-                index: item.index,
-                height: item.size,
-            });
+            return react_1.createElement(ScrollSeekPlaceholder, tslib_1.__assign(tslib_1.__assign(tslib_1.__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 react_1.createElement(GroupComponent, {
-                key: key,
-                'data-index': index,
-                'data-known-size': item.size,
-                'data-item-index': item.index,
-                style: GROUP_STYLE,
-            }, groupContent(item.index));
+            return react_1.createElement(GroupComponent, tslib_1.__assign(tslib_1.__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_1.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 react_1.createElement(ItemComponent, tslib_1.__assign(tslib_1.__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));
     }));
 });
 exports.scrollerStyle = {
@@ -203,58 +201,73 @@ var topItemListStyle = {
     position: positionStickyCssValue_1.positionStickyCssValue(),
     top: 0,
 };
+function contextPropIfNotDomElement(element, context) {
+    if (typeof element === 'string') {
+        return undefined;
+    }
+    return { context: context };
+}
+exports.contextPropIfNotDomElement = contextPropIfNotDomElement;
 var Header = React.memo(function VirtuosoHeader() {
     var Header = exports.useEmitterValue('HeaderComponent');
     var headerHeight = exports.usePublisher('headerHeight');
     var headerFooterTag = exports.useEmitterValue('headerFooterTag');
-    var ref = useSize_1.default(function (el) { return headerHeight(el.offsetHeight); });
+    var ref = useSize_1.default(function (el) { return headerHeight(correctItemSize_1.correctItemSize(el, 'height')); });
+    var context = exports.useEmitterValue('context');
     return Header
-        ? react_1.createElement(headerFooterTag, { ref: ref }, react_1.createElement(Header))
+        ? react_1.createElement(headerFooterTag, { ref: ref }, react_1.createElement(Header, contextPropIfNotDomElement(Header, context)))
         : null;
 });
 var Footer = React.memo(function VirtuosoFooter() {
     var Footer = exports.useEmitterValue('FooterComponent');
     var footerHeight = exports.usePublisher('footerHeight');
     var headerFooterTag = exports.useEmitterValue('headerFooterTag');
-    var ref = useSize_1.default(function (el) { return footerHeight(el.offsetHeight); });
+    var ref = useSize_1.default(function (el) { return footerHeight(correctItemSize_1.correctItemSize(el, 'height')); });
+    var context = exports.useEmitterValue('context');
     return Footer
-        ? react_1.createElement(headerFooterTag, { ref: ref }, react_1.createElement(Footer))
+        ? react_1.createElement(headerFooterTag, { ref: ref }, react_1.createElement(Footer, contextPropIfNotDomElement(Footer, context)))
         : null;
 });
 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 = tslib_1.__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_1.default(scrollTopCallback, smoothScrollTargetReached, ScrollerComponent, scrollerRefCallback, customWindow), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
+        var context = useEmitterValue('context');
+        var _b = useScrollTop_1.default(scrollContainerStateCallback, smoothScrollTargetReached, ScrollerComponent, scrollerRefCallback), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
         useEmitter('scrollTo', scrollToCallback);
         useEmitter('scrollBy', scrollByCallback);
-        return react_1.createElement(ScrollerComponent, tslib_1.__assign({ ref: scrollerRef, style: tslib_1.__assign(tslib_1.__assign({}, exports.scrollerStyle), style), tabIndex: 0 }, props), children);
+        return react_1.createElement(ScrollerComponent, tslib_1.__assign(tslib_1.__assign({ ref: scrollerRef, style: tslib_1.__assign(tslib_1.__assign({}, exports.scrollerStyle), style), 'data-test-id': 'virtuoso-scroller', 'data-virtuoso-scroller': true, tabIndex: 0 }, props), contextPropIfNotDomElement(ScrollerComponent, context)), children);
     });
     return Scroller;
 }
 exports.buildScroller = buildScroller;
 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 = tslib_1.__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_1.default(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_1.default(scrollContainerStateCallback, smoothScrollTargetReached, ScrollerComponent, urx_1.noop, customScrollParent), scrollerRef = _b.scrollerRef, scrollByCallback = _b.scrollByCallback, scrollToCallback = _b.scrollToCallback;
         useIsomorphicLayoutEffect_1.default(function () {
-            scrollerRef.current = window;
+            scrollerRef.current = customScrollParent ? customScrollParent : window;
             return function () {
                 scrollerRef.current = null;
             };
-        }, [scrollerRef]);
+        }, [scrollerRef, customScrollParent]);
         useEmitter('windowScrollTo', scrollToCallback);
         useEmitter('scrollBy', scrollByCallback);
-        return react_1.createElement(ScrollerComponent, tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({ position: 'relative' }, style), (totalListHeight !== 0 ? { height: totalListHeight } : {})) }, props), children);
+        return react_1.createElement(ScrollerComponent, tslib_1.__assign(tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({ position: 'relative' }, style), (totalListHeight !== 0
+                ? { height: totalListHeight + deviation }
+                : {})), 'data-virtuoso-scroller': true }, props), contextPropIfNotDomElement(ScrollerComponent, context)), children);
     });
     return Scroller;
 }
@@ -262,31 +275,30 @@ exports.buildWindowScroller = buildWindowScroller;
 var Viewport = function (_a) {
     var children = _a.children;
     var viewportHeight = exports.usePublisher('viewportHeight');
-    var viewportRef = useSize_1.default(urx_1.compose(viewportHeight, urx_1.prop('offsetHeight')));
-    return (React.createElement("div", { style: exports.viewportStyle, ref: viewportRef }, children));
+    var viewportRef = useSize_1.default(urx_1.compose(viewportHeight, function (el) { return correctItemSize_1.correctItemSize(el, 'height'); }));
+    return (React.createElement("div", { style: exports.viewportStyle, ref: viewportRef, "data-viewport-type": "element" }, children));
 };
 var WindowViewport = function (_a) {
     var children = _a.children;
     var windowViewportRect = exports.usePublisher('windowViewportRect');
-    var externalWindow = foundation_1.useRcPortalWindowContext().externalWindow;
-    var viewportRef = useWindowViewportRect_1.default(windowViewportRect, externalWindow);
-    return (React.createElement("div", { ref: viewportRef, style: exports.viewportStyle }, children));
+    var customScrollParent = exports.useEmitterValue('customScrollParent');
+    var viewportRef = useWindowViewportRect_1.default(windowViewportRect, customScrollParent);
+    return (React.createElement("div", { ref: viewportRef, style: exports.viewportStyle, "data-viewport-type": "window" }, children));
 };
 var TopItemListContainer = function (_a) {
     var children = _a.children;
     var TopItemList = exports.useEmitterValue('TopItemListComponent');
     var headerHeight = exports.useEmitterValue('headerHeight');
     var style = tslib_1.__assign(tslib_1.__assign({}, topItemListStyle), { marginTop: headerHeight + "px" });
-    return react_1.createElement(TopItemList || 'div', { style: style }, children);
+    var context = exports.useEmitterValue('context');
+    return react_1.createElement(TopItemList || 'div', { style: style, context: context }, children);
 };
 var ListRoot = React.memo(function VirtuosoRoot(props) {
     var useWindowScroll = exports.useEmitterValue('useWindowScroll');
     var showTopList = exports.useEmitterValue('topItemsIndexes').length > 0;
-    var externalWindow = foundation_1.useRcPortalWindowContext().externalWindow;
-    var TheScroller = React.useMemo(function () {
-        return (useWindowScroll ? createWindowScroller : createScroller)(externalWindow || window);
-    }, [externalWindow, useWindowScroll]);
-    var TheViewport = useWindowScroll ? WindowViewport : Viewport;
+    var customScrollParent = exports.useEmitterValue('customScrollParent');
+    var TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller;
+    var TheViewport = customScrollParent || useWindowScroll ? WindowViewport : Viewport;
     return (React.createElement(TheScroller, tslib_1.__assign({}, props),
         React.createElement(TheViewport, null,
             React.createElement(Header, null),
@@ -298,16 +310,19 @@ var ListRoot = React.memo(function VirtuosoRoot(props) {
 exports.List = (_a = react_urx_1.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',
@@ -319,7 +334,9 @@ exports.List = (_a = react_urx_1.systemToComponent(combinedSystem, {
         initialScrollTop: 'initialScrollTop',
         alignToBottom: 'alignToBottom',
         useWindowScroll: 'useWindowScroll',
+        customScrollParent: 'customScrollParent',
         scrollerRef: 'scrollerRef',
+        logLevel: 'logLevel',
         // deprecated
         item: 'item',
         group: 'group',
@@ -340,6 +357,7 @@ exports.List = (_a = react_urx_1.systemToComponent(combinedSystem, {
     },
     methods: {
         scrollToIndex: 'scrollToIndex',
+        scrollIntoView: 'scrollIntoView',
         scrollTo: 'scrollTo',
         scrollBy: 'scrollBy',
         adjustForPrependedItems: 'adjustForPrependedItems',
@@ -356,14 +374,9 @@ exports.List = (_a = react_urx_1.systemToComponent(combinedSystem, {
         groupIndices: 'groupIndices',
     },
 }, ListRoot), _a.Component), exports.usePublisher = _a.usePublisher, exports.useEmitterValue = _a.useEmitterValue, exports.useEmitter = _a.useEmitter;
-var createScroller = function (window) {
-    return buildScroller({ usePublisher: exports.usePublisher, useEmitterValue: exports.useEmitterValue, useEmitter: exports.useEmitter, window: window });
-};
-var createWindowScroller = function (window) {
-    return buildWindowScroller({
-        usePublisher: exports.usePublisher,
-        useEmitterValue: exports.useEmitterValue,
-        useEmitter: exports.useEmitter,
-        window: window,
-    });
-};
+var Scroller = buildScroller({ usePublisher: exports.usePublisher, useEmitterValue: exports.useEmitterValue, useEmitter: exports.useEmitter });
+var WindowScroller = buildWindowScroller({
+    usePublisher: exports.usePublisher,
+    useEmitterValue: exports.useEmitterValue,
+    useEmitter: exports.useEmitter,
+});