@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/select/multi-value.js

@@ -3,27 +3,37 @@ 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 themeHelpers_1 = require("../helpers/themeHelpers");
 var overrides_1 = require("../overrides");
 var style_1 = require("../style");
 var tag_1 = require("../tag");
+var StyledTombstone_1 = require("../helpers/StyledTombstone");
+var constants_1 = require("./constants");
 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 _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, 'md'); }, [
-        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';
+    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: $isContainerFocused ? 0 : -1, onActionClick: onActionClick, "$item": value, "$disabled": disabled, size: tagSize }, restProps, tagProps, { closeable: (_b = tagProps.closeable) !== null && _b !== void 0 ? _b : !disabled, 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

@@ -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,29 +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, 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

@@ -1,23 +1,21 @@
 import * as React from 'react';
 import { OnChangeParams, OverlaySelectProps } from '../../types';
-declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "children" | "type" | "overlayWidth"> & {
+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>;
-    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

@@ -10,7 +10,6 @@ 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 usePopover_1 = (0, tslib_1.__importDefault)(require("./usePopover"));
 var useStickyElement_1 = (0, tslib_1.__importDefault)(require("../../../hooks/useStickyElement"));
@@ -42,8 +41,7 @@ var useAutoFocus = function (_a) {
     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];
@@ -60,22 +58,16 @@ 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;
-    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: inputRef }), 2), inputElement = _d[0], setInputElement = _d[1];
+    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);
@@ -97,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: {
@@ -115,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: {
@@ -153,14 +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' })),
                                 },
-                            },
-                            scrollElement: scrollElement,
-                        },
+                            } }, (scrollContainer === 'menuContainer' ? {} : { scrollElement: scrollElement })),
                     },
                 },
             },
@@ -197,16 +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]);
     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,7 +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;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const selectMenuOverrides: {
     readonly Menu: {
         readonly props: {

package/select/overrides.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectMenuOverrides = exports.OverlaySelectPopoverOverride = exports.getValueTypography = exports.getValueContainerStyles = exports.getControlContainerStyles = exports.getSearchIconStyles = exports.getSearchIconContainerStyles = exports.SelectArrow = void 0;
+exports.selectMenuOverrides = exports.SingleValueTombstone = exports.OverlaySelectPopoverOverride = exports.getValueTypography = exports.getValueContainerStyles = exports.getControlContainerStyles = exports.getSearchIconStyles = exports.getSearchIconContainerStyles = exports.SelectArrow = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var commonStyles_1 = require("../helpers/commonStyles");
@@ -8,6 +8,9 @@ var themeHelpers_1 = require("../helpers/themeHelpers");
 var chevron_down_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-down"));
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var styled_components_1 = require("../input/styled-components");
+var StyledTombstone_1 = require("../helpers/StyledTombstone");
+var style_1 = require("../style");
+var longHandHelpers_2 = require("../helpers/longHandHelpers");
 var selectBorderColor = function (_a, _b) {
     var theme = _a.theme;
     var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c, $isPseudoFocused = _b.$isPseudoFocused, $isFocused = _b.$isFocused, $disabled = _b.$disabled;
@@ -46,14 +49,17 @@ exports.getSearchIconStyles = getSearchIconStyles;
 exports.getControlContainerStyles = [
     styled_components_1.getInputStyles,
     // Applying paddingX only. paddingY will be applied on ValueContainer.
-    'py-0 px-3 transition-none overflow-auto',
+    'py-0 transition-none overflow-auto',
     selectBorderColor,
     commonStyles_1.transparentScrollbarStyles,
     function (utils, props) {
-        var $multi = props.$multi, $isEmpty = props.$isEmpty, $type = props.$type;
+        var _a;
+        var $multi = props.$multi, $isEmpty = props.$isEmpty, $type = props.$type, $size = props.$size;
+        var borderRadius = ((_a = (0, themeHelpers_1.getComponentSizeTheme)(utils.theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(utils.theme))) === null || _a === void 0 ? void 0 : _a.borderRadius) ||
+            utils.theme.input.borderRadius;
         // Override paddingLeft for multiSelect when values are selected
         var shouldOverridePaddingLeft = $multi && !$isEmpty && $type !== 'search';
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderWidth)(utils.theme.borderWidth.default)), (shouldOverridePaddingLeft && { paddingLeft: utils.px2rem(2) })), { maxHeight: '120px' });
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderWidth)(utils.theme.borderWidth.default)), (shouldOverridePaddingLeft && { paddingLeft: utils.px2rem(2) })), { maxHeight: '120px' }), (0, longHandHelpers_2.borderRadius)(borderRadius));
     },
 ];
 exports.getValueContainerStyles = [
@@ -64,11 +70,12 @@ exports.getValueContainerStyles = [
     function (_a, _b) {
         var theme = _a.theme;
         var $multi = _b.$multi, $isEmpty = _b.$isEmpty, $size = _b.$size;
-        var multiSelectTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', $size, 'md');
+        var multiSelectTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', $size, (0, themeHelpers_1.getDefaultSize)(theme));
         return $multi && !$isEmpty
             ? {
                 paddingTop: multiSelectTheme.paddingY,
                 paddingBottom: multiSelectTheme.paddingY,
+                paddingLeft: multiSelectTheme.paddingX,
             }
             : {};
     },
@@ -76,7 +83,7 @@ exports.getValueContainerStyles = [
 var getValueTypography = function (_a, _b) {
     var theme = _a.theme;
     var $selectSize = _b.$selectSize;
-    var _c = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, 'md'), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
+    var _c = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, (0, themeHelpers_1.getDefaultSize)(theme)), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
     return { fontSize: fontSize, lineHeight: lineHeight, height: lineHeight };
 };
 exports.getValueTypography = getValueTypography;
@@ -86,6 +93,13 @@ var OverlaySelectPopoverOverride = function (_a) {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setStickySentinelRef }, void 0), inputContainer, typeof content === 'function' ? content() : content] }, void 0));
 };
 exports.OverlaySelectPopoverOverride = OverlaySelectPopoverOverride;
