import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { FloatingPopup } from "../FloatingPopup/index.js";
import { InsertCursor } from "./InsertCursor.js";
import { PlusButton } from "./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 },
};
export const FloatingPlusButton = function YfmTableFloatingPlusButton({ anchor, type, ...btnProps }) {
    const [hovered, setHovered] = useState(false);
    return (_jsxs(_Fragment, { children: [_jsx(FloatingPopup, { open: true, anchorElement: anchor, placement: placementByType[type], offset: offsetByType[type], style: styles, children: _jsx(PlusButton, { ...btnProps, onHoverChange: setHovered, qa: `g-md-yfm-table-plus-${type}` }) }), hovered && _jsx(InsertCursor, { anchor: anchor, type: type })] }));
};
//# sourceMappingURL=FloatingPlusButton.js.map
