@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/esm/phone-input/phone-input.js

@@ -9,8 +9,9 @@ import { sanitize } from './utils';
 import { useOverrides, mergeOverrides } from '../overrides';
 import { useLocale } from '../locale';
 import defaultProps from './default-props';
+import { useContextualFormProps } from '../form-control/context';
 var PhoneInput = function (props) {
-    var size = props.size, variant = props.variant, intent = props.intent, disabled = props.disabled, overrides = props.overrides, mapIsoToLabel = props.mapIsoToLabel, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, onInputChange = props.onInputChange, onChange = props.onChange, value = props.value, rest = __rest(props, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value"]);
+    var _a = useContextualFormProps(props), _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, intent = _a.intent, disabled = _a.disabled, overrides = _a.overrides, mapIsoToLabel = _a.mapIsoToLabel, maxDropdownHeight = _a.maxDropdownHeight, maxDropdownWidth = _a.maxDropdownWidth, onInputChange = _a.onInputChange, onChange = _a.onChange, value = _a.value, rest = __rest(_a, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value"]);
     var locale = useLocale();
     var inputRef = useRef(null);
     var mergedOverrides = mergeOverrides({
@@ -42,7 +43,7 @@ var PhoneInput = function (props) {
             },
         },
     }, overrides);
-    var _a = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DefaultInput), 2), Input = _a[0], inputProps = _a[1];
+    var _c = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DefaultInput), 2), Input = _c[0], inputProps = _c[1];
     return (_jsx(Input, __assign({ "aria-label": locale.phoneInput.inputAriaLabel, size: size, variant: variant, intent: intent, disabled: disabled, onChange: function (e) {
             var number = sanitize(e.currentTarget.value);
             if (onChange) {

package/esm/phone-input/stateful-phone-input.d.ts

@@ -6,7 +6,6 @@ declare const StatefulPhoneInput: {
         clearable: boolean;
         focusLock: boolean;
         disabled: boolean;
-        intent: import("..").Intent;
         maxDropdownHeight: string;
         maxDropdownWidth: string;
         name: undefined;
@@ -14,7 +13,6 @@ declare const StatefulPhoneInput: {
         overrides: import("./types").PhoneInputOverrides;
         positive: boolean;
         required: boolean;
-        size: import("../input").InputSize;
         variant: import("../input").InputVariant;
         value: {
             country: import("./types").Country;

package/esm/phone-input/utils.d.ts

@@ -1,6 +1,9 @@
-import { OverlaySelectProps } from '../select/types';
+import { Value as ValueT } from '../select/types';
 import { Value } from './types';
 export declare const iso2FlagEmoji: (iso: string) => string | undefined;
 export declare const sanitize: (value?: string) => string;
 export declare const getPhoneNumberWithCountryDialCode: (value: Value) => string | undefined;
-export declare const countrySelectFilterOptions: Required<OverlaySelectProps>['filterOptions'];
+export declare const countrySelectFilterOptions: (options: ValueT, filterValue: string, excludeOptions?: ValueT | undefined | null, params?: {
+    valueKey: string;
+    labelKey: string;
+}) => ValueT;

package/esm/phone-input/utils.js

@@ -3,7 +3,7 @@ import { filterOptions } from '../select/utils/default-filter-options';
 import { ISO_REGEX, ISO_TO_FLAG_OFFSET } from './constants';
 export var iso2FlagEmoji = function (iso) {
     if (!ISO_REGEX.test(iso)) {
-        return;
+        return undefined;
     }
     var chars = Array.from(iso.toUpperCase()).map(function (char) { return char.charCodeAt(0) + ISO_TO_FLAG_OFFSET; });
     return String.fromCodePoint.apply(String, __spreadArray([], __read(chars), false));
@@ -14,14 +14,14 @@ export var sanitize = function (value) {
 };
 export var getPhoneNumberWithCountryDialCode = function (value) {
     if (value === undefined || value.country === undefined || value.phoneNumber === undefined) {
-        return;
+        return undefined;
     }
     return value.country.dialCode.concat(value.phoneNumber);
 };
 export var countrySelectFilterOptions = function (options, filterValue, excludeOptions, params) {
-    return filterOptions(options, filterValue, excludeOptions, __assign(__assign({}, params), { filterOption: function (_a, filterValue) {
+    return filterOptions(options, filterValue, excludeOptions, __assign(__assign({}, params), { filterOption: function (_a, _filterValue) {
             var label = _a.label, dialCode = _a.dialCode;
-            var filterValueLowerCase = filterValue.toLowerCase();
+            var filterValueLowerCase = _filterValue.toLowerCase();
             return label.toLowerCase().includes(filterValueLowerCase) || dialCode.includes(filterValueLowerCase);
         } }));
 };

package/esm/popover/adapter.d.ts

@@ -1,6 +1,6 @@
 import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from 'baseui/popover';
 import { AccessibilityType, TriggerType, Placement } from './types';
 import { ValueOf } from '../utility-types';
-export declare const accessibilityMap: Record<AccessibilityType, ValueOf<ACCESSIBILITY_TYPE>>;
-export declare const triggerTypeMap: Record<TriggerType, ValueOf<TRIGGER_TYPE>>;
-export declare const placementMap: Record<Placement, ValueOf<PLACEMENT>>;
+export declare const accessibilityMap: Record<AccessibilityType, ValueOf<typeof ACCESSIBILITY_TYPE>>;
+export declare const triggerTypeMap: Record<TriggerType, ValueOf<typeof TRIGGER_TYPE>>;
+export declare const placementMap: Record<Placement, ValueOf<typeof PLACEMENT>>;

package/esm/popover/popover.d.ts

@@ -1,6 +1,5 @@
-import { Popover as BasePopover } from 'baseui/popover';
 import * as React from 'react';
-declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popover").PopoverProps, "overrides" | "children"> & {
+declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
     overrides?: ({
         Body?: import("../overrides").Override<any> | undefined;
         Arrow?: import("../overrides").Override<any> | undefined;
@@ -12,5 +11,8 @@ declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popov
         isOpen: boolean;
     }) => React.ReactNode);
     targetElement?: HTMLElement | null | undefined;
-} & React.RefAttributes<BasePopover>>;
+    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;
+} & React.RefAttributes<HTMLElement>>;
 export default Popover;

package/esm/popover/popover.js

@@ -11,13 +11,14 @@ import { LayersManager, Z_INDEX } from '../layer';
 import { accessibilityMap, placementMap, triggerTypeMap } from './adapter';
 import { arrowStyles, getBodyStyles, getInnerStyles } from './overrides';
 import { StyledArrowTriangle } from './styled-components';
+import useCombinedRefs from '../hooks/useCombinedRef';
 // @ts-ignore
 BasePopover.displayName = 'BaseUIPopover';
 var Popover = React.forwardRef(function (_a, ref) {
-    var overrides = _a.overrides, children = _a.children, placement = _a.placement, accessibilityType = _a.accessibilityType, _b = _a.triggerType, triggerType = _b === void 0 ? 'click' : _b, _c = _a.showArrow, showArrow = _c === void 0 ? false : _c, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.focusLock, focusLock = _d === void 0 ? false : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, content = _a.content, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content"]);
-    var _f = useContent({ content: content }), setContentHost = _f.setContentHost, wrappedContent = _f.wrappedContent;
+    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 _g = useContent({ content: content }), setContentHost = _g.setContentHost, wrappedContent = _g.wrappedContent;
     var focusLockProps = useFocusLock({ returnFocus: returnFocus, focusLock: focusLock });
-    var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, StyledArrowTriangle), 2), ArrowTriangle = _g[0], arrowTriangleProps = _g[1];
+    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, StyledArrowTriangle), 2), ArrowTriangle = _h[0], arrowTriangleProps = _h[1];
     var _overrides = useConvertOverrides({
         Body: { style: getBodyStyles },
         Arrow: { style: arrowStyles, props: { children: _jsx(ArrowTriangle, __assign({}, arrowTriangleProps), void 0) } },
@@ -28,12 +29,13 @@ var Popover = React.forwardRef(function (_a, ref) {
         accessibilityType: accessibilityType && accessibilityMap[accessibilityType],
         triggerType: triggerType && triggerTypeMap[triggerType],
     };
+    var combinedRef = useCombinedRefs(ref, restProps.innerRef);
     var childNode = children;
     if (typeof children === 'function') {
         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, ref: ref, content: wrappedContent }, focusLockProps, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    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));
 });
 Popover.displayName = 'Popover';
 export default Popover;

package/esm/popover/types.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { TetherPlacement } from 'baseui/layer';
 import { PopoverProps as BasePopoverProps, StatefulPopoverProps as BaseStatefulPopoverProps, StatefulPopoverContainerProps as BaseStatefulPopoverContainerProps, PopoverOverrides as BasePopoverOverrides } from 'baseui/popover';
 import { Override } from '../overrides';
-export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children'> & {
+export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children' | 'triggerType' | 'placement'> & {
     overrides?: {
         [key in keyof BasePopoverOverrides]?: Override<any>;
     } & {
@@ -11,6 +12,9 @@ export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'childre
         isOpen: boolean;
     }) => React.ReactNode);
     targetElement?: HTMLElement | null;
+    triggerType?: TriggerType;
+    placement?: TetherPlacement;
+    innerRef?: React.Ref<HTMLElement>;
 };
 export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overrides' | 'children'> & {
     overrides?: {
@@ -29,4 +33,5 @@ export declare type AccessibilityType = 'none' | 'menu' | 'tooltip';
 export declare type TriggerType = 'click' | 'hover';
 export declare type Placement = 'auto' | 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
 export type { Offset, SharedStylePropsArg as SharedProps, StateReducer, } from 'baseui/popover';
-export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN, STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME, } from 'baseui/popover';
+export { STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME } from 'baseui/popover';
+export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN } from 'baseui/popover/constants';

package/esm/popover/types.js

@@ -1 +1,2 @@
-export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN, STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME, } from 'baseui/popover';
+export { STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME } from 'baseui/popover';
+export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN } from 'baseui/popover/constants';

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

@@ -1,3 +1,4 @@
+export declare const VIEWBOX_SIZE = 44;
 export declare const getProgressInlineStyles: ({ strokeWidth, value, infinite, }: {
     strokeWidth: number;
     value: number;
@@ -5,7 +6,6 @@ export declare const getProgressInlineStyles: ({ strokeWidth, value, infinite, }
 }) => {
     strokeDashoffset: string;
 };
-export declare const VIEWBOX_SIZE = 44;
 export declare const StyledRoot: import("../../style/styled").StyledComponent;
 export declare const StyledBarContainer: import("../../style/styled").StyledComponent;
 export declare const StyledSvg: import("../../style/styled").StyledComponent;

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

@@ -11,6 +11,7 @@ var BaseProgress = function (_a) {
     var inlineStyles = _a.inlineStyles, props = __rest(_a, ["inlineStyles"]);
     return (_jsx("circle", __assign({ style: inlineStyles }, props), void 0));
 };
+export var VIEWBOX_SIZE = 44;
 export var getProgressInlineStyles = function (_a) {
     var strokeWidth = _a.strokeWidth, value = _a.value, infinite = _a.infinite;
     var circumference = 2 * Math.PI * ((VIEWBOX_SIZE - strokeWidth) / 2);
@@ -18,7 +19,6 @@ export var getProgressInlineStyles = function (_a) {
         strokeDashoffset: "".concat((((100 - value) / 100) * circumference).toFixed(3), "px"),
     };
 };
-export var VIEWBOX_SIZE = 44;
 export var StyledRoot = styled('span', 'relative inline-flex', function (_a, _b) {
     var px2rem = _a.px2rem;
     var $size = _b.$size;
@@ -58,14 +58,14 @@ export var StyledBar = styled('circle', function (_a, _b) {
         cx: px2rem(VIEWBOX_SIZE),
         cy: px2rem(VIEWBOX_SIZE),
         r: px2rem((VIEWBOX_SIZE - $strokeWidth) / 2),
-        strokeWidth: $strokeWidth,
+        strokeWidth: $strokeWidth.toString(),
     });
 });
 export var StyledProgress = styled(BaseProgress, 'stroke-current', { fill: 'none' }, function (_a, _b) {
     var px2rem = _a.px2rem;
     var $infinite = _b.$infinite, $value = _b.$value, $strokeWidth = _b.$strokeWidth;
     var circumference = 2 * Math.PI * ((VIEWBOX_SIZE - $strokeWidth) / 2);
-    return __assign({ cx: px2rem(VIEWBOX_SIZE), cy: px2rem(VIEWBOX_SIZE), r: px2rem((VIEWBOX_SIZE - $strokeWidth) / 2), strokeWidth: $strokeWidth }, (!$infinite
+    return __assign({ cx: px2rem(VIEWBOX_SIZE), cy: px2rem(VIEWBOX_SIZE), r: px2rem((VIEWBOX_SIZE - $strokeWidth) / 2), strokeWidth: $strokeWidth.toString() }, (!$infinite
         ? {
             willChange: 'strokeDashoffset',
             transitionTimingFunction: 'ease',

package/esm/radio/basewebAdapters.d.ts

@@ -1,16 +1,13 @@
-/// <reference types="react" />
-import { RadioOverrides, RadioGroupOverrides } from 'baseui/radio';
+import * as React from 'react';
+import type { Radio as BaseRadio, RadioGroup as BaseRadioGroup } from 'baseui/radio';
 import { RadioGroupProps, RadioProps, Size } from './types';
 import { Intent } from '../types';
-export declare const SpaceRadioContext: import("react").Context<{
+export declare const SpaceRadioContext: React.Context<{
     size?: Size | undefined;
     intent?: Intent | undefined;
 }>;
-export declare function useRadioGroupAdapter<T extends RadioGroupProps>(props: T): {
-    adaptedProps: Omit<T, 'size' | 'overrides' | 'className' | 'style' | 'intent'> & {
-        overrides?: RadioGroupOverrides;
-    };
-};
-export declare const useRadioAdapter: <T extends RadioProps>(props: T) => Omit<T, "style" | "className" | "$outlineColor" | "$outlineWidth" | "$outlineOffset" | "$outlineStyle"> & {
-    overrides: RadioOverrides;
-};
+declare type BaseuiRadioGroupProps = React.ComponentProps<typeof BaseRadioGroup>;
+export declare function useRadioGroupAdapter(props: RadioGroupProps): BaseuiRadioGroupProps;
+declare type BaseuiRadioProps = React.ComponentProps<typeof BaseRadio>;
+export declare const useRadioAdapter: (props: RadioProps) => BaseuiRadioProps;
+export {};

package/esm/radio/basewebAdapters.js

@@ -4,6 +4,7 @@ import { add$props } from '../helpers';
 import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { getRadioLabelStyles, getRadioMarkInnerStyles, getRadioMarkOuterStyles, getRootStyles, } from './styled-components';
 import { useContextualFormProps } from '../form-control/context';
+import { useCombineRefObjects } from '../hooks/useCombinedRef';
 export var SpaceRadioContext = createContext({
     size: 'md',
     intent: 'default',
@@ -16,7 +17,7 @@ export function useRadioGroupAdapter(props) {
             style: [className, style],
         },
     }, overrides);
-    return { adaptedProps: __assign(__assign({}, restProps), { overrides: convertOverrides }) };
+    return __assign(__assign({}, restProps), { overrides: convertOverrides, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur });
 }
 export var useRadioAdapter = function (props) {
     var _a = useContext(SpaceRadioContext), size = _a.size, intent = _a.intent;
@@ -40,7 +41,9 @@ export var useRadioAdapter = function (props) {
             props: sharedProps,
         },
         // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/472 - baseui adds position absolute
-        Input: { style: { position: 'static' } },
+        // static position gives unexpected behaviour in Safari. Using position fixed works well for the above issue and Safari as well.
+        Input: { style: { position: 'fixed' } },
     }, props.overrides);
-    return __assign(__assign({}, restProps), { overrides: overrides });
+    var inputRefObj = useCombineRefObjects(props.inputRef);
+    return __assign(__assign({}, restProps), { overrides: overrides, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur, inputRef: inputRefObj });
 };

package/esm/radio/radio.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Radio as BaseRadio, RadioGroup as BaseRadioGroup } from 'baseui/radio';
 import { useMemo } from 'react';
 import { useRadioGroupAdapter, useRadioAdapter, SpaceRadioContext } from './basewebAdapters';
+import { useContextualFormProps } from '../form-control/context';
 // @ts-ignore
 BaseRadio.displayName = 'BaseUIRadio';
 // @ts-ignore
@@ -13,11 +14,11 @@ export var Radio = function (props) {
 };
 Radio.displayName = 'Radio';
 export var RadioGroup = function (props) {
-    var adaptedProps = useRadioGroupAdapter(props).adaptedProps;
-    var memoizedProviderValue = useMemo(function () { return ({ size: props.size || 'md', intent: props.intent || 'default' }); }, [
-        props.size,
-        props.intent,
-    ]);
+    var adaptedProps = useRadioGroupAdapter(props);
+    var _a = useContextualFormProps(props, {
+        intent: 'default',
+    }), formIntent = _a.intent, _b = _a.size, formSize = _b === void 0 ? 'md' : _b;
+    var memoizedProviderValue = useMemo(function () { return ({ size: formSize, intent: formIntent }); }, [formSize, formIntent]);
     return (_jsx(SpaceRadioContext.Provider, __assign({ value: memoizedProviderValue }, { children: _jsx(BaseRadioGroup, __assign({}, adaptedProps), void 0) }), void 0));
 };
 RadioGroup.displayName = 'RadioGroup';

package/esm/radio/styled-components.js

@@ -117,19 +117,17 @@ export var getRootStyles = function (_a, _b) {
     var directionMargin = direction === 'rtl' ? 'Left' : 'Right';
     var styles = (_c = {},
         _c["margin".concat(directionMargin)] = isHorizontal ? px2rem(30) : undefined,
-        _c.marginTop = px2rem(6),
-        _c.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(6),
+        _c.marginTop = '0px',
+        _c.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(6),
         _c);
     switch ($size) {
         case 'md':
             styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(38) : undefined;
-            styles.marginTop = px2rem(8);
-            styles.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(8);
+            styles.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(8);
             break;
         case 'lg':
             styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(46) : undefined;
-            styles.marginTop = px2rem(10);
-            styles.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(10);
+            styles.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(10);
             break;
         default:
             break;

package/esm/radio/types.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { RadioGroupProps as BaseRadioGroupProps, RadioProps as BaseRadioProps, RadioOverrides, RadioGroupOverrides } from 'baseui/radio';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';
@@ -21,17 +22,23 @@ export declare type SharedProps = {
     $size?: Size;
     $labelPosition?: LabelPosition;
 };
-export declare type RadioProps = SpacewebComponentProps<Omit<BaseRadioProps, 'overrides' | 'isError'>> & {
+declare type CommonProps = {
+    onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
     size?: Size;
     intent?: Intent;
+};
+export declare type RadioProps = SpacewebComponentProps<Omit<BaseRadioProps, 'overrides' | 'isError' | keyof CommonProps>> & {
     overrides?: {
         [key in keyof RadioOverrides]?: Override<SharedProps>;
     };
-} & OutlineProps;
-export declare type RadioGroupProps = SpacewebComponentProps<Omit<BaseRadioGroupProps, 'overrides'>> & {
-    intent?: Intent;
-    size?: Size;
+    inputRef?: React.Ref<HTMLInputElement>;
+} & OutlineProps & CommonProps;
+export declare type RadioGroupProps = SpacewebComponentProps<Omit<BaseRadioGroupProps, 'overrides' | keyof CommonProps>> & {
     overrides?: {
         [key in keyof RadioGroupOverrides]?: Override<SharedProps>;
     };
-};
+} & CommonProps;
+export {};

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,9 +1,10 @@
+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;
 }> {
@@ -18,7 +19,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 +37,30 @@ 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;
     };
     id: string;
     menuId: string;
-    createdOptions: OptionsT | undefined;
+    createdOptions: Options | undefined;
     shouldDisplaySelectAll: () => boolean;
-    getNormalizedOptions: (options?: OptionsT | undefined) => Option[];
-    isSelectAllChecked: (value: Value, options?: OptionsT | undefined) => boolean;
+    getNormalizedOptions: (options?: Options) => Value;
+    isSelectAllChecked: (value: Value, options?: Options) => boolean;
     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>;
+    mergeOptions: (options1?: Options, options2?: Options) => Options | undefined;
+    getOptions: (locale: Locale, createdOptions: Options | undefined, options?: Options) => Value;
+    getCreatedOptions: (option: Option) => Promise<Options>;
+    getCreatedValues: (options: Options) => Options;
+    handleChange: (params: BaseOnChangeParams) => Promise<void>;
     handlePaste: (e: React.ClipboardEvent) => void;
-    inputRef: React.RefObject<HTMLInputElement | HTMLDivElement>;
-    combinedInputRef: (refParam: BaseSelectProps['controlRef']) => (element: HTMLInputElement | HTMLDivElement) => void;
+    inputRef: React.RefObject<HTMLInputElement>;
     render(): React.ReactElement;
 }
 export default BaseSelect;

package/esm/select/base-select.js

@@ -18,7 +18,7 @@ import { typeAdaptor } from './adaptor';
 import { STATE_CHANGE_TYPE } from './constants';
 import defaultProps from './default-props';
 import MultiValue from './multi-value';
-import { getControlContainerStyles, getSelectInputStyles, getSearchIconContainerStyles, getSearchIconStyles, getValueContainerStyles, getValueTypography, SelectArrow, } from './overrides';
+import { getControlContainerStyles, getSearchIconContainerStyles, getSearchIconStyles, getValueContainerStyles, getValueTypography, SelectArrow, } from './overrides';
 import { getPlaceholderTypography } from '../input/styled-components';
 import SelectMenuAdapter from './selectMenuAdapter';
 import ClearIconButton from '../helpers/ClearIconButton';
@@ -46,7 +46,7 @@ var BaseSelect = /** @class */ (function (_super) {
         _this.getSelectOverrides = 
         // FIXME: Remove use of any
         function () {
-            var _a = _this.props, _b = _a.id, id = _b === void 0 ? _this.id : _b, valueKey = _a.valueKey, labelKey = _a.labelKey, value = _a.value, multi = _a.multi, overrides = _a.overrides, noResultsMsg = _a.noResultsMsg, options = _a.options, className = _a.className, style = _a.style, intent = _a.intent, size = _a.size, disabled = _a.disabled, captureScroll = _a.captureScroll, placement = _a.placement, popoverMinWidth = _a.popoverMinWidth, searchable = _a.searchable;
+            var _a = _this.props, _b = _a.id, id = _b === void 0 ? _this.id : _b, valueKey = _a.valueKey, labelKey = _a.labelKey, value = _a.value, multi = _a.multi, overrides = _a.overrides, noResultsMsg = _a.noResultsMsg, options = _a.options, className = _a.className, style = _a.style, intent = _a.intent, size = _a.size, disabled = _a.disabled, captureScroll = _a.captureScroll, placement = _a.placement, popoverMinWidth = _a.popoverMinWidth, searchable = _a.searchable, virtual = _a.virtual, ignoreBoundary = _a.ignoreBoundary;
             return {
                 Root: {
                     style: [className, style],
@@ -65,6 +65,8 @@ var BaseSelect = /** @class */ (function (_super) {
                         selectAllSelected: _this.isSelectAllChecked(value, options),
                         noResultsMsg: noResultsMsg,
                         captureScroll: captureScroll,
+                        virtual: virtual,
+                        overscanCount: 20,
                     },
                 },
                 DropdownContainer: {
@@ -74,7 +76,8 @@ var BaseSelect = /** @class */ (function (_super) {
                     },
                     style: __assign(__assign({}, (popoverMinWidth ? { minWidth: popoverMinWidth } : {})), borderRadius('inherit')),
                 },
-                OptionContent: { style: { fontWeight: 'inherit' } },
+                // aria-selected is applied on SelectMenuItem. No need to apply it on OptionContent
+                OptionContent: { style: { fontWeight: 'inherit' }, props: { 'aria-selected': undefined } },
                 ControlContainer: { style: getControlContainerStyles, props: add$props({ intent: intent, size: size, disabled: disabled }) },
                 ValueContainer: { style: getValueContainerStyles, props: add$props({ intent: intent, size: size, disabled: disabled }) },
                 MultiValue: { component: MultiValue, props: { selectSize: size } },
@@ -82,12 +85,10 @@ var BaseSelect = /** @class */ (function (_super) {
                 InputContainer: {
                     component: InputContainer,
                     props: { menuId: _this.menuId, size: size },
-                    style: getValueTypography,
                 },
                 Input: {
                     component: Input,
                     props: { id: id, menuId: searchable ? _this.menuId : null, onPaste: _this.handlePaste },
-                    style: getSelectInputStyles,
                 },
                 Placeholder: {
                     style: getPlaceholderTypography,
@@ -99,7 +100,13 @@ var BaseSelect = /** @class */ (function (_super) {
                 SearchIconContainer: { style: getSearchIconContainerStyles },
                 Popover: {
                     component: Popover,
-                    props: { placement: placement, showArrow: false, returnFocus: false, overrides: { Body: { style: 'mt-2' } } },
+                    props: {
+                        placement: placement,
+                        showArrow: false,
+                        returnFocus: false,
+                        overrides: { Body: { style: 'mt-2' } },
+                        ignoreBoundary: ignoreBoundary,
+                    },
                 },
                 LoadingIndicator: {
                     component: function () { return (_jsx(Loader, { size: 16, variant: "clip", className: "mx-1", overrides: {
@@ -111,6 +118,7 @@ var BaseSelect = /** @class */ (function (_super) {
             };
         };
         _this.mergeOptions = function (options1, options2) {
+            var _a;
             var mergedOptions = options1;
             if (Array.isArray(options1)) {
                 if (Array.isArray(options2)) {
@@ -127,10 +135,10 @@ var BaseSelect = /** @class */ (function (_super) {
                 mergedOptions = __assign({}, options1);
                 if (Array.isArray(options2)) {
                     mergedOptions.__ungrouped = mergedOptions.__ungrouped
-                        ? mergedOptions.__ungrouped.concat(options2)
+                        ? (_a = mergedOptions.__ungrouped) === null || _a === void 0 ? void 0 : _a.concat(options2)
                         : options2;
                 }
-                else if (typeof options2 === 'object') {
+                else if (typeof options2 === 'object' && options2) {
                     Object.keys(options2).forEach(function (key) {
                         if (!mergedOptions) {
                             return;
@@ -218,7 +226,7 @@ var BaseSelect = /** @class */ (function (_super) {
                         newCreatedValues = this.getCreatedValues(newCreatedOptions);
                         mergedValue = this.mergeOptions(value, newCreatedValues);
                         onChange({
-                            option: __assign(__assign({}, newCreatedOptions[0]), { isCreatable: true }),
+                            option: __assign(__assign({}, newCreatedOptions === null || newCreatedOptions === void 0 ? void 0 : newCreatedOptions[0]), { isCreatable: true }),
                             type: STATE_CHANGE_TYPE.select,
                             value: this.getNormalizedOptions(mergedValue),
                         });
@@ -240,15 +248,12 @@ var BaseSelect = /** @class */ (function (_super) {
             onChange({ type: STATE_CHANGE_TYPE.select, value: _this.getNormalizedOptions(mergedValue) });
         };
         _this.inputRef = React.createRef();
-        _this.combinedInputRef = memoizeOne(function (refParam) {
-            return combineRefs(_this.inputRef, refParam);
-        });
         return _this;
     }
     BaseSelect.prototype.render = function () {
         var _this = this;
-        var _a = this.props, options = _a.options, selectOverrides = _a.overrides, type = _a.type, controlRef = _a.controlRef;
-        return (_jsx(LocaleConsumer, { children: function (locale) { return (_jsx(SpaceStyleConsumer, { children: function (utils) { return (_jsx(StyledSelect, __assign({}, _omit(_this.props, 'size'), { overrides: mergeAndConvertOverrides(_this.getSelectOverrides(), selectOverrides, utils), controlRef: _this.combinedInputRef(controlRef), options: _this.getOptions(locale, _this.createdOptions, options), onChange: _this.handleChange, type: typeAdaptor[type] }), void 0)); } }, void 0)); } }, void 0));
+        var _a = this.props, options = _a.options, selectOverrides = _a.overrides, type = _a.type, controlRef = _a.controlRef, inputRef = _a.inputRef;
+        return (_jsx(LocaleConsumer, { children: function (locale) { return (_jsx(SpaceStyleConsumer, { children: function (utils) { return (_jsx(StyledSelect, __assign({}, _omit(_this.props, 'size'), { overrides: mergeAndConvertOverrides(_this.getSelectOverrides(), selectOverrides, utils), controlRef: controlRef, inputRef: combineRefs(_this.inputRef, inputRef), options: _this.getOptions(locale, _this.createdOptions, options), onChange: _this.handleChange, type: typeAdaptor[type] }), void 0)); } }, void 0)); } }, void 0));
     };
     BaseSelect.defaultProps = defaultProps;
     return BaseSelect;

package/esm/select/default-props.d.ts

@@ -1,4 +1,4 @@
-import { OptionsT, Value, Size, Type } from './types';
+import { Options, Value, Type } from './types';
 declare const defaultProps: {
     autoFocus: boolean;
     backspaceRemoves: boolean;
@@ -10,7 +10,10 @@ declare const 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;
@@ -25,14 +28,14 @@ declare const defaultProps: {
     onSelectResetsInput: boolean;
     openOnClick: boolean;
     startOpen: boolean;
-    options: OptionsT;
+    options: Options;
     overrides: {};
     required: boolean;
     searchable: boolean;
-    size: Size;
     type: "overlay" | 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;
 };
 export default defaultProps;

package/esm/select/default-props.js

@@ -30,10 +30,10 @@ var defaultProps = {
     overrides: {},
     required: false,
     searchable: true,
-    size: 'lg',
     type: 'select',
     value: [],
     valueKey: 'id',
     placement: 'bottom',
+    virtual: true,
 };
 export default defaultProps;

package/esm/select/index.d.ts

@@ -1,8 +1,8 @@
-export type { Option, Value, OptionsT, StateReducer, OnChangeParams, SelectProps, AutosizeInputProps, DropdownProps, StatefulSelectProps, StatefulContainerProps, SelectActions, SelectState, AutosizeInputState, StatefulContainerState, } from './types';
+export type { Option, Value, Options, Optgroups, StateReducer, OnChangeParams, ControlRef, ImperativeMethods, SelectProps, AutosizeInputProps, DropdownProps, StatefulSelectProps, StatefulContainerProps, SelectActions, SelectState, AutosizeInputState, StatefulContainerState, } from './types';
 export { SELECT_ALL_ID } from './types';
 export type { SelectLocale } from './locale';
 export { STATE_CHANGE_TYPE } from './constants';
-export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIcon, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
 export type { StyledSelect } from './styled-component';
 export { default as Select } from './select';
 export { default as StatefulSelect } from './stateful-select';