@sprinklrjs/spaceweb 10.1.0

package/phone-input/phone-input.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
+var input_1 = require("../input");
+var country_select_container_1 = (0, tslib_1.__importDefault)(require("./country-select-container"));
+var styled_components_1 = require("./styled-components");
+var utils_1 = require("./utils");
+var overrides_1 = require("../overrides");
+var locale_1 = require("../locale");
+var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
+var PhoneInput = function (props) {
+    var size = props.size, variant = props.variant, intent = props.intent, disabled = props.disabled, overrides = props.overrides, mapIsoToLabel = props.mapIsoToLabel, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, onInputChange = props.onInputChange, onChange = props.onChange, value = props.value, rest = (0, tslib_1.__rest)(props, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value"]);
+    var locale = (0, locale_1.useLocale)();
+    var inputRef = (0, react_1.useRef)(null);
+    var mergedOverrides = (0, overrides_1.mergeOverrides)({
+        Input: {
+            props: {
+                overrides: {
+                    Root: {
+                        style: styled_components_1.getRootStyles,
+                        props: { $disabled: disabled },
+                    },
+                    Input: {
+                        style: styled_components_1.getInputStyles,
+                    },
+                    Before: {
+                        component: country_select_container_1.default,
+                        props: {
+                            size: size,
+                            disabled: disabled,
+                            inputRef: inputRef,
+                            value: value,
+                            onChange: onChange,
+                            mapIsoToLabel: mapIsoToLabel,
+                            maxDropdownHeight: maxDropdownHeight,
+                            maxDropdownWidth: maxDropdownWidth,
+                            overrides: (0, pick_1.default)(overrides, ['CountrySelect', 'CountrySelectContainer', 'FlagContainer', 'DialCode']),
+                        },
+                    },
+                },
+            },
+        },
+    }, overrides);
+    var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, input_1.Input), 2), Input = _a[0], inputProps = _a[1];
+    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) {
+                onChange((0, tslib_1.__assign)((0, tslib_1.__assign)({}, value), { phoneNumber: number }));
+            }
+            if (onInputChange) {
+                onInputChange(e);
+            }
+        }, value: (0, utils_1.sanitize)(value === null || value === void 0 ? void 0 : value.phoneNumber), inputRef: inputRef, type: "text", inputMode: "tel" }, rest, inputProps), void 0));
+};
+PhoneInput.defaultProps = default_props_1.default;
+exports.default = PhoneInput;

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { StatefulPhoneInputContainerProps } from './types';
+declare const StatefulPhoneInputContainer: (props: StatefulPhoneInputContainerProps) => React.ReactElement;
+export default StatefulPhoneInputContainer;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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 internalSetState = function (type, nextState) {
+        setState(stateReducer(type, nextState, state));
+    };
+    var statefulOnChange = function (_a) {
+        var country = _a.country, phoneNumber = _a.phoneNumber;
+        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 }));
+};
+exports.default = StatefulPhoneInputContainer;

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

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { StatefulPhoneInputProps } from './types';
+declare const StatefulPhoneInput: {
+    (props: StatefulPhoneInputProps): ReactElement;
+    defaultProps: {
+        clearable: boolean;
+        focusLock: boolean;
+        disabled: boolean;
+        intent: import("..").Intent;
+        maxDropdownHeight: string;
+        maxDropdownWidth: string;
+        name: undefined;
+        onChange: () => void;
+        overrides: import("./types").PhoneInputOverrides;
+        positive: boolean;
+        required: boolean;
+        size: import("../input").InputSize;
+        variant: import("../input").InputVariant;
+        value: {
+            country: import("./types").Country;
+            phoneNumber: string;
+        };
+    };
+};
+export default StatefulPhoneInput;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var stateful_phone_input_container_1 = (0, tslib_1.__importDefault)(require("./stateful-phone-input-container"));
+var phone_input_1 = (0, tslib_1.__importDefault)(require("./phone-input"));
+var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
+var StatefulPhoneInput = function (props) {
+    var overrides = props.overrides, rest = (0, tslib_1.__rest)(props, ["overrides"]);
+    return ((0, jsx_runtime_1.jsx)(stateful_phone_input_container_1.default, (0, tslib_1.__assign)({}, rest, { children: function (phoneInputProps) { return (0, jsx_runtime_1.jsx)(phone_input_1.default, (0, tslib_1.__assign)({}, phoneInputProps, { overrides: overrides }), void 0); } }), void 0));
+};
+StatefulPhoneInput.defaultProps = default_props_1.default;
+exports.default = StatefulPhoneInput;

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

