@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/select/base-select.js

@@ -9,18 +9,17 @@ 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,8 +27,8 @@ 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() {
@@ -38,21 +37,8 @@ var BaseSelect = /** @class */ (function (_super) {
             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, valueKey = _a.valueKey;
-            return (multi && !hideSelectAll && _this.getMemoizedNormalizedOptions(valueKey, options, _this.createdOptions).length > 0);
-        };
-        // in creatable select, value length can be more than length of options
-        _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 () {
@@ -76,13 +62,12 @@ var BaseSelect = /** @class */ (function (_super) {
                         valueKey: valueKey,
                         labelKey: labelKey,
                         multi: multi,
-                        selectAllSelected: _this.isSelectAllChecked(value, options),
-                        shouldDisplaySelectAll: _this.shouldDisplaySelectAll(),
                         noResultsMsg: noResultsMsg,
                         captureScroll: captureScroll,
                         virtual: virtual,
                         overscanCount: 20,
                         selectOnTab: selectOnTab,
+                        inputRef: _this.inputRef,
                     },
                 },
                 DropdownContainer: {
@@ -97,9 +82,9 @@ var BaseSelect = /** @class */ (function (_super) {
                     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 }) },
+                ControlContainer: { style: overrides_2.getControlContainerStyles, props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled }) },
                 ValueContainer: {
-                    style: overrides_1.getValueContainerStyles,
+                    style: overrides_2.getValueContainerStyles,
                     props: (0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled })),
                 },
                 MultiValue: {
@@ -114,8 +99,8 @@ var BaseSelect = /** @class */ (function (_super) {
                     },
                 },
                 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,
+                    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: {
@@ -127,7 +112,7 @@ var BaseSelect = /** @class */ (function (_super) {
                     props: {
                         id: id,
                         'aria-required': _this.props['aria-required'],
-                        menuId: searchable ? _this.menuId : null,
+                        $menuId: searchable ? _this.menuId : null,
                         onPaste: _this.handlePaste,
                         placeholder: _this.props.placeholder,
                         $value: value,
@@ -139,16 +124,16 @@ var BaseSelect = /** @class */ (function (_super) {
                     style: styled_components_1.getPlaceholderTypography,
                 },
                 IconsContainer: { style: 'cursor-pointer px-0 sticky top-0' },
-                SelectArrow: { component: overrides_1.SelectArrow },
+                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_1.getSearchIconStyles,
+                    style: overrides_2.getSearchIconStyles,
                 },
-                SearchIconContainer: { style: overrides_1.getSearchIconContainerStyles },
+                SearchIconContainer: { style: overrides_2.getSearchIconContainerStyles },
                 Popover: {
                     component: popover_1.Popover,
                     props: {
@@ -159,22 +144,15 @@ 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,
             };
         };
         /*
-         * 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)
          * */
         _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 _a;
+            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)([
@@ -185,17 +163,10 @@ var BaseSelect = /** @class */ (function (_super) {
                         _a)
                 ], (0, tslib_1.__read)(optionArr), false);
             }
-            if (!_this.shouldDisplaySelectAll()) {
-                return optionArr;
-            }
-            return (0, tslib_1.__spreadArray)([
-                (_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);
+            return optionArr;
         });
         _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)];
+            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, _b = _a.createOption, createOption = _b === void 0 ? _this.defaultCreateOption : _b;
@@ -221,7 +192,7 @@ var BaseSelect = /** @class */ (function (_super) {
             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,
+                    type: select_1.STATE_CHANGE_TYPE.select,
                     value: _this.lastSelectedValue,
                 });
             }
@@ -229,44 +200,27 @@ var BaseSelect = /** @class */ (function (_super) {
             (_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, valueKey, __selectAllShouldReturnAllOptions, multi, 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, valueKey = _a.valueKey, __selectAllShouldReturnAllOptions = _a.__selectAllShouldReturnAllOptions, multi = _a.multi;
+                        _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: __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,
+                                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();
@@ -275,7 +229,7 @@ var BaseSelect = /** @class */ (function (_super) {
                         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,
+                            type: select_1.STATE_CHANGE_TYPE.select,
                             value: multi ? mergedValue : [mergedValue[mergedValue.length - 1]],
                         });
                         return [2 /*return*/];
@@ -293,7 +247,7 @@ var BaseSelect = /** @class */ (function (_super) {
             }
             _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]] });
+            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;
@@ -327,7 +281,7 @@ var BaseSelect = /** @class */ (function (_super) {
                             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,
+                                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();
@@ -344,10 +298,12 @@ var BaseSelect = /** @class */ (function (_super) {
         var _this = this;
         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));
+        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,8 +2,8 @@ export declare const STATE_CHANGE_TYPE: {
     readonly select: "select";
     readonly remove: "remove";
     readonly clear: "clear";
-    readonly selectAll: "selectAll";
     readonly inputChange: "inputChange";
+    readonly selectAll: "selectAll";
 };
 export declare const UNGROUPED_ID = "__ungrouped";
 export declare const LOADING_KEY = "__loading";

package/select/constants.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 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', inputChange: 'inputChange' }, 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/index.d.ts

@@ -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

@@ -42,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

@@ -5,4 +5,5 @@ export declare type SelectLocale = {
     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");

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;

package/select/overlaySelect/OverlaySelect.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { OverlaySelectProps } from '../types';
-declare const OverlaySelect: (props: OverlaySelectProps) => any;
+declare const OverlaySelect: (props: OverlaySelectProps) => ReactElement;
 export default OverlaySelect;

package/select/overlaySelect/OverlaySelect.js

@@ -11,6 +11,9 @@ var styled_component_1 = require("../styled-component");
 var useOverlaySelectOverrides_1 = (0, tslib_1.__importDefault)(require("./hooks/useOverlaySelectOverrides"));
 var useScrollCapture_1 = (0, tslib_1.__importDefault)(require("../../hooks/useScrollCapture"));
 var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedRef"));
+var merge_options_1 = require("../utils/merge-options");
+var default_create_option_1 = require("../utils/default-create-option");
+var default_props_1 = (0, tslib_1.__importDefault)(require("../default-props"));
 // These props are handled by OverlaySelect itself and hence should not be passed to BaseSelect
 var propsToOmit = [
     'children',
@@ -27,7 +30,6 @@ var propsToOmit = [
     'onInputChange',
     'onOpen',
     'onClose',
-    'filterOptions',
     'overlayWidth',
     'disabled',
     'captureScroll',
@@ -35,22 +37,50 @@ var propsToOmit = [
     'methodsRef',
     'ignoreBoundary',
     'scrollContainer',
+    'options',
 ];
 var OverlaySelect = function (props) {
     var _a, _b, _c;
     var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_a = props.overrides) === null || _a === void 0 ? void 0 : _a.OverlayContentContainer, styled_component_1.StyledOverlayContentContainer), 2), OverlayContentContainer = _d[0], overlayContentContainerProps = _d[1];
     var _e = (0, tslib_1.__read)((0, react_1.useState)(null), 2), scrollElement = _e[0], setScrollElement = _e[1];
+    var createdOptionsRef = (0, react_1.useRef)([]);
     var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, popover_1.Popover), 2), PopoverOverriden = _f[0], popoverProps = _f[1];
     var setScrollTarget = (0, useScrollCapture_1.default)({ enabled: props.captureScroll });
     var combinedRef = (0, useCombinedRef_1.default)(setScrollElement, setScrollTarget, overlayContentContainerProps === null || overlayContentContainerProps === void 0 ? void 0 : overlayContentContainerProps.ref);
-    var _g = (0, useOverlaySelectOverrides_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { scrollElement: scrollElement })), popoverOpen = _g.popoverOpen, filterOptionsOverride = _g.filterOptionsOverride, handleValuesChange = _g.handleValuesChange, overrides = _g.overrides, togglePopoverState = _g.togglePopoverState, closePopover = _g.closePopover;
+    var _g = (0, useOverlaySelectOverrides_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { scrollElement: scrollElement })), popoverOpen = _g.popoverOpen, handleValuesChange = _g.handleValuesChange, overrides = _g.overrides, togglePopoverState = _g.togglePopoverState, closePopover = _g.closePopover, __inputValue = _g.__inputValue;
     var baseSelectProps = (0, omit_1.default)(props, propsToOmit);
