import * as React from "react";
import { MenuContext } from "./menuContext";
import { useMenu } from "../../hooks/useMenu";
/**
 * A menu button that opens and closes the menu.
 */
export const MenuToggle = ({ children }) => {
    const { toggleMenu, isMenuActive } = useMenu();
    const { thisMenuId } = React.useContext(MenuContext);
    const menuActiveClass = isMenuActive() ? "menu-active" : "";
    const title = typeof children === "string" ? children : undefined;
    return (React.createElement("div", { id: `${thisMenuId}-menu-toggle`, className: `finsemble-toolbar-button ${menuActiveClass}`, onMouseDown: toggleMenu, role: "button", tabIndex: 0, onKeyDown: (e) => {
            if (["Enter", "Space"].includes(e.key)) {
                toggleMenu();
            }
        }, "aria-expanded": "false", "aria-haspopup": "true" },
        React.createElement("div", { id: `${thisMenuId}-menu-toggle-button`, title: title }, children),
        React.createElement("i", { className: "finsemble-toolbar-button-icon ff-chevron-down", "aria-hidden": "true" })));
};
//# sourceMappingURL=MenuToggle.js.map