@@ -0,0 +1,13 @@
+export declare const getFlagContainerStyles: (string | (({ theme, px2rem }: {
+    theme: any;
+    px2rem: any;
+}, { $inputSize, $isFocusVisible }: {
+    $inputSize: any;
+    $isFocusVisible: any;
+}) => any))[];
+export declare const getRootStyles: ({}: {}, { $disabled }: {
+    $disabled: any;
+}) => "cursor-not-allowed" | undefined;
+export declare const getInputStyles = "pl-1";
+export declare const StyledCountrySelectContainer: import("../style/styled").StyledComponent;
+export declare const StyledDialCode: import("../style/styled").StyledComponent;

package/phone-input/styled-components.js

@@ -0,0 +1,39 @@
+"use strict";
+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 dialCodeSizeConfig = function (px2rem) { return ({
+    sm: { fontSize: px2rem(12) },
+    md: { fontSize: px2rem(14) },
+    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',
+    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 && {
+            ':focus': {
+                outline: "1px solid ".concat(theme.spr.focus01),
+            },
+        })));
+    },
+];
+var getRootStyles = function (_a, _b) {
+    var $disabled = _b.$disabled;
+    return ($disabled ? 'cursor-not-allowed' : undefined);
+};
+exports.getRootStyles = getRootStyles;
+exports.getInputStyles = 'pl-1';
+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) {
+    var px2rem = _a.px2rem;
+    var $size = _b.$size;
+    var sizeTheme = getSizeConfig(px2rem, $size);
+    var styles = {
+        fontSize: sizeTheme.fontSize,
+    };
+    return styles;
+});

package/phone-input/types.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { MenuProps } from '../menu';
+import { InputProps, SharedProps } from '../input';
+import { Override } from '../overrides';
+import { COUNTRIES, STATE_CHANGE_TYPE } from './constants';
+export declare type Country = {
+    id: keyof typeof COUNTRIES;
+    label: string;
+    dialCode: string;
+};
+export declare 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 = {
+    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'> & {
+    onInputChange?: (event: React.SyntheticEvent<HTMLInputElement>) => unknown;
+    onChange?: (value: Value) => void;
+    value?: Value;
+    mapIsoToLabel?: (iso: string) => string;
+    maxDropdownHeight?: string;
+    maxDropdownWidth?: string;
+    overrides?: PhoneInputOverrides;
+};
+export declare type StatefulPhoneInputProps = PhoneInputProps;
+export declare 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'>> & {
+    overrides?: Pick<PhoneInputOverrides, 'CountrySelectContainer' | 'CountrySelect' | 'FlagContainer' | 'DialCode'>;
+    value: State;
+};
+export declare type CountrySelectProps = Omit<CountrySelectContainerProps, 'overrides'> & {
+    overrides?: Pick<PhoneInputOverrides, 'CountrySelect' | 'FlagContainer'>;
+};
+export declare type FlagContainerProps = Pick<CountrySelectContainerProps, 'size' | 'disabled' | 'value'> & {
+    overrides?: Pick<PhoneInputOverrides, 'FlagContainer'>;
+};
+export declare type DialCodeProps = Pick<CountrySelectContainerProps, 'size' | 'value'> & {
+    overrides?: Pick<PhoneInputOverrides, 'DialCode'>;
+};
+export declare type FixedSizeListItemProps = {
+    item: React.ReactElement;
+    top: number;
+};
+export declare type VirtualizedCountrySelectDropdownProps = MenuProps & {
+    ListItem: React.ComponentType<FixedSizeListItemProps>;
+    emptyListHeight?: number;
+    listItemHeight?: number;
+    overscanCount?: number;
+    parentRef: React.MutableRefObject<HTMLDivElement>;
+};

package/phone-input/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/phone-input/utils.d.ts

@@ -0,0 +1,6 @@
+import { OverlaySelectProps } from '../select/types';
+import { Value } from './types';
+export declare const iso2FlagEmoji: (iso: string) => string | undefined;
+export declare const sanitize: (value?: string) => string;
+export declare const getPhoneNumberWithCountryDialCode: (value: Value) => string | undefined;
+export declare const countrySelectFilterOptions: Required<OverlaySelectProps>['filterOptions'];

