@ringcentral/juno 2.0.0-rc.0 → 2.0.3-beta.0

package/es6/components/Buttons/Button/Button.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, } from 'react';
 import MuiButton from '@material-ui/core/Button';
-import { combineClasses, isRcElement, removeClassName, styled, useForkRef, useTheme, useThemeProps, withDeprecatedCheck, } from '../../../foundation';
+import { combineClasses, isRcElement, removeClassName, styled, useDeprecatedCheck, useForkRef, useTheme, useThemeProps, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
 import { RcIconSizes } from '../../Icon/utils';
 import { RcCircularProgress } from '../../Progress';
@@ -11,6 +11,16 @@ import { getButtonIconSize, RcButtonClasses } from './utils';
 var _RcButton = forwardRef(function (inProps, ref) {
     var _a, _b;
     var props = useThemeProps({ props: inProps, name: 'RcButton' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcButton, props, [
+            {
+                prop: 'IconProps',
+                time: '2021-4',
+                comment: "@deprecated Icon, please use startIcon with `<RcIcon />` */",
+            },
+        ]);
+    }
     var childrenProp = props.children, classesProp = props.classes, startIconProp = props.startIcon, endIconProp = props.endIcon, loading = props.loading, loadingMode = props.loadingMode, disabled = props.disabled, IconProps = props.IconProps, size = props.size, color = props.color, CircularProgressProps = props.CircularProgressProps, variant = props.variant, disabledVariant = props.disabledVariant, radius = props.radius, keepElevation = props.keepElevation, rest = __rest(props, ["children", "classes", "startIcon", "endIcon", "loading", "loadingMode", "disabled", "IconProps", "size", "color", "CircularProgressProps", "variant", "disabledVariant", "radius", "keepElevation"]);
     var theme = useTheme();
     var innerRef = useRef(null);
@@ -83,13 +93,7 @@ var _RcButton = forwardRef(function (inProps, ref) {
     return (React.createElement(MuiButton, __assign({ ref: buttonRef, disabled: disabled || loading, variant: isPlain ? undefined : variant, disableRipple: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.props) === null || _a === void 0 ? void 0 : _a.MuiButton) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, startIcon: startIcon, endIcon: endIcon, classes: classes }, rest), loading && isReplace ? loadingElm : childrenProp));
 });
 /** @release */
-var RcButton = styled(withDeprecatedCheck(withTooltip(_RcButton), [
-    {
-        prop: 'IconProps',
-        time: '2021-4',
-        comment: "@deprecated Icon, please use startIcon with `<RcIcon />` */",
-    },
-], 'RcButton'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), buttonStyle);
+var RcButton = styled(withTooltip(_RcButton))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), buttonStyle);
 RcButton.defaultProps = {
     size: 'large',
     color: 'primary',

package/es6/components/Buttons/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, memo } from 'react';
 import clsx from 'clsx';
-import { combineProps, styled, useTheme, useThemeProps, withDeprecatedCheck, } from '../../../foundation';
+import { combineProps, styled, useDeprecatedCheck, useTheme, useThemeProps, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
 import { RcTooltip, withTooltip } from '../../Tooltip';
 import { RcButtonBase } from '../ButtonBase';
@@ -11,6 +11,10 @@ import { RcIconButtonClasses, RcIconButtonTouchRippleClasses } from './utils';
 var _RcIconButton = memo(forwardRef(function (inProps, ref) {
     var _a;
     var props = useThemeProps({ props: inProps, name: 'RcIconButton' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcIconButton, props, rcIconButtonWarning);
+    }
     var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, className = props.className, classes = props.classes, children = props.children, title = props.title, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, autoFocus = props.autoFocus, href = props.href, rest = __rest(props, ["buttonRef", "className", "classes", "children", "title", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "autoFocus", "href"]);
     var theme = useTheme();
     var isOutline = variant === 'outline';
@@ -42,9 +46,7 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
     }
     return iconButton;
 }));
