@ringcentral/spring-ui 1.7.0

package/Autocomplete.js

@@ -0,0 +1,1767 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, useCallback, useEffect, useLayoutEffect, useState, useImperativeHandle } from 'react';
+import clsx from 'clsx';
+import { Virtuoso } from 'react-virtuoso';
+import { useClasses, usePrevious, useRefState, useEventCallback, logInDev, combineProps, useDepsChange, useControlled, useId, useForceUpdate, useKeyboardMoveFocus, useForkRef, useSleep, useRetry, useChange, getSelectionPosition } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
+import { I as IconButton } from './chunks/IconButtonLabel.js';
+import { AnimatePresence, motion } from 'framer-motion';
+import './chunks/Icon.js';
+import { Xsm } from '@ringcentral/spring-icon';
+import { u as usePrefersReducedMotion } from './chunks/usePrefersReducedMotion.js';
+import { g as getFade } from './chunks/getFade.js';
+import { C as Chip } from './chunks/Chip.js';
+import { Popper } from './Popper.js';
+import { T as TextField } from './chunks/TextField.js';
+import uniqueId from 'lodash/uniqueId';
+import './chunks/useMotionSafeTransition.js';
+import '@mui/base';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import './chunks/PopperPaper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/ShowHideEye.js';
+import './chunks/useHelperTextId.js';
+
+var SuggestionList$1 = {"sui-suggestion-list-root":"sui-suggestion-list-root","sui-suggestion-list-item":"sui-suggestion-list-item","sui-suggestion-list-readonly":"sui-suggestion-list-readonly","sui-disabled":"sui-disabled","sui-focus-visible":"sui-focus-visible","sui-suggestion-list-selected":"sui-suggestion-list-selected","sui-suggestion-list-highlighted":"sui-suggestion-list-highlighted","sui-suggestion-list-group-title-readonly":"sui-suggestion-list-group-title-readonly","sui-suggestion-list-expand-icon":"sui-suggestion-list-expand-icon"};
+
+const SuggestionListItem = forwardRef((props, ref) => {
+    const { id, label, children, disabled, isGroupTitle = false, isTitleMode = false, highlighted = false, selected = false, expanded = false, expandable = false, expandIconProps, classes, className, role, ...rest } = props;
+    const cls = useClasses('suggestion-list', classes, className);
+    const readonly = isGroupTitle && isTitleMode;
+    const ariaDisabled = role !== undefined && disabled ? true : undefined;
+    return (jsxs("div", { "aria-disabled": ariaDisabled, role: role, ...rest, id: id, className: cls('item', {
+            'group-title': isGroupTitle,
+            readonly,
+            'group-title-readonly': readonly,
+            highlighted: highlighted,
+            selected: selected,
+            disabled,
+        }), children: [label || children, expandable && expandIconProps && (jsx(IconButton, { shape: 'squircle', background: false, color: 'secondary', variant: "contained", size: "small", ...expandIconProps, children: jsx(ExpandCollapseCaret, { expanded: expanded }) }))] }));
+});
+
+/**
+ * auto calculate container height
+ */
+const useDynamicHeight = ({ itemCount, maxContainerHeight, onContainerHeightChange, }) => {
+    const prevItemCount = usePrevious(() => itemCount);
+    const fullHeight = maxContainerHeight === '100%';
+    const maxContainerSize = fullHeight ? -1 : maxContainerHeight;
+    const containerHeighRef = useRef(maxContainerSize);
+    if (!fullHeight) {
+        // * when prev item count is zero, and current is not zero, set hight for vl to trigger totalListHeightChanged to re-change height
+        if (prevItemCount === 0 && itemCount !== 0) {
+            containerHeighRef.current = maxContainerSize;
+        }
+        else if (itemCount === 0) {
+            // * when item count is zero always height to zero, when zero init
+            containerHeighRef.current = 0;
+        }
+    }
+    return {
+        containerHeighRef,
+        totalListHeightChanged: (height) => {
+            if (!fullHeight) {
+                const containerHeigh = containerHeighRef.current;
+                let changeHeight = -1;
+                if (height < containerHeigh) {
+                    changeHeight = height;
+                }
+                else if (containerHeigh !== maxContainerSize) {
+                    changeHeight = Math.min(height, maxContainerSize);
+                }
+                if (changeHeight !== -1) {
+                    containerHeighRef.current = changeHeight;
+                    onContainerHeightChange?.(changeHeight);
+                }
+            }
+        },
+        style: {
+            height: fullHeight ? '100%' : containerHeighRef.current,
+        },
+    };
+};
+
+/**
+ * scroll into current highlight index
+ */
+function useHighlightScroll({ containerHeighRef, scrollToIndex, }) {
+    const renderedItemsRef = useRef([]);
+    const scrollerRef = useRef();
+    const scrollToHighlightedIndex = (prevHighlightedIndex, currHighlightedIndex, topHighlightIndex = 0) => {
+        if (!scrollerRef.current) {
+            if (currHighlightedIndex !== topHighlightIndex) {
+                requestAnimationFrame(() => {
+                    scrollToIndex({
+                        index: currHighlightedIndex,
+                        align: 'start',
+                    });
+                });
+            }
+            return;
+        }
+        const scrollElm = scrollerRef.current;
+        const renderedItems = renderedItemsRef.current;
+        const isBackward = prevHighlightedIndex > currHighlightedIndex;
+        const isForward = prevHighlightedIndex < currHighlightedIndex;
+        const currentVisibleOffset = {
+            start: scrollElm.scrollTop,
+            stop: scrollElm.scrollTop + containerHeighRef.current,
+        };
+        // * when highlightedIndex is out of visible range
+        if (!renderedItems.some((x) => x.index === currHighlightedIndex)) {
+            scrollToIndex({
+                index: currHighlightedIndex,
+                align: isBackward ? 'start' : 'end',
+            });
+            return;
+        }
+        // backward
+        if (isBackward) {
+            let firstShouldScrollIndex = currHighlightedIndex;
+            for (let i = renderedItems.length - 1; i >= 0; i--) {
+                const item = renderedItems[i];
+                if (item.offset <= currentVisibleOffset.start) {
+                    break;
+                }
+                firstShouldScrollIndex = item.index;
+            }
+            if (currHighlightedIndex < firstShouldScrollIndex) {
+                scrollToIndex({
+                    index: currHighlightedIndex,
+                    align: 'start',
+                });
+            }
+            // forward
+        }
+        else if (isForward) {
+            let lastShouldScrollIndex = currHighlightedIndex;
+            for (let i = 0; i < renderedItems.length; i++) {
+                const item = renderedItems[i];
+                if (item.offset >= currentVisibleOffset.stop) {
+                    break;
+                }
+                lastShouldScrollIndex = item.index;
+            }
+            if (currHighlightedIndex >= lastShouldScrollIndex) {
+                scrollToIndex({
+                    index: currHighlightedIndex,
+                    align: 'end',
+                });
+            }
+        }
+        else {
+            scrollToIndex({
+                index: currHighlightedIndex,
+                align: 'start',
+            });
+        }
+    };
+    return {
+        /**
+         * scroller reference
+         */
+        scrollerRef,
+        /**
+         * Scroll to target highlighted index
+         * @param prevHighlightedIndex previous highlightedIndex
+         * @param currHighlightedIndex current highlightedIndex
+         * @param topHighlightIndex top highlighIndex for check should scroll when init
+         */
+        scrollToHighlightedIndex,
+        /**
+         * set to virtuoso `scrollerRef` prop, auto bind inner `scrollerRef`
+         */
+        scrollerRefFn: (elm) => (scrollerRef.current = elm),
+        /**
+         * set to virtuoso `itemsRendered` prop, auto bind inner `renderedItemsRef`
+         */
+        itemsRendered: (e) => (renderedItemsRef.current = e),
+    };
+}
+
+const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconProps, groupExpanded, groupDefaultExpanded, onGroupExpanded, groupVariant, getOptionDisabled, id, }) => {
+    const [groupExpandedMapRef, setGroupExpandedMap] = useRefState({});
+    const isTitleGroup = groupVariant === 'normal';
+    const handleGroupExpandedChange = (groupName) => {
+        const groupExpandedMap = groupExpandedMapRef.current;
+        if (typeof groupExpanded === 'boolean') {
+            return;
+        }
+        const toExpandedState = !groupExpandedMap[groupName];
+        const newExpandedMap = {
+            ...groupExpandedMap,
+            [groupName]: toExpandedState,
+        };
+        setGroupExpandedMap(newExpandedMap);
+        if (!onGroupExpanded)
+            return;
+        const group = optionsGroupList.find((x) => x.group === groupName);
+        if (!group)
+            return;
+        const { getExpandIconProps, ...restGroupProps } = group;
+        onGroupExpanded({
+            ...restGroupProps,
+            expanded: toExpandedState,
+        }, newExpandedMap);
+    };
+    const handleExpandIconClick = useEventCallback((e, groupName) => {
+        handleGroupExpandedChange(groupName);
+        e.preventDefault();
+        e.stopPropagation();
+    });
+    const optionsGroupList = useMemo(() => {
+        /** key with this group count */
+        if (!groupBy || !options) {
+            return [];
+        }
+        // used to keep track of key and indexes in the result array
+        const indexBy = new Map();
+        let warn = false;
+        const afterGroupFn = [];
+        const result = filteredResult.reduce((acc, option, index) => {
+            const group = groupBy(option);
+            if (acc.length > 0 && acc[acc.length - 1].group === group) {
+                const currGroup = acc[acc.length - 1];
+                acc[acc.length - 1].options.push({
+                    ...option,
+                    group: currGroup,
+                    indexInOwnGroup: currGroup.options.length - 1,
+                });
+                return acc;
+            }
+            if (process.env.NODE_ENV !== 'production') {
+                if (indexBy.get(group) && !warn) {
+                    logInDev({
+                        scope: 'useAutocomplete',
+                        message: `Material-UI: The options provided combined with the \`groupBy\` method returns duplicated headers.
+                  You can solve the issue by sorting the options with the output of \`groupBy\``,
+                    });
+                    warn = true;
+                }
+                indexBy.set(group, true);
+            }
+            const newGroup = {
+                key: index,
+                index,
+                group,
+                order: acc.length,
+                options: [{ ...option, indexInOwnGroup: 0 }],
+                expanded: false,
+                getExpandIconProps: (additionExpandIconProps) => {
+                    return newGroup.options.length > 1
+                        ? combineProps({
+                            onClick: (e) => {
+                                handleExpandIconClick(e, group);
+                            },
+                            onMouseDown: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            },
+                            tabIndex: -1,
+                        }, combineProps(additionExpandIconProps, getExpandIconProps?.(newGroup)))
+                        : undefined;
+                },
+            };
+            newGroup.options[0].group = newGroup;
+            if (isTitleGroup) {
+                const groupTitleOption = {
+                    id: `${id}-${group}`,
+                    label: group,
+                    disabled: true,
+                    // * here cause by self Type reference
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    group: newGroup,
+                };
+                // push fn to array, do that after all options be add into group
+                if (getOptionDisabled) {
+                    afterGroupFn.push(() => {
+                        groupTitleOption.disabled = getOptionDisabled(groupTitleOption);
+                    });
+                }
+                newGroup.options.unshift(groupTitleOption);
+            }
+            acc.push(newGroup);
+            return acc;
+        }, []);
+        afterGroupFn.forEach((fn) => fn());
+        return result;
+    }, [
+        filteredResult,
+        getExpandIconProps,
+        getOptionDisabled,
+        groupBy,
+        handleExpandIconClick,
+        id,
+        isTitleGroup,
+        options,
+    ]);
+    const initGroupExpandedState = (expandedState) => {
+        if (typeof expandedState === 'object') {
+            setGroupExpandedMap(expandedState, false);
+        }
+        else if (typeof expandedState === 'boolean') {
+            setGroupExpandedMap(optionsGroupList.reduce((prev, curr) => {
+                prev[curr.group] = expandedState;
+                return prev;
+            }, {}), false);
+        }
+    };
+    useDepsChange(() => {
+        initGroupExpandedState(groupDefaultExpanded);
+    }, []);
+    useDepsChange(() => {
+        initGroupExpandedState(groupExpanded);
+    }, [groupExpanded]);
+    const groupExpandedMap = groupExpandedMapRef.current;
+    // * speared logic with group, prevent calculate every time.
+    const groupedResult = useMemo(() => {
+        const addExpandedResult = Object.entries(groupExpandedMap).reduce((prev, [key, expended]) => {
+            const group = prev.find((x) => x.group === key);
+            if (group)
+                group.expanded = expended;
+            return prev;
+        }, [...optionsGroupList]);
+        return addExpandedResult.reduce((prev, curr) => {
+            if (curr.expanded) {
+                prev.push(...curr.options);
+            }
+            else {
+                prev.push(curr.options[0]);
+            }
+            return prev;
+        }, []);
+    }, [groupExpandedMap, optionsGroupList]);
+    return {
+        optionsGroupList,
+        groupedResult,
+        groupExpandedMap,
+        handleGroupExpandedChange,
+    };
+};
+
+const DEFAULT_HIGHLIGHTED_INDEX$1 = -1;
+const isItemCanSelected = (item) => {
+    return Boolean(item && !item.disabled);
+};
+const toOptionIdString = (id) => typeof id === 'number' ? String(id) : id;
+const DEFAULT_GET_OPTION_LABEL = (item) => item?.label || '';
+/**
+ * provide suggestion list with search function and expandable group with virtualized list
+ */
+const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DEFAULT_GET_OPTION_LABEL, filterOptions, disabledItemsHighlightable, options, onInputChange: onInputChangeProp, inputRef, onKeyDown: onKeyDownProp, onSelect, onClear, getOptionDisabled, groupBy, onGroupExpanded, groupVariant, groupExpanded, groupDefaultExpanded, getExpandIconProps, processFilteredResult, }) => {
+    const isTitleMode = groupVariant === 'normal';
+    const [inputValue, setInputValue] = useControlled({
+        controlled: inputValueProp,
+        default: '',
+        name: 'useSuggestionList',
+    });
+    const updateInputValue = (newValue) => {
+        onInputChangeProp?.(newValue);
+        setInputValue(newValue);
+    };
+    const focusInput = () => inputRef.current?.focus();
+    const currUniqueId = useId(id || 'suggestion-list', !id);
+    const highlightedIndexRef = useRef(DEFAULT_HIGHLIGHTED_INDEX$1);
+    const changeHighlightedIndexReasonRef = useRef();
+    const forceUpdate = useForceUpdate();
+    const getFilteredItems = useCallback((items) => {
+        if (filterOptions) {
+            return filterOptions(items, {
+                inputValue,
+                getOptionLabel,
+                selectedItems: [],
+            });
+        }
+        return items;
+    }, [filterOptions, getOptionLabel, inputValue]);
+    const filteredResult = useMemo(() => {
+        // * only when isOpen calculate the filtered result
+        let results = getFilteredItems(options);
+        results = processFilteredResult
+            ? processFilteredResult(results, inputValue)
+            : results;
+        return results;
+    }, [getFilteredItems, inputValue, options, processFilteredResult]);
+    const { groupedResult, handleGroupExpandedChange, optionsGroupList } = useAutocompleteGroup({
+        id: currUniqueId,
+        options,
+        filteredResult,
+        groupExpanded,
+        groupDefaultExpanded,
+        groupVariant,
+        groupBy,
+        getExpandIconProps,
+        onGroupExpanded,
+        getOptionDisabled,
+    });
+    const optionItems = groupBy ? groupedResult : filteredResult;
+    const setHighlightedIndex = (index, { reRender = false, reason, }) => {
+        changeHighlightedIndexReasonRef.current = reason;
+        if (highlightedIndexRef.current !== index) {
+            highlightedIndexRef.current = index;
+            if (reRender)
+                forceUpdate();
+        }
+    };
+    const handleInputChange = (newValue) => {
+        if (inputValue !== newValue) {
+            setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX$1, { reason: 'auto' });
+            updateInputValue(newValue);
+        }
+        return false;
+    };
+    const getIsItemCanSelected = (item) => {
+        return ((!!item && item.freeSolo) ||
+            (isItemCanSelected(item) && !getOptionDisabled?.(item)));
+    };
+    const selectItem = (e, selectedItem) => {
+        if (getIsItemCanSelected(selectedItem)) {
+            onSelect?.(e, selectedItem);
+            return true;
+        }
+        return false;
+    };
+    const clearInput = () => {
+        if (inputRef.current && inputRef.current.value.length > 0) {
+            updateInputValue('');
+        }
+    };
+    const reset = (isFocus) => {
+        clearInput();
+        onInputChangeProp?.('');
+        if (isFocus)
+            focusInput();
+    };
+    const { onKeyFocusedIndexHandle, getNextFocusableOption } = useKeyboardMoveFocus({
+        options: optionItems,
+        focusedIndexRef: highlightedIndexRef,
+        infinite: true,
+        onFocusedIndexChange: (event, toIndex) => {
+            setHighlightedIndex(toIndex, { reason: 'keyboard', reRender: true });
+            event?.preventDefault();
+        },
+        getOptionDisabled: disabledItemsHighlightable
+            ? undefined
+            : (child) => {
+                return !getIsItemCanSelected(child);
+            },
+    });
+    const getItemProps = ({ item, index = 0, }) => {
+        const currGroup = item.group;
+        const isGroupTitle = item === currGroup?.options[0];
+        const itemCount = optionItems.length;
+        const groupOrder = currGroup?.order || 0;
+        const stringId = toOptionIdString(item.id);
+        return {
+            id: stringId ?? `${currUniqueId}-option-${index}`,
+            onClick: (e) => {
+                selectItem(e, item);
+            },
+            onMouseOver: () => {
+                if (highlightedIndexRef.current !== index &&
+                    getIsItemCanSelected(item)) {
+                    setHighlightedIndex(index, { reason: 'mouse', reRender: true });
+                }
+            },
+            // When title mode and is title, skip that posinset
+            ...(isTitleMode && isGroupTitle
+                ? {}
+                : {
+                    role: 'option',
+                    'aria-setsize': itemCount - (isTitleMode ? optionsGroupList?.length || 0 : 0),
+                    'aria-posinset': index + 1 - (isTitleMode ? groupOrder + 1 : 0),
+                }),
+        };
+    };
+    const handleF10KeyDown = (e) => {
+        const highlightedIndex = highlightedIndexRef.current;
+        if (!e.shiftKey)
+            return;
+        const currOption = optionItems[highlightedIndex];
+        const currentGroup = currOption.group;
+        if (currentGroup && currentGroup.options.length > 1) {
+            handleGroupExpandedChange(currentGroup.group);
+        }
+    };
+    const getInputProps = (props) => {
+        return combineProps({
+            id: `${currUniqueId}-input`,
+            autoComplete: 'off',
+            onChange: (e) => {
+                const changeValue = e.target.value;
+                handleInputChange(changeValue);
+            },
+            onKeyDown: (e) => {
+                onKeyDownProp?.(e, highlightedIndexRef.current);
+                switch (e.key) {
+                    case 'F10':
+                        handleF10KeyDown(e);
+                        break;
+                    case 'Enter': {
+                        const highlightedIndex = highlightedIndexRef.current;
+                        if (e.which === 229)
+                            return;
+                        if (highlightedIndex !== DEFAULT_HIGHLIGHTED_INDEX$1) {
+                            const currOption = optionItems[highlightedIndex];
+                            const isGroupTitle = currOption === currOption.group?.options[0];
+                            if (isGroupTitle) {
+                                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                const { onClick } = currOption.group.getExpandIconProps();
+                                onClick?.(e);
+                            }
+                            else {
+                                selectItem(e, currOption);
+                            }
+                            e.stopPropagation();
+                        }
+                        // always preventDefault for not inset all enter into textarea
+                        e.preventDefault();
+                        break;
+                    }
+                    default:
+                        onKeyFocusedIndexHandle(e);
+                        break;
+                }
+            },
+        }, props);
+    };
+    const getInputAriaProps = (props) => {
+        return combineProps({
+            role: 'combobox',
+            'aria-autocomplete': 'list',
+            'aria-expanded': true,
+            'aria-haspopup': true,
+            'aria-controls': `${currUniqueId}-menu`,
+            'aria-owns': `${currUniqueId}-menu`,
+            'aria-activedescendant': (() => {
+                const index = highlightedIndexRef.current;
+                if (index < 0)
+                    return undefined;
+                const option = optionItems[index];
+                const optionId = toOptionIdString(option?.id);
+                return optionId ?? `${currUniqueId}-option-${index}`;
+            })(),
+        }, props);
+    };
+    const getLabelProps = (props) => {
+        return combineProps({
+            htmlFor: `${currUniqueId}-input`,
+            id: `${currUniqueId}-label`,
+        }, props);
+    };
+    const getSuggestionListProps = (restMenuProps) => {
+        return combineProps({
+            'aria-labelledby': `${currUniqueId}-label`,
+            id: `${currUniqueId}-menu`,
+            role: 'listbox',
+        }, restMenuProps);
+    };
+    const getClearButtonProps = (props) => {
+        return combineProps({
+            id: `${currUniqueId}-clear-button`,
+            onClick: (e) => {
+                onClear?.(e);
+                reset(true);
+            },
+        }, props);
+    };
+    useEffect(() => {
+        changeHighlightedIndexReasonRef.current = undefined;
+    });
+    return {
+        reset,
+        clearInput,
+        forceUpdate,
+        focusInput,
+        updateInputValue,
+        selectItem,
+        onKeyFocusedIndexHandle,
+        getClearButtonProps,
+        getLabelProps,
+        getSuggestionListProps,
+        getInputProps,
+        getInputAriaProps,
+        getItemProps,
+        highlightedIndexRef,
+        highlightedIndex: highlightedIndexRef.current,
+        optionItems,
+        inputValue,
+        onInputChange: handleInputChange,
+        setHighlightedIndex,
+        changeHighlightedIndexReasonRef,
+        changeHighlightedIndexReason: changeHighlightedIndexReasonRef.current,
+        optionsGroupList,
+        /** current unique id */
+        id: currUniqueId,
+        getNextFocusableOption,
+        handleF10KeyDown,
+    };
+};
+
+const List = forwardRef((props, ref) => {
+    const { className, context } = props;
+    const listRef = context?.listRef;
+    const rootClass = context?.rootClass;
+    const forkRef = useForkRef(ref, listRef);
+    return (jsx("div", { ref: forkRef, className: clsx(className, rootClass), "data-suggestion-list": true, ...props }));
+});
+const SuggestionList = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'SuggestionList' });
+    const { highlightedIndex, options, getItemProps, virtualize = true, renderOption, value: selectedOptions, inputValue, groupVariant, groupExpanded, renderGroup, optionsGroupList, getOptionDisabled, getOptionSelected, changeHighlightedIndexReason, isKeepHighlightedIndex, components: componentsProp, onContainerHeightChange, getOptionLabel, padding = 8, maxContainerHeight = '100%', className: classNameProp, classes: classesProp, getSuggestionListProps, ...rest } = props;
+    const vlRef = useRef(null);
+    const forkVlRef = useForkRef(ref, vlRef);
+    const isTitleMode = groupVariant === 'normal';
+    const listRef = useRef(null);
+    const itemData = options;
+    const itemCount = options.length;
+    const cls = useClasses('suggestion-list', classesProp, classNameProp);
+    const { totalListHeightChanged, style, containerHeighRef } = useDynamicHeight({
+        itemCount,
+        maxContainerHeight,
+        onContainerHeightChange: (changeHeight) => {
+            const scroller = scrollerRef.current;
+            if (scroller?.style) {
+                scroller.style.height = `${changeHeight}px`;
+                onContainerHeightChange?.();
+            }
+        },
+    });
+    const { sleep } = useSleep();
+    const { retry: scrollToIndexWithRetry } = useRetry(async (location) => {
+        const toIndex = location.index;
+        if (!virtualize) {
+            const toElm = listRef.current?.querySelector(`[data-item-index="${toIndex}"]`);
+            toElm?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            return true;
+        }
+        if (location.index === 0 && padding !== undefined) {
+            location = {
+                ...location,
+                offset: -(typeof padding === 'number' ? padding : 8),
+            };
+        }
+        vlRef.current?.scrollToIndex(location);
+        await sleep(0);
+        // confirm that scrollInto view
+        const toElm = listRef.current?.querySelector(`[data-item-index="${toIndex}"]`);
+        return !!toElm;
+    }, {
+        retryTimes: 10,
+        intervalTime: 20,
+    });
+    const { scrollerRef, scrollerRefFn, itemsRendered, scrollToHighlightedIndex, } = useHighlightScroll({
+        containerHeighRef,
+        scrollToIndex: scrollToIndexWithRetry,
+    });
+    const prevHighlightedIndex = usePrevious(() => highlightedIndex, true);
+    useLayoutEffect(() => {
+        if ((!virtualize || vlRef.current) &&
+            !isKeepHighlightedIndex &&
+            // * only scroll when reason is 'keyboard'
+            changeHighlightedIndexReason &&
+            changeHighlightedIndexReason !== 'mouse') {
+            scrollToHighlightedIndex(prevHighlightedIndex, highlightedIndex, 
+            // when title group topHighlightIndex to be 1, first item is group title
+            isTitleMode ? 1 : 0);
+        }
+    });
+    const handleScrolling = (scrolling) => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        list.style.pointerEvents = scrolling ? 'none' : '';
+    };
+    const itemContent = (index, option) => {
+        const currGroup = option.group;
+        const isGroupTitle = option === currGroup?.options[0];
+        const isFixedGroupExpanded = typeof groupExpanded === 'boolean';
+        const expandable = !isTitleMode && !isFixedGroupExpanded && isGroupTitle;
+        const expanded = option.group?.expanded;
+        const expandIconProps = !expandable
+            ? option.group?.getExpandIconProps?.({
+                className: cls('expand-icon'),
+                'aria-expanded': expanded,
+            })
+            : undefined;
+        const itemProps = getItemProps({
+            item: option,
+            index,
+        });
+        const resultProps = {
+            'data-item-index': !virtualize ? index : undefined,
+            ...option,
+            ...itemProps,
+            label: option.label,
+            key: itemProps.id,
+        };
+        const highlighted = highlightedIndex === index;
+        const selected = getOptionSelected?.(option);
+        const indexInOwnGroup = resultProps.indexInOwnGroup;
+        delete resultProps.indexInOwnGroup;
+        // * when item is not disabled, that should check outside is that disabled
+        if (!resultProps.freeSolo && !resultProps.disabled && getOptionDisabled) {
+            resultProps.disabled = getOptionDisabled(option);
+        }
+        const state = {
+            inputValue,
+            highlighted,
+            index,
+            indexInOwnGroup,
+        };
+        if (renderGroup && isGroupTitle) {
+            return renderGroup(resultProps, {
+                ...state,
+                expanded,
+                expandIconProps,
+            });
+        }
+        if (renderOption) {
+            return renderOption(resultProps, state);
+        }
+        const { error, group, freeSolo, key, ...restProps } = resultProps;
+        return (jsxs(SuggestionListItem, { ...restProps, id: typeof resultProps.id === 'number'
+                ? `${resultProps.id}`
+                : resultProps.id, expandable: isGroupTitle, isGroupTitle: isGroupTitle, isTitleMode: isTitleMode, highlighted: highlighted, selected: selected, disabled: resultProps.disabled, label: getOptionLabel ? getOptionLabel(option) : option.label, expandIconProps: expandIconProps, children: [getOptionLabel ? getOptionLabel(option) : option.label, expandIconProps && (jsx(IconButton, { shape: 'squircle', background: false, variant: "contained", size: "small", ...expandIconProps, color: 'secondary', children: jsx(ExpandCollapseCaret, { expanded: Boolean(expanded) }) }))] }, key));
+    };
+    const PaddingComponent = (() => {
+        const paddingValue = padding !== undefined && itemCount > 0
+            ? typeof padding === 'number'
+                ? padding
+                : 8
+            : 0;
+        return () => jsx("div", { style: { height: paddingValue } });
+    })();
+    const components = {
+        List: List,
+        Header: PaddingComponent,
+        Footer: PaddingComponent,
+        ...componentsProp,
+    };
+    const rootClass = cls('root');
+    const context = { listRef, rootClass };
+    return virtualize ? (jsx(Virtuoso, { ref: forkVlRef, totalCount: itemCount, data: itemData, context: context, components: components, itemContent: itemContent, ...getSuggestionListProps(), ...combineProps({
+            scrollerRef: (scrollElm) => {
+                scrollerRefFn(scrollElm);
+            },
+            itemsRendered,
+            totalListHeightChanged,
+            style,
+            isScrolling: handleScrolling,
+        }, rest) })) : (jsxs(List, { style: { maxHeight: style.height, overflow: 'auto' }, ref: (scrollElm) => {
+            listRef.current = scrollElm;
+            scrollerRefFn(scrollElm);
+        }, className: cls('root'), ...getSuggestionListProps(), ...rest, children: [jsx(PaddingComponent, {}), options.map((x, i) => {
+                return itemContent(i, x);
+            }), jsx(PaddingComponent, {})] }));
+});
+SuggestionList.displayName = 'SuggestionList';
+
+var Autocomplete$1 = {"sui-autocomplete-chevron":"sui-autocomplete-chevron","sui-autocomplete-clear":"sui-autocomplete-clear","sui-autocomplete-root":"sui-autocomplete-root","sui-focused":"sui-focused","sui-disabled":"sui-disabled","sui-autocomplete-input-container":"sui-autocomplete-input-container","sui-autocomplete-form-field-content":"sui-autocomplete-form-field-content","sui-autocomplete-form-field-content-xlarge":"sui-autocomplete-form-field-content-xlarge","sui-autocomplete-form-field-content-large":"sui-autocomplete-form-field-content-large","sui-autocomplete-form-field-content-medium":"sui-autocomplete-form-field-content-medium","sui-autocomplete-input-container-xlarge":"sui-autocomplete-input-container-xlarge","sui-autocomplete-input-container-large":"sui-autocomplete-input-container-large","sui-autocomplete-input-container-medium":"sui-autocomplete-input-container-medium","sui-autocomplete-input":"sui-autocomplete-input","sui-autocomplete-input-xlarge":"sui-autocomplete-input-xlarge","sui-autocomplete-input-large":"sui-autocomplete-input-large","sui-autocomplete-input-medium":"sui-autocomplete-input-medium","sui-autocomplete-outlined-expanded":"sui-autocomplete-outlined-expanded","sui-autocomplete-outlined-expanded-chevron":"sui-autocomplete-outlined-expanded-chevron","sui-autocomplete-standard-expanded-chevron":"sui-autocomplete-standard-expanded-chevron","sui-autocomplete-error-chevron":"sui-autocomplete-error-chevron","sui-autocomplete-end-adornment":"sui-autocomplete-end-adornment","sui-autocomplete-popper-root":"sui-autocomplete-popper-root","sui-popper-widget":"sui-popper-widget","sui-autocomplete-popper-paper":"sui-autocomplete-popper-paper","sui-autocomplete-popper-empty":"sui-autocomplete-popper-empty"};
+
+function stringArrToRegExp(keyToTags) {
+    return new RegExp(keyToTags?.join('|') || '', 'g');
+}
+const TAG_TOKEN = 'rc-chip-';
+const DEFAULT_LIMIT_CHIPS$1 = 20;
+const DEFAULT_KEY_TO_CHIPS = [';', ',', '\\n'];
+/** @inner inner hook work with useAutocomplete */
+const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [], onChange: onSelectChange, variant, getOptionLabel = DEFAULT_GET_OPTION_LABEL, onInputChange: onInputChangeProp, freeSolo, multiple, wrapperRef, inputRef, maxFreeSolo = DEFAULT_LIMIT_CHIPS$1, keyToTags = DEFAULT_KEY_TO_CHIPS, onMaxFreeSolo, required, disabled, getStopCreateFreeSolo, onReset, onAddTags, }) => {
+    const isAutocomplete = variant === 'autocomplete';
+    const isSelectedFromAutocompleteRef = useRef(false);
+    const [tags, _setTags] = useControlled({
+        controlled: selectedItemsProp,
+        default: [],
+        name: 'useAutocompleteTag',
+    });
+    const [focused, setFocused] = useState(false);
+    const [focusedIndexRef, setFocusedIndex] = useRefState(0);
+    const freeSoloCount = useMemo(() => tags.filter((x) => x.freeSolo).length, [tags]);
+    const setTags = (_selectedItems) => {
+        _setTags(_selectedItems);
+        onSelectChange?.(_selectedItems);
+        if (isAutocomplete && _selectedItems.length === 1) {
+            const result = getOptionLabel(_selectedItems[0]);
+            onInputChangeProp?.(result);
+            isSelectedFromAutocompleteRef.current = true;
+        }
+    };
+    const _focusTag = (tagToFocus) => {
+        const textFieldElm = wrapperRef?.current;
+        const inputElm = inputRef.current;
+        if (tagToFocus === -1) {
+            inputElm?.focus();
+        }
+        else {
+            textFieldElm
+                ?.querySelector(`[data-tag-index="${tagToFocus}"]`)
+                ?.focus();
+        }
+    };
+    const focusTag = useEventCallback((tagToFocus, focus = true) => {
+        if (focusedIndexRef.current === tagToFocus)
+            return;
+        setFocusedIndex(tagToFocus);
+        if (focus)
+            _focusTag(tagToFocus);
+    });
+    /** when return `true` mean add item success */
+    const checkAndAddFreeSolo = ({ selectedItem, value, } = {}, e) => {
+        let isAddItem = false;
+        const currentValue = value ?? inputRef.current?.value;
+        if (!getStopCreateFreeSolo?.() &&
+            !selectedItem &&
+            freeSolo &&
+            currentValue &&
+            currentValue.length > 0) {
+            if (freeSoloCount < maxFreeSolo) {
+                const items = currentValue
+                    .trim()
+                    .split(stringArrToRegExp(keyToTags))
+                    .filter((x) => x.trim() !== '');
+                const toLength = freeSoloCount + items.length;
+                if (toLength > maxFreeSolo) {
+                    items.splice(-(toLength - maxFreeSolo));
+                    onMaxFreeSolo?.(maxFreeSolo);
+                }
+                if (items.length > 0) {
+                    addTags([
+                        ...tags,
+                        ...items.map((label) => ({
+                            id: uniqueId(TAG_TOKEN),
+                            freeSolo: true,
+                            label,
+                        })),
+                    ]);
+                    isAddItem = true;
+                }
+            }
+            else {
+                onMaxFreeSolo?.(maxFreeSolo);
+            }
+            onReset?.(e);
+        }
+        return isAddItem;
+    };
+    const onInputChange = (e) => {
+        const newValue = e.target['value'];
+        if (stringArrToRegExp(keyToTags).test(newValue || '')) {
+            return checkAndAddFreeSolo({ value: newValue });
+        }
+        return false;
+    };
+    const removeTag = (selectedItem) => {
+        const selectedItemIndex = tags.indexOf(selectedItem);
+        if (selectedItemIndex > -1) {
+            setTags([
+                ...tags.slice(0, selectedItemIndex),
+                ...tags.slice(selectedItemIndex + 1),
+            ]);
+        }
+    };
+    const addTags = (tags) => {
+        setTags(tags);
+        onAddTags?.();
+    };
+    const addTagOnSelect = (selectedItem) => {
+        // * change to uniqueId
+        if (selectedItem.freeSolo) {
+            if (freeSoloCount < maxFreeSolo) {
+                selectedItem.id = uniqueId(TAG_TOKEN);
+            }
+            else {
+                onMaxFreeSolo?.(maxFreeSolo);
+                return;
+            }
+        }
+        if (multiple) {
+            addTags([...tags, selectedItem]);
+        }
+        else {
+            addTags([selectedItem]);
+        }
+    };
+    const { onKeyFocusedIndexHandle: handleTagKey } = useKeyboardMoveFocus({
+        options: tags,
+        focusedIndexRef,
+        infinite: 'order',
+        onFocusedIndexChange: (event, toIndex) => {
+            focusTag(toIndex);
+            event?.preventDefault();
+        },
+    });
+    /**
+     * All Get props methods
+     */
+    const getTagListBoxProps = (props) => {
+        return {
+            'aria-required': required || false,
+            'aria-disabled': disabled || false,
+            // TODO: wait for input can complete that.
+            // 'aria-multiselectable': false,
+            // role: selectedItems.length > 0 ? 'listbox' : undefined,
+            // 'aria-orientation': 'horizontal',
+            ...props,
+        };
+    };
+    const getTagProps = ({ index, selectedItem, ...restTagProps }) => {
+        const tabIndex = 
+        // * when tag is not focus
+        !focused &&
+            // * and is first item
+            index === 0
+            ? 0
+            : -1;
+        return combineProps({
+            tabIndex,
+            // TODO: wait for input can complete that.
+            // role: 'option',
+            role: 'button',
+            key: `${AutocompleteId}-selected-item-${index}`,
+            'data-tag-index': index,
+            'data-item-last': index === tags.length - 1,
+            onClick: (e) => {
+                e.stopPropagation();
+            },
+            onBlur: () => setFocused(false),
+            onFocus: () => {
+                focusTag(index);
+                setFocused(true);
+            },
+            onKeyDown: (e) => {
+                const focusedIndex = focusedIndexRef.current;
+                switch (e.key) {
+                    case 'Backspace':
+                        {
+                            const lengthBeforeDelete = tags.length;
+                            focusTag(
+                            // * when length is 1 mean that will be remove all
+                            lengthBeforeDelete === 1
+                                ? -1
+                                : focusedIndex === 0
+                                    ? 0
+                                    : focusedIndex - 1);
+                            removeTag(selectedItem);
+                        }
+                        break;
+                    case 'Delete':
+                        {
+                            const lengthBeforeDelete = tags.length;
+                            focusTag(
+                            // * when length is 1 mean that will be remove all
+                            lengthBeforeDelete === 1
+                                ? -1
+                                : focusedIndex === tags.length - 1
+                                    ? focusedIndex - 1
+                                    : focusedIndex);
+                            removeTag(selectedItem);
+                        }
+                        break;
+                    default:
+                        handleTagKey(e);
+                        break;
+                }
+            },
+            onDelete: (e) => {
+                // * only allow left button click
+                if (e.button !== 0)
+                    return;
+                removeTag(selectedItem);
+                setFocused(false);
+                inputRef.current?.focus();
+            },
+        }, restTagProps);
+    };
+    return {
+        focused,
+        setFocused,
+        tags,
+        isSelectedFromAutocompleteRef,
+        focusedIndex: focusedIndexRef.current,
+        onInputChange,
+        checkAndAddFreeSolo,
+        getTagListBoxProps,
+        getTagProps,
+        focusTag,
+        addTagOnSelect,
+        clearTags: () => setTags([]),
+        blur: () => {
+            if (focusedIndexRef.current !== -1) {
+                focusTag(-1, false);
+            }
+            setFocused(false);
+        },
+        reset: () => focusTag(-1),
+        focusLast: () => {
+            const currTagsLength = tags.length;
+            if (currTagsLength <= 0)
+                return;
+            focusTag(currTagsLength - 1);
+        },
+    };
+};
+
+const EMPTY_TAG_TOKEN = 'rc-chip-empty';
+const DEFAULT_HIGHLIGHTED_INDEX = -1;
+const DEFAULT_LIMIT_CHIPS = 20;
+const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputValueProp, getOptionLabel = DEFAULT_GET_OPTION_LABEL, keyToTags = DEFAULT_KEY_TO_CHIPS, filterOptions: filterOptionsProp, disabledItemsHighlightable, options, freeSolo, onInputChange: onInputChangeProp, maxFreeSolo = DEFAULT_LIMIT_CHIPS, 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, }) => {
+    const isAutocomplete = variant === 'autocomplete';
+    const autoCompleteSelectedIndexRef = useRef(DEFAULT_HIGHLIGHTED_INDEX);
+    const AutocompleteId = useId('Autocomplete', true);
+    const [inputFocused, setInputFocused] = useControlled({
+        controlled: focused,
+        default: false,
+        name: 'useAutocomplete',
+    });
+    const [isOpen, setIsOpen] = useControlled({
+        controlled: openProp,
+        default: initialIsOpen || false,
+        name: 'useAutocomplete',
+    });
+    const isInputValueChangedRef = useRef(false);
+    const isCompositionRef = useRef(false);
+    const noOptionItemRef = useRef(null);
+    const stopAutoSelectRef = useRef(false);
+    const fromPasteString = useRef('');
+    const keepHighlightedIndexRef = useRef(false);
+    const popperElementRef = useRef(null);
+    const { sleep, getSleeping } = useSleep();
+    // * when that is autocomplete, that will never be multiple
+    const multiple = isAutocomplete ? false : multipleProp;
+    const inputContainerScrollToBottom = () => {
+        requestAnimationFrame(() => {
+            const inputContainer = inputContainerRef?.current;
+            if (inputContainer) {
+                inputContainer.scrollTop = inputContainer.scrollHeight;
+            }
+        });
+    };
+    const { isSelectedFromAutocompleteRef, tags, focused: tagFocused, addTagOnSelect, checkAndAddFreeSolo, focusedIndex: focusedTagIndex, focusTag, focusLast: focusLastTag, clearTags, blur: blurTags, getTagProps, getTagListBoxProps, } = useAutocompleteTag({
+        id: AutocompleteId,
+        value: selectedItemsProp,
+        onChange: onSelectChange,
+        getOptionLabel,
+        onInputChange: onInputChangeProp,
+        variant,
+        wrapperRef,
+        inputRef,
+        freeSolo,
+        maxFreeSolo,
+        keyToTags,
+        onMaxFreeSolo,
+        multiple,
+        required,
+        disabled,
+        // * when is composition, stop freeSolo create new item
+        getStopCreateFreeSolo: () => isCompositionRef.current,
+        onReset: () => {
+            resetState();
+        },
+        onAddTags: inputContainerScrollToBottom,
+    });
+    const processFilteredResult = useCallback((results, inputValue = '') => {
+        const getInputValueAsItem = () => {
+            const label = inputValue.trim();
+            if (label.length > 0) {
+                return {
+                    id: EMPTY_TAG_TOKEN,
+                    freeSolo: true,
+                    label,
+                };
+            }
+            return null;
+        };
+        // * only when isOpen calculate the filtered result
+        noOptionItemRef.current = null;
+        if (addNoOptionItem) {
+            const item = getInputValueAsItem();
+            noOptionItemRef.current = item;
+            if (item && freeSolo) {
+                switch (addNoOptionItem) {
+                    case 'first':
+                        return [item, ...results];
+                    case 'last':
+                        return [...results, item];
+                }
+            }
+        }
+        else if (results.length === 0) {
+            const item = getInputValueAsItem();
+            noOptionItemRef.current = item;
+            // * only when not set render no options will auto add item
+            if (item && freeSolo && !renderNoOptions) {
+                // * when outside not use filter, that will be original array, must use spread
+                return [...results, item];
+            }
+        }
+        return results;
+    }, [addNoOptionItem, freeSolo, renderNoOptions]);
+    const filterOptions = useCallback((items, state) => {
+        if (filterOptionsProp) {
+            return filterOptionsProp(items, {
+                ...state,
+                inputChanged: isInputValueChangedRef.current,
+                selectedItems: tags,
+            });
+        }
+        return items;
+    }, [filterOptionsProp, tags]);
+    const { inputValue, optionItems, optionsGroupList, highlightedIndexRef, changeHighlightedIndexReasonRef, forceUpdate, selectItem, handleF10KeyDown, onKeyFocusedIndexHandle, setHighlightedIndex, updateInputValue, clearInput, getNextFocusableOption, getItemProps: getSuggestionListItemProps, focusInput, reset: resetSuggestionList, getInputProps: getSuggestionListInputProps, getInputAriaProps: getSuggestionListInputAriaProps, getClearButtonProps: getSuggestionListClearButtonProps, getLabelProps, getSuggestionListProps, } = useSuggestionList({
+        id: AutocompleteId,
+        inputRef,
+        inputValue: inputValueProp,
+        options,
+        disabledItemsHighlightable,
+        groupVariant,
+        groupExpanded,
+        groupDefaultExpanded,
+        getOptionLabel,
+        filterOptions,
+        processFilteredResult,
+        onInputChange: onInputChangeProp,
+        onKeyDown: onKeyDownProp,
+        onClear,
+        getOptionDisabled,
+        groupBy,
+        onGroupExpanded,
+        getExpandIconProps,
+        onSelect: (e, selectedItem) => {
+            addTagOnSelect(selectedItem);
+            resetState(e);
+            if (disableCloseOnSelect) {
+                if (autoHighlight) {
+                    const currIndex = highlightedIndexRef.current;
+                    const nextValidIndex = getNextFocusableOption();
+                    const 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;
+                }
+            }
+        },
+    });
+    const getItemProps = (props) => {
+        return combineProps(getSuggestionListItemProps(props), {
+            onMouseDown: (e) => {
+                // `getPopperProps` will prevent change focus when mouse down popper
+                // but suggestion item is an exception.
+                // so we need stop propagation to make sure focus can be changed
+                e.stopPropagation();
+            },
+            onMouseUp: (e) => {
+                focusInput();
+            },
+        });
+    };
+    const readOnly = !isAutocomplete && !multiple && tags.length >= 1 ? true : undefined;
+    const closeMenu = (e, reason) => {
+        keepHighlightedIndexRef.current = false;
+        isInputValueChangedRef.current = false;
+        // * set to default highlighted
+        setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
+        if (isOpen) {
+            if (e && reason) {
+                onClose?.(e, reason);
+            }
+            setIsOpen(false);
+        }
+    };
+    const openMenu = (e) => {
+        if (!isOpen) {
+            if (e)
+                onOpen?.(e);
+            setIsOpen(true);
+        }
+    };
+    const toggleMenu = (e, focus = true) => {
+        if (isOpen) {
+            closeMenu(e, 'toggleInput');
+        }
+        else {
+            openMenu(e);
+            if (focus)
+                focusInput();
+        }
+    };
+    const handleInputChange = (newValue, open = true, e) => {
+        if (inputValue !== newValue) {
+            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())) {
+                const resultHaveAdd = checkAndAddFreeSolo({ value: newValue }, e);
+                if (!disableCloseOnSelect) {
+                    closeMenu(e, 'toggleInput');
+                }
+                else if (open) {
+                    openMenu(e);
+                }
+                return resultHaveAdd;
+            }
+            updateInputValue(newValue);
+        }
+        if (open)
+            openMenu(e);
+        return false;
+    };
+    const resetState = (e) => {
+        // * when autocomplete select mode not reset input value
+        if (!isSelectedFromAutocompleteRef.current) {
+            clearInput();
+        }
+        blurTags();
+        isSelectedFromAutocompleteRef.current = false;
+        noOptionItemRef.current = null;
+        isInputValueChangedRef.current = false;
+        if (!disableCloseOnSelect) {
+            closeMenu(e, 'select-option');
+        }
+    };
+    const reset = (isFocus) => {
+        resetState();
+        onSelectChange?.([]);
+        resetSuggestionList(isFocus);
+    };
+    const keepHighlightedIndex = () => {
+        keepHighlightedIndexRef.current = true;
+    };
+    // * when outside options props props change also need set highlightedIndex to default
+    useChange(() => {
+        const shouldResetHighlightedIndex = !keepHighlightedIndexRef.current;
+        if (options !== undefined && shouldResetHighlightedIndex) {
+            setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
+        }
+    }, () => options);
+    // * check that defaultHighlightedIndex
+    const defaultHighlightedIndex = useMemo(() => {
+        return autoHighlight ? getNextFocusableOption(0) : -1;
+    }, [autoHighlight, getNextFocusableOption]);
+    // * only when menu is open set to defaultHighlightedIndex
+    if (isOpen) {
+        if (highlightedIndexRef.current === DEFAULT_HIGHLIGHTED_INDEX) {
+            let toIndex = defaultHighlightedIndex;
+            if (isAutocomplete && tags.length === 1) {
+                const itemText = getOptionLabel(tags[0]);
+                const fIndex = optionItems.findIndex((x) => getOptionLabel(x) === itemText);
+                if (fIndex > -1) {
+                    toIndex = fIndex;
+                    autoCompleteSelectedIndexRef.current = fIndex;
+                }
+            }
+            setHighlightedIndex(toIndex, { reason: 'auto' });
+        }
+        else {
+            const currIndex = highlightedIndexRef.current;
+            const availableIndex = getNextFocusableOption(currIndex);
+            if (currIndex !== availableIndex) {
+                requestAnimationFrame(() => {
+                    setHighlightedIndex(availableIndex, {
+                        reason: 'auto',
+                        reRender: true,
+                    });
+                });
+            }
+        }
+    }
+    const handleAutocompleteText = () => {
+        if (isAutocomplete && tags.length > 0) {
+            const result = getOptionLabel(tags[0]);
+            onInputChangeProp?.(result);
+        }
+    };
+    // * use force update to sync open state when init is open
+    useLayoutEffect(() => {
+        if (isOpen) {
+            forceUpdate();
+        }
+        handleAutocompleteText();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const getInputProps = (props) => {
+        const suggestionListInputProps = getSuggestionListInputProps(props);
+        return combineProps({
+            ...suggestionListInputProps,
+            onPaste: (e) => {
+                if (freeSolo) {
+                    const clipboardData = e.clipboardData;
+                    const { position } = getSelectionPosition(inputRef);
+                    const currText = inputValue ?? '';
+                    const pasteText = clipboardData.getData('Text') ?? '';
+                    // * because input can't get next line char(\n), we need get that value in onPaste
+                    // * get current input result use paste
+                    // * remember combine current input value, that will be use in onChange
+                    fromPasteString.current =
+                        currText.slice(0, position.start) +
+                            pasteText +
+                            currText.slice(position.end);
+                }
+            },
+            onChange: (e) => {
+                const changeValue = fromPasteString.current || e.target.value;
+                handleInputChange(changeValue, undefined, e);
+                // * when input value clear all, clear selected item
+                if (isAutocomplete && changeValue.length === 0) {
+                    clearTags();
+                }
+                fromPasteString.current = '';
+                isInputValueChangedRef.current = true;
+            },
+            onFocus: (e) => {
+                setInputFocused(true);
+                if (openOnFocus)
+                    openMenu(e);
+                // * when autocomplete mode, always select all text when focus
+                if (isAutocomplete) {
+                    inputRef.current?.select();
+                }
+                // * reset stopAutoSelect in focus input
+                stopAutoSelectRef.current = false;
+                blurTags();
+            },
+            onBlur: (e) => {
+                setInputFocused(false);
+                // mouse down suggestion item will change focus,
+                // but we don't want to close popper in this case
+                if (popperElementRef.current?.contains(e.relatedTarget))
+                    return;
+                if (autoSelect && !stopAutoSelectRef.current) {
+                    if (!freeSolo)
+                        selectItem(e, optionItems[highlightedIndexRef.current]);
+                    checkAndAddFreeSolo({}, e);
+                }
+                // * when blur should restore text when have selected item
+                handleAutocompleteText();
+                closeMenu(e, 'blur');
+            },
+            onCompositionStart: () => {
+                isCompositionRef.current = true;
+            },
+            onCompositionEnd: async () => {
+                // sleep for prevent tab in composition
+                await sleep(20);
+                isCompositionRef.current = false;
+            },
+            onKeyDown: (e) => {
+                keepHighlightedIndexRef.current = false;
+                onKeyDownProp?.(e, highlightedIndexRef.current);
+                const { isSelectRange, position } = getSelectionPosition(inputRef);
+                const currTagsLength = tags.length;
+                if (!isSelectRange &&
+                    position.start === 0 &&
+                    currTagsLength > 0 &&
+                    e.key === 'Backspace') {
+                    stopAutoSelectRef.current = true;
+                    focusLastTag();
+                }
+                else {
+                    const highlightedIndex = highlightedIndexRef.current;
+                    switch (e.key) {
+                        case 'Escape':
+                            if (isOpen) {
+                                // Avoid Opera to exit fullscreen mode.
+                                e.preventDefault();
+                                // Avoid the Modal to handle the event.
+                                e.stopPropagation();
+                                closeMenu(e, 'escape');
+                            }
+                            break;
+                        case 'Tab':
+                            if (e.which === 229)
+                                return;
+                            if (getSleeping()) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                return;
+                            }
+                            // * when shift+ tab also not need autoSelect
+                            if (e.shiftKey && currTagsLength > 0) {
+                                stopAutoSelectRef.current = true;
+                            }
+                            // ! [Browser] when in composition,
+                            // ! and keydown 'Tab' that will trigger twice keydown,
+                            // ! must check is that is not in composition mode
+                            if (!e.shiftKey && !isCompositionRef.current) {
+                                const currentHighlightItem = optionItems[highlightedIndex];
+                                if (isOpen && currentHighlightItem) {
+                                    if (selectItem(e, currentHighlightItem)) {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                    }
+                                }
+                                else if (checkAndAddFreeSolo({}, e)) {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }
+                            }
+                            break;
+                        case 'Enter':
+                            if (e.which === 229)
+                                return;
+                            if (freeSolo &&
+                                highlightedIndex === DEFAULT_HIGHLIGHTED_INDEX &&
+                                checkAndAddFreeSolo({
+                                    selectedItem: isOpen
+                                        ? optionItems[highlightedIndex]
+                                        : undefined,
+                                }, e)) {
+                                e.stopPropagation();
+                                closeMenu(e, 'select-option');
+                            }
+                            else if (highlightedIndex !== DEFAULT_HIGHLIGHTED_INDEX &&
+                                isOpen &&
+                                !isCompositionRef.current) {
+                                selectItem(e, optionItems[highlightedIndex]);
+                                e.stopPropagation();
+                            }
+                            // always preventDefault for not inset all enter into textarea
+                            e.preventDefault();
+                            break;
+                        case 'F10':
+                            handleF10KeyDown(e);
+                            break;
+                        case 'ArrowUp':
+                        case 'ArrowDown':
+                            if (readOnly) {
+                                e.preventDefault();
+                                return;
+                            }
+                            // * check state for is that should move key in option items
+                            if (isAutocomplete && tags.length > 0 && !isOpen) {
+                                openMenu(e);
+                                e.preventDefault();
+                                break;
+                            }
+                            onKeyFocusedIndexHandle(e);
+                            openMenu(e);
+                            break;
+                        default:
+                            if (isOpen) {
+                                onKeyFocusedIndexHandle(e);
+                            }
+                            break;
+                    }
+                }
+            },
+            onMouseDown: toggleWithInput
+                ? (e) => {
+                    /**
+                     * If the popup isn't open and `openOnFocus` is disabled we should
+                     * show the popup. If `openOnFocus` is enabled the `onFocus` handler
+                     * will take care of opening the popup when necessary.
+                     *
+                     * If the popup is open and the user hasn't typed a value we should
+                     * hide it, but if they have typed a value we shouldn't hide it to
+                     * ensure the the available results remain visible to the user.
+                     */
+                    if (!isOpen || (isOpen && !inputValue)) {
+                        toggleMenu(e, false);
+                    }
+                }
+                : undefined,
+        }, props);
+    };
+    const getInputAriaProps = (props) => {
+        const suggestionListInputAriaProps = getSuggestionListInputAriaProps(props);
+        return combineProps({
+            ...suggestionListInputAriaProps,
+            readOnly,
+            unselectable: readOnly ? 'on' : undefined,
+            'aria-owns': isOpen
+                ? suggestionListInputAriaProps['aria-owns']
+                : undefined,
+            'aria-expanded': !!isOpen,
+        }, props);
+    };
+    const getPopperProps = (restPopperProps) => {
+        return combineProps({
+            id: `${AutocompleteId}-popper`,
+            role: 'presentation',
+            onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            },
+        }, restPopperProps);
+    };
+    const getToggleButtonProps = (props) => {
+        return combineProps({
+            disabled: (!isOpen && optionItems.length === 0) || disabled || readOnly,
+            id: `${AutocompleteId}-toggle-button`,
+            onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            },
+            onClick: toggleMenu,
+            tabIndex: -1,
+        }, props);
+    };
+    const getClearButtonProps = (props) => {
+        const suggestionListClearButtonProps = getSuggestionListClearButtonProps(props);
+        return combineProps({
+            ...suggestionListClearButtonProps,
+            disabled,
+            onClick: (e) => {
+                onClear?.(e);
+                reset(true);
+            },
+        }, props);
+    };
+    const getNoOptionsProps = (additionProps) => {
+        return combineProps({
+            onClick: (e) => {
+                closeMenu(e, 'blur');
+            },
+            role: 'presentation',
+        }, additionProps);
+    };
+    return {
+        focusInput,
+        readOnly,
+        getTagProps,
+        getClearButtonProps,
+        activeIndex: focusedTagIndex,
+        setActiveIndex: focusTag,
+        isOpen,
+        getToggleButtonProps,
+        getPopperProps,
+        getLabelProps,
+        getSuggestionListProps,
+        getInputProps,
+        getInputAriaProps,
+        getTagListBoxProps,
+        getItemProps,
+        getNoOptionsProps,
+        noOptionItem: noOptionItemRef.current,
+        highlightedIndex: highlightedIndexRef.current,
+        tags,
+        optionItems,
+        inputValue,
+        onInputChange: handleInputChange,
+        keepHighlightedIndex,
+        isKeepHighlightedIndex: keepHighlightedIndexRef.current,
+        setHighlightedIndex,
+        changeHighlightedIndexReason: changeHighlightedIndexReasonRef.current,
+        closeMenu,
+        openMenu,
+        reset,
+        forceUpdate,
+        optionsGroupList,
+        /** that state of current Autocomplete focused, both tag or input focused */
+        focused: focused ?? (tagFocused || inputFocused ? true : undefined),
+        id: AutocompleteId,
+        inputChanged: isInputValueChangedRef.current,
+        autoCompleteSelectedIndex: autoCompleteSelectedIndexRef.current,
+        popperElementRef,
+    };
+};
+
+const ChipSizeMap = {
+    xlarge: 'large',
+    large: 'medium',
+    medium: 'small',
+};
+const InputComponent = forwardRef(({ startAdornment, containerRef, containerClassName, onContainerClick, ...rest }, ref) => {
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    jsxs("div", { ref: containerRef, className: containerClassName, onClick: onContainerClick, children: [startAdornment, jsx("input", { ...rest, ref: ref })] }));
+});
+const TextInput = forwardRef(({ renderInput, ...rest }, ref) => {
+    if (renderInput) {
+        return renderInput({ ...rest, ref });
+    }
+    return jsx(TextField, { ref: ref, ...rest });
+});
+const Autocomplete = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Autocomplete' });
+    const isAutocomplete = props.variant === 'autocomplete';
+    const { inputVariant = 'standard', variant, groupExpanded, onGroupExpanded, groupDefaultExpanded, groupVariant = 'normal', getExpandIconProps, groupBy, value: valueProp, autoHighlight = true, clearBtn = false, toggleButton = false, multiple = false, ClearButtonProps, onClear, ToggleButtonProps, getToggleButtonProps: getToggleButtonPropsProp, inputValue: inputValueProp, onKeyDown: onKeyDownProp, helperText: helperTextProp, options, openOnFocus = true, toggleWithInput = true, getOptionLabel = DEFAULT_GET_OPTION_LABEL, renderInput, label, inputRef: inputRefProp, error, placeholder, showPlaceholderWithTags, freeSolo, keyToTags = DEFAULT_KEY_TO_CHIPS, maxFreeSolo, SuggestionListProps: { virtualize = true, ...SuggestionListProps } = {}, autoSelect, PopperComponent = Popper, PopperProps: { anchorElType = 'root', 
+    // transition: popperTransition,
+    // TransitionComponent = virtualize ? RcFade : RcGrow,
+    // transitionDuration: transitionDurationProp = 'auto',
+    // TransitionProps: TransitionPropsProp = {},
+    ...PopperProps } = {}, initialIsOpen, disabled, required: requiredProp, disableCloseOnSelect = multiple, onChange: onChangeProp, onInputChange: onInputChangeProp, onMaxFreeSolo, FormHelperTextProps, action, filterOptions, renderOption, renderTags, getOptionDisabled, renderGroup, renderNoOptions, inputProps, 
+    // InputProps: InputPropsProp,
+    debug, disabledItemsHighlightable, open: openProp, addNoOptionItem, onOpen, onClose, focused, classes, className, fullWidth = true, size = 'xlarge', ...rest } = props;
+    const cls = useClasses('autocomplete', classes, className);
+    const innerInputRef = useRef(null);
+    const textFieldRef = useRef(null);
+    const inputRef = useForkRef(inputRefProp, innerInputRef);
+    const formFieldContentRef = useRef(null);
+    const inputContainerRef = useRef(null);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const anchorElRef = anchorElType === 'input' ? formFieldContentRef : textFieldRef;
+    let oneOfTagError = false;
+    const required = requiredProp;
+    const { focusInput, optionItems, optionsGroupList, tags: selectedItems, highlightedIndex, getToggleButtonProps, getTagProps, getTagListBoxProps, getSuggestionListProps, getPopperProps, getInputProps, getInputAriaProps, 
+    // getLabelProps,
+    getItemProps, isOpen, inputValue, activeIndex, setActiveIndex, setHighlightedIndex, onInputChange, keepHighlightedIndex, changeHighlightedIndexReason, closeMenu, openMenu, reset, getClearButtonProps, noOptionItem, getNoOptionsProps, isKeepHighlightedIndex, 
+    // focused: isAutocompleteFocused,
+    // autoCompleteSelectedIndex,
+    popperElementRef, } = useAutocomplete({
+        focused,
+        open: openProp,
+        addNoOptionItem,
+        variant,
+        onOpen,
+        onClose,
+        wrapperRef: textFieldRef,
+        inputContainerRef,
+        inputRef: innerInputRef,
+        value: valueProp,
+        inputValue: inputValueProp,
+        getOptionDisabled,
+        groupExpanded: groupVariant === 'normal' ? true : groupExpanded,
+        groupDefaultExpanded,
+        getExpandIconProps,
+        options,
+        freeSolo,
+        multiple,
+        keyToTags,
+        maxFreeSolo,
+        autoSelect,
+        disableCloseOnSelect,
+        initialIsOpen,
+        disabled,
+        required,
+        openOnFocus,
+        toggleWithInput,
+        autoHighlight,
+        groupBy,
+        groupVariant,
+        onChange: onChangeProp,
+        onInputChange: onInputChangeProp,
+        getOptionLabel,
+        filterOptions,
+        onMaxFreeSolo,
+        renderNoOptions,
+        onKeyDown: onKeyDownProp,
+        disabledItemsHighlightable,
+        onGroupExpanded,
+    });
+    const open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
+    const { onBlur, ...InputProps } = getInputProps(inputProps);
+    const helperText = helperTextProp;
+    const toTextFieldRef = useForkRef(textFieldRef, ref);
+    const startAdornment = (() => {
+        if (isAutocomplete || selectedItems.length === 0) {
+            return undefined;
+        }
+        const getCustomizedTagProps = (selectedItem, index) => {
+            const tagProps = getTagProps({
+                selectedItem,
+                index,
+                label: getOptionLabel(selectedItem),
+                disabled,
+            });
+            if (selectedItem.error) {
+                oneOfTagError = true;
+            }
+            return { ...tagProps, size: ChipSizeMap[size], className: cls('chip') };
+        };
+        return renderTags
+            ? renderTags(selectedItems, getCustomizedTagProps)
+            : selectedItems.map((selectedItem, index) => {
+                const { children, key, ...itemChipProps } = getCustomizedTagProps(selectedItem, index);
+                return (jsx(Chip, { "aria-label": `${itemChipProps.label}, press Backspace to remove`, color: selectedItem.error ? 'error' : undefined, ...itemChipProps }, key));
+            });
+    })();
+    const endAdornment = (toggleButton || clearBtn) && (jsxs(Fragment, { children: [clearBtn && (selectedItems.length > 0 || inputValue) && (jsx(IconButton, { shape: 'squircle', background: false, color: 'secondary', variant: "contained", size: "small", className: cls('clear'), symbol: Xsm, ...getClearButtonProps(ClearButtonProps) })), toggleButton && (jsx(IconButton, { "aria-hidden": true, tabIndex: -1, shape: 'squircle', color: 'secondary', background: false, variant: "contained", size: "small", className: cls('chevron', error && 'error-chevron', open && `${inputVariant}-expanded-chevron`), children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }), ...getToggleButtonProps({
+                    ...ToggleButtonProps,
+                    ...getToggleButtonPropsProp?.(open),
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                }) }))] }));
+    const TextFieldInputProps = {
+        'aria-label': typeof label === 'string' ? label : undefined,
+        ...getTagListBoxProps(),
+        ...InputProps,
+        onBlur: debug ? undefined : onBlur,
+    };
+    useImperativeHandle(action, () => ({
+        getActiveIndex: () => activeIndex,
+        setActiveIndex,
+        getFilterResultItems: () => optionItems,
+        getHighlightedIndex: () => highlightedIndex,
+        setHighlightedIndex: (index) => setHighlightedIndex(index, { reason: 'auto', reRender: true }),
+        closeMenu,
+        openMenu,
+        reset,
+        clearInput: () => onInputChange('', false),
+        keepHighlightedIndex: () => keepHighlightedIndex(),
+        focus: focusInput,
+    }));
+    const hasTags = selectedItems.length > 0;
+    const willRenderNoOptions = !!noOptionItem && !!renderNoOptions;
+    // const popperRef: ComponentProps<typeof StyledPopper>['popperRef'] =
+    //   useRef(null);
+    // const handleUpdatePopper = useEventCallback(() => {
+    //   popperRef.current?.update();
+    // });
+    const menuChildren = 
+    // * that root element for animation host
+    isOpen && (jsxs(Fragment, { children: [jsx(SuggestionList
+            // TODO: deprecated, need to check if it will cause error when variant is 'autocomplete'
+            // selectedIndex={isAutocomplete ? autoCompleteSelectedIndex : undefined}
+            , { 
+                // TODO: deprecated, need to check if it will cause error when variant is 'autocomplete'
+                // selectedIndex={isAutocomplete ? autoCompleteSelectedIndex : undefined}
+                highlightedIndex: highlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getSuggestionListProps: getSuggestionListProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, 
+                // onContainerHeightChange={handleUpdatePopper}
+                maxContainerHeight: 180, getOptionLabel: getOptionLabel, position: "unset", virtualize: virtualize, ...SuggestionListProps }), willRenderNoOptions &&
+                renderNoOptions?.(getNoOptionsProps, noOptionItem)] }));
+    const isPopperContentEmpty = !isOpen || (!willRenderNoOptions && optionItems.length === 0);
+    const popperCls = useClasses('autocomplete-popper', PopperProps?.classes, PopperProps?.className);
+    return (jsxs(Fragment, { children: [jsx(TextInput, { renderInput: renderInput, 
+                // hasTags={hasTags}
+                variant: inputVariant, ref: toTextFieldRef, inputRef: inputRef, fullWidth: fullWidth, placeholder: !hasTags || (hasTags && multiple && showPlaceholderWithTags)
+                    ? placeholder
+                    : undefined, label: label, disabled: disabled, required: required, 
+                // * if below one of tag is error, that main Autocomplete default will be error
+                error: error ?? oneOfTagError, FormHelperTextProps: FormHelperTextProps, inputComponent: InputComponent, endAdornment: endAdornment, helperText: helperText, size: size, ...combineProps({
+                    RootProps: {
+                        contentRef: formFieldContentRef,
+                    },
+                    inputProps: {
+                        startAdornment,
+                        containerRef: inputContainerRef,
+                        ...getInputAriaProps(),
+                        ...TextFieldInputProps,
+                        containerClassName: clsx(cls('input-container', `input-container-${size}`, `${inputVariant}-input-container`), TextFieldInputProps?.containerClassName),
+                    },
+                }, rest), classes: {
+                    root: cls('root', { error }),
+                    formFieldContent: cls('form-field-content', `${inputVariant}-form-field-content`, `form-field-content-${size}`, open && `${inputVariant}-expanded`, { expanded: open }),
+                    standard: cls('standard'),
+                    outlined: cls('outlined'),
+                    endAdornment: cls('end-adornment'),
+                    input: cls('input', `input-${size}`),
+                }, value: inputValue, clearBtn: false }), jsx(AnimatePresence, { children: open && (jsx(PopperComponent, { matchAnchorWidth: true, offset: 4, ...getPopperProps(PopperProps), className: popperCls('root'), ref: popperElementRef, anchorEl: anchorElRef.current, children: jsx(motion.div, { ...getFade({ prefersReducedMotion }), className: popperCls('paper', {
+                            empty: isPopperContentEmpty,
+                        }), children: menuChildren }) })) })] }));
+});
+Autocomplete.displayName = 'SuiAutocomplete';
+/**
+ * default Autocomplete filter options method, use with `variant="tags"`
+ *
+ * - filter options by input value and selected items
+ */
+const RcAutocompleteDefaultFilterOptions = (options, { inputValue, getOptionLabel, selectedItems }) => {
+    return options.filter((item) => selectedItems.indexOf(item) < 0 &&
+        getOptionLabel?.(item)
+            .toLowerCase()
+            .startsWith(inputValue?.toLowerCase() || ''));
+};
+
+export { Autocomplete, DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, RcAutocompleteDefaultFilterOptions, SuggestionList, SuggestionListItem, Autocomplete$1 as autocompleteStyles, stringArrToRegExp, SuggestionList$1 as suggestionListStyles, useAutocomplete, useAutocompleteGroup, useAutocompleteTag, useDynamicHeight, useHighlightScroll, useSuggestionList };