@grafana/ui/dist/cjs/components/VizLegend/VizLegendListItem.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 e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var VizLegendSeriesIcon = require('./VizLegendSeriesIcon.cjs');
var VizLegendStatsList = require('./VizLegendStatsList.cjs');

"use strict";
const VizLegendListItem = ({
  item,
  onLabelClick,
  onLabelMouseOver,
  onLabelMouseOut,
  className,
  readonly,
  allItemsSelected
}) => {
  var _a;
  const styles = ThemeContext.useStyles2(getStyles);
  const onMouseOver = React.useCallback(
    (event) => {
      if (onLabelMouseOver) {
        onLabelMouseOver(item, event);
      }
    },
    [item, onLabelMouseOver]
  );
  const onMouseOut = React.useCallback(
    (event) => {
      if (onLabelMouseOut) {
        onLabelMouseOut(item, event);
      }
    },
    [item, onLabelMouseOut]
  );
  const onClick = React.useCallback(
    (event) => {
      if (onLabelClick) {
        onLabelClick(item, event);
      }
    },
    [item, onLabelClick]
  );
  const getAriaLabel = () => {
    if (allItemsSelected) {
      return i18n.t("grafana-ui.viz-legend.all-series-selected", "All series selected");
    }
    return i18n.t("grafana-ui.viz-legend.only-this-series-selected", "Only {{label}} selected", { label: item.label });
  };
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      className: css.cx(styles.itemWrapper, item.disabled && styles.itemDisabled, className),
      "data-testid": e2eSelectors.selectors.components.VizLegend.seriesName(item.label),
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          VizLegendSeriesIcon.VizLegendSeriesIcon,
          {
            seriesName: (_a = item.fieldName) != null ? _a : item.label,
            color: item.color,
            gradient: item.gradient,
            readonly,
            lineStyle: item.lineStyle
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          "button",
          {
            disabled: readonly,
            type: "button",
            "aria-label": getAriaLabel(),
            onBlur: onMouseOut,
            onFocus: onMouseOver,
            onMouseOver,
            onMouseOut,
            onClick,
            className: styles.label,
            children: item.label
          }
        ),
        item.getDisplayValues && /* @__PURE__ */ jsxRuntime.jsx(VizLegendStatsList.VizLegendStatsList, { stats: item.getDisplayValues() })
      ]
    }
  );
};
VizLegendListItem.displayName = "VizLegendListItem";
const getStyles = (theme) => ({
  label: css.css({
    label: "LegendLabel",
    whiteSpace: "nowrap",
    background: "none",
    border: "none",
    fontSize: "inherit",
    padding: 0,
    userSelect: "text"
  }),
  itemDisabled: css.css({
    label: "LegendLabelDisabled",
    color: theme.colors.text.disabled
  }),
  itemWrapper: css.css({
    label: "LegendItemWrapper",
    display: "flex",
    whiteSpace: "nowrap",
    alignItems: "center",
    gap: theme.spacing(1),
    flexGrow: 1
  }),
  value: css.css({
    textAlign: "right"
  }),
  yAxisLabel: css.css({
    color: theme.v1.palette.gray2
  })
});

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