import * as React from "react";
import { MenuContext } from "./menuContext";
import "../../assets/css/menus.css";
import { useMemo } from "react";
import { MenuHotKey } from "./MenuHotKey";
const MENU_WIDTH = 180;
/**
 * The higher level menu component that manages the menu state, renders different parts of the menu, and facilitates
 * communication between them.
 *
 * If window.FSBL.debug==true then windows won't automatically close on blur. This is useful for debugging events that occur in the windows.
 *
 * @param {string} [className] - Custom body class for the menu contents. These classes will be set on the `<body>` tag for the Menu's drop down window.
 * @param {array} [closeHotkey] - An optional key-chord (e.g. ["ctrl","H"]) which will close the menu. Use this for instance when you want the same key-chord to toggle a menu open and closed. Note that the escape key will always close the menu.
 * @param {number} [height] - Custom height for the menu. If not set then the height will be automatically calculated based on the content height and available monitor space.
 * @param {string} [id] - Unique ID for the menu. Defaults to a random string.
 * @param {number} [maxHeight=Infinity] - Maximum height of the menu.
 * @param {number} [minHeight] - Minimum height of the menu
 * @param {array} [openHotkey] - A hotkey combination to open the menu.
 * @param {number} [width=180] - Custom width for the menu.
 *
 */
export const MenuShell = ({ children, id, width = MENU_WIDTH, height, className, maxHeight = Infinity, minHeight = 0, openHotkey, closeHotkey, }) => {
    /**
     * Every menu has its own context which contains information that child components need to use.
     * Here, we initialize that context. We do this with useMemo() for efficiency. Without useMemo,
     * our context value *object* would be recreated with every render cycle, and would thus trigger
     * every object that depended on context to re-render. Instead, useMenu creates a stable object
     * that only updates when one of *its* dependencies updates. So in essence, so long as MenuShell's
     * props are stable, context and all child props will also be stable.
     *
     * If id is passed in as a prop then we'll use that to initialize thisMenuId. Otherwise we'll set it to a random string.
     */
    const contextValue = useMemo(() => {
        return {
            thisMenuId: id || `MENU_${((Math.random() * 0xffffff) << 0).toString(16)}`,
            className: className,
            maxHeight: maxHeight,
            minHeight: minHeight,
            menuWidth: width,
            menuHeight: height,
        };
    }, [id, className, maxHeight, minHeight, width, height]);
    return (React.createElement(MenuContext.Provider, { value: contextValue },
        React.createElement(MenuHotKey, { open: openHotkey, close: closeHotkey }),
        children));
};
//# sourceMappingURL=MenuShell.js.map