@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/baseui/select/default-props.js

@@ -7,7 +7,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-var default_filter_options_1 = (0, tslib_1.__importDefault)(require("./utils/default-filter-options"));
+var default_filter_options_1 = tslib_1.__importDefault(require("./utils/default-filter-options"));
 var constants_1 = require("./constants");
 var defaultProps = {
     // @ts-ignore
@@ -62,5 +62,6 @@ var defaultProps = {
     // @ts-ignore
     value: [],
     valueKey: 'id',
+    noTooltipOnTruncation: false,
 };
 exports.default = defaultProps;

package/baseui/select/dropdown.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { Component } from 'react';
 import type { DropdownProps } from './types';
 import type { SyntheticEvent } from 'react';
-export default class SelectDropdown extends React.Component<DropdownProps> {
+export default class SelectDropdown extends Component<DropdownProps> {
     getSharedProps(): {
         $error: boolean;
         $isLoading: boolean;

package/baseui/select/dropdown.js

@@ -8,9 +8,9 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-var React = (0, tslib_1.__importStar)(require("react"));
+var react_1 = require("react");
 var styled_components_1 = require("./styled-components");
-var overrides_1 = require("../helpers/overrides");
+var overrides_1 = require("../../overrides");
 function groupOptions(options) {
     return options.reduce(function (groups, option) {
         if (option.__optgroup) {
@@ -27,13 +27,13 @@ function groupOptions(options) {
     }, { __ungrouped: [] });
 }
 var SelectDropdown = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(SelectDropdown, _super);
+    tslib_1.__extends(SelectDropdown, _super);
     function SelectDropdown() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- required any for option type
         _this.getItemLabel = function (option) {
             var _a = _this.props, getOptionLabel = _a.getOptionLabel, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, value = _a.value, valueKey = _a.valueKey, selectAllChecked = _a.selectAllChecked;
-            var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.OptionContent, styled_components_1.StyledOptionContent), 2), OptionContent = _c[0], optionContentProps = _c[1];
+            var _c = tslib_1.__read((0, overrides_1.getOverrides)(overrides.OptionContent, styled_components_1.StyledOptionContent), 2), OptionContent = _c[0], optionContentProps = _c[1];
             var $selected;
             if (Array.isArray(value)) {
                 $selected = !!value.find(function (selected) { return selected && selected[valueKey] === option[valueKey]; });
@@ -47,7 +47,7 @@ var SelectDropdown = /** @class */ (function (_super) {
                 $disabled: option.disabled,
                 $isHighlighted: option.isHighlighted,
             };
-            return ((0, jsx_runtime_1.jsx)(OptionContent, (0, tslib_1.__assign)({ "aria-readonly": option.disabled, "aria-selected": $selected }, _this.getSharedProps(), optionSharedProps, optionContentProps, { children: getOptionLabel({ option: option, optionState: optionSharedProps }) }), option[valueKey]));
+            return ((0, jsx_runtime_1.jsx)(OptionContent, tslib_1.__assign({ "aria-readonly": option.disabled, "aria-selected": $selected, "$option": option }, _this.getSharedProps(), optionSharedProps, optionContentProps, { children: getOptionLabel({ option: option, optionState: optionSharedProps }) }), option[valueKey]));
         };
         _this.onMouseDown = function (e) {
             e.nativeEvent.stopImmediatePropagation();
@@ -84,55 +84,67 @@ var SelectDropdown = /** @class */ (function (_super) {
         };
     };
     SelectDropdown.prototype.render = function () {
-        var _this = this;
         // TODO(#185) Add no-results and loading states to menu
-        var _a = this.props, maxDropdownHeight = _a.maxDropdownHeight, multi = _a.multi, noResultsMsg = _a.noResultsMsg, onItemSelect = _a.onItemSelect, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, size = _a.size, selectAllChecked = _a.selectAllChecked;
-        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.DropdownContainer, styled_components_1.StyledDropdownContainer), 2), DropdownContainer = _d[0], dropdownContainerProps = _d[1];
-        var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.DropdownListItem, styled_components_1.StyledDropdownListItem), 2), ListItem = _e[0], listItemProps = _e[1];
-        var _f = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.StatefulMenu, function () { return null; }), 2), OverriddenStatefulMenu = _f[0], _g = _f[1], _h = _g.overrides, statefulMenuOverrides = _h === void 0 ? {} : _h, restStatefulMenuProps = (0, tslib_1.__rest)(_g, ["overrides"]);
+        var _this = this;
+        var _a;
+        var _b = this.props, maxDropdownHeight = _b.maxDropdownHeight, multi = _b.multi, noResultsMsg = _b.noResultsMsg, onItemSelect = _b.onItemSelect, _c = _b.options, options = _c === void 0 ? [] : _c, _d = _b.overrides, overrides = _d === void 0 ? {} : _d, size = _b.size, selectAllChecked = _b.selectAllChecked, dropdownFooter = _b.dropdownFooter, width = _b.width, _e = _b.isLoading, isLoading = _e === void 0 ? false : _e, closeMenu = _b.closeMenu;
+        var _f = tslib_1.__read((0, overrides_1.getOverrides)(overrides.DropdownContainer, styled_components_1.StyledDropdownContainer), 2), DropdownContainer = _f[0], dropdownContainerProps = _f[1];
+        var _g = tslib_1.__read((0, overrides_1.getOverrides)(overrides.DropdownListItem, styled_components_1.StyledDropdownListItem), 2), ListItem = _g[0], listItemProps = _g[1];
+        var _h = tslib_1.__read((0, overrides_1.getOverrides)(overrides.DropdownFooterContainer, styled_components_1.StyledDropdownFooterContainer), 2), DropdownFooterContainer = _h[0], dropdownFooterContainerProps = _h[1];
+        var _j = tslib_1.__read((0, overrides_1.getOverrides)(overrides.StatefulMenu, function () { return null; }), 2), OverriddenStatefulMenu = _j[0], _k = _j[1], _l = _k.overrides, statefulMenuOverrides = _l === void 0 ? {} : _l, restStatefulMenuProps = tslib_1.__rest(_k, ["overrides"]);
         var highlightedIndex = this.getHighlightedIndex();
         var groupedOptions = groupOptions(options);
-        return ((0, jsx_runtime_1.jsx)(DropdownContainer, (0, tslib_1.__assign)({ "data-no-focus-lock": true, ref: this.props.innerRef }, this.getSharedProps(), dropdownContainerProps, { children: (0, jsx_runtime_1.jsx)(OverriddenStatefulMenu, (0, tslib_1.__assign)({ noResultsMsg: noResultsMsg, 
-                // @ts-ignore
-                onActiveDescendantChange: function (id) {
-                    if (_this.props.onActiveDescendantChange) {
-                        _this.props.onActiveDescendantChange(id);
-                    }
-                }, onItemSelect: onItemSelect, items: groupedOptions, size: size, initialState: {
-                    isFocused: true,
-                    highlightedIndex: highlightedIndex,
-                }, typeAhead: false, keyboardControlNode: this.props.keyboardControlNode, forceHighlight: true, selectAllSelected: selectAllChecked, overrides: (0, overrides_1.mergeOverrides)({
-                    List: {
-                        component: styled_components_1.StyledDropdown,
-                        style: function (p) { return ({
-                            maxHeight: p.$maxHeight || null,
-                        }); },
-                        props: {
-                            id: this.props.id ? this.props.id : null,
-                            $maxHeight: maxDropdownHeight,
-                            'aria-multiselectable': multi,
+        var dropdownFooterProps = { isLoading: isLoading, width: width, closeMenu: closeMenu };
+        return ((0, jsx_runtime_1.jsxs)(DropdownContainer, tslib_1.__assign({ "data-no-focus-lock": true, ref: this.props.innerRef }, this.getSharedProps(), dropdownContainerProps, { 
+            //@ts-ignore -- css variable declaration
+            style: [this.props.width ? { '--sw-width': "".concat(this.props.width, "px") } : {}, dropdownContainerProps.style] }, { children: [(0, jsx_runtime_1.jsx)(OverriddenStatefulMenu, tslib_1.__assign({ noResultsMsg: noResultsMsg, 
+                    // @ts-ignore
+                    onActiveDescendantChange: function (id) {
+                        if (_this.props.onActiveDescendantChange) {
+                            _this.props.onActiveDescendantChange(id);
+                        }
+                    }, onItemSelect: onItemSelect, items: groupedOptions, size: size, initialState: {
+                        isFocused: true,
+                        highlightedIndex: highlightedIndex,
+                    }, typeAhead: false, keyboardControlNode: this.props.keyboardControlNode, forceHighlight: true, selectAllSelected: selectAllChecked, overrides: (0, overrides_1.mergeOverrides)({
+                        List: {
+                            component: styled_components_1.StyledDropdown,
+                            // eslint-disable-next-line @sprinklrjs/no-ts-ignores -- need to fix css-in-js
+                            // @ts-ignore -- CSS-in-JS -- StyleObject can't be assigned to className
+                            className: function (_, _a) {
+                                var $maxHeight = _a.$maxHeight;
+                                return ({
+                                    maxHeight: $maxHeight || null,
+                                });
+                            },
+                            props: {
+                                id: this.props.id ? this.props.id : null,
+                                $maxHeight: maxDropdownHeight,
+                                'aria-multiselectable': multi,
+                            },
                         },
-                    },
-                    Option: {
-                        props: {
-                            getItemLabel: this.getItemLabel,
-                            // figure out why the onClick handler is not
-                            // triggered without this temporary fix
-                            onMouseDown: this.onMouseDown,
-                            overrides: {
-                                ListItem: {
-                                    component: ListItem,
-                                    props: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, listItemProps), { role: 'option' }),
-                                    // slightly hacky way to handle the list item style overrides
-                                    // since the menu component doesn't provide a top level overrides for it
-                                    style: listItemProps.$style,
+                        Option: {
+                            props: {
+                                getItemLabel: this.getItemLabel,
+                                // figure out why the onClick handler is not
+                                // triggered without this temporary fix
+                                onMouseDown: this.onMouseDown,
+                                overrides: {
+                                    ListItem: {
+                                        component: ListItem,
+                                        props: tslib_1.__assign(tslib_1.__assign({}, listItemProps), { role: 'option' }),
+                                        // slightly hacky way to handle the list item style overrides
+                                        // since the menu component doesn't provide a top level overrides for it
+                                        // eslint-disable-next-line @sprinklrjs/no-ts-ignores -- need to fix css-in-js
+                                        // @ts-ignore -- CSS-in-JS -- StyleObject can't be assigned to className
+                                        className: listItemProps.$style,
+                                    },
                                 },
+                                renderHrefAsAnchor: false,
                             },
-                            renderHrefAsAnchor: false,
                         },
-                    },
-                }, (0, tslib_1.__assign)({ List: overrides.Dropdown || {}, Option: overrides.DropdownOption || {} }, statefulMenuOverrides)) }, restStatefulMenuProps), void 0) }), void 0));
+                    }, tslib_1.__assign({ List: overrides.Dropdown || {}, Option: overrides.DropdownOption || {} }, ((_a = (typeof statefulMenuOverrides === 'object' && statefulMenuOverrides)) !== null && _a !== void 0 ? _a : {}))), closeMenu: closeMenu }, restStatefulMenuProps)), dropdownFooter ? ((0, jsx_runtime_1.jsx)(DropdownFooterContainer, tslib_1.__assign({}, this.getSharedProps(), dropdownFooterContainerProps, { children: dropdownFooter(dropdownFooterProps) }))) : null] })));
     };
     return SelectDropdown;
-}(React.Component));
+}(react_1.Component));
 exports.default = SelectDropdown;

