@ringcentral/juno 2.36.4 → 2.37.0

package/components/Tooltip/styles/StyledTooltip.js

@@ -30,6 +30,13 @@ var arrowSize = {
 var marginOffset = '-0.4em';
 var horizontalMarginTopAndMarginBottom = foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  margin-top: 3px;\n  margin-bottom: 3px;\n"], ["\n  margin-top: 3px;\n  margin-bottom: 3px;\n"])));
 exports.tooltipStyle = function () {
-    return foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "], ["\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "])), utils_1.RcTooltipClasses.tooltip, tooltipTypography, tooltipColor, tooltipTextColor, tooltipPadding, utils_1.RcTooltipClasses.tooltipPlacementTop, utils_1.RcTooltipClasses.tooltipPlacementBottom, placementSpace, utils_1.RcTooltipClasses.tooltipPlacementRight, utils_1.RcTooltipClasses.tooltipPlacementLeft, placementSpace, utils_1.RcTooltipClasses.arrow, tooltipColor, utils_1.RcTooltipClasses.tooltipPlacementTop, utils_1.RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, utils_1.RcTooltipClasses.tooltipPlacementBottom, utils_1.RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, utils_1.RcTooltipClasses.tooltipPlacementLeft, utils_1.RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom, utils_1.RcTooltipClasses.tooltipPlacementRight, utils_1.RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom);
+    return foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n    ", "\n    max-width: calc(100% - 10px);\n\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "], ["\n    "
+        // The preventOverflowModifier of popperjs has 5px padding.
+        // So need set max-width to calc(100% - 10px) to prevent overflow when the tooltip is too long.
+        ,
+        "\n    max-width: calc(100% - 10px);\n\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "])), 
+    // The preventOverflowModifier of popperjs has 5px padding.
+    // So need set max-width to calc(100% - 10px) to prevent overflow when the tooltip is too long.
+    '', utils_1.RcTooltipClasses.tooltip, tooltipTypography, tooltipColor, tooltipTextColor, tooltipPadding, utils_1.RcTooltipClasses.tooltipPlacementTop, utils_1.RcTooltipClasses.tooltipPlacementBottom, placementSpace, utils_1.RcTooltipClasses.tooltipPlacementRight, utils_1.RcTooltipClasses.tooltipPlacementLeft, placementSpace, utils_1.RcTooltipClasses.arrow, tooltipColor, utils_1.RcTooltipClasses.tooltipPlacementTop, utils_1.RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, utils_1.RcTooltipClasses.tooltipPlacementBottom, utils_1.RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, utils_1.RcTooltipClasses.tooltipPlacementLeft, utils_1.RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom, utils_1.RcTooltipClasses.tooltipPlacementRight, utils_1.RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom);
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/components/VirtualizedMenu/VirtualizedMenu.js

@@ -9,7 +9,6 @@ var Transitions_1 = require("../Transitions");
 var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var VirtualizedMenuList_1 = require("./VirtualizedMenuList");
-var useNextFrame_1 = require("./useNextFrame");
 var _RcVirtualizedMenu = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcVirtualizedMenu' });
     var _a = props.autoFocus, autoFocus = _a === void 0 ? true : _a, children = props.children, classesProp = props.classes, _b = props.disableAutoFocusItem, disableAutoFocusItem = _b === void 0 ? false : _b, _c = props.MenuListProps, _d = _c === void 0 ? {} : _c, _e = _d.maxHeight, maxHeight = _e === void 0 ? 416 : _e, onKeyDown = _d.onKeyDown, VirtuosoProps = _d.VirtuosoProps, MenuListProps = tslib_1.__rest(_d, ["maxHeight", "onKeyDown", "VirtuosoProps"]), onClose = props.onClose, open = props.open, TransitionPropsProp = props.TransitionProps, _f = props.PaperProps, PaperPropsProp = _f === void 0 ? {} : _f, PopoverClasses = props.PopoverClasses, _g = props.transitionDuration, transitionDuration = _g === void 0 ? 'auto' : _g, _h = props.variant, variant = _h === void 0 ? 'selectedMenu' : _h, _j = props.action, popoverActionProp = _j === void 0 ? null : _j, rest = tslib_1.__rest(props, ["autoFocus", "children", "classes", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "TransitionProps", "PaperProps", "PopoverClasses", "transitionDuration", "variant", "action"]);
