@grafana/ui/dist/esm/components/FilterPill/FilterPill.mjs.map

Grafana Components Library

{"version":3,"file":"FilterPill.mjs","sources":["../../../../src/components/FilterPill/FilterPill.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes';\nimport { IconName } from '../../types';\nimport { clearButtonStyles } from '../Button';\nimport { Icon } from '../Icon/Icon';\n\nexport interface FilterPillProps {\n  selected: boolean;\n  label: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n  icon?: IconName;\n}\n\nexport const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterPillProps) => {\n  const styles = useStyles2(getStyles);\n  const clearButton = useStyles2(clearButtonStyles);\n  return (\n    <button type=\"button\" className={cx(clearButton, styles.wrapper, selected && styles.selected)} onClick={onClick}>\n      <span>{label}</span>\n      {selected && <Icon name={icon} className={styles.icon} />}\n    </button>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    wrapper: css({\n      background: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.pill,\n      padding: theme.spacing(0, 2),\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      lineHeight: theme.typography.bodySmall.lineHeight,\n      color: theme.colors.text.secondary,\n      display: 'flex',\n      alignItems: 'center',\n      height: '32px',\n      position: 'relative',\n      border: `1px solid ${theme.colors.background.secondary}`,\n      whiteSpace: 'nowrap',\n\n      '&:hover': {\n        background: theme.colors.action.hover,\n        color: theme.colors.text.primary,\n      },\n    }),\n    selected: css({\n      color: theme.colors.text.primary,\n      background: theme.colors.action.selected,\n\n      '&:hover': {\n        background: theme.colors.action.focus,\n      },\n    }),\n    icon: css({\n      marginLeft: theme.spacing(0.5),\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBa,MAAA,UAAA,GAAa,CAAC,EAAE,KAAA,EAAO,UAAU,OAAS,EAAA,IAAA,GAAO,SAA+B,KAAA;AAC3F,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,WAAW,iBAAiB,CAAA;AAChD,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA,EAAO,IAAK,EAAA,QAAA,EAAS,SAAW,EAAA,EAAA,CAAG,WAAa,EAAA,MAAA,CAAO,OAAS,EAAA,QAAA,IAAY,MAAO,CAAA,QAAQ,GAAG,OAC7F,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAM,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,IACZ,4BAAa,GAAA,CAAA,IAAA,EAAA,EAAK,MAAM,IAAM,EAAA,SAAA,EAAW,OAAO,IAAM,EAAA;AAAA,GACzD,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,SAAS,GAAI,CAAA;AAAA,MACX,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACpC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,IAAA;AAAA,MACjC,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,MAC7B,UAAA,EAAY,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,UAAA;AAAA,MACvC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,MAAQ,EAAA,MAAA;AAAA,MACR,QAAU,EAAA,UAAA;AAAA,MACV,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,WAAW,SAAS,CAAA,CAAA;AAAA,MACtD,UAAY,EAAA,QAAA;AAAA,MAEZ,SAAW,EAAA;AAAA,QACT,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,KAAA;AAAA,QAChC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,MACzB,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,QAAA;AAAA,MAEhC,SAAW,EAAA;AAAA,QACT,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA;AAAA;AAClC,KACD,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,KAC9B;AAAA,GACH;AACF,CAAA;;;;"}