@grafana/ui/dist/cjs/components/DataLinks/DataLinkSuggestions.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var css = require('@emotion/css');
var lodash = require('lodash');
var reactUse = require('react-use');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var List = require('../List/List.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 getStyles = (theme) => {
  return {
    list: css.css({
      borderBottom: `1px solid ${theme.colors.border.weak}`,
      "&:last-child": {
        border: "none"
      }
    }),
    wrapper: css.css({
      background: theme.colors.background.primary,
      width: "250px"
    }),
    item: css.css({
      background: "none",
      padding: "2px 8px",
      userSelect: "none",
      color: theme.colors.text.primary,
      cursor: "pointer",
      "&:hover": {
        background: theme.colors.action.hover
      }
    }),
    label: css.css({
      color: theme.colors.text.secondary
    }),
    activeItem: css.css({
      background: theme.colors.background.secondary,
      "&:hover": {
        background: theme.colors.background.secondary
      }
    }),
    itemValue: css.css({
      fontFamily: theme.typography.fontFamilyMonospace,
      fontSize: theme.typography.size.sm
    })
  };
};
const DataLinkSuggestions = ({ suggestions, ...otherProps }) => {
  const ref = React.useRef(null);
  reactUse.useClickAway(ref, () => {
    if (otherProps.onClose) {
      otherProps.onClose();
    }
  });
  const groupedSuggestions = React.useMemo(() => {
    return lodash.groupBy(suggestions, (s) => s.origin);
  }, [suggestions]);
  const styles = ThemeContext.useStyles2(getStyles);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "menu", ref, className: styles.wrapper, children: Object.keys(groupedSuggestions).map((key, i) => {
    const indexOffset = i === 0 ? 0 : Object.keys(groupedSuggestions).reduce((acc, current, index) => {
      if (index >= i) {
        return acc;
      }
      return acc + groupedSuggestions[current].length;
    }, 0);
    return /* @__PURE__ */ React.createElement(
      DataLinkSuggestionsList,
      {
        ...otherProps,
        suggestions: groupedSuggestions[key],
        label: lodash.capitalize(key),
        activeIndex: otherProps.activeIndex,
        activeIndexOffset: indexOffset,
        key
      }
    );
  }) });
};
DataLinkSuggestions.displayName = "DataLinkSuggestions";
const DataLinkSuggestionsList = React__namespace.memo(
  ({
    activeIndex,
    activeIndexOffset,
    label,
    onClose,
    onSuggestionSelect,
    suggestions,
    activeRef: selectedRef
  }) => {
    const styles = ThemeContext.useStyles2(getStyles);
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
      List.List,
      {
        className: styles.list,
        items: suggestions,
        renderItem: (item, index) => {
          const isActive = index + activeIndexOffset === activeIndex;
          return (
            // key events are handled by DataLinkInput
            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
            /* @__PURE__ */ jsxRuntime.jsx(
              "div",
              {
                role: "menuitem",
                tabIndex: 0,
                className: css.cx(styles.item, isActive && styles.activeItem),
                ref: isActive ? selectedRef : void 0,
                onClick: () => {
                  onSuggestionSelect(item);
                },
                title: item.documentation,
                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.itemValue, children: [
                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: label }),
                  " ",
                  item.label
                ] })
              }
            )
          );
        }
      }
    ) });
  }
);
DataLinkSuggestionsList.displayName = "DataLinkSuggestionsList";

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