@sprinklrjs/spaceweb 10.1.0

package/select/overlaySelect/useOverlaySelectOverrides.js

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var react_1 = require("react");
+var box_1 = require("../../box");
+var longHandHelpers_1 = require("../../helpers/longHandHelpers");
+var loader_1 = require("../../loader");
+var overrides_1 = require("../../overrides");
+var search_1 = require("../../search");
+var style_1 = require("../../style");
+var overrides_2 = require("../overrides");
+var usePopover_1 = (0, tslib_1.__importDefault)(require("./usePopover"));
+var useStickyElement_1 = (0, tslib_1.__importDefault)(require("../../hooks/useStickyElement"));
+var useUpdateEffect_1 = (0, tslib_1.__importDefault)(require("../../hooks/useUpdateEffect"));
+var useAutoFocus = function (_a) {
+    var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(null), 2), inputElement = _b[0], setInputElement = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (inputRef) {
+            typeof inputRef === 'function'
+                ? inputRef(inputElement)
+                : (inputRef.current = inputElement);
+        }
+        if (autoFocus) {
+            /**
+             * When input is rendered inside popover, scroll jumps to top. passing preventScroll explicitly
+             */
+            inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus({ preventScroll: true });
+        }
+    }, [autoFocus, inputElement, inputRef]);
+    return [inputElement, setInputElement];
+};
+function SelectLoader() {
+    var direction = (0, style_1.useStyle)().direction;
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['flex items-center pl-3', direction !== 'rtl' ? 'pr-3' : 'pl-3'] }, { children: (0, jsx_runtime_1.jsx)(loader_1.Loader, { size: 14, variant: "clip" }, void 0) }), void 0));
+}
+var useSearchContainerHeight = function () {
+    var _a = (0, tslib_1.__read)((0, react_1.useState)(), 2), containerHeight = _a[0], setHeight = _a[1];
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(), 2), containerElement = _b[0], setContainerElement = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (containerElement) {
+            setHeight(containerElement.getBoundingClientRect().height);
+        }
+    }, [containerElement, setHeight]);
+    return { setContainerElement: setContainerElement, containerHeight: containerHeight };
+};
+/*
+ * These overrides are meant for OverlaySelect and not for BaseSelect
+ */
+var overridesToOmit = ['SelectContainer', 'Popover'];
+var useOverlaySelectOverrides = function (props) {
+    var closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, controlRef = props.controlRef, filterOptions = props.filterOptions, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _a = props.clearable, clearable = _a === void 0 ? true : _a, onFocus = props.onFocus, onBlur = props.onBlur, onCloseResetsInput = props.onCloseResetsInput;
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(''), 2), inputValue = _b[0], setInputValue = _b[1];
+    var _c = (0, usePopover_1.default)(props), popoverOpen = _c.popoverOpen, togglePopoverState = _c.togglePopoverState, closePopover = _c.closePopover, openPopover = _c.openPopover;
+    (0, useUpdateEffect_1.default)(function () {
+        if (!popoverOpen && onCloseResetsInput) {
+            setInputValue('');
+        }
+    }, [onCloseResetsInput, popoverOpen]);
+    var _d = (0, tslib_1.__read)(useAutoFocus({ autoFocus: autoFocus, inputRef: controlRef }), 2), inputElement = _d[0], setInputElement = _d[1];
+    var filterOptionsOverride = (0, react_1.useCallback)(function (options, _, excludeOptions, params) {
+        if (filterOptions) {
+            return filterOptions(options, inputValue, excludeOptions, params);
+        }
+        return options;
+    }, [filterOptions, inputValue]);
+    var handleInputChange = (0, react_1.useCallback)(function (e) {
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
+        setInputValue(e.target.value);
+    }, [onInputChange]);
+    // trigger a fake input change event (as if all text was deleted)
+    // reference: https://github.com/uber/baseweb/blob/master/src/input/base-input.js#L101
+    var handleOnClear = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (inputElement) {
+            (_b = (_a = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')) === null || _a === void 0 ? void 0 : _a.set) === null || _b === void 0 ? void 0 : _b.call(inputElement, '');
+            var event_1 = new Event('input', { bubbles: true, cancelable: true });
+            inputElement.dispatchEvent(event_1);
+            inputElement.focus();
+        }
+    }, [inputElement]);
+    var handleValuesChange = (0, react_1.useCallback)(function (params) {
+        if (closeOnSelect) {
+            closePopover();
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(params);
+    }, [closePopover, onChange, closeOnSelect]);
+    var _e = (0, useStickyElement_1.default)(), isSticky = _e.isSticky, setStickySentinelRef = _e.setStickySentinelRef;
+    var _f = useSearchContainerHeight(), containerHeight = _f.containerHeight, setContainerElement = _f.setContainerElement;
+    var memoizedOverrides = (0, react_1.useMemo)(function () { return ({
+        // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
+        Popover: {
+            component: overrides_2.OverlaySelectPopoverOverride,
+            props: {
+                setStickySentinelRef: setStickySentinelRef,
+            },
+        },
+        ControlContainer: {
+            component: search_1.Search,
+            props: {
+                value: inputValue,
+                onChange: handleInputChange,
+                inputRef: setInputElement,
+                placeholder: placeholder,
+                size: 'sm',
+                className: 'mx-4 w-auto',
+                overrides: {
+                    After: isLoading ? SelectLoader : function () { return null; },
+                    ClearIcon: {
+                        props: {
+                            onClick: handleOnClear,
+                        },
+                    },
+                },
+                autoFocus: true,
+                // override baseui's onKeyDown
+                onKeyDown: noop_1.default,
+                clearable: clearable,
+                onFocus: onFocus,
+                onBlur: onBlur,
+            },
+        },
+        Root: {
+            style: (function (_a) {
+                var theme = _a.theme, px2rem = _a.px2rem;
+                return ({
+                    paddingTop: px2rem(12),
+                    paddingBottom: px2rem(8),
+                    position: 'sticky',
+                    zIndex: 1,
+                    top: '0px',
+                    backgroundColor: theme.spr.popup,
+                    boxShadow: isSticky ? theme.spr.shadow01 : 'none',
+                });
+            }),
+            props: {
+                ref: setContainerElement,
+            },
+            component: searchable ? undefined : function () { return null; },
+        },
+        Menu: {
+            props: {
+                overrides: {
+                    List: {
+                        props: {
+                            overrides: {
+                                Root: {
+                                    style: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (searchable ? { paddingTop: 0 } : {})), (0, longHandHelpers_1.borderRadius)(0)), { overflow: 'visible' }),
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+        MenuItem: {
+            props: {
+                overrides: {
+                    ListItem: {
+                        props: {
+                            overrides: {
+                                Root: {
+                                    style: { scrollMarginTop: "".concat(containerHeight, "px") },
+                                },
+                            },
+                        },
+                    },
+                },
+                $closePopover: closePopover,
+            },
+        },
+    }); }, [
+        handleInputChange,
+        inputValue,
+        setInputElement,
+        placeholder,
+        isLoading,
+        searchable,
+        isSticky,
+        containerHeight,
+        setContainerElement,
+        setStickySentinelRef,
+        handleOnClear,
+        closePopover,
+        clearable,
+        onFocus,
+        onBlur,
+    ]);
+    var overrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(memoizedOverrides, (0, omit_1.default)(props.overrides, overridesToOmit)); }, [
+        memoizedOverrides,
+        props.overrides,
+    ]);
+    return {
+        overrides: overrides,
+        filterOptionsOverride: filterOptionsOverride,
+        handleValuesChange: handleValuesChange,
+        popoverOpen: popoverOpen,
+        closePopover: closePopover,
+        openPopover: openPopover,
+        togglePopoverState: togglePopoverState,
+    };
+};
+exports.default = useOverlaySelectOverrides;

package/select/overlaySelect/usePopover.d.ts

@@ -0,0 +1,8 @@
+import { OverlaySelectProps } from '../types';
+declare const usePopover: ({ startOpen, onOpen, onClose }: OverlaySelectProps) => {
+    popoverOpen: boolean;
+    togglePopoverState: () => void;
+    openPopover: () => void;
+    closePopover: () => void;
+};
+export default usePopover;

package/select/overlaySelect/usePopover.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useLatest_1 = require("../../hooks/useLatest");
+var useFirstMountState_1 = require("../../hooks/useFirstMountState");
+var usePopover = function (_a) {
+    var startOpen = _a.startOpen, onOpen = _a.onOpen, onClose = _a.onClose;
+    var isFirstMount = (0, useFirstMountState_1.useFirstMountState)();
+    var onOpenRef = (0, useLatest_1.useLatest)(onOpen);
+    var onCloseRef = (0, useLatest_1.useLatest)(onClose);
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(!!startOpen), 2), popoverOpen = _b[0], setPopoverState = _b[1];
+    var togglePopoverState = (0, react_1.useCallback)(function () { return setPopoverState(function (prev) { return !prev; }); }, []);
+    var closePopover = (0, react_1.useCallback)(function () { return setPopoverState(false); }, []);
+    var openPopover = (0, react_1.useCallback)(function () { return setPopoverState(true); }, []);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (!isFirstMount) {
+            popoverOpen ? (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef) : (_b = onCloseRef.current) === null || _b === void 0 ? void 0 : _b.call(onCloseRef);
+        }
+    }, [popoverOpen]);
+    return {
+        popoverOpen: popoverOpen,
+        togglePopoverState: togglePopoverState,
+        openPopover: openPopover,
+        closePopover: closePopover,
+    };
+};
+exports.default = usePopover;