package/phone-input/utils.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.countrySelectFilterOptions = exports.getPhoneNumberWithCountryDialCode = exports.sanitize = exports.iso2FlagEmoji = void 0;
+var tslib_1 = require("tslib");
+var default_filter_options_1 = require("../select/utils/default-filter-options");
+var constants_1 = require("./constants");
+var iso2FlagEmoji = function (iso) {
+    if (!constants_1.ISO_REGEX.test(iso)) {
+        return;
+    }
+    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));
+};
+exports.iso2FlagEmoji = iso2FlagEmoji;
+var sanitize = function (value) {
+    if (value === void 0) { value = ''; }
+    return value.replace(/\D/g, '');
+};
+exports.sanitize = sanitize;
+var getPhoneNumberWithCountryDialCode = function (value) {
+    if (value === undefined || value.country === undefined || value.phoneNumber === undefined) {
+        return;
+    }
+    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) {
+            var label = _a.label, dialCode = _a.dialCode;
+            var filterValueLowerCase = filterValue.toLowerCase();
+            return label.toLowerCase().includes(filterValueLowerCase) || dialCode.includes(filterValueLowerCase);
+        } }));
+};
+exports.countrySelectFilterOptions = countrySelectFilterOptions;

package/phone-input/virtualized-country-select-dropdown.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { FixedSizeListItemProps } from './types';
+declare const VirtualizedCountrySelectDropdown: React.ForwardRefExoticComponent<Omit<import("../list").ListProps, "overrides"> & {
+    disableNavigationOnMount?: boolean | undefined;
+    focusWhenNavigationEnabled?: boolean | undefined;
+    overrides?: {
+        List?: import("../overrides").Override<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+            $as?: React.ElementType<any> | undefined;
+            className?: import("..").Styles;
+            style?: import("..").Styles;
+        } & {
+            children?: React.ReactNode;
+            overrides?: {
+                Root?: import("../overrides").Override<Record<string, any>> | undefined;
+            } | undefined;
+        } & Record<string, any>> | undefined;
+    } | undefined;
+    onHighlightedItemChange?: ((item?: HTMLElement | null | undefined) => void) | undefined;
+    disableAutoHighlight?: boolean | undefined;
+    resetMenuHighlightOnMouseLeave?: boolean | undefined;
+    resetMenuOnMouseLeave?: boolean | undefined;
+    reducer?: import("../menu/types").Reducer | undefined;
+    captureScroll?: boolean | undefined;
+} & {
+    ListItem: React.ComponentType<FixedSizeListItemProps>;
+    emptyListHeight?: number | undefined;
+    listItemHeight?: number | undefined;
+    overscanCount?: number | undefined;
+    parentRef: React.MutableRefObject<HTMLDivElement>;
+} & React.RefAttributes<HTMLElement>>;
+export default VirtualizedCountrySelectDropdown;