package/baseui/select/index.d.ts

@@ -10,10 +10,10 @@ export { default as StatefulSelect } from './stateful-select';
 export { default as StatefulSelectContainer } from './stateful-select-container';
 export { StyledRoot, StyledControlContainer, StyledValueContainer, StyledPlaceholder, StyledSingleValue, StyledInputContainer, StyledInput, StyledInputSizer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, StyledSearchIconContainer, StyledDropdownContainer, StyledDropdown, StyledDropdownListItem, StyledOptionContent, } from './styled-components';
 export { default as filterOptions } from './utils/default-filter-options';
-export { SIZE, TYPE, STATE_CHANGE_TYPE } from './constants';
+export { SIZE, TYPE, STATE_CHANGE_TYPE, CREATED_KEY, GROUP_SELECT_ALL_ID } from './constants';
 export * from './types';
 export type { SelectLocale } from './locale';
 /** @deprecated use Optgroups instead. To be removed in future versions.*/
-export declare type OptgroupsT = Optgroups;
+export type OptgroupsT = Optgroups;
 /** @deprecated use Options instead. To be removed in future versions.*/
-export declare type OptionsT = Options;
+export type OptionsT = Options;

package/baseui/select/index.js

@@ -1,25 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STATE_CHANGE_TYPE = exports.TYPE = exports.SIZE = exports.filterOptions = exports.StyledOptionContent = exports.StyledDropdownListItem = exports.StyledDropdown = exports.StyledDropdownContainer = exports.StyledSearchIconContainer = exports.StyledClearIcon = exports.StyledSelectArrow = exports.StyledIconsContainer = exports.StyledInputSizer = exports.StyledInput = exports.StyledInputContainer = exports.StyledSingleValue = exports.StyledPlaceholder = exports.StyledValueContainer = exports.StyledControlContainer = exports.StyledRoot = exports.StatefulSelectContainer = exports.StatefulSelect = exports.SelectDropdown = exports.AutosizeInput = exports.MultiValue = exports.SingleValue = exports.MultiSelect = exports.SingleSelect = exports.Select = void 0;
+exports.GROUP_SELECT_ALL_ID = exports.CREATED_KEY = exports.STATE_CHANGE_TYPE = exports.TYPE = exports.SIZE = exports.filterOptions = exports.StyledOptionContent = exports.StyledDropdownListItem = exports.StyledDropdown = exports.StyledDropdownContainer = exports.StyledSearchIconContainer = exports.StyledClearIcon = exports.StyledSelectArrow = exports.StyledIconsContainer = exports.StyledInputSizer = exports.StyledInput = exports.StyledInputContainer = exports.StyledSingleValue = exports.StyledPlaceholder = exports.StyledValueContainer = exports.StyledControlContainer = exports.StyledRoot = exports.StatefulSelectContainer = exports.StatefulSelect = exports.SelectDropdown = exports.AutosizeInput = exports.MultiValue = exports.SingleValue = exports.MultiSelect = exports.SingleSelect = exports.Select = void 0;
 var tslib_1 = require("tslib");
 var select_1 = require("./select");
-Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(select_1).default; } });
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return tslib_1.__importDefault(select_1).default; } });
 var single_select_1 = require("./single-select");
-Object.defineProperty(exports, "SingleSelect", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(single_select_1).default; } });
+Object.defineProperty(exports, "SingleSelect", { enumerable: true, get: function () { return tslib_1.__importDefault(single_select_1).default; } });
 var multi_select_1 = require("./multi-select");
-Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(multi_select_1).default; } });
+Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_select_1).default; } });
 var value_1 = require("./value");
-Object.defineProperty(exports, "SingleValue", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(value_1).default; } });
+Object.defineProperty(exports, "SingleValue", { enumerable: true, get: function () { return tslib_1.__importDefault(value_1).default; } });
 var multi_value_1 = require("./multi-value");
-Object.defineProperty(exports, "MultiValue", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(multi_value_1).default; } });
+Object.defineProperty(exports, "MultiValue", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_value_1).default; } });
 var autosize_input_1 = require("./autosize-input");
-Object.defineProperty(exports, "AutosizeInput", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(autosize_input_1).default; } });
+Object.defineProperty(exports, "AutosizeInput", { enumerable: true, get: function () { return tslib_1.__importDefault(autosize_input_1).default; } });
 var dropdown_1 = require("./dropdown");
-Object.defineProperty(exports, "SelectDropdown", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(dropdown_1).default; } });
+Object.defineProperty(exports, "SelectDropdown", { enumerable: true, get: function () { return tslib_1.__importDefault(dropdown_1).default; } });
 var stateful_select_1 = require("./stateful-select");
