@ringcentral/juno 1.12.6-beta.5916-2d2126cc → 2.0.0

package/es6/components/Forms/Picker/TimePicker/TimePicker.js

@@ -1,8 +1,8 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { runKeyHandler } from '@material-ui/pickers/_shared/hooks/useKeyDown';
-import { combineClasses, combineProps, logInDev, styled, useDepsChange, useEventCallback, useThemeProps, withDeprecatedCheck, } from '../../../../foundation';
-import TimeBorderIcon from '../../../../icon/TimeBorder';
+import { TimeBorder as TimeBorderIcon } from '@ringcentral/juno-icon';
+import { combineClasses, combineProps, styled, useDepsChange, useEventCallback, useThemeProps, } from '../../../../foundation';
 import { RcBox } from '../../../Box';
 import { PickerTextField, } from '../utils';
 import { TIME_SYSTEM_TEXT } from './constant';
@@ -10,28 +10,24 @@ import { NumberPicker, } from './NumberPicker';
 import { SelectionView } from './SelectionView';
 import { StyledPickerPopperWrap } from './styles';
 import { ToggleText } from './ToggleText';
-import { getFormattedTime, getHourAndMinute, getNumberPickerBoundary, getPeriod, getRangeBoundary, getTimestamp, getTimestampFromDate, HALF_DAY_HOURS, minuteSource, parseNumberToString, RcTimePickerClasses, TIME_GAP, timestampToDate, twelveHourSystemSource, twentyFourHourSystemSource, } from './utils';
+import { getFormattedTime, getHourAndMinute, getNumberPickerBoundary, getPeriod, getRangeBoundary, getRecoupHour, getTimestamp, getTimestampFromDate, HALF_DAY_HOURS, minuteSource, parseNumberToString, RcTimePickerClasses, TIME_GAP, twelveHourSystemSource, twentyFourHourSystemSource, } from './utils';
 var _RcTimePicker = forwardRef(function (inProps, ref) {
-    var _a;
     var props = useThemeProps({ props: inProps, name: 'RcTimePicker' });
-    var isTwelveHourSystem = props.isTwelveHourSystem, value = props.value, times = props.times, onChange = props.onChange, disabled = props.disabled, dateMode = props.dateMode, min = props.min, max = props.max, size = props.size, onKeyDown = props.onKeyDown, onClear = props.onClear, HourPickerProps = props.HourPickerProps, MinutePickerProps = props.MinutePickerProps, PeriodToggleProps = props.PeriodToggleProps, PopoverPropsProp = props.PopoverProps, InputPropsProp = props.InputProps, classes = props.classes, rest = __rest(props, ["isTwelveHourSystem", "value", "times", "onChange", "disabled", "dateMode", "min", "max", "size", "onKeyDown", "onClear", "HourPickerProps", "MinutePickerProps", "PeriodToggleProps", "PopoverProps", "InputProps", "classes"]);
-    // TODO: when props remove clear that code, not use forwardRef for Jupiter test issue
-    if (times) {
-        logInDev({
-            component: 'RcTimePicker',
-            target: 'times',
-            time: '2021-3',
-            comment: "this props will be removed, using value to replace that ",
-        });
-    }
+    var isTwelveHourSystem = props.isTwelveHourSystem, value = props.value, onChange = props.onChange, disabled = props.disabled, dateMode = props.dateMode, min = props.min, max = props.max, size = props.size, onKeyDown = props.onKeyDown, onClear = props.onClear, HourPickerProps = props.HourPickerProps, MinutePickerProps = props.MinutePickerProps, PeriodToggleProps = props.PeriodToggleProps, PopoverPropsProp = props.PopoverProps, InputPropsProp = props.InputProps, classes = props.classes, defaultPickerValue = props.defaultPickerValue, rest = __rest(props, ["isTwelveHourSystem", "value", "onChange", "disabled", "dateMode", "min", "max", "size", "onKeyDown", "onClear", "HourPickerProps", "MinutePickerProps", "PeriodToggleProps", "PopoverProps", "InputProps", "classes", "defaultPickerValue"]);
     var actionRef = useRef(null);
     var hourRef = useRef(null);
     var minuteRef = useRef(null);
     var periodRef = useRef(null);
     var textFiledValueRef = useRef('');
-    var _b = __read(useState('none'), 2), selectionShowType = _b[0], setSelectionType = _b[1];
-    var nowTime = (_a = value) !== null && _a !== void 0 ? _a : times;
-    var isHaveValue = nowTime !== undefined;
+    var _a = __read(useState('none'), 2), selectionShowType = _a[0], setSelectionType = _a[1];
+    var _b = (function () {
+        if (value !== null)
+            return { nowTime: value, isShowTextfieldValue: true };
+        if (defaultPickerValue)
+            return { nowTime: defaultPickerValue, isShowTextfieldValue: false };
+        return { nowTime: null, isShowTextfieldValue: false };
+    })(), nowTime = _b.nowTime, isShowTextfieldValue = _b.isShowTextfieldValue;
+    var isHaveValue = nowTime !== null;
     var isDateMode = nowTime instanceof Date || dateMode;
     var currentTimestamp = getTimestamp(nowTime);
     var currentHourMinute = getHourAndMinute(currentTimestamp);
@@ -44,18 +40,9 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
         return getRangeBoundary({ min: min, max: max });
     }, [max, min]);
     var getEmitInitDate = useEventCallback(function () {
-        var date = isHaveValue
-            ? nowTime instanceof Date
-                ? new Date(nowTime)
-                : timestampToDate(nowTime)
-            : new Date();
-        if (nowTime) {
-            var hour = currentHourMinute.hour, minute = currentHourMinute.minute;
-            date.setHours(hour, minute, 0, 0);
-        }
-        else {
-            date.setHours(0, 0, 0, 0);
-        }
+        var date = nowTime !== null ? new Date(nowTime) : new Date();
+        var hour = currentHourMinute.hour, minute = currentHourMinute.minute;
+        date.setHours(hour, minute, 0, 0);
         return date;
     });
     var handleChange = useCallback(function (toValue) {
@@ -139,25 +126,6 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
             Escape: closeMenu,
         });
     });
