@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/select/base-select.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var utils_1 = require("baseui/select/utils");
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
 var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
 var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
+var keyBy_1 = (0, tslib_1.__importDefault)(require("lodash/keyBy"));
 var memoize_one_1 = (0, tslib_1.__importDefault)(require("memoize-one"));
 var react_1 = require("react");
 var React = (0, tslib_1.__importStar)(require("react"));
@@ -29,31 +29,43 @@ var types_1 = require("./types");
 var helpers_1 = require("../helpers");
 var useCombinedRef_1 = require("../hooks/useCombinedRef");
 var useUniqueId_1 = require("../hooks/useUniqueId");
+var merge_options_1 = require("./utils/merge-options");
 var BaseSelect = /** @class */ (function (_super) {
     (0, tslib_1.__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 = (0, useUniqueId_1.getUniqueId)();
         _this.menuId = (0, useUniqueId_1.getUniqueId)();
+        _this.getMemoizedNormalizedOptions = (0, memoize_one_1.default)(function (valueKey, options1, options2) { return (0, merge_options_1.mergeOptions)(valueKey, options1, options2); });
+        _this.getValueByIdMap = (0, memoize_one_1.default)(function (value, valueKey) { return (0, keyBy_1.default)(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 = (0, memoize_one_1.default)(function (options) { return (0, utils_1.normalizeOptions)(options); });
-        _this.isSelectAllChecked = (0, memoize_one_1.default)(
         // 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, virtual = _a.virtual, ignoreBoundary = _a.ignoreBoundary;
+            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_1.default,
@@ -65,10 +77,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: {
@@ -79,26 +93,61 @@ var BaseSelect = /** @class */ (function (_super) {
                     style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (popoverMinWidth ? { minWidth: popoverMinWidth } : {})), (0, longHandHelpers_1.borderRadius)('inherit')),
                 },
                 // aria-selected is applied on SelectMenuItem. No need to apply it on OptionContent
-                OptionContent: { style: { fontWeight: 'inherit' }, props: { 'aria-selected': undefined } },
+                OptionContent: {
+                    style: { fontWeight: 'inherit', wordBreak: 'break-word' },
+                    props: { 'aria-selected': undefined },
+                },
                 ControlContainer: { style: overrides_1.getControlContainerStyles, props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled }) },
-                ValueContainer: { style: overrides_1.getValueContainerStyles, props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled }) },
-                MultiValue: { component: multi_value_1.default, props: { selectSize: size } },
-                SingleValue: { style: overrides_1.getValueTypography, props: { $selectSize: size } },
+                ValueContainer: {
+                    style: overrides_1.getValueContainerStyles,
+                    props: (0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled })),
+                },
+                MultiValue: {
+                    component: multi_value_1.default,
+                    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) ? overrides_1.SingleValueTombstone : undefined,
+                    style: overrides_1.getValueTypography,
+                    props: { 'data-testid': 'combobox-selected-value', $selectSize: size, $value: value },
+                },
                 InputContainer: {
                     component: styled_component_1.InputContainer,
-                    props: { menuId: _this.menuId, size: size },
+                    props: { menuId: _this.menuId, size: size, $value: value, $labelKey: labelKey, placeholder: _this.props.placeholder },
                 },
                 Input: {
                     component: styled_component_1.Input,
-                    props: { id: id, menuId: searchable ? _this.menuId : null, onPaste: _this.handlePaste },
+                    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: styled_components_1.getPlaceholderTypography,
                 },
-                IconsContainer: { style: 'cursor-pointer pr-0 sticky top-0' },
+                IconsContainer: { style: 'cursor-pointer px-0 sticky top-0' },
                 SelectArrow: { component: overrides_1.SelectArrow },
-                ClearIcon: { component: ClearIconButton_1.default },
-                SearchIcon: { component: search_1.default, style: overrides_1.getSearchIconStyles },
+                ClearIcon: {
+                    component: clearAsOption ? function () { return null; } : ClearIconButton_1.default,
+                    props: { tabIndex: _this.state.isContainerFocused ? 0 : -1 },
+                },
+                SearchIcon: {
+                    component: search_1.default,
+                    style: overrides_1.getSearchIconStyles,
+                },
                 SearchIconContainer: { style: overrides_1.getSearchIconContainerStyles },
                 Popover: {
                     component: popover_1.Popover,
@@ -119,66 +168,38 @@ var BaseSelect = /** @class */ (function (_super) {
                 },
             };
         };
