"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FloatingPlusButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const FloatingPopup_1 = require("../FloatingPopup/index.js");
const InsertCursor_1 = require("./InsertCursor.js");
const PlusButton_1 = require("./PlusButton.js");
const styles = {
    borderRadius: '100px', // button circle border radius
    background: 'transparent',
};
const placementByType = {
    row: 'left-end',
    column: 'top-end',
};
const offsetByType = {
    row: { alignmentAxis: -10 },
    column: { alignmentAxis: -10 },
};
const FloatingPlusButton = function YfmTableFloatingPlusButton({ anchor, type, ...btnProps }) {
    const [hovered, setHovered] = (0, react_1.useState)(false);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FloatingPopup_1.FloatingPopup, { open: true, anchorElement: anchor, placement: placementByType[type], offset: offsetByType[type], style: styles, children: (0, jsx_runtime_1.jsx)(PlusButton_1.PlusButton, { ...btnProps, onHoverChange: setHovered, qa: `g-md-yfm-table-plus-${type}` }) }), hovered && (0, jsx_runtime_1.jsx)(InsertCursor_1.InsertCursor, { anchor: anchor, type: type })] }));
};
exports.FloatingPlusButton = FloatingPlusButton;
//# sourceMappingURL=FloatingPlusButton.js.map
