@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/popover/popover.js

@@ -13,13 +13,14 @@ var layer_1 = require("../layer");
 var adapter_1 = require("./adapter");
 var overrides_2 = require("./overrides");
 var styled_components_1 = require("./styled-components");
+var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
 // @ts-ignore
 popover_1.Popover.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 = (0, tslib_1.__rest)(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content"]);
-    var _f = (0, hooks_1.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 = (0, tslib_1.__rest)(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content"]);
+    var _g = (0, hooks_1.useContent)({ content: content }), setContentHost = _g.setContentHost, wrappedContent = _g.wrappedContent;
     var focusLockProps = (0, hooks_1.useFocusLock)({ returnFocus: returnFocus, focusLock: focusLock });
-    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, styled_components_1.StyledArrowTriangle), 2), ArrowTriangle = _g[0], arrowTriangleProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, styled_components_1.StyledArrowTriangle), 2), ArrowTriangle = _h[0], arrowTriangleProps = _h[1];
     var _overrides = (0, useConvertOverrides_1.useConvertOverrides)({
         Body: { style: overrides_2.getBodyStyles },
         Arrow: { style: overrides_2.arrowStyles, props: { children: (0, jsx_runtime_1.jsx)(ArrowTriangle, (0, tslib_1.__assign)({}, arrowTriangleProps), void 0) } },
@@ -30,12 +31,13 @@ var Popover = React.forwardRef(function (_a, ref) {
         accessibilityType: accessibilityType && adapter_1.accessibilityMap[accessibilityType],
         triggerType: triggerType && adapter_1.triggerTypeMap[triggerType],
     };
+    var combinedRef = (0, useCombinedRef_1.default)(ref, restProps.innerRef);
     var childNode = children;
     if (typeof children === 'function') {
         childNode = children({ isOpen: isOpen });
     }
     var id = (0, useUniqueId_1.default)();
-    return ((0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_1.Z_INDEX.POPOVER }, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover, (0, tslib_1.__assign)({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, ref: ref, content: wrappedContent }, focusLockProps, { children: (0, jsx_runtime_1.jsx)(PopoverEnahncer_1.PopoverChildEnhancer, (0, tslib_1.__assign)({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_1.Z_INDEX.POPOVER }, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover, (0, tslib_1.__assign)({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef, content: wrappedContent }, focusLockProps, { children: (0, jsx_runtime_1.jsx)(PopoverEnahncer_1.PopoverChildEnhancer, (0, tslib_1.__assign)({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
 });
 Popover.displayName = 'Popover';
 exports.default = Popover;

package/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/popover/types.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ANIMATE_OUT_TIME = exports.ANIMATE_IN_TIME = exports.STATE_CHANGE_TYPE = exports.POPOVER_MARGIN = exports.ARROW_WIDTH = exports.ARROW_SIZE = void 0;
+exports.POPOVER_MARGIN = exports.ARROW_WIDTH = exports.ARROW_SIZE = exports.ANIMATE_OUT_TIME = exports.ANIMATE_IN_TIME = exports.STATE_CHANGE_TYPE = void 0;
 var popover_1 = require("baseui/popover");
-Object.defineProperty(exports, "ARROW_SIZE", { enumerable: true, get: function () { return popover_1.ARROW_SIZE; } });
-Object.defineProperty(exports, "ARROW_WIDTH", { enumerable: true, get: function () { return popover_1.ARROW_WIDTH; } });
-Object.defineProperty(exports, "POPOVER_MARGIN", { enumerable: true, get: function () { return popover_1.POPOVER_MARGIN; } });
 Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return popover_1.STATE_CHANGE_TYPE; } });
 Object.defineProperty(exports, "ANIMATE_IN_TIME", { enumerable: true, get: function () { return popover_1.ANIMATE_IN_TIME; } });
 Object.defineProperty(exports, "ANIMATE_OUT_TIME", { enumerable: true, get: function () { return popover_1.ANIMATE_OUT_TIME; } });
+var constants_1 = require("baseui/popover/constants");
+Object.defineProperty(exports, "ARROW_SIZE", { enumerable: true, get: function () { return constants_1.ARROW_SIZE; } });
+Object.defineProperty(exports, "ARROW_WIDTH", { enumerable: true, get: function () { return constants_1.ARROW_WIDTH; } });
+Object.defineProperty(exports, "POPOVER_MARGIN", { enumerable: true, get: function () { return constants_1.POPOVER_MARGIN; } });

package/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/progress/circular/styled-component.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledLabel = exports.StyledLabelContainer = exports.StyledProgress = exports.StyledBar = exports.StyledSvg = exports.StyledBarContainer = exports.StyledRoot = exports.VIEWBOX_SIZE = exports.getProgressInlineStyles = void 0;
+exports.StyledLabel = exports.StyledLabelContainer = exports.StyledProgress = exports.StyledBar = exports.StyledSvg = exports.StyledBarContainer = exports.StyledRoot = exports.getProgressInlineStyles = exports.VIEWBOX_SIZE = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var style_1 = require("../../style");
@@ -14,6 +14,7 @@ var BaseProgress = function (_a) {
     var inlineStyles = _a.inlineStyles, props = (0, tslib_1.__rest)(_a, ["inlineStyles"]);
     return ((0, jsx_runtime_1.jsx)("circle", (0, tslib_1.__assign)({ style: inlineStyles }, props), void 0));
 };
+exports.VIEWBOX_SIZE = 44;
 var getProgressInlineStyles = function (_a) {
     var strokeWidth = _a.strokeWidth, value = _a.value, infinite = _a.infinite;
     var circumference = 2 * Math.PI * ((exports.VIEWBOX_SIZE - strokeWidth) / 2);
@@ -22,7 +23,6 @@ var getProgressInlineStyles = function (_a) {
     };
 };
 exports.getProgressInlineStyles = getProgressInlineStyles;
-exports.VIEWBOX_SIZE = 44;
 exports.StyledRoot = (0, style_1.styled)('span', 'relative inline-flex', function (_a, _b) {
     var px2rem = _a.px2rem;
     var $size = _b.$size;
@@ -62,14 +62,14 @@ exports.StyledBar = (0, style_1.styled)('circle', function (_a, _b) {
         cx: px2rem(exports.VIEWBOX_SIZE),
         cy: px2rem(exports.VIEWBOX_SIZE),
         r: px2rem((exports.VIEWBOX_SIZE - $strokeWidth) / 2),
-        strokeWidth: $strokeWidth,
+        strokeWidth: $strokeWidth.toString(),
     });
 });
 exports.StyledProgress = (0, style_1.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 * ((exports.VIEWBOX_SIZE - $strokeWidth) / 2);
-    return (0, tslib_1.__assign)({ cx: px2rem(exports.VIEWBOX_SIZE), cy: px2rem(exports.VIEWBOX_SIZE), r: px2rem((exports.VIEWBOX_SIZE - $strokeWidth) / 2), strokeWidth: $strokeWidth }, (!$infinite
+    return (0, tslib_1.__assign)({ cx: px2rem(exports.VIEWBOX_SIZE), cy: px2rem(exports.VIEWBOX_SIZE), r: px2rem((exports.VIEWBOX_SIZE - $strokeWidth) / 2), strokeWidth: $strokeWidth.toString() }, (!$infinite
         ? {
             willChange: 'strokeDashoffset',
             transitionTimingFunction: 'ease',

package/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/radio/basewebAdapters.js

@@ -7,6 +7,7 @@ var helpers_1 = require("../helpers");
 var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
 var styled_components_1 = require("./styled-components");
 var context_1 = require("../form-control/context");
+var useCombinedRef_1 = require("../hooks/useCombinedRef");
 exports.SpaceRadioContext = (0, react_1.createContext)({
     size: 'md',
     intent: 'default',
@@ -19,7 +20,7 @@ function useRadioGroupAdapter(props) {
             style: [className, style],
         },
     }, overrides);
-    return { adaptedProps: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: convertOverrides }) };
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: convertOverrides, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur });
 }
 exports.useRadioGroupAdapter = useRadioGroupAdapter;
 var useRadioAdapter = function (props) {
@@ -44,8 +45,10 @@ 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 (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides });
+    var inputRefObj = (0, useCombinedRef_1.useCombineRefObjects)(props.inputRef);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur, inputRef: inputRefObj });
 };
 exports.useRadioAdapter = useRadioAdapter;

package/radio/radio.js

@@ -6,6 +6,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var radio_1 = require("baseui/radio");
 var react_1 = require("react");
 var basewebAdapters_1 = require("./basewebAdapters");
+var context_1 = require("../form-control/context");
 // @ts-ignore
 radio_1.Radio.displayName = 'BaseUIRadio';
 // @ts-ignore
@@ -17,11 +18,11 @@ var Radio = function (props) {
 exports.Radio = Radio;
 exports.Radio.displayName = 'Radio';
 var RadioGroup = function (props) {
-    var adaptedProps = (0, basewebAdapters_1.useRadioGroupAdapter)(props).adaptedProps;
-    var memoizedProviderValue = (0, react_1.useMemo)(function () { return ({ size: props.size || 'md', intent: props.intent || 'default' }); }, [
-        props.size,
-        props.intent,
-    ]);
+    var adaptedProps = (0, basewebAdapters_1.useRadioGroupAdapter)(props);
+    var _a = (0, context_1.useContextualFormProps)(props, {
+        intent: 'default',
+    }), formIntent = _a.intent, _b = _a.size, formSize = _b === void 0 ? 'md' : _b;
+    var memoizedProviderValue = (0, react_1.useMemo)(function () { return ({ size: formSize, intent: formIntent }); }, [formSize, formIntent]);
     return ((0, jsx_runtime_1.jsx)(basewebAdapters_1.SpaceRadioContext.Provider, (0, tslib_1.__assign)({ value: memoizedProviderValue }, { children: (0, jsx_runtime_1.jsx)(radio_1.RadioGroup, (0, tslib_1.__assign)({}, adaptedProps), void 0) }), void 0));
 };
 exports.RadioGroup = RadioGroup;

package/radio/styled-components.js

@@ -123,19 +123,17 @@ 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/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/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,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/select/base-select.js

@@ -48,7 +48,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],
@@ -67,6 +67,8 @@ var BaseSelect = /** @class */ (function (_super) {
                         selectAllSelected: _this.isSelectAllChecked(value, options),
                         noResultsMsg: noResultsMsg,
                         captureScroll: captureScroll,
+                        virtual: virtual,
+                        overscanCount: 20,
                     },
                 },
                 DropdownContainer: {
@@ -76,7 +78,8 @@ var BaseSelect = /** @class */ (function (_super) {
                     },
                     style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (popoverMinWidth ? { minWidth: popoverMinWidth } : {})), (0, longHandHelpers_1.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: overrides_1.getControlContainerStyles, props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled }) },
                 ValueContainer: { style: overrides_1.getValueContainerStyles, props: (0, helpers_1.add$props)({ intent: intent, size: size, disabled: disabled }) },
                 MultiValue: { component: multi_value_1.default, props: { selectSize: size } },
@@ -84,12 +87,10 @@ var BaseSelect = /** @class */ (function (_super) {
                 InputContainer: {
                     component: styled_component_1.InputContainer,
                     props: { menuId: _this.menuId, size: size },
-                    style: overrides_1.getValueTypography,
                 },
                 Input: {
                     component: styled_component_1.Input,
                     props: { id: id, menuId: searchable ? _this.menuId : null, onPaste: _this.handlePaste },
-                    style: overrides_1.getSelectInputStyles,
                 },
                 Placeholder: {
                     style: styled_components_1.getPlaceholderTypography,
@@ -101,7 +102,13 @@ var BaseSelect = /** @class */ (function (_super) {
                 SearchIconContainer: { style: overrides_1.getSearchIconContainerStyles },
                 Popover: {
                     component: popover_1.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 ((0, jsx_runtime_1.jsx)(loader_1.Loader, { size: 16, variant: "clip", className: "mx-1", overrides: {
@@ -113,6 +120,7 @@ var BaseSelect = /** @class */ (function (_super) {
             };
         };
         _this.mergeOptions = function (options1, options2) {
+            var _a;
             var mergedOptions = options1;
             if (Array.isArray(options1)) {
                 if (Array.isArray(options2)) {
@@ -129,10 +137,10 @@ var BaseSelect = /** @class */ (function (_super) {
                 mergedOptions = (0, tslib_1.__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;
@@ -220,7 +228,7 @@ var BaseSelect = /** @class */ (function (_super) {
                         newCreatedValues = this.getCreatedValues(newCreatedOptions);
                         mergedValue = this.mergeOptions(value, newCreatedValues);
                         onChange({
-                            option: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, newCreatedOptions[0]), { isCreatable: true }),
+                            option: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, newCreatedOptions === null || newCreatedOptions === void 0 ? void 0 : newCreatedOptions[0]), { isCreatable: true }),
                             type: constants_1.STATE_CHANGE_TYPE.select,
                             value: this.getNormalizedOptions(mergedValue),
                         });
@@ -242,15 +250,12 @@ var BaseSelect = /** @class */ (function (_super) {
             onChange({ type: constants_1.STATE_CHANGE_TYPE.select, value: _this.getNormalizedOptions(mergedValue) });
         };
         _this.inputRef = React.createRef();
-        _this.combinedInputRef = (0, memoize_one_1.default)(function (refParam) {
-            return (0, useCombinedRef_1.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 ((0, jsx_runtime_1.jsx)(locale_1.LocaleConsumer, { children: function (locale) { return ((0, jsx_runtime_1.jsx)(spaceConsumer_1.default, { children: function (utils) { return ((0, jsx_runtime_1.jsx)(styled_component_1.StyledSelect, (0, tslib_1.__assign)({}, (0, omit_1.default)(_this.props, 'size'), { overrides: (0, useConvertOverrides_1.mergeAndConvertOverrides)(_this.getSelectOverrides(), selectOverrides, utils), controlRef: _this.combinedInputRef(controlRef), options: _this.getOptions(locale, _this.createdOptions, options), onChange: _this.handleChange, type: adaptor_1.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 ((0, jsx_runtime_1.jsx)(locale_1.LocaleConsumer, { children: function (locale) { return ((0, jsx_runtime_1.jsx)(spaceConsumer_1.default, { children: function (utils) { return ((0, jsx_runtime_1.jsx)(styled_component_1.StyledSelect, (0, tslib_1.__assign)({}, (0, omit_1.default)(_this.props, 'size'), { overrides: (0, useConvertOverrides_1.mergeAndConvertOverrides)(_this.getSelectOverrides(), selectOverrides, utils), controlRef: controlRef, inputRef: (0, useCombinedRef_1.combineRefs)(_this.inputRef, inputRef), options: _this.getOptions(locale, _this.createdOptions, options), onChange: _this.handleChange, type: adaptor_1.typeAdaptor[type] }), void 0)); } }, void 0)); } }, void 0));
     };
     BaseSelect.defaultProps = default_props_1.default;
     return BaseSelect;

package/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/select/default-props.js

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

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

package/select/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultFilterOptions = exports.SingleValue = exports.MobileSheet = exports.SelectMenuAdapter = exports.MultiValue = exports.SingleSelect = exports.MultiSelect = exports.StatefulSelect = exports.Select = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledSearchIcon = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.STATE_CHANGE_TYPE = exports.SELECT_ALL_ID = void 0;
+exports.defaultFilterOptions = exports.SingleValue = exports.MobileSheet = exports.SelectMenuAdapter = exports.MultiValue = exports.SingleSelect = exports.MultiSelect = exports.StatefulSelect = exports.Select = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.STATE_CHANGE_TYPE = exports.SELECT_ALL_ID = void 0;
 var types_1 = require("./types");
 Object.defineProperty(exports, "SELECT_ALL_ID", { enumerable: true, get: function () { return types_1.SELECT_ALL_ID; } });
 var constants_1 = require("./constants");
@@ -19,7 +19,6 @@ Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function
 Object.defineProperty(exports, "StyledInputContainer", { enumerable: true, get: function () { return styled_component_1.StyledInputContainer; } });
 Object.defineProperty(exports, "StyledInputSizer", { enumerable: true, get: function () { return styled_component_1.StyledInputSizer; } });
 Object.defineProperty(exports, "StyledPlaceholder", { enumerable: true, get: function () { return styled_component_1.StyledPlaceholder; } });
-Object.defineProperty(exports, "StyledSearchIcon", { enumerable: true, get: function () { return styled_component_1.StyledSearchIcon; } });
 Object.defineProperty(exports, "StyledSearchIconContainer", { enumerable: true, get: function () { return styled_component_1.StyledSearchIconContainer; } });
 Object.defineProperty(exports, "StyledSelectArrow", { enumerable: true, get: function () { return styled_component_1.StyledSelectArrow; } });
 Object.defineProperty(exports, "StyledSingleValue", { enumerable: true, get: function () { return styled_component_1.StyledSingleValue; } });

package/select/mobileSelect/MobileSelect.js

@@ -12,12 +12,10 @@ var usePauseBodyScrollEffect_1 = require("./hooks/usePauseBodyScrollEffect");
 exports.MobileSelect = React.memo(function (props) {
     var overrides = props.overrides, children = props.children, label = props.label;
     var _a = (0, tslib_1.__read)(React.useState(null), 2), scrollContainer = _a[0], setScrollContainer = _a[1];
-    var mergedOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, (0, overrides_2.getOverlayOverrides)({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides]);
-    var childSelectOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, overrides_2.CHILD_SELECT_OVERRIDES); }, [
-        overrides,
-    ]);
+    var mergedOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, (0, overrides_2.getOverlayOverrides)({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides, label]);
+    var childSelectOverrides = React.useMemo(function () { return (0, overrides_1.mergeOverrides)(overrides !== null && overrides !== void 0 ? overrides : {}, overrides_2.CHILD_SELECT_OVERRIDES); }, [overrides]);
     var overlaySelectProps = (0, omit_1.default)(props, overrides_2.OVERLAY_SELECT_PROPS_TO_OMIT);
     var viewSelectProps = (0, omit_1.default)(props, overrides_2.CHILD_SELECT_PROPS_TO_OMIT);
     (0, usePauseBodyScrollEffect_1.usePauseBodyScrollEffect)({ currentEl: scrollContainer || undefined });
-    return ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay" }, { children: React.isValidElement(children) ? (children) : ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({}, viewSelectProps, { overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay", filterOptions: overlaySelectProps.filterOptions }, { children: React.isValidElement(children) ? (children) : ((0, jsx_runtime_1.jsx)(index_1.Select, (0, tslib_1.__assign)({}, viewSelectProps, { filterOptions: viewSelectProps.filterOptions, overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
 });

package/select/multi-value.js

@@ -13,7 +13,7 @@ function MultiValue(props) {
     var _b = props.overrides, overrides = _b === void 0 ? {} : _b, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, restProps = (0, tslib_1.__rest)(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled"]);
     var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Tag, tag_1.Tag), 2), TagComponent = _c[0], tagProps = _c[1];
     var theme = (0, style_1.useStyle)().theme;
-    var multiSelectTheme = (0, react_1.useMemo)(function () { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', selectSize, 'lg'); }, [
+    var multiSelectTheme = (0, react_1.useMemo)(function () { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'multiSelect', selectSize, 'md'); }, [
         selectSize,
         theme,
     ]);