@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/select/overlaySelect/hooks/useOverlaySelectOverrides.js

@@ -2,22 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 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 omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 var react_1 = require("react");
+var SelectIdsContext_1 = require("../../SelectIdsContext");
 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 usePopover_1 = tslib_1.__importDefault(require("./usePopover"));
+var useStickyElement_1 = tslib_1.__importDefault(require("../../../hooks/useStickyElement"));
+var useUpdateEffect_1 = tslib_1.__importDefault(require("../../../hooks/useUpdateEffect"));
 var useControlRef_1 = require("./useControlRef");
+var helpers_1 = require("../../../menu/helpers");
 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];
+    var _b = tslib_1.__read((0, react_1.useState)(null), 2), inputElement = _b[0], setInputElement = _b[1];
     (0, react_1.useEffect)(function () {
         if (inputRef) {
             typeof inputRef === 'function'
@@ -41,11 +41,11 @@ var useAutoFocus = function (_a) {
     return [inputElement, setInputElement];
 };
 function SelectLoader() {
-    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));
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: ['flex items-center px-3'] }, { children: (0, jsx_runtime_1.jsx)(loader_1.Loader, { size: 14, variant: "clip" }) })));
 }
 var useSearchContainerHeight = function () {
-    var _a = (0, tslib_1.__read)((0, react_1.useState)(), 2), containerHeight = _a[0], setHeight = _a[1];
-    var _b = (0, tslib_1.__read)((0, react_1.useState)(), 2), containerElement = _b[0], setContainerElement = _b[1];
+    var _a = tslib_1.__read((0, react_1.useState)(), 2), containerHeight = _a[0], setHeight = _a[1];
+    var _b = tslib_1.__read((0, react_1.useState)(), 2), containerElement = _b[0], setContainerElement = _b[1];
     (0, react_1.useEffect)(function () {
         if (containerElement) {
             setHeight(containerElement.getBoundingClientRect().height);
@@ -53,25 +53,63 @@ var useSearchContainerHeight = function () {
     }, [containerElement, setHeight]);
     return { setContainerElement: setContainerElement, containerHeight: containerHeight };
 };
+var OverlaySelectControlContainer = function (props) {
+    var listboxId = (0, SelectIdsContext_1.useSelectIds)().listboxId;
+    var isOpen = props.$isOpen || props['aria-expanded'];
+    var ariaControls = listboxId && isOpen ? listboxId : undefined;
+    return (0, jsx_runtime_1.jsx)(search_1.Search, tslib_1.__assign({}, props, { "aria-controls": ariaControls }));
+};
 /*
  * These overrides are meant for OverlaySelect and not for BaseSelect
  */
 var overridesToOmit = ['SelectContainer', 'Popover'];
 var useOverlaySelectOverrides = function (props) {
-    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;
+    var _a = props.closeOnSelect, closeOnSelect = _a === void 0 ? !props.multi : _a, autoFocus = props.autoFocus, inputRef = props.inputRef, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _b = props.clearable, clearable = _b === void 0 ? true : _b, onFocusProp = props.onFocus, onBlurProp = props.onBlur, onCloseResetsInput = props.onCloseResetsInput, controlRef = props.controlRef, scrollElement = props.scrollElement, _c = props.scrollContainer, scrollContainer = _c === void 0 ? 'overlayContainer' : _c, dropdownFooter = props.dropdownFooter;
+    var _d = tslib_1.__read((0, react_1.useState)(''), 2), inputValue = _d[0], setInputValue = _d[1];
+    var _e = (0, usePopover_1.default)(props), popoverOpen = _e.popoverOpen, togglePopoverState = _e.togglePopoverState, closePopover = _e.closePopover, openPopover = _e.openPopover;
+    var _f = tslib_1.__read((0, react_1.useState)(null), 2), menuRef = _f[0], setMenuRef = _f[1];
+    var listNavigationEnabledRef = (0, react_1.useRef)(false);
     (0, useUpdateEffect_1.default)(function () {
         if (!popoverOpen && onCloseResetsInput) {
             setInputValue('');
         }
     }, [onCloseResetsInput, popoverOpen]);
-    var _e = (0, tslib_1.__read)(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _e[0], setInputElement = _e[1];
+    (0, useUpdateEffect_1.default)(function () {
+        if (!popoverOpen) {
+            listNavigationEnabledRef.current = false;
+        }
+    }, [popoverOpen]);
+    var _g = tslib_1.__read(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _g[0], setInputElement = _g[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);
     }, [onInputChange]);
+    var onBlur = (0, react_1.useCallback)(function (event) {
+        var _a;
+        listNavigationEnabledRef.current = false;
+        (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.turnOffKeyboardNavigation) === null || _a === void 0 ? void 0 : _a.call(menuRef);
+        onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);
+    }, [onBlurProp, menuRef]);
+    var onFocus = (0, react_1.useCallback)(function (event) {
+        onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
+    }, [onFocusProp]);
+    // menu navigation is disabled until we use the arrow keys to navigate to it
+    // otherwise, on point it automatically grabs focus from search and directs it to the first option
+    // @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        var _a, _b, _c;
+        if ((event.key !== 'ArrowDown' && event.key !== 'ArrowUp') || listNavigationEnabledRef.current)
+            return;
+        var listContainer = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.querySelector('ul')) !== null && _a !== void 0 ? _a : menuRef;
+        if (!menuRef || !listContainer)
+            return;
+        event.preventDefault();
+        (_b = menuRef.turnOnKeyboardNavigation) === null || _b === void 0 ? void 0 : _b.call(menuRef);
+        listNavigationEnabledRef.current = true;
+        var _d = (0, helpers_1.getFirstHighlightableElement)(listContainer), firstHighlightableItem = _d.firstHighlightableItem, firstSelectedItem = _d.firstSelectedItem;
+        (_c = menuRef.setHighlightedItem) === null || _c === void 0 ? void 0 : _c.call(menuRef, (firstSelectedItem !== null && firstSelectedItem !== void 0 ? firstSelectedItem : firstHighlightableItem));
+    }, [menuRef]);
     // trigger a fake input change event (as if all text was deleted)
     // reference: https://github.com/uber/baseweb/blob/master/src/input/base-input.js#L101
     var handleOnClear = (0, react_1.useCallback)(function () {
@@ -89,18 +127,22 @@ var useOverlaySelectOverrides = function (props) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(params);
     }, [closePopover, onChange, closeOnSelect]);
