@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/esm/select/index.js

@@ -1,7 +1,7 @@
 export { SELECT_ALL_ID } from './types';
 export { STATE_CHANGE_TYPE } from './constants';
 // styled-components
-export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIcon, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
 // components
 export { default as Select } from './select';
 export { default as StatefulSelect } from './stateful-select';

package/esm/select/mobileSelect/MobileSelect.js

@@ -9,12 +9,10 @@ import { usePauseBodyScrollEffect } from './hooks/usePauseBodyScrollEffect';
 export var MobileSelect = React.memo(function (props) {
     var overrides = props.overrides, children = props.children, label = props.label;
     var _a = __read(React.useState(null), 2), scrollContainer = _a[0], setScrollContainer = _a[1];
-    var mergedOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, getOverlayOverrides({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides]);
-    var childSelectOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, CHILD_SELECT_OVERRIDES); }, [
-        overrides,
-    ]);
+    var mergedOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, getOverlayOverrides({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides, label]);
+    var childSelectOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, CHILD_SELECT_OVERRIDES); }, [overrides]);
     var overlaySelectProps = _omit(props, OVERLAY_SELECT_PROPS_TO_OMIT);
     var viewSelectProps = _omit(props, CHILD_SELECT_PROPS_TO_OMIT);
     usePauseBodyScrollEffect({ currentEl: scrollContainer || undefined });
