@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/phone-input/country-select.js

@@ -18,7 +18,7 @@ var SelectListItem = React.forwardRef(function (_a, ref) {
     return ((0, jsx_runtime_1.jsxs)(list_1.ListItem, (0, tslib_1.__assign)({}, rest, { startEnhancer: (0, utils_1.iso2FlagEmoji)(id), ref: ref }, { children: [dialCode, (0, jsx_runtime_1.jsxs)(typography_1.Typography, (0, tslib_1.__assign)({ "data-testid": id, "data-entity-type": "country-label", className: "spr-text-03 ml-1" }, { children: ["(", mapIsoToLabel ? mapIsoToLabel(id) : label, ")"] }), void 0)] }), void 0));
 });
 var CountrySelect = function (props) {
-    var size = props.size, disabled = props.disabled, inputRef = props.inputRef, onChange = props.onChange, value = props.value, mapIsoToLabel = props.mapIsoToLabel, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, overrides = props.overrides;
+    var size = props.size, disabled = props.disabled, inputRef = props.inputRef, onChange = props.onChange, countries = props.countries, value = props.value, mapIsoToLabel = props.mapIsoToLabel, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, overrides = props.overrides;
     var locale = (0, locale_1.useLocale)();
     var overlayContentContainerRef = (0, react_1.useRef)();
     var mergedOverrides = (0, react_1.useMemo)(function () {
@@ -68,7 +68,7 @@ var CountrySelect = function (props) {
                 },
             },
         }, overrides);
