@react-spectrum/color 3.0.0-nightly.3167 → 3.0.0-nightly.3175

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/main.js +3 -101
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +3 -101
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts.map +1 -1
  6. package/package.json +20 -20
  7. package/src/ColorArea.tsx +4 -120
package/dist/main.js CHANGED
@@ -5,11 +5,11 @@ var $aAzec$react = require("react");
5
5
  var $aAzec$reactariacolor = require("@react-aria/color");
6
6
  var $aAzec$reactstatelycolor = require("@react-stately/color");
7
7
  var $aAzec$reactariafocus = require("@react-aria/focus");
8
- var $aAzec$reactariai18n = require("@react-aria/i18n");
9
8
  var $aAzec$reactspectrumprovider = require("@react-spectrum/provider");
10
9
  var $aAzec$reactspectrumlayout = require("@react-spectrum/layout");
11
10
  var $aAzec$reactspectrumlabel = require("@react-spectrum/label");
12
11
  var $aAzec$reactariainteractions = require("@react-aria/interactions");
12
+ var $aAzec$reactariai18n = require("@react-aria/i18n");
13
13
  var $aAzec$reactspectrumtextfield = require("@react-spectrum/textfield");
14
14
 
15
15
  function $parcel$exportWildcard(dest, source) {
@@ -173,7 +173,6 @@ $d4b4e0a63f9ca8c1$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_35e2c0";
173
173
 
174
174
 
175
175
 
176
-
177
176
  function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
178
177
  props = $aAzec$reactspectrumprovider.useProviderProps(props);
179
178
  let { isDisabled: isDisabled } = props;
@@ -183,21 +182,12 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
183
182
  let inputYRef = $aAzec$react.useRef();
184
183
  let containerRef = $aAzec$reactspectrumutils.useFocusableRef(ref, inputXRef);
185
184
  let state = $aAzec$reactstatelycolor.useColorAreaState(props);
186
- let { channels: { xChannel: xChannel , zChannel: zChannel } } = state;
187
185
  let { colorAreaProps: colorAreaProps , gradientProps: gradientProps , xInputProps: xInputProps , yInputProps: yInputProps , thumbProps: thumbProps } = $aAzec$reactariacolor.useColorArea({
188
186
  ...props,
189
187
  inputXRef: inputXRef,
190
188
  inputYRef: inputYRef,
191
189
  containerRef: containerRef
192
190
  }, state);
193
- let { direction: direction } = $aAzec$reactariai18n.useLocale();
194
- let { colorAreaStyleProps: colorAreaStyleProps , gradientStyleProps: gradientStyleProps , thumbStyleProps: thumbStyleProps } = $5f016e950c2dc3a6$var$useGradients({
195
- direction: direction,
196
- state: state,
197
- xChannel: xChannel,
198
- zChannel: zChannel,
199
- isDisabled: props.isDisabled
200
- });
201
191
  let { focusProps: focusProps , isFocusVisible: isFocusVisible } = $aAzec$reactariafocus.useFocusRing();
202
192
  return(/*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
203
193
  ...colorAreaProps,
@@ -206,7 +196,7 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
206
196
  }, styleProps.className),
207
197
  ref: containerRef,
208
198
  style: {
209
- ...colorAreaStyleProps.style,
199
+ ...colorAreaProps.style,
210
200
  ...styleProps.style,
211
201
  // Workaround around https://github.com/adobe/spectrum-css/issues/1032
212
202
  width: size,
@@ -214,7 +204,6 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
214
204
  }
215
205
  }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
216
206
  ...gradientProps,
217
- ...gradientStyleProps,
218
207
  className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports)), 'spectrum-ColorArea-gradient')
219
208
  }), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($2b9adc23f6c7cae1$export$a3cc47cee1c1ccc, {
220
209
  value: state.getDisplayColor(),
@@ -222,8 +211,7 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
222
211
  isDisabled: isDisabled,
223
212
  isDragging: state.isDragging,
224
213
  className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($d4b4e0a63f9ca8c1$exports)), 'spectrum-ColorArea-handle'),
225
- ...thumbProps,
226
- ...thumbStyleProps
214
+ ...thumbProps
227
215
  }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
228
216
  role: "presentation"
229
217
  }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("input", {
@@ -237,92 +225,6 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
237
225
  })))));
238
226
  }
239
227
  let $5f016e950c2dc3a6$export$b2103f68a961418e = /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).forwardRef($5f016e950c2dc3a6$var$ColorArea);
240
- // this function looks scary, but it's actually pretty quick, just generates some strings
241
- function $5f016e950c2dc3a6$var$useGradients({ direction: direction , state: state , zChannel: zChannel , xChannel: xChannel , isDisabled: isDisabled }) {
242
- let orientation = [
243
- 'top',
244
- direction === 'rtl' ? 'left' : 'right'
245
- ];
246
- let dir = false;
247
- let background = {
248
- colorAreaStyles: {
249
- },
250
- gradientStyles: {
251
- }
252
- };
253
- let zValue = state.value.getChannelValue(zChannel);
254
- let maskImage;
255
- if (!isDisabled) switch(zChannel){
256
- case 'red':
257
- dir = xChannel === 'green';
258
- maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
259
- background.colorAreaStyles = {
260
- /* the background represents the green channel as a linear gradient from min to max,
261
- with the blue channel minimized, adjusted by the red channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
262
- };
263
- background.gradientStyles = {
264
- /* the foreground represents the green channel as a linear gradient from min to max,
265
- with the blue channel maximized, adjusted by the red channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
266
- /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
267
- maskImage: maskImage
268
- };
269
- break;
270
- case 'green':
271
- dir = xChannel === 'red';
272
- maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
273
- background.colorAreaStyles = {
274
- /* the background represents the red channel as a linear gradient from min to max,
275
- with the blue channel minimized, adjusted by the green channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
276
- };
277
- background.gradientStyles = {
278
- /* the foreground represents the red channel as a linear gradient from min to max,
279
- with the blue channel maximized, adjusted by the green channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
280
- /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
281
- maskImage: maskImage
282
- };
283
- break;
284
- case 'blue':
285
- dir = xChannel === 'red';
286
- maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
287
- background.colorAreaStyles = {
288
- /* the background represents the red channel as a linear gradient from min to max,
289
- with the green channel minimized, adjusted by the blue channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
290
- };
291
- background.gradientStyles = {
292
- /* the foreground represents the red channel as a linear gradient from min to max,
293
- with the green channel maximized, adjusted by the blue channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
294
- /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
295
- maskImage: maskImage
296
- };
297
- break;
298
- }
299
- let { x: x , y: y } = state.getThumbPosition();
300
- if (direction === 'rtl') x = 1 - x;
301
- return {
302
- colorAreaStyleProps: {
303
- style: {
304
- position: 'relative',
305
- touchAction: 'none',
306
- ...background.colorAreaStyles
307
- }
308
- },
309
- gradientStyleProps: {
310
- style: {
311
- touchAction: 'none',
312
- ...background.gradientStyles
313
- }
314
- },
315
- thumbStyleProps: {
316
- style: {
317
- position: 'absolute',
318
- left: `${x * 100}%`,
319
- top: `${y * 100}%`,
320
- transform: 'translate(0%, 0%)',
321
- touchAction: 'none'
322
- }
323
- }
324
- };
325
- }
326
228
 
327
229
 
328
230
  var $63a2864687444ae1$exports = {};
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n","/*\n * Copyright 2021 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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {CSSProperties, ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputXRef = useRef();\n let inputYRef = useRef();\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {channels: {xChannel, zChannel}} = state;\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {direction} = useLocale();\n let {colorAreaStyleProps, gradientStyleProps, thumbStyleProps} = useGradients({direction, state, xChannel, zChannel, isDisabled: props.isDisabled});\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaStyleProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} {...gradientStyleProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}\n {...thumbStyleProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n\ninterface Gradients {\n colorAreaStyleProps: {\n style: CSSProperties\n },\n gradientStyleProps: {\n style: CSSProperties\n },\n thumbStyleProps: {\n style: CSSProperties\n }\n}\n\n// this function looks scary, but it's actually pretty quick, just generates some strings\nfunction useGradients({direction, state, zChannel, xChannel, isDisabled}): Gradients {\n let orientation = ['top', direction === 'rtl' ? 'left' : 'right'];\n let dir = false;\n let background = {colorAreaStyles: {}, gradientStyles: {}};\n let zValue = state.value.getChannelValue(zChannel);\n let maskImage;\n if (!isDisabled) {\n switch (zChannel) {\n case 'red': {\n dir = xChannel === 'green';\n maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n background.colorAreaStyles = {\n /* the background represents the green channel as a linear gradient from min to max,\n with the blue channel minimized, adjusted by the red channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`\n };\n background.gradientStyles = {\n /* the foreground represents the green channel as a linear gradient from min to max,\n with the blue channel maximized, adjusted by the red channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n 'WebkitMaskImage': maskImage,\n maskImage\n };\n break;\n }\n case 'green': {\n dir = xChannel === 'red';\n maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n background.colorAreaStyles = {\n /* the background represents the red channel as a linear gradient from min to max,\n with the blue channel minimized, adjusted by the green channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`\n };\n background.gradientStyles = {\n /* the foreground represents the red channel as a linear gradient from min to max,\n with the blue channel maximized, adjusted by the green channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n 'WebkitMaskImage': maskImage,\n maskImage\n };\n break;\n }\n case 'blue': {\n dir = xChannel === 'red';\n maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n background.colorAreaStyles = {\n /* the background represents the red channel as a linear gradient from min to max,\n with the green channel minimized, adjusted by the blue channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`\n };\n background.gradientStyles = {\n /* the foreground represents the red channel as a linear gradient from min to max,\n with the green channel maximized, adjusted by the blue channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n 'WebkitMaskImage': maskImage,\n maskImage\n };\n break;\n }\n }\n }\n\n let {x, y} = state.getThumbPosition();\n\n if (direction === 'rtl') {\n x = 1 - x;\n }\n\n return {\n colorAreaStyleProps: {\n style: {\n position: 'relative',\n touchAction: 'none',\n ...background.colorAreaStyles\n }\n },\n gradientStyleProps: {\n style: {\n touchAction: 'none',\n ...background.gradientStyles\n }\n },\n thumbStyleProps: {\n style: {\n position: 'absolute',\n left: `${x * 100}%`,\n top: `${y * 100}%`,\n transform: 'translate(0%, 0%)',\n touchAction: 'none'\n }\n }\n };\n}\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n value: Color,\n isDisabled?: boolean,\n isDragging?: boolean, // shows the color loupe\n isFocused?: boolean, // makes the circle larger\n className?: string,\n children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n let patternId = useId();\n\n let valueCSS = value.toString('css');\n\n return (\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isDragging})} aria-hidden=\"true\">\n <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n </pattern>\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={`url(#${patternId})`} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={valueCSS} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n </svg>\n {children}\n </div>\n );\n}\n\nexport {ColorThumb};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n\n let [wheelRadius, setWheelRadius] = useState<number | null>(null);\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.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 useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius == null) {\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 ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n // @ts-ignore\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 className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let inputRef = useRef();\n let trackRef = useRef();\n let domRef = useFocusableRef(ref, inputRef);\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n label = null;\n }\n\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n let alignLabel;\n if (vertical) {\n alignLabel = 'center';\n } else if (label != null && showValueLabel) {\n alignLabel = 'space-between';\n } else if (label != null) {\n alignLabel = 'flex-start';\n } else if (showValueLabel) {\n alignLabel = 'flex-end';\n }\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <Flex direction=\"row\" justifyContent={alignLabel}>\n <Label {...labelProps}>{label}</Label>\n {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n </Flex>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n let {\n labelProps,\n inputProps\n } = useColorField(otherProps, state, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\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\n.react-spectrum-ColorField-input {\n direction: ltr;\n text-align: start;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n","/*\n * Copyright 2021 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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputXRef = useRef();\n let inputYRef = useRef();\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n value: Color,\n isDisabled?: boolean,\n isDragging?: boolean, // shows the color loupe\n isFocused?: boolean, // makes the circle larger\n className?: string,\n children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n let patternId = useId();\n\n let valueCSS = value.toString('css');\n\n return (\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isDragging})} aria-hidden=\"true\">\n <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n </pattern>\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={`url(#${patternId})`} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={valueCSS} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n </svg>\n {children}\n </div>\n );\n}\n\nexport {ColorThumb};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n\n let [wheelRadius, setWheelRadius] = useState<number | null>(null);\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.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 useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius == null) {\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 ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n // @ts-ignore\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 className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let inputRef = useRef();\n let trackRef = useRef();\n let domRef = useFocusableRef(ref, inputRef);\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n label = null;\n }\n\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n let alignLabel;\n if (vertical) {\n alignLabel = 'center';\n } else if (label != null && showValueLabel) {\n alignLabel = 'space-between';\n } else if (label != null) {\n alignLabel = 'flex-start';\n } else if (showValueLabel) {\n alignLabel = 'flex-end';\n }\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <Flex direction=\"row\" justifyContent={alignLabel}>\n <Label {...labelProps}>{label}</Label>\n {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n </Flex>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n let {\n labelProps,\n inputProps\n } = useColorField(otherProps, state, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\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\n.react-spectrum-ColorField-input {\n direction: ltr;\n text-align: start;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -5,11 +5,11 @@ import $kF0Zw$react, {useRef as $kF0Zw$useRef, useState as $kF0Zw$useState, useC
5
5
  import {useColorArea as $kF0Zw$useColorArea, useColorWheel as $kF0Zw$useColorWheel, useColorSlider as $kF0Zw$useColorSlider, useColorField as $kF0Zw$useColorField} from "@react-aria/color";
6
6
  import {useColorAreaState as $kF0Zw$useColorAreaState, useColorWheelState as $kF0Zw$useColorWheelState, useColorSliderState as $kF0Zw$useColorSliderState, useColorFieldState as $kF0Zw$useColorFieldState} from "@react-stately/color";
7
7
  import {useFocusRing as $kF0Zw$useFocusRing} from "@react-aria/focus";
8
- import {useLocale as $kF0Zw$useLocale} from "@react-aria/i18n";
9
8
  import {useProviderProps as $kF0Zw$useProviderProps} from "@react-spectrum/provider";
10
9
  import {Flex as $kF0Zw$Flex} from "@react-spectrum/layout";
11
10
  import {Label as $kF0Zw$Label} from "@react-spectrum/label";
12
11
  import {useFocusVisible as $kF0Zw$useFocusVisible, useFocus as $kF0Zw$useFocus} from "@react-aria/interactions";
12
+ import {useLocale as $kF0Zw$useLocale} from "@react-aria/i18n";
13
13
  import {TextFieldBase as $kF0Zw$TextFieldBase} from "@react-spectrum/textfield";
14
14
 
15
15
  function $parcel$interopDefault(a) {
@@ -157,7 +157,6 @@ $7d12200010f0192e$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_35e2c0";
157
157
 
158
158
 
159
159
 
160
-
161
160
  function $40046aa1a7ccb226$var$ColorArea(props, ref) {
162
161
  props = $kF0Zw$useProviderProps(props);
163
162
  let { isDisabled: isDisabled } = props;
@@ -167,21 +166,12 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
167
166
  let inputYRef = $kF0Zw$useRef();
168
167
  let containerRef = $kF0Zw$useFocusableRef(ref, inputXRef);
169
168
  let state = $kF0Zw$useColorAreaState(props);
170
- let { channels: { xChannel: xChannel , zChannel: zChannel } } = state;
171
169
  let { colorAreaProps: colorAreaProps , gradientProps: gradientProps , xInputProps: xInputProps , yInputProps: yInputProps , thumbProps: thumbProps } = $kF0Zw$useColorArea({
172
170
  ...props,
173
171
  inputXRef: inputXRef,
174
172
  inputYRef: inputYRef,
175
173
  containerRef: containerRef
176
174
  }, state);
177
- let { direction: direction } = $kF0Zw$useLocale();
178
- let { colorAreaStyleProps: colorAreaStyleProps , gradientStyleProps: gradientStyleProps , thumbStyleProps: thumbStyleProps } = $40046aa1a7ccb226$var$useGradients({
179
- direction: direction,
180
- state: state,
181
- xChannel: xChannel,
182
- zChannel: zChannel,
183
- isDisabled: props.isDisabled
184
- });
185
175
  let { focusProps: focusProps , isFocusVisible: isFocusVisible } = $kF0Zw$useFocusRing();
186
176
  return(/*#__PURE__*/ $kF0Zw$react.createElement("div", {
187
177
  ...colorAreaProps,
@@ -190,7 +180,7 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
190
180
  }, styleProps.className),
191
181
  ref: containerRef,
192
182
  style: {
193
- ...colorAreaStyleProps.style,
183
+ ...colorAreaProps.style,
194
184
  ...styleProps.style,
195
185
  // Workaround around https://github.com/adobe/spectrum-css/issues/1032
196
186
  width: size,
@@ -198,7 +188,6 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
198
188
  }
199
189
  }, /*#__PURE__*/ $kF0Zw$react.createElement("div", {
200
190
  ...gradientProps,
201
- ...gradientStyleProps,
202
191
  className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports)), 'spectrum-ColorArea-gradient')
