import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ArrowDown, ArrowUp, EllipsisVertical, TrashBin } from '@gravity-ui/icons';
import { Button, Icon, Menu, Popup } from '@gravity-ui/uikit';
import { formGeneratorCn } from "../../../../utils/cn.js";
const b = formGeneratorCn('array-item-button');
const ItemButton = ({ className, onRemove, onReorderUp, onReorderDown, disableReorderUp = false, disableReorderDown = false, }) => {
    const buttonRef = React.useRef(null);
    const [isOpen, setIsOpen] = React.useState(false);
    const onMenuItemClickWrapper = React.useCallback((callback) => {
        return () => {
            setIsOpen(false);
            callback();
        };
    }, []);
    return (_jsxs(React.Fragment, { children: [_jsx(Button, { className: b(null, className), ref: buttonRef, onClick: () => setIsOpen(true), children: _jsx(Icon, { data: EllipsisVertical }) }), _jsx(Popup, { placement: 'bottom-end', anchorRef: buttonRef, open: isOpen, onOutsideClick: () => setIsOpen(false), children: _jsxs(Menu, { children: [_jsx(Menu.Item, { theme: 'danger', onClick: onMenuItemClickWrapper(onRemove), iconStart: _jsx(Icon, { data: TrashBin }), children: "Remove" }), _jsx(Menu.Item, { disabled: disableReorderUp, onClick: onMenuItemClickWrapper(onReorderUp), iconStart: _jsx(Icon, { data: ArrowUp }), children: "Reorder Up" }), _jsx(Menu.Item, { disabled: disableReorderDown, onClick: onMenuItemClickWrapper(onReorderDown), iconStart: _jsx(Icon, { data: ArrowDown }), children: "Reorder Down" })] }) })] }));
};
export default ItemButton;
//# sourceMappingURL=ItemButton.js.map
