import { jsx as _jsx } from "react/jsx-runtime";
///
/// Fork of Popup component from @gravity-ui/uikit
/// This fork does not use floating focus manager
///
import { useEffect, useMemo } from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { FloatingNode, FloatingTree, autoUpdate, offset as offsetMiddleware, useFloating, useFloatingNodeId, useFloatingParentNodeId, useInteractions, } from '@floating-ui/react';
import { Portal } from '@gravity-ui/uikit';
import { cn } from "../../../../../../../classname.js";
import "./FloatingPopup.css";
const b = cn('yfm-table-floating-popup');
export const FloatingPopup = function YfmTableFloatingPopup(props) {
    const { anchorElement, zIndex = 1000, style, className, qa, children, floatingStyles: floatingStylesFromProps, } = props;
    const nodeId = useFloatingNodeId();
    const parentId = useFloatingParentNodeId();
    const middleware = useMemo(() => [offsetMiddleware(props.offset)], [props.offset]);
    const { refs, elements, floatingStyles, placement, context: { open }, update, } = useFloating({
        nodeId,
        open: props.open,
        placement: props.placement,
        middleware,
    });
    const { getFloatingProps } = useInteractions();
    useEffect(() => {
        if (anchorElement !== undefined && anchorElement !== refs.reference.current) {
            refs.setReference(anchorElement);
        }
    }, [anchorElement, refs]);
    useEffect(() => {
        if (elements.reference && elements.floating) {
            return autoUpdate(elements.reference, elements.floating, update);
        }
        return undefined;
    }, [elements, update]);
    function wrapper(node) {
        if (parentId === null) {
            return _jsx(FloatingTree, { children: node });
        }
        return node;
    }
    return wrapper(_jsx(FloatingNode, { id: nodeId, children: open ? (_jsx(Portal, { children: _jsx("div", { ref: refs.setFloating, style: {
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    zIndex,
                    width: 'max-content',
                    pointerEvents: 'auto',
                    outline: 'none',
                    ...floatingStylesFromProps,
                    ...floatingStyles,
                }, "data-floating-ui-placement": placement, ...getFloatingProps(), children: _jsx("div", { className: b(null, className), style: style, "data-qa": qa, children: children }) }) })) : null }));
};
//# sourceMappingURL=FloatingPopup.js.map