203
192
  }), /*#__PURE__*/ $kF0Zw$react.createElement($3a90e89d07d7bbd5$export$a3cc47cee1c1ccc, {
204
193
  value: state.getDisplayColor(),
@@ -206,8 +195,7 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
206
195
  isDisabled: isDisabled,
207
196
  isDragging: state.isDragging,
208
197
  className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports)), 'spectrum-ColorArea-handle'),
209
- ...thumbProps,
210
- ...thumbStyleProps
198
+ ...thumbProps
211
199
  }, /*#__PURE__*/ $kF0Zw$react.createElement("div", {
212
200
  role: "presentation"
213
201
  }, /*#__PURE__*/ $kF0Zw$react.createElement("input", {
@@ -221,92 +209,6 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
221
209
  })))));
222
210
  }
223
211
  let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ $kF0Zw$react.forwardRef($40046aa1a7ccb226$var$ColorArea);
224
- // this function looks scary, but it's actually pretty quick, just generates some strings
225
- function $40046aa1a7ccb226$var$useGradients({ direction: direction , state: state , zChannel: zChannel , xChannel: xChannel , isDisabled: isDisabled }) {
226
- let orientation = [
227
- 'top',
228
- direction === 'rtl' ? 'left' : 'right'
229
- ];
230
- let dir = false;
231
- let background = {
232
- colorAreaStyles: {
233
- },
234
- gradientStyles: {
235
- }
236
- };
237
- let zValue = state.value.getChannelValue(zChannel);
238
- let maskImage;
239
- if (!isDisabled) switch(zChannel){
240
- case 'red':
241
- dir = xChannel === 'green';
242
- maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
243
- background.colorAreaStyles = {
244
- /* the background represents the green channel as a linear gradient from min to max,
245
- with the blue channel minimized, adjusted by the red channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
246
- };
247
- background.gradientStyles = {
248
- /* the foreground represents the green channel as a linear gradient from min to max,
249
- with the blue channel maximized, adjusted by the red channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
250
- /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
251
- maskImage: maskImage
252
- };
253
- break;
254
- case 'green':
255
- dir = xChannel === 'red';
256
- maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
257
- background.colorAreaStyles = {
258
- /* the background represents the red channel as a linear gradient from min to max,
259
- with the blue channel minimized, adjusted by the green channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
260
- };
261
- background.gradientStyles = {
262
- /* the foreground represents the red channel as a linear gradient from min to max,
263
- with the blue channel maximized, adjusted by the green channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
264
- /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
265
- maskImage: maskImage
266
- };
267
- break;
268
- case 'blue':
269
- dir = xChannel === 'red';
270
- maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
271
- background.colorAreaStyles = {
272
- /* the background represents the red channel as a linear gradient from min to max,
273
- with the green channel minimized, adjusted by the blue channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
274
- };
275
- background.gradientStyles = {
276
- /* the foreground represents the red channel as a linear gradient from min to max,
277
- with the green channel maximized, adjusted by the blue channel value. */ backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
278
- /* the foreground gradient is masked by a perpendicular linear gradient from black to white */ 'WebkitMaskImage': maskImage,
279
- maskImage: maskImage
280
- };
281
- break;
282
- }
283
- let { x: x , y: y } = state.getThumbPosition();
284
- if (direction === 'rtl') x = 1 - x;
285
- return {
286
- colorAreaStyleProps: {
287
- style: {
288
- position: 'relative',
289
- touchAction: 'none',
290
- ...background.colorAreaStyles
291
- }
292
- },
293
- gradientStyleProps: {
294
- style: {
295
- touchAction: 'none',
296
- ...background.gradientStyles
297
- }
298
- },
299
- thumbStyleProps: {
300
- style: {
301
- position: 'absolute',
302
- left: `${x * 100}%`,
303
- top: `${y * 100}%`,
304
- transform: 'translate(0%, 0%)',
305
- touchAction: 'none'
306
- }
307
- }
308
- };
309
- }
310
212
 
