@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/esm/input/styled-components.js

@@ -117,7 +117,7 @@ export var getInputStyles = function (utils, props) {
         // baseweb applies this style in order to support style in safari
         styles['-webkit-text-fill-color'] = theme.spr.text02;
     }
-    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, 'lg');
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, 'md');
     styles.lineHeight = inputSizeTheme.lineHeight;
     styles.paddingLeft = styles.paddingRight = inputSizeTheme.paddingX;
     styles.paddingTop = styles.paddingBottom = inputSizeTheme.paddingY;

package/esm/input/types.d.ts

@@ -1,3 +1,4 @@
+import { Ref, ChangeEvent } from 'react';
 import { InputProps as BaseInputProps, StatefulInputProps as BaseStatefulInputProps, SharedProps as BaseSharedProps, InputOverrides as BaseUIInputOverrides } from 'baseui/input';
 import { SpacewebComponentProps, Intent } from '../types';
 import { Override } from '../overrides';
@@ -20,9 +21,11 @@ declare type CommonInputProps = {
     size?: InputSize;
     overrides?: InputOverrides;
     intent?: Intent;
-    debouncedOnChange?: BaseInputProps['onChange'];
+    debouncedOnChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     debounceInterval?: number;
     autoFocus?: FocusPosition;
+    inputRef?: Ref<HTMLInputElement>;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
 export declare type SharedProps = Omit<BaseSharedProps, '$size' | '$positive' | '$error'> & {
     $isStart: boolean;
@@ -30,8 +33,8 @@ export declare type SharedProps = Omit<BaseSharedProps, '$size' | '$positive' |
     $variant: InputVariant;
     $intent: Intent;
 };
-export declare type InputProps = Omit<SpacewebComponentProps<BaseInputProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
-export declare type StatefulInputProps = Omit<SpacewebComponentProps<BaseStatefulInputProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
+export declare type InputProps = Omit<SpacewebComponentProps<BaseInputProps>, 'positive' | 'error' | keyof CommonInputProps> & CommonInputProps;
+export declare type StatefulInputProps = Omit<SpacewebComponentProps<BaseStatefulInputProps>, 'positive' | 'error' | keyof CommonInputProps> & CommonInputProps;
 export interface MaskedInputProps extends InputProps {
     mask?: string;
     maskChar?: string;

package/esm/list/avatar-list-item.js

@@ -1,18 +1,14 @@
 import { __assign, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Avatar } from '../avatar';
-import { mergeOverrides } from '../overrides';
+import { Stack } from '../stack';
 import ListItem from './list-item';
 var AvatarListItem = forwardRef(function (_a, ref) {
     var $item = _a.$item, $labelKey = _a.$labelKey, $valueKey = _a.$valueKey, $multi = _a.$multi, children = _a.children, startEnhancer = _a.startEnhancer, avatarProps = _a.avatarProps, menuItemProps = __rest(_a, ["$item", "$labelKey", "$valueKey", "$multi", "children", "startEnhancer", "avatarProps"]);
     var sharedProps = { $item: $item, $labelKey: $labelKey, $valueKey: $valueKey, $multi: $multi };
-    var avatarOverrides = mergeOverrides({ Root: { style: function (_a) {
-                var px2rem = _a.px2rem;
-                return ({ marginRight: px2rem(6) });
-            } } }, avatarProps.overrides);
-    var startEnhancerOverride = function (enhancerProps) { return (_jsxs(_Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(__assign(__assign({}, enhancerProps), sharedProps)) : startEnhancer, _jsx(Avatar, __assign({ size: "md" }, avatarProps, { overrides: avatarOverrides }), void 0)] }, void 0)); };
-    return (_jsx(ListItem, __assign({ startEnhancer: startEnhancerOverride }, menuItemProps, { ref: ref }, { children: children }), void 0));
+    var startEnhancerOverride = function (enhancerProps) { return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 1, className: "items-center" }, { children: [typeof startEnhancer === 'function' ? startEnhancer(__assign(__assign({}, enhancerProps), sharedProps)) : startEnhancer, _jsx(Avatar, __assign({ size: "md" }, avatarProps), void 0)] }), void 0)); };
+    return (_jsx(ListItem, __assign({ startEnhancer: startEnhancerOverride }, menuItemProps, { className: ['py-1', menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.className], ref: ref }, { children: children }), void 0));
 });
 AvatarListItem.displayName = 'AvatarListItem';
 export default AvatarListItem;

