@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/select/overlaySelect/OverlaySelect.js

@@ -1,12 +1,12 @@
 import { __assign, __read } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useState } from 'react';
 import _omit from 'lodash/omit';
 import { useOverrides } from '../../overrides';
 import { Popover } from '../../popover';
 import BaseSelect from '../base-select';
 import { StyledOverlayContentContainer } from '../styled-component';
-import useOverlaySelectOverrides from './useOverlaySelectOverrides';
+import useOverlaySelectOverrides from './hooks/useOverlaySelectOverrides';
 import useScrollCapture from '../../hooks/useScrollCapture';
 import useCombinedRefs from '../../hooks/useCombinedRef';
 // These props are handled by OverlaySelect itself and hence should not be passed to BaseSelect
@@ -17,6 +17,7 @@ var propsToOmit = [
     'onChange',
     'startOpen',
     'searchable',
+    'inputRef',
     'controlRef',
     'autoFocus',
     'placeholder',
@@ -30,26 +31,17 @@ var propsToOmit = [
     'captureScroll',
     'placement',
     'methodsRef',
+    'ignoreBoundary',
+    'scrollContainer',
 ];
 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];
-    var _e = __read(useOverrides((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, Popover), 2), PopoverOverriden = _e[0], popoverProps = _e[1];
+    var _e = __read(useState(null), 2), scrollElement = _e[0], setScrollElement = _e[1];
+    var _f = __read(useOverrides((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, Popover), 2), PopoverOverriden = _f[0], popoverProps = _f[1];
     var setScrollTarget = useScrollCapture({ enabled: props.captureScroll });
-    var combinedRef = useCombinedRefs(setScrollTarget, overlayContentContainerProps === null || overlayContentContainerProps === void 0 ? void 0 : overlayContentContainerProps.ref);
-    var _f = useOverlaySelectOverrides(props), popoverOpen = _f.popoverOpen, filterOptionsOverride = _f.filterOptionsOverride, handleValuesChange = _f.handleValuesChange, overrides = _f.overrides, togglePopoverState = _f.togglePopoverState, closePopover = _f.closePopover, openPopover = _f.openPopover;
-    useEffect(function () {
-        if (props.methodsRef) {
-            props.methodsRef.current = {
-                setDropdownOpen: function (shouldOpen) {
-                    if (shouldOpen)
-                        openPopover();
-                    else
-                        closePopover();
-                },
-            };
-        }
-    }, [openPopover, closePopover]);
+    var combinedRef = useCombinedRefs(setScrollElement, setScrollTarget, overlayContentContainerProps === null || overlayContentContainerProps === void 0 ? void 0 : overlayContentContainerProps.ref);
+    var _g = useOverlaySelectOverrides(__assign(__assign({}, props), { scrollElement: scrollElement })), popoverOpen = _g.popoverOpen, filterOptionsOverride = _g.filterOptionsOverride, handleValuesChange = _g.handleValuesChange, overrides = _g.overrides, togglePopoverState = _g.togglePopoverState, closePopover = _g.closePopover;
     var baseSelectProps = _omit(props, propsToOmit);
     if (props.disabled) {
         if (typeof props.children === 'function') {
@@ -57,6 +49,6 @@ var OverlaySelect = function (props) {
         }
         return 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, { filterOptions: filterOptionsOverride, onChange: handleValuesChange, overrides: overrides, type: "search" }), void 0) }), void 0), onClick: togglePopoverState, onClickOutside: closePopover, onEsc: closePopover, placement: (_c = props.placement) !== null && _c !== void 0 ? _c : 'bottom', focusLock: true, returnFocus: true, overrides: { Inner: { style: 'spr-ui-01' }, Arrow: { style: 'spr-ui-01' } }, mountNode: props.mountNode }, popoverProps, { children: props.children }), void 0));
