@ringcentral/juno 2.13.1 → 2.16.0

package/components/Downshift/Downshift.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ComponentType } from 'react';
 import { CustomStyledComponentResult, RcBaseProps, RcClassesProps } from '../../foundation';
 import { RcIconButtonProps } from '../Buttons/IconButton';
 import { RcTextFieldProps } from '../Forms/TextField';
@@ -7,11 +7,14 @@ import { WithTooltipProps } from '../Tooltip';
 import { RcDownshiftInput } from './styles';
 import { RcSuggestionListProps } from './SuggestionList';
 import { RcDownshiftDefaultFilterOptions, RcDownshiftFilterOptions, RcDownshiftGroupedOption, RcDownshiftSelectedItem, RcDownshiftSelectedItemAdditionProps } from './utils';
+import { TransitionProps as MuiTransitionProps } from '@material-ui/core/transitions';
 export interface RcDownshiftRenderOptionState {
     /** current input value */
     inputValue?: string;
     /** is that item selected */
     selected: boolean;
+    /** is that item be show highlighted style */
+    highlighted?: boolean;
     /** that item index */
     index: number;
     /** sort index in option own group */
@@ -177,12 +180,53 @@ declare type RcDownshiftProps<T extends RcDownshiftSelectedItem = RcDownshiftSel
      * a different option or changes the character string in the input.
      */
     autoSelect?: boolean;
+    /**
+     * custom PopperComponent for render
+     *
+     * @default RcPopper
+     */
+    PopperComponent?: ComponentType<RcPopperProps>;
     /** props for apply on `RcPopper` */
-    PopperProps?: RcBaseProps<RcPopperProps, 'open' | 'keepMounted' | 'anchorEl' | 'style'>;
+    PopperProps?: RcBaseProps<Partial<RcPopperProps>, 'open' | 'keepMounted' | 'anchorEl' | 'style'> & {
+        /**
+         * typeof that popper `anchorEl` binding when menu open
+         *
+         * - `root`: on that whole TextField
+         * - `input`: on that inside input
+         * @default 'root'
+         */
+        anchorElType?: 'root' | 'input';
+        /**
+         * The component used for the transition.
+         *
+         * default will base on `SuggestionListProps.virtualize`
+         * @default virtualize ? `RcFade` : `RcGrow`
+         */
+        TransitionComponent?: React.JSXElementConstructor<MuiTransitionProps & {
+            children: React.ReactElement<any, any>;
+        }>;
+        /**
+         * Set to 'auto' to automatically calculate transition time based on height.
+         * @default 'auto'
+         */
+        transitionDuration?: MuiTransitionProps['timeout'] | 'auto';
+        /**
+         * Props applied to the transition element.
+         * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+         * @default {}
+         */
+        TransitionProps?: MuiTransitionProps;
+    };
     /** is have ToggleButton */
     toggleButton?: boolean;
     /** Props for apply on ToggleButton */
-    ToggleButtonProps?: RcBaseProps<RcIconButtonProps & WithTooltipProps, 'symbol'>;
+    ToggleButtonProps?: RcIconButtonProps & WithTooltipProps;
+    /**
+     * get custom `ToggleButtonProps` with menu open state.
+     *
+     * that can be use when you need custom toggle button icon, that will override props you pass inside `ToggleButtonProps`
+     */
+    getToggleButtonProps?: (isOpen: boolean) => RcDownshiftProps<T>['ToggleButtonProps'];
     /**
      * A ref for imperative actions.
      *

package/components/Downshift/Downshift.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var juno_icon_1 = require("@ringcentral/juno-icon");
+var Fade_1 = require("../Transitions/Fade");
+var Grow_1 = require("../Transitions/Grow");
 var foundation_1 = require("../../foundation");
 var Chip_1 = require("../Chip");
 var ClearIconButton_1 = require("../Forms/TextField/styles/ClearIconButton");
@@ -12,6 +14,10 @@ exports.RcDownshiftInput = styles_1.RcDownshiftInput;
 var SuggestionList_1 = require("./SuggestionList");
 var utils_1 = require("./utils");
 exports.RcDownshiftDefaultFilterOptions = utils_1.RcDownshiftDefaultFilterOptions;
+/**
+ * default transition style for grow when not virtualize
+ */
+var DEFAULT_GROW_STYLE = { style: { transformOrigin: '0 0 0' } };
 var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDownshift' });
     if (process.env.NODE_ENV !== 'production') {
@@ -125,21 +131,27 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         ]);
     }
     var theme = foundation_1.useTheme();
