@ozen-ui/kit/__inner__/esm/components/Menu/Menu.js

React component library

import { __assign, __rest } from "tslib";
import './Menu.css';
import React, { forwardRef } from 'react';
import { useDeprecatedProperty } from '../../hooks/useDeprecated';
import { useThemeProps } from '../../hooks/useThemeProps';
import { generateCSSVariables, isNumber, isString } from '../../utils';
import { cn } from '../../utils/classname';
import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement';
import { Paper } from '../Paper';
import { Popover } from '../Popover';
import { MenuContextConsumer } from './components';
import { MENU_CSS_VARIABLES, MENU_DEFAULT_COLOR, MENU_DEFAULT_SIZE, MENU_DEFAULT_MAX_HEIGHT, } from './constants';
export var cnMenu = cn('Menu');
export var Menu = forwardRef(function (inProps, ref) {
    var _a;
    var props = useThemeProps({ props: inProps, name: 'Menu' });
    var _b = props.size, size = _b === void 0 ? MENU_DEFAULT_SIZE : _b, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, _c = props.color, color = _c === void 0 ? MENU_DEFAULT_COLOR : _c, _d = props.maxHeight, maxHeightProp = _d === void 0 ? MENU_DEFAULT_MAX_HEIGHT : _d, other = __rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className", "color", "maxHeight"]);
    var radius = getPaperSizeToFormElement(size);
    useDeprecatedProperty(!!menuListRef, 'menuListRef', 'menuListProps.ref');
    var maxHeight = (function () {
        if (isString(maxHeightProp)) {
            return maxHeightProp;
        }
        if (isNumber(maxHeightProp)) {
            return "".concat(maxHeightProp, "px");
        }
        if (maxHeightProp) {
            return MENU_DEFAULT_MAX_HEIGHT;
        }
        return 'initial';
    })();
    return (React.createElement(Popover, __assign({ as: Paper, offset: [0, 4], radius: radius }, other, { style: __assign(__assign({}, other.style), generateCSSVariables((_a = {},
            _a[MENU_CSS_VARIABLES.MAX_HEIGHT] = maxHeight,
            _a))), open: open, onClose: onClose, className: cnMenu({ color: color }, [className]), disableEnforceFocus: true, ref: ref }),
        React.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: __assign(__assign({ size: size, color: color }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
});
Menu.displayName = 'Menu';