@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/phone-input/utils.js

@@ -1,12 +1,14 @@
 "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;
+        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,16 +21,20 @@ 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);
         } }));
 };
 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

@@ -1,6 +1,7 @@
 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>>;
+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

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

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

package/popover/types.js

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

package/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/circular/styled-component.d.ts

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

package/progress/circular/styled-component.js

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

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

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

package/radio/basewebAdapters.js

@@ -7,6 +7,7 @@ var helpers_1 = require("../helpers");
 var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
 var styled_components_1 = require("./styled-components");
 var context_1 = require("../form-control/context");
+var useCombinedRef_1 = require("../hooks/useCombinedRef");
 exports.SpaceRadioContext = (0, react_1.createContext)({
     size: 'md',
     intent: 'default',
@@ -19,7 +20,7 @@ function useRadioGroupAdapter(props) {
             style: [className, style],
         },
     }, overrides);
-    return { adaptedProps: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: convertOverrides }) };
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: convertOverrides, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur });
 }
 exports.useRadioGroupAdapter = useRadioGroupAdapter;
 var useRadioAdapter = function (props) {
@@ -44,8 +45,10 @@ var useRadioAdapter = function (props) {
             props: sharedProps,
         },
         // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/472 - baseui adds position absolute
-        Input: { style: { position: 'static' } },
+        // static position gives unexpected behaviour in Safari. Using position fixed works well for the above issue and Safari as well.
+        Input: { style: { position: 'fixed' } },
     }, props.overrides);
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides });
+    var inputRefObj = (0, useCombinedRef_1.useCombineRefObjects)(props.inputRef);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur, inputRef: inputRefObj });
 };
 exports.useRadioAdapter = useRadioAdapter;

package/radio/radio.js

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

package/radio/styled-components.js

@@ -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,25 +117,23 @@ 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 = px2rem(6),
-        _c.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(6),
+        _c.marginTop = '0px',
+        _c.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(6),
         _c);
     switch ($size) {
         case 'md':
             styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(38) : undefined;
-            styles.marginTop = px2rem(8);
-            styles.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(8);
+            styles.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(8);
             break;
         case 'lg':
             styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(46) : undefined;
-            styles.marginTop = px2rem(10);
-            styles.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(10);
+            styles.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(10);
             break;
         default:
             break;

package/radio/types.d.ts

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

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

package/search/search.d.ts

@@ -3,6 +3,6 @@ import { IconButtonProps } from '../button/IconButton';
 import { SearchProps } from './types';
 export declare const ClearIconButton: ({ overrides, ...props }: IconButtonProps) => ReactElement;
 export declare const Search: {
-    ({ size, debounceInterval, placeholder, overrides, className, style, variant, ...props }: SearchProps): ReactElement;
+    ({ size: _size, debounceInterval, placeholder, overrides, className, style, variant, ...props }: SearchProps): ReactElement;
     displayName: string;
 };