@ringcentral/juno 2.4.0 → 2.5.0-beta.0

package/components/Virtuoso/react-virtuoso/hooks/useScrollTop.js

@@ -3,23 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = require("react");
 var u = tslib_1.__importStar(require("@virtuoso.dev/urx"));
-function useScrollTop(scrollTopCallback, smoothScrollTargetReached, scrollerElement, scrollerRefCallback, customWindow) {
+var correctItemSize_1 = require("../utils/correctItemSize");
+var foundation_1 = require("../../../../foundation");
+function approximatelyEqual(num1, num2) {
+    return Math.abs(num1 - num2) < 1.01;
+}
+function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, scrollerElement, scrollerRefCallback, customScrollParent) {
     if (scrollerRefCallback === void 0) { scrollerRefCallback = u.noop; }
-    if (customWindow === void 0) { customWindow = window; }
     var scrollerRef = react_1.useRef(null);
     var scrollTopTarget = react_1.useRef(null);
     var timeoutRef = react_1.useRef(null);
-    var customDocument = customWindow.document;
+    var _a = foundation_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
     var handler = react_1.useCallback(function (ev) {
         var el = ev.target;
-        var scrollTop = el === customWindow || el === customDocument
-            ? customWindow.pageYOffset || customDocument.documentElement.scrollTop
+        var scrollTop = el === externalWindow ||
+            el === externalWindow.document
+            ? externalWindow.pageYOffset ||
+                externalWindow.document.documentElement.scrollTop
             : el.scrollTop;
-        scrollTopCallback(Math.max(scrollTop, 0));
+        var scrollHeight = el === externalWindow
+            ? externalWindow.document.documentElement.scrollHeight
+            : el.scrollHeight;
+        scrollContainerStateCallback([Math.max(scrollTop, 0), scrollHeight]);
         if (scrollTopTarget.current !== null) {
             if (scrollTop === scrollTopTarget.current ||
                 scrollTop <= 0 ||
-                scrollTop === el.scrollHeight - el.offsetHeight) {
+                scrollTop === el.scrollHeight - correctItemSize_1.correctItemSize(el, 'height')) {
                 scrollTopTarget.current = null;
                 smoothScrollTargetReached(true);
                 if (timeoutRef.current) {
@@ -28,54 +37,59 @@ function useScrollTop(scrollTopCallback, smoothScrollTargetReached, scrollerElem
                 }
             }
         }
-    }, [
-        customDocument,
-        customWindow,
-        scrollTopCallback,
-        smoothScrollTargetReached,
-    ]);
+    }, [externalWindow, scrollContainerStateCallback, smoothScrollTargetReached]);
     react_1.useEffect(function () {
-        var localRef = scrollerRef.current;
-        scrollerRefCallback(scrollerRef.current);
+        var localRef = customScrollParent
+            ? customScrollParent
+            : scrollerRef.current;
+        scrollerRefCallback(customScrollParent ? customScrollParent : scrollerRef.current);
         handler({ target: localRef });
         localRef.addEventListener('scroll', handler, { passive: true });
         return function () {
             scrollerRefCallback(null);
             localRef.removeEventListener('scroll', handler);
         };
-    }, [scrollerRef, handler, scrollerElement, scrollerRefCallback]);
+    }, [
+        scrollerRef,
+        handler,
+        scrollerElement,
+        scrollerRefCallback,
+        customScrollParent,
+    ]);
     function scrollToCallback(location) {
         var scrollerElement = scrollerRef.current;
-        if (!scrollerElement) {
+        if (!scrollerElement ||
+            ('offsetHeight' in scrollerElement && scrollerElement.offsetHeight === 0)) {
             return;
         }
         var isSmooth = location.behavior === 'smooth';
         var offsetHeight;
         var scrollHeight;
         var scrollTop;
-        if (scrollerElement === customWindow) {
+        if (scrollerElement === externalWindow) {
             // this is not a mistake
-            scrollHeight = Math.max(customDocument.documentElement.offsetHeight, customDocument.documentElement.scrollHeight);
-            offsetHeight = customWindow.innerHeight;
-            scrollTop = customDocument.documentElement.scrollTop;
+            scrollHeight = Math.max(correctItemSize_1.correctItemSize(externalWindow.document.documentElement, 'height'), externalWindow.document.documentElement.scrollHeight);
+            offsetHeight = externalWindow.window.innerHeight;
+            scrollTop = externalWindow.document.documentElement.scrollTop;
         }
         else {
             scrollHeight = scrollerElement.scrollHeight;
-            offsetHeight = scrollerElement.offsetHeight;
+            offsetHeight = correctItemSize_1.correctItemSize(scrollerElement, 'height');
             scrollTop = scrollerElement.scrollTop;
         }
+        var maxScrollTop = scrollHeight - offsetHeight;
+        location.top = Math.ceil(Math.max(Math.min(maxScrollTop, location.top), 0));
         // avoid system hanging because the DOM never called back
         // with the scrollTop
         // scroller is already at this location
-        if (offsetHeight === scrollHeight || location.top === scrollTop) {
-            scrollTopCallback(scrollTop);
+        if (approximatelyEqual(offsetHeight, scrollHeight) ||
+            location.top === scrollTop) {
+            scrollContainerStateCallback([scrollTop, scrollHeight]);
             if (isSmooth) {
                 smoothScrollTargetReached(true);
             }
             return;
         }
-        var maxScrollTop = scrollHeight - offsetHeight;
-        location.top = Math.max(Math.min(maxScrollTop, location.top), 0);
         if (isSmooth) {
             scrollTopTarget.current = location.top;
             if (timeoutRef.current) {

package/components/Virtuoso/react-virtuoso/hooks/useSize.d.ts

@@ -3,6 +3,6 @@
 export declare type CallbackRefParam = HTMLElement | null;
 export declare function useSizeWithElRef(callback: (e: HTMLElement) => void, enabled?: boolean): {
     ref: import("react").MutableRefObject<HTMLElement | null>;
-    callbackRef: (elRef: HTMLElement | null) => void;
+    callbackRef: (_el: HTMLElement | null) => void;
 };
-export default function useSize(callback: (e: HTMLElement) => void, enabled?: boolean): (elRef: HTMLElement | null) => void;
+export default function useSize(callback: (e: HTMLElement) => void, enabled?: boolean): (_el: HTMLElement | null) => void;

package/components/Virtuoso/react-virtuoso/hooks/useSize.js

@@ -4,36 +4,34 @@ var react_1 = require("react");
 var foundation_1 = require("../../../../foundation");
 function useSizeWithElRef(callback, enabled) {
     if (enabled === void 0) { enabled = true; }
-    var externalWindow = foundation_1.useRcPortalWindowContext().externalWindow;
     var ref = react_1.useRef(null);
-    var observer = foundation_1.getResizeObserver(function (entries) {
-        var element = entries[0].target;
-        // Revert the RAF below - it causes a blink in the upward scrolling fix
-        // See e2e/chat example
-        // Avoid Resize loop limit exceeded error
-        // https://github.com/edunad/react-virtuoso/commit/581d4558f2994adea375291b76fe59605556c08f
-        // requestAnimationFrame(() => {
-        //
-        // if display: none, the element won't have an offsetParent
-        // measuring it at this mode is not going to work
-        // https://stackoverflow.com/a/21696585/1009797
-        if (element.offsetParent !== null) {
-            callback(element);
-        }
-        // })
-    }, externalWindow);
-    var callbackRef = function (elRef) {
-        if (elRef && enabled) {
-            observer.observe(elRef);
-            ref.current = elRef;
-        }
-        else {
-            if (ref.current) {
-                observer.unobserve(ref.current);
-            }
-            ref.current = null;
-        }
+    var _a = foundation_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var callbackRef = function (_el) {
+        // eslint-disable-next-line no-void
+        void 0;
     };
+    // TODO: fix after upgrade ts
+    if (typeof externalWindow['ResizeObserver'] !== 'undefined') {
+        var observer_1 = new externalWindow['ResizeObserver'](function (entries) {
+            var element = entries[0].target;
+            if (element.offsetParent !== null) {
+                callback(element);
+            }
+        });
+        callbackRef = function (elRef) {
+            if (elRef && enabled) {
+                observer_1.observe(elRef);
+                ref.current = elRef;
+            }
+            else {
+                if (ref.current) {
+                    observer_1.unobserve(ref.current);
+                }
+                ref.current = null;
+            }
+        };
+    }
     return { ref: ref, callbackRef: callbackRef };
 }
 exports.useSizeWithElRef = useSizeWithElRef;

package/components/Virtuoso/react-virtuoso/hooks/useWindowViewportRect.d.ts

@@ -1,2 +1,2 @@
 import { WindowViewportInfo } from '../interfaces';
-export default function useWindowViewportRectRef(callback: (info: WindowViewportInfo) => void, customWindow?: Window): (elRef: HTMLElement | null) => void;
+export default function useWindowViewportRectRef(callback: (info: WindowViewportInfo) => void, customScrollParent?: HTMLElement): (_el: HTMLElement | null) => void;

package/components/Virtuoso/react-virtuoso/hooks/useWindowViewportRect.js

@@ -1,37 +1,57 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
+var foundation_1 = require("../../../../foundation");
 var useSize_1 = require("./useSize");
-function useWindowViewportRectRef(callback, customWindow) {
-    if (customWindow === void 0) { customWindow = window; }
+function useWindowViewportRectRef(callback, customScrollParent) {
     var viewportInfo = react_1.useRef(null);
+    var _a = foundation_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
     var calculateInfo = react_1.useCallback(function (element) {
         if (element === null) {
             return;
         }
         var rect = element.getBoundingClientRect();
-        var visibleHeight = customWindow.innerHeight - Math.max(0, rect.top);
         var visibleWidth = rect.width;
-        var offsetTop = rect.top + customWindow.pageYOffset;
+        var visibleHeight;
+        var offsetTop;
+        if (customScrollParent) {
+            var customScrollParentRect = customScrollParent.getBoundingClientRect();
+            var deltaTop = rect.top - customScrollParentRect.top;
+            visibleHeight = customScrollParentRect.height - Math.max(0, deltaTop);
+            offsetTop = deltaTop + customScrollParent.scrollTop;
+        }
+        else {
+            visibleHeight = externalWindow.innerHeight - Math.max(0, rect.top);
+            offsetTop = rect.top + externalWindow.pageYOffset;
+        }
         viewportInfo.current = {
             offsetTop: offsetTop,
             visibleHeight: visibleHeight,
             visibleWidth: visibleWidth,
         };
         callback(viewportInfo.current);
-    }, [callback, customWindow]);
-    var _a = useSize_1.useSizeWithElRef(calculateInfo), callbackRef = _a.callbackRef, ref = _a.ref;
-    var windowEH = react_1.useCallback(function () {
+    }, [callback, customScrollParent, externalWindow]);
+    var _b = useSize_1.useSizeWithElRef(calculateInfo), callbackRef = _b.callbackRef, ref = _b.ref;
+    var scrollAndResizeEventHandler = react_1.useCallback(function () {
         calculateInfo(ref.current);
     }, [calculateInfo, ref]);
     react_1.useEffect(function () {
-        customWindow.addEventListener('scroll', windowEH);
-        customWindow.addEventListener('resize', windowEH);
+        if (customScrollParent) {
+            customScrollParent.addEventListener('scroll', scrollAndResizeEventHandler);
+            var observer_1 = new externalWindow['ResizeObserver'](scrollAndResizeEventHandler);
+            observer_1.observe(customScrollParent);
+            return function () {
+                customScrollParent.removeEventListener('scroll', scrollAndResizeEventHandler);
+                observer_1.unobserve(customScrollParent);
+            };
+        }
+        externalWindow.addEventListener('scroll', scrollAndResizeEventHandler);
+        externalWindow.addEventListener('resize', scrollAndResizeEventHandler);
         return function () {
-            customWindow.removeEventListener('scroll', windowEH);
-            customWindow.removeEventListener('resize', windowEH);
+            externalWindow.removeEventListener('scroll', scrollAndResizeEventHandler);
+            externalWindow.removeEventListener('resize', scrollAndResizeEventHandler);
         };
-    }, [customWindow, windowEH]);
+    }, [scrollAndResizeEventHandler, customScrollParent, externalWindow]);
     return callbackRef;
 }
 exports.default = useWindowViewportRectRef;

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

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './interfaces';
+export { LogLevel } from './loggerSystem';

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

@@ -2,3 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./components"), exports);
+var loggerSystem_1 = require("./loggerSystem");
+exports.LogLevel = loggerSystem_1.LogLevel;