@ringcentral/juno 1.12.6-beta.5910-6eeb3bdd → 2.0.0-rc.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,8 +1,8 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import MuiTextField from '@material-ui/core/TextField';
+import { DeleteCircle } from '@ringcentral/juno-icon';
 import { clearReactReferencesInNode, combineClasses, combineProps, styled, useEventCallback, useForkRef, useThemeProps, withDeprecatedCheck, } from '../../../foundation';
-import DeleteCircle from '../../../icon/DeleteCircle';
 import { useRcFormContext } from '../Form/Form/FormContext';
 import { ClearIconButton, TextFieldStyle } from './styles';
 import { RcOutlineTextFieldIconSizes, RcOutlineTextFieldInputClasses, RcTextFieldClasses, RcTextFieldFormHelperTextClasses, RcTextFieldInputClasses, RcTextFieldInputLabelClasses, } from './utils';

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/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/Menu/MenuItem/MenuItem.js

@@ -2,8 +2,8 @@ import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useContext, useImperativeHandle, useMemo, } from 'react';
 import clsx from 'clsx';
 import MuiMenuItem from '@material-ui/core/MenuItem';
+import { Check as checkSvg } from '@ringcentral/juno-icon';
 import { combineClasses, isRcElement, logInDev, omit, styled, useEventCallback, useId, useThemeProps, } from '../../../foundation';
-import checkSvg from '../../../icon/Check';
 import { RcIcon } from '../../Icon';
 import { RcListItemSecondaryAction } from '../../List';
 import { RcListItemAvatar } from '../../List/ListItemAvatar';

package/es6/components/Menu/SubMenu/SubMenu.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, memo, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { ArrowRight } from '@ringcentral/juno-icon';
 import { a11yKeyboard, combineClasses, styled, useEventCallback, useForkRef, useId, useRcPortalWindowContext, useThemeProps, } from '../../../foundation';
-import ArrowRight from '../../../icon/ArrowRight';
 import { ClickAwayListener } from '../../ClickAwayListener';
 import { RcIcon } from '../../Icon';
 import { RcListItemText } from '../../List/ListItemText';

package/es6/components/Rating/Rating.js

@@ -1,9 +1,8 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useCallback, useMemo } from 'react';
 import MuiRating from '@material-ui/lab/Rating';
+import { Star, StarBorder } from '@ringcentral/juno-icon';
 import { combineClasses, styled, useEventCallback, useThemeProps, } from '../../foundation';
-import Star from '../../icon/Star';
-import StarBorder from '../../icon/StarBorder';
 import { RcIcon } from '../Icon';
 import { RcTooltip } from '../Tooltip';
 import { RatingStyle } from './styles';

package/es6/components/Stepper/StepIcon/StepIcon.js

@@ -1,9 +1,8 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useMemo } from 'react';
 import MuiStepIcon from '@material-ui/core/StepIcon';
+import { Check, Edit } from '@ringcentral/juno-icon';
 import { combineClasses, styled, useThemeProps, } from '../../../foundation';
-import Check from '../../../icon/Check';
-import Edit from '../../../icon/Edit';
 import { StepIconStyle } from './styles';
 import { StyledCircleIcon } from './styles/StyledCircleIcon';
 import { RcStepIconClasses, useIsEditable } from './utils';

package/es6/components/TablePagination/styles/TablePaginationActions.js

@@ -1,8 +1,7 @@
 import { __assign, __makeTemplateObject } from "tslib";
 import React, { memo } from 'react';
+import { ArrowLeft2, ArrowRight } from '@ringcentral/juno-icon';
 import { combineProps, spacing, styled, } from '../../../foundation';