+    var propCreateOption = props.createOption;
+    var createOption = (0, react_1.useCallback)(function (label) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
+        var createdOptions, _a;
+        var _b;
+        return (0, tslib_1.__generator)(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!propCreateOption) return [3 /*break*/, 2];
+                    return [4 /*yield*/, propCreateOption(label)];
+                case 1:
+                    _a = _c.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = (0, default_create_option_1.defaultCreateOption)(label, { labelKey: props.labelKey, valueKey: props.valueKey });
+                    _c.label = 3;
+                case 3:
+                    createdOptions = _a;
+                    if (createdOptions)
+                        createdOptionsRef.current = (_b = createdOptionsRef.current) === null || _b === void 0 ? void 0 : _b.concat(createdOptions || {});
+                    return [2 /*return*/, createdOptions];
+            }
+        });
+    }); }, [propCreateOption, props.labelKey, props.valueKey]);
+    var allOptions = (0, react_1.useMemo)(function () {
+        return (0, merge_options_1.mergeOptions)(props.valueKey || default_props_1.default.valueKey, props.options, createdOptionsRef.current);
+    }, [props.valueKey, props.options]);
     if (props.disabled) {
         if (typeof props.children === 'function') {
-            return props.children({ isOpen: false });
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children({ isOpen: false }) }, void 0);
         }