-        _this.mergeOptions = function (options1, options2) {
-            var _a;
-            var mergedOptions = options1;
-            if (Array.isArray(options1)) {
-                if (Array.isArray(options2)) {
-                    mergedOptions = options1.concat(options2);
-                }
-                else if (typeof options2 === 'object') {
-                    mergedOptions = (0, tslib_1.__assign)({}, options2);
-                    mergedOptions.__ungrouped = mergedOptions.__ungrouped
-                        ? options1.concat(mergedOptions.__ungrouped)
-                        : options1;
-                }
-            }
-            else if (typeof options1 === 'object') {
-                mergedOptions = (0, tslib_1.__assign)({}, options1);
-                if (Array.isArray(options2)) {
-                    mergedOptions.__ungrouped = mergedOptions.__ungrouped
-                        ? (_a = mergedOptions.__ungrouped) === null || _a === void 0 ? void 0 : _a.concat(options2)
-                        : options2;
-                }
-                else if (typeof options2 === 'object' && options2) {
-                    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 = (0, memoize_one_1.default)(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 = (0, memoize_one_1.default)(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 = (0, tslib_1.__spreadArray)([
+                    (_a = {},
+                        _a[valueKey] = types_1.CLEAR_OPTION_ID,
+                        _a[labelKey] = clearAsOptionLabel !== null && clearAsOptionLabel !== void 0 ? clearAsOptionLabel : locale.select.clearOptionLabel,
+                        _a[types_1.CLEAR_OPTION_ID] = true,
+                        _a)
+                ], (0, tslib_1.__read)(optionArr), false);
+            }
             if (!_this.shouldDisplaySelectAll()) {
                 return optionArr;
             }
             return (0, tslib_1.__spreadArray)([
-                (_a = {}, _a[valueKey] = types_1.SELECT_ALL_ID, _a[labelKey] = locale.select.selectAllLabel, _a[types_1.SELECT_ALL_ID] = true, _a)
+                (_b = {}, _b[valueKey] = types_1.SELECT_ALL_ID, _b[labelKey] = locale.select.selectAllLabel, _b[types_1.SELECT_ALL_ID] = true, _b)
             ], (0, tslib_1.__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([
@@ -195,12 +216,27 @@ var BaseSelect = /** @class */ (function (_super) {
                 return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, acc), (_a = {}, _a[key] = (_b = options[key]) === null || _b === void 0 ? void 0 : _b.map(function (option) { return ((0, tslib_1.__assign)((0, tslib_1.__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: constants_1.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 (0, tslib_1.__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 (0, tslib_1.__generator)(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        _a = this.props, options = _a.options, _b = _a.onChange, onChange = _b === void 0 ? noop_1.default : _b, value = _a.value, creatable = _a.creatable;
+                        _a = this.props, options = _a.options, _b = _a.onChange, onChange = _b === void 0 ? noop_1.default : _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 === constants_1.STATE_CHANGE_TYPE.select && this.inputRef.current && 'select' in this.inputRef.current) {
                             this.inputRef.current.select();
@@ -215,22 +251,32 @@ var BaseSelect = /** @class */ (function (_super) {
                                     ? { type: constants_1.STATE_CHANGE_TYPE.clear, value: [] }
                                     : {
                                         type: constants_1.STATE_CHANGE_TYPE.selectAll,
-                                        value: (0, utils_1.normalizeOptions)(this.mergeOptions(options, this.createdOptions)),
+                                        value: __selectAllShouldReturnAllOptions
+                                            ? []
+                                            : (0, merge_options_1.mergeOptions)(valueKey, options, this.createdOptions).filter(function (opt) { return !opt.disabled; }),
                                     });
                             }
                             return [2 /*return*/];
                         }
+                        if (params.option && params.option[types_1.CLEAR_OPTION_ID]) {
+                            onChange({
+                                type: constants_1.STATE_CHANGE_TYPE.clear,
+                                value: [],
+                                option: null,
+                            });
+                            return [2 /*return*/];
+                        }
                         if (!(creatable && params.type === constants_1.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 = (0, merge_options_1.mergeOptions)(valueKey, this.createdOptions, newCreatedOptions);
                         newCreatedValues = this.getCreatedValues(newCreatedOptions);
-                        mergedValue = this.mergeOptions(value, newCreatedValues);
+                        mergedValue = (0, merge_options_1.mergeOptions)(valueKey, value, newCreatedValues);
                         onChange({
                             option: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, newCreatedOptions === null || newCreatedOptions === void 0 ? void 0 : newCreatedOptions[0]), { isCreatable: true }),
                             type: constants_1.STATE_CHANGE_TYPE.select,
-                            value: this.getNormalizedOptions(mergedValue),
+                            value: multi ? mergedValue : [mergedValue[mergedValue.length - 1]],
                         });
                         return [2 /*return*/];
                     case 2:
@@ -240,22 +286,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_1.default : _b, value = _a.value;
+            var _a = _this.props, onPaste = _a.onPaste, _b = _a.onChange, onChange = _b === void 0 ? noop_1.default : _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: constants_1.STATE_CHANGE_TYPE.select, value: _this.getNormalizedOptions(mergedValue) });
+            _this.createdOptions = (0, merge_options_1.mergeOptions)(valueKey, _this.createdOptions, pastedOptions);
+            var mergedValue = (0, merge_options_1.mergeOptions)(valueKey, value, pastedOptions);
+            onChange({ type: constants_1.STATE_CHANGE_TYPE.select, value: multi ? mergedValue : [mergedValue[mergedValue.length - 1]] });
         };
+        _this.handleInputChange = function (e) { return (0, tslib_1.__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 (0, tslib_1.__generator)(this, function (_f) {
+                switch (_f.label) {
+                    case 0:
+                        _a = this.props, _b = _a.onChange, onChange = _b === void 0 ? noop_1.default : _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 = (0, merge_options_1.mergeOptions)(valueKey, this.createdOptions, createdOptions);
+                            mergedValue = (0, merge_options_1.mergeOptions)(valueKey, value, createdOptions);
+                            onChange({
+                                type: constants_1.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();
         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, inputRef = _a.inputRef;
-        return ((0, jsx_runtime_1.jsx)(locale_1.LocaleConsumer, { children: function (locale) { return ((0, jsx_runtime_1.jsx)(spaceConsumer_1.default, { children: function (utils) { return ((0, jsx_runtime_1.jsx)(styled_component_1.StyledSelect, (0, tslib_1.__assign)({}, (0, omit_1.default)(_this.props, 'size'), { overrides: (0, useConvertOverrides_1.mergeAndConvertOverrides)(_this.getSelectOverrides(), selectOverrides, utils), controlRef: controlRef, inputRef: (0, useCombinedRef_1.combineRefs)(_this.inputRef, inputRef), options: _this.getOptions(locale, _this.createdOptions, options), onChange: _this.handleChange, type: adaptor_1.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 ((0, jsx_runtime_1.jsx)(locale_1.LocaleConsumer, { children: function (locale) { return ((0, jsx_runtime_1.jsx)(spaceConsumer_1.default, { children: function (utils) {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsx)(styled_component_1.StyledSelect, (0, tslib_1.__assign)({}, (0, omit_1.default)(_this.props, 'size'), { overrides: (0, useConvertOverrides_1.mergeAndConvertOverrides)(_this.getSelectOverrides(), selectOverrides, utils), controlRef: controlRef, inputRef: (0, useCombinedRef_1.combineRefs)(_this.inputRef, inputRef), options: _this.getOptions(locale, _this.createdOptions, options, shouldPrependClearOption), onChange: _this.handleChange, type: adaptor_1.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 = default_props_1.default;
     return BaseSelect;

package/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/select/constants.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNGROUPED_ID = exports.STATE_CHANGE_TYPE = void 0;
+exports.CLEARABLE_KEY = exports.LOADING_KEY = exports.UNGROUPED_ID = exports.STATE_CHANGE_TYPE = void 0;
 var tslib_1 = require("tslib");
 var select_1 = require("baseui/select");
-exports.STATE_CHANGE_TYPE = (0, tslib_1.__assign)({ selectAll: 'selectAll' }, select_1.STATE_CHANGE_TYPE);
+exports.STATE_CHANGE_TYPE = (0, tslib_1.__assign)({ selectAll: 'selectAll', inputChange: 'inputChange' }, select_1.STATE_CHANGE_TYPE);
 exports.UNGROUPED_ID = '__ungrouped';
+exports.LOADING_KEY = '__loading';
+exports.CLEARABLE_KEY = 'clearable';

package/select/default-props.d.ts

@@ -37,5 +37,6 @@ declare const defaultProps: {
     valueKey: string;
     placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
     virtual: boolean;
+    popoverMinWidth: string;
 };
 export default defaultProps;

package/select/default-props.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
 var default_filter_options_1 = require("./utils/default-filter-options");
+var list_1 = require("../list");
 var defaultProps = {
     autoFocus: false,
     backspaceRemoves: true,
@@ -38,5 +39,7 @@ var defaultProps = {
     valueKey: 'id',
     placement: 'bottom',
     virtual: true,
+    // popoverMinWidth should have min-width same as the list minWidth
+    popoverMinWidth: "".concat(list_1.LIST_MIN_WIDTH, "px"),
 };
 exports.default = defaultProps;

package/select/index.d.ts

@@ -1,7 +1,7 @@
 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 } from './types';
+export { SELECT_ALL_ID, CLEAR_OPTION_ID } from './types';
 export type { SelectLocale } from './locale';
-export { STATE_CHANGE_TYPE } from './constants';
+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';

package/select/index.js

@@ -3,11 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultFilterOptions = exports.SingleValue = exports.MobileSheet = exports.SelectMenuAdapter = exports.MultiValue = exports.SingleSelect = exports.MultiSelect = exports.StatefulSelect = exports.Select = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.STATE_CHANGE_TYPE = exports.SELECT_ALL_ID = void 0;
+exports.defaultFilterOptions = exports.SingleValue = exports.MobileSheet = exports.SelectMenuAdapter = exports.MultiValue = exports.SingleSelect = exports.MultiSelect = exports.StatefulSelect = exports.Select = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.CLEARABLE_KEY = exports.LOADING_KEY = exports.STATE_CHANGE_TYPE = exports.CLEAR_OPTION_ID = exports.SELECT_ALL_ID = void 0;
 var types_1 = require("./types");
 Object.defineProperty(exports, "SELECT_ALL_ID", { enumerable: true, get: function () { return types_1.SELECT_ALL_ID; } });
+Object.defineProperty(exports, "CLEAR_OPTION_ID", { enumerable: true, get: function () { return types_1.CLEAR_OPTION_ID; } });
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return constants_1.STATE_CHANGE_TYPE; } });
+Object.defineProperty(exports, "LOADING_KEY", { enumerable: true, get: function () { return constants_1.LOADING_KEY; } });
+Object.defineProperty(exports, "CLEARABLE_KEY", { enumerable: true, get: function () { return constants_1.CLEARABLE_KEY; } });
 // styled-components
 var styled_component_1 = require("./styled-component");
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_component_1.StyledRoot; } });

package/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/select/mobileSelect/MobileSheet.js

@@ -20,6 +20,7 @@ var useKeyboardViewportShiftOffset_1 = require("./hooks/useKeyboardViewportShift
 var overrides_1 = require("../../overrides");
 var style_1 = require("../../style");
 var constants_1 = require("./AdaptedCSSTransition/constants");
+var locale_1 = require("../../locale");
 var StyledSheetContainer = (0, style_1.styled)('div', 'spr-ui-01 fixed bottom-0 w-full z-50 flex flex-col', function (_a) {
     var px2rem = _a.px2rem;
     return ({
@@ -45,7 +46,8 @@ var MobileSheet = function (_a) {
     var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _e[0], labelProps = _e[1];
     var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Layer, layer_1.Layer), 2), Layer = _f[0], layerProps = _f[1];
     var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Backdrop, Backdrop_1.Backdrop), 2), BackdropComp = _g[0], backdropProps = _g[1];
-    return ((0, jsx_runtime_1.jsx)(layer_2.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_2.Z_INDEX.OVERLAY }, { children: (0, jsx_runtime_1.jsx)(Layer, (0, tslib_1.__assign)({}, layerProps, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ id: "".concat(sheetKey, "-container"), "data-testid": "sheetContainer", role: "contentinfo" }, { children: [(0, jsx_runtime_1.jsx)(BackdropComp, (0, tslib_1.__assign)({ show: visible, onHide: onHide, backdropKey: sheetKey }, backdropProps), void 0), (0, jsx_runtime_1.jsx)(AdaptedCSSTransition_1.default, (0, tslib_1.__assign)({ show: visible, transitionType: constants_1.TRANSITION_TYPES.SLIDE_FROM_BOTTOM }, { children: (0, jsx_runtime_1.jsxs)(SheetContainer, (0, tslib_1.__assign)({ "data-testid": "".concat(sheetKey, "-sheetContainer") }, sheetContainerProps, { className: [{ bottom: offsetBottom }, sheetStyles, sheetContainerProps.className], ref: combinedRef }, { children: [label && ((0, jsx_runtime_1.jsxs)(Label, (0, tslib_1.__assign)({}, labelProps, { children: [(0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ onClick: onHide }, { children: (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 12, className: { transform: 'rotate(90deg)' } }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ variant: "h4" }, { children: label }), void 0)] }), void 0)), (0, jsx_runtime_1.jsx)(SwipeableTargetArea_1.SwipeableTargetArea, { onSwipeStart: onSwipeStart, onSwipe: onSwipe, onSwipeEnd: onSwipeEnd }, void 0), children] }), void 0) }), void 0)] }), void 0) }), void 0) }), void 0));
+    var locale = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)(layer_2.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_2.Z_INDEX.OVERLAY }, { children: (0, jsx_runtime_1.jsx)(Layer, (0, tslib_1.__assign)({}, layerProps, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ id: "".concat(sheetKey, "-container"), "data-testid": "sheetContainer", role: "contentinfo" }, { children: [(0, jsx_runtime_1.jsx)(BackdropComp, (0, tslib_1.__assign)({ show: visible, onHide: onHide, backdropKey: sheetKey }, backdropProps), void 0), (0, jsx_runtime_1.jsx)(AdaptedCSSTransition_1.default, (0, tslib_1.__assign)({ show: visible, transitionType: constants_1.TRANSITION_TYPES.SLIDE_FROM_BOTTOM }, { children: (0, jsx_runtime_1.jsxs)(SheetContainer, (0, tslib_1.__assign)({ "data-testid": "".concat(sheetKey, "-sheetContainer") }, sheetContainerProps, { className: [{ bottom: offsetBottom }, sheetStyles, sheetContainerProps.className], ref: combinedRef }, { children: [label && ((0, jsx_runtime_1.jsxs)(Label, (0, tslib_1.__assign)({}, labelProps, { children: [(0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ onClick: onHide, "aria-label": locale.select.hideButtonAriaLabel }, { children: (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 12, className: { transform: 'rotate(90deg)' } }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ variant: "h4" }, { children: label }), void 0)] }), void 0)), (0, jsx_runtime_1.jsx)(SwipeableTargetArea_1.SwipeableTargetArea, { onSwipeStart: onSwipeStart, onSwipe: onSwipe, onSwipeEnd: onSwipeEnd }, void 0), children] }), void 0) }), void 0)] }), void 0) }), void 0) }), void 0));
 };
 exports.MobileSheet = MobileSheet;
 exports.MobileSheet.displayName = 'MobileSheet';

package/select/multi-value.js

@@ -3,27 +3,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var overrides_1 = require("../overrides");
 var style_1 = require("../style");
 var tag_1 = require("../tag");
+var StyledTombstone_1 = require("../helpers/StyledTombstone");
+var constants_1 = require("./constants");
 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 = (0, tslib_1.__rest)(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled"]);
-    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Tag, tag_1.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 = (0, tslib_1.__rest)(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused"]);
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Tag, tag_1.Tag), 2), TagComponent = _d[0], tagProps = _d[1];
     var theme = (0, style_1.useStyle)().theme;
-    var multiSelectTheme = (0, react_1.useMemo)(function () { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', selectSize, 'md'); }, [
-        selectSize,
-        theme,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(TagComponent, (0, tslib_1.__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: (0, overrides_1.mergeOverrides)({
+    var multiSelectTheme = (0, react_1.useMemo)(function () { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', selectSize, (0, themeHelpers_1.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[constants_1.CLEARABLE_KEY]) === false;
+    var isLoading = (_a = value === null || value === void 0 ? void 0 : value[constants_1.LOADING_KEY]) !== null && _a !== void 0 ? _a : selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[constants_1.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 ((0, jsx_runtime_1.jsx)(TagComponent, (0, tslib_1.__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: (0, overrides_1.mergeOverrides)({
             Root: {
                 style: [
                     'box-border',
-                    (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (theme.multiSelect.tagBorderRadius && (0, longHandHelpers_1.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 ? ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "multi-value-tombstone", className: "w-20 h-4 rounded-8" }, void 0)) : (props.children) }), void 0));
 }
 exports.default = MultiValue;

package/select/overlaySelect/OverlaySelect.js

@@ -34,6 +34,7 @@ var propsToOmit = [
     'placement',
     'methodsRef',
     'ignoreBoundary',
+    'scrollContainer',
 ];
 var OverlaySelect = function (props) {
     var _a, _b, _c;

package/select/overlaySelect/hooks/useOverlaySelectOverrides.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { OnChangeParams, OverlaySelectProps } from '../../types';
-declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "children" | "type" | "overlayWidth"> & {
+declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "children" | "type" | "overlayWidth" | "scrollContainer"> & {
     type: "overlay";
     overlayWidth?: string | undefined;
     children: React.ReactNode | ((args: {
         isOpen: boolean;
     }) => React.ReactNode);
+    scrollContainer?: "overlayContainer" | "menuContainer" | undefined;
 } & {
     scrollElement: HTMLElement | null;
 }) => {