@sprinklrjs/spaceweb 10.1.0

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

@@ -0,0 +1,57 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 { sanitize } from './utils';
+import { useOverrides, mergeOverrides } from '../overrides';
+import { useLocale } from '../locale';
+import defaultProps from './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 = __rest(props, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value"]);
+    var locale = useLocale();
+    var inputRef = useRef(null);
+    var mergedOverrides = mergeOverrides({
+        Input: {
+            props: {
+                overrides: {
+                    Root: {
+                        style: getRootStyles,
+                        props: { $disabled: disabled },
+                    },
+                    Input: {
+                        style: getInputStyles,
+                    },
+                    Before: {
+                        component: CountrySelectContainer,
+                        props: {
+                            size: size,
+                            disabled: disabled,
+                            inputRef: inputRef,
+                            value: value,
+                            onChange: onChange,
+                            mapIsoToLabel: mapIsoToLabel,
+                            maxDropdownHeight: maxDropdownHeight,
+                            maxDropdownWidth: maxDropdownWidth,
+                            overrides: _pick(overrides, ['CountrySelect', 'CountrySelectContainer', 'FlagContainer', 'DialCode']),
+                        },
+                    },
+                },
+            },
+        },
+    }, overrides);
+    var _a = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DefaultInput), 2), Input = _a[0], inputProps = _a[1];
+    return (_jsx(Input, __assign({ "aria-label": locale.phoneInput.inputAriaLabel, size: size, variant: variant, intent: intent, disabled: disabled, onChange: function (e) {
+            var number = sanitize(e.currentTarget.value);
+            if (onChange) {
+                onChange(__assign(__assign({}, value), { phoneNumber: number }));
+            }
+            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));
+};
+PhoneInput.defaultProps = defaultProps;
+export default PhoneInput;

package/esm/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/esm/phone-input/stateful-phone-input-container.js

@@ -0,0 +1,19 @@
+import { __assign, __read } from "tslib";
+import { useState } from 'react';
+import defaultProps from './default-props';
+import { STATE_CHANGE_TYPE } from './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 ? defaultProps.value : _a, intent = props.intent, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, mapIsoToLabel = props.mapIsoToLabel, name = props.name, _b = props.onChange, onChange = _b === void 0 ? defaultProps.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 = __read(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(STATE_CHANGE_TYPE.onChange, __assign(__assign({}, state), { country: country, phoneNumber: phoneNumber }));
+    };
+    return props.children(__assign(__assign({}, defaultProps), { '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 }));
+};
+export default StatefulPhoneInputContainer;

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

@@ -0,0 +1,11 @@
+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';
+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));
+};
+StatefulPhoneInput.defaultProps = defaultProps;
+export default StatefulPhoneInput;

package/esm/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/esm/phone-input/styled-components.js

@@ -0,0 +1,35 @@
+import { __assign } from "tslib";
+import { styled } from '../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; };
+export var 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 (__assign({ marginLeft: $inputSize === 'sm' ? px2rem(6) : px2rem(10) }, ($isFocusVisible && {
+            ':focus': {
+                outline: "1px solid ".concat(theme.spr.focus01),
+            },
+        })));
+    },
+];
+export var getRootStyles = function (_a, _b) {
+    var $disabled = _b.$disabled;
+    return ($disabled ? 'cursor-not-allowed' : undefined);
+};
+export var getInputStyles = 'pl-1';
+export var StyledCountrySelectContainer = styled('div', 'flex items-center');
+export var StyledDialCode = 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/esm/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/esm/phone-input/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,27 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import { filterOptions } from '../select/utils/default-filter-options';
+import { ISO_REGEX, ISO_TO_FLAG_OFFSET } from './constants';
+export var iso2FlagEmoji = function (iso) {
+    if (!ISO_REGEX.test(iso)) {
+        return;
+    }
+    var chars = Array.from(iso.toUpperCase()).map(function (char) { return char.charCodeAt(0) + ISO_TO_FLAG_OFFSET; });
+    return String.fromCodePoint.apply(String, __spreadArray([], __read(chars), false));
+};
+export var sanitize = function (value) {
+    if (value === void 0) { value = ''; }
+    return value.replace(/\D/g, '');
+};
+export var getPhoneNumberWithCountryDialCode = function (value) {
+    if (value === undefined || value.country === undefined || value.phoneNumber === undefined) {
+        return;
+    }
+    return value.country.dialCode.concat(value.phoneNumber);
+};
+export var countrySelectFilterOptions = function (options, filterValue, excludeOptions, params) {
+    return filterOptions(options, filterValue, excludeOptions, __assign(__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);
+        } }));
+};

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