-    return (_jsx(Select, __assign({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay" }, { children: React.isValidElement(children) ? (children) : (_jsx(Select, __assign({}, viewSelectProps, { overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
+    return (_jsx(Select, __assign({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay", filterOptions: overlaySelectProps.filterOptions }, { children: React.isValidElement(children) ? (children) : (_jsx(Select, __assign({}, viewSelectProps, { filterOptions: viewSelectProps.filterOptions, overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
 });

package/esm/select/multi-value.js

@@ -11,7 +11,7 @@ export default function MultiValue(props) {
     var _b = props.overrides, overrides = _b === void 0 ? {} : _b, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, restProps = __rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled"]);
     var _c = __read(useOverrides(overrides.Tag, Tag), 2), TagComponent = _c[0], tagProps = _c[1];
     var theme = useStyle().theme;
-    var multiSelectTheme = useMemo(function () { return getComponentSizeTheme(theme, 'multiSelect', selectSize, 'lg'); }, [
+    var multiSelectTheme = useMemo(function () { return getComponentSizeTheme(theme, 'multiSelect', selectSize, 'md'); }, [
         selectSize,
         theme,
     ]);

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,16 @@ var propsToOmit = [
     'captureScroll',
     'placement',
     'methodsRef',
+    'ignoreBoundary',
 ];
 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 +48,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,23 @@
+import * as React from 'react';
+import { OnChangeParams, OverlaySelectProps } from '../../types';
+declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "children" | "type" | "overlayWidth"> & {
+    type: "overlay";
+    overlayWidth?: string | undefined;
+    children: React.ReactNode | ((args: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+} & {
+    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,17 @@ 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 { useStyle } from '../../../style';
+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,6 +29,13 @@ 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];
 };
@@ -50,7 +58,7 @@ 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 closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, inputRef = props.inputRef, filterOptions = props.filterOptions, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _a = props.clearable, clearable = _a === void 0 ? true : _a, onFocus = props.onFocus, onBlur = props.onBlur, onCloseResetsInput = props.onCloseResetsInput, controlRef = props.controlRef, scrollElement = props.scrollElement;
     var _b = __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;
     useUpdateEffect(function () {
@@ -58,7 +66,8 @@ var useOverlaySelectOverrides = function (props) {
             setInputValue('');
         }
     }, [onCloseResetsInput, popoverOpen]);
-    var _d = __read(useAutoFocus({ autoFocus: autoFocus, inputRef: controlRef }), 2), inputElement = _d[0], setInputElement = _d[1];
+    var _d = __read(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _d[0], setInputElement = _d[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);
@@ -113,7 +122,6 @@ var useOverlaySelectOverrides = function (props) {
                         },
                     },
                 },
-                autoFocus: true,
                 // override baseui's onKeyDown
                 onKeyDown: _noop,
                 clearable: clearable,
@@ -149,6 +157,7 @@ var useOverlaySelectOverrides = function (props) {
                                     style: __assign(__assign(__assign({}, (searchable ? { paddingTop: 0 } : {})), borderRadius(0)), { overflow: 'visible' }),
                                 },
                             },
+                            scrollElement: scrollElement,
                         },
                     },
                 },
@@ -187,10 +196,7 @@ var useOverlaySelectOverrides = function (props) {
         onFocus,
         onBlur,
     ]);
-    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,7 +12,6 @@ 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;

package/esm/select/overrides.js

@@ -59,7 +59,7 @@ 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, 'md');
         return $multi && !$isEmpty
             ? {
                 paddingTop: multiSelectTheme.paddingY,
@@ -71,16 +71,9 @@ 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, 'md'), 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;

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,15 @@ 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;
     };
 };
 export default Select;

package/esm/select/select.js

@@ -9,11 +9,11 @@ var Select = function (props) {
     var adaptedProps = useContextualFormProps(props);
     switch (adaptedProps.type) {
         case 'overlay':
-            return _jsx(OverlaySelect, __assign({}, adaptedProps), void 0);
+            return _jsx(OverlaySelect, __assign({}, adaptedProps, { size: adaptedProps.size || 'md' }), void 0);
         case 'mobile':
-            return _jsx(MobileSelect, __assign({}, adaptedProps), void 0);
+            return _jsx(MobileSelect, __assign({}, adaptedProps, { size: adaptedProps.size || 'md' }), void 0);
         default:
-            return _jsx(BaseSelect, __assign({}, adaptedProps), void 0);
+            return _jsx(BaseSelect, __assign({}, adaptedProps, { size: adaptedProps.size || 'md' }), void 0);
     }
 };
 Select.defaultProps = defaultProps;

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

@@ -29,6 +29,8 @@ declare type PropsAddedByOverride = {
     selectAllSelected: boolean;
     noResultsMsg?: string;
     captureScroll?: boolean;
+    virtual?: boolean;
+    overscanCount?: number;
 };
 declare const SelectMenuAdapter: (props: BaseStatefulMenuProps & PropsAddedByOverride) => React.ReactElement;
 export default SelectMenuAdapter;

package/esm/select/selectMenuAdapter/SelectMenuAdapter.js

@@ -15,6 +15,7 @@ import { selectMenuOverrides } from '../overrides';
 import { NoResults } from '../styled-component';
 import { SELECT_ALL_ID } from '../types';
 import SelectMenuItem from './SelectMenuItem';
+import { normalizeOptions } from 'baseui/select/utils';
 var removeUngroupedIfEmpty = function (groupedOptions) {
     var _a;
     if (!((_a = groupedOptions[UNGROUPED_ID]) === null || _a === void 0 ? void 0 : _a.length)) {
@@ -24,7 +25,7 @@ var removeUngroupedIfEmpty = function (groupedOptions) {
 };
 var SelectMenuAdapter = function (props) {
     var _a, _b, _c, _d;
-    var id = props.id, groupedItems = props.items, overrides = props.overrides, _e = props.onItemSelect, onItemSelect = _e === void 0 ? _noop : _e, value = props.value, valueKey = props.valueKey, labelKey = props.labelKey, multi = props.multi, selectAllSelected = props.selectAllSelected, noResultsMsg = props.noResultsMsg, captureScroll = props.captureScroll;
+    var id = props.id, groupedItems = props.items, overrides = props.overrides, _e = props.onItemSelect, onItemSelect = _e === void 0 ? _noop : _e, value = props.value, valueKey = props.valueKey, labelKey = props.labelKey, multi = props.multi, selectAllSelected = props.selectAllSelected, noResultsMsg = props.noResultsMsg, captureScroll = props.captureScroll, virtual = props.virtual, overscanCount = props.overscanCount;
     var selectedValuesSet = useMemo(function () {
         var set = new Set(_map(value, valueKey));
         return set;
@@ -36,7 +37,7 @@ var SelectMenuAdapter = function (props) {
     var optionOverride = overrides === null || overrides === void 0 ? void 0 : overrides.Option;
     var baseuiMenuListProps;
     var getItemLabel, baseuiMenuItemProps;
-    if (typeof optionOverride === 'object') {
+    if (typeof optionOverride === 'object' && typeof optionOverride.props === 'object') {
         getItemLabel = (_a = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _a === void 0 ? void 0 : _a.getItemLabel;
         baseuiMenuItemProps = (_d = (_c = (_b = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _b === void 0 ? void 0 : _b.overrides) === null || _c === void 0 ? void 0 : _c.ListItem) === null || _d === void 0 ? void 0 : _d.props;
     }
@@ -51,11 +52,16 @@ var SelectMenuAdapter = function (props) {
         MenuItem: mergedOverrides.MenuItem,
         ListItemText: mergedOverrides.ListItemText,
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
+    var currentCount = 0, totalCount = normalizeOptions(groupedItems).length;
     var itemsToRender = _flatten(Object.keys(removeUngroupedIfEmpty(groupedItems)).map(function (itemGroup, index) {
         var itemsInGroup = groupedItems[itemGroup];
-        var menuItems = itemsInGroup.map(function (item) {
+        var menuItems = itemsInGroup.flatMap(function (item) {
+            currentCount += 1;
             var selected = selectedValuesSet.has(item[valueKey]) || (item[SELECT_ALL_ID] && selectAllSelected);
-            return (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
+            var selectMenuItem = (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, "aria-posinset": currentCount, "aria-setsize": totalCount }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
+            return item[SELECT_ALL_ID]
+                ? [selectMenuItem, _jsx(DividerOverriden, __assign({ "$item": item }, dividerProps), "divider-select-all")]
+                : selectMenuItem;
         });
         if (itemGroup !== UNGROUPED_ID) {
             menuItems.unshift(_jsx(DividerOverriden, __assign({ first: index === 0 }, dividerProps, { children: _jsx(Typography, __assign({ variant: "l4", weight: "medium", className: "spr-text-03" }, { children: itemGroup }), void 0) }), "divider-".concat(itemGroup)));
@@ -67,6 +73,6 @@ var SelectMenuAdapter = function (props) {
     }
     return (
     // focusWhenNavigationEnabled false, or else it will remove focus from select input
-    _jsx(MenuOverriden, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox" }, baseuiMenuListProps, { id: id }, menuProps, { children: itemsToRender }), void 0));
+    _jsx(MenuOverriden, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox" }, baseuiMenuListProps, { id: id, virtual: virtual, overscanCount: overscanCount }, menuProps, { children: itemsToRender }), void 0));
 };
 export default SelectMenuAdapter;

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

@@ -36,7 +36,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                     selected?: boolean | undefined;
                     startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
                 } & Record<string, any>> | undefined;
-                Popover?: Override<Omit<import("baseui/popover").PopoverProps, "overrides" | "children"> & {
+                Popover?: Override<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
                     overrides?: ({
                         Body?: Override<any> | undefined;
                         Arrow?: Override<any> | undefined;
@@ -48,6 +48,9 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                         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;
                 } & Record<string, any>> | undefined;
             } | undefined;
         } & Record<string, any>> | undefined;

package/esm/select/selectMenuAdapter/SelectMenuItem.js

@@ -25,11 +25,9 @@ var SelectMenuItem = React.forwardRef(function (_a, ref) {
     // Passes intent to override intent from useContextualFormProps,
     // see: https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/282
     var startEnhancer = useMemo(function () {
-        return multi && (_jsx(Checkbox, { checked: selected, size: "sm", overrides: { Input: { props: { 'aria-labelledby': id } } }, disabled: item.disabled, intent: "default" }, void 0));
+        return multi && (_jsx(Checkbox, { checked: selected, size: "sm", overrides: { Input: { props: { 'aria-labelledby': id } }, Label: { style: 'hidden' } }, disabled: item.disabled, intent: "default" }, void 0));
     }, [multi, selected, item.disabled, item[valueKey], id]);
-    return (_jsx(MenuItemOverriden, __assign({ role: "option", "aria-selected": selected, className: cx({
-            'border-b spr-border-01 border-solid border-t-0 border-l-0 border-r-0': item[SELECT_ALL_ID],
-        }), 
+    return (_jsx(MenuItemOverriden, __assign({ role: "option", "aria-selected": selected, 
         // for Multi Select variant do not show selected styles
         selected: multi ? false : selected, onClick: handleItemSelect, startEnhancer: startEnhancer, disabled: item.disabled, "$multi": multi, "$item": item, "$valueKey": valueKey, "$labelKey": labelKey, ref: ref, id: id }, restProps, menuItemProps, { children: _jsx(ListItemTextOverriden, __assign({ "$multi": multi, "$item": item, "$labelKey": labelKey }, listItemTextProps, { overrides: listItemTextOverrides }, { children: getItemLabel(item) }), void 0) }), void 0));
 });

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StatefulSelectProps } from './types';
-declare function StatefulSelect({ overrides, ...restProps }: StatefulSelectProps): React.ReactElement;
+declare function StatefulSelect({ overrides, onChange, ...restProps }: StatefulSelectProps): React.ReactElement;
 declare namespace StatefulSelect {
     var defaultProps: {
         autoFocus: boolean;
@@ -13,7 +13,10 @@ declare namespace StatefulSelect {
         error: boolean;
         positive: boolean;
         escapeClearsValue: boolean;
-        filterOptions: any;
+        filterOptions: ((options: import("baseui/select").Value, filterValue: string, excludeOptions: import("baseui/select").Value | null | undefined, a: {
+            valueKey: string;
+            labelKey: string;
+        }) => import("baseui/select").Value) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
         labelKey: string;
@@ -28,15 +31,15 @@ declare namespace StatefulSelect {
         onSelectResetsInput: boolean;
         openOnClick: boolean;
         startOpen: boolean;
-        options: import("baseui/select").OptionsT;
+        options: import("baseui/select").Options;
         overrides: {};
         required: boolean;
         searchable: boolean;
-        size: import("./types").Size;
         type: "overlay" | import("./types").Type | "mobile";
         value: import("baseui/select").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;
     };
 }
 export default StatefulSelect;

package/esm/select/stateful-select.js

@@ -5,9 +5,9 @@ import OverlaySelect from './overlaySelect';
 import Select from './select';
 import defaultProps from './default-props';
 function StatefulSelect(_a) {
-    var overrides = _a.overrides, restProps = __rest(_a, ["overrides"]);
-    return (_jsx(StatefulSelectContainer, __assign({}, restProps, { children: function (selectProps) {
-            return restProps.type === 'overlay' ? (_jsx(OverlaySelect, __assign({}, selectProps, { overrides: overrides }, { children: restProps.children }), void 0)) : (_jsx(Select, __assign({}, selectProps, { overrides: overrides }), void 0));
+    var overrides = _a.overrides, onChange = _a.onChange, restProps = __rest(_a, ["overrides", "onChange"]);
+    return (_jsx(StatefulSelectContainer, __assign({}, restProps, { onChange: onChange }, { children: function (selectProps) {
+            return restProps.type === 'overlay' ? (_jsx(OverlaySelect, __assign({}, selectProps, { overrides: overrides }, { children: restProps.children }), void 0)) : (_jsx(Select, __assign({}, selectProps, { filterOptions: selectProps.filterOptions, overrides: overrides }), void 0));
         } }), void 0));
 }
 StatefulSelect.defaultProps = defaultProps;

package/esm/select/styled-component.d.ts

@@ -2,9 +2,11 @@ import { SelectProps } from 'baseui/select';
 import * as React from 'react';
 import { SharedProps, Size } from './types';
 declare const StyledSelect: React.ComponentType<SelectProps>;
-declare const NoResults: ({ msg, ...props }: {
+declare const NoResults: React.ForwardRefExoticComponent<{
     msg?: string | undefined;
-}) => JSX.Element;
+} & React.RefAttributes<HTMLElement>>;
+export declare const StyledInputContainer: import("../style/styled").StyledComponent;
+export declare const StyledInput: import("../style/styled").StyledComponent;
 declare const StyledOverlayContentContainer: import("../style/styled").StyledComponent;
 declare const InputContainer: ({ menuId, size, ...props }: SharedProps & {
     menuId: string;
@@ -14,5 +16,5 @@ declare const Input: React.ForwardRefExoticComponent<SharedProps & {
     id: string;
     menuId: string;
 } & React.RefAttributes<HTMLInputElement>>;
-export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIcon, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, } from 'baseui/select';
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, } from 'baseui/select';
 export { StyledSelect, NoResults, StyledOverlayContentContainer, InputContainer, Input };