-var RcIconButton = styled(withDeprecatedCheck(withTooltip(_RcIconButton), 
-// TODO remove when ready
-rcIconButtonWarning, 'RcIconButton'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
+var RcIconButton = styled(withTooltip(_RcIconButton))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
 RcIconButton.displayName = 'RcIconButton';
 RcIconButton.defaultProps = {
     variant: 'round',

package/es6/components/Buttons/SplitButton/SplitButton.js

@@ -59,7 +59,8 @@ var _RcSplitButton = forwardRef(function (inProps, ref) {
         };
     }, [color, loading, toButtonSize, type, variant]);
     var _j = useMemo(function () {
-        if (!(childrenProp instanceof Array)) {
+        if (process.env.NODE_ENV !== 'production' &&
+            !(childrenProp instanceof Array)) {
             logInDev({
                 component: 'RcSplitButton',
                 message: 'children must be implement with RcSplitButtonChildrenProps[]',

package/es6/components/DetachedWindow/DetachedWindow.js

@@ -13,7 +13,7 @@ import { addCommentInHeader, DetachedWindowRefMaps, MUI_INSERTION_POINT, openExt
  */
 var RcDetachedWindow = memo(forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDetachedWindow' });
-    var childrenProp = props.children, onBeforeunload = props.onBeforeunload, onUnload = props.onUnload, onload = props.onload, title = props.title, url = props.url, name = props.name, specs = props.specs, replace = props.replace, open = props.open, onOpen = props.onOpen, getWindow = props.getWindow, keep = props.keep;
+    var childrenProp = props.children, onBeforeunload = props.onBeforeunload, onUnload = props.onUnload, onload = props.onload, title = props.title, url = props.url, name = props.name, specs = props.specs, open = props.open, onOpen = props.onOpen, getWindow = props.getWindow, keep = props.keep;
     var _a = __read(useState(), 2), externalWindow = _a[0], setExternalWindow = _a[1];
     var isCloseByWindowExitRef = useRef(false);
     var innerRef = useRef(null);
@@ -36,13 +36,15 @@ var RcDetachedWindow = memo(forwardRef(function (inProps, ref) {
     });
     var openWindow = useEventCallback(function () {
         var newWindow = getWindow
-            ? getWindow({ url: url, name: name, specs: specs, replace: replace, title: title })
+            ? getWindow({ url: url, name: name, specs: specs, title: title })
             : openExternalWindow(props);
         if (!newWindow) {
-            logInDev({
-                component: 'RcDetachedWindow',
-                message: 'Please check your window instance, that `window.open` should not trigger by another window',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcDetachedWindow',
+                    message: 'Please check your window instance, that `window.open` should not trigger by another window',
+                });
+            }
             return;
         }
         if (title)

package/es6/components/Dialer/DialPad/utils/useKeyAudio.js

@@ -25,10 +25,10 @@ export var useKeyAudio = function (_a) {
                 case 2:
                     audio.currentTime = 0;
                     audio.src = src;
-                    lastPlayRef.current = audio
-                        .play()
-                        .catch(function (reason) {
-                        return logInDev({ component: 'RcDialerPad', message: reason });
+                    lastPlayRef.current = audio.play().catch(function (reason) {
+                        if (process.env.NODE_ENV !== 'production') {
+                            logInDev({ component: 'RcDialerPad', message: reason });
+                        }
                     });
                     return [2 /*return*/];
             }

package/es6/components/Dialog/Dialog.js

@@ -1,13 +1,23 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useMemo } from 'react';
 import MuiDialog from '@material-ui/core/Dialog';
-import { combineClasses, styled, useRcPortalWindowContext, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { combineClasses, styled, useDeprecatedCheck, useRcPortalWindowContext, useThemeProps, } from '../../foundation';
 import { useUnmountPortalHandler } from '../PortalHost';
 import { DialogStyle } from './styles';
 import { RcDialogClasses } from './utils';
 import { RcDialogContext } from './utils/DialogContext';
 var _RcDialog = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialog' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcDialog, props, [
+            {
+                prop: 'size',
+                time: '2021-11',
+                comment: "\n     * please use `maxWidth` and `fullScreen` directly\n     *\n     * - 'fullScreen' => false\n     * - 'large' => `md`\n     * - 'medium' => `sm`\n     * - 'small' => `xs`\n     * - 'xsmall' => no longer exist, should custom by yourself\n     */",
+            },
+        ]);
+    }
     var classesProp = props.classes, _a = props.size, size = _a === void 0 ? 'medium' : _a, maxWidthProp = props.maxWidth, _b = props.fullWidth, fullWidth = _b === void 0 ? true : _b, childrenSize = props.childrenSize, children = props.children, TransitionPropsProp = props.TransitionProps, rest = __rest(props, ["classes", "size", "maxWidth", "fullWidth", "childrenSize", "children", "TransitionProps"]);
     var classes = useMemo(function () { return combineClasses(RcDialogClasses, classesProp); }, [classesProp]);
     var externalWindow = useRcPortalWindowContext().externalWindow;
@@ -35,13 +45,7 @@ var _RcDialog = forwardRef(function (inProps, ref) {
     return (React.createElement(MuiDialog, __assign({ ref: ref, fullWidth: fullWidth, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, maxWidth: maxWidth, fullScreen: size === 'fullScreen' ? true : undefined, classes: classes, TransitionProps: TransitionProps }, rest),
         React.createElement(RcDialogContext.Provider, { value: contextValue }, children)));
 });
-var RcDialog = styled(withDeprecatedCheck(_RcDialog, [
-    {
-        prop: 'size',
-        time: '2021-11',
-        comment: "\n   * please use `maxWidth` and `fullScreen` directly\n   *\n   * - 'fullScreen' => false\n   * - 'large' => `md`\n   * - 'medium' => `sm`\n   * - 'small' => `xs`\n   * - 'xsmall' => no longer exist, should custom by yourself\n   */",
-    },
-], 'RcDialog'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogStyle);
+var RcDialog = styled(_RcDialog)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogStyle);
 RcDialog.defaultProps = {};
 RcDialog.displayName = 'RcDialog';
 export { RcDialog, RcDialogContext };

package/es6/components/Downshift/Downshift.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { ArrowDown, ArrowUp } from '@ringcentral/juno-icon';
-import { combineClasses, combineProps, getParsePaletteColor, omit, styled, useEventCallback, useForkRef, useTheme, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { combineClasses, combineProps, getParsePaletteColor, omit, styled, useDeprecatedCheck, useEventCallback, useForkRef, useTheme, useThemeProps, } from '../../foundation';
 import { RcChip } from '../Chip';
 import { ClearIconButton } from '../Forms/TextField/styles/ClearIconButton';
 import { RcVisuallyHidden } from '../VisuallyHidden';
@@ -10,6 +10,116 @@ import { RcSuggestionList } from './SuggestionList';
 import { DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_LIMIT_CHIPS, RcDownshiftDefaultFilterOptions, RcDownshiftInputClasses, useDownshift, useDownshiftError, } from './utils';
 var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDownshift' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcDownshift, props, [
+            {
+                prop: 'onSelectChange',
+                time: '2021-10',
+                comment: "@deprecated should use `onChange` */",
+            },
+            {
+                prop: 'suggestionItems',
+                time: '2021-10',
+                comment: "@deprecated  should use `options` to replace */",
+            },
+            {
+                prop: 'selectedItems',
+                time: '2021-10',
+                comment: "@deprecated  not need any more */",
+            },
+            {
+                prop: 'itemToString',
+                time: '2021-10',
+                comment: "@deprecated use `getOptionLabel` to replace that */",
+            },
+            {
+                prop: 'MenuItem',
+                time: '2021-10',
+                comment: "@deprecated should use `renderOption` to replace that */",
+            },
+            {
+                prop: 'minRowHeight',
+                time: '2021-10',
+                comment: "@deprecated suggestion list row min height for virtual list */",
+            },
+            {
+                prop: 'enableFreeChips',
+                time: '2021-10',
+                comment: "@deprecated enable free chip mode, should use `freeSolo` to replace that */",
+            },
+            {
+                prop: 'inputLabel',
+                time: '2021-10',
+                comment: "@deprecated please use `label` to replace that */",
+            },
+            {
+                prop: 'inputPlaceholder',
+                time: '2021-10',
+                comment: "@deprecated input element placeholder attribute */",
+            },
+            {
+                prop: 'maxLength',
+                time: '2021-10',
+                comment: "@deprecated input element maxlength, please use `TextFieldProps.inputProps.maxLength` */",
+            },
+            {
+                prop: 'screenReader',
+                time: '2021-10',
+                comment: "@deprecated should use `screenReaderProps` */",
+            },
+            {
+                prop: 'automationId',
+                time: '2021-10',
+                comment: "@deprecated wrapper automationId, should use `data-test-automation-id` directly */",
+            },
+            {
+                prop: 'InputItem',
+                time: '2021-10',
+                comment: "@deprecated just use the `renderTags` to render whole tags  */",
+            },
+            {
+                prop: 'emailError',
+                time: '2021-10',
+                comment: "@deprecated please calculate error outside by your self with `renderTags`, or prepare ready items with error field */",
+            },
+            {
+                prop: 'errorSelectedItems',
+                time: '2021-10',
+                comment: "@deprecated please calculate error outside by your self with `renderTags`, or prepare ready items with error field */",
+            },
+            {
+                prop: 'nameError',
+                time: '2021-10',
+                comment: "@deprecated replace to `error` */",
+            },
+            {
+                prop: 'keyToChips',
+                time: '2021-10',
+                comment: "@deprecated rename to `keyToTags` */",
+            },
+            {
+                prop: 'limitOfFreeChips',
+                time: '2021-10',
+                comment: "@deprecated should use `max` */",
+            },
+            {
+                prop: 'enableAutoTransform',
+                time: '2021-10',
+                comment: "@deprecated should use `autoSelect` */",
+            },
+            {
+                prop: 'messageRef',
+                time: '2021-10',
+                comment: "@deprecated should use `inputRef` */",
+            },
+            {
+                prop: 'TextFieldProps',
+                time: '2021-10',
+                comment: "@deprecated TextField props */",
+            },
+        ]);
+    }
     var theme = useTheme();
     var _a = props.itemToString, itemToString = _a === void 0 ? DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? DEFAULT_LIMIT_CHIPS : _c, minRowHeight = props.minRowHeight, suggestionItems = props.suggestionItems, messageRef = props.messageRef, MenuItem = props.MenuItem, inputLabel = props.inputLabel, nameError = props.nameError, maxLength = props.maxLength, InputItem = props.InputItem, emailError = props.emailError, autoSwitchEmail = props.autoSwitchEmail, enableFreeChips = props.enableFreeChips, inputPlaceholder = props.inputPlaceholder, errorSelectedItems = props.errorSelectedItems, enableAutoTransform = props.enableAutoTransform, allowPlainHelperText = props.allowPlainHelperText, TextFieldProps = props.TextFieldProps, selectedItemsProp = props.selectedItems, automationId = props.automationId, screenReader = props.screenReader, onSelectChange = props.onSelectChange, variant = props.variant, groupExpanded = props.groupExpanded, groupDefaultExpanded = props.groupDefaultExpanded, _d = props.groupVariant, groupVariant = _d === void 0 ? 'normal' : _d, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _e = props.value, valueProp = _e === void 0 ? selectedItemsProp : _e, _f = props.autoHighlight, autoHighlight = _f === void 0 ? true : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? true : _g, _h = props.clearBtn, clearBtn = _h === void 0 ? false : _h, _j = props.toggleButton, toggleButton = _j === void 0 ? false : _j, _k = props.multiple, multiple = _k === void 0 ? false : _k, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _l = props.getOptionLabel, getOptionLabel = _l === void 0 ? itemToString : _l, renderInput = props.renderInput, _m = props.label, label = _m === void 0 ? inputLabel : _m, _o = props.inputRef, inputRefProp = _o === void 0 ? messageRef : _o, _p = props.error, error = _p === void 0 ? nameError : _p, _q = props.placeholder, placeholder = _q === void 0 ? inputPlaceholder : _q, _r = props.freeSolo, freeSolo = _r === void 0 ? enableFreeChips : _r, _s = props.keyToTags, keyToTags = _s === void 0 ? keyToChips : _s, _t = props.maxFreeSolo, maxFreeSolo = _t === void 0 ? limitOfFreeChips : _t, SuggestionListProps = props.SuggestionListProps, _u = props.autoSelect, autoSelect = _u === void 0 ? enableAutoTransform : _u, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _v = props.defaultIsOpen, defaultIsOpen = _v === void 0 ? openOnFocus : _v, _w = props.disableCloseOnSelect, disableCloseOnSelect = _w === void 0 ? defaultIsOpen : _w, _x = props.onChange, onChangeProp = _x === void 0 ? onSelectChange : _x, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, focused = props.focused, color = props.color, rest = __rest(props, ["itemToString", "keyToChips", "limitOfFreeChips", "minRowHeight", "suggestionItems", "messageRef", "MenuItem", "inputLabel", "nameError", "maxLength", "InputItem", "emailError", "autoSwitchEmail", "enableFreeChips", "inputPlaceholder", "errorSelectedItems", "enableAutoTransform", "allowPlainHelperText", "TextFieldProps", "selectedItems", "automationId", "screenReader", "onSelectChange", "variant", "groupExpanded", "groupDefaultExpanded", "groupVariant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose", "focused", "color"]);
     var _y = __read(useState('bottom'), 2), position = _y[0], setPosition = _y[1];
@@ -20,7 +130,10 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     // * if that have pass old suggestionItems mean that use old logic
     var isNew = !suggestionItems;
     var oneOfTagError = false;
-    useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
+    }
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
     var _z = useDownshift({
         focused: focused,
@@ -180,116 +293,10 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                     }
                 },
             } }, getPopperProps(PopperProps)),
-            isOpen && (React.createElement(RcSuggestionList, __assign({ highlightedIndex: highlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, MenuItem: MenuItem, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getMenuProps: getMenuProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, onUpdatePopper: handleUpdatePopper, maxContainerHeight: 180, getOptionLabel: getOptionLabel }, SuggestionListProps))),
+            isOpen && (React.createElement(RcSuggestionList, __assign({ highlightedIndex: highlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, MenuItem: MenuItem, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getMenuProps: getMenuProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, onUpdatePopper: handleUpdatePopper, maxContainerHeight: 180, getOptionLabel: getOptionLabel, position: "unset" }, SuggestionListProps))),
             isRenderNoOptions && (renderNoOptions === null || renderNoOptions === void 0 ? void 0 : renderNoOptions(getNoOptionsProps, noOptionItem)))));
 }));
