@ringcentral/juno 2.19.2 → 2.20.1

package/components/Badge/Badge.d.ts

@@ -3,9 +3,9 @@ import MuiBadge from '@material-ui/core/Badge';
 import { RcBaseProps, RcPaletteKeys, UnionPick } from '../../foundation';
 import { RcPresenceProps } from '../Presence';
 declare type RcBadgeProps = {
-    /** tag color, default is `highlight.b03` */
+    /** tag color, default is `umi.mentioned` */
     color?: RcPaletteKeys;
-    /** text color, default is `neutral.f01` */
+    /** text color, default is `umi.text` */
     textColor?: RcPaletteKeys;
     /** tag border color */
     borderColor?: RcPaletteKeys;

package/components/Badge/Badge.js

@@ -59,8 +59,8 @@ var _RcBadge = react_1.forwardRef(function (inProps, ref) {
 var RcBadge = foundation_1.styled(_RcBadge)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.BadgeStyle);
 exports.RcBadge = RcBadge;
 RcBadge.defaultProps = {
-    color: 'highlight.b03',
-    textColor: 'neutral.f01',
+    color: 'umi.mentioned',
+    textColor: 'umi.text',
     overlap: 'rectangular',
     anchorOrigin: {
         horizontal: 'right',

package/components/Downshift/Downshift.d.ts

@@ -248,6 +248,12 @@ declare type RcDownshiftProps<T extends RcDownshiftSelectedItem = RcDownshiftSel
      * and that also set `disableCloseOnSelect` to `true`
      */
     openOnFocus?: boolean;
+    /**
+     * If `true`, the input element can be click to toggle that selection list
+     *
+     * When be `autocomplete`, that `toggleWithInput` default will be `true`
+     */
+    toggleWithInput?: boolean;
     /** get expand addition props  */
     getExpandIconProps?: (group: RcDownshiftGroupedOption) => Partial<RcIconButtonProps>;
     /**

package/components/Downshift/Downshift.js

@@ -131,12 +131,13 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         ]);
     }
     var theme = foundation_1.useTheme();
+    var isAutocomplete = props.variant === 'autocomplete';
     var _a = props.itemToString, itemToString = _a === void 0 ? utils_1.DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? utils_1.DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? utils_1.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, _l = props.getToggleButtonProps, getToggleButtonPropsProp = _l === void 0 ? function (isOpen) {
         return {
             symbol: isOpen ? juno_icon_1.ArrowUp : juno_icon_1.ArrowDown,
         };
-    } : _l, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _m = props.getOptionLabel, getOptionLabel = _m === void 0 ? itemToString : _m, renderInput = props.renderInput, _o = props.label, label = _o === void 0 ? inputLabel : _o, _p = props.inputRef, inputRefProp = _p === void 0 ? messageRef : _p, _q = props.error, error = _q === void 0 ? nameError : _q, _r = props.placeholder, placeholder = _r === void 0 ? inputPlaceholder : _r, _s = props.freeSolo, freeSolo = _s === void 0 ? enableFreeChips : _s, _t = props.keyToTags, keyToTags = _t === void 0 ? keyToChips : _t, _u = props.maxFreeSolo, maxFreeSolo = _u === void 0 ? limitOfFreeChips : _u, _v = props.SuggestionListProps, _w = _v === void 0 ? {} : _v, _x = _w.virtualize, virtualize = _x === void 0 ? true : _x, SuggestionListProps = tslib_1.__rest(_w, ["virtualize"]), _y = props.autoSelect, autoSelect = _y === void 0 ? enableAutoTransform : _y, PopperComponent = props.PopperComponent, _z = props.PopperProps, _0 = _z === void 0 ? {} : _z, _1 = _0.anchorElType, anchorElType = _1 === void 0 ? 'root' : _1, popperTransition = _0.transition, _2 = _0.TransitionComponent, TransitionComponent = _2 === void 0 ? virtualize ? Fade_1.RcFade : Grow_1.RcGrow : _2, _3 = _0.transitionDuration, transitionDurationProp = _3 === void 0 ? 'auto' : _3, _4 = _0.TransitionProps, TransitionPropsProp = _4 === void 0 ? {} : _4, PopperProps = tslib_1.__rest(_0, ["anchorElType", "transition", "TransitionComponent", "transitionDuration", "TransitionProps"]), initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _5 = props.defaultIsOpen, defaultIsOpen = _5 === void 0 ? openOnFocus : _5, _6 = props.disableCloseOnSelect, disableCloseOnSelect = _6 === void 0 ? defaultIsOpen : _6, _7 = props.onChange, onChangeProp = _7 === void 0 ? onSelectChange : _7, 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 = tslib_1.__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", "getToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperComponent", "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 _8 = tslib_1.__read(react_1.useState('bottom-start'), 2), position = _8[0], setPosition = _8[1];
+    } : _l, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _m = props.toggleWithInput, toggleWithInput = _m === void 0 ? isAutocomplete : _m, _o = props.getOptionLabel, getOptionLabel = _o === void 0 ? itemToString : _o, renderInput = props.renderInput, _p = props.label, label = _p === void 0 ? inputLabel : _p, _q = props.inputRef, inputRefProp = _q === void 0 ? messageRef : _q, _r = props.error, error = _r === void 0 ? nameError : _r, _s = props.placeholder, placeholder = _s === void 0 ? inputPlaceholder : _s, _t = props.freeSolo, freeSolo = _t === void 0 ? enableFreeChips : _t, _u = props.keyToTags, keyToTags = _u === void 0 ? keyToChips : _u, _v = props.maxFreeSolo, maxFreeSolo = _v === void 0 ? limitOfFreeChips : _v, _w = props.SuggestionListProps, _x = _w === void 0 ? {} : _w, _y = _x.virtualize, virtualize = _y === void 0 ? true : _y, SuggestionListProps = tslib_1.__rest(_x, ["virtualize"]), _z = props.autoSelect, autoSelect = _z === void 0 ? enableAutoTransform : _z, PopperComponent = props.PopperComponent, _0 = props.PopperProps, _1 = _0 === void 0 ? {} : _0, _2 = _1.anchorElType, anchorElType = _2 === void 0 ? 'root' : _2, popperTransition = _1.transition, _3 = _1.TransitionComponent, TransitionComponent = _3 === void 0 ? virtualize ? Fade_1.RcFade : Grow_1.RcGrow : _3, _4 = _1.transitionDuration, transitionDurationProp = _4 === void 0 ? 'auto' : _4, _5 = _1.TransitionProps, TransitionPropsProp = _5 === void 0 ? {} : _5, PopperProps = tslib_1.__rest(_1, ["anchorElType", "transition", "TransitionComponent", "transitionDuration", "TransitionProps"]), initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _6 = props.defaultIsOpen, defaultIsOpen = _6 === void 0 ? openOnFocus : _6, _7 = props.disableCloseOnSelect, disableCloseOnSelect = _7 === void 0 ? defaultIsOpen : _7, _8 = props.onChange, onChangeProp = _8 === void 0 ? onSelectChange : _8, 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 = tslib_1.__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", "getToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "toggleWithInput", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperComponent", "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 _9 = tslib_1.__read(react_1.useState('bottom-start'), 2), position = _9[0], setPosition = _9[1];
     var innerInputRef = react_1.useRef(null);
     var textFieldRef = react_1.useRef(null);
     var inputRef = foundation_1.useForkRef(inputRefProp, innerInputRef);
@@ -151,7 +152,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         utils_1.useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
     }
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
-    var _9 = utils_1.useDownshift({
+    var _10 = utils_1.useDownshift({
         focused: focused,
         open: openProp,
         variant: variant,
@@ -178,6 +179,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         disabled: disabled,
         required: required,
         openOnFocus: openOnFocus,
+        toggleWithInput: toggleWithInput,
         autoHighlight: autoHighlight,
         groupBy: groupBy,
         groupVariant: groupVariant,
@@ -190,9 +192,9 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _9.focusInput, optionItems = _9.optionItems, optionsGroupList = _9.optionsGroupList, selectedItems = _9.tags, highlightedIndex = _9.highlightedIndex, getToggleButtonProps = _9.getToggleButtonProps, getTagProps = _9.getTagProps, getTagListBoxProps = _9.getTagListBoxProps, getMenuProps = _9.getMenuProps, getPopperProps = _9.getPopperProps, getInputProps = _9.getInputProps, getInputAriaProps = _9.getInputAriaProps, getLabelProps = _9.getLabelProps, getItemProps = _9.getItemProps, isOpen = _9.isOpen, inputValue = _9.inputValue, activeIndex = _9.activeIndex, setActiveIndex = _9.setActiveIndex, setHighlightedIndex = _9.setHighlightedIndex, onInputChange = _9.onInputChange, keepHighlightedIndex = _9.keepHighlightedIndex, changeHighlightedIndexReason = _9.changeHighlightedIndexReason, closeMenu = _9.closeMenu, openMenu = _9.openMenu, reset = _9.reset, getClearButtonProps = _9.getClearButtonProps, noOptionItem = _9.noOptionItem, getNoOptionsProps = _9.getNoOptionsProps, isKeepHighlightedIndex = _9.isKeepHighlightedIndex, isDownshiftFocused = _9.focused, autoCompleteSelectedIndex = _9.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;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
-    var _10 = getInputProps(), onBlur = _10.onBlur, InputProps = tslib_1.__rest(_10, ["onBlur"]);
+    var _11 = getInputProps(), onBlur = _11.onBlur, InputProps = tslib_1.__rest(_11, ["onBlur"]);
     var helperText = isNew
         ? helperTextProp
         : nameError || allowPlainHelperText
@@ -217,7 +219,6 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     }
     var toTextFieldRef = foundation_1.useForkRef(textFieldRef, ref);
     var colorHex = react_1.useMemo(function () { return (color ? foundation_1.getParsePaletteColor(color)({ theme: theme }) : undefined); }, [color, theme]);
-    var isAutocomplete = variant === 'autocomplete';
     var startAdornment = (function () {
         if (isAutocomplete) {
             return undefined;
@@ -260,14 +261,14 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                 : error
                     ? 'danger.f02'
                     : 'neutral.f04', size: "large" }, getToggleButtonProps(tslib_1.__assign(tslib_1.__assign({}, ToggleButtonProps), getToggleButtonPropsProp(isOpen))))))));
-    var _11 = (function () {
+    var _12 = (function () {
         var _a = InputPropsProp || {}, classes = _a.classes, restInputPropsProp = tslib_1.__rest(_a, ["classes"]);
         var toClasses = foundation_1.combineClasses(classes, utils_1.RcDownshiftInputClasses);
         return {
             containerClassName: toClasses.container,
             TextFieldInputProps: foundation_1.combineProps(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ classes: foundation_1.omit(toClasses, ['container']), endAdornment: endAdornment, inputComponent: styles_1.RcDownshiftInput }, getTagListBoxProps()), InputProps), { onBlur: debug ? undefined : onBlur }), restInputPropsProp),
         };
-    })(), containerClassName = _11.containerClassName, TextFieldInputProps = _11.TextFieldInputProps;
+    })(), containerClassName = _12.containerClassName, TextFieldInputProps = _12.TextFieldInputProps;
     react_1.useImperativeHandle(action, function () { return ({
         getActiveIndex: function () { return activeIndex; },
         setActiveIndex: setActiveIndex,

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

@@ -15,8 +15,8 @@ declare type UseDownshiftParams<T extends RcDownshiftSelectedItem = RcDownshiftS
      * set that will auto add item into options
      */
     addNoOptionItem?: 'first' | 'last';
-} & Pick<RcDownshiftProps<T>, 'open' | 'onOpen' | 'onClose' | 'multiple' | 'onChange' | 'value' | 'getOptionLabel' | 'filterOptions' | 'options' | 'freeSolo' | 'maxFreeSolo' | 'onMaxFreeSolo' | 'disableCloseOnSelect' | 'initialIsOpen' | 'keyToTags' | 'inputValue' | 'autoSelect' | 'onInputChange' | 'onKeyDown' | 'disabled' | 'openOnFocus' | 'onClear' | 'renderNoOptions' | 'autoHighlight' | 'getOptionDisabled' | 'required' | 'label' | 'disabledItemsHighlightable' | 'variant' | 'groupBy' | 'getExpandIconProps' | 'groupExpanded' | 'groupDefaultExpanded' | 'onGroupExpanded' | 'groupVariant' | 'focused'>;
-export declare const useDownshift: <T extends RcDownshiftSelectedItem = RcDownshiftSelectedItem>({ multiple: multipleProp, variant, label: labelProp, inputValue: inputValueProp, getOptionLabel, keyToTags, filterOptions: filterOptionsProp, disabledItemsHighlightable, options, freeSolo, onInputChange: onInputChangeProp, maxFreeSolo, onMaxFreeSolo, openOnFocus, disableCloseOnSelect, initialIsOpen, autoSelect, inputContainerRef, inputRef, wrapperRef, onKeyDown: onKeyDownProp, onChange: onSelectChange, value: selectedItemsProp, disabled, renderNoOptions, onClear, autoHighlight, getOptionDisabled, addNoOptionItem, groupBy, onGroupExpanded, groupVariant, groupExpanded, groupDefaultExpanded, getExpandIconProps, required, open: openProp, onOpen, onClose, focused, }: UseDownshiftParams<T>) => {
+} & Pick<RcDownshiftProps<T>, 'open' | 'onOpen' | 'onClose' | 'multiple' | 'onChange' | 'value' | 'getOptionLabel' | 'filterOptions' | 'options' | 'freeSolo' | 'maxFreeSolo' | 'onMaxFreeSolo' | 'disableCloseOnSelect' | 'initialIsOpen' | 'keyToTags' | 'inputValue' | 'autoSelect' | 'onInputChange' | 'onKeyDown' | 'disabled' | 'openOnFocus' | 'toggleWithInput' | 'onClear' | 'renderNoOptions' | 'autoHighlight' | 'getOptionDisabled' | 'required' | 'label' | 'disabledItemsHighlightable' | 'variant' | 'groupBy' | 'getExpandIconProps' | 'groupExpanded' | 'groupDefaultExpanded' | 'onGroupExpanded' | 'groupVariant' | 'focused'>;
+export declare const useDownshift: <T extends RcDownshiftSelectedItem = RcDownshiftSelectedItem>({ multiple: multipleProp, variant, label: labelProp, inputValue: inputValueProp, getOptionLabel, keyToTags, filterOptions: filterOptionsProp, disabledItemsHighlightable, options, freeSolo, onInputChange: onInputChangeProp, maxFreeSolo, onMaxFreeSolo, openOnFocus, toggleWithInput, disableCloseOnSelect, initialIsOpen, autoSelect, inputContainerRef, inputRef, wrapperRef, onKeyDown: onKeyDownProp, onChange: onSelectChange, value: selectedItemsProp, disabled, renderNoOptions, onClear, autoHighlight, getOptionDisabled, addNoOptionItem, groupBy, onGroupExpanded, groupVariant, groupExpanded, groupDefaultExpanded, getExpandIconProps, required, open: openProp, onOpen, onClose, focused, }: UseDownshiftParams<T>) => {
     focusInput: () => void | undefined;
     readOnly: boolean | undefined;
     getTagProps: ({ index, selectedItem, ...restTagProps }: import("./useDownshift.interface").RcDownshiftGetSelectedItemProps<T>) => {

package/components/Downshift/utils/useDownshift.js

@@ -9,7 +9,7 @@ var useDownshiftTag_1 = require("./useDownshiftTag");
 var DOWNSHIFT_ID_NO_RESULT_TOKEN = 'rc-chip-empty';
 var DEFAULT_HIGHLIGHTED_INDEX = -1;
 exports.useDownshift = function (_a) {
-    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DownshiftUtils_1.DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DownshiftUtils_1.DEFAULT_KEY_TO_CHIPS : _c, filterOptionsProp = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, focused = _a.focused;
+    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DownshiftUtils_1.DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DownshiftUtils_1.DEFAULT_KEY_TO_CHIPS : _c, filterOptionsProp = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, toggleWithInput = _a.toggleWithInput, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, focused = _a.focused;
     var isAutocomplete = variant === 'autocomplete';
     var autoCompleteSelectedIndexRef = react_1.useRef(DEFAULT_HIGHLIGHTED_INDEX);
     var downshiftId = foundation_1.useId('downshift', true);
@@ -167,6 +167,17 @@ exports.useDownshift = function (_a) {
             setIsOpen(true);
         }
     };
+    var toggleMenu = function (e, focus) {
+        if (focus === void 0) { focus = true; }
+        if (isOpen) {
+            closeMenu(e, 'toggleInput');
+        }
+        else {
+            openMenu(e);
+            if (focus)
+                focusInput();
+        }
+    };
     var handleInputChange = function (newValue, open, e) {
         if (open === void 0) { open = true; }
         if (inputValue !== newValue) {
@@ -433,7 +444,13 @@ exports.useDownshift = function (_a) {
                             break;
                     }
                 }
-            } }), props);
+            }, onMouseDown: toggleWithInput
+                ? function (e) {
+                    if (inputValue === '' || !isOpen) {
+                        toggleMenu(e, false);
+                    }
+                }
+                : undefined }), props);
     };
     var getInputAriaProps = function (props) {
         var suggestionListInputAriaProps = getSuggestionListInputAriaProps(props);
@@ -459,15 +476,7 @@ exports.useDownshift = function (_a) {
                 e.preventDefault();
                 e.stopPropagation();
             },
-            onClick: function (e) {
-                if (isOpen) {
-                    closeMenu(e, 'toggleInput');
-                }
-                else {
-                    openMenu(e);
-                    focusInput();
-                }
-            },
+            onClick: toggleMenu,
             tabIndex: -1,
         }, props);
     };

