@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/select/multi-value.d.ts

@@ -1,3 +1,47 @@
 import * as React from 'react';
-import { MultiValueProps } from './types';
-export default function MultiValue(props: MultiValueProps): React.ReactElement;
+import { TagProps } from '../tag';
+declare const MultiValue: React.ForwardRefExoticComponent<Omit<TagProps, "overrides"> & import("./types").SharedProps & {
+    $isContainerFocused?: boolean | undefined;
+    $valueByIdMap: Record<string, Readonly<{
+        [x: string]: any;
+        id?: import("./types").Id | undefined;
+        label?: React.ReactNode;
+        disabled?: boolean | undefined;
+        disabledTooltipConfig?: Omit<import("../tooltip").ActionableTooltipProps, "children"> | undefined;
+        clearableValue?: boolean | undefined;
+        isCreatable?: boolean | undefined;
+        __optgroup?: string | undefined;
+        searchTags?: string[] | undefined;
+        tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+        __closeOnSelect?: boolean | undefined;
+        __onSelectResetsInput?: boolean | undefined;
+        __groupSelectAll?: boolean | undefined;
+    }>>;
+    $valueKey: string;
+    value: Readonly<{
+        [x: string]: any;
+        id?: import("./types").Id | undefined;
+        label?: React.ReactNode;
+        disabled?: boolean | undefined;
+        disabledTooltipConfig?: Omit<import("../tooltip").ActionableTooltipProps, "children"> | undefined;
+        clearableValue?: boolean | undefined;
+        isCreatable?: boolean | undefined;
+        __optgroup?: string | undefined;
+        searchTags?: string[] | undefined;
+        tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+        __closeOnSelect?: boolean | undefined;
+        __onSelectResetsInput?: boolean | undefined;
+        __groupSelectAll?: boolean | undefined;
+    }>;
+    removeValue: () => void;
+    selectSize: import("./types").Size;
+    overrides?: {
+        Tag?: import("../overrides").Override<{
+            variant: "light";
+            intent: "default";
+            className: string;
+            onActionClick: () => void;
+        } & Record<string, any>> | undefined;
+    } | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export default MultiValue;

package/select/multi-value.js

@@ -3,37 +3,90 @@ 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 React = tslib_1.__importStar(require("react"));
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var overrides_1 = require("../overrides");
 var style_1 = require("../style");
 var tag_1 = require("../tag");
 var StyledTombstone_1 = require("../helpers/StyledTombstone");
 var constants_1 = require("./constants");
-function MultiValue(props) {
-    var _a, _b;
-    var _c = props.overrides, overrides = _c === void 0 ? {} : _c, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, $valueByIdMap = props.$valueByIdMap, $valueKey = props.$valueKey, $size = props.$size, $isContainerFocused = props.$isContainerFocused, restProps = (0, tslib_1.__rest)(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused"]);
-    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Tag, tag_1.Tag), 2), TagComponent = _d[0], tagProps = _d[1];
+var useCombinedRef_1 = tslib_1.__importDefault(require("../hooks/useCombinedRef"));
+var MultiValue = React.forwardRef(function (props, ref) {
+    var _a, _b, _c;
+    var _d = props.overrides, overrides = _d === void 0 ? {} : _d, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, $valueByIdMap = props.$valueByIdMap, $valueKey = props.$valueKey, $size = props.$size, $isContainerFocused = props.$isContainerFocused, restProps = tslib_1.__rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused"]);
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Tag, tag_1.Tag), 2), TagComponent = _e[0], tagProps = _e[1];
     var theme = (0, style_1.useStyle)().theme;
+    var tagRef = (0, react_1.useRef)();
+    var combinedRef = (0, useCombinedRef_1.default)(ref, tagRef);
     var multiSelectTheme = (0, react_1.useMemo)(function () { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', selectSize, (0, themeHelpers_1.getDefaultSize)(theme)); }, [selectSize, theme]);
+    var onActionClickHandler = (0, react_1.useCallback)(function (e) {
+        // Prevent click to bubble up to the container to avoid focus change on removing a tag
+        e.stopPropagation();
+        onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick(e);
+    }, [onActionClick]);
     var selectedValue = $valueByIdMap === null || $valueByIdMap === void 0 ? void 0 : $valueByIdMap[value[$valueKey]];
     var disabled = $disabled || (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[constants_1.CLEARABLE_KEY]) === false;
     var isLoading = (_a = value === null || value === void 0 ? void 0 : value[constants_1.LOADING_KEY]) !== null && _a !== void 0 ? _a : selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[constants_1.LOADING_KEY];
-    var tagMarginX = multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginX;
-    var tagMarginY = multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginY;
-    var tagSize = selectSize === 'xxxs' ? 'xxxs' : 'sm';
-    return ((0, jsx_runtime_1.jsx)(TagComponent, (0, tslib_1.__assign)({ variant: "light", intent: "default", "aria-label": "".concat(typeof restProps.children === 'string' ? "".concat(restProps.children, ", ") : '', "close by backspace"), tabIndex: $isContainerFocused ? 0 : -1, onActionClick: onActionClick, "$item": value, "$disabled": disabled, size: tagSize }, restProps, tagProps, { closeable: (_b = tagProps.closeable) !== null && _b !== void 0 ? _b : !disabled, overrides: (0, overrides_1.mergeOverrides)({
+    var tagThemeOverridesStyle = {};
+    if (multiSelectTheme) {
+        tagThemeOverridesStyle = tslib_1.__assign(tslib_1.__assign({}, ((multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginX) ? { marginInlineEnd: multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginX } : {})), ((multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginY)
+            ? { marginBlockStart: multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginY, marginBlockEnd: multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginY }
+            : {}));
+    }
+    var tagSize;
+    switch (selectSize) {
+        case 'small':
+        case 'medium':
+            tagSize = 'small';
+            break;
+        case 'xxxs':
+            tagSize = 'xxxs';
+            break;
+        case 'xs':
+        case 'sm':
+        case 'md':
+        case 'lg':
+        default:
+            tagSize = 'sm';
+            break;
+    }
+    var closeable = (_b = tagProps.closeable) !== null && _b !== void 0 ? _b : !disabled;
+    var tagSpacingClasses;
+    switch (selectSize) {
+        case 'xxxs':
+            tagSpacingClasses = 'mr-0.5 my-px';
+            break;
+        case 'xs':
+        case 'sm':
+        case 'md':
+        case 'lg':
+        case 'small':
+        case 'medium':
+        default:
+            tagSpacingClasses = 'mr-1 my-0.5';
+            break;
+    }
+    return ((0, jsx_runtime_1.jsx)(TagComponent, tslib_1.__assign({ ref: combinedRef, variant: "light", intent: "default", "aria-label": typeof restProps.children === 'string' ? restProps.children : '', tabIndex: -1, onActionClick: onActionClickHandler, "$item": value, "$disabled": disabled, size: tagSize }, restProps, tagProps, { closeable: closeable, overrides: (0, overrides_1.mergeOverrides)({
             Root: {
-                style: [
-                    'box-border',
-                    {
-                        marginRight: tagMarginX,
-                        marginBottom: tagMarginY,
-                        marginTop: tagMarginY,
-                        maxWidth: "calc(100% - ".concat(2 * parseInt(multiSelectTheme.tagMarginX, 10), "px)"),
-                    },
+                className: [
+                    'box-border max-w-[--sw-max-width]',
+                    disabled ? 'border-[--sw-border-color] forced-colors:border-disabled forced-colors:text-disabled' : '',
+                    theme.density === 'COMPACT' ? 'text-10 h-4.5 -mt-1 mb-0' : undefined,
+                    tagSpacingClasses,
+                    //@ts-ignore theme override support
+                    tagThemeOverridesStyle,
                 ],
+                style: {
+                    //@ts-ignore -- css variable declaration
+                    '--sw-max-width': "calc(100% - ".concat(2 * parseInt((_c = multiSelectTheme === null || multiSelectTheme === void 0 ? void 0 : multiSelectTheme.tagMarginX) !== null && _c !== void 0 ? _c : '4px'), "px)"),
+                    '--sw-border-color': theme.name.includes('dark') ? theme.spr.borderPrimary : theme.spr.borderInverse,
+                },
+                props: {
+                    // Tags should not have focus styles
+                    $isFocused: false,
+                },
             },
-            Action: { props: { tabIndex: $isContainerFocused ? 0 : -1 } },
-        }, tagProps.overrides) }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "multi-value-tombstone", className: "w-20 h-4 rounded-8" }, void 0)) : (props.children) }), void 0));
-}
+            Action: { props: { tabIndex: -1 } },
+        }, tagProps.overrides) }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "multi-value-tombstone", className: "w-20 h-4 rounded-8" })) : (props.children) })));
+});
 exports.default = MultiValue;

