@grafana/ui/dist/cjs/components/ColorPicker/ColorSwatch.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var focus = require('@react-aria/focus');
var React = require('react');
var tinycolor = require('tinycolor2');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');

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

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
var tinycolor__default = /*#__PURE__*/_interopDefaultCompat(tinycolor);

"use strict";
var ColorSwatchVariant = /* @__PURE__ */ ((ColorSwatchVariant2) => {
  ColorSwatchVariant2["Small"] = "small";
  ColorSwatchVariant2["Large"] = "large";
  return ColorSwatchVariant2;
})(ColorSwatchVariant || {});
const ColorSwatch = React__namespace.forwardRef(
  ({
    color,
    label,
    variant = "small" /* Small */,
    isSelected,
    "aria-label": ariaLabel,
    "aria-describedby": ariaDescribedBy,
    id,
    ...otherProps
  }, ref) => {
    const theme = ThemeContext.useTheme2();
    const { isFocusVisible, focusProps } = focus.useFocusRing();
    const styles = getStyles(theme, variant, color, isFocusVisible, isSelected);
    const hasLabel = !!label;
    const colorLabel = ariaLabel || label;
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: styles.wrapper, "data-testid": e2eSelectors.selectors.components.ColorSwatch.name, ...otherProps, children: [
      hasLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: label }),
      /* @__PURE__ */ jsxRuntime.jsx(
        "button",
        {
          id,
          className: styles.swatch,
          ...focusProps,
          "aria-label": colorLabel ? i18n.t("grafana-ui.color-swatch.aria-label-selected-color", "{{colorLabel}} color", { colorLabel }) : i18n.t("grafana-ui.color-swatch.aria-label-default", "Pick a color"),
          "aria-describedby": ariaDescribedBy,
          type: "button"
        }
      )
    ] });
  }
);
const getStyles = (theme, variant, color, isFocusVisible, isSelected) => {
  const tc = tinycolor__default.default(color);
  const isSmall = variant === "small" /* Small */;
  const swatchSize = isSmall ? "16px" : "32px";
  let border = "none";
  if (tc.getAlpha() < 0.1) {
    border = `2px solid ${theme.colors.border.medium}`;
  }
  return {
    wrapper: css.css({
      display: "flex",
      alignItems: "center",
      cursor: "pointer"
    }),
    label: css.css({
      marginRight: theme.spacing(1)
    }),
    swatch: css.css({
      width: swatchSize,
      height: swatchSize,
      background: `${color}`,
      border,
      borderRadius: theme.shape.radius.circle,
      outlineOffset: "1px",
      outline: isFocusVisible ? `2px solid  ${theme.colors.primary.main}` : "none",
      boxShadow: isSelected ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px ${theme.colors.getContrastText(color)}` : "none",
      [theme.transitions.handleMotion("no-preference")]: {
        transition: theme.transitions.create(["transform"], {
          duration: theme.transitions.duration.short
        })
      },
      "&:hover": {
        transform: "scale(1.1)"
      },
      "@media (forced-colors: active)": {
        forcedColorAdjust: "none"
      }
    })
  };
};
ColorSwatch.displayName = "ColorSwatch";

exports.ColorSwatch = ColorSwatch;
exports.ColorSwatchVariant = ColorSwatchVariant;
//# sourceMappingURL=ColorSwatch.cjs.map