@catho/quantum/Menu/Menu.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
var _styles = require("@mui/material/styles");
var _theme = require("../shared/theme");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
// Generated with scripts/create-component.js

var materialThemeOverride = (0, _styles.createTheme)({
  typography: {
    fontFamily: "\"Nunito Sans\", sans-serif",
    fontSize: _theme.baseFontSize,
    allVariants: {
      color: _theme.colors.neutral[700]
    }
  },
  palette: {
    text: {
      primary: _theme.colors.neutral[700]
    }
  }
});
var Menu = function Menu(_ref) {
  var _ref$open = _ref.open,
    open = _ref$open === void 0 ? false : _ref$open,
    _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items,
    _ref$anchorEl = _ref.anchorEl,
    anchorEl = _ref$anchorEl === void 0 ? null : _ref$anchorEl,
    _ref$anchorOrigin = _ref.anchorOrigin,
    anchorOrigin = _ref$anchorOrigin === void 0 ? {
      vertical: 'bottom',
      horizontal: 'left'
    } : _ref$anchorOrigin,
    _ref$transformOrigin = _ref.transformOrigin,
    transformOrigin = _ref$transformOrigin === void 0 ? {
      vertical: 'top',
      horizontal: 'left'
    } : _ref$transformOrigin,
    _ref$keepMounted = _ref.keepMounted,
    keepMounted = _ref$keepMounted === void 0 ? false : _ref$keepMounted,
    _ref$onClose = _ref.onClose,
    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu["default"], {
    id: "menu",
    "data-testid": "menu",
    theme: materialThemeOverride,
    "aria-labelledby": "button",
    anchorReference: "anchorEl",
    anchorEl: anchorEl,
    open: open,
    onClose: onClose,
    onBlur: onClose,
    anchorOrigin: anchorOrigin,
    transformOrigin: transformOrigin,
    keepMounted: keepMounted,
    children: items.map(function (item) {
      var onClickFunc = function onClickFunc() {
        var onClick = item.onClick;
        onClose();
        onClick();
      };
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem["default"], {
        onClick: onClickFunc,
        theme: materialThemeOverride,
        color: "textPrimary",
        children: item.content
      }, item.id);
    })
  });
};
Menu.propTypes = {
  /** If true, the component is shown. */
  open: _propTypes["default"].bool,
  /** Menu contents, has a content parameter, an id and a handleClick function. */
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
    content: _propTypes["default"].node.isRequired,
    onClick: _propTypes["default"].func
  })),
  /**	An HTML element, or a function that returns one. It's used to set the position of the menu. */
  anchorEl: _propTypes["default"].object,
  /** The point on the anchor where the popover's anchorEl will attach to.
   * - vertical: "top", "bottom", "center"
   * - horizontal: "left", "center", "right"
   * */
  anchorOrigin: _propTypes["default"].object,
  /** The point on the popover which will attach to the anchor's origin.
   * - vertical: "top", "bottom", "center"
   * - horizontal: "left", "center", "right"
   * */
  transformOrigin: _propTypes["default"].object,
  /** Always keep the children in the DOM. */
  keepMounted: _propTypes["default"].bool,
  /** Callback fired when the component requests to be closed. */
  onClose: _propTypes["default"].func
};
var _default = exports["default"] = Menu;