@sprinklrjs/spaceweb 12.33.2 → 14.11.3

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

@@ -4,7 +4,7 @@ import { useRef } from 'react';
 import _pick from 'lodash/pick';
 import { Input as DefaultInput } from '../input';
 import CountrySelectContainer from './country-select-container';
-import { getRootStyles, getInputStyles } from './styled-components';
+import { getRootClasses, getInputClasses } from './styled-components';
 import { getDefaultValue, sanitize } from './utils';
 import { useOverrides, mergeOverrides } from '../overrides';
 import { useLocale } from '../locale';
@@ -12,24 +12,26 @@ import defaultProps from './default-props';
 import { useContextualFormProps } from '../form-control/context';
 import { useStyle } from '../style';
 import { getDefaultSize } from '../helpers/themeHelpers';
+import useCombinedRefs from '../hooks/useCombinedRef';
 var PhoneInput = function (props) {
     var _a;
-    var _b = 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 = __rest(_b, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value", "countries"]);
+    var _b = 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, style = _b.style, className = _b.className, _inputRef = _b.inputRef, rest = __rest(_b, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value", "countries", "style", "className", "inputRef"]);
     var _c = useStyle(), isRTL = _c.isRTL, theme = _c.theme;
     var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
     var locale = useLocale();
     var inputRef = useRef(null);
+    var mergedRef = useCombinedRefs(inputRef, _inputRef);
     var value = propValue !== null && propValue !== void 0 ? propValue : getDefaultValue(countries);
     var mergedOverrides = mergeOverrides({
         Input: {
             props: {
                 overrides: (_a = {
                         Root: {
-                            style: getRootStyles,
+                            className: getRootClasses,
                             props: { $disabled: disabled },
                         },
                         Input: {
-                            style: getInputStyles,
+                            className: getInputClasses,
                         }
                     },
                     _a[isRTL ? 'After' : 'Before'] = {
@@ -60,7 +62,8 @@ var PhoneInput = function (props) {
             if (onInputChange) {
                 onInputChange(e);
             }
-        }, value: sanitize(value === null || value === void 0 ? void 0 : value.phoneNumber), inputRef: inputRef, type: "text", inputMode: "tel" }, rest, inputProps), void 0));
+        }, value: sanitize(value === null || value === void 0 ? void 0 : value.phoneNumber), type: "text", inputMode: "tel" }, rest, { inputRef: mergedRef }, inputProps, { style: [style, inputProps === null || inputProps === void 0 ? void 0 : inputProps.style], className: [className, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className] })));
 };
 PhoneInput.defaultProps = defaultProps;
+PhoneInput.__standard = 'Component';
 export default PhoneInput;

package/esm/phone-input/stateful-phone-input.js

@@ -1,11 +1,12 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import StatefulPhoneInputContainer from './stateful-phone-input-container';
 import PhoneInput from './phone-input';
 import defaultProps from './default-props';
+import useStatefulPhoneInput from "./useStatefulPhoneInput";
 var StatefulPhoneInput = function (props) {
     var overrides = props.overrides, rest = __rest(props, ["overrides"]);
-    return (_jsx(StatefulPhoneInputContainer, __assign({}, rest, { children: function (phoneInputProps) { return _jsx(PhoneInput, __assign({}, phoneInputProps, { overrides: overrides }), void 0); } }), void 0));
+    var adaptedProps = useStatefulPhoneInput(rest);
+    return (_jsx(PhoneInput, __assign({}, adaptedProps, { overrides: overrides })));
 };
 StatefulPhoneInput.defaultProps = defaultProps;
 export default StatefulPhoneInput;

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

@@ -1,21 +1,6 @@
-export declare const getFlagContainerStyles: (string | (({ theme, px2rem }: {
-    theme: any;
-    px2rem: any;
-}, { $inputSize, $isFocusVisible }: {
-    $inputSize: any;
-    $isFocusVisible: any;
-}) => any))[];
-export declare const getRootStyles: (_: any, { $disabled }: {
-    $disabled: any;
-}) => "cursor-not-allowed" | undefined;
-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;
+import type { ClassName, ClassNameStyleFn, CSSStylesStyleFn } from '../types';
+export declare const getFlagContainerOverrides: CSSStylesStyleFn;
+export declare const getRootClasses: ClassNameStyleFn;
+export declare const getInputClasses: ClassName;
+export declare const StyledCountrySelectContainer: import("../style").StyledComponent;
+export declare const StyledDialCode: import("../style").StyledComponent;

