@grafana/ui/dist/esm/components/DataLinks/DataLinkSuggestions.mjs.map

Grafana Components Library

{"version":3,"file":"DataLinkSuggestions.mjs","sources":["../../../../src/components/DataLinks/DataLinkSuggestions.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { groupBy, capitalize } from 'lodash';\nimport { useRef, useMemo } from 'react';\nimport * as React from 'react';\nimport { useClickAway } from 'react-use';\n\nimport { VariableSuggestion, GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { List } from '../List/List';\n\ninterface DataLinkSuggestionsProps {\n  activeRef?: React.RefObject<HTMLDivElement>;\n  suggestions: VariableSuggestion[];\n  activeIndex: number;\n  onSuggestionSelect: (suggestion: VariableSuggestion) => void;\n  onClose?: () => void;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    list: css({\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n      '&:last-child': {\n        border: 'none',\n      },\n    }),\n    wrapper: css({\n      background: theme.colors.background.primary,\n      width: '250px',\n    }),\n    item: css({\n      background: 'none',\n      padding: '2px 8px',\n      userSelect: 'none',\n      color: theme.colors.text.primary,\n      cursor: 'pointer',\n      '&:hover': {\n        background: theme.colors.action.hover,\n      },\n    }),\n    label: css({\n      color: theme.colors.text.secondary,\n    }),\n    activeItem: css({\n      background: theme.colors.background.secondary,\n      '&:hover': {\n        background: theme.colors.background.secondary,\n      },\n    }),\n    itemValue: css({\n      fontFamily: theme.typography.fontFamilyMonospace,\n      fontSize: theme.typography.size.sm,\n    }),\n  };\n};\n\nexport const DataLinkSuggestions = ({ suggestions, ...otherProps }: DataLinkSuggestionsProps) => {\n  const ref = useRef(null);\n\n  useClickAway(ref, () => {\n    if (otherProps.onClose) {\n      otherProps.onClose();\n    }\n  });\n\n  const groupedSuggestions = useMemo(() => {\n    return groupBy(suggestions, (s) => s.origin);\n  }, [suggestions]);\n\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div role=\"menu\" ref={ref} className={styles.wrapper}>\n      {Object.keys(groupedSuggestions).map((key, i) => {\n        const indexOffset =\n          i === 0\n            ? 0\n            : Object.keys(groupedSuggestions).reduce((acc, current, index) => {\n                if (index >= i) {\n                  return acc;\n                }\n                return acc + groupedSuggestions[current].length;\n              }, 0);\n\n        return (\n          <DataLinkSuggestionsList\n            {...otherProps}\n            suggestions={groupedSuggestions[key]}\n            label={capitalize(key)}\n            activeIndex={otherProps.activeIndex}\n            activeIndexOffset={indexOffset}\n            key={key}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nDataLinkSuggestions.displayName = 'DataLinkSuggestions';\n\ninterface DataLinkSuggestionsListProps extends DataLinkSuggestionsProps {\n  label: string;\n  activeIndexOffset: number;\n  activeRef?: React.RefObject<HTMLDivElement>;\n}\n\nconst DataLinkSuggestionsList = React.memo(\n  ({\n    activeIndex,\n    activeIndexOffset,\n    label,\n    onClose,\n    onSuggestionSelect,\n    suggestions,\n    activeRef: selectedRef,\n  }: DataLinkSuggestionsListProps) => {\n    const styles = useStyles2(getStyles);\n\n    return (\n      <>\n        <List\n          className={styles.list}\n          items={suggestions}\n          renderItem={(item, index) => {\n            const isActive = index + activeIndexOffset === activeIndex;\n            return (\n              // key events are handled by DataLinkInput\n              // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n              <div\n                role=\"menuitem\"\n                tabIndex={0}\n                className={cx(styles.item, isActive && styles.activeItem)}\n                ref={isActive ? selectedRef : undefined}\n                onClick={() => {\n                  onSuggestionSelect(item);\n                }}\n                title={item.documentation}\n              >\n                <span className={styles.itemValue}>\n                  <span className={styles.label}>{label}</span> {item.label}\n                </span>\n              </div>\n            );\n          }}\n        />\n      </>\n    );\n  }\n);\n\nDataLinkSuggestionsList.displayName = 'DataLinkSuggestionsList';\n"],"names":[],"mappings":"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"}