/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-c7e2378
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect } from 'react';
import { useModal, useOverlay } from 'react-aria';
import { tasty } from '../../../tasty/index.js';
import { mergeProps } from '../../../utils/react/index.js';
import { Overlay } from './Overlay.js';
const PopoverElement = tasty({
    role: 'presentation',
    styles: {
        display: {
            '': 'none',
            'entering | entered': 'initial',
            exiting: 'initial',
            exited: 'none',
        },
        pointerEvents: 'auto',
        position: 'absolute',
        transition: 'opacity .120s linear, visibility 0ms linear, transform .120s ease-in-out',
        transform: {
            '': 'scale(1, .9)',
            open: 'initial',
        },
        opacity: {
            '': 0,
            open: '.9999',
        },
        transformOrigin: {
            '': 'top center',
            '[data-placement="top"]': 'bottom center',
        },
    },
});
function Popover(props, ref) {
    let { qa, style, styles, children, placement, arrowProps, onClose, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable = true, updatePosition, shouldCloseOnInteractOutside, ...otherProps } = props;
    return (_jsx(Overlay, { ...otherProps, children: _jsx(PopoverWrapper, { ref: ref, qa: qa, style: style, styles: styles, placement: placement, arrowProps: arrowProps, shouldCloseOnBlur: shouldCloseOnBlur, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isNonModal: isNonModal, isDismissable: isDismissable, updatePosition: updatePosition, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, onClose: onClose, children: children }) }));
}
const PopoverWrapper = forwardRef(function PopoverWrapper(props, ref) {
    let { qa, children, placement = 'bottom', arrowProps, isOpen, style, styles, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable, updatePosition, transitionState, shouldCloseOnInteractOutside, ...otherProps } = props;
    let { overlayProps } = useOverlay({ ...props, isDismissable: isDismissable && isOpen }, 
    // @ts-ignore
    ref);
    let { modalProps } = useModal({
        isDisabled: isNonModal,
    });
    useEffect(() => {
        if (transitionState === 'entered') {
            updatePosition?.();
        }
    }, [updatePosition, transitionState]);
    return (_jsx(PopoverElement, { qa: qa || 'Popover', ...mergeProps(otherProps, overlayProps, modalProps), ref: ref, styles: styles, mods: {
            open: isOpen,
            entering: transitionState === 'entering',
            exiting: transitionState === 'exiting',
            exited: transitionState === 'exited',
            entered: transitionState === 'entered',
        }, "data-placement": placement, style: style, children: children }));
});
const _Popover = forwardRef(Popover);
_Popover.displayName = 'Popover';
export { _Popover as Popover };

        