@ringcentral/spring-ui 1.11.2 → 1.13.0

package/Autocomplete.js

@@ -1,78 +1,119 @@
-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 { usePrevious, useRefState, useEventCallback, logInDev, combineProps, useDepsChange, useControlled, useId, useForceUpdate, useKeyboardMoveFocus, useForkRef, useVirtuosoExternalWindow, 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 { 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';
-import { C as Chip } from './chunks/Chip.js';
-import { Popper } from './Popper.js';
-import { T as TextField } from './chunks/TextField.js';
-import { u as useAnimationFrame } from './chunks/useAnimationFrame.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","sui-compact":"sui-compact"};
-
-const SuggestionListItem = forwardRef((props, ref) => {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { Virtuoso } from "react-virtuoso";
+import { combineProps, getSelectionPosition, logInDev, useChange, useClasses, useControlled, useDepsChange, useEventCallback, useForceUpdate, useForkRef, useId, useKeyboardMoveFocus, usePrevious, useRefState, useRetry, useSleep, useVirtuosoExternalWindow } from "@ringcentral/spring-base";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { AnimatePresence, motion } from "framer-motion";
+import { Xsm } from "@ringcentral/spring-icon";
+import uniqueId from "lodash/uniqueId";
+import { getFade } from "./chunks/4476.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+import { useAnimationFrame } from "./chunks/6335.js";
+import { Chip as Chip_Chip } from "./Chip.js";
+import { Popper } from "./Popper.js";
+import { TextField as TextField_TextField } from "./TextField.js";
+import { usePrefersReducedMotion, ExpandCollapseCaret as ExpandCollapseCaret_ExpandCollapseCaret } from "./chunks/1294.js";
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var SuggestionList = ({"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 = /*#__PURE__*/ forwardRef((props, ref)=>{
     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 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', {
+    return /*#__PURE__*/ 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, 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 }) }))] }));
+            disabled
+        }),
+        children: [
+            label || children,
+            expandIconProps && /*#__PURE__*/ jsx(IconButton_IconButton, {
+                "aria-hidden": "true",
+                role: "presentation",
+                tabIndex: -1,
+                component: "div",
+                shape: 'squircle',
+                background: false,
+                color: 'secondary',
+                variant: "contained",
+                size: "small",
+                ...expandIconProps,
+                children: /*#__PURE__*/ jsx(ExpandCollapseCaret_ExpandCollapseCaret, {
+                    expanded: expanded
+                })
+            })
+        ]
+    });
 });
 
