@grafana/ui/dist/cjs/components/BrowserLabel/Label.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 Highlighter = require('react-highlight-words');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var PartialHighlighter = require('../Typeahead/PartialHighlighter.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var Highlighter__default = /*#__PURE__*/_interopDefaultCompat(Highlighter);

"use strict";
const Label = React.forwardRef(
  ({
    name,
    value,
    hidden,
    facets,
    onClick,
    className,
    loading,
    searchTerm,
    active,
    style,
    title,
    highlightParts,
    ...rest
  }, ref) => {
    const theme = ThemeContext.useTheme2();
    const styles = getLabelStyles(theme);
    const searchWords = searchTerm ? [searchTerm] : [];
    const onLabelClick = React.useCallback(
      (event) => {
        if (onClick && !hidden) {
          onClick(name, value, event);
        }
      },
      [onClick, name, hidden, value]
    );
    let text = value || name;
    if (facets) {
      text = `${text} (${facets})`;
    }
    return /* @__PURE__ */ jsxRuntime.jsx(
      "button",
      {
        ref,
        onClick: onLabelClick,
        style,
        title: title || text,
        type: "button",
        role: "option",
        "aria-selected": !!active,
        className: css.cx(
          styles.base,
          active && styles.active,
          loading && styles.loading,
          hidden && styles.hidden,
          className,
          onClick && !hidden && styles.hover
        ),
        ...rest,
        children: highlightParts !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(PartialHighlighter.PartialHighlighter, { text, highlightClassName: styles.matchHighLight, highlightParts }) : /* @__PURE__ */ jsxRuntime.jsx(
          Highlighter__default.default,
          {
            textToHighlight: text,
            searchWords,
            autoEscape: true,
            highlightClassName: styles.matchHighLight
          }
        )
      },
      text
    );
  }
);
Label.displayName = "Label";
const getLabelStyles = (theme) => ({
  base: css.css({
    display: "inline-block",
    cursor: "pointer",
    fontSize: theme.typography.size.sm,
    lineHeight: theme.typography.bodySmall.lineHeight,
    backgroundColor: theme.colors.background.secondary,
    color: theme.colors.text.primary,
    whiteSpace: "nowrap",
    textShadow: "none",
    padding: theme.spacing(0.5),
    borderRadius: theme.shape.radius.default,
    border: "none",
    marginRight: theme.spacing(1),
    marginBottom: theme.spacing(0.5)
  }),
  loading: css.css({
    fontWeight: theme.typography.fontWeightMedium,
    backgroundColor: theme.colors.primary.shade,
    color: theme.colors.text.primary,
    [theme.transitions.handleMotion("no-preference", "reduce")]: {
      animation: "pulse 3s ease-out 0s infinite normal forwards"
    },
    "@keyframes pulse": {
      "0%": {
        color: theme.colors.text.primary
      },
      "50%": {
        color: theme.colors.text.secondary
      },
      "100%": {
        color: theme.colors.text.disabled
      }
    }
  }),
  active: css.css({
    fontWeight: theme.typography.fontWeightMedium,
    backgroundColor: theme.colors.primary.main,
    color: theme.colors.primary.contrastText
  }),
  matchHighLight: css.css({
    background: "inherit",
    color: theme.components.textHighlight.text,
    backgroundColor: theme.components.textHighlight.background
  }),
  hidden: css.css({
    opacity: 0.6,
    cursor: "default",
    border: "1px solid transparent"
  }),
  hover: css.css({
    ["&:hover"]: {
      opacity: 0.85,
      cursor: "pointer"
    }
  })
});

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