@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/select/index.js

@@ -3,11 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultFilterOptions = exports.SingleValue = exports.MobileSheet = exports.SelectMenuAdapter = exports.MultiValue = exports.SingleSelect = exports.MultiSelect = exports.StatefulSelect = exports.Select = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledSearchIcon = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.STATE_CHANGE_TYPE = exports.SELECT_ALL_ID = void 0;
+exports.defaultFilterOptions = exports.GroupedSelect = exports.SingleValue = exports.MobileSheet = exports.SelectMenuAdapter = exports.MultiValue = exports.SingleSelect = exports.MultiSelect = exports.StatefulSelect = exports.Select = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.CLEARABLE_KEY = exports.LOADING_KEY = exports.STATE_CHANGE_TYPE = exports.CLEAR_OPTION_ID = exports.SELECT_ALL_ID = void 0;
 var types_1 = require("./types");
 Object.defineProperty(exports, "SELECT_ALL_ID", { enumerable: true, get: function () { return types_1.SELECT_ALL_ID; } });
+Object.defineProperty(exports, "CLEAR_OPTION_ID", { enumerable: true, get: function () { return types_1.CLEAR_OPTION_ID; } });
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return constants_1.STATE_CHANGE_TYPE; } });
+Object.defineProperty(exports, "LOADING_KEY", { enumerable: true, get: function () { return constants_1.LOADING_KEY; } });
+Object.defineProperty(exports, "CLEARABLE_KEY", { enumerable: true, get: function () { return constants_1.CLEARABLE_KEY; } });
 // styled-components
 var styled_component_1 = require("./styled-component");
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_component_1.StyledRoot; } });
@@ -19,7 +22,6 @@ Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function
 Object.defineProperty(exports, "StyledInputContainer", { enumerable: true, get: function () { return styled_component_1.StyledInputContainer; } });
 Object.defineProperty(exports, "StyledInputSizer", { enumerable: true, get: function () { return styled_component_1.StyledInputSizer; } });
 Object.defineProperty(exports, "StyledPlaceholder", { enumerable: true, get: function () { return styled_component_1.StyledPlaceholder; } });
-Object.defineProperty(exports, "StyledSearchIcon", { enumerable: true, get: function () { return styled_component_1.StyledSearchIcon; } });
 Object.defineProperty(exports, "StyledSearchIconContainer", { enumerable: true, get: function () { return styled_component_1.StyledSearchIconContainer; } });
 Object.defineProperty(exports, "StyledSelectArrow", { enumerable: true, get: function () { return styled_component_1.StyledSelectArrow; } });
 Object.defineProperty(exports, "StyledSingleValue", { enumerable: true, get: function () { return styled_component_1.StyledSingleValue; } });
@@ -40,8 +42,10 @@ 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; } });
+var grouped_select_1 = require("./grouped-select");
+Object.defineProperty(exports, "GroupedSelect", { enumerable: true, get: function () { return grouped_select_1.GroupedSelect; } });
 // Utils
 var default_filter_options_1 = require("./utils/default-filter-options");
 Object.defineProperty(exports, "defaultFilterOptions", { enumerable: true, get: function () { return default_filter_options_1.filterOptions; } });

package/select/locale.d.ts

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

package/select/mobileSelect/MobileSelect.js

@@ -5,19 +5,24 @@ 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];
-    var mergedOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, (0, overrides_2.getOverlayOverrides)({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides]);
-    var childSelectOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, overrides_2.CHILD_SELECT_OVERRIDES); }, [
-        overrides,
-    ]);
+    var mergedOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, (0, overrides_2.getOverlayOverrides)({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides, label]);
+    var childSelectOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, overrides_2.CHILD_SELECT_OVERRIDES); }, [overrides]);
     var overlaySelectProps = (0, omit_1.default)(props, overrides_2.OVERLAY_SELECT_PROPS_TO_OMIT);
     var viewSelectProps = (0, omit_1.default)(props, overrides_2.CHILD_SELECT_PROPS_TO_OMIT);
     (0, usePauseBodyScrollEffect_1.usePauseBodyScrollEffect)({ currentEl: scrollContainer || undefined });
-    return ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay" }, { children: React.isValidElement(children) ? (children) : ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({}, viewSelectProps, { overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
+    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;

