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

package/README.md

@@ -1,14 +1,15 @@
 # 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/).
 
-Explore Juno with the [interactive live Storybook instance](https://develop-rcui-int.fiji.gliprc.com/).
+Explore Juno with the [interactive live Storybook instance](https://ringcentral.github.io/juno/).
 
 View in [Codesandbox Example](https://codesandbox.io/s/4j370).
 

package/components/Avatar/Avatar.js

@@ -12,6 +12,41 @@ var utils_1 = require("./utils");
 var _RcAvatar = react_1.forwardRef(function (inProps, ref) {
     // change default unClickable to here, prevent warning
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcAvatar' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = tslib_1.__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;
@@ -96,38 +131,7 @@ var _RcAvatar = react_1.forwardRef(function (inProps, ref) {
         avatar,
         presenceChildren));
 });
-var RcAvatar = foundation_1.styled(foundation_1.withDeprecatedCheck(Tooltip_1.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 = tslib_1.__makeTemplateObject([""], [""])));
+var RcAvatar = foundation_1.styled(Tooltip_1.withTooltip(_RcAvatar))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 RcAvatar.defaultProps = {
     size: 'medium',
     presenceOrigin: {

package/components/Buttons/Button/Button.js

@@ -13,6 +13,16 @@ var utils_2 = require("./utils");
 var _RcButton = react_1.forwardRef(function (inProps, ref) {
     var _a, _b;
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcButton' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = tslib_1.__rest(props, ["children", "classes", "startIcon", "endIcon", "loading", "loadingMode", "disabled", "IconProps", "size", "color", "CircularProgressProps", "variant", "disabledVariant", "radius", "keepElevation"]);
     var theme = foundation_1.useTheme();
     var innerRef = react_1.useRef(null);
@@ -85,13 +95,7 @@ var _RcButton = react_1.forwardRef(function (inProps, ref) {
     return (react_1.default.createElement(Button_1.default, tslib_1.__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 = foundation_1.styled(foundation_1.withDeprecatedCheck(Tooltip_1.withTooltip(_RcButton), [
-    {
-        prop: 'IconProps',
-        time: '2021-4',
-        comment: "@deprecated Icon, please use startIcon with `<RcIcon />` */",
-    },
-], 'RcButton'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.buttonStyle);
+var RcButton = foundation_1.styled(Tooltip_1.withTooltip(_RcButton))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.buttonStyle);
 exports.RcButton = RcButton;
 RcButton.defaultProps = {
     size: 'large',

package/components/Buttons/IconButton/IconButton.js

@@ -13,6 +13,10 @@ var utils_1 = require("./utils");
 var _RcIconButton = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     var _a;
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcIconButton' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.useDeprecatedCheck(RcIconButton, props, IconButtonProps_1.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 = tslib_1.__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 = foundation_1.useTheme();
     var isOutline = variant === 'outline';
@@ -44,9 +48,7 @@ var _RcIconButton = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     }
     return iconButton;
 }));
-var RcIconButton = foundation_1.styled(foundation_1.withDeprecatedCheck(Tooltip_1.withTooltip(_RcIconButton), 
-// TODO remove when ready
-IconButtonProps_1.rcIconButtonWarning, 'RcIconButton'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.iconButtonStyle);
+var RcIconButton = foundation_1.styled(Tooltip_1.withTooltip(_RcIconButton))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.iconButtonStyle);
 exports.RcIconButton = RcIconButton;
 RcIconButton.displayName = 'RcIconButton';
 RcIconButton.defaultProps = {

package/components/Buttons/SplitButton/SplitButton.js

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

package/components/DetachedWindow/DetachedWindow.d.ts

@@ -31,12 +31,6 @@ declare type RcDetachedWindowProps = {
      * The following values are supported: https://www.w3schools.com/jsref/met_win_open.asp
      */
     specs?: string;
-    /**
-     * `Optional`. Specifies whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported:
-     * - `true` - URL replaces the current document in the history list
-     * - `false` - URL creates a new entry in the history list
-     */
-    replace?: boolean;
     /** title for that new window */
     title?: string;
     /** trigger when window `onload` */
@@ -63,7 +57,7 @@ declare type RcDetachedWindowProps = {
       </RcDetachedWindow>
      * ```
      */
-    getWindow?: (props: Pick<RcDetachedWindowProps, 'url' | 'name' | 'specs' | 'replace' | 'title'>) => Window | undefined | null;
+    getWindow?: (props: Pick<RcDetachedWindowProps, 'url' | 'name' | 'specs' | 'title'>) => Window | undefined | null;
 };
 declare type RcDetachedWindowRef = {
     /** target opened window, only can get after `onload` */

package/components/DetachedWindow/DetachedWindow.js

@@ -15,7 +15,7 @@ var utils_2 = require("./utils");
  */
 var RcDetachedWindow = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.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 = tslib_1.__read(react_1.useState(), 2), externalWindow = _a[0], setExternalWindow = _a[1];
     var isCloseByWindowExitRef = react_1.useRef(false);
     var innerRef = react_1.useRef(null);
@@ -38,13 +38,15 @@ var RcDetachedWindow = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     });
     var openWindow = foundation_1.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 })
             : utils_2.openExternalWindow(props);
         if (!newWindow) {
-            foundation_1.logInDev({
-                component: 'RcDetachedWindow',
-                message: 'Please check your window instance, that `window.open` should not trigger by another window',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                foundation_1.logInDev({
+                    component: 'RcDetachedWindow',
+                    message: 'Please check your window instance, that `window.open` should not trigger by another window',
+                });
+            }
             return;
         }
         if (title)

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

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

package/components/Dialog/Dialog.js

@@ -11,6 +11,16 @@ var DialogContext_1 = require("./utils/DialogContext");
 exports.RcDialogContext = DialogContext_1.RcDialogContext;
 var _RcDialog = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDialog' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = tslib_1.__rest(props, ["classes", "size", "maxWidth", "fullWidth", "childrenSize", "children", "TransitionProps"]);
     var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcDialogClasses, classesProp); }, [classesProp]);
     var externalWindow = foundation_1.useRcPortalWindowContext().externalWindow;
@@ -38,13 +48,7 @@ var _RcDialog = react_1.forwardRef(function (inProps, ref) {
     return (react_1.default.createElement(Dialog_1.default, tslib_1.__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_1.default.createElement(DialogContext_1.RcDialogContext.Provider, { value: contextValue }, children)));
 });
-var RcDialog = foundation_1.styled(foundation_1.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 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DialogStyle);
+var RcDialog = foundation_1.styled(_RcDialog)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DialogStyle);
 exports.RcDialog = RcDialog;
 RcDialog.defaultProps = {};
 RcDialog.displayName = 'RcDialog';

package/components/Downshift/Downshift.js

@@ -14,6 +14,116 @@ var utils_1 = require("./utils");
 exports.RcDownshiftDefaultFilterOptions = utils_1.RcDownshiftDefaultFilterOptions;
 var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDownshift' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = foundation_1.useTheme();
     var _a = props.itemToString, itemToString = _a === void 0 ? utils_1.DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? utils_1.DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? utils_1.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 = tslib_1.__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 = tslib_1.__read(react_1.useState('bottom'), 2), position = _y[0], setPosition = _y[1];
@@ -24,7 +134,10 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     // * if that have pass old suggestionItems mean that use old logic
     var isNew = !suggestionItems;
     var oneOfTagError = false;
-    utils_1.useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        utils_1.useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
+    }
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
     var _z = utils_1.useDownshift({
         focused: focused,
@@ -184,116 +297,10 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                     }
                 },
             } }, getPopperProps(PopperProps)),
-            isOpen && (react_1.default.createElement(SuggestionList_1.RcSuggestionList, tslib_1.__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_1.default.createElement(SuggestionList_1.RcSuggestionList, tslib_1.__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 = foundation_1.styled(foundation_1.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 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DownshiftStyle);
+var RcDownshift = foundation_1.styled(_RcDownshift)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DownshiftStyle);
 RcDownshift.defaultProps = {};
 RcDownshift.displayName = 'RcDownshift';
 var ExportType = RcDownshift;