@ringcentral/juno 2.35.2 → 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/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/package.json

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