@ringcentral/juno 2.35.1 → 2.35.3

package/components/Forms/Picker/DatePicker/Calendar.js

@@ -20,6 +20,7 @@ var Calendar = react_1.forwardRef(function (_a, ref) {
     var calendarRef = react_1.useRef(null);
     var previousFocusDate = foundation_1.usePrevious(function () { return focusedDate; });
     var previousView = foundation_1.usePrevious(function () { return view; });
+    var doc = foundation_1.useRcPortalWindowContext().document;
     var weeks = react_1.useRef([]);
     // * `getWeekdays` not set locale, need set locale before get
     dayjs_1.default.locale(utils.locale);
@@ -152,19 +153,21 @@ var Calendar = react_1.forwardRef(function (_a, ref) {
     // same month anchor switch
     react_1.useLayoutEffect(function () {
         if (sameMonthDate && !viewChange) {
-            utils_2.focusDayElement();
+            utils_2.focusDayElement(doc);
         }
     });
     // when view change and current is day also focusDay again
     react_1.useLayoutEffect(function () {
         if (previousView && view === 'day' && viewChange) {
-            utils_2.focusDayElement();
+            utils_2.focusDayElement(doc);
         }
-    }, [previousView, view, viewChange]);
+    }, [previousView, view, viewChange, doc]);
     react_1.useLayoutEffect(function () {
-        utils_2.focusDayElement();
-        calendarRef.current = document.querySelector("." + utils_2.RcDatePickerClasses.popover + " ." + utils_2.RcDatePickerClasses.popoverPaper);
-        var unsubscribe = utils_1.transitionendSubscriber(calendarRef.current, utils_2.onTransitionEnd);
+        utils_2.focusDayElement(doc);
+        calendarRef.current = doc.querySelector("." + utils_2.RcDatePickerClasses.popover + " ." + utils_2.RcDatePickerClasses.popoverPaper);
+        var unsubscribe = utils_1.transitionendSubscriber(calendarRef.current, function (event) {
+            utils_2.onTransitionEnd(event, doc);
+        });
         return function () {
             unsubscribe();
         };

package/components/Forms/Picker/DatePicker/utils/DatePickerUtils.d.ts

@@ -13,12 +13,12 @@ declare type DatePickerVolume = {
 };
 export declare const RcDatePickerSizes: UnitMap<RcDatePickerSize, DatePickerVolume>;
 export declare const RcDatePickerIconWidths: UnitMap<RcDatePickerSize, string>;
-export declare const focusDayElement: () => void;
+export declare const focusDayElement: (doc?: Document) => void;
 export declare const isSameYearAndMonth: ({ source, comparing }: {
     source: MuiPickersDate;
     comparing: MuiPickersDate;
 }, utils: import("@date-io/core/IUtils").IUtils<MuiPickersDate>) => boolean;
-export declare const onTransitionEnd: (event: any) => void;
+export declare const onTransitionEnd: (event: any, doc?: Document) => void;
 declare type ValidateDateInRange = {
     now: MuiPickersDate;
 } & Pick<CalendarProps, 'dateRange' | 'disableFuture' | 'disablePast'>;

package/components/Forms/Picker/DatePicker/utils/DatePickerUtils.js

@@ -33,8 +33,9 @@ exports.RcDatePickerIconWidths = {
     small: '18px',
     medium: '28px',
 };
-exports.focusDayElement = function () {
-    var elm = document.querySelector('[data-picker-focused]');
+exports.focusDayElement = function (doc) {
+    if (doc === void 0) { doc = document; }
+    var elm = doc.querySelector('[data-picker-focused]');
     elm === null || elm === void 0 ? void 0 : elm.focus();
 };
 exports.isSameYearAndMonth = function (_a, utils) {
@@ -48,8 +49,9 @@ exports.isSameYearAndMonth = function (_a, utils) {
     var comparingYear = utils.getYear(comparing);
     return thisMonth === comparingMonth && thisYear === comparingYear;
 };
-exports.onTransitionEnd = function (event) {
-    var activeElm = document.activeElement;
+exports.onTransitionEnd = function (event, doc) {
+    if (doc === void 0) { doc = document; }
+    var activeElm = doc.activeElement;
     if (event.target.dataset['transitionTag'] &&
         // * check is not focus on other thing, like click next month
         activeElm.dataset['pickerAction'] !== 'true') {

package/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -208,40 +208,42 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
         throttleCalculateGroupInfo();
     }, [value], false);
     foundation_1.useOnReRender(function () {
-        var e_4, _a;
         var tabsInfo = getTabsInfoFromChildren(childrenProp);
         var newGroupInfo = {
             all: tabsInfo,
             tab: [],
             menu: [],
         };
-        var _loop_1 = function (tabInfo) {
-            if (groupInfo.tab.some(function (_a) {
-                var key = _a.key;
-                return tabInfo.key === key;
-            })) {
-                newGroupInfo.tab.push(tabInfo);
-            }
-            else {
-                // push new tab or invisible old tab to menu group
-                newGroupInfo.menu.push(tabInfo);
-            }
-        };
-        try {
-            // Prevent moreButton from flickering after children update
-            for (var tabsInfo_1 = tslib_1.__values(tabsInfo), tabsInfo_1_1 = tabsInfo_1.next(); !tabsInfo_1_1.done; tabsInfo_1_1 = tabsInfo_1.next()) {
-                var tabInfo = tabsInfo_1_1.value;
-                _loop_1(tabInfo);
-            }
-        }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
-        finally {
+        setGroupInfo(function (preGroupInfo) {
+            var e_4, _a;
+            var _loop_1 = function (tabInfo) {
+                if (preGroupInfo.tab.some(function (_a) {
+                    var key = _a.key;
+                    return tabInfo.key === key;
+                })) {
+                    newGroupInfo.tab.push(tabInfo);
+                }
+                else {
+                    // push new tab or invisible old tab to menu group
+                    newGroupInfo.menu.push(tabInfo);
+                }
+            };
             try {
-                if (tabsInfo_1_1 && !tabsInfo_1_1.done && (_a = tabsInfo_1.return)) _a.call(tabsInfo_1);
+                // Prevent moreButton from flickering after children update
+                for (var tabsInfo_1 = tslib_1.__values(tabsInfo), tabsInfo_1_1 = tabsInfo_1.next(); !tabsInfo_1_1.done; tabsInfo_1_1 = tabsInfo_1.next()) {
+                    var tabInfo = tabsInfo_1_1.value;
+                    _loop_1(tabInfo);
+                }
             }
-            finally { if (e_4) throw e_4.error; }
-        }
-        setGroupInfo(newGroupInfo);
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (tabsInfo_1_1 && !tabsInfo_1_1.done && (_a = tabsInfo_1.return)) _a.call(tabsInfo_1);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            return newGroupInfo;
+        });
     }, [childrenProp], false);
     react_1.useEffect(function () {
         onGroupInfoChange === null || onGroupInfoChange === void 0 ? void 0 : onGroupInfoChange([

package/es6/components/Forms/Picker/DatePicker/Calendar.js

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import MuiCircularProgress from '@material-ui/core/CircularProgress';
 import { useUtils as useMuiUtils } from '@material-ui/pickers';
 import { runKeyHandler } from '@material-ui/pickers/_shared/hooks/useKeyDown';
-import { pick, useEventCallback, usePrevious, useResultRef, } from '../../../../foundation';
+import { pick, useEventCallback, usePrevious, useRcPortalWindowContext, useResultRef, } from '../../../../foundation';
 import { RcButton } from '../../../Buttons';
 import { transitionendSubscriber } from '../../../Transitions/utils';
 import { DatePickerHeader, } from './DatePickerHeader';
@@ -18,6 +18,7 @@ var Calendar = forwardRef(function (_a, ref) {
     var calendarRef = useRef(null);
     var previousFocusDate = usePrevious(function () { return focusedDate; });
     var previousView = usePrevious(function () { return view; });
+    var doc = useRcPortalWindowContext().document;
     var weeks = useRef([]);
     // * `getWeekdays` not set locale, need set locale before get
     dayjs.locale(utils.locale);
@@ -150,19 +151,21 @@ var Calendar = forwardRef(function (_a, ref) {
     // same month anchor switch
     useLayoutEffect(function () {
         if (sameMonthDate && !viewChange) {
-            focusDayElement();
+            focusDayElement(doc);
         }
     });
     // when view change and current is day also focusDay again
     useLayoutEffect(function () {
         if (previousView && view === 'day' && viewChange) {
-            focusDayElement();
+            focusDayElement(doc);
         }
-    }, [previousView, view, viewChange]);
+    }, [previousView, view, viewChange, doc]);
     useLayoutEffect(function () {
-        focusDayElement();
-        calendarRef.current = document.querySelector("." + RcDatePickerClasses.popover + " ." + RcDatePickerClasses.popoverPaper);
-        var unsubscribe = transitionendSubscriber(calendarRef.current, onTransitionEnd);
+        focusDayElement(doc);
+        calendarRef.current = doc.querySelector("." + RcDatePickerClasses.popover + " ." + RcDatePickerClasses.popoverPaper);
+        var unsubscribe = transitionendSubscriber(calendarRef.current, function (event) {
+            onTransitionEnd(event, doc);
+        });
         return function () {
             unsubscribe();
         };

package/es6/components/Forms/Picker/DatePicker/utils/DatePickerUtils.js

@@ -31,8 +31,9 @@ export var RcDatePickerIconWidths = {
     small: '18px',
     medium: '28px',
 };
-export var focusDayElement = function () {
-    var elm = document.querySelector('[data-picker-focused]');
+export var focusDayElement = function (doc) {
+    if (doc === void 0) { doc = document; }
+    var elm = doc.querySelector('[data-picker-focused]');
     elm === null || elm === void 0 ? void 0 : elm.focus();
 };
 export var isSameYearAndMonth = function (_a, utils) {
@@ -46,8 +47,9 @@ export var isSameYearAndMonth = function (_a, utils) {
     var comparingYear = utils.getYear(comparing);
     return thisMonth === comparingMonth && thisYear === comparingYear;
 };
-export var onTransitionEnd = function (event) {
-    var activeElm = document.activeElement;
+export var onTransitionEnd = function (event, doc) {
+    if (doc === void 0) { doc = document; }
+    var activeElm = doc.activeElement;
     if (event.target.dataset['transitionTag'] &&
         // * check is not focus on other thing, like click next month
         activeElm.dataset['pickerAction'] !== 'true') {

package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -206,40 +206,42 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
         throttleCalculateGroupInfo();
     }, [value], false);
     useOnReRender(function () {
-        var e_4, _a;
         var tabsInfo = getTabsInfoFromChildren(childrenProp);
         var newGroupInfo = {
             all: tabsInfo,
             tab: [],
             menu: [],
         };
-        var _loop_1 = function (tabInfo) {
-            if (groupInfo.tab.some(function (_a) {
-                var key = _a.key;
-                return tabInfo.key === key;
-            })) {
-                newGroupInfo.tab.push(tabInfo);
-            }
-            else {
-                // push new tab or invisible old tab to menu group
-                newGroupInfo.menu.push(tabInfo);
-            }
-        };
-        try {
-            // Prevent moreButton from flickering after children update
-            for (var tabsInfo_1 = __values(tabsInfo), tabsInfo_1_1 = tabsInfo_1.next(); !tabsInfo_1_1.done; tabsInfo_1_1 = tabsInfo_1.next()) {
-                var tabInfo = tabsInfo_1_1.value;
-                _loop_1(tabInfo);
-            }
-        }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
-        finally {
+        setGroupInfo(function (preGroupInfo) {
+            var e_4, _a;
+            var _loop_1 = function (tabInfo) {
+                if (preGroupInfo.tab.some(function (_a) {
+                    var key = _a.key;
+                    return tabInfo.key === key;
+                })) {
+                    newGroupInfo.tab.push(tabInfo);
+                }
+                else {
+                    // push new tab or invisible old tab to menu group
+                    newGroupInfo.menu.push(tabInfo);
+                }
+            };
             try {
-                if (tabsInfo_1_1 && !tabsInfo_1_1.done && (_a = tabsInfo_1.return)) _a.call(tabsInfo_1);
+                // Prevent moreButton from flickering after children update
+                for (var tabsInfo_1 = __values(tabsInfo), tabsInfo_1_1 = tabsInfo_1.next(); !tabsInfo_1_1.done; tabsInfo_1_1 = tabsInfo_1.next()) {
+                    var tabInfo = tabsInfo_1_1.value;
+                    _loop_1(tabInfo);
+                }
             }
-            finally { if (e_4) throw e_4.error; }
-        }
-        setGroupInfo(newGroupInfo);
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (tabsInfo_1_1 && !tabsInfo_1_1.done && (_a = tabsInfo_1.return)) _a.call(tabsInfo_1);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            return newGroupInfo;
+        });
     }, [childrenProp], false);
     useEffect(function () {
         onGroupInfoChange === null || onGroupInfoChange === void 0 ? void 0 : onGroupInfoChange([

package/package.json

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