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