@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -0,0 +1,70 @@
+import { __assign, __read } from "tslib";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useGetExpandedGroup } from './hooks/useGetExpandedGroup';
+import { Box } from '../../box';
+import { Menu } from '../../menu';
+import { Typography } from '../../typography';
+import SelectMenuItem from './SelectMenuItem';
+import _map from 'lodash/map';
+import _isEmpty from 'lodash/isEmpty';
+import { mergeOverrides, useOverrides } from '../../overrides';
+import { selectMenuOverrides } from '../overrides';
+import { NoResults } from '../styled-component';
+import { UNGROUPED_ID } from '../constants';
+import { BaseButton } from '../../base-button';
+import ChevronDown from '../../icon/components/chevron-down';
+import { chevronStyles } from '../../helpers/commonStyles';
+var Collapsible = function (_a) {
+    var _b;
+    var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled;
+    return (_jsxs(Box, __assign({ className: { borderRadius: 'inherit' } }, { children: [_jsxs(BaseButton, __assign({ disabled: disabled, onClick: function () { return onClick(group.id); }, className: [
+                    'w-full flex justify-between items-center py-2 pl-4 pr-3 border-t-1 border-b-1 border-solid spr-border-01 disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-none',
+                    expanded ? 'border-b-1' : 'border-b-0',
+                ], type: "button" }, { children: [_jsxs(Typography, __assign({ className: "block", variant: "h7" }, { children: [(_b = group.count) !== null && _b !== void 0 ? _b : '', " ", group.label] }), void 0), _jsx(ChevronDown, { style: chevronStyles, "$isOpen": expanded, "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") }, void 0)] }), void 0), expanded ? children : null] }), void 0));
+};
+export var CollapsibleSelectMenu = function (_a) {
+    var _b, _c, _d, _e;
+    var overrides = _a.overrides, value = _a.value, groupedItems = _a.items, multi = _a.multi, labelKey = _a.labelKey, valueKey = _a.valueKey, onItemSelect = _a.onItemSelect, shouldDisplaySelectAll = _a.shouldDisplaySelectAll, selectAllChecked = _a.selectAllSelected, noResultsMsg = _a.noResultsMsg, $onPaginate = _a.$onPaginate, groupConfig = _a.groupConfig, virtual = _a.virtual, clearAsOption = _a.clearAsOption, selectOnTab = _a.selectOnTab;
+    var selectAllSelected = !!shouldDisplaySelectAll && selectAllChecked;
+    var _f = __read(useGetExpandedGroup({ groupConfig: groupConfig, groupedItems: groupedItems }), 2), expandedGroupId = _f[0], setExpandedGroupId = _f[1];
+    var selectedValuesSet = useMemo(function () {
+        var set = new Set(_map(value, valueKey));
+        return set;
+    }, [value, valueKey]);
+    /**
+     * extract out useful overrides/props passed by baseui
+     */
+    var listOverride = overrides === null || overrides === void 0 ? void 0 : overrides.List;
+    var optionOverride = overrides === null || overrides === void 0 ? void 0 : overrides.Option;
+    var baseuiMenuListProps;
+    var getItemLabel, baseuiMenuItemProps;
+    if (typeof optionOverride === 'object' && typeof optionOverride.props === 'object') {
+        getItemLabel = (_b = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _b === void 0 ? void 0 : _b.getItemLabel;
+        baseuiMenuItemProps = (_e = (_d = (_c = optionOverride === null || optionOverride === void 0 ? void 0 : optionOverride.props) === null || _c === void 0 ? void 0 : _c.overrides) === null || _d === void 0 ? void 0 : _d.ListItem) === null || _e === void 0 ? void 0 : _e.props;
+    }
+    if (typeof listOverride === 'object') {
+        // todo: make this component a11y
+        baseuiMenuListProps = listOverride.props;
+    }
+    var mergedOverrides = useMemo(function () { return mergeOverrides(selectMenuOverrides, overrides); }, [overrides]);
+    var _g = __read(useOverrides(mergedOverrides.Menu, Menu), 2), MenuComponent = _g[0], menuProps = _g[1];
+    var _h = __read(useOverrides(mergedOverrides.NoResults, NoResults), 2), NoResultsOverriden = _h[0], noResultsProps = _h[1];
+    var menuItemOverrides = useMemo(function () { return ({
+        MenuItem: mergedOverrides.MenuItem,
+        ListItemText: mergedOverrides.ListItemText,
+    }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
+    var selectAllItem = shouldDisplaySelectAll ? groupedItems[UNGROUPED_ID][0] : null;
+    var clearAsOptionItem = !multi && clearAsOption ? groupedItems[UNGROUPED_ID][0] : null;
+    return (_jsxs(Box, __assign({ className: { borderRadius: 'inherit' } }, { children: [selectAllItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: selectAllItem, selected: selectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": selectAllItem, button: true }, baseuiMenuItemProps, { className: ['mt-1 mx-1', baseuiMenuItemProps === null || baseuiMenuItemProps === void 0 ? void 0 : baseuiMenuItemProps.className] }), "select-all-option")) : null, groupConfig.map(function (group) {
+                var _a;
+                var groupId = group.id;
+                var itemsInGroup = groupedItems[groupId];
+                return (_jsx(Collapsible, __assign({ group: group, expanded: selectAllSelected ? false : groupId === expandedGroupId, disabled: selectAllSelected, onClick: function (newGroupId) { return setExpandedGroupId(function (prev) { return (prev === newGroupId ? undefined : newGroupId); }); } }, { children: _isEmpty(itemsInGroup) ? (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, "aria-disabled": true, "$groupId": groupId }, noResultsProps), void 0)) : (_jsxs(MenuComponent, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, tabIndex: -1, selectOnTab: selectOnTab }, menuProps, { virtual: virtual, className: ['overflow-auto', { maxHeight: '200px' }, (_a = menuProps) === null || _a === void 0 ? void 0 : _a.className], onScroll: function (e) {
+                            $onPaginate === null || $onPaginate === void 0 ? void 0 : $onPaginate(e, groupId);
+                        } }, { children: [clearAsOptionItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: selectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": clearAsOptionItem, button: true }, baseuiMenuItemProps), "clear-option")) : null, itemsInGroup.map(function (item) {
+                                var selected = selectedValuesSet.has(item[valueKey]);
+                                return (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, button: true }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
+                            })] }), void 0)) }), groupId));
+            })] }), void 0));
+};

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

