@ringcentral/juno 1.12.6-beta.5932-320a3f8d → 2.0.1

package/es6/components/Downshift/Downshift.js

@@ -1,8 +1,7 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { combineClasses, combineProps, getParsePaletteColor, omit, styled, useEventCallback, useForkRef, useTheme, useThemeProps, withDeprecatedCheck, } from '../../foundation';
-import ArrowDown from '../../icon/ArrowDown';
-import ArrowUp from '../../icon/ArrowUp';
+import { ArrowDown, ArrowUp } from '@ringcentral/juno-icon';
+import { combineClasses, combineProps, getParsePaletteColor, omit, styled, useDeprecatedCheck, useEventCallback, useForkRef, useTheme, useThemeProps, } from '../../foundation';
 import { RcChip } from '../Chip';
 import { ClearIconButton } from '../Forms/TextField/styles/ClearIconButton';
 import { RcVisuallyHidden } from '../VisuallyHidden';
@@ -11,6 +10,116 @@ import { RcSuggestionList } from './SuggestionList';
 import { DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_LIMIT_CHIPS, RcDownshiftDefaultFilterOptions, RcDownshiftInputClasses, useDownshift, useDownshiftError, } from './utils';
 var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDownshift' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcDownshift, props, [
+            {
+                prop: 'onSelectChange',
+                time: '2021-10',
+                comment: "@deprecated should use `onChange` */",
+            },
+            {
+                prop: 'suggestionItems',
+                time: '2021-10',
+                comment: "@deprecated  should use `options` to replace */",
+            },
+            {
+                prop: 'selectedItems',
+                time: '2021-10',
+                comment: "@deprecated  not need any more */",
+            },
+            {
+                prop: 'itemToString',
+                time: '2021-10',
+                comment: "@deprecated use `getOptionLabel` to replace that */",
+            },
+            {
+                prop: 'MenuItem',
+                time: '2021-10',
+                comment: "@deprecated should use `renderOption` to replace that */",
+            },
+            {
+                prop: 'minRowHeight',
+                time: '2021-10',
+                comment: "@deprecated suggestion list row min height for virtual list */",
+            },
+            {
+                prop: 'enableFreeChips',
+                time: '2021-10',
+                comment: "@deprecated enable free chip mode, should use `freeSolo` to replace that */",
+            },
+            {
+                prop: 'inputLabel',
+                time: '2021-10',
+                comment: "@deprecated please use `label` to replace that */",
+            },
+            {
+                prop: 'inputPlaceholder',
+                time: '2021-10',
+                comment: "@deprecated input element placeholder attribute */",
+            },
+            {
+                prop: 'maxLength',
+                time: '2021-10',
+                comment: "@deprecated input element maxlength, please use `TextFieldProps.inputProps.maxLength` */",
+            },
+            {
+                prop: 'screenReader',
+                time: '2021-10',
+                comment: "@deprecated should use `screenReaderProps` */",
+            },
+            {
+                prop: 'automationId',
+                time: '2021-10',
+                comment: "@deprecated wrapper automationId, should use `data-test-automation-id` directly */",
+            },
+            {
+                prop: 'InputItem',
+                time: '2021-10',
+                comment: "@deprecated just use the `renderTags` to render whole tags  */",
+            },
+            {
+                prop: 'emailError',
+                time: '2021-10',
+                comment: "@deprecated please calculate error outside by your self with `renderTags`, or prepare ready items with error field */",
+            },
+            {
+                prop: 'errorSelectedItems',
+                time: '2021-10',
+                comment: "@deprecated please calculate error outside by your self with `renderTags`, or prepare ready items with error field */",
+            },
+            {
+                prop: 'nameError',
+                time: '2021-10',
+                comment: "@deprecated replace to `error` */",
+            },
+            {
+                prop: 'keyToChips',
+                time: '2021-10',
+                comment: "@deprecated rename to `keyToTags` */",
+            },
+            {
+                prop: 'limitOfFreeChips',
+                time: '2021-10',
+                comment: "@deprecated should use `max` */",
+            },
+            {
+                prop: 'enableAutoTransform',
+                time: '2021-10',
+                comment: "@deprecated should use `autoSelect` */",
+            },
+            {
+                prop: 'messageRef',
+                time: '2021-10',
+                comment: "@deprecated should use `inputRef` */",
+            },
+            {
+                prop: 'TextFieldProps',
+                time: '2021-10',
+                comment: "@deprecated TextField props */",
+            },
+        ]);
+    }
     var theme = useTheme();
     var _a = props.itemToString, itemToString = _a === void 0 ? DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? DEFAULT_LIMIT_CHIPS : _c, minRowHeight = props.minRowHeight, suggestionItems = props.suggestionItems, messageRef = props.messageRef, MenuItem = props.MenuItem, inputLabel = props.inputLabel, nameError = props.nameError, maxLength = props.maxLength, InputItem = props.InputItem, emailError = props.emailError, autoSwitchEmail = props.autoSwitchEmail, enableFreeChips = props.enableFreeChips, inputPlaceholder = props.inputPlaceholder, errorSelectedItems = props.errorSelectedItems, enableAutoTransform = props.enableAutoTransform, allowPlainHelperText = props.allowPlainHelperText, TextFieldProps = props.TextFieldProps, selectedItemsProp = props.selectedItems, automationId = props.automationId, screenReader = props.screenReader, onSelectChange = props.onSelectChange, variant = props.variant, groupExpanded = props.groupExpanded, groupDefaultExpanded = props.groupDefaultExpanded, _d = props.groupVariant, groupVariant = _d === void 0 ? 'normal' : _d, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _e = props.value, valueProp = _e === void 0 ? selectedItemsProp : _e, _f = props.autoHighlight, autoHighlight = _f === void 0 ? true : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? true : _g, _h = props.clearBtn, clearBtn = _h === void 0 ? false : _h, _j = props.toggleButton, toggleButton = _j === void 0 ? false : _j, _k = props.multiple, multiple = _k === void 0 ? false : _k, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _l = props.getOptionLabel, getOptionLabel = _l === void 0 ? itemToString : _l, renderInput = props.renderInput, _m = props.label, label = _m === void 0 ? inputLabel : _m, _o = props.inputRef, inputRefProp = _o === void 0 ? messageRef : _o, _p = props.error, error = _p === void 0 ? nameError : _p, _q = props.placeholder, placeholder = _q === void 0 ? inputPlaceholder : _q, _r = props.freeSolo, freeSolo = _r === void 0 ? enableFreeChips : _r, _s = props.keyToTags, keyToTags = _s === void 0 ? keyToChips : _s, _t = props.maxFreeSolo, maxFreeSolo = _t === void 0 ? limitOfFreeChips : _t, SuggestionListProps = props.SuggestionListProps, _u = props.autoSelect, autoSelect = _u === void 0 ? enableAutoTransform : _u, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _v = props.defaultIsOpen, defaultIsOpen = _v === void 0 ? openOnFocus : _v, _w = props.disableCloseOnSelect, disableCloseOnSelect = _w === void 0 ? defaultIsOpen : _w, _x = props.onChange, onChangeProp = _x === void 0 ? onSelectChange : _x, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, focused = props.focused, color = props.color, rest = __rest(props, ["itemToString", "keyToChips", "limitOfFreeChips", "minRowHeight", "suggestionItems", "messageRef", "MenuItem", "inputLabel", "nameError", "maxLength", "InputItem", "emailError", "autoSwitchEmail", "enableFreeChips", "inputPlaceholder", "errorSelectedItems", "enableAutoTransform", "allowPlainHelperText", "TextFieldProps", "selectedItems", "automationId", "screenReader", "onSelectChange", "variant", "groupExpanded", "groupDefaultExpanded", "groupVariant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose", "focused", "color"]);
     var _y = __read(useState('bottom'), 2), position = _y[0], setPosition = _y[1];
