@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

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;
+            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,9 +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: {
@@ -76,101 +77,100 @@ 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' } },
-                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 } },
+                // 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_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 },
-                    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' },
-                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: { placement: placement, showArrow: false, returnFocus: false, overrides: { Body: { style: 'mt-2' } } },
-                },
-                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)); },
+                    props: {
+                        placement: placement,
+                        showArrow: false,
+                        returnFocus: false,
+                        overrides: { Body: { style: 'mt-2' } },
+                        ignoreBoundary: ignoreBoundary,
+                    },
                 },
+                LoadingIndicator: styled_component_1.LoadingIndicator,
             };
         };
-        _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
+         * 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([
@@ -187,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[0]), { isCreatable: true }),
-                            type: constants_1.STATE_CHANGE_TYPE.select,
-                            value: this.getNormalizedOptions(mergedValue),
+                            option: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, newCreatedOptions === null || newCreatedOptions === void 0 ? void 0 : newCreatedOptions[0]), { isCreatable: true }),
+                            type: select_1.STATE_CHANGE_TYPE.select,
+                            value: multi ? mergedValue : [mergedValue[mergedValue.length - 1]],
                         });
                         return [2 /*return*/];
                     case 2:
@@ -232,25 +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();
-        _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)(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)(select_1.Select, (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, selectLocale: locale.select }), void 0));
+                    } }, void 0)); } }, void 0)); } }, void 0));
     };
     BaseSelect.defaultProps = default_props_1.default;
     return BaseSelect;

package/select/constants.d.ts

@@ -1,7 +1,11 @@
-export declare const STATE_CHANGE_TYPE: {
+export declare const STATE_CHANGE_TYPE: Readonly<{
     readonly select: "select";
     readonly remove: "remove";
     readonly clear: "clear";
+    readonly inputChange: "inputChange";
     readonly selectAll: "selectAll";
-};
+    readonly groupSelectAll: "groupSelectAll";
+}>;
 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,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.CLEARABLE_KEY = exports.LOADING_KEY = exports.UNGROUPED_ID = exports.STATE_CHANGE_TYPE = void 0;
+var select_1 = require("../baseui/select");
+exports.STATE_CHANGE_TYPE = 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,11 @@ 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;
+        filterOnlyCreated?: boolean | undefined;
+    }) => Value) | null | undefined;
     filterOutSelected: boolean;
     isLoading: boolean;
     labelKey: string;
@@ -25,14 +29,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/grouped-select.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { GroupedSelectProps } from './types';
+export declare const GroupedSelect: (props: GroupedSelectProps) => ReactElement;

package/select/grouped-select.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupedSelect = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+// Components
+var select_1 = (0, tslib_1.__importDefault)(require("./select"));
+var CollapsibleSelectMenu_1 = require("./selectMenuAdapter/CollapsibleSelectMenu");
+// Hooks, Utils
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+var locale_1 = require("../locale");
+var constants_1 = require("./constants");
+var constants_2 = require("../baseui/select/constants");
+var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
+var GroupedSelect = function (props) {
+    var onChange = props.onChange, options = props.options, _a = props.valueKey, valueKey = _a === void 0 ? default_props_1.default.valueKey : _a, hideGroupSelectAll = props.hideGroupSelectAll;
+    var locale = (0, locale_1.useLocale)();
+    var groupConfig = (0, react_1.useMemo)(function () { return Object.keys(props.options || []).map(function (q) { return ({ label: q, id: q }); }); }, [props.options]);
+    var overrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            StatefulMenu: {
+                component: CollapsibleSelectMenu_1.CollapsibleSelectMenu,
+                props: {
+                    groupConfig: groupConfig,
+                    shouldDisplaySelectAll: true,
+                    deriveGroupItemCount: true,
+                    hideGroupSelectAll: hideGroupSelectAll,
+                },
+            },
+        }, props.overrides);
+    }, [groupConfig, hideGroupSelectAll, props.overrides]);
+    var handleChange = (0, react_1.useCallback)(function (params) {
+        var _a, _b, _c, _d;
+        if (!((_a = params.option) === null || _a === void 0 ? void 0 : _a[constants_2.GROUP_SELECT_ALL_ID])) {
+            return onChange === null || onChange === void 0 ? void 0 : onChange(params);
+        }
+        var isGroupSelected = (_b = params.option) === null || _b === void 0 ? void 0 : _b.selected;
+        var groupId = (_c = params.option) === null || _c === void 0 ? void 0 : _c[valueKey];
+        var groupOptions = (_d = options === null || options === void 0 ? void 0 : options[groupId]) !== null && _d !== void 0 ? _d : [];
+        if (isGroupSelected) {
+            var optionsToRemoveSet_1 = new Set(groupOptions.map(function (opt) { return opt[valueKey]; }));
+            return onChange === null || onChange === void 0 ? void 0 : onChange((0, tslib_1.__assign)((0, tslib_1.__assign)({}, params), { value: params.value.filter(function (opt) { return !(optionsToRemoveSet_1.has(opt[valueKey]) || opt[constants_2.GROUP_SELECT_ALL_ID]); }) }));
+        }
+        var filteredValue = params.value.filter(function (opt) { return !opt[constants_2.GROUP_SELECT_ALL_ID]; });
+        var valueSet = new Set(params.value.map(function (opt) { return opt[valueKey]; }));
+        var optionsToSelectInGroup = groupOptions.filter(function (opt) { return !valueSet.has(opt[valueKey]) && !opt.disabled; });
+        return onChange === null || onChange === void 0 ? void 0 : onChange((0, tslib_1.__assign)((0, tslib_1.__assign)({}, params), { value: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(filteredValue), false), (0, tslib_1.__read)(optionsToSelectInGroup), false), type: constants_1.STATE_CHANGE_TYPE.groupSelectAll }));
+    }, [onChange, options, valueKey]);
+    return (
+    // @ts-ignore -- type does not change during usage
+    (0, jsx_runtime_1.jsx)(select_1.default, (0, tslib_1.__assign)({}, props, { overrides: overrides }, ((props === null || props === void 0 ? void 0 : props.type) === 'overlay' ? { scrollContainer: 'menuContainer' } : {}), { "aria-label": "".concat(props['aria-label'] || '', " ").concat(locale.select.collapsibleMenuDescription), onChange: handleChange }), void 0));
+};
+exports.GroupedSelect = GroupedSelect;

package/select/index.d.ts

@@ -1,15 +1,15 @@
-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 type { StyledSelect } 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 { default as Select } from './select';
 export { default as StatefulSelect } from './stateful-select';
 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 { GroupedSelect } from './grouped-select';
 export { filterOptions as defaultFilterOptions } from './utils/default-filter-options';