@ringcentral/spring-ui 1.7.0 → 1.8.0

package/Autocomplete.js

@@ -2,12 +2,12 @@ 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 { usePrevious, useWindowContext, useRefState, useEventCallback, logInDev, combineProps, useDepsChange, useControlled, useId, useForceUpdate, useKeyboardMoveFocus, useForkRef, useSleep, useRetry, useChange, getSelectionPosition, useClasses } from '@ringcentral/spring-base';
+import { useClassesWithMode, 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 { I as IconButton } from './chunks/IconButtonLabel.js';
 import { Xsm } from '@ringcentral/spring-icon';
 import { u as usePrefersReducedMotion } from './chunks/usePrefersReducedMotion.js';
 import { g as getFade } from './chunks/getFade.js';
@@ -28,11 +28,11 @@ 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"};
+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","sui-compact":"sui-compact"};
 
 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 { id, label, children, disabled, isGroupTitle = false, isTitleMode = false, highlighted = false, selected = false, expanded = false, expandIconProps, classes, className, role, ...rest } = props;
+    const cls = useClassesWithMode('suggestion-list', classes, className, ['item']);
     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', {
@@ -42,24 +42,23 @@ const SuggestionListItem = forwardRef((props, ref) => {
             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 }) }))] }));
+        }), children: [label || children, expandIconProps && (jsx(IconButton, { "aria-hidden": "true", role: "presentation", tabIndex: -1, component: "div", shape: 'squircle', background: false, color: 'secondary', variant: "contained", size: "small", ...expandIconProps, children: jsx(ExpandCollapseCaret, { expanded: expanded }) }))] }));
 });
 
-/**
- * auto calculate container height
- */
+const isFirstInGroup = (option) => {
+    return option === option?.group?.options[0];
+};
+
 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;
         }
     }
@@ -87,16 +86,16 @@ const useDynamicHeight = ({ itemCount, maxContainerHeight, onContainerHeightChan
     };
 };
 
