@ringcentral/juno 2.0.0-rc.0 → 2.0.0

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,

package/es6/components/Forms/TextField/TextField.js

@@ -2,13 +2,38 @@ import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import MuiTextField from '@material-ui/core/TextField';
 import { DeleteCircle } from '@ringcentral/juno-icon';
-import { clearReactReferencesInNode, combineClasses, combineProps, styled, useEventCallback, useForkRef, useThemeProps, withDeprecatedCheck, } from '../../../foundation';
+import { clearReactReferencesInNode, combineClasses, combineProps, styled, useDeprecatedCheck, useEventCallback, useForkRef, useThemeProps, } from '../../../foundation';
 import { useRcFormContext } from '../Form/Form/FormContext';
 import { ClearIconButton, TextFieldStyle } from './styles';
 import { RcOutlineTextFieldIconSizes, RcOutlineTextFieldInputClasses, RcTextFieldClasses, RcTextFieldFormHelperTextClasses, RcTextFieldInputClasses, RcTextFieldInputLabelClasses, } from './utils';
 var combineOutlineClasses = combineClasses(RcTextFieldInputClasses, RcOutlineTextFieldInputClasses);
 var _RcTextField = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcTextField' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcTextField, props, [
+            {
+                prop: 'focusOnMount',
+                time: '2021-4',
+                comment: "please use `autoFocus` to replace that",
+            },
+            {
+                prop: 'selectOnMount',
+                time: '2021-4',
+                comment: "please use `autoSelect` to replace that",
+            },
+            {
+                prop: 'clearLabel',
+                time: '2021-4',
+                comment: "clear button label, please use `clearButtonProps` with `title` replace that",
+            },
+            {
+                prop: 'clearAriaLabel',
+                time: '2021-4',
+                comment: "clear button aria-label, use `clearButtonProps` with `aria-label` replace that",
+            },
+        ]);
+    }
     var classesProp = props.classes, InputLabelPropsProp = props.InputLabelProps, FormHelperTextPropsProp = props.FormHelperTextProps, valueProp = props.value, focusOnMount = props.focusOnMount, selectOnMount = props.selectOnMount, clearAriaLabel = props.clearAriaLabel, 
     // TODO: remove when remove focusOnMount
     _a = props.autoFocus, 
@@ -139,28 +164,7 @@ var _RcTextField = forwardRef(function (inProps, ref) {
     return (React.createElement(MuiTextField, __assign({}, rest, events, { id: id, value: valueProp, onChange: onChange, defaultValue: defaultValue, error: validate ? !!validateMessage : error, helperText: validateMessage || helperText, classes: classes, FormHelperTextProps: FormHelperTextProps, InputLabelProps: InputLabelProps, InputProps: InputProps, inputRef: inputRef, ref: ref })));
 });
 /** @release */
-var RcTextField = styled(withDeprecatedCheck(_RcTextField, [
-    {
-        prop: 'focusOnMount',
-        time: '2021-4',
-        comment: "please use `autoFocus` to replace that",
-    },
-    {
-        prop: 'selectOnMount',
-        time: '2021-4',
-        comment: "please use `autoSelect` to replace that",
-    },
-    {
-        prop: 'clearLabel',
-        time: '2021-4',
-        comment: "clear button label, please use `clearButtonProps` with `title` replace that",
-    },
-    {
-        prop: 'clearAriaLabel',
-        time: '2021-4',
-        comment: "clear button aria-label, use `clearButtonProps` with `aria-label` replace that",
-    },
-], 'RcTextField'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TextFieldStyle);
+var RcTextField = styled(_RcTextField)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TextFieldStyle);
 RcTextField.defaultProps = {
     clearBtn: true,
     variant: 'standard',

package/es6/components/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, memo, } from 'react';
 import clsx from 'clsx';
