import { Menu } from '@material-ui/core';
import { bindMenu, bindTrigger, usePopupState, } from 'material-ui-popup-state/hooks';
import React, { cloneElement, ElementType, FC, ReactElement, ReactNode, useCallback, } from 'react';
/**
 * Helper to handle open a menu when a button is clicked
 */
export const MenuOpener = ({ MenuComponent = Menu, name, button, menuProps, children, }) => {
    /* @fixme useId as string to bypass error */
    const popupId = 'useId(name)';
    const popupState = usePopupState({ variant: 'popover', popupId });
    const { close } = popupState;
    const click = useCallback(e => {
        const isButton = e.target.matches('a, button, input[type="button"], input[type="image"], [role="button"], [role="link"], a *, button *, [role="button"] *, [role="link"] *');
        const isDropdownButton = e.target.matches('.MuiAutocomplete-endAdornment *');
        const closePopup = isButton && !isDropdownButton;
        if (closePopup) {
            close();
        }
    }, [close]);
    return (React.createElement(React.Fragment, null, cloneElement(button, bindTrigger(popupState)), React.createElement(MenuComponent, Object.assign({}, menuProps, bindMenu(popupState), { onClick: click }), children)));
};
export default MenuOpener;
//# sourceMappingURL=MenuOpener.js.map