@ringcentral/juno 2.0.0-rc.0 → 2.0.0

package/components/Forms/TextField/TextField.js

@@ -12,6 +12,31 @@ exports.RcOutlineTextFieldIconSizes = utils_1.RcOutlineTextFieldIconSizes;
 var combineOutlineClasses = foundation_1.combineClasses(utils_1.RcTextFieldInputClasses, utils_1.RcOutlineTextFieldInputClasses);
 var _RcTextField = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcTextField' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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, 
@@ -142,28 +167,7 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
     return (react_1.default.createElement(TextField_1.default, tslib_1.__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 = foundation_1.styled(foundation_1.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 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.TextFieldStyle);
+var RcTextField = foundation_1.styled(_RcTextField)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.TextFieldStyle);
 exports.RcTextField = RcTextField;
 RcTextField.defaultProps = {
     clearBtn: true,

package/components/Icon/Icon.js

@@ -14,6 +14,46 @@ var IconService_1 = require("./utils/IconService");
  */
 var _RcIcon = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcIcon' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = tslib_1.__rest(props, ["loadingSize", "useLoading", "iconColor", "iconSize", "icon", "desc", "className", "loading", "CircularProgressProps", "symbol", "children", "color", "size"]);
@@ -63,43 +103,7 @@ var _RcIcon = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                 !!desc && react_1.default.createElement("title", null, desc),
                 react_1.default.createElement("use", { xlinkHref: href, href: href }))))));
 }));
-var RcIcon = foundation_1.styled(foundation_1.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 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.IconStyle);
+var RcIcon = foundation_1.styled(_RcIcon)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.IconStyle);
 exports.RcIcon = RcIcon;
 RcIcon.defaultProps = {
     size: 'large',

package/components/Icon/utils/IconUtils.js

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

package/components/Link/Link.js

@@ -6,6 +6,21 @@ var foundation_1 = require("../../foundation");
 var styles_1 = require("./styles");
 var _RcLink = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcLink' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = tslib_1.__rest(props, ["handleOnClick", "Component", "onKeyDown", "onClick", "disabled", "children", "tabIndex", "color", "underline", "variant"]);
     // TODO: remove when handleOnClick removed
     var handleOnClick = _handleOnClick ? _handleOnClick : onClick;
@@ -20,18 +35,7 @@ var _RcLink = react_1.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 = foundation_1.styled(foundation_1.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 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.LinkStyle);
+var RcLink = foundation_1.styled(_RcLink)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.LinkStyle);
 exports.RcLink = RcLink;
 RcLink.defaultProps = {
     variant: 'body1',

package/components/List/ListItem/ListItem.js

@@ -10,6 +10,21 @@ var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var _RcListItem = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcListItem' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = tslib_1.__rest(props, ["classes", "color", "TouchRippleProps", "children", "className", "singleLine", "button", "size", "canHover", "isInline", "baseColor", "title", "highlighted", "maxWidth"]);
     var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcListItemClasses, classesProp); }, [classesProp]);
     var ListItemClassName = react_1.useMemo(function () {
@@ -28,18 +43,7 @@ var _RcListItem = react_1.forwardRef(function (inProps, ref) {
     }, [TouchRipplePropsProp, button]);
     return (react_1.default.createElement(ListItem_1.default, tslib_1.__assign({}, rest, additionProps, { ref: ref, title: typeof title === 'string' ? title : undefined, classes: classes, className: ListItemClassName, button: button }), children));
 });
-var RcListItem = foundation_1.styled(foundation_1.withDeprecatedCheck(Tooltip_1.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 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), styles_1.ListItemStyle);
+var RcListItem = foundation_1.styled(Tooltip_1.withTooltip(_RcListItem))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), styles_1.ListItemStyle);
 exports.RcListItem = RcListItem;
 RcListItem.defaultProps = {
     singleLine: false,

package/components/List/ListItemText/ListItemText.js

@@ -8,29 +8,33 @@ var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var _RcListItemText = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcListItemText' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = tslib_1.__rest(props, ["classes", "children", "isEllipsis", "primaryTypographyProps", "secondaryTypographyProps", "primaryColor", "alignCenter", "lineThrough"]);
     var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcListItemTextClasses, classesProp); }, [classesProp]);
     var primaryTypographyProps = react_1.useMemo(function () { return foundation_1.omit(primaryTypographyPropsProp, ['color', 'variant']); }, [primaryTypographyPropsProp]);
     var secondaryTypographyProps = react_1.useMemo(function () { return foundation_1.omit(secondaryTypographyPropsProp, ['color', 'variant']); }, [secondaryTypographyPropsProp]);
     return (react_1.default.createElement(ListItemText_1.default, tslib_1.__assign({}, rest, { ref: ref, classes: classes, primaryTypographyProps: primaryTypographyProps, secondaryTypographyProps: secondaryTypographyProps }), children));
 });
