{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DO,MAAM,0DACX,CAAA,GAAA,0BAAY,EAAwD;AACtE,MAAM,sDAAkB,CAAA,GAAA,0BAAY,EAA6B;AAK1D,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBACnD,KAA6B,EAC7B,GAAiC;IAEjC,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,0DAAkB,EAAE;IAChC,IAAI,WAAW,CAAA,GAAA,oBAAM,EAAE,IAAM,IAAI,OAAO,EAAE;IAC1C,IAAI,YAAY,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAE1D,qBACE,0DAAC,CAAA,GAAA,iCAAM;QACJ,GAAG,CAAA,GAAA,6CAAa,EAAE,OAAO;YAAC,WAAW;QAAI,EAAE;QAC5C,KAAK;QACL,WAAW,MAAM,SAAS,IAAI;QAC9B,OAAO,MAAM,KAAK;QAClB,cACE,KAAK,CAAC,aAAa,IAClB,CAAA,CAAC,KAAK,CAAC,kBAAkB,GAAG,UAAU,MAAM,CAAC,uBAAuB,SAAQ;QAE/E,QAAQ,MAAM,MAAM,IAAI;QACxB,eAAc;QACd,cAAc;YAAC,MAAM,KAAK,CAAC,QAAQ,CAAC;SAAQ;QAC5C,mBAAmB,CAAA;YACjB,yDAAyD;YACzD,IAAI,SAAS,OACX,MAAM,QAAQ,CAAC,SAAS,GAAG,CAAC;mBAAI;aAAK,CAAC,EAAE;QAE5C;QACA,wBAAA;qBACA,0DAAC,sCAAgB,QAAQ;QAAC,OAAO;OAAW,MAAM,QAAQ;AAGhE;AA6BO,MAAM,0DAAwB,CAAA,GAAA,uBAAS,EAAE,SAAS,sBACvD,KAAiC,EACjC,GAAiC;IAEjC,IAAI,YAAY,MAAM,KAAK,IAAI;IAC/B,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAChB,IAAO,OAAO,cAAc,WAAW,CAAA,GAAA,mCAAS,EAAE,aAAa,WAC/D;QAAC;KAAU;IAEb,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,sCAAQ;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,QAAQ,CAAC;QACzB,IAAI,GAAG,CAAC,KAAK;QACb,OAAO;YACL,IAAI,MAAM,CAAC;QACb;IACF,GAAG;QAAC;QAAO;KAAI;IAEf,IAAI,OAAO,CAAA;QACT,IAAI,OAAO,MAAM,YACf,OAAO,CAAA,cAAe,EAAE;gBAAC,GAAG,WAAW;uBAAE;YAAK;QAEhD,OAAO;IACT;IAEA,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACR,GAAG,KAAK;QACT,yCAAyC;QACzC,QAAQ,MAAM,MAAM;QACpB,KAAK;QACL,IAAI,MAAM,QAAQ,CAAC;QACnB,WAAW,MAAM,YAAY,CAAC;QAC9B,WAAW,KAAK,MAAM,SAAS,IAAI;QACnC,OAAO,KAAK,MAAM,KAAK;OACtB,CAAA,GAAA,4CAAiB,EAAE,KAAK,MAAM,QAAQ,GAAG,CAAA,yBACxC,0DAAC,CAAA,GAAA,4CAAiB,EAAE,QAAQ;YAAC,OAAO;uBAAC;YAAK;WAAI;AAItD","sources":["packages/react-aria-components/src/ColorSwatchPicker.tsx"],"sourcesContent":["import {\n  AriaLabelingProps,\n  GlobalDOMAttributes,\n  HoverEvents,\n  PressEvents,\n  ValueBase\n} from '@react-types/shared';\nimport {\n  ClassNameOrFunction,\n  composeRenderProps,\n  ContextValue,\n  RenderProps,\n  StyleRenderProps,\n  useContextProps\n} from './utils';\nimport {Color} from 'react-stately/Color';\nimport {ColorSwatchContext} from './ColorSwatch';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport intlMessages from '../intl/*.json';\nimport {ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps} from './ListBox';\nimport {parseColor} from 'react-stately/Color';\nimport React, {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useContext,\n  useEffect,\n  useMemo\n} from 'react';\nimport {useColorPickerState} from 'react-stately/useColorPickerState';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}\nexport interface ColorSwatchPickerProps\n  extends\n    ValueBase<string | Color, Color>,\n    AriaLabelingProps,\n    StyleRenderProps<ColorSwatchPickerRenderProps>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-ColorSwatchPicker'\n   */\n  className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>;\n  /** The children of the ColorSwatchPicker. */\n  children?: ReactNode;\n  /**\n   * Whether the items are arranged in a stack or grid.\n   *\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'stack';\n}\n\nexport const ColorSwatchPickerContext =\n  createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);\nconst ColorMapContext = createContext<Map<string, Color> | null>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(\n  props: ColorSwatchPickerProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);\n  let state = useColorPickerState(props);\n  let colorMap = useMemo(() => new Map(), []);\n  let formatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');\n\n  return (\n    <ListBox\n      {...filterDOMProps(props, {labelable: true})}\n      ref={ref}\n      className={props.className || 'react-aria-ColorSwatchPicker'}\n      style={props.style}\n      aria-label={\n        props['aria-label'] ||\n        (!props['aria-labelledby'] ? formatter.format('colorSwatchPicker') : undefined)\n      }\n      layout={props.layout || 'grid'}\n      selectionMode=\"single\"\n      selectedKeys={[state.color.toString('hexa')]}\n      onSelectionChange={keys => {\n        // single select, 'all' cannot occur. appease typescript.\n        if (keys !== 'all') {\n          state.setColor(colorMap.get([...keys][0]));\n        }\n      }}\n      disallowEmptySelection>\n      <ColorMapContext.Provider value={colorMap}>{props.children}</ColorMapContext.Provider>\n    </ListBox>\n  );\n});\n\nexport interface ColorSwatchPickerItemRenderProps extends Omit<\n  ListBoxItemRenderProps,\n  'selectionMode' | 'selectionBehavior'\n> {\n  /** The color of the swatch. */\n  color: Color;\n}\n\nexport interface ColorSwatchPickerItemProps\n  extends\n    RenderProps<ColorSwatchPickerItemRenderProps>,\n    HoverEvents,\n    PressEvents,\n    Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-ColorSwatchPickerItem'\n   */\n  className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>;\n  /** The color of the swatch. */\n  color: string | Color;\n  /** Whether the color swatch is disabled. */\n  isDisabled?: boolean;\n}\n\nexport const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(\n  props: ColorSwatchPickerItemProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  let propColor = props.color || '#0000';\n  let color = useMemo(\n    () => (typeof propColor === 'string' ? parseColor(propColor) : propColor),\n    [propColor]\n  );\n  let {locale} = useLocale();\n  let map = useContext(ColorMapContext)!;\n  useEffect(() => {\n    let key = color.toString('hexa');\n    map.set(key, color);\n    return () => {\n      map.delete(key);\n    };\n  }, [color, map]);\n\n  let wrap = v => {\n    if (typeof v === 'function') {\n      return renderProps => v({...renderProps, color});\n    }\n    return v;\n  };\n\n  return (\n    <ListBoxItem\n      {...props}\n      // ColorSwatchPickerItem is never a link.\n      render={props.render as any}\n      ref={ref}\n      id={color.toString('hexa')}\n      textValue={color.getColorName(locale)}\n      className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}\n      style={wrap(props.style)}>\n      {composeRenderProps(wrap(props.children), children => (\n        <ColorSwatchContext.Provider value={{color}}>{children}</ColorSwatchContext.Provider>\n      ))}\n    </ListBoxItem>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSwatchPicker.cjs.map"}