-        return props.children;
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }, void 0);
     }
-    return ((0, jsx_runtime_1.jsx)(PopoverOverriden, (0, tslib_1.__assign)({ isOpen: popoverOpen, content: (0, jsx_runtime_1.jsx)(OverlayContentContainer, (0, tslib_1.__assign)({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef }, { children: (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, baseSelectProps, { filterOptions: filterOptionsOverride, onChange: handleValuesChange, overrides: overrides, type: "search" }), void 0) }), void 0), onClick: togglePopoverState, onClickOutside: closePopover, onEsc: closePopover, placement: (_c = props.placement) !== null && _c !== void 0 ? _c : 'bottom', focusLock: true, returnFocus: true, overrides: { Inner: { style: 'spr-ui-01' }, Arrow: { style: 'spr-ui-01' } }, mountNode: props.mountNode, ignoreBoundary: props.ignoreBoundary }, popoverProps, { children: props.children }), void 0));
+    return ((0, jsx_runtime_1.jsx)(PopoverOverriden, (0, tslib_1.__assign)({ isOpen: popoverOpen, content: (0, jsx_runtime_1.jsx)(OverlayContentContainer, (0, tslib_1.__assign)({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef }, { children: (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, baseSelectProps, { createOption: createOption, onChange: handleValuesChange, overrides: overrides, __inputValue: __inputValue, type: "search", options: allOptions }), void 0) }), void 0), onClick: togglePopoverState, onClickOutside: closePopover, onEsc: closePopover, placement: (_c = props.placement) !== null && _c !== void 0 ? _c : 'bottom', focusLock: true, returnFocus: true, overrides: { Inner: { style: 'spr-ui-01' }, Arrow: { style: 'spr-ui-01' } }, mountNode: props.mountNode, ignoreBoundary: props.ignoreBoundary }, popoverProps, { children: props.children }), void 0));
 };
 exports.default = OverlaySelect;

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

@@ -1,4 +1,4 @@
-import { ControlRef } from 'baseui/select';
+import { ControlRef } from '../../../baseui/select';
 declare type Params = {
     openPopover: () => void;
     closePopover: () => void;

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

@@ -11,14 +11,11 @@ declare const useOverlaySelectOverrides: (props: Omit<import("../../types").Base
     scrollElement: HTMLElement | null;
 }) => {
     overrides: import("../../../overrides").OverridesObject<any>;
-    filterOptionsOverride: (options: import("baseui/select/types").Value, filterValue: string, excludeOptions: import("baseui/select/types").Value | null | undefined, a: {
-        valueKey: string;
-        labelKey: string;
-    }) => import("baseui/select/types").Value;
     handleValuesChange: (params: OnChangeParams) => void;
     popoverOpen: boolean;
     closePopover: () => void;
     openPopover: () => void;
     togglePopoverState: () => void;
+    __inputValue: string;
 };
 export default useOverlaySelectOverrides;

package/select/overlaySelect/hooks/useOverlaySelectOverrides.js