package/phone-input/virtualized-country-select-dropdown.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var React = (0, tslib_1.__importStar)(require("react"));
+var react_virtual_1 = require("react-virtual");
+var box_1 = require("../box");
+var select_1 = require("../select");
+var menu_1 = require("../menu");
+var constants_1 = require("./constants");
+var FixedSizeListItem = React.forwardRef(function (_a, ref) {
+    var item = _a.item, top = _a.top;
+    return React.cloneElement(item, {
+        className: 'flex items-center w-full absolute top-0 left-0 box-border',
+        style: { transform: "translateY(".concat(top, "px)") },
+        ref: ref,
+    });
+});
+var VirtualizedCountrySelectDropdown = React.forwardRef(function (props, ref) {
+    var _a = props.ListItem, ListItem = _a === void 0 ? FixedSizeListItem : _a, _b = props.emptyListHeight, emptyListHeight = _b === void 0 ? constants_1.EMPTY_LIST_HEIGHT : _b, _c = props.listItemHeight, listItemHeight = _c === void 0 ? constants_1.LIST_ITEM_HEIGHT : _c, _children = props.children, _d = props.overscanCount, overscanCount = _d === void 0 ? constants_1.OVERSCAN_COUNT : _d, parentRef = props.parentRef, rest = (0, tslib_1.__rest)(props, ["ListItem", "emptyListHeight", "listItemHeight", "children", "overscanCount", "parentRef"]);
+    var children = React.Children.toArray(_children);
+    var firstChild = children[0];
+    var estimateSize = (0, react_1.useCallback)(function () { return listItemHeight; }, [listItemHeight]);
+    var rowVirtualizer = (0, react_virtual_1.useVirtual)({
+        size: children.length,
+        parentRef: parentRef,
+        estimateSize: estimateSize,
+        overscan: overscanCount,
+    });
+    if (!React.isValidElement(firstChild))
+        return ((0, jsx_runtime_1.jsx)(menu_1.Menu, (0, tslib_1.__assign)({ style: { height: "".concat(emptyListHeight, "px") } }, { children: (0, jsx_runtime_1.jsx)(select_1.NoResults, {}, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(menu_1.Menu, (0, tslib_1.__assign)({ ref: ref, "$as": "div" }, rest, { children: (0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ "$as": "ul", className: ['relative m-0', { height: "".concat(rowVirtualizer.totalSize, "px") }] }, { children: rowVirtualizer.virtualItems.map(function (virtualRow) { return ((0, jsx_runtime_1.jsx)(ListItem, { ref: virtualRow.measureRef, top: virtualRow.start, item: children[virtualRow.index] }, virtualRow.index)); }) }), void 0) }), void 0));
+});
+exports.default = VirtualizedCountrySelectDropdown;

package/popover/PopoverEnahncer.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<Pick<any, string | number | symbol> & React.RefAttributes<HTMLElement | null | undefined>>;
+export declare const TargetElementProxy: React.ForwardRefExoticComponent<{
+    targetElement?: HTMLElement | null | undefined;
+} & React.RefAttributes<HTMLElement | null | undefined>>;
+declare type PopoverChildEnhancerProps = {
+    children?: React.ReactNode;
+    targetElement?: HTMLElement | null | undefined;
+};
+export declare const PopoverChildEnhancer: React.ForwardRefExoticComponent<PopoverChildEnhancerProps & React.RefAttributes<HTMLElement | null | undefined>>;
+export {};

package/popover/PopoverEnahncer.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverChildEnhancer = exports.TargetElementProxy = exports.PopoverRefHandler = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var React = (0, tslib_1.__importStar)(require("react"));
+var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
+var __DEV__ = process.env.NODE_ENV !== 'production';
+function getFirstElement(children) {
+    var childArray = React.Children.toArray(children);
+    if (childArray.length !== 1) {
+        console.error("[spaceweb] Exactly 1 child must be passed to Popover/Tooltip, found ".concat(childArray.length, " children"));
+    }
+    var _a = (0, tslib_1.__read)(childArray, 1), child = _a[0];
+    return React.isValidElement(child) && typeof child === 'object' ? child : (0, jsx_runtime_1.jsx)("span", { children: child }, void 0);
+}
+/**
+ * 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
+ */
+exports.PopoverRefHandler = React.forwardRef(function (_a, ref) {
+    var children = _a.children, anchorProps = (0, tslib_1.__rest)(_a, ["children"]);
+    var childElement = getFirstElement(children);
+    var childRef = childElement.ref || null;
+    var combinedRef = (0, useCombinedRef_1.default)(ref, childRef);
+    var childProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, anchorProps), { ref: combinedRef });
+    return React.cloneElement(childElement, childProps);
+});
+exports.PopoverRefHandler.displayName = 'PopoverRefHandler';
+exports.TargetElementProxy = React.forwardRef(function (_a, ref) {
+    var targetElement = _a.targetElement, anchorProps = (0, tslib_1.__rest)(_a, ["targetElement"]);
+    (0, react_1.useEffect)(function () {
+        if (!ref)
+            return;
+        if (typeof ref === 'object') {
+            ref.current = targetElement;
+        }
+        else {
+            ref(targetElement);
+        }
+        targetElement;
+    }, [targetElement]);
+    return null;
+});
+exports.TargetElementProxy.displayName = 'PopoverTargetElementProxy';
+exports.PopoverChildEnhancer = React.forwardRef(function (_a, ref) {
+    var children = _a.children, targetElement = _a.targetElement, anchorProps = (0, tslib_1.__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 (0, jsx_runtime_1.jsx)(exports.TargetElementProxy, (0, tslib_1.__assign)({ ref: ref, targetElement: targetElement }, anchorProps), void 0);
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.PopoverRefHandler, (0, tslib_1.__assign)({ ref: ref }, anchorProps, { children: children }), void 0));
+});
+exports.PopoverChildEnhancer.displayName = 'PopoverChildEnhancer';

package/popover/adapter.d.ts

@@ -0,0 +1,6 @@
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from 'baseui/popover';
+import { AccessibilityType, TriggerType, Placement } from './types';
+import { ValueOf } from '../utility-types';
+export declare const accessibilityMap: Record<AccessibilityType, ValueOf<ACCESSIBILITY_TYPE>>;
+export declare const triggerTypeMap: Record<TriggerType, ValueOf<TRIGGER_TYPE>>;
+export declare const placementMap: Record<Placement, ValueOf<PLACEMENT>>;

package/popover/adapter.js

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

