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

Grafana Components Library

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { forwardRef } from 'react';
import { t } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { IconButton } from '../IconButton/IconButton.mjs';

"use strict";
const ValuePill = forwardRef(
  ({ children, onRemove, disabled, ...rest }, ref) => {
    const styles = useStyles2(getValuePillStyles, disabled);
    const removeButtonLabel = t("grafana-ui.value-pill.remove-button", "Remove {{children}}", { children });
    return /* @__PURE__ */ jsxs("span", { className: styles.wrapper, ...rest, ref, children: [
      /* @__PURE__ */ jsx("span", { className: styles.text, children }),
      !disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("span", { className: styles.separator }),
        /* @__PURE__ */ jsx(
          IconButton,
          {
            name: "times",
            size: "sm",
            "aria-label": removeButtonLabel,
            onMouseDown: (e) => {
              e.preventDefault();
            },
            onClick: (e) => {
              e.stopPropagation();
              onRemove();
            }
          }
        )
      ] })
    ] });
  }
);
ValuePill.displayName = "ValuePill";
const getValuePillStyles = (theme, disabled) => ({
  wrapper: css({
    display: "inline-flex",
    borderRadius: theme.shape.radius.sm,
    color: theme.colors.text.primary,
    background: theme.colors.background.secondary,
    // input padding is theme.spacing(0.5)
    // border is 1px
    height: `calc(${theme.spacing(theme.components.height.md)} - (2 * ${theme.spacing(0.5)}) - (2 * 1px))`,
    padding: theme.spacing(0.25),
    border: disabled ? `1px solid ${theme.colors.border.weak}` : "none",
    fontSize: theme.typography.bodySmall.fontSize,
    flexShrink: 1,
    minWidth: "50px",
    alignItems: "center"
  }),
  text: css({
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    padding: theme.spacing(0, 1, 0, 0.75)
  }),
  separator: css({
    background: theme.colors.border.weak,
    width: "1px",
    height: "100%",
    marginRight: theme.spacing(0.5)
  })
});

export { ValuePill };
//# sourceMappingURL=ValuePill.mjs.map