-import ArrowLeft from '../../../icon/ArrowLeft2';
-import ArrowRight from '../../../icon/ArrowRight';
 import { RcIconButton } from '../../Buttons/IconButton/IconButton';
 var TablePaginationActionsWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin-left: ", ";\n"], ["\n  display: flex;\n  margin-left: ", ";\n"])), spacing(5));
 export var RcTablePaginationActions = memo(function (props) {
@@ -16,7 +15,7 @@ export var RcTablePaginationActions = memo(function (props) {
     var prevDisabled = page === 0;
     var nextDisabled = count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false;
     return (React.createElement(TablePaginationActionsWrapper, { className: className },
-        React.createElement(RcIconButton, __assign({ symbol: ArrowLeft, onClick: handleBackButtonClick, size: "medium", disabled: prevDisabled }, combineProps({ TooltipProps: { tooltipForceHide: prevDisabled } }, backIconButtonProps))),
+        React.createElement(RcIconButton, __assign({ symbol: ArrowLeft2, onClick: handleBackButtonClick, size: "medium", disabled: prevDisabled }, combineProps({ TooltipProps: { tooltipForceHide: prevDisabled } }, backIconButtonProps))),
         React.createElement(RcIconButton, __assign({ symbol: ArrowRight, onClick: handleNextButtonClick, size: "medium", disabled: nextDisabled }, combineProps({ TooltipProps: { tooltipForceHide: nextDisabled } }, nextIconButtonProps)))));
 });
 var templateObject_1;

package/es6/components/Tables/TableHeadCell.js

@@ -2,9 +2,8 @@ import { __assign } from "tslib";
 import React, { useMemo } from 'react';
 import isFunction from 'lodash/isFunction';
 import isNumber from 'lodash/isNumber';
+import { JumpToLatest as arrowDown, JumpToUnread as arrowUp, } from '@ringcentral/juno-icon';
 import { useA11yKeyEvent, useThemeProps } from '../../foundation';
-import arrowDown from '../../icon/JumpToLatest';
-import arrowUp from '../../icon/JumpToUnread';
 import { RcIcon } from '../Icon';
 import { StyledSortIconWrapper, StyledTableHeadCell, StyledTableHeadCellContent, StyledTableHeadText, } from './styled';
 import { ARIA_SORT_VALUES, ORDER_TABLE_BY, SORT_ICON_CLASS, } from './types';

package/es6/components/Tabs/Tabs/MoreMenuTab/MoreMenuTab.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useMemo, useState } from 'react';
+import { MoreHoriz as MoreHorizIcon } from '@ringcentral/juno-icon';
 import { styled, useEventCallback, useId, } from '../../../../foundation';
-import MoreHorizIcon from '../../../../icon/MoreHoriz';
 import { RcIcon } from '../../../Icon';
 import { RcListItemIcon, RcListItemText } from '../../../List';
 import { RcMenu, RcMenuItem } from '../../../Menu';

package/es6/foundation/hooks/useInterval/useInterval.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useEventCallback } from '../useEventCallback';
 /**
  * controllable interval, provide easy way to control interval

package/es6/foundation/theme/ThemeProvider.js

@@ -1,10 +1,10 @@
 import { __assign, __rest } from "tslib";
 import 'focus-visible';
 import React, { createContext, useContext, } from 'react';
-import { MuiThemeProvider, StylesProvider, createGenerateClassName, } from '@material-ui/core/styles';
+import { createGenerateClassName, MuiThemeProvider, StylesProvider, } from '@material-ui/core/styles';
+import { useResultRef } from '../hooks';
 import { ThemeProvider as StyledThemeProvider, useTheme, } from '../styled-components';
 import createTheme from './createTheme';
-import { useResultRef } from '../hooks';
 var NestedThemeContext = createContext(false);
 /**
  * sub theme provider,

package/es6/foundation/theme/ThemeSwitcherProvider/rcDark.json

@@ -1,12 +1,6 @@
 {
     "breakpoints": {
-        "keys": [
-            "xs",
-            "sm",
-            "md",
-            "lg",
-            "xl"
-        ],
+        "keys": ["xs", "sm", "md", "lg", "xl"],
         "values": {
             "lg": 1280,
             "md": 960,

package/es6/foundation/theme/ThemeSwitcherProvider/rcHighContrast.json

@@ -1,12 +1,6 @@
 {
     "breakpoints": {
-        "keys": [
-            "xs",
-            "sm",
-            "md",
-            "lg",
-            "xl"
-        ],
+        "keys": ["xs", "sm", "md", "lg", "xl"],
         "values": {
             "lg": 1280,
             "md": 960,

package/es6/foundation/theme/assets/breakpoints.json

@@ -1,11 +1,5 @@
 {
-    "keys": [
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-    ],
+    "keys": ["xs", "sm", "md", "lg", "xl"],
     "values": {
         "xs": 0,
         "sm": 641,

package/foundation/theme/ThemeProvider.js

@@ -4,9 +4,9 @@ var tslib_1 = require("tslib");
 require("focus-visible");
 var react_1 = tslib_1.__importStar(require("react"));
 var styles_1 = require("@material-ui/core/styles");
+var hooks_1 = require("../hooks");
 var styled_components_1 = require("../styled-components");
 var createTheme_1 = tslib_1.__importDefault(require("./createTheme"));
-var hooks_1 = require("../hooks");
 var NestedThemeContext = react_1.createContext(false);
 /**
  * sub theme provider,

package/foundation/theme/ThemeSwitcherProvider/rcDark.json

@@ -1,12 +1,6 @@
 {
     "breakpoints": {
-        "keys": [
-            "xs",
-            "sm",
-            "md",
-            "lg",
-            "xl"
-        ],
+        "keys": ["xs", "sm", "md", "lg", "xl"],
         "values": {
             "lg": 1280,
             "md": 960,

package/foundation/theme/ThemeSwitcherProvider/rcHighContrast.json

@@ -1,12 +1,6 @@
 {
     "breakpoints": {
-        "keys": [
-            "xs",
-            "sm",
-            "md",
-            "lg",
-            "xl"
-        ],
+        "keys": ["xs", "sm", "md", "lg", "xl"],
         "values": {
             "lg": 1280,
             "md": 960,

package/foundation/theme/assets/breakpoints.json

@@ -1,11 +1,5 @@
 {
-    "keys": [
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl"
-    ],
+    "keys": ["xs", "sm", "md", "lg", "xl"],
     "values": {
         "xs": 0,
         "sm": 641,

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@ringcentral/juno",
-  "version": "1.12.6-beta.5910-6eeb3bdd",
-  "main": "./index.js",
-  "module": "./es6/index.js",
+  "version": "2.0.0-rc.0",
   "author": "RingCentral",
   "license": "MIT",
-  "typings": "./index.d.ts",
   "bugs": {
     "url": "https://github.com/ringcentral/juno/issues"
   },
@@ -29,10 +26,11 @@
     "react-beautiful-dnd": "^13.0.0",
     "react-virtuoso": "^1.9.3",
     "resize-observer-polyfill": "^1.5.1",
-    "tslib": ">=2.0.0",
-    "typeface-lato": "^0.0.75"
+    "typeface-lato": "^0.0.75",
+    "tslib": ">=2.0.0"
   },
   "peerDependencies": {
+    "@ringcentral/juno-icon": ">=1.0.0 <2.0.0",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -55,4 +53,4 @@
       "default": "./es6/"
     }
   }
-}
+}