@ringcentral/juno 1.12.4-beta.5873-31100a7c → 1.12.5-beta.5896-ded29c04

package/components/Downshift/utils/useDownshift.js

@@ -2,71 +2,63 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-var isString_1 = tslib_1.__importDefault(require("lodash/isString"));
-var uniqueId_1 = tslib_1.__importDefault(require("lodash/uniqueId"));
 var utils_1 = require("@material-ui/core/utils");
 var foundation_1 = require("../../../foundation");
+var useSuggestionList_1 = require("../SuggestionList/utils/useSuggestionList");
 var DownshiftUtils_1 = require("./DownshiftUtils");
-var useDownshiftGroup_1 = require("./useDownshiftGroup");
-var DOWNSHIFT_ID_TOKEN = 'rc-chip-';
+var useDownshiftTag_1 = require("./useDownshiftTag");
 var DOWNSHIFT_ID_NO_RESULT_TOKEN = 'rc-chip-empty';
 var DEFAULT_HIGHLIGHTED_INDEX = -1;
-function stringArrToRegExp(keyToTags) {
-    // eslint-disable-next-line security/detect-non-literal-regexp
-    return new RegExp((keyToTags === null || keyToTags === void 0 ? void 0 : keyToTags.join('|')) || '', 'g');
-}
-var componentName = 'RcDownshift';
 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, 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 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 isAutocomplete = variant === 'autocomplete';
-    // * when that is autocomplete, that will never be multiple
-    var multiple = isAutocomplete ? false : multipleProp;
-    var isSelectedFromAutocompleteRef = react_1.useRef(false);
-    var isInputValueChangedRef = react_1.useRef(false);
+    var downshiftId = foundation_1.useId('downshift', true);
     var _e = tslib_1.__read(utils_1.useControlled({
-        controlled: focusedProp,
+        controlled: focused,
         default: false,
-        name: componentName,
-    }), 2), isFocused = _e[0], setIsFocused = _e[1];
+        name: DownshiftUtils_1.downshiftComponentName,
+    }), 2), inputFocused = _e[0], setInputFocused = _e[1];
     var _f = tslib_1.__read(utils_1.useControlled({
         controlled: openProp,
         default: initialIsOpen || false,
-        name: componentName,
+        name: DownshiftUtils_1.downshiftComponentName,
     }), 2), isOpen = _f[0], setIsOpen = _f[1];