@@ -1,34 +1,4 @@
 import * as React from 'react';
-import { StatefulMenuProps as BaseStatefulMenuProps } from 'baseui/menu';
-import { MenuItemProps, MenuProps } from '../../menu';
-import { Override } from '../../overrides';
-import { SelectProps } from '../types';
-declare type PropsAddedByOverride = {
-    id?: string;
-    value: SelectProps['value'];
-    overrides?: {
-        Menu?: Override<MenuProps>;
-        MenuItem?: Override<MenuItemProps & {
-            $multi: boolean;
-            $item: unknown;
-            $labelKey: string;
-        }>;
-        NoResults?: Override<{}>;
-        Divider?: Override<{
-            title: string;
-        }>;
-        ListItemText?: Override<{
-            $multi: boolean;
-            $item: unknown;
-            $labelKey: string;
-        }>;
-    };
-    valueKey: string;
-    labelKey: string;
-    multi: SelectProps['multi'];
-    selectAllSelected: boolean;
-    noResultsMsg?: string;
-    captureScroll?: boolean;
-};
-declare const SelectMenuAdapter: (props: BaseStatefulMenuProps & PropsAddedByOverride) => React.ReactElement;
+import { MenuAdapterProps } from './types';
+declare const SelectMenuAdapter: (props: MenuAdapterProps) => 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, selectOnTab = props.selectOnTab;
     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' : "".concat(item[valueKey], "-").concat(item.__optgroup)));
+            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, selectOnTab: selectOnTab }, menuProps, { children: itemsToRender }), void 0));
 };
 export default SelectMenuAdapter;

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

@@ -26,17 +26,19 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                     disabled?: boolean | undefined;
                     endEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
                     highlighted?: boolean | undefined;