-var RcDownshift = styled(withDeprecatedCheck(_RcDownshift, [
-    {
-        prop: 'onSelectChange',
-        time: '2021-10',
-        comment: "@deprecated should use `onChange` */",
-    },
-    {
-        prop: 'suggestionItems',
-        time: '2021-10',
-        comment: "@deprecated  should use `options` to replace */",
-    },
-    {
-        prop: 'selectedItems',
-        time: '2021-10',
-        comment: "@deprecated  not need any more */",
-    },
-    {
-        prop: 'itemToString',
-        time: '2021-10',
-        comment: "@deprecated use `getOptionLabel` to replace that */",
-    },
-    {
-        prop: 'MenuItem',
-        time: '2021-10',
-        comment: "@deprecated should use `renderOption` to replace that */",
-    },
-    {
-        prop: 'minRowHeight',
-        time: '2021-10',
-        comment: "@deprecated suggestion list row min height for virtual list */",
-    },
-    {
-        prop: 'enableFreeChips',
-        time: '2021-10',
-        comment: "@deprecated enable free chip mode, should use `freeSolo` to replace that */",
-    },
-    {
-        prop: 'inputLabel',
-        time: '2021-10',
-        comment: "@deprecated please use `label` to replace that */",
-    },
-    {
-        prop: 'inputPlaceholder',
-        time: '2021-10',
-        comment: "@deprecated input element placeholder attribute */",
-    },
-    {
-        prop: 'maxLength',
-        time: '2021-10',
-        comment: "@deprecated input element maxlength, please use `TextFieldProps.inputProps.maxLength` */",
-    },
-    {
-        prop: 'screenReader',
-        time: '2021-10',
-        comment: "@deprecated should use `screenReaderProps` */",
-    },
-    {
-        prop: 'automationId',
-        time: '2021-10',
-        comment: "@deprecated wrapper automationId, should use `data-test-automation-id` directly */",
-    },
-    {
-        prop: 'InputItem',
-        time: '2021-10',
-        comment: "@deprecated just use the `renderTags` to render whole tags  */",
-    },
-    {
-        prop: 'emailError',
-        time: '2021-10',
-        comment: "@deprecated please calculate error outside by your self with `renderTags`, or prepare ready items with error field */",
-    },
-    {
-        prop: 'errorSelectedItems',
-        time: '2021-10',
-        comment: "@deprecated please calculate error outside by your self with `renderTags`, or prepare ready items with error field */",
-    },
-    {
-        prop: 'nameError',
-        time: '2021-10',
-        comment: "@deprecated replace to `error` */",
-    },
-    {
-        prop: 'keyToChips',
-        time: '2021-10',
-        comment: "@deprecated rename to `keyToTags` */",
-    },
-    {
-        prop: 'limitOfFreeChips',
-        time: '2021-10',
-        comment: "@deprecated should use `max` */",
-    },
-    {
-        prop: 'enableAutoTransform',
-        time: '2021-10',
-        comment: "@deprecated should use `autoSelect` */",
-    },
-    {
-        prop: 'messageRef',
-        time: '2021-10',
-        comment: "@deprecated should use `inputRef` */",
-    },
-    {
-        prop: 'TextFieldProps',
-        time: '2021-10',
-        comment: "@deprecated TextField props */",
-    },
-], 'RcDownshift'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DownshiftStyle);
+var RcDownshift = styled(_RcDownshift)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DownshiftStyle);
 RcDownshift.defaultProps = {};
 RcDownshift.displayName = 'RcDownshift';
 var ExportType = RcDownshift;