package/esm/phone-input/styled-components.js

@@ -1,41 +1,41 @@
 import { __assign } from "tslib";
 import { styled } from '../style';
+import { countrySelectContainerCVA, dialCodeCVA, inputCVA, rootCVA } from './cvaConfigs';
 import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
-export var getFlagContainerStyles = [
-    '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;
-        var inputSizeTheme = getComponentSizeTheme(theme, 'input', $inputSize, getDefaultSize(theme));
-        return __assign({ marginLeft: inputSizeTheme.paddingX, marginRight: '0 /* @noflip */' }, ($isFocusVisible && {
-            ':focus': {
-                outline: "1px solid ".concat(theme.spr.focus01),
-            },
-        }));
-    },
-];
-export var getRootStyles = function (_, _a) {
-    var $disabled = _a.$disabled;
-    return ($disabled ? 'cursor-not-allowed' : undefined);
+var getDialCodeOverrides = function (_a, props) {
+    var theme = _a.theme;
+    var $size = props.$size;
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme));
+    if (inputSizeTheme) {
+        return __assign({}, ((inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.fontSize) ? { fontSize: inputSizeTheme.fontSize } : {}));
+    }
+    return {};
 };
-export var getInputStyles = function (_a, _b) {
-    var theme = _a.theme, px2rem = _a.px2rem;
-    var $size = _b.$size;
+var getInputOverrides = function (_a, props) {
+    var theme = _a.theme;
+    var $size = props.$size;
     var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme));
-    return {
-        paddingLeft: "".concat(px2rem(4), " /* @noflip */"),
-        paddingRight: "".concat(inputSizeTheme.paddingX, " /* @noflip */"),
-    };
+    if (inputSizeTheme) {
+        return __assign({}, ((inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.paddingX) ? { paddingInlineEnd: inputSizeTheme.paddingX } : {}));
+    }
+    return {};
 };
-export var StyledCountrySelectContainer = styled('div', 'flex items-center');
-export var StyledDialCode = styled('div', 'flex items-center font-medium', function (_a, _b) {
-    var px2rem = _a.px2rem, theme = _a.theme;
-    var $size = _b.$size;
+export var getFlagContainerOverrides = function (_a, props) {
+    var theme = _a.theme;
+    var $size = props.$size;
     var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme));
-    var styles = {
-        fontSize: inputSizeTheme.fontSize,
-        marginLeft: "".concat(px2rem(4), " /* @noflip */"),
-        marginRight: '0 /* @noflip */',
-    };
-    return styles;
-});
+    if (inputSizeTheme) {
+        return __assign({}, ((inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.paddingX) ? { marginInlineStart: inputSizeTheme.paddingX } : {}));
+    }
+    return {};
+};
+export var getRootClasses = rootCVA;
+export var getInputClasses = [
+    inputCVA,
+    // @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '(_: StyleUtils, { $zIndex }: any) => { zIndex: any; ...
+    getInputOverrides,
+];
+export var StyledCountrySelectContainer = styled('div', countrySelectContainerCVA);
+export var StyledDialCode = styled('div', dialCodeCVA, 
+// @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '(_: StyleUtils, { $zIndex }: any) => { zIndex: any; ...
+getDialCodeOverrides);

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

@@ -3,26 +3,26 @@ import { MenuProps } from '../menu';
 import { InputProps, SharedProps } from '../input';
 import { Override } from '../overrides';
 import { COUNTRIES, STATE_CHANGE_TYPE } from './constants';
