@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/select/base-select.js

@@ -1,9 +1,9 @@
 import { __assign, __awaiter, __extends, __generator, __read, __spreadArray } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { normalizeOptions } from 'baseui/select/utils';
 import _noop from 'lodash/noop';
 import _pick from 'lodash/pick';
 import _omit from 'lodash/omit';
+import _keyBy from 'lodash/keyBy';
 import memoizeOne from 'memoize-one';
 import { Component } from 'react';
 import * as React from 'react';
@@ -18,40 +18,52 @@ import { typeAdaptor } from './adaptor';
 import { STATE_CHANGE_TYPE } from './constants';
 import defaultProps from './default-props';
 import MultiValue from './multi-value';
-import { getControlContainerStyles, getSelectInputStyles, getSearchIconContainerStyles, getSearchIconStyles, getValueContainerStyles, getValueTypography, SelectArrow, } from './overrides';
+import { getControlContainerStyles, getSearchIconContainerStyles, getSearchIconStyles, getValueContainerStyles, getValueTypography, SelectArrow, SingleValueTombstone, } from './overrides';
 import { getPlaceholderTypography } from '../input/styled-components';
 import SelectMenuAdapter from './selectMenuAdapter';
 import ClearIconButton from '../helpers/ClearIconButton';
 import { Input, InputContainer, StyledSelect } from './styled-component';
-import { SELECT_ALL_ID } from './types';
+import { SELECT_ALL_ID, CLEAR_OPTION_ID, } from './types';
 import { add$props } from '../helpers';
 import { combineRefs } from '../hooks/useCombinedRef';
 import { getUniqueId } from '../hooks/useUniqueId';
