@sprinklrjs/spaceweb 10.1.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;
+            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,8 +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: {
@@ -76,32 +92,72 @@ var BaseSelect = /** @class */ (function (_super) {
                     },
                     style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (popoverMinWidth ? { minWidth: popoverMinWidth } : {})), (0, longHandHelpers_1.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: 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 },
-                    style: overrides_1.getValueTypography,
+                    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 },
-                    style: overrides_1.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: 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,
-                    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 ((0, jsx_runtime_1.jsx)(loader_1.Loader, { size: 16, variant: "clip", className: "mx-1", overrides: {
@@ -112,65 +168,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 = (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
-                        ? 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 = (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([
@@ -187,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();
@@ -207,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[0]), { isCreatable: true }),
+                            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:
@@ -232,25 +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();
-        _this.combinedInputRef = (0, memoize_one_1.default)(function (refParam) {
-            return (0, useCombinedRef_1.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 ((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: _this.combinedInputRef(controlRef), 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

@@ -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/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,
@@ -33,10 +34,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_1.LIST_MIN_WIDTH, "px"),
 };
 exports.default = defaultProps;

package/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/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.StyledSearchIcon = 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; } });
@@ -19,7 +22,6 @@ Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function
 Object.defineProperty(exports, "StyledInputContainer", { enumerable: true, get: function () { return styled_component_1.StyledInputContainer; } });
 Object.defineProperty(exports, "StyledInputSizer", { enumerable: true, get: function () { return styled_component_1.StyledInputSizer; } });
 Object.defineProperty(exports, "StyledPlaceholder", { enumerable: true, get: function () { return styled_component_1.StyledPlaceholder; } });
-Object.defineProperty(exports, "StyledSearchIcon", { enumerable: true, get: function () { return styled_component_1.StyledSearchIcon; } });
 Object.defineProperty(exports, "StyledSearchIconContainer", { enumerable: true, get: function () { return styled_component_1.StyledSearchIconContainer; } });
 Object.defineProperty(exports, "StyledSelectArrow", { enumerable: true, get: function () { return styled_component_1.StyledSelectArrow; } });
 Object.defineProperty(exports, "StyledSingleValue", { enumerable: true, get: function () { return styled_component_1.StyledSingleValue; } });

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/MobileSelect.js

@@ -12,12 +12,10 @@ var usePauseBodyScrollEffect_1 = require("./hooks/usePauseBodyScrollEffect");
 exports.MobileSelect = React.memo(function (props) {
     var overrides = props.overrides, children = props.children, label = props.label;
     var _a = (0, tslib_1.__read)(React.useState(null), 2), scrollContainer = _a[0], setScrollContainer = _a[1];
-    var mergedOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, (0, overrides_2.getOverlayOverrides)({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides]);
-    var childSelectOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, overrides_2.CHILD_SELECT_OVERRIDES); }, [
-        overrides,
-    ]);
+    var mergedOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, (0, overrides_2.getOverlayOverrides)({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides, label]);
+    var childSelectOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, overrides_2.CHILD_SELECT_OVERRIDES); }, [overrides]);
     var overlaySelectProps = (0, omit_1.default)(props, overrides_2.OVERLAY_SELECT_PROPS_TO_OMIT);
     var viewSelectProps = (0, omit_1.default)(props, overrides_2.CHILD_SELECT_PROPS_TO_OMIT);
     (0, usePauseBodyScrollEffect_1.usePauseBodyScrollEffect)({ currentEl: scrollContainer || undefined });
-    return ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay" }, { children: React.isValidElement(children) ? (children) : ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({}, viewSelectProps, { overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay", filterOptions: overlaySelectProps.filterOptions }, { children: React.isValidElement(children) ? (children) : ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({}, viewSelectProps, { filterOptions: viewSelectProps.filterOptions, overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
 });

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';