-/**
- * scroll into current highlight index
- */
 function useHighlightScroll({ containerHeighRef, scrollToIndex, }) {
+    const { externalWindow } = useWindowContext();
     const renderedItemsRef = useRef([]);
     const scrollerRef = useRef();
     const scrollToHighlightedIndex = (prevHighlightedIndex, currHighlightedIndex, topHighlightIndex = 0) => {
+        const needsScrollReset = prevHighlightedIndex === -1;
         if (!scrollerRef.current) {
             if (currHighlightedIndex !== topHighlightIndex) {
-                requestAnimationFrame(() => {
+                const win = externalWindow || window;
+                win.requestAnimationFrame(() => {
                     scrollToIndex({
                         index: currHighlightedIndex,
                         align: 'start',
@@ -107,26 +106,28 @@ function useHighlightScroll({ containerHeighRef, scrollToIndex, }) {
         }
         const scrollElm = scrollerRef.current;
         const renderedItems = renderedItemsRef.current;
-        const isBackward = prevHighlightedIndex > currHighlightedIndex;
-        const isForward = prevHighlightedIndex < currHighlightedIndex;
+        const lastHighlightedIndex = needsScrollReset
+            ? currHighlightedIndex
+            : prevHighlightedIndex;
+        const isBackward = lastHighlightedIndex > currHighlightedIndex;
+        const isForward = lastHighlightedIndex < 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)) {
+        const isInRenderedRange = renderedItems.some((x) => x.index === currHighlightedIndex);
+        if (!isInRenderedRange) {
             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) {
+                if (item.offset < currentVisibleOffset.start) {
                     break;
                 }
                 firstShouldScrollIndex = item.index;
@@ -137,18 +138,18 @@ function useHighlightScroll({ containerHeighRef, scrollToIndex, }) {
                     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) {
+                const itemBottom = item.offset + item.size;
+                if (itemBottom >= currentVisibleOffset.stop) {
                     break;
                 }
                 lastShouldScrollIndex = item.index;
             }
-            if (currHighlightedIndex >= lastShouldScrollIndex) {
+            if (currHighlightedIndex > lastShouldScrollIndex) {
                 scrollToIndex({
                     index: currHighlightedIndex,
                     align: 'end',
@@ -156,31 +157,45 @@ function useHighlightScroll({ containerHeighRef, scrollToIndex, }) {
             }
         }
         else {
-            scrollToIndex({
-                index: currHighlightedIndex,
-                align: 'start',
-            });
+            const currentItem = renderedItems.find((item) => item.index === currHighlightedIndex);
+            if (needsScrollReset) {
+                if (currHighlightedIndex === topHighlightIndex) {
+                    if (scrollerRef.current) {
+                        scrollerRef.current.scrollTop = 0;
+                    }
+                    return;
+                }
+                else {
+                    scrollToIndex({
+                        index: currHighlightedIndex,
+                        align: 'start',
+                    });
+                    return;
+                }
+            }
+            if (!currentItem) {
+                scrollToIndex({
+                    index: currHighlightedIndex,
+                    align: 'start',
+                });
+                return;
+            }
+            const itemBottom = currentItem.offset + currentItem.size;
+            const isTopVisible = currentItem.offset >= currentVisibleOffset.start;
+            const isBottomVisible = itemBottom < currentVisibleOffset.stop;
+            const isFullyVisible = isTopVisible && isBottomVisible;
+            if (!isFullyVisible) {
+                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),
     };
 }
@@ -216,11 +231,9 @@ const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconP
         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 = [];
@@ -274,11 +287,8 @@ const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconP
                     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);
@@ -319,7 +329,6 @@ const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconP
         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);
@@ -351,10 +360,8 @@ const isItemCanSelected = (item) => {
 };
 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 defaultIsOptionEqualToValue = (option, value) => option === value;
+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, isOptionEqualToValue = defaultIsOptionEqualToValue, }) => {
     const isTitleMode = groupVariant === 'normal';
     const [inputValue, setInputValue] = useControlled({
         controlled: inputValueProp,
@@ -376,12 +383,12 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
                 inputValue,
                 getOptionLabel,
                 selectedItems: [],
+                isOptionEqualToValue,
             });
         }
         return items;
-    }, [filterOptions, getOptionLabel, inputValue]);
+    }, [filterOptions, getOptionLabel, inputValue, isOptionEqualToValue]);
     const filteredResult = useMemo(() => {
-        // * only when isOpen calculate the filtered result
         let results = getFilteredItems(options);
         results = processFilteredResult
             ? processFilteredResult(results, inputValue)
@@ -454,7 +461,7 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
     });
     const getItemProps = ({ item, index = 0, }) => {
         const currGroup = item.group;
-        const isGroupTitle = item === currGroup?.options[0];
+        const isItemFirstInGroup = isFirstInGroup(item);
         const itemCount = optionItems.length;
         const groupOrder = currGroup?.order || 0;
         const stringId = toOptionIdString(item.id);
@@ -469,8 +476,7 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
                     setHighlightedIndex(index, { reason: 'mouse', reRender: true });
                 }
             },
-            // When title mode and is title, skip that posinset
-            ...(isTitleMode && isGroupTitle
+            ...(isTitleMode && isItemFirstInGroup
                 ? {}
                 : {
                     role: 'option',
@@ -509,9 +515,8 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
                             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 isCurrOptionFirstInGroup = isFirstInGroup(currOption);
+                            if (isCurrOptionFirstInGroup) {
                                 const { onClick } = currOption.group.getExpandIconProps();
                                 onClick?.(e);
                             }
@@ -520,7 +525,6 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
                             }
                             e.stopPropagation();
                         }
-                        // always preventDefault for not inset all enter into textarea
                         e.preventDefault();
                         break;
                     }
@@ -597,30 +601,53 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
         changeHighlightedIndexReasonRef,
         changeHighlightedIndexReason: changeHighlightedIndexReasonRef.current,
         optionsGroupList,
-        /** current unique id */
         id: currUniqueId,
         getNextFocusableOption,
         handleF10KeyDown,
     };
 };
 
+const DEFAULT_PADDING = 8;
+const getPaddingValue = (padding, itemCount) => {
+    if (itemCount === 0) {
+        return 0;
+    }
+    if (padding === false) {
+        return 0;
+    }
+    if (padding === true) {
+        return DEFAULT_PADDING;
+    }
+    if (typeof padding === 'number') {
+        return Math.max(0, padding);
+    }
+    return DEFAULT_PADDING;
+};
 const List = forwardRef((props, ref) => {
-    const { className, context } = props;
+    const { className, context, style, ...restProps } = props;
     const listRef = context?.listRef;
     const rootClass = context?.rootClass;
+    const paddingValue = context?.paddingValue ?? 0;
     const forkRef = useForkRef(ref, listRef);
-    return (jsx("div", { ref: forkRef, className: clsx(className, rootClass), "data-suggestion-list": true, ...props }));
+    return (jsx("div", { ref: forkRef, ...restProps, className: clsx(className, rootClass), "data-suggestion-list": true, style: {
+            ...style,
+            ['--sui-suggestion-list-vertical-padding']: `${paddingValue}px`,
+        } }));
 });
 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 { highlightedIndex, prevHighlightedIndex, options, getItemProps, virtualize = true, renderOption, value: selectedOptions, inputValue, groupVariant, groupExpanded, renderGroup, optionsGroupList, getOptionDisabled, getOptionSelected, changeHighlightedIndexReason, isKeepHighlightedIndex, components: componentsProp, onContainerHeightChange, getOptionLabel, padding = DEFAULT_PADDING, 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 internalPrevHighlightedIndex = usePrevious(() => highlightedIndex, true);
+    const actualPrevHighlightedIndex = prevHighlightedIndex ?? internalPrevHighlightedIndex;
+    const cls = useClassesWithMode('suggestion-list', classesProp, classNameProp);
+    const paddingValue = getPaddingValue(padding, itemCount);
+    const hasItemsRenderedRef = useRef(false);
     const { totalListHeightChanged, style, containerHeighRef } = useDynamicHeight({
         itemCount,
         maxContainerHeight,
@@ -632,43 +659,69 @@ const SuggestionList = forwardRef((inProps, ref) => {
             }
         },
     });
+    const handleTotalListHeightChanged = (height) => {
+        const adjustedHeight = paddingValue > 0 ? height + paddingValue * 2 : height;
+        if (!hasItemsRenderedRef.current &&
+            adjustedHeight < containerHeighRef.current) {
+            return;
+        }
+        totalListHeightChanged(adjustedHeight);
+    };
     const { sleep } = useSleep();
     const { retry: scrollToIndexWithRetry } = useRetry(async (location) => {
         const toIndex = location.index;
         if (!virtualize) {
-            const toElm = listRef.current?.querySelector(`[data-item-index="${toIndex}"]`);
+            const scroller = listRef.current;
+            const needsScrollReset = prevHighlightedIndex === -1;
+            const isLastItem = itemCount > 1 && toIndex === itemCount - 1;
+            if (paddingValue > 0 && needsScrollReset && isLastItem && scroller) {
+                scroller.scrollTop = scroller.scrollHeight;
+                return true;
+            }
+            const toElm = scroller?.querySelector(`[data-item-index="${toIndex}"]`);
             toElm?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
             return true;
         }
-        if (location.index === 0 && padding !== undefined) {
+        if (paddingValue > 0 &&
+            (location.align === 'start' || location.align === 'end')) {
             location = {
                 ...location,
-                offset: -(typeof padding === 'number' ? padding : 8),
+                offset: paddingValue,
             };
         }
         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({
+    const { scrollerRef, scrollerRefFn, itemsRendered: itemsRenderedFromHook, scrollToHighlightedIndex, } = useHighlightScroll({
         containerHeighRef,
         scrollToIndex: scrollToIndexWithRetry,
     });
-    const prevHighlightedIndex = usePrevious(() => highlightedIndex, true);
+    const handleItemsRendered = (items) => {
+        if (items.length > 0 || itemCount === 0) {
+            hasItemsRenderedRef.current = true;
+        }
+        itemsRenderedFromHook(items);
+    };
+    useEffect(() => {
+        if (itemCount > 0) {
+            hasItemsRenderedRef.current = false;
+        }
+    }, [itemCount]);
     useLayoutEffect(() => {
-        if ((!virtualize || vlRef.current) &&
+        const shouldScroll = (!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);
+            changeHighlightedIndexReason !== 'mouse';
+        const firstOption = options[0];
+        const isFirstItemGroupTitle = isTitleMode && isFirstInGroup(firstOption);
+        const topHighlightIndex = isFirstItemGroupTitle ? 1 : 0;
+        if (shouldScroll) {
+            scrollToHighlightedIndex(actualPrevHighlightedIndex, highlightedIndex, topHighlightIndex);
         }
     });
     const handleScrolling = (scrolling) => {
@@ -678,12 +731,11 @@ const SuggestionList = forwardRef((inProps, ref) => {
         list.style.pointerEvents = scrolling ? 'none' : '';
     };
     const itemContent = (index, option) => {
-        const currGroup = option.group;
-        const isGroupTitle = option === currGroup?.options[0];
+        const isOptionFirstInGroup = isFirstInGroup(option);
         const isFixedGroupExpanded = typeof groupExpanded === 'boolean';
-        const expandable = !isTitleMode && !isFixedGroupExpanded && isGroupTitle;
+        const expandable = !isTitleMode && !isFixedGroupExpanded && isOptionFirstInGroup;
         const expanded = option.group?.expanded;
-        const expandIconProps = !expandable
+        const expandIconProps = expandable
             ? option.group?.getExpandIconProps?.({
                 className: cls('expand-icon'),
                 'aria-expanded': expanded,
@@ -704,7 +756,6 @@ const SuggestionList = forwardRef((inProps, ref) => {
         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);
         }
@@ -714,7 +765,7 @@ const SuggestionList = forwardRef((inProps, ref) => {
             index,
             indexInOwnGroup,
         };
-        if (renderGroup && isGroupTitle) {
+        if (renderGroup && isOptionFirstInGroup) {
             return renderGroup(resultProps, {
                 ...state,
                 expanded,
@@ -725,40 +776,33 @@ const SuggestionList = forwardRef((inProps, ref) => {
             return renderOption(resultProps, state);
         }
         const { error, group, freeSolo, key, ...restProps } = resultProps;
-        return (jsxs(SuggestionListItem, { ...restProps, id: typeof resultProps.id === 'number'
+        return (jsx(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));
+                : resultProps.id, expanded: expanded, isGroupTitle: isOptionFirstInGroup, isTitleMode: isTitleMode, highlighted: highlighted, selected: selected, disabled: resultProps.disabled, label: getOptionLabel ? getOptionLabel(option) : option.label, expandIconProps: expandIconProps }, 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 };
+    const context = { listRef, rootClass, paddingValue };
     return virtualize ? (jsx(Virtuoso, { ref: forkVlRef, totalCount: itemCount, data: itemData, context: context, components: components, itemContent: itemContent, ...getSuggestionListProps(), ...combineProps({
             scrollerRef: (scrollElm) => {
                 scrollerRefFn(scrollElm);
             },
-            itemsRendered,
-            totalListHeightChanged,
+            itemsRendered: handleItemsRendered,
+            totalListHeightChanged: handleTotalListHeightChanged,
             style,
             isScrolling: handleScrolling,
-        }, rest) })) : (jsxs(List, { style: { maxHeight: style.height, overflow: 'auto' }, ref: (scrollElm) => {
+        }, rest) })) : (jsx(List, { context: context, 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, {})] }));
+        }, className: cls('root'), ...getSuggestionListProps(), ...rest, children: options.map((x, i) => {
+            return itemContent(i, x);
+        }) }));
 });
 SuggestionList.displayName = 'SuggestionList';
 
@@ -770,7 +814,6 @@ function stringArrToRegExp(keyToTags) {
 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);
@@ -810,7 +853,6 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
         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;
@@ -869,7 +911,6 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
         onAddTags?.();
     };
     const addTagOnSelect = (selectedItem) => {
-        // * change to uniqueId
         if (selectedItem.freeSolo) {
             if (freeSoloCount < maxFreeSolo) {
                 selectedItem.id = uniqueId(TAG_TOKEN);
@@ -895,32 +936,20 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
             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
+        const tabIndex = !focused &&
             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,
@@ -939,9 +968,7 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
                     case 'Backspace':
                         {
                             const lengthBeforeDelete = tags.length;
-                            focusTag(
-                            // * when length is 1 mean that will be remove all
-                            lengthBeforeDelete === 1
+                            focusTag(lengthBeforeDelete === 1
                                 ? -1
                                 : focusedIndex === 0
                                     ? 0
@@ -952,9 +979,7 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
                     case 'Delete':
                         {
                             const lengthBeforeDelete = tags.length;
-                            focusTag(
-                            // * when length is 1 mean that will be remove all
-                            lengthBeforeDelete === 1
+                            focusTag(lengthBeforeDelete === 1
                                 ? -1
                                 : focusedIndex === tags.length - 1
                                     ? focusedIndex - 1
@@ -968,7 +993,6 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
                 }
             },
             onDelete: (e) => {
-                // * only allow left button click
                 if (e.button !== 0)
                     return;
                 removeTag(selectedItem);
@@ -1009,7 +1033,7 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
 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 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, isOptionEqualToValue, }) => {
     const isAutocomplete = variant === 'autocomplete';
     const autoCompleteSelectedIndexRef = useRef(DEFAULT_HIGHLIGHTED_INDEX);
     const AutocompleteId = useId('Autocomplete', true);
@@ -1031,7 +1055,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
     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(() => {
@@ -1057,7 +1080,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         multiple,
         required,
         disabled,
-        // * when is composition, stop freeSolo create new item
         getStopCreateFreeSolo: () => isCompositionRef.current,
         onReset: () => {
             resetState();
@@ -1076,7 +1098,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
             }
             return null;
         };
-        // * only when isOpen calculate the filtered result
         noOptionItemRef.current = null;
         if (addNoOptionItem) {
             const item = getInputValueAsItem();
@@ -1093,9 +1114,7 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         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];
             }
         }
@@ -1130,6 +1149,7 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         groupBy,
         onGroupExpanded,
         getExpandIconProps,
+        isOptionEqualToValue,
         onSelect: (e, selectedItem) => {
             addTagOnSelect(selectedItem);
             resetState(e);
@@ -1137,10 +1157,7 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                 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 ||
+                    const toIndex = nextValidIndex > currIndex ||
                         nextValidIndex === optionItems.length - 1
                         ? nextValidIndex - 1
                         : nextValidIndex;
@@ -1155,23 +1172,12 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         },
     });
     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();
-            },
-        });
+        return getSuggestionListItemProps(props);
     };
     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) {
@@ -1200,8 +1206,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
     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) {
@@ -1219,7 +1223,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         return false;
     };
     const resetState = (e) => {
-        // * when autocomplete select mode not reset input value
         if (!isSelectedFromAutocompleteRef.current) {
             clearInput();
         }
@@ -1239,18 +1242,15 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
     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;
@@ -1283,13 +1283,11 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
             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);
@@ -1301,9 +1299,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                     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 +
@@ -1313,7 +1308,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
             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();
                 }
@@ -1324,18 +1318,14 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                 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) {
@@ -1343,7 +1333,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                         selectItem(e, optionItems[highlightedIndexRef.current]);
                     checkAndAddFreeSolo({}, e);
                 }
-                // * when blur should restore text when have selected item
                 handleAutocompleteText();
                 closeMenu(e, 'blur');
             },
@@ -1351,7 +1340,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                 isCompositionRef.current = true;
             },
             onCompositionEnd: async () => {
-                // sleep for prevent tab in composition
                 await sleep(20);
                 isCompositionRef.current = false;
             },
@@ -1372,9 +1360,7 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                     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');
                             }
@@ -1387,13 +1373,9 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                                 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) {
@@ -1427,7 +1409,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                                 selectItem(e, optionItems[highlightedIndex]);
                                 e.stopPropagation();
                             }
-                            // always preventDefault for not inset all enter into textarea
                             e.preventDefault();
                             break;
                         case 'F10':
@@ -1439,7 +1420,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                                 e.preventDefault();
                                 return;
                             }
-                            // * check state for is that should move key in option items
                             if (isAutocomplete && tags.length > 0 && !isOpen) {
                                 openMenu(e);
                                 e.preventDefault();
@@ -1458,15 +1438,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
             },
             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);
                     }
