@grafana/ui/dist/cjs/components/Combobox/ValuePill.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var IconButton = require('../IconButton/IconButton.cjs');

"use strict";
const ValuePill = React.forwardRef(
  ({ children, onRemove, disabled, ...rest }, ref) => {
    const styles = ThemeContext.useStyles2(getValuePillStyles, disabled);
    const removeButtonLabel = i18n.t("grafana-ui.value-pill.remove-button", "Remove {{children}}", { children });
    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.wrapper, ...rest, ref, children: [
      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.text, children }),
      !disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.separator }),
        /* @__PURE__ */ jsxRuntime.jsx(
          IconButton.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.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.css({
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    padding: theme.spacing(0, 1, 0, 0.75)
  }),
  separator: css.css({
    background: theme.colors.border.weak,
    width: "1px",
    height: "100%",
    marginRight: theme.spacing(0.5)
  })
});

exports.ValuePill = ValuePill;
//# sourceMappingURL=ValuePill.cjs.map