package/esm/list/divider.js

@@ -1,15 +1,18 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import cx from '../classNames';
 import { useOverrides } from '../overrides';
 import ListItem from './list-item';
 import { StyledListItemDivider } from './styled-component';
 var Divider = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, restProps = __rest(_a, ["children", "first", "overrides"]);
+    var children = _a.children, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, className = _a.className, restProps = __rest(_a, ["children", "first", "overrides", "className"]);
     var _d = __read(useOverrides(overrides.Separator, StyledListItemDivider), 2), Separator = _d[0], separatorProps = _d[1];
     var _e = __read(useOverrides(overrides.SubHeader, ListItem), 2), SubHeader = _e[0], subHeaderProps = _e[1];
-    return children ? (_jsx(SubHeader, __assign({ className: cx('spr-border-01 border-solid border-b-0 border-l-0 border-r-0 pb-1', first ? 'border-t-0 pt-0' : 'border-t'), "aria-disabled": true }, restProps, subHeaderProps, { ref: ref }, { children: children }), void 0)) : (_jsx(Separator, __assign({ "data-spaceweb": "divider", "aria-disabled": true }, restProps, { ref: ref }, separatorProps), void 0));
+    return children ? (_jsx(SubHeader, __assign({ className: [
+            'spr-border-01 border-solid border-b-0 border-l-0 border-r-0 pb-1 mx-0 rounded-0',
+            first ? 'border-t-0 pt-0' : 'border-t',
+            className,
+        ], "aria-disabled": true }, restProps, subHeaderProps, { ref: ref }, { children: children }), void 0)) : (_jsx(Separator, __assign({ "data-spaceweb": "divider", "aria-disabled": true, className: className }, restProps, { ref: ref }, separatorProps), void 0));
 });
 Divider.displayName = 'Divider';
 export default Divider;

package/esm/list/list.d.ts

@@ -1,12 +1,17 @@
-/// <reference types="react" />
-declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: React.ElementType<any> | undefined;
     className?: import("..").Styles;
     style?: import("..").Styles;
 } & {
-    children?: import("react").ReactNode;
+    children?: React.ReactNode;
+    virtual?: boolean | undefined;
     overrides?: {
         Root?: import("../overrides").Override<Record<string, any>> | undefined;
     } | undefined;
-} & import("react").RefAttributes<HTMLElement>>>;
+    scrollElement?: HTMLElement | null | undefined;
+    overscanCount?: number | undefined;
+    estimateItemSize?: number | undefined;
+    $showFocusOutline?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/esm/list/list.js

@@ -1,12 +1,53 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import * as React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { useOverrides } from '../overrides';
+import useCombinedRef, { combineRefs } from '../hooks/useCombinedRef';
 import { StyledList } from './styled-component';