package/select/multi-value.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { MultiValueProps } from './types';
-export default function MultiValue(props: MultiValueProps): React.ReactElement;
+declare const MultiValue: React.ForwardRefExoticComponent<React.RefAttributes<HTMLElement>>;
+export default MultiValue;

package/select/multi-value.js

@@ -3,27 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var React = (0, tslib_1.__importStar)(require("react"));
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var overrides_1 = require("../overrides");
 var style_1 = require("../style");
 var tag_1 = require("../tag");
-function MultiValue(props) {
-    var _a;
-    var _b = props.overrides, overrides = _b === void 0 ? {} : _b, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, restProps = (0, tslib_1.__rest)(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled"]);
-    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Tag, tag_1.Tag), 2), TagComponent = _c[0], tagProps = _c[1];
+var StyledTombstone_1 = require("../helpers/StyledTombstone");
+var constants_1 = require("./constants");
+var MultiValue = React.forwardRef(function (props, ref) {
+    var _a, _b;
+    var _c = props.overrides, overrides = _c === void 0 ? {} : _c, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, $valueByIdMap = props.$valueByIdMap, $valueKey = props.$valueKey, $size = props.$size, $isContainerFocused = props.$isContainerFocused, restProps = (0, tslib_1.__rest)(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused"]);
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Tag, tag_1.Tag), 2), TagComponent = _d[0], tagProps = _d[1];
     var theme = (0, style_1.useStyle)().theme;
-    var multiSelectTheme = (0, react_1.useMemo)(function () { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', selectSize, 'lg'); }, [
-        selectSize,
-        theme,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(TagComponent, (0, tslib_1.__assign)({ variant: "light", intent: "default", "aria-label": "".concat(typeof restProps.children === 'string' ? "".concat(restProps.children, ", ") : '', "close by backspace"), tabIndex: 0, onActionClick: onActionClick, "$item": value, "$disabled": $disabled }, restProps, tagProps, { closeable: (_a = tagProps.closeable) !== null && _a !== void 0 ? _a : !$disabled, overrides: (0, overrides_1.mergeOverrides)({
+    var multiSelectTheme = (0, react_1.useMemo)(function () { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', selectSize, (0, themeHelpers_1.getDefaultSize)(theme)); }, [selectSize, theme]);
+    var selectedValue = $valueByIdMap === null || $valueByIdMap === void 0 ? void 0 : $valueByIdMap[value[$valueKey]];
+    var disabled = $disabled || (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[constants_1.CLEARABLE_KEY]) === false;
+    var isLoading = (_a = value === null || value === void 0 ? void 0 : value[constants_1.LOADING_KEY]) !== null && _a !== void 0 ? _a : selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[constants_1.LOADING_KEY];
+    var tagMarginX = multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginX;
+    var tagMarginY = multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginY;
+    var tagSize = selectSize === 'xxxs' ? 'xxxs' : 'sm';
+    var closeable = (_b = tagProps.closeable) !== null && _b !== void 0 ? _b : !disabled;
+    return ((0, jsx_runtime_1.jsx)(TagComponent, (0, tslib_1.__assign)({ ref: ref, variant: "light", intent: "default", "aria-label": "".concat(typeof restProps.children === 'string' ? "".concat(restProps.children, ", ") : '', "close by backspace"), tabIndex: $isContainerFocused ? 0 : -1, onActionClick: onActionClick, "$item": value, "$disabled": disabled, size: tagSize }, restProps, tagProps, { closeable: closeable, overrides: (0, overrides_1.mergeOverrides)({
             Root: {
                 style: [
                     'box-border',
-                    (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (theme.multiSelect.tagBorderRadius && (0, longHandHelpers_1.borderRadius)(theme.multiSelect.tagBorderRadius))), { marginRight: multiSelectTheme.tagMarginX, marginLeft: multiSelectTheme.tagMarginX, marginTop: multiSelectTheme.tagMarginY, marginBottom: multiSelectTheme.tagMarginY, height: multiSelectTheme.tagHeight, maxWidth: "calc(100% - ".concat(2 * parseInt(multiSelectTheme.tagMarginX, 10), "px)") }),
+                    {
+                        marginRight: tagMarginX,
+                        marginBottom: tagMarginY,
+                        marginTop: tagMarginY,
+                        maxWidth: "calc(100% - ".concat(2 * parseInt(multiSelectTheme.tagMarginX, 10), "px)"),
+                    },
                 ],
             },
-        }, tagProps.overrides) }, { children: props.children }), void 0));
-}
+            Action: { props: { tabIndex: $isContainerFocused ? 0 : -1 } },
+        }, tagProps.overrides) }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "multi-value-tombstone", className: "w-20 h-4 rounded-8" }, void 0)) : (props.children) }), void 0));
+});
 exports.default = MultiValue;