311
213
 
312
214
  var $3aac1c27203f04b5$exports = {};
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n","/*\n * Copyright 2021 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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {CSSProperties, ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputXRef = useRef();\n let inputYRef = useRef();\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {channels: {xChannel, zChannel}} = state;\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {direction} = useLocale();\n let {colorAreaStyleProps, gradientStyleProps, thumbStyleProps} = useGradients({direction, state, xChannel, zChannel, isDisabled: props.isDisabled});\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaStyleProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} {...gradientStyleProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}\n {...thumbStyleProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n\ninterface Gradients {\n colorAreaStyleProps: {\n style: CSSProperties\n },\n gradientStyleProps: {\n style: CSSProperties\n },\n thumbStyleProps: {\n style: CSSProperties\n }\n}\n\n// this function looks scary, but it's actually pretty quick, just generates some strings\nfunction useGradients({direction, state, zChannel, xChannel, isDisabled}): Gradients {\n let orientation = ['top', direction === 'rtl' ? 'left' : 'right'];\n let dir = false;\n let background = {colorAreaStyles: {}, gradientStyles: {}};\n let zValue = state.value.getChannelValue(zChannel);\n let maskImage;\n if (!isDisabled) {\n switch (zChannel) {\n case 'red': {\n dir = xChannel === 'green';\n maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n background.colorAreaStyles = {\n /* the background represents the green channel as a linear gradient from min to max,\n with the blue channel minimized, adjusted by the red channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`\n };\n background.gradientStyles = {\n /* the foreground represents the green channel as a linear gradient from min to max,\n with the blue channel maximized, adjusted by the red channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n 'WebkitMaskImage': maskImage,\n maskImage\n };\n break;\n }\n case 'green': {\n dir = xChannel === 'red';\n maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n background.colorAreaStyles = {\n /* the background represents the red channel as a linear gradient from min to max,\n with the blue channel minimized, adjusted by the green channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`\n };\n background.gradientStyles = {\n /* the foreground represents the red channel as a linear gradient from min to max,\n with the blue channel maximized, adjusted by the green channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n 'WebkitMaskImage': maskImage,\n maskImage\n };\n break;\n }\n case 'blue': {\n dir = xChannel === 'red';\n maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;\n background.colorAreaStyles = {\n /* the background represents the red channel as a linear gradient from min to max,\n with the green channel minimized, adjusted by the blue channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`\n };\n background.gradientStyles = {\n /* the foreground represents the red channel as a linear gradient from min to max,\n with the green channel maximized, adjusted by the blue channel value. */\n backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n /* the foreground gradient is masked by a perpendicular linear gradient from black to white */\n 'WebkitMaskImage': maskImage,\n maskImage\n };\n break;\n }\n }\n }\n\n let {x, y} = state.getThumbPosition();\n\n if (direction === 'rtl') {\n x = 1 - x;\n }\n\n return {\n colorAreaStyleProps: {\n style: {\n position: 'relative',\n touchAction: 'none',\n ...background.colorAreaStyles\n }\n },\n gradientStyleProps: {\n style: {\n touchAction: 'none',\n ...background.gradientStyles\n }\n },\n thumbStyleProps: {\n style: {\n position: 'absolute',\n left: `${x * 100}%`,\n top: `${y * 100}%`,\n transform: 'translate(0%, 0%)',\n touchAction: 'none'\n }\n }\n };\n}\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n value: Color,\n isDisabled?: boolean,\n isDragging?: boolean, // shows the color loupe\n isFocused?: boolean, // makes the circle larger\n className?: string,\n children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n let patternId = useId();\n\n let valueCSS = value.toString('css');\n\n return (\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isDragging})} aria-hidden=\"true\">\n <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n </pattern>\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={`url(#${patternId})`} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={valueCSS} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n </svg>\n {children}\n </div>\n );\n}\n\nexport {ColorThumb};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n\n let [wheelRadius, setWheelRadius] = useState<number | null>(null);\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.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 useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius == null) {\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 ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n // @ts-ignore\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 className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let inputRef = useRef();\n let trackRef = useRef();\n let domRef = useFocusableRef(ref, inputRef);\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n label = null;\n }\n\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n let alignLabel;\n if (vertical) {\n alignLabel = 'center';\n } else if (label != null && showValueLabel) {\n alignLabel = 'space-between';\n } else if (label != null) {\n alignLabel = 'flex-start';\n } else if (showValueLabel) {\n alignLabel = 'flex-end';\n }\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <Flex direction=\"row\" justifyContent={alignLabel}>\n <Label {...labelProps}>{label}</Label>\n {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n </Flex>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n let {\n labelProps,\n inputProps\n } = useColorField(otherProps, state, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\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\n.react-spectrum-ColorField-input {\n direction: ltr;\n text-align: start;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n","/*\n * Copyright 2021 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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputXRef = useRef();\n let inputYRef = useRef();\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n value: Color,\n isDisabled?: boolean,\n isDragging?: boolean, // shows the color loupe\n isFocused?: boolean, // makes the circle larger\n className?: string,\n children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n let patternId = useId();\n\n let valueCSS = value.toString('css');\n\n return (\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isDragging})} aria-hidden=\"true\">\n <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n </pattern>\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={`url(#${patternId})`} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={valueCSS} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n </svg>\n {children}\n </div>\n );\n}\n\nexport {ColorThumb};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n\n let [wheelRadius, setWheelRadius] = useState<number | null>(null);\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.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 useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius == null) {\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 ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n // @ts-ignore\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 className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let inputRef = useRef();\n let trackRef = useRef();\n let domRef = useFocusableRef(ref, inputRef);\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n label = null;\n }\n\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n let alignLabel;\n if (vertical) {\n alignLabel = 'center';\n } else if (label != null && showValueLabel) {\n alignLabel = 'space-between';\n } else if (label != null) {\n alignLabel = 'flex-start';\n } else if (showValueLabel) {\n alignLabel = 'flex-end';\n }\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <Flex direction=\"row\" justifyContent={alignLabel}>\n <Label {...labelProps}>{label}</Label>\n {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n </Flex>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n let {\n labelProps,\n inputProps\n } = useColorField(otherProps, state, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\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\n.react-spectrum-ColorField-input {\n direction: ltr;\n text-align: start;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;AC0FA,OAAA,IAAI,mBAAoD,sBAAsB,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACgBvI;;GAEG;AACH,OAAA,IAAI,2KAA0C,CAAC;AC0B/C;;GAEG;AACH,OAAA,IAAI,6KAA4C,CAAC;ACzFjD;;GAEG;AACH,OAAA,MAAM,wGAA0C,CAAC","sources":["packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;;ACoFA,OAAA,IAAI,mBAAoD,sBAAsB,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACsBvI;;GAEG;AACH,OAAA,IAAI,2KAA0C,CAAC;AC0B/C;;GAEG;AACH,OAAA,IAAI,6KAA4C,CAAC;ACzFjD;;GAEG;AACH,OAAA,MAAM,wGAA0C,CAAC","sources":["packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport * from './ColorArea';\nexport * from './ColorWheel';\nexport * from './ColorSlider';\nexport * from './ColorField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/color",
3
- "version": "3.0.0-nightly.3167+847af08e8",
3
+ "version": "3.0.0-nightly.3175+91ca94fe5",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -32,26 +32,26 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.6.2",
35
- "@react-aria/color": "3.0.0-nightly.3167+847af08e8",
36
- "@react-aria/focus": "3.0.0-nightly.1468+847af08e8",
37
- "@react-aria/i18n": "3.0.0-nightly.1468+847af08e8",
38
- "@react-aria/interactions": "3.0.0-nightly.1468+847af08e8",
39
- "@react-aria/slider": "3.0.7-nightly.3167+847af08e8",
40
- "@react-aria/utils": "3.0.0-nightly.1468+847af08e8",
41
- "@react-spectrum/label": "3.4.5-nightly.3167+847af08e8",
42
- "@react-spectrum/layout": "3.2.5-nightly.3167+847af08e8",
43
- "@react-spectrum/textfield": "3.0.0-nightly.1468+847af08e8",
44
- "@react-spectrum/utils": "3.0.0-nightly.1468+847af08e8",
45
- "@react-stately/color": "3.0.0-nightly.3167+847af08e8",
46
- "@react-stately/slider": "3.0.7-nightly.3167+847af08e8",
47
- "@react-stately/utils": "3.0.0-nightly.1468+847af08e8",
48
- "@react-types/color": "3.0.0-nightly.3167+847af08e8",
49
- "@react-types/shared": "3.0.0-nightly.1468+847af08e8",
50
- "@react-types/slider": "3.0.6-nightly.3167+847af08e8",
51
- "@react-types/textfield": "3.0.0-nightly.1468+847af08e8"
35
+ "@react-aria/color": "3.0.0-nightly.3175+91ca94fe5",
36
+ "@react-aria/focus": "3.0.0-nightly.1476+91ca94fe5",
37
+ "@react-aria/i18n": "3.0.0-nightly.1476+91ca94fe5",
38
+ "@react-aria/interactions": "3.0.0-nightly.1476+91ca94fe5",
39
+ "@react-aria/slider": "3.0.7-nightly.3175+91ca94fe5",
40
+ "@react-aria/utils": "3.0.0-nightly.1476+91ca94fe5",
41
+ "@react-spectrum/label": "3.4.5-nightly.3175+91ca94fe5",
42
+ "@react-spectrum/layout": "3.2.5-nightly.3175+91ca94fe5",
43
+ "@react-spectrum/textfield": "3.0.0-nightly.1476+91ca94fe5",
44
+ "@react-spectrum/utils": "3.0.0-nightly.1476+91ca94fe5",
45
+ "@react-stately/color": "3.0.0-nightly.3175+91ca94fe5",
46
+ "@react-stately/slider": "3.0.7-nightly.3175+91ca94fe5",
47
+ "@react-stately/utils": "3.0.0-nightly.1476+91ca94fe5",
48
+ "@react-types/color": "3.0.0-nightly.3175+91ca94fe5",
49
+ "@react-types/shared": "3.0.0-nightly.1476+91ca94fe5",
50
+ "@react-types/slider": "3.0.6-nightly.3175+91ca94fe5",
51
+ "@react-types/textfield": "3.0.0-nightly.1476+91ca94fe5"
52
52
  },