-                    onClick?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+                    onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
                     overrides?: {
                         ChildContainer?: Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
                         EndEnhancer?: Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
                         Root?: Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
                         StartEnhancer?: Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StatefulTooltip?: 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?: 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 +50,10 @@ 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;
+                    viewportAsBoundary?: boolean | 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/selectMenuAdapter/hooks/useGetExpandedGroup.d.ts

@@ -0,0 +1,6 @@
+import type { GroupConfig } from '../types';
+import type { Items } from 'baseui/menu/types';
+export declare const useGetExpandedGroup: ({ groupConfig, groupedItems, }: {
+    groupConfig: GroupConfig;
+    groupedItems: Items;
+}) => [string | undefined, React.Dispatch<React.SetStateAction<string | undefined>>];

package/esm/select/selectMenuAdapter/hooks/useGetExpandedGroup.js

@@ -0,0 +1,16 @@
+import { __read } from "tslib";
+import { useState } from 'react';
+export var useGetExpandedGroup = function (_a) {
+    var groupConfig = _a.groupConfig, groupedItems = _a.groupedItems;
+    var _b = __read(useState(groupConfig[0].id), 2), expandedGroupId = _b[0], setExpandedGroupId = _b[1];
+    // by default open very first group with non zero elements
+    var _c = __read(useState(false), 2), initialised = _c[0], setInitialised = _c[1];
+    if (!initialised) {
+        var validGroup = groupConfig.find(function (group) { var _a; return !!group.count || !!((_a = groupedItems[group.id]) === null || _a === void 0 ? void 0 : _a.length); });
+        if (validGroup) {
+            setExpandedGroupId(validGroup.id);
+            setInitialised(true);
+        }
+    }
+    return [expandedGroupId, setExpandedGroupId];
+};

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

@@ -0,0 +1,42 @@
+import { SelectProps } from '../types';
+import { Override } from '../../overrides';
+import { MenuItemProps, MenuProps } from '../../menu';
+import { StatefulMenuProps as BaseStatefulMenuProps } from 'baseui/menu/types';
+declare type PropsAddedByOverride = {
+    id?: string;
+    value: SelectProps['value'];
+    overrides?: {
+        Menu?: Override<MenuProps>;
+        MenuItem?: Override<MenuItemProps & {
+            $multi: boolean;
+            $item: unknown;
+            $labelKey: string;
+        }>;
+        NoResults?: Override<{}>;
+        Divider?: Override<{
+            title: string;
+        }>;
+        ListItemText?: Override<{
+            $multi: boolean;
+            $item: unknown;
+            $labelKey: string;
+        }>;
+    };
+    valueKey: string;
+    labelKey: string;
+    multi: SelectProps['multi'];
+    selectAllSelected: boolean;
+    shouldDisplaySelectAll?: boolean;
+    noResultsMsg?: string;
+    captureScroll?: boolean;
+    virtual?: boolean;
+    overscanCount?: number;
+    selectOnTab?: boolean;
+};
+export declare type MenuAdapterProps = BaseStatefulMenuProps & PropsAddedByOverride;
+export declare type GroupConfig = {
+    id: string;
+    label: string;
+    count?: number;
+}[];
+export {};

package/esm/select/selectMenuAdapter/types.js

@@ -0,0 +1 @@
+export {};

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,16 @@ 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;
+        popoverMinWidth: string;
     };
 }
 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

@@ -1,18 +1,29 @@
 import { SelectProps } from 'baseui/select';
 import * as React from 'react';
 import { SharedProps, Size } from './types';
+import { Value } from 'baseui/select/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 & {
+declare const InputContainer: ({ menuId, size, $value, $labelKey, placeholder, ...props }: SharedProps & {
     menuId: string;
     size: Size;
+    $value: Value;
+    $labelKey: string;
+    placeholder: string;
+} & {
+    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }) => JSX.Element;
 declare const Input: React.ForwardRefExoticComponent<SharedProps & {
     id: string;
     menuId: string;
+    placeholder: string;
+    $value: Value;
+    $labelKey: 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/esm/select/styled-component.js

@@ -1,12 +1,17 @@
 import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Select as BaseSelect, StyledInputContainer, StyledInput } from 'baseui/select';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as BaseSelect } from 'baseui/select';
 import * as React from 'react';
 import withThemeOverride from '../helpers/baseui/withThemeOverride';
 import { borderRadius } from '../helpers/longHandHelpers';
 import { useLocale } from '../locale';
 import MenuItem from '../menu/menu-item';
 import { styled } from '../style';
