@ringcentral/juno 2.0.0-rc.0 → 2.0.0

package/components/Tooltip/Tooltip.js

@@ -8,6 +8,16 @@ var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var _RcTooltip = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcTooltip' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.useDeprecatedCheck(RcTooltip, props, [
+            {
+                prop: 'injectGlobalStyle',
+                time: '2021-3',
+                comment: "@deprecated now need anymore */",
+            },
+        ]);
+    }
     var children = props.children, tooltipForceHide = props.tooltipForceHide, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, 
     // * that className will pass into children, just pick that and pass into root popper
     // * that also not a props in mui doc  https://material-ui.com/api/tooltip/
@@ -46,10 +56,12 @@ var _RcTooltip = react_1.forwardRef(function (inProps, ref) {
             childNode.tagName.toLowerCase() === 'button' &&
             childNode.disabled) {
             setIsDisabledButton(true);
-            foundation_1.logInDev({
-                component: 'RcTooltip',
-                message: 'You have set a tooltip on disabled button, A disabled element does not fire events.',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                foundation_1.logInDev({
+                    component: 'RcTooltip',
+                    message: 'You have set a tooltip on disabled button, A disabled element does not fire events.',
+                });
+            }
         }
         else if (isDisabledButton) {
             setIsDisabledButton(false);
@@ -58,13 +70,7 @@ var _RcTooltip = react_1.forwardRef(function (inProps, ref) {
     return (react_1.default.createElement(Tooltip_1.default, tslib_1.__assign({ ref: tooltipRef, title: isDisabledButton ? '' : title, arrow: true, classes: classes, PopperProps: PopperProps }, additionProp, rest), ignorePointer ? (react_1.default.createElement(styles_1.Mask, tslib_1.__assign({}, maskProps), children)) : (children)));
 });
 /** @release */
-var RcTooltip = foundation_1.styled(foundation_1.withDeprecatedCheck(_RcTooltip, [
-    {
-        prop: 'injectGlobalStyle',
-        time: '2021-3',
-        comment: "@deprecated now need anymore */",
-    },
-], 'RcTooltip'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), styles_1.tooltipStyle);
+var RcTooltip = foundation_1.styled(_RcTooltip)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), styles_1.tooltipStyle);
 exports.RcTooltip = RcTooltip;
 RcTooltip.defaultProps = {
     placement: 'bottom',

package/components/VirtualizedMenu/VirtualizedMenuList.js

@@ -35,16 +35,14 @@ var _RcVirtualizedMenuList = react_1.forwardRef(function (inProps, ref) {
         if (!react_1.default.isValidElement(child)) {
             return;
         }
-        if (foundation_1.isShowJunoWarning) {
-            if (react_is_1.isFragment(child)) {
-                foundation_1.logInDev({
-                    component: 'RcVirtualizedMenuList',
-                    message: [
-                        "Material-UI: The Menu component doesn't accept a Fragment as a child.",
-                        'Consider providing an array instead.',
-                    ].join('\n'),
-                });
-            }
+        if (process.env.NODE_ENV !== 'production' && react_is_1.isFragment(child)) {
+            foundation_1.logInDev({
+                component: 'RcVirtualizedMenuList',
+                message: [
+                    "Material-UI: The Menu component doesn't accept a Fragment as a child.",
+                    'Consider providing an array instead.',
+                ].join('\n'),
+            });
         }
         if (!child.props.disabled) {
             if (variant === 'selectedMenu' && child.props.selected) {

package/es6/README.md

@@ -1,9 +1,10 @@
 # Juno
 
 [![NPM version](https://img.shields.io/npm/v/@ringcentral/juno/latest.svg)](https://www.npmjs.com/package/@ringcentral/juno)
-
 [![NPM beta version](https://img.shields.io/npm/v/@ringcentral/juno/beta.svg)](https://www.npmjs.com/package/@ringcentral/juno?activeTab=versions)
 
+[![NPM version](https://img.shields.io/npm/v/@ringcentral/juno-icon/beta.svg)](https://www.npmjs.com/package/@ringcentral/juno-icon)
+
 Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.
 
 base on [MATERIAL-UI](https://material-ui.com/).

package/es6/components/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useMemo } from 'react';
 import clsx from 'clsx';
-import { styled, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { styled, useDeprecatedCheck, useThemeProps, } from '../../foundation';
 import { RcPresence } from '../Presence';
 import { RcTooltip, withTooltip } from '../Tooltip';
 import { RcAvatarMask, StyledAvatar, StyledAvatarWrapper, StyledIconAvatar, StyledPresenceWrapper, } from './styles';
@@ -9,6 +9,41 @@ import { RcAvatarClasses, RcAvatarSizes } from './utils';
 var _RcAvatar = forwardRef(function (inProps, ref) {
     // change default unClickable to here, prevent warning
     var props = useThemeProps({ props: inProps, name: 'RcAvatar' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcAvatar, inProps, [
+            {
+                prop: 'customColor',
+                time: '2021-3',
+                comment: "if 'true', will just use color value, use `color` directly ",
+            },
+            {
+                prop: 'unClickable',
+                time: '2021-3',
+                comment: "force set avatar clickable, default is true, please use clickable to set clickable ",
+            },
+            {
+                prop: 'isMember',
+                time: '2021-3',
+                comment: "not used, just keep type temp ",
+            },
+            {
+                prop: 'displayName',
+                time: '2021-3',
+                comment: "not used, just keep type temp ",
+            },
+            {
+                prop: 'alt',
+                time: '2021-3',
+                comment: "alt for img, just use `<img src /> in children or imgProps for apply alt` ",
+            },
+            {
+                prop: 'tooltip',
+                time: '2021-3',
+                comment: "support tooltip for avatar, use title to replace ",
+            },
+        ]);
+    }
     var presenceOrigin = props.presenceOrigin, idProps = props.id, size = props.size, classes = props.classes, color = props.color, children = props.children, _clickable = props.clickable, onClick = props.onClick, mask = props.mask, presence = props.presence, customColor = props.customColor, tooltip = props.tooltip, iconSize = props.iconSize, iconSymbol = props.iconSymbol, srcProp = props.src, altProp = props.alt, Img = props.Img, imgProps = props.imgProps, presenceProps = props.presenceProps, displayName = props.displayName, rest = __rest(props, ["presenceOrigin", "id", "size", "classes", "color", "children", "clickable", "onClick", "mask", "presence", "customColor", "tooltip", "iconSize", "iconSymbol", "src", "alt", "Img", "imgProps", "presenceProps", "displayName"]);
     var unClickable = props.unClickable;
     unClickable = unClickable !== null && unClickable !== void 0 ? unClickable : true;
@@ -93,38 +128,7 @@ var _RcAvatar = forwardRef(function (inProps, ref) {
         avatar,
         presenceChildren));
 });
-var RcAvatar = styled(withDeprecatedCheck(withTooltip(_RcAvatar), [
-    {
-        prop: 'customColor',
-        time: '2021-3',
-        comment: "if 'true', will just use color value, use `color` directly ",
-    },
-    {
-        prop: 'unClickable',
-        time: '2021-3',
-        comment: "force set avatar clickable, default is true, please use clickable to set clickable ",
-    },
-    {
-        prop: 'isMember',
-        time: '2021-3',
-        comment: "not used, just keep type temp ",
-    },
-    {
-        prop: 'displayName',
-        time: '2021-3',
-        comment: "not used, just keep type temp ",
-    },
-    {
-        prop: 'alt',
-        time: '2021-3',
-        comment: "alt for img, just use `<img src /> in children or imgProps for apply alt` ",
-    },
-    {
-        prop: 'tooltip',
-        time: '2021-3',
-        comment: "support tooltip for avatar, use title to replace ",
-    },
-], 'RcAvatar'))(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var RcAvatar = styled(withTooltip(_RcAvatar))(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 RcAvatar.defaultProps = {
     size: 'medium',
     presenceOrigin: {

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,
@@ -183,113 +296,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
             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))),
             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/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) {