package/es6/components/Badge/Badge.js

@@ -56,8 +56,8 @@ var _RcBadge = forwardRef(function (inProps, ref) {
 });
 var RcBadge = styled(_RcBadge)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), BadgeStyle);
 RcBadge.defaultProps = {
-    color: 'highlight.b03',
-    textColor: 'neutral.f01',
+    color: 'umi.mentioned',
+    textColor: 'umi.text',
     overlap: 'rectangular',
     anchorOrigin: {
         horizontal: 'right',

package/es6/components/Downshift/Downshift.js

@@ -127,12 +127,13 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         ]);
     }
     var theme = useTheme();
+    var isAutocomplete = props.variant === 'autocomplete';
     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, _l = props.getToggleButtonProps, getToggleButtonPropsProp = _l === void 0 ? function (isOpen) {
         return {
             symbol: isOpen ? ArrowUp : ArrowDown,
         };
-    } : _l, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _m = props.getOptionLabel, getOptionLabel = _m === void 0 ? itemToString : _m, renderInput = props.renderInput, _o = props.label, label = _o === void 0 ? inputLabel : _o, _p = props.inputRef, inputRefProp = _p === void 0 ? messageRef : _p, _q = props.error, error = _q === void 0 ? nameError : _q, _r = props.placeholder, placeholder = _r === void 0 ? inputPlaceholder : _r, _s = props.freeSolo, freeSolo = _s === void 0 ? enableFreeChips : _s, _t = props.keyToTags, keyToTags = _t === void 0 ? keyToChips : _t, _u = props.maxFreeSolo, maxFreeSolo = _u === void 0 ? limitOfFreeChips : _u, _v = props.SuggestionListProps, _w = _v === void 0 ? {} : _v, _x = _w.virtualize, virtualize = _x === void 0 ? true : _x, SuggestionListProps = __rest(_w, ["virtualize"]), _y = props.autoSelect, autoSelect = _y === void 0 ? enableAutoTransform : _y, PopperComponent = props.PopperComponent, _z = props.PopperProps, _0 = _z === void 0 ? {} : _z, _1 = _0.anchorElType, anchorElType = _1 === void 0 ? 'root' : _1, popperTransition = _0.transition, _2 = _0.TransitionComponent, TransitionComponent = _2 === void 0 ? virtualize ? RcFade : RcGrow : _2, _3 = _0.transitionDuration, transitionDurationProp = _3 === void 0 ? 'auto' : _3, _4 = _0.TransitionProps, TransitionPropsProp = _4 === void 0 ? {} : _4, PopperProps = __rest(_0, ["anchorElType", "transition", "TransitionComponent", "transitionDuration", "TransitionProps"]), initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _5 = props.defaultIsOpen, defaultIsOpen = _5 === void 0 ? openOnFocus : _5, _6 = props.disableCloseOnSelect, disableCloseOnSelect = _6 === void 0 ? defaultIsOpen : _6, _7 = props.onChange, onChangeProp = _7 === void 0 ? onSelectChange : _7, 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", "getToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperComponent", "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 _8 = __read(useState('bottom-start'), 2), position = _8[0], setPosition = _8[1];
+    } : _l, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _m = props.toggleWithInput, toggleWithInput = _m === void 0 ? isAutocomplete : _m, _o = props.getOptionLabel, getOptionLabel = _o === void 0 ? itemToString : _o, renderInput = props.renderInput, _p = props.label, label = _p === void 0 ? inputLabel : _p, _q = props.inputRef, inputRefProp = _q === void 0 ? messageRef : _q, _r = props.error, error = _r === void 0 ? nameError : _r, _s = props.placeholder, placeholder = _s === void 0 ? inputPlaceholder : _s, _t = props.freeSolo, freeSolo = _t === void 0 ? enableFreeChips : _t, _u = props.keyToTags, keyToTags = _u === void 0 ? keyToChips : _u, _v = props.maxFreeSolo, maxFreeSolo = _v === void 0 ? limitOfFreeChips : _v, _w = props.SuggestionListProps, _x = _w === void 0 ? {} : _w, _y = _x.virtualize, virtualize = _y === void 0 ? true : _y, SuggestionListProps = __rest(_x, ["virtualize"]), _z = props.autoSelect, autoSelect = _z === void 0 ? enableAutoTransform : _z, PopperComponent = props.PopperComponent, _0 = props.PopperProps, _1 = _0 === void 0 ? {} : _0, _2 = _1.anchorElType, anchorElType = _2 === void 0 ? 'root' : _2, popperTransition = _1.transition, _3 = _1.TransitionComponent, TransitionComponent = _3 === void 0 ? virtualize ? RcFade : RcGrow : _3, _4 = _1.transitionDuration, transitionDurationProp = _4 === void 0 ? 'auto' : _4, _5 = _1.TransitionProps, TransitionPropsProp = _5 === void 0 ? {} : _5, PopperProps = __rest(_1, ["anchorElType", "transition", "TransitionComponent", "transitionDuration", "TransitionProps"]), initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _6 = props.defaultIsOpen, defaultIsOpen = _6 === void 0 ? openOnFocus : _6, _7 = props.disableCloseOnSelect, disableCloseOnSelect = _7 === void 0 ? defaultIsOpen : _7, _8 = props.onChange, onChangeProp = _8 === void 0 ? onSelectChange : _8, 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", "getToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "toggleWithInput", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperComponent", "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 _9 = __read(useState('bottom-start'), 2), position = _9[0], setPosition = _9[1];
     var innerInputRef = useRef(null);
     var textFieldRef = useRef(null);
     var inputRef = useForkRef(inputRefProp, innerInputRef);