package/select/nested-select.d.ts

@@ -0,0 +1,92 @@
+import type { ReactElement } from 'react';
+import defaultProps from './default-props';
+import type { SelectProps, NestedSelectOptions } from './types';
+import type { SimpleUnionOmit } from '../type-utils';
+declare const NestedSelect: {
+    ({ options: allOptions, ...props }: SimpleUnionOmit<SelectProps, "options"> & Omit<{
+        autoFocus: boolean;
+        backspaceRemoves: boolean;
+        clearable: boolean;
+        creatable: boolean;
+        deleteRemoves: boolean;
+        disabled: boolean;
+        error: boolean;
+        positive: boolean;
+        escapeClearsValue: boolean;
+        filterOptions: ((options: import("./types").Value, filterValue: string, excludeOptions: import("./types").Value | null | undefined, a: {
+            valueKey: string;
+            labelKey: string;
+            filterOnlyCreated?: boolean | undefined;
+        }) => import("./types").Value) | null | undefined;
+        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("./types").Options;
+        overrides: {};
+        required: boolean;
+        searchable: boolean;
+        type: "overlay" | import("./types").Type | "mobile";
+        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;
+        expandLimitTagsOnFocus: boolean;
+    }, "value" | "options"> & {
+        options: NestedSelectOptions;
+    }): ReactElement;
+    displayName: string;
+    defaultProps: {
+        autoFocus: boolean;
+        backspaceRemoves: boolean;
+        clearable: boolean;
+        creatable: boolean;
+        deleteRemoves: boolean;
+        disabled: boolean;
+        error: boolean;
+        positive: boolean;
+        escapeClearsValue: boolean;
+        filterOptions: ((options: import("./types").Value, filterValue: string, excludeOptions: import("./types").Value | null | undefined, a: {
+            valueKey: string;
+            labelKey: string;
+            filterOnlyCreated?: boolean | undefined;
+        }) => import("./types").Value) | null | undefined;
+        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("./types").Options;
+        overrides: {};
+        required: boolean;
+        searchable: boolean;
+        type: "overlay" | import("./types").Type | "mobile";
+        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;
+        expandLimitTagsOnFocus: boolean;
+    };
+};
+export { NestedSelect };