-var RcListItemText = foundation_1.styled(foundation_1.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 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.ListItemTextStyle);
+var RcListItemText = foundation_1.styled(_RcListItemText)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.ListItemTextStyle);
 exports.RcListItemText = RcListItemText;
 RcListItemText.defaultProps = {
     isEllipsis: true,

package/components/Loading/Loading.js

@@ -20,10 +20,12 @@ var RcLoading = function (inProps) {
             childrenWhenLoading.type !== react_1.default.Fragment) {
             return (react_1.default.createElement(Box_1.RcBox, { clone: true, display: "none" }, childrenWhenLoading));
         }
-        foundation_1.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') {
+            foundation_1.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_1.default.createElement(react_1.default.Fragment, null,

package/components/Menu/MenuItem/MenuItem.js

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

package/components/PortalHost/PortalManager/PortalManager.js

@@ -33,10 +33,12 @@ var PortalManager = /** @class */ (function (_super) {
         var currPortal = this.portalStore.get(id);
         // portalWithSameID opened
         if (currPortal === null || currPortal === void 0 ? void 0 : currPortal.open) {
-            foundation_1.logInDev({
-                component: 'RcPortalHost',
-                message: "open the portal with id('" + id + "') failed, this portal is already open",
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                foundation_1.logInDev({
+                    component: 'RcPortalHost',
+                    message: "open the portal with id('" + id + "') failed, this portal is already open",
+                });
+            }
             return currPortal.portalController;
         }
         var portalDescriptor = this.createPortalDescriptor({
@@ -120,10 +122,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)) {
-            foundation_1.logInDev({
-                component: 'RcPortalHost',
-                message: 'close portal failed, this portal is already closed',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                foundation_1.logInDev({
+                    component: 'RcPortalHost',
+                    message: 'close portal failed, this portal is already closed',
+                });
+            }
             return;
         }
         this._feedbackMap.set(portal.id, feedback);
@@ -139,10 +143,12 @@ var PortalManager = /** @class */ (function (_super) {
     PortalManager.prototype[types_1.UnmountSymbol] = function (id) {
         var portal = this.portalStore.get(id);
         if (!portal) {
-            foundation_1.logInDev({
-                component: 'RcPortalHost',
-                message: 'unmount portal failed, this portal is already unmount',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                foundation_1.logInDev({
+                    component: 'RcPortalHost',
+                    message: 'unmount portal failed, this portal is already unmount',
+                });
+            }
             return;
         }
         this.portalStore.delete(portal.id);
@@ -153,10 +159,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)) {
-            foundation_1.logInDev({
-                component: 'RcPortalHost',
-                message: 'update props failed, this portal is already closed',
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                foundation_1.logInDev({
+                    component: 'RcPortalHost',
+                    message: 'update props failed, this portal is already closed',
+                });
+            }
             return;
         }
         var props = (function () {

package/components/Snackbar/SnackbarContent/SnackbarContent.js

@@ -10,6 +10,16 @@ var utils_1 = require("./utils");
 /** @release */
 var _RcSnackbarContent = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcSnackbarContent' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = tslib_1.__rest(props, ["classes", "loading", "size", "messageAlign", "type", "fullWidth", "action"]);
     var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcSnackbarContentClasses, classesProp); }, [classesProp]);
     var action = react_1.useMemo(function () {
@@ -30,13 +40,7 @@ var _RcSnackbarContent = react_1.forwardRef(function (inProps, ref) {
     }, [actionProp, size]);
     return (react_1.default.createElement(SnackbarContent_1.default, tslib_1.__assign({}, rest, { ref: ref, classes: classes, action: loading ? (react_1.default.createElement(CircularProgress_1.RcCircularProgress, { color: "inherit", size: utils_1.RcSnackbarContentLoadingSizes[size] })) : (action) })));
 });
-var RcSnackbarContent = foundation_1.styled(foundation_1.withDeprecatedCheck(_RcSnackbarContent, [
-    {
-        prop: 'ariaLabel',
-        time: '2021-3',
-        comment: "please use `aria-label` directly ",
-    },
-], 'RcSnackbarContent'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.snackbarContentStyle);
+var RcSnackbarContent = foundation_1.styled(_RcSnackbarContent)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.snackbarContentStyle);
 exports.RcSnackbarContent = RcSnackbarContent;
 RcSnackbarContent.defaultProps = {
     type: 'success',

package/components/Tag/Tag.js

@@ -6,16 +6,20 @@ var foundation_1 = require("../../foundation");
 var styles_1 = require("./styles");
 var _RcTag = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcTag' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.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 = tslib_1.__rest(props, ["color", "children", "content", "textColor", "borderColor", "radius"]);
     return (react_1.default.createElement("span", tslib_1.__assign({}, rest, { ref: ref }), content || children));
 }));
-var RcTag = foundation_1.styled(foundation_1.withDeprecatedCheck(_RcTag, [
-    {
-        prop: 'content',
-        comment: 'you should replace with children',
-        time: '2021-1',
-    },
-]))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.TagStyle);
+var RcTag = foundation_1.styled(_RcTag)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.TagStyle);
 exports.RcTag = RcTag;
 RcTag.defaultProps = {
     color: 'highlight.b03',

package/components/Text/Text.js

@@ -29,8 +29,7 @@ var _RcText = react_1.forwardRef(function (inProps, ref) {
     }, [TooltipPropsProp, isShowTitle]);
     return (react_1.default.createElement(Typography_1.RcTypography, tslib_1.__assign({ ref: textRef, title: isShowTitle || useRcTooltip // * if useRcTooltip always keep title pass into
             ? // * if user pass title, use title first
-                title || (isString_1.default(children) ? children : undefined)
-            : undefined, TooltipProps: TooltipProps, useRcTooltip: useRcTooltip, variant: highlight ? 'inherit' : undefined, component: highlight ? 'span' : undefined, className: className }, rest), children));
+             title !== null && title !== void 0 ? title : (isString_1.default(children) ? children : undefined) : undefined, TooltipProps: TooltipProps, useRcTooltip: useRcTooltip, variant: highlight ? 'inherit' : undefined, component: highlight ? 'span' : undefined, className: className }, rest), children));
 });
 /**
  * `RcText` will auto add title with children when that children is string

package/components/Text/TextWithEllipsis.js

@@ -6,10 +6,13 @@ var core_1 = require("@material-ui/core");
 var foundation_1 = require("../../foundation");
 var styled_components_1 = tslib_1.__importDefault(require("../../foundation/styled-components"));
 var _RcTextWithEllipsis = react_1.forwardRef(function (props, ref) {
-    foundation_1.useDeprecatedLog({
-        component: 'RcTextWithEllipsis',
-        message: 'should not use that, just use `RcText` with `titleWhenOverflow` and `flexFull`',
-    });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.useDeprecatedLog({
+            component: 'RcTextWithEllipsis',
+            message: 'should not use that, just use `RcText` with `titleWhenOverflow` and `flexFull`',
+        });
+    }
     return react_1.default.createElement(core_1.Typography, tslib_1.__assign({}, props, { ref: ref }));
 });
 /** @deprecated should not use that, just use `RcText` with `titleWhenOverflow` and `flexFull` */