@@ -21,7 +130,10 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     // * if that have pass old suggestionItems mean that use old logic
     var isNew = !suggestionItems;
     var oneOfTagError = false;
-    useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
+    }
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
     var _z = useDownshift({
         focused: focused,
@@ -184,113 +296,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
             isOpen && (React.createElement(RcSuggestionList, __assign({ highlightedIndex: highlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, MenuItem: MenuItem, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getMenuProps: getMenuProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, onUpdatePopper: handleUpdatePopper, maxContainerHeight: 180, getOptionLabel: getOptionLabel }, SuggestionListProps))),
             isRenderNoOptions && (renderNoOptions === null || renderNoOptions === void 0 ? void 0 : renderNoOptions(getNoOptionsProps, noOptionItem)))));
 }));
-var RcDownshift = styled(withDeprecatedCheck(_RcDownshift, [
-    {
-        prop: 'onSelectChange',
-        time: '2021-10',
-        comment: "@deprecated should use `onChange` */",
-    },
-    {
-        prop: 'suggestionItems',
-        time: '2021-10',
-        comment: "@deprecated  should use `options` to replace */",
-    },
-    {
-        prop: 'selectedItems',
-        time: '2021-10',
-        comment: "@deprecated  not need any more */",
-    },
-    {
-        prop: 'itemToString',
-        time: '2021-10',
-        comment: "@deprecated use `getOptionLabel` to replace that */",
-    },
-    {
-        prop: 'MenuItem',
-        time: '2021-10',
-        comment: "@deprecated should use `renderOption` to replace that */",
-    },
-    {
-        prop: 'minRowHeight',
-        time: '2021-10',
-        comment: "@deprecated suggestion list row min height for virtual list */",
-    },
-    {
-        prop: 'enableFreeChips',
-        time: '2021-10',
-        comment: "@deprecated enable free chip mode, should use `freeSolo` to replace that */",
-    },
-    {
-        prop: 'inputLabel',
-        time: '2021-10',
-        comment: "@deprecated please use `label` to replace that */",
-    },
-    {
-        prop: 'inputPlaceholder',
-        time: '2021-10',
-        comment: "@deprecated input element placeholder attribute */",
-    },
-    {
-        prop: 'maxLength',
-        time: '2021-10',
-        comment: "@deprecated input element maxlength, please use `TextFieldProps.inputProps.maxLength` */",
-    },
-    {
-        prop: 'screenReader',
-        time: '2021-10',
-        comment: "@deprecated should use `screenReaderProps` */",
-    },
-    {
-        prop: 'automationId',
-        time: '2021-10',
-        comment: "@deprecated wrapper automationId, should use `data-test-automation-id` directly */",
-    },
-    {
-        prop: 'InputItem',
-        time: '2021-10',
-        comment: "@deprecated just use the `renderTags` to render whole tags  */",
-    },
-    {
-        prop: 'emailError',
-        time: '2021-10',
-        comment: "@deprecated please calculate error outside by your self with `renderTags`, or prepare ready items with error field */",
-    },
-    {
-        prop: 'errorSelectedItems',
-        time: '2021-10',
-        comment: "@deprecated please calculate error outside by your self with `renderTags`, or prepare ready items with error field */",
-    },
-    {
-        prop: 'nameError',
-        time: '2021-10',
-        comment: "@deprecated replace to `error` */",
-    },
-    {
-        prop: 'keyToChips',
-        time: '2021-10',
-        comment: "@deprecated rename to `keyToTags` */",
-    },
-    {
-        prop: 'limitOfFreeChips',
-        time: '2021-10',
-        comment: "@deprecated should use `max` */",
-    },
-    {
-        prop: 'enableAutoTransform',
-        time: '2021-10',
-        comment: "@deprecated should use `autoSelect` */",
-    },
-    {
-        prop: 'messageRef',
-        time: '2021-10',
-        comment: "@deprecated should use `inputRef` */",
-    },
-    {
-        prop: 'TextFieldProps',
-        time: '2021-10',
-        comment: "@deprecated TextField props */",
-    },
-], 'RcDownshift'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DownshiftStyle);
+var RcDownshift = styled(_RcDownshift)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DownshiftStyle);
 RcDownshift.defaultProps = {};
 RcDownshift.displayName = 'RcDownshift';
 var ExportType = RcDownshift;

