@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/select/base-select.js

@@ -2,25 +2,24 @@
 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"));
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var overrides_1 = require("../overrides");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var search_1 = (0, tslib_1.__importDefault)(require("../icon/components/search"));
-var loader_1 = require("../loader");
 var locale_1 = require("../locale");
 var popover_1 = require("../popover");
-var spaceConsumer_1 = (0, tslib_1.__importDefault)(require("../spaceConsumer"));
 var adaptor_1 = require("./adaptor");
-var constants_1 = require("./constants");
+var select_1 = require("../baseui/select");
 var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
 var multi_value_1 = (0, tslib_1.__importDefault)(require("./multi-value"));
-var overrides_1 = require("./overrides");
+var useUniqueId_1 = require("../hooks/useUniqueId");
+var overrides_2 = require("./overrides");
 var styled_components_1 = require("../input/styled-components");
 var selectMenuAdapter_1 = (0, tslib_1.__importDefault)(require("./selectMenuAdapter"));
 var ClearIconButton_1 = (0, tslib_1.__importDefault)(require("../helpers/ClearIconButton"));
@@ -28,32 +27,31 @@ var styled_component_1 = require("./styled-component");
 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 default_create_option_1 = require("./utils/default-create-option");
 var BaseSelect = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(BaseSelect, _super);
     function BaseSelect() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.id = (0, useUniqueId_1.getUniqueId)();
-        _this.menuId = (0, useUniqueId_1.getUniqueId)();
-        _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);
+        _this.state = {
+            isContainerFocused: false,
         };
-        _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.lastSelectedValue = _this.props.value;
+        _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.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,
@@ -64,11 +62,12 @@ var BaseSelect = /** @class */ (function (_super) {
                         valueKey: valueKey,
                         labelKey: labelKey,
                         multi: multi,
-                        selectAllSelected: _this.isSelectAllChecked(value, options),
                         noResultsMsg: noResultsMsg,
                         captureScroll: captureScroll,
                         virtual: virtual,
                         overscanCount: 20,
+                        selectOnTab: selectOnTab,
+                        inputRef: _this.inputRef,
                     },
                 },
                 DropdownContainer: {
@@ -79,27 +78,62 @@ 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 } },
-                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 } },
+                OptionContent: {
+                    style: { fontWeight: 'inherit', wordBreak: 'break-word' },
+                    props: { 'aria-selected': undefined },
+                },
+                ControlContainer: { style: overrides_2.getControlContainerStyles, props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled }) },
+                ValueContainer: {
+                    style: overrides_2.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_2.SingleValueTombstone : undefined,
+                    style: overrides_2.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' },
-                SelectArrow: { component: overrides_1.SelectArrow },
-                ClearIcon: { component: ClearIconButton_1.default },
-                SearchIcon: { component: search_1.default, style: overrides_1.getSearchIconStyles },
-                SearchIconContainer: { style: overrides_1.getSearchIconContainerStyles },
+                IconsContainer: { style: 'cursor-pointer px-0 sticky top-0' },
+                SelectArrow: { component: overrides_2.SelectArrow },
+                ClearIcon: {
+                    component: clearAsOption ? function () { return null; } : ClearIconButton_1.default,
+                    props: { tabIndex: _this.state.isContainerFocused ? 0 : -1 },
+                },
+                SearchIcon: {
+                    component: search_1.default,
+                    style: overrides_2.getSearchIconStyles,
+                },
+                SearchIconContainer: { style: overrides_2.getSearchIconContainerStyles },
                 Popover: {
                     component: popover_1.Popover,
                     props: {
@@ -110,75 +144,33 @@ var BaseSelect = /** @class */ (function (_super) {
                         ignoreBoundary: ignoreBoundary,
                     },
                 },
-                LoadingIndicator: {
-                    component: function () { return ((0, jsx_runtime_1.jsx)(loader_1.Loader, { size: 16, variant: "clip", className: "mx-1", overrides: {
-                            Loader: {
-                                style: (0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderWidth)('2px')),
-                            },
-                        } }, void 0)); },
-                },
+                LoadingIndicator: styled_component_1.LoadingIndicator,
             };
         };
-        _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
+         * Add selected values which are not present in Options (to display newly created option)
          * */
-        // todo: remove usage of normalizeOptions
-        _this.getOptions = (0, memoize_one_1.default)(function (locale, createdOptions, options) {
+        _this.getOptions = (0, memoize_one_1.default)(function (locale, createdOptions, options, shouldPrependClearOption) {
             var _a;
-            var _b = _this.props, valueKey = _b.valueKey, labelKey = _b.labelKey;
-            var mergedOptions = _this.mergeOptions(options, createdOptions);
-            var optionArr = _this.getNormalizedOptions(mergedOptions);
-            if (!_this.shouldDisplaySelectAll()) {
-                return optionArr;
+            var _b = _this.props, valueKey = _b.valueKey, labelKey = _b.labelKey, clearAsOptionLabel = _b.clearAsOptionLabel, multi = _b.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);
             }
-            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)
-            ], (0, tslib_1.__read)(optionArr), false);
+            return optionArr;
         });