package/select/nested-select.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NestedSelect = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+//libs
+var react_1 = require("react");
+//helpers
+var default_props_1 = tslib_1.__importDefault(require("./default-props"));
+var overrides_1 = require("../overrides");
+var useCombinedRef_1 = require("../hooks/useCombinedRef");
+var helpers_1 = require("../menu/helpers");
+//components
+var select_1 = tslib_1.__importDefault(require("./select"));
+var NestedSelectMenuAdapter_1 = tslib_1.__importDefault(require("./selectMenuAdapter/NestedSelectMenuAdapter"));
+var NestedSelect = function (_a) {
+    var allOptions = _a.options, props = tslib_1.__rest(_a, ["options"]);
+    var inputRef = (0, react_1.useRef)(null);
+    var drillInFocusVisibleRef = (0, react_1.useRef)(null);
+    var _b = tslib_1.__read((0, react_1.useState)(undefined), 2), currentParent = _b[0], setCurrentParent = _b[1];
+    var _c = (0, react_1.useMemo)(function () {
+        if (!currentParent) {
+            return { options: allOptions, grandParent: undefined, currentHeaderItem: undefined };
+        }
+        var results = (0, helpers_1.findParentAndChildren)(currentParent[props.valueKey], allOptions, props.valueKey, undefined);
+        if (!results) {
+            return { options: allOptions, grandParent: undefined, currentHeaderItem: undefined };
+        }
+        var _a = tslib_1.__read(results, 2), nestedOptions = _a[0], parent = _a[1];
+        return {
+            options: nestedOptions,
+            grandParent: parent,
+            currentHeaderItem: currentParent,
+        };
+    }, [allOptions, currentParent, props.valueKey]), options = _c.options, grandParent = _c.grandParent, currentHeaderItem = _c.currentHeaderItem;
+    var handleHeaderItemChange = (0, react_1.useCallback)(function (newParentItem) {
+        setCurrentParent(newParentItem);
+    }, []);
+    var nestedSelectOverrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            StatefulMenu: {
+                component: NestedSelectMenuAdapter_1.default,
+                props: {
+                    overrides: {
+                        SubMenu: {
+                            props: {
+                                currentHeaderItem: currentHeaderItem,
+                                onHeaderItemClick: function () { return handleHeaderItemChange(grandParent); },
+                                drillInFocusVisibleRef: drillInFocusVisibleRef,
+                                onItemSelect: function (item, event) {
+                                    if (item.nestedItems) {
+                                        drillInFocusVisibleRef.current = event != null && !event.isTrusted ? true : null;
+                                        handleHeaderItemChange(item);
+                                        setTimeout(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+                                    }
+                                },
+                                overrides: {
+                                    MenuItem: {
+                                        props: {
+                                            onClick: function (event) {
+                                                setTimeout(function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+                                                // stopping propagation to make sure select dropdown doesn't close on back row click.
+                                                event.stopPropagation();
+                                            },
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        }, props.overrides);
+    }, [handleHeaderItemChange, currentHeaderItem, grandParent, props.overrides]);
+    return ((0, jsx_runtime_1.jsx)(select_1.default, tslib_1.__assign({}, props, { options: options, overrides: nestedSelectOverrides, inputRef: (0, useCombinedRef_1.combineRefs)(inputRef, props.inputRef), hideSelectAll: true })));
+};
+exports.NestedSelect = NestedSelect;
+NestedSelect.displayName = 'NestedSelect';
+NestedSelect.defaultProps = default_props_1.default;

package/select/no-results-message.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent, ReactElement } from 'react';
+import { IconProps } from '../icon';
+export type NoResultsMessageProps = {
+    id?: string;
+    titleMessage: string;
+    description?: string;
+    Icon?: (props: IconProps) => ReactElement;
+} & ({
+    onButtonClick?: undefined;
+    buttonText?: undefined;
+} | {
+    onButtonClick: (event: MouseEvent<HTMLElement>) => any;
+    buttonText: string;
+});
+export declare const NoResultsMessage: ({ titleMessage, description, buttonText, id, Icon, onButtonClick, }: NoResultsMessageProps) => import("react/jsx-runtime").JSX.Element;

package/select/no-results-message.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoResultsMessage = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var box_1 = require("../box");
+var stack_1 = require("../stack");
+var typography_1 = require("../typography");
+var button_1 = require("../button");
+//icons
+var form_1 = tslib_1.__importDefault(require("../icon/components/form"));
+var NoResultsMessage = function (_a) {
+    var titleMessage = _a.titleMessage, description = _a.description, buttonText = _a.buttonText, id = _a.id, _b = _a.Icon, Icon = _b === void 0 ? form_1.default : _b, onButtonClick = _a.onButtonClick;
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "px-1 py-1.5 cursor-auto" }, { children: (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [(0, jsx_runtime_1.jsx)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-start flex-none items-center justify-center rounded-full h-12 w-12 spr-bg-secondary" }, { children: (0, jsx_runtime_1.jsx)(Icon, { size: 24 }) })), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 3 }, { children: [(0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 1, id: id }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ variant: "body-md", weight: "semibold", maxLines: 1 }, { children: titleMessage })), description && (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ variant: "body-sm" }, { children: description }))] })), onButtonClick ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ variant: "tertiary", size: "medium", onClick: onButtonClick }, { children: buttonText }))) : null] }))] })) })));
+};
+exports.NoResultsMessage = NoResultsMessage;

package/select/overlaySelect/OverlaySelect.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
-import { OverlaySelectProps } from '../types';
+import { type ReactElement } from 'react';
+import type { OverlaySelectProps } from '../types';
 declare const OverlaySelect: (props: OverlaySelectProps) => ReactElement;
 export default OverlaySelect;

package/select/overlaySelect/OverlaySelect.js

@@ -3,17 +3,17 @@ 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 omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
+var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 var overrides_1 = require("../../overrides");
 var popover_1 = require("../../popover");
-var base_select_1 = (0, tslib_1.__importDefault)(require("../base-select"));
+var base_select_1 = tslib_1.__importDefault(require("../base-select"));
 var styled_component_1 = require("../styled-component");
-var useOverlaySelectOverrides_1 = (0, tslib_1.__importDefault)(require("./hooks/useOverlaySelectOverrides"));
-var useScrollCapture_1 = (0, tslib_1.__importDefault)(require("../../hooks/useScrollCapture"));
-var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedRef"));
+var useOverlaySelectOverrides_1 = tslib_1.__importDefault(require("./hooks/useOverlaySelectOverrides"));
+var useScrollCapture_1 = tslib_1.__importDefault(require("../../hooks/useScrollCapture"));
+var useCombinedRef_1 = tslib_1.__importDefault(require("../../hooks/useCombinedRef"));
 var merge_options_1 = require("../utils/merge-options");
 var default_create_option_1 = require("../utils/default-create-option");
-var default_props_1 = (0, tslib_1.__importDefault)(require("../default-props"));
+var default_props_1 = tslib_1.__importDefault(require("../default-props"));
 // These props are handled by OverlaySelect itself and hence should not be passed to BaseSelect
 var propsToOmit = [
     'children',
@@ -38,22 +38,27 @@ var propsToOmit = [
     'ignoreBoundary',
     'scrollContainer',
     'options',
+    'startEnhancer',
+    'endEnhancer',
+    'startEnhancerButtonProps',
+    'endEnhancerButtonProps',
 ];
+var DEFAULT_OVERLAY_WIDTH = '300px';
 var OverlaySelect = function (props) {
     var _a, _b, _c;
-    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_a = props.overrides) === null || _a === void 0 ? void 0 : _a.OverlayContentContainer, styled_component_1.StyledOverlayContentContainer), 2), OverlayContentContainer = _d[0], overlayContentContainerProps = _d[1];
-    var _e = (0, tslib_1.__read)((0, react_1.useState)(null), 2), scrollElement = _e[0], setScrollElement = _e[1];
+    var _d = tslib_1.__read((0, overrides_1.useOverrides)((_a = props.overrides) === null || _a === void 0 ? void 0 : _a.OverlayContentContainer, styled_component_1.StyledOverlayContentContainer), 2), OverlayContentContainer = _d[0], overlayContentContainerProps = _d[1];
+    var _e = tslib_1.__read((0, react_1.useState)(null), 2), scrollElement = _e[0], setScrollElement = _e[1];
     var createdOptionsRef = (0, react_1.useRef)([]);
-    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, popover_1.Popover), 2), PopoverOverriden = _f[0], popoverProps = _f[1];
+    var _f = tslib_1.__read((0, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, popover_1.Popover), 2), PopoverOverriden = _f[0], popoverProps = _f[1];
     var setScrollTarget = (0, useScrollCapture_1.default)({ enabled: props.captureScroll });
     var combinedRef = (0, useCombinedRef_1.default)(setScrollElement, setScrollTarget, overlayContentContainerProps === null || overlayContentContainerProps === void 0 ? void 0 : overlayContentContainerProps.ref);
-    var _g = (0, useOverlaySelectOverrides_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { scrollElement: scrollElement })), popoverOpen = _g.popoverOpen, handleValuesChange = _g.handleValuesChange, overrides = _g.overrides, togglePopoverState = _g.togglePopoverState, closePopover = _g.closePopover, __inputValue = _g.__inputValue;
+    var _g = (0, useOverlaySelectOverrides_1.default)(tslib_1.__assign(tslib_1.__assign({}, props), { scrollElement: scrollElement })), popoverOpen = _g.popoverOpen, handleValuesChange = _g.handleValuesChange, overrides = _g.overrides, togglePopoverState = _g.togglePopoverState, closePopover = _g.closePopover, __inputValue = _g.__inputValue;
     var baseSelectProps = (0, omit_1.default)(props, propsToOmit);
     var propCreateOption = props.createOption;
-    var createOption = (0, react_1.useCallback)(function (label) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
+    var createOption = (0, react_1.useCallback)(function (label) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
         var createdOptions, _a;
         var _b;
-        return (0, tslib_1.__generator)(this, function (_c) {
+        return tslib_1.__generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
                     if (!propCreateOption) return [3 /*break*/, 2];
@@ -72,15 +77,13 @@ var OverlaySelect = function (props) {
             }
         });
     }); }, [propCreateOption, props.labelKey, props.valueKey]);
-    var allOptions = (0, react_1.useMemo)(function () {
-        return (0, merge_options_1.mergeOptions)(props.valueKey || default_props_1.default.valueKey, props.options, createdOptionsRef.current);
-    }, [props.valueKey, props.options]);
+    var allOptions = (0, react_1.useMemo)(function () { return (0, merge_options_1.mergeOptions)(props.valueKey || default_props_1.default.valueKey, props.options, createdOptionsRef.current); }, [props.valueKey, props.options]);
     if (props.disabled) {
         if (typeof props.children === 'function') {
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children({ isOpen: false }) }, void 0);
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children({ isOpen: false }) });
         }
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children }, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
     }