+import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import _omit from 'lodash/omit';
+import { useUID } from 'react-uid';
+import { HiddenElement } from './utils/hidden-element';
+import getInterpolatedString from 'baseui/helpers/i18n-interpolation';
 var StyledSelect = withThemeOverride(BaseSelect, function (theme) { return ({
     borders: {
         inputBorderRadius: theme.input.borderRadius,
@@ -30,24 +35,69 @@ var StyledSelect = withThemeOverride(BaseSelect, function (theme) { return ({
         inputEnhancerTextDisabled: theme.spr.text02,
     },
 }); });
-var NoResults = function (_a) {
+var NoResults = React.forwardRef(function (_a, ref) {
     var msg = _a.msg, props = __rest(_a, ["msg"]);
     var locale = useLocale();
-    return (_jsx(MenuItem, __assign({ button: false }, props, { children: msg || locale.select.noResultsMsg }), void 0));
-};
+    return (_jsx(MenuItem, __assign({ button: false, ref: ref }, props, { children: msg || locale.select.noResultsMsg }), void 0));
+});
+export var StyledInputContainer = 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 = 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,
+    };
+});
+export var StyledInput = 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, $disabled = props.$disabled;
+    return __assign({ color: 'inherit', lineHeight: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', letterSpacing: 'normal', width: !$searchable ? '1px' : $width || '100%', boxShadow: 'none', '::placeholder': {
+            color: 'transparent',
+        } }, ($disabled ? { '-webkit-text-fill-color': 'transparent' } : {}));
+});
 var DEFAULT_OVERLAY_WIDTH = '300px';
 var StyledOverlayContentContainer = styled('div', 'overflow-auto', function (_a, _b) {
     var px2rem = _a.px2rem;
     var $overlayWidth = _b.$overlayWidth;
     return (__assign({ width: $overlayWidth || DEFAULT_OVERLAY_WIDTH }, borderRadius('inherit')));
 });
+var getCommaSeparatedValues = function (value, labelKey, locale) {
+    var commaSeparatedValues = value === null || value === void 0 ? void 0 : value.map(function (val) { return val[labelKey]; }).join(',');
+    return value && value.length > 0
+        ? "".concat(getInterpolatedString(locale.select.selectedValuesPrefix, { values: commaSeparatedValues }))
+        : '';
+};
 var InputContainer = function (_a) {
-    var menuId = _a.menuId, size = _a.size, props = __rest(_a, ["menuId", "size"]);
-    return (_jsx(StyledInputContainer, __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));
+    var _b;
+    var menuId = _a.menuId, size = _a.size, $value = _a.$value, $labelKey = _a.$labelKey, placeholder = _a.placeholder, props = __rest(_a, ["menuId", "size", "$value", "$labelKey", "placeholder"]);
+    var locale = useLocale();
+    var commaSeparatedValues = getCommaSeparatedValues($value, $labelKey, locale);
+    var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
+    var selectedValuesId = useUID();
+    var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
+    var containerRef = React.useRef(null);
+    if (!props.$searchable) {
+        return (_jsxs(_Fragment, { children: [commaSeparatedValues ? _jsx(HiddenElement, __assign({ id: selectedValuesId }, { children: commaSeparatedValues }), void 0) : null, _jsx(StyledInputContainer, __assign({}, props, { "$selectSize": size, "aria-owns": props.$isOpen ? menuId : null, "aria-describedby": ariaDescribedBy, "aria-expanded": props.$isOpen, role: "combobox", ref: containerRef, "aria-placeholder": placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder, "aria-haspopup": "listbox" }, { children: props.children
+                        ? React.cloneElement(React.Children.only(props.children), { onFocus: function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } })
+                        : null }), void 0)] }, void 0));
+    }
+    else {
+        return _jsx(StyledInputContainer, __assign({}, props, { "$selectSize": size }), void 0);
+    }
 };
 var Input = React.forwardRef(function (_a, ref) {
-    var id = _a.id, menuId = _a.menuId, props = __rest(_a, ["id", "menuId"]);
-    return (_jsx(StyledInput, __assign({}, props, { id: id, "aria-controls": props.$searchable && props.$isOpen ? menuId : null, ref: ref }), void 0));
+    var _b;
+    var id = _a.id, menuId = _a.menuId, placeholder = _a.placeholder, $value = _a.$value, $labelKey = _a.$labelKey, props = __rest(_a, ["id", "menuId", "placeholder", "$value", "$labelKey"]);
+    var locale = useLocale();
+    var commaSeparatedValues = getCommaSeparatedValues($value, $labelKey, locale);
+    var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
+    var selectedValuesId = useUID();
+    var ariaDescribedBy = commaSeparatedValues || props['aria-label'] ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
+    return (_jsxs(_Fragment, { children: [commaSeparatedValues || props['aria-label'] ? (_jsx(HiddenElement, __assign({ id: selectedValuesId }, { children: "".concat(commaSeparatedValues, " ").concat(props['aria-label'] || '') }), void 0)) : null, _jsx(StyledInput, __assign({}, _omit(props, 'aria-label'), { id: id, "aria-controls": props.$searchable && props.$isOpen ? menuId : null, ref: ref, "aria-describedby": ariaDescribedBy, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder }), void 0)] }, void 0));
 });