-var List = forwardRef(function (_a, ref) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, restProps = __rest(_a, ["overrides", "children"]);
-    var _c = __read(useOverrides(overrides.Root, StyledList), 2), Root = _c[0], rootProps = _c[1];
-    return (_jsx(Root, __assign({ "data-spaceweb": "list", role: "list" }, restProps, rootProps, { ref: ref }, { children: children }), void 0));
+import { Box } from '../box';
+import { measureElement } from './utils';
+var DEFAULT_LIST_ITEM_HEIGHT = 38;
+var DEFAULT_OVER_SCAN_COUNT = 10;
+var getCloneElement = function (item, virtualRow, totalCount) {
+    var _a, _b;
+    return React.cloneElement(item, {
+        className: [
+            'w-full absolute top-0 left-0 box-border',
+            { transform: "translateY(".concat(virtualRow.start, "px)") },
+            item.props.className,
+        ],
+        // @ts-ignore -- item.ref is not present in react types
+        ref: combineRefs(virtualRow.measureElement, item.ref),
+        'aria-posinset': (_a = item.props['aria-posinset']) !== null && _a !== void 0 ? _a : virtualRow.index + 1,
+        'aria-setsize': (_b = item.props['aria-setsize']) !== null && _b !== void 0 ? _b : totalCount,
+    });
+};
+var List = React.forwardRef(function (_a, forwardedRef) {
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, restProps = __rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role"]);
+    var _f = __read(useOverrides(overrides.Root, StyledList), 2), Root = _f[0], rootProps = _f[1];
+    var parentRef = React.useRef(null);
+    var combinedRef = useCombinedRef(parentRef, forwardedRef);
+    var childrenArr = React.Children.toArray(children);
+    var rowVirtualizer = useVirtualizer({
+        count: childrenArr.length,
+        getScrollElement: function () { return scrollElement || parentRef.current; },
+        estimateSize: function () { return estimateItemSize; },
+        overscan: overscanCount,
+        measureElement: measureElement,
+    });
+    if (virtual) {
+        return (_jsx(Root, __assign({ "data-spaceweb": "list", "$as": "div", role: role }, restProps, rootProps, { ref: combinedRef }, { children: _jsx(Box
+            // NOTE: resetting margin and padding here. should be removed when normalize css merges
+            , __assign({ 
+                // NOTE: resetting margin and padding here. should be removed when normalize css merges
+                className: "w-full relative p-0 m-0", style: {
+                    height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+                }, "$as": "ul" }, { children: rowVirtualizer
+                    .getVirtualItems()
+                    .map(function (virtualRow) { return getCloneElement(childrenArr[virtualRow.index], virtualRow, childrenArr.length); }) }), void 0) }), void 0));
+    }
+    return (_jsx(Root, __assign({ "data-spaceweb": "list", role: role }, restProps, rootProps, { ref: combinedRef }, { children: children }), void 0));
 });
 List.displayName = 'List';
-export default memo(List);
+export default React.memo(List);

package/esm/list/styled-component.js

@@ -3,11 +3,9 @@ import cx from '../classNames';
 import { borderRadius } from '../helpers/longHandHelpers';
 import { getComponentTheme } from '../helpers/themeHelpers';
 import { styled } from '../style';
-// `pl-0 pr-0 mt-0 mb-0` should not be needed, normalize css is not applied to docs
-export var StyledList = styled('ul', 'box-border spr-ui-01 pl-0 pr-0 mt-0 mb-0', function (_a) {
-    var px2rem = _a.px2rem;
-    return (__assign({ paddingTop: px2rem(10), paddingBottom: px2rem(10) }, borderRadius('inherit')));
-}, function (_, _a) {
+export var StyledList = styled('ul', 
+// bottom spacing will be added by ListItem
+'box-border spr-ui-01 py-1 px-1 my-0', borderRadius('inherit'), function (_, _a) {
     var $showFocusOutline = _a.$showFocusOutline;
     return ($showFocusOutline ? 'focus-visible:outline-01' : '');
 });
@@ -29,7 +27,7 @@ var backgroundColor = function (_a, _b) {
 };
 export var StyledListItem = styled('li', function (_a, props) {
     var getStyle = _a.getStyle;
-    return getStyle(cx('relative flex justify-start py-2 px-4 typography-l1 fill-current spr-ui-01', {
+    return getStyle(cx('relative flex justify-start mb-1 last-child:mb-0 py-2 px-3 typography-l1 fill-current spr-ui-01 rounded-6', {
         'items-start': props.$alignItems === 'start',
         'items-center': props.$alignItems === 'center',
         'cursor-pointer': props.$button && !props.$disabled,
@@ -50,20 +48,20 @@ export var StyledSecondaryText = styled('div', 'spr-text-02 typography-l3', func
         marginTop: px2rem(2),
     });
 });
-export var StyledListItemDivider = styled('li', 'block h-px spr-ui-03');
+export var StyledListItemDivider = styled('li', 'block h-px spr-ui-03 mb-1 last-child:mb-0');
 export var StyledStartEnhancer = styled('div', 'inline-flex', function (_a, props) {
     var getStyle = _a.getStyle, direction = _a.direction;
     return getStyle(cx({
-        'pr-3': direction !== 'rtl',
-        'pl-3': direction === 'rtl',
+        'pr-2': direction !== 'rtl',
+        'pl-2': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });
 export var StyledEndEnhancer = styled('div', 'inline-flex', function (_a, props) {
     var getStyle = _a.getStyle, direction = _a.direction;
     return getStyle(cx({
-        'pl-3': direction !== 'rtl',
-        'pr-3': direction === 'rtl',
+        'pl-2': direction !== 'rtl',
+        'pr-2': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });

package/esm/list/types.d.ts

@@ -32,9 +32,14 @@ export declare type ListItemProps = SpacewebComponentProps & {
 };
 export declare type ListProps = SpacewebComponentProps & {
     children?: ReactNode;
+    virtual?: boolean;
     overrides?: {
         Root?: Override<Record<string, any>>;
     };
+    scrollElement?: HTMLElement | null;
+    overscanCount?: number;
+    estimateItemSize?: number;
+    $showFocusOutline?: boolean;
 };
 export declare type ListItemTextProps = {
     children?: ReactNode;

package/esm/list/utils.d.ts

@@ -0,0 +1,2 @@
+import type { measureElement as measureElementType } from '@tanstack/react-virtual';
+export declare const measureElement: typeof measureElementType;

package/esm/list/utils.js

@@ -0,0 +1,10 @@
+var parseMeasurement = function (str) { return parseFloat(str) || 0; };
+// by default react-virtual uses getBoundingClientRect to calculate dimensions.
+// overriding it to use height + margin, so that we do not have to wrap each ListItem with another element
+export var measureElement = function (element, instance) {
+    var elementStyle = window.getComputedStyle(element);
+    var marginX = parseMeasurement(elementStyle.marginLeft) + parseMeasurement(elementStyle.marginRight);
+    var marginY = parseMeasurement(elementStyle.marginTop) + parseMeasurement(elementStyle.marginBottom);
+    var boundingRect = element.getBoundingClientRect();
+    return instance.options.horizontal ? boundingRect.width + marginX : boundingRect.height + marginY;
+};

package/esm/locale/en_US.js

@@ -56,6 +56,9 @@ export var DEFAULT_LOCALE = {
         rangeErrorMsg: 'Please select valid range.',
         presetMenuAriaLabel: 'Select a duration',
         popoverAriaLabel: 'Select a date range',
+        maxDateErrorMessage: 'Please select a date earlier than ${maxDate}',
+        minDateErrorMessage: 'Please select a date later than ${minDate}',
+        minMaxDateErrorMessage: 'Please select a date range between ${minDate} & ${maxDate}',
     },
     phoneInput: {
         countrySelectPlaceholder: 'Search',
@@ -65,4 +68,10 @@ export var DEFAULT_LOCALE = {
     menu: {
         nestedMenuItemAriaLabel: 'You are currently at an item that opens a nested menu. Press right arrow or spacebar to enter that element and left arrow or escape to return.',
     },
+    banner: {
+        toggleButtonShowLabel: 'Show',
+        toggleButtonHideLabel: 'Hide',
+        toggleButtonShowAriaLabel: 'Show Alerts',
+        toggleButtonHideAriaLabel: 'Hide Alerts',
+    },
 };

package/esm/locale/types.d.ts

@@ -3,6 +3,7 @@ import { SelectLocale } from '../select';
 import { AsyncSelectLocale } from '../asyncSelect';
 import { PhoneInputLocale } from '../phone-input';
 import { DatePickerLocale } from '../date-picker/locale';
+import { BannerLocale } from '../banner';
 export declare type Locale = {
     select: SelectLocale;
     asyncSelect: AsyncSelectLocale;
@@ -18,4 +19,5 @@ export declare type Locale = {
     menu: {
         nestedMenuItemAriaLabel: string;
     };
+    banner: BannerLocale;
 };

package/esm/menu/menu-item.d.ts

@@ -27,7 +27,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             selected?: boolean | undefined;
             startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
         } & Record<string, any>> | undefined;
-        Popover?: import("../overrides").Override<Omit<import("baseui/popover").PopoverProps, "overrides" | "children"> & {
+        Popover?: import("../overrides").Override<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
             overrides?: ({
                 Body?: import("../overrides").Override<any> | undefined;
                 Arrow?: import("../overrides").Override<any> | undefined;
@@ -39,6 +39,9 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                 isOpen: boolean;
             }) => React.ReactNode);
             targetElement?: HTMLElement | null | undefined;
+            triggerType?: import("../popover").TriggerType | undefined;
+            placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+            innerRef?: React.Ref<HTMLElement> | undefined;
         } & Record<string, any>> | undefined;
     } | undefined;
 } & React.RefAttributes<HTMLElement>>>;

package/esm/menu/menu.d.ts

@@ -10,9 +10,14 @@ declare const _default: import("react").MemoExoticComponent<import("react").Forw
             style?: import("..").Styles;
         } & {
             children?: import("react").ReactNode;
+            virtual?: boolean | undefined;
             overrides?: {
                 Root?: import("../overrides").Override<Record<string, any>> | undefined;
             } | undefined;
+            scrollElement?: HTMLElement | null | undefined;
+            overscanCount?: number | undefined;
+            estimateItemSize?: number | undefined;
+            $showFocusOutline?: boolean | undefined;
         } & Record<string, any>> | undefined;
     } | undefined;
     onHighlightedItemChange?: ((item?: HTMLElement | null | undefined) => void) | undefined;

package/esm/menu/menu.js

@@ -11,18 +11,18 @@ import useItemContainerEventHandlers from './useItemContainerEventHandlers';
 import useStatefulMenu from './useStatefulMenu';
 import { useNestedMenuContext } from './nested-menu-context';
 var Menu = forwardRef(function (_a, ref) {
-    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, children = _a.children, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _d = _a.reducer, reducer = _d === void 0 ? defaultReducer : _d, captureScroll = _a.captureScroll, restProps = __rest(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll"]);
-    var _e = __read(useState(null), 2), listRef = _e[0], setListRef = _e[1];
-    var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.List, List), 2), ListOverride = _f[0], listProps = _f[1];
-    var _g = __read(useState(null), 2), listItemsContainer = _g[0], setListItemsContainer = _g[1];
-    var _h = useStatefulMenu({
+    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? false : _d, overscanCount = _a.overscanCount, _e = _a.scrollElement, scrollElement = _e === void 0 ? null : _e, estimateItemSize = _a.estimateItemSize, children = _a.children, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _f = _a.reducer, reducer = _f === void 0 ? defaultReducer : _f, captureScroll = _a.captureScroll, restProps = __rest(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "virtual", "overscanCount", "scrollElement", "estimateItemSize", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll"]);
+    var _g = __read(useState(null), 2), listRef = _g[0], setListRef = _g[1];
+    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.List, List), 2), ListOverride = _h[0], listProps = _h[1];
+    var _j = __read(useState(null), 2), listItemsContainer = _j[0], setListItemsContainer = _j[1];
+    var _k = useStatefulMenu({
         disableNavigationOnMount: disableNavigationOnMount,
         disableAutoHighlight: disableAutoHighlight,
         focusWhenNavigationEnabled: focusWhenNavigationEnabled,
         onHighlightedItemChange: onHighlightedItemChange,
         listItemsContainerRef: listItemsContainer,
         reducer: reducer,
-    }), turnOnKeyboardNavigation = _h.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _h.turnOffKeyboardNavigation, highlightedItem = _h.highlightedItem, setHighlightedItem = _h.setHighlightedItem, nestedMenuOpen = _h.nestedMenuOpen, setNestedMenuOpen = _h.setNestedMenuOpen;
+    }), turnOnKeyboardNavigation = _k.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _k.turnOffKeyboardNavigation, highlightedItem = _k.highlightedItem, setHighlightedItem = _k.setHighlightedItem, nestedMenuOpen = _k.nestedMenuOpen, setNestedMenuOpen = _k.setNestedMenuOpen;
     var setScrollTarget = useScrollCapture({ enabled: captureScroll });
     var setListCombinedRef = useCombinedRefs(setListRef, setScrollTarget);
     var menuContextValue = useMemo(function () { return ({
@@ -50,7 +50,7 @@ var Menu = forwardRef(function (_a, ref) {
     }, [turnOnKeyboardNavigation, turnOffKeyboardNavigation, setHighlightedItem, listRef]);
     var nestedMenuContext = useNestedMenuContext();
     var $showFocusOutline = Object.keys(nestedMenuContext).length !== 0;
-    return (_jsx(MenuProvider, __assign({ value: menuContextValue }, { children: _jsx(ListOverride, __assign({ ref: setListCombinedRef, "$showFocusOutline": $showFocusOutline, role: "menu" }, restProps, listProps, { children: children }), void 0) }), void 0));
+    return (_jsx(MenuProvider, __assign({ value: menuContextValue }, { children: _jsx(ListOverride, __assign({ ref: setListCombinedRef, "$showFocusOutline": $showFocusOutline, role: "menu", virtual: virtual, overscanCount: overscanCount, scrollElement: scrollElement, estimateItemSize: estimateItemSize }, restProps, listProps, { children: children }), void 0) }), void 0));
 });
 Menu.displayName = 'Menu';
 export default memo(Menu);

package/esm/modal/adapter.d.ts

@@ -3,4 +3,4 @@ import { StyleUtils } from '../types';
 import { Role, Size } from './types';
 import { ValueOf } from '../utility-types';
 export declare const getWidthFromSize: ({ px2rem }: StyleUtils, size: Size) => string;
-export declare const roleMap: Record<Role, ValueOf<ROLE>>;
+export declare const roleMap: Record<Role, ValueOf<typeof ROLE>>;

package/esm/modal/index.d.ts

@@ -2,6 +2,6 @@ export { default as Modal } from './modal';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalFooter } from './modal-footer';
 export { FocusOnce } from 'baseui/modal';
-export { ModalBody, StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
+export { ModalBody, StyledRoot, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
 export type { SharedProps, ModalProps, ModalState, Size, Role, } from './types';
 export { CLOSE_SOURCE } from './types';

package/esm/modal/index.js

@@ -2,5 +2,5 @@ export { default as Modal } from './modal';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalFooter } from './modal-footer';
 export { FocusOnce } from 'baseui/modal';
-export { ModalBody, StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
+export { ModalBody, StyledRoot, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
 export { CLOSE_SOURCE } from './types';

package/esm/modal/modal.js

@@ -6,7 +6,7 @@ import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import Close from '../icon/components/close';
 import { useStyle } from '../style';
 import { getWidthFromSize, roleMap } from './adapter';
-import { getCloseButtonProps, getDialogContainerStyles, getDialogStyles, getBackdropStyles } from './overrides';
+import { getCloseButtonProps, getDialogContainerStyles, getDialogStyles } from './overrides';
 import { StyledModal } from './styled-components';
 import { add$props } from '../helpers';
 var CloseButton = function (closeProps) { return (_jsx(IconButton, __assign({}, closeProps, { children: _jsx(Close, {}, void 0) }), void 0)); };
@@ -25,10 +25,8 @@ var Modal = function (_a) {
             component: CloseButton,
             props: getCloseButtonProps(utils, sharedProps),
         },
-        Backdrop: { style: getBackdropStyles, props: sharedProps },
     }, overrides, [overrides, theme]);
-    // NOTE: `unstable_ModalBackdropScroll` is to make compatible for future version.
-    return (_jsx(StyledModal, __assign({}, props, { size: getWidthFromSize(utils, size), role: roleMap[role], unstable_ModalBackdropScroll: true, overrides: _overrides }), void 0));
+    return (_jsx(StyledModal, __assign({}, props, { size: getWidthFromSize(utils, size), role: roleMap[role], overrides: _overrides }), void 0));
 };
 Modal.displayName = 'Modal';
 export default React.memo(Modal);

package/esm/modal/overrides.d.ts

@@ -3,7 +3,6 @@ import { Styles, StyleUtils } from '../types';
 import { SharedProps } from './types';
 export declare const getDialogContainerStyles: Styles;
 export declare const getDialogStyles: Styles;
-export declare const getBackdropStyles: Styles;
 export declare const getCloseButtonProps: ({ px2rem, direction, theme }: StyleUtils, { $dialogSize }: {
     $dialogSize: SharedProps['$size'];
 }) => IconButtonProps;

package/esm/modal/overrides.js

@@ -38,7 +38,6 @@ export var getDialogStyles = [
     getDialogHeightControl,
     transitionDuration,
 ];
-export var getBackdropStyles = [transitionDuration];
 export var getCloseButtonProps = function (_a, _b) {
     var _c;
     var px2rem = _a.px2rem, direction = _a.direction, theme = _a.theme;

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

@@ -1,6 +1,6 @@
 import { ModalProps as BaseModalProps } from 'baseui/modal';
 import * as React from 'react';
-export { StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
+export { StyledRoot, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
 export declare const StyledModal: React.ComponentType<BaseModalProps>;
 export declare const StyledModalHeader: import("../style/styled").StyledComponent;
 export declare const ModalBody: import("../style/styled").StyledComponent;

package/esm/modal/styled-components.js

@@ -1,7 +1,7 @@
 import { Modal as BaseModal } from 'baseui/modal';
 import withThemeOverride from '../helpers/baseui/withThemeOverride';
 import { styled } from '../style';
-export { StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
+export { StyledRoot, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
 // @ts-ignore
 BaseModal.displayName = 'BaseUIModal';
 export var StyledModal = withThemeOverride(BaseModal, function (theme) { return ({

package/esm/overrides/mergeOverrides.js

@@ -1,11 +1,12 @@
 import { __assign } from "tslib";
 import { isValidElement } from 'react';
+import { isValidElementType } from 'react-is';
 import _mergeWith from 'lodash/mergeWith';
 import _isObject from 'lodash/isObject';
 import { combineRefs } from '../hooks/useCombinedRef';
 var mergeOverride = function (_target, _source) {
-    var target = typeof _target === 'function' ? { component: _target } : _target;
-    var source = typeof _source === 'function' ? { component: _source } : _source;
+    var target = isValidElementType(_target) ? { component: _target } : _target;
+    var source = isValidElementType(_source) ? { component: _source } : _source;
     var merged = __assign(__assign({}, target), source);
     if ((target === null || target === void 0 ? void 0 : target.props) && (source === null || source === void 0 ? void 0 : source.props)) {
         // deep merge
@@ -14,7 +15,7 @@ var mergeOverride = function (_target, _source) {
              * React elements are object. _merge deep merges react elements as well, which is not we usually want.
              * Check tests for more information
              */
-            if (isValidElement(b))
+            if (isValidElement(b) || isValidElementType(b))
                 return b;
             return undefined;
         });

package/esm/payment-card/basewebAdapters.js

@@ -1,12 +1,13 @@
 import { __assign } from "tslib";
+import _pick from 'lodash/pick';
 import { useContextualFormProps } from '../form-control/context';
 import useInputBasewebAdapter from '../input/basewebAdapters';
 import { getIconWrapperStyles } from './styled-components';
 import { add$props } from '../helpers';
 import { mergeOverrides } from '../overrides';
 var usePaymentCardBasewebAdapter = function (props) {
-    var _a = useContextualFormProps(props), size = _a.size, variant = _a.variant, intent = _a.intent;
-    var sharedProps = add$props({ size: size, variant: variant, intent: intent });
+    var contextualProps = useContextualFormProps(props);
+    var sharedProps = add$props(_pick(contextualProps, ['size', 'variant', 'intent']));
     var basePaymentCardStyles = {
         Input: {
             style: { paddingLeft: '0px' },
@@ -16,7 +17,7 @@ var usePaymentCardBasewebAdapter = function (props) {
             props: sharedProps,
         },
     };
-    var adaptedProps = useInputBasewebAdapter(__assign(__assign({}, props), { overrides: mergeOverrides(basePaymentCardStyles, props.overrides) }));
+    var adaptedProps = useInputBasewebAdapter(__assign(__assign({}, contextualProps), { overrides: mergeOverrides(basePaymentCardStyles, contextualProps.overrides) }));
     return adaptedProps;
 };
 export default usePaymentCardBasewebAdapter;

package/esm/payment-card/styled-components.js

@@ -6,7 +6,7 @@ export var getIconWrapperStyles = function (_a, _b) {
         marginLeft: '',
         marginRight: '',
     };
-    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, 'lg');
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, 'md');
     styles.marginLeft = styles.marginRight = inputSizeTheme.paddingX;
     return styles;
 };

package/esm/payment-card/types.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from 'react';
 import { PaymentCardProps as BasePaymentCardProps, StatefulPaymentCardProps as BaseStatefulPaymentCardProps, PaymentCardOverrides as BasePaymentCardOverrides } from 'baseui/payment-card';
 import { Override } from '../overrides';
 import { SpacewebComponentProps, Intent } from '../types';
@@ -11,7 +12,8 @@ declare type CommonInputProps = {
     overrides?: PaymentCardOverrides;
     intent?: Intent;
     autoFocus?: FocusPosition;
+    inputRef?: Ref<HTMLInputElement>;
 };
-export declare type PaymentCardProps = Omit<SpacewebComponentProps<BasePaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
-export declare type StatefulPaymentCardProps = Omit<SpacewebComponentProps<BaseStatefulPaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
+export declare type PaymentCardProps = Omit<SpacewebComponentProps<BasePaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus' | 'inputRef'> & CommonInputProps;
+export declare type StatefulPaymentCardProps = Omit<SpacewebComponentProps<BaseStatefulPaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus' | 'inputRef'> & CommonInputProps;
 export {};

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

@@ -7,7 +7,6 @@ import { Select as DefaultSelect } from '../select';
 import { ListItem } from '../list';
 import { Typography } from '../typography';
 import FlagContainer from './flag-container';
-import VirtualizedCountrySelectDropdown from './virtualized-country-select-dropdown';
 import { useLocale } from '../locale';
 import { mergeOverrides, useOverrides } from '../overrides';
 import { iso2FlagEmoji, countrySelectFilterOptions } from './utils';
@@ -26,7 +25,6 @@ var CountrySelect = function (props) {
                 props: {
                     overrides: {
                         Menu: {
-                            component: VirtualizedCountrySelectDropdown,
                             props: {
                                 'data-testid': 'country-select-menu',
                                 parentRef: overlayContentContainerRef,
@@ -86,6 +84,6 @@ var CountrySelect = function (props) {
             if (inputRef && inputRef.current) {
                 inputRef.current.focus();
             }
-        }, disabled: disabled, placeholder: locale.phoneInput.countrySelectPlaceholder, maxDropdownHeight: maxDropdownHeight, overlayWidth: maxDropdownWidth, filterOptions: countrySelectFilterOptions }, selectProps, { children: _jsx(FlagContainer, __assign({}, flagContainerProps), void 0) }), void 0));
+        }, disabled: disabled, placeholder: locale.phoneInput.countrySelectPlaceholder, maxDropdownHeight: maxDropdownHeight, overlayWidth: maxDropdownWidth, filterOptions: countrySelectFilterOptions, virtual: true }, selectProps, { children: _jsx(FlagContainer, __assign({}, flagContainerProps), void 0) }), void 0));
 };
 export default CountrySelect;

package/esm/phone-input/default-props.d.ts

@@ -1,11 +1,9 @@
-import { Intent } from '../types';
-import { InputSize, InputVariant } from '../input';
+import { InputVariant } from '../input';
 import { PhoneInputOverrides, Country } from './types';
 declare const defaultProps: {
     clearable: boolean;
     focusLock: boolean;
     disabled: boolean;
-    intent: Intent;
     maxDropdownHeight: string;
     maxDropdownWidth: string;
     name: undefined;
@@ -13,7 +11,6 @@ declare const defaultProps: {
     overrides: PhoneInputOverrides;
     positive: boolean;
     required: boolean;
-    size: InputSize;
     variant: InputVariant;
     value: {
         country: Country;

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

@@ -3,7 +3,6 @@ var defaultProps = {
     clearable: false,
     focusLock: false,
     disabled: false,
-    intent: 'default',
     maxDropdownHeight: DEFAULT_MAX_DROPDOWN_HEIGHT,
     maxDropdownWidth: DEFAULT_MAX_DROPDOWN_WIDTH,
     name: undefined,
@@ -11,7 +10,6 @@ var defaultProps = {
     overrides: {},
     positive: false,
     required: false,
-    size: 'lg',
     variant: 'default',
     value: {
         country: {

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

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