import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useLayoutEffect, useRef, useState } from 'react';
import { ArrowToggle, Button, Popup, Select, } from '@gravity-ui/uikit';
import { useBooleanState } from "../../react-utils/index.js";
export const TooltipButton = ({ domRef, buttonTitle = 'Settings', items, onUpdate, withSearch, onOutsideClick, }) => {
    const [width, setWidth] = useState(0);
    const [open, , , toggleOpen] = useBooleanState(false);
    const ref = useRef(null);
    useLayoutEffect(() => {
        if (ref.current?.clientWidth) {
            setWidth(ref.current?.clientWidth);
        }
    }, [ref.current?.clientWidth, buttonTitle]);
    return (_jsx(Popup, { open: true, keepMounted: false, hasArrow: false, anchorElement: domRef, placement: 'right-start', offset: { crossAxis: 10, mainAxis: -(width + 10) }, onOutsideClick: onOutsideClick, children: _jsx(Select, { onOpenChange: toggleOpen, renderControl: () => (_jsxs(Button, { ref: ref, view: 'flat', children: [buttonTitle, _jsx(ArrowToggle, { direction: open ? 'top' : 'bottom' })] })), options: items, onUpdate: (v) => onUpdate(v[0]), filterable: withSearch }) }));
};
//# sourceMappingURL=TooltipSelect.js.map
