@grafana/ui/dist/esm/components/ColorPicker/ColorPicker.mjs.map

Grafana Components Library

{"version":3,"file":"ColorPicker.mjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport {\n  type ComponentType,\n  createElement,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  useRef,\n} from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { closePopover } from '../../utils/closePopover';\nimport { Popover } from '../Tooltip/Popover';\nimport { PopoverController } from '../Tooltip/PopoverController';\n\nimport { ColorPickerPopover, type ColorPickerProps } from './ColorPickerPopover';\nimport { ColorSwatch } from './ColorSwatch';\nimport { SeriesColorPickerPopover } from './SeriesColorPickerPopover';\n\n/**\n * If you need custom trigger for the color picker you can do that with a render prop pattern and supply a function\n * as a child. You will get show/hide function which you can map to desired interaction (like onClick or onMouseLeave)\n * and a ref which needs to be passed to an HTMLElement for correct positioning. If you want to use class or functional\n * component as a custom trigger you will need to forward the reference to first HTMLElement child.\n */\ntype ColorPickerTriggerRenderer = (props: {\n  // This should be a RefObject<HTMLElement> but due to how object refs are defined you cannot downcast from that\n  // to a specific type like RefObject<HTMLDivElement> even though it would be fine in runtime.\n  ref: RefObject<any>;\n  showColorPicker: () => void;\n  hideColorPicker: () => void;\n  isOpen: boolean;\n}) => ReactNode;\n\nconst colorPickerFactory = <T extends ColorPickerProps>(\n  popover: ComponentType<PropsWithChildren<T>>,\n  displayName = 'ColorPicker'\n) => {\n  const ColorPickerComponent = (props: T & { children?: ColorPickerTriggerRenderer }) => {\n    const { children, onChange, color, id } = props;\n    const theme = useTheme2();\n    const pickerTriggerRef = useRef<any>(null);\n    const styles = getStyles(theme);\n\n    const popoverElement = createElement(\n      popover,\n      {\n        ...props,\n        onChange,\n      },\n      null\n    );\n\n    return (\n      <PopoverController content={popoverElement} hideAfter={300}>\n        {(showPopper, hidePopper, popperProps) => {\n          return (\n            <>\n              {pickerTriggerRef.current && (\n                <Popover\n                  {...popperProps}\n                  referenceElement={pickerTriggerRef.current}\n                  wrapperClassName={styles.colorPicker}\n                  onMouseLeave={hidePopper}\n                  onMouseEnter={showPopper}\n                  onKeyDown={(event) => closePopover(event, hidePopper)}\n                />\n              )}\n\n              {children ? (\n                children({\n                  ref: pickerTriggerRef,\n                  showColorPicker: showPopper,\n                  hideColorPicker: hidePopper,\n                  isOpen: popperProps.show,\n                })\n              ) : (\n                <ColorSwatch\n                  id={id}\n                  ref={pickerTriggerRef}\n                  onClick={showPopper}\n                  onMouseLeave={hidePopper}\n                  color={theme.visualization.getColorByName(color || '#000000')}\n                  aria-label={color}\n                />\n              )}\n            </>\n          );\n        }}\n      </PopoverController>\n    );\n  };\n\n  return ColorPickerComponent;\n};\n\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-colorpicker--docs\n */\nexport const ColorPicker = colorPickerFactory(ColorPickerPopover, 'ColorPicker');\nexport const SeriesColorPicker = colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker');\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    colorPicker: css({\n      position: 'absolute',\n      zIndex: theme.zIndex.tooltip,\n      color: theme.colors.text.primary,\n      maxWidth: '400px',\n      fontSize: theme.typography.size.sm,\n      maxHeight: '100vh',\n      overflow: 'auto',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAoCA,MAAM,kBAAA,GAAqB,CACzB,OAAA,EACA,WAAA,GAAc,aAAA,KACX;AACH,EAAA,MAAM,oBAAA,GAAuB,CAAC,KAAA,KAAyD;AACrF,IAAA,MAAM,EAAE,QAAA,EAAU,QAAA,EAAU,KAAA,EAAO,IAAG,GAAI,KAAA;AAC1C,IAAA,MAAM,QAAQ,SAAA,EAAU;AACxB,IAAA,MAAM,gBAAA,GAAmB,OAAY,IAAI,CAAA;AACzC,IAAA,MAAM,MAAA,GAAS,UAAU,KAAK,CAAA;AAE9B,IAAA,MAAM,cAAA,GAAiB,aAAA;AAAA,MACrB,OAAA;AAAA,MACA;AAAA,QACE,GAAG,KAAA;AAAA,QACH;AAAA,OACF;AAAA,MACA;AAAA,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,qBAAkB,OAAA,EAAS,cAAA,EAAgB,WAAW,GAAA,EACpD,QAAA,EAAA,CAAC,UAAA,EAAY,UAAA,EAAY,WAAA,KAAgB;AACxC,MAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,gBAAA,CAAiB,OAAA,oBAChB,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACE,GAAG,WAAA;AAAA,YACJ,kBAAkB,gBAAA,CAAiB,OAAA;AAAA,YACnC,kBAAkB,MAAA,CAAO,WAAA;AAAA,YACzB,YAAA,EAAc,UAAA;AAAA,YACd,YAAA,EAAc,UAAA;AAAA,YACd,SAAA,EAAW,CAAC,KAAA,KAAU,YAAA,CAAa,OAAO,UAAU;AAAA;AAAA,SACtD;AAAA,QAGD,WACC,QAAA,CAAS;AAAA,UACP,GAAA,EAAK,gBAAA;AAAA,UACL,eAAA,EAAiB,UAAA;AAAA,UACjB,eAAA,EAAiB,UAAA;AAAA,UACjB,QAAQ,WAAA,CAAY;AAAA,SACrB,CAAA,mBAED,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,EAAA;AAAA,YACA,GAAA,EAAK,gBAAA;AAAA,YACL,OAAA,EAAS,UAAA;AAAA,YACT,YAAA,EAAc,UAAA;AAAA,YACd,KAAA,EAAO,KAAA,CAAM,aAAA,CAAc,cAAA,CAAe,SAAS,SAAS,CAAA;AAAA,YAC5D,YAAA,EAAY;AAAA;AAAA;AACd,OAAA,EAEJ,CAAA;AAAA,IAEJ,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,OAAO,oBAAA;AACT,CAAA;AAKO,MAAM,WAAA,GAAc,kBAAA,CAAmB,kBAAA,EAAoB,aAAa;AACxE,MAAM,iBAAA,GAAoB,kBAAA,CAAmB,wBAAA,EAA0B,mBAAmB;AAEjG,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,aAAa,GAAA,CAAI;AAAA,MACf,QAAA,EAAU,UAAA;AAAA,MACV,MAAA,EAAQ,MAAM,MAAA,CAAO,OAAA;AAAA,MACrB,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MACzB,QAAA,EAAU,OAAA;AAAA,MACV,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,IAAA,CAAK,EAAA;AAAA,MAChC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU;AAAA,KACX;AAAA,GACH;AACF,CAAA;;;;"}