@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 { type 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=\"sm\"\n              aria-label={removeButtonLabel}\n              onMouseDown={(e) => {\n                e.preventDefault();\n              }}\n              onClick={(e) => {\n                e.stopPropagation();\n                onRemove();\n              }}\n            />\n          </>\n        )}\n      </span>\n    );\n  }\n);\nValuePill.displayName = 'ValuePill';\n\nconst getValuePillStyles = (theme: GrafanaTheme2, disabled?: boolean) => ({\n  wrapper: css({\n    display: 'inline-flex',\n    borderRadius: theme.shape.radius.sm,\n    color: theme.colors.text.primary,\n    background: theme.colors.background.secondary,\n    // input padding is theme.spacing(0.5)\n    // border is 1px\n    height: `calc(${theme.spacing(theme.components.height.md)} - (2 * ${theme.spacing(0.5)}) - (2 * 1px))`,\n    padding: theme.spacing(0.25),\n    border: disabled ? `1px solid ${theme.colors.border.weak}` : 'none',\n    fontSize: theme.typography.bodySmall.fontSize,\n    flexShrink: 1,\n    minWidth: '50px',\n    alignItems: 'center',\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: '1px',\n    height: '100%',\n    marginRight: theme.spacing(0.5),\n  }),\n});\n"],"names":[],"mappings":";;;;;;;;AAeO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,EAAE,QAAA,EAAU,QAAA,EAAU,UAAU,GAAG,IAAA,IAAQ,GAAA,KAAQ;AAClD,IAAA,MAAM,MAAA,GAAS,UAAA,CAAW,kBAAA,EAAoB,QAAQ,CAAA;AACtD,IAAA,MAAM,oBAAoB,CAAA,CAAE,qCAAA,EAAuC,qBAAA,EAAuB,EAAE,UAAU,CAAA;AACtG,IAAA,4BACG,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,OAAA,EAAU,GAAG,MAAM,GAAA,EACzC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,IAAA,EAAO,QAAA,EAAS,CAAA;AAAA,MACvC,CAAC,4BACA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,CAAA;AAAA,wBACnC,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,OAAA;AAAA,YACL,IAAA,EAAK,IAAA;AAAA,YACL,YAAA,EAAY,iBAAA;AAAA,YACZ,WAAA,EAAa,CAAC,CAAA,KAAM;AAClB,cAAA,CAAA,CAAE,cAAA,EAAe;AAAA,YACnB,CAAA;AAAA,YACA,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,cAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,cAAA,QAAA,EAAS;AAAA,YACX;AAAA;AAAA;AACF,OAAA,EACF;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AACA,SAAA,CAAU,WAAA,GAAc,WAAA;AAExB,MAAM,kBAAA,GAAqB,CAAC,KAAA,EAAsB,QAAA,MAAwB;AAAA,EACxE,SAAS,GAAA,CAAI;AAAA,IACX,OAAA,EAAS,aAAA;AAAA,IACT,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,EAAA;AAAA,IACjC,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,IACzB,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA;AAAA;AAAA,IAGpC,MAAA,EAAQ,CAAA,KAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,UAAA,CAAW,MAAA,CAAO,EAAE,CAAC,CAAA,QAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAC,CAAA,cAAA,CAAA;AAAA,IACtF,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,IAC3B,QAAQ,QAAA,GAAW,CAAA,UAAA,EAAa,MAAM,MAAA,CAAO,MAAA,CAAO,IAAI,CAAA,CAAA,GAAK,MAAA;AAAA,IAC7D,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,QAAA;AAAA,IACrC,UAAA,EAAY,CAAA;AAAA,IACZ,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EAED,MAAM,GAAA,CAAI;AAAA,IACR,UAAA,EAAY,QAAA;AAAA,IACZ,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,UAAA;AAAA,IACd,SAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAA,EAAG,GAAG,IAAI;AAAA,GACrC,CAAA;AAAA,EAED,WAAW,GAAA,CAAI;AAAA,IACb,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,IAAA;AAAA,IAChC,KAAA,EAAO,KAAA;AAAA,IACP,MAAA,EAAQ,MAAA;AAAA,IACR,WAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,GAC/B;AACH,CAAA,CAAA;;;;"}