@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/search/search.js

@@ -14,6 +14,9 @@ var search_1 = (0, tslib_1.__importDefault)(require("../icon/components/search")
 var input_1 = require("../input");
 var overrides_1 = require("../overrides");
 var styled_components_1 = require("./styled-components");
+var locale_1 = require("../locale");
+var style_1 = require("../style");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var SearchIconContainer = function (_a) {
     var _b;
     var size = _a.size, marginX = _a.marginX, className = _a.className, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["size", "marginX", "className", "overrides"]);
@@ -41,8 +44,14 @@ var ClearIconButton = function (_a) {
 };
 exports.ClearIconButton = ClearIconButton;
 var Search = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.debounceInterval, debounceInterval = _c === void 0 ? 200 : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Search' : _d, overrides = _a.overrides, className = _a.className, style = _a.style, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, props = (0, tslib_1.__rest)(_a, ["size", "debounceInterval", "placeholder", "overrides", "className", "style", "variant"]);
-    var _f = styled_components_1.SIZES_STYLES_MAP[size], searchIconMarginX = _f.searchIconMarginX, searchIconSize = _f.iconSize, fontSize = _f.fontSize;
+    var _size = _a.size, _b = _a.debounceInterval, debounceInterval = _b === void 0 ? 200 : _b, placeholder = _a.placeholder, overrides = _a.overrides, className = _a.className, style = _a.style, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, props = (0, tslib_1.__rest)(_a, ["size", "debounceInterval", "placeholder", "overrides", "className", "style", "variant"]);
+    var theme = (0, style_1.useStyle)().theme;
+    var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
+    var searchIconMarginX = (0, styled_components_1.getSearchSizeTheme)(theme, size, 'searchIconMarginX');
+    var searchIconSize = (0, styled_components_1.getSearchSizeTheme)(theme, size, 'iconSize');
+    var fontSize = (0, styled_components_1.getSearchSizeTheme)(theme, size, 'fontSize');
+    var lineHeight = (0, styled_components_1.getSearchSizeTheme)(theme, size, 'lineHeight');
+    var locale = (0, locale_1.useLocale)();
     var mergedOverrides = React.useMemo(function () {
         var sharedProps = (0, helpers_1.add$props)({ size: size, variant: variant });
         return (0, overrides_1.mergeOverrides)({
@@ -55,7 +64,7 @@ var Search = function (_a) {
                 props: sharedProps,
             },
             Input: {
-                style: ['px-0 py-0', { fontSize: fontSize, lineHeight: 1.5 }],
+                style: ['px-0 py-0', { fontSize: fontSize, lineHeight: lineHeight !== null && lineHeight !== void 0 ? lineHeight : '18px' }],
                 props: sharedProps,
             },
             Before: {
@@ -64,8 +73,8 @@ var Search = function (_a) {
             },
             ClearIcon: exports.ClearIconButton,
         }, overrides);
-    }, [overrides, size, className, style, variant, fontSize, searchIconSize, searchIconMarginX]);
-    return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({ "data-spaceweb": "Search", placeholder: placeholder, overrides: mergedOverrides, debounceInterval: debounceInterval }, props), void 0));
+    }, [overrides, size, className, style, variant, fontSize, searchIconSize, searchIconMarginX, lineHeight]);
+    return ((0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({ "data-spaceweb": "Search", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.search.searchPlaceholder, overrides: mergedOverrides, debounceInterval: debounceInterval }, props), void 0));
 };
 exports.Search = Search;
 exports.Search.displayName = 'Search';

package/search/stateful-search.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { StatefulSearchProps } from './types';
+export declare const StatefulSearch: ({ initialState, onChange, ...restProps }: StatefulSearchProps) => ReactElement;

package/search/stateful-search.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatefulSearch = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var search_1 = require("./search");
+var StatefulSearch = function (_a) {
+    var initialState = _a.initialState, onChange = _a.onChange, restProps = (0, tslib_1.__rest)(_a, ["initialState", "onChange"]);
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(initialState), 2), query = _b[0], setQuery = _b[1];
+    var handleChange = (0, react_1.useCallback)(function (e) {
+        setQuery(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    }, [onChange]);
+    return (0, jsx_runtime_1.jsx)(search_1.Search, (0, tslib_1.__assign)({ value: query, onChange: handleChange }, restProps), void 0);
+};
+exports.StatefulSearch = StatefulSearch;

package/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/search/styled-components.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRootStyles = exports.getInputContainerStyles = exports.SIZES_STYLES_MAP = void 0;
+exports.getRootStyles = exports.getInputContainerStyles = exports.getSearchSizeTheme = void 0;
 var tslib_1 = require("tslib");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var VARIANTS_TOKENS_MAP = {
     default: {
         backgroundColor: 'ui02',
@@ -15,36 +16,67 @@ 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 : {}; };
-exports.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',
     },
 };
+var getSearchSizeTheme = function (theme, size, prop) { var _a; return ((_a = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'search', size, (0, themeHelpers_1.getDefaultSize)(theme))) === null || _a === void 0 ? void 0 : _a[prop]) || SIZES_STYLES_MAP[size][prop]; };
+exports.getSearchSizeTheme = getSearchSizeTheme;
 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],
     };
@@ -52,14 +84,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 (0, longHandHelpers_1.borderColor)(theme.input.disabledBorderColor);
     }
     if ($isFocused) {
         return (0, longHandHelpers_1.borderColor)(theme.spr[focusBorderColor]);
     }
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)('transparent')), { ':hover': (0, longHandHelpers_1.borderColor)(theme.spr[hoverBorderColor]) });
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(borderColor ? theme.spr[borderColor] : 'transparent')), { ':hover': (0, longHandHelpers_1.borderColor)(theme.spr[hoverBorderColor]) });
 };
 exports.getInputContainerStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ outline: 'none', boxSizing: 'border-box' }, (0, longHandHelpers_1.borderColor)('transparent')), { backgroundColor: 'transparent', ':hover': { backgroundColor: 'transparent' } }), (0, longHandHelpers_1.borderStyle)('none')), (0, longHandHelpers_1.borderRadius)('0'));
 exports.getRootStyles = [
@@ -67,14 +99,13 @@ exports.getRootStyles = [
     (0, longHandHelpers_1.borderWidth)('1px'),
     rootBorderColor,
     rootBackgroundColor,
-    function (_a) {
+    function (_a, _b) {
         var theme = _a.theme;
-        return (0, longHandHelpers_1.borderRadius)(theme.borderRadius['8']);
-    },
-    function (_, _a) {
-        var $size = _a.$size;
-        var _b = exports.SIZES_STYLES_MAP[$size], paddingX = _b.paddingX, height = _b.height;
-        return { height: height, paddingLeft: paddingX, paddingRight: paddingX };
+        var $size = _b.$size;
+        var paddingX = (0, exports.getSearchSizeTheme)(theme, $size, 'paddingX');
+        var height = (0, exports.getSearchSizeTheme)(theme, $size, 'height');
+        var _borderRadius = (0, exports.getSearchSizeTheme)(theme, $size, 'borderRadius');
+        return (0, tslib_1.__assign)({ height: height, paddingLeft: paddingX, paddingRight: paddingX }, (0, longHandHelpers_1.borderRadius)(_borderRadius));
     },
     { outline: 'none', boxSizing: 'border-box' },
 ];

package/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/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/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;