import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useLayoutEffect, useState } from 'react';
import { Ellipsis } from '@gravity-ui/icons';
import { Button, Icon, Popup } from '@gravity-ui/uikit';
import { useBooleanState, useElementState } from "../../react-utils/index.js";
export const TooltipButton = ({ domElem, children, onOutsideClick, }) => {
    const [width, setWidth] = useState(0);
    const [open, , hide, toggleOpen] = useBooleanState(false);
    const placement = ['bottom-end', 'bottom-start'];
    const [anchor, setAnchor] = useElementState();
    useLayoutEffect(() => {
        if (anchor?.clientWidth) {
            setWidth(anchor.clientWidth);
        }
    }, [anchor?.clientWidth]);
    return (_jsxs(Popup, { open: true, keepMounted: false, hasArrow: false, anchorElement: domElem, placement: 'right-start', offset: { crossAxis: 3, mainAxis: -(width + 3) }, onOutsideClick: onOutsideClick, children: [_jsx(Button, { onClick: toggleOpen, ref: setAnchor, size: "s", view: open ? 'normal' : 'raised', children: _jsx(Icon, { data: Ellipsis }) }), _jsx(Popup, { open: open, anchorElement: anchor, onClose: hide, placement: placement, children: children })] }));
};
//# sourceMappingURL=TooltipButton.js.map
