@ringcentral/juno 1.12.3-beta.5791-ea7a35ca → 1.12.3-beta.5828-dc41552f

package/es6/components/Downshift/Downshift.js

@@ -1,6 +1,6 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { combineClasses, combineProps, omit, styled, useEventCallback, useForkRef, useThemeProps, withDeprecatedCheck, } from '../../foundation';
+import { combineClasses, combineProps, getParsePaletteColor, omit, styled, useEventCallback, useForkRef, useTheme, useThemeProps, withDeprecatedCheck, } from '../../foundation';
 import ArrowDown from '../../icon/ArrowDown';
 import ArrowUp from '../../icon/ArrowUp';
 import { RcChip } from '../Chip';
@@ -11,7 +11,8 @@ import { RcSuggestionList } from './SuggestionList';
 import { DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_LIMIT_CHIPS, RcDownshiftDefaultFilterOptions, RcDownshiftInputClasses, useDownshift, useDownshiftError, } from './utils';
 var _RcDownshift = memo(forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDownshift' });
-    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, _d = props.groupVariant, groupVariant = _d === void 0 ? 'normal' : _d, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _e = props.value, valueProp = _e === void 0 ? selectedItemsProp : _e, _f = props.autoHighlight, autoHighlight = _f === void 0 ? true : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? true : _g, _h = props.clearBtn, clearBtn = _h === void 0 ? false : _h, _j = props.toggleButton, toggleButton = _j === void 0 ? false : _j, _k = props.multiple, multiple = _k === void 0 ? false : _k, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _l = props.getOptionLabel, getOptionLabel = _l === void 0 ? itemToString : _l, renderInput = props.renderInput, _m = props.label, label = _m === void 0 ? inputLabel : _m, _o = props.inputRef, inputRefProp = _o === void 0 ? messageRef : _o, _p = props.error, error = _p === void 0 ? nameError : _p, _q = props.placeholder, placeholder = _q === void 0 ? inputPlaceholder : _q, _r = props.freeSolo, freeSolo = _r === void 0 ? enableFreeChips : _r, _s = props.keyToTags, keyToTags = _s === void 0 ? keyToChips : _s, _t = props.maxFreeSolo, maxFreeSolo = _t === void 0 ? limitOfFreeChips : _t, SuggestionListProps = props.SuggestionListProps, _u = props.autoSelect, autoSelect = _u === void 0 ? enableAutoTransform : _u, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _v = props.defaultIsOpen, defaultIsOpen = _v === void 0 ? openOnFocus : _v, _w = props.disableCloseOnSelect, disableCloseOnSelect = _w === void 0 ? defaultIsOpen : _w, _x = props.onChange, onChangeProp = _x === void 0 ? onSelectChange : _x, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, 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", "groupVariant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose"]);
+    var theme = useTheme();
+    var _a = props.itemToString, itemToString = _a === void 0 ? DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? DEFAULT_LIMIT_CHIPS : _c, minRowHeight = props.minRowHeight, suggestionItems = props.suggestionItems, messageRef = props.messageRef, MenuItem = props.MenuItem, inputLabel = props.inputLabel, nameError = props.nameError, maxLength = props.maxLength, InputItem = props.InputItem, emailError = props.emailError, autoSwitchEmail = props.autoSwitchEmail, enableFreeChips = props.enableFreeChips, inputPlaceholder = props.inputPlaceholder, errorSelectedItems = props.errorSelectedItems, enableAutoTransform = props.enableAutoTransform, allowPlainHelperText = props.allowPlainHelperText, TextFieldProps = props.TextFieldProps, selectedItemsProp = props.selectedItems, automationId = props.automationId, screenReader = props.screenReader, onSelectChange = props.onSelectChange, variant = props.variant, groupExpanded = props.groupExpanded, groupDefaultExpanded = props.groupDefaultExpanded, _d = props.groupVariant, groupVariant = _d === void 0 ? 'normal' : _d, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _e = props.value, valueProp = _e === void 0 ? selectedItemsProp : _e, _f = props.autoHighlight, autoHighlight = _f === void 0 ? true : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? true : _g, _h = props.clearBtn, clearBtn = _h === void 0 ? false : _h, _j = props.toggleButton, toggleButton = _j === void 0 ? false : _j, _k = props.multiple, multiple = _k === void 0 ? false : _k, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _l = props.getOptionLabel, getOptionLabel = _l === void 0 ? itemToString : _l, renderInput = props.renderInput, _m = props.label, label = _m === void 0 ? inputLabel : _m, _o = props.inputRef, inputRefProp = _o === void 0 ? messageRef : _o, _p = props.error, error = _p === void 0 ? nameError : _p, _q = props.placeholder, placeholder = _q === void 0 ? inputPlaceholder : _q, _r = props.freeSolo, freeSolo = _r === void 0 ? enableFreeChips : _r, _s = props.keyToTags, keyToTags = _s === void 0 ? keyToChips : _s, _t = props.maxFreeSolo, maxFreeSolo = _t === void 0 ? limitOfFreeChips : _t, SuggestionListProps = props.SuggestionListProps, _u = props.autoSelect, autoSelect = _u === void 0 ? enableAutoTransform : _u, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _v = props.defaultIsOpen, defaultIsOpen = _v === void 0 ? openOnFocus : _v, _w = props.disableCloseOnSelect, disableCloseOnSelect = _w === void 0 ? defaultIsOpen : _w, _x = props.onChange, onChangeProp = _x === void 0 ? onSelectChange : _x, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, focused = props.focused, color = props.color, rest = __rest(props, ["itemToString", "keyToChips", "limitOfFreeChips", "minRowHeight", "suggestionItems", "messageRef", "MenuItem", "inputLabel", "nameError", "maxLength", "InputItem", "emailError", "autoSwitchEmail", "enableFreeChips", "inputPlaceholder", "errorSelectedItems", "enableAutoTransform", "allowPlainHelperText", "TextFieldProps", "selectedItems", "automationId", "screenReader", "onSelectChange", "variant", "groupExpanded", "groupDefaultExpanded", "groupVariant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose", "focused", "color"]);
     var _y = __read(useState('bottom'), 2), position = _y[0], setPosition = _y[1];
     var innerInputRef = useRef(null);
     var textFieldRef = useRef(null);
@@ -23,6 +24,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 _z = useDownshift({
+        focused: focused,
         open: openProp,
         variant: variant,
         onOpen: onOpen,
@@ -34,6 +36,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         inputValue: inputValueProp,
         getOptionDisabled: getOptionDisabled,
         groupExpanded: groupVariant === 'normal' ? true : groupExpanded,
+        groupDefaultExpanded: groupDefaultExpanded,
         getExpandIconProps: getExpandIconProps,
         options: suggestionItems || options,
         freeSolo: freeSolo,
@@ -59,7 +62,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _z.focusInput, optionItems = _z.optionItems, optionsGroupList = _z.optionsGroupList, selectedItems = _z.selectedItems, highlightedIndex = _z.highlightedIndex, getToggleButtonProps = _z.getToggleButtonProps, getTagProps = _z.getTagProps, getTagListBoxProps = _z.getTagListBoxProps, getMenuProps = _z.getMenuProps, getPopperProps = _z.getPopperProps, getInputProps = _z.getInputProps, getInputAriaProps = _z.getInputAriaProps, getLabelProps = _z.getLabelProps, getItemProps = _z.getItemProps, isOpen = _z.isOpen, inputValue = _z.inputValue, isTagsFocus = _z.isTagsFocus, activeIndex = _z.activeIndex, setActiveIndex = _z.setActiveIndex, setHighlightedIndex = _z.setHighlightedIndex, onInputChange = _z.onInputChange, keepHighlightedIndex = _z.keepHighlightedIndex, changeHighlightedIndexReason = _z.changeHighlightedIndexReason, closeMenu = _z.closeMenu, openMenu = _z.openMenu, reset = _z.reset, getClearButtonProps = _z.getClearButtonProps, noOptionItem = _z.noOptionItem, getNoOptionsProps = _z.getNoOptionsProps, isKeepHighlightedIndex = _z.isKeepHighlightedIndex;
+    }), focusInput = _z.focusInput, optionItems = _z.optionItems, optionsGroupList = _z.optionsGroupList, selectedItems = _z.selectedItems, highlightedIndex = _z.highlightedIndex, getToggleButtonProps = _z.getToggleButtonProps, getTagProps = _z.getTagProps, getTagListBoxProps = _z.getTagListBoxProps, getMenuProps = _z.getMenuProps, getPopperProps = _z.getPopperProps, getInputProps = _z.getInputProps, getInputAriaProps = _z.getInputAriaProps, getLabelProps = _z.getLabelProps, getItemProps = _z.getItemProps, isOpen = _z.isOpen, inputValue = _z.inputValue, isTagsFocus = _z.isTagsFocus, activeIndex = _z.activeIndex, setActiveIndex = _z.setActiveIndex, setHighlightedIndex = _z.setHighlightedIndex, onInputChange = _z.onInputChange, keepHighlightedIndex = _z.keepHighlightedIndex, changeHighlightedIndexReason = _z.changeHighlightedIndexReason, closeMenu = _z.closeMenu, openMenu = _z.openMenu, reset = _z.reset, getClearButtonProps = _z.getClearButtonProps, noOptionItem = _z.noOptionItem, getNoOptionsProps = _z.getNoOptionsProps, isKeepHighlightedIndex = _z.isKeepHighlightedIndex, isFocused = _z.isFocused;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     var _0 = getInputProps(), onBlur = _0.onBlur, InputProps = __rest(_0, ["onBlur"]);
     var helperText = isNew
@@ -85,6 +88,7 @@ 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 startAdornment = (function () {
         if (variant === 'autocomplete') {
             return undefined;
@@ -99,7 +103,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
             if (selectedItem.error) {
                 oneOfTagError = true;
             }
-            return tagProps;
+            return __assign(__assign({}, tagProps), { color: colorHex });
         };
         return renderTags
             ? renderTags(selectedItems, getCustomizedTagProps)
@@ -120,9 +124,14 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                     } })));
             });
     })();