-import { styled, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { styled, useDeprecatedCheck, useThemeProps, } from '../../foundation';
 import { RcCircularProgress } from '../Progress';
 import { IconStyle, StyledSvg } from './styles';
 import { RcIconSizes } from './utils';
@@ -12,6 +12,46 @@ import { useIconService } from './utils/IconService';
  */
 var _RcIcon = memo(forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcIcon' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcIcon, props, [
+            {
+                prop: 'icon',
+                time: '2021-1',
+                comment: 'please use symbol to replace icon',
+            },
+            {
+                prop: 'children',
+                time: '2021-1',
+                comment: 'please use symbol to replace children',
+            },
+            {
+                prop: 'iconSize',
+                time: '2021-1',
+                comment: 'please use size',
+            },
+            {
+                prop: 'iconColor',
+                time: '2021-1',
+                comment: 'please use color',
+            },
+            {
+                prop: 'useLoading',
+                time: '2021-1',
+                comment: 'please use loading',
+            },
+            {
+                prop: 'loadingSize',
+                time: '2021-1',
+                comment: 'please use CircularProgressProps={{ size: 24 }} to set custom loading size',
+            },
+            {
+                prop: 'desc',
+                time: '2021-1',
+                comment: 'please use symbol',
+            },
+        ]);
+    }
     var loadingSize = props.loadingSize, useLoading = props.useLoading, iconColor = props.iconColor, iconSize = props.iconSize, icon = props.icon, desc = props.desc, className = props.className, _a = props.loading, loading = _a === void 0 ? useLoading : _a, CircularProgressProps = props.CircularProgressProps, symbol = props.symbol, children = props.children, 
     // * pick props
     color = props.color, size = props.size, rest = __rest(props, ["loadingSize", "useLoading", "iconColor", "iconSize", "icon", "desc", "className", "loading", "CircularProgressProps", "symbol", "children", "color", "size"]);
@@ -61,43 +101,7 @@ var _RcIcon = memo(forwardRef(function (inProps, ref) {
                 !!desc && React.createElement("title", null, desc),
                 React.createElement("use", { xlinkHref: href, href: href }))))));
 }));
-var RcIcon = styled(withDeprecatedCheck(_RcIcon, [
-    {
-        prop: 'icon',
-        time: '2021-1',
-        comment: 'please use symbol to replace icon',
-    },
-    {
-        prop: 'children',
-        time: '2021-1',
-        comment: 'please use symbol to replace children',
-    },
-    {
-        prop: 'iconSize',
-        time: '2021-1',
-        comment: 'please use size',
-    },
-    {
-        prop: 'iconColor',
-        time: '2021-1',
-        comment: 'please use color',
-    },
-    {
-        prop: 'useLoading',
-        time: '2021-1',
-        comment: 'please use loading',
-    },
-    {
-        prop: 'loadingSize',
-        time: '2021-1',
-        comment: 'please use CircularProgressProps={{ size: 24 }} to set custom loading size',
-    },
-    {
-        prop: 'desc',
-        time: '2021-1',
-        comment: 'please use symbol',
-    },
-], 'RcIcon'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), IconStyle);
+var RcIcon = styled(_RcIcon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), IconStyle);
 RcIcon.defaultProps = {
     size: 'large',
 };

package/es6/components/Icon/utils/IconUtils.js

@@ -12,28 +12,36 @@ export var RcIconSizes = {
 export function switchSize(size) {
     switch (size) {
         case 'extraSmall':
-            logInDev({
-                component: 'RcIcon',
-                message: 'please change extraSmall to xsmall',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcIcon',
+                    message: 'please change extraSmall to xsmall',
+                });
+            }
             return 'xsmall';
         case 'moreLarge':
-            logInDev({
-                component: 'RcIcon',
-                message: 'please change moreLarge to xlarge',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcIcon',
+                    message: 'please change moreLarge to xlarge',
+                });
+            }
             return 'xlarge';
         case 'mediumLarge':
-            logInDev({
-                component: 'RcIcon',
-                message: 'please change mediumLarge to xxlarge',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcIcon',
+                    message: 'please change mediumLarge to xxlarge',
+                });
+            }
             return 'xxlarge';
         case 'extraLarge':
-            logInDev({
-                component: 'RcIcon',
-                message: 'please change extraLarge to xxxlarge',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcIcon',
+                    message: 'please change extraLarge to xxxlarge',
+                });
+            }
             return 'xxxlarge';
         default:
             return size;

package/es6/components/Link/Link.js

