@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/esm/search/stateful-search.js

@@ -0,0 +1,15 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Search } from './search';
+export var StatefulSearch = function (_a) {
+    var initialState = _a.initialState, onChange = _a.onChange, restProps = __rest(_a, ["initialState", "onChange"]);
+    var _b = __read(useState(initialState), 2), query = _b[0], setQuery = _b[1];
+    var handleChange = useCallback(function (e) {
+        setQuery(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    }, [onChange]);
+    return _jsx(Search, __assign({ value: query, onChange: handleChange }, restProps), void 0);
+};

package/esm/search/styled-components.d.ts

@@ -1,13 +1,4 @@
 import { Styles } from '../types';
-import { Size } from './types';
-declare type SizeStyle = {
-    paddingX: string;
-    searchIconMarginX: string;
-    height: string;
-    fontSize: string;
-    iconSize: number;
-};
-export declare const SIZES_STYLES_MAP: Record<Size, SizeStyle>;
+export declare const getSearchSizeTheme: (theme: any, size: any, prop: any) => any;
 export declare const getInputContainerStyles: Styles;
 export declare const getRootStyles: Styles;
-export {};

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 '../baseui/select';
 import { Type } from './types';
 import { ValueOf } from '../utility-types';
 export declare const typeAdaptor: Record<Type, ValueOf<typeof TYPE>>;

package/esm/select/adaptor.js

@@ -1,4 +1,4 @@
-import { TYPE } from 'baseui/select';
+import { TYPE } from '../baseui/select';
 export var typeAdaptor = {
     select: TYPE.select,
     search: TYPE.search,

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

@@ -1,12 +1,13 @@
-import type { OnChangeParams as BaseOnChangeParams } from 'baseui/select';
+/// <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 { Locale } from '../locale';
 import defaultProps from './default-props';
 import { BaseSelectProps, Option, Options, Value } from './types';
 declare class BaseSelect extends Component<BaseSelectProps & typeof defaultProps, {
-    selectAllSelected: boolean;
+    isContainerFocused: boolean;
 }> {
     static defaultProps: {
         autoFocus: boolean;
@@ -46,20 +47,35 @@ declare class BaseSelect extends Component<BaseSelectProps & typeof defaultProps
         valueKey: string;
         placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         virtual: boolean;
+        popoverMinWidth: string;
+    };
+    state: {
+        isContainerFocused: boolean;
     };
-    id: string;
-    menuId: string;
+    lastSelectedValue: Value;
+    id: any;
+    menuId: any;
     createdOptions: Options | undefined;
-    shouldDisplaySelectAll: () => boolean;
-    getNormalizedOptions: (options?: Options) => Value;
-    isSelectAllChecked: (value: Value, options?: Options) => boolean;
+    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;
+        searchTags?: string[] | undefined;
+    }>>;
     getSelectOverrides: () => Overrides<any>;
-    mergeOptions: (options1?: Options, options2?: Options) => Options | undefined;
-    getOptions: (locale: Locale, createdOptions: Options | undefined, options?: Options) => Value;
+    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;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
     inputRef: React.RefObject<HTMLInputElement>;
     render(): React.ReactElement;
 }