package/select/overrides.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { StyleFn, StyleObject, Styles } from '../types';
+import { SharedProps } from './types';
+export declare const SelectArrow: ({ $isOpen, title, overrides, ...restProps }: {
+    [x: string]: any;
+    $isOpen: any;
+    title: any;
+    overrides: any;
+}) => React.ReactElement;
+export declare const getSearchIconContainerStyles: Styles;
+export declare const getSearchIconStyles: StyleFn<SharedProps>;
+export declare const getControlContainerStyles: Styles;
+export declare const getValueContainerStyles: Styles;
+export declare const getValueTypography: Styles;
+export declare const getSelectInputStyles: StyleFn;
+export declare const OverlaySelectPopoverOverride: ({ content, children: inputContainer, setStickySentinelRef }: {
+    content: any;
+    children: any;
+    setStickySentinelRef: any;
+}) => JSX.Element;
+export declare const selectMenuOverrides: {
+    readonly Menu: {
+        readonly props: {
+            readonly overrides: {
+                readonly List: {
+                    readonly props: {
+                        readonly overrides: {
+                            readonly Root: {
+                                readonly style: (_: any, { $maxHeight }: {
+                                    $maxHeight: any;
+                                }) => StyleObject;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    };
+    readonly MenuItem: {
+        readonly props: {
+            readonly overrides: {
+                readonly ListItem: {
+                    readonly props: {
+                        readonly overrides: {
+                            readonly Root: {
+                                readonly style: {
+                                    readonly wordBreak: "break-word";
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    };
+};

package/select/overrides.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectMenuOverrides = exports.OverlaySelectPopoverOverride = exports.getSelectInputStyles = exports.getValueTypography = exports.getValueContainerStyles = exports.getControlContainerStyles = exports.getSearchIconStyles = exports.getSearchIconContainerStyles = exports.SelectArrow = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var commonStyles_1 = require("../helpers/commonStyles");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var chevron_down_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-down"));
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var styled_components_1 = require("../input/styled-components");
+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;
+    switch ($intent) {
+        case 'default':
+        default: {
+            if ($isPseudoFocused || $isFocused)
+                return (0, longHandHelpers_1.borderColor)(theme.spr.interactive01);
+            if ($disabled)
+                return (0, longHandHelpers_1.borderColor)(theme.input.disabledBorderColor);
+            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.field)), { ':hover': (0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.border06)) });
+        }
+        case 'success':
+            return (0, longHandHelpers_1.borderColor)(theme.spr.supportSuccess);
+        case 'warning':
+            return (0, longHandHelpers_1.borderColor)(theme.spr.supportWarning);
+        case 'error':
+            return (0, longHandHelpers_1.borderColor)(theme.spr.supportError);
+    }
+};
+// Removing 'overrides' injected by baseweb
+var SelectArrow = function (_a) {
+    var $isOpen = _a.$isOpen, title = _a.title, overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["$isOpen", "title", "overrides"]);
+    return ((0, jsx_runtime_1.jsx)(chevron_down_1.default, (0, tslib_1.__assign)({ title: title, "$isOpen": $isOpen }, restProps, { className: [commonStyles_1.chevronStyles, 'ml-1 cursor-pointer', restProps === null || restProps === void 0 ? void 0 : restProps.className] }), void 0));
+};
+exports.SelectArrow = SelectArrow;
+exports.getSearchIconContainerStyles = ['flex relative items-center top-0 left-0 h-auto mr-2'];
+var getSearchIconStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var $isOpen = _b.$isOpen;
+    return ({
+        color: $isOpen ? theme.spr.interactive01 : 'currentColor',
+    });
+};
+exports.getSearchIconStyles = getSearchIconStyles;
+exports.getControlContainerStyles = [
+    styled_components_1.getInputStyles,
+    // Applying paddingX only. paddingY will be applied on ValueContainer.
+    'py-0 px-3 transition-none overflow-auto',
+    selectBorderColor,
+    commonStyles_1.transparentScrollbarStyles,
+    function (utils, props) {
+        var $multi = props.$multi, $isEmpty = props.$isEmpty, $type = props.$type;
+        // Override paddingLeft for multiSelect when values are selected
+        var shouldOverridePaddingLeft = $multi && !$isEmpty && $type !== 'search';
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderWidth)(utils.theme.borderWidth.default)), (shouldOverridePaddingLeft && { paddingLeft: utils.px2rem(2) })), { maxHeight: '120px' });
+    },
+];
+exports.getValueContainerStyles = [
+    // For single Select read theme values from theme.input, form multiSelect read theme values from theme.multiSelect
+    styled_components_1.getInputStyles,
+    // Applying paddingY only. paddingX will be applied on ControlContainer.
+    'px-0 self-start',
+    function (_a, _b) {
+        var theme = _a.theme;
+        var $multi = _b.$multi, $isEmpty = _b.$isEmpty, $size = _b.$size;
+        var multiSelectTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', $size, 'lg');
+        return $multi && !$isEmpty
+            ? {
+                paddingTop: multiSelectTheme.paddingY,
+                paddingBottom: multiSelectTheme.paddingY,
+            }
+            : {};
+    },
+];
+var getValueTypography = function (_a, _b) {
+    var theme = _a.theme;
+    var $selectSize = _b.$selectSize;
+    var _c = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, 'lg'), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
+    return { fontSize: fontSize, lineHeight: lineHeight, height: lineHeight };
+};
+exports.getValueTypography = getValueTypography;
+var getSelectInputStyles = function () { return ({
+    color: 'inherit',
+    lineHeight: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    letterSpacing: 'normal',
+}); };
+exports.getSelectInputStyles = getSelectInputStyles;
+// BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
+var OverlaySelectPopoverOverride = function (_a) {
+    var content = _a.content, inputContainer = _a.children, setStickySentinelRef = _a.setStickySentinelRef;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setStickySentinelRef }, void 0), inputContainer, typeof content === 'function' ? content() : content] }, void 0));
+};
+exports.OverlaySelectPopoverOverride = OverlaySelectPopoverOverride;
+exports.selectMenuOverrides = {
+    Menu: {
+        props: {
+            overrides: {
+                List: {
+                    props: {
+                        overrides: {
+                            Root: {
+                                style: function (_, _a) {
+                                    var $maxHeight = _a.$maxHeight;
+                                    return ({ maxHeight: $maxHeight, overflow: 'auto' });
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    },
+    MenuItem: {
+        props: {
+            overrides: {
+                ListItem: {
+                    props: {
+                        overrides: {
+                            Root: {
+                                style: {
+                                    wordBreak: 'break-word',
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    },
+};

package/select/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/select/index.js"
+}

package/select/select-variants.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SelectProps } from './types';
+export declare function MultiSelect(props: SelectProps): React.ReactElement;
+export declare function SingleSelect(props: SelectProps): React.ReactElement;

package/select/select-variants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleSelect = exports.MultiSelect = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var select_1 = (0, tslib_1.__importDefault)(require("./select"));
+function MultiSelect(props) {
+    return (0, jsx_runtime_1.jsx)(select_1.default, (0, tslib_1.__assign)({}, props, { multi: true }), void 0);
+}
+exports.MultiSelect = MultiSelect;
+function SingleSelect(props) {
+    return (0, jsx_runtime_1.jsx)(select_1.default, (0, tslib_1.__assign)({}, props, { multi: false }), void 0);
+}
+exports.SingleSelect = SingleSelect;

package/select/select.d.ts

@@ -0,0 +1,42 @@
+import { SelectProps } from './types';
+import defaultProps from './default-props';
+declare const Select: {
+    (props: SelectProps & typeof defaultProps): React.ReactElement;
+    defaultProps: {
+        autoFocus: boolean;
+        backspaceRemoves: boolean;
+        clearable: boolean;
+        closeOnSelect: boolean;
+        creatable: boolean;
+        deleteRemoves: boolean;
+        disabled: boolean;
+        error: boolean;
+        positive: boolean;
+        escapeClearsValue: boolean;
+        filterOptions: any;
+        filterOutSelected: boolean;
+        isLoading: boolean;
+        labelKey: string;
+        maxDropdownHeight: string;
+        multi: boolean;
+        onBlur: (...args: any[]) => void;
+        onBlurResetsInput: boolean;
+        onChange: (...args: any[]) => void;
+        onFocus: (...args: any[]) => void;
+        onInputChange: (...args: any[]) => void;
+        onCloseResetsInput: boolean;
+        onSelectResetsInput: boolean;
+        openOnClick: boolean;
+        startOpen: boolean;
+        options: import("baseui/select").OptionsT;
+        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;
+    };
+};
+export default Select;

package/select/select.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var base_select_1 = (0, tslib_1.__importDefault)(require("./base-select"));
+var overlaySelect_1 = (0, tslib_1.__importDefault)(require("./overlaySelect"));
+var mobileSelect_1 = (0, tslib_1.__importDefault)(require("./mobileSelect"));
+var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
+var context_1 = require("../form-control/context");
+var Select = function (props) {
+    var adaptedProps = (0, context_1.useContextualFormProps)(props);
+    switch (adaptedProps.type) {
+        case 'overlay':
+            return (0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+        case 'mobile':
+            return (0, jsx_runtime_1.jsx)(mobileSelect_1.default, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+        default:
+            return (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+    }
+};
+Select.defaultProps = default_props_1.default;
+exports.default = Select;

package/select/selectMenuAdapter/SelectMenuAdapter.d.ts

@@ -0,0 +1,34 @@
+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;
+export default SelectMenuAdapter;

package/select/selectMenuAdapter/SelectMenuAdapter.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var flatten_1 = (0, tslib_1.__importDefault)(require("lodash/flatten"));
+var isEmpty_1 = (0, tslib_1.__importDefault)(require("lodash/isEmpty"));
+var map_1 = (0, tslib_1.__importDefault)(require("lodash/map"));
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
+var list_1 = require("../../list");
+var menu_1 = require("../../menu");
+var overrides_1 = require("../../overrides");
+var typography_1 = require("../../typography");
+var constants_1 = require("../constants");
+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 removeUngroupedIfEmpty = function (groupedOptions) {
+    var _a;
+    if (!((_a = groupedOptions[constants_1.UNGROUPED_ID]) === null || _a === void 0 ? void 0 : _a.length)) {
+        return (0, omit_1.default)(groupedOptions, [constants_1.UNGROUPED_ID]);
+    }
+    return groupedOptions;
+};
+var SelectMenuAdapter = function (props) {
+    var _a, _b, _c, _d;
+    var id = props.id, groupedItems = props.items, overrides = props.overrides, _e = props.onItemSelect, onItemSelect = _e === void 0 ? noop_1.default : _e, value = props.value, valueKey = props.valueKey, labelKey = props.labelKey, multi = props.multi, selectAllSelected = props.selectAllSelected, noResultsMsg = props.noResultsMsg, captureScroll = props.captureScroll;
+    var 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') {
+        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;
+    }
+    if (typeof listOverride === 'object') {
+        baseuiMenuListProps = listOverride.props;
+    }
+    var mergedOverrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(overrides_2.selectMenuOverrides, overrides); }, [overrides]);
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.Menu, menu_1.Menu), 2), MenuOverriden = _f[0], menuProps = _f[1];
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.NoResults, styled_component_1.NoResults), 2), NoResultsOverriden = _g[0], noResultsProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides.Divider, list_1.Divider), 2), DividerOverriden = _h[0], dividerProps = _h[1];
+    var menuItemOverrides = (0, react_1.useMemo)(function () { return ({
+        MenuItem: mergedOverrides.MenuItem,
+        ListItemText: mergedOverrides.ListItemText,
+    }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
+    var itemsToRender = (0, flatten_1.default)(Object.keys(removeUngroupedIfEmpty(groupedItems)).map(function (itemGroup, index) {
+        var itemsInGroup = groupedItems[itemGroup];
+        var menuItems = itemsInGroup.map(function (item) {
+            var selected = selectedValuesSet.has(item[valueKey]) || (item[types_1.SELECT_ALL_ID] && selectAllSelected);
+            return ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, (0, tslib_1.__assign)({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
+        });
+        if (itemGroup !== constants_1.UNGROUPED_ID) {
+            menuItems.unshift((0, jsx_runtime_1.jsx)(DividerOverriden, (0, tslib_1.__assign)({ first: index === 0 }, dividerProps, { children: (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ variant: "l4", weight: "medium", className: "spr-text-03" }, { children: itemGroup }), void 0) }), "divider-".concat(itemGroup)));
+        }
+        return menuItems;
+    }));
+    if ((0, isEmpty_1.default)(itemsToRender)) {
+        itemsToRender = ((0, jsx_runtime_1.jsx)(NoResultsOverriden, (0, tslib_1.__assign)({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, "aria-disabled": true }, noResultsProps), void 0));
+    }
+    return (
+    // focusWhenNavigationEnabled false, or else it will remove focus from select input
+    (0, jsx_runtime_1.jsx)(MenuOverriden, (0, tslib_1.__assign)({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox" }, baseuiMenuListProps, { id: id }, menuProps, { children: itemsToRender }), void 0));
+};
+exports.default = SelectMenuAdapter;