-    var getRecoupHour = function (currHour, period) {
-        switch (period) {
-            case TIME_SYSTEM_TEXT.PM:
-                if (currHour < HALF_DAY_HOURS) {
-                    return HALF_DAY_HOURS;
-                }
-                break;
-            case TIME_SYSTEM_TEXT.AM:
-                if (currHour < HALF_DAY_HOURS) {
-                    if (currHour >= HALF_DAY_HOURS) {
-                        return -HALF_DAY_HOURS;
-                    }
-                }
-                break;
-            default:
-                break;
-        }
-        return 0;
-    };
     var handleHourInnerChange = useEventCallback(function (hour) {
         var minuteInstance = minuteRef.current;
         var periodInstance = periodRef.current;
@@ -200,6 +168,8 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
     }, [PopoverPropsProp, classes, handlePopoverKeydown]);
     // * make sure value inside range
     useLayoutEffect(function () {
+        if (currentTimestamp === null)
+            return;
         var time = getEmitInitDate();
         if (range.max.date && currentTimestamp > range.max.timestamp) {
             time.setHours(range.max.hour);
@@ -214,7 +184,7 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
     }, [currentTimestamp, range, handleChange, getEmitInitDate]);
     // * update input value
     useDepsChange(function () {
-        if (currentTimestamp === undefined) {
+        if (!isShowTextfieldValue) {
             textFiledValueRef.current = '';
             return;
         }
@@ -232,7 +202,7 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
         isTwelveHourSystem,
         currentPeriod,
     ]);
-    // * when no init value, open menu use min as value
+    // * when no value, open menu use min as value
     var originalHourValue = isHaveValue
         ? currentHourMinute.hour
         : // * use original range to calculate period value
@@ -257,7 +227,7 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
     var hourValue = isTwelveHourSystem
         ? originalHourValue % HALF_DAY_HOURS
         : originalHourValue;
-    // * when no init value, open menu use min as value
+    // * when no value, open menu use min as value
     var minuteValue = isHaveValue
         ? currentHourMinute.minute
         : boundary.minute.min;
@@ -279,13 +249,7 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
                 : minuteSource, isTwelveHourSystem: isHourView && isTwelveHourSystem, value: isHourView ? hourValue : minuteValue, onClick: handleSelectionViewClick, automationId: "time-picker-" + selectionShowType }))))));
 });
 /** @release */