-    var _f = (0, useStickyElement_1.default)(), isSticky = _f.isSticky, setStickySentinelRef = _f.setStickySentinelRef;
-    var _g = useSearchContainerHeight(), containerHeight = _g.containerHeight, setContainerElement = _g.setContainerElement;
+    var _h = (0, useStickyElement_1.default)(), isSticky = _h.isSticky, setStickySentinelRef = _h.setStickySentinelRef;
+    var _j = useSearchContainerHeight(), containerHeight = _j.containerHeight, setContainerElement = _j.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: {
             component: overrides_2.OverlaySelectPopoverOverride,
             props: {
                 setStickySentinelRef: setStickySentinelRef,
+                closePopover: closePopover,
             },
         },
+        DropdownContainer: {
+            className: 'w-auto',
+        },
         ControlContainer: {
-            component: search_1.Search,
+            component: OverlaySelectControlContainer,
             props: {
                 value: inputValue,
                 onChange: handleInputChange,
@@ -108,6 +150,11 @@ var useOverlaySelectOverrides = function (props) {
                 placeholder: placeholder,
                 size: 'sm',
                 className: 'mx-3 w-auto',
+                type: 'search',
+                role: 'combobox',
+                'aria-expanded': popoverOpen,
+                'aria-autocomplete': 'list',
+                'aria-haspopup': 'listbox',
                 overrides: {
                     After: isLoading ? SelectLoader : function () { return null; },
                     ClearIcon: {
@@ -117,39 +164,43 @@ var useOverlaySelectOverrides = function (props) {
                     },
                 },
                 // override baseui's onKeyDown
-                onKeyDown: noop_1.default,
+                onKeyDown: onKeyDown,
                 clearable: clearable,
                 onFocus: onFocus,
                 onBlur: onBlur,
             },
         },
         Root: {
-            style: (function (_a) {
-                var theme = _a.theme, px2rem = _a.px2rem;
-                return ({
-                    paddingTop: px2rem(12),
-                    paddingBottom: px2rem(8),
-                    position: 'sticky',
-                    zIndex: 1,
-                    top: '0px',
-                    backgroundColor: theme.spr.popup,
-                    boxShadow: isSticky ? theme.spr.shadow01 : 'none',
-                });
-            }),
+            className: [
+                scrollContainer === 'menuContainer' || !!dropdownFooter ? 'border-b-1 spr-border-03' : '',
+                'sticky top-0 pt-3 pb-2 spr-popup z-1',
+                isSticky ? 'spr-shadow-01' : 'shadow-none',
+            ],
             props: {
                 ref: setContainerElement,
             },
             component: searchable ? undefined : function () { return null; },
         },
+        StatefulMenu: {
+            props: {
+                inputElement: inputElement,
+            },
+        },
         Menu: {
             props: {
+                ref: setMenuRef,
+                disableNavigationOnMount: searchable,
                 overrides: {
                     List: {
-                        props: (0, tslib_1.__assign)({ overrides: {
+                        props: 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)), (scrollContainer === 'menuContainer' ? {} : { overflow: 'visible' })),
+                                    className: [
+                                        searchable ? 'pt-0' : '',
+                                        'rounded-0',
+                                        scrollContainer === 'menuContainer' || !!dropdownFooter ? '' : 'overflow-visible',
+                                    ],
                                 },
-                            } }, (scrollContainer === 'menuContainer' ? {} : { scrollElement: scrollElement })),
+                            } }, (scrollContainer === 'menuContainer' || !!dropdownFooter ? {} : { scrollElement: scrollElement })),
                     },
                 },
             },
