{"version":3,"file":"ColorPickerPopover.cjs","sources":["../../../../src/components/ColorPicker/ColorPickerPopover.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { FocusScope } from '@react-aria/focus';\nimport { type ComponentType, createElement, useState } from 'react';\n\nimport { GrafanaTheme2, colorManipulator } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { Tab } from '../Tabs/Tab';\nimport { TabsBar } from '../Tabs/TabsBar';\nimport { PopoverContentProps } from '../Tooltip/types';\n\nimport { NamedColorsPalette } from './NamedColorsPalette';\nimport SpectrumPalette from './SpectrumPalette';\n\nexport type ColorPickerChangeHandler = (color: string) => void;\n\nexport interface ColorPickerProps {\n  color: string;\n  onChange: ColorPickerChangeHandler;\n  enableNamedColors?: boolean;\n  id?: string;\n}\n\nexport interface Props<T> extends ColorPickerProps, PopoverContentProps {\n  customPickers?: T;\n}\n\nexport interface CustomPickersDescriptor {\n  [key: string]: {\n    tabComponent: ComponentType<ColorPickerProps>;\n    name: string;\n  };\n}\n\ntype PickerType = 'palette' | 'spectrum';\n\nexport const ColorPickerPopover = <T extends CustomPickersDescriptor>(props: Props<T>) => {\n  const { color, onChange, enableNamedColors, customPickers } = props;\n  const theme = useTheme2();\n  const [activePicker, setActivePicker] = useState<PickerType | keyof T>('palette');\n\n  const styles = getStyles(theme);\n\n  const handleChange = (color: string) => {\n    if (enableNamedColors) {\n      return onChange(color);\n    }\n    onChange(colorManipulator.asHexString(theme.visualization.getColorByName(color)));\n  };\n\n  const onTabChange = (tab: PickerType | keyof T) => {\n    return () => setActivePicker(tab);\n  };\n\n  const renderCustomPicker = (tabKey: keyof T) => {\n    if (!customPickers) {\n      return null;\n    }\n\n    return createElement(customPickers[tabKey].tabComponent, {\n      color,\n      onChange: handleChange,\n    });\n  };\n\n  const renderPicker = () => {\n    switch (activePicker) {\n      case 'spectrum':\n        return <SpectrumPalette color={color} onChange={handleChange} />;\n      case 'palette':\n        return <NamedColorsPalette color={color} onChange={handleChange} />;\n      default:\n        return renderCustomPicker(activePicker);\n    }\n  };\n\n  const renderCustomPickerTabs = () => {\n    if (!customPickers) {\n      return null;\n    }\n\n    return (\n      <>\n        {Object.keys(customPickers).map((key) => {\n          return <Tab label={customPickers[key].name} onChangeTab={onTabChange(key)} key={key} />;\n        })}\n      </>\n    );\n  };\n\n  return (\n    <FocusScope contain restoreFocus autoFocus>\n      {/*\n        tabIndex=-1 is needed here to support highlighting text within the picker when using FocusScope\n        see https://github.com/adobe/react-spectrum/issues/1604#issuecomment-781574668\n      */}\n      <div tabIndex={-1} className={styles.colorPickerPopover}>\n        <TabsBar>\n          <Tab\n            label={t('grafana-ui.color-picker-popover.palette-tab', 'Colors')}\n            onChangeTab={onTabChange('palette')}\n            active={activePicker === 'palette'}\n          />\n          <Tab\n            label={t('grafana-ui.color-picker-popover.spectrum-tab', 'Custom')}\n            onChangeTab={onTabChange('spectrum')}\n            active={activePicker === 'spectrum'}\n          />\n          {renderCustomPickerTabs()}\n        </TabsBar>\n        <div className={styles.colorPickerPopoverContent}>{renderPicker()}</div>\n      </div>\n    </FocusScope>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    colorPickerPopover: css({\n      borderRadius: theme.shape.radius.default,\n      boxShadow: theme.shadows.z3,\n      background: theme.colors.background.elevated,\n      padding: theme.spacing(0.5),\n      border: `1px solid ${theme.colors.border.weak}`,\n    }),\n    colorPickerPopoverContent: css({\n      width: '246px',\n      fontSize: theme.typography.bodySmall.fontSize,\n      minHeight: '184px',\n      height: '290px',\n      padding: theme.spacing(1),\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n    colorPickerPopoverTabs: css({\n      display: 'flex',\n      width: '100%',\n      borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`,\n    }),\n  };\n};\n"],"names":["useTheme2","useState","color","colorManipulator","createElement","jsx","SpectrumPalette","NamedColorsPalette","Tab","FocusScope","jsxs","TabsBar","t","css"],"mappings":"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"}