@ringcentral/juno 2.4.0 → 2.5.0-beta.0

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

@@ -1,6 +1,10 @@
 import { __read } from "tslib";
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import * as u from '@virtuoso.dev/urx';
 import { domIOSystem } from './domIOSystem';
+export var UP = 'up';
+export var DOWN = 'down';
+export var NONE = 'none';
 var INITIAL_BOTTOM_STATE = {
     atBottom: false,
     notAtBottomBecause: 'NOT_SHOWING_LAST_ITEM',
@@ -8,42 +12,54 @@ var INITIAL_BOTTOM_STATE = {
         offsetBottom: 0,
         scrollTop: 0,
         viewportHeight: 0,
-        totalHeight: 0,
+        scrollHeight: 0,
     },
 };
 export var stateFlagsSystem = u.system(function (_a) {
-    var _b = __read(_a, 1), _c = _b[0], scrollTop = _c.scrollTop, viewportHeight = _c.viewportHeight;
+    var _b = __read(_a, 1), _c = _b[0], scrollContainerState = _c.scrollContainerState, scrollTop = _c.scrollTop, viewportHeight = _c.viewportHeight, headerHeight = _c.headerHeight, footerHeight = _c.footerHeight, scrollBy = _c.scrollBy;
     var isAtBottom = u.statefulStream(false);
     var isAtTop = u.statefulStream(true);
     var atBottomStateChange = u.stream();
     var atTopStateChange = u.stream();
-    var listStateListener = u.stream();
+    var atBottomThreshold = u.statefulStream(4);
     // skip 1 to avoid an initial on/off flick
     var isScrolling = u.streamFromEmitter(u.pipe(u.merge(u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(true)), u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(false), u.debounceTime(100))), u.distinctUntilChanged()));
+    var isScrollingBy = u.statefulStreamFromEmitter(u.pipe(u.merge(u.pipe(scrollBy, u.mapTo(true)), u.pipe(scrollBy, u.mapTo(false), u.debounceTime(200))), u.distinctUntilChanged()), false);
+    // u.subscribe(isScrollingBy, (isScrollingBy) => console.log({ isScrollingBy }))
     u.connect(u.pipe(u.duc(scrollTop), u.map(function (top) { return top === 0; }), u.distinctUntilChanged()), isAtTop);
     u.connect(isAtTop, atTopStateChange);
