@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/select/overlaySelect/OverlaySelect.js

@@ -8,7 +8,7 @@ var overrides_1 = require("../../overrides");
 var popover_1 = require("../../popover");
 var base_select_1 = (0, tslib_1.__importDefault)(require("../base-select"));
 var styled_component_1 = require("../styled-component");
-var useOverlaySelectOverrides_1 = (0, tslib_1.__importDefault)(require("./useOverlaySelectOverrides"));
+var useOverlaySelectOverrides_1 = (0, tslib_1.__importDefault)(require("./hooks/useOverlaySelectOverrides"));
 var useScrollCapture_1 = (0, tslib_1.__importDefault)(require("../../hooks/useScrollCapture"));
 var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedRef"));
 // These props are handled by OverlaySelect itself and hence should not be passed to BaseSelect
@@ -19,6 +19,7 @@ var propsToOmit = [
     'onChange',
     'startOpen',
     'searchable',
+    'inputRef',
     'controlRef',
     'autoFocus',
     'placeholder',
@@ -32,26 +33,16 @@ var propsToOmit = [
     'captureScroll',
     'placement',
     'methodsRef',
+    'ignoreBoundary',
 ];
 var OverlaySelect = function (props) {
     var _a, _b, _c;
     var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_a = props.overrides) === null || _a === void 0 ? void 0 : _a.OverlayContentContainer, styled_component_1.StyledOverlayContentContainer), 2), OverlayContentContainer = _d[0], overlayContentContainerProps = _d[1];
-    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, popover_1.Popover), 2), PopoverOverriden = _e[0], popoverProps = _e[1];
+    var _e = (0, tslib_1.__read)((0, react_1.useState)(null), 2), scrollElement = _e[0], setScrollElement = _e[1];
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, popover_1.Popover), 2), PopoverOverriden = _f[0], popoverProps = _f[1];
     var setScrollTarget = (0, useScrollCapture_1.default)({ enabled: props.captureScroll });