-    var _a = props.itemToString, itemToString = _a === void 0 ? utils_1.DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? utils_1.DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? utils_1.DEFAULT_LIMIT_CHIPS : _c, minRowHeight = props.minRowHeight, suggestionItems = props.suggestionItems, messageRef = props.messageRef, MenuItem = props.MenuItem, inputLabel = props.inputLabel, nameError = props.nameError, maxLength = props.maxLength, InputItem = props.InputItem, emailError = props.emailError, autoSwitchEmail = props.autoSwitchEmail, enableFreeChips = props.enableFreeChips, inputPlaceholder = props.inputPlaceholder, errorSelectedItems = props.errorSelectedItems, enableAutoTransform = props.enableAutoTransform, allowPlainHelperText = props.allowPlainHelperText, TextFieldProps = props.TextFieldProps, selectedItemsProp = props.selectedItems, automationId = props.automationId, screenReader = props.screenReader, onSelectChange = props.onSelectChange, variant = props.variant, groupExpanded = props.groupExpanded, groupDefaultExpanded = props.groupDefaultExpanded, _d = props.groupVariant, groupVariant = _d === void 0 ? 'normal' : _d, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _e = props.value, valueProp = _e === void 0 ? selectedItemsProp : _e, _f = props.autoHighlight, autoHighlight = _f === void 0 ? true : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? true : _g, _h = props.clearBtn, clearBtn = _h === void 0 ? false : _h, _j = props.toggleButton, toggleButton = _j === void 0 ? false : _j, _k = props.multiple, multiple = _k === void 0 ? false : _k, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _l = props.getOptionLabel, getOptionLabel = _l === void 0 ? itemToString : _l, renderInput = props.renderInput, _m = props.label, label = _m === void 0 ? inputLabel : _m, _o = props.inputRef, inputRefProp = _o === void 0 ? messageRef : _o, _p = props.error, error = _p === void 0 ? nameError : _p, _q = props.placeholder, placeholder = _q === void 0 ? inputPlaceholder : _q, _r = props.freeSolo, freeSolo = _r === void 0 ? enableFreeChips : _r, _s = props.keyToTags, keyToTags = _s === void 0 ? keyToChips : _s, _t = props.maxFreeSolo, maxFreeSolo = _t === void 0 ? limitOfFreeChips : _t, SuggestionListProps = props.SuggestionListProps, _u = props.autoSelect, autoSelect = _u === void 0 ? enableAutoTransform : _u, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _v = props.defaultIsOpen, defaultIsOpen = _v === void 0 ? openOnFocus : _v, _w = props.disableCloseOnSelect, disableCloseOnSelect = _w === void 0 ? defaultIsOpen : _w, _x = props.onChange, onChangeProp = _x === void 0 ? onSelectChange : _x, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, focused = props.focused, color = props.color, rest = tslib_1.__rest(props, ["itemToString", "keyToChips", "limitOfFreeChips", "minRowHeight", "suggestionItems", "messageRef", "MenuItem", "inputLabel", "nameError", "maxLength", "InputItem", "emailError", "autoSwitchEmail", "enableFreeChips", "inputPlaceholder", "errorSelectedItems", "enableAutoTransform", "allowPlainHelperText", "TextFieldProps", "selectedItems", "automationId", "screenReader", "onSelectChange", "variant", "groupExpanded", "groupDefaultExpanded", "groupVariant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose", "focused", "color"]);
-    var _y = tslib_1.__read(react_1.useState('bottom'), 2), position = _y[0], setPosition = _y[1];
+    var _a = props.itemToString, itemToString = _a === void 0 ? utils_1.DEFAULT_GET_OPTION_LABEL : _a, _b = props.keyToChips, keyToChips = _b === void 0 ? utils_1.DEFAULT_KEY_TO_CHIPS : _b, _c = props.limitOfFreeChips, limitOfFreeChips = _c === void 0 ? utils_1.DEFAULT_LIMIT_CHIPS : _c, minRowHeight = props.minRowHeight, suggestionItems = props.suggestionItems, messageRef = props.messageRef, MenuItem = props.MenuItem, inputLabel = props.inputLabel, nameError = props.nameError, maxLength = props.maxLength, InputItem = props.InputItem, emailError = props.emailError, autoSwitchEmail = props.autoSwitchEmail, enableFreeChips = props.enableFreeChips, inputPlaceholder = props.inputPlaceholder, errorSelectedItems = props.errorSelectedItems, enableAutoTransform = props.enableAutoTransform, allowPlainHelperText = props.allowPlainHelperText, TextFieldProps = props.TextFieldProps, selectedItemsProp = props.selectedItems, automationId = props.automationId, screenReader = props.screenReader, onSelectChange = props.onSelectChange, variant = props.variant, groupExpanded = props.groupExpanded, groupDefaultExpanded = props.groupDefaultExpanded, _d = props.groupVariant, groupVariant = _d === void 0 ? 'normal' : _d, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _e = props.value, valueProp = _e === void 0 ? selectedItemsProp : _e, _f = props.autoHighlight, autoHighlight = _f === void 0 ? true : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? true : _g, _h = props.clearBtn, clearBtn = _h === void 0 ? false : _h, _j = props.toggleButton, toggleButton = _j === void 0 ? false : _j, _k = props.multiple, multiple = _k === void 0 ? false : _k, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, _l = props.getToggleButtonProps, getToggleButtonPropsProp = _l === void 0 ? function (isOpen) {
+        return {
+            symbol: isOpen ? juno_icon_1.ArrowUp : juno_icon_1.ArrowDown,
+        };
+    } : _l, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _m = props.getOptionLabel, getOptionLabel = _m === void 0 ? itemToString : _m, renderInput = props.renderInput, _o = props.label, label = _o === void 0 ? inputLabel : _o, _p = props.inputRef, inputRefProp = _p === void 0 ? messageRef : _p, _q = props.error, error = _q === void 0 ? nameError : _q, _r = props.placeholder, placeholder = _r === void 0 ? inputPlaceholder : _r, _s = props.freeSolo, freeSolo = _s === void 0 ? enableFreeChips : _s, _t = props.keyToTags, keyToTags = _t === void 0 ? keyToChips : _t, _u = props.maxFreeSolo, maxFreeSolo = _u === void 0 ? limitOfFreeChips : _u, _v = props.SuggestionListProps, _w = _v === void 0 ? {} : _v, _x = _w.virtualize, virtualize = _x === void 0 ? true : _x, SuggestionListProps = tslib_1.__rest(_w, ["virtualize"]), _y = props.autoSelect, autoSelect = _y === void 0 ? enableAutoTransform : _y, PopperComponent = props.PopperComponent, _z = props.PopperProps, _0 = _z === void 0 ? {} : _z, _1 = _0.anchorElType, anchorElType = _1 === void 0 ? 'root' : _1, popperTransition = _0.transition, _2 = _0.TransitionComponent, TransitionComponent = _2 === void 0 ? virtualize ? Fade_1.RcFade : Grow_1.RcGrow : _2, _3 = _0.transitionDuration, transitionDurationProp = _3 === void 0 ? 'auto' : _3, _4 = _0.TransitionProps, TransitionPropsProp = _4 === void 0 ? {} : _4, PopperProps = tslib_1.__rest(_0, ["anchorElType", "transition", "TransitionComponent", "transitionDuration", "TransitionProps"]), initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _5 = props.defaultIsOpen, defaultIsOpen = _5 === void 0 ? openOnFocus : _5, _6 = props.disableCloseOnSelect, disableCloseOnSelect = _6 === void 0 ? defaultIsOpen : _6, _7 = props.onChange, onChangeProp = _7 === void 0 ? onSelectChange : _7, onInputChangeProp = props.onInputChange, onMaxFreeSolo = props.onMaxFreeSolo, FormHelperTextPropsProp = props.FormHelperTextProps, action = props.action, filterOptions = props.filterOptions, renderOption = props.renderOption, renderTags = props.renderTags, getOptionDisabled = props.getOptionDisabled, renderGroup = props.renderGroup, onGroupExpanded = props.onGroupExpanded, renderNoOptions = props.renderNoOptions, InputPropsProp = props.InputProps, debug = props.debug, disabledItemsHighlightable = props.disabledItemsHighlightable, openProp = props.open, onOpen = props.onOpen, onClose = props.onClose, focused = props.focused, color = props.color, rest = tslib_1.__rest(props, ["itemToString", "keyToChips", "limitOfFreeChips", "minRowHeight", "suggestionItems", "messageRef", "MenuItem", "inputLabel", "nameError", "maxLength", "InputItem", "emailError", "autoSwitchEmail", "enableFreeChips", "inputPlaceholder", "errorSelectedItems", "enableAutoTransform", "allowPlainHelperText", "TextFieldProps", "selectedItems", "automationId", "screenReader", "onSelectChange", "variant", "groupExpanded", "groupDefaultExpanded", "groupVariant", "getExpandIconProps", "groupBy", "value", "autoHighlight", "fullWidth", "clearBtn", "toggleButton", "multiple", "clearButtonProps", "onClear", "ToggleButtonProps", "getToggleButtonProps", "inputValue", "onKeyDown", "helperText", "options", "openOnFocus", "getOptionLabel", "renderInput", "label", "inputRef", "error", "placeholder", "freeSolo", "keyToTags", "maxFreeSolo", "SuggestionListProps", "autoSelect", "PopperComponent", "PopperProps", "initialIsOpen", "disabled", "required", "defaultIsOpen", "disableCloseOnSelect", "onChange", "onInputChange", "onMaxFreeSolo", "FormHelperTextProps", "action", "filterOptions", "renderOption", "renderTags", "getOptionDisabled", "renderGroup", "onGroupExpanded", "renderNoOptions", "InputProps", "debug", "disabledItemsHighlightable", "open", "onOpen", "onClose", "focused", "color"]);
+    var _8 = tslib_1.__read(react_1.useState('bottom-start'), 2), position = _8[0], setPosition = _8[1];
     var innerInputRef = react_1.useRef(null);
     var textFieldRef = react_1.useRef(null);
     var inputRef = foundation_1.useForkRef(inputRefProp, innerInputRef);
     var inputContainerRef = react_1.useRef(null);
     // * if that have pass old suggestionItems mean that use old logic
     var isNew = !suggestionItems;