@@ -170,7 +221,9 @@ var useOverlaySelectOverrides = function (props) {
                 $closePopover: closePopover,
             },
         },
-    }); }, [
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- dropdownFooter is unlikely to be memoized, and shouldn't intentionally trigger a re-render
+    [
         handleInputChange,
         inputValue,
         setInputElement,
@@ -186,8 +239,11 @@ var useOverlaySelectOverrides = function (props) {
         clearable,
         onFocus,
         onBlur,
+        onKeyDown,
+        inputElement,
         scrollContainer,
         scrollElement,
+        popoverOpen,
     ]);
     var overrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(memoizedOverrides, (0, omit_1.default)(props.overrides, overridesToOmit)); }, [memoizedOverrides, props.overrides]);
     return {

package/select/overlaySelect/hooks/usePopover.js

@@ -9,7 +9,7 @@ var usePopover = function (_a) {
     var isFirstMount = (0, useFirstMountState_1.useFirstMountState)();
     var onOpenRef = (0, useLatest_1.useLatest)(onOpen);
     var onCloseRef = (0, useLatest_1.useLatest)(onClose);
-    var _b = (0, tslib_1.__read)((0, react_1.useState)(!!startOpen), 2), popoverOpen = _b[0], setPopoverState = _b[1];
+    var _b = tslib_1.__read((0, react_1.useState)(!!startOpen), 2), popoverOpen = _b[0], setPopoverState = _b[1];
     var togglePopoverState = (0, react_1.useCallback)(function () { return setPopoverState(function (prev) { return !prev; }); }, []);
     var closePopover = (0, react_1.useCallback)(function () { return setPopoverState(false); }, []);
     var openPopover = (0, react_1.useCallback)(function () { return setPopoverState(true); }, []);

package/select/overrides.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleFn, StyleObject, Styles } from '../types';
+import { ClassName, ClassNameStyleFn, Styles } from '../types';
 import { SharedProps } from './types';
 export declare const SelectArrow: ({ $isOpen, title, overrides, ...restProps }: {
     [x: string]: any;
@@ -7,14 +7,15 @@ export declare const SelectArrow: ({ $isOpen, title, overrides, ...restProps }:
     title: any;
     overrides: any;
 }) => React.ReactElement;
-export declare const getSearchIconContainerStyles: Styles;
-export declare const getSearchIconStyles: StyleFn<SharedProps>;
-export declare const getControlContainerStyles: Styles;
-export declare const getValueContainerStyles: Styles;
-export declare const getValueTypography: Styles;
-export declare const OverlaySelectPopoverOverride: ({ content, children: inputContainer, setStickySentinelRef }: {
+export declare const getSearchIconContainerStyles: ClassName;
+export declare const getSearchIconStyles: ClassNameStyleFn<SharedProps>;
+export declare const getControlContainerStyles: ClassName;
+export declare const getValueContainerStyles: ClassName;
+export declare const getValueTypography: ClassName;
+export declare const OverlaySelectPopoverOverride: ({ content, children: inputContainer, closePopover, setStickySentinelRef, }: {
     content: any;
     children: any;
+    closePopover: any;
     setStickySentinelRef: any;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const SingleValueTombstone: ({ $selectSize }: {
@@ -26,11 +27,13 @@ export declare const selectMenuOverrides: {
             readonly overrides: {
                 readonly List: {
                     readonly props: {
+                        readonly className: ({ theme }: {
+                            theme: any;
+                        }, _: any) => "py-1" | undefined;
                         readonly overrides: {
                             readonly Root: {
-                                readonly style: (_: any, { $maxHeight }: {
-                                    $maxHeight: any;
-                                }) => StyleObject;
+                                readonly className: "overflow-auto max-h-[--sw-max-height]";
+                                readonly style: Styles;
                             };
                         };
                     };
@@ -45,9 +48,9 @@ export declare const selectMenuOverrides: {
                     readonly props: {
                         readonly overrides: {
                             readonly Root: {
-                                readonly style: {
-                                    readonly wordBreak: "break-word";
-                                };
+                                readonly className: readonly ["break-words", ({ theme }: {
+                                    theme: any;
+                                }, _: any) => "py-0.5" | undefined];
                             };
                         };
                     };

package/select/overrides.js

@@ -3,101 +3,177 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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");
 var themeHelpers_1 = require("../helpers/themeHelpers");
-var chevron_down_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-down"));
+var chevron_down_1 = 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;
+var cvaConfigs_1 = require("../input/cvaConfigs");
+var cvaConfigs_2 = require("./cvaConfigs");
+var selectBorderColor = function (_, _a) {
+    var _b = _a.$intent, $intent = _b === void 0 ? 'default' : _b, $isPseudoFocused = _a.$isPseudoFocused, $isFocused = _a.$isFocused, $disabled = _a.$disabled;
     switch ($intent) {
         case 'default':
         default: {
             if ($isPseudoFocused || $isFocused)
-                return (0, longHandHelpers_1.borderColor)(theme.spr.interactive01);
+                return 'spr-border-quinary';
+            //todo theme-override-remains => disabled border is taken from input theme, i.e. theme.input.disabledBorderColor
             if ($disabled)
-                return (0, longHandHelpers_1.borderColor)(theme.input.disabledBorderColor);
-            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.field)), { ':hover': (0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.border06)) });
+                return 'spr-border-primary';
+            return 'spr-border-primary hover:spr-border-quaternary';
         }
         case 'success':
-            return (0, longHandHelpers_1.borderColor)(theme.spr.supportSuccess);
+            return 'spr-border-success';
         case 'warning':
-            return (0, longHandHelpers_1.borderColor)(theme.spr.supportWarning);
+            return 'spr-border-warning';
         case 'error':
-            return (0, longHandHelpers_1.borderColor)(theme.spr.supportError);
+            return 'spr-border-error';
     }
 };
 // Removing 'overrides' injected by baseweb
 var SelectArrow = function (_a) {
-    var $isOpen = _a.$isOpen, title = _a.title, overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["$isOpen", "title", "overrides"]);
-    return ((0, jsx_runtime_1.jsx)(chevron_down_1.default, (0, tslib_1.__assign)({ title: title, "$isOpen": $isOpen }, restProps, { className: [commonStyles_1.chevronStyles, 'ml-1 cursor-pointer', restProps === null || restProps === void 0 ? void 0 : restProps.className] }), void 0));
+    var $isOpen = _a.$isOpen, title = _a.title, overrides = _a.overrides, restProps = tslib_1.__rest(_a, ["$isOpen", "title", "overrides"]);
+    return ((0, jsx_runtime_1.jsx)(chevron_down_1.default, tslib_1.__assign({ title: title, "$isOpen": $isOpen }, restProps, { className: [
+            'transition-transform duration-200 cursor-pointer',
+            (restProps === null || restProps === void 0 ? void 0 : restProps.size) === 'small' || (restProps === null || restProps === void 0 ? void 0 : restProps.size) === 'medium' ? 'h-3 w-3 m-1.5' : 'h-2.5 w-2.5 ml-1',
+            $isOpen ? 'spr-icon-secondary rotate-180' : 'spr-icon-primary',
+            restProps === null || restProps === void 0 ? void 0 : restProps.className,
+        ] })));
 };
 exports.SelectArrow = SelectArrow;
-exports.getSearchIconContainerStyles = ['flex relative items-center top-0 left-0 h-auto mr-2'];
-var getSearchIconStyles = function (_a, _b) {
-    var theme = _a.theme;
-    var $isOpen = _b.$isOpen;
-    return ({
-        color: $isOpen ? theme.spr.interactive01 : 'currentColor',
-    });
+exports.getSearchIconContainerStyles = [
+    'flex relative items-center top-0 left-0 h-auto mr-2',
+    function (_, _a) {
+        var $disabled = _a.$disabled;
+        return ($disabled ? 'forced-colors:text-disabled' : '');
+    },
+];
+var getSearchIconStyles = function (_, _a) {
+    var $isOpen = _a.$isOpen;
+    return $isOpen ? 'spr-link' : 'text-current';
 };
 exports.getSearchIconStyles = getSearchIconStyles;
 exports.getControlContainerStyles = [
+    cvaConfigs_1.inputCVA,
+    function (_, _a) {
+        var $disabled = _a.$disabled;
+        return ($disabled ? 'spr-bg-secondary' : 'spr-bg-primary');
+    },
+    // @ts-ignore -- legacy theme support
     styled_components_1.getInputStyles,
-    // Applying paddingX only. paddingY will be applied on ValueContainer.
-    'py-0 transition-none overflow-auto',
+    cvaConfigs_2.controlContainerCVA,
     selectBorderColor,
-    commonStyles_1.transparentScrollbarStyles,
-    function (utils, props) {
-        var _a;
-        var $multi = props.$multi, $isEmpty = props.$isEmpty, $type = props.$type, $size = props.$size;
+    function (_a, _) {
+        var theme = _a.theme;
+        return (theme.density === 'COMPACT' ? 'py-px' : undefined);
+    },
+    //theme overrides
+    function (_, _a) {
+        var $isFocused = _a.$isFocused;
+        return ($isFocused ? 'forced-colors:border-highlight' : '');
+    },
+    // @ts-ignore -- legacy theme support
+    (function (utils, props) {
+        var _a, _b;
+        var $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;
+            ((_b = utils.theme.input) === null || _b === void 0 ? void 0 : _b.borderRadius);
         // Override paddingLeft for multiSelect when values are selected
+        return borderRadius
+            ? tslib_1.__assign({}, (0, longHandHelpers_1.borderRadius)(borderRadius)) : {};
+    }),
+    function (_, _a) {
+        var $multi = _a.$multi, $isEmpty = _a.$isEmpty, $type = _a.$type;
         var shouldOverridePaddingLeft = $multi && !$isEmpty && $type !== 'search';
-        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));
+        return shouldOverridePaddingLeft ? 'pl-0.5' : '';
     },
 ];
+var getValueContainerSpacingClassName = function (_, _a) {
+    var $multi = _a.$multi, $isEmpty = _a.$isEmpty, $size = _a.$size;
+    if (!$multi || $isEmpty) {
+        return '';
+    }
+    switch ($size) {
+        case 'xxxs':
+            return 'pl-0.5 py-px';
+        case 'xs':
+            return 'pl-1 py-0.5';
+        case 'sm':
+            return 'pl-1 py-1';
+        case 'md':
+        default:
+            return 'pl-1 py-1.5';
+        case 'lg':
+            return 'pl-1 py-1.5';
+        case 'small':
+            return 'pl-1.25 py-px';
+        case 'medium':
+            return 'pl-1.25 py-1.25';
+    }
+};
 exports.getValueContainerStyles = [
+    cvaConfigs_1.inputCVA,
     // For single Select read theme values from theme.input, form multiSelect read theme values from theme.multiSelect
+    // @ts-ignore -- legacy theme support
     styled_components_1.getInputStyles,
-    // Applying paddingY only. paddingX will be applied on ControlContainer.
     'px-0 self-start',
-    function (_a, _b) {
+    getValueContainerSpacingClassName,
+    function (_a, _) {
+        var theme = _a.theme;
+        return (theme.density === 'COMPACT' ? 'py-1' : undefined);
+    },
+    // @ts-ignore -- legacy theme support
+    (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, (0, themeHelpers_1.getDefaultSize)(theme));
-        return $multi && !$isEmpty
-            ? {
-                paddingTop: multiSelectTheme.paddingY,
-                paddingBottom: multiSelectTheme.paddingY,
-                paddingLeft: multiSelectTheme.paddingX,
-            }
-            : {};
+        return $multi && !$isEmpty && multiSelectTheme
+            ? tslib_1.__assign(tslib_1.__assign({}, (multiSelectTheme.paddingY
+                ? { paddingBlockStart: multiSelectTheme.paddingY, paddingBlockEnd: multiSelectTheme.paddingY }
+                : {})), (multiSelectTheme.paddingX ? { paddingInlineStart: multiSelectTheme.paddingX } : {})) : {};
+    }),
+];
+exports.getValueTypography = [
+    function (_, _a) {
+        var $selectSize = _a.$selectSize;
+        if ($selectSize === 'small' || $selectSize === 'medium')
+            return 'text-14 leading-150';
+        if ($selectSize === 'xxxs')
+            return 'text-13 leading-4';
+        return 'text-14 leading-4.5';
+    },
+    // @ts-ignore -- legacy theme support
+    (function (_a, _b) {
+        var theme = _a.theme;
+        var $selectSize = _b.$selectSize;
+        var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, (0, themeHelpers_1.getDefaultSize)(theme));
+        return inputSizeTheme
+            ? tslib_1.__assign(tslib_1.__assign({}, ((inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.fontSize) ? { fontSize: inputSizeTheme.fontSize } : {})), ((inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight)
+                ? { lineHeight: inputSizeTheme.lineHeight, height: inputSizeTheme.lineHeight }
+                : {})) : {};
+    }),
+    function (_, _a) {
+        var $disabled = _a.$disabled;
+        return ($disabled ? 'forced-colors:text-disabled' : '');
     },
 ];
-var getValueTypography = function (_a, _b) {
-    var theme = _a.theme;
-    var $selectSize = _b.$selectSize;
-    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;
 // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
 var OverlaySelectPopoverOverride = function (_a) {
-    var content = _a.content, inputContainer = _a.children, setStickySentinelRef = _a.setStickySentinelRef;
-    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));
+    var content = _a.content, inputContainer = _a.children, closePopover = _a.closePopover, setStickySentinelRef = _a.setStickySentinelRef;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setStickySentinelRef }), inputContainer, typeof content === 'function' ? content({ closeMenu: closePopover }) : content] }));
 };
 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));