@@ -1559,7 +1530,6 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         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,
@@ -1574,9 +1544,7 @@ const ChipSizeMap = {
     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 })] }));
+    return (jsxs("div", { ref: containerRef, className: containerClassName, onClick: onContainerClick, children: [startAdornment, jsx("input", { ...rest, ref: ref })] }));
 });
 const TextInput = forwardRef(({ renderInput, ...rest }, ref) => {
     if (renderInput) {
@@ -1587,14 +1555,7 @@ const TextInput = forwardRef(({ renderInput, ...rest }, ref) => {
 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 { 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', ...PopperProps } = {}, initialIsOpen, disabled, required: requiredProp, disableCloseOnSelect = multiple, onChange: onChangeProp, onInputChange: onInputChangeProp, onMaxFreeSolo, FormHelperTextProps, action, filterOptions, renderOption, renderTags, getOptionDisabled, renderGroup, renderNoOptions, inputProps, debug, disabledItemsHighlightable, open: openProp, addNoOptionItem, onOpen, onClose, focused, classes, className, fullWidth = true, size = 'xlarge', isOptionEqualToValue, ...rest } = props;
     const cls = useClasses('autocomplete', classes, className);
     const innerInputRef = useRef(null);
     const textFieldRef = useRef(null);
@@ -1605,12 +1566,7 @@ const Autocomplete = forwardRef((inProps, ref) => {
     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({
+    const { focusInput, optionItems, optionsGroupList, tags: selectedItems, highlightedIndex, getToggleButtonProps, getTagProps, getTagListBoxProps, getSuggestionListProps, getPopperProps, getInputProps, getInputAriaProps, getItemProps, isOpen, inputValue, activeIndex, setActiveIndex, setHighlightedIndex, onInputChange, keepHighlightedIndex, changeHighlightedIndexReason, closeMenu, openMenu, reset, getClearButtonProps, noOptionItem, getNoOptionsProps, isKeepHighlightedIndex, popperElementRef, } = useAutocomplete({
         focused,
         open: openProp,
         addNoOptionItem,
@@ -1650,6 +1606,7 @@ const Autocomplete = forwardRef((inProps, ref) => {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable,
         onGroupExpanded,
+        isOptionEqualToValue,
     });
     const open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     const { onBlur, ...InputProps } = getInputProps(inputProps);
@@ -1681,7 +1638,6 @@ const Autocomplete = forwardRef((inProps, ref) => {
     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,
@@ -1704,32 +1660,14 @@ const Autocomplete = forwardRef((inProps, ref) => {
     }));
     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 &&
+    const prevHighlightedIndex = usePrevious(() => highlightedIndex, true);
+    const menuChildren = isOpen && (jsxs(Fragment, { children: [jsx(SuggestionList, { highlightedIndex: highlightedIndex, prevHighlightedIndex: prevHighlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getSuggestionListProps: getSuggestionListProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, 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)
+    return (jsxs(Fragment, { children: [jsx(TextInput, { renderInput: renderInput, 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({
+                    : undefined, label: label, disabled: disabled, required: required, error: error ?? oneOfTagError, FormHelperTextProps: FormHelperTextProps, inputComponent: InputComponent, endAdornment: endAdornment, helperText: helperText, size: size, ...combineProps({
                     RootProps: {
                         contentRef: formFieldContentRef,
                     },
@@ -1752,16 +1690,16 @@ const Autocomplete = forwardRef((inProps, ref) => {
                         }), 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)
+const RcAutocompleteDefaultFilterOptions = (options, { inputValue, getOptionLabel, selectedItems, isOptionEqualToValue }) => {
+    return options.filter((item) => {
+        const isSelected = selectedItems.some((selected) => isOptionEqualToValue(item, selected));
+        if (isSelected)
+            return false;
+        const optionLabel = getOptionLabel?.(item) || '';
+        return optionLabel
             .toLowerCase()
-            .startsWith(inputValue?.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 };
+export { Autocomplete, DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_PADDING, RcAutocompleteDefaultFilterOptions, SuggestionList, SuggestionListItem, Autocomplete$1 as autocompleteStyles, getPaddingValue, isFirstInGroup, stringArrToRegExp, SuggestionList$1 as suggestionListStyles, useAutocomplete, useAutocompleteGroup, useAutocompleteTag, useDynamicHeight, useHighlightScroll, useSuggestionList };