+    var transitionDuration = transitionDurationProp === 'auto' ? undefined : transitionDurationProp;
+    var anchorElRef = anchorElType === 'input' ? inputContainerRef : textFieldRef;
     var oneOfTagError = false;
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         utils_1.useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
     }
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
-    var _z = utils_1.useDownshift({
+    var _9 = utils_1.useDownshift({
         focused: focused,
         open: openProp,
         variant: variant,
@@ -178,9 +190,9 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _z.focusInput, optionItems = _z.optionItems, optionsGroupList = _z.optionsGroupList, selectedItems = _z.tags, highlightedIndex = _z.highlightedIndex, getToggleButtonProps = _z.getToggleButtonProps, getTagProps = _z.getTagProps, getTagListBoxProps = _z.getTagListBoxProps, getMenuProps = _z.getMenuProps, getPopperProps = _z.getPopperProps, getInputProps = _z.getInputProps, getInputAriaProps = _z.getInputAriaProps, getLabelProps = _z.getLabelProps, getItemProps = _z.getItemProps, isOpen = _z.isOpen, inputValue = _z.inputValue, activeIndex = _z.activeIndex, setActiveIndex = _z.setActiveIndex, setHighlightedIndex = _z.setHighlightedIndex, onInputChange = _z.onInputChange, keepHighlightedIndex = _z.keepHighlightedIndex, changeHighlightedIndexReason = _z.changeHighlightedIndexReason, closeMenu = _z.closeMenu, openMenu = _z.openMenu, reset = _z.reset, getClearButtonProps = _z.getClearButtonProps, noOptionItem = _z.noOptionItem, getNoOptionsProps = _z.getNoOptionsProps, isKeepHighlightedIndex = _z.isKeepHighlightedIndex, isDownshiftFocused = _z.focused;
+    }), focusInput = _9.focusInput, optionItems = _9.optionItems, optionsGroupList = _9.optionsGroupList, selectedItems = _9.tags, highlightedIndex = _9.highlightedIndex, getToggleButtonProps = _9.getToggleButtonProps, getTagProps = _9.getTagProps, getTagListBoxProps = _9.getTagListBoxProps, getMenuProps = _9.getMenuProps, getPopperProps = _9.getPopperProps, getInputProps = _9.getInputProps, getInputAriaProps = _9.getInputAriaProps, getLabelProps = _9.getLabelProps, getItemProps = _9.getItemProps, isOpen = _9.isOpen, inputValue = _9.inputValue, activeIndex = _9.activeIndex, setActiveIndex = _9.setActiveIndex, setHighlightedIndex = _9.setHighlightedIndex, onInputChange = _9.onInputChange, keepHighlightedIndex = _9.keepHighlightedIndex, changeHighlightedIndexReason = _9.changeHighlightedIndexReason, closeMenu = _9.closeMenu, openMenu = _9.openMenu, reset = _9.reset, getClearButtonProps = _9.getClearButtonProps, noOptionItem = _9.noOptionItem, getNoOptionsProps = _9.getNoOptionsProps, isKeepHighlightedIndex = _9.isKeepHighlightedIndex, isDownshiftFocused = _9.focused, autoCompleteSelectedIndex = _9.autoCompleteSelectedIndex;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
-    var _0 = getInputProps(), onBlur = _0.onBlur, InputProps = tslib_1.__rest(_0, ["onBlur"]);
+    var _10 = getInputProps(), onBlur = _10.onBlur, InputProps = tslib_1.__rest(_10, ["onBlur"]);
     var helperText = isNew
         ? helperTextProp
         : nameError || allowPlainHelperText
@@ -205,8 +217,9 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     }
     var toTextFieldRef = foundation_1.useForkRef(textFieldRef, ref);
     var colorHex = react_1.useMemo(function () { return (color ? foundation_1.getParsePaletteColor(color)({ theme: theme }) : undefined); }, [color, theme]);
+    var isAutocomplete = variant === 'autocomplete';
     var startAdornment = (function () {
-        if (variant === 'autocomplete') {
+        if (isAutocomplete) {
             return undefined;
         }
         var getCustomizedTagProps = function (selectedItem, index) {
@@ -246,15 +259,15 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                 ? color || 'interactive.f01'
                 : error
                     ? 'danger.f02'
-                    : 'neutral.f04', size: "large", symbol: isOpen ? juno_icon_1.ArrowUp : juno_icon_1.ArrowDown }, getToggleButtonProps(ToggleButtonProps))))));
-    var _1 = (function () {
+                    : 'neutral.f04', size: "large" }, getToggleButtonProps(tslib_1.__assign(tslib_1.__assign({}, ToggleButtonProps), getToggleButtonPropsProp(isOpen))))))));
+    var _11 = (function () {
         var _a = InputPropsProp || {}, classes = _a.classes, restInputPropsProp = tslib_1.__rest(_a, ["classes"]);
         var toClasses = foundation_1.combineClasses(classes, utils_1.RcDownshiftInputClasses);
         return {
             containerClassName: toClasses.container,
             TextFieldInputProps: foundation_1.combineProps(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ classes: foundation_1.omit(toClasses, ['container']), endAdornment: endAdornment, inputComponent: styles_1.RcDownshiftInput }, getTagListBoxProps()), InputProps), { onBlur: debug ? undefined : onBlur }), restInputPropsProp),
         };
