npm - @ringcentral/juno - Versions diffs - 2.46.0 → 3.0.0-alpha.1 - Mend

@ringcentral/juno 2.46.0 → 3.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1217) hide show

package/components/Downshift/Downshift.js CHANGED Viewed

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcDownshiftInput = exports.RcDownshiftDefaultFilterOptions = exports.RcDownshift = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var juno_icon_1 = require("@ringcentral/juno-icon");
@@ -10,19 +11,19 @@ var Chip_1 = require("../Chip");
 var ClearIconButton_1 = require("../Forms/TextField/styles/ClearIconButton");
 var VisuallyHidden_1 = require("../VisuallyHidden");
 var styles_1 = require("./styles");
-exports.RcDownshiftInput = styles_1.RcDownshiftInput;
+Object.defineProperty(exports, "RcDownshiftInput", { enumerable: true, get: function () { return styles_1.RcDownshiftInput; } });
 var SuggestionList_1 = require("./SuggestionList");
 var utils_1 = require("./utils");
-exports.RcDownshiftDefaultFilterOptions = utils_1.RcDownshiftDefaultFilterOptions;
+Object.defineProperty(exports, "RcDownshiftDefaultFilterOptions", { enumerable: true, get: function () { return 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' });
+var _RcDownshift = (0, react_1.memo)((0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcDownshift' });
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        foundation_1.useDeprecatedCheck(RcDownshift, props, [
+        (0, foundation_1.useDeprecatedCheck)(RcDownshift, props, [
             {
                 prop: 'onSelectChange',
                 time: '2021-10',
@@ -130,18 +131,18 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
             },
         ]);
     }
-    var theme = foundation_1.useTheme();
+    var theme = (0, foundation_1.useTheme)();
     var isAutocomplete = props.variant === 'autocomplete';
     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.toggleWithInput, toggleWithInput = _m === void 0 ? isAutocomplete : _m, _o = props.getOptionLabel, getOptionLabel = _o === void 0 ? itemToString : _o, renderInput = props.renderInput, _p = props.label, label = _p === void 0 ? inputLabel : _p, _q = props.inputRef, inputRefProp = _q === void 0 ? messageRef : _q, _r = props.error, error = _r === void 0 ? nameError : _r, _s = props.placeholder, placeholder = _s === void 0 ? inputPlaceholder : _s, _t = props.freeSolo, freeSolo = _t === void 0 ? enableFreeChips : _t, _u = props.keyToTags, keyToTags = _u === void 0 ? keyToChips : _u, _v = props.maxFreeSolo, maxFreeSolo = _v === void 0 ? limitOfFreeChips : _v, _w = props.SuggestionListProps, _x = _w === void 0 ? {} : _w, _y = _x.virtualize, virtualize = _y === void 0 ? true : _y, SuggestionListProps = tslib_1.__rest(_x, ["virtualize"]), _z = props.autoSelect, autoSelect = _z === void 0 ? enableAutoTransform : _z, PopperComponent = props.PopperComponent, _0 = props.PopperProps, _1 = _0 === void 0 ? {} : _0, _2 = _1.anchorElType, anchorElType = _2 === void 0 ? 'root' : _2, popperTransition = _1.transition, _3 = _1.TransitionComponent, TransitionComponent = _3 === void 0 ? virtualize ? Fade_1.RcFade : Grow_1.RcGrow : _3, _4 = _1.transitionDuration, transitionDurationProp = _4 === void 0 ? 'auto' : _4, _5 = _1.TransitionProps, TransitionPropsProp = _5 === void 0 ? {} : _5, PopperProps = tslib_1.__rest(_1, ["anchorElType", "transition", "TransitionComponent", "transitionDuration", "TransitionProps"]), initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _6 = props.defaultIsOpen, defaultIsOpen = _6 === void 0 ? openOnFocus : _6, _7 = props.disableCloseOnSelect, disableCloseOnSelect = _7 === void 0 ? defaultIsOpen : _7, _8 = props.onChange, onChangeProp = _8 === void 0 ? onSelectChange : _8, 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", "toggleWithInput", "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 _9 = tslib_1.__read(react_1.useState('bottom-start'), 2), position = _9[0], setPosition = _9[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);
+    var _9 = tslib_1.__read((0, react_1.useState)('bottom-start'), 2), position = _9[0], setPosition = _9[1];
+    var innerInputRef = (0, react_1.useRef)(null);
+    var textFieldRef = (0, react_1.useRef)(null);
+    var inputRef = (0, foundation_1.useForkRef)(inputRefProp, innerInputRef);
+    var inputContainerRef = (0, react_1.useRef)(null);
     // * if that have pass old suggestionItems mean that use old logic
     var isNew = !suggestionItems;
     var transitionDuration = transitionDurationProp === 'auto' ? undefined : transitionDurationProp;
@@ -149,10 +150,10 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     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 });
+        (0, utils_1.useDownshiftError)({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
     }
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
-    var _10 = utils_1.useDownshift({
+    var _10 = (0, utils_1.useDownshift)({
         focused: focused,
         open: openProp,
         variant: variant,
@@ -200,13 +201,13 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         : nameError || allowPlainHelperText
             ? helperTextProp
             : undefined;
-    var describedbyId = InputProps.id + "-helper-text";
+    var describedbyId = "".concat(InputProps.id, "-helper-text");
     var FormHelperTextProps = FormHelperTextPropsProp || {};
-    var screenReaderText = react_1.useMemo(function () {
+    var screenReaderText = (0, react_1.useMemo)(function () {
         if (!screenReader || !selectedItems.length)
             return;
         var entry = screenReader.entry, entries = screenReader.entries;
-        return ("" + (selectedItems.length === 1 ? entry : entries)).trim();
+        return "".concat(selectedItems.length === 1 ? entry : entries).trim();
     }, [screenReader, selectedItems.length]);
     if (screenReaderText) {
         if (!helperText) {
@@ -214,11 +215,11 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         }
         else if (helperText) {
             FormHelperTextProps['aria-label'] =
-                (screenReaderText + " " + helperText).trim();
+                "".concat(screenReaderText, " ").concat(helperText).trim();
         }
     }
-    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 toTextFieldRef = (0, foundation_1.useForkRef)(textFieldRef, ref);
+    var colorHex = (0, react_1.useMemo)(function () { return (color ? (0, foundation_1.getParsePaletteColor)(color)({ theme: theme }) : undefined); }, [color, theme]);
     var startAdornment = (function () {
         if (isAutocomplete) {
             return undefined;
@@ -244,7 +245,8 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                 if (InputItem) {
                     // TODO: should remove when all migrate
                     var isError = (emailError && emailError === ((_a = selectedItem.label) === null || _a === void 0 ? void 0 : _a.trim())) ||
-                        (selectedItem.id && (errorSelectedItems === null || errorSelectedItems === void 0 ? void 0 : errorSelectedItems.includes(selectedItem.id))) ||
+                        (selectedItem.id &&
+                            (errorSelectedItems === null || errorSelectedItems === void 0 ? void 0 : errorSelectedItems.includes(selectedItem.id))) ||
                         selectedItem.isError ||
                         selectedItem.error;
                     return (react_1.default.createElement(InputItem, tslib_1.__assign({}, selectedItem, itemChipProps, { isError: isError })));
@@ -263,13 +265,13 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                     : 'neutral.f04', size: "large" }, getToggleButtonProps(tslib_1.__assign(tslib_1.__assign({}, ToggleButtonProps), getToggleButtonPropsProp(isOpen))))))));
     var _12 = (function () {
         var _a = InputPropsProp || {}, classes = _a.classes, restInputPropsProp = tslib_1.__rest(_a, ["classes"]);
-        var toClasses = foundation_1.combineClasses(classes, utils_1.RcDownshiftInputClasses);
+        var toClasses = (0, 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),
+            TextFieldInputProps: (0, foundation_1.combineProps)(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ classes: (0, foundation_1.omit)(toClasses, ['container']), endAdornment: endAdornment, inputComponent: styles_1.RcDownshiftInput }, getTagListBoxProps()), InputProps), { onBlur: debug ? undefined : onBlur }), restInputPropsProp),
         };
     })(), containerClassName = _12.containerClassName, TextFieldInputProps = _12.TextFieldInputProps;
-    react_1.useImperativeHandle(action, function () { return ({
+    (0, react_1.useImperativeHandle)(action, function () { return ({
         getActiveIndex: function () { return activeIndex; },
         setActiveIndex: setActiveIndex,
         getFilterResultItems: function () { return optionItems; },
@@ -286,8 +288,8 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     }); });
     var hasTags = selectedItems.length > 0;
     var isRenderNoOptions = !!noOptionItem;
-    var popperRef = react_1.useRef(null);
-    var handleUpdatePopper = foundation_1.useEventCallback(function () {
+    var popperRef = (0, react_1.useRef)(null);
+    var handleUpdatePopper = (0, foundation_1.useEventCallback)(function () {
         var _a;
         (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.update();
     });
@@ -295,16 +297,15 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     // * 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; });
+        isRenderNoOptions &&
+            (renderNoOptions === null || renderNoOptions === void 0 ? void 0 : renderNoOptions(getNoOptionsProps, noOptionItem))));
+    var prevMenuChildren = (0, 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
-            error: error !== null && error !== void 0 ? error : oneOfTagError, FormHelperTextProps: FormHelperTextProps, InputProps: TextFieldInputProps, helperText: helperText }, foundation_1.combineProps({
+            error: error !== null && error !== void 0 ? error : oneOfTagError, FormHelperTextProps: FormHelperTextProps, InputProps: TextFieldInputProps, helperText: helperText }, (0, foundation_1.combineProps)({
             InputLabelProps: getLabelProps(),
-            inputProps: tslib_1.__assign({ startAdornment: startAdornment,
-                containerClassName: containerClassName,
-                maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
+            inputProps: tslib_1.__assign({ startAdornment: startAdornment, containerClassName: containerClassName, 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({ ref: popperElementRef, open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef,
@@ -338,7 +339,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
             }
             : menuChildren)));
 }));
-var RcDownshift = foundation_1.styled(_RcDownshift)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DownshiftStyle);
+var RcDownshift = (0, foundation_1.styled)(_RcDownshift)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DownshiftStyle);
 RcDownshift.defaultProps = {};
 RcDownshift.displayName = 'RcDownshift';
 var ExportType = RcDownshift;

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

@@ -3,7 +3,7 @@ import { RcBaseProps, RcClassesProps } from '../../../foundation';
 import { VirtuosoProps } from '../../Virtuoso';
 import { RcDownshiftProps } from '../Downshift';
 import { RcDownshiftGetItemPropsOptions, RcDownshiftGroupedOption, RcDownshiftHighlightChangeReason, RcDownshiftSelectedItem } from '../utils';
-export declare type RcSuggestionListProps<T> = RcBaseProps<Partial<VirtuosoProps<T, undefined>>, 'totalCount' | 'itemContent' | 'data'> & {
+export type RcSuggestionListProps<T> = RcBaseProps<Partial<VirtuosoProps<T, undefined>>, 'totalCount' | 'itemContent' | 'data'> & {
     /**
      * that virtual list container height,
      *
@@ -19,7 +19,7 @@ export declare type RcSuggestionListProps<T> = RcBaseProps<Partial<VirtuosoProps
     /** is that menu virtualize  */
     virtualize?: boolean;
 } & RcClassesProps<'root' | 'toggle' | 'expanded' | 'groupTitle'>;
-export declare type InnerSuggestionListProps = {
+export type InnerSuggestionListProps = {
     /** current highlightedIndex */
     highlightedIndex: number;
     /** select options */
@@ -47,7 +47,7 @@ export declare type InnerSuggestionListProps = {
      */
     selectedIndex?: number;
 } & Pick<RcDownshiftProps, 'inputValue' | 'MenuItem' | 'renderOption' | 'getOptionDisabled' | 'renderGroup' | 'groupExpanded' | 'groupVariant' | 'getOptionLabel'> & RcSuggestionListProps<any>;
-export declare const RcSuggestionList: import("styled-components").StyledComponentClass<{
+export declare const RcSuggestionList: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
     /** current highlightedIndex */
     highlightedIndex: number;
     /** select options */
@@ -55,51 +55,9 @@ export declare const RcSuggestionList: import("styled-components").StyledCompone
     /** each item props getter */
     getItemProps: (options: RcDownshiftGetItemPropsOptions<RcDownshiftSelectedItem>) => any;
     /** menu wrapper props getter */
-    getMenuProps: (restMenuProps?: React.HTMLAttributes<HTMLElement> | undefined) => React.HTMLAttributes<HTMLElement>;
-    /** that reason that change highlighted */
-    changeHighlightedIndexReason: RcDownshiftHighlightChangeReason;
-    /** is that need keep highlighted index, that will be helpful when you need load more options when scroll */
-    isKeepHighlightedIndex?: boolean | undefined;
-    /** trigger when need update outside popper position */
-    onUpdatePopper?: (() => any) | undefined;
-    /** options group list, use for calculate `aria-setsize` */
-    optionsGroupList?: RcDownshiftGroupedOption<RcDownshiftSelectedItem>[] | undefined;
-    /**
-     * ## should always keep absolute for better render,
-     * but when you wrap that in modal or a non have width container,
-     * 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" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "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" | "atTopThreshold" | "atBottomThreshold" | "logLevel" | "restoreStateFrom"> & {
-    /**
-     * that virtual list container height,
-     *
-     * @default 100%
-     */
-    maxContainerHeight?: number | "100%" | undefined;
-    /**
-     * vertical padding from the list
-     *
-     * @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;
-    /** select options */
-    options: RcDownshiftSelectedItem[];
-    /** each item props getter */
-    getItemProps: (options: RcDownshiftGetItemPropsOptions<RcDownshiftSelectedItem>) => any;
-    /** menu wrapper props getter */
-    getMenuProps: (restMenuProps?: React.HTMLAttributes<HTMLElement> | undefined) => React.HTMLAttributes<HTMLElement>;
+    getMenuProps: (restMenuProps?: HTMLAttributes<HTMLElement> | undefined) => HTMLAttributes<HTMLElement>;
     /** that reason that change highlighted */
-    changeHighlightedIndexReason: RcDownshiftHighlightChangeReason;
+    changeHighlightedIndexReason: RcDownshiftHighlightChangeReason | undefined;
     /** is that need keep highlighted index, that will be helpful when you need load more options when scroll */
     isKeepHighlightedIndex?: boolean | undefined;
     /** trigger when need update outside popper position */
@@ -111,12 +69,12 @@ export declare const RcSuggestionList: import("styled-components").StyledCompone
      * but when you wrap that in modal or a non have width container,
      * set that as `unset`, let outside `absolute` container to calculate that.
      */
-    position?: "absolute" | "unset" | undefined;
+    position?: "unset" | "absolute" | 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" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "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" | "atTopThreshold" | "atBottomThreshold" | "logLevel" | "restoreStateFrom"> & {
+} & Pick<RcDownshiftProps, "getOptionDisabled" | "getOptionLabel" | "renderOption" | "groupVariant" | "groupExpanded" | "renderGroup" | "MenuItem" | "inputValue"> & RcBaseProps<Partial<VirtuosoProps<any, undefined>>, "data" | "totalCount" | "itemContent"> & {
     /**
      * that virtual list container height,
      *
@@ -131,6 +89,4 @@ export declare const RcSuggestionList: import("styled-components").StyledCompone
     padding?: number | boolean | undefined;
     /** 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" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "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" | "atTopThreshold" | "atBottomThreshold" | "logLevel" | "restoreStateFrom" | "options" | "getItemProps" | "getOptionDisabled" | "getOptionLabel" | "renderOption" | "groupVariant" | "groupExpanded" | "renderGroup" | "MenuItem" | "inputValue" | "maxContainerHeight" | "virtualize" | "optionsGroupList" | "highlightedIndex" | "getMenuProps" | "changeHighlightedIndexReason" | "isKeepHighlightedIndex" | "onUpdatePopper" | "selectedIndex"> & {
-    theme?: import("../../../foundation").RcTheme | undefined;
-}>;
+} & RcClassesProps<"root" | "expanded" | "toggle" | "groupTitle"> & React.RefAttributes<any>>, import("../../../foundation").RcTheme, {}, never>;

package/components/Downshift/SuggestionList/SuggestionList.js CHANGED Viewed

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcSuggestionList = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var clsx_1 = tslib_1.__importDefault(require("clsx"));
@@ -12,37 +13,37 @@ var styles_1 = require("../../VirtualizedMenu/styles");
 var Virtuoso_1 = require("../../Virtuoso");
 var styles_2 = require("./styles");
 var utils_1 = require("./utils");
-var SuggestionListContext = react_1.createContext(null);
-var List = react_1.forwardRef(function (props, ref) {
-    var listRef = react_1.useContext(SuggestionListContext);
-    var forkRef = foundation_1.useForkRef(ref, listRef);
+var SuggestionListContext = (0, react_1.createContext)(null);
+var List = (0, react_1.forwardRef)(function (props, ref) {
+    var listRef = (0, react_1.useContext)(SuggestionListContext);
+    var forkRef = (0, foundation_1.useForkRef)(ref, listRef);
     return react_1.default.createElement("div", tslib_1.__assign({ ref: forkRef, "data-suggestion-list": true }, props));
 });
-var SuggestionList = react_1.forwardRef(function (inProps, ref) {
+var SuggestionList = (0, react_1.forwardRef)(function (inProps, ref) {
     var _a;
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcSuggestionList' });
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcSuggestionList' });
     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 vlRef = (0, react_1.useRef)(null);
+    var forkVlRef = (0, foundation_1.useForkRef)(ref, vlRef);
     var isTitleMode = groupVariant === 'normal';
-    var listRef = react_1.useRef(null);
+    var listRef = (0, react_1.useRef)(null);
     var itemData = options;
     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 _e = Virtuoso_1.useDynamicHeight({
+    var classes = (0, foundation_1.combineClasses)(utils_1.RcSuggestionListClasses, classesProp);
+    var className = (0, clsx_1.default)(classNameProp, classes === null || classes === void 0 ? void 0 : classes.root);
+    var _e = (0, Virtuoso_1.useDynamicHeight)({
         itemCount: itemCount,
         maxContainerHeight: maxContainerHeight,
         onContainerHeightChange: function (changeHeight) {
             var scroller = scrollerRef.current;
             if (scroller === null || scroller === void 0 ? void 0 : scroller.style) {
-                scroller.style.height = changeHeight + "px";
+                scroller.style.height = "".concat(changeHeight, "px");
                 onUpdatePopper === null || onUpdatePopper === void 0 ? void 0 : onUpdatePopper();
             }
         },
     }), 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 sleep = (0, foundation_1.useSleep)().sleep;
+    var scrollToIndexWithRetry = (0, foundation_1.useRetry)(function (location) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
         var toIndex, toElm_1, toElm;
         var _a, _b, _c;
         return tslib_1.__generator(this, function (_d) {
@@ -50,7 +51,7 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
                 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 = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-item-index=\"".concat(toIndex, "\"]"));
                         toElm_1 === null || toElm_1 === void 0 ? void 0 : toElm_1.scrollIntoView({ block: 'nearest', inline: 'nearest' });
                         return [2 /*return*/, true];
                     }
@@ -63,7 +64,7 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
                     return [4 /*yield*/, sleep(0)];
                 case 1:
                     _d.sent();
-                    toElm = (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.querySelector("[data-item-index=\"" + toIndex + "\"]");
+                    toElm = (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.querySelector("[data-item-index=\"".concat(toIndex, "\"]"));
                     if (toElm) {
                         return [2 /*return*/, true];
                     }
@@ -74,19 +75,19 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
         retryTimes: 10,
         intervalTime: 20,
     }).retry;
-    var _f = Virtuoso_1.useHighlightScroll({
+    var _f = (0, Virtuoso_1.useHighlightScroll)({
         containerHeighRef: containerHeighRef,
         scrollToIndex: scrollToIndexWithRetry,
     }), 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 () {
+    (0, react_1.useLayoutEffect)(function () {
         if (virtuosoViewPort) {
             virtuosoViewPort.style.position = position;
         }
     }, [virtuosoViewPort, position]);
-    var prevHighlightedIndex = foundation_1.usePrevious(function () { return highlightedIndex; }, true);
-    react_1.useLayoutEffect(function () {
+    var prevHighlightedIndex = (0, foundation_1.usePrevious)(function () { return highlightedIndex; }, true);
+    (0, react_1.useLayoutEffect)(function () {
         if ((!virtualize || vlRef.current) &&
             !isKeepHighlightedIndex &&
             // * only scroll when reason is 'keyboard'
@@ -116,10 +117,11 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
         var isFixedGroupExpanded = typeof groupExpanded === 'boolean';
         var expandIconProps = !isTitleMode && !isFixedGroupExpanded && isGroupTitle
             ? (_c = (_b = option.group) === null || _b === void 0 ? void 0 : _b.getExpandIconProps) === null || _c === void 0 ? void 0 : _c.call(_b, {
-                className: clsx_1.default(classes.toggle, (_a = {},
+                className: (0, clsx_1.default)(classes.toggle, (_a = {},
                     _a[classes.expanded] = (_d = option.group) === null || _d === void 0 ? void 0 : _d.expanded,
                     _a)),
-            }) : undefined;
+            })
+            : undefined;
         var itemProps = getItemProps({
             item: option,
             index: index,
@@ -154,7 +156,7 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
             // 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, focused: highlighted }, foundation_1.omit(resultProps, [
+        return (react_1.default.createElement(MenuItem_1.RcMenuItem, tslib_1.__assign({ component: "div", selected: selected, focused: highlighted }, (0, foundation_1.omit)(resultProps, [
             'isSuggestion',
             'freeSolo',
             'label',
@@ -164,7 +166,7 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
             react_1.default.createElement(Box_1.RcBox, { flex: "1 1 auto" }),
             expandIconProps && (react_1.default.createElement(IconButton_1.RcIconButton, tslib_1.__assign({}, expandIconProps, { symbol: juno_icon_1.ArrowDown2 })))));
     };
-    var PaddingComponent = react_1.useMemo(function () {
+    var PaddingComponent = (0, react_1.useMemo)(function () {
         var paddingValue = padding !== undefined && itemCount > 0
             ? typeof padding === 'number'
                 ? padding
@@ -172,13 +174,13 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
             : 0;
         return function () { return react_1.default.createElement(styles_1.StyledMenuListPadding, { height: paddingValue }); };
     }, [itemCount, padding]);
-    var components = react_1.useMemo(function () {
+    var components = (0, 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 }, 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({
+    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(), (0, foundation_1.combineProps)({
         scrollerRef: function (scrollElm) {
             scrollerRefFn(scrollElm);
-            Virtuoso_1.modifyVlScrollerStyle(scrollElm, position);
+            (0, Virtuoso_1.modifyVlScrollerStyle)(scrollElm, position);
         },
         itemsRendered: itemsRendered,
         totalListHeightChanged: totalListHeightChanged,
@@ -193,6 +195,6 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
         }),
         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 = (0, foundation_1.styled)(SuggestionList)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), styles_2.SuggestionListStyle);
 exports.RcSuggestionList.displayName = 'RcSuggestionList';
 var templateObject_1;

package/components/Downshift/SuggestionList/styles/SuggestionListStyle.js CHANGED Viewed

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuggestionListStyle = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../foundation");
 var utils_1 = require("../utils");
-exports.SuggestionListStyle = function () {
-    return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    .", " {\n      margin-right: -", ";\n\n      transform: rotate(0deg);\n      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n      &.", " {\n        transform: rotate(180deg);\n      }\n    }\n  "], ["\n    .", " {\n      margin-right: -", ";\n\n      transform: rotate(0deg);\n      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n      &.", " {\n        transform: rotate(180deg);\n      }\n    }\n  "])), utils_1.RcSuggestionListClasses.toggle, foundation_1.spacing(3), utils_1.RcSuggestionListClasses.expanded);
+var SuggestionListStyle = function () {
+    return (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    .", " {\n      margin-right: -", ";\n\n      transform: rotate(0deg);\n      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n      &.", " {\n        transform: rotate(180deg);\n      }\n    }\n  "], ["\n    .", " {\n      margin-right: -", ";\n\n      transform: rotate(0deg);\n      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n      &.", " {\n        transform: rotate(180deg);\n      }\n    }\n  "])), utils_1.RcSuggestionListClasses.toggle, (0, foundation_1.spacing)(3), utils_1.RcSuggestionListClasses.expanded);
 };
+exports.SuggestionListStyle = SuggestionListStyle;
 var templateObject_1;

package/components/Downshift/SuggestionList/utils/SuggestionListUtils.js CHANGED Viewed

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcSuggestionListClasses = void 0;
 var foundation_1 = require("../../../../foundation");
-exports.RcSuggestionListClasses = foundation_1.RcClasses(['root', 'expanded', 'toggle', 'groupTitle'], 'RcSuggestionList');
+exports.RcSuggestionListClasses = (0, foundation_1.RcClasses)(['root', 'expanded', 'toggle', 'groupTitle'], 'RcSuggestionList');