@grafana/ui/dist/cjs/components/ColorPicker/ColorPicker.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 ThemeContext = require('../../themes/ThemeContext.cjs');
var closePopover = require('../../utils/closePopover.cjs');
var Popover = require('../Tooltip/Popover.cjs');
var PopoverController = require('../Tooltip/PopoverController.cjs');
var ColorPickerPopover = require('./ColorPickerPopover.cjs');
var ColorSwatch = require('./ColorSwatch.cjs');
var SeriesColorPickerPopover = require('./SeriesColorPickerPopover.cjs');

"use strict";
const colorPickerFactory = (popover, displayName = "ColorPicker") => {
  const ColorPickerComponent = (props) => {
    const { children, onChange, color, id } = props;
    const theme = ThemeContext.useTheme2();
    const pickerTriggerRef = React.useRef(null);
    const styles = getStyles(theme);
    const popoverElement = React.createElement(
      popover,
      {
        ...props,
        onChange
      },
      null
    );
    return /* @__PURE__ */ jsxRuntime.jsx(PopoverController.PopoverController, { content: popoverElement, hideAfter: 300, children: (showPopper, hidePopper, popperProps) => {
      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
        pickerTriggerRef.current && /* @__PURE__ */ jsxRuntime.jsx(
          Popover.Popover,
          {
            ...popperProps,
            referenceElement: pickerTriggerRef.current,
            wrapperClassName: styles.colorPicker,
            onMouseLeave: hidePopper,
            onMouseEnter: showPopper,
            onKeyDown: (event) => closePopover.closePopover(event, hidePopper)
          }
        ),
        children ? children({
          ref: pickerTriggerRef,
          showColorPicker: showPopper,
          hideColorPicker: hidePopper,
          isOpen: popperProps.show
        }) : /* @__PURE__ */ jsxRuntime.jsx(
          ColorSwatch.ColorSwatch,
          {
            id,
            ref: pickerTriggerRef,
            onClick: showPopper,
            onMouseLeave: hidePopper,
            color: theme.visualization.getColorByName(color || "#000000"),
            "aria-label": color
          }
        )
      ] });
    } });
  };
  return ColorPickerComponent;
};
const ColorPicker = colorPickerFactory(ColorPickerPopover.ColorPickerPopover, "ColorPicker");
const SeriesColorPicker = colorPickerFactory(SeriesColorPickerPopover.SeriesColorPickerPopover, "SeriesColorPicker");
const getStyles = (theme) => {
  return {
    colorPicker: css.css({
      position: "absolute",
      zIndex: theme.zIndex.tooltip,
      color: theme.colors.text.primary,
      maxWidth: "400px",
      fontSize: theme.typography.size.sm,
      maxHeight: "100vh",
      overflow: "auto"
    })
  };
};

exports.ColorPicker = ColorPicker;
exports.SeriesColorPicker = SeriesColorPicker;
//# sourceMappingURL=ColorPicker.cjs.map