-    var atBottomState = u.streamFromEmitter(u.pipe(u.combineLatest(listStateListener, u.duc(scrollTop), u.duc(viewportHeight)), u.scan(function (current, _a) {
-        var _b = __read(_a, 3), _c = _b[0], bottom = _c.bottom, offsetBottom = _c.offsetBottom, scrollTop = _b[1], viewportHeight = _b[2];
-        var isAtBottom = offsetBottom === 0 && scrollTop + viewportHeight - bottom > -4;
+    var atBottomState = u.streamFromEmitter(u.pipe(u.combineLatest(scrollContainerState, u.duc(viewportHeight), u.duc(headerHeight), u.duc(footerHeight), u.duc(atBottomThreshold)), u.scan(function (current, _a) {
+        var _b = __read(_a, 5), _c = __read(_b[0], 2), scrollTop = _c[0], scrollHeight = _c[1], viewportHeight = _b[1], _headerHeight = _b[2], _footerHeight = _b[3], atBottomThreshold = _b[4];
+        var isAtBottom = scrollTop + viewportHeight - scrollHeight > -atBottomThreshold;
         var state = {
             viewportHeight: viewportHeight,
             scrollTop: scrollTop,
-            offsetBottom: offsetBottom,
-            totalHeight: bottom + offsetBottom,
+            scrollHeight: scrollHeight,
         };
         if (isAtBottom) {
+            var atBottomBecause = void 0;
+            var scrollTopDelta = void 0;
+            if (scrollTop > current.state.scrollTop) {
+                atBottomBecause = 'SCROLLED_DOWN';
+                scrollTopDelta = current.state.scrollTop - scrollTop;
+            }
+            else {
+                atBottomBecause = 'SIZE_DECREASED';
+                scrollTopDelta =
+                    current.state.scrollTop - scrollTop ||
+                        current.scrollTopDelta;
+            }
             return {
                 atBottom: true,
                 state: state,
+                atBottomBecause: atBottomBecause,
+                scrollTopDelta: scrollTopDelta,
             };
         }
         var notAtBottomBecause;
-        if (state.totalHeight > current.state.totalHeight) {
+        if (state.scrollHeight > current.state.scrollHeight) {
             notAtBottomBecause = 'SIZE_INCREASED';
         }
-        else if (offsetBottom !== 0) {
-            notAtBottomBecause = 'NOT_SHOWING_LAST_ITEM';
-        }
         else if (viewportHeight < current.state.viewportHeight) {
             notAtBottomBecause = 'VIEWPORT_HEIGHT_DECREASING';
         }
@@ -59,14 +75,64 @@ export var stateFlagsSystem = u.system(function (_a) {
             state: state,
         };
     }, INITIAL_BOTTOM_STATE), u.distinctUntilChanged(function (prev, next) {
-        // prev && console.log(prev.atBottom, next.atBottom)
         return prev && prev.atBottom === next.atBottom;
     })));
+    var lastJumpDueToItemResize = u.statefulStreamFromEmitter(u.pipe(scrollContainerState, u.scan(function (current, _a) {
+        var _b = __read(_a, 2), scrollTop = _b[0], scrollHeight = _b[1];
+        if (current.scrollHeight !== scrollHeight) {
+            if (current.scrollTop !== scrollTop) {
+                return {
+                    scrollHeight: scrollHeight,
+                    scrollTop: scrollTop,
+                    jump: current.scrollTop - scrollTop,
+                    changed: true,
+                };
+            }
+            return {
+                scrollHeight: scrollHeight,
+                scrollTop: scrollTop,
+                jump: 0,
+                changed: true,
+            };
+        }
+        return {
+            scrollTop: scrollTop,
+            scrollHeight: scrollHeight,
+            jump: 0,
+            changed: false,
+        };
+    }, { scrollHeight: 0, jump: 0, scrollTop: 0, changed: false }), u.filter(function (value) { return value.changed; }), u.map(function (value) { return value.jump; })), 0);
     u.connect(u.pipe(atBottomState, u.map(function (state) { return state.atBottom; })), isAtBottom);
-    u.subscribe(isAtBottom, function (value) {
-        setTimeout(function () { return u.publish(atBottomStateChange, value); });
-    });
-    // connect(isAtBottom, atBottomStateChange)
+    u.connect(u.pipe(isAtBottom, u.throttleTime(50)), atBottomStateChange);
+    var scrollDirection = u.statefulStream(DOWN);
+    u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
+        var _b = __read(_a, 1), scrollTop = _b[0];
+        return scrollTop;
+    }), u.distinctUntilChanged(), u.scan(function (acc, scrollTop) {
+        // if things change while compensating for items, ignore,
+        // but store the new scrollTop
+        if (u.getValue(isScrollingBy)) {
+            return { direction: acc.direction, prevScrollTop: scrollTop };
+        }
+        return {
+            direction: scrollTop < acc.prevScrollTop ? UP : DOWN,
+            prevScrollTop: scrollTop,
+        };
+    }, { direction: DOWN, prevScrollTop: 0 }), u.map(function (value) { return value.direction; })), scrollDirection);
+    u.connect(u.pipe(scrollContainerState, u.throttleTime(50), u.mapTo(NONE)), scrollDirection);
+    var scrollVelocity = u.statefulStream(0);
+    u.connect(u.pipe(isScrolling, u.filter(function (value) { return !value; }), u.mapTo(0)), scrollVelocity);
+    u.connect(u.pipe(scrollTop, u.throttleTime(100), u.withLatestFrom(isScrolling), u.filter(function (_a) {
+        var _b = __read(_a, 2), _ = _b[0], isScrolling = _b[1];
+        return !!isScrolling;
+    }), u.scan(function (_a, _b) {
+        var _c = __read(_a, 2), _ = _c[0], prev = _c[1];
+        var _d = __read(_b, 1), next = _d[0];
+        return [prev, next];
+    }, [0, 0]), u.map(function (_a) {
+        var _b = __read(_a, 2), prev = _b[0], next = _b[1];
+        return next - prev;
+    })), scrollVelocity);
     return {
         isScrolling: isScrolling,
         isAtTop: isAtTop,
@@ -74,6 +140,9 @@ export var stateFlagsSystem = u.system(function (_a) {
         atBottomState: atBottomState,
         atTopStateChange: atTopStateChange,
         atBottomStateChange: atBottomStateChange,
-        listStateListener: listStateListener,
+        scrollDirection: scrollDirection,
+        atBottomThreshold: atBottomThreshold,
+        scrollVelocity: scrollVelocity,
+        lastJumpDueToItemResize: lastJumpDueToItemResize,
     };
 }, u.tup(domIOSystem));

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

@@ -1,43 +1,43 @@
 import { __read } from "tslib";
 /* eslint-disable no-continue */
 import * as u from '@virtuoso.dev/urx';
-import { domIOSystem, UP } from './domIOSystem';
+import { domIOSystem } from './domIOSystem';
 import { listStateSystem } from './listStateSystem';
+import { loggerSystem, LogLevel } from './loggerSystem';
 import { sizeSystem } from './sizeSystem';
-import { stateFlagsSystem } from './stateFlagsSystem';
+import { stateFlagsSystem, UP } from './stateFlagsSystem';
 /**
  * Fixes upward scrolling by calculating and compensation from changed item heights, using scrollBy.
  */
 export var upwardScrollFixSystem = u.system(function (_a) {
-    var _b = __read(_a, 4), _c = _b[0], scrollBy = _c.scrollBy, scrollTop = _c.scrollTop, scrollDirection = _c.scrollDirection, deviation = _c.deviation, scrollingInProgress = _c.scrollingInProgress, isScrolling = _b[1].isScrolling, listState = _b[2].listState, _d = _b[3], beforeUnshiftWith = _d.beforeUnshiftWith, sizes = _d.sizes;
-    var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress), u.filter(function (_a) {
-        var _b = __read(_a, 4), scrollTop = _b[1], scrollDirection = _b[2], scrollingInProgress = _b[3];
-        return (!scrollingInProgress && scrollTop !== 0 && scrollDirection === UP);
-    }), u.map(function (_a) {
-        var _b = __read(_a, 1), state = _b[0];
-        return state;
-    }), u.scan(function (_a, _b) {
-        var _c = __read(_a, 2), prevItems = _c[1];
-        var items = _b.items;
+    var _b = __read(_a, 5), _c = _b[0], scrollBy = _c.scrollBy, scrollTop = _c.scrollTop, deviation = _c.deviation, scrollingInProgress = _c.scrollingInProgress, _d = _b[1], isScrolling = _d.isScrolling, isAtBottom = _d.isAtBottom, atBottomState = _d.atBottomState, scrollDirection = _d.scrollDirection, lastJumpDueToItemResize = _d.lastJumpDueToItemResize, listState = _b[2].listState, _e = _b[3], beforeUnshiftWith = _e.beforeUnshiftWith, shiftWithOffset = _e.shiftWithOffset, sizes = _e.sizes, log = _b[4].log;
+    var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(lastJumpDueToItemResize), u.scan(function (_a, 
+    // @ts-ignore
+    _b) {
+        var _c = __read(_a, 3), prevItems = _c[1], prevTotalCount = _c[2];
+        var 
+        // @ts-ignore
+        _d = __read(_b, 2), _e = _d[0], items = _e.items, totalCount = _e.totalCount, lastJumpDueToItemResize = _d[1];
         var newDev = 0;
-        if (prevItems.length > 0 && items.length > 0) {
-            var firstItemIndex = items[0].originalIndex;
-            var prevFirstItemIndex = prevItems[0].originalIndex;
-            var atStart = firstItemIndex === 0 && prevFirstItemIndex === 0;
-            if (!atStart) {
-                // Handles an item taller than the viewport
-                if (firstItemIndex === prevFirstItemIndex) {
-                    newDev = items[0].size - prevItems[0].size;
-                }
-                else {
+        if (prevTotalCount === totalCount) {
+            if (prevItems.length > 0 && items.length > 0) {
+                var firstItemIndex = items[0].originalIndex;
+                var prevFirstItemIndex = prevItems[0].originalIndex;
+                var atStart = firstItemIndex === 0 && prevFirstItemIndex === 0;
+                var onlyItem = items.length === 1;
+                if (!atStart) {
                     var _loop_1 = function (index) {
                         var item = items[index];
                         var prevItem = prevItems.find(function (pItem) { return pItem.originalIndex === item.originalIndex; });
                         if (!prevItem) {
                             return "continue";
                         }
-                        if (item.offset !== prevItem.offset) {
-                            newDev = item.offset - prevItem.offset;
+                        if (item.offset !== prevItem.offset || onlyItem) {
+                            newDev =
+                                item.offset -
+                                    prevItem.offset +
+                                    item.size -
+                                    prevItem.size;
                             return "break";
                         }
                     };
@@ -48,13 +48,21 @@ export var upwardScrollFixSystem = u.system(function (_a) {
                     }
                 }
             }
+            if (newDev !== 0) {
+                newDev += lastJumpDueToItemResize;
+            }
         }
-        return [newDev, items];
-    }, [0, []]), u.filter(function (_a) {
+        return [newDev, items, totalCount];
+    }, [0, [], 0]), u.filter(function (_a) {
         var _b = __read(_a, 1), amount = _b[0];
         return amount !== 0;
+    }), u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress, log, isAtBottom, atBottomState), u.filter(function (_a) {
+        var _b = __read(_a, 4), scrollTop = _b[1], scrollDirection = _b[2], scrollingInProgress = _b[3];
+        // console.log({ amount, scrollTop, scrollDirection, scrollingInProgress, isAtBottom, atBottomState })
+        return (!scrollingInProgress && scrollTop !== 0 && scrollDirection === UP); // && (isAtBottom ? amount > 0 : true)
     }), u.map(function (_a) {
-        var _b = __read(_a, 1), amount = _b[0];
+        var _b = __read(_a, 5), _c = __read(_b[0], 1), amount = _c[0], log = _b[4];
+        log('Upward scrolling compensation', { amount: amount }, LogLevel.DEBUG);
         return amount;
     })));
     u.connect(u.pipe(deviationOffset, u.withLatestFrom(deviation), u.map(function (_a) {
@@ -79,9 +87,12 @@ export var upwardScrollFixSystem = u.system(function (_a) {
             u.publish(scrollBy, { top: -offset, behavior: 'auto' });
         }
     });
+    u.connect(u.pipe(shiftWithOffset, u.map(function (offset) {
+        return { top: -offset };
+    })), scrollBy);
     u.connect(u.pipe(beforeUnshiftWith, u.withLatestFrom(sizes), u.map(function (_a) {
         var _b = __read(_a, 2), offset = _b[0], lastSize = _b[1].lastSize;
         return offset * lastSize;
     })), deviationOffset);
     return { deviation: deviation };
-}, u.tup(domIOSystem, stateFlagsSystem, listStateSystem, sizeSystem));
+}, u.tup(domIOSystem, stateFlagsSystem, listStateSystem, sizeSystem, loggerSystem));

package/es6/components/Virtuoso/react-virtuoso/utils/correctItemSize.js

@@ -0,0 +1,3 @@
+export function correctItemSize(el, dimension) {
+    return Math.round(el.getBoundingClientRect()[dimension]);
+}

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

@@ -2,15 +2,16 @@ import { __assign, __read } from "tslib";
 import * as u from '@virtuoso.dev/urx';
 import { domIOSystem } from './domIOSystem';
 export var windowScrollerSystem = u.system(function (_a) {
-    var _b = __read(_a, 1), _c = _b[0], scrollTop = _c.scrollTop, scrollTo = _c.scrollTo;
+    var _b = __read(_a, 1), _c = _b[0], scrollTo = _c.scrollTo, scrollContainerState = _c.scrollContainerState;
+    var windowScrollContainerState = u.stream();
     var windowViewportRect = u.stream();
-    var windowScrollTop = u.stream();
     var windowScrollTo = u.stream();
     var useWindowScroll = u.statefulStream(false);
-    u.connect(u.pipe(u.combineLatest(windowScrollTop, windowViewportRect), u.map(function (_a) {
-        var _b = __read(_a, 2), windowScrollTop = _b[0], offsetTop = _b[1].offsetTop;
-        return Math.max(0, windowScrollTop - offsetTop);
-    })), scrollTop);
+    var customScrollParent = u.statefulStream(undefined);
+    u.connect(u.pipe(u.combineLatest(windowScrollContainerState, windowViewportRect), u.map(function (_a) {
+        var _b = __read(_a, 2), _c = __read(_b[0], 2), windowScrollTop = _c[0], scrollHeight = _c[1], offsetTop = _b[1].offsetTop;
+        return [Math.max(0, windowScrollTop - offsetTop), scrollHeight];
+    })), scrollContainerState);
     u.connect(u.pipe(scrollTo, u.withLatestFrom(windowViewportRect), u.map(function (_a) {
         var _b = __read(_a, 2), scrollTo = _b[0], offsetTop = _b[1].offsetTop;
         return __assign(__assign({}, scrollTo), { top: scrollTo.top + offsetTop });
@@ -18,8 +19,9 @@ export var windowScrollerSystem = u.system(function (_a) {
     return {
         // config
         useWindowScroll: useWindowScroll,
+        customScrollParent: customScrollParent,
         // input
-        windowScrollTop: windowScrollTop,
+        windowScrollContainerState: windowScrollContainerState,
         windowViewportRect: windowViewportRect,
         // signals
         windowScrollTo: windowScrollTo,

package/es6/components/Virtuoso/utils/useHighlightScroll.js

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { fixWebKitTransitionStyle } from '../../../foundation';
 /**
  * scroll into current highlight index
  */
@@ -98,3 +99,18 @@ export function useHighlightScroll(_a) {
         itemsRendered: function (e) { return (renderedItemsRef.current = e); },
     };
 }
+/**
+ * modify virtuoso style to fix safari scroll bug
+ */
+export function modifyVlScrollerStyle(scrollElm, position) {
+    if (position === void 0) { position = 'absolute'; }
+    if (scrollElm) {
+        scrollElm.style.transition = fixWebKitTransitionStyle;
+        if (position) {
+            var viewPortElm = scrollElm.firstChild;
+            if (viewPortElm) {
+                viewPortElm.style.position = position;
+            }
+        }
+    }
+}

package/es6/foundation/index.js

@@ -1,6 +1,6 @@
 import styled from './styled-components';
 export * from './config';
-export * from './isSafari154';
+export * from './isWebKit154';
 export * from './contexts';
 export * from './hoc';
 export * from './hooks';

package/es6/foundation/isWebKit154.js

@@ -0,0 +1,57 @@
+import { __makeTemplateObject } from "tslib";
+import { createGlobalStyle } from 'styled-components';
+import { RcClasses } from './utils/classes';
+import { combineProps } from './utils/combineProps';
+// * this whole file should be remove after webkit154 issue be fixed
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
+ * Remove this workaround once the WebKit bug fix is released.
+ *
+ * follow up:
+ * https://github.com/mui/material-ui/pull/31975/files
+ * https://github.com/mui/material-ui/pull/32202/files
+ */
+export var isWebKit154 = typeof navigator !== 'undefined' &&
+    /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) &&
+    /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+var FixWebKit154Classes = RcClasses(['paper'], 'RcFixWebKit154');
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
+ * Remove this workaround once the Safari bug is fixed.
+ */
+export var getWebKit154Theme = function (theme, enable) {
+    if (enable !== null && enable !== void 0 ? enable : isWebKit154) {
+        return combineProps({
+            props: {
+                // * set all grow related to only have one transition to make animation not shake after safari 15.4
+                MuiMenu: {
+                    PopoverClasses: { paper: FixWebKit154Classes.paper },
+                },
+                RcVirtualizedMenu: {
+                    PopoverClasses: { paper: FixWebKit154Classes.paper },
+                },
+                MuiPopover: {
+                    PaperProps: { className: FixWebKit154Classes.paper },
+                },
+                // mui tooltip prop will cover all existing props
+                RcTooltip: {
+                    classes: {
+                        tooltip: FixWebKit154Classes.paper,
+                    },
+                },
+                // mui grow not accept global prop
+                RcGrow: {
+                    className: FixWebKit154Classes.paper,
+                },
+            },
+        }, theme);
+    }
+    return theme;
+};
+export var fixWebKitTransitionStyle = 'all 159ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
+/**
+ * A global style that can be used to
+ * apply a workaround for the CSS transition bug after WebKit 15.4.
+ */
+export var GlobalFixWebKitStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .", " {\n    transition: ", " !important;\n  }\n"], ["\n  .", " {\n    transition: ", " !important;\n  }\n"])), FixWebKit154Classes.paper, fixWebKitTransitionStyle);
+var templateObject_1;

package/es6/foundation/theme/ThemeProvider.js

@@ -3,7 +3,7 @@ import 'focus-visible';
 import React, { createContext, useContext, } from 'react';
 import { createGenerateClassName, MuiThemeProvider, StylesProvider, } from '@material-ui/core/styles';
 import { useResultRef } from '../hooks';
-import { getSafari154Theme, GlobalFixSafariStyle, isSafari154, } from '../isSafari154';
+import { getWebKit154Theme, GlobalFixWebKitStyle, isWebKit154, } from '../isWebKit154';
 import { ThemeProvider as StyledThemeProvider, useTheme, } from '../styled-components';
 import createTheme from './createTheme';
 var NestedThemeContext = createContext(false);
@@ -13,16 +13,16 @@ var NestedThemeContext = createContext(false);
  * that will user parent's theme when not set theme
  */
 var SubThemeProvider = function (_a) {
-    var themeProp = _a.theme, children = _a.children;
+    var themeProp = _a.theme, children = _a.children, fixWebKit154 = _a.fixWebKit154;
     var _b, _c;
     var parentTheme = useTheme();
     var isHaveParentRcTheme = (_c = (_b = parentTheme.palette) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.brand;
     // TODO: can be remove after safari fix that bug, maybe after v16
-    var theme = getSafari154Theme(!themeProp && isHaveParentRcTheme ? parentTheme : createTheme(themeProp));
+    var theme = getWebKit154Theme(!themeProp && isHaveParentRcTheme ? parentTheme : createTheme(themeProp), fixWebKit154);
     return (React.createElement(MuiThemeProvider, { theme: theme },
         React.createElement(StyledThemeProvider, { theme: theme },
             React.createElement(React.Fragment, null,
-                isSafari154 && React.createElement(GlobalFixSafariStyle, null),
+                (fixWebKit154 !== null && fixWebKit154 !== void 0 ? fixWebKit154 : isWebKit154) && React.createElement(GlobalFixWebKitStyle, null),
                 children))));
 };
 /**

package/foundation/index.d.ts

@@ -1,6 +1,6 @@
 import styled from './styled-components';
 export * from './config';
-export * from './isSafari154';
+export * from './isWebKit154';
 export * from './contexts';
 export * from './hoc';
 export * from './hooks';

package/foundation/index.js

@@ -4,7 +4,7 @@ var tslib_1 = require("tslib");
 var styled_components_1 = tslib_1.__importDefault(require("./styled-components"));
 exports.styled = styled_components_1.default;
 tslib_1.__exportStar(require("./config"), exports);
-tslib_1.__exportStar(require("./isSafari154"), exports);
+tslib_1.__exportStar(require("./isWebKit154"), exports);
 tslib_1.__exportStar(require("./contexts"), exports);
 tslib_1.__exportStar(require("./hoc"), exports);
 tslib_1.__exportStar(require("./hooks"), exports);

package/foundation/isWebKit154.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
+ * Remove this workaround once the WebKit bug fix is released.
+ *
+ * follow up:
+ * https://github.com/mui/material-ui/pull/31975/files
+ * https://github.com/mui/material-ui/pull/32202/files
+ */
+export declare const isWebKit154: boolean;
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
+ * Remove this workaround once the Safari bug is fixed.
+ */
+export declare const getWebKit154Theme: (theme: any, enable?: boolean | undefined) => any;
+export declare const fixWebKitTransitionStyle = "all 159ms cubic-bezier(0.4, 0, 0.2, 1) 0ms";
+/**
+ * A global style that can be used to
+ * apply a workaround for the CSS transition bug after WebKit 15.4.
+ */
+export declare const GlobalFixWebKitStyle: import("styled-components").GlobalStyleClass<{}, import("styled-components").DefaultTheme>;

package/foundation/isWebKit154.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var styled_components_1 = require("styled-components");
+var classes_1 = require("./utils/classes");
+var combineProps_1 = require("./utils/combineProps");
+// * this whole file should be remove after webkit154 issue be fixed
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
+ * Remove this workaround once the WebKit bug fix is released.
+ *
+ * follow up:
+ * https://github.com/mui/material-ui/pull/31975/files
+ * https://github.com/mui/material-ui/pull/32202/files
+ */
+exports.isWebKit154 = typeof navigator !== 'undefined' &&
+    /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) &&
+    /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+var FixWebKit154Classes = classes_1.RcClasses(['paper'], 'RcFixWebKit154');
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
+ * Remove this workaround once the Safari bug is fixed.
+ */
+exports.getWebKit154Theme = function (theme, enable) {
+    if (enable !== null && enable !== void 0 ? enable : exports.isWebKit154) {
+        return combineProps_1.combineProps({
+            props: {
+                // * set all grow related to only have one transition to make animation not shake after safari 15.4
+                MuiMenu: {
+                    PopoverClasses: { paper: FixWebKit154Classes.paper },
+                },
+                RcVirtualizedMenu: {
+                    PopoverClasses: { paper: FixWebKit154Classes.paper },
+                },
+                MuiPopover: {
+                    PaperProps: { className: FixWebKit154Classes.paper },
+                },
+                // mui tooltip prop will cover all existing props
+                RcTooltip: {
+                    classes: {
+                        tooltip: FixWebKit154Classes.paper,
+                    },
+                },
+                // mui grow not accept global prop
+                RcGrow: {
+                    className: FixWebKit154Classes.paper,
+                },
+            },
+        }, theme);
+    }
+    return theme;
+};
+exports.fixWebKitTransitionStyle = 'all 159ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
+/**
+ * A global style that can be used to
+ * apply a workaround for the CSS transition bug after WebKit 15.4.
+ */
+exports.GlobalFixWebKitStyle = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  .", " {\n    transition: ", " !important;\n  }\n"], ["\n  .", " {\n    transition: ", " !important;\n  }\n"])), FixWebKit154Classes.paper, exports.fixWebKitTransitionStyle);
+var templateObject_1;

package/foundation/theme/ThemeProvider.d.ts

@@ -4,6 +4,12 @@ import { RcThemeInput } from './theme.type';
 declare type SubThemeProviderProps = {
     /** custom theme */
     theme?: RcThemeInput;
+    /**
+     * workaround for fix safari 15.4~.9 bug
+     *
+     * use for when your environment need that fix but userAgent not have safari
+     */
+    fixWebKit154?: boolean;
     children?: ReactNode;
 };
 declare type RootThemeProviderProps = {

package/foundation/theme/ThemeProvider.js

@@ -5,7 +5,7 @@ require("focus-visible");
 var react_1 = tslib_1.__importStar(require("react"));
 var styles_1 = require("@material-ui/core/styles");
 var hooks_1 = require("../hooks");
-var isSafari154_1 = require("../isSafari154");
+var isWebKit154_1 = require("../isWebKit154");
 var styled_components_1 = require("../styled-components");
 var createTheme_1 = tslib_1.__importDefault(require("./createTheme"));
 var NestedThemeContext = react_1.createContext(false);
@@ -15,16 +15,16 @@ var NestedThemeContext = react_1.createContext(false);
  * that will user parent's theme when not set theme
  */
 var SubThemeProvider = function (_a) {
-    var themeProp = _a.theme, children = _a.children;
+    var themeProp = _a.theme, children = _a.children, fixWebKit154 = _a.fixWebKit154;
     var _b, _c;
     var parentTheme = styled_components_1.useTheme();
     var isHaveParentRcTheme = (_c = (_b = parentTheme.palette) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.brand;
     // TODO: can be remove after safari fix that bug, maybe after v16
-    var theme = isSafari154_1.getSafari154Theme(!themeProp && isHaveParentRcTheme ? parentTheme : createTheme_1.default(themeProp));
+    var theme = isWebKit154_1.getWebKit154Theme(!themeProp && isHaveParentRcTheme ? parentTheme : createTheme_1.default(themeProp), fixWebKit154);
     return (react_1.default.createElement(styles_1.MuiThemeProvider, { theme: theme },
         react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
             react_1.default.createElement(react_1.default.Fragment, null,
-                isSafari154_1.isSafari154 && react_1.default.createElement(isSafari154_1.GlobalFixSafariStyle, null),
+                (fixWebKit154 !== null && fixWebKit154 !== void 0 ? fixWebKit154 : isWebKit154_1.isWebKit154) && react_1.default.createElement(isWebKit154_1.GlobalFixWebKitStyle, null),
                 children))));
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.4.0",
+  "version": "2.5.0-beta.0",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",
@@ -27,7 +27,7 @@
     "focus-visible": "^5.1.0",
     "lodash": "^4.17.21",
     "react-beautiful-dnd": "^13.0.0",
-    "react-virtuoso": "^1.9.3",
+    "react-virtuoso": "^2.8.3",
     "resize-observer-polyfill": "^1.5.1",
     "typeface-lato": "^0.0.75",
     "tslib": ">=2.0.0"

package/es6/foundation/isSafari154.js

@@ -1,50 +0,0 @@
-import { __makeTemplateObject } from "tslib";
-import { createGlobalStyle } from 'styled-components';
-import { RcClasses } from './utils/classes';
-import { combineProps } from './utils/combineProps';
-/**
- * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
- * Remove this workaround once the Safari bug is fixed.
- */
-export var isSafari154 = typeof navigator !== 'undefined' &&
-    /^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
-    /version\/15\.[4-9]/i.test(navigator.userAgent);
-var FixSafari154Classes = RcClasses(['paper'], 'RcFixSafari154');
-/**
- * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
- * Remove this workaround once the Safari bug is fixed.
- */
-export var getSafari154Theme = function (theme) {
-    if (!isSafari154)
-        return theme;
-    return combineProps({
-        props: {
-            // * set all grow related to only have one transition to make animation not shake after safari 15.4
-            MuiMenu: {
-                PopoverClasses: { paper: FixSafari154Classes.paper },
-            },
-            RcVirtualizedMenu: {
-                PopoverClasses: { paper: FixSafari154Classes.paper },
-            },
-            MuiPopover: {
-                PaperProps: { className: FixSafari154Classes.paper },
-            },
-            // mui tooltip prop will cover all existing props
-            RcTooltip: {
-                classes: {
-                    tooltip: FixSafari154Classes.paper,
-                },
-            },
-            // mui grow not accept global prop
-            RcGrow: {
-                className: FixSafari154Classes.paper,
-            },
-        },
-    }, theme);
-};
-export var fixSafariTransitionStyle = 'all 159ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
-/**
- * A global style that can be used to apply a workaround for the CSS transition bug in Safari 15.4.
- */
-export var GlobalFixSafariStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .", " {\n    transition: ", " !important;\n  }\n"], ["\n  .", " {\n    transition: ", " !important;\n  }\n"])), FixSafari154Classes.paper, fixSafariTransitionStyle);
-var templateObject_1;