-    var combinedRef = (0, useCombinedRef_1.default)(setScrollTarget, overlayContentContainerProps === null || overlayContentContainerProps === void 0 ? void 0 : overlayContentContainerProps.ref);
-    var _f = (0, useOverlaySelectOverrides_1.default)(props), popoverOpen = _f.popoverOpen, filterOptionsOverride = _f.filterOptionsOverride, handleValuesChange = _f.handleValuesChange, overrides = _f.overrides, togglePopoverState = _f.togglePopoverState, closePopover = _f.closePopover, openPopover = _f.openPopover;
-    (0, react_1.useEffect)(function () {
-        if (props.methodsRef) {
-            props.methodsRef.current = {
-                setDropdownOpen: function (shouldOpen) {
-                    if (shouldOpen)
-                        openPopover();
-                    else
-                        closePopover();
-                },
-            };
-        }
-    }, [openPopover, closePopover]);
+    var combinedRef = (0, useCombinedRef_1.default)(setScrollElement, setScrollTarget, overlayContentContainerProps === null || overlayContentContainerProps === void 0 ? void 0 : overlayContentContainerProps.ref);
+    var _g = (0, useOverlaySelectOverrides_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { scrollElement: scrollElement })), popoverOpen = _g.popoverOpen, filterOptionsOverride = _g.filterOptionsOverride, handleValuesChange = _g.handleValuesChange, overrides = _g.overrides, togglePopoverState = _g.togglePopoverState, closePopover = _g.closePopover;
     var baseSelectProps = (0, omit_1.default)(props, propsToOmit);
     if (props.disabled) {
         if (typeof props.children === 'function') {
@@ -59,6 +50,6 @@ var OverlaySelect = function (props) {
         }
         return props.children;
     }
-    return ((0, jsx_runtime_1.jsx)(PopoverOverriden, (0, tslib_1.__assign)({ isOpen: popoverOpen, content: (0, jsx_runtime_1.jsx)(OverlayContentContainer, (0, tslib_1.__assign)({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef }, { children: (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, baseSelectProps, { filterOptions: filterOptionsOverride, onChange: handleValuesChange, overrides: overrides, type: "search" }), void 0) }), void 0), onClick: togglePopoverState, onClickOutside: closePopover, onEsc: closePopover, placement: (_c = props.placement) !== null && _c !== void 0 ? _c : 'bottom', focusLock: true, returnFocus: true, overrides: { Inner: { style: 'spr-ui-01' }, Arrow: { style: 'spr-ui-01' } }, mountNode: props.mountNode }, popoverProps, { children: props.children }), void 0));
+    return ((0, jsx_runtime_1.jsx)(PopoverOverriden, (0, tslib_1.__assign)({ isOpen: popoverOpen, content: (0, jsx_runtime_1.jsx)(OverlayContentContainer, (0, tslib_1.__assign)({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef }, { children: (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, baseSelectProps, { 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));
 };
 exports.default = OverlaySelect;

package/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/select/overlaySelect/hooks/useControlRef.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControlRef = void 0;
+var react_1 = require("react");
+var useControlRef = function (controlRef, _a) {
+    var openPopover = _a.openPopover, closePopover = _a.closePopover, inputElement = _a.inputElement, setInputValue = _a.setInputValue;
+    (0, react_1.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]);
+};
+exports.useControlRef = useControlRef;

package/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/select/overlaySelect/{useOverlaySelectOverrides.js → hooks/useOverlaySelectOverrides.js}

@@ -5,16 +5,17 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
 var react_1 = require("react");
-var box_1 = require("../../box");
-var longHandHelpers_1 = require("../../helpers/longHandHelpers");
-var loader_1 = require("../../loader");
-var overrides_1 = require("../../overrides");
-var search_1 = require("../../search");
-var style_1 = require("../../style");
-var overrides_2 = require("../overrides");
+var box_1 = require("../../../box");
+var longHandHelpers_1 = require("../../../helpers/longHandHelpers");
+var loader_1 = require("../../../loader");
+var overrides_1 = require("../../../overrides");
+var search_1 = require("../../../search");
+var style_1 = require("../../../style");
+var overrides_2 = require("../../overrides");
 var usePopover_1 = (0, tslib_1.__importDefault)(require("./usePopover"));
-var useStickyElement_1 = (0, tslib_1.__importDefault)(require("../../hooks/useStickyElement"));
-var useUpdateEffect_1 = (0, tslib_1.__importDefault)(require("../../hooks/useUpdateEffect"));
+var useStickyElement_1 = (0, tslib_1.__importDefault)(require("../../../hooks/useStickyElement"));
+var useUpdateEffect_1 = (0, tslib_1.__importDefault)(require("../../../hooks/useUpdateEffect"));
+var useControlRef_1 = require("./useControlRef");
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
     var _b = (0, tslib_1.__read)((0, react_1.useState)(null), 2), inputElement = _b[0], setInputElement = _b[1];
@@ -30,6 +31,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];
 };
@@ -52,7 +60,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 = (0, tslib_1.__read)((0, react_1.useState)(''), 2), inputValue = _b[0], setInputValue = _b[1];
     var _c = (0, usePopover_1.default)(props), popoverOpen = _c.popoverOpen, togglePopoverState = _c.togglePopoverState, closePopover = _c.closePopover, openPopover = _c.openPopover;
     (0, useUpdateEffect_1.default)(function () {
@@ -60,7 +68,8 @@ var useOverlaySelectOverrides = function (props) {
             setInputValue('');
         }
     }, [onCloseResetsInput, popoverOpen]);
-    var _d = (0, tslib_1.__read)(useAutoFocus({ autoFocus: autoFocus, inputRef: controlRef }), 2), inputElement = _d[0], setInputElement = _d[1];
+    var _d = (0, tslib_1.__read)(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _d[0], setInputElement = _d[1];
+    (0, useControlRef_1.useControlRef)(controlRef, { closePopover: closePopover, openPopover: openPopover, setInputValue: setInputValue, inputElement: inputElement });
     var filterOptionsOverride = (0, react_1.useCallback)(function (options, _, excludeOptions, params) {
         if (filterOptions) {
             return filterOptions(options, inputValue, excludeOptions, params);
@@ -115,7 +124,6 @@ var useOverlaySelectOverrides = function (props) {
                         },
                     },
                 },
-                autoFocus: true,
                 // override baseui's onKeyDown
                 onKeyDown: noop_1.default,
                 clearable: clearable,
@@ -151,6 +159,7 @@ var useOverlaySelectOverrides = function (props) {
                                     style: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (searchable ? { paddingTop: 0 } : {})), (0, longHandHelpers_1.borderRadius)(0)), { overflow: 'visible' }),
                                 },
                             },
+                            scrollElement: scrollElement,
                         },
                     },
                 },