-    var _g = tslib_1.__read(react_1.useState(false), 2), isTagsFocus = _g[0], setIsTagsFocus = _g[1];
-    var _h = tslib_1.__read(react_1.useState(0), 2), activeIndex = _h[0], setActiveIndex = _h[1];
-    var _j = tslib_1.__read(utils_1.useControlled({
-        controlled: inputValueProp,
-        default: '',
-        name: componentName,
-    }), 2), inputValue = _j[0], setInputValue = _j[1];
-    var updateInputValue = function (newValue) {
-        onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp(newValue);
-        setInputValue(newValue);
-    };
-    var _k = tslib_1.__read(utils_1.useControlled({
-        controlled: selectedItemsProp,
-        default: [],
-        name: componentName,
-    }), 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 = foundation_1.useResultRef(function () { return uniqueId_1.default("downshift-"); }).current;
-    // * use -2 for us know that is init state, for recalculate defaultHighlightedIndex
-    var highlightedIndexRef = react_1.useRef(DEFAULT_HIGHLIGHTED_INDEX);
+    var isInputValueChangedRef = react_1.useRef(false);
     var isCompositionRef = react_1.useRef(false);
-    var noOptionItemRef = react_1.useRef();
+    var noOptionItemRef = react_1.useRef(null);
     var stopAutoSelectRef = react_1.useRef(false);
     var fromPasteString = react_1.useRef('');
     var keepHighlightedIndexRef = react_1.useRef(false);
-    var changeHighlightedIndexReason = react_1.useRef();
-    var readOnly = !isAutocomplete && !multiple && selectedItems.length >= 1
-        ? true
-        : undefined;
-    var forceUpdate = foundation_1.useForceUpdate();
-    var _l = foundation_1.useSleep(), sleep = _l.sleep, getSleeping = _l.getSleeping;
-    var filteredResult = react_1.useMemo(function () {
+    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;
+    var _h = useDownshiftTag_1.useDownshiftTag({
+        id: downshiftId,
+        value: selectedItemsProp,
+        onChange: onSelectChange,
+        getOptionLabel: getOptionLabel,
+        onInputChange: onInputChangeProp,
+        variant: variant,
+        wrapperRef: wrapperRef,
+        inputRef: inputRef,
+        freeSolo: freeSolo,
+        maxFreeSolo: maxFreeSolo,
+        keyToTags: keyToTags,
+        onMaxFreeSolo: onMaxFreeSolo,
+        multiple: multiple,
+        label: labelProp,
+        required: required,
+        disabled: disabled,
+        // * when is composition, stop freeSolo create new item
+        getStopCreateFreeSolo: function () { return isCompositionRef.current; },
+        onReset: function () {
+            resetState();
+        },
+    }), isSelectedFromAutocompleteRef = _h.isSelectedFromAutocompleteRef, tags = _h.tags, tagFocused = _h.focused, addTag = _h.addTag, checkAndAddFreeSolo = _h.checkAndAddFreeSolo, focusedTagIndex = _h.focusedIndex, focusTag = _h.focusTag, focusLastTag = _h.focusLast, clearTags = _h.clearTags, blurTags = _h.blur, getTagProps = _h.getTagProps, getTagListBoxProps = _h.getTagListBoxProps;
+    var processFilteredResult = react_1.useCallback(function (results, inputValue) {
+        if (inputValue === void 0) { inputValue = ''; }
         var getInputValueAsItem = function () {
-            var label = inputValue.trim() || '';
+            var label = inputValue.trim();
             if (label.length > 0) {
                 var item = {
                     id: DOWNSHIFT_ID_NO_RESULT_TOKEN,
@@ -76,22 +68,10 @@ exports.useDownshift = function (_a) {
                 };
                 return item;
             }
-            return undefined;
-        };
-        var getFilteredItems = function (items) {
-            if (filterOptions) {
-                return filterOptions(items, {
-                    inputValue: inputValue,
-                    inputChanged: isInputValueChangedRef.current,
-                    getOptionLabel: getOptionLabel,
-                    selectedItems: selectedItems,
-                });
-            }
-            return items;
+            return null;
         };
         // * only when isOpen calculate the filtered result
-        var results = getFilteredItems(options);
-        noOptionItemRef.current = undefined;
+        noOptionItemRef.current = null;
         if (addNoOptionItem) {
             var item = getInputValueAsItem();
             noOptionItemRef.current = item;
@@ -116,68 +96,58 @@ exports.useDownshift = function (_a) {
             }
         }
         return results;
-    }, [
-        addNoOptionItem,
-        filterOptions,
-        freeSolo,
-        getOptionLabel,
-        inputValue,
-        options,
-        renderNoOptions,
-        selectedItems,
-    ]);
-    var _m = useDownshiftGroup_1.useDownshiftGroup({
-        groupBy: groupBy,
+    }, [addNoOptionItem, freeSolo, renderNoOptions]);
+    var filterOptions = react_1.useCallback(function (items, state) {
+        if (filterOptionsProp) {
+            return filterOptionsProp(items, tslib_1.__assign(tslib_1.__assign({}, state), { inputChanged: isInputValueChangedRef.current, selectedItems: tags }));
+        }
+        return items;
+    }, [filterOptionsProp, tags]);
+    var _j = useSuggestionList_1.useSuggestionList({
+        id: downshiftId,
+        inputRef: inputRef,
+        inputValue: inputValueProp,
         options: options,
-        filteredResult: filteredResult,
-        getExpandIconProps: getExpandIconProps,
+        disabledItemsHighlightable: disabledItemsHighlightable,
+        groupVariant: groupVariant,
         groupExpanded: groupExpanded,
         groupDefaultExpanded: groupDefaultExpanded,
+        getOptionLabel: getOptionLabel,
+        filterOptions: filterOptions,
+        processFilteredResult: processFilteredResult,
+        onInputChange: onInputChangeProp,
+        onKeyDown: onKeyDownProp,
+        onClear: onClear,
+        getOptionDisabled: getOptionDisabled,
+        groupBy: groupBy,
         onGroupExpanded: onGroupExpanded,
-        // TODO: single release for that breaking change
-        // getOptionDisabled,
-        groupVariant: groupVariant,
-        id: downshiftId,
-    }), groupedResult = _m.groupedResult, handleGroupExpandedChange = _m.handleGroupExpandedChange, optionsGroupList = _m.optionsGroupList;
-    var optionItems = groupBy ? groupedResult : filteredResult;
-    var freeSoloCount = react_1.useMemo(function () { return selectedItems.filter(function (x) { return x.freeSolo; }).length; }, [selectedItems]);
-    var handleSelectedItems = function (_selectedItems) {
-        setSelectedItems(_selectedItems);
-        onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(_selectedItems);
-        if (isAutocomplete && _selectedItems.length === 1) {
-            var result = getOptionLabel(_selectedItems[0]);
-            onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp(result);
-            isSelectedFromAutocompleteRef.current = true;
-        }
-    };
-    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 focusTag = function (tagToFocus) {
-        var _a;
-        var textFieldElm = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
-        var inputElm = inputRef.current;
-        if (tagToFocus === -1) {
-            inputElm === null || inputElm === void 0 ? void 0 : inputElm.focus();
-        }
-        else {
-            (_a = textFieldElm === null || textFieldElm === void 0 ? void 0 : textFieldElm.querySelector("[data-tag-index=\"" + tagToFocus + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    };
-    var handleFocusTag = foundation_1.useEventCallback(function (tagToFocus, focus) {
-        if (focus === void 0) { focus = true; }
-        if (activeIndex === tagToFocus)
-            return;
-        setActiveIndex(tagToFocus);
-        if (focus)
-            focusTag(tagToFocus);
-    });
+        getExpandIconProps: getExpandIconProps,
+        onSelect: function (e, selectedItem) {
+            addTag(selectedItem);
+            resetState(e);
+            inputContainerScrollToBottom();
+            if (disableCloseOnSelect) {
+                if (autoHighlight) {
+                    var currIndex = highlightedIndexRef.current;
+                    var nextValidIndex = getNextFocusableOption();
+                    var toIndex = 
+                    // * if that index is bigger than current index or nextValidIndex is last index,
+                    // * cut 1 (because current item will be remove)
+                    nextValidIndex > currIndex ||
+                        nextValidIndex === optionItems.length - 1
+                        ? nextValidIndex - 1
+                        : nextValidIndex;
+                    setHighlightedIndex(toIndex, {
+                        reRender: true,
+                    });
+                }
+                else {
+                    highlightedIndexRef.current = DEFAULT_HIGHLIGHTED_INDEX;
+                }
+            }
+        },
+    }), 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;
+    var readOnly = !isAutocomplete && !multiple && tags.length >= 1 ? true : undefined;
     var closeMenu = function (e, reason) {
         keepHighlightedIndexRef.current = false;
         isInputValueChangedRef.current = false;
@@ -203,7 +173,7 @@ exports.useDownshift = function (_a) {
             setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
             // !!! Get regexp every time for prevent bug with browser
             // https://stackoverflow.com/questions/3827456/what-is-wrong-with-my-date-regex/3827500#3827500
-            if (stringArrToRegExp(keyToTags).test((newValue || '').trim())) {
+            if (DownshiftUtils_1.stringArrToRegExp(keyToTags).test((newValue || '').trim())) {
                 var resultHaveAdd = checkAndAddFreeSolo({ value: newValue }, e);
                 if (!disableCloseOnSelect) {
                     closeMenu(e, 'toggleInput');
@@ -219,48 +189,6 @@ exports.useDownshift = function (_a) {
             openMenu(e);
         return false;
     };
-    var getIsItemCanSelected = function (item) {
-        return ((!!item && item.freeSolo) ||
-            (DownshiftUtils_1.isItemCanSelected(item) && !(getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(item))));
-    };
-    /** when return `true` mean add item success */
-    var checkAndAddFreeSolo = function (_a, e) {
-        var _b = _a === void 0 ? {} : _a, selectedItem = _b.selectedItem, value = _b.value;
-        var _c;
-        var isAddItem = false;
-        var currentValue = value !== null && value !== void 0 ? value : (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value;
-        if (!selectedItem &&
-            freeSolo &&
-            !isCompositionRef.current &&
-            currentValue &&
-            currentValue.length > 0) {
-            if (freeSoloCount < maxFreeSolo) {
-                var items = currentValue
-                    .trim()
-                    .split(stringArrToRegExp(keyToTags))
-                    .filter(function (x) { return x.trim() !== ''; });
-                var toLength = freeSoloCount + items.length;
-                if (toLength > maxFreeSolo) {
-                    items.splice(-(toLength - maxFreeSolo));
-                    onMaxFreeSolo === null || onMaxFreeSolo === void 0 ? void 0 : onMaxFreeSolo(maxFreeSolo);
-                }
-                if (items.length > 0) {
-                    handleSelectedItems(tslib_1.__spread(selectedItems, items.map(function (label) { return ({
-                        id: uniqueId_1.default(DOWNSHIFT_ID_TOKEN),
-                        isSuggestion: false,
-                        freeSolo: true,
-                        label: label,
-                    }); })));
-                    isAddItem = true;
-                }
-            }
-            else {
-                onMaxFreeSolo === null || onMaxFreeSolo === void 0 ? void 0 : onMaxFreeSolo(maxFreeSolo);
-            }
-            resetState(e);
-        }
-        return isAddItem;
-    };
     var inputContainerScrollToBottom = function () {
         requestAnimationFrame(function () {
             var inputContainer = inputContainerRef === null || inputContainerRef === void 0 ? void 0 : inputContainerRef.current;
@@ -269,107 +197,24 @@ exports.useDownshift = function (_a) {
             }
         });
     };
-    var selectItemFn = function (selectedItem, e) {
-        if (getIsItemCanSelected(selectedItem)) {
-            addSelectedItem(selectedItem);
-            resetState(e);
-            inputContainerScrollToBottom();
-            if (disableCloseOnSelect) {
-                if (autoHighlight) {
-                    var currIndex = highlightedIndexRef.current;
-                    var nextValidIndex = getNextFocusableOption();
-                    var toIndex = 
-                    // * if that index is bigger than current index or nextValidIndex is last index,
-                    // * cut 1 (because current item will be remove)
-                    nextValidIndex > currIndex ||
-                        nextValidIndex === optionItems.length - 1
-                        ? nextValidIndex - 1
-                        : nextValidIndex;
-                    setHighlightedIndex(toIndex, {
-                        reRender: true,
-                    });
-                }
-                else {
-                    highlightedIndexRef.current = DEFAULT_HIGHLIGHTED_INDEX;
-                }
-            }
-            return true;
-        }
-        return false;
-    };
-    var removeSelectedItem = function (selectedItem) {
-        var selectedItemIndex = selectedItems.indexOf(selectedItem);
-        if (selectedItemIndex > -1) {
-            handleSelectedItems(tslib_1.__spread(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1)));
-        }
-    };
-    var addSelectedItem = function (selectedItem) {
-        // * change to uniqueId
-        if (selectedItem.freeSolo) {
-            noOptionItemRef.current = undefined;
-            if (freeSoloCount < maxFreeSolo) {
-                selectedItem.id = uniqueId_1.default(DOWNSHIFT_ID_TOKEN);
-            }
-            else {
-                onMaxFreeSolo === null || onMaxFreeSolo === void 0 ? void 0 : onMaxFreeSolo(maxFreeSolo);
-                return;
-            }
-        }
-        if (multiple) {
-            handleSelectedItems(tslib_1.__spread(selectedItems, [selectedItem]));
-        }
-        else {
-            handleSelectedItems([selectedItem]);
-        }
-    };
     var resetState = function (e) {
-        if (
         // * when autocomplete select mode not reset input value
-        !isSelectedFromAutocompleteRef.current &&
-            inputRef.current &&
-            inputRef.current.value.length > 0) {
-            updateInputValue('');
+        if (!isSelectedFromAutocompleteRef.current) {
+            clearInput();
         }
+        blurTags();
         isSelectedFromAutocompleteRef.current = false;
+        noOptionItemRef.current = null;
         isInputValueChangedRef.current = false;
-        setActiveIndex(-1);
         if (!disableCloseOnSelect) {
             closeMenu(e, 'select-option');
         }
     };
     var reset = function (isFocus) {
         resetState();
-        setIsTagsFocus(false);
-        onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp('');
         onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange([]);
-        if (isFocus)
-            focusInput();
+        resetSuggestionList(isFocus);
     };
-    var activeIndexRef = react_1.useRef(activeIndex);
-    activeIndexRef.current = activeIndex;
-    var handleTagKey = foundation_1.useKeyboardMoveFocus({
-        options: selectedItems,
-        focusedIndexRef: activeIndexRef,
-        infinite: 'order',
-        onFocusedIndexChange: function (event, toIndex) {
-            handleFocusTag(toIndex);
-            event === null || event === void 0 ? void 0 : event.preventDefault();
-        },
-    }).onKeyFocusedIndexHandle;
-    var _o = foundation_1.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 = _o.onKeyFocusedIndexHandle, getNextFocusableOption = _o.getNextFocusableOption;
     var keepHighlightedIndex = function () {
         keepHighlightedIndexRef.current = true;
     };
@@ -388,8 +233,8 @@ exports.useDownshift = function (_a) {
     if (isOpen) {
         if (highlightedIndexRef.current === DEFAULT_HIGHLIGHTED_INDEX) {
             var toIndex = defaultHighlightedIndex;
-            if (isAutocomplete && selectedItems.length === 1) {
-                var itemText_1 = getOptionLabel(selectedItems[0]);
+            if (isAutocomplete && tags.length === 1) {
+                var itemText_1 = getOptionLabel(tags[0]);
                 var fIndex = optionItems.findIndex(function (x) { return getOptionLabel(x) === itemText_1; });
                 if (fIndex > -1) {
                     toIndex = fIndex;
@@ -411,8 +256,8 @@ exports.useDownshift = function (_a) {
         }
     }
     var handleAutocompleteText = function () {
-        if (isAutocomplete && selectedItems.length > 0) {
-            var result = getOptionLabel(selectedItems[0]);
+        if (isAutocomplete && tags.length > 0) {
+            var result = getOptionLabel(tags[0]);
             onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp(result);
         }
     };
@@ -424,103 +269,9 @@ exports.useDownshift = function (_a) {
         handleAutocompleteText();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    /**
-     * All Get props methods
-     */
-    var getTagListBoxProps = function (props) {
-        return tslib_1.__assign({ 'aria-label': isString_1.default(labelProp) ? labelProp : undefined, 'aria-required': required || false, 'aria-disabled': disabled || false }, props);
-    };
-    var getItemProps = function (_a) {
-        var item = _a.item, index = _a.index, itemRest = tslib_1.__rest(_a, ["item", "index"]);
-        return foundation_1.combineProps({
-            id: downshiftId + "-option-" + index,
-            role: 'option',
-            onClick: function (e) {
-                selectItemFn(item, e);
-            },
-            onMouseDown: function (e) {
-                e.preventDefault();
-                e.stopPropagation();
-            },
-            onMouseOver: function () {
-                if (highlightedIndexRef.current !== index) {
-                    setHighlightedIndex(index, { reason: 'mouse', reRender: true });
-                }
-            },
-        }, itemRest);
-    };
-    var getTagProps = function (_a) {
-        var index = _a.index, selectedItem = _a.selectedItem, restTagProps = tslib_1.__rest(_a, ["index", "selectedItem"]);
-        var tabIndex = 
-        // * when tag is not focus
-        !isTagsFocus &&
-            // * and is first item
-            index === 0
-            ? 0
-            : -1;
-        return foundation_1.combineProps({
-            tabIndex: tabIndex,
-            // TODO: wait for input can complete that.
-            // role: 'option',
-            role: 'button',
-            key: downshiftId + "-selected-item-" + index,
-            'data-tag-index': index,
-            'data-item-last': index === selectedItems.length - 1,
-            onClick: function (e) {
-                e.stopPropagation();
-            },
-            onBlur: function () { return setIsTagsFocus(false); },
-            onFocus: function () {
-                handleFocusTag(index);
-                setIsTagsFocus(true);
-            },
-            onKeyDown: function (e) {
-                switch (e.key) {
-                    case 'Backspace':
-                        {
-                            var lengthBeforeDelete = selectedItems.length;
-                            handleFocusTag(
-                            // * when length is 1 mean that will be remove all
-                            lengthBeforeDelete === 1
-                                ? -1
-                                : activeIndex === 0
-                                    ? 0
-                                    : activeIndex - 1);
-                            removeSelectedItem(selectedItem);
-                        }
-                        break;
-                    case 'Delete':
-                        {
-                            var lengthBeforeDelete = selectedItems.length;
-                            handleFocusTag(
-                            // * when length is 1 mean that will be remove all
-                            lengthBeforeDelete === 1
-                                ? -1
-                                : activeIndex === selectedItems.length - 1
-                                    ? activeIndex - 1
-                                    : activeIndex);
-                            removeSelectedItem(selectedItem);
-                        }
-                        break;
-                    default:
-                        handleTagKey(e);
-                        break;
-                }
-            },
-            onDelete: function (e) {
-                // * left button clicked
-                if (e.button === 0) {
-                    removeSelectedItem(selectedItem);
-                    setIsTagsFocus(false);
-                }
-            },
-        }, restTagProps);
-    };
     var getInputProps = function (props) {
-        return foundation_1.combineProps({
-            id: downshiftId + "-input",
-            autoComplete: 'off',
-            onPaste: function (e) {
+        var suggestionListItemProps = getSuggestionListInputProps(props);
+        return foundation_1.combineProps(tslib_1.__assign(tslib_1.__assign({}, suggestionListItemProps), { onPaste: function (e) {
                 var _a;
                 if (freeSolo) {
                     var clipboardData = e.clipboardData;
@@ -535,20 +286,18 @@ exports.useDownshift = function (_a) {
                             pasteText +
                             currText.slice(position.end);
                 }
-            },
-            onChange: function (e) {
+            }, onChange: function (e) {
                 var changeValue = fromPasteString.current || e.target.value;
                 handleInputChange(changeValue, undefined, e);
                 // * when input value clear all, clear selected item
                 if (isAutocomplete && changeValue.length === 0) {
-                    handleSelectedItems([]);
+                    clearTags();
                 }
                 fromPasteString.current = '';
                 isInputValueChangedRef.current = true;
-            },
-            onFocus: function (e) {
+            }, onFocus: function (e) {
                 var _a;
-                setIsFocused(true);
+                setInputFocused(true);
                 if (openOnFocus)
                     openMenu(e);
                 // * when autocomplete mode, always select all text when focus
@@ -557,25 +306,20 @@ exports.useDownshift = function (_a) {
                 }
                 // * reset stopAutoSelect in focus input
                 stopAutoSelectRef.current = false;
-                if (activeIndex !== -1) {
-                    handleFocusTag(-1, false);
-                }
-            },
-            onBlur: function (e) {
-                setIsFocused(false);
+                blurTags();
+            }, onBlur: function (e) {
+                setInputFocused(false);
                 if (autoSelect && !stopAutoSelectRef.current) {
                     if (!freeSolo)
-                        selectItemFn(optionItems[highlightedIndexRef.current], e);
+                        selectItem(e, optionItems[highlightedIndexRef.current]);
                     checkAndAddFreeSolo({}, e);
                 }
                 // * when blur should restore text when have selected item
                 handleAutocompleteText();
                 closeMenu(e, 'blur');
-            },
-            onCompositionStart: function () {
+            }, onCompositionStart: function () {
                 isCompositionRef.current = true;
-            },
-            onCompositionEnd: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            }, onCompositionEnd: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
                 return tslib_1.__generator(this, function (_a) {
                     switch (_a.label) {
                         case 0: 
@@ -588,20 +332,17 @@ exports.useDownshift = function (_a) {
                             return [2 /*return*/];
                     }
                 });
-            }); },
-            onKeyDown: function (e) {
+            }); }, onKeyDown: function (e) {
                 keepHighlightedIndexRef.current = false;
                 onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e, highlightedIndexRef.current);
                 var _a = foundation_1.getSelectionPosition(inputRef), isSelectRange = _a.isSelectRange, position = _a.position;
-                var currTagsLength = selectedItems.length;
+                var currTagsLength = tags.length;
                 if (!isSelectRange &&
                     position.start === 0 &&
                     currTagsLength > 0 &&
                     e.key === 'Backspace') {
-                    if (currTagsLength > 0) {
-                        stopAutoSelectRef.current = true;
-                        handleFocusTag(currTagsLength - 1);
-                    }
+                    stopAutoSelectRef.current = true;
+                    focusLastTag();
                 }
                 else {
                     var highlightedIndex = highlightedIndexRef.current;
@@ -633,7 +374,7 @@ exports.useDownshift = function (_a) {
                             if (!e.shiftKey && !isCompositionRef.current) {
                                 var currentHighlightItem = optionItems[highlightedIndex];
                                 if (isOpen && currentHighlightItem) {
-                                    if (selectItemFn(currentHighlightItem, e)) {
+                                    if (selectItem(e, currentHighlightItem)) {
                                         e.preventDefault();
                                         e.stopPropagation();
                                     }
@@ -660,20 +401,14 @@ exports.useDownshift = function (_a) {
                             else if (highlightedIndex !== DEFAULT_HIGHLIGHTED_INDEX &&
                                 isOpen &&
                                 !isCompositionRef.current) {
-                                selectItemFn(optionItems[highlightedIndex], e);
+                                selectItem(e, optionItems[highlightedIndex]);
                                 e.stopPropagation();
                             }
                             // always preventDefault for not inset all enter into textarea
                             e.preventDefault();
                             break;
                         case 'F10':
-                            if (e.shiftKey) {
-                                var currOption = optionItems[highlightedIndex];
-                                var currentGroup = currOption.group;
-                                if (currentGroup && currentGroup.options.length > 1) {
-                                    handleGroupExpandedChange(currentGroup.group);
-                                }
-                            }
+                            handleF10KeyDown(e);
                             break;
                         case 'ArrowUp':
                         case 'ArrowDown':
@@ -682,7 +417,7 @@ exports.useDownshift = function (_a) {
                                 return;
                             }
                             // * check state for is that should move key in option items
-                            if (isAutocomplete && selectedItems.length > 0 && !isOpen) {
+                            if (isAutocomplete && tags.length > 0 && !isOpen) {
                                 openMenu(e);
                                 e.preventDefault();
                                 break;
@@ -697,30 +432,11 @@ exports.useDownshift = function (_a) {
                             break;
                     }
                 }
-            },
-        }, props);
+            } }), props);
     };
     var getInputAriaProps = function (props) {
-        return foundation_1.combineProps({
-            readOnly: readOnly,
-            // * provide for when container click focus on input
-            onContainerClick: focusInput,
-            unselectable: readOnly ? 'on' : undefined,
-            role: 'combobox',
-            'aria-autocomplete': 'list',
-            'aria-expanded': !!isOpen,
-            'aria-haspopup': true,
-            'aria-owns': isOpen ? downshiftId + "-menu" : undefined,
-            'aria-activedescendant': isOpen && highlightedIndexRef.current > -1
-                ? downshiftId + "-option-" + highlightedIndexRef.current
-                : undefined,
-        }, props);
-    };
-    var getLabelProps = function (props) {
-        return foundation_1.combineProps({
-            htmlFor: downshiftId + "-input",
-            id: downshiftId + "-label",
-        }, props);
+        var suggestionListInputAriaProps = getSuggestionListInputAriaProps(props);
+        return foundation_1.combineProps(tslib_1.__assign(tslib_1.__assign({}, suggestionListInputAriaProps), { readOnly: readOnly, unselectable: readOnly ? 'on' : undefined, 'aria-owns': isOpen ? downshiftId + "-menu" : undefined, 'aria-expanded': !!isOpen }), props);
     };
     var getPopperProps = function (restPopperProps) {
         var _a;
@@ -734,13 +450,6 @@ exports.useDownshift = function (_a) {
             },
         }, restPopperProps);
     };
-    var getMenuProps = function (restMenuProps) {
-        return foundation_1.combineProps({
-            'aria-labelledby': downshiftId + "-label",
-            id: downshiftId + "-menu",
-            role: 'listbox',
-        }, restMenuProps);
-    };
     var getToggleButtonProps = function (props) {
         return foundation_1.combineProps({
             disabled: (!isOpen && optionItems.length === 0) || disabled || readOnly,
@@ -762,13 +471,11 @@ exports.useDownshift = function (_a) {
         }, props);
     };
     var getClearButtonProps = function (props) {
-        return foundation_1.combineProps({
-            id: downshiftId + "-clear-button",
-            onClick: function (e) {
+        var suggestionListClearButtonProps = getSuggestionListClearButtonProps(props);
+        return foundation_1.combineProps(tslib_1.__assign(tslib_1.__assign({}, suggestionListClearButtonProps), { onClick: function (e) {
                 onClear === null || onClear === void 0 ? void 0 : onClear(e);
                 reset(true);
-            },
-        }, props);
+            } }), props);
     };
     var getNoOptionsProps = function (additionProps) {
         return foundation_1.combineProps({
@@ -778,17 +485,14 @@ exports.useDownshift = function (_a) {
             role: 'presentation',
         }, additionProps);
     };
-    var resultObj = {
+    return {
         focusInput: focusInput,
-        setIsTagsFocus: setIsTagsFocus,
         readOnly: readOnly,
         getTagProps: getTagProps,
         getClearButtonProps: getClearButtonProps,
-        removeSelectedItem: removeSelectedItem,
-        activeIndex: activeIndex,
-        setActiveIndex: handleFocusTag,
+        activeIndex: focusedTagIndex,
+        setActiveIndex: focusTag,
         isOpen: isOpen,
-        isTagsFocus: isTagsFocus,
         getToggleButtonProps: getToggleButtonProps,
         getPopperProps: getPopperProps,
         getLabelProps: getLabelProps,
@@ -800,23 +504,22 @@ exports.useDownshift = function (_a) {
         getNoOptionsProps: getNoOptionsProps,
         noOptionItem: noOptionItemRef.current,
         highlightedIndex: highlightedIndexRef.current,
-        selectedItems: selectedItems,
+        tags: tags,
         optionItems: optionItems,
         inputValue: inputValue,
         onInputChange: handleInputChange,
         keepHighlightedIndex: keepHighlightedIndex,
         isKeepHighlightedIndex: keepHighlightedIndexRef.current,
         setHighlightedIndex: setHighlightedIndex,
-        changeHighlightedIndexReason: changeHighlightedIndexReason.current,
+        changeHighlightedIndexReason: changeHighlightedIndexReasonRef.current,
         closeMenu: closeMenu,
         openMenu: openMenu,
         reset: reset,
         forceUpdate: forceUpdate,
         optionsGroupList: optionsGroupList,
-        isFocused: isFocused,
+        /** that state of current downshift focused, both tag or input focused */
+        focused: focused !== null && focused !== void 0 ? focused : (tagFocused || inputFocused ? true : undefined),
         id: downshiftId,
         inputChanged: isInputValueChangedRef.current,
     };
-    changeHighlightedIndexReason.current = undefined;
-    return resultObj;
 };