+    var isDownshiftFocused = focused !== null && focused !== void 0 ? focused : (isTagsFocus || isFocused ? true : undefined);
     var endAdornment = (toggleButton || clearBtn) && (React.createElement(EndAdornment, null,
         clearBtn && (React.createElement(ClearIconButton, __assign({}, getClearButtonProps(clearButtonProps)))),
-        toggleButton && (React.createElement(ArrowDownButton, __assign({ variant: "plain", "aria-hidden": true, color: error ? 'danger.f02' : 'neutral.f04', size: "large", symbol: isOpen ? ArrowUp : ArrowDown }, getToggleButtonProps(ToggleButtonProps))))));
+        toggleButton && (React.createElement(ArrowDownButton, __assign({ variant: "plain", "aria-hidden": true, color: isDownshiftFocused
+                ? color || 'interactive.f01'
+                : error
+                    ? 'danger.f02'
+                    : 'neutral.f04', size: "large", symbol: isOpen ? ArrowUp : ArrowDown }, getToggleButtonProps(ToggleButtonProps))))));
     var _1 = (function () {
         var _a = InputPropsProp || {}, classes = _a.classes, restInputPropsProp = __rest(_a, ["classes"]);
         var toClasses = combineClasses(classes, RcDownshiftInputClasses);
@@ -154,7 +163,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.update();
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(StyledTextField, __assign({ renderInput: renderInput, hasTags: hasTags, ref: toTextFieldRef, inputRef: inputRef, "data-test-automation-id": automationId, fullWidth: fullWidth, placeholder: !hasTags ? placeholder : undefined, label: label, focused: isTagsFocus ? true : undefined, disabled: disabled, required: required, 
+        React.createElement(StyledTextField, __assign({ renderInput: renderInput, hasTags: hasTags, ref: toTextFieldRef, inputRef: inputRef, "data-test-automation-id": automationId, fullWidth: fullWidth, placeholder: !hasTags ? placeholder : undefined, label: label, focused: isDownshiftFocused, disabled: disabled, required: required, color: color, 
             // * if below one of tag is error, that main downshift default will be error
             error: error !== null && error !== void 0 ? error : oneOfTagError, FormHelperTextProps: FormHelperTextProps, InputProps: TextFieldInputProps, helperText: helperText }, combineProps({
             InputLabelProps: getLabelProps(),
@@ -286,5 +295,5 @@ var RcDownshift = styled(withDeprecatedCheck(_RcDownshift, [
 RcDownshift.defaultProps = {};
 RcDownshift.displayName = 'RcDownshift';
 var ExportType = RcDownshift;
-export { ExportType as RcDownshift, RcDownshiftDefaultFilterOptions };
+export { ExportType as RcDownshift, RcDownshiftDefaultFilterOptions, RcDownshiftInput, };
 var templateObject_1;

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

@@ -6,7 +6,7 @@ import ArrowDown2 from '../../../icon/ArrowDown2';
 import { RcBox } from '../../Box';
 import { RcIconButton } from '../../Buttons/IconButton';
 import { RcMenuItem } from '../../Menu/MenuItem';
-import { StyledMenuListPadding } from '../../VirtualizedMenu/styles';
+import { menuListBoundaryPadding, StyledMenuListPadding, } from '../../VirtualizedMenu/styles';
 import { useDynamicHeight, useHighlightScroll, Virtuoso, } from '../../Virtuoso';
 import { SuggestionListStyle } from './styles';
 import { RcSuggestionListClasses } from './utils';
@@ -45,8 +45,13 @@ var SuggestionList = forwardRef(function (inProps, ref) {
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
+                    if (location.index === 0 && padding !== undefined) {
+                        location = __assign(__assign({}, location), { offset: -(typeof padding === 'number'
+                                ? padding
+                                : menuListBoundaryPadding) });
+                    }
                     (_a = vlRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(location);
-                    toIndex = typeof location === 'number' ? location : location.index;
+                    toIndex = location.index;
                     return [4 /*yield*/, sleep(0)];
                 case 1:
                     _c.sent();
@@ -139,12 +144,13 @@ var SuggestionList = forwardRef(function (inProps, ref) {
             expandIconProps && (React.createElement(RcIconButton, __assign({}, expandIconProps, { symbol: ArrowDown2 })))));
     };
     var PaddingComponent = useMemo(function () {
-        return padding !== undefined
+        var paddingValue = padding !== undefined && itemCount > 0
             ? typeof padding === 'number'
-                ? function () { return React.createElement(StyledMenuListPadding, { height: padding }); }
-                : StyledMenuListPadding
-            : undefined;
-    }, [padding]);
+                ? padding
+                : menuListBoundaryPadding
+            : 0;
+        return function () { return React.createElement(StyledMenuListPadding, { height: paddingValue }); };
+    }, [itemCount, padding]);
     var components = useMemo(function () {
         return __assign({ List: List, Header: PaddingComponent, Footer: PaddingComponent }, componentsProp);
     }, [componentsProp, PaddingComponent]);

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

@@ -1 +1,2 @@
 export * from './SuggestionListUtils';
+export * from './useSuggestionList';

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

@@ -0,0 +1,237 @@
+import { __read, __rest } from "tslib";
+import { useMemo, useRef } from 'react';
+import uniqueId from 'lodash/uniqueId';
+import { useControlled } from '@material-ui/core/utils';
+import { combineProps, useForceUpdate, useKeyboardMoveFocus, useResultRef, } from '../../../../foundation';
+import { DEFAULT_GET_OPTION_LABEL, isItemCanSelected, } from '../../utils';
+import { useDownshiftGroup } from '../../utils/useDownshiftGroup';
+var DEFAULT_HIGHLIGHTED_INDEX = -1;
+var componentName = 'useSuggestionList';
+/**
+ * provide suggestion list with search function and expandable group with virtualized list
+ */
+export var useSuggestionList = function (_a) {
+    var inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DEFAULT_GET_OPTION_LABEL : _b, filterOptions = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, onInputChangeProp = _a.onInputChange, inputRef = _a.inputRef, onKeyDownProp = _a.onKeyDown, onSelect = _a.onSelect, onClear = _a.onClear, getOptionDisabled = _a.getOptionDisabled, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps;
+    var _c = __read(useControlled({
+        controlled: inputValueProp,
+        default: '',
+        name: componentName,
+    }), 2), inputValue = _c[0], setInputValue = _c[1];
+    var updateInputValue = function (newValue) {
+        onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp(newValue);
+        setInputValue(newValue);
+    };
+    var focusInput = function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
+    var suggestionListId = useResultRef(function () {
+        return uniqueId("suggestion-list-");
+    }).current;
+    // * use -2 for us know that is init state, for recalculate defaultHighlightedIndex
+    var highlightedIndexRef = useRef(DEFAULT_HIGHLIGHTED_INDEX);
+    var changeHighlightedIndexReason = useRef();
+    var forceUpdate = useForceUpdate();
+    var filteredResult = useMemo(function () {
+        var getFilteredItems = function (items) {
+            if (filterOptions) {
+                return filterOptions(items, {
+                    inputValue: inputValue,
+                    getOptionLabel: getOptionLabel,
+                    selectedItems: [],
+                });
+            }
+            return items;
+        };
+        // * only when isOpen calculate the filtered result
+        var results = getFilteredItems(options);
+        return results;
+    }, [filterOptions, getOptionLabel, inputValue, options]);
+    var _d = useDownshiftGroup({
+        groupBy: groupBy,
+        options: options,
+        filteredResult: filteredResult,
+        getExpandIconProps: getExpandIconProps,
+        groupExpanded: groupExpanded,
+        groupDefaultExpanded: groupDefaultExpanded,
+        onGroupExpanded: onGroupExpanded,
+        groupVariant: groupVariant,
+        getOptionDisabled: getOptionDisabled,
+        id: suggestionListId,
+    }), groupedResult = _d.groupedResult, handleGroupExpandedChange = _d.handleGroupExpandedChange, optionsGroupList = _d.optionsGroupList;
+    var optionItems = groupBy ? groupedResult : filteredResult;
+    var setHighlightedIndex = function (index, _a) {
+        var _b = _a.reRender, reRender = _b === void 0 ? false : _b, reason = _a.reason;
+        changeHighlightedIndexReason.current = reason;
+        if (highlightedIndexRef.current !== index) {
+            highlightedIndexRef.current = index;
+            if (reRender)
+                forceUpdate();
+        }
+    };
+    var handleInputChange = function (newValue) {
+        if (inputValue !== newValue) {
+            setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
+            updateInputValue(newValue);
+        }
+        return false;
+    };
+    var getIsItemCanSelected = function (item) {
+        return ((!!item && item.freeSolo) ||
+            (isItemCanSelected(item) && !(getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(item))));
+    };
+    var selectItemFn = function (e, selectedItem) {
+        if (getIsItemCanSelected(selectedItem)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, selectedItem);
+            return true;
+        }
+        return false;
+    };
+    var resetState = function () {
+        if (inputRef.current && inputRef.current.value.length > 0) {
+            updateInputValue('');
+        }
+    };
+    var reset = function (isFocus) {
+        resetState();
+        onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp('');
+        if (isFocus)
+            focusInput();
+    };
+    var onKeyFocusedIndexHandle = useKeyboardMoveFocus({
+        options: optionItems,
+        focusedIndexRef: highlightedIndexRef,
+        infinite: true,
+        onFocusedIndexChange: function (event, toIndex) {
+            setHighlightedIndex(toIndex, { reason: 'keyboard', reRender: true });
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+        },
+        getOptionDisabled: disabledItemsHighlightable
+            ? undefined
+            : function (child) {
+                return !getIsItemCanSelected(child);
+            },
+    }).onKeyFocusedIndexHandle;
+    var getItemProps = function (_a) {
+        var item = _a.item, index = _a.index, itemRest = __rest(_a, ["item", "index"]);
+        return combineProps({
+            id: suggestionListId + "-option-" + index,
+            role: 'option',
+            onClick: function (e) {
+                selectItemFn(e, item);
+            },
+            onMouseDown: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            },
+            onMouseOver: function () {
+                if (highlightedIndexRef.current !== index) {
+                    setHighlightedIndex(index, { reason: 'mouse', reRender: true });
+                }
+            },
+        }, itemRest);
+    };
+    var getInputProps = function (props) {
+        return combineProps({
+            id: suggestionListId + "-input",
+            autoComplete: 'off',
+            onChange: function (e) {
+                var changeValue = e.target.value;
+                handleInputChange(changeValue);
+            },
+            onKeyDown: function (e) {
+                var _a;
+                onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e, highlightedIndexRef.current);
+                var highlightedIndex = highlightedIndexRef.current;
+                switch (e.key) {
+                    case 'F10':
+                        if (e.shiftKey) {
+                            var currOption = optionItems[highlightedIndex];
+                            var currentGroup = currOption.group;
+                            if (currentGroup && currentGroup.options.length > 1) {
+                                handleGroupExpandedChange(currentGroup.group);
+                            }
+                        }
+                        break;
+                    case 'Enter':
+                        if (e.which === 229)
+                            return;
+                        if (highlightedIndex !== DEFAULT_HIGHLIGHTED_INDEX) {
+                            var currOption = optionItems[highlightedIndex];
+                            var isGroupTitle = currOption === ((_a = currOption.group) === null || _a === void 0 ? void 0 : _a.options[0]);
+                            if (isGroupTitle) {
+                                var onClick = currOption.group.getExpandIconProps().onClick;
+                                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                            }
+                            else {
+                                selectItemFn(e, currOption);
+                            }
+                            e.stopPropagation();
+                        }
+                        // always preventDefault for not inset all enter into textarea
+                        e.preventDefault();
+                        break;
+                    default:
+                        onKeyFocusedIndexHandle(e);
+                        break;
+                }
+            },
+        }, props);
+    };
+    var getInputAriaProps = function (props) {
+        return combineProps({
+            // * provide for when container click focus on input
+            onContainerClick: focusInput,
+            role: 'combobox',
+            'aria-autocomplete': 'list',
+            // TODO
+            'aria-expanded': true,
+            'aria-haspopup': true,
+            'aria-owns': suggestionListId + "-menu",
+            'aria-activedescendant': highlightedIndexRef.current > -1
+                ? suggestionListId + "-option-" + highlightedIndexRef.current
+                : undefined,
+        }, props);
+    };
+    var getLabelProps = function (props) {
+        return combineProps({
+            htmlFor: suggestionListId + "-input",
+            id: suggestionListId + "-label",
+        }, props);
+    };
+    var getMenuProps = function (restMenuProps) {
+        return combineProps({
+            'aria-labelledby': suggestionListId + "-label",
+            id: suggestionListId + "-menu",
+            role: 'listbox',
+        }, restMenuProps);
+    };
+    var getClearButtonProps = function (props) {
+        return combineProps({
+            id: suggestionListId + "-clear-button",
+            onClick: function (e) {
+                onClear === null || onClear === void 0 ? void 0 : onClear(e);
+                reset(true);
+            },
+        }, props);
+    };
+    var resultObj = {
+        focusInput: focusInput,
+        getClearButtonProps: getClearButtonProps,
+        getLabelProps: getLabelProps,
+        getMenuProps: getMenuProps,
+        getInputProps: getInputProps,
+        getInputAriaProps: getInputAriaProps,
+        getItemProps: getItemProps,
+        highlightedIndex: highlightedIndexRef.current,
+        optionItems: optionItems,
+        inputValue: inputValue,
+        onInputChange: handleInputChange,
+        setHighlightedIndex: setHighlightedIndex,
+        changeHighlightedIndexReason: changeHighlightedIndexReason.current,
+        reset: reset,
+        forceUpdate: forceUpdate,
+        optionsGroupList: optionsGroupList,
+        /** current suggestion list id */
+        id: suggestionListId,
+    };
+    changeHighlightedIndexReason.current = undefined;
+    return resultObj;
+};

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

@@ -9,14 +9,32 @@ export var isItemCanSelected = function (item) {
 export var DEFAULT_KEY_TO_CHIPS = [';', ',', '\\n'];
 export var DEFAULT_LIMIT_CHIPS = 20;
 export var DEFAULT_GET_OPTION_LABEL = function (item) {
-    return item.label || '';
+    return (item === null || item === void 0 ? void 0 : item.label) || '';
 };
 export var RcDownshiftDefaultRenderNoOptions = function (getNoOptionsProps) {
     return (React.createElement(RcMenuItem, __assign({ component: "div" }, getNoOptionsProps()), "No Options"));
 };
+/**
+ * default downshift filter options method, use with `variant="tags"`
+ *
+ * - filter options by input value and selected items
+ */
 export var RcDownshiftDefaultFilterOptions = function (options, _a) {
     var inputValue = _a.inputValue, getOptionLabel = _a.getOptionLabel, selectedItems = _a.selectedItems;
     return options.filter(function (item) {
         return selectedItems.indexOf(item) < 0 && (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(item).toLowerCase().startsWith((inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) || ''));
     });
 };
+/**
+ * default downshift filter options method, use with `variant="autocomplete"`
+ *
+ * - when open menu and not change value, that will return whole options
+ * - only filter options by input value when have input value changed
+ */
+export var RcAutocompleteDefaultFilterOptions = function (options, _a) {
+    var inputValue = _a.inputValue, getOptionLabel = _a.getOptionLabel, inputChanged = _a.inputChanged;
+    if (!inputChanged) {
+        return options;
+    }
+    return options.filter(function (item) { return getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(item).toLowerCase().startsWith((inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) || ''); });
+};

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

@@ -15,32 +15,38 @@ function stringArrToRegExp(keyToTags) {
 }
 var componentName = 'RcDownshift';
 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, filterOptions = _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, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose;
+    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, filterOptions = _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, focusedProp = _a.focused;
     var isAutocomplete = variant === 'autocomplete';
     // * when that is autocomplete, that will never be multiple
     var multiple = isAutocomplete ? false : multipleProp;
     var isSelectedFromAutocompleteRef = useRef(false);
+    var isInputValueChangedRef = useRef(false);
     var _e = __read(useControlled({
+        controlled: focusedProp,
+        default: false,
+        name: componentName,
+    }), 2), isFocused = _e[0], setIsFocused = _e[1];
+    var _f = __read(useControlled({
         controlled: openProp,
         default: initialIsOpen || false,
         name: componentName,
-    }), 2), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = __read(useState(false), 2), isTagsFocus = _f[0], setIsTagsFocus = _f[1];
-    var _g = __read(useState(0), 2), activeIndex = _g[0], setActiveIndex = _g[1];
-    var _h = __read(useControlled({
+    }), 2), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = __read(useState(false), 2), isTagsFocus = _g[0], setIsTagsFocus = _g[1];
+    var _h = __read(useState(0), 2), activeIndex = _h[0], setActiveIndex = _h[1];
+    var _j = __read(useControlled({
         controlled: inputValueProp,
         default: '',
         name: componentName,
-    }), 2), inputValue = _h[0], setInputValue = _h[1];
+    }), 2), inputValue = _j[0], setInputValue = _j[1];
     var updateInputValue = function (newValue) {
         onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp(newValue);
         setInputValue(newValue);
     };
-    var _j = __read(useControlled({
+    var _k = __read(useControlled({
         controlled: selectedItemsProp,
         default: [],
         name: componentName,
-    }), 2), selectedItems = _j[0], setSelectedItems = _j[1];
+    }), 2), selectedItems = _k[0], setSelectedItems = _k[1];
     var focusInput = function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
     var downshiftId = useResultRef(function () { return uniqueId("downshift-"); }).current;
     // * use -2 for us know that is init state, for recalculate defaultHighlightedIndex
@@ -55,7 +61,7 @@ export var useDownshift = function (_a) {
         ? true
         : undefined;
     var forceUpdate = useForceUpdate();
-    var _k = useSleep(), sleep = _k.sleep, getSleeping = _k.getSleeping;
+    var _l = useSleep(), sleep = _l.sleep, getSleeping = _l.getSleeping;
     var filteredResult = useMemo(function () {
         var getInputValueAsItem = function () {
             var label = inputValue.trim() || '';
@@ -74,6 +80,7 @@ export var useDownshift = function (_a) {
             if (filterOptions) {
                 return filterOptions(items, {
                     inputValue: inputValue,
+                    inputChanged: isInputValueChangedRef.current,
                     getOptionLabel: getOptionLabel,
                     selectedItems: selectedItems,
                 });
@@ -117,16 +124,19 @@ export var useDownshift = function (_a) {
         renderNoOptions,
         selectedItems,
     ]);
-    var _l = useDownshiftGroup({
+    var _m = useDownshiftGroup({
         groupBy: groupBy,
         options: options,
         filteredResult: filteredResult,
         getExpandIconProps: getExpandIconProps,
         groupExpanded: groupExpanded,
+        groupDefaultExpanded: groupDefaultExpanded,
         onGroupExpanded: onGroupExpanded,
+        // TODO: single release for that breaking change
+        // getOptionDisabled,
         groupVariant: groupVariant,
         id: downshiftId,
-    }), groupedResult = _l.groupedResult, handleGroupExpandedChange = _l.handleGroupExpandedChange, optionsGroupList = _l.optionsGroupList;
+    }), groupedResult = _m.groupedResult, handleGroupExpandedChange = _m.handleGroupExpandedChange, optionsGroupList = _m.optionsGroupList;
     var optionItems = groupBy ? groupedResult : filteredResult;
     var freeSoloCount = useMemo(function () { return selectedItems.filter(function (x) { return x.freeSolo; }).length; }, [selectedItems]);
     var handleSelectedItems = function (_selectedItems) {
@@ -168,6 +178,7 @@ export var useDownshift = function (_a) {
     });
     var closeMenu = function (e, reason) {
         keepHighlightedIndexRef.current = false;
+        isInputValueChangedRef.current = false;
         // * set to default highlighted
         setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
         if (isOpen) {
@@ -318,6 +329,7 @@ export var useDownshift = function (_a) {
             updateInputValue('');
         }
         isSelectedFromAutocompleteRef.current = false;
+        isInputValueChangedRef.current = false;
         setActiveIndex(-1);
         if (!disableCloseOnSelect) {
             closeMenu(e, 'select-option');
@@ -342,7 +354,7 @@ export var useDownshift = function (_a) {
             event === null || event === void 0 ? void 0 : event.preventDefault();
         },
     }).onKeyFocusedIndexHandle;
-    var _m = useKeyboardMoveFocus({
+    var _o = useKeyboardMoveFocus({
         options: optionItems,
         focusedIndexRef: highlightedIndexRef,
         infinite: true,
@@ -355,7 +367,7 @@ export var useDownshift = function (_a) {
             : function (child) {
                 return !getIsItemCanSelected(child);
             },
-    }), onKeyFocusedIndexHandle = _m.onKeyFocusedIndexHandle, getNextFocusableOption = _m.getNextFocusableOption;
+    }), onKeyFocusedIndexHandle = _o.onKeyFocusedIndexHandle, getNextFocusableOption = _o.getNextFocusableOption;
     var keepHighlightedIndex = function () {
         keepHighlightedIndexRef.current = true;
     };
@@ -530,9 +542,11 @@ export var useDownshift = function (_a) {
                     handleSelectedItems([]);
                 }
                 fromPasteString.current = '';
+                isInputValueChangedRef.current = true;
             },
             onFocus: function (e) {
                 var _a;
+                setIsFocused(true);
                 if (openOnFocus)
                     openMenu(e);
                 // * when autocomplete mode, always select all text when focus
@@ -546,6 +560,7 @@ export var useDownshift = function (_a) {
                 }
             },
             onBlur: function (e) {
+                setIsFocused(false);
                 if (autoSelect && !stopAutoSelectRef.current) {
                     if (!freeSolo)
                         selectItemFn(optionItems[highlightedIndexRef.current], e);
@@ -796,6 +811,9 @@ export var useDownshift = function (_a) {
         reset: reset,
         forceUpdate: forceUpdate,
         optionsGroupList: optionsGroupList,
+        isFocused: isFocused,
+        id: downshiftId,
+        inputChanged: isInputValueChangedRef.current,
     };
     changeHighlightedIndexReason.current = undefined;
     return resultObj;