package/es6/components/Downshift/SuggestionList/SuggestionList.js

@@ -1,8 +1,8 @@
 import { __assign, __awaiter, __generator, __makeTemplateObject, __rest } from "tslib";
 import React, { createContext, forwardRef, useContext, useLayoutEffect, useMemo, useRef, } from 'react';
 import clsx from 'clsx';
+import { ArrowDown2 } from '@ringcentral/juno-icon';
 import { combineClasses, combineProps, omit, styled, useForkRef, usePrevious, useRetry, useSleep, useThemeProps, } from '../../../foundation';
-import ArrowDown2 from '../../../icon/ArrowDown2';
 import { RcBox } from '../../Box';
 import { RcIconButton } from '../../Buttons/IconButton';
 import { RcMenuItem } from '../../Menu/MenuItem';

package/es6/components/Downshift/utils/useDownshiftError.js

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 import { isForwardRef } from 'react-is';
-import { isShowJunoWarning, logInDev } from '../../../foundation';
+import { logInDev, rcConfiguration } from '../../../foundation';
 // TODO: this just for check error props
 export var useDownshiftError = function (_a) {
     var isNew = _a.isNew, MenuItem = _a.MenuItem, InputItem = _a.InputItem;
-    if (isShowJunoWarning) {
+    if (process.env.NODE_ENV !== 'production' &&
+        !rcConfiguration.WARNING_IGNORE) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(function () {
             if (!isNew) {

package/es6/components/Forms/Checkbox/Checkbox.js

@@ -1,10 +1,8 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useMemo } from 'react';
 import MuiCheckbox from '@material-ui/core/Checkbox';
-import { combineClasses, styled, useThemeProps, withDeprecatedCheck, } from '../../../foundation';
-import indeterminateIcon from '../../../icon/Indeterminate';
-import selectIcon from '../../../icon/Selects';
-import unSelectIcon from '../../../icon/Unselect';
+import { Indeterminate as indeterminateIcon, Selects as selectIcon, Unselect as unSelectIcon, } from '@ringcentral/juno-icon';
+import { combineClasses, styled, useDeprecatedCheck, useThemeProps, } from '../../../foundation';
 import { withTooltip } from '../../Tooltip';
 import { RcFormControlLabel } from '../FormControlLabel';
 import { CustomIconPropsGetter } from '../utils';
@@ -17,6 +15,16 @@ var getIconProps = CustomIconPropsGetter({
 });
 var _RcCheckbox = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcCheckbox' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcCheckbox, props, [
+            {
+                prop: 'iconSize',
+                time: '2021-4',
+                comment: "@deprecated using size to replace that",
+            },
+        ]);
+    }
     var label = props.label, formControlLabelProps = props.formControlLabelProps, color = props.color, error = props.error, followColorWhenUnChecked = props.followColorWhenUnChecked, classesProp = props.classes, iconSize = props.iconSize, sizeProp = props.size, icon = props.icon, checkedIcon = props.checkedIcon, rest = __rest(props, ["label", "formControlLabelProps", "color", "error", "followColorWhenUnChecked", "classes", "iconSize", "size", "icon", "checkedIcon"]);
     var size = sizeProp;
     // TODO: switch to size
@@ -31,13 +39,7 @@ var _RcCheckbox = forwardRef(function (inProps, ref) {
     }
     return Checkbox;
 });