package/es6/components/Downshift/SuggestionList/SuggestionList.js

@@ -17,8 +17,9 @@ var List = forwardRef(function (props, ref) {
     return React.createElement("div", __assign({ ref: forkRef, "data-suggestion-list": true }, props));
 });
 var SuggestionList = forwardRef(function (inProps, ref) {
+    var _a;
     var props = useThemeProps({ props: inProps, name: 'RcSuggestionList' });
-    var highlightedIndex = props.highlightedIndex, options = props.options, getItemProps = props.getItemProps, getMenuProps = props.getMenuProps, renderOption = props.renderOption, inputValue = props.inputValue, groupVariant = props.groupVariant, groupExpanded = props.groupExpanded, renderGroup = props.renderGroup, optionsGroupList = props.optionsGroupList, getOptionDisabled = props.getOptionDisabled, MenuItem = props.MenuItem, changeHighlightedIndexReason = props.changeHighlightedIndexReason, isKeepHighlightedIndex = props.isKeepHighlightedIndex, componentsProp = props.components, onUpdatePopper = props.onUpdatePopper, getOptionLabel = props.getOptionLabel, padding = props.padding, _a = props.maxContainerHeight, maxContainerHeight = _a === void 0 ? '100%' : _a, classNameProp = props.className, classesProp = props.classes, rest = __rest(props, ["highlightedIndex", "options", "getItemProps", "getMenuProps", "renderOption", "inputValue", "groupVariant", "groupExpanded", "renderGroup", "optionsGroupList", "getOptionDisabled", "MenuItem", "changeHighlightedIndexReason", "isKeepHighlightedIndex", "components", "onUpdatePopper", "getOptionLabel", "padding", "maxContainerHeight", "className", "classes"]);
+    var highlightedIndex = props.highlightedIndex, options = props.options, getItemProps = props.getItemProps, getMenuProps = props.getMenuProps, renderOption = props.renderOption, inputValue = props.inputValue, groupVariant = props.groupVariant, groupExpanded = props.groupExpanded, renderGroup = props.renderGroup, optionsGroupList = props.optionsGroupList, getOptionDisabled = props.getOptionDisabled, MenuItem = props.MenuItem, changeHighlightedIndexReason = props.changeHighlightedIndexReason, isKeepHighlightedIndex = props.isKeepHighlightedIndex, componentsProp = props.components, onUpdatePopper = props.onUpdatePopper, getOptionLabel = props.getOptionLabel, padding = props.padding, _b = props.maxContainerHeight, maxContainerHeight = _b === void 0 ? '100%' : _b, classNameProp = props.className, classesProp = props.classes, _c = props.position, position = _c === void 0 ? 'absolute' : _c, rest = __rest(props, ["highlightedIndex", "options", "getItemProps", "getMenuProps", "renderOption", "inputValue", "groupVariant", "groupExpanded", "renderGroup", "optionsGroupList", "getOptionDisabled", "MenuItem", "changeHighlightedIndexReason", "isKeepHighlightedIndex", "components", "onUpdatePopper", "getOptionLabel", "padding", "maxContainerHeight", "className", "classes", "position"]);
     var vlRef = useRef(null);
     var forkVlRef = useForkRef(ref, vlRef);
     var isTitleMode = groupVariant === 'normal';
@@ -27,7 +28,7 @@ var SuggestionList = forwardRef(function (inProps, ref) {
     var itemCount = options.length;
     var classes = combineClasses(RcSuggestionListClasses, classesProp);
     var className = clsx(classNameProp, classes === null || classes === void 0 ? void 0 : classes.root);
-    var _b = useDynamicHeight({
+    var _d = useDynamicHeight({
         itemCount: itemCount,
         maxContainerHeight: maxContainerHeight,
         onContainerHeightChange: function (changeHeight) {
@@ -37,7 +38,7 @@ var SuggestionList = forwardRef(function (inProps, ref) {
                 onUpdatePopper === null || onUpdatePopper === void 0 ? void 0 : onUpdatePopper();
             }
         },
-    }), totalListHeightChanged = _b.totalListHeightChanged, style = _b.style, containerHeighRef = _b.containerHeighRef;
+    }), totalListHeightChanged = _d.totalListHeightChanged, style = _d.style, containerHeighRef = _d.containerHeighRef;
     var sleep = useSleep().sleep;
     var scrollToIndexWithRetry = useRetry(function (location) { return __awaiter(void 0, void 0, void 0, function () {
         var toIndex, toElm;
@@ -66,10 +67,17 @@ var SuggestionList = forwardRef(function (inProps, ref) {
         retryTimes: 10,
         intervalTime: 20,
     }).retry;
-    var _c = useHighlightScroll({
+    var _e = useHighlightScroll({
         containerHeighRef: containerHeighRef,
         scrollToIndex: scrollToIndexWithRetry,
-    }), scrollerRef = _c.scrollerRef, scrollerRefFn = _c.scrollerRefFn, itemsRendered = _c.itemsRendered, scrollToHighlightedIndex = _c.scrollToHighlightedIndex;
+    }), scrollerRef = _e.scrollerRef, scrollerRefFn = _e.scrollerRefFn, itemsRendered = _e.itemsRendered, scrollToHighlightedIndex = _e.scrollToHighlightedIndex;
+    // for safari, prevent popover
+    var virtuosoViewPort = (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    useLayoutEffect(function () {
+        if (virtuosoViewPort) {
+            virtuosoViewPort.style.position = position;
+        }
+    }, [virtuosoViewPort, position]);
     var prevHighlightedIndex = usePrevious(function () { return highlightedIndex; }, true);
     useLayoutEffect(function () {
         if (vlRef.current &&

package/es6/components/Downshift/utils/useDownshiftError.js

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 import { isForwardRef } from 'react-is';
-import { isShowJunoWarning, logInDev } from '../../../foundation';
+import { logInDev, rcConfiguration } from '../../../foundation';
 // TODO: this just for check error props
 export var useDownshiftError = function (_a) {
     var isNew = _a.isNew, MenuItem = _a.MenuItem, InputItem = _a.InputItem;
-    if (isShowJunoWarning) {
+    if (process.env.NODE_ENV !== 'production' &&
+        !rcConfiguration.WARNING_IGNORE) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(function () {
             if (!isNew) {

package/es6/components/Forms/Checkbox/Checkbox.js

@@ -2,7 +2,7 @@ import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useMemo } from 'react';
 import MuiCheckbox from '@material-ui/core/Checkbox';
 import { Indeterminate as indeterminateIcon, Selects as selectIcon, Unselect as unSelectIcon, } from '@ringcentral/juno-icon';
-import { combineClasses, styled, useThemeProps, withDeprecatedCheck, } from '../../../foundation';
+import { combineClasses, styled, useDeprecatedCheck, useThemeProps, } from '../../../foundation';
 import { withTooltip } from '../../Tooltip';
 import { RcFormControlLabel } from '../FormControlLabel';
 import { CustomIconPropsGetter } from '../utils';
@@ -15,6 +15,16 @@ var getIconProps = CustomIconPropsGetter({
 });
 var _RcCheckbox = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcCheckbox' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcCheckbox, props, [
+            {
+                prop: 'iconSize',
+                time: '2021-4',
+                comment: "@deprecated using size to replace that",
+            },
+        ]);
+    }
     var label = props.label, formControlLabelProps = props.formControlLabelProps, color = props.color, error = props.error, followColorWhenUnChecked = props.followColorWhenUnChecked, classesProp = props.classes, iconSize = props.iconSize, sizeProp = props.size, icon = props.icon, checkedIcon = props.checkedIcon, rest = __rest(props, ["label", "formControlLabelProps", "color", "error", "followColorWhenUnChecked", "classes", "iconSize", "size", "icon", "checkedIcon"]);
     var size = sizeProp;
     // TODO: switch to size
@@ -29,13 +39,7 @@ var _RcCheckbox = forwardRef(function (inProps, ref) {
     }
     return Checkbox;
 });
-var RcCheckbox = styled(withDeprecatedCheck(withTooltip(_RcCheckbox), [
-    {
-        prop: 'iconSize',
-        time: '2021-4',
-        comment: "@deprecated using size to replace that",
-    },
-], 'RcCheckbox'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), CheckboxStyle);
+var RcCheckbox = styled(withTooltip(_RcCheckbox))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), CheckboxStyle);
 RcCheckbox.displayName = 'RcCheckbox';
 RcCheckbox.defaultProps = {
     color: 'interactive.f01',

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

@@ -6,7 +6,7 @@ import { useControlled } from '@material-ui/core/utils';
 import { MuiPickersUtilsProvider, useUtils as useMuiUtils, } from '@material-ui/pickers';
 import { findClosestEnabledDate as MuiFindClosestEnabledDate } from '@material-ui/pickers/_helpers/date-utils';
 import { DateBorder } from '@ringcentral/juno-icon';
-import { combineClasses, combineProps, omit, styled, useEventCallback, useThemeProps, withDeprecatedCheck, } from '../../../../foundation';
+import { combineClasses, combineProps, omit, styled, useDeprecatedCheck, useEventCallback, useThemeProps, } from '../../../../foundation';
 import { PickerTextField, } from '../utils';
 import { Calendar } from './Calendar';
 import { invalidateDateInRange, RcDatePickerClasses, ScreenReaderProvider, } from './utils';
@@ -110,26 +110,30 @@ var InnerRcDatePicker = forwardRef(function (props, ref) {
 });
 var _RcDatePicker = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDatePicker' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcDatePicker, props, [
+            {
+                prop: 'minDate',
+                time: '2021-3',
+                comment: "Min date @DateIOType, using min instead ",
+            },
+            {
+                prop: 'maxDate',
+                time: '2021-3',
+                comment: "Max date @DateIOType, using max instead ",
+            },
+            {
+                prop: 'date',
+                time: '2021-3',
+                comment: "please use value to replace that ",
+            },
+        ]);
+    }
     return (React.createElement(MuiPickersUtilsProvider, { utils: MomentUtils, locale: props.locale, libInstance: moment },
         React.createElement(InnerRcDatePicker, __assign({ ref: ref }, props))));
 });
-var RcDatePicker = styled(withDeprecatedCheck(_RcDatePicker, [
-    {
-        prop: 'minDate',
-        time: '2021-3',
-        comment: "Min date @DateIOType, using min instead ",
-    },
-    {
-        prop: 'maxDate',
-        time: '2021-3',
-        comment: "Max date @DateIOType, using max instead ",
-    },
-    {
-        prop: 'date',
-        time: '2021-3',
-        comment: "please use value to replace that ",
-    },
-], 'RcDatePicker'))(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var RcDatePicker = styled(_RcDatePicker)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 RcDatePicker.defaultProps = {
     clearBtn: true,
     formatString: DEFAULT_FORMAT,