package/select/overlaySelect/OverlaySelect.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

@@ -8,9 +8,12 @@ var overrides_1 = require("../../overrides");
 var popover_1 = require("../../popover");
 var base_select_1 = (0, tslib_1.__importDefault)(require("../base-select"));
 var styled_component_1 = require("../styled-component");
-var useOverlaySelectOverrides_1 = (0, tslib_1.__importDefault)(require("./useOverlaySelectOverrides"));
+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',
@@ -19,6 +22,7 @@ var propsToOmit = [
     'onChange',
     'startOpen',
     'searchable',
+    'inputRef',
     'controlRef',
     'autoFocus',
     'placeholder',
@@ -26,39 +30,57 @@ var propsToOmit = [
     'onInputChange',
     'onOpen',
     'onClose',
-    'filterOptions',
     'overlayWidth',
     'disabled',
     'captureScroll',
     'placement',
     '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, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, popover_1.Popover), 2), PopoverOverriden = _e[0], popoverProps = _e[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)(setScrollTarget, overlayContentContainerProps === null || overlayContentContainerProps === void 0 ? void 0 : overlayContentContainerProps.ref);
-    var _f = (0, useOverlaySelectOverrides_1.default)(props), popoverOpen = _f.popoverOpen, filterOptionsOverride = _f.filterOptionsOverride, handleValuesChange = _f.handleValuesChange, overrides = _f.overrides, togglePopoverState = _f.togglePopoverState, closePopover = _f.closePopover, openPopover = _f.openPopover;
-    (0, react_1.useEffect)(function () {
-        if (props.methodsRef) {
-            props.methodsRef.current = {
-                setDropdownOpen: function (shouldOpen) {
-                    if (shouldOpen)
-                        openPopover();
-                    else
-                        closePopover();
-                },
-            };
-        }
-    }, [openPopover, closePopover]);
+    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, 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 }, 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

@@ -0,0 +1,9 @@
+import { ControlRef } from '../../../baseui/select';
+declare type Params = {
+    openPopover: () => void;
+    closePopover: () => void;
+    inputElement: HTMLInputElement | HTMLDivElement | null;
+    setInputValue: (val: string) => void;
+};
+export declare const useControlRef: (controlRef: ControlRef | undefined, { openPopover, closePopover, inputElement, setInputValue }: Params) => void;
+export {};

package/select/overlaySelect/hooks/useControlRef.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControlRef = void 0;
+var react_1 = require("react");
+var useControlRef = function (controlRef, _a) {
+    var openPopover = _a.openPopover, closePopover = _a.closePopover, inputElement = _a.inputElement, setInputValue = _a.setInputValue;
+    (0, react_1.useEffect)(function () {
+        if (!controlRef) {
+            return undefined;
+        }
+        controlRef.current = {
+            setDropdownOpen: function (shouldOpen) {
+                if (shouldOpen)
+                    openPopover();
+                else
+                    closePopover();
+            },
+            setInputValue: setInputValue,
+            blur: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.blur();
+            },
+            focus: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus();
+            },
+            setInputBlur: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.blur();
+            },
+            setInputFocus: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus();
+            },
+        };
+        return function () {
+            controlRef.current = null;
+        };
+    }, [openPopover, closePopover, controlRef, setInputValue, inputElement]);
+};
+exports.useControlRef = useControlRef;

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { OnChangeParams, OverlaySelectProps } from '../../types';
+declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "children" | "type" | "overlayWidth" | "scrollContainer"> & {
+    type: "overlay";
+    overlayWidth?: string | undefined;
+    children: React.ReactNode | ((args: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+    scrollContainer?: "overlayContainer" | "menuContainer" | undefined;
+} & {
+    scrollElement: HTMLElement | null;
+}) => {
+    overrides: import("../../../overrides").OverridesObject<any>;
+    handleValuesChange: (params: OnChangeParams) => void;
+    popoverOpen: boolean;
+    closePopover: () => void;
+    openPopover: () => void;
+    togglePopoverState: () => void;
+    __inputValue: string;
+};
+export default useOverlaySelectOverrides;

package/select/overlaySelect/{useOverlaySelectOverrides.js → hooks/useOverlaySelectOverrides.js}

@@ -5,16 +5,16 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
 var react_1 = require("react");
-var box_1 = require("../../box");
-var longHandHelpers_1 = require("../../helpers/longHandHelpers");
-var loader_1 = require("../../loader");
-var overrides_1 = require("../../overrides");
-var search_1 = require("../../search");
-var style_1 = require("../../style");
-var overrides_2 = require("../overrides");
+var box_1 = require("../../../box");
+var longHandHelpers_1 = require("../../../helpers/longHandHelpers");
+var loader_1 = require("../../../loader");
+var overrides_1 = require("../../../overrides");
+var search_1 = require("../../../search");
+var overrides_2 = require("../../overrides");
 var usePopover_1 = (0, tslib_1.__importDefault)(require("./usePopover"));
-var useStickyElement_1 = (0, tslib_1.__importDefault)(require("../../hooks/useStickyElement"));
-var useUpdateEffect_1 = (0, tslib_1.__importDefault)(require("../../hooks/useUpdateEffect"));
+var useStickyElement_1 = (0, tslib_1.__importDefault)(require("../../../hooks/useStickyElement"));
+var useUpdateEffect_1 = (0, tslib_1.__importDefault)(require("../../../hooks/useUpdateEffect"));
+var useControlRef_1 = require("./useControlRef");
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
     var _b = (0, tslib_1.__read)((0, react_1.useState)(null), 2), inputElement = _b[0], setInputElement = _b[1];
@@ -30,12 +30,18 @@ var useAutoFocus = function (_a) {
              */
             inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus({ preventScroll: true });
         }
+        return function () {
+            if (inputRef) {
+                typeof inputRef === 'function'
+                    ? inputRef(null)
+                    : (inputRef.current = null);
+            }
+        };
     }, [autoFocus, inputElement, inputRef]);
     return [inputElement, setInputElement];
 };
 function SelectLoader() {
-    var direction = (0, style_1.useStyle)().direction;
-    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['flex items-center pl-3', direction !== 'rtl' ? 'pr-3' : 'pl-3'] }, { children: (0, jsx_runtime_1.jsx)(loader_1.Loader, { size: 14, variant: "clip" }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['flex items-center px-3'] }, { children: (0, jsx_runtime_1.jsx)(loader_1.Loader, { size: 14, variant: "clip" }, void 0) }), void 0));
 }
 var useSearchContainerHeight = function () {
     var _a = (0, tslib_1.__read)((0, react_1.useState)(), 2), containerHeight = _a[0], setHeight = _a[1];
@@ -52,21 +58,16 @@ var useSearchContainerHeight = function () {
  */
 var overridesToOmit = ['SelectContainer', 'Popover'];
 var useOverlaySelectOverrides = function (props) {
-    var closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, controlRef = props.controlRef, 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;
-    var _b = (0, tslib_1.__read)((0, react_1.useState)(''), 2), inputValue = _b[0], setInputValue = _b[1];
-    var _c = (0, usePopover_1.default)(props), popoverOpen = _c.popoverOpen, togglePopoverState = _c.togglePopoverState, closePopover = _c.closePopover, openPopover = _c.openPopover;
+    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 () {
         if (!popoverOpen && onCloseResetsInput) {
             setInputValue('');
         }
     }, [onCloseResetsInput, popoverOpen]);
-    var _d = (0, tslib_1.__read)(useAutoFocus({ autoFocus: autoFocus, inputRef: controlRef }), 2), inputElement = _d[0], setInputElement = _d[1];
-    var filterOptionsOverride = (0, react_1.useCallback)(function (options, _, excludeOptions, params) {
-        if (filterOptions) {
-            return filterOptions(options, inputValue, excludeOptions, params);
-        }
-        return options;
-    }, [filterOptions, inputValue]);
+    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 handleInputChange = (0, react_1.useCallback)(function (e) {
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
         setInputValue(e.target.value);
@@ -88,8 +89,8 @@ var useOverlaySelectOverrides = function (props) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(params);
     }, [closePopover, onChange, closeOnSelect]);
-    var _e = (0, useStickyElement_1.default)(), isSticky = _e.isSticky, setStickySentinelRef = _e.setStickySentinelRef;
-    var _f = useSearchContainerHeight(), containerHeight = _f.containerHeight, setContainerElement = _f.setContainerElement;
+    var _f = (0, useStickyElement_1.default)(), isSticky = _f.isSticky, setStickySentinelRef = _f.setStickySentinelRef;
+    var _g = useSearchContainerHeight(), containerHeight = _g.containerHeight, setContainerElement = _g.setContainerElement;
     var memoizedOverrides = (0, react_1.useMemo)(function () { return ({
         // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
         Popover: {
@@ -106,7 +107,7 @@ var useOverlaySelectOverrides = function (props) {
                 inputRef: setInputElement,
                 placeholder: placeholder,
                 size: 'sm',
-                className: 'mx-4 w-auto',
+                className: 'mx-3 w-auto',
                 overrides: {
                     After: isLoading ? SelectLoader : function () { return null; },
                     ClearIcon: {
@@ -115,7 +116,6 @@ var useOverlaySelectOverrides = function (props) {
                         },
                     },
                 },
-                autoFocus: true,
                 // override baseui's onKeyDown
                 onKeyDown: noop_1.default,
                 clearable: clearable,
@@ -145,13 +145,11 @@ var useOverlaySelectOverrides = function (props) {
             props: {
                 overrides: {
                     List: {
-                        props: {
-                            overrides: {
+                        props: (0, tslib_1.__assign)({ overrides: {
                                 Root: {
-                                    style: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (searchable ? { paddingTop: 0 } : {})), (0, longHandHelpers_1.borderRadius)(0)), { overflow: 'visible' }),
+                                    style: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (searchable ? { paddingTop: 0 } : {})), (0, longHandHelpers_1.borderRadius)(0)), (scrollContainer === 'menuContainer' ? {} : { overflow: 'visible' })),
                                 },
-                            },
-                        },
+                            } }, (scrollContainer === 'menuContainer' ? {} : { scrollElement: scrollElement })),
                     },
                 },
             },
@@ -188,19 +186,18 @@ var useOverlaySelectOverrides = function (props) {
         clearable,
         onFocus,
         onBlur,
+        scrollContainer,
+        scrollElement,
     ]);
-    var overrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(memoizedOverrides, (0, omit_1.default)(props.overrides, overridesToOmit)); }, [
-        memoizedOverrides,
-        props.overrides,
-    ]);
+    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/overlaySelect/{usePopover.d.ts → hooks/usePopover.d.ts}

