@ringcentral/juno 2.4.0 → 2.5.0-beta.0

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

@@ -1,6 +1,7 @@
 "use strict";
 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");
 var react_urx_1 = require("@virtuoso.dev/react-urx");
@@ -12,6 +13,7 @@ var List_1 = require("./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(List_1.identity);
@@ -21,6 +23,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,
@@ -47,7 +50,6 @@ var combinedSystem = u.system(function (_a) {
         u.connect(u.pipe(stream, u.withLatestFrom(gridComponentPropsSystem.components), u.map(function (_a) {
             var _b;
             var _c = tslib_1.__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 tslib_1.__assign(tslib_1.__assign({}, components), (_b = {}, _b[componentName] = comp, _b));
@@ -55,7 +57,6 @@ var combinedSystem = u.system(function (_a) {
     }
     u.subscribe(deprecatedProps.scrollSeek, function (_a) {
         var placeholder = _a.placeholder, config = tslib_1.__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, tslib_1.__assign(tslib_1.__assign({}, u.getValue(gridComponentPropsSystem.components)), { 
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -74,58 +75,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_1.default(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 react_1.createElement(ListComponent, {
-        ref: listRef,
-        className: listClassName,
-        style: {
+    return react_1.createElement(ListComponent, tslib_1.__assign(tslib_1.__assign({ ref: listRef, className: listClassName }, List_1.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
-            ? react_1.createElement(ScrollSeekPlaceholder, {
-                key: key,
-                style: { height: gridState.itemHeight, width: gridState.itemWidth },
-            })
-            : react_1.createElement(ItemComponent, { className: itemClassName, 'data-index': item.index, key: key }, itemContent(item.index));
+            ? react_1.createElement(ScrollSeekPlaceholder, tslib_1.__assign(tslib_1.__assign({ key: key }, List_1.contextPropIfNotDomElement(ScrollSeekPlaceholder, context)), { index: item.index, height: gridState.itemHeight, width: gridState.itemWidth }))
+            : react_1.createElement(ItemComponent, tslib_1.__assign(tslib_1.__assign({}, List_1.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_1.default(function (el) {
-        viewportDimensions({
-            width: el.offsetWidth,
-            height: el.offsetHeight,
-        });
+        viewportDimensions(el.getBoundingClientRect());
     });
     return (React.createElement("div", { style: List_1.viewportStyle, ref: viewportRef }, children));
 };
 var WindowViewport = function (_a) {
     var children = _a.children;
     var windowViewportRect = usePublisher('windowViewportRect');
-    var viewportRef = useWindowViewportRect_1.default(windowViewportRect);
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var viewportRef = useWindowViewportRect_1.default(windowViewportRect, customScrollParent);
     return (React.createElement("div", { ref: viewportRef, style: List_1.viewportStyle }, children));
 };
 var GridRoot = React.memo(function GridRoot(_a) {
     var props = tslib_1.__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, tslib_1.__assign({}, props),
         React.createElement(TheViewport, null,
             React.createElement(GridItems, null))));
@@ -142,6 +136,7 @@ var _a = react_urx_1.systemToComponent(combinedSystem, {
         listClassName: 'listClassName',
         itemClassName: 'itemClassName',
         useWindowScroll: 'useWindowScroll',
+        customScrollParent: 'customScrollParent',
         scrollerRef: 'scrollerRef',
         // deprecated
         item: 'item',