Top Menu select

[rcelis]

Hi,

Can you enable the OnSelect for top menu options if it doesn't have any children?

I added made these changes and works but the code is repetitive:

...
export const Menu: React.FC = ({onSelect, menuId, label, icon, hotKeys, focusKey, show = true, disabled = false, checked, children, closeOnSelect}) => {
...
} else if (isRootMenu) {
const clickHandler = children || disabled ? undefined : () => {
selectMenu();
};

    const keyDownHandler: React.KeyboardEventHandler | undefined = children || disabled ? undefined : (e) => {
        if (e.key === "Enter") {
            selectMenu();
        }
    }

    const selectMenu = () => {
        if ((typeof menuBar.disableMenubar === "boolean" && menuBar.disableMenubar) || (typeof menuBar.disableMenubar === "function" && menuBar.disableMenubar() === true)) {
            return;
        }

        if (closeOnSelect === false) {
        } else {
            document.activeElement && (document.activeElement as HTMLElement).blur();
        }
        if (onSelect) {
            onSelect();
        } else if (menuId && menuBar.onSelect) {
            menuBar.onSelect(menuId);
        } else {
            console.warn(`No handlers found for menu ${label}`);
        }
    }

    return (
        <li ref={ref} tabIndex={0}
            className={classNames(`reactAppMenubar--menu`, MENU_ROOT, {[`reactAppMenubar--menu-isDisabled`]: disabled})}>
            <div className={`reactAppMenubar--menu--labelContainer`} onClick={clickHandler}>
                {icon && <span className={classNames(`reactAppMenubar--menu--icon`, ICON_ROOT)}>{icon}</span>}
                <span className={`reactAppMenubar--menu--label`}>{focusKey && label.includes(focusKey) ?
                    <>
                        <span>{label.substr(0, label.indexOf(focusKey))}</span>
                        <span className={LABEL_EM}>{focusKey}</span>
                        <span>{label.substr(label.indexOf(focusKey) + 1)}</span>
                    </>
                    : label}
                </span>
            </div>
            {children && !disabled && (<ul className={`reactAppMenubar--menu--submenus`}>
                    <MenuContext.Provider value={getLongestHotkeyInChildren(children)}>
                        {children}
                    </MenuContext.Provider>
                </ul>
            )}
        </li>);

Menu.zip

Thanks for considering this option