@ringcentral/juno 2.23.0 → 2.24.0

package/components/Downshift/Downshift.js

@@ -192,7 +192,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex;
+    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex, popperElementRef = _10.popperElementRef;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     var _11 = getInputProps(), onBlur = _11.onBlur, InputProps = tslib_1.__rest(_11, ["onBlur"]);
     var helperText = isNew
@@ -307,7 +307,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                 maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
         }, rest), { value: inputValue, clearBtn: false })),
         !helperText && screenReaderText && (react_1.default.createElement(VisuallyHidden_1.RcVisuallyHidden, { id: describedbyId }, screenReaderText)),
-        react_1.default.createElement(styles_1.StyledPopper, tslib_1.__assign({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: utils_1.fixOffsetsModifer }, 
+        react_1.default.createElement(styles_1.StyledPopper, tslib_1.__assign({ ref: popperElementRef, open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: utils_1.fixOffsetsModifer }, 
             // * view type in popper.js
             popperOptions: {
                 onUpdate: function (e) {

package/components/Downshift/SuggestionList/utils/useSuggestionList.js

@@ -118,9 +118,6 @@ exports.useSuggestionList = function (_a) {
         var groupOrder = (currGroup === null || currGroup === void 0 ? void 0 : currGroup.order) || 0;
         return foundation_1.combineProps(tslib_1.__assign({ id: currUniqueId + "-option-" + index, onClick: function (e) {
                 selectItem(e, item);
-            }, onMouseDown: function (e) {
-                e.preventDefault();
-                e.stopPropagation();
             }, onMouseOver: function () {
                 if (highlightedIndexRef.current !== index &&
                     getIsItemCanSelected(item)) {

package/components/Downshift/utils/useDownshift.d.ts

@@ -3,6 +3,7 @@ import { ChangeEvent, HTMLAttributes } from 'react';
 import { RcIconButtonProps } from '../../Buttons/IconButton';
 import { RcDownshiftProps } from '../Downshift';
 import { RcDownshiftSelectedItem } from './SelectItem';
+import { RcDownshiftGetItemPropsOptions } from './useDownshift.interface';
 declare type UseDownshiftParams<T extends RcDownshiftSelectedItem = RcDownshiftSelectedItem> = {
     /** that input ref you binding event */
     inputRef: React.RefObject<HTMLInputElement>;
@@ -292,7 +293,7 @@ export declare const useDownshift: <T extends RcDownshiftSelectedItem = RcDownsh
         'aria-required': boolean;
         'aria-disabled': boolean;
     };
-    getItemProps: ({ item, index, ...itemRest }: import("./useDownshift.interface").RcDownshiftGetItemPropsOptions<T>) => {
+    getItemProps: (props: RcDownshiftGetItemPropsOptions<T>) => {
         isSelected?: boolean | undefined;
         disabled?: boolean | undefined;
         ref?: import("react").RefObject<any> | undefined;
@@ -577,5 +578,6 @@ export declare const useDownshift: <T extends RcDownshiftSelectedItem = RcDownsh
     id: string;
     inputChanged: boolean;
     autoCompleteSelectedIndex: number;
+    popperElementRef: import("react").RefObject<HTMLDivElement>;
 };
 export {};

package/components/Downshift/utils/useDownshift.js

@@ -29,6 +29,7 @@ exports.useDownshift = function (_a) {
     var stopAutoSelectRef = react_1.useRef(false);
     var fromPasteString = react_1.useRef('');
     var keepHighlightedIndexRef = react_1.useRef(false);
+    var popperElementRef = react_1.useRef(null);
     var _g = foundation_1.useSleep(), sleep = _g.sleep, getSleeping = _g.getSleeping;
     // * when that is autocomplete, that will never be multiple
     var multiple = isAutocomplete ? false : multipleProp;
@@ -146,7 +147,20 @@ exports.useDownshift = function (_a) {
                 }
             }
         },
-    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getSuggestionListItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    var getItemProps = function (props) {
+        var onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, rest = tslib_1.__rest(props, ["onMouseDown", "onMouseUp"]);
+        return getSuggestionListItemProps(tslib_1.__assign(tslib_1.__assign({}, rest), { onMouseDown: function (e) {
+                // `getPopperProps` will prevent change focus when mouse down popper
+                // but suggestion item is an exception.
+                // so we need stop propagation to make sure focus can be changed
+                e.stopPropagation();
+                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+            }, onMouseUp: function (e) {
+                focusInput();
+                onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(e);
+            } }));
+    };
     var readOnly = !isAutocomplete && !multiple && tags.length >= 1 ? true : undefined;
     var closeMenu = function (e, reason) {
         keepHighlightedIndexRef.current = false;
@@ -282,8 +296,8 @@ exports.useDownshift = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var getInputProps = function (props) {
-        var suggestionListItemProps = getSuggestionListInputProps(props);
-        return foundation_1.combineProps(tslib_1.__assign(tslib_1.__assign({}, suggestionListItemProps), { onPaste: function (e) {
+        var suggestionListInputProps = getSuggestionListInputProps(props);
+        return foundation_1.combineProps(tslib_1.__assign(tslib_1.__assign({}, suggestionListInputProps), { onPaste: function (e) {
                 var _a;
                 if (freeSolo) {
                     var clipboardData = e.clipboardData;
@@ -320,7 +334,12 @@ exports.useDownshift = function (_a) {
                 stopAutoSelectRef.current = false;
                 blurTags();
             }, onBlur: function (e) {
+                var _a;
                 setInputFocused(false);
+                // mouse down suggestion item will change focus,
+                // but we don't want to close popper in this case
+                if ((_a = popperElementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
+                    return;
                 if (autoSelect && !stopAutoSelectRef.current) {
                     if (!freeSolo)
                         selectItem(e, optionItems[highlightedIndexRef.current]);
@@ -532,5 +551,6 @@ exports.useDownshift = function (_a) {
         id: downshiftId,
         inputChanged: isInputValueChangedRef.current,
         autoCompleteSelectedIndex: autoCompleteSelectedIndexRef.current,
+        popperElementRef: popperElementRef,
     };
 };

package/components/Forms/Switch/Switch.js

@@ -11,10 +11,21 @@ var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var _RcSwitch = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcSwitch' });
-    var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, rest = tslib_1.__rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor"]);
+    var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, _b = props.inputRef, inputRefProp = _b === void 0 ? null : _b, onFocus = props.onFocus, onBlur = props.onBlur, rest = tslib_1.__rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor", "inputRef", "onFocus", "onBlur"]);
     var classes = react_1.useMemo(function () { return foundation_1.combineClasses(foundation_1.omit(utils_1.RcSwitchClasses, ['focusVisible']), classesProp); }, [classesProp]);
     var focusVisibleClassName = react_1.useMemo(function () { return clsx_1.default(utils_1.RcSwitchClasses.focusVisible, focusVisibleClassNameProp); }, [focusVisibleClassNameProp]);
-    var Switch = (react_1.default.createElement(Switch_1.default, tslib_1.__assign({ ref: ref, focusVisibleClassName: focusVisibleClassName, classes: classes }, rest, { color: "default", size: "medium", disableRipple: true, disableTouchRipple: true })));
+    var inputRef = react_1.useRef(null);
+    var handleInputRef = foundation_1.useForkRef(inputRef, inputRefProp);
+    var Switch = (react_1.default.createElement(Switch_1.default, tslib_1.__assign({ ref: ref, inputRef: handleInputRef, focusVisibleClassName: focusVisibleClassName, classes: classes }, rest, { color: "default", size: "medium", disableRipple: true, disableTouchRipple: true, onFocus: function (e) {
+            var _a;
+            if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.matches('[data-focus-visible-added]')) {
+                e.currentTarget.parentElement.setAttribute('data-focus-visible-within', '');
+            }
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        }, onBlur: function (e) {
+            e.currentTarget.parentElement.removeAttribute('data-focus-visible-within');
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        } })));
     if (label) {
         return (react_1.default.createElement(FormControlLabel_1.RcFormControlLabel, tslib_1.__assign({}, formControlLabelProps, { label: label, control: Switch })));
     }

package/components/Forms/Switch/styles/SwitchStyle.js

@@ -14,6 +14,6 @@ exports.SwitchStyle = function (_a) {
     var colorProp = _a.color, trackColorProp = _a.trackColor;
     var checkedColor = foundation_1.getParsePaletteColor(colorProp);
     var trackColor = foundation_1.getParsePaletteColor(trackColorProp, defaultTrackColorArray);
-    return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n    &.", " {\n      /* make sure focus ring can show correctly */\n      overflow: visible;\n      padding: 0px;\n      ", ";\n      ", ";\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        ", "\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      /* make sure focus ring can show correctly */\n      overflow: visible;\n      padding: 0px;\n      ", ";\n      ", ";\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        ", "\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "])), utils_1.RcSwitchClasses.root, widthCss, heightCss, utils_1.RcSwitchClasses.switchBase, widthCss, heightCss, foundation_1.spacing(-2), utils_1.RcSwitchClasses.checked, foundation_1.spacing(2), utils_1.RcSwitchClasses.thumb, thumbSize, thumbColor, utils_1.RcSwitchClasses.track, heightCss, foundation_1.radius('round'), trackColor, utils_1.RcSwitchClasses.checked, utils_1.RcSwitchClasses.track, checkedColor, utils_1.RcSwitchClasses.disabled, utils_1.RcSwitchClasses.track, disabledColor, utils_1.RcSwitchClasses.focusVisible, utils_1.RcSwitchClasses.track, foundation_1.focusRing('normal'), foundation_1.nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
+    return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n    &.", " {\n      padding: 0px;\n      ", ";\n      ", ";\n\n      &[data-focus-visible-within] {\n        border-radius: 100vw;\n        ", "\n      }\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      padding: 0px;\n      ", ";\n      ", ";\n\n      &[data-focus-visible-within] {\n        border-radius: 100vw;\n        ", "\n      }\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "])), utils_1.RcSwitchClasses.root, widthCss, heightCss, foundation_1.focusRing('normal'), utils_1.RcSwitchClasses.switchBase, widthCss, heightCss, foundation_1.spacing(-2), utils_1.RcSwitchClasses.checked, foundation_1.spacing(2), utils_1.RcSwitchClasses.thumb, thumbSize, thumbColor, utils_1.RcSwitchClasses.track, heightCss, foundation_1.radius('round'), trackColor, utils_1.RcSwitchClasses.checked, utils_1.RcSwitchClasses.track, checkedColor, utils_1.RcSwitchClasses.disabled, utils_1.RcSwitchClasses.track, disabledColor, foundation_1.nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/components/Forms/Switch/utils/SwitchUtils.js

@@ -1,12 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var foundation_1 = require("../../../../foundation");
-exports.RcSwitchClasses = foundation_1.RcClasses([
-    'root',
-    'switchBase',
-    'thumb',
-    'track',
-    'checked',
-    'disabled',
-    'focusVisible',
-], 'RcSwitch');
+exports.RcSwitchClasses = foundation_1.RcClasses(['root', 'switchBase', 'thumb', 'track', 'checked', 'disabled'], 'RcSwitch');

package/components/Forms/TextField/TextField.js

@@ -44,7 +44,7 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
     // TODO: remove when remove focusOnMount
     autoFocusProp = _a === void 0 ? focusOnMount : _a, InputPropsProp = props.InputProps, error = props.error, helperText = props.helperText, 
     // no need assign to MuiTextField
-    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, id = props.id, 
+    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, idProp = props.id, 
     // #region outline pick props
     variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, color = props.color, 
     // #endregion
@@ -68,7 +68,7 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(fakeEvent);
         setValidateMessage('');
     });
-    var endAdornment = react_1.useMemo(function () {
+    var endAdornment = (function () {
         var getCleanButton = function () {
             var iconTitle = clearLabel || (clearButtonProps === null || clearButtonProps === void 0 ? void 0 : clearButtonProps.title);
             var combineClearProps = foundation_1.combineProps({
@@ -89,48 +89,32 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
             return InputPropsProp.endAdornment;
         }
         return clearBtn ? getCleanButton() : undefined;
-    }, [
-        InputPropsProp,
-        clearAriaLabel,
-        clearBtn,
-        clearButtonProps,
-        clearLabel,
-        handleClear,
-        size,
-    ]);
-    var events = react_1.useMemo(function () {
-        return foundation_1.combineProps({
-            onBlur: function () {
-                runValidate();
-            },
-            onFocus: function () {
-                if (validateMessage !== '') {
-                    setValidateMessage('');
-                }
-            },
-        }, {
-            onBlur: onBlur,
-            onFocus: onFocus,
-        });
-    }, [onBlur, onFocus, runValidate, validateMessage]);
+    })();
+    var events = foundation_1.combineProps({
+        onBlur: function () {
+            runValidate();
+        },
+        onFocus: function () {
+            if (validateMessage !== '') {
+                setValidateMessage('');
+            }
+        },
+    }, {
+        onBlur: onBlur,
+        onFocus: onFocus,
+    });
     var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcTextFieldClasses, classesProp); }, [classesProp]);
-    var InputProps = react_1.useMemo(function () {
-        var curr = {
-            outline: combineOutlineClasses,
-            borderLess: undefined,
-            standard: undefined,
-        }[variant];
-        return foundation_1.combineProps({
-            classes: curr || utils_1.RcTextFieldInputClasses,
-            disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
-        }, tslib_1.__assign(tslib_1.__assign({}, InputPropsProp), { endAdornment: endAdornment }));
-    }, [InputPropsProp, endAdornment, variant]);
-    var FormHelperTextProps = react_1.useMemo(function () {
-        return foundation_1.combineProps({ classes: utils_1.RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
-    }, [FormHelperTextPropsProp]);
-    var InputLabelProps = react_1.useMemo(function () {
-        return foundation_1.combineProps({ classes: utils_1.RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
-    }, [InputLabelPropsProp]);
+    var additionClasses = {
+        outline: combineOutlineClasses,
+        borderLess: undefined,
+        standard: undefined,
+    }[variant];
+    var InputProps = foundation_1.combineProps({
+        classes: additionClasses || utils_1.RcTextFieldInputClasses,
+        disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
+    }, tslib_1.__assign(tslib_1.__assign({}, InputPropsProp), { endAdornment: endAdornment }));
+    var FormHelperTextProps = foundation_1.combineProps({ classes: utils_1.RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
+    var InputLabelProps = foundation_1.combineProps({ classes: utils_1.RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
     react_1.useLayoutEffect(function () {
         var inputElm = innerRef.current;
         var autoFocus = autoFocusProp || (InputPropsProp === null || InputPropsProp === void 0 ? void 0 : InputPropsProp.autoFocus);
@@ -158,6 +142,8 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // TODO: remove this after upgrade to Mui5
+    var id = foundation_1.useId(idProp);
     react_1.useEffect(function () {
         if (id)
             formContext.set(id, { validate: function () { return runValidate(); } });

package/es6/components/Downshift/Downshift.js

@@ -188,7 +188,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex;
+    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex, popperElementRef = _10.popperElementRef;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     var _11 = getInputProps(), onBlur = _11.onBlur, InputProps = __rest(_11, ["onBlur"]);
     var helperText = isNew
@@ -303,7 +303,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                 maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
         }, rest), { value: inputValue, clearBtn: false })),
         !helperText && screenReaderText && (React.createElement(RcVisuallyHidden, { id: describedbyId }, screenReaderText)),
-        React.createElement(StyledPopper, __assign({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: fixOffsetsModifer }, 
+        React.createElement(StyledPopper, __assign({ ref: popperElementRef, open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: fixOffsetsModifer }, 
             // * view type in popper.js
             popperOptions: {
                 onUpdate: function (e) {

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

@@ -116,9 +116,6 @@ export var useSuggestionList = function (_a) {
         var groupOrder = (currGroup === null || currGroup === void 0 ? void 0 : currGroup.order) || 0;
         return combineProps(__assign({ id: currUniqueId + "-option-" + index, onClick: function (e) {
                 selectItem(e, item);
-            }, onMouseDown: function (e) {
-                e.preventDefault();
-                e.stopPropagation();
             }, onMouseOver: function () {
                 if (highlightedIndexRef.current !== index &&
                     getIsItemCanSelected(item)) {

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

@@ -1,4 +1,4 @@
-import { __assign, __awaiter, __generator, __read, __spread } from "tslib";
+import { __assign, __awaiter, __generator, __read, __rest, __spread } from "tslib";
 import { useCallback, useLayoutEffect, useMemo, useRef, } from 'react';
 import { combineProps, getSelectionPosition, useChange, useControlled, useId, useSleep, } from '../../../foundation';
 import { useSuggestionList } from '../SuggestionList/utils/useSuggestionList';
@@ -27,6 +27,7 @@ export var useDownshift = function (_a) {
     var stopAutoSelectRef = useRef(false);
     var fromPasteString = useRef('');
     var keepHighlightedIndexRef = useRef(false);
+    var popperElementRef = useRef(null);
     var _g = useSleep(), sleep = _g.sleep, getSleeping = _g.getSleeping;
     // * when that is autocomplete, that will never be multiple
     var multiple = isAutocomplete ? false : multipleProp;
@@ -144,7 +145,20 @@ export var useDownshift = function (_a) {
                 }
             }
         },
-    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getSuggestionListItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    var getItemProps = function (props) {
+        var onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, rest = __rest(props, ["onMouseDown", "onMouseUp"]);
+        return getSuggestionListItemProps(__assign(__assign({}, rest), { onMouseDown: function (e) {
+                // `getPopperProps` will prevent change focus when mouse down popper
+                // but suggestion item is an exception.
+                // so we need stop propagation to make sure focus can be changed
+                e.stopPropagation();
+                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+            }, onMouseUp: function (e) {
+                focusInput();
+                onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(e);
+            } }));
+    };
     var readOnly = !isAutocomplete && !multiple && tags.length >= 1 ? true : undefined;
     var closeMenu = function (e, reason) {
         keepHighlightedIndexRef.current = false;
@@ -280,8 +294,8 @@ export var useDownshift = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var getInputProps = function (props) {
-        var suggestionListItemProps = getSuggestionListInputProps(props);
-        return combineProps(__assign(__assign({}, suggestionListItemProps), { onPaste: function (e) {
+        var suggestionListInputProps = getSuggestionListInputProps(props);
+        return combineProps(__assign(__assign({}, suggestionListInputProps), { onPaste: function (e) {
                 var _a;
                 if (freeSolo) {
                     var clipboardData = e.clipboardData;
@@ -318,7 +332,12 @@ export var useDownshift = function (_a) {
                 stopAutoSelectRef.current = false;
                 blurTags();
             }, onBlur: function (e) {
+                var _a;
                 setInputFocused(false);
+                // mouse down suggestion item will change focus,
+                // but we don't want to close popper in this case
+                if ((_a = popperElementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
+                    return;
                 if (autoSelect && !stopAutoSelectRef.current) {
                     if (!freeSolo)
                         selectItem(e, optionItems[highlightedIndexRef.current]);
@@ -530,5 +549,6 @@ export var useDownshift = function (_a) {
         id: downshiftId,
         inputChanged: isInputValueChangedRef.current,
         autoCompleteSelectedIndex: autoCompleteSelectedIndexRef.current,
+        popperElementRef: popperElementRef,
     };
 };

package/es6/components/Forms/Switch/Switch.js

@@ -1,18 +1,29 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo, useRef } from 'react';
 import clsx from 'clsx';
 import MuiSwitch from '@material-ui/core/Switch';
-import { combineClasses, omit, useThemeProps, } from '../../../foundation';
+import { combineClasses, omit, useThemeProps, useForkRef, } from '../../../foundation';
 import styled from '../../../foundation/styled-components';
 import { RcFormControlLabel } from '../FormControlLabel';
 import { SwitchStyle } from './styles';
 import { RcSwitchClasses } from './utils';
 var _RcSwitch = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcSwitch' });
-    var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, rest = __rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor"]);
+    var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, _b = props.inputRef, inputRefProp = _b === void 0 ? null : _b, onFocus = props.onFocus, onBlur = props.onBlur, rest = __rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor", "inputRef", "onFocus", "onBlur"]);
     var classes = useMemo(function () { return combineClasses(omit(RcSwitchClasses, ['focusVisible']), classesProp); }, [classesProp]);
     var focusVisibleClassName = useMemo(function () { return clsx(RcSwitchClasses.focusVisible, focusVisibleClassNameProp); }, [focusVisibleClassNameProp]);
-    var Switch = (React.createElement(MuiSwitch, __assign({ ref: ref, focusVisibleClassName: focusVisibleClassName, classes: classes }, rest, { color: "default", size: "medium", disableRipple: true, disableTouchRipple: true })));
+    var inputRef = useRef(null);
+    var handleInputRef = useForkRef(inputRef, inputRefProp);
+    var Switch = (React.createElement(MuiSwitch, __assign({ ref: ref, inputRef: handleInputRef, focusVisibleClassName: focusVisibleClassName, classes: classes }, rest, { color: "default", size: "medium", disableRipple: true, disableTouchRipple: true, onFocus: function (e) {
+            var _a;
+            if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.matches('[data-focus-visible-added]')) {
+                e.currentTarget.parentElement.setAttribute('data-focus-visible-within', '');
+            }
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        }, onBlur: function (e) {
+            e.currentTarget.parentElement.removeAttribute('data-focus-visible-within');
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        } })));
     if (label) {
         return (React.createElement(RcFormControlLabel, __assign({}, formControlLabelProps, { label: label, control: Switch })));
     }

package/es6/components/Forms/Switch/styles/SwitchStyle.js

@@ -12,6 +12,6 @@ export var SwitchStyle = function (_a) {
     var colorProp = _a.color, trackColorProp = _a.trackColor;
     var checkedColor = getParsePaletteColor(colorProp);
     var trackColor = getParsePaletteColor(trackColorProp, defaultTrackColorArray);
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &.", " {\n      /* make sure focus ring can show correctly */\n      overflow: visible;\n      padding: 0px;\n      ", ";\n      ", ";\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        ", "\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      /* make sure focus ring can show correctly */\n      overflow: visible;\n      padding: 0px;\n      ", ";\n      ", ";\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        ", "\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "])), RcSwitchClasses.root, widthCss, heightCss, RcSwitchClasses.switchBase, widthCss, heightCss, spacing(-2), RcSwitchClasses.checked, spacing(2), RcSwitchClasses.thumb, thumbSize, thumbColor, RcSwitchClasses.track, heightCss, radius('round'), trackColor, RcSwitchClasses.checked, RcSwitchClasses.track, checkedColor, RcSwitchClasses.disabled, RcSwitchClasses.track, disabledColor, RcSwitchClasses.focusVisible, RcSwitchClasses.track, focusRing('normal'), nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &.", " {\n      padding: 0px;\n      ", ";\n      ", ";\n\n      &[data-focus-visible-within] {\n        border-radius: 100vw;\n        ", "\n      }\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      padding: 0px;\n      ", ";\n      ", ";\n\n      &[data-focus-visible-within] {\n        border-radius: 100vw;\n        ", "\n      }\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "])), RcSwitchClasses.root, widthCss, heightCss, focusRing('normal'), RcSwitchClasses.switchBase, widthCss, heightCss, spacing(-2), RcSwitchClasses.checked, spacing(2), RcSwitchClasses.thumb, thumbSize, thumbColor, RcSwitchClasses.track, heightCss, radius('round'), trackColor, RcSwitchClasses.checked, RcSwitchClasses.track, checkedColor, RcSwitchClasses.disabled, RcSwitchClasses.track, disabledColor, nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/es6/components/Forms/Switch/utils/SwitchUtils.js

@@ -1,10 +1,2 @@
 import { RcClasses } from '../../../../foundation';
-export var RcSwitchClasses = RcClasses([
-    'root',
-    'switchBase',
-    'thumb',
-    'track',
-    'checked',
-    'disabled',
-    'focusVisible',
-], 'RcSwitch');
+export var RcSwitchClasses = RcClasses(['root', 'switchBase', 'thumb', 'track', 'checked', 'disabled'], 'RcSwitch');

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

@@ -2,7 +2,7 @@ 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, useControlled, useDeprecatedCheck, useEventCallback, useForkRef, useThemeProps, } from '../../../foundation';
+import { clearReactReferencesInNode, combineClasses, combineProps, styled, useControlled, useDeprecatedCheck, useEventCallback, useForkRef, useThemeProps, useId, } from '../../../foundation';
 import { useRcFormContext } from '../Form/Form/FormContext';
 import { ClearIconButton, TextFieldStyle } from './styles';
 import { RcOutlineTextFieldIconSizes, RcOutlineTextFieldInputClasses, RcTextFieldClasses, RcTextFieldFormHelperTextClasses, RcTextFieldInputClasses, RcTextFieldInputLabelClasses, } from './utils';
@@ -41,7 +41,7 @@ var _RcTextField = forwardRef(function (inProps, ref) {
     // TODO: remove when remove focusOnMount
     autoFocusProp = _a === void 0 ? focusOnMount : _a, InputPropsProp = props.InputProps, error = props.error, helperText = props.helperText, 
     // no need assign to MuiTextField
-    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, id = props.id, 
+    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, idProp = props.id, 
     // #region outline pick props
     variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, color = props.color, 
     // #endregion
@@ -65,7 +65,7 @@ var _RcTextField = forwardRef(function (inProps, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(fakeEvent);
         setValidateMessage('');
     });
-    var endAdornment = useMemo(function () {
+    var endAdornment = (function () {
         var getCleanButton = function () {
             var iconTitle = clearLabel || (clearButtonProps === null || clearButtonProps === void 0 ? void 0 : clearButtonProps.title);
             var combineClearProps = combineProps({
@@ -86,48 +86,32 @@ var _RcTextField = forwardRef(function (inProps, ref) {
             return InputPropsProp.endAdornment;
         }
         return clearBtn ? getCleanButton() : undefined;
-    }, [
-        InputPropsProp,
-        clearAriaLabel,
-        clearBtn,
-        clearButtonProps,
-        clearLabel,
-        handleClear,
-        size,
-    ]);
-    var events = useMemo(function () {
-        return combineProps({
-            onBlur: function () {
-                runValidate();
-            },
-            onFocus: function () {
-                if (validateMessage !== '') {
-                    setValidateMessage('');
-                }
-            },
-        }, {
-            onBlur: onBlur,
-            onFocus: onFocus,
-        });
-    }, [onBlur, onFocus, runValidate, validateMessage]);
+    })();
+    var events = combineProps({
+        onBlur: function () {
+            runValidate();
+        },
+        onFocus: function () {
+            if (validateMessage !== '') {
+                setValidateMessage('');
+            }
+        },
+    }, {
+        onBlur: onBlur,
+        onFocus: onFocus,
+    });
     var classes = useMemo(function () { return combineClasses(RcTextFieldClasses, classesProp); }, [classesProp]);
-    var InputProps = useMemo(function () {
-        var curr = {
-            outline: combineOutlineClasses,
-            borderLess: undefined,
-            standard: undefined,
-        }[variant];
-        return combineProps({
-            classes: curr || RcTextFieldInputClasses,
-            disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
-        }, __assign(__assign({}, InputPropsProp), { endAdornment: endAdornment }));
-    }, [InputPropsProp, endAdornment, variant]);
-    var FormHelperTextProps = useMemo(function () {
-        return combineProps({ classes: RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
-    }, [FormHelperTextPropsProp]);
-    var InputLabelProps = useMemo(function () {
-        return combineProps({ classes: RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
-    }, [InputLabelPropsProp]);
+    var additionClasses = {
+        outline: combineOutlineClasses,
+        borderLess: undefined,
+        standard: undefined,
+    }[variant];
+    var InputProps = combineProps({
+        classes: additionClasses || RcTextFieldInputClasses,
+        disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
+    }, __assign(__assign({}, InputPropsProp), { endAdornment: endAdornment }));
+    var FormHelperTextProps = combineProps({ classes: RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
+    var InputLabelProps = combineProps({ classes: RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
     useLayoutEffect(function () {
         var inputElm = innerRef.current;
         var autoFocus = autoFocusProp || (InputPropsProp === null || InputPropsProp === void 0 ? void 0 : InputPropsProp.autoFocus);
@@ -155,6 +139,8 @@ var _RcTextField = forwardRef(function (inProps, ref) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // TODO: remove this after upgrade to Mui5
+    var id = useId(idProp);
     useEffect(function () {
         if (id)
             formContext.set(id, { validate: function () { return runValidate(); } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",