-var RcTimePicker = styled(withDeprecatedCheck(_RcTimePicker, [
-    {
-        prop: 'times',
-        time: '2021-4',
-        comment: "@deprecated this props will be removed, using value to replace that",
-    },
-], 'RcTimePicker'))(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var RcTimePicker = styled(_RcTimePicker)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 RcTimePicker.defaultProps = {
     clearBtn: true,
     dateMode: false,

package/es6/components/Forms/Picker/TimePicker/utils/TimeBoundary.js

@@ -1,4 +1,4 @@
-import { getTimestamp, getTimestampFromDate, HOUR_MINUTES, TIME_GAP, timestampToDate, } from './TimePickerHelper';
+import { getHourAndMinute, getTimestamp, getTimestampFromDate, HOUR_MINUTES, TIME_GAP, } from './TimePickerHelper';
 var getDateBeginning = function () {
     var date = new Date();
     date.setHours(0, 0, 0, 0);
@@ -71,9 +71,14 @@ var TimeBoundary = /** @class */ (function () {
         this._minute = Math.floor(time.getMinutes() / this.timeGap) * this.timeGap;
     };
     TimeBoundary.prototype.getDateTime = function () {
-        return this.value instanceof Date
-            ? this.value
-            : timestampToDate(this.value);
+        var _a;
+        if (this.value instanceof Date) {
+            return this.value;
+        }
+        var _b = getHourAndMinute((_a = this.value) !== null && _a !== void 0 ? _a : 0), hour = _b.hour, minute = _b.minute;
+        var date = new Date();
+        date.setHours(hour, minute, 0, 0);
+        return date;
     };
     return TimeBoundary;
 }());

package/es6/components/Forms/Picker/TimePicker/utils/TimePickerHelper.js

@@ -61,7 +61,7 @@ var getTimestampFromDate = function (date) {
  * hour and minute number
  */
 var getHourAndMinute = function (times) {
-    if (!times) {
+    if (times === null) {
         return {
             hour: 0,
             minute: 0,
@@ -74,17 +74,10 @@ var getHourAndMinute = function (times) {
         minute: Math.floor(minute / ONE_MINUTE),
     };
 };
-/**
- * timestamp to date
- */
-var timestampToDate = function (times) {
-    var _a = getHourAndMinute(times), hour = _a.hour, minute = _a.minute;
-    var date = new Date();
-    date.setHours(hour, minute, 0, 0);
-    return date;
-};
 /**
  * get timestamp from date or timestamp
+ *
+ * if nowTime is number, it must be hour and minute timestamp
  */
 function getTimestamp(nowTime) {
     return nowTime instanceof Date ? getTimestampFromDate(nowTime) : nowTime;
@@ -101,4 +94,23 @@ var getTimestampFromHourAndMin = function (option) {
 function getPeriod(currHour) {
     return currHour >= HALF_DAY_HOURS ? TIME_SYSTEM_TEXT.PM : TIME_SYSTEM_TEXT.AM;
 }
-export { getFormattedTime, getHourAndMinute, getPeriod, getTimestamp, getTimestampFromDate, getTimestampFromHourAndMin, HALF_DAY_HOURS, HOUR_MINUTES, lastMinute, minuteSource, ONE_HOUR, pad, parseNumber, parseNumberToString, TIME_GAP, timestampToDate, twelveHourSystemSource, twentyFourHourSystemSource, };
+var getRecoupHour = function (currHour, period) {
+    switch (period) {
+        case TIME_SYSTEM_TEXT.PM:
+            if (currHour < HALF_DAY_HOURS) {
+                return HALF_DAY_HOURS;
+            }
+            break;
+        case TIME_SYSTEM_TEXT.AM:
+            if (currHour < HALF_DAY_HOURS) {
+                if (currHour >= HALF_DAY_HOURS) {
+                    return -HALF_DAY_HOURS;
+                }
+            }
+            break;
+        default:
+            break;
+    }
+    return 0;
+};
+export { getFormattedTime, getHourAndMinute, getPeriod, getRecoupHour, getTimestamp, getTimestampFromDate, getTimestampFromHourAndMin, HALF_DAY_HOURS, HOUR_MINUTES, lastMinute, minuteSource, ONE_HOUR, pad, parseNumber, parseNumberToString, TIME_GAP, twelveHourSystemSource, twentyFourHourSystemSource, };

package/es6/components/Forms/Picker/utils/PickerTextField/PickerTextField.js

@@ -1,8 +1,8 @@
 import { __assign, __read, __rest } from "tslib";
 import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import uniqueId from 'lodash/uniqueId';
+import { DeleteCircle as DeleteCircleIcon } from '@ringcentral/juno-icon';
 import { combineProps, useA11yKeyEvent, useEventCallback, } from '../../../../../foundation';
-import DeleteCircleIcon from '../../../../../icon/DeleteCircle';
 import { RcIconButton } from '../../../../Buttons/IconButton';
 import { RcVisuallyHidden } from '../../../../VisuallyHidden';
 import { StyledPickerTextField, StyledPopover } from '../../styles';

package/es6/components/Forms/Select/PlainSelect/PlainSelect.js

@@ -1,6 +1,7 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { combineProps, styled } from '../../../../foundation';
+import React, { forwardRef, useMemo, useState } from 'react';
+import { useControlled } from '@material-ui/core';
+import { combineProps, hasValue, logInDev, styled, } from '../../../../foundation';
 import { RcButton } from '../../../Buttons';
 import { RcMenu } from '../../../Menu';
 import { RcVirtualizedMenu } from '../../../VirtualizedMenu';
@@ -12,25 +13,39 @@ var defaultButtonProps = {
     TouchRippleProps: { classes: RcPlainSelectTouchRippleClasses },
 };
 var EmptyIcon = function () { return null; };
+var displayName = 'RcPlainSelect';
 var plainAnchorOrigin = {
     horizontal: 'left',
     vertical: 'bottom',
 };
 var _RcPlainSelect = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, classes = _a.classes, value = _a.value, renderValue = _a.renderValue, variant = _a.variant, ButtonProps = _a.ButtonProps, innerRef = _a.innerRef, SelectInputProps = _a.SelectInputProps, InputProps = _a.InputProps, disabled = _a.disabled, autoFocus = _a.autoFocus, size = _a.size, virtualize = _a.virtualize, fullWidth = _a.fullWidth, color = _a.color, 
+    var children = _a.children, className = _a.className, classes = _a.classes, valueProp = _a.value, defaultValue = _a.defaultValue, renderValue = _a.renderValue, variant = _a.variant, ButtonProps = _a.ButtonProps, innerRef = _a.innerRef, SelectInputProps = _a.SelectInputProps, InputProps = _a.InputProps, disabled = _a.disabled, autoFocus = _a.autoFocus, size = _a.size, virtualize = _a.virtualize, fullWidth = _a.fullWidth, color = _a.color, 
     //
-    IconComponent = _a.IconComponent, onOpenProp = _a.onOpen, onCloseProp = _a.onClose, rest = __rest(_a, ["children", "className", "classes", "value", "renderValue", "variant", "ButtonProps", "innerRef", "SelectInputProps", "InputProps", "disabled", "autoFocus", "size", "virtualize", "fullWidth", "color", "IconComponent", "onOpen", "onClose"]);
-    var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
+    IconComponent = _a.IconComponent, onOpenProp = _a.onOpen, onCloseProp = _a.onClose, onChangeProp = _a.onChange, rest = __rest(_a, ["children", "className", "classes", "value", "defaultValue", "renderValue", "variant", "ButtonProps", "innerRef", "SelectInputProps", "InputProps", "disabled", "autoFocus", "size", "virtualize", "fullWidth", "color", "IconComponent", "onOpen", "onClose", "onChange"]);
+    var _b = __read(useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: displayName,
+    }), 2), value = _b[0], setValue = _b[1];
+    var _c = __read(useState(false), 2), open = _c[0], setOpen = _c[1];
+    var isEmpty = !hasValue(value);
+    if (process.env.NODE_ENV !== 'production' && isEmpty) {
+        logInDev({
+            component: displayName,
+            message: '[Juno]: Plain Select must have init value',
+            level: 'error',
+        });
+    }
     var display = useMemo(function () {
         var item = children.find(function (child) {
             return child.props['value'] === value;
         });
         return item === null || item === void 0 ? void 0 : item.props['children'];
     }, [children, value]);
-    var _renderValue = useCallback(function (value) {
+    var _renderValue = function (newValue) {
         var _variant = switchVariantToButtonVariant(variant);
         return (React.createElement(RcButton, __assign({ ref: ref, innerRef: innerRef, disabled: disabled, size: size, color: color, fullWidth: fullWidth, autoFocus: autoFocus, variant: _variant, "aria-label": "open menu", "aria-haspopup": "listbox" }, combineProps(defaultButtonProps, ButtonProps)),
-            renderValue ? renderValue(value) : display,
+            renderValue ? renderValue(newValue) : display,
             (IconComponent && React.createElement(IconComponent, { open: open })) || (React.createElement(SelectArrowDownIcon
             // * reset default color
             , { 
@@ -38,21 +53,7 @@ var _RcPlainSelect = forwardRef(function (_a, ref) {
                 color: undefined, 
                 // *for reverse button
                 className: open ? 'MuiSelect-iconOpen' : '' }))));
-    }, [
-        ButtonProps,
-        IconComponent,
-        autoFocus,
-        color,
-        disabled,
-        display,
-        fullWidth,
-        innerRef,
-        open,
-        ref,
-        renderValue,
-        size,
-        variant,
-    ]);
+    };
     var _SelectInputProps = useMemo(function () {
         return combineProps({
             MenuComponent: virtualize ? RcVirtualizedMenu : RcMenu,
@@ -82,6 +83,9 @@ var _RcPlainSelect = forwardRef(function (_a, ref) {
         }, onClose: function (e) {
             setOpen(false);
             onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp(e);
+        }, onChange: function (e, v) {
+            setValue(e.target.value);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e, v);
         }, SelectInputProps: _SelectInputProps, InputProps: _InputProps, renderValue: _renderValue, fullWidth: fullWidth, color: color }, rest), children));
 });
 /** @release */
@@ -90,6 +94,6 @@ RcPlainSelect.defaultProps = {
     variant: 'text',
     size: 'medium',
 };
-RcPlainSelect.displayName = 'RcPlainSelect';
+RcPlainSelect.displayName = displayName;
 export { RcPlainSelect };
 var templateObject_1;

package/es6/components/Forms/Select/styles/SelectArrowDownIcon.js

@@ -1,8 +1,8 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
+import { ArrowDown } from '@ringcentral/juno-icon';
 import { styled } from '../../../../foundation';
-import ArrowDown from '../../../../icon/ArrowDown';
 import { RcIcon } from '../../../Icon';
 var _SelectArrowDownIcon = forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);

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

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

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

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef } from 'react';
+import { DeleteCircle } from '@ringcentral/juno-icon';
 import { styled } from '../../../../foundation';
-import DeleteCircle from '../../../../icon/DeleteCircle';
 import { RcIconButton } from '../../../Buttons/IconButton';
 var _ClearIconButton = forwardRef(function (_a, ref) {
     var onMouseDown = _a.onMouseDown, rest = __rest(_a, ["onMouseDown"]);

package/es6/components/Icon/Icon.js

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

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

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

package/es6/components/ImageView/ImageView.js

@@ -2,8 +2,8 @@ import { __assign, __awaiter, __extends, __generator, __makeTemplateObject, __re
 import React, { createRef, } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import values from 'lodash/values';
+import { ImageBroken } from '@ringcentral/juno-icon';
 import styled from '../../foundation/styled-components';
-import ImageBroken from '../../icon/ImageBroken';
 import { RcIcon } from '../Icon';
 var StyledLoadingPage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var StyledBackground = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  overflow: hidden;\n  box-shadow: ", ";\n  visibility: ", ";\n  user-select: none;\n  height: ", "px;\n  width: ", "px;\n"], ["\n  display: block;\n  overflow: hidden;\n  box-shadow: ", ";\n  visibility: ", ";\n  user-select: none;\n  height: ", "px;\n  width: ", "px;\n"])), function (_a) {
@@ -159,7 +159,7 @@ var RcImageView = /** @class */ (function (_super) {
     Object.defineProperty(RcImageView.prototype, "error", {
         get: function () {
             var errors = this.state.errors;
-            return values(errors).every(function (status) { return status; });
+            return values(errors).every(function (status) { return !!status; });
         },
         enumerable: true,
         configurable: true

package/es6/components/Link/Link.js

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