+var SingleValueTombstone = function (_a) {
+    var $selectSize = _a.$selectSize;
+    var theme = (0, style_1.useStyle)().theme;
+    var lineHeight = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, (0, themeHelpers_1.getDefaultSize)(theme)).lineHeight;
+    return ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "single-value-tombstone", className: ['w-24 rounded-8', { height: lineHeight }] }, void 0));
+};
+exports.SingleValueTombstone = SingleValueTombstone;
 exports.selectMenuOverrides = {
     Menu: {
         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,15 +31,16 @@ 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;
+        popoverMinWidth: string;
     };
 };
 export default Select;

package/select/select.js

@@ -7,15 +7,18 @@ var overlaySelect_1 = (0, tslib_1.__importDefault)(require("./overlaySelect"));
 var mobileSelect_1 = (0, tslib_1.__importDefault)(require("./mobileSelect"));
 var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
 var context_1 = require("../form-control/context");
+var style_1 = require("../style");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var Select = function (props) {
     var adaptedProps = (0, context_1.useContextualFormProps)(props);
+    var theme = (0, style_1.useStyle)().theme;
     switch (adaptedProps.type) {
         case 'overlay':
-            return (0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || 'md' }), void 0);
+            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':
-            return (0, jsx_runtime_1.jsx)(mobileSelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || 'md' }), void 0);
+            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:
-            return (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || 'md' }), void 0);
+            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);
     }
 };
 Select.defaultProps = default_props_1.default;

