@ringcentral/juno 2.40.1 → 2.41.0

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

@@ -1,33 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var foundation_1 = require("../../../../foundation");
+var react_1 = tslib_1.__importDefault(require("react"));
 var loggerSystem_1 = require("../loggerSystem");
-var useSize_1 = tslib_1.__importDefault(require("./useSize"));
-function useChangedListContentsSizes(callback, itemSize, enabled, scrollContainerStateCallback, log, customScrollParent) {
-    var _a = foundation_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
-    return useSize_1.default(function (el) {
+var useSize_1 = require("./useSize");
+var useRcPortalWindowContext_1 = require("./useRcPortalWindowContext");
+function useChangedListContentsSizes(callback, itemSize, enabled, scrollContainerStateCallback, log, gap, customScrollParent) {
+    var _a = useRcPortalWindowContext_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
+    var memoedCallback = react_1.default.useCallback(function (el) {
         var ranges = getChangedChildSizes(el.children, itemSize, 'offsetHeight', log);
         var scrollableElement = el.parentElement;
         while (!scrollableElement.dataset['virtuosoScroller']) {
             scrollableElement = scrollableElement.parentElement;
         }
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        var windowScrolling = scrollableElement.lastElementChild.dataset['viewportType'] === 'window';
         var scrollTop = customScrollParent
             ? customScrollParent.scrollTop
-            : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                scrollableElement.firstElementChild.dataset['viewportType'] === 'window'
-                    ? externalWindow.pageYOffset ||
-                        externalWindow.document.documentElement.scrollTop
-                    : scrollableElement.scrollTop;
+            : windowScrolling
+                ? externalWindow.pageYOffset || externalWindow.document.documentElement.scrollTop
+                : scrollableElement.scrollTop;
+        var scrollHeight = customScrollParent
+            ? customScrollParent.scrollHeight
+            : windowScrolling
+                ? externalWindow.document.documentElement.scrollHeight
+                : scrollableElement.scrollHeight;
+        var viewportHeight = customScrollParent
+            ? customScrollParent.offsetHeight
+            : windowScrolling
+                ? externalWindow.innerHeight
+                : scrollableElement.offsetHeight;
         scrollContainerStateCallback({
             scrollTop: Math.max(scrollTop, 0),
-            scrollHeight: (customScrollParent !== null && customScrollParent !== void 0 ? customScrollParent : scrollableElement).scrollHeight,
-            viewportHeight: (customScrollParent !== null && customScrollParent !== void 0 ? customScrollParent : scrollableElement).offsetHeight,
+            scrollHeight: scrollHeight,
+            viewportHeight: viewportHeight,
         });
+        gap === null || gap === void 0 ? void 0 : gap(resolveGapValue('row-gap', getComputedStyle(el).rowGap, log));
         if (ranges !== null) {
             callback(ranges);
         }
-    }, enabled);
+    }, [callback, itemSize, log, gap, customScrollParent, scrollContainerStateCallback, externalWindow]);
+    return useSize_1.useSizeWithElRef(memoedCallback, enabled);
 }
 exports.default = useChangedListContentsSizes;
 function getChangedChildSizes(children, itemSize, field, log) {
@@ -41,7 +54,6 @@ function getChangedChildSizes(children, itemSize, field, log) {
         if (!child || child.dataset.index === undefined) {
             continue;
         }
-        // eslint-disable-next-line radix
         var index = parseInt(child.dataset.index);
         var knownSize = parseFloat(child.dataset.knownSize);
         var size = itemSize(child, field);
@@ -52,9 +64,7 @@ function getChangedChildSizes(children, itemSize, field, log) {
             continue;
         }
         var lastResult = results[results.length - 1];
-        if (results.length === 0 ||
-            lastResult.size !== size ||
-            lastResult.endIndex !== index - 1) {
+        if (results.length === 0 || lastResult.size !== size || lastResult.endIndex !== index - 1) {
             results.push({ startIndex: index, endIndex: index, size: size });
         }
         else {
@@ -63,3 +73,12 @@ function getChangedChildSizes(children, itemSize, field, log) {
     }
     return results;
 }
+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, loggerSystem_1.LogLevel.WARN);
+    }
+    if (value === 'normal') {
+        return 0;
+    }
+    return parseInt(value !== null && value !== void 0 ? value : '0', 10);
+}

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

@@ -1,3 +1,3 @@
-import { useEffect } from 'react';
-declare const useIsomorphicLayoutEffect: typeof useEffect;
+import React from 'react';
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
 export default useIsomorphicLayoutEffect;

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var useIsomorphicLayoutEffect = typeof document !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useIsomorphicLayoutEffect = typeof document !== 'undefined' ? react_1.default.useLayoutEffect : react_1.default.useEffect;
 exports.default = useIsomorphicLayoutEffect;

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

@@ -0,0 +1,2 @@
+import { RcPortalWindowContext, useRcPortalWindowContext } from "../../../../foundation";
+export { RcPortalWindowContext, useRcPortalWindowContext };

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var foundation_1 = require("../../../../foundation");
+exports.RcPortalWindowContext = foundation_1.RcPortalWindowContext;
+exports.useRcPortalWindowContext = foundation_1.useRcPortalWindowContext;

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-/// <reference types="styled-jsx" />
+import React from 'react';
 import { ScrollContainerState } from '../interfaces';
 export declare type ScrollerRef = Window | HTMLElement | null;
 export default function useScrollTop(scrollContainerStateCallback: (state: ScrollContainerState) => void, smoothScrollTargetReached: (yes: true) => void, scrollerElement: any, scrollerRefCallback?: (ref: ScrollerRef) => void, customScrollParent?: HTMLElement): {
-    scrollerRef: import("react").MutableRefObject<HTMLElement | Window | null>;
+    scrollerRef: React.MutableRefObject<HTMLElement | Window | null>;
     scrollByCallback: (location: ScrollToOptions) => void;
     scrollToCallback: (location: ScrollToOptions) => void;
 };

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

@@ -1,41 +1,40 @@
 "use strict";
 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"));
-var foundation_1 = require("../../../../foundation");
+var react_1 = tslib_1.__importDefault(require("react"));
+var u = tslib_1.__importStar(require("../urx"));
 var correctItemSize_1 = require("../utils/correctItemSize");
-function approximatelyEqual(num1, num2) {
-    return Math.abs(num1 - num2) < 1.01;
-}
+var react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+var approximatelyEqual_1 = require("../utils/approximatelyEqual");
+var useRcPortalWindowContext_1 = require("./useRcPortalWindowContext");
 function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, scrollerElement, scrollerRefCallback, customScrollParent) {
     if (scrollerRefCallback === void 0) { scrollerRefCallback = u.noop; }
-    var scrollerRef = react_1.useRef(null);
-    var scrollTopTarget = react_1.useRef(null);
-    var timeoutRef = react_1.useRef(null);
-    var _a = foundation_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
-    var handler = react_1.useCallback(function (ev) {
+    var scrollerRef = react_1.default.useRef(null);
+    var scrollTopTarget = react_1.default.useRef(null);
+    var timeoutRef = react_1.default.useRef(null);
+    var _a = useRcPortalWindowContext_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
+    var handler = react_1.default.useCallback(function (ev) {
         var el = ev.target;
-        var scrollTop = el === externalWindow ||
-            el === externalWindow.document
-            ? externalWindow.pageYOffset ||
-                externalWindow.document.documentElement.scrollTop
-            : el.scrollTop;
-        var scrollHeight = el === externalWindow
-            ? externalWindow.document.documentElement.scrollHeight
-            : el.scrollHeight;
-        var viewportHeight = el === externalWindow
-            ? externalWindow.innerHeight
-            : el.offsetHeight;
-        scrollContainerStateCallback({
-            scrollTop: Math.max(scrollTop, 0),
-            scrollHeight: scrollHeight,
-            viewportHeight: viewportHeight,
-        });
+        var windowScroll = el === externalWindow || el === externalWindow.document;
+        var scrollTop = windowScroll ? externalWindow.pageYOffset || externalWindow.document.documentElement.scrollTop : el.scrollTop;
+        var scrollHeight = windowScroll ? externalWindow.document.documentElement.scrollHeight : el.scrollHeight;
+        var viewportHeight = windowScroll ? externalWindow.innerHeight : el.offsetHeight;
+        var call = function () {
+            scrollContainerStateCallback({
+                scrollTop: Math.max(scrollTop, 0),
+                scrollHeight: scrollHeight,
+                viewportHeight: viewportHeight,
+            });
+        };
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (ev.suppressFlushSync) {
+            call();
+        }
+        else {
+            react_dom_1.default.flushSync(call);
+        }
         if (scrollTopTarget.current !== null) {
-            if (scrollTop === scrollTopTarget.current ||
-                scrollTop <= 0 ||
-                scrollTop === el.scrollHeight - correctItemSize_1.correctItemSize(el, 'height')) {
+            if (scrollTop === scrollTopTarget.current || scrollTop <= 0 || scrollTop === scrollHeight - viewportHeight) {
                 scrollTopTarget.current = null;
                 smoothScrollTargetReached(true);
                 if (timeoutRef.current) {
@@ -45,28 +44,19 @@ function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, s
             }
         }
     }, [externalWindow, scrollContainerStateCallback, smoothScrollTargetReached]);
-    react_1.useEffect(function () {
-        var localRef = customScrollParent
-            ? customScrollParent
-            : scrollerRef.current;
+    react_1.default.useEffect(function () {
+        var localRef = customScrollParent ? customScrollParent : scrollerRef.current;
         scrollerRefCallback(customScrollParent ? customScrollParent : scrollerRef.current);
-        handler({ target: localRef });
+        handler({ target: localRef, suppressFlushSync: true });
         localRef.addEventListener('scroll', handler, { passive: true });
         return function () {
             scrollerRefCallback(null);
             localRef.removeEventListener('scroll', handler);
         };
-    }, [
-        scrollerRef,
-        handler,
-        scrollerElement,
-        scrollerRefCallback,
-        customScrollParent,
-    ]);
+    }, [scrollerRef, handler, scrollerElement, scrollerRefCallback, customScrollParent]);
     function scrollToCallback(location) {
         var scrollerElement = scrollerRef.current;
-        if (!scrollerElement ||
-            ('offsetHeight' in scrollerElement && scrollerElement.offsetHeight === 0)) {
+        if (!scrollerElement || ('offsetHeight' in scrollerElement && scrollerElement.offsetHeight === 0)) {
             return;
         }
         var isSmooth = location.behavior === 'smooth';
@@ -89,13 +79,8 @@ function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, s
         // avoid system hanging because the DOM never called back
         // with the scrollTop
         // scroller is already at this location
-        if (approximatelyEqual(offsetHeight, scrollHeight) ||
-            location.top === scrollTop) {
-            scrollContainerStateCallback({
-                scrollTop: scrollTop,
-                scrollHeight: scrollHeight,
-                viewportHeight: offsetHeight,
-            });
+        if (approximatelyEqual_1.approximatelyEqual(offsetHeight, scrollHeight) || location.top === scrollTop) {
+            scrollContainerStateCallback({ scrollTop: scrollTop, scrollHeight: scrollHeight, viewportHeight: offsetHeight });
             if (isSmooth) {
                 smoothScrollTargetReached(true);
             }

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-/// <reference types="styled-jsx" />
+import React from 'react';
 export declare type CallbackRefParam = HTMLElement | null;
 export declare function useSizeWithElRef(callback: (e: HTMLElement) => void, enabled?: boolean): {
-    ref: import("react").MutableRefObject<HTMLElement | null>;
+    ref: React.MutableRefObject<HTMLElement | null>;
     callbackRef: (_el: 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

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var foundation_1 = require("../../../../foundation");
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useRcPortalWindowContext_1 = require("./useRcPortalWindowContext");
 function useSizeWithElRef(callback, enabled) {
     if (enabled === void 0) { enabled = true; }
-    var ref = react_1.useRef(null);
-    var _a = foundation_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var ref = react_1.default.useRef(null);
+    var _a = useRcPortalWindowContext_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
     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);
-            }
-        });
+        var observer_1 = react_1.default.useMemo(function () {
+            return new externalWindow['ResizeObserver'](function (entries) {
+                var element = entries[0].target;
+                if (element.offsetParent !== null) {
+                    callback(element);
+                }
+            });
+        }, [callback]);
         callbackRef = function (elRef) {
             if (elRef && enabled) {
                 observer_1.observe(elRef);

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var foundation_1 = require("../../../../foundation");
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
 var useSize_1 = require("./useSize");
+var useRcPortalWindowContext_1 = require("./useRcPortalWindowContext");
 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) {
+    var viewportInfo = react_1.default.useRef(null);
+    var _a = useRcPortalWindowContext_1.useRcPortalWindowContext().externalWindow, externalWindow = _a === void 0 ? window : _a;
+    var calculateInfo = react_1.default.useCallback(function (element) {
+        if (element === null || !element.offsetParent) {
             return;
         }
         var rect = element.getBoundingClientRect();
         var visibleWidth = rect.width;
-        // eslint-disable-next-line one-var
         var visibleHeight, offsetTop;
         if (customScrollParent) {
             var customScrollParentRect = customScrollParent.getBoundingClientRect();
@@ -32,10 +32,10 @@ function useWindowViewportRectRef(callback, customScrollParent) {
         callback(viewportInfo.current);
     }, [callback, customScrollParent, externalWindow]);
     var _b = useSize_1.useSizeWithElRef(calculateInfo), callbackRef = _b.callbackRef, ref = _b.ref;
-    var scrollAndResizeEventHandler = react_1.useCallback(function () {
+    var scrollAndResizeEventHandler = react_1.default.useCallback(function () {
         calculateInfo(ref.current);
     }, [calculateInfo, ref]);
-    react_1.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (customScrollParent) {
             customScrollParent.addEventListener('scroll', scrollAndResizeEventHandler);
             var observer_1 = new externalWindow['ResizeObserver'](scrollAndResizeEventHandler);
@@ -45,12 +45,14 @@ function useWindowViewportRectRef(callback, customScrollParent) {
                 observer_1.unobserve(customScrollParent);
             };
         }
-        externalWindow.addEventListener('scroll', scrollAndResizeEventHandler);
-        externalWindow.addEventListener('resize', scrollAndResizeEventHandler);
-        return function () {
-            externalWindow.removeEventListener('scroll', scrollAndResizeEventHandler);
-            externalWindow.removeEventListener('resize', scrollAndResizeEventHandler);
-        };
+        else {
+            externalWindow.addEventListener('scroll', scrollAndResizeEventHandler);
+            externalWindow.addEventListener('resize', scrollAndResizeEventHandler);
+            return function () {
+                externalWindow.removeEventListener('scroll', scrollAndResizeEventHandler);
+                externalWindow.removeEventListener('resize', scrollAndResizeEventHandler);
+            };
+        }
     }, [scrollAndResizeEventHandler, customScrollParent, externalWindow]);
     return callbackRef;
 }

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

@@ -1,3 +1,9 @@
-export * from './components';
+export { GroupedVirtuoso, Virtuoso } from './Virtuoso';
+export { VirtuosoGrid } from './VirtuosoGrid';
+export { TableVirtuoso } from './TableVirtuoso';
 export * from './interfaces';
+export * from './component-interfaces/Virtuoso';
+export * from './component-interfaces/TableVirtuoso';
+export * from './component-interfaces/VirtuosoGrid';
 export { LogLevel } from './loggerSystem';
+export * from './utils/context';

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

@@ -1,6 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./components"), exports);
+var Virtuoso_1 = require("./Virtuoso");
+exports.GroupedVirtuoso = Virtuoso_1.GroupedVirtuoso;
+exports.Virtuoso = Virtuoso_1.Virtuoso;
+var VirtuosoGrid_1 = require("./VirtuosoGrid");
+exports.VirtuosoGrid = VirtuosoGrid_1.VirtuosoGrid;
+var TableVirtuoso_1 = require("./TableVirtuoso");
+exports.TableVirtuoso = TableVirtuoso_1.TableVirtuoso;
 var loggerSystem_1 = require("./loggerSystem");
 exports.LogLevel = loggerSystem_1.LogLevel;
+tslib_1.__exportStar(require("./utils/context"), exports);