@ringcentral/juno 2.4.1 → 2.5.0

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, safari154Fix = _a.fixSafari154;
+    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), safari154Fix);
+    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,
-                (safari154Fix !== null && safari154Fix !== void 0 ? safari154Fix : isSafari154) && React.createElement(GlobalFixSafariStyle, null),
+                (fixWebKit154 !== null && fixWebKit154 !== void 0 ? fixWebKit154 : isWebKit154) && React.createElement(GlobalFixWebKitStyle, null),
                 children))));
 };
 /**

package/foundation/hooks/useLongPress/useLongPress.d.ts

@@ -5,6 +5,8 @@ export interface UseLongPressOptions {
     isPreventDefault?: boolean;
     /** the longPress delay */
     delay?: number;
+    /** for custom window */
+    externalWindow?: Window;
 }
 export declare type UseLongPressEventReason = 'keyboard' | 'click' | 'tap';
 export declare type UseLongPressOutput<T> = {
@@ -26,7 +28,7 @@ export declare type UseLongPressInput<T> = {
  *
  * @default UseLongPressOptions { isPreventDefault = true, delay = 300 }
  */
-export declare const useLongPress: <T = unknown>({ onTap, onPress }: UseLongPressOutput<T>, { onTouchStart, onTouchEnd, onMouseDown, onKeyDown, onKeyUp, onContextMenu, onMouseUp: onMouseUpArg, }?: UseLongPressInput<T>, { isPreventDefault, delay }?: UseLongPressOptions) => {
+export declare const useLongPress: <T = unknown>({ onTap, onPress }: UseLongPressOutput<T>, { onTouchStart, onTouchEnd, onMouseDown, onKeyDown, onKeyUp, onContextMenu, onMouseUp: onMouseUpArg, }?: UseLongPressInput<T>, { isPreventDefault, delay, externalWindow, }?: UseLongPressOptions) => {
     onTouchStart: (e: any) => void;
     onTouchEnd: (e: any) => void;
     onMouseDown: (event: React.MouseEvent<T, MouseEvent>) => void;

package/foundation/hooks/useLongPress/useLongPress.js

@@ -17,7 +17,7 @@ var useTouchMouseEvent_1 = require("../useTouchMouseEvent");
 exports.useLongPress = function (_a, _b, _c) {
     var onTap = _a.onTap, onPress = _a.onPress;
     var _d = _b === void 0 ? {} : _b, onTouchStart = _d.onTouchStart, onTouchEnd = _d.onTouchEnd, onMouseDown = _d.onMouseDown, onKeyDown = _d.onKeyDown, onKeyUp = _d.onKeyUp, onContextMenu = _d.onContextMenu, onMouseUpArg = _d.onMouseUp;
-    var _e = _c === void 0 ? {} : _c, _f = _e.isPreventDefault, isPreventDefault = _f === void 0 ? true : _f, _g = _e.delay, delay = _g === void 0 ? 300 : _g;
+    var _e = _c === void 0 ? {} : _c, _f = _e.isPreventDefault, isPreventDefault = _f === void 0 ? true : _f, _g = _e.delay, delay = _g === void 0 ? 300 : _g, _h = _e.externalWindow, externalWindow = _h === void 0 ? window : _h;
     var isEmittedRef = react_1.useRef(false);
     var isA11yDownRef = react_1.useRef(false);
     var elmRef = react_1.useRef(null);
@@ -31,7 +31,7 @@ exports.useLongPress = function (_a, _b, _c) {
     }, delay);
     var end = function (e) {
         // ! mouse up only trigger when up on element, so we host that in document
-        document.removeEventListener('mouseup', onMouseUp);
+        externalWindow.document.removeEventListener('mouseup', onMouseUp);
         if (!isEmittedRef.current && useTouchMouseEvent_1.isElmEqualOrContain(e.target, elmRef)) {
             onTap === null || onTap === void 0 ? void 0 : onTap(e, reasonRef.current);
         }
@@ -41,7 +41,7 @@ exports.useLongPress = function (_a, _b, _c) {
     };
     var start = function (e) {
         // ! mouse up only trigger when up on element, so we host that in document
-        document.addEventListener('mouseup', onMouseUp);
+        externalWindow.document.addEventListener('mouseup', onMouseUp);
         var isTouch = e.type === 'touchstart';
         if (!isTouch)
             e.preventDefault();
@@ -51,7 +51,7 @@ exports.useLongPress = function (_a, _b, _c) {
         }
         emitLongPress(e);
     };
-    var _h = useTouchMouseEvent_1.useTouchMouseEvent({
+    var _j = useTouchMouseEvent_1.useTouchMouseEvent({
         onTouchStart: function (e) {
             onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
             start(e);
@@ -68,7 +68,7 @@ exports.useLongPress = function (_a, _b, _c) {
             onMouseUpArg === null || onMouseUpArg === void 0 ? void 0 : onMouseUpArg(e);
             end(e);
         },
-    }, { isPreventDefault: isPreventDefault }), onMouseUp = _h.onMouseUp, events = tslib_1.__rest(_h, ["onMouseUp"]);
+    }, { isPreventDefault: isPreventDefault }), onMouseUp = _j.onMouseUp, events = tslib_1.__rest(_j, ["onMouseUp"]);
     var handleDeleteKeyDown = useA11yKeyEvent_1.useA11yKeyEvent(function (e) {
         reasonRef.current = 'keyboard';
         // * keydown when hold will trigger many time, show when current is a11y down, not trigger again
@@ -94,8 +94,8 @@ exports.useLongPress = function (_a, _b, _c) {
     react_1.useEffect(function () {
         return function () {
             // * clean when in start remove
-            document.removeEventListener('mouseup', onMouseUp);
+            externalWindow.document.removeEventListener('mouseup', onMouseUp);
         };
-    }, [onMouseUp]);
+    }, [onMouseUp, externalWindow]);
     return tslib_1.__assign({ ref: elmRef, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, events);
 };

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/{isSafari154.js → isWebKit154.js}

@@ -4,51 +4,56 @@ 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.
- * Remove this workaround once the Safari bug is 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.isSafari154 = typeof navigator !== 'undefined' &&
-    (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) ||
-        /(iPhone|iPad)/.test(navigator.userAgent)) &&
-    /15\.[4-9]/i.test(navigator.userAgent);
-var FixSafari154Classes = classes_1.RcClasses(['paper'], 'RcFixSafari154');
+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.getSafari154Theme = function (theme, enable) {
-    if (enable !== null && enable !== void 0 ? enable : exports.isSafari154) {
+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: FixSafari154Classes.paper },
+                    PopoverClasses: { paper: FixWebKit154Classes.paper },
                 },
                 RcVirtualizedMenu: {
-                    PopoverClasses: { paper: FixSafari154Classes.paper },
+                    PopoverClasses: { paper: FixWebKit154Classes.paper },
                 },
                 MuiPopover: {
-                    PaperProps: { className: FixSafari154Classes.paper },
+                    PaperProps: { className: FixWebKit154Classes.paper },
                 },
                 // mui tooltip prop will cover all existing props
                 RcTooltip: {
                     classes: {
-                        tooltip: FixSafari154Classes.paper,
+                        tooltip: FixWebKit154Classes.paper,
                     },
                 },
                 // mui grow not accept global prop
                 RcGrow: {
-                    className: FixSafari154Classes.paper,
+                    className: FixWebKit154Classes.paper,
                 },
             },
         }, theme);
     }
     return theme;
 };
-exports.fixSafariTransitionStyle = 'all 159ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
+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 in Safari 15.4.
+ * A global style that can be used to
+ * apply a workaround for the CSS transition bug after WebKit 15.4.
  */
-exports.GlobalFixSafariStyle = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  .", " {\n    transition: ", " !important;\n  }\n"], ["\n  .", " {\n    transition: ", " !important;\n  }\n"])), FixSafari154Classes.paper, exports.fixSafariTransitionStyle);
+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

@@ -9,7 +9,7 @@ declare type SubThemeProviderProps = {
      *
      * use for when your environment need that fix but userAgent not have safari
      */
-    fixSafari154?: boolean;
+    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, safari154Fix = _a.fixSafari154;
+    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), safari154Fix);
+    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,
-                (safari154Fix !== null && safari154Fix !== void 0 ? safari154Fix : 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.1",
+  "version": "2.5.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,52 +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) ||
-        /(iPhone|iPad)/.test(navigator.userAgent)) &&
-    /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, enable) {
-    if (enable !== null && enable !== void 0 ? enable : isSafari154) {
-        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);
-    }
-    return 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;

package/foundation/isSafari154.d.ts

@@ -1,15 +0,0 @@
-/**
- * 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 isSafari154: 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 getSafari154Theme: (theme: any, enable?: boolean | undefined) => any;
-export declare const 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 declare const GlobalFixSafariStyle: import("styled-components").GlobalStyleClass<{}, import("styled-components").DefaultTheme>;