npm - @ringcentral/juno - Versions diffs - 1.11.2 → 1.11.3-beta.5620-d9154e6b - Mend

@ringcentral/juno 1.11.2 → 1.11.3-beta.5620-d9154e6b

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 (164) hide show

package/components/Dialog/utils/DialogContext.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/// <reference types="styled-jsx" />
+/// <reference types="@emotion/core" />
+import { RcBaseSize, RcTheme } from '../../../foundation';
+export declare type RcDialogChildrenSize = RcBaseSize<'small' | 'medium'>;
+export declare type RcDialogChildrenProps = {
+    /** size token */
+    size?: RcDialogChildrenSize;
+};
+export declare type RcDialogContextValue = RcDialogChildrenProps;
+export declare const RcDialogContext: import("react").Context<RcDialogChildrenProps>;
+export declare const useRcDialogContext: () => RcDialogChildrenProps;
+export declare const useDialogDefaultProps: <T extends RcDialogChildrenProps & {
+    theme?: RcTheme | undefined;
+}>({ theme, ...props }: T) => T;

package/components/Dialog/utils/DialogContext.js ADDED Viewed

@@ -0,0 +1,33 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+exports.RcDialogContext = react_1.createContext({});
+exports.useRcDialogContext = function () { return react_1.useContext(exports.RcDialogContext); };
+exports.useDialogDefaultProps = function (_a) {
+    var theme = _a.theme, props = __rest(_a, ["theme"]);
+    var context = exports.useRcDialogContext();
+    var _b = props.size, size = _b === void 0 ? context.size || 'medium' : _b;
+    return __assign(__assign({}, props), { size: size });
+};

package/components/Dialog/utils/index.d.ts CHANGED Viewed

	@@ -1 +1,2 @@
1	+ export * from './DialogContext';
1 2	export * from './DialogUtils';

package/components/Dialog/utils/index.js CHANGED Viewed

@@ -3,4 +3,5 @@ function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
 Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./DialogContext"));
 __export(require("./DialogUtils"));

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

@@ -76,6 +76,24 @@ declare type RcDownshiftProps<T = RcDownshiftSelectedItem, K = T & RcDownshiftSe
      * @returns {ReactNode}
      */
     renderOption?: (option: T & RcDownshiftSelectedItem, state: RcDownshiftRenderOptionState) => React.ReactNode;
+    /**
+     * group layout mode
+     *
+     * - `normal`: use group name as group title
+     * - `expanded`: use first-item as group title, and that is `clickable`
+     *
+     * @default 'normal'
+     */
+    groupVariant?: 'normal' | 'expanded';
+    /**
+     * group expanded state, you can control expanded state by that,
+     * use when `groupVariant` is `expanded`
+     *
+     * - `true`: expand all
+     * - `false`: collapse all
+     * - `{key: boolean}`: control group state
+     */
+    groupExpanded?: Record<string, boolean> | boolean;
     /**
      * If provided, the options will be grouped under the returned string.
      * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
@@ -160,6 +178,7 @@ declare type RcDownshiftProps<T = RcDownshiftSelectedItem, K = T & RcDownshiftSe
      *
      * - `getActiveIndex`: get current active index
      * - `setActiveIndex`: set current active index;
+     * - `getFilterResultItems`: get current filter result option items;
      * - `getHighlightedIndex`: get current highlight index;
      * - `setHighlightedIndex`: set current highlight index;
      * - `openMenu`: open the listbox menu
@@ -167,7 +186,7 @@ declare type RcDownshiftProps<T = RcDownshiftSelectedItem, K = T & RcDownshiftSe
      * - `focus`: focus on text field input
      * - `reset(isFocus)`: reset whole downshift, `isFocus` default is `false`
      */
-    action?: React.Ref<RcDownshiftRef>;
+    action?: React.Ref<RcDownshiftRef<T>>;
     /** auto close menu when options filter result is zero */
     autoClose?: boolean;
     /**
@@ -280,11 +299,13 @@ declare type RcDownshiftProps<T = RcDownshiftSelectedItem, K = T & RcDownshiftSe
     /** @deprecated TextField props */
     TextFieldProps?: Pick<RcTextFieldProps, 'required' | 'inputProps'>;
 };
