@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/esm/select/nested-select.d.ts

@@ -0,0 +1,92 @@
+import type { ReactElement } from 'react';
+import defaultProps from './default-props';
+import type { SelectProps, NestedSelectOptions } from './types';
+import type { SimpleUnionOmit } from '../type-utils';
+declare const NestedSelect: {
+    ({ options: allOptions, ...props }: SimpleUnionOmit<SelectProps, "options"> & Omit<{
+        autoFocus: boolean;
+        backspaceRemoves: boolean;
+        clearable: boolean;
+        creatable: boolean;
+        deleteRemoves: boolean;
+        disabled: boolean;
+        error: boolean;
+        positive: boolean;
+        escapeClearsValue: boolean;
+        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;
+        labelKey: string;
+        maxDropdownHeight: string;
+        multi: boolean;
+        onBlur: (...args: any[]) => void;
+        onBlurResetsInput: boolean;
+        onChange: (...args: any[]) => void;
+        onFocus: (...args: any[]) => void;
+        onInputChange: (...args: any[]) => void;
+        onCloseResetsInput: boolean;
+        onSelectResetsInput: boolean;
+        openOnClick: boolean;
+        startOpen: boolean;
+        options: import("./types").Options;
+        overrides: {};
+        required: boolean;
+        searchable: boolean;
+        type: "overlay" | import("./types").Type | "mobile";
+        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;
+        expandLimitTagsOnFocus: boolean;
+    }, "value" | "options"> & {
+        options: NestedSelectOptions;
+    }): ReactElement;
+    displayName: string;
+    defaultProps: {
+        autoFocus: boolean;
+        backspaceRemoves: boolean;
+        clearable: boolean;
+        creatable: boolean;
+        deleteRemoves: boolean;
+        disabled: boolean;
+        error: boolean;
+        positive: boolean;
+        escapeClearsValue: boolean;
+        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;
+        labelKey: string;
+        maxDropdownHeight: string;
+        multi: boolean;
+        onBlur: (...args: any[]) => void;
+        onBlurResetsInput: boolean;
+        onChange: (...args: any[]) => void;
+        onFocus: (...args: any[]) => void;
+        onInputChange: (...args: any[]) => void;
+        onCloseResetsInput: boolean;
+        onSelectResetsInput: boolean;
+        openOnClick: boolean;
+        startOpen: boolean;
+        options: import("./types").Options;
+        overrides: {};
+        required: boolean;
+        searchable: boolean;
+        type: "overlay" | import("./types").Type | "mobile";
+        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;
+        expandLimitTagsOnFocus: boolean;
+    };
+};
+export { NestedSelect };

package/esm/select/nested-select.js