-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/esm/select/types.d.ts

@@ -1,17 +1,26 @@
 import * as React from 'react';
-import { DropdownOverrides as BaseuiDropdownOverrides, DropdownProps as BaseDropdownProps, OnChangeParams as BaseOnChangeParams, Option, OptionsT, SelectOverrides as BaseuiSelectOverrides, SelectProps as BaseuiSelectProps, State, StateReducer } from 'baseui/select';
+import { OverridesDropdown as BaseuiDropdownOverrides, DropdownProps as BaseDropdownProps, Option, Options, SelectOverrides as BaseuiSelectOverrides, SelectProps as BaseuiSelectProps, State, StateReducer } from 'baseui/select';
 import { STATE_CHANGE_TYPE } from './constants';
 import { Override } from '../overrides';
 import { TagProps } from '../tag';
 import { Intent, SpacewebComponentProps } from '../types';
 import { PopoverProps } from '../popover/types';
 import { ValueOf } from '../utility-types';
-export declare type Size = 'sm' | 'md' | 'lg';
+import { Value } from 'baseui/select/types';
+/**
+ * lg size is deprecated. Please use md.
+ */
+export declare type Size = 'xxxs' | 'xs' | 'sm' | 'md' | 'lg';
 export declare type Type = 'select' | 'search';
 declare type OverridableComponent = keyof Omit<BaseuiSelectOverrides, 'Dropdown' | 'DropdownListItem' | 'DropdownOption'> | 'Menu' | 'MenuItem' | 'NoResults' | 'Divider' | 'ListItemText' | 'OverlayContentContainer';
 export declare type SelectActions = {
     setDropdownOpen?: (shouldOpen: boolean) => void;
 };