-export declare type Country = {
+export type Country = {
     id: keyof typeof COUNTRIES;
     label: string;
     dialCode: string;
 };
-export declare type State = {
+export type State = {
     country: Country;
     phoneNumber: string;
 };
-export declare type Value = Partial<State> | undefined;
-export declare type StateChange = keyof typeof STATE_CHANGE_TYPE;
-export declare type StateReducer = (type: StateChange, nextState: State, currentState: State) => State;
-export declare type PhoneInputOverrides = {
+export type Value = Partial<State> | undefined;
+export type StateChange = keyof typeof STATE_CHANGE_TYPE;
+export type StateReducer = (type: StateChange, nextState: State, currentState: State) => State;
+export type PhoneInputOverrides = {
     Input?: Override<SharedProps & Record<string, any>>;
     CountrySelect?: Override<SharedProps & Record<string, any>>;
     CountrySelectContainer?: Override<SharedProps & Record<string, any>>;
     FlagContainer?: Override<SharedProps & Record<string, any>>;
     DialCode?: Override<SharedProps & Record<string, any>>;
 };
-export declare type PhoneInputProps = Omit<InputProps, 'value' | 'onChange'> & {
+export type PhoneInputProps = Omit<InputProps, 'value' | 'onChange'> & {
     onInputChange?: (event: React.SyntheticEvent<HTMLInputElement>) => unknown;
     onChange?: (value: Value) => void;
     value?: Value;
@@ -32,30 +32,29 @@ export declare type PhoneInputProps = Omit<InputProps, 'value' | 'onChange'> & {
     maxDropdownWidth?: string;
     overrides?: PhoneInputOverrides;
 };
-export declare type StatefulPhoneInputProps = PhoneInputProps;
-export declare type StatefulPhoneInputContainerProps = Omit<PhoneInputProps, 'children'> & {
+export type StatefulPhoneInputProps = PhoneInputProps;
+export type StatefulPhoneInputContainerProps = Omit<PhoneInputProps, 'children'> & {
     initialState?: State;
     stateReducer?: StateReducer;
-    children: (props: PhoneInputProps) => any;
 };
-export declare type CountrySelectContainerProps = Required<Pick<PhoneInputProps, 'size' | 'disabled' | 'onChange' | 'mapIsoToLabel' | 'maxDropdownHeight' | 'maxDropdownWidth' | 'countries'>> & {
+export type CountrySelectContainerProps = Required<Pick<PhoneInputProps, 'size' | 'disabled' | 'onChange' | 'mapIsoToLabel' | 'maxDropdownHeight' | 'maxDropdownWidth' | 'countries'>> & {
     overrides?: Pick<PhoneInputOverrides, 'CountrySelectContainer' | 'CountrySelect' | 'FlagContainer' | 'DialCode'>;
     value: State;
 };
-export declare type CountrySelectProps = Omit<CountrySelectContainerProps, 'overrides'> & {
+export type CountrySelectProps = Omit<CountrySelectContainerProps, 'overrides'> & {
     overrides?: Pick<PhoneInputOverrides, 'CountrySelect' | 'FlagContainer'>;
 };
-export declare type FlagContainerProps = Pick<CountrySelectContainerProps, 'size' | 'disabled' | 'value'> & {
+export type FlagContainerProps = Pick<CountrySelectContainerProps, 'size' | 'disabled' | 'value'> & {
     overrides?: Pick<PhoneInputOverrides, 'FlagContainer'>;
 };
-export declare type DialCodeProps = Pick<CountrySelectContainerProps, 'size' | 'value'> & {
+export type DialCodeProps = Omit<CountrySelectContainerProps, 'overrides'> & {
     overrides?: Pick<PhoneInputOverrides, 'DialCode'>;
 };
-export declare type FixedSizeListItemProps = {
+export type FixedSizeListItemProps = {
     item: React.ReactElement;
     top: number;
 };
-export declare type VirtualizedCountrySelectDropdownProps = MenuProps & {
+export type VirtualizedCountrySelectDropdownProps = MenuProps & {
     ListItem: React.ComponentType<React.PropsWithChildren<FixedSizeListItemProps>>;
     emptyListHeight?: number;
     listItemHeight?: number;

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

@@ -0,0 +1,29 @@
+import { StatefulPhoneInputContainerProps, State } from './types';
+declare const useStatefulPhoneInput: ({ clearable, disabled, id, initialState, intent, maxDropdownHeight, maxDropdownWidth, mapIsoToLabel, name, onChange, overrides, placeholder, required, size, stateReducer, variant, countries, ...restProps }: StatefulPhoneInputContainerProps) => {
+    'aria-label': string | undefined;
+    'aria-labelledby': string | undefined;
+    'aria-describedby': string | undefined;
+    clearable: boolean;
+    disabled: boolean;
+    id: string | undefined;
+    intent: import("..").Intent | undefined;
+    maxDropdownHeight: string;
+    maxDropdownWidth: string;
+    mapIsoToLabel: ((iso: string) => string) | undefined;
+    name: string | undefined;
+    overrides: import("../input").BaseInputOverrides & {
+        Root?: import("../overrides").Override<import("../input").SharedProps & Record<string, any>> | undefined;
+        StartEnhancer?: import("../overrides").Override<import("../input").SharedProps & Record<string, any>> | undefined;
+        EndEnhancer?: import("../overrides").Override<import("../input").SharedProps & Record<string, any>> | undefined;
+    } & import("./types").PhoneInputOverrides;
+    placeholder: string;
+    required: boolean;
+    size: import("../input").InputSize | undefined;
+    variant: import("../input").InputVariant;
+    value: State;
+    onChange: ({ country, phoneNumber }: State) => void;
+    countries: import("./types").Country[] | undefined;
+    focusLock: boolean;
+    positive: boolean;
+};
+export default useStatefulPhoneInput;

package/esm/phone-input/useStatefulPhoneInput.js

@@ -0,0 +1,21 @@
+import { __assign, __read, __rest } from "tslib";
+import { useState, useCallback } from 'react';
+import defaultProps from './default-props';
+import { DEFAULT_MAX_DROPDOWN_HEIGHT, DEFAULT_MAX_DROPDOWN_WIDTH, STATE_CHANGE_TYPE } from './constants';
+import { getDefaultValue } from './utils';
+var defaultStateReducer = function (type, nextState) { return nextState; };
+var useStatefulPhoneInput = function (_a) {
+    var _b = _a.clearable, clearable = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, id = _a.id, initialState = _a.initialState, intent = _a.intent, _d = _a.maxDropdownHeight, maxDropdownHeight = _d === void 0 ? DEFAULT_MAX_DROPDOWN_HEIGHT : _d, _e = _a.maxDropdownWidth, maxDropdownWidth = _e === void 0 ? DEFAULT_MAX_DROPDOWN_WIDTH : _e, mapIsoToLabel = _a.mapIsoToLabel, name = _a.name, _f = _a.onChange, onChange = _f === void 0 ? defaultProps.onChange : _f, _g = _a.overrides, overrides = _g === void 0 ? {} : _g, _h = _a.placeholder, placeholder = _h === void 0 ? '' : _h, _j = _a.required, required = _j === void 0 ? false : _j, size = _a.size, _k = _a.stateReducer, stateReducer = _k === void 0 ? defaultStateReducer : _k, _l = _a.variant, variant = _l === void 0 ? 'default' : _l, countries = _a.countries, restProps = __rest(_a, ["clearable", "disabled", "id", "initialState", "intent", "maxDropdownHeight", "maxDropdownWidth", "mapIsoToLabel", "name", "onChange", "overrides", "placeholder", "required", "size", "stateReducer", "variant", "countries"]);
+    var _m = __read(useState(initialState !== null && initialState !== void 0 ? initialState : getDefaultValue(countries)), 2), state = _m[0], setState = _m[1];
+    var internalSetState = useCallback(function (type, nextState) {
+        setState(stateReducer(type, nextState, state));
+    }, [state, stateReducer]);
+    var statefulOnChange = useCallback(function (_a) {
+        var country = _a.country, phoneNumber = _a.phoneNumber;
+        onChange({ country: country, phoneNumber: phoneNumber });
+        internalSetState(STATE_CHANGE_TYPE.onChange, __assign(__assign({}, state), { country: country, phoneNumber: phoneNumber }));
+    }, [onChange, internalSetState, state]);
+    // Return all the props that were passed to the `children` function
+    return __assign(__assign({}, defaultProps), { 'aria-label': restProps['aria-label'], 'aria-labelledby': restProps['aria-labelledby'], 'aria-describedby': restProps['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 });
+};
+export default useStatefulPhoneInput;

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

@@ -7,7 +7,7 @@ export declare const countrySelectFilterOptions: (options: ValueT, filterValue:
     valueKey: string;
     labelKey: string;
 }) => ValueT;
-export declare const getDefaultValue: (countries?: Country[] | undefined) => {
+export declare const getDefaultValue: (countries?: Country[]) => {
     country: Country;
     phoneNumber: string;
 };

package/esm/popover/PopoverEnhancer.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/**
+ * Baseui overrides anchor element's ref. This component clones and stores anchor/child element's ref.
+ * TODO: should be removed once https://github.com/uber/baseweb/issues/4032 is addressed
+ */
+export declare const PopoverRefHandler: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLElement | null | undefined>>;
+export declare const TargetElementProxy: React.ForwardRefExoticComponent<{
+    targetElement?: HTMLElement | null | undefined;
+} & React.RefAttributes<HTMLElement | null | undefined>>;
+type PopoverChildEnhancerProps = {
+    children?: React.ReactNode;
+    targetElement?: HTMLElement | null | undefined;
+};
+export declare const PopoverChildEnhancer: React.ForwardRefExoticComponent<PopoverChildEnhancerProps & React.RefAttributes<HTMLElement | null | undefined>>;
+export {};

package/esm/popover/PopoverEnhancer.js

@@ -0,0 +1,57 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import * as React from 'react';
+import useCombinedRefs from '../hooks/useCombinedRef';
+var __DEV__ = process.env.NODE_ENV !== 'production';
+function getFirstElement(children) {
+    var childArray = React.Children.toArray(children);
+    if (__DEV__ && childArray.length !== 1) {
+        console.error("[spaceweb] Exactly 1 child must be passed to Popover/Tooltip, found ".concat(childArray.length, " children"));
+    }
+    var _a = __read(childArray, 1), child = _a[0];
+    return React.isValidElement(child) && typeof child === 'object' ? child : _jsx("span", { children: child });
+}
+/**
+ * Baseui overrides anchor element's ref. This component clones and stores anchor/child element's ref.
+ * TODO: should be removed once https://github.com/uber/baseweb/issues/4032 is addressed
+ */
+export var PopoverRefHandler = React.forwardRef(function (_a, ref) {
+    var children = _a.children, anchorProps = __rest(_a, ["children"]);
+    var childElement = getFirstElement(children);
+    var childRef = childElement.ref || null;
+    var combinedRef = useCombinedRefs(ref, childRef);
+    var childProps = __assign(__assign({}, anchorProps), { ref: combinedRef });
+    return React.cloneElement(childElement, childProps);
+});
+PopoverRefHandler.displayName = 'PopoverRefHandler';
+export var TargetElementProxy = React.forwardRef(function (_a, ref) {
+    var targetElement = _a.targetElement, anchorProps = __rest(_a, ["targetElement"]);
+    useEffect(function () {
+        if (!ref)
+            return;
+        if (typeof ref === 'object') {
+            ref.current = targetElement;
+        }
+        else {
+            ref(targetElement);
+        }
+        targetElement;
+    }, [targetElement]);
+    return null;
+});
+TargetElementProxy.displayName = 'PopoverTargetElementProxy';
+export var PopoverChildEnhancer = React.forwardRef(function (_a, ref) {
+    var children = _a.children, targetElement = _a.targetElement, anchorProps = __rest(_a, ["children", "targetElement"]);
+    if (__DEV__) {
+        // When targetElement is null (before ref to the element is set), it throws an unnecessary error, hence checking only for undefined
+        if (typeof targetElement === 'undefined' && !children) {
+            console.warn('[spaceweb] One of the children or targetElement should be provided to Popover');
+        }
+    }
+    if (typeof targetElement !== 'undefined') {
+        return _jsx(TargetElementProxy, __assign({ ref: ref, targetElement: targetElement }, anchorProps));
+    }
+    return (_jsx(PopoverRefHandler, __assign({ ref: ref }, anchorProps, { children: children })));
+});
+PopoverChildEnhancer.displayName = 'PopoverChildEnhancer';

package/esm/popover/hooks.d.ts

@@ -1,14 +1,4 @@
-/// <reference types="react" />
 import { PopoverProps } from './types';
-/**
- * Wraps content with LayersManager making sure all the inner popovers are hosted inside the current popover.
- */
-export declare const useContent: ({ content }: {
-    content: PopoverProps['content'];
-}) => {
-    setContentHost: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
-    wrappedContent: import("react/jsx-runtime").JSX.Element;
-};
-declare type UseFocusLockParams = Pick<PopoverProps, 'focusLock' | 'returnFocus'>;
+type UseFocusLockParams = Pick<PopoverProps, 'focusLock' | 'returnFocus'>;
 export declare const useFocusLock: ({ focusLock, returnFocus }: UseFocusLockParams) => UseFocusLockParams;
 export {};

package/esm/popover/hooks.js

@@ -1,19 +1,3 @@
-import { __assign, __read } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { LayersManager } from '../layer';
-/**
- * Wraps content with LayersManager making sure all the inner popovers are hosted inside the current popover.
- */
-export var useContent = function (_a) {
-    var content = _a.content;
-    var _b = __read(useState(null), 2), contentHost = _b[0], setContentHost = _b[1];
-    var _content = typeof content === 'function' ? content() : content;
-    return {
-        setContentHost: setContentHost,
-        wrappedContent: _jsx(LayersManager, __assign({ host: contentHost }, { children: _content }), void 0),
-    };
-};
 export var useFocusLock = function (_a) {
     var focusLock = _a.focusLock, returnFocus = _a.returnFocus;
     var _focusLock = focusLock;

package/esm/popover/overrides.d.ts

@@ -1,8 +1,9 @@
 import { Placement } from './types';
-import { StyleFn, Styles } from '../types';
+import { ClassName, Styles } from '../types';
 export declare const getPseudoElementPosition: (placement: Placement, popoverMargin: number) => {
     [x: string]: string | number;
 };
-export declare const getBodyStyles: StyleFn;
-export declare const arrowStyles: Styles;
-export declare const getInnerStyles: Styles;
+export declare const getBodyStyles: Styles;
+export declare const getBodyClassNames: ClassName;
+export declare const arrowStyles: ClassName;
+export declare const getInnerStyles: ClassName;

package/esm/popover/overrides.js

@@ -1,19 +1,20 @@
-import { __assign, __read, __rest } from "tslib";
+import { __read } from "tslib";
 import { getOppositePosition, splitPlacement } from './utils';
 import { ARROW_WIDTH } from './constants';
 import { borderRadius } from '../helpers/longHandHelpers';
 var arrowPositionStyle = function (_a, _b) {
-    var theme = _a.theme;
+    var isRTL = _a.isRTL;
     var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c;
     var _d = __read(splitPlacement($placement), 1), primaryPos = _d[0];
+    // in case of top/bottom rotate in opposite for RTL
     if (primaryPos === 'top')
-        return { transform: 'rotate(135deg)' };
-    else if (primaryPos === 'right')
-        return { transform: 'rotate(225deg)' };
-    else if (primaryPos === 'bottom')
-        return { transform: 'rotate(315deg)' };
-    else
-        return { transform: 'rotate(45deg)' };
+        return "mx-2 ".concat(!isRTL ? 'rotate-135' : '-rotate-135');
+    if (primaryPos === 'bottom')
+        return "mx-2 ".concat(!isRTL ? 'rotate-315' : '-rotate-315');
+    // in case of left/right rotate 180 - angle for RTL
+    if (primaryPos === 'right')
+        return "my-2 ".concat(!isRTL ? 'rotate-225' : '-rotate-45');
+    return "my-2 ".concat(!isRTL ? 'rotate-45' : 'rotate-135');
 };
 export var getPseudoElementPosition = function (placement, popoverMargin) {
     var _a;
@@ -27,32 +28,56 @@ export var getPseudoElementPosition = function (placement, popoverMargin) {
         _a[oppositePos] = "".concat(-1 * popoverMargin, "px"),
         _a;
 };
-export 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 = __rest(_b, ["$placement", "$popoverMargin", "$showArrow"]);
-    return (__assign(__assign({ backgroundColor: theme.spr.popup, color: theme.spr.text01, boxShadow: 'none' }, borderRadius(theme.popover.borderRadius)), { '::before': __assign({ content: '" "', position: 'absolute' }, getPseudoElementPosition($placement, $showArrow ? $popoverMargin + ARROW_WIDTH : $popoverMargin)) }));
+var getPlacementHelpers = function (placement, _popoverMargin, showArrow) {
+    if (_popoverMargin === void 0) { _popoverMargin = 0; }
+    var _a = __read(splitPlacement(placement), 1), primaryPos = _a[0], oppositePos = getOppositePosition(primaryPos);
+    var isPositionedVertically = primaryPos === 'top' || primaryPos === 'bottom';
+    var marginDimension = isPositionedVertically ? 'height' : 'width'; // for height and width classes
+    var popoverMargin = showArrow ? _popoverMargin + ARROW_WIDTH : _popoverMargin;
+    return { marginDimension: marginDimension, popoverMargin: popoverMargin, oppositePos: oppositePos };
 };
-export var arrowStyles = [
-    function (utils) {
-        var theme = utils.theme;
-        return {
-            backgroundColor: 'transparent',
-            boxShadow: 'none',
-            zIndex: 1,
-            borderTopWidth: theme.borderWidth.default,
-            borderTopStyle: 'solid',
-            borderTopColor: theme.spr.popupBorder,
-            borderRightWidth: theme.borderWidth.default,
-            borderRightStyle: 'solid',
-            borderRightColor: theme.spr.popupBorder,
-        };
+export var getBodyStyles = [
+    function (_, _a) {
+        var _b;
+        var $placement = _a.$placement, $popoverMargin = _a.$popoverMargin, $showArrow = _a.$showArrow;
+        var _c = getPlacementHelpers($placement, $popoverMargin, $showArrow), oppositePos = _c.oppositePos, marginDimension = _c.marginDimension, popoverMargin = _c.popoverMargin;
+        return _b = {},
+            _b["--sw-before-".concat(oppositePos)] = "".concat(-1 * popoverMargin, "px"),
+            _b["--sw-before-".concat(marginDimension)] = "".concat(popoverMargin, "px"),
+            _b;
+    },
+];
+export var getBodyClassNames = [
+    'spr-popup spr-text-01 shadow-none rounded-8 before:absolute before:content-empty',
+    function (_, _a) {
+        var $placement = _a.$placement;
+        var _b = __read(splitPlacement($placement), 1), primaryPos = _b[0];
+        var isPositionedVertically = primaryPos === 'top' || primaryPos === 'bottom';
+        return isPositionedVertically ? 'before:w-full before:left-0' : 'before:h-full before:top-0';
+    },
+    function (_, _a) {
+        var $placement = _a.$placement, $popoverMargin = _a.$popoverMargin, $showArrow = _a.$showArrow;
+        var _b = getPlacementHelpers($placement, $popoverMargin, $showArrow), oppositePos = _b.oppositePos, marginDimension = _b.marginDimension;
+        // adding classes like before:top-[--sw-before-top] before:h-[--sw-before-height]
+        return "before:".concat(oppositePos, "-[--sw-before-").concat(oppositePos, "] before:").concat(marginDimension === 'height' ? 'h' : 'w', "-[--sw-before-").concat(marginDimension, "]");
     },
+    //@ts-ignore -- component theme override
+    function (_a, _) {
+        var _b;
+        var theme = _a.theme;
+        return (((_b = theme.popover) === null || _b === void 0 ? void 0 : _b.borderRadius) ? borderRadius(theme.popover.borderRadius) : {});
+    },
+];
+export var arrowStyles = [
+    'bg-transparent box-shadow-none z-1 border-solid border-0 border-t-1 border-t-[--sw-border-t-color] border-r-1 border-r-[--sw-border-r-color]',
     arrowPositionStyle,
 ];
 export var getInnerStyles = [
-    'border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup',
-    function (_a) {
+    'border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup rounded-8',
+    // @ts-ignore -- component theme override
+    function (_a, _) {
+        var _b, _c;
         var theme = _a.theme;
-        return (__assign(__assign({}, borderRadius(theme.popover.borderRadius)), { fontFamily: theme.fontFamily.sans }));
+        return (((_b = theme.popover) === null || _b === void 0 ? void 0 : _b.borderRadius) ? { borderRadius: (_c = theme.popover) === null || _c === void 0 ? void 0 : _c.borderRadius } : {});
     },
 ];

package/esm/popover/popover.d.ts

@@ -5,6 +5,7 @@ declare const Popover: React.ForwardRefExoticComponent<Omit<import("../baseui/po
         Arrow?: import("../overrides").Override<any> | undefined;
         Inner?: import("../overrides").Override<any> | undefined;
     } & {
+        LayersManager?: import("../overrides").Override<import("../baseui/layer").LayersManagerProps> | undefined;
         ArrowTriangle?: import("../overrides").Override<any> | undefined;
     }) | undefined;
     children?: React.ReactNode | ((args: {