@grafana/ui/dist/esm/components/BrowserLabel/Label.mjs.map

Grafana Components Library

{"version":3,"file":"Label.mjs","sources":["../../../../src/components/BrowserLabel/Label.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { forwardRef, HTMLAttributes, useCallback } from 'react';\nimport * as React from 'react';\nimport Highlighter from 'react-highlight-words';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { HighlightPart } from '../../types/completion';\nimport { PartialHighlighter } from '../Typeahead/PartialHighlighter';\n\ntype OnLabelClick = (name: string, value: string | undefined, event: React.MouseEvent<HTMLElement>) => void;\n\ninterface Props extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {\n  name: string;\n  active?: boolean;\n  loading?: boolean;\n  searchTerm?: string;\n  value?: string;\n  facets?: number;\n  title?: string;\n  highlightParts?: HighlightPart[];\n  onClick?: OnLabelClick;\n}\n\n/**\n * @internal\n */\nexport const Label = forwardRef<HTMLButtonElement, Props>(\n  (\n    {\n      name,\n      value,\n      hidden,\n      facets,\n      onClick,\n      className,\n      loading,\n      searchTerm,\n      active,\n      style,\n      title,\n      highlightParts,\n      ...rest\n    },\n    ref\n  ) => {\n    const theme = useTheme2();\n    const styles = getLabelStyles(theme);\n    const searchWords = searchTerm ? [searchTerm] : [];\n\n    const onLabelClick = useCallback(\n      (event: React.MouseEvent<HTMLElement>) => {\n        if (onClick && !hidden) {\n          onClick(name, value, event);\n        }\n      },\n      [onClick, name, hidden, value]\n    );\n\n    // Using this component for labels and label values. If value is given use value for display text.\n    let text = value || name;\n    if (facets) {\n      text = `${text} (${facets})`;\n    }\n\n    return (\n      <button\n        key={text}\n        ref={ref}\n        onClick={onLabelClick}\n        style={style}\n        title={title || text}\n        type=\"button\"\n        role=\"option\"\n        aria-selected={!!active}\n        className={cx(\n          styles.base,\n          active && styles.active,\n          loading && styles.loading,\n          hidden && styles.hidden,\n          className,\n          onClick && !hidden && styles.hover\n        )}\n        {...rest}\n      >\n        {highlightParts !== undefined ? (\n          <PartialHighlighter text={text} highlightClassName={styles.matchHighLight} highlightParts={highlightParts} />\n        ) : (\n          <Highlighter\n            textToHighlight={text}\n            searchWords={searchWords}\n            autoEscape\n            highlightClassName={styles.matchHighLight}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nLabel.displayName = 'Label';\n\nconst getLabelStyles = (theme: GrafanaTheme2) => ({\n  base: css({\n    display: 'inline-block',\n    cursor: 'pointer',\n    fontSize: theme.typography.size.sm,\n    lineHeight: theme.typography.bodySmall.lineHeight,\n    backgroundColor: theme.colors.background.secondary,\n    color: theme.colors.text.primary,\n    whiteSpace: 'nowrap',\n    textShadow: 'none',\n    padding: theme.spacing(0.5),\n    borderRadius: theme.shape.radius.default,\n    border: 'none',\n    marginRight: theme.spacing(1),\n    marginBottom: theme.spacing(0.5),\n  }),\n  loading: css({\n    fontWeight: theme.typography.fontWeightMedium,\n    backgroundColor: theme.colors.primary.shade,\n    color: theme.colors.text.primary,\n    [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n      animation: 'pulse 3s ease-out 0s infinite normal forwards',\n    },\n    '@keyframes pulse': {\n      '0%': {\n        color: theme.colors.text.primary,\n      },\n      '50%': {\n        color: theme.colors.text.secondary,\n      },\n      '100%': {\n        color: theme.colors.text.disabled,\n      },\n    },\n  }),\n  active: css({\n    fontWeight: theme.typography.fontWeightMedium,\n    backgroundColor: theme.colors.primary.main,\n    color: theme.colors.primary.contrastText,\n  }),\n  matchHighLight: css({\n    background: 'inherit',\n    color: theme.components.textHighlight.text,\n    backgroundColor: theme.components.textHighlight.background,\n  }),\n  hidden: css({\n    opacity: 0.6,\n    cursor: 'default',\n    border: '1px solid transparent',\n  }),\n  hover: css({\n    ['&:hover']: {\n      opacity: 0.85,\n      cursor: 'pointer',\n    },\n  }),\n});\n"],"names":[],"mappings":"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"}