@ringcentral/juno 2.0.0-rc.0 → 2.0.0

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

package/es6/components/Text/Text.js

@@ -27,8 +27,7 @@ var _RcText = forwardRef(function (inProps, ref) {
     }, [TooltipPropsProp, isShowTitle]);
     return (React.createElement(RcTypography, __assign({ ref: textRef, title: isShowTitle || useRcTooltip // * if useRcTooltip always keep title pass into
             ? // * if user pass title, use title first
-                title || (isString(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(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/es6/components/Text/TextWithEllipsis.js

@@ -4,10 +4,13 @@ import { Typography as MuiTypography } from '@material-ui/core';
 import { ellipsis, useDeprecatedLog } from '../../foundation';
 import styled from '../../foundation/styled-components';
 var _RcTextWithEllipsis = forwardRef(function (props, ref) {
-    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
+        useDeprecatedLog({
+            component: 'RcTextWithEllipsis',
+            message: 'should not use that, just use `RcText` with `titleWhenOverflow` and `flexFull`',
+        });
+    }
     return React.createElement(MuiTypography, __assign({}, props, { ref: ref }));
 });
 /** @deprecated should not use that, just use `RcText` with `titleWhenOverflow` and `flexFull` */

package/es6/components/TextWithHighlight/TextWithHighlight.js

@@ -5,10 +5,13 @@ import styled from '../../foundation/styled-components';
 var StyledSpan = styled.span(templateObject_1 || (templateObject_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"])), palette2('highlight', 'f01'), palette2('highlight', 'b02'));
 /** @deprecated should not use that, just use RcText with `highlight` */
 var RcTextWithHighlight = function (props) {
-    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
+        useDeprecatedLog({
+            component: 'RcTextWithHighlight',
+            message: 'should not use that, just use RcText with `highlight`',
+        });
+    }
     return React.createElement(StyledSpan, __assign({ className: "highlight-term" }, props));
 };
 export { RcTextWithHighlight };

package/es6/components/TextWithLink/TextWithLink.js

@@ -7,10 +7,13 @@ import { RcLink } from '../Link';
 var TipsText = styled(MuiTypography)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  && {\n    color: ", ";\n    ", ";\n    * {\n      ", ";\n    }\n  }\n"], ["\n  && {\n    color: ", ";\n    ", ";\n    * {\n      ", ";\n    }\n  }\n"])), palette2('neutral', 'f04'), typography('caption1'), typography('caption1'));
 /** @deprecated please don't use that component, just use RcText and RcLink directly */
 var RcTextWithLink = memo(function (props) {
-    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
+        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/es6/components/TextWithTooltip/TextWithTooltip.js

@@ -8,10 +8,13 @@ var StyledText = styled.span(templateObject_1 || (templateObject_1 = __makeTempl
 });
 /** @deprecated please don't use that component, just use `RcText` with `title` directly */
 var RcTextWithTooltip = function (props) {
-    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
+        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 = useRef(null);
     var _b = __read(useState(false), 2), showTooltip = _b[0], setShowTooltip = _b[1];

package/es6/components/Thumbnail/Thumbnail.js

@@ -1,25 +1,29 @@
 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 { RcIcon } from '../Icon';
 import { StyledThumbnail } from './styles';
 var _RcThumbnail = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcThumbnail' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        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 = __rest(props, ["url", "src", "iconType", "size", "symbol"]);
     return (React.createElement(React.Fragment, null, src ? (React.createElement(StyledThumbnail, __assign({ ref: ref, src: src, size: size, "data-test-automation-id": "thumbnail" }, rest))) : (React.createElement(RcIcon, __assign({ ref: ref, "data-test-automation-id": "iconThumbnail" }, rest, { size: size === 'small' ? 'small' : 'xxxlarge', symbol: symbol }), iconType))));
 });
-var RcThumbnail = styled(withDeprecatedCheck(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 = __makeTemplateObject([""], [""])));
+var RcThumbnail = styled(memo(_RcThumbnail))(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 RcThumbnail.defaultProps = {
     size: 'large',
 };

package/es6/components/Tooltip/Tooltip.js

@@ -1,11 +1,21 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import MuiTooltip from '@material-ui/core/Tooltip';
-import { combineClasses, combineProps, logInDev, styled, useForkRef, useRcPortalWindowContext, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { combineClasses, combineProps, logInDev, styled, useDeprecatedCheck, useForkRef, useRcPortalWindowContext, useThemeProps, } from '../../foundation';
 import { Mask, tooltipStyle } from './styles';
 import { RcTooltipClasses, useTooltipForceHide } from './utils';
 var _RcTooltip = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcTooltip' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        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/
@@ -44,10 +54,12 @@ var _RcTooltip = forwardRef(function (inProps, ref) {
             childNode.tagName.toLowerCase() === 'button' &&
             childNode.disabled) {
             setIsDisabledButton(true);
-            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') {
+                logInDev({
+                    component: 'RcTooltip',
+                    message: 'You have set a tooltip on disabled button, A disabled element does not fire events.',
+                });
+            }
         }
         else if (isDisabledButton) {
             setIsDisabledButton(false);
@@ -56,13 +68,7 @@ var _RcTooltip = forwardRef(function (inProps, ref) {
     return (React.createElement(MuiTooltip, __assign({ ref: tooltipRef, title: isDisabledButton ? '' : title, arrow: true, classes: classes, PopperProps: PopperProps }, additionProp, rest), ignorePointer ? (React.createElement(Mask, __assign({}, maskProps), children)) : (children)));
 });
 /** @release */
-var RcTooltip = styled(withDeprecatedCheck(_RcTooltip, [
-    {
-        prop: 'injectGlobalStyle',
-        time: '2021-3',
-        comment: "@deprecated now need anymore */",
-    },
-], 'RcTooltip'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), tooltipStyle);
+var RcTooltip = styled(_RcTooltip)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), tooltipStyle);
 RcTooltip.defaultProps = {
     placement: 'bottom',
     color: 'neutral.b04',

package/es6/components/VirtualizedMenu/VirtualizedMenuList.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useImperativeHandle, useMemo, useRef, } from 'react';
 import { isFragment } from 'react-is';
-import { combineProps, getScrollbarSize, isRcElement, isShowJunoWarning, logInDev, styled, useDebounce, useEventCallback, useForkRef, useHiddenTabindex, useKeyboardMoveFocus, useMountState, useOnlyOneFocusable, useRcPortalWindowContext, useTheme, useThemeProps, } from '../../foundation';
+import { combineProps, getScrollbarSize, isRcElement, logInDev, styled, useDebounce, useEventCallback, useForkRef, useHiddenTabindex, useKeyboardMoveFocus, useMountState, useOnlyOneFocusable, useRcPortalWindowContext, useTheme, useThemeProps, } from '../../foundation';
 import { RcList } from '../List/List/List';
 import { isOutOfRange, useDynamicHeight, useHighlightScroll, Virtuoso, } from '../Virtuoso';
 import { RcVisuallyHidden } from '../VisuallyHidden';
@@ -33,16 +33,14 @@ var _RcVirtualizedMenuList = forwardRef(function (inProps, ref) {
         if (!React.isValidElement(child)) {
             return;
         }
-        if (isShowJunoWarning) {
-            if (isFragment(child)) {
-                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' && isFragment(child)) {
+            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/foundation/config.js

@@ -1,67 +1,87 @@
 /* eslint-disable no-console */
 var JUNO_WARNING_IGNORE_KEY = '__JUNO_WARNING_IGNORE__';
-var RcConfig = /** @class */ (function () {
-    function RcConfig() {
-        var _a;
-        this._WARNING_IGNORE = false;
-        this._WARNING_FUNCTION = function (message, options) {
-            console[(options === null || options === void 0 ? void 0 : options.level) || 'warn'](message);
-        };
-        if (typeof window !== 'undefined') {
-            // SSR support
-            // * get value once when init
-            this._WARNING_IGNORE =
-                ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
-            // * also provide user to set variable from window
-            window.__JUNO__ = this;
-        }
-    }
-    Object.defineProperty(RcConfig.prototype, "WARNING_IGNORE", {
-        get: function () {
-            return this._WARNING_IGNORE;
-        },
-        set: function (value) {
+// * use that way to avoid that code be exist in production code base
+/**
+ * config global setting
+ *
+ * ```ts
+ * configure({
+ *   warning: false
+ * })
+ * ```
+ * ## WARNING related method and  only work in `development mode`
+ *
+ * `WARNING_IGNORE`:  only work in `development mode`
+ * `WARNING_FUNCTION` only work in `development mode`
+ */
+var rcConfiguration = {};
+if (process.env.NODE_ENV !== 'production') {
+    var RcConfig = /** @class */ (function () {
+        function RcConfig() {
             var _a;
-            if (value) {
-                console.log('---------------- [Juno] ----------------');
-                console.log("Don't recommended you close it, we should avoid use any deprecated props or methods.");
-                console.log('---------------- [Juno] ----------------');
-            }
-            this._WARNING_IGNORE = !!value;
-            (_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.setItem(JUNO_WARNING_IGNORE_KEY, "" + this._WARNING_IGNORE);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(RcConfig.prototype, "WARNING_FUNCTION", {
-        get: function () {
-            return this._WARNING_FUNCTION;
-        },
-        set: function (func) {
-            if (typeof func === 'function') {
-                this._WARNING_FUNCTION = func;
+            this._WARNING_IGNORE = false;
+            this._WARNING_FUNCTION = function (message, options) {
+                console[(options === null || options === void 0 ? void 0 : options.level) || 'warn'](message);
+            };
+            if (typeof window !== 'undefined') {
+                // SSR support
+                // * get value once when init
+                this._WARNING_IGNORE =
+                    ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
+                // * also provide user to set variable from window
+                window.__JUNO__ = this;
             }
-            else {
-                console.warn('[Juno] config warningFunction is not a function.');
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return RcConfig;
-}());
-/** config instance */
-var rcConfiguration = new RcConfig();
+        }
+        Object.defineProperty(RcConfig.prototype, "WARNING_IGNORE", {
+            get: function () {
+                return this._WARNING_IGNORE;
+            },
+            set: function (value) {
+                var _a;
+                if (value) {
+                    console.log('---------------- [Juno] ----------------');
+                    console.log("Don't recommended you close it, we should avoid use any deprecated props or methods.");
+                    console.log('---------------- [Juno] ----------------');
+                }
+                this._WARNING_IGNORE = !!value;
+                (_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.setItem(JUNO_WARNING_IGNORE_KEY, "" + this._WARNING_IGNORE);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(RcConfig.prototype, "WARNING_FUNCTION", {
+            get: function () {
+                return this._WARNING_FUNCTION;
+            },
+            set: function (func) {
+                if (typeof func === 'function') {
+                    this._WARNING_FUNCTION = func;
+                }
+                else {
+                    console.warn('[Juno] config warningFunction is not a function.');
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return RcConfig;
+    }());
+    rcConfiguration = new RcConfig();
+}
 /**
  * set config with Juno
+ *
+ * ## WARNING method only work in `development mode`
  */
-export var configure = function (_a) {
-    var warning = _a.warning, warningFunction = _a.warningFunction;
-    if (warning !== undefined) {
-        rcConfiguration.WARNING_IGNORE = !warning;
-    }
-    if (warningFunction !== undefined) {
-        rcConfiguration.WARNING_FUNCTION = warningFunction;
+export var configure = function (options) {
+    if (process.env.NODE_ENV !== 'production') {
+        var warning = options.warning, warningFunction = options.warningFunction;
+        if (warning !== undefined) {
+            rcConfiguration.WARNING_IGNORE = !warning;
+        }
+        if (warningFunction !== undefined) {
+            rcConfiguration.WARNING_FUNCTION = warningFunction;
+        }
     }
 };
 export { rcConfiguration };

package/es6/foundation/hooks/useResizeObserver/useResizeObserver.js

@@ -14,13 +14,16 @@ import { useResultRef } from '../useResultRef';
 export var getResizeObserver = function (callback, externalWindow) {
     if (externalWindow) {
         if ((externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow['ResizeObserver']) === undefined) {
-            var message = "window.ResizeObserver is not a constructor,\n    should load polyfill script from 'foundation/polyfill/resize-observer-polyfill/ResizeObserver.global.js' or other CDN polyfill on render window.";
-            logInDev({
-                component: 'useResizeObserver',
-                level: 'error',
-                message: message,
-            });
-            throw Error(message);
+            if (process.env.NODE_ENV !== 'production') {
+                var message = "window.ResizeObserver is not a constructor,\n    should load polyfill script from 'foundation/polyfill/resize-observer-polyfill/ResizeObserver.global.js' or other CDN polyfill on render window.";
+                logInDev({
+                    component: 'useResizeObserver',
+                    level: 'error',
+                    message: message,
+                });
+                throw Error(message);
+            }
+            throw Error('window.ResizeObserver not defined');
         }
         return new externalWindow['ResizeObserver'](callback);
     }

package/es6/foundation/styles/opacity.js

@@ -25,10 +25,12 @@ export function doAlpha(color, opacity, theme) {
         return MuiAlpha(color, +alpha.toFixed(2));
     }
     catch (error) {
-        logInDev({
-            component: 'setOpacity',
-            message: 'your color pass into setOpacity is error color, check your color again, please',
-        });
+        if (process.env.NODE_ENV !== 'production') {
+            logInDev({
+                component: 'setOpacity',
+                message: 'your color pass into setOpacity is error color, check your color again, please',
+            });
+        }
         return color;
     }
 }

package/es6/foundation/utils/clearReactReferencesInNode.js

@@ -27,13 +27,15 @@ function clearReactReferencesInNode(node) {
         }
     }
     catch (error) {
-        logInDev({
-            component: 'clearReactReferencesInNode',
-            message: "trigger clearReactReferencesInNode fail",
-        }, function () {
-            // eslint-disable-next-line no-console
-            console.log(error);
-        });
+        if (process.env.NODE_ENV !== 'production') {
+            logInDev({
+                component: 'clearReactReferencesInNode',
+                message: "trigger clearReactReferencesInNode fail",
+            }, function () {
+                // eslint-disable-next-line no-console
+                console.log(error);
+            });
+        }
     }
 }
 export { clearReactReferencesInNode };

package/es6/foundation/utils/hasValue.js

@@ -1,4 +1,4 @@
-import { hasValue as MuiHasValue, isFilled as MuiIsFilled, } from '@material-ui/core/InputBase/utils';
+import { hasValue as MuiHasValue, isFilled as MuiIsFilled, } from '@material-ui/core/InputBase/utils'; /* ts-import-sorter: disable */
 /**
  * Copy from Mui
  * @see https://facebook.github.io/react/docs/forms.html#controlled-components

package/es6/foundation/utils/index.js

@@ -8,7 +8,6 @@ export * from './getScrollbarSize';
 export * from './hasValue';
 export * from './isRcElement';
 export * from './isRef';
-export * from './isShowJunoWarning';
 export * from './isUrl';
 export * from './omit';
 export * from './outerSize';

package/es6/foundation/utils/isShowJunoWarning.js

@@ -1,2 +0,0 @@
-import { rcConfiguration } from '../config';
-export var isShowJunoWarning = !rcConfiguration.WARNING_IGNORE && process.env.NODE_ENV !== 'production';

package/es6/foundation/utils/withDeprecatedCheck.js

@@ -1,17 +1,18 @@
-import { __assign, __read, __spread } from "tslib";
-import React, { forwardRef, useEffect, } from 'react';
+import { __read, __spread } from "tslib";
+import { useEffect } from 'react';
 import { rcConfiguration } from '../config';
-import { isShowJunoWarning } from './isShowJunoWarning';
 function showDeprecated(_a) {
     var component = _a.component, target = _a.target, time = _a.time, comment = _a.comment, message = _a.message, level = _a.level;
+    var _b;
     var showMessage = message ||
         "props => (" + target + ") be deprecated, that will be remove in " + time + " release" + (comment ? ", " + comment : '');
-    rcConfiguration.WARNING_FUNCTION("JUNO [" + component + "]: " + showMessage, {
+    (_b = rcConfiguration.WARNING_FUNCTION) === null || _b === void 0 ? void 0 : _b.call(rcConfiguration, "JUNO [" + component + "]: " + showMessage, {
         level: level,
     });
 }
 export function logInDev(args, cb) {
-    if (isShowJunoWarning) {
+    if (process.env.NODE_ENV !== 'production' &&
+        !rcConfiguration.WARNING_IGNORE) {
         showDeprecated(args);
         cb === null || cb === void 0 ? void 0 : cb();
     }
@@ -21,7 +22,8 @@ export var useDeprecatedLog = function () {
     for (var _i = 0; _i < arguments.length; _i++) {
         args[_i] = arguments[_i];
     }
-    if (isShowJunoWarning) {
+    if (process.env.NODE_ENV !== 'production' &&
+        !rcConfiguration.WARNING_IGNORE) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(function () {
             logInDev.apply(void 0, __spread(args));
@@ -29,12 +31,11 @@ export var useDeprecatedLog = function () {
         }, []);
     }
 };
-export function withDeprecatedCheck(Component, depreciates, source) {
-    if (!isShowJunoWarning) {
-        return Component;
-    }
+export function useDeprecatedCheck(Component, props, depreciates, source) {
     var name = Component.displayName || source || '';
-    return forwardRef(function (props, ref) {
+    if (process.env.NODE_ENV !== 'production' &&
+        !rcConfiguration.WARNING_IGNORE) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(function () {
             depreciates.forEach(function (_a) {
                 var prop = _a.prop, comment = _a.comment, time = _a.time;
@@ -50,8 +51,6 @@ export function withDeprecatedCheck(Component, depreciates, source) {
                     });
                 }
             });
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []);
-        return React.createElement(Component, __assign({}, props, { ref: ref }));
-    });
+        });
+    }
 }

package/foundation/config.d.ts

@@ -1,20 +1,28 @@
 import { ShowDeprecatedArgs } from './utils';
-declare type WarningFunctionType = (
+declare type WarningFunctionType = ((
 /** warning message */
 message: string, 
 /** addition options with that warning */
-options?: Pick<ShowDeprecatedArgs, 'level'>) => void;
-declare class RcConfig {
-    private _WARNING_IGNORE;
-    private _WARNING_FUNCTION;
-    constructor();
-    set WARNING_IGNORE(value: boolean);
-    get WARNING_IGNORE(): boolean;
-    set WARNING_FUNCTION(func: WarningFunctionType);
-    get WARNING_FUNCTION(): WarningFunctionType;
+options?: Pick<ShowDeprecatedArgs, 'level'>) => void) | undefined;
+interface RcConfigurationType {
+    /** is ignore all warning show from juno */
+    WARNING_IGNORE: boolean;
+    WARNING_FUNCTION: WarningFunctionType;
 }
-/** config instance */
-declare const rcConfiguration: RcConfig;
+/**
+ * config global setting
+ *
+ * ```ts
+ * configure({
+ *   warning: false
+ * })
+ * ```
+ * ## WARNING related method and  only work in `development mode`
+ *
+ * `WARNING_IGNORE`:  only work in `development mode`
+ * `WARNING_FUNCTION` only work in `development mode`
+ */
+declare let rcConfiguration: RcConfigurationType;
 declare type RcConfigure = {
     /** is show warning message in development */
     warning?: boolean;
@@ -23,7 +31,9 @@ declare type RcConfigure = {
 };
 /**
  * set config with Juno
+ *
+ * ## WARNING method only work in `development mode`
  */
-export declare const configure: ({ warning, warningFunction }: RcConfigure) => void;
+export declare const configure: (options: RcConfigure) => void;
 export { rcConfiguration };
 export type { WarningFunctionType };