+import { mergeOptions } from './utils/merge-options';
 var BaseSelect = /** @class */ (function (_super) {
     __extends(BaseSelect, _super);
     function BaseSelect() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            isContainerFocused: false,
+        };
+        _this.lastSelectedValue = _this.props.value;
         _this.id = getUniqueId();
         _this.menuId = getUniqueId();
+        _this.getMemoizedNormalizedOptions = memoizeOne(function (valueKey, options1, options2) { return mergeOptions(valueKey, options1, options2); });
+        _this.getValueByIdMap = memoizeOne(function (value, valueKey) { return _keyBy(value, valueKey); });
         _this.shouldDisplaySelectAll = function () {
-            var _a = _this.props, multi = _a.multi, hideSelectAll = _a.hideSelectAll, options = _a.options;
-            return (multi && !hideSelectAll && _this.getNormalizedOptions(_this.mergeOptions(options, _this.createdOptions)).length > 0);
+            var _a = _this.props, multi = _a.multi, hideSelectAll = _a.hideSelectAll, options = _a.options, valueKey = _a.valueKey;
+            return (multi && !hideSelectAll && _this.getMemoizedNormalizedOptions(valueKey, options, _this.createdOptions).length > 0);
         };
-        _this.getNormalizedOptions = memoizeOne(function (options) { return normalizeOptions(options); });
-        _this.isSelectAllChecked = memoizeOne(
         // in creatable select, value length can be more than length of options
-        function (value, options) {
-            return (value === null || value === void 0 ? void 0 : value.length) >= _this.getNormalizedOptions(_this.mergeOptions(options, _this.createdOptions)).length;
-        });
+        _this.isSelectAllChecked = function (value, options) {
+            return _this.props.__selectAllShouldReturnAllOptions
+                ? _this.props.__selectAllSelected
+                : (value === null || value === void 0 ? void 0 : value.length) >=
+                    _this.getMemoizedNormalizedOptions(_this.props.valueKey, options, _this.createdOptions).filter(function (opt) { return !opt.disabled; }).length;
+        };
         _this.getSelectOverrides = 
         // FIXME: Remove use of any
         function () {
-            var _a = _this.props, _b = _a.id, id = _b === void 0 ? _this.id : _b, valueKey = _a.valueKey, labelKey = _a.labelKey, value = _a.value, multi = _a.multi, overrides = _a.overrides, noResultsMsg = _a.noResultsMsg, options = _a.options, className = _a.className, style = _a.style, intent = _a.intent, size = _a.size, disabled = _a.disabled, captureScroll = _a.captureScroll, placement = _a.placement, popoverMinWidth = _a.popoverMinWidth, searchable = _a.searchable;
+            var _a;
+            var _b = _this.props, _c = _b.id, id = _c === void 0 ? _this.id : _c, valueKey = _b.valueKey, labelKey = _b.labelKey, value = _b.value, multi = _b.multi, overrides = _b.overrides, noResultsMsg = _b.noResultsMsg, options = _b.options, className = _b.className, style = _b.style, intent = _b.intent, size = _b.size, disabled = _b.disabled, captureScroll = _b.captureScroll, placement = _b.placement, popoverMinWidth = _b.popoverMinWidth, searchable = _b.searchable, virtual = _b.virtual, ignoreBoundary = _b.ignoreBoundary, clearAsOption = _b.clearAsOption, selectOnTab = _b.selectOnTab;
             return {
                 Root: {
                     style: [className, style],
                     // https://github.com/uber/baseweb/issues/3702#issuecomment-792665393
-                    props: { tabIndex: -1 },
+                    props: {
+                        tabIndex: -1,
+                        onFocus: function () { return _this.setState({ isContainerFocused: true }); },
+                    },
                 },
                 StatefulMenu: {
                     component: SelectMenuAdapter,
@@ -63,8 +75,12 @@ var BaseSelect = /** @class */ (function (_super) {
                         labelKey: labelKey,
                         multi: multi,
                         selectAllSelected: _this.isSelectAllChecked(value, options),
+                        shouldDisplaySelectAll: _this.shouldDisplaySelectAll(),
                         noResultsMsg: noResultsMsg,
                         captureScroll: captureScroll,
+                        virtual: virtual,
+                        overscanCount: 20,
+                        selectOnTab: selectOnTab,
                     },
                 },
                 DropdownContainer: {
@@ -74,32 +90,72 @@ var BaseSelect = /** @class */ (function (_super) {
                     },
                     style: __assign(__assign({}, (popoverMinWidth ? { minWidth: popoverMinWidth } : {})), borderRadius('inherit')),
                 },
-                OptionContent: { style: { fontWeight: 'inherit' } },
+                // aria-selected is applied on SelectMenuItem. No need to apply it on OptionContent
+                OptionContent: {
+                    style: { fontWeight: 'inherit', wordBreak: 'break-word' },
+                    props: { 'aria-selected': undefined },
+                },
                 ControlContainer: { style: getControlContainerStyles, props: add$props({ intent: intent, size: size, disabled: disabled }) },
-                ValueContainer: { style: getValueContainerStyles, props: add$props({ intent: intent, size: size, disabled: disabled }) },
-                MultiValue: { component: MultiValue, props: { selectSize: size } },
-                SingleValue: { style: getValueTypography, props: { $selectSize: size } },
+                ValueContainer: {
+                    style: getValueContainerStyles,
+                    props: __assign({}, add$props({ intent: intent, size: size, disabled: disabled })),
+                },
+                MultiValue: {
+                    component: MultiValue,
+                    props: {
+                        'data-testid': 'combobox-selected-value',
+                        selectSize: size,
+                        $value: value,
+                        $valueByIdMap: _this.getValueByIdMap(value, valueKey),
+                        $valueKey: valueKey,
+                        $isContainerFocused: _this.state.isContainerFocused,
+                    },
+                },
+                SingleValue: {
+                    component: ((_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.__loading) ? SingleValueTombstone : undefined,
+                    style: getValueTypography,
+                    props: { 'data-testid': 'combobox-selected-value', $selectSize: size, $value: value },
+                },
                 InputContainer: {
                     component: InputContainer,
-                    props: { menuId: _this.menuId, size: size },
-                    style: getValueTypography,
+                    props: { menuId: _this.menuId, size: size, $value: value, $labelKey: labelKey, placeholder: _this.props.placeholder },
                 },
                 Input: {
                     component: Input,
-                    props: { id: id, menuId: searchable ? _this.menuId : null, onPaste: _this.handlePaste },
-                    style: getSelectInputStyles,
+                    props: {
+                        id: id,
+                        'aria-required': _this.props['aria-required'],
+                        menuId: searchable ? _this.menuId : null,
+                        onPaste: _this.handlePaste,
+                        placeholder: _this.props.placeholder,
+                        $value: value,
+                        $labelKey: labelKey,
+                        'aria-label': _this.props['aria-label'],
+                    },
                 },
                 Placeholder: {
                     style: getPlaceholderTypography,
                 },
-                IconsContainer: { style: 'cursor-pointer pr-0 sticky top-0' },
+                IconsContainer: { style: 'cursor-pointer px-0 sticky top-0' },
                 SelectArrow: { component: SelectArrow },
-                ClearIcon: { component: ClearIconButton },
-                SearchIcon: { component: Search, style: getSearchIconStyles },
+                ClearIcon: {
+                    component: clearAsOption ? function () { return null; } : ClearIconButton,
+                    props: { tabIndex: _this.state.isContainerFocused ? 0 : -1 },
+                },
+                SearchIcon: {
+                    component: Search,
+                    style: getSearchIconStyles,
+                },
                 SearchIconContainer: { style: getSearchIconContainerStyles },
                 Popover: {
                     component: Popover,
-                    props: { placement: placement, showArrow: false, returnFocus: false, overrides: { Body: { style: 'mt-2' } } },
+                    props: {
+                        placement: placement,
+                        showArrow: false,
+                        returnFocus: false,
+                        overrides: { Body: { style: 'mt-2' } },
+                        ignoreBoundary: ignoreBoundary,
+                    },
                 },
                 LoadingIndicator: {
                     component: function () { return (_jsx(Loader, { size: 16, variant: "clip", className: "mx-1", overrides: {
@@ -110,65 +166,38 @@ var BaseSelect = /** @class */ (function (_super) {
                 },
             };
         };
-        _this.mergeOptions = function (options1, options2) {
-            var mergedOptions = options1;
-            if (Array.isArray(options1)) {
-                if (Array.isArray(options2)) {
-                    mergedOptions = options1.concat(options2);
-                }
-                else if (typeof options2 === 'object') {
-                    mergedOptions = __assign({}, options2);
-                    mergedOptions.__ungrouped = mergedOptions.__ungrouped
-                        ? options1.concat(mergedOptions.__ungrouped)
-                        : options1;
-                }
-            }
-            else if (typeof options1 === 'object') {
-                mergedOptions = __assign({}, options1);
-                if (Array.isArray(options2)) {
-                    mergedOptions.__ungrouped = mergedOptions.__ungrouped
-                        ? mergedOptions.__ungrouped.concat(options2)
-                        : options2;
-                }
-                else if (typeof options2 === 'object') {
-                    Object.keys(options2).forEach(function (key) {
-                        if (!mergedOptions) {
-                            return;
-                        }
-                        if (key in mergedOptions) {
-                            mergedOptions[key] = mergedOptions[key].concat(options2[key]);
-                        }
-                        else {
-                            mergedOptions[key] = options2[key];
-                        }
-                    });
-                }
-            }
-            else {
-                mergedOptions = options2;
-            }
-            return mergedOptions;
-        };
         /*
          * 1. Add selected values which are not present in Options (to display newly created option)
          * 2. Add selectAll option in multi-select
          * */
-        // todo: remove usage of normalizeOptions
-        _this.getOptions = memoizeOne(function (locale, createdOptions, options) {
-            var _a;
-            var _b = _this.props, valueKey = _b.valueKey, labelKey = _b.labelKey;
-            var mergedOptions = _this.mergeOptions(options, createdOptions);
-            var optionArr = _this.getNormalizedOptions(mergedOptions);
+        _this.getOptions = memoizeOne(function (locale, createdOptions, options, shouldPrependClearOption) {
+            var _a, _b;
+            var _c = _this.props, valueKey = _c.valueKey, labelKey = _c.labelKey, clearAsOptionLabel = _c.clearAsOptionLabel, multi = _c.multi;
+            var optionArr = _this.getMemoizedNormalizedOptions(valueKey, options, createdOptions);
+            if (shouldPrependClearOption) {
+                optionArr = __spreadArray([
+                    (_a = {},
+                        _a[valueKey] = CLEAR_OPTION_ID,
+                        _a[labelKey] = clearAsOptionLabel !== null && clearAsOptionLabel !== void 0 ? clearAsOptionLabel : locale.select.clearOptionLabel,
+                        _a[CLEAR_OPTION_ID] = true,
+                        _a)
+                ], __read(optionArr), false);
+            }
             if (!_this.shouldDisplaySelectAll()) {
                 return optionArr;
             }
             return __spreadArray([
-                (_a = {}, _a[valueKey] = SELECT_ALL_ID, _a[labelKey] = locale.select.selectAllLabel, _a[SELECT_ALL_ID] = true, _a)
+                (_b = {}, _b[valueKey] = SELECT_ALL_ID, _b[labelKey] = locale.select.selectAllLabel, _b[SELECT_ALL_ID] = true, _b)
             ], __read(optionArr), false);
         });
+        _this.defaultCreateOption = function (label) {
+            var _a;
+            var _b = _this.props, labelKey = _b.labelKey, valueKey = _b.valueKey;
+            return [(_a = {}, _a[labelKey] = label.trim(), _a[valueKey] = label.trim(), _a)];
+        };
         _this.getCreatedOptions = function (option) {
-            var _a = _this.props, labelKey = _a.labelKey, createOption = _a.createOption;
-            if (createOption && typeof option[labelKey] === 'string') {
+            var _a = _this.props, labelKey = _a.labelKey, _b = _a.createOption, createOption = _b === void 0 ? _this.defaultCreateOption : _b;
+            if (typeof option[labelKey] === 'string') {
                 return Promise.resolve(createOption(option[labelKey]));
             }
             return Promise.resolve([
@@ -185,12 +214,27 @@ var BaseSelect = /** @class */ (function (_super) {
                 return (__assign(__assign({}, acc), (_a = {}, _a[key] = (_b = options[key]) === null || _b === void 0 ? void 0 : _b.map(function (option) { return (__assign(__assign({}, option), { isCreatable: true })); }), _a)));
             }, {});
         };
+        _this.handleBlur = function (e) {
+            var _a;
+            if (!_this.props.clearable && !_this.props.multi && !_this.props.value.length && _this.lastSelectedValue.length) {
+                _this.props.onChange({
+                    option: _this.lastSelectedValue[0],
+                    type: STATE_CHANGE_TYPE.select,
+                    value: _this.lastSelectedValue,
+                });
+            }
+            _this.setState({ isContainerFocused: false });
+            (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onBlur(e);
+        };
         _this.handleChange = function (params) { return __awaiter(_this, void 0, void 0, function () {
-            var _a, options, _b, onChange, value, creatable, prevSelectAllState, newCreatedOptions, newCreatedValues, mergedValue;
+            var _a, options, _b, onChange, value, creatable, valueKey, __selectAllShouldReturnAllOptions, multi, prevSelectAllState, newCreatedOptions, newCreatedValues, mergedValue;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        _a = this.props, options = _a.options, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, value = _a.value, creatable = _a.creatable;
+                        _a = this.props, options = _a.options, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, value = _a.value, creatable = _a.creatable, valueKey = _a.valueKey, __selectAllShouldReturnAllOptions = _a.__selectAllShouldReturnAllOptions, multi = _a.multi;
+                        if (params.value.length > 0) {
+                            this.lastSelectedValue = params.value;
+                        }
                         //select the user input on option selection
                         if (params.type === STATE_CHANGE_TYPE.select && this.inputRef.current && 'select' in this.inputRef.current) {
                             this.inputRef.current.select();
@@ -205,22 +249,32 @@ var BaseSelect = /** @class */ (function (_super) {
                                     ? { type: STATE_CHANGE_TYPE.clear, value: [] }
                                     : {
                                         type: STATE_CHANGE_TYPE.selectAll,
-                                        value: normalizeOptions(this.mergeOptions(options, this.createdOptions)),
+                                        value: __selectAllShouldReturnAllOptions
+                                            ? []
+                                            : mergeOptions(valueKey, options, this.createdOptions).filter(function (opt) { return !opt.disabled; }),
                                     });
                             }
                             return [2 /*return*/];
                         }
+                        if (params.option && params.option[CLEAR_OPTION_ID]) {
+                            onChange({
+                                type: STATE_CHANGE_TYPE.clear,
+                                value: [],
+                                option: null,
+                            });
+                            return [2 /*return*/];
+                        }
                         if (!(creatable && params.type === STATE_CHANGE_TYPE.select && params.option && params.option.isCreatable)) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.getCreatedOptions(params.option)];
                     case 1:
                         newCreatedOptions = _c.sent();
-                        this.createdOptions = this.mergeOptions(this.createdOptions, newCreatedOptions);
+                        this.createdOptions = mergeOptions(valueKey, this.createdOptions, newCreatedOptions);
                         newCreatedValues = this.getCreatedValues(newCreatedOptions);
-                        mergedValue = this.mergeOptions(value, newCreatedValues);
+                        mergedValue = mergeOptions(valueKey, value, newCreatedValues);
                         onChange({
-                            option: __assign(__assign({}, newCreatedOptions[0]), { isCreatable: true }),
+                            option: __assign(__assign({}, newCreatedOptions === null || newCreatedOptions === void 0 ? void 0 : newCreatedOptions[0]), { isCreatable: true }),
                             type: STATE_CHANGE_TYPE.select,
-                            value: this.getNormalizedOptions(mergedValue),
+                            value: multi ? mergedValue : [mergedValue[mergedValue.length - 1]],
                         });
                         return [2 /*return*/];
                     case 2:
@@ -230,25 +284,68 @@ var BaseSelect = /** @class */ (function (_super) {
             });
         }); };
         _this.handlePaste = function (e) {
-            var _a = _this.props, onPaste = _a.onPaste, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, value = _a.value;
+            var _a = _this.props, onPaste = _a.onPaste, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, value = _a.value, valueKey = _a.valueKey, multi = _a.multi;
             var pastedOptions = onPaste === null || onPaste === void 0 ? void 0 : onPaste(e);
             if (!pastedOptions) {
                 return;
             }
-            _this.createdOptions = _this.mergeOptions(_this.createdOptions, pastedOptions);
-            var mergedValue = _this.mergeOptions(value, pastedOptions);
-            onChange({ type: STATE_CHANGE_TYPE.select, value: _this.getNormalizedOptions(mergedValue) });
+            _this.createdOptions = mergeOptions(valueKey, _this.createdOptions, pastedOptions);
+            var mergedValue = mergeOptions(valueKey, value, pastedOptions);
+            onChange({ type: STATE_CHANGE_TYPE.select, value: multi ? mergedValue : [mergedValue[mergedValue.length - 1]] });
         };
+        _this.handleInputChange = function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var _a, _b, onChange, value, valueKey, onInputChange, multi, delimiter, _c, createOption, val, shouldCreateOption, labels, createdOptions, resolvedOptions, err_1, mergedValue;
+            var _d, _e;
+            return __generator(this, function (_f) {
+                switch (_f.label) {
+                    case 0:
+                        _a = this.props, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, value = _a.value, valueKey = _a.valueKey, onInputChange = _a.onInputChange, multi = _a.multi, delimiter = _a.delimiter, _c = _a.createOption, createOption = _c === void 0 ? this.defaultCreateOption : _c;
+                        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
+                        val = e.target.value;
+                        shouldCreateOption = typeof delimiter === 'string' && val.includes(delimiter);
+                        if (!shouldCreateOption) {
+                            return [2 /*return*/];
+                        }
+                        labels = val.split(delimiter).filter(function (label) { return label.trim(); });
+                        createdOptions = [];
+                        _f.label = 1;
+                    case 1:
+                        _f.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, Promise.all(labels.map(function (label) { return createOption(label); }))];
+                    case 2:
+                        resolvedOptions = _f.sent();
+                        createdOptions = resolvedOptions.filter(function (opt) { return !!opt; }).flat();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        err_1 = _f.sent();
+                        console.error(err_1);
+                        return [3 /*break*/, 4];
+                    case 4:
+                        if (createdOptions.length > 0) {
+                            this.createdOptions = mergeOptions(valueKey, this.createdOptions, createdOptions);
+                            mergedValue = mergeOptions(valueKey, value, createdOptions);
+                            onChange({
+                                type: STATE_CHANGE_TYPE.inputChange,
+                                value: multi ? mergedValue : [mergedValue[mergedValue.length - 1]],
+                            });
+                            (_d = this.inputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                            (_e = this.inputRef.current) === null || _e === void 0 ? void 0 : _e.setSelectionRange(0, val.length);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); };
         _this.inputRef = React.createRef();
-        _this.combinedInputRef = memoizeOne(function (refParam) {
-            return combineRefs(_this.inputRef, refParam);
-        });
         return _this;
     }
     BaseSelect.prototype.render = function () {
         var _this = this;
-        var _a = this.props, options = _a.options, selectOverrides = _a.overrides, type = _a.type, controlRef = _a.controlRef;
-        return (_jsx(LocaleConsumer, { children: function (locale) { return (_jsx(SpaceStyleConsumer, { children: function (utils) { return (_jsx(StyledSelect, __assign({}, _omit(_this.props, 'size'), { overrides: mergeAndConvertOverrides(_this.getSelectOverrides(), selectOverrides, utils), controlRef: _this.combinedInputRef(controlRef), options: _this.getOptions(locale, _this.createdOptions, options), onChange: _this.handleChange, type: typeAdaptor[type] }), void 0)); } }, void 0)); } }, void 0));
+        var _a = this.props, options = _a.options, selectOverrides = _a.overrides, type = _a.type, controlRef = _a.controlRef, inputRef = _a.inputRef, value = _a.value, clearAsOption = _a.clearAsOption, multi = _a.multi;
+        var shouldPrependClearOption = clearAsOption && !multi && value && value.length > 0;
+        return (_jsx(LocaleConsumer, { children: function (locale) { return (_jsx(SpaceStyleConsumer, { children: function (utils) {
+                    var _a;
+                    return (_jsx(StyledSelect, __assign({}, _omit(_this.props, 'size'), { overrides: mergeAndConvertOverrides(_this.getSelectOverrides(), selectOverrides, utils), controlRef: controlRef, inputRef: combineRefs(_this.inputRef, inputRef), options: _this.getOptions(locale, _this.createdOptions, options, shouldPrependClearOption), onChange: _this.handleChange, type: typeAdaptor[type], onInputChange: _this.handleInputChange, placeholder: (_a = _this.props.placeholder) !== null && _a !== void 0 ? _a : locale.select.selectPlaceholder, onBlur: _this.handleBlur }), void 0));
+                } }, void 0)); } }, void 0));
     };
     BaseSelect.defaultProps = defaultProps;
     return BaseSelect;

package/esm/select/constants.d.ts

@@ -3,5 +3,8 @@ export declare const STATE_CHANGE_TYPE: {
     readonly remove: "remove";
     readonly clear: "clear";
     readonly selectAll: "selectAll";
+    readonly inputChange: "inputChange";
 };
 export declare const UNGROUPED_ID = "__ungrouped";
+export declare const LOADING_KEY = "__loading";
+export declare const CLEARABLE_KEY = "clearable";

package/esm/select/constants.js

@@ -1,4 +1,6 @@
 import { __assign } from "tslib";
 import { STATE_CHANGE_TYPE as BASE_STATE_CHANGE_TYPE } from 'baseui/select';
-export var STATE_CHANGE_TYPE = __assign({ selectAll: 'selectAll' }, BASE_STATE_CHANGE_TYPE);
+export var STATE_CHANGE_TYPE = __assign({ selectAll: 'selectAll', inputChange: 'inputChange' }, BASE_STATE_CHANGE_TYPE);
 export var UNGROUPED_ID = '__ungrouped';
+export var LOADING_KEY = '__loading';
+export var CLEARABLE_KEY = 'clearable';

package/esm/select/default-props.d.ts

@@ -1,4 +1,4 @@
-import { OptionsT, Value, Size, Type } from './types';
+import { Options, Value, Type } from './types';
 declare const defaultProps: {
     autoFocus: boolean;
     backspaceRemoves: boolean;
@@ -10,7 +10,10 @@ declare const defaultProps: {
     error: boolean;
     positive: boolean;
     escapeClearsValue: boolean;
-    filterOptions: any;
+    filterOptions: ((options: Value, filterValue: string, excludeOptions: Value | null | undefined, a: {
+        valueKey: string;
+        labelKey: string;
+    }) => Value) | null | undefined;
     filterOutSelected: boolean;
     isLoading: boolean;
     labelKey: string;
@@ -25,14 +28,15 @@ declare const defaultProps: {
     onSelectResetsInput: boolean;
     openOnClick: boolean;
     startOpen: boolean;
-    options: OptionsT;
+    options: Options;
     overrides: {};
     required: boolean;
     searchable: boolean;
-    size: Size;
     type: "overlay" | Type | "mobile";
     value: Value;
     valueKey: string;
-    placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | undefined;
+    placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+    virtual: boolean;
+    popoverMinWidth: string;
 };
 export default defaultProps;

package/esm/select/default-props.js

@@ -1,5 +1,6 @@
 import _noop from 'lodash/noop';
 import { filterOptions } from './utils/default-filter-options';
+import { LIST_MIN_WIDTH } from '../list';
 var defaultProps = {
     autoFocus: false,
     backspaceRemoves: true,
@@ -30,10 +31,12 @@ var defaultProps = {
     overrides: {},
     required: false,
     searchable: true,
-    size: 'lg',
     type: 'select',
     value: [],
     valueKey: 'id',
     placement: 'bottom',
+    virtual: true,
+    // popoverMinWidth should have min-width same as the list minWidth
+    popoverMinWidth: "".concat(LIST_MIN_WIDTH, "px"),
 };
 export default defaultProps;

package/esm/select/index.d.ts

@@ -1,8 +1,8 @@
-export type { Option, Value, OptionsT, StateReducer, OnChangeParams, SelectProps, AutosizeInputProps, DropdownProps, StatefulSelectProps, StatefulContainerProps, SelectActions, SelectState, AutosizeInputState, StatefulContainerState, } from './types';
-export { SELECT_ALL_ID } from './types';
+export type { Option, Value, Options, Optgroups, StateReducer, OnChangeParams, ControlRef, ImperativeMethods, SelectProps, AutosizeInputProps, DropdownProps, StatefulSelectProps, StatefulContainerProps, SelectActions, SelectState, AutosizeInputState, StatefulContainerState, } from './types';
+export { SELECT_ALL_ID, CLEAR_OPTION_ID } from './types';
 export type { SelectLocale } from './locale';
-export { STATE_CHANGE_TYPE } from './constants';
-export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIcon, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
+export { STATE_CHANGE_TYPE, LOADING_KEY, CLEARABLE_KEY } from './constants';
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
 export type { StyledSelect } from './styled-component';
 export { default as Select } from './select';
 export { default as StatefulSelect } from './stateful-select';

package/esm/select/index.js

@@ -1,7 +1,7 @@
-export { SELECT_ALL_ID } from './types';
-export { STATE_CHANGE_TYPE } from './constants';
+export { SELECT_ALL_ID, CLEAR_OPTION_ID } from './types';
+export { STATE_CHANGE_TYPE, LOADING_KEY, CLEARABLE_KEY } from './constants';
 // styled-components
-export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIcon, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
 // components
 export { default as Select } from './select';
 export { default as StatefulSelect } from './stateful-select';

package/esm/select/locale.d.ts

@@ -1,4 +1,8 @@
 export declare type SelectLocale = {
     noResultsMsg: string;
     selectAllLabel: string;
+    hideButtonAriaLabel: string;
+    selectPlaceholder: string;
+    clearOptionLabel: string;
+    selectedValuesPrefix: string;
 };

package/esm/select/mobileSelect/MobileSelect.js

@@ -9,12 +9,10 @@ import { usePauseBodyScrollEffect } from './hooks/usePauseBodyScrollEffect';
 export var MobileSelect = React.memo(function (props) {
     var overrides = props.overrides, children = props.children, label = props.label;
     var _a = __read(React.useState(null), 2), scrollContainer = _a[0], setScrollContainer = _a[1];
-    var mergedOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, getOverlayOverrides({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides]);
-    var childSelectOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, CHILD_SELECT_OVERRIDES); }, [
-        overrides,
-    ]);
+    var mergedOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, getOverlayOverrides({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides, label]);
+    var childSelectOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, CHILD_SELECT_OVERRIDES); }, [overrides]);
     var overlaySelectProps = _omit(props, OVERLAY_SELECT_PROPS_TO_OMIT);
     var viewSelectProps = _omit(props, CHILD_SELECT_PROPS_TO_OMIT);
     usePauseBodyScrollEffect({ currentEl: scrollContainer || undefined });
-    return (_jsx(Select, __assign({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay" }, { children: React.isValidElement(children) ? (children) : (_jsx(Select, __assign({}, viewSelectProps, { overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
+    return (_jsx(Select, __assign({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay", filterOptions: overlaySelectProps.filterOptions }, { children: React.isValidElement(children) ? (children) : (_jsx(Select, __assign({}, viewSelectProps, { filterOptions: viewSelectProps.filterOptions, overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
 });

package/esm/select/mobileSelect/MobileSheet.js

@@ -17,6 +17,7 @@ import { useKeyboardViewportShiftOffset } from './hooks/useKeyboardViewportShift
 import { useOverrides } from '../../overrides';
 import { styled } from '../../style';
 import { TRANSITION_TYPES } from './AdaptedCSSTransition/constants';
+import { useLocale } from '../../locale';
 var StyledSheetContainer = styled('div', 'spr-ui-01 fixed bottom-0 w-full z-50 flex flex-col', function (_a) {
     var px2rem = _a.px2rem;
     return ({
@@ -42,6 +43,7 @@ export var MobileSheet = function (_a) {
     var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _e[0], labelProps = _e[1];
     var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Layer, DefaultLayer), 2), Layer = _f[0], layerProps = _f[1];
     var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Backdrop, Backdrop), 2), BackdropComp = _g[0], backdropProps = _g[1];
-    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.OVERLAY }, { children: _jsx(Layer, __assign({}, layerProps, { children: _jsxs(Box, __assign({ id: "".concat(sheetKey, "-container"), "data-testid": "sheetContainer", role: "contentinfo" }, { children: [_jsx(BackdropComp, __assign({ show: visible, onHide: onHide, backdropKey: sheetKey }, backdropProps), void 0), _jsx(AdaptedCSSTransition, __assign({ show: visible, transitionType: TRANSITION_TYPES.SLIDE_FROM_BOTTOM }, { children: _jsxs(SheetContainer, __assign({ "data-testid": "".concat(sheetKey, "-sheetContainer") }, sheetContainerProps, { className: [{ bottom: offsetBottom }, sheetStyles, sheetContainerProps.className], ref: combinedRef }, { children: [label && (_jsxs(Label, __assign({}, labelProps, { children: [_jsx(IconButton, __assign({ onClick: onHide }, { children: _jsx(ChevronDown, { size: 12, className: { transform: 'rotate(90deg)' } }, void 0) }), void 0), _jsx(Typography, __assign({ variant: "h4" }, { children: label }), void 0)] }), void 0)), _jsx(SwipeableTargetArea, { onSwipeStart: onSwipeStart, onSwipe: onSwipe, onSwipeEnd: onSwipeEnd }, void 0), children] }), void 0) }), void 0)] }), void 0) }), void 0) }), void 0));
+    var locale = useLocale();
+    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.OVERLAY }, { children: _jsx(Layer, __assign({}, layerProps, { children: _jsxs(Box, __assign({ id: "".concat(sheetKey, "-container"), "data-testid": "sheetContainer", role: "contentinfo" }, { children: [_jsx(BackdropComp, __assign({ show: visible, onHide: onHide, backdropKey: sheetKey }, backdropProps), void 0), _jsx(AdaptedCSSTransition, __assign({ show: visible, transitionType: TRANSITION_TYPES.SLIDE_FROM_BOTTOM }, { children: _jsxs(SheetContainer, __assign({ "data-testid": "".concat(sheetKey, "-sheetContainer") }, sheetContainerProps, { className: [{ bottom: offsetBottom }, sheetStyles, sheetContainerProps.className], ref: combinedRef }, { children: [label && (_jsxs(Label, __assign({}, labelProps, { children: [_jsx(IconButton, __assign({ onClick: onHide, "aria-label": locale.select.hideButtonAriaLabel }, { children: _jsx(ChevronDown, { size: 12, className: { transform: 'rotate(90deg)' } }, void 0) }), void 0), _jsx(Typography, __assign({ variant: "h4" }, { children: label }), void 0)] }), void 0)), _jsx(SwipeableTargetArea, { onSwipeStart: onSwipeStart, onSwipe: onSwipe, onSwipeEnd: onSwipeEnd }, void 0), children] }), void 0) }), void 0)] }), void 0) }), void 0) }), void 0));
 };
 MobileSheet.displayName = 'MobileSheet';

package/esm/select/multi-value.js

@@ -1,26 +1,36 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { borderRadius } from '../helpers/longHandHelpers';
-import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 import { mergeOverrides, useOverrides } from '../overrides';
 import { useStyle } from '../style';
 import { Tag } from '../tag';
+import { StyledTombstone } from '../helpers/StyledTombstone';
+import { CLEARABLE_KEY, LOADING_KEY } from './constants';
 export default function MultiValue(props) {
-    var _a;
-    var _b = props.overrides, overrides = _b === void 0 ? {} : _b, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, restProps = __rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled"]);
-    var _c = __read(useOverrides(overrides.Tag, Tag), 2), TagComponent = _c[0], tagProps = _c[1];
+    var _a, _b;
+    var _c = props.overrides, overrides = _c === void 0 ? {} : _c, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, $valueByIdMap = props.$valueByIdMap, $valueKey = props.$valueKey, $size = props.$size, $isContainerFocused = props.$isContainerFocused, restProps = __rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused"]);
+    var _d = __read(useOverrides(overrides.Tag, Tag), 2), TagComponent = _d[0], tagProps = _d[1];
     var theme = useStyle().theme;
-    var multiSelectTheme = useMemo(function () { return getComponentSizeTheme(theme, 'multiSelect', selectSize, 'lg'); }, [
-        selectSize,
-        theme,
-    ]);
-    return (_jsx(TagComponent, __assign({ variant: "light", intent: "default", "aria-label": "".concat(typeof restProps.children === 'string' ? "".concat(restProps.children, ", ") : '', "close by backspace"), tabIndex: 0, onActionClick: onActionClick, "$item": value, "$disabled": $disabled }, restProps, tagProps, { closeable: (_a = tagProps.closeable) !== null && _a !== void 0 ? _a : !$disabled, overrides: mergeOverrides({
+    var multiSelectTheme = useMemo(function () { return getComponentSizeTheme(theme, 'multiSelect', selectSize, getDefaultSize(theme)); }, [selectSize, theme]);
+    var selectedValue = $valueByIdMap === null || $valueByIdMap === void 0 ? void 0 : $valueByIdMap[value[$valueKey]];
+    var disabled = $disabled || (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[CLEARABLE_KEY]) === false;
+    var isLoading = (_a = value === null || value === void 0 ? void 0 : value[LOADING_KEY]) !== null && _a !== void 0 ? _a : selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[LOADING_KEY];
+    var tagMarginX = multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginX;
+    var tagMarginY = multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginY;
+    var tagSize = selectSize === 'xxxs' ? 'xxxs' : 'sm';
+    return (_jsx(TagComponent, __assign({ variant: "light", intent: "default", "aria-label": "".concat(typeof restProps.children === 'string' ? "".concat(restProps.children, ", ") : '', "close by backspace"), tabIndex: $isContainerFocused ? 0 : -1, onActionClick: onActionClick, "$item": value, "$disabled": disabled, size: tagSize }, restProps, tagProps, { closeable: (_b = tagProps.closeable) !== null && _b !== void 0 ? _b : !disabled, overrides: mergeOverrides({
             Root: {
                 style: [
                     'box-border',
-                    __assign(__assign({}, (theme.multiSelect.tagBorderRadius && borderRadius(theme.multiSelect.tagBorderRadius))), { marginRight: multiSelectTheme.tagMarginX, marginLeft: multiSelectTheme.tagMarginX, marginTop: multiSelectTheme.tagMarginY, marginBottom: multiSelectTheme.tagMarginY, height: multiSelectTheme.tagHeight, maxWidth: "calc(100% - ".concat(2 * parseInt(multiSelectTheme.tagMarginX, 10), "px)") }),
+                    {
+                        marginRight: tagMarginX,
+                        marginBottom: tagMarginY,
+                        marginTop: tagMarginY,
+                        maxWidth: "calc(100% - ".concat(2 * parseInt(multiSelectTheme.tagMarginX, 10), "px)"),
+                    },
                 ],
             },
-        }, tagProps.overrides) }, { children: props.children }), void 0));
+            Action: { props: { tabIndex: $isContainerFocused ? 0 : -1 } },
+        }, tagProps.overrides) }, { children: isLoading ? (_jsx(StyledTombstone, { "data-testid": "multi-value-tombstone", className: "w-20 h-4 rounded-8" }, void 0)) : (props.children) }), void 0));
 }