+    return (_jsx(PopoverOverriden, __assign({ isOpen: popoverOpen, content: _jsx(OverlayContentContainer, __assign({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef }, { children: _jsx(BaseSelect, __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));
 };
 export default OverlaySelect;

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

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

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

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+export var useControlRef = function (controlRef, _a) {
+    var openPopover = _a.openPopover, closePopover = _a.closePopover, inputElement = _a.inputElement, setInputValue = _a.setInputValue;
+    useEffect(function () {
+        if (!controlRef) {
+            return undefined;
+        }
+        controlRef.current = {
+            setDropdownOpen: function (shouldOpen) {
+                if (shouldOpen)
+                    openPopover();
+                else
+                    closePopover();
+            },
+            setInputValue: setInputValue,
+            blur: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.blur();
+            },
+            focus: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus();
+            },
+            setInputBlur: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.blur();
+            },
+            setInputFocus: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus();
+            },
+        };
+        return function () {
+            controlRef.current = null;
+        };
+    }, [openPopover, closePopover, controlRef, setInputValue, inputElement]);
+};

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

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

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

@@ -3,16 +3,16 @@ 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 { Box } from '../../box';
-import { borderRadius } from '../../helpers/longHandHelpers';
-import { Loader } from '../../loader';
-import { mergeOverrides } from '../../overrides';
-import { Search } from '../../search';
-import { useStyle } from '../../style';
-import { OverlaySelectPopoverOverride } from '../overrides';
+import { Box } from '../../../box';
+import { borderRadius } from '../../../helpers/longHandHelpers';
+import { Loader } from '../../../loader';
+import { mergeOverrides } from '../../../overrides';
+import { Search } from '../../../search';
+import { OverlaySelectPopoverOverride } from '../../overrides';
 import usePopover from './usePopover';
-import useStickyElement from '../../hooks/useStickyElement';
-import useUpdateEffect from '../../hooks/useUpdateEffect';
+import useStickyElement from '../../../hooks/useStickyElement';
+import useUpdateEffect from '../../../hooks/useUpdateEffect';
+import { useControlRef } from './useControlRef';
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
     var _b = __read(useState(null), 2), inputElement = _b[0], setInputElement = _b[1];
@@ -28,12 +28,18 @@ var useAutoFocus = function (_a) {
              */
             inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus({ preventScroll: true });
         }
+        return function () {
+            if (inputRef) {
+                typeof inputRef === 'function'
+                    ? inputRef(null)
+                    : (inputRef.current = null);
+            }
+        };
     }, [autoFocus, inputElement, inputRef]);
     return [inputElement, setInputElement];
 };
 function SelectLoader() {
-    var direction = useStyle().direction;
-    return (_jsx(Box, __assign({ className: ['flex items-center pl-3', direction !== 'rtl' ? 'pr-3' : 'pl-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" }, void 0) }), void 0));
 }
 var useSearchContainerHeight = function () {
     var _a = __read(useState(), 2), containerHeight = _a[0], setHeight = _a[1];
@@ -50,15 +56,16 @@ var useSearchContainerHeight = function () {
  */
 var overridesToOmit = ['SelectContainer', 'Popover'];
 var useOverlaySelectOverrides = function (props) {
-    var closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, controlRef = props.controlRef, filterOptions = props.filterOptions, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _a = props.clearable, clearable = _a === void 0 ? true : _a, onFocus = props.onFocus, onBlur = props.onBlur, onCloseResetsInput = props.onCloseResetsInput;
-    var _b = __read(useState(''), 2), inputValue = _b[0], setInputValue = _b[1];
-    var _c = usePopover(props), popoverOpen = _c.popoverOpen, togglePopoverState = _c.togglePopoverState, closePopover = _c.closePopover, openPopover = _c.openPopover;
+    var closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, inputRef = props.inputRef, filterOptions = props.filterOptions, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _a = props.clearable, clearable = _a === void 0 ? true : _a, onFocus = props.onFocus, onBlur = props.onBlur, onCloseResetsInput = props.onCloseResetsInput, controlRef = props.controlRef, scrollElement = props.scrollElement, _b = props.scrollContainer, scrollContainer = _b === void 0 ? 'overlayContainer' : _b;
+    var _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;
     useUpdateEffect(function () {
         if (!popoverOpen && onCloseResetsInput) {
             setInputValue('');
         }
     }, [onCloseResetsInput, popoverOpen]);
-    var _d = __read(useAutoFocus({ autoFocus: autoFocus, inputRef: controlRef }), 2), inputElement = _d[0], setInputElement = _d[1];
+    var _e = __read(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _e[0], setInputElement = _e[1];
+    useControlRef(controlRef, { closePopover: closePopover, openPopover: openPopover, setInputValue: setInputValue, inputElement: inputElement });
     var filterOptionsOverride = useCallback(function (options, _, excludeOptions, params) {
         if (filterOptions) {
             return filterOptions(options, inputValue, excludeOptions, params);
@@ -86,8 +93,8 @@ var useOverlaySelectOverrides = function (props) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(params);
     }, [closePopover, onChange, closeOnSelect]);
-    var _e = useStickyElement(), isSticky = _e.isSticky, setStickySentinelRef = _e.setStickySentinelRef;
-    var _f = useSearchContainerHeight(), containerHeight = _f.containerHeight, setContainerElement = _f.setContainerElement;
+    var _f = useStickyElement(), isSticky = _f.isSticky, setStickySentinelRef = _f.setStickySentinelRef;
+    var _g = useSearchContainerHeight(), containerHeight = _g.containerHeight, setContainerElement = _g.setContainerElement;
     var memoizedOverrides = useMemo(function () { return ({
         // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
         Popover: {
@@ -104,7 +111,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: {
@@ -113,7 +120,6 @@ var useOverlaySelectOverrides = function (props) {
                         },
                     },
                 },
-                autoFocus: true,
                 // override baseui's onKeyDown
                 onKeyDown: _noop,
                 clearable: clearable,
@@ -143,13 +149,11 @@ var useOverlaySelectOverrides = function (props) {
             props: {
                 overrides: {
                     List: {
-                        props: {
-                            overrides: {
+                        props: __assign({ overrides: {
                                 Root: {
-                                    style: __assign(__assign(__assign({}, (searchable ? { paddingTop: 0 } : {})), borderRadius(0)), { overflow: 'visible' }),
+                                    style: __assign(__assign(__assign({}, (searchable ? { paddingTop: 0 } : {})), borderRadius(0)), (scrollContainer === 'menuContainer' ? {} : { overflow: 'visible' })),
                                 },
-                            },
-                        },
+                            } }, (scrollContainer === 'menuContainer' ? {} : { scrollElement: scrollElement })),
                     },
                 },
             },
@@ -186,11 +190,10 @@ var useOverlaySelectOverrides = function (props) {
         clearable,
         onFocus,
         onBlur,
+        scrollContainer,
+        scrollElement,
     ]);
-    var overrides = useMemo(function () { return mergeOverrides(memoizedOverrides, _omit(props.overrides, overridesToOmit)); }, [
-        memoizedOverrides,
-        props.overrides,
-    ]);
+    var overrides = useMemo(function () { return mergeOverrides(memoizedOverrides, _omit(props.overrides, overridesToOmit)); }, [memoizedOverrides, props.overrides]);
     return {
         overrides: overrides,
         filterOptionsOverride: filterOptionsOverride,

package/esm/select/overlaySelect/{usePopover.d.ts → hooks/usePopover.d.ts}

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

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

@@ -1,7 +1,7 @@
 import { __read } from "tslib";
 import { useCallback, useEffect, useState } from 'react';
-import { useLatest } from '../../hooks/useLatest';
-import { useFirstMountState } from '../../hooks/useFirstMountState';
+import { useLatest } from '../../../hooks/useLatest';
+import { useFirstMountState } from '../../../hooks/useFirstMountState';
 var usePopover = function (_a) {
     var startOpen = _a.startOpen, onOpen = _a.onOpen, onClose = _a.onClose;
     var isFirstMount = useFirstMountState();

package/esm/select/overrides.d.ts

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

package/esm/select/overrides.js

@@ -1,10 +1,13 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { chevronStyles, transparentScrollbarStyles } from '../helpers/commonStyles';
-import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 import ChevronDown from '../icon/components/chevron-down';
 import { borderColor, borderWidth } from '../helpers/longHandHelpers';
 import { getInputStyles } from '../input/styled-components';
+import { StyledTombstone } from '../helpers/StyledTombstone';
+import { useStyle } from '../style';
+import { borderRadius as borderRadiusLongHandHelper } from '../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;
@@ -41,14 +44,17 @@ export var getSearchIconStyles = function (_a, _b) {
 export var getControlContainerStyles = [
     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,
     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 = getComponentSizeTheme(utils.theme, 'input', $size, 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 __assign(__assign(__assign({}, borderWidth(utils.theme.borderWidth.default)), (shouldOverridePaddingLeft && { paddingLeft: utils.px2rem(2) })), { maxHeight: '120px' });
+        return __assign(__assign(__assign(__assign({}, borderWidth(utils.theme.borderWidth.default)), (shouldOverridePaddingLeft && { paddingLeft: utils.px2rem(2) })), { maxHeight: '120px' }), borderRadiusLongHandHelper(borderRadius));
     },
 ];
 export var getValueContainerStyles = [
@@ -59,11 +65,12 @@ export var getValueContainerStyles = [
     function (_a, _b) {
         var theme = _a.theme;
         var $multi = _b.$multi, $isEmpty = _b.$isEmpty, $size = _b.$size;
-        var multiSelectTheme = getComponentSizeTheme(theme, 'multiSelect', $size, 'lg');
+        var multiSelectTheme = getComponentSizeTheme(theme, 'multiSelect', $size, getDefaultSize(theme));
         return $multi && !$isEmpty
             ? {
                 paddingTop: multiSelectTheme.paddingY,
                 paddingBottom: multiSelectTheme.paddingY,
+                paddingLeft: multiSelectTheme.paddingX,
             }
             : {};
     },
@@ -71,21 +78,20 @@ export var getValueContainerStyles = [
 export var getValueTypography = function (_a, _b) {
     var theme = _a.theme;
     var $selectSize = _b.$selectSize;
-    var _c = getComponentSizeTheme(theme, 'input', $selectSize, 'lg'), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
+    var _c = getComponentSizeTheme(theme, 'input', $selectSize, getDefaultSize(theme)), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
     return { fontSize: fontSize, lineHeight: lineHeight, height: lineHeight };
 };
-export var getSelectInputStyles = function () { return ({
-    color: 'inherit',
-    lineHeight: 'inherit',
-    fontSize: 'inherit',
-    fontWeight: 'inherit',
-    letterSpacing: 'normal',
-}); };
 // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
 export var OverlaySelectPopoverOverride = function (_a) {
     var content = _a.content, inputContainer = _a.children, setStickySentinelRef = _a.setStickySentinelRef;
     return (_jsxs(_Fragment, { children: [_jsx("div", { ref: setStickySentinelRef }, void 0), inputContainer, typeof content === 'function' ? content() : content] }, void 0));
 };
+export var SingleValueTombstone = function (_a) {
+    var $selectSize = _a.$selectSize;
+    var theme = useStyle().theme;
+    var lineHeight = getComponentSizeTheme(theme, 'input', $selectSize, getDefaultSize(theme)).lineHeight;
+    return (_jsx(StyledTombstone, { "data-testid": "single-value-tombstone", className: ['w-24 rounded-8', { height: lineHeight }] }, void 0));
+};
 export var selectMenuOverrides = {
     Menu: {
         props: {

package/esm/select/select-variants.js

@@ -2,8 +2,8 @@ import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import Select from './select';
 export function MultiSelect(props) {
-    return _jsx(Select, __assign({}, props, { multi: true }), void 0);
+    return _jsx(Select, __assign({}, props, { filterOptions: props.filterOptions, multi: true }), void 0);
 }
 export function SingleSelect(props) {
-    return _jsx(Select, __assign({}, props, { multi: false }), void 0);
+    return _jsx(Select, __assign({}, props, { filterOptions: props.filterOptions, multi: false }), void 0);
 }

package/esm/select/select.d.ts

@@ -13,7 +13,10 @@ declare const Select: {
         error: boolean;
         positive: boolean;
         escapeClearsValue: boolean;
-        filterOptions: any;
+        filterOptions: ((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) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
         labelKey: string;
@@ -28,15 +31,16 @@ declare const Select: {
         onSelectResetsInput: boolean;
         openOnClick: boolean;
         startOpen: boolean;
-        options: import("baseui/select").OptionsT;
+        options: import("baseui/select/types").Options;
         overrides: {};
         required: boolean;
         searchable: boolean;
-        size: import("./types").Size;
         type: "overlay" | import("./types").Type | "mobile";
-        value: import("baseui/select").Value;
+        value: import("baseui/select/types").Value;
         valueKey: string;
-        placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | undefined;
+        placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+        virtual: boolean;
+        popoverMinWidth: string;
     };
 };
 export default Select;

package/esm/select/select.js

@@ -5,15 +5,21 @@ import OverlaySelect from './overlaySelect';
 import MobileSelect from './mobileSelect';
 import defaultProps from './default-props';
 import { useContextualFormProps } from '../form-control/context';
+import { useStyle } from '../style';
+import { getDefaultSize } from '../helpers/themeHelpers';
 var Select = function (props) {
     var adaptedProps = useContextualFormProps(props);
+    var theme = useStyle().theme;
     switch (adaptedProps.type) {
         case 'overlay':
-            return _jsx(OverlaySelect, __assign({}, adaptedProps), void 0);
+            // @ts-ignore -- needs to be fixed
+            return _jsx(OverlaySelect, __assign({}, adaptedProps, { size: adaptedProps.size || getDefaultSize(theme) }), void 0);
         case 'mobile':
-            return _jsx(MobileSelect, __assign({}, adaptedProps), void 0);
+            // @ts-ignore -- needs to be fixed
+            return _jsx(MobileSelect, __assign({}, adaptedProps, { size: adaptedProps.size || getDefaultSize(theme) }), void 0);
         default:
-            return _jsx(BaseSelect, __assign({}, adaptedProps), void 0);
+            // @ts-ignore -- needs to be fixed
+            return _jsx(BaseSelect, __assign({}, adaptedProps, { size: adaptedProps.size || getDefaultSize(theme) }), void 0);
     }
 };
 Select.defaultProps = defaultProps;

package/esm/select/selectMenuAdapter/CollapsibleSelectMenu.d.ts

@@ -0,0 +1,118 @@
+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, }: {
+    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("baseui/select").Value | undefined;
+    overrides?: {
+        Menu?: import("../../overrides").Override<MenuProps> | undefined;
+        MenuItem?: import("../../overrides").Override<Omit<import("../../list").ListItemProps, "overrides" | "onMouseEnter" | "onMouseLeave"> & {
+            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" | "triggerType" | "placement"> & {
+                    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;
+} & {
+    $onPaginate?: ((event: UIEvent<HTMLElement>, itemGroup: string) => void) | undefined;
+    groupConfig: GroupConfig;
+    clearAsOption?: boolean | undefined;
+}) => ReactElement;