53
53
  "devDependencies": {
54
- "@adobe/spectrum-css-temp": "3.0.0-nightly.1468+847af08e8"
54
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.1476+91ca94fe5"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "@react-spectrum/provider": "^3.0.0",
@@ -61,5 +61,5 @@
61
61
  "publishConfig": {
62
62
  "access": "public"
63
63
  },
64
- "gitHead": "847af08e81d798761328d3d7e5014a27206a6c87"
64
+ "gitHead": "91ca94fe52840b7a32b961ec08208f5fbdf65697"
65
65
  }
package/src/ColorArea.tsx CHANGED
@@ -14,13 +14,12 @@ import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react
14
14
  import {ColorThumb} from './ColorThumb';
15
15
  import {FocusableRef} from '@react-types/shared';
16
16
  import {mergeProps} from '@react-aria/utils';
17
- import React, {CSSProperties, ReactElement, useRef} from 'react';
17
+ import React, {ReactElement, useRef} from 'react';
18
18
  import {SpectrumColorAreaProps} from '@react-types/color';
19
19
  import styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';
20
20
  import {useColorArea} from '@react-aria/color';
21
21
  import {useColorAreaState} from '@react-stately/color';
22
22
  import {useFocusRing} from '@react-aria/focus';
23
- import {useLocale} from '@react-aria/i18n';
24
23
  import {useProviderProps} from '@react-spectrum/provider';