-declare type RcDownshiftRef = {
+declare type RcDownshiftRef<T = RcDownshiftSelectedItem> = {
     /** get current active index */
     getActiveIndex: () => number;
     /** set current active index */
     setActiveIndex: (index: number) => void;
+    /** get current filter result option items; */
+    getFilterResultItems: () => T[];
     /** get current highlight index */
     getHighlightedIndex: () => number;
     /** set current highlight index */

package/components/Downshift/Downshift.js CHANGED Viewed

@@ -65,8 +65,8 @@ var utils_1 = require("./utils");
 exports.RcDownshiftDefaultFilterOptions = utils_1.RcDownshiftDefaultFilterOptions;
 var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDownshift' });
-    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, getExpandIconProps = props.getExpandIconProps, groupBy = props.groupBy, _d = props.value, valueProp = _d === void 0 ? selectedItemsProp : _d, _e = props.autoHighlight, autoHighlight = _e === void 0 ? true : _e, _f = props.fullWidth, fullWidth = _f === void 0 ? true : _f, _g = props.clearBtn, clearBtn = _g === void 0 ? false : _g, _h = props.toggleButton, toggleButton = _h === void 0 ? false : _h, _j = props.multiple, multiple = _j === void 0 ? false : _j, clearButtonProps = props.clearButtonProps, onClear = props.onClear, ToggleButtonProps = props.ToggleButtonProps, inputValueProp = props.inputValue, onKeyDownProp = props.onKeyDown, helperTextProp = props.helperText, options = props.options, openOnFocus = props.openOnFocus, _k = props.getOptionLabel, getOptionLabel = _k === void 0 ? itemToString : _k, renderInput = props.renderInput, _l = props.label, label = _l === void 0 ? inputLabel : _l, _m = props.inputRef, inputRefProp = _m === void 0 ? messageRef : _m, _o = props.error, error = _o === void 0 ? nameError : _o, _p = props.placeholder, placeholder = _p === void 0 ? inputPlaceholder : _p, _q = props.freeSolo, freeSolo = _q === void 0 ? enableFreeChips : _q, _r = props.keyToTags, keyToTags = _r === void 0 ? keyToChips : _r, _s = props.maxFreeSolo, maxFreeSolo = _s === void 0 ? limitOfFreeChips : _s, SuggestionListProps = props.SuggestionListProps, _t = props.autoSelect, autoSelect = _t === void 0 ? enableAutoTransform : _t, PopperProps = props.PopperProps, initialIsOpen = props.initialIsOpen, disabled = props.disabled, requiredProp = props.required, _u = props.defaultIsOpen, defaultIsOpen = _u === void 0 ? openOnFocus : _u, _v = props.disableCloseOnSelect, disableCloseOnSelect = _v === void 0 ? defaultIsOpen : _v, _w = props.onChange, onChangeProp = _w === void 0 ? onSelectChange : _w, 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, rest = __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", "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"]);
-    var _x = __read(react_1.useState('bottom'), 2), position = _x[0], setPosition = _x[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, _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, rest = __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", "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"]);
+    var _y = __read(react_1.useState('bottom'), 2), position = _y[0], setPosition = _y[1];
     var innerInputRef = react_1.useRef(null);
     var textFieldRef = react_1.useRef(null);
     var inputRef = foundation_1.useForkRef(inputRefProp, innerInputRef);
@@ -76,7 +76,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     var oneOfTagError = false;
     utils_1.useDownshiftError({ isNew: isNew, MenuItem: MenuItem, InputItem: InputItem });
     var required = requiredProp || (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.required);
-    var _y = utils_1.useDownshift({
+    var _z = utils_1.useDownshift({
         open: openProp,
         variant: variant,
         onOpen: onOpen,
@@ -87,6 +87,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         value: valueProp,
         inputValue: inputValueProp,
         getOptionDisabled: getOptionDisabled,
+        groupExpanded: groupVariant === 'normal' ? true : groupExpanded,
         getExpandIconProps: getExpandIconProps,
         options: suggestionItems || options,
         freeSolo: freeSolo,
@@ -102,6 +103,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         openOnFocus: openOnFocus,
         autoHighlight: autoHighlight,
         groupBy: groupBy,
+        groupVariant: groupVariant,
         onChange: onChangeProp,
         onInputChange: onInputChangeProp,
         getOptionLabel: getOptionLabel,
@@ -111,9 +113,9 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _y.focusInput, optionItems = _y.optionItems, selectedItems = _y.selectedItems, highlightedIndex = _y.highlightedIndex, getToggleButtonProps = _y.getToggleButtonProps, getTagProps = _y.getTagProps, getTagListBoxProps = _y.getTagListBoxProps, getMenuProps = _y.getMenuProps, getPopperProps = _y.getPopperProps, getInputProps = _y.getInputProps, getInputAriaProps = _y.getInputAriaProps, getLabelProps = _y.getLabelProps, getItemProps = _y.getItemProps, isOpen = _y.isOpen, inputValue = _y.inputValue, isTagsFocus = _y.isTagsFocus, activeIndex = _y.activeIndex, setActiveIndex = _y.setActiveIndex, setHighlightedIndex = _y.setHighlightedIndex, onInputChange = _y.onInputChange, keepHighlightedIndex = _y.keepHighlightedIndex, changeHighlightedIndexReason = _y.changeHighlightedIndexReason, closeMenu = _y.closeMenu, openMenu = _y.openMenu, reset = _y.reset, getClearButtonProps = _y.getClearButtonProps, noOptionItem = _y.noOptionItem, getNoOptionsProps = _y.getNoOptionsProps, isKeepHighlightedIndex = _y.isKeepHighlightedIndex;
+    }), focusInput = _z.focusInput, optionItems = _z.optionItems, optionsGroupList = _z.optionsGroupList, selectedItems = _z.selectedItems, 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, isTagsFocus = _z.isTagsFocus, 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;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
-    var _z = getInputProps(), onBlur = _z.onBlur, InputProps = __rest(_z, ["onBlur"]);
+    var _0 = getInputProps(), onBlur = _0.onBlur, InputProps = __rest(_0, ["onBlur"]);
     var helperText = isNew
         ? helperTextProp
         : nameError || allowPlainHelperText
@@ -174,17 +176,18 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
     var endAdornment = (toggleButton || clearBtn) && (react_1.default.createElement(styles_1.EndAdornment, null,
         clearBtn && (react_1.default.createElement(ClearIconButton_1.ClearIconButton, __assign({}, getClearButtonProps(clearButtonProps)))),
         toggleButton && (react_1.default.createElement(styles_1.ArrowDownButton, __assign({ variant: "plain", "aria-hidden": true, color: error ? 'danger.f02' : 'neutral.f04', size: "large", symbol: isOpen ? ArrowUp_1.default : ArrowDown_1.default }, getToggleButtonProps(ToggleButtonProps))))));
-    var _0 = (function () {
+    var _1 = (function () {
         var _a = InputPropsProp || {}, classes = _a.classes, restInputPropsProp = __rest(_a, ["classes"]);
         var toClasses = foundation_1.combineClasses(classes, utils_1.RcDownshiftInputClasses);
         return {
             containerClassName: toClasses.container,
             TextFieldInputProps: foundation_1.combineProps(__assign(__assign(__assign({ classes: foundation_1.omit(toClasses, ['container']), endAdornment: endAdornment, inputComponent: styles_1.RcDownshiftInput }, getTagListBoxProps()), InputProps), { onBlur: debug ? undefined : onBlur }), restInputPropsProp),
         };
-    })(), containerClassName = _0.containerClassName, TextFieldInputProps = _0.TextFieldInputProps;
+    })(), containerClassName = _1.containerClassName, TextFieldInputProps = _1.TextFieldInputProps;
     react_1.useImperativeHandle(action, function () { return ({
         getActiveIndex: function () { return activeIndex; },
         setActiveIndex: setActiveIndex,
+        getFilterResultItems: function () { return optionItems; },
         getHighlightedIndex: function () { return highlightedIndex; },
         setHighlightedIndex: function (index) {
             return setHighlightedIndex(index, { reason: 'auto', reRender: true });
@@ -223,7 +226,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                     }
                 },
             } }, getPopperProps(PopperProps)),
-            isOpen && (react_1.default.createElement(SuggestionList_1.RcSuggestionList, __assign({ highlightedIndex: highlightedIndex, options: optionItems, groupBy: groupBy, renderGroup: renderGroup, MenuItem: MenuItem, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getMenuProps: getMenuProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, onUpdatePopper: handleUpdatePopper, maxContainerHeight: 180, getOptionLabel: getOptionLabel }, SuggestionListProps))),
+            isOpen && (react_1.default.createElement(SuggestionList_1.RcSuggestionList, __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 }, SuggestionListProps))),
             isRenderNoOptions && (renderNoOptions === null || renderNoOptions === void 0 ? void 0 : renderNoOptions(getNoOptionsProps, noOptionItem)))));
 }));
 var RcDownshift = foundation_1.styled(foundation_1.withDeprecatedCheck(_RcDownshift, [

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

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import { RcBaseProps, RcClassesProps } from '../../../foundation';
 import { VirtuosoProps } from '../../Virtuoso';
 import { RcDownshiftProps } from '../Downshift';
-import { RcDownshiftGetItemPropsOptions, RcDownshiftHighlightChangeReason, RcDownshiftSelectedItem } from '../utils';
+import { RcDownshiftGetItemPropsOptions, RcDownshiftGroupedOption, RcDownshiftHighlightChangeReason, RcDownshiftSelectedItem } from '../utils';
 export declare type RcSuggestionListProps<T> = RcBaseProps<Partial<VirtuosoProps<T>>, 'totalCount' | 'itemContent' | 'data'> & {
     /**
      * that virtual list container height,
@@ -16,7 +16,7 @@ export declare type RcSuggestionListProps<T> = RcBaseProps<Partial<VirtuosoProps
      * @default false
      */
     padding?: boolean | number;
-} & RcClassesProps<'root' | 'toggle' | 'expanded'>;
+} & RcClassesProps<'root' | 'toggle' | 'expanded' | 'groupTitle'>;
 export declare type InnerSuggestionListProps = {
     /** current highlightedIndex */
     highlightedIndex: number;
@@ -32,7 +32,9 @@ export declare type InnerSuggestionListProps = {
     isKeepHighlightedIndex: boolean;
     /** trigger when need update outside popper position */
     onUpdatePopper?: () => any;
-} & Pick<RcDownshiftProps, 'inputValue' | 'MenuItem' | 'renderOption' | 'getOptionDisabled' | 'renderGroup' | 'groupBy' | 'getOptionLabel'> & RcSuggestionListProps<any>;
-export declare const RcSuggestionList: import("styled-components").StyledComponentClass<Pick<InnerSuggestionListProps, "key" | "form" | "group" | "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" | "css" | "step" | "cite" | "footer" | "header" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "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" | "download" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "padding" | "start" | "wrap" | "open" | "multiple" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "sizes" | "groupIndices" | "firstItemIndex" | "initialTopMostItemIndex" | "topItems" | "isScrolling" | "initialItemCount" | "scrollSeek" | "alignToBottom" | "itemSize" | "atTopStateChange" | "atBottomStateChange" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "topItemCount" | "followOutput" | "overscan" | "components" | "computeItemKey" | "defaultItemHeight" | "fixedItemHeight" | "scrollSeekConfiguration" | "headerFooterTag" | "initialScrollTop" | "useWindowScroll" | "scrollerRef" | "item" | "itemHeight" | "scrollingStateChange" | "maxHeightCacheSize" | "ItemContainer" | "ScrollContainer" | "ListContainer" | "GroupContainer" | "emptyComponent" | "HeaderContainer" | "FooterContainer" | "totalListHeightChanged" | "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" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "options" | "getItemProps" | "getOptionDisabled" | "maxContainerHeight" | "getOptionLabel" | "renderOption" | "groupBy" | "renderGroup" | "MenuItem" | "inputValue" | "highlightedIndex" | "getMenuProps" | "changeHighlightedIndexReason" | "isKeepHighlightedIndex" | "onUpdatePopper"> & React.RefAttributes<any>, import("../../../foundation").RcTheme, Pick<Pick<InnerSuggestionListProps, "key" | "form" | "group" | "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" | "css" | "step" | "cite" | "footer" | "header" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "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" | "download" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "padding" | "start" | "wrap" | "open" | "multiple" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "sizes" | "groupIndices" | "firstItemIndex" | "initialTopMostItemIndex" | "topItems" | "isScrolling" | "initialItemCount" | "scrollSeek" | "alignToBottom" | "itemSize" | "atTopStateChange" | "atBottomStateChange" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "topItemCount" | "followOutput" | "overscan" | "components" | "computeItemKey" | "defaultItemHeight" | "fixedItemHeight" | "scrollSeekConfiguration" | "headerFooterTag" | "initialScrollTop" | "useWindowScroll" | "scrollerRef" | "item" | "itemHeight" | "scrollingStateChange" | "maxHeightCacheSize" | "ItemContainer" | "ScrollContainer" | "ListContainer" | "GroupContainer" | "emptyComponent" | "HeaderContainer" | "FooterContainer" | "totalListHeightChanged" | "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" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "options" | "getItemProps" | "getOptionDisabled" | "maxContainerHeight" | "getOptionLabel" | "renderOption" | "groupBy" | "renderGroup" | "MenuItem" | "inputValue" | "highlightedIndex" | "getMenuProps" | "changeHighlightedIndexReason" | "isKeepHighlightedIndex" | "onUpdatePopper"> & React.RefAttributes<any>, "ref" | "key" | "form" | "group" | "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" | "css" | "step" | "cite" | "footer" | "header" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "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" | "download" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "padding" | "start" | "wrap" | "open" | "multiple" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "sizes" | "groupIndices" | "firstItemIndex" | "initialTopMostItemIndex" | "topItems" | "isScrolling" | "initialItemCount" | "scrollSeek" | "alignToBottom" | "itemSize" | "atTopStateChange" | "atBottomStateChange" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "topItemCount" | "followOutput" | "overscan" | "components" | "computeItemKey" | "defaultItemHeight" | "fixedItemHeight" | "scrollSeekConfiguration" | "headerFooterTag" | "initialScrollTop" | "useWindowScroll" | "scrollerRef" | "item" | "itemHeight" | "scrollingStateChange" | "maxHeightCacheSize" | "ItemContainer" | "ScrollContainer" | "ListContainer" | "GroupContainer" | "emptyComponent" | "HeaderContainer" | "FooterContainer" | "totalListHeightChanged" | "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" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "options" | "getItemProps" | "getOptionDisabled" | "maxContainerHeight" | "getOptionLabel" | "renderOption" | "groupBy" | "renderGroup" | "MenuItem" | "inputValue" | "highlightedIndex" | "getMenuProps" | "changeHighlightedIndexReason" | "isKeepHighlightedIndex" | "onUpdatePopper"> & {
+    /** options group list, use for calculate `aria-setsize` */
+    optionsGroupList?: RcDownshiftGroupedOption<RcDownshiftSelectedItem>[];
+} & Pick<RcDownshiftProps, 'inputValue' | 'MenuItem' | 'renderOption' | 'getOptionDisabled' | 'renderGroup' | 'groupExpanded' | 'groupVariant' | 'getOptionLabel'> & RcSuggestionListProps<any>;
+export declare const RcSuggestionList: import("styled-components").StyledComponentClass<Pick<InnerSuggestionListProps, "key" | "form" | "group" | "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" | "css" | "step" | "cite" | "footer" | "header" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "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" | "download" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "padding" | "start" | "wrap" | "open" | "multiple" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "sizes" | "groupIndices" | "firstItemIndex" | "initialTopMostItemIndex" | "topItems" | "isScrolling" | "initialItemCount" | "scrollSeek" | "alignToBottom" | "itemSize" | "atTopStateChange" | "atBottomStateChange" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "topItemCount" | "followOutput" | "overscan" | "components" | "computeItemKey" | "defaultItemHeight" | "fixedItemHeight" | "scrollSeekConfiguration" | "headerFooterTag" | "initialScrollTop" | "useWindowScroll" | "scrollerRef" | "item" | "itemHeight" | "scrollingStateChange" | "maxHeightCacheSize" | "ItemContainer" | "ScrollContainer" | "ListContainer" | "GroupContainer" | "emptyComponent" | "HeaderContainer" | "FooterContainer" | "totalListHeightChanged" | "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" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "options" | "getItemProps" | "getOptionDisabled" | "maxContainerHeight" | "getOptionLabel" | "renderOption" | "groupVariant" | "groupExpanded" | "renderGroup" | "MenuItem" | "inputValue" | "highlightedIndex" | "getMenuProps" | "changeHighlightedIndexReason" | "isKeepHighlightedIndex" | "onUpdatePopper" | "optionsGroupList"> & React.RefAttributes<any>, import("../../../foundation").RcTheme, Pick<Pick<InnerSuggestionListProps, "key" | "form" | "group" | "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" | "css" | "step" | "cite" | "footer" | "header" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "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" | "download" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "padding" | "start" | "wrap" | "open" | "multiple" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "sizes" | "groupIndices" | "firstItemIndex" | "initialTopMostItemIndex" | "topItems" | "isScrolling" | "initialItemCount" | "scrollSeek" | "alignToBottom" | "itemSize" | "atTopStateChange" | "atBottomStateChange" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "topItemCount" | "followOutput" | "overscan" | "components" | "computeItemKey" | "defaultItemHeight" | "fixedItemHeight" | "scrollSeekConfiguration" | "headerFooterTag" | "initialScrollTop" | "useWindowScroll" | "scrollerRef" | "item" | "itemHeight" | "scrollingStateChange" | "maxHeightCacheSize" | "ItemContainer" | "ScrollContainer" | "ListContainer" | "GroupContainer" | "emptyComponent" | "HeaderContainer" | "FooterContainer" | "totalListHeightChanged" | "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" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "options" | "getItemProps" | "getOptionDisabled" | "maxContainerHeight" | "getOptionLabel" | "renderOption" | "groupVariant" | "groupExpanded" | "renderGroup" | "MenuItem" | "inputValue" | "highlightedIndex" | "getMenuProps" | "changeHighlightedIndexReason" | "isKeepHighlightedIndex" | "onUpdatePopper" | "optionsGroupList"> & React.RefAttributes<any>, "ref" | "key" | "form" | "group" | "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" | "css" | "step" | "cite" | "footer" | "header" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "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" | "download" | "hrefLang" | "rel" | "default" | "action" | "content" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "padding" | "start" | "wrap" | "open" | "multiple" | "selected" | "src" | "checked" | "readOnly" | "required" | "autoComplete" | "rows" | "sizes" | "groupIndices" | "firstItemIndex" | "initialTopMostItemIndex" | "topItems" | "isScrolling" | "initialItemCount" | "scrollSeek" | "alignToBottom" | "itemSize" | "atTopStateChange" | "atBottomStateChange" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "topItemCount" | "followOutput" | "overscan" | "components" | "computeItemKey" | "defaultItemHeight" | "fixedItemHeight" | "scrollSeekConfiguration" | "headerFooterTag" | "initialScrollTop" | "useWindowScroll" | "scrollerRef" | "item" | "itemHeight" | "scrollingStateChange" | "maxHeightCacheSize" | "ItemContainer" | "ScrollContainer" | "ListContainer" | "GroupContainer" | "emptyComponent" | "HeaderContainer" | "FooterContainer" | "totalListHeightChanged" | "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" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "options" | "getItemProps" | "getOptionDisabled" | "maxContainerHeight" | "getOptionLabel" | "renderOption" | "groupVariant" | "groupExpanded" | "renderGroup" | "MenuItem" | "inputValue" | "highlightedIndex" | "getMenuProps" | "changeHighlightedIndexReason" | "isKeepHighlightedIndex" | "onUpdatePopper" | "optionsGroupList"> & {
     theme?: import("../../../foundation").RcTheme | undefined;
 }>;

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

@@ -91,9 +91,10 @@ var List = react_1.forwardRef(function (props, ref) {
 });
 var SuggestionList = react_1.forwardRef(function (inProps, ref) {
     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, groupBy = props.groupBy, renderGroup = props.renderGroup, getOptionDisabled = props.getOptionDisabled, MenuItem = props.MenuItem, changeHighlightedIndexReason = props.changeHighlightedIndexReason, isKeepHighlightedIndex = props.isKeepHighlightedIndex, componentsProp = props.components, onUpdatePopper = props.onUpdatePopper, getOptionLabel = props.getOptionLabel, padding = props.padding, _a = props.maxContainerHeight, maxContainerHeight = _a === void 0 ? '100%' : _a, classNameProp = props.className, classesProp = props.classes, rest = __rest(props, ["highlightedIndex", "options", "getItemProps", "getMenuProps", "renderOption", "inputValue", "groupBy", "renderGroup", "getOptionDisabled", "MenuItem", "changeHighlightedIndexReason", "isKeepHighlightedIndex", "components", "onUpdatePopper", "getOptionLabel", "padding", "maxContainerHeight", "className", "classes"]);
+    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, _a = props.maxContainerHeight, maxContainerHeight = _a === void 0 ? '100%' : _a, classNameProp = props.className, classesProp = props.classes, rest = __rest(props, ["highlightedIndex", "options", "getItemProps", "getMenuProps", "renderOption", "inputValue", "groupVariant", "groupExpanded", "renderGroup", "optionsGroupList", "getOptionDisabled", "MenuItem", "changeHighlightedIndexReason", "isKeepHighlightedIndex", "components", "onUpdatePopper", "getOptionLabel", "padding", "maxContainerHeight", "className", "classes"]);
     var vlRef = react_1.useRef(null);
     var forkVlRef = foundation_1.useForkRef(ref, vlRef);
+    var isTitleGroup = groupVariant === 'normal';
     var listRef = react_1.useRef(null);
     var itemData = options;
     var itemCount = options.length;
@@ -144,7 +145,9 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
             // * only scroll when reason is 'keyboard'
             changeHighlightedIndexReason &&
             changeHighlightedIndexReason !== 'mouse') {
-            scrollToHighlightedIndex(prevHighlightedIndex, highlightedIndex);
+            scrollToHighlightedIndex(prevHighlightedIndex, highlightedIndex,
+            // when title group topHighlightIndex to be 1, first item is group title
+            isTitleGroup ? 1 : 0);
         }
     });
     var handleScrolling = function (scrolling) {
@@ -160,20 +163,24 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
     };
     var itemContent = function (index, option) {
         var _a;
-        var _b, _c, _d, _e, _f;
-        var isFirstGroupItem = option === ((_b = option.group) === null || _b === void 0 ? void 0 : _b.options[0]);
-        var expandIconProps = isFirstGroupItem
-            ? (_d = (_c = option.group) === null || _c === void 0 ? void 0 : _c.getExpandIconProps) === null || _d === void 0 ? void 0 : _d.call(_c, {
+        var _b, _c, _d, _e;
+        var currGroup = option.group;
+        var isGroupTitle = option === (currGroup === null || currGroup === void 0 ? void 0 : currGroup.options[0]);
+        var groupIndex = (optionsGroupList === null || optionsGroupList === void 0 ? void 0 : optionsGroupList.findIndex(function (x) { return x.group === (currGroup === null || currGroup === void 0 ? void 0 : currGroup.group); })) || 0;
+        var isFixedGroupExpanded = typeof groupExpanded === 'boolean';
+        var expandIconProps = !isTitleGroup && !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 = {},
-                    _a[classes.expanded] = (_e = option.group) === null || _e === void 0 ? void 0 : _e.expanded,
+                    _a[classes.expanded] = (_d = option.group) === null || _d === void 0 ? void 0 : _d.expanded,
                     _a)),
             }) : undefined;
         var itemProps = getItemProps({
             item: option,
             index: index,
+            className: isGroupTitle ? classes.groupTitle : undefined,
         });
         var selected = highlightedIndex === index;
-        var resultProps = __assign(__assign(__assign({}, option), itemProps), { 'aria-setsize': itemCount, 'aria-posinset': index, key: itemProps.id });
+        var resultProps = __assign(__assign(__assign({}, option), itemProps), { 'aria-setsize': itemCount - (isTitleGroup ? (optionsGroupList === null || optionsGroupList === void 0 ? void 0 : optionsGroupList.length) || 0 : 0), 'aria-posinset': index - (isTitleGroup ? groupIndex : 0), key: itemProps.id });
         // * when item is not disabled, that should check outside is that disabled
         if (!resultProps.freeSolo && !resultProps.disabled && getOptionDisabled) {
             resultProps.disabled = getOptionDisabled(option);
@@ -183,8 +190,8 @@ var SuggestionList = react_1.forwardRef(function (inProps, ref) {
             selected: selected,
             index: index,
         };
-        if (renderGroup && expandIconProps) {
-            return renderGroup(resultProps, __assign(__assign({}, state), { expanded: (_f = option.group) === null || _f === void 0 ? void 0 : _f.expanded, expandIconProps: expandIconProps }));
+        if (renderGroup && isGroupTitle) {
+            return renderGroup(resultProps, __assign(__assign({}, state), { expanded: (_e = option.group) === null || _e === void 0 ? void 0 : _e.expanded, expandIconProps: expandIconProps }));
         }
         if (renderOption) {
             // * as any for VirtualizedListWithAutoSizer type issue

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

	@@ -1 +1 @@
1	- export declare const RcSuggestionListClasses: Partial<import("../../../../foundation").UnitMap<"root" \| "expanded" \| "toggle", any>>;
1	+ export declare const RcSuggestionListClasses: Partial<import("../../../../foundation").UnitMap<"root" \| "expanded" \| "toggle" \| "groupTitle", any>>;

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

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

package/components/Downshift/utils/useDownshift.d.ts CHANGED Viewed

@@ -17,8 +17,8 @@ declare type UseDownshiftParams = {
      * set that will auto add item into options
      */
     addNoOptionItem?: 'first' | 'last';
-} & Pick<RcDownshiftProps<RcDownshiftSelectedItem>, 'open' | 'onOpen' | 'onClose' | 'multiple' | 'onChange' | 'value' | 'getOptionLabel' | 'filterOptions' | 'options' | 'freeSolo' | 'maxFreeSolo' | 'onMaxFreeSolo' | 'disableCloseOnSelect' | 'initialIsOpen' | 'keyToTags' | 'inputValue' | 'autoSelect' | 'onInputChange' | 'onKeyDown' | 'disabled' | 'openOnFocus' | 'onClear' | 'renderNoOptions' | 'groupBy' | 'getExpandIconProps' | 'autoHighlight' | 'getOptionDisabled' | 'onGroupExpanded' | 'required' | 'label' | 'disabledItemsHighlightable' | 'variant'>;
-export declare const useDownshift: ({ multiple: multipleProp, variant, label: labelProp, inputValue: inputValueProp, getExpandIconProps, getOptionLabel, keyToTags, filterOptions, disabledItemsHighlightable, options, freeSolo, onInputChange: onInputChangeProp, maxFreeSolo, onMaxFreeSolo, openOnFocus, disableCloseOnSelect, initialIsOpen, autoSelect, inputContainerRef, inputRef, wrapperRef, onKeyDown: onKeyDownProp, onChange: onSelectChange, value: selectedItemsProp, disabled, renderNoOptions, onClear, groupBy, autoHighlight, getOptionDisabled, addNoOptionItem, onGroupExpanded, required, open: openProp, onOpen, onClose, }: UseDownshiftParams) => {
+} & Pick<RcDownshiftProps<RcDownshiftSelectedItem>, 'open' | 'onOpen' | 'onClose' | 'multiple' | 'onChange' | 'value' | 'getOptionLabel' | 'filterOptions' | 'options' | 'freeSolo' | 'maxFreeSolo' | 'onMaxFreeSolo' | 'disableCloseOnSelect' | 'initialIsOpen' | 'keyToTags' | 'inputValue' | 'autoSelect' | 'onInputChange' | 'onKeyDown' | 'disabled' | 'openOnFocus' | 'onClear' | 'renderNoOptions' | 'autoHighlight' | 'getOptionDisabled' | 'required' | 'label' | 'disabledItemsHighlightable' | 'variant' | 'groupBy' | 'getExpandIconProps' | 'groupExpanded' | 'onGroupExpanded' | 'groupVariant'>;
+export declare const useDownshift: ({ multiple: multipleProp, variant, label: labelProp, inputValue: inputValueProp, getOptionLabel, keyToTags, filterOptions, disabledItemsHighlightable, options, freeSolo, onInputChange: onInputChangeProp, maxFreeSolo, onMaxFreeSolo, openOnFocus, disableCloseOnSelect, initialIsOpen, autoSelect, inputContainerRef, inputRef, wrapperRef, onKeyDown: onKeyDownProp, onChange: onSelectChange, value: selectedItemsProp, disabled, renderNoOptions, onClear, autoHighlight, getOptionDisabled, addNoOptionItem, groupBy, onGroupExpanded, groupVariant, groupExpanded, getExpandIconProps, required, open: openProp, onOpen, onClose, }: UseDownshiftParams) => {
     focusInput: () => void | undefined;
     setIsTagsFocus: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     readOnly: boolean | undefined;
@@ -835,5 +835,6 @@ export declare const useDownshift: ({ multiple: multipleProp, variant, label: la
     openMenu: (e?: ChangeEvent<{}> | undefined) => void;
     reset: (isFocus?: boolean | undefined) => void;
     forceUpdate: () => void;
+    optionsGroupList: import("./SelectItem").RcDownshiftGroupedOption<RcDownshiftSelectedItem>[];
 };
 export {};

package/components/Downshift/utils/useDownshift.js CHANGED Viewed

@@ -97,7 +97,7 @@ function stringArrToRegExp(keyToTags) {
 }
 var componentName = 'RcDownshift';
 exports.useDownshift = function (_a) {
-    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, getExpandIconProps = _a.getExpandIconProps, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DownshiftUtils_1.DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DownshiftUtils_1.DEFAULT_KEY_TO_CHIPS : _c, filterOptions = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, groupBy = _a.groupBy, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, onGroupExpanded = _a.onGroupExpanded, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose;
+    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DownshiftUtils_1.DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DownshiftUtils_1.DEFAULT_KEY_TO_CHIPS : _c, filterOptions = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose;
     var isAutocomplete = variant === 'autocomplete';
     // * when that is autocomplete, that will never be multiple
     var multiple = isAutocomplete ? false : multipleProp;
@@ -204,8 +204,11 @@ exports.useDownshift = function (_a) {
         options: options,
         filteredResult: filteredResult,
         getExpandIconProps: getExpandIconProps,
+        groupExpanded: groupExpanded,
         onGroupExpanded: onGroupExpanded,
-    }), groupedResult = _l.groupedResult, handleGroupExpandedChange = _l.handleGroupExpandedChange;
+        groupVariant: groupVariant,
+        id: downshiftId,
+    }), groupedResult = _l.groupedResult, handleGroupExpandedChange = _l.handleGroupExpandedChange, optionsGroupList = _l.optionsGroupList;
     var optionItems = groupBy ? groupedResult : filteredResult;
     var freeSoloCount = react_1.useMemo(function () { return selectedItems.filter(function (x) { return x.freeSolo; }).length; }, [selectedItems]);
     var handleSelectedItems = function (_selectedItems) {
@@ -733,7 +736,7 @@ exports.useDownshift = function (_a) {
                                 var currOption = optionItems[highlightedIndex];
                                 var currentGroup = currOption.group;
                                 if (currentGroup && currentGroup.options.length > 1) {
-                                    handleGroupExpandedChange(currentGroup.key);
+                                    handleGroupExpandedChange(currentGroup.group);
                                 }
                             }
                             break;
@@ -874,6 +877,7 @@ exports.useDownshift = function (_a) {
         openMenu: openMenu,
         reset: reset,
         forceUpdate: forceUpdate,
+        optionsGroupList: optionsGroupList,
     };
     changeHighlightedIndexReason.current = undefined;
     return resultObj;

package/components/Downshift/utils/useDownshiftGroup.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
 import { RcDownshiftProps } from '../Downshift';
-import { RcDownshiftSelectedItem } from './SelectItem';
+import { RcDownshiftGroupedOption, RcDownshiftSelectedItem } from './SelectItem';
 declare type UseDownshiftGroup = {
     filteredResult: RcDownshiftSelectedItem[];
-} & Pick<RcDownshiftProps, 'options' | 'groupBy' | 'getExpandIconProps' | 'onGroupExpanded'>;
-export declare const useDownshiftGroup: ({ groupBy, options, filteredResult, getExpandIconProps, onGroupExpanded, }: UseDownshiftGroup) => {
+    id: string;
+} & Pick<RcDownshiftProps, 'options' | 'groupBy' | 'getExpandIconProps' | 'onGroupExpanded' | 'groupExpanded' | 'groupVariant'>;
+export declare const useDownshiftGroup: ({ groupBy, options, filteredResult, getExpandIconProps, groupExpanded, onGroupExpanded, groupVariant, id, }: UseDownshiftGroup) => {
+    optionsGroupList: RcDownshiftGroupedOption<RcDownshiftSelectedItem>[];
     groupedResult: RcDownshiftSelectedItem[];
     groupExpandedMap: Record<string, boolean>;
-    handleGroupExpandedChange: (key: number) => void;
+    handleGroupExpandedChange: (key: string) => void;
 };
 export {};

package/components/Downshift/utils/useDownshiftGroup.js CHANGED Viewed

@@ -34,15 +34,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var foundation_1 = require("../../../foundation");
 exports.useDownshiftGroup = function (_a) {
-    var groupBy = _a.groupBy, options = _a.options, filteredResult = _a.filteredResult, getExpandIconProps = _a.getExpandIconProps, onGroupExpanded = _a.onGroupExpanded;
-    var _b = __read(react_1.useState({}), 2), groupExpandedMap = _b[0], setGroupExpandedMap = _b[1];
+    var groupBy = _a.groupBy, options = _a.options, filteredResult = _a.filteredResult, getExpandIconProps = _a.getExpandIconProps, groupExpanded = _a.groupExpanded, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, id = _a.id;
+    var _b = __read(foundation_1.useRefState({}), 2), groupExpandedMapRef = _b[0], setGroupExpandedMap = _b[1];
+    var isTitleGroup = groupVariant === 'normal';
+    foundation_1.useChange(function () {
+        if (typeof groupExpanded === 'object') {
+            setGroupExpandedMap(groupExpanded, false);
+        }
+    }, function () { return groupExpanded; });
     var handleGroupExpandedChange = function (key) {
         var _a;
+        var groupExpandedMap = groupExpandedMapRef.current;
+        if (typeof groupExpanded === 'boolean') {
+            return;
+        }
         var toExpandedState = !groupExpandedMap[key];
         var newExpandedMap = __assign(__assign({}, groupExpandedMap), (_a = {}, _a[key] = toExpandedState, _a));
         setGroupExpandedMap(newExpandedMap);
         if (onGroupExpanded) {
-            var group = groupedOptionsSource.find(function (x) { return x.key === key; });
+            var group = optionsGroupList.find(function (x) { return x.group === key; });
             if (group) {
                 onGroupExpanded(__assign(__assign({}, foundation_1.omit(group, ['getExpandIconProps'])), { expanded: toExpandedState }), newExpandedMap);
             }
@@ -53,7 +63,7 @@ exports.useDownshiftGroup = function (_a) {
         e.preventDefault();
         e.stopPropagation();
     });
-    var groupedOptionsSource = react_1.useMemo(function () {
+    var optionsGroupList = react_1.useMemo(function () {
         /** key with this group count */
         if (groupBy && options) {
             // used to keep track of key and indexes in the result array
@@ -85,7 +95,7 @@ exports.useDownshiftGroup = function (_a) {
                             return newGroup_1.options.length > 1
                                 ? foundation_1.combineProps({
                                     onClick: function (e) {
-                                        handleExpandIconClick(e, index);
+                                        handleExpandIconClick(e, group);
                                     },
                                     onMouseDown: function (e) {
                                         e.preventDefault();
@@ -97,6 +107,14 @@ exports.useDownshiftGroup = function (_a) {
                         },
                     };
                     newGroup_1.options[0].group = newGroup_1;
+                    if (isTitleGroup) {
+                        newGroup_1.options.unshift({
+                            id: id + "-" + group,
+                            label: group,
+                            disabled: true,
+                            group: newGroup_1,
+                        });
+                    }
                     acc.push(newGroup_1);
                 }
                 return acc;
@@ -108,20 +126,23 @@ exports.useDownshiftGroup = function (_a) {
         getExpandIconProps,
         groupBy,
         handleExpandIconClick,
+        id,
+        isTitleGroup,
         options,
     ]);
+    var groupExpandedMap = groupExpandedMapRef.current;
     // * speared logic with group, prevent calculate every time.
     var groupedResult = react_1.useMemo(function () {
         var addExpandedResult = Object.entries(groupExpandedMap).reduce(function (prev, _a) {
             var _b = __read(_a, 2), key = _b[0], expended = _b[1];
-            var group = prev.find(function (x) { return "" + x.key === key; });
+            var group = prev.find(function (x) { return x.group === key; });
             if (group) {
                 group.expanded = expended;
             }
             return prev;
-        }, __spread(groupedOptionsSource));
+        }, __spread(optionsGroupList));
         return addExpandedResult.reduce(function (prev, curr) {
-            if (curr.expanded) {
+            if (typeof groupExpanded === 'boolean' ? groupExpanded : curr.expanded) {
                 prev.push.apply(prev, __spread(curr.options));
             }
             else {
@@ -129,8 +150,9 @@ exports.useDownshiftGroup = function (_a) {
             }
             return prev;
         }, []);
-    }, [groupExpandedMap, groupedOptionsSource]);
+    }, [groupExpandedMap, optionsGroupList, groupExpanded]);
     return {
+        optionsGroupList: optionsGroupList,
         groupedResult: groupedResult,
         groupExpandedMap: groupExpandedMap,
         handleGroupExpandedChange: handleGroupExpandedChange,