@@ -147,7 +148,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
     }
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
-    var _9 = useDownshift({
+    var _10 = useDownshift({
         focused: focused,
         open: openProp,
         variant: variant,
@@ -174,6 +175,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         disabled: disabled,
         required: required,
         openOnFocus: openOnFocus,
+        toggleWithInput: toggleWithInput,
         autoHighlight: autoHighlight,
         groupBy: groupBy,
         groupVariant: groupVariant,
@@ -186,9 +188,9 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _9.focusInput, optionItems = _9.optionItems, optionsGroupList = _9.optionsGroupList, selectedItems = _9.tags, highlightedIndex = _9.highlightedIndex, getToggleButtonProps = _9.getToggleButtonProps, getTagProps = _9.getTagProps, getTagListBoxProps = _9.getTagListBoxProps, getMenuProps = _9.getMenuProps, getPopperProps = _9.getPopperProps, getInputProps = _9.getInputProps, getInputAriaProps = _9.getInputAriaProps, getLabelProps = _9.getLabelProps, getItemProps = _9.getItemProps, isOpen = _9.isOpen, inputValue = _9.inputValue, activeIndex = _9.activeIndex, setActiveIndex = _9.setActiveIndex, setHighlightedIndex = _9.setHighlightedIndex, onInputChange = _9.onInputChange, keepHighlightedIndex = _9.keepHighlightedIndex, changeHighlightedIndexReason = _9.changeHighlightedIndexReason, closeMenu = _9.closeMenu, openMenu = _9.openMenu, reset = _9.reset, getClearButtonProps = _9.getClearButtonProps, noOptionItem = _9.noOptionItem, getNoOptionsProps = _9.getNoOptionsProps, isKeepHighlightedIndex = _9.isKeepHighlightedIndex, isDownshiftFocused = _9.focused, autoCompleteSelectedIndex = _9.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;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
-    var _10 = getInputProps(), onBlur = _10.onBlur, InputProps = __rest(_10, ["onBlur"]);
+    var _11 = getInputProps(), onBlur = _11.onBlur, InputProps = __rest(_11, ["onBlur"]);
     var helperText = isNew
         ? helperTextProp
         : nameError || allowPlainHelperText
@@ -213,7 +215,6 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     }
     var toTextFieldRef = useForkRef(textFieldRef, ref);
     var colorHex = useMemo(function () { return (color ? getParsePaletteColor(color)({ theme: theme }) : undefined); }, [color, theme]);
-    var isAutocomplete = variant === 'autocomplete';
     var startAdornment = (function () {
         if (isAutocomplete) {
             return undefined;
@@ -256,14 +257,14 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                 : error
                     ? 'danger.f02'
                     : 'neutral.f04', size: "large" }, getToggleButtonProps(__assign(__assign({}, ToggleButtonProps), getToggleButtonPropsProp(isOpen))))))));
