@sprinklrjs/spaceweb 11.0.0 → 12.14.4

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

@@ -8,7 +8,6 @@ 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';
@@ -40,8 +39,7 @@ var useAutoFocus = function (_a) {
     return [inputElement, setInputElement];
 };
 function SelectLoader() {
-    var direction = useStyle().direction;
-    return (_jsx(Box, __assign({ className: ['flex items-center pl-3', direction !== 'rtl' ? 'pr-3' : 'pl-3'] }, { children: _jsx(Loader, { size: 14, variant: "clip" }, void 0) }), void 0));
+    return (_jsx(Box, __assign({ className: ['flex items-center px-3'] }, { children: _jsx(Loader, { size: 14, variant: "clip" }, void 0) }), void 0));
 }
 var useSearchContainerHeight = function () {
     var _a = __read(useState(), 2), containerHeight = _a[0], setHeight = _a[1];
@@ -58,15 +56,15 @@ var useSearchContainerHeight = function () {
  */
 var overridesToOmit = ['SelectContainer', 'Popover'];
 var useOverlaySelectOverrides = function (props) {
-    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;
+    var closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, inputRef = props.inputRef, filterOptions = props.filterOptions, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _a = props.clearable, clearable = _a === void 0 ? true : _a, onFocus = props.onFocus, onBlur = props.onBlur, onCloseResetsInput = props.onCloseResetsInput, controlRef = props.controlRef, scrollElement = props.scrollElement, _b = props.scrollContainer, scrollContainer = _b === void 0 ? 'overlayContainer' : _b;
+    var _c = __read(useState(''), 2), inputValue = _c[0], setInputValue = _c[1];
+    var _d = usePopover(props), popoverOpen = _d.popoverOpen, togglePopoverState = _d.togglePopoverState, closePopover = _d.closePopover, openPopover = _d.openPopover;
     useUpdateEffect(function () {
         if (!popoverOpen && onCloseResetsInput) {
             setInputValue('');
         }
     }, [onCloseResetsInput, popoverOpen]);
-    var _d = __read(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _d[0], setInputElement = _d[1];
+    var _e = __read(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _e[0], setInputElement = _e[1];
     useControlRef(controlRef, { closePopover: closePopover, openPopover: openPopover, setInputValue: setInputValue, inputElement: inputElement });
     var filterOptionsOverride = useCallback(function (options, _, excludeOptions, params) {
         if (filterOptions) {
@@ -95,8 +93,8 @@ var useOverlaySelectOverrides = function (props) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(params);
     }, [closePopover, onChange, closeOnSelect]);
-    var _e = useStickyElement(), isSticky = _e.isSticky, setStickySentinelRef = _e.setStickySentinelRef;
-    var _f = useSearchContainerHeight(), containerHeight = _f.containerHeight, setContainerElement = _f.setContainerElement;
+    var _f = useStickyElement(), isSticky = _f.isSticky, setStickySentinelRef = _f.setStickySentinelRef;
+    var _g = useSearchContainerHeight(), containerHeight = _g.containerHeight, setContainerElement = _g.setContainerElement;
     var memoizedOverrides = useMemo(function () { return ({
         // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
         Popover: {
@@ -113,7 +111,7 @@ var useOverlaySelectOverrides = function (props) {
                 inputRef: setInputElement,
                 placeholder: placeholder,
                 size: 'sm',
-                className: 'mx-4 w-auto',
+                className: 'mx-3 w-auto',
                 overrides: {
                     After: isLoading ? SelectLoader : function () { return null; },
                     ClearIcon: {
@@ -151,14 +149,11 @@ var useOverlaySelectOverrides = function (props) {
             props: {
                 overrides: {
                     List: {
-                        props: {
-                            overrides: {
+                        props: __assign({ overrides: {
                                 Root: {
-                                    style: __assign(__assign(__assign({}, (searchable ? { paddingTop: 0 } : {})), borderRadius(0)), { overflow: 'visible' }),
+                                    style: __assign(__assign(__assign({}, (searchable ? { paddingTop: 0 } : {})), borderRadius(0)), (scrollContainer === 'menuContainer' ? {} : { overflow: 'visible' })),
                                 },
-                            },
-                            scrollElement: scrollElement,
-                        },
+                            } }, (scrollContainer === 'menuContainer' ? {} : { scrollElement: scrollElement })),
                     },
                 },
             },
@@ -195,6 +190,8 @@ var useOverlaySelectOverrides = function (props) {
         clearable,
         onFocus,
         onBlur,
+        scrollContainer,
+        scrollElement,
     ]);
     var overrides = useMemo(function () { return mergeOverrides(memoizedOverrides, _omit(props.overrides, overridesToOmit)); }, [memoizedOverrides, props.overrides]);
     return {

package/esm/select/overrides.d.ts

@@ -17,6 +17,9 @@ export declare const OverlaySelectPopoverOverride: ({ content, children: inputCo
     children: any;
     setStickySentinelRef: any;
 }) => JSX.Element;
+export declare const SingleValueTombstone: ({ $selectSize }: {
+    $selectSize: any;
+}) => JSX.Element;
 export declare const selectMenuOverrides: {
     readonly Menu: {
         readonly props: {

package/esm/select/overrides.js

@@ -1,10 +1,13 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { chevronStyles, transparentScrollbarStyles } from '../helpers/commonStyles';
-import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 import ChevronDown from '../icon/components/chevron-down';
 import { borderColor, borderWidth } from '../helpers/longHandHelpers';
 import { getInputStyles } from '../input/styled-components';
+import { StyledTombstone } from '../helpers/StyledTombstone';
+import { useStyle } from '../style';
+import { borderRadius as borderRadiusLongHandHelper } from '../helpers/longHandHelpers';
 var selectBorderColor = function (_a, _b) {
     var theme = _a.theme;
     var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c, $isPseudoFocused = _b.$isPseudoFocused, $isFocused = _b.$isFocused, $disabled = _b.$disabled;
@@ -41,14 +44,17 @@ export var getSearchIconStyles = function (_a, _b) {
 export var getControlContainerStyles = [
     getInputStyles,
     // Applying paddingX only. paddingY will be applied on ValueContainer.
-    'py-0 px-3 transition-none overflow-auto',
+    'py-0 transition-none overflow-auto',
     selectBorderColor,
     transparentScrollbarStyles,
     function (utils, props) {
-        var $multi = props.$multi, $isEmpty = props.$isEmpty, $type = props.$type;
+        var _a;
+        var $multi = props.$multi, $isEmpty = props.$isEmpty, $type = props.$type, $size = props.$size;
+        var borderRadius = ((_a = getComponentSizeTheme(utils.theme, 'input', $size, getDefaultSize(utils.theme))) === null || _a === void 0 ? void 0 : _a.borderRadius) ||
+            utils.theme.input.borderRadius;
         // Override paddingLeft for multiSelect when values are selected
         var shouldOverridePaddingLeft = $multi && !$isEmpty && $type !== 'search';
-        return __assign(__assign(__assign({}, borderWidth(utils.theme.borderWidth.default)), (shouldOverridePaddingLeft && { paddingLeft: utils.px2rem(2) })), { maxHeight: '120px' });
+        return __assign(__assign(__assign(__assign({}, borderWidth(utils.theme.borderWidth.default)), (shouldOverridePaddingLeft && { paddingLeft: utils.px2rem(2) })), { maxHeight: '120px' }), borderRadiusLongHandHelper(borderRadius));
     },
 ];
 export var getValueContainerStyles = [
@@ -59,11 +65,12 @@ export var getValueContainerStyles = [
     function (_a, _b) {
         var theme = _a.theme;
         var $multi = _b.$multi, $isEmpty = _b.$isEmpty, $size = _b.$size;
-        var multiSelectTheme = getComponentSizeTheme(theme, 'multiSelect', $size, 'md');
+        var multiSelectTheme = getComponentSizeTheme(theme, 'multiSelect', $size, getDefaultSize(theme));
         return $multi && !$isEmpty
             ? {
                 paddingTop: multiSelectTheme.paddingY,
                 paddingBottom: multiSelectTheme.paddingY,
+                paddingLeft: multiSelectTheme.paddingX,
             }
             : {};
     },
@@ -71,7 +78,7 @@ export var getValueContainerStyles = [
 export var getValueTypography = function (_a, _b) {
     var theme = _a.theme;
     var $selectSize = _b.$selectSize;
-    var _c = getComponentSizeTheme(theme, 'input', $selectSize, 'md'), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
+    var _c = getComponentSizeTheme(theme, 'input', $selectSize, getDefaultSize(theme)), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
     return { fontSize: fontSize, lineHeight: lineHeight, height: lineHeight };
 };
 // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
@@ -79,6 +86,12 @@ export var OverlaySelectPopoverOverride = function (_a) {
     var content = _a.content, inputContainer = _a.children, setStickySentinelRef = _a.setStickySentinelRef;
     return (_jsxs(_Fragment, { children: [_jsx("div", { ref: setStickySentinelRef }, void 0), inputContainer, typeof content === 'function' ? content() : content] }, void 0));
 };
+export var SingleValueTombstone = function (_a) {
+    var $selectSize = _a.$selectSize;
+    var theme = useStyle().theme;
+    var lineHeight = getComponentSizeTheme(theme, 'input', $selectSize, getDefaultSize(theme)).lineHeight;
+    return (_jsx(StyledTombstone, { "data-testid": "single-value-tombstone", className: ['w-24 rounded-8', { height: lineHeight }] }, void 0));
+};
 export var selectMenuOverrides = {
     Menu: {
         props: {

package/esm/select/select.d.ts

@@ -40,6 +40,7 @@ declare const Select: {
         valueKey: string;
         placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         virtual: boolean;
+        popoverMinWidth: string;
     };
 };
 export default Select;

package/esm/select/select.js

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

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

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { ReactElement, UIEvent } from 'react';
+import { MenuAdapterProps } from './types';
+import { MenuProps } from '../../menu';
+import type { GroupConfig } from './types';
+export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedItems, multi, labelKey, valueKey, onItemSelect, shouldDisplaySelectAll, selectAllSelected: selectAllChecked, noResultsMsg, $onPaginate, groupConfig, virtual, clearAsOption, selectOnTab, }: {
+    items: import("baseui/menu").Items;
+    initialState?: import("baseui/menu").InitialState | undefined;
+    stateReducer?: import("baseui/menu").StateReducerFn | undefined;
+    getRequiredItemProps?: import("baseui/menu").GetRequiredItemPropsFn | undefined;
+    onActiveDescendantChange?: ((id?: string | undefined) => unknown) | undefined;
+    onItemSelect?: import("baseui/menu").OnItemSelectFn | undefined;
+    rootRef?: import("baseui/menu").RootRef | undefined;
+    children?: ((a: import("baseui/menu").RenderProps) => React.ReactNode) | undefined;
+    typeAhead?: boolean | undefined;
+    addMenuToNesting?: ((ref: {
+        current: HTMLElement | null;
+    }) => void) | undefined;
+    removeMenuFromNesting?: ((ref: {
+        current: HTMLElement | null;
+    }) => void) | undefined;
+    getParentMenu?: ((ref: {
+        current: HTMLElement | null;
+    }) => {
+        current: HTMLElement | null;
+    } | null | undefined) | undefined;
+    getChildMenu?: ((ref: {
+        current: HTMLElement | null;
+    }) => {
+        current: HTMLElement | null;
+    } | null | undefined) | undefined;
+    nestedMenuHoverIndex?: number | undefined;
+    isNestedMenuVisible?: ((ref: {
+        current: HTMLElement | null;
+    }) => boolean) | undefined;
+} & import("baseui/menu").MenuProps & {
+    id?: string | undefined;
+    value: import("baseui/select").Value | undefined;
+    overrides?: {
+        Menu?: import("../../overrides").Override<MenuProps> | undefined;
+        MenuItem?: import("../../overrides").Override<Omit<import("../../list").ListItemProps, "overrides" | "onMouseEnter" | "onMouseLeave"> & {
+            getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
+            onMouseEnter?: (() => void) | undefined;
+            onMouseLeave?: (() => void) | undefined;
+            renderAll?: boolean | undefined;
+            overrides?: {
+                ListItem?: import("../../overrides").Override<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+                    $as?: React.ElementType<any> | undefined;
+                    className?: import("../..").Styles;
+                    style?: import("../..").Styles;
+                } & {
+                    alignItems?: import("../../list").AlignItems | undefined;
+                    autoFocus?: boolean | undefined;
+                    button?: boolean | undefined;
+                    children?: React.ReactNode;
+                    disabled?: boolean | undefined;
+                    endEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
+                    highlighted?: boolean | undefined;
+                    onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+                    overrides?: {
+                        ChildContainer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        EndEnhancer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        Root?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StartEnhancer?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                        StatefulTooltip?: import("../../overrides").Override<import("../../list").ListItemSharedProps & Record<string, any>> | undefined;
+                    } | undefined;
+                    selected?: boolean | undefined;
+                    startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
+                    tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
+                } & Record<string, any>> | undefined;
+                Popover?: import("../../overrides").Override<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
+                    overrides?: ({
+                        Body?: import("../../overrides").Override<any> | undefined;
+                        Arrow?: import("../../overrides").Override<any> | undefined;
+                        Inner?: import("../../overrides").Override<any> | undefined;
+                    } & {
+                        ArrowTriangle?: import("../../overrides").Override<any> | undefined;
+                    }) | undefined;
+                    children?: React.ReactNode | ((args: {
+                        isOpen: boolean;
+                    }) => React.ReactNode);
+                    targetElement?: HTMLElement | null | undefined;
+                    triggerType?: import("../../popover").TriggerType | undefined;
+                    placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+                    innerRef?: React.Ref<HTMLElement> | undefined;
+                    viewportAsBoundary?: boolean | undefined;
+                } & Record<string, any>> | undefined;
+            } | undefined;
+        } & {
+            $multi: boolean;
+            $item: unknown;
+            $labelKey: string;
+        }> | undefined;
+        NoResults?: import("../../overrides").Override<{}> | undefined;
+        Divider?: import("../../overrides").Override<{
+            title: string;
+        }> | undefined;
+        ListItemText?: import("../../overrides").Override<{
+            $multi: boolean;
+            $item: unknown;
+            $labelKey: string;
+        }> | undefined;
+    } | undefined;
+    valueKey: string;
+    labelKey: string;
+    multi: boolean | undefined;
+    selectAllSelected: boolean;
+    shouldDisplaySelectAll?: boolean | undefined;
+    noResultsMsg?: string | undefined;
+    captureScroll?: boolean | undefined;
+    virtual?: boolean | undefined;
+    overscanCount?: number | undefined;
+    selectOnTab?: boolean | undefined;
+} & {
+    $onPaginate?: ((event: UIEvent<HTMLElement>, itemGroup: string) => void) | undefined;
+    groupConfig: GroupConfig;
+    clearAsOption?: boolean | undefined;
+}) => ReactElement;

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,36 +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;
-    virtual?: boolean;
-    overscanCount?: number;
-};
-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

@@ -25,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, virtual = props.virtual, overscanCount = props.overscanCount;
+    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;
@@ -58,7 +58,7 @@ var SelectMenuAdapter = function (props) {
         var menuItems = itemsInGroup.flatMap(function (item) {
             currentCount += 1;
             var selected = selectedValuesSet.has(item[valueKey]) || (item[SELECT_ALL_ID] && selectAllSelected);
-            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]));
+            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;
@@ -73,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, virtual: virtual, overscanCount: overscanCount }, 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,15 +26,17 @@ 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, "children" | "overrides" | "triggerType" | "placement"> & {
                     overrides?: ({
@@ -51,6 +53,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                     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/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

@@ -40,6 +40,7 @@ declare namespace StatefulSelect {
         valueKey: string;
         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/styled-component.d.ts

@@ -1,6 +1,7 @@
 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: React.ForwardRefExoticComponent<{
     msg?: string | undefined;
@@ -8,13 +9,21 @@ declare const NoResults: React.ForwardRefExoticComponent<{
 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, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, } from 'baseui/select';
 export { StyledSelect, NoResults, StyledOverlayContentContainer, InputContainer, Input };