-Object.defineProperty(exports, "StatefulSelect", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_select_1).default; } });
+Object.defineProperty(exports, "StatefulSelect", { enumerable: true, get: function () { return tslib_1.__importDefault(stateful_select_1).default; } });
 var stateful_select_container_1 = require("./stateful-select-container");
-Object.defineProperty(exports, "StatefulSelectContainer", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_select_container_1).default; } });
+Object.defineProperty(exports, "StatefulSelectContainer", { enumerable: true, get: function () { return tslib_1.__importDefault(stateful_select_container_1).default; } });
 // Styled elements
 var styled_components_1 = require("./styled-components");
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_components_1.StyledRoot; } });
@@ -39,9 +39,11 @@ Object.defineProperty(exports, "StyledDropdown", { enumerable: true, get: functi
 Object.defineProperty(exports, "StyledDropdownListItem", { enumerable: true, get: function () { return styled_components_1.StyledDropdownListItem; } });
 Object.defineProperty(exports, "StyledOptionContent", { enumerable: true, get: function () { return styled_components_1.StyledOptionContent; } });
 var default_filter_options_1 = require("./utils/default-filter-options");
-Object.defineProperty(exports, "filterOptions", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(default_filter_options_1).default; } });
+Object.defineProperty(exports, "filterOptions", { enumerable: true, get: function () { return tslib_1.__importDefault(default_filter_options_1).default; } });
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "SIZE", { enumerable: true, get: function () { return constants_1.SIZE; } });
 Object.defineProperty(exports, "TYPE", { enumerable: true, get: function () { return constants_1.TYPE; } });
 Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return constants_1.STATE_CHANGE_TYPE; } });
