@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/select/multi-value.js

@@ -3,27 +3,37 @@ 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 longHandHelpers_1 = require("../helpers/longHandHelpers");
 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;
-    var _b = props.overrides, overrides = _b === void 0 ? {} : _b, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, restProps = (0, tslib_1.__rest)(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled"]);
-    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Tag, tag_1.Tag), 2), TagComponent = _c[0], tagProps = _c[1];
+    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 theme = (0, style_1.useStyle)().theme;
-    var multiSelectTheme = (0, react_1.useMemo)(function () { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', selectSize, 'lg'); }, [
-        selectSize,
-        theme,
-    ]);
-    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: 0, onActionClick: onActionClick, "$item": value, "$disabled": $disabled }, restProps, tagProps, { closeable: (_a = tagProps.closeable) !== null && _a !== void 0 ? _a : !$disabled, overrides: (0, overrides_1.mergeOverrides)({
+    var multiSelectTheme = (0, react_1.useMemo)(function () { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', selectSize, (0, themeHelpers_1.getDefaultSize)(theme)); }, [selectSize, theme]);
+    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)({
             Root: {
                 style: [
                     'box-border',
-                    (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (theme.multiSelect.tagBorderRadius && (0, longHandHelpers_1.borderRadius)(theme.multiSelect.tagBorderRadius))), { marginRight: multiSelectTheme.tagMarginX, marginLeft: multiSelectTheme.tagMarginX, marginTop: multiSelectTheme.tagMarginY, marginBottom: multiSelectTheme.tagMarginY, height: multiSelectTheme.tagHeight, maxWidth: "calc(100% - ".concat(2 * parseInt(multiSelectTheme.tagMarginX, 10), "px)") }),
+                    {
+                        marginRight: tagMarginX,
+                        marginBottom: tagMarginY,
+                        marginTop: tagMarginY,
+                        maxWidth: "calc(100% - ".concat(2 * parseInt(multiSelectTheme.tagMarginX, 10), "px)"),
+                    },
                 ],
             },
-        }, tagProps.overrides) }, { children: props.children }), void 0));
+            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));
 }
 exports.default = MultiValue;

package/select/overlaySelect/OverlaySelect.js

@@ -8,7 +8,7 @@ var overrides_1 = require("../../overrides");
 var popover_1 = require("../../popover");
 var base_select_1 = (0, tslib_1.__importDefault)(require("../base-select"));
 var styled_component_1 = require("../styled-component");
-var useOverlaySelectOverrides_1 = (0, tslib_1.__importDefault)(require("./useOverlaySelectOverrides"));
+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"));
 // These props are handled by OverlaySelect itself and hence should not be passed to BaseSelect
@@ -19,6 +19,7 @@ var propsToOmit = [
     'onChange',
     'startOpen',
     'searchable',
+    'inputRef',
     'controlRef',
     'autoFocus',
     'placeholder',
@@ -32,26 +33,17 @@ var propsToOmit = [
     'captureScroll',
     'placement',
     'methodsRef',
+    'ignoreBoundary',
+    'scrollContainer',
 ];
 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, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, popover_1.Popover), 2), PopoverOverriden = _e[0], popoverProps = _e[1];
+    var _e = (0, tslib_1.__read)((0, react_1.useState)(null), 2), scrollElement = _e[0], setScrollElement = _e[1];
+    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 setScrollTarget = (0, useScrollCapture_1.default)({ enabled: props.captureScroll });
-    var combinedRef = (0, useCombinedRef_1.default)(setScrollTarget, overlayContentContainerProps === null || overlayContentContainerProps === void 0 ? void 0 : overlayContentContainerProps.ref);
-    var _f = (0, useOverlaySelectOverrides_1.default)(props), popoverOpen = _f.popoverOpen, filterOptionsOverride = _f.filterOptionsOverride, handleValuesChange = _f.handleValuesChange, overrides = _f.overrides, togglePopoverState = _f.togglePopoverState, closePopover = _f.closePopover, openPopover = _f.openPopover;
-    (0, react_1.useEffect)(function () {
-        if (props.methodsRef) {
-            props.methodsRef.current = {
-                setDropdownOpen: function (shouldOpen) {
-                    if (shouldOpen)
-                        openPopover();
-                    else
-                        closePopover();
-                },
-            };
-        }
-    }, [openPopover, closePopover]);
+    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, filterOptionsOverride = _g.filterOptionsOverride, handleValuesChange = _g.handleValuesChange, overrides = _g.overrides, togglePopoverState = _g.togglePopoverState, closePopover = _g.closePopover;
     var baseSelectProps = (0, omit_1.default)(props, propsToOmit);
     if (props.disabled) {
         if (typeof props.children === 'function') {
@@ -59,6 +51,6 @@ var OverlaySelect = function (props) {
         }
         return 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, { filterOptions: filterOptionsOverride, onChange: handleValuesChange, overrides: overrides, type: "search" }), 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 }, popoverProps, { children: props.children }), void 0));
