@react-md/menu/lib/Menu.js

Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Menu = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var list_1 = require("@react-md/list");
var portal_1 = require("@react-md/portal");
var transition_1 = require("@react-md/transition");
var MenuKeyboardFocusProvider_1 = require("./MenuKeyboardFocusProvider");
var MenuWidget_1 = require("./MenuWidget");
/**
 * This component conditionally renders the {@link MenuWidget} with the
 * {@link MenuKeyboardFocusProvider} based on the `visible` prop with a CSS
 * transition that can be configured.
 *
 * @remarks \@since 5.0.0
 */
exports.Menu = (0, react_1.forwardRef)(function Menu(_a, ref) {
    var className = _a.className, listStyle = _a.listStyle, listClassName = _a.listClassName, listProps = _a.listProps, visible = _a.visible, _b = _a.temporary, temporary = _b === void 0 ? true : _b, _c = _a.horizontal, horizontal = _c === void 0 ? false : _c, _d = _a.portal, portal = _d === void 0 ? temporary : _d, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, appear = _a.appear, enter = _a.enter, exit = _a.exit, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, timeout = _a.timeout, classNames = _a.classNames, children = _a.children, props = __rest(_a, ["className", "listStyle", "listClassName", "listProps", "visible", "temporary", "horizontal", "portal", "portalInto", "portalIntoId", "appear", "enter", "exit", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "timeout", "classNames", "children"]);
    var _e = (0, transition_1.useScaleTransition)({
        nodeRef: ref,
        className: className,
        transitionIn: visible,
        vertical: !horizontal,
        temporary: temporary,
        timeout: timeout,
        classNames: classNames,
        appear: appear,
        enter: enter,
        exit: exit,
        onEnter: onEnter,
        onEntering: onEntering,
        onEntered: onEntered,
        onExit: onExit,
        onExiting: onExiting,
        onExited: onExited,
    }), elementProps = _e.elementProps, rendered = _e.rendered, stage = _e.stage;
    return ((0, jsx_runtime_1.jsx)(portal_1.ConditionalPortal, __assign({ portal: portal, portalInto: portalInto, portalIntoId: portalIntoId }, { children: rendered && ((0, jsx_runtime_1.jsx)(MenuKeyboardFocusProvider_1.MenuKeyboardFocusProvider, __assign({ horizontal: horizontal }, { children: (0, jsx_runtime_1.jsx)(MenuWidget_1.MenuWidget, __assign({ hidden: !temporary && stage === "exited" }, props, elementProps, { horizontal: horizontal }, { children: (0, jsx_runtime_1.jsx)(list_1.List, __assign({}, listProps, { style: listStyle !== null && listStyle !== void 0 ? listStyle : listProps === null || listProps === void 0 ? void 0 : listProps.style, className: listClassName !== null && listClassName !== void 0 ? listClassName : listProps === null || listProps === void 0 ? void 0 : listProps.className, horizontal: horizontal, onClick: function (event) {
                        var _a;
                        (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onClick) === null || _a === void 0 ? void 0 : _a.call(listProps, event);
                        // this makes it so you can click on the menu/list without
                        // closing the menu
                        if (event.target === event.currentTarget) {
                            event.stopPropagation();
                        }
                    } }, { children: children })) })) }))) })));
});
//# sourceMappingURL=Menu.js.map