-(0, tslib_1.__exportStar)(require("./types"), exports);
+Object.defineProperty(exports, "CREATED_KEY", { enumerable: true, get: function () { return constants_1.CREATED_KEY; } });
+Object.defineProperty(exports, "GROUP_SELECT_ALL_ID", { enumerable: true, get: function () { return constants_1.GROUP_SELECT_ALL_ID; } });
+tslib_1.__exportStar(require("./types"), exports);

package/baseui/select/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type SelectLocale = {
+export type SelectLocale = {
     noResultsMsg: string;
     placeholder: string;
     create: string;

package/baseui/select/multi-select.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var select_component_1 = (0, tslib_1.__importDefault)(require("./select-component"));
-var multi_value_1 = (0, tslib_1.__importDefault)(require("./multi-value"));
+var select_component_1 = tslib_1.__importDefault(require("./select-component"));
+var multi_value_1 = tslib_1.__importDefault(require("./multi-value"));
 function MultiSelect(props) {
-    return (0, jsx_runtime_1.jsx)(select_component_1.default, (0, tslib_1.__assign)({}, props, { multi: true, valueComponent: multi_value_1.default }), void 0);
+    return (0, jsx_runtime_1.jsx)(select_component_1.default, tslib_1.__assign({}, props, { multi: true, valueComponent: multi_value_1.default }));
 }
 exports.default = MultiSelect;

package/baseui/select/multi-value.d.ts

@@ -1 +1,3 @@
-export default function MultiValue(props: any): import("react/jsx-runtime").JSX.Element;
+import * as React from 'react';
+declare const _MultiValue: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _MultiValue;

package/baseui/select/multi-value.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var overrides_1 = require("../helpers/overrides");
-function MultiValue(props) {
-    var _a = props.overrides, overrides = _a === void 0 ? {} : _a, removeValue = props.removeValue, restProps = (0, tslib_1.__rest)(props, ["overrides", "removeValue"]);
+var React = tslib_1.__importStar(require("react"));
+var overrides_1 = require("../../overrides");
+var _MultiValue = React.forwardRef(function (props, ref) {
+    var _a = props.overrides, overrides = _a === void 0 ? {} : _a, removeValue = props.removeValue, restProps = tslib_1.__rest(props, ["overrides", "removeValue"]);
     // todo(v11): remove the MultiValue override in favor of Tag
-    var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.Tag || overrides.MultiValue, function () { return null; }), 2), MultiValue = _b[0], tagProps = _b[1];
-    return ((0, jsx_runtime_1.jsx)(MultiValue, (0, tslib_1.__assign)({ overrides: {}, onActionClick: removeValue }, restProps, tagProps, { children: props.children }), void 0));
-}
-exports.default = MultiValue;
+    var _b = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Tag || overrides.MultiValue, function () { return null; }), 2), MultiValue = _b[0], tagProps = _b[1];
+    return ((0, jsx_runtime_1.jsx)(MultiValue, tslib_1.__assign({ ref: ref, overrides: {}, onActionClick: removeValue }, restProps, tagProps, { children: props.children })));
+});
+exports.default = _MultiValue;