@@ -54,14 +53,14 @@ var _RcVirtualizedMenu = react_1.forwardRef(function (inProps, ref) {
             }
         }
     });
-    var runInNextFrame = useNextFrame_1.useNextFrame();
     return (react_1.default.createElement(Popover_1.RcPopover, tslib_1.__assign({ ref: handleRef, action: handlePopoverAction, container: document.body, classes: PopoverClasses, onClose: onClose, open: open, 
         // FIXME: workaround for virtualized menu height incorrect issue
         TransitionComponent: Transitions_1.RcFade, transitionDuration: transitionDuration, PaperProps: PaperProps, TransitionProps: TransitionProps }, rest),
         react_1.default.createElement(VirtualizedMenuList_1.RcVirtualizedMenuList, tslib_1.__assign({ position: "unset", action: menuListActionRef, autoFocus: autoFocus, autoFocusItem: autoFocusItem, maxHeight: maxHeight, variant: variant, onKeyDown: handleListKeyDown, VirtuosoProps: tslib_1.__assign(tslib_1.__assign({}, VirtuosoProps), { totalListHeightChanged: function (height) {
                     var _a;
                     (_a = VirtuosoProps === null || VirtuosoProps === void 0 ? void 0 : VirtuosoProps.totalListHeightChanged) === null || _a === void 0 ? void 0 : _a.call(VirtuosoProps, height);
-                    runInNextFrame(function () {
+                    // fix for popover position incorrect issue
+                    queueMicrotask(function () {
                         var _a;
                         (_a = popoverAction.current) === null || _a === void 0 ? void 0 : _a.updatePosition();
                     });

package/components/Virtuoso/utils/useHighlightScroll.js

@@ -107,7 +107,6 @@ exports.useHighlightScroll = useHighlightScroll;
 function modifyVlScrollerStyle(scrollElm, position) {
     if (position === void 0) { position = 'absolute'; }
     if (scrollElm) {
-        scrollElm.style.transition = 'all 1ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
         if (position) {
             var viewPortElm = scrollElm.firstChild;
             if (viewPortElm) {

package/es6/components/Tooltip/styles/StyledTooltip.js

@@ -28,6 +28,13 @@ var arrowSize = {
 var marginOffset = '-0.4em';
 var horizontalMarginTopAndMarginBottom = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 3px;\n  margin-bottom: 3px;\n"], ["\n  margin-top: 3px;\n  margin-bottom: 3px;\n"])));
 export var tooltipStyle = function () {
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "], ["\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "])), RcTooltipClasses.tooltip, tooltipTypography, tooltipColor, tooltipTextColor, tooltipPadding, RcTooltipClasses.tooltipPlacementTop, RcTooltipClasses.tooltipPlacementBottom, placementSpace, RcTooltipClasses.tooltipPlacementRight, RcTooltipClasses.tooltipPlacementLeft, placementSpace, RcTooltipClasses.arrow, tooltipColor, RcTooltipClasses.tooltipPlacementTop, RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, RcTooltipClasses.tooltipPlacementBottom, RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, RcTooltipClasses.tooltipPlacementLeft, RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom, RcTooltipClasses.tooltipPlacementRight, RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n    max-width: calc(100% - 10px);\n\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "], ["\n    "
+        // The preventOverflowModifier of popperjs has 5px padding.
+        // So need set max-width to calc(100% - 10px) to prevent overflow when the tooltip is too long.
+        ,
+        "\n    max-width: calc(100% - 10px);\n\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "])), 
+    // The preventOverflowModifier of popperjs has 5px padding.
+    // So need set max-width to calc(100% - 10px) to prevent overflow when the tooltip is too long.
+    '', RcTooltipClasses.tooltip, tooltipTypography, tooltipColor, tooltipTextColor, tooltipPadding, RcTooltipClasses.tooltipPlacementTop, RcTooltipClasses.tooltipPlacementBottom, placementSpace, RcTooltipClasses.tooltipPlacementRight, RcTooltipClasses.tooltipPlacementLeft, placementSpace, RcTooltipClasses.arrow, tooltipColor, RcTooltipClasses.tooltipPlacementTop, RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, RcTooltipClasses.tooltipPlacementBottom, RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, RcTooltipClasses.tooltipPlacementLeft, RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom, RcTooltipClasses.tooltipPlacementRight, RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom);
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/es6/components/VirtualizedMenu/VirtualizedMenu.js

@@ -7,7 +7,6 @@ import { RcFade } from '../Transitions';
 import { VirtualizedMenuStyle } from './styles';
 import { RcVirtualizedMenuClasses } from './utils';
 import { RcVirtualizedMenuList, } from './VirtualizedMenuList';
-import { useNextFrame } from './useNextFrame';
 var _RcVirtualizedMenu = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcVirtualizedMenu' });
     var _a = props.autoFocus, autoFocus = _a === void 0 ? true : _a, children = props.children, classesProp = props.classes, _b = props.disableAutoFocusItem, disableAutoFocusItem = _b === void 0 ? false : _b, _c = props.MenuListProps, _d = _c === void 0 ? {} : _c, _e = _d.maxHeight, maxHeight = _e === void 0 ? 416 : _e, onKeyDown = _d.onKeyDown, VirtuosoProps = _d.VirtuosoProps, MenuListProps = __rest(_d, ["maxHeight", "onKeyDown", "VirtuosoProps"]), onClose = props.onClose, open = props.open, TransitionPropsProp = props.TransitionProps, _f = props.PaperProps, PaperPropsProp = _f === void 0 ? {} : _f, PopoverClasses = props.PopoverClasses, _g = props.transitionDuration, transitionDuration = _g === void 0 ? 'auto' : _g, _h = props.variant, variant = _h === void 0 ? 'selectedMenu' : _h, _j = props.action, popoverActionProp = _j === void 0 ? null : _j, rest = __rest(props, ["autoFocus", "children", "classes", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "TransitionProps", "PaperProps", "PopoverClasses", "transitionDuration", "variant", "action"]);
@@ -52,14 +51,14 @@ var _RcVirtualizedMenu = forwardRef(function (inProps, ref) {
             }
         }
     });
-    var runInNextFrame = useNextFrame();
     return (React.createElement(RcPopover, __assign({ ref: handleRef, action: handlePopoverAction, container: document.body, classes: PopoverClasses, onClose: onClose, open: open, 
         // FIXME: workaround for virtualized menu height incorrect issue
         TransitionComponent: RcFade, transitionDuration: transitionDuration, PaperProps: PaperProps, TransitionProps: TransitionProps }, rest),
         React.createElement(RcVirtualizedMenuList, __assign({ position: "unset", action: menuListActionRef, autoFocus: autoFocus, autoFocusItem: autoFocusItem, maxHeight: maxHeight, variant: variant, onKeyDown: handleListKeyDown, VirtuosoProps: __assign(__assign({}, VirtuosoProps), { totalListHeightChanged: function (height) {
                     var _a;
                     (_a = VirtuosoProps === null || VirtuosoProps === void 0 ? void 0 : VirtuosoProps.totalListHeightChanged) === null || _a === void 0 ? void 0 : _a.call(VirtuosoProps, height);
-                    runInNextFrame(function () {
+                    // fix for popover position incorrect issue
+                    queueMicrotask(function () {
                         var _a;
                         (_a = popoverAction.current) === null || _a === void 0 ? void 0 : _a.updatePosition();
                     });

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

@@ -104,7 +104,6 @@ export function useHighlightScroll(_a) {
 export function modifyVlScrollerStyle(scrollElm, position) {
     if (position === void 0) { position = 'absolute'; }
     if (scrollElm) {
-        scrollElm.style.transition = 'all 1ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
         if (position) {
             var viewPortElm = scrollElm.firstChild;
             if (viewPortElm) {

package/es6/foundation/index.js

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

package/es6/foundation/theme/ThemeProvider.js

@@ -3,7 +3,6 @@ import 'focus-visible';
 import React, { createContext, useContext, } from 'react';
 import { createGenerateClassName, MuiThemeProvider, StylesProvider, } from '@material-ui/core/styles';
 import { useResultRef } from '../hooks';
-import { getWebKit154Theme, GlobalFixWebKitStyle, isWebKit154, } from '../isWebKit154';
 import { ThemeProvider as StyledThemeProvider, useTheme, } from '../styled-components';
 import createTheme from './createTheme';
 var NestedThemeContext = createContext(false);
@@ -13,17 +12,13 @@ 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, fixWebKit154 = _a.fixWebKit154;
+    var themeProp = _a.theme, children = _a.children;
     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 = getWebKit154Theme(!themeProp && isHaveParentRcTheme ? parentTheme : createTheme(themeProp), fixWebKit154);
+    var theme = !themeProp && isHaveParentRcTheme ? parentTheme : createTheme(themeProp);
     return (React.createElement(MuiThemeProvider, { theme: theme },
-        React.createElement(StyledThemeProvider, { theme: theme },
-            React.createElement(React.Fragment, null,
-                (fixWebKit154 !== null && fixWebKit154 !== void 0 ? fixWebKit154 : isWebKit154) && React.createElement(GlobalFixWebKitStyle, null),
-                children))));
+        React.createElement(StyledThemeProvider, { theme: theme }, children)));
 };
 /**
  * theme wrapper, apply in root,

package/foundation/index.d.ts

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

package/foundation/index.js

@@ -4,7 +4,6 @@ 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("./isWebKit154"), exports);
 tslib_1.__exportStar(require("./contexts"), exports);
 tslib_1.__exportStar(require("./hoc"), exports);
 tslib_1.__exportStar(require("./hooks"), exports);

package/foundation/theme/ThemeProvider.d.ts

@@ -4,12 +4,6 @@ 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,6 @@ 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 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,17 +14,13 @@ 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, fixWebKit154 = _a.fixWebKit154;
+    var themeProp = _a.theme, children = _a.children;
     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 = isWebKit154_1.getWebKit154Theme(!themeProp && isHaveParentRcTheme ? parentTheme : createTheme_1.default(themeProp), fixWebKit154);
+    var theme = !themeProp && isHaveParentRcTheme ? parentTheme : createTheme_1.default(themeProp);
     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,
-                (fixWebKit154 !== null && fixWebKit154 !== void 0 ? fixWebKit154 : isWebKit154_1.isWebKit154) && react_1.default.createElement(isWebKit154_1.GlobalFixWebKitStyle, null),
-                children))));
+        react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme }, children)));
 };
 /**
  * theme wrapper, apply in root,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.36.4",
+  "version": "2.37.0",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",

package/components/VirtualizedMenu/useNextFrame.d.ts

@@ -1 +0,0 @@
-export declare const useNextFrame: () => (task: Function) => void;

package/components/VirtualizedMenu/useNextFrame.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-exports.useNextFrame = function () {
-    var rafIdRef = react_1.useRef(null);
-    react_1.useLayoutEffect(function () {
-        if (rafIdRef.current !== null) {
-            cancelAnimationFrame(rafIdRef.current);
-        }
-    }, []);
-    return function (task) {
-        if (rafIdRef.current !== null) {
-            cancelAnimationFrame(rafIdRef.current);
-        }
-        rafIdRef.current = requestAnimationFrame(function () {
-            rafIdRef.current = requestAnimationFrame(function () {
-                rafIdRef.current = null;
-                task();
-            });
-        });
-    };
-};

package/es6/components/VirtualizedMenu/useNextFrame.js

@@ -1,20 +0,0 @@
-import { useRef, useLayoutEffect } from 'react';
-export var useNextFrame = function () {
-    var rafIdRef = useRef(null);
-    useLayoutEffect(function () {
-        if (rafIdRef.current !== null) {
-            cancelAnimationFrame(rafIdRef.current);
-        }
-    }, []);
-    return function (task) {
-        if (rafIdRef.current !== null) {
-            cancelAnimationFrame(rafIdRef.current);
-        }
-        rafIdRef.current = requestAnimationFrame(function () {
-            rafIdRef.current = requestAnimationFrame(function () {
-                rafIdRef.current = null;
-                task();
-            });
-        });
-    };
-};

package/es6/foundation/isWebKit154.js

@@ -1,57 +0,0 @@
-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/foundation/isWebKit154.d.ts

@@ -1,20 +0,0 @@
-/**
- * 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

@@ -1,59 +0,0 @@
-"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;