@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/select/overrides.js

@@ -1,96 +1,173 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { chevronStyles, transparentScrollbarStyles } from '../helpers/commonStyles';
 import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 import ChevronDown from '../icon/components/chevron-down';
-import { borderColor, borderWidth } from '../helpers/longHandHelpers';
+import { borderRadius as borderRadiusLongHandHelper } from '../helpers/longHandHelpers';
 import { getInputStyles } from '../input/styled-components';
 import { StyledTombstone } from '../helpers/StyledTombstone';
 import { useStyle } from '../style';
-import { borderRadius as borderRadiusLongHandHelper } from '../helpers/longHandHelpers';
-var selectBorderColor = function (_a, _b) {
-    var theme = _a.theme;
-    var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c, $isPseudoFocused = _b.$isPseudoFocused, $isFocused = _b.$isFocused, $disabled = _b.$disabled;
+import { inputCVA } from '../input/cvaConfigs';
+import { controlContainerCVA } from './cvaConfigs';
+var selectBorderColor = function (_, _a) {
+    var _b = _a.$intent, $intent = _b === void 0 ? 'default' : _b, $isPseudoFocused = _a.$isPseudoFocused, $isFocused = _a.$isFocused, $disabled = _a.$disabled;
     switch ($intent) {
         case 'default':
         default: {
             if ($isPseudoFocused || $isFocused)
-                return borderColor(theme.spr.interactive01);
+                return 'spr-border-quinary';
+            //todo theme-override-remains => disabled border is taken from input theme, i.e. theme.input.disabledBorderColor
             if ($disabled)
-                return borderColor(theme.input.disabledBorderColor);
-            return __assign(__assign({}, borderColor(theme.spr.field)), { ':hover': __assign({}, borderColor(theme.spr.border06)) });
+                return 'spr-border-primary';
+            return 'spr-border-primary hover:spr-border-quaternary';
         }
         case 'success':
-            return borderColor(theme.spr.supportSuccess);
+            return 'spr-border-success';
         case 'warning':
-            return borderColor(theme.spr.supportWarning);
+            return 'spr-border-warning';
         case 'error':
-            return borderColor(theme.spr.supportError);
+            return 'spr-border-error';
     }
 };
 // Removing 'overrides' injected by baseweb
 export var SelectArrow = function (_a) {
     var $isOpen = _a.$isOpen, title = _a.title, overrides = _a.overrides, restProps = __rest(_a, ["$isOpen", "title", "overrides"]);
-    return (_jsx(ChevronDown, __assign({ title: title, "$isOpen": $isOpen }, restProps, { className: [chevronStyles, 'ml-1 cursor-pointer', restProps === null || restProps === void 0 ? void 0 : restProps.className] }), void 0));
+    return (_jsx(ChevronDown, __assign({ title: title, "$isOpen": $isOpen }, restProps, { className: [
+            'transition-transform duration-200 cursor-pointer',
+            (restProps === null || restProps === void 0 ? void 0 : restProps.size) === 'small' || (restProps === null || restProps === void 0 ? void 0 : restProps.size) === 'medium' ? 'h-3 w-3 m-1.5' : 'h-2.5 w-2.5 ml-1',
+            $isOpen ? 'spr-icon-secondary rotate-180' : 'spr-icon-primary',
+            restProps === null || restProps === void 0 ? void 0 : restProps.className,
+        ] })));
 };
-export var getSearchIconContainerStyles = ['flex relative items-center top-0 left-0 h-auto mr-2'];
-export var getSearchIconStyles = function (_a, _b) {
-    var theme = _a.theme;
-    var $isOpen = _b.$isOpen;
-    return ({
-        color: $isOpen ? theme.spr.interactive01 : 'currentColor',
-    });
+export var getSearchIconContainerStyles = [
+    'flex relative items-center top-0 left-0 h-auto mr-2',
+    function (_, _a) {
+        var $disabled = _a.$disabled;
+        return ($disabled ? 'forced-colors:text-disabled' : '');
+    },
+];
+export var getSearchIconStyles = function (_, _a) {
+    var $isOpen = _a.$isOpen;
+    return $isOpen ? 'spr-link' : 'text-current';
 };
 export var getControlContainerStyles = [
+    inputCVA,
+    function (_, _a) {
+        var $disabled = _a.$disabled;
+        return ($disabled ? 'spr-bg-secondary' : 'spr-bg-primary');
+    },
+    // @ts-ignore -- legacy theme support
     getInputStyles,
-    // Applying paddingX only. paddingY will be applied on ValueContainer.
-    'py-0 transition-none overflow-auto',
+    controlContainerCVA,
     selectBorderColor,
-    transparentScrollbarStyles,
-    function (utils, props) {
-        var _a;
-        var $multi = props.$multi, $isEmpty = props.$isEmpty, $type = props.$type, $size = props.$size;
+    function (_a, _) {
+        var theme = _a.theme;
+        return (theme.density === 'COMPACT' ? 'py-px' : undefined);
+    },
+    //theme overrides
+    function (_, _a) {
+        var $isFocused = _a.$isFocused;
+        return ($isFocused ? 'forced-colors:border-highlight' : '');
+    },
+    // @ts-ignore -- legacy theme support
+    (function (utils, props) {
+        var _a, _b;
+        var $size = props.$size;
         var borderRadius = ((_a = getComponentSizeTheme(utils.theme, 'input', $size, getDefaultSize(utils.theme))) === null || _a === void 0 ? void 0 : _a.borderRadius) ||
-            utils.theme.input.borderRadius;
+            ((_b = utils.theme.input) === null || _b === void 0 ? void 0 : _b.borderRadius);
         // Override paddingLeft for multiSelect when values are selected
+        return borderRadius
+            ? __assign({}, borderRadiusLongHandHelper(borderRadius)) : {};
+    }),
+    function (_, _a) {
+        var $multi = _a.$multi, $isEmpty = _a.$isEmpty, $type = _a.$type;
         var shouldOverridePaddingLeft = $multi && !$isEmpty && $type !== 'search';
-        return __assign(__assign(__assign(__assign({}, borderWidth(utils.theme.borderWidth.default)), (shouldOverridePaddingLeft && { paddingLeft: utils.px2rem(2) })), { maxHeight: '120px' }), borderRadiusLongHandHelper(borderRadius));
+        return shouldOverridePaddingLeft ? 'pl-0.5' : '';
     },
 ];
+var getValueContainerSpacingClassName = function (_, _a) {
+    var $multi = _a.$multi, $isEmpty = _a.$isEmpty, $size = _a.$size;
+    if (!$multi || $isEmpty) {
+        return '';
+    }
+    switch ($size) {
+        case 'xxxs':
+            return 'pl-0.5 py-px';
+        case 'xs':
+            return 'pl-1 py-0.5';
+        case 'sm':
+            return 'pl-1 py-1';
+        case 'md':
+        default:
+            return 'pl-1 py-1.5';
+        case 'lg':
+            return 'pl-1 py-1.5';
+        case 'small':
+            return 'pl-1.25 py-px';
+        case 'medium':
+            return 'pl-1.25 py-1.25';
+    }
+};
 export var getValueContainerStyles = [
+    inputCVA,
     // For single Select read theme values from theme.input, form multiSelect read theme values from theme.multiSelect
+    // @ts-ignore -- legacy theme support
     getInputStyles,
-    // Applying paddingY only. paddingX will be applied on ControlContainer.
     'px-0 self-start',
-    function (_a, _b) {
+    getValueContainerSpacingClassName,
+    function (_a, _) {
+        var theme = _a.theme;
+        return (theme.density === 'COMPACT' ? 'py-1' : undefined);
+    },
+    // @ts-ignore -- legacy theme support
+    (function (_a, _b) {
         var theme = _a.theme;
         var $multi = _b.$multi, $isEmpty = _b.$isEmpty, $size = _b.$size;
         var multiSelectTheme = getComponentSizeTheme(theme, 'multiSelect', $size, getDefaultSize(theme));
-        return $multi && !$isEmpty
-            ? {
-                paddingTop: multiSelectTheme.paddingY,
-                paddingBottom: multiSelectTheme.paddingY,
-                paddingLeft: multiSelectTheme.paddingX,
-            }
-            : {};
+        return $multi && !$isEmpty && multiSelectTheme
+            ? __assign(__assign({}, (multiSelectTheme.paddingY
+                ? { paddingBlockStart: multiSelectTheme.paddingY, paddingBlockEnd: multiSelectTheme.paddingY }
+                : {})), (multiSelectTheme.paddingX ? { paddingInlineStart: multiSelectTheme.paddingX } : {})) : {};
+    }),
+];
+export var getValueTypography = [
+    function (_, _a) {
+        var $selectSize = _a.$selectSize;
+        if ($selectSize === 'small' || $selectSize === 'medium')
+            return 'text-14 leading-150';
+        if ($selectSize === 'xxxs')
+            return 'text-13 leading-4';
+        return 'text-14 leading-4.5';
+    },
+    // @ts-ignore -- legacy theme support
+    (function (_a, _b) {
+        var theme = _a.theme;
+        var $selectSize = _b.$selectSize;
+        var inputSizeTheme = getComponentSizeTheme(theme, 'input', $selectSize, getDefaultSize(theme));
+        return inputSizeTheme
+            ? __assign(__assign({}, ((inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.fontSize) ? { fontSize: inputSizeTheme.fontSize } : {})), ((inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight)
+                ? { lineHeight: inputSizeTheme.lineHeight, height: inputSizeTheme.lineHeight }
+                : {})) : {};
+    }),
+    function (_, _a) {
+        var $disabled = _a.$disabled;
+        return ($disabled ? 'forced-colors:text-disabled' : '');
     },
 ];
-export var getValueTypography = function (_a, _b) {
-    var theme = _a.theme;
-    var $selectSize = _b.$selectSize;
-    var _c = getComponentSizeTheme(theme, 'input', $selectSize, getDefaultSize(theme)), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
-    return { fontSize: fontSize, lineHeight: lineHeight, height: lineHeight };
-};
 // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
 export var OverlaySelectPopoverOverride = function (_a) {
-    var content = _a.content, inputContainer = _a.children, setStickySentinelRef = _a.setStickySentinelRef;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: setStickySentinelRef }, void 0), inputContainer, typeof content === 'function' ? content() : content] }, void 0));
+    var content = _a.content, inputContainer = _a.children, closePopover = _a.closePopover, setStickySentinelRef = _a.setStickySentinelRef;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: setStickySentinelRef }), inputContainer, typeof content === 'function' ? content({ closeMenu: closePopover }) : content] }));
 };
 export var SingleValueTombstone = function (_a) {
     var $selectSize = _a.$selectSize;
     var theme = useStyle().theme;
-    var lineHeight = getComponentSizeTheme(theme, 'input', $selectSize, getDefaultSize(theme)).lineHeight;
-    return (_jsx(StyledTombstone, { "data-testid": "single-value-tombstone", className: ['w-24 rounded-8', { height: lineHeight }] }, void 0));
+    var defaultHeightClass = $selectSize === 'xxxs' ? 'h-4' : 'h-4.5';
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $selectSize, getDefaultSize(theme));
+    return (_jsx(StyledTombstone, { "data-testid": "single-value-tombstone", className: [
+            "w-24 rounded-8 ".concat(defaultHeightClass),
+            //@ts-ignore -- theme override
+            (inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight) ? { height: inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight } : {},
+        ] }));
 };
 export var selectMenuOverrides = {
     Menu: {
@@ -98,12 +175,17 @@ export var selectMenuOverrides = {
             overrides: {
                 List: {
                     props: {
+                        className: function (_a, _) {
+                            var theme = _a.theme;
+                            return (theme.density === 'COMPACT' ? 'py-1' : undefined);
+                        },
                         overrides: {
                             Root: {
-                                style: function (_, _a) {
+                                className: 'overflow-auto max-h-[--sw-max-height]',
+                                style: (function (_, _a) {
                                     var $maxHeight = _a.$maxHeight;
-                                    return ({ maxHeight: $maxHeight, overflow: 'auto' });
-                                },
+                                    return ({ '--sw-max-height': $maxHeight });
+                                }),
                             },
                         },
                     },
@@ -118,9 +200,10 @@ export var selectMenuOverrides = {
                     props: {
                         overrides: {
                             Root: {
-                                style: {
-                                    wordBreak: 'break-word',
-                                },
+                                className: ['break-words', function (_a, _) {
+                                        var theme = _a.theme;
+                                        return (theme.density === 'COMPACT' ? 'py-0.5' : undefined);
+                                    }],
                             },
                         },
                     },

package/esm/select/select-variants.js

@@ -2,8 +2,8 @@ import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import Select from './select';
 export function MultiSelect(props) {
-    return _jsx(Select, __assign({}, props, { filterOptions: props.filterOptions, multi: true }), void 0);
+    return _jsx(Select, __assign({}, props, { filterOptions: props.filterOptions, multi: true }));
 }
 export function SingleSelect(props) {
-    return _jsx(Select, __assign({}, props, { filterOptions: props.filterOptions, multi: false }), void 0);
+    return _jsx(Select, __assign({}, props, { filterOptions: props.filterOptions, multi: false }));
 }

package/esm/select/select.d.ts

@@ -1,12 +1,11 @@
-import { SelectProps } from './types';
 import defaultProps from './default-props';
+import type { SelectProps } from './types';
 declare const Select: {
-    (props: SelectProps & typeof defaultProps): React.ReactElement;
+    (props: SelectProps & Omit<typeof defaultProps, 'value'>): React.ReactElement;
     defaultProps: {
         autoFocus: boolean;
         backspaceRemoves: boolean;
         clearable: boolean;
-        closeOnSelect: boolean;
         creatable: boolean;
         deleteRemoves: boolean;
         disabled: boolean;
@@ -16,6 +15,7 @@ declare const Select: {
         filterOptions: ((options: import("./types").Value, filterValue: string, excludeOptions: import("./types").Value | null | undefined, a: {
             valueKey: string;
             labelKey: string;
+            filterOnlyCreated?: boolean | undefined;
         }) => import("./types").Value) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
@@ -41,6 +41,7 @@ declare const Select: {
         placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         virtual: boolean;
         popoverMinWidth: string;
+        expandLimitTagsOnFocus: boolean;
     };
 };
 export default Select;

package/esm/select/select.js

@@ -1,22 +1,33 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+//libs
+import { useMemo } from 'react';
+import _keyBy from 'lodash/keyBy';
+//components
 import BaseSelect from './base-select';
 import OverlaySelect from './overlaySelect';
 import MobileSelect from './mobileSelect';
-import defaultProps from './default-props';
+//hooks
 import { useContextualFormProps } from '../form-control/context';
 import { useStyle } from '../style';
+//helpers
+import defaultProps from './default-props';
 import { getDefaultSize } from '../helpers/themeHelpers';
+import { adaptSelectValue } from './utils/adapt-select-value';
+import { normalizeOptions } from '../baseui/select/utils';
 var Select = function (props) {
     var adaptedProps = useContextualFormProps(props);
+    var options = props.options, valueKey = props.valueKey, value = props.value;
+    var optionsIdMap = useMemo(function () { return _keyBy(normalizeOptions(options), valueKey); }, [options, valueKey]);
+    var adaptedValue = useMemo(function () { return adaptSelectValue(optionsIdMap, value); }, [optionsIdMap, value]);
     var theme = useStyle().theme;
     switch (adaptedProps.type) {
         case 'overlay':
-            return _jsx(OverlaySelect, __assign({}, adaptedProps, { size: adaptedProps.size || getDefaultSize(theme) }), void 0);
+            return _jsx(OverlaySelect, __assign({}, adaptedProps, { size: adaptedProps.size || getDefaultSize(theme), value: adaptedValue }));
         case 'mobile':
-            return _jsx(MobileSelect, __assign({}, adaptedProps, { size: adaptedProps.size || getDefaultSize(theme) }), void 0);
+            return _jsx(MobileSelect, __assign({}, adaptedProps, { size: adaptedProps.size || getDefaultSize(theme), value: adaptedValue }));
         default:
-            return _jsx(BaseSelect, __assign({}, adaptedProps, { size: adaptedProps.size || getDefaultSize(theme) }), void 0);
+            return _jsx(BaseSelect, __assign({}, adaptedProps, { size: adaptedProps.size || getDefaultSize(theme), value: adaptedValue }));
     }
 };
 Select.defaultProps = defaultProps;

package/esm/select/selectMenuAdapter/CollapsibleSelectMenu.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { ReactElement, UIEvent } from 'react';
-import { MenuAdapterProps } from './types';
-import { MenuProps } from '../../menu';
-import type { GroupConfig } from './types';
-export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedItems, multi, labelKey, valueKey, onItemSelect, shouldDisplaySelectAll, selectAllSelected: selectAllChecked, noResultsMsg, $onPaginate, groupConfig, virtual, clearAsOption, selectOnTab, inputRef, }: {
+import type { ReactElement, ReactNode, UIEvent } from 'react';
+import type { MenuAdapterProps, GroupConfig } from './types';
+import { type MenuProps } from '../../menu';
+import type { ClassName } from '../../types';
+export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedItems, multi, labelKey, valueKey, onItemSelect, shouldDisplaySelectAll, selectAllSelected: globalSelectAllChecked, noResultsMsg, noResultsConfig, $onPaginate, groupConfig, virtual, clearAsOption, selectOnTab, disableWhenSelectAllChecked, deriveGroupItemCount, hideGroupSelectAll, inputElement, getActionsElement, }: {
     items: import("../../baseui/menu").Items;
     initialState?: import("../../baseui/menu").InitialState | undefined;
     stateReducer?: import("../../baseui/menu").StateReducerFn | undefined;
@@ -11,7 +10,7 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
     onActiveDescendantChange?: ((id?: string | undefined) => unknown) | undefined;
     onItemSelect?: import("../../baseui/menu").OnItemSelectFn | undefined;
     rootRef?: import("../../baseui/menu").RootRef | undefined;
-    children?: ((a: import("../../baseui/menu").RenderProps) => React.ReactNode) | undefined;
+    children?: ((a: import("../../baseui/menu").RenderProps) => ReactNode) | undefined;
     typeAhead?: boolean | undefined;
     addMenuToNesting?: ((ref: {
         current: HTMLElement | null;
@@ -35,28 +34,30 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
     }) => boolean) | undefined;
 } & import("../../baseui/menu").MenuProps & {
     id?: string | undefined;
-    value: import("..").Value | undefined;
+    value?: import("..").Value | undefined;
     overrides?: {
         Menu?: import("../../overrides").Override<MenuProps> | undefined;
         MenuItem?: import("../../overrides").Override<Omit<import("../../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
-            getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
+            $item?: Record<string, any> | undefined;
+            getChildMenu?: (() => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) | undefined;
             onMouseEnter?: (() => void) | undefined;
             onMouseLeave?: (() => void) | undefined;
             renderAll?: boolean | undefined;
+            hideInlineActions?: boolean | undefined;
             overrides?: {
-                ListItem?: import("../../overrides").Override<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-                    $as?: React.ElementType<any> | undefined;
-                    className?: import("../..").Styles;
-                    style?: import("../..").Styles;
+                ListItem?: import("../../overrides").Override<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: import("react").ElementType | undefined;
+                    className?: ClassName;
+                    style?: import("../../types").Styles;
                 } & {
                     alignItems?: import("../../list").AlignItems | undefined;
                     autoFocus?: boolean | undefined;
                     button?: boolean | undefined;
-                    children?: React.ReactNode;
+                    children?: ReactNode;
                     disabled?: boolean | undefined;
                     endEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
                     highlighted?: boolean | undefined;
-                    onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+                    onClick?: ((event: import("react").KeyboardEvent<Element> | import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
                     overrides?: {
                         ChildContainer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
                         EndEnhancer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
@@ -66,7 +67,7 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
-                    tooltipContent?: React.ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: import("../../overrides").Override<Omit<import("../../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({
@@ -74,15 +75,16 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
                         Arrow?: import("../../overrides").Override<any> | undefined;
                         Inner?: import("../../overrides").Override<any> | undefined;
                     } & {
+                        LayersManager?: import("../../overrides").Override<import("../../baseui/layer").LayersManagerProps> | undefined;
                         ArrowTriangle?: import("../../overrides").Override<any> | undefined;
                     }) | undefined;
-                    children?: React.ReactNode | ((args: {
+                    children?: ReactNode | ((args: {
                         isOpen: boolean;
-                    }) => React.ReactNode);
+                    }) => ReactNode);
                     targetElement?: HTMLElement | null | undefined;
                     triggerType?: import("../../popover").TriggerType | undefined;
                     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
-                    innerRef?: React.Ref<HTMLElement> | undefined;
+                    innerRef?: import("react").Ref<HTMLElement> | undefined;
                     viewportAsBoundary?: boolean | undefined;
                 } & Record<string, any>> | undefined;
             } | undefined;
@@ -103,17 +105,30 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
     } | undefined;
     valueKey: string;
     labelKey: string;
-    multi: boolean | undefined;
-    selectAllSelected: boolean;
+    multi?: boolean | undefined;
+    selectAllSelected?: boolean | undefined;
     shouldDisplaySelectAll?: boolean | undefined;
     noResultsMsg?: string | undefined;
+    noResultsConfig?: import("../no-results-message").NoResultsMessageProps | undefined;
     captureScroll?: boolean | undefined;
     virtual?: boolean | undefined;
     overscanCount?: number | undefined;
     selectOnTab?: boolean | undefined;
-    inputRef?: React.RefObject<HTMLInputElement> | undefined;
+    getActionsElement?: import("../../menu").MenuItemActions;
+    inputElement?: HTMLInputElement | null | undefined;
 } & {
     $onPaginate?: ((event: UIEvent<HTMLElement>, itemGroup: string) => void) | undefined;
     groupConfig: GroupConfig;
     clearAsOption?: boolean | undefined;
+    /**
+     * When set to true, if selectAllSelected is true it disables the option groups and collapses them
+     * default value false as set in case of GroupedSelect, true in case of GroupedAsyncSelect
+     */
+    disableWhenSelectAllChecked?: boolean | undefined;
+    /**
+     * When set to true, counts group items in groupConfig
+     * default true for GroupedSelect, false in case of GroupedAsyncSelect
+     */
+    deriveGroupItemCount?: boolean | undefined;
+    hideGroupSelectAll?: boolean | undefined;
 }) => ReactElement;