import * as React from "react";
import { useMenu } from "../../hooks/useMenu";
/**
 * Individual menu item.
 * @param {function} [onClick] - Custom onClick handler function for when the menu item is clicked.
 * @param {string} [className] - Custom css class name for the menu item. Defaults to "menu-item".
 * @param {string} [style] - Custom css styles for the menu item. This is necessary because the DOM's styles will be lost when this component is sent through a React portal.
 * @param {boolean} [noClose=false] - If set to true, prevents the menu from closing when an item is clicked on.
 */
export const MenuItem = ({ children, onClick, style, noClose, className = "menu-item", onKeyDown, lang, }) => {
    const { closeMenu } = useMenu();
    const selfRef = React.useRef(null);
    // Combines the passed onClick handler with our
    // default onClick handler (which closes the menu)
    const combinedOnClick = () => {
        // Call the developer's custom onClick handler
        onClick && onClick();
        // Do not close menu when noClose attributes exist
        !noClose && closeMenu();
    };
    return (React.createElement("div", { ref: selfRef, tabIndex: 0, role: "menuitem", className: className, onClick: combinedOnClick, style: style, onKeyDown: onKeyDown, lang: lang, onMouseOver: () => {
            var _a;
            (_a = selfRef.current) === null || _a === void 0 ? void 0 : _a.classList.add("menu-item-hover");
        }, onMouseOut: () => {
            var _a;
            (_a = selfRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove("menu-item-hover");
        } }, children));
};
//# sourceMappingURL=MenuItem.js.map