@@ -58,7 +58,7 @@ var useSearchContainerHeight = function () {
  */
 var overridesToOmit = ['SelectContainer', 'Popover'];
 var useOverlaySelectOverrides = function (props) {
-    var closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, inputRef = props.inputRef, filterOptions = props.filterOptions, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _a = props.clearable, clearable = _a === void 0 ? true : _a, onFocus = props.onFocus, onBlur = props.onBlur, onCloseResetsInput = props.onCloseResetsInput, controlRef = props.controlRef, scrollElement = props.scrollElement, _b = props.scrollContainer, scrollContainer = _b === void 0 ? 'overlayContainer' : _b;
+    var closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, inputRef = props.inputRef, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _a = props.clearable, clearable = _a === void 0 ? true : _a, onFocus = props.onFocus, onBlur = props.onBlur, onCloseResetsInput = props.onCloseResetsInput, controlRef = props.controlRef, scrollElement = props.scrollElement, _b = props.scrollContainer, scrollContainer = _b === void 0 ? 'overlayContainer' : _b;
     var _c = (0, tslib_1.__read)((0, react_1.useState)(''), 2), inputValue = _c[0], setInputValue = _c[1];
     var _d = (0, usePopover_1.default)(props), popoverOpen = _d.popoverOpen, togglePopoverState = _d.togglePopoverState, closePopover = _d.closePopover, openPopover = _d.openPopover;
     (0, useUpdateEffect_1.default)(function () {
@@ -68,12 +68,6 @@ var useOverlaySelectOverrides = function (props) {
     }, [onCloseResetsInput, popoverOpen]);
     var _e = (0, tslib_1.__read)(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _e[0], setInputElement = _e[1];
     (0, useControlRef_1.useControlRef)(controlRef, { closePopover: closePopover, openPopover: openPopover, setInputValue: setInputValue, inputElement: inputElement });
-    var filterOptionsOverride = (0, react_1.useCallback)(function (options, _, excludeOptions, params) {
-        if (filterOptions) {
-            return filterOptions(options, inputValue, excludeOptions, params);
-        }
-        return options;
-    }, [filterOptions, inputValue]);
     var handleInputChange = (0, react_1.useCallback)(function (e) {
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
         setInputValue(e.target.value);
@@ -198,12 +192,12 @@ var useOverlaySelectOverrides = function (props) {
     var overrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(memoizedOverrides, (0, omit_1.default)(props.overrides, overridesToOmit)); }, [memoizedOverrides, props.overrides]);
     return {
         overrides: overrides,
-        filterOptionsOverride: filterOptionsOverride,
         handleValuesChange: handleValuesChange,
         popoverOpen: popoverOpen,
         closePopover: closePopover,
         openPopover: openPopover,
         togglePopoverState: togglePopoverState,
+        __inputValue: inputValue,
     };
 };
 exports.default = useOverlaySelectOverrides;

package/select/overrides.d.ts

@@ -16,10 +16,10 @@ export declare const OverlaySelectPopoverOverride: ({ content, children: inputCo
     content: any;
     children: any;
     setStickySentinelRef: any;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const SingleValueTombstone: ({ $selectSize }: {
     $selectSize: any;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const selectMenuOverrides: {
     readonly Menu: {
         readonly props: {

package/select/select.d.ts

@@ -13,10 +13,10 @@ declare const Select: {
         error: boolean;
         positive: boolean;
         escapeClearsValue: boolean;
-        filterOptions: ((options: import("baseui/select/types").Value, filterValue: string, excludeOptions: import("baseui/select/types").Value | null | undefined, a: {
+        filterOptions: ((options: import("./types").Value, filterValue: string, excludeOptions: import("./types").Value | null | undefined, a: {
             valueKey: string;
             labelKey: string;
-        }) => import("baseui/select/types").Value) | null | undefined;
+        }) => import("./types").Value) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
         labelKey: string;
@@ -31,12 +31,12 @@ declare const Select: {
         onSelectResetsInput: boolean;
         openOnClick: boolean;
         startOpen: boolean;
-        options: import("baseui/select/types").Options;
+        options: import("./types").Options;
         overrides: {};
         required: boolean;
         searchable: boolean;
         type: "overlay" | import("./types").Type | "mobile";
-        value: import("baseui/select/types").Value;
+        value: import("./types").Value;
         valueKey: string;
         placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         virtual: boolean;

package/select/select.js

@@ -14,13 +14,10 @@ var Select = function (props) {
     var theme = (0, style_1.useStyle)().theme;
     switch (adaptedProps.type) {
         case 'overlay':
-            // @ts-ignore -- needs to be fixed
             return (0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme) }), void 0);
         case 'mobile':
-            // @ts-ignore -- needs to be fixed
             return (0, jsx_runtime_1.jsx)(mobileSelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme) }), void 0);
         default:
-            // @ts-ignore -- needs to be fixed
             return (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme) }), void 0);
     }
 };