@@ -0,0 +1,76 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+//libs
+import { useCallback, useMemo, useRef, useState } from 'react';
+//helpers
+import defaultProps from './default-props';
+import { mergeOverrides } from '../overrides';
+import { combineRefs } from '../hooks/useCombinedRef';
+import { findParentAndChildren } from '../menu/helpers';
+//components
+import Select from './select';
+import NestedSelectMenuAdapter from './selectMenuAdapter/NestedSelectMenuAdapter';
+var NestedSelect = function (_a) {
+    var allOptions = _a.options, props = __rest(_a, ["options"]);
+    var inputRef = useRef(null);
+    var drillInFocusVisibleRef = useRef(null);
+    var _b = __read(useState(undefined), 2), currentParent = _b[0], setCurrentParent = _b[1];
+    var _c = useMemo(function () {
+        if (!currentParent) {
+            return { options: allOptions, grandParent: undefined, currentHeaderItem: undefined };
+        }
+        var results = findParentAndChildren(currentParent[props.valueKey], allOptions, props.valueKey, undefined);
+        if (!results) {
+            return { options: allOptions, grandParent: undefined, currentHeaderItem: undefined };
+        }
+        var _a = __read(results, 2), nestedOptions = _a[0], parent = _a[1];
+        return {
+            options: nestedOptions,
+            grandParent: parent,
+            currentHeaderItem: currentParent,
+        };
+    }, [allOptions, currentParent, props.valueKey]), options = _c.options, grandParent = _c.grandParent, currentHeaderItem = _c.currentHeaderItem;
+    var handleHeaderItemChange = useCallback(function (newParentItem) {
+        setCurrentParent(newParentItem);
+    }, []);
+    var nestedSelectOverrides = useMemo(function () {
+        return mergeOverrides({
+            StatefulMenu: {
+                component: NestedSelectMenuAdapter,
+                props: {
+                    overrides: {
+                        SubMenu: {
+                            props: {
+                                currentHeaderItem: currentHeaderItem,
+                                onHeaderItemClick: function () { return handleHeaderItemChange(grandParent); },
+                                drillInFocusVisibleRef: drillInFocusVisibleRef,
+                                onItemSelect: function (item, event) {
+                                    if (item.nestedItems) {
+                                        drillInFocusVisibleRef.current = event != null && !event.isTrusted ? true : null;
+                                        handleHeaderItemChange(item);
+                                        setTimeout(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+                                    }
+                                },
+                                overrides: {
+                                    MenuItem: {
+                                        props: {
+                                            onClick: function (event) {
+                                                setTimeout(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+                                                // stopping propagation to make sure select dropdown doesn't close on back row click.
+                                                event.stopPropagation();
+                                            },
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        }, props.overrides);
+    }, [handleHeaderItemChange, currentHeaderItem, grandParent, props.overrides]);
+    return (_jsx(Select, __assign({}, props, { options: options, overrides: nestedSelectOverrides, inputRef: combineRefs(inputRef, props.inputRef), hideSelectAll: true })));
+};
+NestedSelect.displayName = 'NestedSelect';
+NestedSelect.defaultProps = defaultProps;
+export { NestedSelect };

package/esm/select/no-results-message.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent, ReactElement } from 'react';
+import { IconProps } from '../icon';
+export type NoResultsMessageProps = {
+    id?: string;
+    titleMessage: string;
+    description?: string;
+    Icon?: (props: IconProps) => ReactElement;
+} & ({
+    onButtonClick?: undefined;
+    buttonText?: undefined;
+} | {
+    onButtonClick: (event: MouseEvent<HTMLElement>) => any;
+    buttonText: string;
+});
+export declare const NoResultsMessage: ({ titleMessage, description, buttonText, id, Icon, onButtonClick, }: NoResultsMessageProps) => import("react/jsx-runtime").JSX.Element;

package/esm/select/no-results-message.js

@@ -0,0 +1,12 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../box';
+import { Stack, StackItem } from '../stack';
+import { Typography } from '../typography';
+import { Button } from '../button';
+//icons
+import FormIcon from '../icon/components/form';
+export var NoResultsMessage = function (_a) {
+    var titleMessage = _a.titleMessage, description = _a.description, buttonText = _a.buttonText, id = _a.id, _b = _a.Icon, Icon = _b === void 0 ? FormIcon : _b, onButtonClick = _a.onButtonClick;
+    return (_jsx(Box, __assign({ className: "px-1 py-1.5 cursor-auto" }, { children: _jsxs(Stack, __assign({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [_jsx(StackItem, __assign({ className: "flex self-start flex-none items-center justify-center rounded-full h-12 w-12 spr-bg-secondary" }, { children: _jsx(Icon, { size: 24 }) })), _jsxs(Stack, __assign({ direction: "vertical", gap: 3 }, { children: [_jsxs(Stack, __assign({ direction: "vertical", gap: 1, id: id }, { children: [_jsx(Typography, __assign({ variant: "body-md", weight: "semibold", maxLines: 1 }, { children: titleMessage })), description && _jsx(Typography, __assign({ variant: "body-sm" }, { children: description }))] })), onButtonClick ? (_jsx(Button, __assign({ variant: "tertiary", size: "medium", onClick: onButtonClick }, { children: buttonText }))) : null] }))] })) })));
+};

package/esm/select/overlaySelect/OverlaySelect.d.ts

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

package/esm/select/overlaySelect/OverlaySelect.js

@@ -36,7 +36,12 @@ var propsToOmit = [
     'ignoreBoundary',
     'scrollContainer',
     'options',
+    'startEnhancer',
+    'endEnhancer',
+    'startEnhancerButtonProps',
+    'endEnhancerButtonProps',
 ];
+var DEFAULT_OVERLAY_WIDTH = '300px';
 var OverlaySelect = function (props) {
     var _a, _b, _c;
     var _d = __read(useOverrides((_a = props.overrides) === null || _a === void 0 ? void 0 : _a.OverlayContentContainer, StyledOverlayContentContainer), 2), OverlayContentContainer = _d[0], overlayContentContainerProps = _d[1];
@@ -70,15 +75,13 @@ var OverlaySelect = function (props) {
             }
         });
     }); }, [propCreateOption, props.labelKey, props.valueKey]);
-    var allOptions = useMemo(function () {
-        return mergeOptions(props.valueKey || defaultProps.valueKey, props.options, createdOptionsRef.current);
-    }, [props.valueKey, props.options]);
+    var allOptions = useMemo(function () { return mergeOptions(props.valueKey || defaultProps.valueKey, props.options, createdOptionsRef.current); }, [props.valueKey, props.options]);
     if (props.disabled) {
         if (typeof props.children === 'function') {
-            return _jsx(_Fragment, { children: props.children({ isOpen: false }) }, void 0);
+            return _jsx(_Fragment, { children: props.children({ isOpen: false }) });
         }
-        return _jsx(_Fragment, { children: props.children }, void 0);
+        return _jsx(_Fragment, { children: props.children });
     }
-    return (_jsx(PopoverOverriden, __assign({ isOpen: popoverOpen, content: _jsx(OverlayContentContainer, __assign({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef }, { children: _jsx(BaseSelect, __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));
+    return (_jsx(PopoverOverriden, __assign({ isOpen: popoverOpen, content: _jsx(OverlayContentContainer, __assign({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef, style: [{ '--sw-width': props.overlayWidth || DEFAULT_OVERLAY_WIDTH }, overlayContentContainerProps.style] }, { children: _jsx(BaseSelect, __assign({}, baseSelectProps, { createOption: createOption, onChange: handleValuesChange, overrides: overrides, __inputValue: __inputValue, type: "search", options: allOptions })) })), onClick: togglePopoverState, onClickOutside: closePopover, onEsc: closePopover, placement: (_c = props.placement) !== null && _c !== void 0 ? _c : 'bottom', focusLock: true, returnFocus: true, overrides: { Inner: { className: 'spr-ui-01' }, Arrow: { className: 'spr-ui-01' } }, mountNode: props.mountNode, ignoreBoundary: props.ignoreBoundary }, popoverProps, { children: props.children })));
 };
 export default OverlaySelect;

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

@@ -1,5 +1,5 @@
 import { ControlRef } from '../../../baseui/select';
-declare type Params = {
+type Params = {
     openPopover: () => void;
     closePopover: () => void;
     inputElement: HTMLInputElement | HTMLDivElement | null;

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

@@ -1,11 +1,7 @@
-import * as React from 'react';
-import { OnChangeParams, OverlaySelectProps } from '../../types';
-declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "children" | "type" | "overlayWidth" | "scrollContainer"> & {
+import type { OnChangeParams, OverlaySelectProps } from '../../types';
+declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "type" | "overlayWidth" | "scrollContainer"> & {
     type: "overlay";
     overlayWidth?: string | undefined;
-    children: React.ReactNode | ((args: {
-        isOpen: boolean;
-    }) => React.ReactNode);
     scrollContainer?: "overlayContainer" | "menuContainer" | undefined;
 } & {
     scrollElement: HTMLElement | null;

package/esm/select/overlaySelect/hooks/useOverlaySelectOverrides.js

@@ -1,10 +1,9 @@
 import { __assign, __read } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import _omit from 'lodash/omit';
-import _noop from 'lodash/noop';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSelectIds } from '../../SelectIdsContext';
 import { Box } from '../../../box';
-import { borderRadius } from '../../../helpers/longHandHelpers';
 import { Loader } from '../../../loader';
 import { mergeOverrides } from '../../../overrides';
 import { Search } from '../../../search';
@@ -13,6 +12,7 @@ import usePopover from './usePopover';
 import useStickyElement from '../../../hooks/useStickyElement';
 import useUpdateEffect from '../../../hooks/useUpdateEffect';
 import { useControlRef } from './useControlRef';
+import { getFirstHighlightableElement } from '../../../menu/helpers';
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
     var _b = __read(useState(null), 2), inputElement = _b[0], setInputElement = _b[1];
@@ -39,7 +39,7 @@ var useAutoFocus = function (_a) {
     return [inputElement, setInputElement];
 };
 function SelectLoader() {
-    return (_jsx(Box, __assign({ className: ['flex items-center px-3'] }, { children: _jsx(Loader, { size: 14, variant: "clip" }, void 0) }), void 0));
+    return (_jsx(Box, __assign({ className: ['flex items-center px-3'] }, { children: _jsx(Loader, { size: 14, variant: "clip" }) })));
 }
 var useSearchContainerHeight = function () {
     var _a = __read(useState(), 2), containerHeight = _a[0], setHeight = _a[1];
@@ -51,25 +51,63 @@ var useSearchContainerHeight = function () {
     }, [containerElement, setHeight]);
     return { setContainerElement: setContainerElement, containerHeight: containerHeight };
 };
+var OverlaySelectControlContainer = function (props) {
+    var listboxId = useSelectIds().listboxId;
+    var isOpen = props.$isOpen || props['aria-expanded'];
+    var ariaControls = listboxId && isOpen ? listboxId : undefined;
+    return _jsx(Search, __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 = __read(useState(''), 2), inputValue = _c[0], setInputValue = _c[1];
-    var _d = usePopover(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 = __read(useState(''), 2), inputValue = _d[0], setInputValue = _d[1];
+    var _e = usePopover(props), popoverOpen = _e.popoverOpen, togglePopoverState = _e.togglePopoverState, closePopover = _e.closePopover, openPopover = _e.openPopover;
+    var _f = __read(useState(null), 2), menuRef = _f[0], setMenuRef = _f[1];
+    var listNavigationEnabledRef = useRef(false);
     useUpdateEffect(function () {
         if (!popoverOpen && onCloseResetsInput) {
             setInputValue('');
         }
     }, [onCloseResetsInput, popoverOpen]);
-    var _e = __read(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _e[0], setInputElement = _e[1];
+    useUpdateEffect(function () {
+        if (!popoverOpen) {
+            listNavigationEnabledRef.current = false;
+        }
+    }, [popoverOpen]);
+    var _g = __read(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _g[0], setInputElement = _g[1];
     useControlRef(controlRef, { closePopover: closePopover, openPopover: openPopover, setInputValue: setInputValue, inputElement: inputElement });
     var handleInputChange = useCallback(function (e) {
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
         setInputValue(e.target.value);
     }, [onInputChange]);
+    var onBlur = 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 = 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 = 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 = 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 = useCallback(function () {
@@ -87,18 +125,22 @@ var useOverlaySelectOverrides = function (props) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(params);
     }, [closePopover, onChange, closeOnSelect]);
-    var _f = useStickyElement(), isSticky = _f.isSticky, setStickySentinelRef = _f.setStickySentinelRef;
-    var _g = useSearchContainerHeight(), containerHeight = _g.containerHeight, setContainerElement = _g.setContainerElement;
+    var _h = useStickyElement(), isSticky = _h.isSticky, setStickySentinelRef = _h.setStickySentinelRef;
+    var _j = useSearchContainerHeight(), containerHeight = _j.containerHeight, setContainerElement = _j.setContainerElement;
     var memoizedOverrides = useMemo(function () { return ({
         // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
         Popover: {
             component: OverlaySelectPopoverOverride,
             props: {
                 setStickySentinelRef: setStickySentinelRef,
+                closePopover: closePopover,
             },
         },
+        DropdownContainer: {
+            className: 'w-auto',
+        },
         ControlContainer: {
-            component: Search,
+            component: OverlaySelectControlContainer,
             props: {
                 value: inputValue,
                 onChange: handleInputChange,
@@ -106,6 +148,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: {
@@ -115,39 +162,43 @@ var useOverlaySelectOverrides = function (props) {
                     },
                 },
                 // override baseui's onKeyDown
-                onKeyDown: _noop,
+                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: __assign({ overrides: {
                                 Root: {
-                                    style: __assign(__assign(__assign({}, (searchable ? { paddingTop: 0 } : {})), 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 })),
                     },
                 },
             },
@@ -168,7 +219,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,
@@ -184,8 +237,11 @@ var useOverlaySelectOverrides = function (props) {
         clearable,
         onFocus,
         onBlur,
+        onKeyDown,
+        inputElement,
         scrollContainer,
         scrollElement,
+        popoverOpen,
     ]);
     var overrides = useMemo(function () { return mergeOverrides(memoizedOverrides, _omit(props.overrides, overridesToOmit)); }, [memoizedOverrides, props.overrides]);
     return {

package/esm/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];
                             };
                         };
                     };