@grafana/ui/dist/cjs/components/Menu/MenuGroup.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');

"use strict";
const MenuGroup = ({ label, ariaLabel, children }) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const generatedId = React.useId();
  const labelID = `group-label-${generatedId}`;
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": !ariaLabel && label ? labelID : void 0, "aria-label": ariaLabel, children: [
    label && /* @__PURE__ */ jsxRuntime.jsx("label", { id: labelID, className: styles.groupLabel, "aria-hidden": true, children: label }),
    children
  ] });
};
MenuGroup.displayName = "MenuGroup";
const getStyles = (theme) => {
  return {
    groupLabel: css.css({
      color: theme.colors.text.secondary,
      fontSize: theme.typography.size.sm,
      padding: theme.spacing(0.5, 1)
    })
  };
};

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