@grafana/ui/dist/esm/components/Combobox/ValuePill.mjs.map

Grafana Components Library

{"version":3,"file":"ValuePill.mjs","sources":["../../../../src/components/Combobox/ValuePill.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { forwardRef } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconButton } from '../IconButton/IconButton';\n\ninterface ValuePillProps {\n  children: string;\n  onRemove: () => void;\n  disabled?: boolean;\n}\n\nexport const ValuePill = forwardRef<HTMLSpanElement, ValuePillProps>(\n  ({ children, onRemove, disabled, ...rest }, ref) => {\n    const styles = useStyles2(getValuePillStyles, disabled);\n    const removeButtonLabel = t('grafana-ui.value-pill.remove-button', 'Remove {{children}}', { children });\n    return (\n      <span className={styles.wrapper} {...rest} ref={ref}>\n        <span className={styles.text}>{children}</span>\n        {!disabled && (\n          <>\n            <span className={styles.separator} />\n            <IconButton\n              name=\"times\"\n              size=\"md\"\n              aria-label={removeButtonLabel}\n              onClick={(e) => {\n                e.stopPropagation();\n                onRemove();\n              }}\n            />\n          </>\n        )}\n      </span>\n    );\n  }\n);\n\nconst getValuePillStyles = (theme: GrafanaTheme2, disabled?: boolean) => ({\n  wrapper: css({\n    display: 'inline-flex',\n    borderRadius: theme.shape.radius.default,\n    color: theme.colors.text.primary,\n    background: theme.colors.background.secondary,\n    padding: theme.spacing(0.25),\n    border: disabled ? `1px solid ${theme.colors.border.weak}` : 'none',\n    fontSize: theme.typography.bodySmall.fontSize,\n    flexShrink: 0,\n    minWidth: '50px',\n    alignItems: 'center',\n\n    '&:first-child:has(+ div)': {\n      flexShrink: 1,\n    },\n  }),\n\n  text: css({\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    padding: theme.spacing(0, 1, 0, 0.75),\n  }),\n\n  separator: css({\n    background: theme.colors.border.weak,\n    width: '2px',\n    height: '100%',\n    marginRight: theme.spacing(0.5),\n  }),\n});\n"],"names":[],"mappings":";;;;;;;AAeO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,QAAU,EAAA,QAAA,EAAU,UAAU,GAAG,IAAA,IAAQ,GAAQ,KAAA;AAClD,IAAM,MAAA,MAAA,GAAS,UAAW,CAAA,kBAAA,EAAoB,QAAQ,CAAA;AACtD,IAAA,MAAM,oBAAoB,CAAE,CAAA,qCAAA,EAAuC,qBAAuB,EAAA,EAAE,UAAU,CAAA;AACtG,IAAA,4BACG,MAAK,EAAA,EAAA,SAAA,EAAW,OAAO,OAAU,EAAA,GAAG,MAAM,GACzC,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAO,QAAS,EAAA,CAAA;AAAA,MACvC,CAAC,4BAEE,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA,CAAA;AAAA,wBACnC,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,OAAA;AAAA,YACL,IAAK,EAAA,IAAA;AAAA,YACL,YAAY,EAAA,iBAAA;AAAA,YACZ,OAAA,EAAS,CAAC,CAAM,KAAA;AACd,cAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,cAAS,QAAA,EAAA;AAAA;AACX;AAAA;AACF,OACF,EAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;AAEA,MAAM,kBAAA,GAAqB,CAAC,KAAA,EAAsB,QAAwB,MAAA;AAAA,EACxE,SAAS,GAAI,CAAA;AAAA,IACX,OAAS,EAAA,aAAA;AAAA,IACT,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,IACjC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,IACzB,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,IACpC,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,IAC3B,QAAQ,QAAW,GAAA,CAAA,UAAA,EAAa,MAAM,MAAO,CAAA,MAAA,CAAO,IAAI,CAAK,CAAA,GAAA,MAAA;AAAA,IAC7D,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,IACrC,UAAY,EAAA,CAAA;AAAA,IACZ,QAAU,EAAA,MAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IAEZ,0BAA4B,EAAA;AAAA,MAC1B,UAAY,EAAA;AAAA;AACd,GACD,CAAA;AAAA,EAED,MAAM,GAAI,CAAA;AAAA,IACR,UAAY,EAAA,QAAA;AAAA,IACZ,QAAU,EAAA,QAAA;AAAA,IACV,YAAc,EAAA,UAAA;AAAA,IACd,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,IAAI;AAAA,GACrC,CAAA;AAAA,EAED,WAAW,GAAI,CAAA;AAAA,IACb,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,IAAA;AAAA,IAChC,KAAO,EAAA,KAAA;AAAA,IACP,MAAQ,EAAA,MAAA;AAAA,IACR,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,GAC/B;AACH,CAAA,CAAA;;;;"}