@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/select/selectMenuAdapter/CollapsibleSelectMenu.d.ts

@@ -0,0 +1,130 @@
+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: globalSelectAllChecked, noResultsMsg, $onPaginate, groupConfig, virtual, clearAsOption, selectOnTab, inputRef, disableWhenSelectAllChecked, deriveGroupItemCount, hideGroupSelectAll, }: {
+    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("..").Value | undefined;
+    overrides?: {
+        Menu?: import("../../overrides").Override<MenuProps> | undefined;
+        MenuItem?: import("../../overrides").Override<Omit<import("../../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
+            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("../../types").Styles;
+                    style?: import("../../types").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" | "placement" | "triggerType"> & {
+                    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;
+    inputRef?: React.RefObject<HTMLInputElement> | undefined;
+} & {
+    $onPaginate?: ((event: UIEvent<HTMLElement>, itemGroup: string) => void) | undefined;
+    groupConfig: GroupConfig;
+    clearAsOption?: boolean | undefined;
+    /**
+     * When set to true, if selectAllSelected is true it disables the option groups and collapses them
+     * default value false as set in case of GroupedSelect, true in case of GroupedAsyncSelect
+     */
+    disableWhenSelectAllChecked?: boolean | undefined;
+    /**
+     * When set to true, counts group items in groupConfig
+     * default true for GroupedSelect, false in case of GroupedAsyncSelect
+     */
+    deriveGroupItemCount?: boolean | undefined;
+    hideGroupSelectAll?: boolean | undefined;
+}) => ReactElement;

package/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleSelectMenu = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var isNumber_1 = (0, tslib_1.__importDefault)(require("lodash/isNumber"));
+var react_1 = require("react");
+var useGetExpandedGroup_1 = require("./hooks/useGetExpandedGroup");
+var box_1 = require("../../box");
+var menu_1 = require("../../menu");
+var typography_1 = require("../../typography");
+var SelectMenuItem_1 = (0, tslib_1.__importDefault)(require("./SelectMenuItem"));
+var map_1 = (0, tslib_1.__importDefault)(require("lodash/map"));
+var isEmpty_1 = (0, tslib_1.__importDefault)(require("lodash/isEmpty"));
+var overrides_1 = require("../../overrides");
+var overrides_2 = require("../overrides");
+var styled_component_1 = require("../styled-component");
+var constants_1 = require("../constants");
+var base_button_1 = require("../../base-button");
+var chevron_down_1 = (0, tslib_1.__importDefault)(require("../../icon/components/chevron-down"));
+var commonStyles_1 = require("../../helpers/commonStyles");
+var helpers_1 = require("../../menu/helpers");
+var collapse_1 = require("../../transitions/collapse");
+var constants_2 = require("../../baseui/select/constants");
+var locale_1 = require("../../locale");
+var Collapsible = function (_a) {
+    var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled, className = _a.className;
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: { borderRadius: 'inherit' } }, { children: [(0, jsx_runtime_1.jsxs)(base_button_1.BaseButton, (0, tslib_1.__assign)({ disabled: disabled, onClick: function () { return onClick(group.id); }, className: [
+                    'w-full flex justify-between items-center py-2 pl-3 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-0',
+                    className,
+                ], type: "button" }, { children: [(0, jsx_runtime_1.jsxs)(typography_1.Typography, (0, tslib_1.__assign)({ className: "block", variant: "h7" }, { children: [group.label, " ", (0, isNumber_1.default)(group.count) ? "(".concat(group.count, ")") : ''] }), void 0), (0, jsx_runtime_1.jsx)(chevron_down_1.default, { style: commonStyles_1.chevronStyles, "$isOpen": expanded, "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(collapse_1.Collapse, (0, tslib_1.__assign)({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }), void 0)] }), void 0));
+};
+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, globalSelectAllChecked = _a.selectAllSelected, noResultsMsg = _a.noResultsMsg, $onPaginate = _a.$onPaginate, groupConfig = _a.groupConfig, virtual = _a.virtual, clearAsOption = _a.clearAsOption, selectOnTab = _a.selectOnTab, inputRef = _a.inputRef, _f = _a.disableWhenSelectAllChecked, disableWhenSelectAllChecked = _f === void 0 ? false : _f, deriveGroupItemCount = _a.deriveGroupItemCount, hideGroupSelectAll = _a.hideGroupSelectAll;
+    var globalSelectAllSelected = !!shouldDisplaySelectAll && globalSelectAllChecked;
+    var _g = (0, tslib_1.__read)((0, useGetExpandedGroup_1.useGetExpandedGroup)({ groupConfig: groupConfig, groupedItems: groupedItems }), 2), expandedGroupId = _g[0], setExpandedGroupId = _g[1];
+    var isFirstItemHighlighted = (0, react_1.useRef)(false);
+    var isLastItemHighlighted = (0, react_1.useRef)(false);
+    var menuRef = (0, react_1.useRef)(null);
+    var selectedValuesSet = (0, react_1.useMemo)(function () {
+        var set = new Set((0, map_1.default)(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 = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(overrides_2.selectMenuOverrides, overrides); }, [overrides]);
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.Menu, menu_1.Menu), 2), MenuComponent = _h[0], menuProps = _h[1];
+    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.NoResults, styled_component_1.NoResults), 2), NoResultsOverriden = _j[0], noResultsProps = _j[1];
+    var menuItemOverrides = (0, react_1.useMemo)(function () { return ({
+        MenuItem: mergedOverrides.MenuItem,
+        ListItemText: mergedOverrides.ListItemText,
+    }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
+    (0, react_1.useEffect)(function () {
+        var inputElement = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+        var keydownHandler = function (event) {
+            var expandedGroupIndex = Math.max(groupConfig.findIndex(function (group) { return group.id === expandedGroupId; }), 0);
+            if (event.key === 'ArrowDown' && (event.shiftKey || isLastItemHighlighted.current)) {
+                setExpandedGroupId(groupConfig[Math.min(expandedGroupIndex + 1, groupConfig.length - 1)].id);
+                event.stopPropagation(); // prevents the menu to move to the second item of the next group
+            }
+            else if (event.key === 'ArrowUp' && (event.shiftKey || isFirstItemHighlighted.current)) {
+                setExpandedGroupId(groupConfig[Math.max(expandedGroupIndex - 1, 0)].id);
+            }
+        };
+        inputElement === null || inputElement === void 0 ? void 0 : inputElement.addEventListener('keydown', keydownHandler);
+        return function () {
+            inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener('keydown', keydownHandler);
+        };
+    }, [inputRef, expandedGroupId, groupConfig, setExpandedGroupId]);
+    var handleOnHighlightedItemChange = function (item) {
+        var _a, _b;
+        var nextHighlightableElement = (0, helpers_1.getNextItemIndexToHighlight)(item !== null && item !== void 0 ? item : null, menuRef.current, helpers_1.nextItem);
+        var prevHighlightableElement = (0, helpers_1.getNextItemIndexToHighlight)(item !== null && item !== void 0 ? item : null, menuRef.current, helpers_1.prevItem);
+        isFirstItemHighlighted.current = !!(item && (!item.previousSibling || item === prevHighlightableElement));
+        isLastItemHighlighted.current = !!(item && (!item.nextSibling || item === nextHighlightableElement));
+        (_b = (_a = menuProps) === null || _a === void 0 ? void 0 : _a.onHighlightedItemChange) === null || _b === void 0 ? void 0 : _b.call(_a, item);
+    };
+    var selectAllItem = shouldDisplaySelectAll ? groupedItems[constants_1.UNGROUPED_ID][0] : null;
+    var clearAsOptionItem = !multi && clearAsOption ? groupedItems[constants_1.UNGROUPED_ID][0] : null;
+    var locale = (0, locale_1.useLocale)().select;
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: { borderRadius: 'inherit' } }, { children: [selectAllItem ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__assign)({ overrides: menuItemOverrides, item: selectAllItem, selected: globalSelectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": selectAllItem, button: true, "data-testid": "universal-select-all" }, baseuiMenuItemProps, { className: ['mt-1 mx-1', baseuiMenuItemProps === null || baseuiMenuItemProps === void 0 ? void 0 : baseuiMenuItemProps.className] }), "select-all-option")) : null, groupConfig.map(function (_group, index) {
+                var _a;
+                var _b, _c, _d;
+                var groupId = _group.id;
+                var itemsInGroup = groupedItems[groupId];
+                var group = _group;
+                if (deriveGroupItemCount)
+                    group = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _group), { count: (_c = (_b = _group.count) !== null && _b !== void 0 ? _b : itemsInGroup === null || itemsInGroup === void 0 ? void 0 : itemsInGroup.length) !== null && _c !== void 0 ? _c : 0 });
+                var shouldDisplayGroupSelectAll = multi && !hideGroupSelectAll && group.count > 0;
+                var groupSelectAllSelected = globalSelectAllSelected ||
+                    (itemsInGroup === null || itemsInGroup === void 0 ? void 0 : itemsInGroup.every(function (item) { return selectedValuesSet.has(item[valueKey]) || item.disabled; }));
+                var countDisabledOptions = Array.isArray(itemsInGroup)
+                    ? itemsInGroup.reduce(function (acc, opt) { return (opt.disabled ? acc + 1 : acc); }, 0)
+                    : 0;
+                var groupSelectAllItem = (_a = {},
+                    _a[valueKey] = groupId,
+                    _a[labelKey] = "".concat(locale.selectAllLabel, " (").concat(group.count - countDisabledOptions, ")"),
+                    _a[constants_2.GROUP_SELECT_ALL_ID] = true,
+                    _a.selected = groupSelectAllSelected,
+                    _a);
+                return ((0, jsx_runtime_1.jsx)(Collapsible, (0, tslib_1.__assign)({ className: index === 0 && !selectAllItem ? 'border-t-0' : '', group: group, expanded: disableWhenSelectAllChecked && globalSelectAllSelected ? false : groupId === expandedGroupId, disabled: disableWhenSelectAllChecked && globalSelectAllSelected, onClick: function (newGroupId) { return setExpandedGroupId(function (prev) { return (prev === newGroupId ? undefined : newGroupId); }); } }, { children: (0, isEmpty_1.default)(itemsInGroup) ? ((0, jsx_runtime_1.jsx)(NoResultsOverriden, (0, tslib_1.__assign)({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, "aria-disabled": true, "$groupId": groupId }, noResultsProps), void 0)) : ((0, jsx_runtime_1.jsxs)(MenuComponent, (0, tslib_1.__assign)({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, tabIndex: -1, selectOnTab: selectOnTab }, menuProps, { virtual: virtual, className: ['overflow-auto', { maxHeight: '200px' }, (_d = menuProps) === null || _d === void 0 ? void 0 : _d.className], onScroll: function (e) {
+                            $onPaginate === null || $onPaginate === void 0 ? void 0 : $onPaginate(e, groupId);
+                        }, onHighlightedItemChange: handleOnHighlightedItemChange, ref: menuRef }, { children: [shouldDisplayGroupSelectAll ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__assign)({ overrides: menuItemOverrides, item: groupSelectAllItem, "data-testid": "".concat(group.label, "-group-select-all"), selected: groupSelectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": groupSelectAllItem, button: true, disabled: group.count <= countDisabledOptions }, baseuiMenuItemProps), "select-all-option")) : null, clearAsOptionItem ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__assign)({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: false, 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 ((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, button: true }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
+                            })] }), void 0)) }), groupId));
+            })] }), void 0));
+};
+exports.CollapsibleSelectMenu = CollapsibleSelectMenu;

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

