@grafana/ui/dist/cjs/components/Typeahead/TypeaheadInfo.cjs

Grafana Components Library

'use strict';

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

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

"use strict";
const getStyles = (theme, height, visible) => {
  return {
    typeaheadItem: css.css({
      label: "type-ahead-item",
      zIndex: 11,
      padding: theme.spacing(1, 1, 1, 2),
      border: theme.colors.border.medium,
      overflowY: "scroll",
      overflowX: "hidden",
      outline: "none",
      background: theme.colors.background.secondary,
      color: theme.colors.text.secondary,
      boxShadow: `0 0 20px ${theme.v1.colors.dropdownShadow}`,
      visibility: visible === true ? "visible" : "hidden",
      width: "250px",
      minHeight: `${height + parseInt(theme.spacing(0.25), 10)}px`,
      position: "relative",
      wordBreak: "break-word"
    })
  };
};
const TypeaheadInfo = ({ item, height }) => {
  const visible = item && !!item.documentation;
  const label = item ? item.label : "";
  const documentation = data.renderMarkdown(item == null ? void 0 : item.documentation);
  const theme = ThemeContext.useTheme2();
  const styles = getStyles(theme, height, visible);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx([styles.typeaheadItem]), children: [
    /* @__PURE__ */ jsxRuntime.jsx("b", { children: label }),
    /* @__PURE__ */ jsxRuntime.jsx("hr", {}),
    /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: documentation } })
  ] });
};

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