package/baseui/select/select-component.d.ts

@@ -1,10 +1,12 @@
-import * as React from 'react';
-import type { Locale } from '../locale';
+import { Component, ReactNode, FocusEvent } from 'react';
 import type { SelectProps, SelectState, Value, Option, ChangeAction } from './types';
 import type { SyntheticEvent, ChangeEvent } from 'react';
 import { Options } from './types';
-export declare function isInteractive(rootTarget: EventTarget | null, rootElement: Element): boolean;
-declare class Select extends React.Component<SelectProps, SelectState> {
+type GetOptionLabel = NonNullable<SelectProps['getOptionLabel']>;
+export declare function getOptionLabel({ option }: Parameters<GetOptionLabel>[0], { selectLocale, labelKey }: SelectProps): ReactNode;
+type GetValueLabel = NonNullable<SelectProps['getValueLabel']>;
+export declare function getValueLabel({ option }: Parameters<GetValueLabel>[0], { labelKey }: SelectProps): ReactNode;
+declare class Select extends Component<SelectProps, SelectState> {
     static defaultProps: {
         'aria-label': null;
         'aria-describedby': null;
@@ -20,32 +22,20 @@ declare class Select extends React.Component<SelectProps, SelectState> {
         error: boolean;
         positive: boolean;
         escapeClearsValue: boolean;
-        filterOptions: (options: Value, filterValue: string, excludeOptions?: Value | null | undefined, newProps?: Partial<{
-            filterOption: ((option: Readonly<{
-                [x: string]: any;
-                id?: string | number | undefined;
-                label?: React.ReactNode;
-                disabled?: boolean | undefined;
-                clearableValue?: boolean | undefined;
-                isCreatable?: boolean | undefined;
-                __optgroup?: string | undefined;
-                searchTags?: string[] | undefined;
-            }>, filterValue: string) => boolean) | null | undefined;
-            ignoreCase: boolean;
-            labelKey: string;
-            matchPos: "start" | "any";
-            matchProp: "label" | "value" | "any";
-            trimFilter: boolean;
-            valueKey: string;
-        }> | null | undefined) => Readonly<{
+        filterOptions: (options: Value, filterValue: string, excludeOptions?: Value | null | undefined, newProps?: Partial<import("./utils/default-filter-options").defaultProps> | null | undefined) => Readonly<{
             [x: string]: any;
-            id?: string | number | undefined;
-            label?: React.ReactNode;
+            id?: import("./types").Id | undefined;
+            label?: ReactNode;
             disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
             clearableValue?: boolean | undefined;
             isCreatable?: boolean | undefined;
             __optgroup?: string | undefined;
             searchTags?: string[] | undefined;
+            tooltipContent?: ReactNode | import("../popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
         }>[];
         filterOutSelected: boolean;
         getOptionLabel: null;
@@ -74,9 +64,10 @@ declare class Select extends React.Component<SelectProps, SelectState> {
         type: "select";
         value: never[];
         valueKey: string;
+        noTooltipOnTruncation: boolean;
     };
-    anchor: React.RefObject<HTMLElement>;
-    dropdown: React.RefObject<HTMLElement>;
+    anchor: import("react").RefObject<HTMLElement>;
+    dropdown: import("react").RefObject<HTMLElement>;
     input?: HTMLInputElement;
     dragging: boolean;
     focusAfterClear: boolean;
@@ -89,8 +80,14 @@ declare class Select extends React.Component<SelectProps, SelectState> {
         isFocused: boolean;
         isOpen: boolean;
         isPseudoFocused: boolean;
+        currentValueTagIdx: number;
+        focusedExtraValueTagIdx: number;
+        isExtraValuePopoverOpen: boolean;
+        isContainerFocused: boolean;
     };
     isItMounted: boolean;
+    getLimitTagsValue: () => number | undefined;
+    getRenderedTagsCount: () => number;
     componentDidMount(): void;
     componentDidUpdate(prevProps: SelectProps, prevState: SelectState): void;
     componentWillUnmount(): void;
@@ -106,27 +103,19 @@ declare class Select extends React.Component<SelectProps, SelectState> {
     handleClick: (event: MouseEvent | TouchEvent) => void;
     closeMenu(): void;
     handleInputFocus: (event: SyntheticEvent<HTMLElement>) => void;
-    handleBlur: (event: React.FocusEvent | MouseEvent) => void;
+    handleBlur: (event: FocusEvent | MouseEvent) => void;
     handleClickOutside: (event: MouseEvent) => void;
     handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (event: KeyboardEvent) => void;
-    getOptionLabel: (locale: Locale, { option, }: {
-        option: Option;
-        optionState: {
-            $selected: boolean;
-            $disabled: boolean;
-            $isHighlighted: boolean;
-        };
-    }) => React.ReactNode;
-    getValueLabel: ({ option }: {
-        option: Option;
-    }) => React.ReactNode;
+    getOptionLabel: GetOptionLabel;
+    getValueLabel: GetValueLabel;
+    getMemoizedOptionsMap: (options: Options, valueKey: string) => Map<string, Option>;
     /**
      * Extends the value into an array from the given options
      */
     getValueArray(value: Value): Array<Option>;
     setValue(value: Value, option: Option | undefined | null, type: ChangeAction): void;
-    handleActiveDescendantChange: (id?: string | undefined) => void;
+    handleActiveDescendantChange: (id?: string) => void;
     handleInputRef: (input: HTMLInputElement) => void;
     selectValue: ({ item }: {
         item: Option;
@@ -135,23 +124,30 @@ declare class Select extends React.Component<SelectProps, SelectState> {
     backspaceValue: () => void;
     popValue: () => Readonly<{
         [x: string]: any;
-        id?: string | number | undefined;
-        label?: React.ReactNode;
+        id?: import("./types").Id | undefined;
+        label?: ReactNode;
         disabled?: boolean | undefined;
+        disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
         clearableValue?: boolean | undefined;
         isCreatable?: boolean | undefined;
         __optgroup?: string | undefined;
         searchTags?: string[] | undefined;
+        tooltipContent?: ReactNode | import("../popover").ContentRenderProp;
+        __closeOnSelect?: boolean | undefined;
+        __onSelectResetsInput?: boolean | undefined;
+        __groupSelectAll?: boolean | undefined;
     }> | undefined;
     removeValue: (item: Option | Option[]) => void;
+    removeValueAndFocus(item: Option | Option[]): void;
     clearValue: (event: KeyboardEvent | MouseEvent | TouchEvent) => void;
     shouldShowPlaceholder: () => boolean;
     shouldShowValue: () => boolean;
     renderLoading(): import("react/jsx-runtime").JSX.Element | undefined;
     isSelectAllChecked: (valueArray: Option[] | Value, filteredOptions: Option[] | Value) => boolean;
     getMemoizedSelectAllChecked: (valueArray: Option[] | Value, filteredOptions: Option[] | Value) => boolean;
-    renderValue(valueArray: Value): React.ReactNode;
-    renderInput(listboxId: string): import("react/jsx-runtime").JSX.Element;
+    renderExtraValueTag(valueArray: any, remainingTagsCount: any): ReactNode;
+    renderValue(valueArray: Value): ReactNode;
+    renderInput(listboxId: string, ariaDescribedByIDs: string): import("react/jsx-runtime").JSX.Element;
     renderClear(): import("react/jsx-runtime").JSX.Element | null;
     renderArrow(): import("react/jsx-runtime").JSX.Element | null;
     renderSearch(): import("react/jsx-runtime").JSX.Element | null;
@@ -162,6 +158,7 @@ declare class Select extends React.Component<SelectProps, SelectState> {
         $creatable: boolean | undefined;
         $disabled: boolean | undefined;
         $error: boolean | undefined;
+        $intent: import("../..").Intent | undefined;
         $positive: boolean | undefined;
         $isFocused: boolean;
         $isLoading: boolean | undefined;
@@ -173,6 +170,7 @@ declare class Select extends React.Component<SelectProps, SelectState> {
         $size: "default" | "large" | "compact" | "mini";
         $type: "search" | "select" | undefined;
         $isEmpty: boolean;
+        $limitTags: number | undefined;
     };
     render(): import("react/jsx-runtime").JSX.Element;
 }