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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var Highlighter = require('react-highlight-words');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var completion = require('../../types/completion.cjs');
var PartialHighlighter = require('./PartialHighlighter.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var Highlighter__default = /*#__PURE__*/_interopDefaultCompat(Highlighter);

"use strict";
const getStyles = (theme) => ({
  typeaheadItem: css.css({
    border: "none",
    background: "none",
    textAlign: "left",
    label: "type-ahead-item",
    height: "auto",
    fontFamily: theme.typography.fontFamilyMonospace,
    padding: theme.spacing(1, 1, 1, 2),
    fontSize: theme.typography.bodySmall.fontSize,
    textOverflow: "ellipsis",
    overflow: "hidden",
    zIndex: 11,
    display: "block",
    whiteSpace: "nowrap",
    cursor: "pointer",
    [theme.transitions.handleMotion("no-preference", "reduce")]: {
      transition: "color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1)"
    }
  }),
  typeaheadItemSelected: css.css({
    label: "type-ahead-item-selected",
    backgroundColor: theme.colors.background.secondary
  }),
  typeaheadItemMatch: css.css({
    label: "type-ahead-item-match",
    color: theme.v1.palette.yellow,
    borderBottom: `1px solid ${theme.v1.palette.yellow}`,
    padding: "inherit",
    background: "inherit"
  }),
  typeaheadItemGroupTitle: css.css({
    label: "type-ahead-item-group-title",
    color: theme.colors.text.secondary,
    fontSize: theme.typography.bodySmall.fontSize,
    lineHeight: theme.typography.body.lineHeight,
    padding: theme.spacing(1)
  })
});
const TypeaheadItem = (props) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const { isSelected, item, prefix, style, onMouseEnter, onMouseLeave, onClickItem } = props;
  const className = isSelected ? css.cx([styles.typeaheadItem, styles.typeaheadItemSelected]) : css.cx([styles.typeaheadItem]);
  const highlightClassName = css.cx([styles.typeaheadItemMatch]);
  const itemGroupTitleClassName = css.cx([styles.typeaheadItemGroupTitle]);
  const label = item.label || "";
  if (item.kind === completion.CompletionItemKind.GroupTitle) {
    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: itemGroupTitleClassName, style, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }) });
  }
  return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
    "button",
    {
      role: "menuitem",
      className,
      style,
      onMouseDown: onClickItem,
      onMouseEnter,
      onMouseLeave,
      type: "button",
      children: item.highlightParts !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
        PartialHighlighter.PartialHighlighter,
        {
          text: label,
          highlightClassName,
          highlightParts: item.highlightParts
        }
      ) : /* @__PURE__ */ jsxRuntime.jsx(
        Highlighter__default.default,
        {
          textToHighlight: label,
          searchWords: [prefix != null ? prefix : ""],
          autoEscape: true,
          highlightClassName
        }
      )
    }
  ) });
};

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