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

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',

package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -2,7 +2,7 @@ import { __assign, __makeTemplateObject, __read, __rest, __spread } from "tslib"
 import React, { createRef, forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
 import isEqual from 'lodash/isEqual';
 import MuiTabs from '@material-ui/core/Tabs';
-import { styled, useForceUpdate, useForkRef, useResizeObserver, useThrottle, } from '../../../../foundation';
+import { styled, useForceUpdate, useForkRef, usePrevious, useResizeObserver, useThrottle, } from '../../../../foundation';
 import { DEFAULT_MORE_MENU_TAB_LABEL, MoreMenuTab, } from '../MoreMenuTab';
 import { computeChildBySize, DEFAULT_SIZE, getDomBoundingClientSize, getKey, parseKey, } from './utils';
 export var findChildrenByKey = function (childrenProp, key) {
@@ -20,6 +20,7 @@ export var findChildrenByKey = function (childrenProp, key) {
 var _MoreMenuTabs = forwardRef(function (props, ref) {
     var orientation = props.orientation, childrenProp = props.children, valueProp = props.value, onChange = props.onChange, _a = props.MoreButtonProps, MoreButtonProps = _a === void 0 ? {} : _a, rest = __rest(props, ["orientation", "children", "value", "onChange", "MoreButtonProps"]);
     var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = __rest(MoreButtonProps, ["onGroupInfoChange"]);
+    var prevChildren = usePrevious(function () { return childrenProp; });
     var isVertical = orientation === 'vertical';
     var oriStr = isVertical ? 'height' : 'width';
     var innerRef = useRef(null);
@@ -33,7 +34,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
     var groupingRef = useRef();
     var _b = __read(useState([]), 2), menuTabChild = _b[0], setMenuTabChild = _b[1];
     var _c = __read(useState(true), 2), useMoreMode = _c[0], setUseMoreMode = _c[1];
-    var sizeChangeResolve = useRef(true);
+    var hasResizeRef = useRef(true);
     var forceUpdate = useForceUpdate();
     var sizeChange = function (size) {
         if (tabsSizeRef.current.height !== size.height ||
@@ -47,7 +48,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
         var _b = __read(_a, 1), entry = _b[0];
         var _c = entry.contentRect, width = _c.width, height = _c.height;
         var obj = { width: width, height: height };
-        sizeChangeResolve.current = false;
+        hasResizeRef.current = true;
         throttleTabsSizeChange(obj);
     }, { mode: 'none' });
     var tabsSize = tabsSizeRef.current;
@@ -111,10 +112,10 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
     }, []);
     useEffect(function () {
         var _a;
-        var currSelectMenuItem;
+        var currSelectTabItem;
         var tabRefsMap = tabRefsMapRef.current;
         if (tabRefsMap) {
-            currSelectMenuItem = __spread(tabRefsMap).find(function (_a) {
+            currSelectTabItem = __spread(tabRefsMap).find(function (_a) {
                 var _b = __read(_a, 2), mapValue = _b[1];
                 return valueProp === mapValue.value || valueProp === mapValue.index;
             });
@@ -153,7 +154,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
                 });
             });
             var limitSize = tabsSize[oriStr] - moreTabSizeRef.current[oriStr];
-            var _a = computeChildBySize(labelArray, currSelectMenuItem === null || currSelectMenuItem === void 0 ? void 0 : currSelectMenuItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
+            var _a = computeChildBySize(labelArray, currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
             computeGroupingInfo(tabsTabLabel, menuTabLabel);
             var tabsTabChild = tabsTabLabel.map(function (key) {
                 return findChildrenByKey(childrenProp, key);
@@ -189,18 +190,20 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
         if (tabsSize.width !== 0 && tabsSize.height !== 0) {
             // computed: 1.resize 2. valueProp 3.moreMenuClick
             // not computed: visible tab change
-            if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectMenuItem === null || currSelectMenuItem === void 0 ? void 0 : currSelectMenuItem[0]) || '')) &&
-                sizeChangeResolve.current === true) {
+            if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
+                !hasResizeRef.current &&
+                prevChildren === childrenProp) {
                 return;
             }
             computeTabChild(tabsSize);
-            sizeChangeResolve.current = true;
+            hasResizeRef.current = false;
         }
     }, [
         childrenProp,
         isVertical,
         onGroupInfoChange,
         oriStr,
+        prevChildren,
         tabsSize,
         valueProp,
     ]);

package/es6/components/Tag/Tag.js

@@ -1,19 +1,23 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, memo } from 'react';
-import { styled, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { styled, useDeprecatedCheck, useThemeProps, } from '../../foundation';
 import { TagStyle } from './styles';
 var _RcTag = memo(forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcTag' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcTag, props, [
+            {
+                prop: 'content',
+                comment: 'you should replace with children',
+                time: '2021-1',
+            },
+        ]);
+    }
     var color = props.color, children = props.children, content = props.content, textColor = props.textColor, borderColor = props.borderColor, radius = props.radius, rest = __rest(props, ["color", "children", "content", "textColor", "borderColor", "radius"]);
     return (React.createElement("span", __assign({}, rest, { ref: ref }), content || children));
 }));
-var RcTag = styled(withDeprecatedCheck(_RcTag, [
-    {
-        prop: 'content',
-        comment: 'you should replace with children',
-        time: '2021-1',
-    },
-]))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TagStyle);
+var RcTag = styled(_RcTag)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TagStyle);
 RcTag.defaultProps = {
     color: 'highlight.b03',
     textColor: 'neutral.f01',