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

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/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -22,6 +22,7 @@ exports.findChildrenByKey = function (childrenProp, key) {
 var _MoreMenuTabs = react_1.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 = tslib_1.__rest(props, ["orientation", "children", "value", "onChange", "MoreButtonProps"]);
     var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = tslib_1.__rest(MoreButtonProps, ["onGroupInfoChange"]);
+    var prevChildren = foundation_1.usePrevious(function () { return childrenProp; });
     var isVertical = orientation === 'vertical';
     var oriStr = isVertical ? 'height' : 'width';
     var innerRef = react_1.useRef(null);
@@ -35,7 +36,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
     var groupingRef = react_1.useRef();
     var _b = tslib_1.__read(react_1.useState([]), 2), menuTabChild = _b[0], setMenuTabChild = _b[1];
     var _c = tslib_1.__read(react_1.useState(true), 2), useMoreMode = _c[0], setUseMoreMode = _c[1];
-    var sizeChangeResolve = react_1.useRef(true);
+    var hasResizeRef = react_1.useRef(true);
     var forceUpdate = foundation_1.useForceUpdate();
     var sizeChange = function (size) {
         if (tabsSizeRef.current.height !== size.height ||
@@ -49,7 +50,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
         var _b = tslib_1.__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;
@@ -113,10 +114,10 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
     }, []);
     react_1.useEffect(function () {
         var _a;
-        var currSelectMenuItem;
+        var currSelectTabItem;
         var tabRefsMap = tabRefsMapRef.current;
         if (tabRefsMap) {
-            currSelectMenuItem = tslib_1.__spread(tabRefsMap).find(function (_a) {
+            currSelectTabItem = tslib_1.__spread(tabRefsMap).find(function (_a) {
                 var _b = tslib_1.__read(_a, 2), mapValue = _b[1];
                 return valueProp === mapValue.value || valueProp === mapValue.index;
             });
@@ -155,7 +156,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
                 });
             });
             var limitSize = tabsSize[oriStr] - moreTabSizeRef.current[oriStr];
-            var _a = utils_1.computeChildBySize(labelArray, currSelectMenuItem === null || currSelectMenuItem === void 0 ? void 0 : currSelectMenuItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
+            var _a = utils_1.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 exports.findChildrenByKey(childrenProp, key);
@@ -191,18 +192,20 @@ var _MoreMenuTabs = react_1.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/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',

package/components/Tooltip/Tooltip.js

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

package/components/VirtualizedMenu/VirtualizedMenuList.js

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

package/es6/README.md

@@ -1,14 +1,15 @@
 # Juno
 
 [![NPM version](https://img.shields.io/npm/v/@ringcentral/juno/latest.svg)](https://www.npmjs.com/package/@ringcentral/juno)
-
 [![NPM beta version](https://img.shields.io/npm/v/@ringcentral/juno/beta.svg)](https://www.npmjs.com/package/@ringcentral/juno?activeTab=versions)
 
+[![NPM version](https://img.shields.io/npm/v/@ringcentral/juno-icon/beta.svg)](https://www.npmjs.com/package/@ringcentral/juno-icon)
+
 Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.
 
 base on [MATERIAL-UI](https://material-ui.com/).
 
-Explore Juno with the [interactive live Storybook instance](https://develop-rcui-int.fiji.gliprc.com/).
+Explore Juno with the [interactive live Storybook instance](https://ringcentral.github.io/juno/).
 
 View in [Codesandbox Example](https://codesandbox.io/s/4j370).
 

package/es6/components/Avatar/Avatar.js

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