@grafana/ui/dist/cjs/components/PanelChrome/PanelDescription.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');
var Tooltip = require('../Tooltip/Tooltip.cjs');
var TitleItem = require('./TitleItem.cjs');

"use strict";
function PanelDescription({ description, className }) {
  const styles = ThemeContext.useStyles2(getStyles);
  const getDescriptionContent = () => {
    const panelDescription = typeof description === "function" ? description() : description;
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-info-content markdown-html", children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: panelDescription } }) });
  };
  return description !== "" ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { interactive: true, content: getDescriptionContent, children: /* @__PURE__ */ jsxRuntime.jsx(TitleItem.TitleItem, { className: css.cx(className, styles.description), children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "info-circle", size: "md" }) }) }) : null;
}
const getStyles = (theme) => {
  return {
    description: css.css({
      code: {
        whiteSpace: "normal",
        wordWrap: "break-word"
      },
      "pre > code": {
        display: "block"
      }
    })
  };
};

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