mui-nav-menu/lib/cjs/MenuRoot.js

Navigation menu component based on material ui

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const MenuContext_1 = require("./contexts/MenuContext");
const useKeyboardNavigation_1 = tslib_1.__importDefault(require("./hooks/useKeyboardNavigation"));
const mui_1 = require("tss-react/mui");
const material_1 = require("@mui/material");
const useStyle = (0, mui_1.makeStyles)()((theme) => ({
    horizontalMode: {
        display: "flex",
    },
    root: {
        outline: "none", //Remove the outline effect of the root element
    },
}));
const MenuRoot = ({ className, children, ...rest }) => {
    const { collapsed, mode, setFocusedNodeId, focusedNodeId, getChildrenIds, prefixCls, } = (0, MenuContext_1.useMenuContext)();
    const { handleKeyDown } = (0, useKeyboardNavigation_1.default)();
    const pressedRef = (0, react_1.useRef)(false);
    const { classes } = useStyle();
    const handleFocus = (event) => {
        if (!focusedNodeId) {
            if (event.target === event.currentTarget && !pressedRef.current) {
                const rooNodeIds = getChildrenIds(null);
                if (rooNodeIds && rooNodeIds.length > 0) {
                    setFocusedNodeId(rooNodeIds[0]);
                }
            }
        }
    };
    const handleBlur = () => {
        setFocusedNodeId(null);
    };
    const handleMouseDown = () => {
        pressedRef.current = true;
    };
    const handleMouseUp = () => {
        pressedRef.current = false;
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, classes.root), onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onFocus: handleFocus, onBlur: handleBlur, tabIndex: 0, children: (0, jsx_runtime_1.jsx)(material_1.List, { className: (0, classnames_1.default)(prefixCls + "List-root", {
                [classes.horizontalMode]: mode == "horizontal",
            }), disablePadding: true, children: children }) }));
};
exports.default = MenuRoot;