-const isFirstInGroup = (option) => {
+/**
+ * Check if an option is the first option in its group.
+ *
+ * Note: Whether this option is actually a "group title" depends on the `groupVariant`:
+ * - In `'normal'` mode: the first option is a dedicated title item (disabled, non-selectable)
+ * - In `'expanded'` mode: the first option is a regular data item (clickable, selectable)
+ *
+ * @param option - The option to check
+ * @returns true if the option is the first in its group, false otherwise
+ */ const isFirstInGroup = (option)=>{
     return option === option?.group?.options[0];
 };
 
-const useDynamicHeight = ({ itemCount, maxContainerHeight, onContainerHeightChange, }) => {
-    const prevItemCount = usePrevious(() => itemCount);
+
+
+
+
+/**
+ * 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) {
+        } else if (itemCount === 0) {
+            // * when item count is zero always height to zero, when zero init
             containerHeighRef.current = 0;
         }
     }
     return {
         containerHeighRef,
-        totalListHeightChanged: (height) => {
+        totalListHeightChanged: (height)=>{
             if (!fullHeight) {
                 const containerHeigh = containerHeighRef.current;
                 let changeHeight = -1;
                 if (height < containerHeigh) {
                     changeHeight = height;
-                }
-                else if (containerHeigh !== maxContainerSize) {
+                } else if (containerHeigh !== maxContainerSize) {
                     changeHeight = Math.min(height, maxContainerSize);
                 }
                 if (changeHeight !== -1) {
@@ -82,59 +123,76 @@ const useDynamicHeight = ({ itemCount, maxContainerHeight, onContainerHeightChan
             }
         },
         style: {
-            height: fullHeight ? '100%' : containerHeighRef.current,
-        },
+            height: fullHeight ? '100%' : containerHeighRef.current
+        }
     };
 };
 
-function useHighlightScroll({ virtualize = true, containerHeighRef, scrollToIndex, }) {
+
+
+/**
+ * scroll into current highlight index
+ */ function useHighlightScroll({ virtualize = true, containerHeighRef, scrollToIndex }) {
     const renderedItemsRef = useRef([]);
     const scrollerRef = useRef();
-    const scrollToHighlightedIndex = (prevHighlightedIndex, currHighlightedIndex, topHighlightIndex = 0) => {
+    const scrollToHighlightedIndex = (prevHighlightedIndex, currHighlightedIndex, topHighlightIndex = 0)=>{
+        // Reset scroll position when list needs re-initialization (prevHighlightedIndex === -1)
+        // This occurs when: menu reopens, input changes, options update, etc.
+        // Required because AnimatePresence preserves DOM elements, keeping old scrollTop
         const needsScrollReset = prevHighlightedIndex === -1;
+        // Handle case when scroller element is not yet mounted
         if (!scrollerRef.current) {
+            // Delegate to scrollToIndex if not at top position
+            // The retry mechanism will handle timing until scroller is ready
             if (currHighlightedIndex !== topHighlightIndex) {
                 scrollToIndex({
                     index: currHighlightedIndex,
-                    align: 'start',
+                    align: 'start'
                 });
             }
             return;
         }
         const scrollElm = scrollerRef.current;
+        // Non-virtualized mode: use simplified scroll logic
         if (!virtualize) {
+            // Reset scroll position when opening at the first item
             if (needsScrollReset && currHighlightedIndex === topHighlightIndex) {
                 scrollElm.scrollTop = 0;
                 return;
             }
+            // Delegate to scrollToIndex for all other cases
+            // scrollToIndex will check if item is visible and only scroll if necessary
             scrollToIndex({
                 index: currHighlightedIndex,
-                align: 'start',
+                align: 'start'
             });
             return;
         }
+        // Virtualized mode: calculate visibility using rendered item positions
         const renderedItems = renderedItemsRef.current;
-        const lastHighlightedIndex = needsScrollReset
-            ? currHighlightedIndex
-            : prevHighlightedIndex;
+        const lastHighlightedIndex = needsScrollReset ? currHighlightedIndex : prevHighlightedIndex;
         const isBackward = lastHighlightedIndex > currHighlightedIndex;
         const isForward = lastHighlightedIndex < currHighlightedIndex;
+        // Calculate visible viewport boundaries
         const currentVisibleOffset = {
             start: scrollElm.scrollTop,
-            stop: scrollElm.scrollTop + containerHeighRef.current,
+            stop: scrollElm.scrollTop + containerHeighRef.current
         };
-        const isInRenderedRange = renderedItems.some((x) => x.index === currHighlightedIndex);
+        // Check if target item is within the currently rendered range
+        const isInRenderedRange = renderedItems.some((x)=>x.index === currHighlightedIndex);
         if (!isInRenderedRange) {
             scrollToIndex({
                 index: currHighlightedIndex,
-                align: isBackward ? 'start' : 'end',
+                align: isBackward ? 'start' : 'end'
             });
             return;
         }
+        // Handle backward navigation (scrolling up)
         if (isBackward) {
             let firstShouldScrollIndex = currHighlightedIndex;
-            for (let i = renderedItems.length - 1; i >= 0; i--) {
+            for(let i = renderedItems.length - 1; i >= 0; i--){
                 const item = renderedItems[i];
+                // Stop when item top is above visible area
                 if (item.offset < currentVisibleOffset.start) {
                     break;
                 }
@@ -143,15 +201,16 @@ function useHighlightScroll({ virtualize = true, containerHeighRef, scrollToInde
             if (currHighlightedIndex < firstShouldScrollIndex) {
                 scrollToIndex({
                     index: currHighlightedIndex,
-                    align: 'start',
+                    align: 'start'
                 });
             }
-        }
-        else if (isForward) {
+        // Handle forward navigation (scrolling down)
+        } else if (isForward) {
             let lastShouldScrollIndex = currHighlightedIndex;
-            for (let i = 0; i < renderedItems.length; i++) {
+            for(let i = 0; i < renderedItems.length; i++){
                 const item = renderedItems[i];
                 const itemBottom = item.offset + item.size;
+                // Stop when item bottom extends beyond visible area
                 if (itemBottom >= currentVisibleOffset.stop) {
                     break;
                 }
@@ -160,23 +219,27 @@ function useHighlightScroll({ virtualize = true, containerHeighRef, scrollToInde
             if (currHighlightedIndex > lastShouldScrollIndex) {
                 scrollToIndex({
                     index: currHighlightedIndex,
-                    align: 'end',
+                    align: 'end'
                 });
             }
-        }
-        else {
-            const currentItem = renderedItems.find((item) => item.index === currHighlightedIndex);
+        } else {
+            // Handle no direction change
+            const currentItem = renderedItems.find((item)=>item.index === currHighlightedIndex);
             if (needsScrollReset) {
+                // When list needs re-initialization (menu reopens, input changes, etc.)
                 if (currHighlightedIndex === topHighlightIndex) {
+                    // At top position: reset scrollTop and skip scroll
+                    // This prevents unnecessary scroll when menu opens at the default position
                     if (scrollerRef.current) {
                         scrollerRef.current.scrollTop = 0;
                     }
                     return;
-                }
-                else {
+                } else {
+                    // Not at top position: let scrollToIndex handle the scroll position
+                    // No need to reset scrollTop as scrollToIndex will set the correct position
                     scrollToIndex({
                         index: currHighlightedIndex,
-                        align: 'start',
+                        align: 'start'
                     });
                     return;
                 }
@@ -184,10 +247,11 @@ function useHighlightScroll({ virtualize = true, containerHeighRef, scrollToInde
             if (!currentItem) {
                 scrollToIndex({
                     index: currHighlightedIndex,
-                    align: 'start',
+                    align: 'start'
                 });
                 return;
             }
+            // Verify item is fully visible within viewport
             const itemBottom = currentItem.offset + currentItem.size;
             const isTopVisible = currentItem.offset >= currentVisibleOffset.start;
             const isBottomVisible = itemBottom < currentVisibleOffset.stop;
@@ -195,23 +259,40 @@ function useHighlightScroll({ virtualize = true, containerHeighRef, scrollToInde
             if (!isFullyVisible) {
                 scrollToIndex({
                     index: currHighlightedIndex,
-                    align: 'start',
+                    align: 'start'
                 });
             }
         }
     };
     return {
-        scrollerRef,
-        scrollToHighlightedIndex,
-        scrollerRefFn: (elm) => (scrollerRef.current = elm),
-        itemsRendered: (e) => (renderedItemsRef.current = e),
+        /**
+     * 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 useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconProps, groupExpanded, groupDefaultExpanded, onGroupExpanded, groupVariant, getOptionDisabled, id })=>{
     const [groupExpandedMapRef, setGroupExpandedMap] = useRefState({});
     const isTitleGroup = groupVariant === 'normal';
-    const handleGroupExpandedChange = (groupName) => {
+    const handleGroupExpandedChange = (groupName)=>{
         const groupExpandedMap = groupExpandedMapRef.current;
         if (typeof groupExpanded === 'boolean') {
             return;
@@ -219,40 +300,39 @@ const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconP
         const toExpandedState = !groupExpandedMap[groupName];
         const newExpandedMap = {
             ...groupExpandedMap,
-            [groupName]: toExpandedState,
+            [groupName]: toExpandedState
         };
         setGroupExpandedMap(newExpandedMap);
-        if (!onGroupExpanded)
-            return;
-        const group = optionsGroupList.find((x) => x.group === groupName);
-        if (!group)
-            return;
+        if (!onGroupExpanded) return;
+        const group = optionsGroupList.find((x)=>x.group === groupName);
+        if (!group) return;
         const { getExpandIconProps, ...restGroupProps } = group;
         onGroupExpanded({
             ...restGroupProps,
-            expanded: toExpandedState,
+            expanded: toExpandedState
         }, newExpandedMap);
     };
-    const handleExpandIconClick = useEventCallback((e, groupName) => {
+    const handleExpandIconClick = useEventCallback((e, groupName)=>{
         handleGroupExpandedChange(groupName);
         e.preventDefault();
         e.stopPropagation();
     });
-    const optionsGroupList = useMemo(() => {
-        if (!groupBy || !options) {
+    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 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,
+                    indexInOwnGroup: currGroup.options.length - 1
                 });
                 return acc;
             }
@@ -261,7 +341,7 @@ const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconP
                     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\``,
+                  You can solve the issue by sorting the options with the output of \`groupBy\``
                     });
                     warn = true;
                 }
@@ -272,22 +352,25 @@ const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconP
                 index,
                 group,
                 order: acc.length,
-                options: [{ ...option, indexInOwnGroup: 0 }],
+                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;
-                },
+                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) {
@@ -295,10 +378,13 @@ const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconP
                     id: `${id}-${group}`,
                     label: group,
                     disabled: true,
-                    group: newGroup,
+                    // * here cause by self Type reference
+                    // oxlint-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(() => {
+                    afterGroupFn.push(()=>{
                         groupTitleOption.disabled = getOptionDisabled(groupTitleOption);
                     });
                 }
@@ -307,7 +393,7 @@ const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconP
             acc.push(newGroup);
             return acc;
         }, []);
-        afterGroupFn.forEach((fn) => fn());
+        afterGroupFn.forEach((fn)=>fn());
         return result;
     }, [
         filteredResult,
@@ -317,92 +403,112 @@ const useAutocompleteGroup = ({ groupBy, options, filteredResult, getExpandIconP
         handleExpandIconClick,
         id,
         isTitleGroup,
-        options,
+        options
     ]);
-    const initGroupExpandedState = (expandedState) => {
+    const initGroupExpandedState = (expandedState)=>{
         if (typeof expandedState === 'object') {
             setGroupExpandedMap(expandedState, false);
-        }
-        else if (typeof expandedState === 'boolean') {
-            setGroupExpandedMap(optionsGroupList.reduce((prev, curr) => {
+        } else if (typeof expandedState === 'boolean') {
+            setGroupExpandedMap(optionsGroupList.reduce((prev, curr)=>{
                 prev[curr.group] = expandedState;
                 return prev;
             }, {}), false);
         }
     };
-    useDepsChange(() => {
+    useDepsChange(()=>{
         initGroupExpandedState(groupDefaultExpanded);
     }, []);
-    useDepsChange(() => {
+    useDepsChange(()=>{
         initGroupExpandedState(groupExpanded);
-    }, [groupExpanded]);
+    }, [
+        groupExpanded
+    ]);
     const groupExpandedMap = groupExpandedMapRef.current;
-    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;
+    // * 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) => {
+        }, [
+            ...optionsGroupList
+        ]);
+        return addExpandedResult.reduce((prev, curr)=>{
             if (curr.expanded) {
                 prev.push(...curr.options);
-            }
-            else {
+            } else {
                 prev.push(curr.options[0]);
             }
             return prev;
         }, []);
-    }, [groupExpandedMap, optionsGroupList]);
+    }, [
+        groupExpandedMap,
+        optionsGroupList
+    ]);
     return {
         optionsGroupList,
         groupedResult,
         groupExpandedMap,
-        handleGroupExpandedChange,
+        handleGroupExpandedChange
     };
 };
 
-const DEFAULT_HIGHLIGHTED_INDEX$1 = -1;
-const isItemCanSelected = (item) => {
+
+
+
+
+const DEFAULT_HIGHLIGHTED_INDEX = -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 || '';
-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 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
+ */ /** Default equality check using strict equality */ 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,
         default: '',
-        name: 'useSuggestionList',
+        name: 'useSuggestionList'
     });
-    const updateInputValue = (newValue) => {
+    const updateInputValue = (newValue)=>{
         onInputChangeProp?.(newValue);
         setInputValue(newValue);
     };
-    const focusInput = () => inputRef.current?.focus();
+    const focusInput = ()=>inputRef.current?.focus();
     const currUniqueId = useId(id || 'suggestion-list', !id);
-    const highlightedIndexRef = useRef(DEFAULT_HIGHLIGHTED_INDEX$1);
+    const highlightedIndexRef = useRef(DEFAULT_HIGHLIGHTED_INDEX);
     const changeHighlightedIndexReasonRef = useRef();
     const forceUpdate = useForceUpdate();
-    const getFilteredItems = useCallback((items) => {
+    const getFilteredItems = useCallback((items)=>{
         if (filterOptions) {
             return filterOptions(items, {
                 inputValue,
                 getOptionLabel,
                 selectedItems: [],
-                isOptionEqualToValue,
+                isOptionEqualToValue
             });
         }
         return items;
-    }, [filterOptions, getOptionLabel, inputValue, isOptionEqualToValue]);
-    const filteredResult = useMemo(() => {
+    }, [
+        filterOptions,
+        getOptionLabel,
+        inputValue,
+        isOptionEqualToValue
+    ]);
+    const filteredResult = useMemo(()=>{
+        // * only when isOpen calculate the filtered result
         let results = getFilteredItems(options);
-        results = processFilteredResult
-            ? processFilteredResult(results, inputValue)
-            : results;
+        results = processFilteredResult ? processFilteredResult(results, inputValue) : results;
         return results;
-    }, [getFilteredItems, inputValue, options, processFilteredResult]);
+    }, [
+        getFilteredItems,
+        inputValue,
+        options,
+        processFilteredResult
+    ]);
     const { groupedResult, handleGroupExpandedChange, optionsGroupList } = useAutocompleteGroup({
         id: currUniqueId,
         options,
@@ -413,61 +519,61 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
         groupBy,
         getExpandIconProps,
         onGroupExpanded,
-        getOptionDisabled,
+        getOptionDisabled
     });
     const optionItems = groupBy ? groupedResult : filteredResult;
-    const setHighlightedIndex = (index, { reRender = false, reason, }) => {
+    const setHighlightedIndex = (index, { reRender = false, reason })=>{
         changeHighlightedIndexReasonRef.current = reason;
         if (highlightedIndexRef.current !== index) {
             highlightedIndexRef.current = index;
-            if (reRender)
-                forceUpdate();
+            if (reRender) forceUpdate();
         }
     };
-    const handleInputChange = (newValue) => {
+    const handleInputChange = (newValue)=>{
         if (inputValue !== newValue) {
-            setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX$1, { reason: 'auto' });
+            setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, {
+                reason: 'auto'
+            });
             updateInputValue(newValue);
         }
         return false;
     };
-    const getIsItemCanSelected = (item) => {
-        return ((!!item && item.freeSolo) ||
-            (isItemCanSelected(item) && !getOptionDisabled?.(item)));
+    const getIsItemCanSelected = (item)=>{
+        return !!item && item.freeSolo || isItemCanSelected(item) && !getOptionDisabled?.(item);
     };
-    const selectItem = (e, selectedItem) => {
+    const selectItem = (e, selectedItem)=>{
         if (getIsItemCanSelected(selectedItem)) {
             onSelect?.(e, selectedItem);
             return true;
         }
         return false;
     };
-    const clearInput = () => {
+    const clearInput = ()=>{
         if (inputRef.current && inputRef.current.value.length > 0) {
             updateInputValue('');
         }
     };
-    const reset = (isFocus) => {
+    const reset = (isFocus)=>{
         clearInput();
         onInputChangeProp?.('');
-        if (isFocus)
-            focusInput();
+        if (isFocus) focusInput();
     };
     const { onKeyFocusedIndexHandle, getNextFocusableOption } = useKeyboardMoveFocus({
         options: optionItems,
         focusedIndexRef: highlightedIndexRef,
         infinite: true,
-        onFocusedIndexChange: (event, toIndex) => {
-            setHighlightedIndex(toIndex, { reason: 'keyboard', reRender: true });
+        onFocusedIndexChange: (event, toIndex)=>{
+            setHighlightedIndex(toIndex, {
+                reason: 'keyboard',
+                reRender: true
+            });
             event?.preventDefault();
         },
-        getOptionDisabled: disabledItemsHighlightable
-            ? undefined
-            : (child) => {
-                return !getIsItemCanSelected(child);
-            },
+        getOptionDisabled: disabledItemsHighlightable ? undefined : (child)=>{
+            return !getIsItemCanSelected(child);
+        }
     });
-    const getItemProps = ({ item, index = 0, }) => {
+    const getItemProps = ({ item, index = 0 })=>{
         const currGroup = item.group;
         const isItemFirstInGroup = isFirstInGroup(item);
         const itemCount = optionItems.length;
@@ -475,75 +581,76 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
         const stringId = toOptionIdString(item.id);
         return {
             id: stringId ?? `${currUniqueId}-option-${index}`,
-            onClick: (e) => {
+            onClick: (e)=>{
                 selectItem(e, item);
             },
-            onMouseOver: () => {
-                if (highlightedIndexRef.current !== index &&
-                    getIsItemCanSelected(item)) {
-                    setHighlightedIndex(index, { reason: 'mouse', reRender: true });
+            onMouseOver: ()=>{
+                if (highlightedIndexRef.current !== index && getIsItemCanSelected(item)) {
+                    setHighlightedIndex(index, {
+                        reason: 'mouse',
+                        reRender: true
+                    });
                 }
             },
-            ...(isTitleMode && isItemFirstInGroup
-                ? {}
-                : {
-                    role: 'option',
-                    'aria-setsize': itemCount - (isTitleMode ? optionsGroupList?.length || 0 : 0),
-                    'aria-posinset': index + 1 - (isTitleMode ? groupOrder + 1 : 0),
-                }),
+            // When title mode and is title, skip that posinset
+            ...isTitleMode && isItemFirstInGroup ? {} : {
+                role: 'option',
+                'aria-setsize': itemCount - (isTitleMode ? optionsGroupList?.length || 0 : 0),
+                'aria-posinset': index + 1 - (isTitleMode ? groupOrder + 1 : 0)
+            }
         };
     };
-    const handleF10KeyDown = (e) => {
+    const handleF10KeyDown = (e)=>{
         const highlightedIndex = highlightedIndexRef.current;
-        if (!e.shiftKey)
-            return;
+        if (!e.shiftKey) return;
         const currOption = optionItems[highlightedIndex];
         const currentGroup = currOption.group;
         if (currentGroup && currentGroup.options.length > 1) {
             handleGroupExpandedChange(currentGroup.group);
         }
     };
-    const getInputProps = (props) => {
+    const getInputProps = (props)=>{
         return combineProps({
             id: `${currUniqueId}-input`,
             autoComplete: 'off',
-            onChange: (e) => {
+            onChange: (e)=>{
                 const changeValue = e.target.value;
                 handleInputChange(changeValue);
             },
-            onKeyDown: (e) => {
+            onKeyDown: (e)=>{
                 onKeyDownProp?.(e, highlightedIndexRef.current);
-                switch (e.key) {
+                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 isCurrOptionFirstInGroup = isFirstInGroup(currOption);
-                            if (isCurrOptionFirstInGroup) {
-                                const { onClick } = currOption.group.getExpandIconProps();
-                                onClick?.(e);
-                            }
-                            else {
-                                selectItem(e, currOption);
+                    case 'Enter':
+                        {
+                            const highlightedIndex = highlightedIndexRef.current;
+                            if (e.which === 229) return;
+                            if (highlightedIndex !== DEFAULT_HIGHLIGHTED_INDEX) {
+                                const currOption = optionItems[highlightedIndex];
+                                const isCurrOptionFirstInGroup = isFirstInGroup(currOption);
+                                if (isCurrOptionFirstInGroup) {
+                                    // oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                    const { onClick } = currOption.group.getExpandIconProps();
+                                    onClick?.(e);
+                                } else {
+                                    selectItem(e, currOption);
+                                }
+                                e.stopPropagation();
                             }
-                            e.stopPropagation();
+                            // always preventDefault for not inset all enter into textarea
+                            e.preventDefault();
+                            break;
                         }
-                        e.preventDefault();
-                        break;
-                    }
                     default:
                         onKeyFocusedIndexHandle(e);
                         break;
                 }
-            },
+            }
         }, props);
     };
-    const getInputAriaProps = (props) => {
+    const getInputAriaProps = (props)=>{
         return combineProps({
             role: 'combobox',
             'aria-autocomplete': 'list',
@@ -551,39 +658,38 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
             'aria-haspopup': true,
             'aria-controls': `${currUniqueId}-menu`,
             'aria-owns': `${currUniqueId}-menu`,
-            'aria-activedescendant': (() => {
+            'aria-activedescendant': (()=>{
                 const index = highlightedIndexRef.current;
-                if (index < 0)
-                    return undefined;
+                if (index < 0) return undefined;
                 const option = optionItems[index];
                 const optionId = toOptionIdString(option?.id);
                 return optionId ?? `${currUniqueId}-option-${index}`;
-            })(),
+            })()
         }, props);
     };
-    const getLabelProps = (props) => {
+    const getLabelProps = (props)=>{
         return combineProps({
             htmlFor: `${currUniqueId}-input`,
-            id: `${currUniqueId}-label`,
+            id: `${currUniqueId}-label`
         }, props);
     };
-    const getSuggestionListProps = (restMenuProps) => {
+    const getSuggestionListProps = (restMenuProps)=>{
         return combineProps({
             'aria-labelledby': `${currUniqueId}-label`,
             id: `${currUniqueId}-menu`,
-            role: 'listbox',
+            role: 'listbox'
         }, restMenuProps);
     };
-    const getClearButtonProps = (props) => {
+    const getClearButtonProps = (props)=>{
         return combineProps({
             id: `${currUniqueId}-clear-button`,
-            onClick: (e) => {
+            onClick: (e)=>{
                 onClear?.(e);
                 reset(true);
-            },
+            }
         }, props);
     };
-    useEffect(() => {
+    useEffect(()=>{
         changeHighlightedIndexReasonRef.current = undefined;
     });
     return {
@@ -609,41 +715,75 @@ const useSuggestionList = ({ id, inputValue: inputValueProp, getOptionLabel = DE
         changeHighlightedIndexReasonRef,
         changeHighlightedIndexReason: changeHighlightedIndexReasonRef.current,
         optionsGroupList,
-        id: currUniqueId,
+        /** current unique id */ id: currUniqueId,
         getNextFocusableOption,
-        handleF10KeyDown,
+        handleF10KeyDown
     };
 };
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 const DEFAULT_PADDING = 8;
-const getPaddingValue = (padding, itemCount) => {
+/**
+ * Calculates the padding value from the padding prop.
+ * Note: padding will never be undefined due to default parameter (padding = DEFAULT_PADDING).
+ * @param padding - padding prop value (boolean | number)
+ * @param itemCount - number of items in the list
+ * @returns padding value as a number representing pixels (>= 0)
+ */ const getPaddingValue = (padding, itemCount)=>{
     if (itemCount === 0) {
         return 0;
     }
     if (padding === false) {
-        return 0;
+        return 0; // explicitly disabled
     }
     if (padding === true) {
-        return DEFAULT_PADDING;
+        return DEFAULT_PADDING; // default enabled
     }
+    // padding is a number (including default value when not passed)
+    // Clamp to 0 to handle negative values
     if (typeof padding === 'number') {
         return Math.max(0, padding);
     }
+    // Fallback (should never reach here due to default parameter)
     return DEFAULT_PADDING;
 };
-const List = forwardRef((props, ref) => {
+const List = /*#__PURE__*/ forwardRef((props, ref)=>{
     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, ...restProps, className: clsx(className, rootClass), "data-suggestion-list": true, style: {
+    return /*#__PURE__*/ jsx("div", {
+        ref: forkRef,
+        ...restProps,
+        className: clsx(className, rootClass),
+        "data-suggestion-list": true,
+        style: {
             ...style,
-            ['--sui-suggestion-list-vertical-padding']: `${paddingValue}px`,
-        } }));
+            ['--sui-suggestion-list-vertical-padding']: `${paddingValue}px`
+        }
+    });
 });
-const SuggestionList = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'SuggestionList' });
+const SuggestionList_SuggestionList = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'SuggestionList'
+    });
     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);
@@ -652,146 +792,158 @@ const SuggestionList = forwardRef((inProps, ref) => {
     const itemData = options;
     const itemCount = options.length;
     const externalWindowProps = useVirtuosoExternalWindow();
-    const internalPrevHighlightedIndex = usePrevious(() => highlightedIndex, true);
+    // Track previous highlightedIndex internally for backward compatibility
+    // Using isDefault: true ensures consistent behavior across render cycles
+    const internalPrevHighlightedIndex = usePrevious(()=>highlightedIndex, true);
+    // Use parent-provided value if available, otherwise fall back to internal tracking
     const actualPrevHighlightedIndex = prevHighlightedIndex ?? internalPrevHighlightedIndex;
     const cls = useClassesWithMode('suggestion-list', classesProp, classNameProp);
     const paddingValue = getPaddingValue(padding, itemCount);
+    // Track whether items have been rendered to ensure accurate height calculations
     const hasItemsRenderedRef = useRef(false);
     const { totalListHeightChanged, style, containerHeighRef } = useDynamicHeight({
         itemCount,
         maxContainerHeight,
-        onContainerHeightChange: (changeHeight) => {
+        onContainerHeightChange: (changeHeight)=>{
             const scroller = scrollerRef.current;
             if (scroller?.style) {
                 scroller.style.height = `${changeHeight}px`;
                 onContainerHeightChange?.();
             }
-        },
+        }
     });
-    const handleTotalListHeightChanged = (height) => {
+    /**
+     * Adjusts Virtuoso's reported height to include padding from :before/:after pseudo-elements.
+     * Prevents reporting height changes before items are rendered to ensure accurate height calculation.
+     */ const handleTotalListHeightChanged = (height)=>{
         const adjustedHeight = paddingValue > 0 ? height + paddingValue * 2 : height;
-        if (!hasItemsRenderedRef.current &&
-            adjustedHeight < containerHeighRef.current) {
+        if (!hasItemsRenderedRef.current && adjustedHeight < containerHeighRef.current) {
             return;
         }
         totalListHeightChanged(adjustedHeight);
     };
     const { sleep } = useSleep();
-    const { retry: scrollToIndexWithRetry } = useRetry(async (location) => {
+    const { retry: scrollToIndexWithRetry } = useRetry(async (location)=>{
         const toIndex = location.index;
         if (!virtualize) {
             const scroller = listRef.current;
             const needsScrollReset = prevHighlightedIndex === -1;
             const isLastItem = itemCount > 1 && toIndex === itemCount - 1;
+            // Reveal bottom padding when scrolling to last item after scroll reset
             if (paddingValue > 0 && needsScrollReset && isLastItem && scroller) {
                 scroller.scrollTop = scroller.scrollHeight;
                 return true;
             }
+            // Use custom scrollTo logic to avoid affecting page scroll
             const toElm = scroller?.querySelector(`[data-item-index="${toIndex}"]`);
             if (!toElm || !scroller) {
                 return false;
             }
+            // Calculate element position relative to scroller
             const scrollerRect = scroller.getBoundingClientRect();
             const elementRect = toElm.getBoundingClientRect();
             const scrollerTop = scrollerRect.top;
             const scrollerBottom = scrollerRect.bottom;
             const elementTop = elementRect.top;
             const elementBottom = elementRect.bottom;
+            // Check if element is fully visible
             const isFullyVisible = elementTop >= scrollerTop && elementBottom <= scrollerBottom;
             if (!isFullyVisible) {
+                // Scroll element into view using scrollTo (affects only the scroller)
                 let scrollOffset = 0;
                 if (elementTop < scrollerTop) {
+                    // Element is above viewport - align to start
                     scrollOffset = toElm.offsetTop - paddingValue;
-                }
-                else if (elementBottom > scrollerBottom) {
-                    scrollOffset =
-                        toElm.offsetTop -
-                            scroller.clientHeight +
-                            toElm.offsetHeight +
-                            paddingValue;
+                } else if (elementBottom > scrollerBottom) {
+                    // Element is below viewport - align to end
+                    scrollOffset = toElm.offsetTop - scroller.clientHeight + toElm.offsetHeight + paddingValue;
                 }
                 scroller.scrollTo({
                     top: scrollOffset,
-                    behavior: 'auto',
+                    behavior: 'auto'
                 });
             }
             return true;
         }
-        if (paddingValue > 0 &&
-            (location.align === 'start' || location.align === 'end')) {
+        // Apply padding offset to ensure full item visibility in virtualized mode
+        if (paddingValue > 0 && (location.align === 'start' || location.align === 'end')) {
             location = {
                 ...location,
-                offset: paddingValue,
+                offset: paddingValue
             };
         }
         vlRef.current?.scrollToIndex(location);
         await sleep(0);
+        // Verify the item has been rendered
         const toElm = listRef.current?.querySelector(`[data-item-index="${toIndex}"]`);
         return !!toElm;
     }, {
         retryTimes: 10,
-        intervalTime: 20,
+        intervalTime: 20
     });
-    const { scrollerRef, scrollerRefFn, itemsRendered: itemsRenderedFromHook, scrollToHighlightedIndex, } = useHighlightScroll({
+    const { scrollerRef, scrollerRefFn, itemsRendered: itemsRenderedFromHook, scrollToHighlightedIndex } = useHighlightScroll({
         virtualize,
         containerHeighRef,
-        scrollToIndex: scrollToIndexWithRetry,
+        scrollToIndex: scrollToIndexWithRetry
     });
-    const handleItemsRendered = (items) => {
+    /**
+     * Wraps itemsRendered callback to track when items have been rendered.
+     */ const handleItemsRendered = (items)=>{
         if (items.length > 0 || itemCount === 0) {
             hasItemsRenderedRef.current = true;
         }
         itemsRenderedFromHook(items);
     };
-    useEffect(() => {
+    // Reset flag when itemCount changes to non-zero
+    useEffect(()=>{
         if (itemCount > 0) {
             hasItemsRenderedRef.current = false;
         }
-    }, [itemCount]);
-    useLayoutEffect(() => {
-        const shouldScroll = (!virtualize || vlRef.current) &&
-            !isKeepHighlightedIndex &&
-            changeHighlightedIndexReason &&
-            changeHighlightedIndexReason !== 'mouse';
+    }, [
+        itemCount
+    ]);
+    useLayoutEffect(()=>{
+        const shouldScroll = (!virtualize || vlRef.current) && !isKeepHighlightedIndex && // Only scroll when reason is 'keyboard'
+        changeHighlightedIndexReason && changeHighlightedIndexReason !== 'mouse';
+        // Check if the first item is actually a group title
         const firstOption = options[0];
         const isFirstItemGroupTitle = isTitleMode && isFirstInGroup(firstOption);
+        // In title group mode, first item is group title, so start from index 1
         const topHighlightIndex = isFirstItemGroupTitle ? 1 : 0;
         if (shouldScroll) {
             scrollToHighlightedIndex(actualPrevHighlightedIndex, highlightedIndex, topHighlightIndex);
         }
     });
-    const handleScrolling = (scrolling) => {
+    const handleScrolling = (scrolling)=>{
         const list = listRef.current;
-        if (!list)
-            return;
+        if (!list) return;
         list.style.pointerEvents = scrolling ? 'none' : '';
     };
-    const itemContent = (index, option) => {
+    const itemContent = (index, option)=>{
         const isOptionFirstInGroup = isFirstInGroup(option);
         const isFixedGroupExpanded = typeof groupExpanded === 'boolean';
         const expandable = !isTitleMode && !isFixedGroupExpanded && isOptionFirstInGroup;
         const expanded = option.group?.expanded;
-        const expandIconProps = expandable
-            ? option.group?.getExpandIconProps?.({
-                className: cls('expand-icon'),
-                'aria-expanded': expanded,
-            })
-            : undefined;
+        const expandIconProps = expandable ? option.group?.getExpandIconProps?.({
+            className: cls('expand-icon'),
+            'aria-expanded': expanded
+        }) : undefined;
         const itemProps = getItemProps({
             item: option,
-            index,
+            index
         });
         const resultProps = {
             'data-item-index': !virtualize ? index : undefined,
             ...option,
             ...itemProps,
             label: option.label,
-            key: itemProps.id,
+            key: itemProps.id
         };
         const highlighted = highlightedIndex === index;
         const selected = getOptionSelected?.(option);
         const indexInOwnGroup = resultProps.indexInOwnGroup;
         delete resultProps.indexInOwnGroup;
+        // Check external disabled state if item is not already disabled
         if (!resultProps.freeSolo && !resultProps.disabled && getOptionDisabled) {
             resultProps.disabled = getOptionDisabled(option);
         }
@@ -799,69 +951,128 @@ const SuggestionList = forwardRef((inProps, ref) => {
             inputValue,
             highlighted,
             index,
-            indexInOwnGroup,
+            indexInOwnGroup
         };
         if (renderGroup && isOptionFirstInGroup) {
             return renderGroup(resultProps, {
                 ...state,
                 expanded,
-                expandIconProps,
+                expandIconProps
             });
         }
         if (renderOption) {
             return renderOption(resultProps, state);
         }
         const { error, group, freeSolo, key, ...restProps } = resultProps;
-        return (jsx(SuggestionListItem, { ...restProps, id: typeof resultProps.id === 'number'
-                ? `${resultProps.id}`
-                : resultProps.id, expanded: expanded, isGroupTitle: isOptionFirstInGroup, isTitleMode: isTitleMode, highlighted: highlighted, selected: selected, disabled: resultProps.disabled, label: getOptionLabel ? getOptionLabel(option) : option.label, expandIconProps: expandIconProps }, key));
+        return /*#__PURE__*/ jsx(SuggestionListItem, {
+            ...restProps,
+            id: typeof resultProps.id === 'number' ? `${resultProps.id}` : 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 components = {
         List: List,
-        ...componentsProp,
+        ...componentsProp
     };
     const rootClass = cls('root');
-    const context = { listRef, rootClass, paddingValue };
-    return virtualize ? (jsx(Virtuoso, { ref: forkVlRef, totalCount: itemCount, data: itemData, context: context, components: components, itemContent: itemContent, ...externalWindowProps, ...getSuggestionListProps(), ...combineProps({
-            scrollerRef: (scrollElm) => {
+    const context = {
+        listRef,
+        rootClass,
+        paddingValue
+    };
+    return virtualize ? /*#__PURE__*/ jsx(Virtuoso, {
+        ref: forkVlRef,
+        totalCount: itemCount,
+        data: itemData,
+        context: context,
+        components: components,
+        itemContent: itemContent,
+        ...externalWindowProps,
+        ...getSuggestionListProps(),
+        ...combineProps({
+            scrollerRef: (scrollElm)=>{
                 scrollerRefFn(scrollElm);
             },
             itemsRendered: handleItemsRendered,
             totalListHeightChanged: handleTotalListHeightChanged,
             style,
-            isScrolling: handleScrolling,
-        }, rest) })) : (jsx(List, { context: context, style: {
+            isScrolling: handleScrolling
+        }, rest)
+    }) : /*#__PURE__*/ jsx(List, {
+        context: context,
+        style: {
             maxHeight: style.height,
-            overflow: 'auto',
-        }, ref: (scrollElm) => {
+            overflow: 'auto'
+        },
+        ref: (scrollElm)=>{
             listRef.current = scrollElm;
             scrollerRefFn(scrollElm);
-        }, className: cls('root'), ...getSuggestionListProps(), ...rest, children: options.map((x, i) => {
+        },
+        className: cls('root'),
+        ...getSuggestionListProps(),
+        ...rest,
+        children: options.map((x, i)=>{
             return itemContent(i, x);
-        }) }));
+        })
+    });
 });
-SuggestionList.displayName = 'SuggestionList';
+SuggestionList_SuggestionList.displayName = 'SuggestionList';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Autocomplete = ({"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","sui-autocomplete-status-container":"sui-autocomplete-status-container","sui-autocomplete-status-label":"sui-autocomplete-status-label"});
+
+
+
+
+
+
+
 
-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","sui-autocomplete-status-container":"sui-autocomplete-status-container","sui-autocomplete-status-label":"sui-autocomplete-status-label"};
 
 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'];
-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 DEFAULT_LIMIT_CHIPS = 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, 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',
+        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) => {
+    const freeSoloCount = useMemo(()=>tags.filter((x)=>x.freeSolo).length, [
+        tags
+    ]);
+    const setTags = (_selectedItems)=>{
         _setTags(_selectedItems);
         onSelectChange?.(_selectedItems);
         if (isAutocomplete && _selectedItems.length === 1) {
@@ -870,38 +1081,26 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
             isSelectedFromAutocompleteRef.current = true;
         }
     };
-    const _focusTag = (tagToFocus) => {
+    const _focusTag = (tagToFocus)=>{
         const textFieldElm = wrapperRef?.current;
         const inputElm = inputRef.current;
         if (tagToFocus === -1) {
             inputElm?.focus();
-        }
-        else {
-            textFieldElm
-                ?.querySelector(`[data-tag-index="${tagToFocus}"]`)
-                ?.focus();
+        } else {
+            textFieldElm?.querySelector(`[data-tag-index="${tagToFocus}"]`)?.focus();
         }
     };
-    const focusTag = useEventCallback((tagToFocus, focus = true) => {
-        if (focusedIndexRef.current === tagToFocus)
-            return;
+    const focusTag = useEventCallback((tagToFocus, focus = true)=>{
+        if (focusedIndexRef.current === tagToFocus) return;
         setFocusedIndex(tagToFocus);
-        if (focus)
-            _focusTag(tagToFocus);
+        if (focus) _focusTag(tagToFocus);
     });
-    const checkAndAddFreeSolo = ({ selectedItem, value, } = {}, e) => {
+    /** 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 (!getStopCreateFreeSolo?.() && !selectedItem && freeSolo && currentValue && currentValue.length > 0) {
             if (freeSoloCount < maxFreeSolo) {
-                const items = currentValue
-                    .trim()
-                    .split(stringArrToRegExp(keyToTags))
-                    .filter((x) => x.trim() !== '');
+                const items = currentValue.trim().split(stringArrToRegExp(keyToTags)).filter((x)=>x.trim() !== '');
                 const toLength = freeSoloCount + items.length;
                 if (toLength > maxFreeSolo) {
                     items.splice(-(toLength - maxFreeSolo));
@@ -910,116 +1109,122 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
                 if (items.length > 0) {
                     addTags([
                         ...tags,
-                        ...items.map((label) => ({
-                            id: uniqueId(TAG_TOKEN),
-                            freeSolo: true,
-                            label,
-                        })),
+                        ...items.map((label)=>({
+                                id: uniqueId(TAG_TOKEN),
+                                freeSolo: true,
+                                label
+                            }))
                     ]);
                     isAddItem = true;
                 }
-            }
-            else {
+            } else {
                 onMaxFreeSolo?.(maxFreeSolo);
             }
             onReset?.(e);
         }
         return isAddItem;
     };
-    const onInputChange = (e) => {
+    const onInputChange = (e)=>{
         const newValue = e.target['value'];
         if (stringArrToRegExp(keyToTags).test(newValue || '')) {
-            return checkAndAddFreeSolo({ value: newValue });
+            return checkAndAddFreeSolo({
+                value: newValue
+            });
         }
         return false;
     };
-    const removeTag = (selectedItem) => {
+    const removeTag = (selectedItem)=>{
         const selectedItemIndex = tags.indexOf(selectedItem);
         if (selectedItemIndex > -1) {
             setTags([
                 ...tags.slice(0, selectedItemIndex),
-                ...tags.slice(selectedItemIndex + 1),
+                ...tags.slice(selectedItemIndex + 1)
             ]);
         }
     };
-    const addTags = (tags) => {
+    const addTags = (tags)=>{
         setTags(tags);
         onAddTags?.();
     };
-    const addTagOnSelect = (selectedItem) => {
+    const addTagOnSelect = (selectedItem)=>{
+        // * change to uniqueId
         if (selectedItem.freeSolo) {
             if (freeSoloCount < maxFreeSolo) {
                 selectedItem.id = uniqueId(TAG_TOKEN);
-            }
-            else {
+            } else {
                 onMaxFreeSolo?.(maxFreeSolo);
                 return;
             }
         }
         if (multiple) {
-            addTags([...tags, selectedItem]);
-        }
-        else {
-            addTags([selectedItem]);
+            addTags([
+                ...tags,
+                selectedItem
+            ]);
+        } else {
+            addTags([
+                selectedItem
+            ]);
         }
     };
     const { onKeyFocusedIndexHandle: handleTagKey } = useKeyboardMoveFocus({
         options: tags,
         focusedIndexRef,
         infinite: 'order',
-        onFocusedIndexChange: (event, toIndex) => {
+        onFocusedIndexChange: (event, toIndex)=>{
             focusTag(toIndex);
             event?.preventDefault();
-        },
+        }
     });
-    const getTagListBoxProps = (props) => {
+    /**
+   * All Get props methods
+   */ const getTagListBoxProps = (props)=>{
         return {
             'aria-required': required || false,
             'aria-disabled': disabled || false,
-            ...props,
+            // 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 = !focused &&
-            index === 0
-            ? 0
-            : -1;
+    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) => {
+            onClick: (e)=>{
                 e.stopPropagation();
             },
-            onBlur: () => setFocused(false),
-            onFocus: () => {
+            onBlur: ()=>setFocused(false),
+            onFocus: ()=>{
                 focusTag(index);
                 setFocused(true);
             },
-            onKeyDown: (e) => {
+            onKeyDown: (e)=>{
                 const focusedIndex = focusedIndexRef.current;
-                switch (e.key) {
+                switch(e.key){
                     case 'Backspace':
                         {
                             const lengthBeforeDelete = tags.length;
-                            focusTag(lengthBeforeDelete === 1
-                                ? -1
-                                : focusedIndex === 0
-                                    ? 0
-                                    : focusedIndex - 1);
+                            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(lengthBeforeDelete === 1
-                                ? -1
-                                : focusedIndex === tags.length - 1
-                                    ? focusedIndex - 1
-                                    : focusedIndex);
+                            focusTag(// * when length is 1 mean that will be remove all
+                            lengthBeforeDelete === 1 ? -1 : focusedIndex === tags.length - 1 ? focusedIndex - 1 : focusedIndex);
                             removeTag(selectedItem);
                         }
                         break;
@@ -1028,13 +1233,13 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
                         break;
                 }
             },
-            onDelete: (e) => {
-                if (e.button !== 0)
-                    return;
+            onDelete: (e)=>{
+                // * only allow left button click
+                if (e.button !== 0) return;
                 removeTag(selectedItem);
                 setFocused(false);
                 inputRef.current?.focus();
-            },
+            }
         }, restTagProps);
     };
     return {
@@ -1049,39 +1254,43 @@ const useAutocompleteTag = ({ id: AutocompleteId, value: selectedItemsProp = [],
         getTagProps,
         focusTag,
         addTagOnSelect,
-        clearTags: () => setTags([]),
-        blur: () => {
+        clearTags: ()=>setTags([]),
+        blur: ()=>{
             if (focusedIndexRef.current !== -1) {
                 focusTag(-1, false);
             }
             setFocused(false);
         },
-        reset: () => focusTag(-1),
-        focusLast: () => {
+        reset: ()=>focusTag(-1),
+        focusLast: ()=>{
             const currTagsLength = tags.length;
-            if (currTagsLength <= 0)
-                return;
+            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, isOptionEqualToValue, }) => {
+const useAutocomplete_DEFAULT_HIGHLIGHTED_INDEX = -1;
+const useAutocomplete_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 = useAutocomplete_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 autoCompleteSelectedIndexRef = useRef(useAutocomplete_DEFAULT_HIGHLIGHTED_INDEX);
     const AutocompleteId = useId('Autocomplete', true);
     const [inputFocused, setInputFocused] = useControlled({
         controlled: focused,
         default: false,
-        name: 'useAutocomplete',
+        name: 'useAutocomplete'
     });
     const [isOpen, setIsOpen] = useControlled({
         controlled: openProp,
         default: initialIsOpen || false,
-        name: 'useAutocomplete',
+        name: 'useAutocomplete'
     });
     const isInputValueChangedRef = useRef(false);
     const isCompositionRef = useRef(false);
@@ -1092,16 +1301,17 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
     const popperElementRef = useRef(null);
     const { sleep, getSleeping } = useSleep();
     const { requestAnimationFrame } = useAnimationFrame();
+    // * when that is autocomplete, that will never be multiple
     const multiple = isAutocomplete ? false : multipleProp;
-    const inputContainerScrollToBottom = () => {
-        requestAnimationFrame(() => {
+    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({
+    const { isSelectedFromAutocompleteRef, tags, focused: tagFocused, addTagOnSelect, checkAndAddFreeSolo, focusedIndex: focusedTagIndex, focusTag, focusLast: focusLastTag, clearTags, blur: blurTags, getTagProps, getTagListBoxProps } = useAutocompleteTag({
         id: AutocompleteId,
         value: selectedItemsProp,
         onChange: onSelectChange,
@@ -1117,50 +1327,58 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         multiple,
         required,
         disabled,
-        getStopCreateFreeSolo: () => isCompositionRef.current,
-        onReset: () => {
+        // * when is composition, stop freeSolo create new item
+        getStopCreateFreeSolo: ()=>isCompositionRef.current,
+        onReset: ()=>{
             resetState();
         },
-        onAddTags: inputContainerScrollToBottom,
+        onAddTags: inputContainerScrollToBottom
     });
-    const processFilteredResult = useCallback((results, inputValue = '') => {
-        const getInputValueAsItem = () => {
+    const processFilteredResult = useCallback((results, inputValue = '')=>{
+        const getInputValueAsItem = ()=>{
             const label = inputValue.trim();
             if (label.length > 0) {
                 return {
                     id: EMPTY_TAG_TOKEN,
                     freeSolo: true,
-                    label,
+                    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) {
+                switch(addNoOptionItem){
                     case 'first':
                         noOptionItemRef.current = null;
-                        return [item, ...results];
+                        return [
+                            item,
+                            ...results
+                        ];
                     case 'last':
                         noOptionItemRef.current = null;
-                        return [...results, item];
+                        return [
+                            ...results,
+                            item
+                        ];
+                    default:
+                        break;
                 }
             }
             if (results.length === 0 && renderNoOptions === true) {
                 if (item) {
                     noOptionItemRef.current = item;
-                }
-                else {
+                } else {
                     noOptionItemRef.current = {
                         id: EMPTY_TAG_TOKEN,
-                        label: '',
+                        label: ''
                     };
                 }
-            }
-            else if (results.length > 0) {
+            } else if (results.length > 0) {
                 noOptionItemRef.current = null;
             }
             return results;
@@ -1168,36 +1386,48 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         if (results.length === 0) {
             const item = getInputValueAsItem();
             if (renderNoOptions === true) {
+                // * when using boolean renderNoOptions, always create a noOptionItem
                 if (item) {
                     noOptionItemRef.current = item;
-                }
-                else {
+                } else {
                     noOptionItemRef.current = {
                         id: EMPTY_TAG_TOKEN,
-                        label: '',
+                        label: ''
                     };
                 }
-            }
-            else {
+            } else {
+                // * keep existing behavior for function / undefined renderNoOptions
                 noOptionItemRef.current = item;
             }
+            // * only when not set render no options will auto add item
             if (item && freeSolo && !renderNoOptions) {
-                return [...results, item];
+                // * 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) => {
+    }, [
+        addNoOptionItem,
+        freeSolo,
+        renderNoOptions
+    ]);
+    const filterOptions = useCallback((items, state)=>{
         if (filterOptionsProp) {
             return filterOptionsProp(items, {
                 ...state,
                 inputChanged: isInputValueChangedRef.current,
-                selectedItems: tags,
+                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({
+    }, [
+        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,
@@ -1217,35 +1447,36 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         onGroupExpanded,
         getExpandIconProps,
         isOptionEqualToValue,
-        onSelect: (e, selectedItem) => {
+        onSelect: (e, selectedItem)=>{
             addTagOnSelect(selectedItem);
             resetState(e);
             if (disableCloseOnSelect) {
                 if (autoHighlight) {
                     const currIndex = highlightedIndexRef.current;
                     const nextValidIndex = getNextFocusableOption();
-                    const toIndex = nextValidIndex > currIndex ||
-                        nextValidIndex === optionItems.length - 1
-                        ? nextValidIndex - 1
-                        : nextValidIndex;
+                    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,
+                        reRender: true
                     });
-                }
-                else {
-                    highlightedIndexRef.current = DEFAULT_HIGHLIGHTED_INDEX;
+                } else {
+                    highlightedIndexRef.current = useAutocomplete_DEFAULT_HIGHLIGHTED_INDEX;
                 }
             }
-        },
+        }
     });
-    const getItemProps = (props) => {
+    const getItemProps = (props)=>{
         return getSuggestionListItemProps(props);
     };
     const readOnly = !isAutocomplete && !multiple && tags.length >= 1 ? true : undefined;
-    const closeMenu = (e, reason) => {
+    const closeMenu = (e, reason)=>{
         keepHighlightedIndexRef.current = false;
         isInputValueChangedRef.current = false;
-        setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
+        // * set to default highlighted
+        setHighlightedIndex(useAutocomplete_DEFAULT_HIGHLIGHTED_INDEX, {
+            reason: 'auto'
+        });
         if (isOpen) {
             if (e && reason) {
                 onClose?.(e, reason);
@@ -1253,43 +1484,45 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
             setIsOpen(false);
         }
     };
-    const openMenu = (e) => {
+    const openMenu = (e)=>{
         if (!isOpen) {
-            if (e)
-                onOpen?.(e);
+            if (e) onOpen?.(e);
             setIsOpen(true);
         }
     };
-    const toggleMenu = (e, focus = true) => {
+    const toggleMenu = (e, focus = true)=>{
         if (isOpen) {
             closeMenu(e, 'toggleInput');
-        }
-        else {
+        } else {
             openMenu(e);
-            if (focus)
-                focusInput();
+            if (focus) focusInput();
         }
     };
-    const handleInputChange = (newValue, open = true, e) => {
+    const handleInputChange = (newValue, open = true, e)=>{
         if (inputValue !== newValue) {
-            setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
+            setHighlightedIndex(useAutocomplete_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);
+                const resultHaveAdd = checkAndAddFreeSolo({
+                    value: newValue
+                }, e);
                 if (!disableCloseOnSelect) {
                     closeMenu(e, 'toggleInput');
-                }
-                else if (open) {
+                } else if (open) {
                     openMenu(e);
                 }
                 return resultHaveAdd;
             }
             updateInputValue(newValue);
         }
-        if (open)
-            openMenu(e);
+        if (open) openMenu(e);
         return false;
     };
-    const resetState = (e) => {
+    const resetState = (e)=>{
+        // * when autocomplete select mode not reset input value
         if (!isSelectedFromAutocompleteRef.current) {
             clearInput();
         }
@@ -1301,148 +1534,164 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
             closeMenu(e, 'select-option');
         }
     };
-    const reset = (isFocus) => {
+    const reset = (isFocus)=>{
         resetState();
         onSelectChange?.([]);
         resetSuggestionList(isFocus);
     };
-    const keepHighlightedIndex = () => {
+    const keepHighlightedIndex = ()=>{
         keepHighlightedIndexRef.current = true;
     };
-    useChange(() => {
+    // * 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' });
+            setHighlightedIndex(useAutocomplete_DEFAULT_HIGHLIGHTED_INDEX, {
+                reason: 'auto'
+            });
         }
-    }, () => options);
-    const defaultHighlightedIndex = useMemo(() => {
+    }, ()=>options);
+    // * check that defaultHighlightedIndex
+    const defaultHighlightedIndex = useMemo(()=>{
         return autoHighlight ? getNextFocusableOption(0) : -1;
-    }, [autoHighlight, getNextFocusableOption]);
+    }, [
+        autoHighlight,
+        getNextFocusableOption
+    ]);
+    // * only when menu is open set to defaultHighlightedIndex
     if (isOpen) {
-        if (highlightedIndexRef.current === DEFAULT_HIGHLIGHTED_INDEX) {
+        if (highlightedIndexRef.current === useAutocomplete_DEFAULT_HIGHLIGHTED_INDEX) {
             let toIndex = defaultHighlightedIndex;
             if (isAutocomplete && tags.length === 1) {
                 const itemText = getOptionLabel(tags[0]);
-                const fIndex = optionItems.findIndex((x) => getOptionLabel(x) === itemText);
+                const fIndex = optionItems.findIndex((x)=>getOptionLabel(x) === itemText);
                 if (fIndex > -1) {
                     toIndex = fIndex;
                     autoCompleteSelectedIndexRef.current = fIndex;
                 }
             }
-            setHighlightedIndex(toIndex, { reason: 'auto' });
-        }
-        else {
+            setHighlightedIndex(toIndex, {
+                reason: 'auto'
+            });
+        } else {
             const currIndex = highlightedIndexRef.current;
             const availableIndex = getNextFocusableOption(currIndex);
             if (currIndex !== availableIndex) {
-                requestAnimationFrame(() => {
+                requestAnimationFrame(()=>{
                     setHighlightedIndex(availableIndex, {
                         reason: 'auto',
-                        reRender: true,
+                        reRender: true
                     });
                 });
             }
         }
     }
-    const handleAutocompleteText = () => {
+    const handleAutocompleteText = ()=>{
         if (isAutocomplete && tags.length > 0) {
             const result = getOptionLabel(tags[0]);
             onInputChangeProp?.(result);
         }
     };
-    useLayoutEffect(() => {
+    // * use force update to sync open state when init is open
+    useLayoutEffect(()=>{
         if (isOpen) {
             forceUpdate();
         }
         handleAutocompleteText();
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const getInputProps = (props) => {
+    const getInputProps = (props)=>{
         const suggestionListInputProps = getSuggestionListInputProps(props);
         return combineProps({
             ...suggestionListInputProps,
-            onPaste: (e) => {
+            onPaste: (e)=>{
                 if (freeSolo) {
                     const clipboardData = e.clipboardData;
                     const { position } = getSelectionPosition(inputRef);
                     const currText = inputValue ?? '';
                     const pasteText = clipboardData.getData('Text') ?? '';
-                    fromPasteString.current =
-                        currText.slice(0, position.start) +
-                            pasteText +
-                            currText.slice(position.end);
+                    // * 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) => {
+            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) => {
+            onFocus: (e)=>{
                 setInputFocused(true);
-                if (openOnFocus)
-                    openMenu(e);
+                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) => {
+            onBlur: (e)=>{
                 setInputFocused(false);
-                if (popperElementRef.current?.contains(e.relatedTarget))
-                    return;
+                // 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]);
+                    if (!freeSolo) selectItem(e, optionItems[highlightedIndexRef.current]);
                     checkAndAddFreeSolo({}, e);
                 }
+                // * when blur should restore text when have selected item
                 handleAutocompleteText();
                 closeMenu(e, 'blur');
             },
-            onCompositionStart: () => {
+            onCompositionStart: ()=>{
                 isCompositionRef.current = true;
             },
-            onCompositionEnd: async () => {
+            onCompositionEnd: async ()=>{
+                // sleep for prevent tab in composition
                 await sleep(20);
                 isCompositionRef.current = false;
             },
-            onKeyDown: (e) => {
+            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') {
+                if (!isSelectRange && position.start === 0 && currTagsLength > 0 && e.key === 'Backspace') {
                     stopAutoSelectRef.current = true;
                     focusLastTag();
-                }
-                else {
+                } else {
                     const highlightedIndex = highlightedIndexRef.current;
-                    switch (e.key) {
+                    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 (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) {
@@ -1450,32 +1699,24 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                                         e.preventDefault();
                                         e.stopPropagation();
                                     }
-                                }
-                                else if (checkAndAddFreeSolo({}, e)) {
+                                } 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)) {
+                            if (e.which === 229) return;
+                            if (freeSolo && highlightedIndex === useAutocomplete_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) {
+                            } else if (highlightedIndex !== useAutocomplete_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':
@@ -1487,6 +1728,7 @@ 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();
@@ -1503,66 +1745,70 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
                     }
                 }
             },
-            onMouseDown: toggleWithInput
-                ? (e) => {
-                    if (!isOpen || (isOpen && !inputValue)) {
-                        toggleMenu(e, false);
-                    }
+            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,
+            } : undefined
         }, props);
     };
-    const getInputAriaProps = (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,
+            'aria-owns': isOpen ? suggestionListInputAriaProps['aria-owns'] : undefined,
+            'aria-expanded': !!isOpen
         }, props);
     };
-    const getPopperProps = (restPopperProps) => {
+    const getPopperProps = (restPopperProps)=>{
         return combineProps({
             id: `${AutocompleteId}-popper`,
             role: 'presentation',
-            onMouseDown: (e) => {
+            onMouseDown: (e)=>{
                 e.preventDefault();
                 e.stopPropagation();
-            },
+            }
         }, restPopperProps);
     };
-    const getToggleButtonProps = (props) => {
+    const getToggleButtonProps = (props)=>{
         return combineProps({
-            disabled: (!isOpen && optionItems.length === 0) || disabled || readOnly,
+            disabled: !isOpen && optionItems.length === 0 || disabled || readOnly,
             id: `${AutocompleteId}-toggle-button`,
-            onMouseDown: (e) => {
+            onMouseDown: (e)=>{
                 e.preventDefault();
                 e.stopPropagation();
             },
             onClick: toggleMenu,
-            tabIndex: -1,
+            tabIndex: -1
         }, props);
     };
-    const getClearButtonProps = (props) => {
+    const getClearButtonProps = (props)=>{
         const suggestionListClearButtonProps = getSuggestionListClearButtonProps(props);
         return combineProps({
             ...suggestionListClearButtonProps,
             disabled,
-            onClick: (e) => {
+            onClick: (e)=>{
                 onClear?.(e);
                 reset(true);
-            },
+            }
         }, props);
     };
-    const getNoOptionsProps = (additionProps) => {
+    const getNoOptionsProps = (additionProps)=>{
         return combineProps({
-            onClick: (e) => {
+            onClick: (e)=>{
                 closeMenu(e, 'blur');
             },
-            role: 'presentation',
+            role: 'presentation'
         }, additionProps);
     };
     return {
@@ -1597,32 +1843,74 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
         reset,
         forceUpdate,
         optionsGroupList,
-        focused: focused ?? (tagFocused || inputFocused ? true : undefined),
+        /** 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,
+        popperElementRef
     };
 };
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 const ChipSizeMap = {
     xlarge: 'large',
     large: 'medium',
-    medium: 'small',
+    medium: 'small'
 };
-const InputComponent = forwardRef(({ startAdornment, containerRef, containerClassName, onContainerClick, ...rest }, ref) => {
-    return (jsxs("div", { ref: containerRef, className: containerClassName, onClick: onContainerClick, children: [startAdornment, jsx("input", { ...rest, ref: ref })] }));
+const InputComponent = /*#__PURE__*/ forwardRef(({ startAdornment, containerRef, containerClassName, onContainerClick, ...rest }, ref)=>{
+    return(// oxlint-disable-next-line jsx-a11y/click-events-have-key-events
+    /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
+        className: containerClassName,
+        onClick: onContainerClick,
+        children: [
+            startAdornment,
+            /*#__PURE__*/ jsx("input", {
+                ...rest,
+                ref: ref
+            })
+        ]
+    }));
 });
-const TextInput = forwardRef(({ renderInput, ...rest }, ref) => {
+const TextInput = /*#__PURE__*/ forwardRef(({ renderInput, ...rest }, ref)=>{
     if (renderInput) {
-        return renderInput({ ...rest, ref });
+        return renderInput({
+            ...rest,
+            ref
+        });
     }
-    return jsx(TextField, { ref: ref, ...rest });
+    return /*#__PURE__*/ jsx(TextField_TextField, {
+        ref: ref,
+        ...rest
+    });
 });
-const Autocomplete = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Autocomplete' });
+const Autocomplete_Autocomplete = /*#__PURE__*/ 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', ...PopperProps } = {}, initialIsOpen, disabled, required: requiredProp, disableCloseOnSelect = multiple, onChange: onChangeProp, onInputChange: onInputChangeProp, onMaxFreeSolo, FormHelperTextProps, action, filterOptions, renderOption, renderTags, getOptionDisabled, renderGroup, renderNoOptions, noOptionsText = 'No matches found', inputProps, debug, disabledItemsHighlightable, open: openProp, addNoOptionItem, onOpen, onClose, focused, classes, className, fullWidth = true, size = 'xlarge', isOptionEqualToValue, ...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', // transition: popperTransition,
+    // TransitionComponent = virtualize ? RcFade : RcGrow,
+    // transitionDuration: transitionDurationProp = 'auto',
+    // TransitionProps: TransitionPropsProp = {},
+    children: _popperChildrenIgnored, ...PopperProps } = {}, initialIsOpen, disabled, required: requiredProp, disableCloseOnSelect = multiple, onChange: onChangeProp, onInputChange: onInputChangeProp, onMaxFreeSolo, FormHelperTextProps, action, filterOptions, renderOption, renderTags, getOptionDisabled, renderGroup, renderNoOptions, noOptionsText = 'No matches found', inputProps, // InputProps: InputPropsProp,
+    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);
@@ -1633,7 +1921,10 @@ 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, getItemProps, isOpen, inputValue, activeIndex, setActiveIndex, setHighlightedIndex, onInputChange, keepHighlightedIndex, changeHighlightedIndexReason, closeMenu, openMenu, reset, getClearButtonProps, noOptionItem, getNoOptionsProps, isKeepHighlightedIndex, popperElementRef, } = useAutocomplete({
+    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,
@@ -1674,102 +1965,242 @@ const Autocomplete = forwardRef((inProps, ref) => {
         disabledItemsHighlightable,
         onGroupExpanded,
         isOptionEqualToValue,
+        onClear
     });
     const open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     const { onBlur, ...InputProps } = getInputProps(inputProps);
     const helperText = helperTextProp;
     const toTextFieldRef = useForkRef(textFieldRef, ref);
-    const startAdornment = (() => {
+    const startAdornment = (()=>{
         if (isAutocomplete || selectedItems.length === 0) {
             return undefined;
         }
-        const getCustomizedTagProps = (selectedItem, index) => {
+        const getCustomizedTagProps = (selectedItem, index)=>{
             const tagProps = getTagProps({
                 selectedItem,
                 index,
                 label: getOptionLabel(selectedItem),
-                disabled,
+                disabled
             });
             if (selectedItem.error) {
                 oneOfTagError = true;
             }
-            return { ...tagProps, size: ChipSizeMap[size], className: cls('chip') };
+            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));
-            });
+        return renderTags ? renderTags(selectedItems, getCustomizedTagProps) : selectedItems.map((selectedItem, index)=>{
+            const { children, key, ...itemChipProps } = getCustomizedTagProps(selectedItem, index);
+            return /*#__PURE__*/ jsx(Chip_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({
+    const endAdornment = (toggleButton || clearBtn) && /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            clearBtn && (selectedItems.length > 0 || inputValue) && /*#__PURE__*/ jsx(IconButton_IconButton, {
+                shape: 'squircle',
+                background: false,
+                color: 'secondary',
+                variant: "contained",
+                size: "small",
+                symbol: Xsm,
+                ...getClearButtonProps(combineProps({
+                    className: cls('clear')
+                }, ClearButtonProps))
+            }),
+            toggleButton && /*#__PURE__*/ jsx(IconButton_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: /*#__PURE__*/ jsx(ExpandCollapseCaret_ExpandCollapseCaret, {
+                    size: 'small',
+                    expanded: open
+                }),
+                ...getToggleButtonProps({
                     ...ToggleButtonProps,
-                    ...getToggleButtonPropsProp?.(open),
-                }) }))] }));
+                    ...getToggleButtonPropsProp?.(open)
+                })
+            })
+        ]
+    });
     const TextFieldInputProps = {
         'aria-label': typeof label === 'string' ? label : undefined,
         ...getTagListBoxProps(),
         ...InputProps,
-        onBlur: debug ? undefined : onBlur,
+        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,
-    }));
+    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 hasNoOptionItem = !!noOptionItem;
     const shouldRenderNoOptions = renderNoOptions === true || typeof renderNoOptions === 'function';
     const willRenderNoOptions = hasNoOptionItem && shouldRenderNoOptions;
-    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 && (jsx(Fragment, { children: renderNoOptions === true ? (jsx("div", { ...getNoOptionsProps({
-                        className: cls('status-container'),
-                    }), children: jsx("span", { className: cls('status-label'), children: noOptionsText }) })) : typeof renderNoOptions === 'function' ? (renderNoOptions(getNoOptionsProps, noOptionItem)) : null }))] }));
-    const isPopperContentEmpty = !isOpen || (!willRenderNoOptions && optionItems.length === 0);
+    // const popperRef: ComponentProps<typeof StyledPopper>['popperRef'] =
+    //   useRef(null);
+    // const handleUpdatePopper = useEventCallback(() => {
+    //   popperRef.current?.update();
+    // });
+    // Track previous highlightedIndex to detect list re-initialization in SuggestionList
+    // When prev is -1, it indicates the list needs scroll reset (menu opened, input changed, etc.)
+    const prevHighlightedIndex = usePrevious(()=>highlightedIndex, true);
+    const menuChildren = // * that root element for animation host
+    isOpen && /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(SuggestionList_SuggestionList, {
+                // TODO: deprecated, need to check if it will cause error when variant is 'autocomplete'
+                // selectedIndex={isAutocomplete ? autoCompleteSelectedIndex : undefined}
+                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,
+                // onContainerHeightChange={handleUpdatePopper}
+                maxContainerHeight: 180,
+                getOptionLabel: getOptionLabel,
+                position: "unset",
+                virtualize: virtualize,
+                ...SuggestionListProps
+            }),
+            willRenderNoOptions && /*#__PURE__*/ jsx(Fragment, {
+                children: renderNoOptions === true ? /*#__PURE__*/ jsx("div", {
+                    ...getNoOptionsProps({
+                        className: cls('status-container')
+                    }),
+                    children: /*#__PURE__*/ jsx("span", {
+                        className: cls('status-label'),
+                        children: noOptionsText
+                    })
+                }) : typeof renderNoOptions === 'function' ? renderNoOptions(getNoOptionsProps, noOptionItem) : null
+            })
+        ]
+    });
+    const isPopperContentEmpty = !isOpen || !willRenderNoOptions && optionItems.length === 0;
     const popperCls = useClasses('autocomplete-popper', PopperProps?.classes, PopperProps?.className);
-    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, error: error ?? oneOfTagError, FormHelperTextProps: FormHelperTextProps, inputComponent: InputComponent, endAdornment: endAdornment, helperText: helperText, size: size, ...combineProps({
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ 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,
+                        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 }),
+                        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 }) })) })] }));
+                    input: cls('input', `input-${size}`)
+                },
+                value: inputValue,
+                clearBtn: false
+            }),
+            /*#__PURE__*/ jsx(AnimatePresence, {
+                children: open && /*#__PURE__*/ jsx(PopperComponent, {
+                    matchAnchorWidth: true,
+                    offset: 2,
+                    ...getPopperProps(PopperProps),
+                    className: popperCls('root'),
+                    ref: popperElementRef,
+                    anchorEl: anchorElRef.current,
+                    children: /*#__PURE__*/ jsx(motion.div, {
+                        ...getFade({
+                            prefersReducedMotion
+                        }),
+                        className: popperCls('paper', {
+                            empty: isPopperContentEmpty
+                        }),
+                        children: menuChildren
+                    })
+                })
+            })
+        ]
+    });
 });
-Autocomplete.displayName = 'SuiAutocomplete';
-const RcAutocompleteDefaultFilterOptions = (options, { inputValue, getOptionLabel, selectedItems, isOptionEqualToValue }) => {
-    return options.filter((item) => {
-        const isSelected = selectedItems.some((selected) => isOptionEqualToValue(item, selected));
-        if (isSelected)
-            return false;
+Autocomplete_Autocomplete.displayName = 'SuiAutocomplete';
+
+/**
+ * default Autocomplete filter options method, use with `variant="tags"`
+ *
+ * - filter options by input value and selected items
+ * - uses `isOptionEqualToValue` to determine if an option is already selected
+ */ const RcAutocompleteDefaultFilterOptions = (options, { inputValue, getOptionLabel, selectedItems, isOptionEqualToValue })=>{
+    return options.filter((item)=>{
+        // Check if this option is already selected using the equality function
+        const isSelected = selectedItems.some((selected)=>isOptionEqualToValue(item, selected));
+        if (isSelected) return false;
+        // Filter by input text
         const optionLabel = getOptionLabel?.(item) || '';
-        return optionLabel
-            .toLowerCase()
-            .startsWith(inputValue?.toLowerCase() || '');
+        return optionLabel.toLowerCase().startsWith(inputValue?.toLowerCase() || '');
     });
 };
 
-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 };
+
+
+
+
+
+
+
+export { Autocomplete as autocompleteStyles, Autocomplete_Autocomplete as Autocomplete, DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, DEFAULT_PADDING, RcAutocompleteDefaultFilterOptions, SuggestionList as suggestionListStyles, SuggestionListItem, SuggestionList_SuggestionList as SuggestionList, getPaddingValue, isFirstInGroup, stringArrToRegExp, useAutocomplete, useAutocompleteGroup, useAutocompleteTag, useDynamicHeight, useHighlightScroll, useSuggestionList };