+export declare type OnChangeParams = {
+    value: Value;
+    option?: Option;
+    type?: ValueOf<typeof STATE_CHANGE_TYPE>;
+};
 export declare type BaseSelectProps = SpacewebComponentProps<Omit<BaseuiSelectProps, 'overrides' | 'size' | 'type' | 'onChange' | 'positive' | 'error'>> & {
     onChange?: (params: OnChangeParams) => unknown;
     intent?: Intent;
@@ -24,15 +33,31 @@ export declare type BaseSelectProps = SpacewebComponentProps<Omit<BaseuiSelectPr
     captureScroll?: boolean;
     placement?: PopoverProps['placement'];
     popoverMinWidth?: string;
-    methodsRef?: React.MutableRefObject<SelectActions>;
-    createOption?: (label: string) => OptionsT | Promise<OptionsT>;
-    onPaste?: (event: React.ClipboardEvent) => OptionsT | undefined;
+    createOption?: (label: string) => Options | Promise<Options>;
+    onPaste?: (event: React.ClipboardEvent) => Options | undefined;
+    virtual?: boolean;
+    ignoreBoundary?: boolean;
+    delimiter?: string;
+    clearAsOption?: boolean;
+    clearAsOptionLabel?: string;
+    selectOnTab?: boolean;
+    /**
+     * This is an internal prop being used in AsyncSelect. Not meant for consumer.
+     * If true, selectAll event won't return all options in values.
+     */
+    __selectAllShouldReturnAllOptions?: boolean;
+    /**
+     * This is an internal prop being used in AsyncSelect.
+     * Selected state of SelectAll option will be decided based on this prop if __selectAllShouldReturnAllOptions is true.
+     */
+    __selectAllSelected?: boolean;
 };
 declare type Merge<A, B> = Omit<A, keyof B> & B;
 export declare type OverlaySelectProps = Merge<BaseSelectProps, {
     type: 'overlay';
     overlayWidth?: string;
     children: PopoverProps['children'];
+    scrollContainer?: 'overlayContainer' | 'menuContainer';
 }>;
 export declare type MobileSelectProps = Merge<OverlaySelectProps, {
     type: 'mobile';
@@ -63,6 +88,7 @@ export declare type SharedProps = {
     $selected?: boolean;
     $isEmpty?: boolean;
     $size?: Size;
+    $selectSize?: Size;
 };
 export declare type DropdownProps = Omit<BaseDropdownProps, 'overrides' | 'size' | 'type'> & {
     overrides?: {
@@ -70,12 +96,13 @@ export declare type DropdownProps = Omit<BaseDropdownProps, 'overrides' | 'size'
     };
     type?: Type;
 };
-export declare type OnChangeParams = BaseOnChangeParams & {
-    type?: ValueOf<typeof STATE_CHANGE_TYPE>;
-};
 export declare const SELECT_ALL_ID = "__selectAll";
+export declare const CLEAR_OPTION_ID = "__clear";
 declare type RemoveValue = () => void;
 export declare type MultiValueProps = Omit<TagProps, 'overrides'> & SharedProps & {
+    $isContainerFocused?: boolean;
+    $valueByIdMap: Record<string, Option>;
+    $valueKey: string;
     value: Option;
     removeValue: RemoveValue;
     selectSize: Size;
@@ -88,4 +115,4 @@ export declare type MultiValueProps = Omit<TagProps, 'overrides'> & SharedProps
         } & Record<string, any>>;
     };
 };
-export type { TYPE, Option, Value, OptionsT, OptgroupsT, StateReducer, AutosizeInputProps, StatefulContainerProps, SelectState, AutosizeInputState, State as StatefulContainerState, } from 'baseui/select';
+export type { Option, Value, Options, Optgroups, StateReducer, ControlRef, ImperativeMethods, AutosizeInputProps, StatefulContainerProps, SelectState, AutosizeInputState, State as StatefulContainerState, } from 'baseui/select';

package/esm/select/types.js

@@ -1 +1,2 @@
 export var SELECT_ALL_ID = '__selectAll';
+export var CLEAR_OPTION_ID = '__clear';

package/esm/select/utils/default-filter-options.d.ts

@@ -1 +1,2 @@
-export { default as filterOptions } from 'baseui/select/utils/default-filter-options';
+import defaultFilterOptions from 'baseui/select/utils/default-filter-options';
+export declare const filterOptions: typeof defaultFilterOptions;

package/esm/select/utils/default-filter-options.js

@@ -1,2 +1,6 @@
+import { __assign } from "tslib";
 // todo: no deep import
-export { default as filterOptions } from 'baseui/select/utils/default-filter-options';
+import defaultFilterOptions from 'baseui/select/utils/default-filter-options';
+export var filterOptions = function (options, filterValue, excludeOptions, newProps) {
+    return defaultFilterOptions(options, filterValue, excludeOptions, __assign({ matchProp: 'label' }, newProps));
+};

package/esm/select/utils/hidden-element.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement, ReactNode } from 'react';
+declare const HiddenElement: ({ id, children }: {
+    id: string;
+    children?: ReactNode;
+}) => ReactElement;
+export { HiddenElement };

package/esm/select/utils/hidden-element.js

@@ -0,0 +1,16 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+var HiddenElement = function (_a) {
+    var id = _a.id, children = _a.children;
+    return (_jsx("div", __assign({ id: id, style: {
+            border: 0,
+            clip: 'rect(0 0 0 0)',
+            height: '0px',
+            margin: '-1px',
+            overflow: 'hidden',
+            padding: 0,
+            position: 'absolute',
+            width: '0px',
+        } }, { children: children }), void 0));
+};
+export { HiddenElement };

package/esm/select/utils/merge-options.d.ts

@@ -0,0 +1,2 @@
+import { Options, Value } from '../types';
+export declare function mergeOptions(valueKey: string, options1?: Options, options2?: Options): Value;