-    var _11 = (function () {
+    var _12 = (function () {
         var _a = InputPropsProp || {}, classes = _a.classes, restInputPropsProp = __rest(_a, ["classes"]);
         var toClasses = combineClasses(classes, RcDownshiftInputClasses);
         return {
             containerClassName: toClasses.container,
             TextFieldInputProps: combineProps(__assign(__assign(__assign({ classes: omit(toClasses, ['container']), endAdornment: endAdornment, inputComponent: RcDownshiftInput }, getTagListBoxProps()), InputProps), { onBlur: debug ? undefined : onBlur }), restInputPropsProp),
         };
-    })(), containerClassName = _11.containerClassName, TextFieldInputProps = _11.TextFieldInputProps;
+    })(), containerClassName = _12.containerClassName, TextFieldInputProps = _12.TextFieldInputProps;
     useImperativeHandle(action, function () { return ({
         getActiveIndex: function () { return activeIndex; },
         setActiveIndex: setActiveIndex,

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

@@ -7,7 +7,7 @@ import { useDownshiftTag } from './useDownshiftTag';
 var DOWNSHIFT_ID_NO_RESULT_TOKEN = 'rc-chip-empty';
 var DEFAULT_HIGHLIGHTED_INDEX = -1;
 export var useDownshift = function (_a) {
-    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DEFAULT_KEY_TO_CHIPS : _c, filterOptionsProp = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, focused = _a.focused;
+    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DEFAULT_KEY_TO_CHIPS : _c, filterOptionsProp = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, toggleWithInput = _a.toggleWithInput, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, focused = _a.focused;
     var isAutocomplete = variant === 'autocomplete';
     var autoCompleteSelectedIndexRef = useRef(DEFAULT_HIGHLIGHTED_INDEX);
     var downshiftId = useId('downshift', true);
@@ -165,6 +165,17 @@ export var useDownshift = function (_a) {
             setIsOpen(true);
         }
     };
+    var toggleMenu = function (e, focus) {
+        if (focus === void 0) { focus = true; }
+        if (isOpen) {
+            closeMenu(e, 'toggleInput');
+        }
+        else {
+            openMenu(e);
+            if (focus)
+                focusInput();
+        }
+    };
     var handleInputChange = function (newValue, open, e) {
         if (open === void 0) { open = true; }
         if (inputValue !== newValue) {
@@ -431,7 +442,13 @@ export var useDownshift = function (_a) {
                             break;
                     }
                 }
-            } }), props);
+            }, onMouseDown: toggleWithInput
+                ? function (e) {
+                    if (inputValue === '' || !isOpen) {
+                        toggleMenu(e, false);
+                    }
+                }
+                : undefined }), props);
     };
     var getInputAriaProps = function (props) {
         var suggestionListInputAriaProps = getSuggestionListInputAriaProps(props);
@@ -457,15 +474,7 @@ export var useDownshift = function (_a) {
                 e.preventDefault();
                 e.stopPropagation();
             },
-            onClick: function (e) {
-                if (isOpen) {
-                    closeMenu(e, 'toggleInput');
-                }
-                else {
-                    openMenu(e);
-                    focusInput();
-                }
-            },
+            onClick: toggleMenu,
             tabIndex: -1,
         }, props);
     };

package/package.json

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