@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/search/styled-components.js

@@ -1,5 +1,6 @@
 import { __assign } from "tslib";
 import { borderColor as borderColorLongHand, borderRadius, borderStyle, borderWidth } from '../helpers/longHandHelpers';
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 var VARIANTS_TOKENS_MAP = {
     default: {
         backgroundColor: 'ui02',
@@ -12,36 +13,66 @@ var VARIANTS_TOKENS_MAP = {
         disabledBackgroundColor: 'ui02',
         hoverBorderColor: 'border06',
         focusBorderColor: 'interactive01',
+        borderColor: 'border03',
     },
 };
 var getSearchComponentTokens = function (variant) { var _a; return (_a = VARIANTS_TOKENS_MAP[variant !== null && variant !== void 0 ? variant : 'default']) !== null && _a !== void 0 ? _a : {}; };
-export var SIZES_STYLES_MAP = {
+var SIZES_STYLES_MAP = {
+    xxxs: {
+        paddingX: '2px',
+        searchIconMarginX: '4px',
+        height: '24px',
+        fontSize: '13px',
+        iconSize: 10,
+        borderRadius: '5px',
+        lineHeight: '16px',
+    },
+    xxs: {
+        paddingX: '5px',
+        searchIconMarginX: '4px',
+        height: '28px',
+        fontSize: '14px',
+        iconSize: 10,
+        borderRadius: '6px',
+    },
+    xs: {
+        paddingX: '5px',
+        searchIconMarginX: '5px',
+        height: '32px',
+        fontSize: '14px',
+        iconSize: 12,
+        borderRadius: '7px',
+    },
     sm: {
-        paddingX: '4px',
-        searchIconMarginX: '8px',
-        height: '30px',
+        paddingX: '6px',
+        searchIconMarginX: '7px',
+        height: '36px',
         fontSize: '14px',
-        iconSize: 14,
+        iconSize: 12,
+        borderRadius: '8px',
     },
     md: {
-        paddingX: '8px',
-        searchIconMarginX: '8px',
+        paddingX: '6px',
+        searchIconMarginX: '7px',
         height: '40px',
-        fontSize: '16px',
-        iconSize: 14,
+        fontSize: '14px',
+        iconSize: 12,
+        borderRadius: '8px',
     },
     lg: {
-        paddingX: '10px',
-        searchIconMarginX: '14px',
-        height: '60px',
-        fontSize: '18px',
-        iconSize: 18,
+        paddingX: '6px',
+        searchIconMarginX: '7px',
+        height: '40px',
+        fontSize: '14px',
+        iconSize: 12,
+        borderRadius: '8px',
     },
 };
+export var getSearchSizeTheme = function (theme, size, prop) { var _a; return ((_a = getComponentSizeTheme(theme, 'search', size, getDefaultSize(theme))) === null || _a === void 0 ? void 0 : _a[prop]) || SIZES_STYLES_MAP[size][prop]; };
 var rootBackgroundColor = function (_a, _b) {
     var theme = _a.theme;
     var $isFocused = _b.$isFocused, $disabled = _b.$disabled, _c = _b.$variant, $variant = _c === void 0 ? 'default' : _c;
-    var _d = getSearchComponentTokens($variant), backgroundColor = _d.backgroundColor, disabledBackgroundColor = _d.disabledBackgroundColor;
+    var _d = getSearchComponentTokens($variant), backgroundColor = _d.backgroundColor, disabledBackgroundColor = _d.disabledBackgroundColor, borderColor = _d.borderColor;
     return {
         backgroundColor: $disabled ? theme.spr[disabledBackgroundColor] : theme.spr[backgroundColor],
     };
@@ -49,14 +80,14 @@ var rootBackgroundColor = function (_a, _b) {
 var rootBorderColor = function (utils, props) {
     var theme = utils.theme;
     var $isFocused = props.$isFocused, $disabled = props.$disabled, $variant = props.$variant;
-    var _a = getSearchComponentTokens($variant), hoverBorderColor = _a.hoverBorderColor, focusBorderColor = _a.focusBorderColor;
+    var _a = getSearchComponentTokens($variant), hoverBorderColor = _a.hoverBorderColor, focusBorderColor = _a.focusBorderColor, borderColor = _a.borderColor;
     if ($disabled) {
         return borderColorLongHand(theme.input.disabledBorderColor);
     }
     if ($isFocused) {
         return borderColorLongHand(theme.spr[focusBorderColor]);
     }
-    return __assign(__assign({}, borderColorLongHand('transparent')), { ':hover': borderColorLongHand(theme.spr[hoverBorderColor]) });
+    return __assign(__assign({}, borderColorLongHand(borderColor ? theme.spr[borderColor] : 'transparent')), { ':hover': borderColorLongHand(theme.spr[hoverBorderColor]) });
 };
 export var getInputContainerStyles = __assign(__assign(__assign(__assign({ outline: 'none', boxSizing: 'border-box' }, borderColorLongHand('transparent')), { backgroundColor: 'transparent', ':hover': { backgroundColor: 'transparent' } }), borderStyle('none')), borderRadius('0'));
 export var getRootStyles = [
@@ -64,14 +95,13 @@ export var getRootStyles = [
     borderWidth('1px'),
     rootBorderColor,
     rootBackgroundColor,
-    function (_a) {
+    function (_a, _b) {
         var theme = _a.theme;
-        return borderRadius(theme.borderRadius['8']);
-    },
-    function (_, _a) {
-        var $size = _a.$size;
-        var _b = SIZES_STYLES_MAP[$size], paddingX = _b.paddingX, height = _b.height;
-        return { height: height, paddingLeft: paddingX, paddingRight: paddingX };
+        var $size = _b.$size;
+        var paddingX = getSearchSizeTheme(theme, $size, 'paddingX');
+        var height = getSearchSizeTheme(theme, $size, 'height');
+        var _borderRadius = getSearchSizeTheme(theme, $size, 'borderRadius');
+        return __assign({ height: height, paddingLeft: paddingX, paddingRight: paddingX }, borderRadius(_borderRadius));
     },
     { outline: 'none', boxSizing: 'border-box' },
 ];

package/esm/search/types.d.ts

@@ -1,8 +1,11 @@
 import { InputProps, SharedProps as InputSharedProps } from '../input/types';
 import { Override } from '../overrides';
-export declare type Size = 'sm' | 'md' | 'lg';
+/**
+ * lg size is deprecated. Please use md.
+ */
+export declare type Size = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 export declare type Variant = 'default' | 'light';
-export declare type SearchProps = Omit<InputProps, 'size | type' | 'required' | 'variant' | 'intent' | 'startEnhancer' | 'endEnhancer'> & {
+export declare type SearchProps = Omit<InputProps, 'size' | 'type' | 'required' | 'variant' | 'intent' | 'startEnhancer' | 'endEnhancer'> & {
     size?: Size;
     bordered?: boolean;
     debounceInterval?: number;
@@ -17,3 +20,6 @@ export declare type SharedProps = Omit<InputSharedProps, '$size'> & {
     $bordered: boolean;
     $variant: Variant;
 };
+export declare type StatefulSearchProps = Omit<SearchProps, 'value'> & {
+    initialState?: string;
+};

package/esm/select/adaptor.d.ts

@@ -1,4 +1,4 @@
 import { TYPE } from 'baseui/select';
 import { Type } from './types';
 import { ValueOf } from '../utility-types';
-export declare const typeAdaptor: Record<Type, ValueOf<TYPE>>;
+export declare const typeAdaptor: Record<Type, ValueOf<typeof TYPE>>;

package/esm/select/base-select.d.ts

@@ -1,11 +1,13 @@
+/// <reference types="lodash" />
+import type { OnChangeParams as BaseOnChangeParams } from 'baseui/select';
 import { Component } from 'react';
 import * as React from 'react';
 import { Locale } from '../locale';
 import { Overrides } from '../overrides';
 import defaultProps from './default-props';
-import { BaseSelectProps, OnChangeParams, Option, OptionsT, Value } from './types';
+import { BaseSelectProps, Option, Options, Value } from './types';
 declare class BaseSelect extends Component<BaseSelectProps & typeof defaultProps, {
-    selectAllSelected: boolean;
+    isContainerFocused: boolean;
 }> {
     static defaultProps: {
         autoFocus: boolean;
@@ -18,7 +20,10 @@ declare class BaseSelect extends Component<BaseSelectProps & typeof defaultProps
         error: boolean;
         positive: boolean;
         escapeClearsValue: boolean;
-        filterOptions: any;
+        filterOptions: ((options: Value, filterValue: string, excludeOptions: Value | null | undefined, a: {
+            valueKey: string;
+            labelKey: string;
+        }) => Value) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
         labelKey: string;
@@ -33,31 +38,46 @@ declare class BaseSelect extends Component<BaseSelectProps & typeof defaultProps
         onSelectResetsInput: boolean;
         openOnClick: boolean;
         startOpen: boolean;
-        options: OptionsT;
+        options: Options;
         overrides: {};
         required: boolean;
         searchable: boolean;
-        size: import("./types").Size;
         type: "overlay" | import("./types").Type | "mobile";
         value: 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;
     };
+    state: {
+        isContainerFocused: boolean;
+    };
+    lastSelectedValue: Value;
     id: string;
     menuId: string;
-    createdOptions: OptionsT | undefined;
+    createdOptions: Options | undefined;
+    getMemoizedNormalizedOptions: (valueKey: string, options1?: Options, options2?: Options) => Value;
+    getValueByIdMap: (value: Value, valueKey: string) => import("lodash").Dictionary<Readonly<{
+        [x: string]: any;
+        id?: string | number | undefined;
+        label?: React.ReactNode;
+        disabled?: boolean | undefined;
+        clearableValue?: boolean | undefined;
+        isCreatable?: boolean | undefined;
+        __optgroup?: string | undefined;
+    }>>;
     shouldDisplaySelectAll: () => boolean;
-    getNormalizedOptions: (options?: OptionsT | undefined) => Option[];
-    isSelectAllChecked: (value: Value, options?: OptionsT | undefined) => boolean;
+    isSelectAllChecked: (value: Value, options?: Options) => boolean | undefined;
     getSelectOverrides: () => Overrides<any>;
-    mergeOptions: (options1?: OptionsT | undefined, options2?: OptionsT | undefined) => OptionsT | undefined;
-    getOptions: (locale: Locale, createdOptions: OptionsT | undefined, options?: OptionsT | undefined) => Option[];
-    getCreatedOptions: (option: Option) => Promise<OptionsT>;
-    getCreatedValues: (options: OptionsT) => OptionsT;
-    handleChange: (params: OnChangeParams) => Promise<void>;
+    getOptions: (locale: Locale, createdOptions: Options | undefined, options?: Options, shouldPrependClearOption?: boolean | undefined) => Value;
+    defaultCreateOption: (label: String) => Options;
+    getCreatedOptions: (option: Option) => Promise<Options>;
+    getCreatedValues: (options: Options) => Options;
+    handleBlur: (e: React.FocusEvent | MouseEvent) => void;
+    handleChange: (params: BaseOnChangeParams) => Promise<void>;
     handlePaste: (e: React.ClipboardEvent) => void;
-    inputRef: React.RefObject<HTMLInputElement | HTMLDivElement>;
-    combinedInputRef: (refParam: BaseSelectProps['controlRef']) => (element: HTMLInputElement | HTMLDivElement) => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+    inputRef: React.RefObject<HTMLInputElement>;
     render(): React.ReactElement;
 }
 export default BaseSelect;