+    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, { filterOptions: filterOptionsOverride, onChange: handleValuesChange, overrides: overrides, type: "search" }), 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));
 };
 exports.default = OverlaySelect;

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

@@ -0,0 +1,9 @@
+import { ControlRef } from 'baseui/select';
+declare type Params = {
+    openPopover: () => void;
+    closePopover: () => void;
+    inputElement: HTMLInputElement | HTMLDivElement | null;
+    setInputValue: (val: string) => void;
+};
+export declare const useControlRef: (controlRef: ControlRef | undefined, { openPopover, closePopover, inputElement, setInputValue }: Params) => void;
+export {};

package/select/overlaySelect/hooks/useControlRef.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControlRef = void 0;
+var react_1 = require("react");
+var useControlRef = function (controlRef, _a) {
+    var openPopover = _a.openPopover, closePopover = _a.closePopover, inputElement = _a.inputElement, setInputValue = _a.setInputValue;
+    (0, react_1.useEffect)(function () {
+        if (!controlRef) {
+            return undefined;
+        }
+        controlRef.current = {
+            setDropdownOpen: function (shouldOpen) {
+                if (shouldOpen)
+                    openPopover();
+                else
+                    closePopover();
+            },
+            setInputValue: setInputValue,
+            blur: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.blur();
+            },
+            focus: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus();
+            },
+            setInputBlur: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.blur();
+            },
+            setInputFocus: function () {
+                inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus();
+            },
+        };
+        return function () {
+            controlRef.current = null;
+        };
+    }, [openPopover, closePopover, controlRef, setInputValue, inputElement]);
+};
+exports.useControlRef = useControlRef;

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { OnChangeParams, OverlaySelectProps } from '../../types';
+declare const useOverlaySelectOverrides: (props: Omit<import("../../types").BaseSelectProps, "children" | "type" | "overlayWidth" | "scrollContainer"> & {
+    type: "overlay";
+    overlayWidth?: string | undefined;
+    children: React.ReactNode | ((args: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+    scrollContainer?: "overlayContainer" | "menuContainer" | undefined;
+} & {
+    scrollElement: HTMLElement | null;
+}) => {
+    overrides: import("../../../overrides").OverridesObject<any>;
+    filterOptionsOverride: (options: import("baseui/select/types").Value, filterValue: string, excludeOptions: import("baseui/select/types").Value | null | undefined, a: {
+        valueKey: string;
+        labelKey: string;
+    }) => import("baseui/select/types").Value;
+    handleValuesChange: (params: OnChangeParams) => void;
+    popoverOpen: boolean;
+    closePopover: () => void;
+    openPopover: () => void;
+    togglePopoverState: () => void;
+};
+export default useOverlaySelectOverrides;

package/select/overlaySelect/{useOverlaySelectOverrides.js → hooks/useOverlaySelectOverrides.js}

@@ -5,16 +5,16 @@ 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 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 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 useStickyElement_1 = (0, tslib_1.__importDefault)(require("../../../hooks/useStickyElement"));
+var useUpdateEffect_1 = (0, tslib_1.__importDefault)(require("../../../hooks/useUpdateEffect"));
+var useControlRef_1 = require("./useControlRef");
 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];
@@ -30,12 +30,18 @@ var useAutoFocus = function (_a) {
              */
             inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus({ preventScroll: true });
         }
+        return function () {
+            if (inputRef) {
+                typeof inputRef === 'function'
+                    ? inputRef(null)
+                    : (inputRef.current = null);
+            }
+        };
     }, [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));
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['flex items-center px-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];
@@ -52,15 +58,16 @@ var useSearchContainerHeight = function () {
  */
 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;
+    var closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, inputRef = props.inputRef, filterOptions = props.filterOptions, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _a = props.clearable, clearable = _a === void 0 ? true : _a, onFocus = props.onFocus, onBlur = props.onBlur, onCloseResetsInput = props.onCloseResetsInput, controlRef = props.controlRef, scrollElement = props.scrollElement, _b = props.scrollContainer, scrollContainer = _b === void 0 ? 'overlayContainer' : _b;
+    var _c = (0, tslib_1.__read)((0, react_1.useState)(''), 2), inputValue = _c[0], setInputValue = _c[1];
+    var _d = (0, usePopover_1.default)(props), popoverOpen = _d.popoverOpen, togglePopoverState = _d.togglePopoverState, closePopover = _d.closePopover, openPopover = _d.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 _e = (0, tslib_1.__read)(useAutoFocus({ autoFocus: autoFocus, inputRef: inputRef }), 2), inputElement = _e[0], setInputElement = _e[1];
+    (0, useControlRef_1.useControlRef)(controlRef, { closePopover: closePopover, openPopover: openPopover, setInputValue: setInputValue, inputElement: inputElement });
     var filterOptionsOverride = (0, react_1.useCallback)(function (options, _, excludeOptions, params) {
         if (filterOptions) {
             return filterOptions(options, inputValue, excludeOptions, params);
@@ -88,8 +95,8 @@ var useOverlaySelectOverrides = function (props) {
         }
         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 _f = (0, useStickyElement_1.default)(), isSticky = _f.isSticky, setStickySentinelRef = _f.setStickySentinelRef;
+    var _g = useSearchContainerHeight(), containerHeight = _g.containerHeight, setContainerElement = _g.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: {
@@ -106,7 +113,7 @@ var useOverlaySelectOverrides = function (props) {
                 inputRef: setInputElement,
                 placeholder: placeholder,
                 size: 'sm',
-                className: 'mx-4 w-auto',
+                className: 'mx-3 w-auto',
                 overrides: {
                     After: isLoading ? SelectLoader : function () { return null; },
                     ClearIcon: {
@@ -115,7 +122,6 @@ var useOverlaySelectOverrides = function (props) {
                         },
                     },
                 },
-                autoFocus: true,
                 // override baseui's onKeyDown
                 onKeyDown: noop_1.default,
                 clearable: clearable,
@@ -145,13 +151,11 @@ var useOverlaySelectOverrides = function (props) {
             props: {
                 overrides: {
                     List: {
-                        props: {
-                            overrides: {
+                        props: (0, tslib_1.__assign)({ 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' }),
+                                    style: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (searchable ? { paddingTop: 0 } : {})), (0, longHandHelpers_1.borderRadius)(0)), (scrollContainer === 'menuContainer' ? {} : { overflow: 'visible' })),
                                 },
-                            },
-                        },
+                            } }, (scrollContainer === 'menuContainer' ? {} : { scrollElement: scrollElement })),
                     },
                 },
             },
@@ -188,11 +192,10 @@ var useOverlaySelectOverrides = function (props) {
         clearable,
         onFocus,
         onBlur,
+        scrollContainer,
+        scrollElement,
     ]);
-    var overrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(memoizedOverrides, (0, omit_1.default)(props.overrides, overridesToOmit)); }, [
-        memoizedOverrides,
-        props.overrides,
-    ]);
+    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,