+    var defaultHeightClass = $selectSize === 'xxxs' ? 'h-4' : 'h-4.5';
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, (0, themeHelpers_1.getDefaultSize)(theme));
+    return ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "single-value-tombstone", className: [
+            "w-24 rounded-8 ".concat(defaultHeightClass),
+            //@ts-ignore -- theme override
+            (inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight) ? { height: inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight } : {},
+        ] }));
 };
 exports.SingleValueTombstone = SingleValueTombstone;
 exports.selectMenuOverrides = {
@@ -106,12 +182,17 @@ exports.selectMenuOverrides = {
             overrides: {
                 List: {
                     props: {
+                        className: function (_a, _) {
+                            var theme = _a.theme;
+                            return (theme.density === 'COMPACT' ? 'py-1' : undefined);
+                        },
                         overrides: {
                             Root: {
-                                style: function (_, _a) {
+                                className: 'overflow-auto max-h-[--sw-max-height]',
+                                style: (function (_, _a) {
                                     var $maxHeight = _a.$maxHeight;
-                                    return ({ maxHeight: $maxHeight, overflow: 'auto' });
-                                },
+                                    return ({ '--sw-max-height': $maxHeight });
+                                }),
                             },
                         },
                     },
@@ -126,9 +207,10 @@ exports.selectMenuOverrides = {
                     props: {
                         overrides: {
                             Root: {
-                                style: {
-                                    wordBreak: 'break-word',
-                                },
+                                className: ['break-words', function (_a, _) {
+                                        var theme = _a.theme;
+                                        return (theme.density === 'COMPACT' ? 'py-0.5' : undefined);
+                                    }],
                             },
                         },
                     },

package/select/select-variants.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SingleSelect = exports.MultiSelect = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var select_1 = (0, tslib_1.__importDefault)(require("./select"));
+var select_1 = tslib_1.__importDefault(require("./select"));
 function MultiSelect(props) {
-    return (0, jsx_runtime_1.jsx)(select_1.default, (0, tslib_1.__assign)({}, props, { filterOptions: props.filterOptions, multi: true }), void 0);
+    return (0, jsx_runtime_1.jsx)(select_1.default, tslib_1.__assign({}, props, { filterOptions: props.filterOptions, multi: true }));
 }
 exports.MultiSelect = MultiSelect;
 function SingleSelect(props) {
-    return (0, jsx_runtime_1.jsx)(select_1.default, (0, tslib_1.__assign)({}, props, { filterOptions: props.filterOptions, multi: false }), void 0);
+    return (0, jsx_runtime_1.jsx)(select_1.default, tslib_1.__assign({}, props, { filterOptions: props.filterOptions, multi: false }));
 }
 exports.SingleSelect = SingleSelect;

package/select/select.d.ts

@@ -1,12 +1,11 @@
-import { SelectProps } from './types';
 import defaultProps from './default-props';
+import type { SelectProps } from './types';
 declare const Select: {
-    (props: SelectProps & typeof defaultProps): React.ReactElement;
+    (props: SelectProps & Omit<typeof defaultProps, 'value'>): React.ReactElement;
     defaultProps: {
         autoFocus: boolean;
         backspaceRemoves: boolean;
         clearable: boolean;
-        closeOnSelect: boolean;
         creatable: boolean;
         deleteRemoves: boolean;
         disabled: boolean;
@@ -16,6 +15,7 @@ declare const Select: {
         filterOptions: ((options: import("./types").Value, filterValue: string, excludeOptions: import("./types").Value | null | undefined, a: {
             valueKey: string;
             labelKey: string;
+            filterOnlyCreated?: boolean | undefined;
         }) => import("./types").Value) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
@@ -41,6 +41,7 @@ declare const Select: {
         placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         virtual: boolean;
         popoverMinWidth: string;
+        expandLimitTagsOnFocus: boolean;
     };
 };
 export default Select;