@@ -17,7 +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 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)) {
@@ -27,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, virtual = props.virtual, overscanCount = props.overscanCount;
+    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, selectOnTab = props.selectOnTab;
     var selectedValuesSet = (0, react_1.useMemo)(function () {
         var set = new Set((0, map_1.default)(value, valueKey));
         return set;
@@ -60,7 +60,7 @@ var SelectMenuAdapter = function (props) {
         var menuItems = itemsInGroup.flatMap(function (item) {
             currentCount += 1;
             var selected = selectedValuesSet.has(item[valueKey]) || (item[types_1.SELECT_ALL_ID] && selectAllSelected);
-            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]));
+            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' : "".concat(item[valueKey], "-").concat(item.__optgroup)));
             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;
@@ -75,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, virtual: virtual, overscanCount: overscanCount }, 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, selectOnTab: selectOnTab }, menuProps, { children: itemsToRender }), void 0));
 };
 exports.default = SelectMenuAdapter;

package/select/selectMenuAdapter/SelectMenuItem.d.ts

@@ -8,7 +8,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     getItemLabel: (item: Record<string, any>) => React.ReactNode;
     onItemSelect: (item: Record<string, any>) => void;
     overrides?: {
-        MenuItem?: Override<Omit<import("../../list").ListItemProps, "overrides" | "onMouseEnter" | "onMouseLeave"> & {
+        MenuItem?: Override<Omit<import("../../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
             getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
             onMouseEnter?: (() => void) | undefined;
             onMouseLeave?: (() => void) | undefined;
@@ -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, "children" | "overrides" | "triggerType" | "placement"> & {
+                Popover?: Override<Omit<import("../../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({
                         Body?: Override<any> | undefined;
                         Arrow?: Override<any> | undefined;
@@ -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/select/selectMenuAdapter/SelectMenuItem.js

@@ -11,6 +11,7 @@ var menu_item_1 = (0, tslib_1.__importDefault)(require("../../menu/menu-item"));
 var overrides_1 = require("../../overrides");
 var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../../hooks/useUniqueId"));
 var types_1 = require("../types");
+var constants_1 = require("../../baseui/select/constants");
 var SelectMenuItem = React.forwardRef(function (_a, ref) {
     var _b;
     var item = _a.item, valueKey = _a.valueKey, overrides = _a.overrides, labelKey = _a.labelKey, multi = _a.multi, selected = _a.selected, getItemLabel = _a.getItemLabel, onItemSelect = _a.onItemSelect, restProps = (0, tslib_1.__rest)(_a, ["item", "valueKey", "overrides", "labelKey", "multi", "selected", "getItemLabel", "onItemSelect"]);
@@ -20,15 +21,17 @@ var SelectMenuItem = React.forwardRef(function (_a, ref) {
     var textOverrides = (_b = listItemTextProps) === null || _b === void 0 ? void 0 : _b.overrides;
     var listItemTextOverrides = (0, react_1.useMemo)(function () {
         return (0, overrides_1.mergeOverrides)({
-            PrimaryText: { props: { className: (0, classNames_1.default)({ 'font-semibold': item[types_1.SELECT_ALL_ID] }) } },
+            PrimaryText: {
+                props: { className: (0, classNames_1.default)({ 'font-semibold': item[types_1.SELECT_ALL_ID] || item[constants_1.GROUP_SELECT_ALL_ID] }) },
+            },
         }, textOverrides);
-    }, [item, valueKey, textOverrides]);
+    }, [item, textOverrides]);
     var id = (0, useUniqueId_1.default)();
     // 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 } }, Label: { style: 'hidden' } }, disabled: item.disabled, intent: "default" }, void 0));
-    }, [multi, selected, item.disabled, item[valueKey], id]);
+    }, [multi, selected, item.disabled, 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/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/select/selectMenuAdapter/hooks/useGetExpandedGroup.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetExpandedGroup = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useGetExpandedGroup = function (_a) {
+    var _b;
+    var groupConfig = _a.groupConfig, groupedItems = _a.groupedItems;
+    var _c = (0, tslib_1.__read)((0, react_1.useState)((_b = groupConfig[0]) === null || _b === void 0 ? void 0 : _b.id), 2), expandedGroupId = _c[0], setExpandedGroupId = _c[1];
+    // by default open very first group with non zero elements
+    var _d = (0, tslib_1.__read)((0, react_1.useState)(false), 2), initialised = _d[0], setInitialised = _d[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];
+};
+exports.useGetExpandedGroup = useGetExpandedGroup;

package/select/selectMenuAdapter/types.d.ts

@@ -0,0 +1,44 @@
+import { SelectProps } from '../types';
+import { Override } from '../../overrides';
+import { MenuItemProps, MenuProps } from '../../menu';
+import { StatefulMenuProps as BaseStatefulMenuProps } from '../../baseui/menu/types';
+import { RefObject } from 'react';
+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;
+    inputRef?: RefObject<HTMLInputElement>;
+};
+export declare type MenuAdapterProps = BaseStatefulMenuProps & PropsAddedByOverride;
+export declare type GroupConfig = {
+    id: string;
+    label: string;
+    count?: number;
+}[];
+export {};

package/select/selectMenuAdapter/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/select/stateful-select.d.ts

@@ -13,10 +13,11 @@ declare namespace StatefulSelect {
         error: boolean;
         positive: boolean;
         escapeClearsValue: boolean;
-        filterOptions: ((options: import("baseui/select").Value, filterValue: string, excludeOptions: import("baseui/select").Value | null | undefined, a: {
+        filterOptions: ((options: import("./types").Value, filterValue: string, excludeOptions: import("./types").Value | null | undefined, a: {
             valueKey: string;
             labelKey: string;
-        }) => import("baseui/select").Value) | null | undefined;
+            filterOnlyCreated?: boolean | undefined;
+        }) => import("./types").Value) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
         labelKey: string;
@@ -31,15 +32,16 @@ declare namespace StatefulSelect {
         onSelectResetsInput: boolean;
         openOnClick: boolean;
         startOpen: boolean;
-        options: import("baseui/select").Options;
+        options: import("./types").Options;
         overrides: {};
         required: boolean;
         searchable: boolean;
         type: "overlay" | import("./types").Type | "mobile";
-        value: import("baseui/select").Value;
+        value: import("./types").Value;
         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/select/stateful-select.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var select_1 = require("baseui/select");
+var select_1 = require("../baseui/select");
 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"));

package/select/styled-component.d.ts

@@ -1,20 +1,28 @@
-import { SelectProps } from 'baseui/select';
 import * as React from 'react';
 import { SharedProps, Size } from './types';
-declare const StyledSelect: React.ComponentType<SelectProps>;
+import { Value } from '../baseui/select/types';
 declare const NoResults: React.ForwardRefExoticComponent<{
     msg?: string | undefined;
 } & 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, $limitTags, ...props }: SharedProps & {
     menuId: string;
     size: Size;
-}) => JSX.Element;
+    $value: Value;
+    $labelKey: string;
+    placeholder: string;
+} & {
+    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
 declare const Input: React.ForwardRefExoticComponent<SharedProps & {
     id: string;
-    menuId: 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 };
+export declare const LoadingIndicator: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, } from '../baseui/select';
+export { NoResults, StyledOverlayContentContainer, InputContainer, Input };