package/popover/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ON_MOUSE_LEAVE_DELAY = 300;
+export declare const ARROW_SIZE = 4;
+export declare const ARROW_WIDTH: number;

package/popover/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ARROW_WIDTH = exports.ARROW_SIZE = exports.ON_MOUSE_LEAVE_DELAY = void 0;
+exports.ON_MOUSE_LEAVE_DELAY = 300;
+exports.ARROW_SIZE = 4;
+/*
+ * Since we use a 45-degree rotated div to render the arrow, the
+ * width/height of this div is different than the arrow size itself
+ * calculated using pythagorean theorem
+ */
+exports.ARROW_WIDTH = Math.ceil(Math.sqrt(2 * exports.ARROW_SIZE * exports.ARROW_SIZE));

package/popover/hooks.d.ts

@@ -0,0 +1,14 @@
+/// <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: JSX.Element;
+};
+declare type UseFocusLockParams = Pick<PopoverProps, 'focusLock' | 'returnFocus'>;
+export declare const useFocusLock: ({ focusLock, returnFocus }: UseFocusLockParams) => UseFocusLockParams;
+export {};

package/popover/hooks.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusLock = exports.useContent = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var layer_1 = require("../layer");
+/**
+ * Wraps content with LayersManager making sure all the inner popovers are hosted inside the current popover.
+ */
+var useContent = function (_a) {
+    var content = _a.content;
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(null), 2), contentHost = _b[0], setContentHost = _b[1];
+    var _content = typeof content === 'function' ? content() : content;
+    return {
+        setContentHost: setContentHost,
+        wrappedContent: (0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ host: contentHost }, { children: _content }), void 0),
+    };
+};
+exports.useContent = useContent;
+var useFocusLock = function (_a) {
+    var focusLock = _a.focusLock, returnFocus = _a.returnFocus;
+    var _focusLock = focusLock;
+    if (returnFocus) {
+        // according to baseui - focusLock should be true for returnFocus to work
+        _focusLock = true;
+    }
+    return { focusLock: _focusLock, returnFocus: returnFocus };
+};
+exports.useFocusLock = useFocusLock;

package/popover/index.d.ts

@@ -0,0 +1,6 @@
+export { StatefulContainer } from 'baseui/popover';
+export { default as StatefulPopover } from './stateful-popover';
+export { default as Popover } from './popover';
+export { StyledPadding, StyledBody, StyledArrow, StyledInner } from './styled-components';
+export type { AccessibilityType, Offset, Placement, PopoverProps, SharedProps, StatefulPopoverContainerProps, StatefulPopoverProps, StateReducer, TriggerType, } from './types';
+export { ANIMATE_IN_TIME, ANIMATE_OUT_TIME, STATE_CHANGE_TYPE } from './types';

package/popover/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATE_CHANGE_TYPE = exports.ANIMATE_OUT_TIME = exports.ANIMATE_IN_TIME = exports.StyledInner = exports.StyledArrow = exports.StyledBody = exports.StyledPadding = exports.Popover = exports.StatefulPopover = exports.StatefulContainer = void 0;
+var popover_1 = require("baseui/popover");
+Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return popover_1.StatefulContainer; } });
+var stateful_popover_1 = require("./stateful-popover");
+Object.defineProperty(exports, "StatefulPopover", { enumerable: true, get: function () { return __importDefault(stateful_popover_1).default; } });
+var popover_2 = require("./popover");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return __importDefault(popover_2).default; } });
+var styled_components_1 = require("./styled-components");
+Object.defineProperty(exports, "StyledPadding", { enumerable: true, get: function () { return styled_components_1.StyledPadding; } });
+Object.defineProperty(exports, "StyledBody", { enumerable: true, get: function () { return styled_components_1.StyledBody; } });
+Object.defineProperty(exports, "StyledArrow", { enumerable: true, get: function () { return styled_components_1.StyledArrow; } });
+Object.defineProperty(exports, "StyledInner", { enumerable: true, get: function () { return styled_components_1.StyledInner; } });
+var types_1 = require("./types");
+Object.defineProperty(exports, "ANIMATE_IN_TIME", { enumerable: true, get: function () { return types_1.ANIMATE_IN_TIME; } });
+Object.defineProperty(exports, "ANIMATE_OUT_TIME", { enumerable: true, get: function () { return types_1.ANIMATE_OUT_TIME; } });
+Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return types_1.STATE_CHANGE_TYPE; } });

package/popover/overrides.d.ts

@@ -0,0 +1,8 @@
+import { Placement } from './types';
+import { StyleFn, 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;