@grafana/ui/dist/cjs/components/Menu/Menu.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Box = require('../Layout/Box/Box.cjs');
var MenuDivider = require('./MenuDivider.cjs');
var MenuGroup = require('./MenuGroup.cjs');
var MenuItem = require('./MenuItem.cjs');
var hooks = require('./hooks.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
const MenuComp = React__namespace.forwardRef(
  ({ header, children, ariaLabel, onOpen, onClose, onKeyDown, ...otherProps }, forwardedRef) => {
    const styles = ThemeContext.useStyles2(getStyles);
    const componentTokens = useComponentTokens();
    const localRef = React.useRef(null);
    React.useImperativeHandle(forwardedRef, () => localRef.current);
    const [handleKeys] = hooks.useMenuFocus({ isMenuOpen: true, localRef, onOpen, onClose, onKeyDown });
    return /* @__PURE__ */ jsxRuntime.jsxs(
      Box.Box,
      {
        ...otherProps,
        "aria-label": ariaLabel,
        backgroundColor: "elevated",
        borderRadius: componentTokens.borderRadius,
        boxShadow: "z3",
        display: "inline-block",
        onKeyDown: handleKeys,
        padding: componentTokens.padding,
        ref: localRef,
        role: "menu",
        tabIndex: -1,
        children: [
          header && /* @__PURE__ */ jsxRuntime.jsx(
            "div",
            {
              className: css.cx(
                styles.header,
                Boolean(children) && React__namespace.Children.toArray(children).length > 0 && styles.headerBorder
              ),
              children: header
            }
          ),
          children
        ]
      }
    );
  }
);
MenuComp.displayName = "Menu";
const Menu = Object.assign(MenuComp, {
  Item: MenuItem.MenuItem,
  Divider: MenuDivider.MenuDivider,
  Group: MenuGroup.MenuGroup
});
const useComponentTokens = () => ThemeContext.useStyles2((theme) => {
  const {
    components: { menu }
  } = theme;
  return {
    padding: menu.padding,
    borderRadius: menu.borderRadius
  };
});
const getStyles = (theme) => {
  return {
    header: css.css({
      padding: theme.spacing(0.5, 0.5, 1, 0.5)
    }),
    headerBorder: css.css({
      borderBottom: `1px solid ${theme.colors.border.weak}`,
      marginBottom: theme.spacing(0.5)
    })
  };
};

exports.Menu = Menu;
//# sourceMappingURL=Menu.cjs.map