-    })(), containerClassName = _1.containerClassName, TextFieldInputProps = _1.TextFieldInputProps;
+    })(), containerClassName = _11.containerClassName, TextFieldInputProps = _11.TextFieldInputProps;
     react_1.useImperativeHandle(action, function () { return ({
         getActiveIndex: function () { return activeIndex; },
         setActiveIndex: setActiveIndex,
@@ -277,6 +290,12 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         var _a;
         (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.update();
     });
+    var menuChildren = (
+    // * that root element for animation host
+    react_1.default.createElement(react_1.default.Fragment, null,
+        isOpen && (react_1.default.createElement(SuggestionList_1.RcSuggestionList, tslib_1.__assign({ selectedIndex: isAutocomplete ? autoCompleteSelectedIndex : undefined, highlightedIndex: highlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, MenuItem: MenuItem, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getMenuProps: getMenuProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, onUpdatePopper: handleUpdatePopper, maxContainerHeight: 180, getOptionLabel: getOptionLabel, position: "unset", virtualize: virtualize }, SuggestionListProps))),
+        isRenderNoOptions && (renderNoOptions === null || renderNoOptions === void 0 ? void 0 : renderNoOptions(getNoOptionsProps, noOptionItem))));
+    var prevMenuChildren = foundation_1.usePrevious(function () { return menuChildren; });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(styles_1.StyledTextField, tslib_1.__assign({ renderInput: renderInput, hasTags: hasTags, ref: toTextFieldRef, inputRef: inputRef, "data-test-automation-id": automationId, fullWidth: fullWidth, placeholder: !hasTags ? placeholder : undefined, label: label, focused: isDownshiftFocused, disabled: disabled, required: required, color: color, 
             // * if below one of tag is error, that main downshift default will be error
@@ -287,7 +306,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                 maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
         }, rest), { value: inputValue, clearBtn: false })),
         !helperText && screenReaderText && (react_1.default.createElement(VisuallyHidden_1.RcVisuallyHidden, { id: describedbyId }, screenReaderText)),
-        react_1.default.createElement(styles_1.StyledPopper, tslib_1.__assign({ open: open, position: position, anchorEl: textFieldRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, 
+        react_1.default.createElement(styles_1.StyledPopper, tslib_1.__assign({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, 
             // * view type in popper.js
             popperOptions: {
                 onUpdate: function (e) {
@@ -296,9 +315,27 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                         setPosition(currPosition);
                     }
                 },
-            } }, getPopperProps(PopperProps)),
-            isOpen && (react_1.default.createElement(SuggestionList_1.RcSuggestionList, tslib_1.__assign({ highlightedIndex: highlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, MenuItem: MenuItem, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getMenuProps: getMenuProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, onUpdatePopper: handleUpdatePopper, maxContainerHeight: 180, getOptionLabel: getOptionLabel, position: "unset" }, SuggestionListProps))),
-            isRenderNoOptions && (renderNoOptions === null || renderNoOptions === void 0 ? void 0 : renderNoOptions(getNoOptionsProps, noOptionItem)))));
+            } }, getPopperProps(PopperProps), { transition: popperTransition }), popperTransition
+            ? function (_a) {
+                if (_a === void 0) { _a = {}; }
+                var _b = _a.TransitionProps, _c = _b === void 0 ? {} : _b, onEnterProp = _c.onEnter, onExitProp = _c.onExited, inProp = _c.in, restTransitionProp = tslib_1.__rest(_a, ["TransitionProps"]);
+                var onEnter = function (node, isAppearing) {
+                    var _a;
+                    onEnterProp();
+                    (_a = TransitionPropsProp.onEnter) === null || _a === void 0 ? void 0 : _a.call(TransitionPropsProp, node, isAppearing);
+                };
+                var onExited = function (node) {
+                    var _a;
+                    onExitProp();
+                    (_a = TransitionPropsProp.onExited) === null || _a === void 0 ? void 0 : _a.call(TransitionPropsProp, node);
+                };
+                return (react_1.default.createElement(TransitionComponent, tslib_1.__assign({ in: inProp, onEnter: onEnter, onExited: onExited }, restTransitionProp, { timeout: transitionDuration }, (virtualize ? {} : DEFAULT_GROW_STYLE), TransitionPropsProp),
+                    react_1.default.createElement("div", null, 
+                    // when menu be close use previous option menu,
+                    // keep menu item before animation done
+                    inProp ? menuChildren : prevMenuChildren)));
+            }
+            : menuChildren)));
 }));
 var RcDownshift = foundation_1.styled(_RcDownshift)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DownshiftStyle);
 RcDownshift.defaultProps = {};