+        _this.defaultCreateOption = function (label) {
+            return (0, default_create_option_1.defaultCreateOption)(label, { labelKey: _this.props.labelKey, valueKey: _this.props.valueKey });
+        };
         _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,42 +187,50 @@ 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: select_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, multi, 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, 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) {
+                        if (params.type === select_1.STATE_CHANGE_TYPE.select && this.inputRef.current && 'select' in this.inputRef.current) {
                             this.inputRef.current.select();
                         }
-                        // intercept changes in select-all state
-                        if (params.option && params.option[types_1.SELECT_ALL_ID]) {
-                            prevSelectAllState = this.isSelectAllChecked(value, options);
-                            // since we are not letting baseui handle state of select all, baseui will always assume that select all is unchecked
-                            // Thus we need to intercept STATE_CHANGE_TYPE.select type only
-                            if (params.type === constants_1.STATE_CHANGE_TYPE.select) {
-                                onChange(prevSelectAllState
-                                    ? { 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)),
-                                    });
-                            }
+                        if (params.option && params.option[types_1.CLEAR_OPTION_ID]) {
+                            onChange({
+                                type: select_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];
+                        if (!(creatable && params.type === select_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),
+                            type: select_1.STATE_CHANGE_TYPE.select,
+                            value: multi ? mergedValue : [mergedValue[mergedValue.length - 1]],
                         });
                         return [2 /*return*/];
                     case 2:
@@ -240,22 +240,70 @@ 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: select_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: select_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)(useUniqueId_1.UniqueIdConsumer, { children: function (menuId) { return ((0, jsx_runtime_1.jsx)(useUniqueId_1.UniqueIdConsumer, { children: function (id) { return ((0, jsx_runtime_1.jsx)(locale_1.LocaleConsumer, { children: function (locale) {
+                        var _a;
+                        _this.menuId = menuId;
+                        _this.id = id;
+                        return ((0, jsx_runtime_1.jsx)(styled_component_1.StyledSelect, (0, tslib_1.__assign)({}, (0, omit_1.default)(_this.props, 'size'), { overrides: (0, overrides_1.mergeOverrides)(_this.getSelectOverrides(), selectOverrides), 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)); } }, void 0));
     };
     BaseSelect.defaultProps = default_props_1.default;
     return BaseSelect;

package/select/constants.d.ts

@@ -2,6 +2,9 @@ export declare const STATE_CHANGE_TYPE: {
     readonly select: "select";
     readonly remove: "remove";
     readonly clear: "clear";
+    readonly inputChange: "inputChange";
     readonly selectAll: "selectAll";
 };
 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);
+var select_1 = require("../baseui/select");
+exports.STATE_CHANGE_TYPE = (0, tslib_1.__assign)({}, 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';
@@ -10,6 +10,6 @@ export { MultiSelect, SingleSelect } from './select-variants';
 export { default as MultiValue } from './multi-value';
 export { default as SelectMenuAdapter } from './selectMenuAdapter';
 export { MobileSheet } from './mobileSelect';
-export { SingleValue } from 'baseui/select';
-export type { AutosizeInput, StatefulSelectContainer } from 'baseui/select';
+export { SingleValue } from '../baseui/select';
+export type { AutosizeInput, StatefulSelectContainer } from '../baseui/select';
 export { filterOptions as defaultFilterOptions } from './utils/default-filter-options';

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; } });
@@ -39,7 +42,7 @@ var selectMenuAdapter_1 = require("./selectMenuAdapter");
 Object.defineProperty(exports, "SelectMenuAdapter", { enumerable: true, get: function () { return __importDefault(selectMenuAdapter_1).default; } });
 var mobileSelect_1 = require("./mobileSelect");
 Object.defineProperty(exports, "MobileSheet", { enumerable: true, get: function () { return mobileSelect_1.MobileSheet; } });
-var select_2 = require("baseui/select");
+var select_2 = require("../baseui/select");
 Object.defineProperty(exports, "SingleValue", { enumerable: true, get: function () { return select_2.SingleValue; } });
 // Utils
 var default_filter_options_1 = require("./utils/default-filter-options");

package/select/locale.d.ts

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

package/select/mobileSelect/MobileSelect.js

@@ -5,10 +5,15 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = (0, tslib_1.__importStar)(require("react"));
 var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
-var index_1 = require("../index");
+var base_select_1 = (0, tslib_1.__importDefault)(require("../base-select"));
+var overlaySelect_1 = (0, tslib_1.__importDefault)(require("../overlaySelect"));
 var overrides_1 = require("../../overrides");
 var overrides_2 = require("./overrides");
 var usePauseBodyScrollEffect_1 = require("./hooks/usePauseBodyScrollEffect");
+var themeHelpers_1 = require("../../helpers/themeHelpers");
+var style_1 = require("../../style");
+var context_1 = require("../../form-control/context");
+var default_props_1 = (0, tslib_1.__importDefault)(require("../default-props"));
 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];
@@ -17,5 +22,7 @@ exports.MobileSelect = React.memo(function (props) {
     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", 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));
+    var theme = (0, style_1.useStyle)().theme;
+    var overlayProps = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, default_props_1.default), { overlayWidth: '100%', maxDropdownHeight: '100%', autoFocus: true }), overlaySelectProps), { overrides: mergedOverrides, type: 'overlay', filterOptions: overlaySelectProps.filterOptions });
+    return ((0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, (0, context_1.useContextualFormProps)(overlayProps), { size: (0, context_1.useContextualFormProps)(overlayProps).size || (0, themeHelpers_1.getDefaultSize)(theme) }, { children: React.isValidElement(children) ? (children) : ((0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, viewSelectProps, { filterOptions: viewSelectProps.filterOptions, overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
 });

package/select/mobileSelect/MobileSheet.js

@@ -4,7 +4,7 @@ exports.MobileSheet = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = (0, tslib_1.__importStar)(require("react"));
-var layer_1 = require("baseui/layer");
+var layer_1 = require("../../baseui/layer");
 var layer_2 = require("../../layer");
 var box_1 = require("../../box");
 var button_1 = require("../../button");
@@ -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/mobileSelect/overrides.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SelectProps } from '../index';
+import { SelectProps } from '../types';
 export declare const getOverlayOverrides: ({ overlayContainerRef, label, }: {
     overlayContainerRef: (el: null | HTMLElement) => void;
     label?: React.ReactNode;