@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/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/list/utils.d.ts

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

package/list/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureElement = void 0;
+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
+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;
+};
+exports.measureElement = measureElement;

package/locale/en_US.js

@@ -59,6 +59,9 @@ exports.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',
@@ -68,4 +71,10 @@ exports.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/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/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/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/menu/menu.js

@@ -13,18 +13,18 @@ var useItemContainerEventHandlers_1 = (0, tslib_1.__importDefault)(require("./us
 var useStatefulMenu_1 = (0, tslib_1.__importDefault)(require("./useStatefulMenu"));
 var nested_menu_context_1 = require("./nested-menu-context");
 var Menu = (0, react_1.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 ? helpers_1.defaultReducer : _d, captureScroll = _a.captureScroll, restProps = (0, tslib_1.__rest)(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll"]);
-    var _e = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listRef = _e[0], setListRef = _e[1];
-    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.List, list_1.List), 2), ListOverride = _f[0], listProps = _f[1];
-    var _g = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listItemsContainer = _g[0], setListItemsContainer = _g[1];
-    var _h = (0, useStatefulMenu_1.default)({
+    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 ? helpers_1.defaultReducer : _f, captureScroll = _a.captureScroll, restProps = (0, tslib_1.__rest)(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "virtual", "overscanCount", "scrollElement", "estimateItemSize", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll"]);
+    var _g = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listRef = _g[0], setListRef = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.List, list_1.List), 2), ListOverride = _h[0], listProps = _h[1];
+    var _j = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listItemsContainer = _j[0], setListItemsContainer = _j[1];
+    var _k = (0, useStatefulMenu_1.default)({
         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 = (0, useScrollCapture_1.default)({ enabled: captureScroll });
     var setListCombinedRef = (0, useCombinedRef_1.default)(setListRef, setScrollTarget);
     var menuContextValue = (0, react_1.useMemo)(function () { return ({
@@ -52,7 +52,7 @@ var Menu = (0, react_1.forwardRef)(function (_a, ref) {
     }, [turnOnKeyboardNavigation, turnOffKeyboardNavigation, setHighlightedItem, listRef]);
     var nestedMenuContext = (0, nested_menu_context_1.useNestedMenuContext)();
     var $showFocusOutline = Object.keys(nestedMenuContext).length !== 0;
-    return ((0, jsx_runtime_1.jsx)(MenuContext_1.MenuProvider, (0, tslib_1.__assign)({ value: menuContextValue }, { children: (0, jsx_runtime_1.jsx)(ListOverride, (0, tslib_1.__assign)({ ref: setListCombinedRef, "$showFocusOutline": $showFocusOutline, role: "menu" }, restProps, listProps, { children: children }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(MenuContext_1.MenuProvider, (0, tslib_1.__assign)({ value: menuContextValue }, { children: (0, jsx_runtime_1.jsx)(ListOverride, (0, tslib_1.__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';
 exports.default = (0, react_1.memo)(Menu);

package/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/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/modal/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.CLOSE_SOURCE = exports.StyledModal = exports.StyledDialogContainer = exports.StyledDialog = exports.StyledClose = exports.StyledBackdrop = exports.StyledRoot = exports.ModalBody = exports.FocusOnce = exports.ModalFooter = exports.ModalHeader = exports.Modal = void 0;
+exports.CLOSE_SOURCE = exports.StyledModal = exports.StyledDialogContainer = exports.StyledDialog = exports.StyledClose = exports.StyledRoot = exports.ModalBody = exports.FocusOnce = exports.ModalFooter = exports.ModalHeader = exports.Modal = void 0;
 var modal_1 = require("./modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(modal_1).default; } });
 var modal_header_1 = require("./modal-header");
@@ -15,7 +15,6 @@ Object.defineProperty(exports, "FocusOnce", { enumerable: true, get: function ()
 var styled_components_1 = require("./styled-components");
 Object.defineProperty(exports, "ModalBody", { enumerable: true, get: function () { return styled_components_1.ModalBody; } });
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_components_1.StyledRoot; } });
-Object.defineProperty(exports, "StyledBackdrop", { enumerable: true, get: function () { return styled_components_1.StyledBackdrop; } });
 Object.defineProperty(exports, "StyledClose", { enumerable: true, get: function () { return styled_components_1.StyledClose; } });
 Object.defineProperty(exports, "StyledDialog", { enumerable: true, get: function () { return styled_components_1.StyledDialog; } });
 Object.defineProperty(exports, "StyledDialogContainer", { enumerable: true, get: function () { return styled_components_1.StyledDialogContainer; } });

package/modal/modal.js

@@ -27,10 +27,8 @@ var Modal = function (_a) {
             component: CloseButton,
             props: (0, overrides_1.getCloseButtonProps)(utils, sharedProps),
         },
-        Backdrop: { style: overrides_1.getBackdropStyles, props: sharedProps },
     }, overrides, [overrides, theme]);
-    // NOTE: `unstable_ModalBackdropScroll` is to make compatible for future version.
-    return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledModal, (0, tslib_1.__assign)({}, props, { size: (0, adapter_1.getWidthFromSize)(utils, size), role: adapter_1.roleMap[role], unstable_ModalBackdropScroll: true, overrides: _overrides }), void 0));
+    return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledModal, (0, tslib_1.__assign)({}, props, { size: (0, adapter_1.getWidthFromSize)(utils, size), role: adapter_1.roleMap[role], overrides: _overrides }), void 0));
 };
 Modal.displayName = 'Modal';
 exports.default = React.memo(Modal);

package/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/modal/overrides.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCloseButtonProps = exports.getBackdropStyles = exports.getDialogStyles = exports.getDialogContainerStyles = void 0;
+exports.getCloseButtonProps = exports.getDialogStyles = exports.getDialogContainerStyles = void 0;
 var tslib_1 = require("tslib");
 var getDialogHeightControl = function (_a, _b) {
     var px2rem = _a.px2rem;
@@ -41,7 +41,6 @@ exports.getDialogStyles = [
     getDialogHeightControl,
     transitionDuration,
 ];
-exports.getBackdropStyles = [transitionDuration];
 var getCloseButtonProps = function (_a, _b) {
     var _c;
     var px2rem = _a.px2rem, direction = _a.direction, theme = _a.theme;

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

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledModalFooter = exports.ModalBody = exports.StyledModalHeader = exports.StyledModal = exports.StyledDialogContainer = exports.StyledDialog = exports.StyledClose = exports.StyledBackdrop = exports.StyledRoot = void 0;
+exports.StyledModalFooter = exports.ModalBody = exports.StyledModalHeader = exports.StyledModal = exports.StyledDialogContainer = exports.StyledDialog = exports.StyledClose = exports.StyledRoot = void 0;
 var tslib_1 = require("tslib");
 var modal_1 = require("baseui/modal");
 var withThemeOverride_1 = (0, tslib_1.__importDefault)(require("../helpers/baseui/withThemeOverride"));
 var style_1 = require("../style");
 var modal_2 = require("baseui/modal");
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return modal_2.StyledRoot; } });
-Object.defineProperty(exports, "StyledBackdrop", { enumerable: true, get: function () { return modal_2.StyledBackdrop; } });
 Object.defineProperty(exports, "StyledClose", { enumerable: true, get: function () { return modal_2.StyledClose; } });
 Object.defineProperty(exports, "StyledDialog", { enumerable: true, get: function () { return modal_2.StyledDialog; } });
 Object.defineProperty(exports, "StyledDialogContainer", { enumerable: true, get: function () { return modal_2.StyledDialogContainer; } });

package/overrides/mergeOverrides.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.mergeOverrides = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
+var react_is_1 = require("react-is");
 var mergeWith_1 = (0, tslib_1.__importDefault)(require("lodash/mergeWith"));
 var isObject_1 = (0, tslib_1.__importDefault)(require("lodash/isObject"));
 var useCombinedRef_1 = require("../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 = (0, react_is_1.isValidElementType)(_target) ? { component: _target } : _target;
+    var source = (0, react_is_1.isValidElementType)(_source) ? { component: _source } : _source;
     var merged = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, target), source);
     if ((target === null || target === void 0 ? void 0 : target.props) && (source === null || source === void 0 ? void 0 : source.props)) {
         // deep merge
@@ -17,7 +18,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 ((0, react_1.isValidElement)(b))
+            if ((0, react_1.isValidElement)(b) || (0, react_is_1.isValidElementType)(b))
                 return b;
             return undefined;
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "10.1.0",
+  "version": "11.0.0",
   "description": "A React Component library implementing Sprinklr's Hyperspace design language",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -22,23 +22,24 @@
   "license": "ISC",
   "sideEffects": false,
   "dependencies": {
+    "@tanstack/react-virtual": "3.0.0-beta.18",
     "@types/react": "^17.0.39",
     "@types/styletron-engine-atomic": "^1.1.0",
     "@types/styletron-react": "^5.0.2",
-    "baseui": "~10.9.0",
+    "baseui": "~12.2.0",
     "body-scroll-lock": "3.1.5",
     "classnames": "2.2.6",
     "csstype": "^3.0.2",
     "lodash": "^4.17.15",
     "memoize-one": "~5.1.1",
-    "react-input-mask": "^2.0.4",
+    "react-input-mask": "2.0.4",
     "react-transition-group": "4.4.2",
-    "react-virtual": "^2.1.8",
     "styletron": "~3.0.4",
-    "styletron-engine-atomic": "~1.4.6",
-    "styletron-react": "~5.2.7",
-    "timezone-support": "^2.0.2",
-    "tslib": "^2.4.0"
+    "styletron-engine-atomic": "~1.5.0",
+    "styletron-react": "~6.1.0",
+    "timezone-support": "2.0.2",
+    "tslib": "^2.4.0",
+    "react-is": "^17.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.0",
@@ -60,6 +61,7 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.149",
+    "@types/react-is": "^17.0.2",
     "babel-plugin-transform-define": "^1.3.0",
     "babel-plugin-transform-styletron-display-name": "^1.1.3",
     "core-js": "^3.8.3",
@@ -75,7 +77,7 @@
     "ts-jest": "^26.5.6"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": ">=10.0.0 <11.0.0",
+    "@sprinklrjs/spaceweb-themes": "11.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -84,7 +86,8 @@
     "preset": "ts-jest",
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.ts",
-      "core-js"
+      "core-js",
+      "<rootDir>/../../internals/jest/setupAfterEnv.js"
     ],
     "testMatch": [
       "**/__tests__/**/*.spec.ts",

package/payment-card/basewebAdapters.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
 var context_1 = require("../form-control/context");
 var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("../input/basewebAdapters"));
 var styled_components_1 = require("./styled-components");
 var helpers_1 = require("../helpers");
 var overrides_1 = require("../overrides");
 var usePaymentCardBasewebAdapter = function (props) {
-    var _a = (0, context_1.useContextualFormProps)(props), size = _a.size, variant = _a.variant, intent = _a.intent;
-    var sharedProps = (0, helpers_1.add$props)({ size: size, variant: variant, intent: intent });
+    var contextualProps = (0, context_1.useContextualFormProps)(props);
+    var sharedProps = (0, helpers_1.add$props)((0, pick_1.default)(contextualProps, ['size', 'variant', 'intent']));
     var basePaymentCardStyles = {
         Input: {
             style: { paddingLeft: '0px' },
@@ -18,7 +19,7 @@ var usePaymentCardBasewebAdapter = function (props) {
             props: sharedProps,
         },
     };
-    var adaptedProps = (0, basewebAdapters_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { overrides: (0, overrides_1.mergeOverrides)(basePaymentCardStyles, props.overrides) }));
+    var adaptedProps = (0, basewebAdapters_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, contextualProps), { overrides: (0, overrides_1.mergeOverrides)(basePaymentCardStyles, contextualProps.overrides) }));
     return adaptedProps;
 };
 exports.default = usePaymentCardBasewebAdapter;

package/payment-card/styled-components.js

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

package/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/phone-input/country-select.js

@@ -9,7 +9,6 @@ var select_1 = require("../select");
 var list_1 = require("../list");
 var typography_1 = require("../typography");
 var flag_container_1 = (0, tslib_1.__importDefault)(require("./flag-container"));
-var virtualized_country_select_dropdown_1 = (0, tslib_1.__importDefault)(require("./virtualized-country-select-dropdown"));
 var locale_1 = require("../locale");
 var overrides_1 = require("../overrides");
 var utils_1 = require("./utils");
@@ -28,7 +27,6 @@ var CountrySelect = function (props) {
                 props: {
                     overrides: {
                         Menu: {
-                            component: virtualized_country_select_dropdown_1.default,
                             props: {
                                 'data-testid': 'country-select-menu',
                                 parentRef: overlayContentContainerRef,
@@ -88,6 +86,6 @@ var CountrySelect = function (props) {
             if (inputRef && inputRef.current) {
                 inputRef.current.focus();
             }
-        }, disabled: disabled, placeholder: locale.phoneInput.countrySelectPlaceholder, maxDropdownHeight: maxDropdownHeight, overlayWidth: maxDropdownWidth, filterOptions: utils_1.countrySelectFilterOptions }, selectProps, { children: (0, jsx_runtime_1.jsx)(flag_container_1.default, (0, tslib_1.__assign)({}, flagContainerProps), void 0) }), void 0));
+        }, disabled: disabled, placeholder: locale.phoneInput.countrySelectPlaceholder, maxDropdownHeight: maxDropdownHeight, overlayWidth: maxDropdownWidth, filterOptions: utils_1.countrySelectFilterOptions, virtual: true }, selectProps, { children: (0, jsx_runtime_1.jsx)(flag_container_1.default, (0, tslib_1.__assign)({}, flagContainerProps), void 0) }), void 0));
 };
 exports.default = CountrySelect;

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

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

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

package/phone-input/phone-input.js

@@ -11,8 +11,9 @@ var utils_1 = require("./utils");
 var overrides_1 = require("../overrides");
 var locale_1 = require("../locale");
 var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
+var context_1 = require("../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 = (0, tslib_1.__rest)(props, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value"]);
+    var _a = (0, context_1.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 = (0, tslib_1.__rest)(_a, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value"]);
     var locale = (0, locale_1.useLocale)();
     var inputRef = (0, react_1.useRef)(null);
     var mergedOverrides = (0, overrides_1.mergeOverrides)({
@@ -44,7 +45,7 @@ var PhoneInput = function (props) {
             },
         },
     }, overrides);
-    var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, input_1.Input), 2), Input = _a[0], inputProps = _a[1];
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, input_1.Input), 2), Input = _c[0], inputProps = _c[1];
     return ((0, jsx_runtime_1.jsx)(Input, (0, tslib_1.__assign)({ "aria-label": locale.phoneInput.inputAriaLabel, size: size, variant: variant, intent: intent, disabled: disabled, onChange: function (e) {
             var number = (0, utils_1.sanitize)(e.currentTarget.value);
             if (onChange) {

package/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/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/phone-input/utils.js

@@ -6,7 +6,7 @@ var default_filter_options_1 = require("../select/utils/default-filter-options")
 var constants_1 = require("./constants");
 var iso2FlagEmoji = function (iso) {
     if (!constants_1.ISO_REGEX.test(iso)) {
-        return;
+        return undefined;
     }
     var chars = Array.from(iso.toUpperCase()).map(function (char) { return char.charCodeAt(0) + constants_1.ISO_TO_FLAG_OFFSET; });
     return String.fromCodePoint.apply(String, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(chars), false));
@@ -19,15 +19,15 @@ var sanitize = function (value) {
 exports.sanitize = sanitize;
 var getPhoneNumberWithCountryDialCode = function (value) {
     if (value === undefined || value.country === undefined || value.phoneNumber === undefined) {
-        return;
+        return undefined;
     }
     return value.country.dialCode.concat(value.phoneNumber);
 };
 exports.getPhoneNumberWithCountryDialCode = getPhoneNumberWithCountryDialCode;
 var countrySelectFilterOptions = function (options, filterValue, excludeOptions, params) {
-    return (0, default_filter_options_1.filterOptions)(options, filterValue, excludeOptions, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, params), { filterOption: function (_a, filterValue) {
+    return (0, default_filter_options_1.filterOptions)(options, filterValue, excludeOptions, (0, tslib_1.__assign)((0, tslib_1.__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/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/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;