@@ -1,9 +1,24 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef } from 'react';
-import { styled, useA11yKeyEvent, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { styled, useA11yKeyEvent, useDeprecatedCheck, useThemeProps, } from '../../foundation';
 import { LinkStyle } from './styles';
 var _RcLink = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcLink' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcLink, props, [
+            {
+                prop: 'size',
+                time: '2021-4',
+                comment: "@deprecated size of Link, default is medium, please use variant directly\n * `small` => `caption1`\n * `medium` => `body1`\n * `large` => `headline1`\n */",
+            },
+            {
+                prop: 'handleOnClick',
+                time: '2021-4',
+                comment: "@deprecated use onClick replace that */",
+            },
+        ]);
+    }
     var _handleOnClick = props.handleOnClick, ComponentProp = props.Component, onKeyDown = props.onKeyDown, onClick = props.onClick, disabled = props.disabled, children = props.children, tabIndex = props.tabIndex, color = props.color, underline = props.underline, variant = props.variant, rest = __rest(props, ["handleOnClick", "Component", "onKeyDown", "onClick", "disabled", "children", "tabIndex", "color", "underline", "variant"]);
     // TODO: remove when handleOnClick removed
     var handleOnClick = _handleOnClick ? _handleOnClick : onClick;
@@ -18,18 +33,7 @@ var _RcLink = forwardRef(function (inProps, ref) {
  * @release
  * that onClick event will be trigger with `enter` like `<a>`, when have custom onKeydown event, that will be cover by outside
  * */
-var RcLink = styled(withDeprecatedCheck(_RcLink, [
-    {
-        prop: 'size',
-        time: '2021-4',
-        comment: "@deprecated size of Link, default is medium, please use variant directly\n   * `small` => `caption1`\n   * `medium` => `body1`\n   * `large` => `headline1`\n   */",
-    },
-    {
-        prop: 'handleOnClick',
-        time: '2021-4',
-        comment: "@deprecated use onClick replace that */",
-    },
-], 'RcLink'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), LinkStyle);
+var RcLink = styled(_RcLink)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), LinkStyle);
 RcLink.defaultProps = {
     variant: 'body1',
     color: 'informative.f02',

package/es6/components/List/ListItem/ListItem.js

@@ -2,12 +2,27 @@ import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useMemo } from 'react';
 import clsx from 'clsx';
 import MuiListItem from '@material-ui/core/ListItem';
-import { combineClasses, combineProps, styled, useThemeProps, withDeprecatedCheck, } from '../../../foundation';
+import { combineClasses, combineProps, styled, useDeprecatedCheck, useThemeProps, } from '../../../foundation';
 import { withTooltip } from '../../Tooltip';
 import { ListItemStyle } from './styles';
 import { RcListItemClasses, RcListItemMultilineClassName, RcListItemRippleClasses, } from './utils';
 var _RcListItem = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcListItem' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcListItem, props, [
+            {
+                prop: 'baseColor',
+                time: '2021-9',
+                comment: '@deprecated should use color directly',
+            },
+            {
+                prop: 'maxWidth',
+                time: '2021-4',
+                comment: 'recommend using classes to define',
+            },
+        ]);
+    }
     var classesProp = props.classes, color = props.color, TouchRipplePropsProp = props.TouchRippleProps, children = props.children, className = props.className, singleLine = props.singleLine, button = props.button, size = props.size, canHover = props.canHover, isInline = props.isInline, baseColor = props.baseColor, title = props.title, highlighted = props.highlighted, maxWidth = props.maxWidth, rest = __rest(props, ["classes", "color", "TouchRippleProps", "children", "className", "singleLine", "button", "size", "canHover", "isInline", "baseColor", "title", "highlighted", "maxWidth"]);
     var classes = useMemo(function () { return combineClasses(RcListItemClasses, classesProp); }, [classesProp]);
     var ListItemClassName = useMemo(function () {
@@ -26,18 +41,7 @@ var _RcListItem = forwardRef(function (inProps, ref) {
     }, [TouchRipplePropsProp, button]);
     return (React.createElement(MuiListItem, __assign({}, rest, additionProps, { ref: ref, title: typeof title === 'string' ? title : undefined, classes: classes, className: ListItemClassName, button: button }), children));
 });
-var RcListItem = styled(withDeprecatedCheck(withTooltip(_RcListItem), [
-    {
-        prop: 'baseColor',
-        time: '2021-9',
-        comment: '@deprecated should use color directly',
-    },
-    {
-        prop: 'maxWidth',
-        time: '2021-4',
-        comment: 'recommend using classes to define',
-    },
-], 'RcListItem'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ListItemStyle);
+var RcListItem = styled(withTooltip(_RcListItem))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ListItemStyle);
 RcListItem.defaultProps = {
     singleLine: false,
     button: true,

package/es6/components/List/ListItemText/ListItemText.js

@@ -1,34 +1,38 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useMemo } from 'react';
 import MuiListItemText from '@material-ui/core/ListItemText';
