{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAyBD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAiC;IAEjC,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,+CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,sDAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OACb,gBAAgB,CAAC,aAAa,OAAO,EACrC,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,2DAAc,EAAE;QACd,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,+DAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,wDAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,2CAAY,EACrD;QACE,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GACA,OACA;IAGF,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,yCAAW;IAE9C,qBACE,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAEtB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,OAAO;YACP,QAAQ;QACV;qBACA,0DAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;QACd,KAAK;;AAKf","sources":["packages/@adobe/react-spectrum/src/color/ColorWheel.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps, useColorWheel} from 'react-aria/useColorWheel';\n\nimport {classNames} from '../utils/classNames';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext} from 'react-aria-components/ColorWheel';\nimport {dimensionValue, useStyleProps} from '../utils/styleProps';\nimport {DimensionValue, FocusableRef, StyleProps} from '@react-types/shared';\nimport React, {useCallback, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheelState} from 'react-stately/useColorWheelState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\n\nexport interface SpectrumColorWheelProps\n  extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {\n  /** The outer diameter of the ColorWheel. */\n  size?: DimensionValue;\n}\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(\n  props: SpectrumColorWheelProps,\n  ref: FocusableRef<HTMLDivElement>\n) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let containerRef = useFocusableRef(ref, inputRef);\n  [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n  let {isDisabled} = props;\n  let size = props.size && dimensionValue(props.size);\n  let {styleProps} = useStyleProps(props);\n\n  let [wheelRadius, setWheelRadius] = useState<number>(0);\n  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n  let resizeHandler = useCallback(() => {\n    if (containerRef.current) {\n      setWheelRadius(containerRef.current.offsetWidth / 2);\n      let thickness = window\n        .getComputedStyle(containerRef.current)\n        .getPropertyValue('--spectrum-colorwheel-track-thickness');\n      if (thickness) {\n        setWheelThickness(parseInt(thickness, 10));\n      }\n    }\n  }, [containerRef, setWheelRadius, setWheelThickness]);\n\n  useLayoutEffect(() => {\n    // the size observer's fallback to the window resize event doesn't fire on mount\n    if (wheelRadius === 0) {\n      resizeHandler();\n    }\n  }, [wheelRadius, resizeHandler]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: resizeHandler\n  });\n\n  let state = useColorWheelState(props);\n\n  let {trackProps, inputProps, thumbProps} = useColorWheel(\n    {\n      ...props,\n      innerRadius: wheelRadius - wheelThickness,\n      outerRadius: wheelRadius\n    },\n    state,\n    inputRef\n  );\n\n  let {focusProps, isFocusVisible} = useFocusRing();\n\n  return (\n    <div\n      className={classNames(\n        styles,\n        'spectrum-ColorWheel',\n        {\n          'is-disabled': isDisabled\n        },\n        styleProps.className\n      )}\n      ref={containerRef}\n      style={{\n        ...styleProps.style,\n        // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n        width: size,\n        height: size\n      }}>\n      <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n      <ColorThumb\n        value={state.getDisplayColor()}\n        isFocused={isFocusVisible}\n        isDisabled={isDisabled}\n        isDragging={state.isDragging}\n        containerRef={containerRef}\n        className={classNames(styles, 'spectrum-ColorWheel-handle')}\n        {...thumbProps}>\n        <input\n          {...focusProps}\n          className={classNames(styles, 'spectrum-ColorWheel-slider')}\n          {...inputProps}\n          ref={inputRef}\n        />\n      </ColorThumb>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorWheel.cjs.map"}