@ringcentral/juno 2.23.1 → 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/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/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.1",
+  "version": "2.24.0",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",