-import { combineClasses, omit, styled, useThemeProps, withDeprecatedCheck, } from '../../../foundation';
+import { combineClasses, omit, styled, useDeprecatedCheck, useThemeProps, } from '../../../foundation';
 import { ListItemTextStyle } from './styles';
 import { RcListItemTextClasses } from './utils';
 var _RcListItemText = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcListItemText' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcListItemText, props, [
+            {
+                prop: 'primaryColor',
+                time: '2021-4',
+                comment: 'recommend use primaryTypographyProps color prop',
+            },
+            {
+                prop: 'alignCenter',
+                time: '2021-4',
+                comment: "recommend using classes to define it",
+            },
+            {
+                prop: 'lineThrough',
+                time: '2021-4',
+                comment: "recommend using classes to define it",
+            },
+        ]);
+    }
     var classesProp = props.classes, children = props.children, isEllipsis = props.isEllipsis, primaryTypographyPropsProp = props.primaryTypographyProps, secondaryTypographyPropsProp = props.secondaryTypographyProps, primaryColor = props.primaryColor, alignCenter = props.alignCenter, lineThrough = props.lineThrough, rest = __rest(props, ["classes", "children", "isEllipsis", "primaryTypographyProps", "secondaryTypographyProps", "primaryColor", "alignCenter", "lineThrough"]);
     var classes = useMemo(function () { return combineClasses(RcListItemTextClasses, classesProp); }, [classesProp]);
     var primaryTypographyProps = useMemo(function () { return omit(primaryTypographyPropsProp, ['color', 'variant']); }, [primaryTypographyPropsProp]);
     var secondaryTypographyProps = useMemo(function () { return omit(secondaryTypographyPropsProp, ['color', 'variant']); }, [secondaryTypographyPropsProp]);
     return (React.createElement(MuiListItemText, __assign({}, rest, { ref: ref, classes: classes, primaryTypographyProps: primaryTypographyProps, secondaryTypographyProps: secondaryTypographyProps }), children));
 });