@@ -1,4 +1,4 @@
-import { OverlaySelectProps } from '../types';
+import { OverlaySelectProps } from '../../types';
 declare const usePopover: ({ startOpen, onOpen, onClose }: OverlaySelectProps) => {
     popoverOpen: boolean;
     togglePopoverState: () => void;

package/select/overlaySelect/{usePopover.js → hooks/usePopover.js}

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-var useLatest_1 = require("../../hooks/useLatest");
-var useFirstMountState_1 = require("../../hooks/useFirstMountState");
+var useLatest_1 = require("../../../hooks/useLatest");
+var useFirstMountState_1 = require("../../../hooks/useFirstMountState");
 var usePopover = function (_a) {
     var startOpen = _a.startOpen, onOpen = _a.onOpen, onClose = _a.onClose;
     var isFirstMount = (0, useFirstMountState_1.useFirstMountState)();

package/select/overrides.d.ts

@@ -12,12 +12,14 @@ export declare const getSearchIconStyles: StyleFn<SharedProps>;
 export declare const getControlContainerStyles: Styles;
 export declare const getValueContainerStyles: Styles;
 export declare const getValueTypography: Styles;
-export declare const getSelectInputStyles: StyleFn;
 export declare const OverlaySelectPopoverOverride: ({ content, children: inputContainer, setStickySentinelRef }: {
     content: any;
     children: any;
     setStickySentinelRef: any;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleValueTombstone: ({ $selectSize }: {
+    $selectSize: any;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const selectMenuOverrides: {
     readonly Menu: {
         readonly props: {