-var RcCheckbox = styled(withDeprecatedCheck(withTooltip(_RcCheckbox), [
-    {
-        prop: 'iconSize',
-        time: '2021-4',
-        comment: "@deprecated using size to replace that",
-    },
-], 'RcCheckbox'))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), CheckboxStyle);
+var RcCheckbox = styled(withTooltip(_RcCheckbox))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), CheckboxStyle);
 RcCheckbox.displayName = 'RcCheckbox';
 RcCheckbox.defaultProps = {
     color: 'interactive.f01',

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

@@ -5,8 +5,8 @@ import MomentUtils from '@date-io/moment';
 import { useControlled } from '@material-ui/core/utils';
 import { MuiPickersUtilsProvider, useUtils as useMuiUtils, } from '@material-ui/pickers';
 import { findClosestEnabledDate as MuiFindClosestEnabledDate } from '@material-ui/pickers/_helpers/date-utils';
-import { combineClasses, combineProps, omit, styled, useEventCallback, useThemeProps, withDeprecatedCheck, } from '../../../../foundation';
-import DateBorder from '../../../../icon/DateBorder';
+import { DateBorder } from '@ringcentral/juno-icon';
+import { combineClasses, combineProps, omit, styled, useDeprecatedCheck, useEventCallback, useThemeProps, } from '../../../../foundation';
 import { PickerTextField, } from '../utils';
 import { Calendar } from './Calendar';
 import { invalidateDateInRange, RcDatePickerClasses, ScreenReaderProvider, } from './utils';
@@ -110,26 +110,30 @@ var InnerRcDatePicker = forwardRef(function (props, ref) {
 });
 var _RcDatePicker = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDatePicker' });
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDeprecatedCheck(RcDatePicker, props, [
+            {
+                prop: 'minDate',
+                time: '2021-3',
+                comment: "Min date @DateIOType, using min instead ",
+            },
+            {
+                prop: 'maxDate',
+                time: '2021-3',
+                comment: "Max date @DateIOType, using max instead ",
+            },
+            {
+                prop: 'date',
+                time: '2021-3',
+                comment: "please use value to replace that ",
+            },
+        ]);
+    }
     return (React.createElement(MuiPickersUtilsProvider, { utils: MomentUtils, locale: props.locale, libInstance: moment },
         React.createElement(InnerRcDatePicker, __assign({ ref: ref }, props))));
 });