package/components/TextWithHighlight/TextWithHighlight.js

@@ -7,10 +7,13 @@ var styled_components_1 = tslib_1.__importDefault(require("../../foundation/styl
 var StyledSpan = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: ", ";\n  background-color: ", ";\n  a {\n    color: inherit;\n  }\n"], ["\n  color: ", ";\n  background-color: ", ";\n  a {\n    color: inherit;\n  }\n"])), foundation_1.palette2('highlight', 'f01'), foundation_1.palette2('highlight', 'b02'));
 /** @deprecated should not use that, just use RcText with `highlight` */
 var RcTextWithHighlight = function (props) {
-    foundation_1.useDeprecatedLog({
-        component: 'RcTextWithHighlight',
-        message: 'should not use that, just use RcText with `highlight`',
-    });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.useDeprecatedLog({
+            component: 'RcTextWithHighlight',
+            message: 'should not use that, just use RcText with `highlight`',
+        });
+    }
     return react_1.default.createElement(StyledSpan, tslib_1.__assign({ className: "highlight-term" }, props));
 };
 exports.RcTextWithHighlight = RcTextWithHighlight;

package/components/TextWithLink/TextWithLink.js

@@ -9,10 +9,13 @@ var Link_1 = require("../Link");
 var TipsText = styled_components_1.default(Typography_1.default)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  && {\n    color: ", ";\n    ", ";\n    * {\n      ", ";\n    }\n  }\n"], ["\n  && {\n    color: ", ";\n    ", ";\n    * {\n      ", ";\n    }\n  }\n"])), foundation_1.palette2('neutral', 'f04'), foundation_1.typography('caption1'), foundation_1.typography('caption1'));
 /** @deprecated please don't use that component, just use RcText and RcLink directly */
 var RcTextWithLink = react_1.memo(function (props) {
-    foundation_1.useDeprecatedLog({
-        component: 'RcTextWithLink',
-        message: "please don't use that component, just use `RcText` and RcLink directly",
-    });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.useDeprecatedLog({
+            component: 'RcTextWithLink',
+            message: "please don't use that component, just use `RcText` and RcLink directly",
+        });
+    }
     var text = props.text, linkText = props.linkText, onClick = props.onClick, TypographyProps = props.TypographyProps, RcLinkProps = props.RcLinkProps;
     var textProps;
     if (TypographyProps) {

package/components/TextWithTooltip/TextWithTooltip.js

@@ -10,10 +10,13 @@ var StyledText = foundation_1.styled.span(templateObject_1 || (templateObject_1
 });
 /** @deprecated please don't use that component, just use `RcText` with `title` directly */
 var RcTextWithTooltip = function (props) {
-    foundation_1.useDeprecatedLog({
-        component: 'RcTextWithTooltip',
-        message: "please don't use that component, just use `RcText` with `title` directly",
-    });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.useDeprecatedLog({
+            component: 'RcTextWithTooltip',
+            message: "please don't use that component, just use `RcText` with `title` directly",
+        });
+    }
     var tooltip = props.tooltip, children = props.children, _a = props.textColor, textColor = _a === void 0 ? ['neutral', 'f06'] : _a;
     var ref = react_1.useRef(null);
     var _b = tslib_1.__read(react_1.useState(false), 2), showTooltip = _b[0], setShowTooltip = _b[1];

package/components/Thumbnail/Thumbnail.js

@@ -7,21 +7,25 @@ var Icon_1 = require("../Icon");
 var styles_1 = require("./styles");
 var _RcThumbnail = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcThumbnail' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        foundation_1.useDeprecatedCheck(RcThumbnail, props, [
+            {
+                prop: 'iconType',
+                time: '2021-2',
+                comment: 'Please use symbol to set icon',
+            },
+            {
+                prop: 'url',
+                time: '2021-2',
+                comment: 'Please use src to set url',
+            },
+        ]);
+    }
     var url = props.url, _a = props.src, src = _a === void 0 ? url : _a, iconType = props.iconType, size = props.size, symbol = props.symbol, rest = tslib_1.__rest(props, ["url", "src", "iconType", "size", "symbol"]);
     return (react_1.default.createElement(react_1.default.Fragment, null, src ? (react_1.default.createElement(styles_1.StyledThumbnail, tslib_1.__assign({ ref: ref, src: src, size: size, "data-test-automation-id": "thumbnail" }, rest))) : (react_1.default.createElement(Icon_1.RcIcon, tslib_1.__assign({ ref: ref, "data-test-automation-id": "iconThumbnail" }, rest, { size: size === 'small' ? 'small' : 'xxxlarge', symbol: symbol }), iconType))));
 });
-var RcThumbnail = foundation_1.styled(foundation_1.withDeprecatedCheck(react_1.memo(_RcThumbnail), [
-    {
-        prop: 'iconType',
-        time: '2021-2',
-        comment: 'Please use symbol to set icon',
-    },
-    {
-        prop: 'url',
-        time: '2021-2',
-        comment: 'Please use src to set url',
-    },
-], 'RcThumbnail'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+var RcThumbnail = foundation_1.styled(react_1.memo(_RcThumbnail))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 exports.RcThumbnail = RcThumbnail;
 RcThumbnail.defaultProps = {
     size: 'large',