@@ -0,0 +1,33 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import * as React from 'react';
+import { useVirtual } from 'react-virtual';
+import { Box } from '../box';
+import { NoResults } from '../select';
+import { Menu } from '../menu';
+import { EMPTY_LIST_HEIGHT, LIST_ITEM_HEIGHT, OVERSCAN_COUNT } from './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 ? EMPTY_LIST_HEIGHT : _b, _c = props.listItemHeight, listItemHeight = _c === void 0 ? LIST_ITEM_HEIGHT : _c, _children = props.children, _d = props.overscanCount, overscanCount = _d === void 0 ? OVERSCAN_COUNT : _d, parentRef = props.parentRef, rest = __rest(props, ["ListItem", "emptyListHeight", "listItemHeight", "children", "overscanCount", "parentRef"]);
+    var children = React.Children.toArray(_children);
+    var firstChild = children[0];
+    var estimateSize = useCallback(function () { return listItemHeight; }, [listItemHeight]);
+    var rowVirtualizer = useVirtual({
+        size: children.length,
+        parentRef: parentRef,
+        estimateSize: estimateSize,
+        overscan: overscanCount,
+    });
+    if (!React.isValidElement(firstChild))
+        return (_jsx(Menu, __assign({ style: { height: "".concat(emptyListHeight, "px") } }, { children: _jsx(NoResults, {}, void 0) }), void 0));
+    return (_jsx(Menu, __assign({ ref: ref, "$as": "div" }, rest, { children: _jsx(Box, __assign({ "$as": "ul", className: ['relative m-0', { height: "".concat(rowVirtualizer.totalSize, "px") }] }, { children: rowVirtualizer.virtualItems.map(function (virtualRow) { return (_jsx(ListItem, { ref: virtualRow.measureRef, top: virtualRow.start, item: children[virtualRow.index] }, virtualRow.index)); }) }), void 0) }), void 0));
+});
+export default VirtualizedCountrySelectDropdown;

package/esm/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/esm/popover/PopoverEnahncer.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 (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 }, 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
+ */
+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), void 0);
+    }
+    return (_jsx(PopoverRefHandler, __assign({ ref: ref }, anchorProps, { children: children }), void 0));
+});
+PopoverChildEnhancer.displayName = 'PopoverChildEnhancer';

package/esm/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/esm/popover/adapter.js

@@ -0,0 +1,25 @@
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from 'baseui/popover';
+export var accessibilityMap = {
+    menu: ACCESSIBILITY_TYPE.menu,
+    none: ACCESSIBILITY_TYPE.none,
+    tooltip: ACCESSIBILITY_TYPE.tooltip,
+};
+export var triggerTypeMap = {
+    click: TRIGGER_TYPE.click,
+    hover: TRIGGER_TYPE.hover,
+};
+export var placementMap = {
+    auto: PLACEMENT.auto,
+    bottom: PLACEMENT.bottom,
+    bottomLeft: PLACEMENT.bottomLeft,
+    bottomRight: PLACEMENT.bottomRight,
+    top: PLACEMENT.top,
+    topLeft: PLACEMENT.topLeft,
+    topRight: PLACEMENT.topRight,
+    left: PLACEMENT.left,
+    leftTop: PLACEMENT.leftTop,
+    leftBottom: PLACEMENT.leftBottom,
+    right: PLACEMENT.right,
+    rightTop: PLACEMENT.rightTop,
+    rightBottom: PLACEMENT.rightBottom,
+};

package/esm/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/esm/popover/constants.js

@@ -0,0 +1,8 @@
+export var ON_MOUSE_LEAVE_DELAY = 300;
+export var 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
+ */
+export var ARROW_WIDTH = Math.ceil(Math.sqrt(2 * ARROW_SIZE * ARROW_SIZE));

package/esm/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/esm/popover/hooks.js

@@ -0,0 +1,25 @@
+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;
+    if (returnFocus) {
+        // according to baseui - focusLock should be true for returnFocus to work
+        _focusLock = true;
+    }
+    return { focusLock: _focusLock, returnFocus: returnFocus };
+};

package/esm/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/esm/popover/index.js

@@ -0,0 +1,5 @@
+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 { ANIMATE_IN_TIME, ANIMATE_OUT_TIME, STATE_CHANGE_TYPE } from './types';

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

package/esm/popover/overrides.js

@@ -0,0 +1,69 @@
+import { __assign, __read, __rest } from "tslib";
+import { getOppositePosition, splitPlacement } from './utils';
+import { ARROW_WIDTH } from './constants';
+var arrowPositionStyle = function (_a, _b) {
+    var theme = _a.theme;
+    var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c;
+    var _d = __read(splitPlacement($placement), 1), primaryPos = _d[0];
+    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)' };
+};
+export var getPseudoElementPosition = function (placement, popoverMargin) {
+    var _a;
+    var _b = __read(splitPlacement(placement), 1), primaryPos = _b[0], oppositePos = getOppositePosition(primaryPos);
+    var isPositionedVertically = primaryPos === 'top' || primaryPos === 'bottom';
+    var fullSpaceDimension = isPositionedVertically ? 'width' : 'height', marginDimension = isPositionedVertically ? 'height' : 'width', zeroOffset = isPositionedVertically ? 'left' : 'top';
+    return _a = {},
+        _a[fullSpaceDimension] = '100%',
+        _a[marginDimension] = "".concat(popoverMargin, "px"),
+        _a[zeroOffset] = 0,
+        _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 ({
+        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': __assign({ content: '" "', position: 'absolute' }, getPseudoElementPosition($placement, $showArrow ? $popoverMargin + ARROW_WIDTH : $popoverMargin)),
+    });
+};
+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,
+        };
+    },
+    arrowPositionStyle,
+];
+export var 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,
+        });
+    }];

package/esm/popover/popover.d.ts

@@ -0,0 +1,16 @@
+import { Popover as BasePopover } from 'baseui/popover';
+import * as React from 'react';
+declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popover").PopoverProps, "overrides" | "children"> & {
+    overrides?: ({
+        Body?: import("../overrides").Override<any> | undefined;
+        Arrow?: import("../overrides").Override<any> | undefined;
+        Inner?: import("../overrides").Override<any> | undefined;
+    } & {
+        ArrowTriangle?: import("../overrides").Override<any> | undefined;
+    }) | undefined;
+    children?: React.ReactNode | ((args: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+    targetElement?: HTMLElement | null | undefined;
+} & React.RefAttributes<BasePopover>>;
+export default Popover;