-    return ((0, jsx_runtime_1.jsx)(PopoverOverriden, (0, tslib_1.__assign)({ isOpen: popoverOpen, content: (0, jsx_runtime_1.jsx)(OverlayContentContainer, (0, tslib_1.__assign)({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef }, { children: (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, baseSelectProps, { createOption: createOption, onChange: handleValuesChange, overrides: overrides, __inputValue: __inputValue, type: "search", options: allOptions }), void 0) }), void 0), onClick: togglePopoverState, onClickOutside: closePopover, onEsc: closePopover, placement: (_c = props.placement) !== null && _c !== void 0 ? _c : 'bottom', focusLock: true, returnFocus: true, overrides: { Inner: { style: 'spr-ui-01' }, Arrow: { style: 'spr-ui-01' } }, mountNode: props.mountNode, ignoreBoundary: props.ignoreBoundary }, popoverProps, { children: props.children }), void 0));
+    return ((0, jsx_runtime_1.jsx)(PopoverOverriden, tslib_1.__assign({ isOpen: popoverOpen, content: (0, jsx_runtime_1.jsx)(OverlayContentContainer, tslib_1.__assign({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef, style: [{ '--sw-width': props.overlayWidth || DEFAULT_OVERLAY_WIDTH }, overlayContentContainerProps.style] }, { children: (0, jsx_runtime_1.jsx)(base_select_1.default, tslib_1.__assign({}, baseSelectProps, { createOption: createOption, onChange: handleValuesChange, overrides: overrides, __inputValue: __inputValue, type: "search", options: allOptions })) })), onClick: togglePopoverState, onClickOutside: closePopover, onEsc: closePopover, placement: (_c = props.placement) !== null && _c !== void 0 ? _c : 'bottom', focusLock: true, returnFocus: true, overrides: { Inner: { className: 'spr-ui-01' }, Arrow: { className: 'spr-ui-01' } }, mountNode: props.mountNode, ignoreBoundary: props.ignoreBoundary }, popoverProps, { children: props.children })));
 };
 exports.default = OverlaySelect;

package/select/overlaySelect/hooks/useControlRef.d.ts

@@ -1,5 +1,5 @@
 import { ControlRef } from '../../../baseui/select';
-declare type Params = {
+type Params = {
     openPopover: () => void;
     closePopover: () => void;
     inputElement: HTMLInputElement | HTMLDivElement | null;

package/select/overlaySelect/hooks/useOverlaySelectOverrides.d.ts

@@ -1,11 +1,7 @@
-import * as React from 'react';
-import { OnChangeParams, OverlaySelectProps } from '../../types';
-declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "children" | "type" | "overlayWidth" | "scrollContainer"> & {
+import type { OnChangeParams, OverlaySelectProps } from '../../types';
+declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "type" | "overlayWidth" | "scrollContainer"> & {
     type: "overlay";
     overlayWidth?: string | undefined;
-    children: React.ReactNode | ((args: {
-        isOpen: boolean;
-    }) => React.ReactNode);
     scrollContainer?: "overlayContainer" | "menuContainer" | undefined;
 } & {
     scrollElement: HTMLElement | null;