@@ -189,10 +198,7 @@ var useOverlaySelectOverrides = function (props) {
         onFocus,
         onBlur,
     ]);
-    var overrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(memoizedOverrides, (0, omit_1.default)(props.overrides, overridesToOmit)); }, [
-        memoizedOverrides,
-        props.overrides,
-    ]);
+    var overrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(memoizedOverrides, (0, omit_1.default)(props.overrides, overridesToOmit)); }, [memoizedOverrides, props.overrides]);
     return {
         overrides: overrides,
         filterOptionsOverride: filterOptionsOverride,

package/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/select/overlaySelect/{usePopover.js → hooks/usePopover.js}

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-var useLatest_1 = require("../../hooks/useLatest");
-var useFirstMountState_1 = require("../../hooks/useFirstMountState");
+var useLatest_1 = require("../../../hooks/useLatest");
+var useFirstMountState_1 = require("../../../hooks/useFirstMountState");
 var usePopover = function (_a) {
     var startOpen = _a.startOpen, onOpen = _a.onOpen, onClose = _a.onClose;
     var isFirstMount = (0, useFirstMountState_1.useFirstMountState)();

package/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/select/overrides.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectMenuOverrides = exports.OverlaySelectPopoverOverride = exports.getSelectInputStyles = exports.getValueTypography = exports.getValueContainerStyles = exports.getControlContainerStyles = exports.getSearchIconStyles = exports.getSearchIconContainerStyles = exports.SelectArrow = void 0;
+exports.selectMenuOverrides = exports.OverlaySelectPopoverOverride = exports.getValueTypography = exports.getValueContainerStyles = exports.getControlContainerStyles = exports.getSearchIconStyles = exports.getSearchIconContainerStyles = exports.SelectArrow = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var commonStyles_1 = require("../helpers/commonStyles");
@@ -64,7 +64,7 @@ exports.getValueContainerStyles = [
     function (_a, _b) {
         var theme = _a.theme;
         var $multi = _b.$multi, $isEmpty = _b.$isEmpty, $size = _b.$size;
-        var multiSelectTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', $size, 'lg');
+        var multiSelectTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', $size, 'md');
         return $multi && !$isEmpty
             ? {
                 paddingTop: multiSelectTheme.paddingY,
@@ -76,18 +76,10 @@ exports.getValueContainerStyles = [
 var getValueTypography = function (_a, _b) {
     var theme = _a.theme;
     var $selectSize = _b.$selectSize;
-    var _c = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, 'lg'), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
+    var _c = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, 'md'), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
     return { fontSize: fontSize, lineHeight: lineHeight, height: lineHeight };
 };
 exports.getValueTypography = getValueTypography;
-var getSelectInputStyles = function () { return ({
-    color: 'inherit',
-    lineHeight: 'inherit',
-    fontSize: 'inherit',
-    fontWeight: 'inherit',
-    letterSpacing: 'normal',
-}); };
-exports.getSelectInputStyles = getSelectInputStyles;
 // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
 var OverlaySelectPopoverOverride = function (_a) {
     var content = _a.content, inputContainer = _a.children, setStickySentinelRef = _a.setStickySentinelRef;

package/select/select-variants.js

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

package/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/select/select.js

@@ -11,11 +11,11 @@ var Select = function (props) {
     var adaptedProps = (0, context_1.useContextualFormProps)(props);
     switch (adaptedProps.type) {
         case 'overlay':
-            return (0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+            return (0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || 'md' }), void 0);
         case 'mobile':
-            return (0, jsx_runtime_1.jsx)(mobileSelect_1.default, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+            return (0, jsx_runtime_1.jsx)(mobileSelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || 'md' }), void 0);
         default:
-            return (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+            return (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || 'md' }), void 0);
     }
 };
 Select.defaultProps = default_props_1.default;

package/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/select/selectMenuAdapter/SelectMenuAdapter.js

@@ -17,6 +17,7 @@ var overrides_2 = require("../overrides");
 var styled_component_1 = require("../styled-component");
 var types_1 = require("../types");
 var SelectMenuItem_1 = (0, tslib_1.__importDefault)(require("./SelectMenuItem"));
+var utils_1 = require("baseui/select/utils");
 var removeUngroupedIfEmpty = function (groupedOptions) {
     var _a;
     if (!((_a = groupedOptions[constants_1.UNGROUPED_ID]) === null || _a === void 0 ? void 0 : _a.length)) {
@@ -26,7 +27,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_1.default : _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_1.default : _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 = (0, react_1.useMemo)(function () {
         var set = new Set((0, map_1.default)(value, valueKey));
         return set;
@@ -38,7 +39,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;
     }
@@ -53,11 +54,16 @@ var SelectMenuAdapter = function (props) {
         MenuItem: mergedOverrides.MenuItem,
         ListItemText: mergedOverrides.ListItemText,
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
+    var currentCount = 0, totalCount = (0, utils_1.normalizeOptions)(groupedItems).length;
     var itemsToRender = (0, flatten_1.default)(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[types_1.SELECT_ALL_ID] && selectAllSelected);
-            return ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__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 = ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__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[types_1.SELECT_ALL_ID]
+                ? [selectMenuItem, (0, jsx_runtime_1.jsx)(DividerOverriden, (0, tslib_1.__assign)({ "$item": item }, dividerProps), "divider-select-all")]
+                : selectMenuItem;
         });
         if (itemGroup !== constants_1.UNGROUPED_ID) {
             menuItems.unshift((0, jsx_runtime_1.jsx)(DividerOverriden, (0, tslib_1.__assign)({ first: index === 0 }, dividerProps, { children: (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ variant: "l4", weight: "medium", className: "spr-text-03" }, { children: itemGroup }), void 0) }), "divider-".concat(itemGroup)));
@@ -69,6 +75,6 @@ var SelectMenuAdapter = function (props) {
     }
     return (
     // focusWhenNavigationEnabled false, or else it will remove focus from select input
-    (0, jsx_runtime_1.jsx)(MenuOverriden, (0, tslib_1.__assign)({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox" }, baseuiMenuListProps, { id: id }, menuProps, { children: itemsToRender }), void 0));
+    (0, jsx_runtime_1.jsx)(MenuOverriden, (0, tslib_1.__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));
 };
 exports.default = SelectMenuAdapter;

package/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/select/selectMenuAdapter/SelectMenuItem.js

@@ -27,11 +27,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 = (0, react_1.useMemo)(function () {
-        return multi && ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: selected, size: "sm", overrides: { Input: { props: { 'aria-labelledby': id } } }, disabled: item.disabled, intent: "default" }, void 0));
+        return multi && ((0, jsx_runtime_1.jsx)(checkbox_1.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 ((0, jsx_runtime_1.jsx)(MenuItemOverriden, (0, tslib_1.__assign)({ role: "option", "aria-selected": selected, className: (0, classNames_1.default)({
-            'border-b spr-border-01 border-solid border-t-0 border-l-0 border-r-0': item[types_1.SELECT_ALL_ID],
-        }), 
+    return ((0, jsx_runtime_1.jsx)(MenuItemOverriden, (0, tslib_1.__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: (0, jsx_runtime_1.jsx)(ListItemTextOverriden, (0, tslib_1.__assign)({ "$multi": multi, "$item": item, "$labelKey": labelKey }, listItemTextProps, { overrides: listItemTextOverrides }, { children: getItemLabel(item) }), void 0) }), void 0));
 });

package/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/select/stateful-select.js

@@ -7,9 +7,9 @@ var overlaySelect_1 = (0, tslib_1.__importDefault)(require("./overlaySelect"));
 var select_2 = (0, tslib_1.__importDefault)(require("./select"));
 var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
 function StatefulSelect(_a) {
-    var overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["overrides"]);
-    return ((0, jsx_runtime_1.jsx)(select_1.StatefulSelectContainer, (0, tslib_1.__assign)({}, restProps, { children: function (selectProps) {
-            return restProps.type === 'overlay' ? ((0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, selectProps, { overrides: overrides }, { children: restProps.children }), void 0)) : ((0, jsx_runtime_1.jsx)(select_2.default, (0, tslib_1.__assign)({}, selectProps, { overrides: overrides }), void 0));
+    var overrides = _a.overrides, onChange = _a.onChange, restProps = (0, tslib_1.__rest)(_a, ["overrides", "onChange"]);
+    return ((0, jsx_runtime_1.jsx)(select_1.StatefulSelectContainer, (0, tslib_1.__assign)({}, restProps, { onChange: onChange }, { children: function (selectProps) {
+            return restProps.type === 'overlay' ? ((0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, selectProps, { overrides: overrides }, { children: restProps.children }), void 0)) : ((0, jsx_runtime_1.jsx)(select_2.default, (0, tslib_1.__assign)({}, selectProps, { filterOptions: selectProps.filterOptions, overrides: overrides }), void 0));
         } }), void 0));
 }
 StatefulSelect.defaultProps = default_props_1.default;

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

package/select/styled-component.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.InputContainer = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledSelect = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledSearchIcon = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = void 0;
+exports.Input = exports.InputContainer = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledSelect = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.StyledInput = exports.StyledInputContainer = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var select_1 = require("baseui/select");
@@ -10,6 +10,7 @@ var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var locale_1 = require("../locale");
 var menu_item_1 = (0, tslib_1.__importDefault)(require("../menu/menu-item"));
 var style_1 = require("../style");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var StyledSelect = (0, withThemeOverride_1.default)(select_1.Select, function (theme) { return ({
     borders: {
         inputBorderRadius: theme.input.borderRadius,
@@ -34,12 +35,37 @@ var StyledSelect = (0, withThemeOverride_1.default)(select_1.Select, function (t
     },
 }); });
 exports.StyledSelect = StyledSelect;
-var NoResults = function (_a) {
+var NoResults = React.forwardRef(function (_a, ref) {
     var msg = _a.msg, props = (0, tslib_1.__rest)(_a, ["msg"]);
     var locale = (0, locale_1.useLocale)();
-    return ((0, jsx_runtime_1.jsx)(menu_item_1.default, (0, tslib_1.__assign)({ button: false }, props, { children: msg || locale.select.noResultsMsg }), void 0));
-};
+    return ((0, jsx_runtime_1.jsx)(menu_item_1.default, (0, tslib_1.__assign)({ button: false, ref: ref }, props, { children: msg || locale.select.noResultsMsg }), void 0));
+});
 exports.NoResults = NoResults;
+exports.StyledInputContainer = (0, style_1.styled)('div', 'relative inline-block bg-transparent max-w-full border-none box-border m-0 p-0 outline-none', function (_a, props) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $selectSize = props.$selectSize, $isEmpty = props.$isEmpty;
+    var _b = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, 'md'), fontSize = _b.fontSize, lineHeight = _b.lineHeight;
+    return {
+        boxShadow: 'none',
+        marginLeft: $isEmpty ? 0 : px2rem(2),
+        height: lineHeight,
+        maxHeight: lineHeight,
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+    };
+});
+exports.StyledInput = (0, style_1.styled)('input', 'bg-transparent border-none inline-block m-0 p-0 max-w-full box-content outline-none', function (_, props) {
+    var $searchable = props.$searchable, $width = props.$width;
+    return {
+        color: 'inherit',
+        lineHeight: 'inherit',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        letterSpacing: 'normal',
+        width: !$searchable ? '1px' : $width || '100%',
+        boxShadow: 'none',
+    };
+});
 var DEFAULT_OVERLAY_WIDTH = '300px';
 var StyledOverlayContentContainer = (0, style_1.styled)('div', 'overflow-auto', function (_a, _b) {
     var px2rem = _a.px2rem;
@@ -49,12 +75,12 @@ var StyledOverlayContentContainer = (0, style_1.styled)('div', 'overflow-auto',
 exports.StyledOverlayContentContainer = StyledOverlayContentContainer;
 var InputContainer = function (_a) {
     var menuId = _a.menuId, size = _a.size, props = (0, tslib_1.__rest)(_a, ["menuId", "size"]);
-    return ((0, jsx_runtime_1.jsx)(select_1.StyledInputContainer, (0, tslib_1.__assign)({}, props, { "$selectSize": size, role: props.$searchable ? null : 'combobox', "aria-haspopup": props.$searchable ? null : 'listbox', "aria-owns": !props.$searchable && props.$isOpen ? menuId : null }), void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.StyledInputContainer, (0, tslib_1.__assign)({}, props, { "$selectSize": size, role: props.$searchable ? undefined : 'combobox', "aria-haspopup": props.$searchable ? null : 'listbox', "aria-owns": !props.$searchable && props.$isOpen ? menuId : null }), void 0));
 };
 exports.InputContainer = InputContainer;
 var Input = React.forwardRef(function (_a, ref) {
     var id = _a.id, menuId = _a.menuId, props = (0, tslib_1.__rest)(_a, ["id", "menuId"]);
-    return ((0, jsx_runtime_1.jsx)(select_1.StyledInput, (0, tslib_1.__assign)({}, props, { id: id, "aria-controls": props.$searchable && props.$isOpen ? menuId : null, ref: ref }), void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.StyledInput, (0, tslib_1.__assign)({}, props, { id: id, "aria-controls": props.$searchable && props.$isOpen ? menuId : null, ref: ref }), void 0));
 });
 exports.Input = Input;
 var select_2 = require("baseui/select");
@@ -63,11 +89,8 @@ Object.defineProperty(exports, "StyledClearIcon", { enumerable: true, get: funct
 Object.defineProperty(exports, "StyledControlContainer", { enumerable: true, get: function () { return select_2.StyledControlContainer; } });
 Object.defineProperty(exports, "StyledDropdownContainer", { enumerable: true, get: function () { return select_2.StyledDropdownContainer; } });
 Object.defineProperty(exports, "StyledIconsContainer", { enumerable: true, get: function () { return select_2.StyledIconsContainer; } });
-Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function () { return select_2.StyledInput; } });
-Object.defineProperty(exports, "StyledInputContainer", { enumerable: true, get: function () { return select_2.StyledInputContainer; } });
 Object.defineProperty(exports, "StyledInputSizer", { enumerable: true, get: function () { return select_2.StyledInputSizer; } });
 Object.defineProperty(exports, "StyledPlaceholder", { enumerable: true, get: function () { return select_2.StyledPlaceholder; } });
-Object.defineProperty(exports, "StyledSearchIcon", { enumerable: true, get: function () { return select_2.StyledSearchIcon; } });
 Object.defineProperty(exports, "StyledSearchIconContainer", { enumerable: true, get: function () { return select_2.StyledSearchIconContainer; } });
 Object.defineProperty(exports, "StyledSelectArrow", { enumerable: true, get: function () { return select_2.StyledSelectArrow; } });
 Object.defineProperty(exports, "StyledSingleValue", { enumerable: true, get: function () { return select_2.StyledSingleValue; } });