-var RcListItemText = styled(withDeprecatedCheck(_RcListItemText, [
-    {
-        prop: 'primaryColor',
-        time: '2021-4',
-        comment: 'recommend use primaryTypographyProps color prop',
-    },
-    {
-        prop: 'alignCenter',
-        time: '2021-4',
-        comment: "recommend using classes to define it",
-    },
-    {
-        prop: 'lineThrough',
-        time: '2021-4',
-        comment: "recommend using classes to define it",
-    },
-], 'RcListItemText'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ListItemTextStyle);
+var RcListItemText = styled(_RcListItemText)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ListItemTextStyle);
 RcListItemText.defaultProps = {
     isEllipsis: true,
     primaryTypographyProps: {

package/es6/components/Loading/Loading.js

@@ -18,10 +18,12 @@ var RcLoading = function (inProps) {
             childrenWhenLoading.type !== React.Fragment) {
             return (React.createElement(RcBox, { clone: true, display: "none" }, childrenWhenLoading));
         }
-        logInDev({
-            component: 'RcLoading',
-            message: 'please confirm your children is a valid html element to set style, when you use `keepVisible=false`',
-        });
+        if (process.env.NODE_ENV !== 'production') {
+            logInDev({
+                component: 'RcLoading',
+                message: 'please confirm your children is a valid html element to set style, when you use `keepVisible=false`',
+            });
+        }
         return childrenWhenLoading;
     };
     return (React.createElement(React.Fragment, null,

package/es6/components/Menu/MenuItem/MenuItem.js

@@ -50,10 +50,12 @@ var _RcMenuItem = forwardRef(function (inProps, ref) {
             return isRcElement(icon, ['RcListItemIcon']) ? (icon) : (React.createElement(RcListItemIcon, null, icon));
         }
         if (typeof icon === 'string') {
-            logInDev({
-                component: 'RcMenuItem',
-                message: 'please use symbol to replace icon string',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcMenuItem',
+                    message: 'please use symbol to replace icon string',
+                });
+            }
             return (React.createElement(RcListItemIcon, null,
                 React.createElement(RcIcon, { size: "small" }, icon)));
         }

package/es6/components/PortalHost/PortalManager/PortalManager.js

@@ -31,10 +31,12 @@ var PortalManager = /** @class */ (function (_super) {
         var currPortal = this.portalStore.get(id);
         // portalWithSameID opened
         if (currPortal === null || currPortal === void 0 ? void 0 : currPortal.open) {
-            logInDev({
-                component: 'RcPortalHost',
-                message: "open the portal with id('" + id + "') failed, this portal is already open",
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcPortalHost',
+                    message: "open the portal with id('" + id + "') failed, this portal is already open",
+                });
+            }
             return currPortal.portalController;
         }
         var portalDescriptor = this.createPortalDescriptor({
@@ -118,10 +120,12 @@ var PortalManager = /** @class */ (function (_super) {
     PortalManager.prototype.closeByID = function (id, feedback) {
         var portal = this.portalStore.get(id);
         if (!(portal === null || portal === void 0 ? void 0 : portal.open)) {
-            logInDev({
-                component: 'RcPortalHost',
-                message: 'close portal failed, this portal is already closed',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcPortalHost',
+                    message: 'close portal failed, this portal is already closed',
+                });
+            }
             return;
         }
         this._feedbackMap.set(portal.id, feedback);
@@ -137,10 +141,12 @@ var PortalManager = /** @class */ (function (_super) {
     PortalManager.prototype[UnmountSymbol] = function (id) {
         var portal = this.portalStore.get(id);
         if (!portal) {
-            logInDev({
-                component: 'RcPortalHost',
-                message: 'unmount portal failed, this portal is already unmount',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcPortalHost',
+                    message: 'unmount portal failed, this portal is already unmount',
+                });
+            }
             return;
         }
         this.portalStore.delete(portal.id);
@@ -151,10 +157,12 @@ var PortalManager = /** @class */ (function (_super) {
     PortalManager.prototype.updatePropsByID = function (id, propsOrHandler) {
         var portal = this.portalStore.get(id);
         if (!(portal === null || portal === void 0 ? void 0 : portal.open)) {
-            logInDev({
-                component: 'RcPortalHost',
-                message: 'update props failed, this portal is already closed',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    component: 'RcPortalHost',
+                    message: 'update props failed, this portal is already closed',
+                });
+            }
             return;
         }
         var props = (function () {

package/es6/components/Snackbar/SnackbarContent/SnackbarContent.js

@@ -1,13 +1,23 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, isValidElement, useMemo, } from 'react';
 import MuiSnackbarContent from '@material-ui/core/SnackbarContent';
-import { combineClasses, isRcElement, styled, useThemeProps, withDeprecatedCheck, } from '../../../foundation';
+import { combineClasses, isRcElement, styled, useDeprecatedCheck, useThemeProps, } from '../../../foundation';
 import { RcCircularProgress } from '../../Progress/CircularProgress';
 import { snackbarContentStyle } from './styles';
 import { RcSnackbarContentClasses, RcSnackbarContentLoadingSizes, } from './utils';
 /** @release */
 var _RcSnackbarContent = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcSnackbarContent' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcSnackbarContent, props, [
+            {
+                prop: 'ariaLabel',
+                time: '2021-3',
+                comment: "please use `aria-label` directly ",
+            },
+        ]);
+    }
     var classesProp = props.classes, loading = props.loading, size = props.size, messageAlign = props.messageAlign, type = props.type, fullWidth = props.fullWidth, actionProp = props.action, rest = __rest(props, ["classes", "loading", "size", "messageAlign", "type", "fullWidth", "action"]);
     var classes = useMemo(function () { return combineClasses(RcSnackbarContentClasses, classesProp); }, [classesProp]);
     var action = useMemo(function () {
@@ -28,13 +38,7 @@ var _RcSnackbarContent = forwardRef(function (inProps, ref) {
     }, [actionProp, size]);
     return (React.createElement(MuiSnackbarContent, __assign({}, rest, { ref: ref, classes: classes, action: loading ? (React.createElement(RcCircularProgress, { color: "inherit", size: RcSnackbarContentLoadingSizes[size] })) : (action) })));
 });
-var RcSnackbarContent = styled(withDeprecatedCheck(_RcSnackbarContent, [
-    {
-        prop: 'ariaLabel',
-        time: '2021-3',
-        comment: "please use `aria-label` directly ",
-    },
-], 'RcSnackbarContent'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), snackbarContentStyle);
+var RcSnackbarContent = styled(_RcSnackbarContent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), snackbarContentStyle);
 RcSnackbarContent.defaultProps = {
     type: 'success',
     messageAlign: 'center',