@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":";;;;;;;AA4BO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,CACE;AAAA,IACE,IAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,IAAM,MAAA,MAAA,GAAS,eAAe,KAAK,CAAA;AACnC,IAAA,MAAM,WAAc,GAAA,UAAA,GAAa,CAAC,UAAU,IAAI,EAAC;AAEjD,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,KAAyC,KAAA;AACxC,QAAI,IAAA,OAAA,IAAW,CAAC,MAAQ,EAAA;AACtB,UAAQ,OAAA,CAAA,IAAA,EAAM,OAAO,KAAK,CAAA;AAAA;AAC5B,OACF;AAAA,MACA,CAAC,OAAA,EAAS,IAAM,EAAA,MAAA,EAAQ,KAAK;AAAA,KAC/B;AAGA,IAAA,IAAI,OAAO,KAAS,IAAA,IAAA;AACpB,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,IAAA,GAAA,CAAA,EAAG,IAAI,CAAA,EAAA,EAAK,MAAM,CAAA,CAAA,CAAA;AAAA;AAG3B,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,GAAA;AAAA,QACA,OAAS,EAAA,YAAA;AAAA,QACT,KAAA;AAAA,QACA,OAAO,KAAS,IAAA,IAAA;AAAA,QAChB,IAAK,EAAA,QAAA;AAAA,QACL,IAAK,EAAA,QAAA;AAAA,QACL,eAAA,EAAe,CAAC,CAAC,MAAA;AAAA,QACjB,SAAW,EAAA,EAAA;AAAA,UACT,MAAO,CAAA,IAAA;AAAA,UACP,UAAU,MAAO,CAAA,MAAA;AAAA,UACjB,WAAW,MAAO,CAAA,OAAA;AAAA,UAClB,UAAU,MAAO,CAAA,MAAA;AAAA,UACjB,SAAA;AAAA,UACA,OAAA,IAAW,CAAC,MAAA,IAAU,MAAO,CAAA;AAAA,SAC/B;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,cAAA,KAAmB,yBACjB,GAAA,CAAA,kBAAA,EAAA,EAAmB,MAAY,kBAAoB,EAAA,MAAA,CAAO,cAAgB,EAAA,cAAA,EAAgC,CAE3G,mBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,eAAiB,EAAA,IAAA;AAAA,YACjB,WAAA;AAAA,YACA,UAAU,EAAA,IAAA;AAAA,YACV,oBAAoB,MAAO,CAAA;AAAA;AAAA;AAC7B,OAAA;AAAA,MA1BG;AAAA,KA4BP;AAAA;AAGN;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA;AAEpB,MAAM,cAAA,GAAiB,CAAC,KAA0B,MAAA;AAAA,EAChD,MAAM,GAAI,CAAA;AAAA,IACR,OAAS,EAAA,cAAA;AAAA,IACT,MAAQ,EAAA,SAAA;AAAA,IACR,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,IAAK,CAAA,EAAA;AAAA,IAChC,UAAA,EAAY,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,UAAA;AAAA,IACvC,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,IACzC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,IACzB,UAAY,EAAA,QAAA;AAAA,IACZ,UAAY,EAAA,MAAA;AAAA,IACZ,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC1B,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,IACjC,MAAQ,EAAA,MAAA;AAAA,IACR,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC5B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,GAChC,CAAA;AAAA,EACD,SAAS,GAAI,CAAA;AAAA,IACX,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,IAC7B,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,OAAQ,CAAA,KAAA;AAAA,IACtC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,IACzB,CAAC,KAAM,CAAA,WAAA,CAAY,aAAa,eAAiB,EAAA,QAAQ,CAAC,GAAG;AAAA,MAC3D,SAAW,EAAA;AAAA,KACb;AAAA,IACA,kBAAoB,EAAA;AAAA,MAClB,IAAM,EAAA;AAAA,QACJ,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA,OAC3B;AAAA,MACA,KAAO,EAAA;AAAA,QACL,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA,OAC3B;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B;AACF,GACD,CAAA;AAAA,EACD,QAAQ,GAAI,CAAA;AAAA,IACV,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,IAC7B,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,OAAQ,CAAA,IAAA;AAAA,IACtC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,OAAQ,CAAA;AAAA,GAC7B,CAAA;AAAA,EACD,gBAAgB,GAAI,CAAA;AAAA,IAClB,UAAY,EAAA,SAAA;AAAA,IACZ,KAAA,EAAO,KAAM,CAAA,UAAA,CAAW,aAAc,CAAA,IAAA;AAAA,IACtC,eAAA,EAAiB,KAAM,CAAA,UAAA,CAAW,aAAc,CAAA;AAAA,GACjD,CAAA;AAAA,EACD,QAAQ,GAAI,CAAA;AAAA,IACV,OAAS,EAAA,GAAA;AAAA,IACT,MAAQ,EAAA,SAAA;AAAA,IACR,MAAQ,EAAA;AAAA,GACT,CAAA;AAAA,EACD,OAAO,GAAI,CAAA;AAAA,IACT,CAAC,SAAS,GAAG;AAAA,MACX,OAAS,EAAA,IAAA;AAAA,MACT,MAAQ,EAAA;AAAA;AACV,GACD;AACH,CAAA,CAAA;;;;"}