package/select/selectMenuAdapter/CollapsibleSelectMenu.d.ts

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { ReactElement, UIEvent } from 'react';
+import { MenuAdapterProps } from './types';
+import { MenuProps } from '../../menu';
+import type { GroupConfig } from './types';
+export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedItems, multi, labelKey, valueKey, onItemSelect, shouldDisplaySelectAll, selectAllSelected: selectAllChecked, noResultsMsg, $onPaginate, groupConfig, virtual, clearAsOption, selectOnTab, inputRef, }: {
+    items: import("../../baseui/menu").Items;
+    initialState?: import("../../baseui/menu").InitialState | undefined;
+    stateReducer?: import("../../baseui/menu").StateReducerFn | undefined;
+    getRequiredItemProps?: import("../../baseui/menu").GetRequiredItemPropsFn | undefined;
+    onActiveDescendantChange?: ((id?: string | undefined) => unknown) | undefined;
+    onItemSelect?: import("../../baseui/menu").OnItemSelectFn | undefined;
+    rootRef?: import("../../baseui/menu").RootRef | undefined;
+    children?: ((a: import("../../baseui/menu").RenderProps) => React.ReactNode) | undefined;
+    typeAhead?: boolean | undefined;
+    addMenuToNesting?: ((ref: {
+        current: HTMLElement | null;
+    }) => void) | undefined;
+    removeMenuFromNesting?: ((ref: {
+        current: HTMLElement | null;
+    }) => void) | undefined;
+    getParentMenu?: ((ref: {
+        current: HTMLElement | null;
+    }) => {
+        current: HTMLElement | null;
+    } | null | undefined) | undefined;
+    getChildMenu?: ((ref: {
+        current: HTMLElement | null;
+    }) => {
+        current: HTMLElement | null;
+    } | null | undefined) | undefined;
+    nestedMenuHoverIndex?: number | undefined;
+    isNestedMenuVisible?: ((ref: {
+        current: HTMLElement | null;
+    }) => boolean) | undefined;
+} & import("../../baseui/menu").MenuProps & {
+    id?: string | undefined;
+    value: import("..").Value | undefined;
+    overrides?: {
+        Menu?: import("../../overrides").Override<MenuProps> | undefined;
+        MenuItem?: import("../../overrides").Override<Omit<import("../../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
+            getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
+            onMouseEnter?: (() => void) | undefined;
+            onMouseLeave?: (() => void) | undefined;
+            renderAll?: boolean | undefined;
+            overrides?: {
+                ListItem?: import("../../overrides").Override<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+                    $as?: React.ElementType<any> | undefined;
+                    className?: import("../..").Styles;
+                    style?: import("../..").Styles;
+                } & {
+                    alignItems?: import("../../list").AlignItems | undefined;
+                    autoFocus?: boolean | undefined;
+                    button?: boolean | undefined;
+                    children?: React.ReactNode;
+                    disabled?: boolean | undefined;
+                    endEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
+                    highlighted?: boolean | undefined;
+                    onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+                    overrides?: {
+                        ChildContainer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        EndEnhancer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        Root?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StartEnhancer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StatefulTooltip?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                    } | undefined;
+                    selected?: boolean | undefined;
+                    startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
+                    tooltipContent?: React.ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
+                } & Record<string, any>> | undefined;
+                Popover?: import("../../overrides").Override<Omit<import("../../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
+                    overrides?: ({
+                        Body?: import("../../overrides").Override<any> | undefined;
+                        Arrow?: import("../../overrides").Override<any> | undefined;
+                        Inner?: import("../../overrides").Override<any> | undefined;
+                    } & {
+                        ArrowTriangle?: import("../../overrides").Override<any> | undefined;
+                    }) | undefined;
+                    children?: React.ReactNode | ((args: {
+                        isOpen: boolean;
+                    }) => React.ReactNode);
+                    targetElement?: HTMLElement | null | undefined;
+                    triggerType?: import("../../popover").TriggerType | undefined;
+                    placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+                    innerRef?: React.Ref<HTMLElement> | undefined;
+                    viewportAsBoundary?: boolean | undefined;
+                } & Record<string, any>> | undefined;
+            } | undefined;
+        } & {
+            $multi: boolean;
+            $item: unknown;
+            $labelKey: string;
+        }> | undefined;
+        NoResults?: import("../../overrides").Override<{}> | undefined;
+        Divider?: import("../../overrides").Override<{
+            title: string;
+        }> | undefined;
+        ListItemText?: import("../../overrides").Override<{
+            $multi: boolean;
+            $item: unknown;
+            $labelKey: string;
+        }> | undefined;
+    } | undefined;
+    valueKey: string;
+    labelKey: string;
+    multi: boolean | undefined;
+    selectAllSelected: boolean;
+    shouldDisplaySelectAll?: boolean | undefined;
+    noResultsMsg?: string | undefined;
+    captureScroll?: boolean | undefined;
+    virtual?: boolean | undefined;
+    overscanCount?: number | undefined;
+    selectOnTab?: boolean | undefined;
+    inputRef?: React.RefObject<HTMLInputElement> | undefined;
+} & {
+    $onPaginate?: ((event: UIEvent<HTMLElement>, itemGroup: string) => void) | undefined;
+    groupConfig: GroupConfig;
+    clearAsOption?: boolean | undefined;
+}) => ReactElement;