25
24
 
26
25
  function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {
@@ -36,7 +35,6 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
36
35
 
37
36
  let state = useColorAreaState(props);
38
37
 
39
- let {channels: {xChannel, zChannel}} = state;
40
38
  let {
41
39
  colorAreaProps,
42
40
  gradientProps,
@@ -44,9 +42,6 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
44
42
  yInputProps,
45
43
  thumbProps
46
44
  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);
47
- let {direction} = useLocale();
48
- let {colorAreaStyleProps, gradientStyleProps, thumbStyleProps} = useGradients({direction, state, xChannel, zChannel, isDisabled: props.isDisabled});
49
-
50
45
  let {focusProps, isFocusVisible} = useFocusRing();
51
46
 
52
47
  return (
@@ -64,21 +59,20 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
64
59
  }
65
60
  ref={containerRef}
66
61
  style={{
67
- ...colorAreaStyleProps.style,
62
+ ...colorAreaProps.style,
68
63
  ...styleProps.style,
69
64
  // Workaround around https://github.com/adobe/spectrum-css/issues/1032
70
65
  width: size,
71
66
  height: size
72
67
  }}>
73
- <div {...gradientProps} {...gradientStyleProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />
68
+ <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />
74
69
  <ColorThumb
75
70
  value={state.getDisplayColor()}
76
71
  isFocused={isFocusVisible}
77
72
  isDisabled={isDisabled}
78
73
  isDragging={state.isDragging}
79
74
  className={classNames(styles, 'spectrum-ColorArea-handle')}
80
- {...thumbProps}
81
- {...thumbStyleProps}>
75
+ {...thumbProps}>
82
76
  <div role="presentation">
83
77
  <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />
84
78
  <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />
@@ -90,113 +84,3 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
90
84
 
91
85
  let _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;
92
86
  export {_ColorArea as ColorArea};
93
-
94
- interface Gradients {
95
- colorAreaStyleProps: {
96
- style: CSSProperties
97
- },
98
- gradientStyleProps: {
99
- style: CSSProperties
100
- },
101
- thumbStyleProps: {
102
- style: CSSProperties
103
- }
104
- }
105
-
106
- // this function looks scary, but it's actually pretty quick, just generates some strings
107
- function useGradients({direction, state, zChannel, xChannel, isDisabled}): Gradients {
108
- let orientation = ['top', direction === 'rtl' ? 'left' : 'right'];
109
- let dir = false;
110
- let background = {colorAreaStyles: {}, gradientStyles: {}};
111
- let zValue = state.value.getChannelValue(zChannel);
112
- let maskImage;
113
- if (!isDisabled) {
114
- switch (zChannel) {
115
- case 'red': {
116
- dir = xChannel === 'green';
117
- maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
118
- background.colorAreaStyles = {
119
- /* the background represents the green channel as a linear gradient from min to max,
120
- with the blue channel minimized, adjusted by the red channel value. */
121
- backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
122
- };
123
- background.gradientStyles = {
124
- /* the foreground represents the green channel as a linear gradient from min to max,
125
- with the blue channel maximized, adjusted by the red channel value. */
126
- backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
127
- /* the foreground gradient is masked by a perpendicular linear gradient from black to white */
128
- 'WebkitMaskImage': maskImage,
129
- maskImage
130
- };
131
- break;
132
- }
133
- case 'green': {
134
- dir = xChannel === 'red';
135
- maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
136
- background.colorAreaStyles = {
137
- /* the background represents the red channel as a linear gradient from min to max,
138
- with the blue channel minimized, adjusted by the green channel value. */
139
- backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
140
- };
141
- background.gradientStyles = {
142
- /* the foreground represents the red channel as a linear gradient from min to max,
143
- with the blue channel maximized, adjusted by the green channel value. */
144
- backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
145
- /* the foreground gradient is masked by a perpendicular linear gradient from black to white */
146
- 'WebkitMaskImage': maskImage,
147
- maskImage
148
- };
149
- break;
150
- }
151
- case 'blue': {
152
- dir = xChannel === 'red';
153
- maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
154
- background.colorAreaStyles = {
155
- /* the background represents the red channel as a linear gradient from min to max,
156
- with the green channel minimized, adjusted by the blue channel value. */
157
- backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
158
- };
159
- background.gradientStyles = {
160
- /* the foreground represents the red channel as a linear gradient from min to max,
161
- with the green channel maximized, adjusted by the blue channel value. */
162
- backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
163
- /* the foreground gradient is masked by a perpendicular linear gradient from black to white */
164
- 'WebkitMaskImage': maskImage,
165
- maskImage
166
- };
167
- break;
168
- }
169
- }
170
- }
171
-
172
- let {x, y} = state.getThumbPosition();
173
-
174
- if (direction === 'rtl') {
175
- x = 1 - x;
176
- }
177
-
178
- return {
179
- colorAreaStyleProps: {
180
- style: {
181
- position: 'relative',
182
- touchAction: 'none',
183
- ...background.colorAreaStyles
184
- }
185
- },
186
- gradientStyleProps: {
187
- style: {
188
- touchAction: 'none',
189
- ...background.gradientStyles
190
- }
191
- },
192
- thumbStyleProps: {
193
- style: {
194
- position: 'absolute',
195
- left: `${x * 100}%`,
196
- top: `${y * 100}%`,
197
- transform: 'translate(0%, 0%)',
198
- touchAction: 'none'
199
- }
200
- }
201
- };
202
- }