package/select/overlaySelect/{usePopover.d.ts → hooks/usePopover.d.ts}

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

package/select/overlaySelect/{usePopover.js → hooks/usePopover.js}

@@ -2,8 +2,8 @@
 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 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)();

package/select/overrides.d.ts

@@ -12,12 +12,14 @@ 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 SingleValueTombstone: ({ $selectSize }: {
+    $selectSize: any;
+}) => JSX.Element;
 export declare const selectMenuOverrides: {
     readonly Menu: {
         readonly props: {

package/select/overrides.js

@@ -1,6 +1,6 @@
 "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;
+exports.selectMenuOverrides = exports.SingleValueTombstone = exports.OverlaySelectPopoverOverride = 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");
@@ -8,6 +8,9 @@ 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 StyledTombstone_1 = require("../helpers/StyledTombstone");
+var style_1 = require("../style");
+var longHandHelpers_2 = require("../helpers/longHandHelpers");
 var selectBorderColor = function (_a, _b) {
     var theme = _a.theme;
     var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c, $isPseudoFocused = _b.$isPseudoFocused, $isFocused = _b.$isFocused, $disabled = _b.$disabled;
@@ -46,14 +49,17 @@ 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',
+    'py-0 transition-none overflow-auto',
     selectBorderColor,
     commonStyles_1.transparentScrollbarStyles,
     function (utils, props) {
-        var $multi = props.$multi, $isEmpty = props.$isEmpty, $type = props.$type;
+        var _a;
+        var $multi = props.$multi, $isEmpty = props.$isEmpty, $type = props.$type, $size = props.$size;
+        var borderRadius = ((_a = (0, themeHelpers_1.getComponentSizeTheme)(utils.theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(utils.theme))) === null || _a === void 0 ? void 0 : _a.borderRadius) ||
+            utils.theme.input.borderRadius;
         // Override paddingLeft for multiSelect when values are selected
         var shouldOverridePaddingLeft = $multi && !$isEmpty && $type !== 'search';
-        return (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' });
+        return (0, tslib_1.__assign)((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' }), (0, longHandHelpers_2.borderRadius)(borderRadius));
     },
 ];
 exports.getValueContainerStyles = [
@@ -64,11 +70,12 @@ exports.getValueContainerStyles = [
     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');
+        var multiSelectTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', $size, (0, themeHelpers_1.getDefaultSize)(theme));
         return $multi && !$isEmpty
             ? {
                 paddingTop: multiSelectTheme.paddingY,
                 paddingBottom: multiSelectTheme.paddingY,
+                paddingLeft: multiSelectTheme.paddingX,
             }
             : {};
     },
@@ -76,24 +83,23 @@ exports.getValueContainerStyles = [
 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;
+    var _c = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, (0, themeHelpers_1.getDefaultSize)(theme)), 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;
+var SingleValueTombstone = function (_a) {
+    var $selectSize = _a.$selectSize;
+    var theme = (0, style_1.useStyle)().theme;
+    var lineHeight = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, (0, themeHelpers_1.getDefaultSize)(theme)).lineHeight;
+    return ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "single-value-tombstone", className: ['w-24 rounded-8', { height: lineHeight }] }, void 0));
+};
+exports.SingleValueTombstone = SingleValueTombstone;
 exports.selectMenuOverrides = {
     Menu: {
         props: {

package/select/select-variants.js

@@ -5,10 +5,10 @@ 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);
+    return (0, jsx_runtime_1.jsx)(select_1.default, (0, tslib_1.__assign)({}, props, { filterOptions: props.filterOptions, 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);
+    return (0, jsx_runtime_1.jsx)(select_1.default, (0, tslib_1.__assign)({}, props, { filterOptions: props.filterOptions, multi: false }), void 0);
 }
 exports.SingleSelect = SingleSelect;

package/select/select.d.ts

@@ -13,7 +13,10 @@ declare const Select: {
         error: boolean;
         positive: boolean;
         escapeClearsValue: boolean;
-        filterOptions: any;
+        filterOptions: ((options: import("baseui/select/types").Value, filterValue: string, excludeOptions: import("baseui/select/types").Value | null | undefined, a: {
+            valueKey: string;
+            labelKey: string;
+        }) => import("baseui/select/types").Value) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
         labelKey: string;
@@ -28,15 +31,16 @@ declare const Select: {
         onSelectResetsInput: boolean;
         openOnClick: boolean;
         startOpen: boolean;
-        options: import("baseui/select").OptionsT;
+        options: import("baseui/select/types").Options;
         overrides: {};
         required: boolean;
         searchable: boolean;
-        size: import("./types").Size;
         type: "overlay" | import("./types").Type | "mobile";
-        value: import("baseui/select").Value;
+        value: import("baseui/select/types").Value;
         valueKey: string;
-        placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | undefined;
+        placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+        virtual: boolean;
+        popoverMinWidth: string;
     };
 };
 export default Select;

package/select/select.js

@@ -7,15 +7,21 @@ 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 style_1 = require("../style");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var Select = function (props) {
     var adaptedProps = (0, context_1.useContextualFormProps)(props);
+    var theme = (0, style_1.useStyle)().theme;
     switch (adaptedProps.type) {
         case 'overlay':
-            return (0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+            // @ts-ignore -- needs to be fixed
+            return (0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme) }), void 0);
         case 'mobile':
-            return (0, jsx_runtime_1.jsx)(mobileSelect_1.default, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+            // @ts-ignore -- needs to be fixed
+            return (0, jsx_runtime_1.jsx)(mobileSelect_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme) }), void 0);
         default:
-            return (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, adaptedProps), void 0);
+            // @ts-ignore -- needs to be fixed
+            return (0, jsx_runtime_1.jsx)(base_select_1.default, (0, tslib_1.__assign)({}, adaptedProps, { size: adaptedProps.size || (0, themeHelpers_1.getDefaultSize)(theme) }), void 0);
     }
 };
 Select.defaultProps = default_props_1.default;