package/components/Downshift/SuggestionList/SuggestionList.d.ts

@@ -16,6 +16,8 @@ export declare type RcSuggestionListProps<T> = RcBaseProps<Partial<VirtuosoProps
      * @default false
      */
     padding?: boolean | number;
+    /** is that menu virtualize  */
+    virtualize?: boolean;
 } & RcClassesProps<'root' | 'toggle' | 'expanded' | 'groupTitle'>;
 export declare type InnerSuggestionListProps = {
     /** current highlightedIndex */
@@ -40,6 +42,10 @@ export declare type InnerSuggestionListProps = {
      * set that as `unset`, let outside `absolute` container to calculate that.
      */
     position?: 'absolute' | 'unset';
+    /**
+     * in autocomplete mode, that will have selected index, show selected when focused
+     */
+    selectedIndex?: number;
 } & Pick<RcDownshiftProps, 'inputValue' | 'MenuItem' | 'renderOption' | 'getOptionDisabled' | 'renderGroup' | 'groupExpanded' | 'groupVariant' | 'getOptionLabel'> & RcSuggestionListProps<any>;
 export declare const RcSuggestionList: import("styled-components").StyledComponentClass<{
     /** current highlightedIndex */
@@ -64,6 +70,10 @@ export declare const RcSuggestionList: import("styled-components").StyledCompone
      * set that as `unset`, let outside `absolute` container to calculate that.
      */
     position?: "absolute" | "unset" | undefined;
+    /**
+     * in autocomplete mode, that will have selected index, show selected when focused
+     */
+    selectedIndex?: number | undefined;
 } & Pick<RcDownshiftProps<RcDownshiftSelectedItem>, "getOptionDisabled" | "getOptionLabel" | "renderOption" | "groupVariant" | "groupExpanded" | "renderGroup" | "MenuItem" | "inputValue"> & Pick<Partial<VirtuosoProps<any, undefined>>, "key" | "form" | "list" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "style" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "cite" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "download" | "start" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "shape" | "disabled" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "open" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "wrap" | "context" | "overscan" | "increaseViewportBy" | "topItemCount" | "initialTopMostItemIndex" | "initialScrollTop" | "initialItemCount" | "components" | "computeItemKey" | "defaultItemHeight" | "itemSize" | "fixedItemHeight" | "scrollSeekConfiguration" | "followOutput" | "headerFooterTag" | "firstItemIndex" | "isScrolling" | "endReached" | "startReached" | "rangeChanged" | "atBottomStateChange" | "atTopStateChange" | "totalListHeightChanged" | "itemsRendered" | "alignToBottom" | "useWindowScroll" | "customScrollParent" | "scrollerRef" | "atBottomThreshold" | "react18ConcurrentRendering"> & {
     /**
      * that virtual list container height,
@@ -77,6 +87,8 @@ export declare const RcSuggestionList: import("styled-components").StyledCompone
      * @default false
      */
     padding?: number | boolean | undefined;
+    /** is that menu virtualize  */
+    virtualize?: boolean | undefined;
 } & RcClassesProps<"root" | "expanded" | "toggle" | "groupTitle"> & React.RefAttributes<any>, import("../../../foundation").RcTheme, Pick<{
     /** current highlightedIndex */
     highlightedIndex: number;
@@ -100,6 +112,10 @@ export declare const RcSuggestionList: import("styled-components").StyledCompone
      * set that as `unset`, let outside `absolute` container to calculate that.
      */
     position?: "absolute" | "unset" | undefined;
+    /**
+     * in autocomplete mode, that will have selected index, show selected when focused
+     */
+    selectedIndex?: number | undefined;
 } & Pick<RcDownshiftProps<RcDownshiftSelectedItem>, "getOptionDisabled" | "getOptionLabel" | "renderOption" | "groupVariant" | "groupExpanded" | "renderGroup" | "MenuItem" | "inputValue"> & Pick<Partial<VirtuosoProps<any, undefined>>, "key" | "form" | "list" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "style" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "cite" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "download" | "start" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "shape" | "disabled" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "open" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "wrap" | "context" | "overscan" | "increaseViewportBy" | "topItemCount" | "initialTopMostItemIndex" | "initialScrollTop" | "initialItemCount" | "components" | "computeItemKey" | "defaultItemHeight" | "itemSize" | "fixedItemHeight" | "scrollSeekConfiguration" | "followOutput" | "headerFooterTag" | "firstItemIndex" | "isScrolling" | "endReached" | "startReached" | "rangeChanged" | "atBottomStateChange" | "atTopStateChange" | "totalListHeightChanged" | "itemsRendered" | "alignToBottom" | "useWindowScroll" | "customScrollParent" | "scrollerRef" | "atBottomThreshold" | "react18ConcurrentRendering"> & {
     /**
      * that virtual list container height,
@@ -113,6 +129,8 @@ export declare const RcSuggestionList: import("styled-components").StyledCompone
      * @default false
      */
     padding?: number | boolean | undefined;
-} & RcClassesProps<"root" | "expanded" | "toggle" | "groupTitle"> & React.RefAttributes<any>, "ref" | "key" | "form" | "list" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "style" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "cite" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "download" | "start" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "shape" | "disabled" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "position" | "open" | "padding" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "wrap" | "context" | "overscan" | "increaseViewportBy" | "topItemCount" | "initialTopMostItemIndex" | "initialScrollTop" | "initialItemCount" | "components" | "computeItemKey" | "defaultItemHeight" | "itemSize" | "fixedItemHeight" | "scrollSeekConfiguration" | "followOutput" | "headerFooterTag" | "firstItemIndex" | "isScrolling" | "endReached" | "startReached" | "rangeChanged" | "atBottomStateChange" | "atTopStateChange" | "totalListHeightChanged" | "itemsRendered" | "alignToBottom" | "useWindowScroll" | "customScrollParent" | "scrollerRef" | "atBottomThreshold" | "react18ConcurrentRendering" | "options" | "getItemProps" | "getOptionDisabled" | "getOptionLabel" | "renderOption" | "groupVariant" | "groupExpanded" | "renderGroup" | "MenuItem" | "inputValue" | "maxContainerHeight" | "optionsGroupList" | "highlightedIndex" | "getMenuProps" | "changeHighlightedIndexReason" | "isKeepHighlightedIndex" | "onUpdatePopper"> & {
+    /** is that menu virtualize  */
+    virtualize?: boolean | undefined;
+} & RcClassesProps<"root" | "expanded" | "toggle" | "groupTitle"> & React.RefAttributes<any>, "ref" | "key" | "form" | "list" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "style" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "cite" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "download" | "start" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "shape" | "disabled" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "position" | "open" | "padding" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "wrap" | "context" | "overscan" | "increaseViewportBy" | "topItemCount" | "initialTopMostItemIndex" | "initialScrollTop" | "initialItemCount" | "components" | "computeItemKey" | "defaultItemHeight" | "itemSize" | "fixedItemHeight" | "scrollSeekConfiguration" | "followOutput" | "headerFooterTag" | "firstItemIndex" | "isScrolling" | "endReached" | "startReached" | "rangeChanged" | "atBottomStateChange" | "atTopStateChange" | "totalListHeightChanged" | "itemsRendered" | "alignToBottom" | "useWindowScroll" | "customScrollParent" | "scrollerRef" | "atBottomThreshold" | "react18ConcurrentRendering" | "options" | "getItemProps" | "getOptionDisabled" | "getOptionLabel" | "renderOption" | "groupVariant" | "groupExpanded" | "renderGroup" | "MenuItem" | "inputValue" | "maxContainerHeight" | "virtualize" | "optionsGroupList" | "highlightedIndex" | "getMenuProps" | "changeHighlightedIndexReason" | "isKeepHighlightedIndex" | "onUpdatePopper" | "selectedIndex"> & {
     theme?: import("../../../foundation").RcTheme | undefined;
 }>;

package/components/Downshift/SuggestionList/SuggestionList.js

@@ -21,7 +21,7 @@ var List = react_1.forwardRef(function (props, ref) {
 var SuggestionList = react_1.forwardRef(function (inProps, ref) {
     var _a;
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcSuggestionList' });
-    var highlightedIndex = props.highlightedIndex, options = props.options, getItemProps = props.getItemProps, getMenuProps = props.getMenuProps, renderOption = props.renderOption, inputValue = props.inputValue, groupVariant = props.groupVariant, groupExpanded = props.groupExpanded, renderGroup = props.renderGroup, optionsGroupList = props.optionsGroupList, getOptionDisabled = props.getOptionDisabled, MenuItem = props.MenuItem, changeHighlightedIndexReason = props.changeHighlightedIndexReason, isKeepHighlightedIndex = props.isKeepHighlightedIndex, componentsProp = props.components, onUpdatePopper = props.onUpdatePopper, getOptionLabel = props.getOptionLabel, padding = props.padding, _b = props.maxContainerHeight, maxContainerHeight = _b === void 0 ? '100%' : _b, classNameProp = props.className, classesProp = props.classes, _c = props.position, position = _c === void 0 ? 'absolute' : _c, rest = tslib_1.__rest(props, ["highlightedIndex", "options", "getItemProps", "getMenuProps", "renderOption", "inputValue", "groupVariant", "groupExpanded", "renderGroup", "optionsGroupList", "getOptionDisabled", "MenuItem", "changeHighlightedIndexReason", "isKeepHighlightedIndex", "components", "onUpdatePopper", "getOptionLabel", "padding", "maxContainerHeight", "className", "classes", "position"]);
+    var highlightedIndex = props.highlightedIndex, options = props.options, getItemProps = props.getItemProps, _b = props.virtualize, virtualize = _b === void 0 ? true : _b, getMenuProps = props.getMenuProps, renderOption = props.renderOption, selectedOptions = props.value, inputValue = props.inputValue, groupVariant = props.groupVariant, groupExpanded = props.groupExpanded, renderGroup = props.renderGroup, optionsGroupList = props.optionsGroupList, getOptionDisabled = props.getOptionDisabled, MenuItem = props.MenuItem, changeHighlightedIndexReason = props.changeHighlightedIndexReason, isKeepHighlightedIndex = props.isKeepHighlightedIndex, componentsProp = props.components, onUpdatePopper = props.onUpdatePopper, getOptionLabel = props.getOptionLabel, padding = props.padding, _c = props.maxContainerHeight, maxContainerHeight = _c === void 0 ? '100%' : _c, classNameProp = props.className, classesProp = props.classes, _d = props.position, position = _d === void 0 ? 'absolute' : _d, selectedIndex = props.selectedIndex, rest = tslib_1.__rest(props, ["highlightedIndex", "options", "getItemProps", "virtualize", "getMenuProps", "renderOption", "value", "inputValue", "groupVariant", "groupExpanded", "renderGroup", "optionsGroupList", "getOptionDisabled", "MenuItem", "changeHighlightedIndexReason", "isKeepHighlightedIndex", "components", "onUpdatePopper", "getOptionLabel", "padding", "maxContainerHeight", "className", "classes", "position", "selectedIndex"]);
     var vlRef = react_1.useRef(null);
     var forkVlRef = foundation_1.useForkRef(ref, vlRef);
     var isTitleMode = groupVariant === 'normal';
@@ -30,7 +30,7 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
     var itemCount = options.length;
     var classes = foundation_1.combineClasses(utils_1.RcSuggestionListClasses, classesProp);
     var className = clsx_1.default(classNameProp, classes === null || classes === void 0 ? void 0 : classes.root);
-    var _d = Virtuoso_1.useDynamicHeight({
+    var _e = Virtuoso_1.useDynamicHeight({
         itemCount: itemCount,
         maxContainerHeight: maxContainerHeight,
         onContainerHeightChange: function (changeHeight) {
@@ -40,25 +40,30 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
                 onUpdatePopper === null || onUpdatePopper === void 0 ? void 0 : onUpdatePopper();
             }
         },
-    }), totalListHeightChanged = _d.totalListHeightChanged, style = _d.style, containerHeighRef = _d.containerHeighRef;
+    }), totalListHeightChanged = _e.totalListHeightChanged, style = _e.style, containerHeighRef = _e.containerHeighRef;
     var sleep = foundation_1.useSleep().sleep;
     var scrollToIndexWithRetry = foundation_1.useRetry(function (location) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-        var toIndex, toElm;
-        var _a, _b;
-        return tslib_1.__generator(this, function (_c) {
-            switch (_c.label) {
+        var toIndex, toElm_1, toElm;
+        var _a, _b, _c;
+        return tslib_1.__generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
+                    toIndex = location.index;
+                    if (!virtualize) {
+                        toElm_1 = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-item-index=\"" + toIndex + "\"]");
+                        toElm_1 === null || toElm_1 === void 0 ? void 0 : toElm_1.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                        return [2 /*return*/, true];
+                    }
                     if (location.index === 0 && padding !== undefined) {
                         location = tslib_1.__assign(tslib_1.__assign({}, location), { offset: -(typeof padding === 'number'
                                 ? padding
                                 : styles_1.menuListBoundaryPadding) });
                     }
-                    (_a = vlRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(location);
-                    toIndex = location.index;
+                    (_b = vlRef.current) === null || _b === void 0 ? void 0 : _b.scrollToIndex(location);
                     return [4 /*yield*/, sleep(0)];
                 case 1:
-                    _c.sent();
-                    toElm = (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("[data-item-index=\"" + toIndex + "\"]");
+                    _d.sent();
+                    toElm = (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.querySelector("[data-item-index=\"" + toIndex + "\"]");
                     if (toElm) {
                         return [2 /*return*/, true];
                     }
@@ -69,10 +74,10 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
         retryTimes: 10,
         intervalTime: 20,
     }).retry;
-    var _e = Virtuoso_1.useHighlightScroll({
+    var _f = Virtuoso_1.useHighlightScroll({
         containerHeighRef: containerHeighRef,
         scrollToIndex: scrollToIndexWithRetry,
-    }), scrollerRef = _e.scrollerRef, scrollerRefFn = _e.scrollerRefFn, itemsRendered = _e.itemsRendered, scrollToHighlightedIndex = _e.scrollToHighlightedIndex;
+    }), scrollerRef = _f.scrollerRef, scrollerRefFn = _f.scrollerRefFn, itemsRendered = _f.itemsRendered, scrollToHighlightedIndex = _f.scrollToHighlightedIndex;
     // for safari, prevent popover
     var virtuosoViewPort = (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.firstElementChild;
     react_1.useLayoutEffect(function () {
@@ -82,7 +87,7 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
     }, [virtuosoViewPort, position]);
     var prevHighlightedIndex = foundation_1.usePrevious(function () { return highlightedIndex; }, true);
     react_1.useLayoutEffect(function () {
-        if (vlRef.current &&
+        if ((!virtualize || vlRef.current) &&
             !isKeepHighlightedIndex &&
             // * only scroll when reason is 'keyboard'
             changeHighlightedIndexReason &&
@@ -120,8 +125,9 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
             index: index,
             className: isGroupTitle ? classes.groupTitle : undefined,
         });
-        var selected = highlightedIndex === index;
-        var resultProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, option), itemProps), { key: itemProps.id });
+        var highlighted = highlightedIndex === index;
+        var selected = selectedIndex === index;
+        var resultProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ 'data-item-index': !virtualize ? index : undefined }, option), itemProps), { key: itemProps.id });
         var indexInOwnGroup = resultProps.indexInOwnGroup;
         delete resultProps.indexInOwnGroup;
         // * when item is not disabled, that should check outside is that disabled
@@ -131,6 +137,7 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
         var state = {
             inputValue: inputValue,
             selected: selected,
+            highlighted: highlighted,
             index: index,
             indexInOwnGroup: indexInOwnGroup,
         };
@@ -143,9 +150,11 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
         }
         // TODO: that MenuItem will be remove
         if (MenuItem) {
-            return (react_1.default.createElement(MenuItem, tslib_1.__assign({}, resultProps, { itemId: option.id, "data-suggestion-item-id": option.id, isHighlighted: selected, isMember: option.isMember })));
+            return (react_1.default.createElement(MenuItem
+            // when not virtualize, use index as key
+            , tslib_1.__assign({}, resultProps, { itemId: option.id, "data-suggestion-item-id": option.id, isHighlighted: selected || highlighted, isMember: option.isMember })));
         }
-        return (react_1.default.createElement(MenuItem_1.RcMenuItem, tslib_1.__assign({ component: "div", selected: selected }, foundation_1.omit(resultProps, [
+        return (react_1.default.createElement(MenuItem_1.RcMenuItem, tslib_1.__assign({ component: "div", selected: selected, focused: highlighted }, foundation_1.omit(resultProps, [
             'isSuggestion',
             'freeSolo',
             'label',
@@ -166,17 +175,23 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
     var components = react_1.useMemo(function () {
         return tslib_1.__assign({ List: List, Header: PaddingComponent, Footer: PaddingComponent }, componentsProp);
     }, [componentsProp, PaddingComponent]);
-    return (react_1.default.createElement(SuggestionListContext.Provider, { value: listRef },
-        react_1.default.createElement(Virtuoso_1.Virtuoso, tslib_1.__assign({ ref: forkVlRef, totalCount: itemCount, data: itemData, className: className, components: components, itemContent: itemContent }, getMenuProps(), foundation_1.combineProps({
-            scrollerRef: function (scrollElm) {
-                scrollerRefFn(scrollElm);
-                Virtuoso_1.modifyVlScrollerStyle(scrollElm, position);
-            },
-            itemsRendered: itemsRendered,
-            totalListHeightChanged: totalListHeightChanged,
-            style: style,
-            isScrolling: handleScrolling,
-        }, rest)))));
+    return (react_1.default.createElement(SuggestionListContext.Provider, { value: listRef }, virtualize ? (react_1.default.createElement(Virtuoso_1.Virtuoso, tslib_1.__assign({ ref: forkVlRef, totalCount: itemCount, data: itemData, className: className, components: components, itemContent: itemContent }, getMenuProps(), foundation_1.combineProps({
+        scrollerRef: function (scrollElm) {
+            scrollerRefFn(scrollElm);
+            Virtuoso_1.modifyVlScrollerStyle(scrollElm, position);
+        },
+        itemsRendered: itemsRendered,
+        totalListHeightChanged: totalListHeightChanged,
+        style: style,
+        isScrolling: handleScrolling,
+    }, rest)))) : (react_1.default.createElement(List, { style: { maxHeight: style.height, overflow: 'auto' }, ref: function (scrollElm) {
+            scrollerRefFn(scrollElm);
+        } },
+        react_1.default.createElement(PaddingComponent, null),
+        options.map(function (x, i) {
+            return itemContent(i, x);
+        }),
+        react_1.default.createElement(PaddingComponent, null)))));
 });
 exports.RcSuggestionList = foundation_1.styled(SuggestionList)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), styles_2.SuggestionListStyle);
 exports.RcSuggestionList.displayName = 'RcSuggestionList';