-    }, [mapIsoToLabel, maxDropdownHeight, overrides, size]);
+    }, [mapIsoToLabel, overrides, size]);
     var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.CountrySelect, select_1.Select), 2), Select = _a[0], selectProps = _a[1];
     var flagContainerProps = {
         size: size,
@@ -78,7 +78,7 @@ var CountrySelect = function (props) {
     };
     return (
     // @ts-ignore
-    (0, jsx_runtime_1.jsx)(Select, (0, tslib_1.__assign)({ type: "overlay", options: constants_1.COUNTRY_SELECT_OPTIONS, value: [value.country], onChange: function (params) {
+    (0, jsx_runtime_1.jsx)(Select, (0, tslib_1.__assign)({ type: "overlay", options: countries !== null && countries !== void 0 ? countries : constants_1.COUNTRY_SELECT_OPTIONS, value: [value.country], onChange: function (params) {
             if (onChange) {
                 onChange((0, tslib_1.__assign)((0, tslib_1.__assign)({}, value), { country: params.option }));
             }

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

@@ -1,5 +1,5 @@
 import { InputVariant } from '../input';
-import { PhoneInputOverrides, Country } from './types';
+import { Country, PhoneInputOverrides } from './types';
 declare const defaultProps: {
     clearable: boolean;
     focusLock: boolean;
@@ -12,9 +12,9 @@ declare const defaultProps: {
     positive: boolean;
     required: boolean;
     variant: InputVariant;
-    value: {
-        country: Country;
-        phoneNumber: string;
-    };
+};
+export declare const defaultValue: {
+    country: Country;
+    phoneNumber: string;
 };
 export default defaultProps;

package/phone-input/default-props.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValue = void 0;
 var constants_1 = require("./constants");
 var defaultProps = {
     clearable: false,
@@ -13,13 +14,13 @@ var defaultProps = {
     positive: false,
     required: false,
     variant: 'default',
-    value: {
-        country: {
-            label: 'United States',
-            id: 'US',
-            dialCode: '+1',
-        },
-        phoneNumber: '',
+};
+exports.defaultValue = {
+    country: {
+        label: 'United States',
+        id: 'US',
+        dialCode: '+1',
     },
+    phoneNumber: '',
 };
 exports.default = defaultProps;

package/phone-input/flag-container.js

@@ -15,6 +15,6 @@ var FlagContainer = (0, react_1.forwardRef)(function (props, ref) {
     var locale = (0, locale_1.useLocale)();
     var sharedProps = (0, helpers_1.add$props)({ iso: iso, inputSize: inputSize });
     var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.FlagContainer, button_1.Button), 2), Button = _a[0], buttonProps = _a[1];
-    return ((0, jsx_runtime_1.jsx)(Button, (0, tslib_1.__assign)({ "aria-label": locale.phoneInput.flagContainerAriaLabel, variant: "minimal", size: "xs", type: "button", className: [styled_components_1.getFlagContainerStyles], "data-iso": iso, ref: ref }, sharedProps, buttonProps, rest, { children: (0, utils_1.iso2FlagEmoji)(iso) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Button, (0, tslib_1.__assign)({ "aria-label": locale.phoneInput.flagContainerAriaLabel, variant: "minimal", size: "xxxs", type: "button", className: [styled_components_1.getFlagContainerStyles], "data-iso": iso, ref: ref }, sharedProps, buttonProps, rest, { children: (0, utils_1.iso2FlagEmoji)(iso) }), void 0));
 });
 exports.default = FlagContainer;

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

@@ -14,10 +14,6 @@ declare const PhoneInput: {
         positive: boolean;
         required: boolean;
         variant: import("../input").InputVariant;
-        value: {
-            country: import("./types").Country;
-            phoneNumber: string;
-        };
     };
 };
 export default PhoneInput;

package/phone-input/phone-input.js

@@ -12,22 +12,29 @@ 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 style_1 = require("../style");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var PhoneInput = function (props) {
-    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 _a;
+    var _b = (0, context_1.useContextualFormProps)(props), _size = _b.size, variant = _b.variant, intent = _b.intent, disabled = _b.disabled, overrides = _b.overrides, mapIsoToLabel = _b.mapIsoToLabel, maxDropdownHeight = _b.maxDropdownHeight, maxDropdownWidth = _b.maxDropdownWidth, onInputChange = _b.onInputChange, onChange = _b.onChange, propValue = _b.value, countries = _b.countries, rest = (0, tslib_1.__rest)(_b, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value", "countries"]);
+    var _c = (0, style_1.useStyle)(), isRTL = _c.isRTL, theme = _c.theme;
+    var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
     var locale = (0, locale_1.useLocale)();
     var inputRef = (0, react_1.useRef)(null);
+    var value = propValue !== null && propValue !== void 0 ? propValue : (0, utils_1.getDefaultValue)(countries);
     var mergedOverrides = (0, overrides_1.mergeOverrides)({
         Input: {
             props: {
-                overrides: {
-                    Root: {
-                        style: styled_components_1.getRootStyles,
-                        props: { $disabled: disabled },
-                    },
-                    Input: {
-                        style: styled_components_1.getInputStyles,
+                overrides: (_a = {
+                        Root: {
+                            style: styled_components_1.getRootStyles,
+                            props: { $disabled: disabled },
+                        },
+                        Input: {
+                            style: styled_components_1.getInputStyles,
+                        }
                     },
-                    Before: {
+                    _a[isRTL ? 'After' : 'Before'] = {
                         component: country_select_container_1.default,
                         props: {
                             size: size,
@@ -38,14 +45,15 @@ var PhoneInput = function (props) {
                             mapIsoToLabel: mapIsoToLabel,
                             maxDropdownHeight: maxDropdownHeight,
                             maxDropdownWidth: maxDropdownWidth,
+                            countries: countries,
                             overrides: (0, pick_1.default)(overrides, ['CountrySelect', 'CountrySelectContainer', 'FlagContainer', 'DialCode']),
                         },
                     },
-                },
+                    _a),
             },
         },
     }, overrides);
-    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];
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, input_1.Input), 2), Input = _d[0], inputProps = _d[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-container.js

@@ -4,10 +4,11 @@ var tslib_1 = require("tslib");
 var react_1 = require("react");
 var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
 var constants_1 = require("./constants");
+var utils_1 = require("./utils");
 var defaultStateReducer = function (type, nextState) { return nextState; };
 var StatefulPhoneInputContainer = function (props) {
-    var clearable = props.clearable, disabled = props.disabled, id = props.id, _a = props.initialState, initialState = _a === void 0 ? default_props_1.default.value : _a, intent = props.intent, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, mapIsoToLabel = props.mapIsoToLabel, name = props.name, _b = props.onChange, onChange = _b === void 0 ? default_props_1.default.onChange : _b, overrides = props.overrides, placeholder = props.placeholder, required = props.required, size = props.size, _c = props.stateReducer, stateReducer = _c === void 0 ? defaultStateReducer : _c, variant = props.variant;
-    var _d = (0, tslib_1.__read)((0, react_1.useState)(initialState), 2), state = _d[0], setState = _d[1];
+    var clearable = props.clearable, disabled = props.disabled, id = props.id, initialState = props.initialState, intent = props.intent, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, mapIsoToLabel = props.mapIsoToLabel, name = props.name, _a = props.onChange, onChange = _a === void 0 ? default_props_1.default.onChange : _a, overrides = props.overrides, placeholder = props.placeholder, required = props.required, size = props.size, _b = props.stateReducer, stateReducer = _b === void 0 ? defaultStateReducer : _b, variant = props.variant, countries = props.countries;
+    var _c = (0, tslib_1.__read)((0, react_1.useState)(initialState !== null && initialState !== void 0 ? initialState : (0, utils_1.getDefaultValue)(countries)), 2), state = _c[0], setState = _c[1];
     var internalSetState = function (type, nextState) {
         setState(stateReducer(type, nextState, state));
     };
@@ -16,6 +17,6 @@ var StatefulPhoneInputContainer = function (props) {
         onChange({ country: country, phoneNumber: phoneNumber });
         internalSetState(constants_1.STATE_CHANGE_TYPE.onChange, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, state), { country: country, phoneNumber: phoneNumber }));
     };
-    return props.children((0, tslib_1.__assign)((0, tslib_1.__assign)({}, default_props_1.default), { 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'], 'aria-describedby': props['aria-describedby'], clearable: clearable, disabled: disabled, id: id, intent: intent, maxDropdownHeight: maxDropdownHeight, maxDropdownWidth: maxDropdownWidth, mapIsoToLabel: mapIsoToLabel, name: name, overrides: overrides, placeholder: placeholder, required: required, size: size, variant: variant, value: state, onChange: statefulOnChange }));
+    return props.children((0, tslib_1.__assign)((0, tslib_1.__assign)({}, default_props_1.default), { 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'], 'aria-describedby': props['aria-describedby'], clearable: clearable, disabled: disabled, id: id, intent: intent, maxDropdownHeight: maxDropdownHeight, maxDropdownWidth: maxDropdownWidth, mapIsoToLabel: mapIsoToLabel, name: name, overrides: overrides, placeholder: placeholder, required: required, size: size, variant: variant, value: state, onChange: statefulOnChange, countries: countries }));
 };
 exports.default = StatefulPhoneInputContainer;

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

@@ -14,10 +14,6 @@ declare const StatefulPhoneInput: {
         positive: boolean;
         required: boolean;
         variant: import("../input").InputVariant;
-        value: {
-            country: import("./types").Country;
-            phoneNumber: string;
-        };
     };
 };
 export default StatefulPhoneInput;

package/phone-input/styled-components.d.ts

@@ -8,6 +8,14 @@ export declare const getFlagContainerStyles: (string | (({ theme, px2rem }: {
 export declare const getRootStyles: ({}: {}, { $disabled }: {
     $disabled: any;
 }) => "cursor-not-allowed" | undefined;
-export declare const getInputStyles = "pl-1";
+export declare const getInputStyles: ({ theme, px2rem }: {
+    theme: any;
+    px2rem: any;
+}, { $size }: {
+    $size: any;
+}) => {
+    paddingLeft: string;
+    paddingRight: string;
+};
 export declare const StyledCountrySelectContainer: import("../style/styled").StyledComponent;
 export declare const StyledDialCode: import("../style/styled").StyledComponent;

package/phone-input/styled-components.js

@@ -3,22 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledDialCode = exports.StyledCountrySelectContainer = exports.getInputStyles = exports.getRootStyles = exports.getFlagContainerStyles = void 0;
 var tslib_1 = require("tslib");
 var style_1 = require("../style");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var dialCodeSizeConfig = function (px2rem) { return ({
-    sm: { fontSize: px2rem(12) },
-    md: { fontSize: px2rem(14) },
+    xxxs: { fontSize: px2rem(10) },
+    xs: { fontSize: px2rem(12) },
+    sm: { fontSize: px2rem(14) },
+    md: { fontSize: px2rem(16) },
     lg: { fontSize: px2rem(16) },
 }); };
 var getSizeConfig = function (px2rem, size) { var _a; return (_a = dialCodeSizeConfig(px2rem)[size]) !== null && _a !== void 0 ? _a : dialCodeSizeConfig(px2rem).lg; };
 exports.getFlagContainerStyles = [
-    'min-w-0 spr-ui-05 px-2 text-16 rounded-4',
+    'min-w-0 spr-ui-05 px-2 py-0.5 text-16 rounded-4',
     function (_a, _b) {
         var theme = _a.theme, px2rem = _a.px2rem;
         var $inputSize = _b.$inputSize, $isFocusVisible = _b.$isFocusVisible;
-        return ((0, tslib_1.__assign)({ marginLeft: $inputSize === 'sm' ? px2rem(6) : px2rem(10) }, ($isFocusVisible && {
+        var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $inputSize, (0, themeHelpers_1.getDefaultSize)(theme));
+        return (0, tslib_1.__assign)({ marginLeft: inputSizeTheme.paddingX, marginRight: '0 /* @noflip */' }, ($isFocusVisible && {
             ':focus': {
                 outline: "1px solid ".concat(theme.spr.focus01),
             },
-        })));
+        }));
     },
 ];
 var getRootStyles = function (_a, _b) {
@@ -26,14 +30,25 @@ var getRootStyles = function (_a, _b) {
     return ($disabled ? 'cursor-not-allowed' : undefined);
 };
 exports.getRootStyles = getRootStyles;
-exports.getInputStyles = 'pl-1';
+var getInputStyles = function (_a, _b) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $size = _b.$size;
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(theme));
+    return {
+        paddingLeft: "".concat(px2rem(4), " /* @noflip */"),
+        paddingRight: "".concat(inputSizeTheme.paddingX, " /* @noflip */"),
+    };
+};
+exports.getInputStyles = getInputStyles;
 exports.StyledCountrySelectContainer = (0, style_1.styled)('div', 'flex items-center');
-exports.StyledDialCode = (0, style_1.styled)('div', 'flex items-center ml-1 font-medium', function (_a, _b) {
+exports.StyledDialCode = (0, style_1.styled)('div', 'flex items-center font-medium', function (_a, _b) {
     var px2rem = _a.px2rem;
     var $size = _b.$size;
     var sizeTheme = getSizeConfig(px2rem, $size);
     var styles = {
         fontSize: sizeTheme.fontSize,
+        marginLeft: "".concat(px2rem(4), " /* @noflip */"),
+        marginRight: '0 /* @noflip */',
     };
     return styles;
 });

package/phone-input/types.d.ts

@@ -28,6 +28,7 @@ export declare type PhoneInputProps = Omit<InputProps, 'value' | 'onChange'> & {
     value?: Value;
     mapIsoToLabel?: (iso: string) => string;
     maxDropdownHeight?: string;
+    countries?: Array<Country>;
     maxDropdownWidth?: string;
     overrides?: PhoneInputOverrides;
 };
@@ -37,7 +38,7 @@ export declare type StatefulPhoneInputContainerProps = Omit<PhoneInputProps, 'ch
     stateReducer?: StateReducer;
     children: (props: PhoneInputProps) => any;
 };
-export declare type CountrySelectContainerProps = Required<Pick<PhoneInputProps, 'size' | 'disabled' | 'onChange' | 'mapIsoToLabel' | 'maxDropdownHeight' | 'maxDropdownWidth'>> & {
+export declare type CountrySelectContainerProps = Required<Pick<PhoneInputProps, 'size' | 'disabled' | 'onChange' | 'mapIsoToLabel' | 'maxDropdownHeight' | 'maxDropdownWidth' | 'countries'>> & {
     overrides?: Pick<PhoneInputOverrides, 'CountrySelectContainer' | 'CountrySelect' | 'FlagContainer' | 'DialCode'>;
     value: State;
 };

package/phone-input/utils.d.ts

@@ -1,5 +1,5 @@
 import { Value as ValueT } from '../select/types';
-import { Value } from './types';
+import { Value, Country } 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;
@@ -7,3 +7,7 @@ export declare const countrySelectFilterOptions: (options: ValueT, filterValue:
     valueKey: string;
     labelKey: string;
 }) => ValueT;
+export declare const getDefaultValue: (countries?: Country[] | undefined) => {
+    country: Country;
+    phoneNumber: string;
+};

package/phone-input/utils.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.countrySelectFilterOptions = exports.getPhoneNumberWithCountryDialCode = exports.sanitize = exports.iso2FlagEmoji = void 0;
+exports.getDefaultValue = exports.countrySelectFilterOptions = exports.getPhoneNumberWithCountryDialCode = exports.sanitize = exports.iso2FlagEmoji = void 0;
 var tslib_1 = require("tslib");
+var isEmpty_1 = (0, tslib_1.__importDefault)(require("lodash/isEmpty"));
 var default_filter_options_1 = require("../select/utils/default-filter-options");
 var constants_1 = require("./constants");
+var default_props_1 = require("./default-props");
 var iso2FlagEmoji = function (iso) {
     if (!constants_1.ISO_REGEX.test(iso)) {
         return undefined;
@@ -32,3 +34,7 @@ var countrySelectFilterOptions = function (options, filterValue, excludeOptions,
         } }));
 };
 exports.countrySelectFilterOptions = countrySelectFilterOptions;
+var getDefaultValue = function (countries) {
+    return countries && !(0, isEmpty_1.default)(countries) ? { country: constants_1.COUNTRIES[countries[0].id], phoneNumber: '' } : default_props_1.defaultValue;
+};
+exports.getDefaultValue = getDefaultValue;

package/popover/adapter.d.ts

@@ -4,3 +4,4 @@ import { ValueOf } from '../utility-types';
 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>>;
+export declare const rtlPlacementMap: Record<Placement, ValueOf<typeof PLACEMENT>>;

package/popover/adapter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.placementMap = exports.triggerTypeMap = exports.accessibilityMap = void 0;
+exports.rtlPlacementMap = exports.placementMap = exports.triggerTypeMap = exports.accessibilityMap = void 0;
 var popover_1 = require("baseui/popover");
 exports.accessibilityMap = {
     menu: popover_1.ACCESSIBILITY_TYPE.menu,
@@ -26,3 +26,18 @@ exports.placementMap = {
     rightTop: popover_1.PLACEMENT.rightTop,
     rightBottom: popover_1.PLACEMENT.rightBottom,
 };
+exports.rtlPlacementMap = {
+    auto: popover_1.PLACEMENT.auto,
+    bottom: popover_1.PLACEMENT.bottom,
+    bottomLeft: popover_1.PLACEMENT.bottomRight,
+    bottomRight: popover_1.PLACEMENT.bottomLeft,
+    top: popover_1.PLACEMENT.top,
+    topLeft: popover_1.PLACEMENT.topRight,
+    topRight: popover_1.PLACEMENT.topLeft,
+    left: popover_1.PLACEMENT.right,
+    leftTop: popover_1.PLACEMENT.rightTop,
+    leftBottom: popover_1.PLACEMENT.rightBottom,
+    right: popover_1.PLACEMENT.left,
+    rightTop: popover_1.PLACEMENT.leftTop,
+    rightBottom: popover_1.PLACEMENT.leftBottom,
+};

package/popover/overrides.js

@@ -4,6 +4,7 @@ exports.getInnerStyles = exports.arrowStyles = exports.getBodyStyles = exports.g
 var tslib_1 = require("tslib");
 var utils_1 = require("./utils");
 var constants_1 = require("./constants");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var arrowPositionStyle = function (_a, _b) {
     var theme = _a.theme;
     var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c;
@@ -33,16 +34,7 @@ exports.getPseudoElementPosition = getPseudoElementPosition;
 var getBodyStyles = function (_a, _b) {
     var theme = _a.theme;
     var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c, _d = _b.$popoverMargin, $popoverMargin = _d === void 0 ? 0 : _d, $showArrow = _b.$showArrow, rest = (0, tslib_1.__rest)(_b, ["$placement", "$popoverMargin", "$showArrow"]);
-    return ({
-        backgroundColor: theme.spr.popup,
-        color: theme.spr.text01,
-        boxShadow: 'none',
-        borderTopLeftRadius: theme.popover.borderRadius,
-        borderTopRightRadius: theme.popover.borderRadius,
-        borderBottomRightRadius: theme.popover.borderRadius,
-        borderBottomLeftRadius: theme.popover.borderRadius,
-        '::before': (0, tslib_1.__assign)({ content: '" "', position: 'absolute' }, (0, exports.getPseudoElementPosition)($placement, $showArrow ? $popoverMargin + constants_1.ARROW_WIDTH : $popoverMargin)),
-    });
+    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: theme.spr.popup, color: theme.spr.text01, boxShadow: 'none' }, (0, longHandHelpers_1.borderRadius)(theme.popover.borderRadius)), { '::before': (0, tslib_1.__assign)({ content: '" "', position: 'absolute' }, (0, exports.getPseudoElementPosition)($placement, $showArrow ? $popoverMargin + constants_1.ARROW_WIDTH : $popoverMargin)) }));
 };
 exports.getBodyStyles = getBodyStyles;
 exports.arrowStyles = [
@@ -62,13 +54,10 @@ exports.arrowStyles = [
     },
     arrowPositionStyle,
 ];
-exports.getInnerStyles = ['border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup', function (_a) {
+exports.getInnerStyles = [
+    'border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup',
+    function (_a) {
         var theme = _a.theme;
-        return ({
-            borderTopLeftRadius: theme.popover.borderRadius,
-            borderTopRightRadius: theme.popover.borderRadius,
-            borderBottomRightRadius: theme.popover.borderRadius,
-            borderBottomLeftRadius: theme.popover.borderRadius,
-            fontFamily: theme.fontFamily.sans,
-        });
-    }];
+        return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(theme.popover.borderRadius)), { fontFamily: theme.fontFamily.sans }));
+    },
+];

package/popover/popover.d.ts

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

package/popover/popover.js

@@ -4,6 +4,7 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var popover_1 = require("baseui/popover");
 var React = (0, tslib_1.__importStar)(require("react"));
+var react_1 = require("react");
 var overrides_1 = require("../overrides");
 var hooks_1 = require("./hooks");
 var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
@@ -14,11 +15,14 @@ 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"));
+var style_1 = require("../style");
+var utils_1 = require("./utils");
 // @ts-ignore
 popover_1.Popover.displayName = 'BaseUIPopover';
 var Popover = React.forwardRef(function (_a, ref) {
-    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, content = _a.content, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content"]);
+    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, content = _a.content, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, viewportAsBoundary = _a.viewportAsBoundary, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
     var _g = (0, hooks_1.useContent)({ content: content }), setContentHost = _g.setContentHost, wrappedContent = _g.wrappedContent;
+    var isRTL = (0, style_1.useStyle)().isRTL;
     var focusLockProps = (0, hooks_1.useFocusLock)({ returnFocus: returnFocus, focusLock: focusLock });
     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)({
@@ -27,7 +31,7 @@ var Popover = React.forwardRef(function (_a, ref) {
         Inner: { style: overrides_2.getInnerStyles, props: { ref: setContentHost } },
     }, overrides, [overrides, setContentHost]);
     var mappedProps = {
-        placement: placement && adapter_1.placementMap[placement],
+        placement: placement && isRTL ? adapter_1.rtlPlacementMap[placement] : adapter_1.placementMap[placement],
         accessibilityType: accessibilityType && adapter_1.accessibilityMap[accessibilityType],
         triggerType: triggerType && adapter_1.triggerTypeMap[triggerType],
     };
@@ -37,7 +41,8 @@ var Popover = React.forwardRef(function (_a, ref) {
         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, 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));
+    var mergedPopperOptions = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, utils_1.getPopperOptions)({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
+    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, { popperOptions: mergedPopperOptions }, { 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/stateful-popover.js

@@ -6,8 +6,8 @@ var popover_1 = require("baseui/popover");
 var popover_2 = (0, tslib_1.__importDefault)(require("./popover"));
 var constants_1 = require("./constants");
 function StatefulPopover(props) {
-    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, restProps = (0, tslib_1.__rest)(props, ["children", "overrides"]);
-    return ((0, jsx_runtime_1.jsx)(popover_1.StatefulContainer, (0, tslib_1.__assign)({}, restProps, { children: function (popoverProps) { return ((0, jsx_runtime_1.jsx)(popover_2.default, (0, tslib_1.__assign)({}, popoverProps, { overrides: overrides }, { children: children }), void 0)); } }), void 0));
+    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, targetElement = props.targetElement, viewportAsBoundary = props.viewportAsBoundary, restProps = (0, tslib_1.__rest)(props, ["children", "overrides", "targetElement", "viewportAsBoundary"]);
+    return ((0, jsx_runtime_1.jsx)(popover_1.StatefulContainer, (0, tslib_1.__assign)({}, restProps, { children: function (popoverProps) { return ((0, jsx_runtime_1.jsx)(popover_2.default, (0, tslib_1.__assign)({}, popoverProps, { overrides: overrides, targetElement: targetElement, viewportAsBoundary: viewportAsBoundary }, { children: children }), void 0)); } }), void 0));
 }
 StatefulPopover.defaultProps = {
     accessibilityType: 'menu',

package/popover/types.d.ts

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

package/popover/utils.d.ts

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

package/popover/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOppositePosition = exports.splitPlacement = void 0;
+exports.getPopperOptions = exports.getOppositePosition = exports.splitPlacement = void 0;
+var tslib_1 = require("tslib");
 /**
  * Splits something like 'topLeft' to ['top', 'left'] for easier usage
  * https://github.com/uber/baseweb/blob/master/src/popover/utils.js#L58
@@ -30,3 +31,12 @@ function getOppositePosition(position) {
     return OPPOSITE_POSITIONS[position];
 }
 exports.getOppositePosition = getOppositePosition;
+var getPopperOptions = function (_a) {
+    var ignoreBoundary = _a.ignoreBoundary, viewportAsBoundary = _a.viewportAsBoundary;
+    return ({
+        modifiers: {
+            preventOverflow: (0, tslib_1.__assign)({ enabled: !ignoreBoundary, padding: 0 }, (viewportAsBoundary && { boundariesElement: 'viewport' })),
+        },
+    });
+};
+exports.getPopperOptions = getPopperOptions;

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

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

package/progress/linear/styled-component.js

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

package/radio/styled-components.js

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

package/search/index.d.ts

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

package/search/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Search = void 0;
+exports.StatefulSearch = exports.Search = void 0;
 var tslib_1 = require("tslib");
 var search_1 = require("./search");
 Object.defineProperty(exports, "Search", { enumerable: true, get: function () { return search_1.Search; } });
+var stateful_search_1 = require("./stateful-search");
+Object.defineProperty(exports, "StatefulSearch", { enumerable: true, get: function () { return stateful_search_1.StatefulSearch; } });
 (0, tslib_1.__exportStar)(require("./types"), exports);