-var RcDatePicker = styled(withDeprecatedCheck(_RcDatePicker, [
-    {
-        prop: 'minDate',
-        time: '2021-3',
-        comment: "Min date @DateIOType, using min instead ",
-    },
-    {
-        prop: 'maxDate',
-        time: '2021-3',
-        comment: "Max date @DateIOType, using max instead ",
-    },
-    {
-        prop: 'date',
-        time: '2021-3',
-        comment: "please use value to replace that ",
-    },
-], 'RcDatePicker'))(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var RcDatePicker = styled(_RcDatePicker)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 RcDatePicker.defaultProps = {
     clearBtn: true,
     formatString: DEFAULT_FORMAT,

package/es6/components/Forms/Picker/DatePicker/DatePickerHeader.js

@@ -1,7 +1,6 @@
 import React, { memo, useRef } from 'react';
 import { useUtils as useMuiUtils } from '@material-ui/pickers';
-import arrowLeftSvg from '../../../../icon/ArrowLeft2';
-import arrowRightSvg from '../../../../icon/ArrowRight';
+import { ArrowLeft2 as arrowLeftSvg, ArrowRight as arrowRightSvg, } from '@ringcentral/juno-icon';
 import { RcVisuallyHidden } from '../../../VisuallyHidden';
 import { SelectArrowDownIcon } from '../../Select/styles/SelectArrowDownIcon';
 import { StyledCurrentMonth, SwitchHeaderButton, SwitchHeaderButtonWrapper, SwitchHeaderWrapper, } from './styles';

package/es6/components/Forms/Picker/DatePicker/Day.js

@@ -1,8 +1,8 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, memo } from 'react';
-import { DayStyle } from './styles';
-import { PickerBaseIconButton } from '../styles';
 import { styled } from '../../../../foundation';
+import { PickerBaseIconButton } from '../styles';
+import { DayStyle } from './styles';
 var _Day = forwardRef(function (props, ref) {
     var children = props.children, disabled = props.disabled, hidden = props.hidden, current = props.current, selected = props.selected, size = props.size, focused = props.focused, day = props.day, rest = __rest(props, ["children", "disabled", "hidden", "current", "selected", "size", "focused", "day"]);
     return (React.createElement(PickerBaseIconButton, __assign({ "aria-pressed": focused, ref: ref, size: size, selected: selected, "data-picker-focused": focused ? '' : undefined, hidden: hidden, "data-test-automation-class": hidden ? 'date-picker-hidden-day' : 'date-picker-day', "data-test-automation-value": children, disabled: disabled }, rest),

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

@@ -1,9 +1,8 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, } from 'react';
 import { runKeyHandler } from '@material-ui/pickers/_shared/hooks/useKeyDown';
+import { ArrowDown as ArrowDownIcon, ArrowUp as ArrowUpIcon, } from '@ringcentral/juno-icon';
 import { styled, useChange, useDepsChange, useEventCallback, useForceUpdate, useRefState, } from '../../../../foundation';
-import ArrowDownIcon from '../../../../icon/ArrowDown';
-import ArrowUpIcon from '../../../../icon/ArrowUp';
 import { StyledNumberPicker } from './styles/StyledNumberPicker';
 import { StyledTimeIconButton } from './styles/StyledTimeIconButton';
 import { pad } from './utils';

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 { TimeBorder as TimeBorderIcon } from '@ringcentral/juno-icon';
 import { combineClasses, combineProps, styled, useDepsChange, useEventCallback, useThemeProps, } from '../../../../foundation';
-import TimeBorderIcon from '../../../../icon/TimeBorder';
 import { RcBox } from '../../../Box';
 import { PickerTextField, } from '../utils';
 import { TIME_SYSTEM_TEXT } from './constant';
@@ -10,7 +10,7 @@ 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, twelveHourSystemSource, twentyFourHourSystemSource, getRecoupHour, } 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 props = useThemeProps({ props: inProps, name: 'RcTimePicker' });
     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"]);

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

@@ -1,4 +1,4 @@
-import { getTimestamp, getTimestampFromDate, HOUR_MINUTES, TIME_GAP, getHourAndMinute, } 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);

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

@@ -113,4 +113,4 @@ var getRecoupHour = function (currHour, period) {
     }
     return 0;
 };
-export { getFormattedTime, getHourAndMinute, getPeriod, getTimestamp, getTimestampFromDate, getTimestampFromHourAndMin, HALF_DAY_HOURS, HOUR_MINUTES, lastMinute, minuteSource, ONE_HOUR, pad, parseNumber, parseNumberToString, TIME_GAP, twelveHourSystemSource, twentyFourHourSystemSource, getRecoupHour, };
+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"]);