@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/esm/popover/adapter.js

@@ -23,3 +23,18 @@ export var placementMap = {
     rightTop: PLACEMENT.rightTop,
     rightBottom: PLACEMENT.rightBottom,
 };
+export var rtlPlacementMap = {
+    auto: PLACEMENT.auto,
+    bottom: PLACEMENT.bottom,
+    bottomLeft: PLACEMENT.bottomRight,
+    bottomRight: PLACEMENT.bottomLeft,
+    top: PLACEMENT.top,
+    topLeft: PLACEMENT.topRight,
+    topRight: PLACEMENT.topLeft,
+    left: PLACEMENT.right,
+    leftTop: PLACEMENT.rightTop,
+    leftBottom: PLACEMENT.rightBottom,
+    right: PLACEMENT.left,
+    rightTop: PLACEMENT.leftTop,
+    rightBottom: PLACEMENT.leftBottom,
+};

package/esm/popover/overrides.js

@@ -1,6 +1,7 @@
 import { __assign, __read, __rest } from "tslib";
 import { getOppositePosition, splitPlacement } from './utils';
 import { ARROW_WIDTH } from './constants';
+import { borderRadius } from '../helpers/longHandHelpers';
 var arrowPositionStyle = function (_a, _b) {
     var theme = _a.theme;
     var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c;
@@ -29,16 +30,7 @@ export var getPseudoElementPosition = function (placement, popoverMargin) {
 export var getBodyStyles = function (_a, _b) {
     var theme = _a.theme;
     var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c, _d = _b.$popoverMargin, $popoverMargin = _d === void 0 ? 0 : _d, $showArrow = _b.$showArrow, rest = __rest(_b, ["$placement", "$popoverMargin", "$showArrow"]);
-    return ({
-        backgroundColor: theme.spr.popup,
-        color: theme.spr.text01,
-        boxShadow: 'none',
-        borderTopLeftRadius: theme.popover.borderRadius,
-        borderTopRightRadius: theme.popover.borderRadius,
-        borderBottomRightRadius: theme.popover.borderRadius,
-        borderBottomLeftRadius: theme.popover.borderRadius,
-        '::before': __assign({ content: '" "', position: 'absolute' }, getPseudoElementPosition($placement, $showArrow ? $popoverMargin + ARROW_WIDTH : $popoverMargin)),
-    });
+    return (__assign(__assign({ backgroundColor: theme.spr.popup, color: theme.spr.text01, boxShadow: 'none' }, borderRadius(theme.popover.borderRadius)), { '::before': __assign({ content: '" "', position: 'absolute' }, getPseudoElementPosition($placement, $showArrow ? $popoverMargin + ARROW_WIDTH : $popoverMargin)) }));
 };
 export var arrowStyles = [
     function (utils) {
@@ -57,13 +49,10 @@ export var arrowStyles = [
     },
     arrowPositionStyle,
 ];
-export var getInnerStyles = ['border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup', function (_a) {
+export var getInnerStyles = [
+    'border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup',
+    function (_a) {
         var theme = _a.theme;
-        return ({
-            borderTopLeftRadius: theme.popover.borderRadius,
-            borderTopRightRadius: theme.popover.borderRadius,
-            borderBottomRightRadius: theme.popover.borderRadius,
-            borderBottomLeftRadius: theme.popover.borderRadius,
-            fontFamily: theme.fontFamily.sans,
-        });
-    }];
+        return (__assign(__assign({}, borderRadius(theme.popover.borderRadius)), { fontFamily: theme.fontFamily.sans }));
+    },
+];

package/esm/popover/popover.d.ts

@@ -14,5 +14,6 @@ declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popov
     triggerType?: import("./types").TriggerType | undefined;
     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
     innerRef?: React.Ref<HTMLElement> | undefined;
+    viewportAsBoundary?: boolean | undefined;
 } & React.RefAttributes<HTMLElement>>;
 export default Popover;

package/esm/popover/popover.js

@@ -2,21 +2,25 @@ import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Popover as BasePopover } from 'baseui/popover';
 import * as React from 'react';
+import { useMemo } from 'react';
 import { useOverrides } from '../overrides';
 import { useContent, useFocusLock } from './hooks';
 import useUniqueId from '../hooks/useUniqueId';
 import { PopoverChildEnhancer } from './PopoverEnahncer';
 import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { LayersManager, Z_INDEX } from '../layer';
-import { accessibilityMap, placementMap, triggerTypeMap } from './adapter';
+import { accessibilityMap, placementMap, rtlPlacementMap, triggerTypeMap } from './adapter';
 import { arrowStyles, getBodyStyles, getInnerStyles } from './overrides';
 import { StyledArrowTriangle } from './styled-components';
 import useCombinedRefs from '../hooks/useCombinedRef';
+import { useStyle } from '../style';
+import { getPopperOptions } from './utils';
 // @ts-ignore
 BasePopover.displayName = 'BaseUIPopover';
 var Popover = React.forwardRef(function (_a, ref) {
-    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, content = _a.content, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content"]);
+    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, content = _a.content, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, viewportAsBoundary = _a.viewportAsBoundary, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
     var _g = useContent({ content: content }), setContentHost = _g.setContentHost, wrappedContent = _g.wrappedContent;
+    var isRTL = useStyle().isRTL;
     var focusLockProps = useFocusLock({ returnFocus: returnFocus, focusLock: focusLock });
     var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, StyledArrowTriangle), 2), ArrowTriangle = _h[0], arrowTriangleProps = _h[1];
     var _overrides = useConvertOverrides({
@@ -25,7 +29,7 @@ var Popover = React.forwardRef(function (_a, ref) {
         Inner: { style: getInnerStyles, props: { ref: setContentHost } },
     }, overrides, [overrides, setContentHost]);
     var mappedProps = {
-        placement: placement && placementMap[placement],
+        placement: placement && isRTL ? rtlPlacementMap[placement] : placementMap[placement],
         accessibilityType: accessibilityType && accessibilityMap[accessibilityType],
         triggerType: triggerType && triggerTypeMap[triggerType],
     };
@@ -35,7 +39,8 @@ var Popover = React.forwardRef(function (_a, ref) {
         childNode = children({ isOpen: isOpen });
     }
     var id = useUniqueId();
-    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BasePopover, __assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef, content: wrappedContent }, focusLockProps, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    var mergedPopperOptions = useMemo(function () { return (__assign(__assign({}, getPopperOptions({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
+    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BasePopover, __assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef, content: wrappedContent }, focusLockProps, { popperOptions: mergedPopperOptions }, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
 });
 Popover.displayName = 'Popover';
 export default Popover;

package/esm/popover/stateful-popover.js

@@ -4,8 +4,8 @@ import { StatefulContainer } from 'baseui/popover';
 import Popover from './popover';
 import { ON_MOUSE_LEAVE_DELAY } from './constants';
 function StatefulPopover(props) {
-    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, restProps = __rest(props, ["children", "overrides"]);
-    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (popoverProps) { return (_jsx(Popover, __assign({}, popoverProps, { overrides: overrides }, { children: children }), void 0)); } }), void 0));
+    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, targetElement = props.targetElement, viewportAsBoundary = props.viewportAsBoundary, restProps = __rest(props, ["children", "overrides", "targetElement", "viewportAsBoundary"]);
+    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (popoverProps) { return (_jsx(Popover, __assign({}, popoverProps, { overrides: overrides, targetElement: targetElement, viewportAsBoundary: viewportAsBoundary }, { children: children }), void 0)); } }), void 0));
 }
 StatefulPopover.defaultProps = {
     accessibilityType: 'menu',

package/esm/popover/types.d.ts

@@ -15,6 +15,7 @@ export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'childre
     triggerType?: TriggerType;
     placement?: TetherPlacement;
     innerRef?: React.Ref<HTMLElement>;
+    viewportAsBoundary?: boolean;
 };
 export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overrides' | 'children'> & {
     overrides?: {
@@ -23,6 +24,8 @@ export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overr
     children?: React.ReactNode | ((args: {
         isOpen: boolean;
     }) => React.ReactNode);
+    targetElement?: HTMLElement | null;
+    viewportAsBoundary?: boolean;
 };
 export declare type StatefulPopoverContainerProps = Omit<BaseStatefulPopoverContainerProps, 'overrides'> & {
     overrides?: {

package/esm/popover/utils.d.ts

@@ -12,3 +12,15 @@ export declare function splitPlacement(placement: Placement): string[];
  * left -> right
  */
 export declare function getOppositePosition(position: string): string;
+export declare const getPopperOptions: ({ ignoreBoundary, viewportAsBoundary, }: {
+    ignoreBoundary?: boolean | undefined;
+    viewportAsBoundary?: boolean | undefined;
+}) => {
+    modifiers: {
+        preventOverflow: {
+            boundariesElement?: string | undefined;
+            enabled: boolean;
+            padding: number;
+        };
+    };
+};

package/esm/popover/utils.js

@@ -1,3 +1,4 @@
+import { __assign } from "tslib";
 /**
  * Splits something like 'topLeft' to ['top', 'left'] for easier usage
  * https://github.com/uber/baseweb/blob/master/src/popover/utils.js#L58
@@ -25,3 +26,11 @@ var OPPOSITE_POSITIONS = {
 export function getOppositePosition(position) {
     return OPPOSITE_POSITIONS[position];
 }
+export var getPopperOptions = function (_a) {
+    var ignoreBoundary = _a.ignoreBoundary, viewportAsBoundary = _a.viewportAsBoundary;
+    return ({
+        modifiers: {
+            preventOverflow: __assign({ enabled: !ignoreBoundary, padding: 0 }, (viewportAsBoundary && { boundariesElement: 'viewport' })),
+        },
+    });
+};

package/esm/progress/linear/styled-component.d.ts

@@ -8,7 +8,7 @@ export declare const StyledRoot: import("../../style/styled").StyledComponent;
 export declare const StyledBar: import("../../style/styled").StyledComponent;
 export declare const StyledProgress: import("../../style/styled").StyledComponent;
 export declare const StyledLabel: import("../../style/styled").StyledComponent;
-export declare const progressSegmentStyles: ({ direction }: StyleUtils, { $first, $last }: {
+export declare const progressSegmentStyles: ({ isRTL }: StyleUtils, { $first, $last }: {
     $first: any;
     $last: any;
 }) => string[];

package/esm/progress/linear/styled-component.js

@@ -20,10 +20,10 @@ export var StyledBar = styled('div', 'w-full relative overflow-hidden flex', fun
 });
 export var StyledProgress = styled(BaseProgress, 'h-full', function (_a, _b) {
     var _c, _d, _e;
-    var theme = _a.theme, direction = _a.direction;
+    var theme = _a.theme, isRTL = _a.isRTL;
     var $color = _b.$color, $intent = _b.$intent, $value = _b.$value, $infinite = _b.$infinite;
-    var progressStart = direction === 'rtl' ? 'right' : 'left';
-    var progressEnd = direction === 'rtl' ? 'left' : 'right';
+    var progressStart = isRTL ? 'right' : 'left';
+    var progressEnd = isRTL ? 'left' : 'right';
     return __assign(__assign(__assign({ backgroundColor: $color || getIntentColor($intent, theme), willChange: 'width' }, borderRadius('3px')), { transitionProperty: 'width', transitionTimingFunction: 'ease', transitionDuration: '400ms' }), ($infinite && {
         width: '100%',
         position: 'absolute',
@@ -48,10 +48,10 @@ export var StyledProgress = styled(BaseProgress, 'h-full', function (_a, _b) {
 });
 export var StyledLabel = styled('div', 'spr-text-02 mt-3 typography-l2', { fontVariantNumeric: 'tabular-nums' });
 export var progressSegmentStyles = function (_a, _b) {
-    var direction = _a.direction;
+    var isRTL = _a.isRTL;
     var $first = _b.$first, $last = _b.$last;
     var style = [];
-    if (direction === 'rtl') {
+    if (isRTL) {
         if (!$first)
             style.push('rounded-r-0');
         if (!$last)

package/esm/radio/styled-components.js

@@ -71,7 +71,7 @@ export var getRadioMarkOuterStyles = function (utils, props) {
 };
 export var getRadioLabelStyles = function (_a, _b) {
     var _c;
-    var direction = _a.direction, px2rem = _a.px2rem;
+    var px2rem = _a.px2rem;
     var $labelPosition = _b.$labelPosition, $size = _b.$size;
     var paddingDirection;
     switch ($labelPosition) {
@@ -82,11 +82,11 @@ export var getRadioLabelStyles = function (_a, _b) {
             paddingDirection = 'Top';
             break;
         case 'left':
-            paddingDirection = direction === 'rtl' ? 'Left' : 'Right';
+            paddingDirection = 'Right';
             break;
         default:
         case 'right':
-            paddingDirection = direction === 'rtl' ? 'Right' : 'Left';
+            paddingDirection = 'Left';
             break;
     }
     var styles = (_c = {
@@ -111,10 +111,10 @@ export var getRadioLabelStyles = function (_a, _b) {
 };
 export var getRootStyles = function (_a, _b) {
     var _c;
-    var direction = _a.direction, px2rem = _a.px2rem;
+    var px2rem = _a.px2rem;
     var $align = _b.$align, $hasDescription = _b.$hasDescription, $size = _b.$size;
     var isHorizontal = $align === 'horizontal';
-    var directionMargin = direction === 'rtl' ? 'Left' : 'Right';
+    var directionMargin = 'Right';
     var styles = (_c = {},
         _c["margin".concat(directionMargin)] = isHorizontal ? px2rem(30) : undefined,
         _c.marginTop = '0px',

package/esm/search/index.d.ts

@@ -1,2 +1,3 @@
 export { Search } from './search';
+export { StatefulSearch } from './stateful-search';
 export * from './types';

package/esm/search/index.js

@@ -1,2 +1,3 @@
 export { Search } from './search';
+export { StatefulSearch } from './stateful-search';
 export * from './types';

package/esm/search/search.d.ts

@@ -3,6 +3,6 @@ import { IconButtonProps } from '../button/IconButton';
 import { SearchProps } from './types';
 export declare const ClearIconButton: ({ overrides, ...props }: IconButtonProps) => ReactElement;
 export declare const Search: {
-    ({ size, debounceInterval, placeholder, overrides, className, style, variant, ...props }: SearchProps): ReactElement;
+    ({ size: _size, debounceInterval, placeholder, overrides, className, style, variant, ...props }: SearchProps): ReactElement;
     displayName: string;
 };

package/esm/search/search.js

@@ -10,7 +10,10 @@ import ClearIcon from '../icon/components/close';
 import DefaultSearchIcon from '../icon/components/search';
 import { Input } from '../input';
 import { mergeOverrides, useOverrides } from '../overrides';
-import { getInputContainerStyles, getRootStyles, SIZES_STYLES_MAP } from './styled-components';
+import { getInputContainerStyles, getRootStyles, getSearchSizeTheme } from './styled-components';
+import { useLocale } from '../locale';
+import { useStyle } from '../style';
+import { getDefaultSize } from '../helpers/themeHelpers';
 var SearchIconContainer = function (_a) {
     var _b;
     var size = _a.size, marginX = _a.marginX, className = _a.className, overrides = _a.overrides, props = __rest(_a, ["size", "marginX", "className", "overrides"]);
@@ -37,8 +40,14 @@ export var ClearIconButton = function (_a) {
     return (_jsx(IconButton, __assign({}, props, { overrides: mergedOverrides }, { children: _jsx(ClearIcon, { "data-testid": "search-clear", size: 10 }, void 0) }), void 0));
 };
 export 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 = __rest(_a, ["size", "debounceInterval", "placeholder", "overrides", "className", "style", "variant"]);
-    var _f = 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 = __rest(_a, ["size", "debounceInterval", "placeholder", "overrides", "className", "style", "variant"]);
+    var theme = useStyle().theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
+    var searchIconMarginX = getSearchSizeTheme(theme, size, 'searchIconMarginX');
+    var searchIconSize = getSearchSizeTheme(theme, size, 'iconSize');
+    var fontSize = getSearchSizeTheme(theme, size, 'fontSize');
+    var lineHeight = getSearchSizeTheme(theme, size, 'lineHeight');
+    var locale = useLocale();
     var mergedOverrides = React.useMemo(function () {
         var sharedProps = add$props({ size: size, variant: variant });
         return mergeOverrides({
@@ -51,7 +60,7 @@ export 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: {
@@ -60,7 +69,7 @@ export var Search = function (_a) {
             },
             ClearIcon: ClearIconButton,
         }, overrides);
-    }, [overrides, size, className, style, variant, fontSize, searchIconSize, searchIconMarginX]);
-    return (_jsx(Input, __assign({ "data-spaceweb": "Search", placeholder: placeholder, overrides: mergedOverrides, debounceInterval: debounceInterval }, props), void 0));
+    }, [overrides, size, className, style, variant, fontSize, searchIconSize, searchIconMarginX, lineHeight]);
+    return (_jsx(Input, __assign({ "data-spaceweb": "Search", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.search.searchPlaceholder, overrides: mergedOverrides, debounceInterval: debounceInterval }, props), void 0));
 };
 Search.displayName = 'Search';

package/esm/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/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/base-select.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import type { OnChangeParams as BaseOnChangeParams } from 'baseui/select';
 import { Component } from 'react';
 import * as React from 'react';
@@ -6,7 +7,7 @@ import { Overrides } from '../overrides';
 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,36 @@ 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;
+    };
+    lastSelectedValue: Value;
     id: string;
     menuId: string;
     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?: Options) => Value;
-    isSelectAllChecked: (value: Value, options?: Options) => boolean;
+    isSelectAllChecked: (value: Value, options?: Options) => boolean | 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;
 }