@react-aria/color 3.0.9 → 3.1.1

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;ACwBA;IACE,kDAAkD;IAClD,cAAc,EAAE,aAAa,CAAC;IAC9B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,oEAAoE;IACpE,WAAW,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IACnD,kEAAkE;IAClE,WAAW,EAAE,oBAAoB,gBAAgB,CAAC,CAAA;CACnD;AAED,qCAAsC,SAAQ,kBAAkB;IAC9D,uEAAuE;IACvE,SAAS,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,uEAAuE;IACvE,SAAS,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,kDAAkD;IAClD,YAAY,EAAE,UAAU,OAAO,GAAG,IAAI,CAAC,CAAA;CACxC;AAED;;;GAGG;AACH,6BAA6B,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,cAAc,GAAG,aAAa,CAoa9F;AC/bD,uCAAwC,SAAQ,oBAAoB;IAClE,mCAAmC;IACnC,QAAQ,EAAE,UAAU,OAAO,GAAG,IAAI,CAAC,CAAC;IACpC,mCAAmC;IACnC,QAAQ,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,CAAA;CAC7C;AAED;IACE,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,yDAAyD;IACzD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,8EAA8E;IAC9E,WAAW,EAAE,aAAa,CAAA;CAC3B;AAED;;;GAGG;AACH,+BAA+B,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,gBAAgB,GAAG,eAAe,CAwGtG;AChID,sCAAuC,SAAQ,mBAAmB;IAChE,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAA;CACpB;AAED;IACE,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,yDAAyD;IACzD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAA;CAClD;AAED;;;GAGG;AACH,8BAA8B,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,cAAc,CAwShJ;ACrTD,+BAAgC,SAAQ,gBAAgB;IACtD,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,8DAA8D;IAC9D,gBAAgB,EAAE,aAAa,CAAC;IAChC,gEAAgE;IAChE,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;GAGG;AACH,8BACE,KAAK,EAAE,mBAAmB,EAC1B,KAAK,EAAE,eAAe,EACtB,GAAG,EAAE,YAAU,gBAAgB,GAAG,IAAI,CAAC,GACtC,cAAc,CA0FhB;ACpHD,qCAAsC,SAAQ,iBAAiB,EAAE,QAAQ;IACvE,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;IACE,0CAA0C;IAC1C,gBAAgB,EAAE,eAAe,WAAW,CAAC,CAAC;IAC9C,4CAA4C;IAC5C,KAAK,EAAE,KAAK,CAAA;CACb;AAED;;;GAGG;AACH,+BAA+B,KAAK,EAAE,oBAAoB,GAAG,eAAe,CA6B3E;ACxDD,2CAA4C,SAAQ,sBAAsB,EAAE,iBAAiB;CAAG;AAChG,sCAAuC,SAAQ,eAAe;CAAG;AAEjE;;;GAGG;AACH,qCAAqC,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,sBAAsB,EAAE,QAAQ,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,qBAAqB,CAW1K;ACfD,YAAY,EAAC,kBAAkB,EAAE,mBAAmB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-aria/color/src/packages/@react-aria/color/src/useColorAreaGradient.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorArea.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorSlider.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorWheel.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorField.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorSwatch.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorChannelField.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/index.ts","packages/@react-aria/color/src/index.ts"],"sourcesContent":[null,null,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 */\nexport {useColorArea} from './useColorArea';\nexport {useColorSlider} from './useColorSlider';\nexport {useColorWheel} from './useColorWheel';\nexport {useColorField} from './useColorField';\nexport {useColorSwatch} from './useColorSwatch';\nexport {useColorChannelField} from './useColorChannelField';\nexport type {AriaColorAreaOptions, ColorAreaAria} from './useColorArea';\nexport type {AriaColorSliderOptions, ColorSliderAria} from './useColorSlider';\nexport type {AriaColorWheelOptions, ColorWheelAria} from './useColorWheel';\nexport type {AriaColorAreaProps, AriaColorFieldProps, AriaColorSliderProps} from '@react-types/color';\nexport type {ColorFieldAria} from './useColorField';\nexport type {AriaColorSwatchProps, ColorSwatchAria} from './useColorSwatch';\nexport type {AriaColorChannelFieldProps, ColorChannelFieldAria} from './useColorChannelField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-aria/color/src/packages/@react-aria/color/src/useColorAreaGradient.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorArea.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorSlider.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorWheel.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorField.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorSwatch.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorChannelField.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/index.ts","packages/@react-aria/color/src/index.ts"],"sourcesContent":[null,null,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 */\nexport {useColorArea} from './useColorArea';\nexport {useColorSlider} from './useColorSlider';\nexport {useColorWheel} from './useColorWheel';\nexport {useColorField} from './useColorField';\nexport {useColorSwatch} from './useColorSwatch';\nexport {useColorChannelField} from './useColorChannelField';\nexport type {AriaColorAreaOptions, ColorAreaAria} from './useColorArea';\nexport type {AriaColorSliderOptions, ColorSliderAria} from './useColorSlider';\nexport type {AriaColorWheelOptions, ColorWheelAria} from './useColorWheel';\nexport type {AriaColorAreaProps, AriaColorFieldProps, AriaColorSliderProps} from '@react-types/color';\nexport type {ColorFieldAria} from './useColorField';\nexport type {AriaColorSwatchProps, ColorSwatchAria} from './useColorSwatch';\nexport type {AriaColorChannelFieldProps, ColorChannelFieldAria} from './useColorChannelField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/useColorArea.main.js

@@ -34,7 +34,7 @@ $parcel$export(module.exports, "useColorArea", () => $47925bd68062ac17$export$2f
 
 
 function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, 'aria-label': ariaLabel, xName: xName, yName: yName } = props;
+    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, 'aria-label': ariaLabel, xName: xName, yName: yName, form: form } = props;
     let stringFormatter = (0, $fZxfU$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4a33e168940636d5$exports))), '@react-aria/color');
     let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $fZxfU$reactariautils.useGlobalListeners)();
     let { direction: direction, locale: locale } = (0, $fZxfU$reactariai18n.useLocale)();
@@ -44,13 +44,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
     }, [
         inputXRef
     ]);
-    (0, $fZxfU$reactariautils.useFormReset)(inputXRef, [
-        state.xValue,
-        state.yValue
-    ], ([x, y])=>{
-        let newColor = state.value.withChannelValue(state.channels.xChannel, x).withChannelValue(state.channels.yChannel, y);
-        state.setValue(newColor);
-    });
+    (0, $fZxfU$reactariautils.useFormReset)(inputXRef, state.defaultValue, state.setValue);
     let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $fZxfU$react.useState)(false);
     let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = (0, $fZxfU$react.useState)(false);
     let { xChannel: xChannel, yChannel: yChannel, zChannel: zChannel } = state.channels;
@@ -365,6 +359,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             disabled: isDisabled,
             value: state.value.getChannelValue(xChannel),
             name: xName,
+            form: form,
             tabIndex: isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1,
             /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
@@ -389,6 +384,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             disabled: isDisabled,
             value: state.value.getChannelValue(yChannel),
             name: yName,
+            form: form,
             tabIndex: isMobile || focusedInput === 'y' ? undefined : -1,
             /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,

package/dist/useColorArea.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/color/src/useColorArea.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorAreaProps, ColorChannel} from '@react-types/color';\nimport {ColorAreaState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef, useState} from 'react';\nimport {useColorAreaGradient} from './useColorAreaGradient';\nimport {useFocus, useFocusWithin, useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface ColorAreaAria {\n  /** Props for the color area container element. */\n  colorAreaProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden horizontal range input element. */\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the visually hidden vertical range input element. */\n  yInputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\nexport interface AriaColorAreaOptions extends AriaColorAreaProps {\n  /** A ref to the input that represents the x axis of the color area. */\n  inputXRef: RefObject<HTMLInputElement | null>,\n  /** A ref to the input that represents the y axis of the color area. */\n  inputYRef: RefObject<HTMLInputElement | null>,\n  /** A ref to the color area containing element. */\n  containerRef: RefObject<Element | null>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color area component.\n * Color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState): ColorAreaAria {\n  let {\n    isDisabled,\n    inputXRef,\n    inputYRef,\n    containerRef,\n    'aria-label': ariaLabel,\n    xName,\n    yName\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let {direction, locale} = useLocale();\n\n  let [focusedInput, setFocusedInput] = useState<'x' | 'y' | null>(null);\n  let focusInput = useCallback((inputRef:RefObject<HTMLInputElement | null> = inputXRef) => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputXRef]);\n\n  useFormReset(inputXRef, [state.xValue, state.yValue], ([x, y]) => {\n    let newColor = state.value\n      .withChannelValue(state.channels.xChannel, x)\n      .withChannelValue(state.channels.yChannel, y);\n    state.setValue(newColor);\n  });\n\n  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);\n  let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);\n  let {xChannel, yChannel, zChannel} = state.channels;\n  let xChannelStep = state.xChannelStep;\n  let yChannelStep = state.yChannelStep;\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      setValueChangedViaKeyboard(true);\n      let dir;\n      switch (e.key) {\n        case 'PageUp':\n          state.incrementY(state.yChannelPageStep);\n          dir = 'y';\n          break;\n        case 'PageDown':\n          state.decrementY(state.yChannelPageStep);\n          dir = 'y';\n          break;\n        case 'Home':\n          direction === 'rtl' ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n        case 'End':\n          direction === 'rtl' ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n      }\n      state.setDragging(false);\n      if (dir) {\n        let input = dir === 'x' ? inputXRef : inputYRef;\n        focusInput(input);\n        setFocusedInput(dir);\n      }\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      let {\n        incrementX,\n        decrementX,\n        incrementY,\n        decrementY,\n        xChannelPageStep,\n        xChannelStep,\n        yChannelPageStep,\n        yChannelStep,\n        getThumbPosition,\n        setColorFromPoint\n      } = state;\n      if (currentPosition.current == null) {\n        currentPosition.current = getThumbPosition();\n      }\n      let {width, height} = containerRef.current?.getBoundingClientRect() || {width: 0, height: 0};\n      let valueChanged = deltaX !== 0 || deltaY !== 0;\n      if (pointerType === 'keyboard') {\n        let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;\n        let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;\n        if ((deltaX > 0 && direction === 'ltr') || (deltaX < 0 && direction === 'rtl')) {\n          incrementX(deltaXValue);\n        } else if ((deltaX < 0 && direction === 'ltr') || (deltaX > 0 && direction === 'rtl')) {\n          decrementX(deltaXValue);\n        } else if (deltaY > 0) {\n          decrementY(deltaYValue);\n        } else if (deltaY < 0) {\n          incrementY(deltaYValue);\n        }\n        setValueChangedViaKeyboard(valueChanged);\n        // set the focused input based on which axis has the greater delta\n        focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? 'y' : 'x';\n        setFocusedInput(focusedInput);\n      } else {\n        currentPosition.current.x += (direction === 'rtl' ? -1 : 1) * deltaX / width ;\n        currentPosition.current.y += deltaY / height;\n        setColorFromPoint(currentPosition.current.x, currentPosition.current.y);\n      }\n    },\n    onMoveEnd() {\n      isOnColorArea.current = false;\n      state.setDragging(false);\n      let input = focusedInput === 'x' ? inputXRef : inputYRef;\n      focusInput(input);\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithinChange: (focusWithin:boolean) => {\n      if (!focusWithin) {\n        setValueChangedViaKeyboard(false);\n        setValueChangedViaInputChangeEvent(false);\n      }\n    }\n  });\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnColorArea = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnColorArea.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnColorArea.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnColorArea.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      setValueChangedViaKeyboard(false);\n      focusInput();\n      state.setDragging(true);\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      setValueChangedViaKeyboard(false);\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnColorArea.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onColorAreaDown = (colorArea: Element, id: number | null | undefined, clientX: number, clientY: number) => {\n    let rect = colorArea.getBoundingClientRect();\n    let {width, height} = rect;\n    let x = (clientX - rect.x) / width;\n    let y = (clientY - rect.y) / height;\n    if (direction === 'rtl') {\n      x = 1 - x;\n    }\n    if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {\n      isOnColorArea.current = true;\n      setValueChangedViaKeyboard(false);\n      currentPointer.current = id;\n      state.setColorFromPoint(x, y);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onColorAreaUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onColorAreaUp, false);\n        addGlobalListener(window, 'touchend', onColorAreaUp, false);\n      }\n    }\n  };\n\n  let onColorAreaUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnColorArea.current && id === currentPointer.current) {\n      isOnColorArea.current = false;\n      setValueChangedViaKeyboard(false);\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onColorAreaUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onColorAreaUp, false);\n        removeGlobalListener(window, 'touchend', onColorAreaUp, false);\n      }\n    }\n  };\n\n  let colorAreaInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onColorAreaDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onColorAreaDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onThumbDown(e.pointerId);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onThumbDown(undefined);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onThumbDown(e.changedTouches[0].identifier);\n        }\n      })\n  }, focusWithinProps, keyboardProps, movePropsThumb);\n\n  let {focusProps: xInputFocusProps} = useFocus({\n    onFocus: () => {\n      setFocusedInput('x');\n    }\n  });\n\n  let {focusProps: yInputFocusProps} = useFocus({\n    onFocus: () => {\n      setFocusedInput('y');\n    }\n  });\n\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const {target} = e;\n    setValueChangedViaInputChangeEvent(true);\n    if (target === inputXRef.current) {\n      state.setXValue(parseFloat(target.value));\n    } else if (target === inputYRef.current) {\n      state.setYValue(parseFloat(target.value));\n    }\n  };\n\n  let isMobile = isIOS() || isAndroid();\n\n  let value = state.getDisplayColor();\n  const getAriaValueTextForChannel = useCallback((channel:ColorChannel) => {\n    const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;\n    return `${\n      isAfterInput ?\n      stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)})\n      :\n      [\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)}),\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale), value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)}),\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(zChannel, locale), value: value.formatChannelValue(zChannel, locale)})\n      ].join(', ')\n    }, ${value.getColorName(locale)}`;\n  }, [locale, value, stringFormatter, valueChangedViaInputChangeEvent, valueChangedViaKeyboard, xChannel, yChannel, zChannel]);\n\n  let colorPickerLabel = stringFormatter.format('colorPicker');\n\n  let xInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel\n  });\n\n  let yInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel\n  });\n\n  let colorAreaLabellingProps = useLabels(\n    {\n      ...props,\n      'aria-label': ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined\n    },\n    isMobile ? colorPickerLabel : undefined\n  );\n\n  let ariaRoleDescription = stringFormatter.format('twoDimensionalSlider');\n\n  let {visuallyHiddenProps} = useVisuallyHidden({style: {\n    opacity: '0.0001',\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none'\n  }});\n\n  let {\n    colorAreaStyleProps,\n    thumbStyleProps\n  } = useColorAreaGradient({\n    direction,\n    state,\n    xChannel,\n    yChannel,\n    zChannel\n  });\n\n  return {\n    colorAreaProps: {\n      ...colorAreaLabellingProps,\n      ...colorAreaInteractions,\n      ...colorAreaStyleProps,\n      role: 'group'\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      ...thumbStyleProps,\n      role: 'presentation'\n    },\n    xInputProps: {\n      ...xInputLabellingProps,\n      ...visuallyHiddenProps,\n      ...xInputFocusProps,\n      type: 'range',\n      min: state.value.getChannelRange(xChannel).minValue,\n      max: state.value.getChannelRange(xChannel).maxValue,\n      step: xChannelStep,\n      'aria-roledescription': ariaRoleDescription,\n      'aria-valuetext': getAriaValueTextForChannel(xChannel),\n      'aria-orientation': 'horizontal',\n      'aria-describedby': props['aria-describedby'],\n      'aria-details': props['aria-details'],\n      disabled: isDisabled,\n      value: state.value.getChannelValue(xChannel),\n      name: xName,\n      tabIndex: (isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1),\n      /*\n        So that only a single \"2d slider\" control shows up when listing form elements for screen readers,\n        add aria-hidden=\"true\" to the unfocused control when the value has not changed via the keyboard,\n        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.\n      */\n      'aria-hidden': (isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard ? undefined : 'true'),\n      onChange\n    },\n    yInputProps: {\n      ...yInputLabellingProps,\n      ...visuallyHiddenProps,\n      ...yInputFocusProps,\n      type: 'range',\n      min: state.value.getChannelRange(yChannel).minValue,\n      max: state.value.getChannelRange(yChannel).maxValue,\n      step: yChannelStep,\n      'aria-roledescription': ariaRoleDescription,\n      'aria-valuetext': getAriaValueTextForChannel(yChannel),\n      'aria-orientation': 'vertical',\n      'aria-describedby': props['aria-describedby'],\n      'aria-details': props['aria-details'],\n      disabled: isDisabled,\n      value: state.value.getChannelValue(yChannel),\n      name: yName,\n      tabIndex: (isMobile || focusedInput === 'y' ? undefined : -1),\n      /*\n        So that only a single \"2d slider\" control shows up when listing form elements for screen readers,\n        add aria-hidden=\"true\" to the unfocused input when the value has not changed via the keyboard,\n        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.\n      */\n      'aria-hidden': (isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true'),\n      onChange\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorArea.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/color/src/useColorArea.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorAreaProps, ColorChannel} from '@react-types/color';\nimport {ColorAreaState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef, useState} from 'react';\nimport {useColorAreaGradient} from './useColorAreaGradient';\nimport {useFocus, useFocusWithin, useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface ColorAreaAria {\n  /** Props for the color area container element. */\n  colorAreaProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden horizontal range input element. */\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the visually hidden vertical range input element. */\n  yInputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\nexport interface AriaColorAreaOptions extends AriaColorAreaProps {\n  /** A ref to the input that represents the x axis of the color area. */\n  inputXRef: RefObject<HTMLInputElement | null>,\n  /** A ref to the input that represents the y axis of the color area. */\n  inputYRef: RefObject<HTMLInputElement | null>,\n  /** A ref to the color area containing element. */\n  containerRef: RefObject<Element | null>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color area component.\n * Color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState): ColorAreaAria {\n  let {\n    isDisabled,\n    inputXRef,\n    inputYRef,\n    containerRef,\n    'aria-label': ariaLabel,\n    xName,\n    yName,\n    form\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let {direction, locale} = useLocale();\n\n  let [focusedInput, setFocusedInput] = useState<'x' | 'y' | null>(null);\n  let focusInput = useCallback((inputRef:RefObject<HTMLInputElement | null> = inputXRef) => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputXRef]);\n\n  useFormReset(inputXRef, state.defaultValue, state.setValue);\n\n  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);\n  let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);\n  let {xChannel, yChannel, zChannel} = state.channels;\n  let xChannelStep = state.xChannelStep;\n  let yChannelStep = state.yChannelStep;\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      setValueChangedViaKeyboard(true);\n      let dir;\n      switch (e.key) {\n        case 'PageUp':\n          state.incrementY(state.yChannelPageStep);\n          dir = 'y';\n          break;\n        case 'PageDown':\n          state.decrementY(state.yChannelPageStep);\n          dir = 'y';\n          break;\n        case 'Home':\n          direction === 'rtl' ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n        case 'End':\n          direction === 'rtl' ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n      }\n      state.setDragging(false);\n      if (dir) {\n        let input = dir === 'x' ? inputXRef : inputYRef;\n        focusInput(input);\n        setFocusedInput(dir);\n      }\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      let {\n        incrementX,\n        decrementX,\n        incrementY,\n        decrementY,\n        xChannelPageStep,\n        xChannelStep,\n        yChannelPageStep,\n        yChannelStep,\n        getThumbPosition,\n        setColorFromPoint\n      } = state;\n      if (currentPosition.current == null) {\n        currentPosition.current = getThumbPosition();\n      }\n      let {width, height} = containerRef.current?.getBoundingClientRect() || {width: 0, height: 0};\n      let valueChanged = deltaX !== 0 || deltaY !== 0;\n      if (pointerType === 'keyboard') {\n        let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;\n        let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;\n        if ((deltaX > 0 && direction === 'ltr') || (deltaX < 0 && direction === 'rtl')) {\n          incrementX(deltaXValue);\n        } else if ((deltaX < 0 && direction === 'ltr') || (deltaX > 0 && direction === 'rtl')) {\n          decrementX(deltaXValue);\n        } else if (deltaY > 0) {\n          decrementY(deltaYValue);\n        } else if (deltaY < 0) {\n          incrementY(deltaYValue);\n        }\n        setValueChangedViaKeyboard(valueChanged);\n        // set the focused input based on which axis has the greater delta\n        focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? 'y' : 'x';\n        setFocusedInput(focusedInput);\n      } else {\n        currentPosition.current.x += (direction === 'rtl' ? -1 : 1) * deltaX / width ;\n        currentPosition.current.y += deltaY / height;\n        setColorFromPoint(currentPosition.current.x, currentPosition.current.y);\n      }\n    },\n    onMoveEnd() {\n      isOnColorArea.current = false;\n      state.setDragging(false);\n      let input = focusedInput === 'x' ? inputXRef : inputYRef;\n      focusInput(input);\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithinChange: (focusWithin:boolean) => {\n      if (!focusWithin) {\n        setValueChangedViaKeyboard(false);\n        setValueChangedViaInputChangeEvent(false);\n      }\n    }\n  });\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnColorArea = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnColorArea.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnColorArea.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnColorArea.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      setValueChangedViaKeyboard(false);\n      focusInput();\n      state.setDragging(true);\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      setValueChangedViaKeyboard(false);\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnColorArea.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onColorAreaDown = (colorArea: Element, id: number | null | undefined, clientX: number, clientY: number) => {\n    let rect = colorArea.getBoundingClientRect();\n    let {width, height} = rect;\n    let x = (clientX - rect.x) / width;\n    let y = (clientY - rect.y) / height;\n    if (direction === 'rtl') {\n      x = 1 - x;\n    }\n    if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {\n      isOnColorArea.current = true;\n      setValueChangedViaKeyboard(false);\n      currentPointer.current = id;\n      state.setColorFromPoint(x, y);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onColorAreaUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onColorAreaUp, false);\n        addGlobalListener(window, 'touchend', onColorAreaUp, false);\n      }\n    }\n  };\n\n  let onColorAreaUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnColorArea.current && id === currentPointer.current) {\n      isOnColorArea.current = false;\n      setValueChangedViaKeyboard(false);\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onColorAreaUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onColorAreaUp, false);\n        removeGlobalListener(window, 'touchend', onColorAreaUp, false);\n      }\n    }\n  };\n\n  let colorAreaInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onColorAreaDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onColorAreaDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onThumbDown(e.pointerId);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onThumbDown(undefined);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onThumbDown(e.changedTouches[0].identifier);\n        }\n      })\n  }, focusWithinProps, keyboardProps, movePropsThumb);\n\n  let {focusProps: xInputFocusProps} = useFocus({\n    onFocus: () => {\n      setFocusedInput('x');\n    }\n  });\n\n  let {focusProps: yInputFocusProps} = useFocus({\n    onFocus: () => {\n      setFocusedInput('y');\n    }\n  });\n\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const {target} = e;\n    setValueChangedViaInputChangeEvent(true);\n    if (target === inputXRef.current) {\n      state.setXValue(parseFloat(target.value));\n    } else if (target === inputYRef.current) {\n      state.setYValue(parseFloat(target.value));\n    }\n  };\n\n  let isMobile = isIOS() || isAndroid();\n\n  let value = state.getDisplayColor();\n  const getAriaValueTextForChannel = useCallback((channel:ColorChannel) => {\n    const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;\n    return `${\n      isAfterInput ?\n      stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)})\n      :\n      [\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)}),\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale), value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)}),\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(zChannel, locale), value: value.formatChannelValue(zChannel, locale)})\n      ].join(', ')\n    }, ${value.getColorName(locale)}`;\n  }, [locale, value, stringFormatter, valueChangedViaInputChangeEvent, valueChangedViaKeyboard, xChannel, yChannel, zChannel]);\n\n  let colorPickerLabel = stringFormatter.format('colorPicker');\n\n  let xInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel\n  });\n\n  let yInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel\n  });\n\n  let colorAreaLabellingProps = useLabels(\n    {\n      ...props,\n      'aria-label': ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined\n    },\n    isMobile ? colorPickerLabel : undefined\n  );\n\n  let ariaRoleDescription = stringFormatter.format('twoDimensionalSlider');\n\n  let {visuallyHiddenProps} = useVisuallyHidden({style: {\n    opacity: '0.0001',\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none'\n  }});\n\n  let {\n    colorAreaStyleProps,\n    thumbStyleProps\n  } = useColorAreaGradient({\n    direction,\n    state,\n    xChannel,\n    yChannel,\n    zChannel\n  });\n\n  return {\n    colorAreaProps: {\n      ...colorAreaLabellingProps,\n      ...colorAreaInteractions,\n      ...colorAreaStyleProps,\n      role: 'group'\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      ...thumbStyleProps,\n      role: 'presentation'\n    },\n    xInputProps: {\n      ...xInputLabellingProps,\n      ...visuallyHiddenProps,\n      ...xInputFocusProps,\n      type: 'range',\n      min: state.value.getChannelRange(xChannel).minValue,\n      max: state.value.getChannelRange(xChannel).maxValue,\n      step: xChannelStep,\n      'aria-roledescription': ariaRoleDescription,\n      'aria-valuetext': getAriaValueTextForChannel(xChannel),\n      'aria-orientation': 'horizontal',\n      'aria-describedby': props['aria-describedby'],\n      'aria-details': props['aria-details'],\n      disabled: isDisabled,\n      value: state.value.getChannelValue(xChannel),\n      name: xName,\n      form,\n      tabIndex: (isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1),\n      /*\n        So that only a single \"2d slider\" control shows up when listing form elements for screen readers,\n        add aria-hidden=\"true\" to the unfocused control when the value has not changed via the keyboard,\n        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.\n      */\n      'aria-hidden': (isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard ? undefined : 'true'),\n      onChange\n    },\n    yInputProps: {\n      ...yInputLabellingProps,\n      ...visuallyHiddenProps,\n      ...yInputFocusProps,\n      type: 'range',\n      min: state.value.getChannelRange(yChannel).minValue,\n      max: state.value.getChannelRange(yChannel).maxValue,\n      step: yChannelStep,\n      'aria-roledescription': ariaRoleDescription,\n      'aria-valuetext': getAriaValueTextForChannel(yChannel),\n      'aria-orientation': 'vertical',\n      'aria-describedby': props['aria-describedby'],\n      'aria-details': props['aria-details'],\n      disabled: isDisabled,\n      value: state.value.getChannelValue(yChannel),\n      name: yName,\n      form,\n      tabIndex: (isMobile || focusedInput === 'y' ? undefined : -1),\n      /*\n        So that only a single \"2d slider\" control shows up when listing form elements for screen readers,\n        add aria-hidden=\"true\" to the unfocused input when the value has not changed via the keyboard,\n        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.\n      */\n      'aria-hidden': (isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true'),\n      onChange\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorArea.main.js.map"}

package/dist/useColorArea.mjs

@@ -28,7 +28,7 @@ function $parcel$interopDefault(a) {
 
 
 function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, 'aria-label': ariaLabel, xName: xName, yName: yName } = props;
+    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, 'aria-label': ariaLabel, xName: xName, yName: yName, form: form } = props;
     let stringFormatter = (0, $8t1z9$useLocalizedStringFormatter)((0, ($parcel$interopDefault($8t1z9$intlStringsmodulejs))), '@react-aria/color');
     let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $8t1z9$useGlobalListeners)();
     let { direction: direction, locale: locale } = (0, $8t1z9$useLocale)();
@@ -38,13 +38,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     }, [
         inputXRef
     ]);
-    (0, $8t1z9$useFormReset)(inputXRef, [
-        state.xValue,
-        state.yValue
-    ], ([x, y])=>{
-        let newColor = state.value.withChannelValue(state.channels.xChannel, x).withChannelValue(state.channels.yChannel, y);
-        state.setValue(newColor);
-    });
+    (0, $8t1z9$useFormReset)(inputXRef, state.defaultValue, state.setValue);
     let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $8t1z9$useState)(false);
     let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = (0, $8t1z9$useState)(false);
     let { xChannel: xChannel, yChannel: yChannel, zChannel: zChannel } = state.channels;
@@ -359,6 +353,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             disabled: isDisabled,
             value: state.value.getChannelValue(xChannel),
             name: xName,
+            form: form,
             tabIndex: isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1,
             /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
@@ -383,6 +378,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             disabled: isDisabled,
             value: state.value.getChannelValue(yChannel),
             name: yName,
+            form: form,
             tabIndex: isMobile || focusedInput === 'y' ? undefined : -1,
             /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,

package/dist/useColorArea.module.js

@@ -28,7 +28,7 @@ function $parcel$interopDefault(a) {
 
 
 function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, 'aria-label': ariaLabel, xName: xName, yName: yName } = props;
+    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, 'aria-label': ariaLabel, xName: xName, yName: yName, form: form } = props;
     let stringFormatter = (0, $8t1z9$useLocalizedStringFormatter)((0, ($parcel$interopDefault($8t1z9$intlStringsmodulejs))), '@react-aria/color');
     let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $8t1z9$useGlobalListeners)();
     let { direction: direction, locale: locale } = (0, $8t1z9$useLocale)();
@@ -38,13 +38,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     }, [
         inputXRef
     ]);
-    (0, $8t1z9$useFormReset)(inputXRef, [
-        state.xValue,
-        state.yValue
-    ], ([x, y])=>{
-        let newColor = state.value.withChannelValue(state.channels.xChannel, x).withChannelValue(state.channels.yChannel, y);
-        state.setValue(newColor);
-    });
+    (0, $8t1z9$useFormReset)(inputXRef, state.defaultValue, state.setValue);
     let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $8t1z9$useState)(false);
     let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = (0, $8t1z9$useState)(false);
     let { xChannel: xChannel, yChannel: yChannel, zChannel: zChannel } = state.channels;
@@ -359,6 +353,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             disabled: isDisabled,
             value: state.value.getChannelValue(xChannel),
             name: xName,
+            form: form,
             tabIndex: isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1,
             /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
@@ -383,6 +378,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             disabled: isDisabled,
             value: state.value.getChannelValue(yChannel),
             name: yName,
+            form: form,
             tabIndex: isMobile || focusedInput === 'y' ? undefined : -1,
             /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,

package/dist/useColorArea.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/color/src/useColorArea.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorAreaProps, ColorChannel} from '@react-types/color';\nimport {ColorAreaState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef, useState} from 'react';\nimport {useColorAreaGradient} from './useColorAreaGradient';\nimport {useFocus, useFocusWithin, useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface ColorAreaAria {\n  /** Props for the color area container element. */\n  colorAreaProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden horizontal range input element. */\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the visually hidden vertical range input element. */\n  yInputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\nexport interface AriaColorAreaOptions extends AriaColorAreaProps {\n  /** A ref to the input that represents the x axis of the color area. */\n  inputXRef: RefObject<HTMLInputElement | null>,\n  /** A ref to the input that represents the y axis of the color area. */\n  inputYRef: RefObject<HTMLInputElement | null>,\n  /** A ref to the color area containing element. */\n  containerRef: RefObject<Element | null>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color area component.\n * Color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState): ColorAreaAria {\n  let {\n    isDisabled,\n    inputXRef,\n    inputYRef,\n    containerRef,\n    'aria-label': ariaLabel,\n    xName,\n    yName\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let {direction, locale} = useLocale();\n\n  let [focusedInput, setFocusedInput] = useState<'x' | 'y' | null>(null);\n  let focusInput = useCallback((inputRef:RefObject<HTMLInputElement | null> = inputXRef) => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputXRef]);\n\n  useFormReset(inputXRef, [state.xValue, state.yValue], ([x, y]) => {\n    let newColor = state.value\n      .withChannelValue(state.channels.xChannel, x)\n      .withChannelValue(state.channels.yChannel, y);\n    state.setValue(newColor);\n  });\n\n  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);\n  let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);\n  let {xChannel, yChannel, zChannel} = state.channels;\n  let xChannelStep = state.xChannelStep;\n  let yChannelStep = state.yChannelStep;\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      setValueChangedViaKeyboard(true);\n      let dir;\n      switch (e.key) {\n        case 'PageUp':\n          state.incrementY(state.yChannelPageStep);\n          dir = 'y';\n          break;\n        case 'PageDown':\n          state.decrementY(state.yChannelPageStep);\n          dir = 'y';\n          break;\n        case 'Home':\n          direction === 'rtl' ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n        case 'End':\n          direction === 'rtl' ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n      }\n      state.setDragging(false);\n      if (dir) {\n        let input = dir === 'x' ? inputXRef : inputYRef;\n        focusInput(input);\n        setFocusedInput(dir);\n      }\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      let {\n        incrementX,\n        decrementX,\n        incrementY,\n        decrementY,\n        xChannelPageStep,\n        xChannelStep,\n        yChannelPageStep,\n        yChannelStep,\n        getThumbPosition,\n        setColorFromPoint\n      } = state;\n      if (currentPosition.current == null) {\n        currentPosition.current = getThumbPosition();\n      }\n      let {width, height} = containerRef.current?.getBoundingClientRect() || {width: 0, height: 0};\n      let valueChanged = deltaX !== 0 || deltaY !== 0;\n      if (pointerType === 'keyboard') {\n        let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;\n        let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;\n        if ((deltaX > 0 && direction === 'ltr') || (deltaX < 0 && direction === 'rtl')) {\n          incrementX(deltaXValue);\n        } else if ((deltaX < 0 && direction === 'ltr') || (deltaX > 0 && direction === 'rtl')) {\n          decrementX(deltaXValue);\n        } else if (deltaY > 0) {\n          decrementY(deltaYValue);\n        } else if (deltaY < 0) {\n          incrementY(deltaYValue);\n        }\n        setValueChangedViaKeyboard(valueChanged);\n        // set the focused input based on which axis has the greater delta\n        focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? 'y' : 'x';\n        setFocusedInput(focusedInput);\n      } else {\n        currentPosition.current.x += (direction === 'rtl' ? -1 : 1) * deltaX / width ;\n        currentPosition.current.y += deltaY / height;\n        setColorFromPoint(currentPosition.current.x, currentPosition.current.y);\n      }\n    },\n    onMoveEnd() {\n      isOnColorArea.current = false;\n      state.setDragging(false);\n      let input = focusedInput === 'x' ? inputXRef : inputYRef;\n      focusInput(input);\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithinChange: (focusWithin:boolean) => {\n      if (!focusWithin) {\n        setValueChangedViaKeyboard(false);\n        setValueChangedViaInputChangeEvent(false);\n      }\n    }\n  });\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnColorArea = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnColorArea.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnColorArea.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnColorArea.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      setValueChangedViaKeyboard(false);\n      focusInput();\n      state.setDragging(true);\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      setValueChangedViaKeyboard(false);\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnColorArea.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onColorAreaDown = (colorArea: Element, id: number | null | undefined, clientX: number, clientY: number) => {\n    let rect = colorArea.getBoundingClientRect();\n    let {width, height} = rect;\n    let x = (clientX - rect.x) / width;\n    let y = (clientY - rect.y) / height;\n    if (direction === 'rtl') {\n      x = 1 - x;\n    }\n    if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {\n      isOnColorArea.current = true;\n      setValueChangedViaKeyboard(false);\n      currentPointer.current = id;\n      state.setColorFromPoint(x, y);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onColorAreaUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onColorAreaUp, false);\n        addGlobalListener(window, 'touchend', onColorAreaUp, false);\n      }\n    }\n  };\n\n  let onColorAreaUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnColorArea.current && id === currentPointer.current) {\n      isOnColorArea.current = false;\n      setValueChangedViaKeyboard(false);\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onColorAreaUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onColorAreaUp, false);\n        removeGlobalListener(window, 'touchend', onColorAreaUp, false);\n      }\n    }\n  };\n\n  let colorAreaInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onColorAreaDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onColorAreaDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onThumbDown(e.pointerId);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onThumbDown(undefined);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onThumbDown(e.changedTouches[0].identifier);\n        }\n      })\n  }, focusWithinProps, keyboardProps, movePropsThumb);\n\n  let {focusProps: xInputFocusProps} = useFocus({\n    onFocus: () => {\n      setFocusedInput('x');\n    }\n  });\n\n  let {focusProps: yInputFocusProps} = useFocus({\n    onFocus: () => {\n      setFocusedInput('y');\n    }\n  });\n\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const {target} = e;\n    setValueChangedViaInputChangeEvent(true);\n    if (target === inputXRef.current) {\n      state.setXValue(parseFloat(target.value));\n    } else if (target === inputYRef.current) {\n      state.setYValue(parseFloat(target.value));\n    }\n  };\n\n  let isMobile = isIOS() || isAndroid();\n\n  let value = state.getDisplayColor();\n  const getAriaValueTextForChannel = useCallback((channel:ColorChannel) => {\n    const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;\n    return `${\n      isAfterInput ?\n      stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)})\n      :\n      [\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)}),\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale), value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)}),\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(zChannel, locale), value: value.formatChannelValue(zChannel, locale)})\n      ].join(', ')\n    }, ${value.getColorName(locale)}`;\n  }, [locale, value, stringFormatter, valueChangedViaInputChangeEvent, valueChangedViaKeyboard, xChannel, yChannel, zChannel]);\n\n  let colorPickerLabel = stringFormatter.format('colorPicker');\n\n  let xInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel\n  });\n\n  let yInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel\n  });\n\n  let colorAreaLabellingProps = useLabels(\n    {\n      ...props,\n      'aria-label': ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined\n    },\n    isMobile ? colorPickerLabel : undefined\n  );\n\n  let ariaRoleDescription = stringFormatter.format('twoDimensionalSlider');\n\n  let {visuallyHiddenProps} = useVisuallyHidden({style: {\n    opacity: '0.0001',\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none'\n  }});\n\n  let {\n    colorAreaStyleProps,\n    thumbStyleProps\n  } = useColorAreaGradient({\n    direction,\n    state,\n    xChannel,\n    yChannel,\n    zChannel\n  });\n\n  return {\n    colorAreaProps: {\n      ...colorAreaLabellingProps,\n      ...colorAreaInteractions,\n      ...colorAreaStyleProps,\n      role: 'group'\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      ...thumbStyleProps,\n      role: 'presentation'\n    },\n    xInputProps: {\n      ...xInputLabellingProps,\n      ...visuallyHiddenProps,\n      ...xInputFocusProps,\n      type: 'range',\n      min: state.value.getChannelRange(xChannel).minValue,\n      max: state.value.getChannelRange(xChannel).maxValue,\n      step: xChannelStep,\n      'aria-roledescription': ariaRoleDescription,\n      'aria-valuetext': getAriaValueTextForChannel(xChannel),\n      'aria-orientation': 'horizontal',\n      'aria-describedby': props['aria-describedby'],\n      'aria-details': props['aria-details'],\n      disabled: isDisabled,\n      value: state.value.getChannelValue(xChannel),\n      name: xName,\n      tabIndex: (isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1),\n      /*\n        So that only a single \"2d slider\" control shows up when listing form elements for screen readers,\n        add aria-hidden=\"true\" to the unfocused control when the value has not changed via the keyboard,\n        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.\n      */\n      'aria-hidden': (isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard ? undefined : 'true'),\n      onChange\n    },\n    yInputProps: {\n      ...yInputLabellingProps,\n      ...visuallyHiddenProps,\n      ...yInputFocusProps,\n      type: 'range',\n      min: state.value.getChannelRange(yChannel).minValue,\n      max: state.value.getChannelRange(yChannel).maxValue,\n      step: yChannelStep,\n      'aria-roledescription': ariaRoleDescription,\n      'aria-valuetext': getAriaValueTextForChannel(yChannel),\n      'aria-orientation': 'vertical',\n      'aria-describedby': props['aria-describedby'],\n      'aria-details': props['aria-details'],\n      disabled: isDisabled,\n      value: state.value.getChannelValue(yChannel),\n      name: yName,\n      tabIndex: (isMobile || focusedInput === 'y' ? undefined : -1),\n      /*\n        So that only a single \"2d slider\" control shows up when listing form elements for screen readers,\n        add aria-hidden=\"true\" to the unfocused input when the value has not changed via the keyboard,\n        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.\n      */\n      'aria-hidden': (isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true'),\n      onChange\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorArea.module.js.map"}
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAsCM,SAAS,0CAAa,KAA2B,EAAE,KAAqB;IAC7E,IAAI,cACF,UAAU,aACV,SAAS,aACT,SAAS,gBACT,YAAY,EACZ,cAAc,SAAS,SACvB,KAAK,SACL,KAAK,QACL,IAAI,EACL,GAAG;IACJ,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAEhE,IAAI,qBAAC,iBAAiB,wBAAE,oBAAoB,EAAC,GAAG,CAAA,GAAA,yBAAiB;IAEjE,IAAI,aAAC,SAAS,UAAE,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,eAAO,EAAoB;IACjE,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC,WAA8C,SAAS;QACnF,IAAI,SAAS,OAAO,EAClB,CAAA,GAAA,4BAAoB,EAAE,SAAS,OAAO;IAE1C,GAAG;QAAC;KAAU;IAEd,CAAA,GAAA,mBAAW,EAAE,WAAW,MAAM,YAAY,EAAE,MAAM,QAAQ;IAE1D,IAAI,CAAC,yBAAyB,2BAA2B,GAAG,CAAA,GAAA,eAAO,EAAE;IACrE,IAAI,CAAC,iCAAiC,mCAAmC,GAAG,CAAA,GAAA,eAAO,EAAE;IACrF,IAAI,YAAC,QAAQ,YAAE,QAAQ,YAAE,QAAQ,EAAC,GAAG,MAAM,QAAQ;IACnD,IAAI,eAAe,MAAM,YAAY;IACrC,IAAI,eAAe,MAAM,YAAY;IAErC,IAAI,kBAAkB,CAAA,GAAA,aAAK,EAAiC;IAE5D,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,kBAAU,EAAE;QAChC,WAAU,CAAC;YACT,kDAAkD;YAClD,IAAI,CAAC,+BAA+B,IAAI,CAAC,EAAE,GAAG,GAAG;gBAC/C,EAAE,mBAAmB;gBACrB;YACF;YACA,4FAA4F;YAC5F,EAAE,cAAc;YAChB,iEAAiE;YACjE,MAAM,WAAW,CAAC;YAClB,2BAA2B;YAC3B,IAAI;YACJ,OAAQ,EAAE,GAAG;gBACX,KAAK;oBACH,MAAM,UAAU,CAAC,MAAM,gBAAgB;oBACvC,MAAM;oBACN;gBACF,KAAK;oBACH,MAAM,UAAU,CAAC,MAAM,gBAAgB;oBACvC,MAAM;oBACN;gBACF,KAAK;oBACH,cAAc,QAAQ,MAAM,UAAU,CAAC,MAAM,gBAAgB,IAAI,MAAM,UAAU,CAAC,MAAM,gBAAgB;oBACxG,MAAM;oBACN;gBACF,KAAK;oBACH,cAAc,QAAQ,MAAM,UAAU,CAAC,MAAM,gBAAgB,IAAI,MAAM,UAAU,CAAC,MAAM,gBAAgB;oBACxG,MAAM;oBACN;YACJ;YACA,MAAM,WAAW,CAAC;YAClB,IAAI,KAAK;gBACP,IAAI,QAAQ,QAAQ,MAAM,YAAY;gBACtC,WAAW;gBACX,gBAAgB;YAClB;QACF;IACF;IAEA,IAAI,cAAc;QAChB;YACE,gBAAgB,OAAO,GAAG;YAC1B,MAAM,WAAW,CAAC;QACpB;QACA,QAAO,UAAC,MAAM,UAAE,MAAM,eAAE,WAAW,YAAE,QAAQ,EAAC;gBAgBtB;YAftB,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,cACV,UAAU,oBACV,gBAAgB,gBAChB,YAAY,oBACZ,gBAAgB,gBAChB,YAAY,oBACZ,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG;YACJ,IAAI,gBAAgB,OAAO,IAAI,MAC7B,gBAAgB,OAAO,GAAG;YAE5B,IAAI,SAAC,KAAK,UAAE,MAAM,EAAC,GAAG,EAAA,wBAAA,aAAa,OAAO,cAApB,4CAAA,sBAAsB,qBAAqB,OAAM;gBAAC,OAAO;gBAAG,QAAQ;YAAC;YAC3F,IAAI,eAAe,WAAW,KAAK,WAAW;YAC9C,IAAI,gBAAgB,YAAY;gBAC9B,IAAI,cAAc,YAAY,mBAAmB,eAAe,mBAAmB;gBACnF,IAAI,cAAc,YAAY,mBAAmB,eAAe,mBAAmB;gBACnF,IAAI,AAAC,SAAS,KAAK,cAAc,SAAW,SAAS,KAAK,cAAc,OACtE,WAAW;qBACN,IAAI,AAAC,SAAS,KAAK,cAAc,SAAW,SAAS,KAAK,cAAc,OAC7E,WAAW;qBACN,IAAI,SAAS,GAClB,WAAW;qBACN,IAAI,SAAS,GAClB,WAAW;gBAEb,2BAA2B;gBAC3B,kEAAkE;gBAClE,eAAe,gBAAgB,KAAK,GAAG,CAAC,UAAU,KAAK,GAAG,CAAC,UAAU,MAAM;gBAC3E,gBAAgB;YAClB,OAAO;gBACL,gBAAgB,OAAO,CAAC,CAAC,IAAI,AAAC,CAAA,cAAc,QAAQ,KAAK,CAAA,IAAK,SAAS;gBACvE,gBAAgB,OAAO,CAAC,CAAC,IAAI,SAAS;gBACtC,kBAAkB,gBAAgB,OAAO,CAAC,CAAC,EAAE,gBAAgB,OAAO,CAAC,CAAC;YACxE;QACF;QACA;YACE,cAAc,OAAO,GAAG;YACxB,MAAM,WAAW,CAAC;YAClB,IAAI,QAAQ,iBAAiB,MAAM,YAAY;YAC/C,WAAW;QACb;IACF;IACA,IAAI,EAAC,WAAW,cAAc,EAAC,GAAG,CAAA,GAAA,cAAM,EAAE;IAE1C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACtC,qBAAqB,CAAC;YACpB,IAAI,CAAC,aAAa;gBAChB,2BAA2B;gBAC3B,mCAAmC;YACrC;QACF;IACF;IAEA,IAAI,iBAAiB,CAAA,GAAA,aAAK,EAA6B;IACvD,IAAI,gBAAgB,CAAA,GAAA,aAAK,EAAW;IACpC,IAAI,EAAC,WAAW,kBAAkB,EAAC,GAAG,CAAA,GAAA,cAAM,EAAE;QAC5C;YACE,IAAI,cAAc,OAAO,EACvB,YAAY,WAAW;QAE3B;QACA,QAAO,CAAC;YACN,IAAI,cAAc,OAAO,EACvB,YAAY,MAAM,CAAC;QAEvB;QACA;YACE,IAAI,cAAc,OAAO,EACvB,YAAY,SAAS;QAEzB;IACF;IAEA,IAAI,cAAc,CAAC;QACjB,IAAI,CAAC,MAAM,UAAU,EAAE;YACrB,eAAe,OAAO,GAAG;YACzB,2BAA2B;YAC3B;YACA,MAAM,WAAW,CAAC;YAClB,IAAI,OAAO,iBAAiB,aAC1B,kBAAkB,QAAQ,aAAa,WAAW;iBAC7C;gBACL,kBAAkB,QAAQ,WAAW,WAAW;gBAChD,kBAAkB,QAAQ,YAAY,WAAW;YACnD;QACF;IACF;IAEA,IAAI,YAAY,CAAC;YACS;YAAf;QAAT,IAAI,KAAK,CAAA,eAAA,EAAE,SAAS,cAAX,0BAAA,gBAAe,oBAAA,EAAE,cAAc,cAAhB,wCAAA,iBAAkB,CAAC,EAAE,CAAC,UAAU;QACxD,IAAI,OAAO,eAAe,OAAO,EAAE;YACjC,2BAA2B;YAC3B;YACA,MAAM,WAAW,CAAC;YAClB,eAAe,OAAO,GAAG;YACzB,cAAc,OAAO,GAAG;YAExB,IAAI,OAAO,iBAAiB,aAC1B,qBAAqB,QAAQ,aAAa,WAAW;iBAChD;gBACL,qBAAqB,QAAQ,WAAW,WAAW;gBACnD,qBAAqB,QAAQ,YAAY,WAAW;YACtD;QACF;IACF;IAEA,IAAI,kBAAkB,CAAC,WAAoB,IAA+B,SAAiB;QACzF,IAAI,OAAO,UAAU,qBAAqB;QAC1C,IAAI,SAAC,KAAK,UAAE,MAAM,EAAC,GAAG;QACtB,IAAI,IAAI,AAAC,CAAA,UAAU,KAAK,CAAC,AAAD,IAAK;QAC7B,IAAI,IAAI,AAAC,CAAA,UAAU,KAAK,CAAC,AAAD,IAAK;QAC7B,IAAI,cAAc,OAChB,IAAI,IAAI;QAEV,IAAI,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC,MAAM,UAAU,IAAI,eAAe,OAAO,KAAK,WAAW;YACrG,cAAc,OAAO,GAAG;YACxB,2BAA2B;YAC3B,eAAe,OAAO,GAAG;YACzB,MAAM,iBAAiB,CAAC,GAAG;YAE3B;YACA,MAAM,WAAW,CAAC;YAElB,IAAI,OAAO,iBAAiB,aAC1B,kBAAkB,QAAQ,aAAa,eAAe;iBACjD;gBACL,kBAAkB,QAAQ,WAAW,eAAe;gBACpD,kBAAkB,QAAQ,YAAY,eAAe;YACvD;QACF;IACF;IAEA,IAAI,gBAAgB,CAAC;YACK;YAAf;QAAT,IAAI,KAAK,CAAA,eAAA,EAAE,SAAS,cAAX,0BAAA,gBAAe,oBAAA,EAAE,cAAc,cAAhB,wCAAA,iBAAkB,CAAC,EAAE,CAAC,UAAU;QACxD,IAAI,cAAc,OAAO,IAAI,OAAO,eAAe,OAAO,EAAE;YAC1D,cAAc,OAAO,GAAG;YACxB,2BAA2B;YAC3B,eAAe,OAAO,GAAG;YACzB,MAAM,WAAW,CAAC;YAClB;YAEA,IAAI,OAAO,iBAAiB,aAC1B,qBAAqB,QAAQ,aAAa,eAAe;iBACpD;gBACL,qBAAqB,QAAQ,WAAW,eAAe;gBACvD,qBAAqB,QAAQ,YAAY,eAAe;YAC1D;QACF;IACF;IAEA,IAAI,wBAAwB,aAAa,CAAC,IAAI,CAAA,GAAA,iBAAS,EAAE;QACvD,GAAI,OAAO,iBAAiB,cAAc;YACxC,eAAe,CAAC;gBACd,IAAI,EAAE,WAAW,KAAK,WAAY,CAAA,EAAE,MAAM,KAAK,KAAK,EAAE,MAAM,IAAI,EAAE,OAAO,IAAI,EAAE,OAAO,AAAD,GACnF;gBAEF,gBAAgB,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO;YACpE;QAAC,IAAI;YACH,aAAa,CAAC;gBACZ,IAAI,EAAE,MAAM,KAAK,KAAK,EAAE,MAAM,IAAI,EAAE,OAAO,IAAI,EAAE,OAAO,EACtD;gBAEF,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,OAAO;YAClE;YACA,cAAc,CAAC;gBACb,gBAAgB,EAAE,aAAa,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,OAAO;YAC3H;QACF,CAAC;IACL,GAAG;IAEH,IAAI,oBAAoB,aAAa,CAAC,IAAI,CAAA,GAAA,iBAAS,EAAE;QACnD,GAAI,OAAO,iBAAiB,cAAc;YACxC,eAAe,CAAC;gBACd,IAAI,EAAE,WAAW,KAAK,WAAY,CAAA,EAAE,MAAM,KAAK,KAAK,EAAE,MAAM,IAAI,EAAE,OAAO,IAAI,EAAE,OAAO,AAAD,GACnF;gBAEF,YAAY,EAAE,SAAS;YACzB;QAAC,IAAI;YACH,aAAa,CAAC;gBACZ,IAAI,EAAE,MAAM,KAAK,KAAK,EAAE,MAAM,IAAI,EAAE,OAAO,IAAI,EAAE,OAAO,EACtD;gBAEF,YAAY;YACd;YACA,cAAc,CAAC;gBACb,YAAY,EAAE,cAAc,CAAC,EAAE,CAAC,UAAU;YAC5C;QACF,CAAC;IACL,GAAG,kBAAkB,eAAe;IAEpC,IAAI,EAAC,YAAY,gBAAgB,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAC5C,SAAS;YACP,gBAAgB;QAClB;IACF;IAEA,IAAI,EAAC,YAAY,gBAAgB,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAC5C,SAAS;YACP,gBAAgB;QAClB;IACF;IAEA,MAAM,WAAW,CAAC;QAChB,MAAM,UAAC,MAAM,EAAC,GAAG;QACjB,mCAAmC;QACnC,IAAI,WAAW,UAAU,OAAO,EAC9B,MAAM,SAAS,CAAC,WAAW,OAAO,KAAK;aAClC,IAAI,WAAW,UAAU,OAAO,EACrC,MAAM,SAAS,CAAC,WAAW,OAAO,KAAK;IAE3C;IAEA,IAAI,WAAW,CAAA,GAAA,YAAI,OAAO,CAAA,GAAA,gBAAQ;IAElC,IAAI,QAAQ,MAAM,eAAe;IACjC,MAAM,6BAA6B,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC9C,MAAM,eAAe,mCAAmC;QACxD,OAAO,GACL,eACA,gBAAgB,MAAM,CAAC,qBAAqB;YAAC,MAAM,MAAM,cAAc,CAAC,SAAS;YAAS,OAAO,MAAM,kBAAkB,CAAC,SAAS;QAAO,KAE1I;YACE,gBAAgB,MAAM,CAAC,qBAAqB;gBAAC,MAAM,MAAM,cAAc,CAAC,SAAS;gBAAS,OAAO,MAAM,kBAAkB,CAAC,SAAS;YAAO;YAC1I,gBAAgB,MAAM,CAAC,qBAAqB;gBAAC,MAAM,MAAM,cAAc,CAAC,YAAY,WAAW,WAAW,UAAU;gBAAS,OAAO,MAAM,kBAAkB,CAAC,YAAY,WAAW,WAAW,UAAU;YAAO;YAChN,gBAAgB,MAAM,CAAC,qBAAqB;gBAAC,MAAM,MAAM,cAAc,CAAC,UAAU;gBAAS,OAAO,MAAM,kBAAkB,CAAC,UAAU;YAAO;SAC7I,CAAC,IAAI,CAAC,MACR,EAAE,EAAE,MAAM,YAAY,CAAC,SAAS;IACnC,GAAG;QAAC;QAAQ;QAAO;QAAiB;QAAiC;QAAyB;QAAU;QAAU;KAAS;IAE3H,IAAI,mBAAmB,gBAAgB,MAAM,CAAC;IAE9C,IAAI,uBAAuB,CAAA,GAAA,gBAAQ,EAAE;QACnC,GAAG,KAAK;QACR,cAAc,YAAY,gBAAgB,MAAM,CAAC,mBAAmB;YAAC,OAAO;YAAW,cAAc;QAAgB,KAAK;IAC5H;IAEA,IAAI,uBAAuB,CAAA,GAAA,gBAAQ,EAAE;QACnC,GAAG,KAAK;QACR,cAAc,YAAY,gBAAgB,MAAM,CAAC,mBAAmB;YAAC,OAAO;YAAW,cAAc;QAAgB,KAAK;IAC5H;IAEA,IAAI,0BAA0B,CAAA,GAAA,gBAAQ,EACpC;QACE,GAAG,KAAK;QACR,cAAc,YAAY,GAAG,UAAU,EAAE,EAAE,kBAAkB,GAAG;IAClE,GACA,WAAW,mBAAmB;IAGhC,IAAI,sBAAsB,gBAAgB,MAAM,CAAC;IAEjD,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,wBAAgB,EAAE;QAAC,OAAO;YACpD,SAAS;YACT,OAAO;YACP,QAAQ;YACR,eAAe;QACjB;IAAC;IAED,IAAI,uBACF,mBAAmB,mBACnB,eAAe,EAChB,GAAG,CAAA,GAAA,yCAAmB,EAAE;mBACvB;eACA;kBACA;kBACA;kBACA;IACF;IAEA,OAAO;QACL,gBAAgB;YACd,GAAG,uBAAuB;YAC1B,GAAG,qBAAqB;YACxB,GAAG,mBAAmB;YACtB,MAAM;QACR;QACA,YAAY;YACV,GAAG,iBAAiB;YACpB,GAAG,eAAe;YAClB,MAAM;QACR;QACA,aAAa;YACX,GAAG,oBAAoB;YACvB,GAAG,mBAAmB;YACtB,GAAG,gBAAgB;YACnB,MAAM;YACN,KAAK,MAAM,KAAK,CAAC,eAAe,CAAC,UAAU,QAAQ;YACnD,KAAK,MAAM,KAAK,CAAC,eAAe,CAAC,UAAU,QAAQ;YACnD,MAAM;YACN,wBAAwB;YACxB,kBAAkB,2BAA2B;YAC7C,oBAAoB;YACpB,oBAAoB,KAAK,CAAC,mBAAmB;YAC7C,gBAAgB,KAAK,CAAC,eAAe;YACrC,UAAU;YACV,OAAO,MAAM,KAAK,CAAC,eAAe,CAAC;YACnC,MAAM;kBACN;YACA,UAAW,YAAY,CAAC,gBAAgB,iBAAiB,MAAM,YAAY;YAC3E;;;;MAIA,GACA,eAAgB,YAAY,CAAC,gBAAgB,iBAAiB,OAAO,0BAA0B,YAAY;sBAC3G;QACF;QACA,aAAa;YACX,GAAG,oBAAoB;YACvB,GAAG,mBAAmB;YACtB,GAAG,gBAAgB;YACnB,MAAM;YACN,KAAK,MAAM,KAAK,CAAC,eAAe,CAAC,UAAU,QAAQ;YACnD,KAAK,MAAM,KAAK,CAAC,eAAe,CAAC,UAAU,QAAQ;YACnD,MAAM;YACN,wBAAwB;YACxB,kBAAkB,2BAA2B;YAC7C,oBAAoB;YACpB,oBAAoB,KAAK,CAAC,mBAAmB;YAC7C,gBAAgB,KAAK,CAAC,eAAe;YACrC,UAAU;YACV,OAAO,MAAM,KAAK,CAAC,eAAe,CAAC;YACnC,MAAM;kBACN;YACA,UAAW,YAAY,iBAAiB,MAAM,YAAY;YAC1D;;;;MAIA,GACA,eAAgB,YAAY,iBAAiB,OAAO,0BAA0B,YAAY;sBAC1F;QACF;IACF;AACF","sources":["packages/@react-aria/color/src/useColorArea.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorAreaProps, ColorChannel} from '@react-types/color';\nimport {ColorAreaState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef, useState} from 'react';\nimport {useColorAreaGradient} from './useColorAreaGradient';\nimport {useFocus, useFocusWithin, useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface ColorAreaAria {\n  /** Props for the color area container element. */\n  colorAreaProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden horizontal range input element. */\n  xInputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the visually hidden vertical range input element. */\n  yInputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\nexport interface AriaColorAreaOptions extends AriaColorAreaProps {\n  /** A ref to the input that represents the x axis of the color area. */\n  inputXRef: RefObject<HTMLInputElement | null>,\n  /** A ref to the input that represents the y axis of the color area. */\n  inputYRef: RefObject<HTMLInputElement | null>,\n  /** A ref to the color area containing element. */\n  containerRef: RefObject<Element | null>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color area component.\n * Color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState): ColorAreaAria {\n  let {\n    isDisabled,\n    inputXRef,\n    inputYRef,\n    containerRef,\n    'aria-label': ariaLabel,\n    xName,\n    yName,\n    form\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let {direction, locale} = useLocale();\n\n  let [focusedInput, setFocusedInput] = useState<'x' | 'y' | null>(null);\n  let focusInput = useCallback((inputRef:RefObject<HTMLInputElement | null> = inputXRef) => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputXRef]);\n\n  useFormReset(inputXRef, state.defaultValue, state.setValue);\n\n  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);\n  let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);\n  let {xChannel, yChannel, zChannel} = state.channels;\n  let xChannelStep = state.xChannelStep;\n  let yChannelStep = state.yChannelStep;\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      setValueChangedViaKeyboard(true);\n      let dir;\n      switch (e.key) {\n        case 'PageUp':\n          state.incrementY(state.yChannelPageStep);\n          dir = 'y';\n          break;\n        case 'PageDown':\n          state.decrementY(state.yChannelPageStep);\n          dir = 'y';\n          break;\n        case 'Home':\n          direction === 'rtl' ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n        case 'End':\n          direction === 'rtl' ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n      }\n      state.setDragging(false);\n      if (dir) {\n        let input = dir === 'x' ? inputXRef : inputYRef;\n        focusInput(input);\n        setFocusedInput(dir);\n      }\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      let {\n        incrementX,\n        decrementX,\n        incrementY,\n        decrementY,\n        xChannelPageStep,\n        xChannelStep,\n        yChannelPageStep,\n        yChannelStep,\n        getThumbPosition,\n        setColorFromPoint\n      } = state;\n      if (currentPosition.current == null) {\n        currentPosition.current = getThumbPosition();\n      }\n      let {width, height} = containerRef.current?.getBoundingClientRect() || {width: 0, height: 0};\n      let valueChanged = deltaX !== 0 || deltaY !== 0;\n      if (pointerType === 'keyboard') {\n        let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;\n        let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;\n        if ((deltaX > 0 && direction === 'ltr') || (deltaX < 0 && direction === 'rtl')) {\n          incrementX(deltaXValue);\n        } else if ((deltaX < 0 && direction === 'ltr') || (deltaX > 0 && direction === 'rtl')) {\n          decrementX(deltaXValue);\n        } else if (deltaY > 0) {\n          decrementY(deltaYValue);\n        } else if (deltaY < 0) {\n          incrementY(deltaYValue);\n        }\n        setValueChangedViaKeyboard(valueChanged);\n        // set the focused input based on which axis has the greater delta\n        focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? 'y' : 'x';\n        setFocusedInput(focusedInput);\n      } else {\n        currentPosition.current.x += (direction === 'rtl' ? -1 : 1) * deltaX / width ;\n        currentPosition.current.y += deltaY / height;\n        setColorFromPoint(currentPosition.current.x, currentPosition.current.y);\n      }\n    },\n    onMoveEnd() {\n      isOnColorArea.current = false;\n      state.setDragging(false);\n      let input = focusedInput === 'x' ? inputXRef : inputYRef;\n      focusInput(input);\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithinChange: (focusWithin:boolean) => {\n      if (!focusWithin) {\n        setValueChangedViaKeyboard(false);\n        setValueChangedViaInputChangeEvent(false);\n      }\n    }\n  });\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnColorArea = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnColorArea.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnColorArea.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnColorArea.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      setValueChangedViaKeyboard(false);\n      focusInput();\n      state.setDragging(true);\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      setValueChangedViaKeyboard(false);\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnColorArea.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onColorAreaDown = (colorArea: Element, id: number | null | undefined, clientX: number, clientY: number) => {\n    let rect = colorArea.getBoundingClientRect();\n    let {width, height} = rect;\n    let x = (clientX - rect.x) / width;\n    let y = (clientY - rect.y) / height;\n    if (direction === 'rtl') {\n      x = 1 - x;\n    }\n    if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {\n      isOnColorArea.current = true;\n      setValueChangedViaKeyboard(false);\n      currentPointer.current = id;\n      state.setColorFromPoint(x, y);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onColorAreaUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onColorAreaUp, false);\n        addGlobalListener(window, 'touchend', onColorAreaUp, false);\n      }\n    }\n  };\n\n  let onColorAreaUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnColorArea.current && id === currentPointer.current) {\n      isOnColorArea.current = false;\n      setValueChangedViaKeyboard(false);\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onColorAreaUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onColorAreaUp, false);\n        removeGlobalListener(window, 'touchend', onColorAreaUp, false);\n      }\n    }\n  };\n\n  let colorAreaInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onColorAreaDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onColorAreaDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onThumbDown(e.pointerId);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onThumbDown(undefined);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onThumbDown(e.changedTouches[0].identifier);\n        }\n      })\n  }, focusWithinProps, keyboardProps, movePropsThumb);\n\n  let {focusProps: xInputFocusProps} = useFocus({\n    onFocus: () => {\n      setFocusedInput('x');\n    }\n  });\n\n  let {focusProps: yInputFocusProps} = useFocus({\n    onFocus: () => {\n      setFocusedInput('y');\n    }\n  });\n\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const {target} = e;\n    setValueChangedViaInputChangeEvent(true);\n    if (target === inputXRef.current) {\n      state.setXValue(parseFloat(target.value));\n    } else if (target === inputYRef.current) {\n      state.setYValue(parseFloat(target.value));\n    }\n  };\n\n  let isMobile = isIOS() || isAndroid();\n\n  let value = state.getDisplayColor();\n  const getAriaValueTextForChannel = useCallback((channel:ColorChannel) => {\n    const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;\n    return `${\n      isAfterInput ?\n      stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)})\n      :\n      [\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel, locale), value: value.formatChannelValue(channel, locale)}),\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale), value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)}),\n        stringFormatter.format('colorNameAndValue', {name: value.getChannelName(zChannel, locale), value: value.formatChannelValue(zChannel, locale)})\n      ].join(', ')\n    }, ${value.getColorName(locale)}`;\n  }, [locale, value, stringFormatter, valueChangedViaInputChangeEvent, valueChangedViaKeyboard, xChannel, yChannel, zChannel]);\n\n  let colorPickerLabel = stringFormatter.format('colorPicker');\n\n  let xInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel\n  });\n\n  let yInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel\n  });\n\n  let colorAreaLabellingProps = useLabels(\n    {\n      ...props,\n      'aria-label': ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined\n    },\n    isMobile ? colorPickerLabel : undefined\n  );\n\n  let ariaRoleDescription = stringFormatter.format('twoDimensionalSlider');\n\n  let {visuallyHiddenProps} = useVisuallyHidden({style: {\n    opacity: '0.0001',\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none'\n  }});\n\n  let {\n    colorAreaStyleProps,\n    thumbStyleProps\n  } = useColorAreaGradient({\n    direction,\n    state,\n    xChannel,\n    yChannel,\n    zChannel\n  });\n\n  return {\n    colorAreaProps: {\n      ...colorAreaLabellingProps,\n      ...colorAreaInteractions,\n      ...colorAreaStyleProps,\n      role: 'group'\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      ...thumbStyleProps,\n      role: 'presentation'\n    },\n    xInputProps: {\n      ...xInputLabellingProps,\n      ...visuallyHiddenProps,\n      ...xInputFocusProps,\n      type: 'range',\n      min: state.value.getChannelRange(xChannel).minValue,\n      max: state.value.getChannelRange(xChannel).maxValue,\n      step: xChannelStep,\n      'aria-roledescription': ariaRoleDescription,\n      'aria-valuetext': getAriaValueTextForChannel(xChannel),\n      'aria-orientation': 'horizontal',\n      'aria-describedby': props['aria-describedby'],\n      'aria-details': props['aria-details'],\n      disabled: isDisabled,\n      value: state.value.getChannelValue(xChannel),\n      name: xName,\n      form,\n      tabIndex: (isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1),\n      /*\n        So that only a single \"2d slider\" control shows up when listing form elements for screen readers,\n        add aria-hidden=\"true\" to the unfocused control when the value has not changed via the keyboard,\n        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.\n      */\n      'aria-hidden': (isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard ? undefined : 'true'),\n      onChange\n    },\n    yInputProps: {\n      ...yInputLabellingProps,\n      ...visuallyHiddenProps,\n      ...yInputFocusProps,\n      type: 'range',\n      min: state.value.getChannelRange(yChannel).minValue,\n      max: state.value.getChannelRange(yChannel).maxValue,\n      step: yChannelStep,\n      'aria-roledescription': ariaRoleDescription,\n      'aria-valuetext': getAriaValueTextForChannel(yChannel),\n      'aria-orientation': 'vertical',\n      'aria-describedby': props['aria-describedby'],\n      'aria-details': props['aria-details'],\n      disabled: isDisabled,\n      value: state.value.getChannelValue(yChannel),\n      name: yName,\n      form,\n      tabIndex: (isMobile || focusedInput === 'y' ? undefined : -1),\n      /*\n        So that only a single \"2d slider\" control shows up when listing form elements for screen readers,\n        add aria-hidden=\"true\" to the unfocused input when the value has not changed via the keyboard,\n        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.\n      */\n      'aria-hidden': (isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true'),\n      onChange\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorArea.module.js.map"}

package/dist/useColorField.main.js

@@ -70,13 +70,16 @@ function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
         ...props,
         id: inputId,
         value: inputValue,
-        defaultValue: undefined,
+        // Intentionally invalid value that will be ignored by onChange during form reset
+        // This is handled separately below.
+        defaultValue: '!',
         validate: undefined,
         [(0, $grujV$reactstatelyform.privateValidationStateProp)]: state,
         type: 'text',
         autoComplete: 'off',
         onChange: onChange
     }, state, ref);
+    (0, $grujV$reactariautils.useFormReset)(ref, state.defaultColorValue, state.setColorValue);
     inputProps = (0, $grujV$reactariautils.mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
         role: 'textbox',
         'aria-valuemax': null,

package/dist/useColorField.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAiCM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAuC;IAEvC,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,mBACV,eAAe,sBACf,qBAAqB,QACtB,GAAG;IAEJ,IAAI,cACF,UAAU,cACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,kBACd,cAAc,UACd,MAAM,EACP,GAAG;IAEJ,IAAI,UAAU,CAAA,GAAA,2BAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,wCAAY,EAClC;oBACE;oBACA;oBACA;QACA,UAAU;QACV,UAAU;QACV,aAAa;QACb,kBAAkB;QAClB,aAAa;QACb,kBAAkB;QAClB,OAAO,aAAa,WAAW,QAAQ,KAAK;QAC5C,WAAW,aAAa,WAAW,QAAQ,CAAC,SAAS;IACvD;IAGF,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,2CAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,IAAI,KAAK,GAAG,CAAC,EAAE,MAAM,KAAK,KAAK,GAAG,CAAC,EAAE,MAAM,GACzC;QAEF,IAAI,EAAE,MAAM,GAAG,GACb;aACK,IAAI,EAAE,MAAM,GAAG,GACpB;IAEJ,GAAG;QAAC;QAAW;KAAU;IACzB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,2CAAa,EAAE;QAAC,UAAU;QAAS,YAAY;IAAiB,GAAG;IAEnE,IAAI,WAAW,CAAA;QACb,IAAI,MAAM,QAAQ,CAAC,QACjB,MAAM,aAAa,CAAC;IAExB;IAEA,IAAI,cAAC,UAAU,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,+CAAoB,EAAE;QACtD,GAAG,KAAK;QACR,IAAI;QACJ,OAAO;QACP,cAAc;QACd,UAAU;QACV,CAAC,CAAA,GAAA,kDAAyB,EAAE,EAAE;QAC9B,MAAM;QACN,cAAc;kBACd;IACF,GAAG,OAAO;IAEV,aAAa,CAAA,GAAA,gCAAS,EAAE,YAAY,iBAAiB,kBAAkB;QACrE,MAAM;QACN,iBAAiB;QACjB,iBAAiB;QACjB,iBAAiB;QACjB,kBAAkB;QAClB,aAAa;QACb,YAAY;QACZ,QAAQ;IACV;IAEA,IAAI,uBAAuB,UACzB,UAAU,CAAC,gBAAgB,GAAG;IAGhC,OAAO;oBACL;QACA,GAAG,UAAU;IACf;AACF","sources":["packages/@react-aria/color/src/useColorField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorFieldProps} from '@react-types/color';\nimport {ColorFieldState} from '@react-stately/color';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useState\n} from 'react';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface ColorFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the text field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the text field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color field component.\n * Color fields allow users to enter and adjust a hex color value.\n */\nexport function useColorField(\n  props: AriaColorFieldProps,\n  state: ColorFieldState,\n  ref: RefObject<HTMLInputElement | null>\n): ColorFieldAria {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isWheelDisabled,\n    validationBehavior = 'aria'\n  } = props;\n\n  let {\n    colorValue,\n    inputValue,\n    increment,\n    decrement,\n    incrementToMax,\n    decrementToMin,\n    commit\n  } = state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue: 0xFFFFFF,\n      minValue: 0,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: colorValue ? colorValue.toHexInt() : undefined,\n      textValue: colorValue ? colorValue.toString('hex') : undefined\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let {inputProps, ...otherProps} = useFormattedTextField({\n    ...props,\n    id: inputId,\n    value: inputValue,\n    defaultValue: undefined,\n    validate: undefined,\n    [privateValidationStateProp]: state,\n    type: 'text',\n    autoComplete: 'off',\n    onChange\n  }, state, ref);\n\n  inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {\n    role: 'textbox',\n    'aria-valuemax': null,\n    'aria-valuemin': null,\n    'aria-valuenow': null,\n    'aria-valuetext': null,\n    autoCorrect: 'off',\n    spellCheck: 'false',\n    onBlur: commit\n  });\n\n  if (validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  return {\n    inputProps,\n    ...otherProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorField.main.js.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAiCM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAuC;IAEvC,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,mBACV,eAAe,sBACf,qBAAqB,QACtB,GAAG;IAEJ,IAAI,cACF,UAAU,cACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,kBACd,cAAc,UACd,MAAM,EACP,GAAG;IAEJ,IAAI,UAAU,CAAA,GAAA,2BAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,wCAAY,EAClC;oBACE;oBACA;oBACA;QACA,UAAU;QACV,UAAU;QACV,aAAa;QACb,kBAAkB;QAClB,aAAa;QACb,kBAAkB;QAClB,OAAO,aAAa,WAAW,QAAQ,KAAK;QAC5C,WAAW,aAAa,WAAW,QAAQ,CAAC,SAAS;IACvD;IAGF,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,2CAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,IAAI,KAAK,GAAG,CAAC,EAAE,MAAM,KAAK,KAAK,GAAG,CAAC,EAAE,MAAM,GACzC;QAEF,IAAI,EAAE,MAAM,GAAG,GACb;aACK,IAAI,EAAE,MAAM,GAAG,GACpB;IAEJ,GAAG;QAAC;QAAW;KAAU;IACzB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,2CAAa,EAAE;QAAC,UAAU;QAAS,YAAY;IAAiB,GAAG;IAEnE,IAAI,WAAW,CAAA;QACb,IAAI,MAAM,QAAQ,CAAC,QACjB,MAAM,aAAa,CAAC;IAExB;IAEA,IAAI,cAAC,UAAU,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,+CAAoB,EAAE;QACtD,GAAG,KAAK;QACR,IAAI;QACJ,OAAO;QACP,iFAAiF;QACjF,oCAAoC;QACpC,cAAc;QACd,UAAU;QACV,CAAC,CAAA,GAAA,kDAAyB,EAAE,EAAE;QAC9B,MAAM;QACN,cAAc;kBACd;IACF,GAAG,OAAO;IAEV,CAAA,GAAA,kCAAW,EAAE,KAAK,MAAM,iBAAiB,EAAE,MAAM,aAAa;IAE9D,aAAa,CAAA,GAAA,gCAAS,EAAE,YAAY,iBAAiB,kBAAkB;QACrE,MAAM;QACN,iBAAiB;QACjB,iBAAiB;QACjB,iBAAiB;QACjB,kBAAkB;QAClB,aAAa;QACb,YAAY;QACZ,QAAQ;IACV;IAEA,IAAI,uBAAuB,UACzB,UAAU,CAAC,gBAAgB,GAAG;IAGhC,OAAO;oBACL;QACA,GAAG,UAAU;IACf;AACF","sources":["packages/@react-aria/color/src/useColorField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorFieldProps} from '@react-types/color';\nimport {ColorFieldState} from '@react-stately/color';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useState\n} from 'react';\nimport {mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface ColorFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the text field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the text field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color field component.\n * Color fields allow users to enter and adjust a hex color value.\n */\nexport function useColorField(\n  props: AriaColorFieldProps,\n  state: ColorFieldState,\n  ref: RefObject<HTMLInputElement | null>\n): ColorFieldAria {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isWheelDisabled,\n    validationBehavior = 'aria'\n  } = props;\n\n  let {\n    colorValue,\n    inputValue,\n    increment,\n    decrement,\n    incrementToMax,\n    decrementToMin,\n    commit\n  } = state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue: 0xFFFFFF,\n      minValue: 0,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: colorValue ? colorValue.toHexInt() : undefined,\n      textValue: colorValue ? colorValue.toString('hex') : undefined\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let {inputProps, ...otherProps} = useFormattedTextField({\n    ...props,\n    id: inputId,\n    value: inputValue,\n    // Intentionally invalid value that will be ignored by onChange during form reset\n    // This is handled separately below.\n    defaultValue: '!',\n    validate: undefined,\n    [privateValidationStateProp]: state,\n    type: 'text',\n    autoComplete: 'off',\n    onChange\n  }, state, ref);\n\n  useFormReset(ref, state.defaultColorValue, state.setColorValue);\n\n  inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {\n    role: 'textbox',\n    'aria-valuemax': null,\n    'aria-valuemin': null,\n    'aria-valuenow': null,\n    'aria-valuetext': null,\n    autoCorrect: 'off',\n    spellCheck: 'false',\n    onBlur: commit\n  });\n\n  if (validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  return {\n    inputProps,\n    ...otherProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorField.main.js.map"}

package/dist/useColorField.mjs

@@ -1,5 +1,5 @@
 import {useState as $f8mV7$useState, useCallback as $f8mV7$useCallback} from "react";
-import {useId as $f8mV7$useId, mergeProps as $f8mV7$mergeProps} from "@react-aria/utils";
+import {useId as $f8mV7$useId, useFormReset as $f8mV7$useFormReset, mergeProps as $f8mV7$mergeProps} from "@react-aria/utils";
 import {privateValidationStateProp as $f8mV7$privateValidationStateProp} from "@react-stately/form";
 import {useFocusWithin as $f8mV7$useFocusWithin, useScrollWheel as $f8mV7$useScrollWheel} from "@react-aria/interactions";
 import {useFormattedTextField as $f8mV7$useFormattedTextField} from "@react-aria/textfield";
@@ -64,13 +64,16 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
         ...props,
         id: inputId,
         value: inputValue,
-        defaultValue: undefined,
+        // Intentionally invalid value that will be ignored by onChange during form reset
+        // This is handled separately below.
+        defaultValue: '!',
         validate: undefined,
         [(0, $f8mV7$privateValidationStateProp)]: state,
         type: 'text',
         autoComplete: 'off',
         onChange: onChange
     }, state, ref);
+    (0, $f8mV7$useFormReset)(ref, state.defaultColorValue, state.setColorValue);
     inputProps = (0, $f8mV7$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
         role: 'textbox',
         'aria-valuemax': null,

package/dist/useColorField.module.js

@@ -1,5 +1,5 @@
 import {useState as $f8mV7$useState, useCallback as $f8mV7$useCallback} from "react";
-import {useId as $f8mV7$useId, mergeProps as $f8mV7$mergeProps} from "@react-aria/utils";
+import {useId as $f8mV7$useId, useFormReset as $f8mV7$useFormReset, mergeProps as $f8mV7$mergeProps} from "@react-aria/utils";
 import {privateValidationStateProp as $f8mV7$privateValidationStateProp} from "@react-stately/form";
 import {useFocusWithin as $f8mV7$useFocusWithin, useScrollWheel as $f8mV7$useScrollWheel} from "@react-aria/interactions";
 import {useFormattedTextField as $f8mV7$useFormattedTextField} from "@react-aria/textfield";
@@ -64,13 +64,16 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
         ...props,
         id: inputId,
         value: inputValue,
-        defaultValue: undefined,
+        // Intentionally invalid value that will be ignored by onChange during form reset
+        // This is handled separately below.
+        defaultValue: '!',
         validate: undefined,
         [(0, $f8mV7$privateValidationStateProp)]: state,
         type: 'text',
         autoComplete: 'off',
         onChange: onChange
     }, state, ref);
+    (0, $f8mV7$useFormReset)(ref, state.defaultColorValue, state.setColorValue);
     inputProps = (0, $f8mV7$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
         role: 'textbox',
         'aria-valuemax': null,

package/dist/useColorField.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAiCM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAuC;IAEvC,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,mBACV,eAAe,sBACf,qBAAqB,QACtB,GAAG;IAEJ,IAAI,cACF,UAAU,cACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,kBACd,cAAc,UACd,MAAM,EACP,GAAG;IAEJ,IAAI,UAAU,CAAA,GAAA,YAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,oBAAY,EAClC;oBACE;oBACA;oBACA;QACA,UAAU;QACV,UAAU;QACV,aAAa;QACb,kBAAkB;QAClB,aAAa;QACb,kBAAkB;QAClB,OAAO,aAAa,WAAW,QAAQ,KAAK;QAC5C,WAAW,aAAa,WAAW,QAAQ,CAAC,SAAS;IACvD;IAGF,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,IAAI,KAAK,GAAG,CAAC,EAAE,MAAM,KAAK,KAAK,GAAG,CAAC,EAAE,MAAM,GACzC;QAEF,IAAI,EAAE,MAAM,GAAG,GACb;aACK,IAAI,EAAE,MAAM,GAAG,GACpB;IAEJ,GAAG;QAAC;QAAW;KAAU;IACzB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,qBAAa,EAAE;QAAC,UAAU;QAAS,YAAY;IAAiB,GAAG;IAEnE,IAAI,WAAW,CAAA;QACb,IAAI,MAAM,QAAQ,CAAC,QACjB,MAAM,aAAa,CAAC;IAExB;IAEA,IAAI,cAAC,UAAU,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,4BAAoB,EAAE;QACtD,GAAG,KAAK;QACR,IAAI;QACJ,OAAO;QACP,cAAc;QACd,UAAU;QACV,CAAC,CAAA,GAAA,iCAAyB,EAAE,EAAE;QAC9B,MAAM;QACN,cAAc;kBACd;IACF,GAAG,OAAO;IAEV,aAAa,CAAA,GAAA,iBAAS,EAAE,YAAY,iBAAiB,kBAAkB;QACrE,MAAM;QACN,iBAAiB;QACjB,iBAAiB;QACjB,iBAAiB;QACjB,kBAAkB;QAClB,aAAa;QACb,YAAY;QACZ,QAAQ;IACV;IAEA,IAAI,uBAAuB,UACzB,UAAU,CAAC,gBAAgB,GAAG;IAGhC,OAAO;oBACL;QACA,GAAG,UAAU;IACf;AACF","sources":["packages/@react-aria/color/src/useColorField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorFieldProps} from '@react-types/color';\nimport {ColorFieldState} from '@react-stately/color';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useState\n} from 'react';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface ColorFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the text field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the text field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color field component.\n * Color fields allow users to enter and adjust a hex color value.\n */\nexport function useColorField(\n  props: AriaColorFieldProps,\n  state: ColorFieldState,\n  ref: RefObject<HTMLInputElement | null>\n): ColorFieldAria {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isWheelDisabled,\n    validationBehavior = 'aria'\n  } = props;\n\n  let {\n    colorValue,\n    inputValue,\n    increment,\n    decrement,\n    incrementToMax,\n    decrementToMin,\n    commit\n  } = state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue: 0xFFFFFF,\n      minValue: 0,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: colorValue ? colorValue.toHexInt() : undefined,\n      textValue: colorValue ? colorValue.toString('hex') : undefined\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let {inputProps, ...otherProps} = useFormattedTextField({\n    ...props,\n    id: inputId,\n    value: inputValue,\n    defaultValue: undefined,\n    validate: undefined,\n    [privateValidationStateProp]: state,\n    type: 'text',\n    autoComplete: 'off',\n    onChange\n  }, state, ref);\n\n  inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {\n    role: 'textbox',\n    'aria-valuemax': null,\n    'aria-valuemin': null,\n    'aria-valuenow': null,\n    'aria-valuetext': null,\n    autoCorrect: 'off',\n    spellCheck: 'false',\n    onBlur: commit\n  });\n\n  if (validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  return {\n    inputProps,\n    ...otherProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorField.module.js.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAiCM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAuC;IAEvC,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,mBACV,eAAe,sBACf,qBAAqB,QACtB,GAAG;IAEJ,IAAI,cACF,UAAU,cACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,kBACd,cAAc,UACd,MAAM,EACP,GAAG;IAEJ,IAAI,UAAU,CAAA,GAAA,YAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,oBAAY,EAClC;oBACE;oBACA;oBACA;QACA,UAAU;QACV,UAAU;QACV,aAAa;QACb,kBAAkB;QAClB,aAAa;QACb,kBAAkB;QAClB,OAAO,aAAa,WAAW,QAAQ,KAAK;QAC5C,WAAW,aAAa,WAAW,QAAQ,CAAC,SAAS;IACvD;IAGF,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,IAAI,KAAK,GAAG,CAAC,EAAE,MAAM,KAAK,KAAK,GAAG,CAAC,EAAE,MAAM,GACzC;QAEF,IAAI,EAAE,MAAM,GAAG,GACb;aACK,IAAI,EAAE,MAAM,GAAG,GACpB;IAEJ,GAAG;QAAC;QAAW;KAAU;IACzB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,qBAAa,EAAE;QAAC,UAAU;QAAS,YAAY;IAAiB,GAAG;IAEnE,IAAI,WAAW,CAAA;QACb,IAAI,MAAM,QAAQ,CAAC,QACjB,MAAM,aAAa,CAAC;IAExB;IAEA,IAAI,cAAC,UAAU,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,4BAAoB,EAAE;QACtD,GAAG,KAAK;QACR,IAAI;QACJ,OAAO;QACP,iFAAiF;QACjF,oCAAoC;QACpC,cAAc;QACd,UAAU;QACV,CAAC,CAAA,GAAA,iCAAyB,EAAE,EAAE;QAC9B,MAAM;QACN,cAAc;kBACd;IACF,GAAG,OAAO;IAEV,CAAA,GAAA,mBAAW,EAAE,KAAK,MAAM,iBAAiB,EAAE,MAAM,aAAa;IAE9D,aAAa,CAAA,GAAA,iBAAS,EAAE,YAAY,iBAAiB,kBAAkB;QACrE,MAAM;QACN,iBAAiB;QACjB,iBAAiB;QACjB,iBAAiB;QACjB,kBAAkB;QAClB,aAAa;QACb,YAAY;QACZ,QAAQ;IACV;IAEA,IAAI,uBAAuB,UACzB,UAAU,CAAC,gBAAgB,GAAG;IAGhC,OAAO;oBACL;QACA,GAAG,UAAU;IACf;AACF","sources":["packages/@react-aria/color/src/useColorField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorFieldProps} from '@react-types/color';\nimport {ColorFieldState} from '@react-stately/color';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  RefObject,\n  useCallback,\n  useState\n} from 'react';\nimport {mergeProps, useFormReset, useId} from '@react-aria/utils';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useFocusWithin, useScrollWheel} from '@react-aria/interactions';\nimport {useFormattedTextField} from '@react-aria/textfield';\nimport {useSpinButton} from '@react-aria/spinbutton';\n\nexport interface ColorFieldAria extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the text field's description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the text field's error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color field component.\n * Color fields allow users to enter and adjust a hex color value.\n */\nexport function useColorField(\n  props: AriaColorFieldProps,\n  state: ColorFieldState,\n  ref: RefObject<HTMLInputElement | null>\n): ColorFieldAria {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isWheelDisabled,\n    validationBehavior = 'aria'\n  } = props;\n\n  let {\n    colorValue,\n    inputValue,\n    increment,\n    decrement,\n    incrementToMax,\n    decrementToMin,\n    commit\n  } = state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton(\n    {\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      maxValue: 0xFFFFFF,\n      minValue: 0,\n      onIncrement: increment,\n      onIncrementToMax: incrementToMax,\n      onDecrement: decrement,\n      onDecrementToMin: decrementToMin,\n      value: colorValue ? colorValue.toHexInt() : undefined,\n      textValue: colorValue ? colorValue.toString('hex') : undefined\n    }\n  );\n\n  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback((e) => {\n    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {\n      return;\n    }\n    if (e.deltaY > 0) {\n      increment();\n    } else if (e.deltaY < 0) {\n      decrement();\n    }\n  }, [decrement, increment]);\n  // If the input isn't supposed to receive input, disable scrolling.\n  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;\n  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let {inputProps, ...otherProps} = useFormattedTextField({\n    ...props,\n    id: inputId,\n    value: inputValue,\n    // Intentionally invalid value that will be ignored by onChange during form reset\n    // This is handled separately below.\n    defaultValue: '!',\n    validate: undefined,\n    [privateValidationStateProp]: state,\n    type: 'text',\n    autoComplete: 'off',\n    onChange\n  }, state, ref);\n\n  useFormReset(ref, state.defaultColorValue, state.setColorValue);\n\n  inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {\n    role: 'textbox',\n    'aria-valuemax': null,\n    'aria-valuemin': null,\n    'aria-valuenow': null,\n    'aria-valuetext': null,\n    autoCorrect: 'off',\n    spellCheck: 'false',\n    onBlur: commit\n  });\n\n  if (validationBehavior === 'native') {\n    inputProps['aria-required'] = undefined;\n  }\n\n  return {\n    inputProps,\n    ...otherProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorField.module.js.map"}

package/dist/useColorSlider.main.js

@@ -24,7 +24,7 @@ $parcel$export(module.exports, "useColorSlider", () => $afbb9647440a7f5b$export$
 
 
 function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
-    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name } = props;
+    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name, form: form } = props;
     let { locale: locale, direction: direction } = (0, $edxco$reactariai18n.useLocale)();
     // Provide a default aria-label if there is no other label provided.
     if (!props.label && !ariaLabel && !props['aria-labelledby']) ariaLabel = state.value.getChannelName(channel, locale);
@@ -38,6 +38,7 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
         orientation: orientation,
         isDisabled: props.isDisabled,
         name: name,
+        form: form,
         trackRef: trackRef,
         inputRef: inputRef
     }, state);

package/dist/useColorSlider.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/color/src/useColorSlider.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorSliderProps} from '@react-types/color';\nimport {ColorSliderState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {InputHTMLAttributes} from 'react';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSlider, useSliderThumb} from '@react-aria/slider';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorSliderOptions extends AriaColorSliderProps {\n  /** A ref for the track element. */\n  trackRef: RefObject<Element | null>,\n  /** A ref for the input element. */\n  inputRef: RefObject<HTMLInputElement | null>\n}\n\nexport interface ColorSliderAria {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the output element, displaying the value of the color slider. */\n  outputProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {\n  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name} = props;\n\n  let {locale, direction} = useLocale();\n\n  // Provide a default aria-label if there is no other label provided.\n  if (!props.label && !ariaLabel && !props['aria-labelledby']) {\n    ariaLabel = state.value.getChannelName(channel, locale);\n  }\n\n  // @ts-ignore - ignore unused incompatible props\n  let {groupProps, trackProps, labelProps, outputProps} = useSlider({...props, 'aria-label': ariaLabel}, state, trackRef);\n  let {inputProps, thumbProps} = useSliderThumb({\n    index: 0,\n    orientation,\n    isDisabled: props.isDisabled,\n    name,\n    trackRef,\n    inputRef\n  }, state);\n\n  let value = state.getDisplayColor();\n  let generateBackground = () => {\n    let to: string;\n    if (orientation === 'vertical') {\n      to = 'top';\n    } else if (direction === 'ltr') {\n      to = 'right';\n    } else {\n      to = 'left';\n    }\n    switch (channel) {\n      case 'hue': {\n        let stops = [0, 60, 120, 180, 240, 300, 360].map(hue => value.withChannelValue('hue', hue).toString('css')).join(', ');\n        return `linear-gradient(to ${to}, ${stops})`;\n      }\n      case 'lightness': {\n        // We have to add an extra color stop in the middle so that the hue shows up at all.\n        // Otherwise it will always just be black to white.\n        let min = state.getThumbMinValue(0);\n        let max = state.getThumbMaxValue(0);\n        let start = value.withChannelValue(channel, min).toString('css');\n        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');\n        let end = value.withChannelValue(channel, max).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;\n      }\n      case 'saturation':\n      case 'brightness':\n      case 'red':\n      case 'green':\n      case 'blue':\n      case 'alpha': {\n        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');\n        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${end})`;\n      }\n      default:\n        throw new Error('Unknown color channel: ' + channel);\n    }\n  };\n\n  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};\n\n  if (channel === 'hue') {\n    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;\n  } else if (channel !== 'alpha') {\n    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;\n  }\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...mergeProps(groupProps, trackProps),\n      style: {\n        ...trackProps.style,\n        ...forcedColorAdjustNoneStyle,\n        background: generateBackground()\n      }\n    },\n    inputProps: {\n      ...inputProps,\n      style: {\n        ...inputProps.style,\n        ...visuallyHiddenProps.style\n      }\n    },\n    thumbProps: {\n      ...thumbProps,\n      style: {\n        ...thumbProps.style,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    labelProps,\n    outputProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorSlider.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/color/src/useColorSlider.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorSliderProps} from '@react-types/color';\nimport {ColorSliderState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {InputHTMLAttributes} from 'react';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSlider, useSliderThumb} from '@react-aria/slider';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorSliderOptions extends AriaColorSliderProps {\n  /** A ref for the track element. */\n  trackRef: RefObject<Element | null>,\n  /** A ref for the input element. */\n  inputRef: RefObject<HTMLInputElement | null>\n}\n\nexport interface ColorSliderAria {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the output element, displaying the value of the color slider. */\n  outputProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {\n  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name, form} = props;\n\n  let {locale, direction} = useLocale();\n\n  // Provide a default aria-label if there is no other label provided.\n  if (!props.label && !ariaLabel && !props['aria-labelledby']) {\n    ariaLabel = state.value.getChannelName(channel, locale);\n  }\n\n  // @ts-ignore - ignore unused incompatible props\n  let {groupProps, trackProps, labelProps, outputProps} = useSlider({...props, 'aria-label': ariaLabel}, state, trackRef);\n  let {inputProps, thumbProps} = useSliderThumb({\n    index: 0,\n    orientation,\n    isDisabled: props.isDisabled,\n    name,\n    form,\n    trackRef,\n    inputRef\n  }, state);\n\n  let value = state.getDisplayColor();\n  let generateBackground = () => {\n    let to: string;\n    if (orientation === 'vertical') {\n      to = 'top';\n    } else if (direction === 'ltr') {\n      to = 'right';\n    } else {\n      to = 'left';\n    }\n    switch (channel) {\n      case 'hue': {\n        let stops = [0, 60, 120, 180, 240, 300, 360].map(hue => value.withChannelValue('hue', hue).toString('css')).join(', ');\n        return `linear-gradient(to ${to}, ${stops})`;\n      }\n      case 'lightness': {\n        // We have to add an extra color stop in the middle so that the hue shows up at all.\n        // Otherwise it will always just be black to white.\n        let min = state.getThumbMinValue(0);\n        let max = state.getThumbMaxValue(0);\n        let start = value.withChannelValue(channel, min).toString('css');\n        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');\n        let end = value.withChannelValue(channel, max).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;\n      }\n      case 'saturation':\n      case 'brightness':\n      case 'red':\n      case 'green':\n      case 'blue':\n      case 'alpha': {\n        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');\n        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${end})`;\n      }\n      default:\n        throw new Error('Unknown color channel: ' + channel);\n    }\n  };\n\n  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};\n\n  if (channel === 'hue') {\n    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;\n  } else if (channel !== 'alpha') {\n    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;\n  }\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...mergeProps(groupProps, trackProps),\n      style: {\n        ...trackProps.style,\n        ...forcedColorAdjustNoneStyle,\n        background: generateBackground()\n      }\n    },\n    inputProps: {\n      ...inputProps,\n      style: {\n        ...inputProps.style,\n        ...visuallyHiddenProps.style\n      }\n    },\n    thumbProps: {\n      ...thumbProps,\n      style: {\n        ...thumbProps.style,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    labelProps,\n    outputProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorSlider.main.js.map"}

package/dist/useColorSlider.mjs

@@ -18,7 +18,7 @@ import {useVisuallyHidden as $6WsjB$useVisuallyHidden} from "@react-aria/visuall
 
 
 function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
-    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name } = props;
+    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name, form: form } = props;
     let { locale: locale, direction: direction } = (0, $6WsjB$useLocale)();
     // Provide a default aria-label if there is no other label provided.
     if (!props.label && !ariaLabel && !props['aria-labelledby']) ariaLabel = state.value.getChannelName(channel, locale);
@@ -32,6 +32,7 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
         orientation: orientation,
         isDisabled: props.isDisabled,
         name: name,
+        form: form,
         trackRef: trackRef,
         inputRef: inputRef
     }, state);

package/dist/useColorSlider.module.js

@@ -18,7 +18,7 @@ import {useVisuallyHidden as $6WsjB$useVisuallyHidden} from "@react-aria/visuall
 
 
 function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
-    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name } = props;
+    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name, form: form } = props;
     let { locale: locale, direction: direction } = (0, $6WsjB$useLocale)();
     // Provide a default aria-label if there is no other label provided.
     if (!props.label && !ariaLabel && !props['aria-labelledby']) ariaLabel = state.value.getChannelName(channel, locale);
@@ -32,6 +32,7 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
         orientation: orientation,
         isDisabled: props.isDisabled,
         name: name,
+        form: form,
         trackRef: trackRef,
         inputRef: inputRef
     }, state);

package/dist/useColorSlider.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/color/src/useColorSlider.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorSliderProps} from '@react-types/color';\nimport {ColorSliderState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {InputHTMLAttributes} from 'react';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSlider, useSliderThumb} from '@react-aria/slider';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorSliderOptions extends AriaColorSliderProps {\n  /** A ref for the track element. */\n  trackRef: RefObject<Element | null>,\n  /** A ref for the input element. */\n  inputRef: RefObject<HTMLInputElement | null>\n}\n\nexport interface ColorSliderAria {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the output element, displaying the value of the color slider. */\n  outputProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {\n  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name} = props;\n\n  let {locale, direction} = useLocale();\n\n  // Provide a default aria-label if there is no other label provided.\n  if (!props.label && !ariaLabel && !props['aria-labelledby']) {\n    ariaLabel = state.value.getChannelName(channel, locale);\n  }\n\n  // @ts-ignore - ignore unused incompatible props\n  let {groupProps, trackProps, labelProps, outputProps} = useSlider({...props, 'aria-label': ariaLabel}, state, trackRef);\n  let {inputProps, thumbProps} = useSliderThumb({\n    index: 0,\n    orientation,\n    isDisabled: props.isDisabled,\n    name,\n    trackRef,\n    inputRef\n  }, state);\n\n  let value = state.getDisplayColor();\n  let generateBackground = () => {\n    let to: string;\n    if (orientation === 'vertical') {\n      to = 'top';\n    } else if (direction === 'ltr') {\n      to = 'right';\n    } else {\n      to = 'left';\n    }\n    switch (channel) {\n      case 'hue': {\n        let stops = [0, 60, 120, 180, 240, 300, 360].map(hue => value.withChannelValue('hue', hue).toString('css')).join(', ');\n        return `linear-gradient(to ${to}, ${stops})`;\n      }\n      case 'lightness': {\n        // We have to add an extra color stop in the middle so that the hue shows up at all.\n        // Otherwise it will always just be black to white.\n        let min = state.getThumbMinValue(0);\n        let max = state.getThumbMaxValue(0);\n        let start = value.withChannelValue(channel, min).toString('css');\n        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');\n        let end = value.withChannelValue(channel, max).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;\n      }\n      case 'saturation':\n      case 'brightness':\n      case 'red':\n      case 'green':\n      case 'blue':\n      case 'alpha': {\n        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');\n        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${end})`;\n      }\n      default:\n        throw new Error('Unknown color channel: ' + channel);\n    }\n  };\n\n  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};\n\n  if (channel === 'hue') {\n    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;\n  } else if (channel !== 'alpha') {\n    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;\n  }\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...mergeProps(groupProps, trackProps),\n      style: {\n        ...trackProps.style,\n        ...forcedColorAdjustNoneStyle,\n        background: generateBackground()\n      }\n    },\n    inputProps: {\n      ...inputProps,\n      style: {\n        ...inputProps.style,\n        ...visuallyHiddenProps.style\n      }\n    },\n    thumbProps: {\n      ...thumbProps,\n      style: {\n        ...thumbProps.style,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    labelProps,\n    outputProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorSlider.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/color/src/useColorSlider.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorSliderProps} from '@react-types/color';\nimport {ColorSliderState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {InputHTMLAttributes} from 'react';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSlider, useSliderThumb} from '@react-aria/slider';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorSliderOptions extends AriaColorSliderProps {\n  /** A ref for the track element. */\n  trackRef: RefObject<Element | null>,\n  /** A ref for the input element. */\n  inputRef: RefObject<HTMLInputElement | null>\n}\n\nexport interface ColorSliderAria {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the output element, displaying the value of the color slider. */\n  outputProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {\n  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name, form} = props;\n\n  let {locale, direction} = useLocale();\n\n  // Provide a default aria-label if there is no other label provided.\n  if (!props.label && !ariaLabel && !props['aria-labelledby']) {\n    ariaLabel = state.value.getChannelName(channel, locale);\n  }\n\n  // @ts-ignore - ignore unused incompatible props\n  let {groupProps, trackProps, labelProps, outputProps} = useSlider({...props, 'aria-label': ariaLabel}, state, trackRef);\n  let {inputProps, thumbProps} = useSliderThumb({\n    index: 0,\n    orientation,\n    isDisabled: props.isDisabled,\n    name,\n    form,\n    trackRef,\n    inputRef\n  }, state);\n\n  let value = state.getDisplayColor();\n  let generateBackground = () => {\n    let to: string;\n    if (orientation === 'vertical') {\n      to = 'top';\n    } else if (direction === 'ltr') {\n      to = 'right';\n    } else {\n      to = 'left';\n    }\n    switch (channel) {\n      case 'hue': {\n        let stops = [0, 60, 120, 180, 240, 300, 360].map(hue => value.withChannelValue('hue', hue).toString('css')).join(', ');\n        return `linear-gradient(to ${to}, ${stops})`;\n      }\n      case 'lightness': {\n        // We have to add an extra color stop in the middle so that the hue shows up at all.\n        // Otherwise it will always just be black to white.\n        let min = state.getThumbMinValue(0);\n        let max = state.getThumbMaxValue(0);\n        let start = value.withChannelValue(channel, min).toString('css');\n        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');\n        let end = value.withChannelValue(channel, max).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;\n      }\n      case 'saturation':\n      case 'brightness':\n      case 'red':\n      case 'green':\n      case 'blue':\n      case 'alpha': {\n        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');\n        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');\n        return `linear-gradient(to ${to}, ${start}, ${end})`;\n      }\n      default:\n        throw new Error('Unknown color channel: ' + channel);\n    }\n  };\n\n  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};\n\n  if (channel === 'hue') {\n    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;\n  } else if (channel !== 'alpha') {\n    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;\n  }\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...mergeProps(groupProps, trackProps),\n      style: {\n        ...trackProps.style,\n        ...forcedColorAdjustNoneStyle,\n        background: generateBackground()\n      }\n    },\n    inputProps: {\n      ...inputProps,\n      style: {\n        ...inputProps.style,\n        ...visuallyHiddenProps.style\n      }\n    },\n    thumbProps: {\n      ...thumbProps,\n      style: {\n        ...thumbProps.style,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    labelProps,\n    outputProps\n  };\n}\n"],"names":[],"version":3,"file":"useColorSlider.module.js.map"}

package/dist/useColorWheel.main.js

@@ -26,7 +26,7 @@ $parcel$export(module.exports, "useColorWheel", () => $1d29bf243d4a9a53$export$9
 
 
 function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
-    let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, 'aria-label': ariaLabel, name: name } = props;
+    let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, 'aria-label': ariaLabel, name: name, form: form } = props;
     let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $iWAp3$reactariautils.useGlobalListeners)();
     let thumbRadius = (innerRadius + outerRadius) / 2;
     let focusInput = (0, $iWAp3$react.useCallback)(()=>{
@@ -34,7 +34,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
     }, [
         inputRef
     ]);
-    (0, $iWAp3$reactariautils.useFormReset)(inputRef, state.hue, state.setHue);
+    (0, $iWAp3$reactariautils.useFormReset)(inputRef, state.defaultValue, state.setValue);
     let currentPosition = (0, $iWAp3$react.useRef)(null);
     let { keyboardProps: keyboardProps } = (0, $iWAp3$reactariainteractions.useKeyboard)({
         onKeyDown (e) {
@@ -255,6 +255,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             disabled: isDisabled,
             value: `${state.value.getChannelValue('hue')}`,
             name: name,
+            form: form,
             onChange: (e)=>{
                 state.setHue(parseFloat(e.target.value));
             },

package/dist/useColorWheel.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/color/src/useColorWheel.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps} from '@react-types/color';\nimport {ColorWheelState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef} from 'react';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorWheelOptions extends AriaColorWheelProps {\n  /** The outer radius of the color wheel. */\n  outerRadius: number,\n  /** The inner radius of the color wheel. */\n  innerRadius: number\n}\n\nexport interface ColorWheelAria {\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelState, inputRef: RefObject<HTMLInputElement | null>): ColorWheelAria {\n  let {\n    isDisabled,\n    innerRadius,\n    outerRadius,\n    'aria-label': ariaLabel,\n    name\n  } = props;\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let thumbRadius = (innerRadius + outerRadius) / 2;\n\n  let focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  useFormReset(inputRef, state.hue, state.setHue);\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      switch (e.key) {\n        case 'PageUp':\n          e.preventDefault();\n          state.increment(state.pageStep);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          state.decrement(state.pageStep);\n          break;\n      }\n      state.setDragging(false);\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      if (currentPosition.current == null) {\n        currentPosition.current = state.getThumbPosition(thumbRadius);\n      }\n      currentPosition.current.x += deltaX;\n      currentPosition.current.y += deltaY;\n      if (pointerType === 'keyboard') {\n        if (deltaX > 0 || deltaY < 0) {\n          state.increment(shiftKey ? state.pageStep : state.step);\n        } else if (deltaX < 0 || deltaY > 0) {\n          state.decrement(shiftKey ? state.pageStep : state.step);\n        }\n      } else {\n        state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);\n      }\n    },\n    onMoveEnd() {\n      isOnTrack.current = false;\n      state.setDragging(false);\n      focusInput();\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnTrack = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnTrack.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnTrack.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onTrackDown = (track: Element, id: number | null | undefined, pageX: number, pageY: number) => {\n    let rect = track.getBoundingClientRect();\n    let x = pageX - rect.x - rect.width / 2;\n    let y = pageY - rect.y - rect.height / 2;\n    let radius = Math.sqrt(x * x + y * y);\n    if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {\n      isOnTrack.current = true;\n      currentPointer.current = id;\n      state.setHueFromPoint(x, y, radius);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onTrackUp, false);\n        addGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let onTrackUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnTrack.current && id === currentPointer.current) {\n      isOnTrack.current = false;\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onTrackUp, false);\n        removeGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let trackInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    onMouseDown: (e: React.MouseEvent) => {\n      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n        return;\n      }\n      onThumbDown(undefined);\n    },\n    onPointerDown: (e: React.PointerEvent) => {\n      if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n        return;\n      }\n      onThumbDown(e.pointerId);\n    },\n    onTouchStart: (e: React.TouchEvent) => {\n      onThumbDown(e.changedTouches[0].identifier);\n    }\n  }, keyboardProps, movePropsThumb);\n  let {x, y} = state.getThumbPosition(thumbRadius);\n\n  // Provide a default aria-label if none is given\n  let {locale} = useLocale();\n  if (ariaLabel == null && props['aria-labelledby'] == null) {\n    ariaLabel = state.value.getChannelName('hue', locale);\n  }\n\n  let inputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n  });\n\n  let {minValue, maxValue, step} = state.value.getChannelRange('hue');\n\n  let forcedColorAdjustNoneStyle = {\n    forcedColorAdjust: 'none'\n  };\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...trackInteractions,\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        width: outerRadius * 2,\n        height: outerRadius * 2,\n        background: `\n          conic-gradient(\n            from 90deg,\n            hsl(0, 100%, 50%),\n            hsl(30, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(90, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(150, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(210, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(270, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(330, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        `,\n        clipPath: `path(evenodd, \"${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}\")`,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      style: {\n        position: 'absolute',\n        left: outerRadius + x,\n        top: outerRadius + y,\n        transform: 'translate(-50%, -50%)',\n        touchAction: 'none',\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    inputProps: mergeProps(\n      inputLabellingProps,\n      {\n        type: 'range',\n        min: String(minValue),\n        max: String(maxValue),\n        step: String(step),\n        'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,\n        disabled: isDisabled,\n        value: `${state.value.getChannelValue('hue')}`,\n        name,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => {\n          state.setHue(parseFloat(e.target.value));\n        },\n        style: visuallyHiddenProps.style,\n        'aria-errormessage': props['aria-errormessage'],\n        'aria-describedby': props['aria-describedby'],\n        'aria-details': props['aria-details']\n      }\n    )\n  };\n}\n\n// Creates an SVG path string for a circle.\nfunction circlePath(cx: number, cy: number, r: number) {\n  return `M ${cx}, ${cy} m ${-r}, 0 a ${r}, ${r}, 0, 1, 0, ${r * 2}, 0 a ${r}, ${r}, 0, 1, 0 ${-r * 2}, 0`;\n}\n"],"names":[],"version":3,"file":"useColorWheel.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/color/src/useColorWheel.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps} from '@react-types/color';\nimport {ColorWheelState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef} from 'react';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorWheelOptions extends AriaColorWheelProps {\n  /** The outer radius of the color wheel. */\n  outerRadius: number,\n  /** The inner radius of the color wheel. */\n  innerRadius: number\n}\n\nexport interface ColorWheelAria {\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelState, inputRef: RefObject<HTMLInputElement | null>): ColorWheelAria {\n  let {\n    isDisabled,\n    innerRadius,\n    outerRadius,\n    'aria-label': ariaLabel,\n    name,\n    form\n  } = props;\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let thumbRadius = (innerRadius + outerRadius) / 2;\n\n  let focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  useFormReset(inputRef, state.defaultValue, state.setValue);\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      switch (e.key) {\n        case 'PageUp':\n          e.preventDefault();\n          state.increment(state.pageStep);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          state.decrement(state.pageStep);\n          break;\n      }\n      state.setDragging(false);\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      if (currentPosition.current == null) {\n        currentPosition.current = state.getThumbPosition(thumbRadius);\n      }\n      currentPosition.current.x += deltaX;\n      currentPosition.current.y += deltaY;\n      if (pointerType === 'keyboard') {\n        if (deltaX > 0 || deltaY < 0) {\n          state.increment(shiftKey ? state.pageStep : state.step);\n        } else if (deltaX < 0 || deltaY > 0) {\n          state.decrement(shiftKey ? state.pageStep : state.step);\n        }\n      } else {\n        state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);\n      }\n    },\n    onMoveEnd() {\n      isOnTrack.current = false;\n      state.setDragging(false);\n      focusInput();\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnTrack = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnTrack.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnTrack.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onTrackDown = (track: Element, id: number | null | undefined, pageX: number, pageY: number) => {\n    let rect = track.getBoundingClientRect();\n    let x = pageX - rect.x - rect.width / 2;\n    let y = pageY - rect.y - rect.height / 2;\n    let radius = Math.sqrt(x * x + y * y);\n    if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {\n      isOnTrack.current = true;\n      currentPointer.current = id;\n      state.setHueFromPoint(x, y, radius);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onTrackUp, false);\n        addGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let onTrackUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnTrack.current && id === currentPointer.current) {\n      isOnTrack.current = false;\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onTrackUp, false);\n        removeGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let trackInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    onMouseDown: (e: React.MouseEvent) => {\n      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n        return;\n      }\n      onThumbDown(undefined);\n    },\n    onPointerDown: (e: React.PointerEvent) => {\n      if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n        return;\n      }\n      onThumbDown(e.pointerId);\n    },\n    onTouchStart: (e: React.TouchEvent) => {\n      onThumbDown(e.changedTouches[0].identifier);\n    }\n  }, keyboardProps, movePropsThumb);\n  let {x, y} = state.getThumbPosition(thumbRadius);\n\n  // Provide a default aria-label if none is given\n  let {locale} = useLocale();\n  if (ariaLabel == null && props['aria-labelledby'] == null) {\n    ariaLabel = state.value.getChannelName('hue', locale);\n  }\n\n  let inputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n  });\n\n  let {minValue, maxValue, step} = state.value.getChannelRange('hue');\n\n  let forcedColorAdjustNoneStyle = {\n    forcedColorAdjust: 'none'\n  };\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...trackInteractions,\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        width: outerRadius * 2,\n        height: outerRadius * 2,\n        background: `\n          conic-gradient(\n            from 90deg,\n            hsl(0, 100%, 50%),\n            hsl(30, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(90, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(150, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(210, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(270, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(330, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        `,\n        clipPath: `path(evenodd, \"${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}\")`,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      style: {\n        position: 'absolute',\n        left: outerRadius + x,\n        top: outerRadius + y,\n        transform: 'translate(-50%, -50%)',\n        touchAction: 'none',\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    inputProps: mergeProps(\n      inputLabellingProps,\n      {\n        type: 'range',\n        min: String(minValue),\n        max: String(maxValue),\n        step: String(step),\n        'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,\n        disabled: isDisabled,\n        value: `${state.value.getChannelValue('hue')}`,\n        name,\n        form,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => {\n          state.setHue(parseFloat(e.target.value));\n        },\n        style: visuallyHiddenProps.style,\n        'aria-errormessage': props['aria-errormessage'],\n        'aria-describedby': props['aria-describedby'],\n        'aria-details': props['aria-details']\n      }\n    )\n  };\n}\n\n// Creates an SVG path string for a circle.\nfunction circlePath(cx: number, cy: number, r: number) {\n  return `M ${cx}, ${cy} m ${-r}, 0 a ${r}, ${r}, 0, 1, 0, ${r * 2}, 0 a ${r}, ${r}, 0, 1, 0 ${-r * 2}, 0`;\n}\n"],"names":[],"version":3,"file":"useColorWheel.main.js.map"}

package/dist/useColorWheel.mjs

@@ -20,7 +20,7 @@ import {useVisuallyHidden as $hcgPp$useVisuallyHidden} from "@react-aria/visuall
 
 
 function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
-    let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, 'aria-label': ariaLabel, name: name } = props;
+    let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, 'aria-label': ariaLabel, name: name, form: form } = props;
     let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $hcgPp$useGlobalListeners)();
     let thumbRadius = (innerRadius + outerRadius) / 2;
     let focusInput = (0, $hcgPp$useCallback)(()=>{
@@ -28,7 +28,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
     }, [
         inputRef
     ]);
-    (0, $hcgPp$useFormReset)(inputRef, state.hue, state.setHue);
+    (0, $hcgPp$useFormReset)(inputRef, state.defaultValue, state.setValue);
     let currentPosition = (0, $hcgPp$useRef)(null);
     let { keyboardProps: keyboardProps } = (0, $hcgPp$useKeyboard)({
         onKeyDown (e) {
@@ -249,6 +249,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
             disabled: isDisabled,
             value: `${state.value.getChannelValue('hue')}`,
             name: name,
+            form: form,
             onChange: (e)=>{
                 state.setHue(parseFloat(e.target.value));
             },

package/dist/useColorWheel.module.js

@@ -20,7 +20,7 @@ import {useVisuallyHidden as $hcgPp$useVisuallyHidden} from "@react-aria/visuall
 
 
 function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
-    let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, 'aria-label': ariaLabel, name: name } = props;
+    let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, 'aria-label': ariaLabel, name: name, form: form } = props;
     let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $hcgPp$useGlobalListeners)();
     let thumbRadius = (innerRadius + outerRadius) / 2;
     let focusInput = (0, $hcgPp$useCallback)(()=>{
@@ -28,7 +28,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
     }, [
         inputRef
     ]);
-    (0, $hcgPp$useFormReset)(inputRef, state.hue, state.setHue);
+    (0, $hcgPp$useFormReset)(inputRef, state.defaultValue, state.setValue);
     let currentPosition = (0, $hcgPp$useRef)(null);
     let { keyboardProps: keyboardProps } = (0, $hcgPp$useKeyboard)({
         onKeyDown (e) {
@@ -249,6 +249,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
             disabled: isDisabled,
             value: `${state.value.getChannelValue('hue')}`,
             name: name,
+            form: form,
             onChange: (e)=>{
                 state.setHue(parseFloat(e.target.value));
             },

package/dist/useColorWheel.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/color/src/useColorWheel.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps} from '@react-types/color';\nimport {ColorWheelState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef} from 'react';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorWheelOptions extends AriaColorWheelProps {\n  /** The outer radius of the color wheel. */\n  outerRadius: number,\n  /** The inner radius of the color wheel. */\n  innerRadius: number\n}\n\nexport interface ColorWheelAria {\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelState, inputRef: RefObject<HTMLInputElement | null>): ColorWheelAria {\n  let {\n    isDisabled,\n    innerRadius,\n    outerRadius,\n    'aria-label': ariaLabel,\n    name\n  } = props;\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let thumbRadius = (innerRadius + outerRadius) / 2;\n\n  let focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  useFormReset(inputRef, state.hue, state.setHue);\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      switch (e.key) {\n        case 'PageUp':\n          e.preventDefault();\n          state.increment(state.pageStep);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          state.decrement(state.pageStep);\n          break;\n      }\n      state.setDragging(false);\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      if (currentPosition.current == null) {\n        currentPosition.current = state.getThumbPosition(thumbRadius);\n      }\n      currentPosition.current.x += deltaX;\n      currentPosition.current.y += deltaY;\n      if (pointerType === 'keyboard') {\n        if (deltaX > 0 || deltaY < 0) {\n          state.increment(shiftKey ? state.pageStep : state.step);\n        } else if (deltaX < 0 || deltaY > 0) {\n          state.decrement(shiftKey ? state.pageStep : state.step);\n        }\n      } else {\n        state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);\n      }\n    },\n    onMoveEnd() {\n      isOnTrack.current = false;\n      state.setDragging(false);\n      focusInput();\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnTrack = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnTrack.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnTrack.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onTrackDown = (track: Element, id: number | null | undefined, pageX: number, pageY: number) => {\n    let rect = track.getBoundingClientRect();\n    let x = pageX - rect.x - rect.width / 2;\n    let y = pageY - rect.y - rect.height / 2;\n    let radius = Math.sqrt(x * x + y * y);\n    if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {\n      isOnTrack.current = true;\n      currentPointer.current = id;\n      state.setHueFromPoint(x, y, radius);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onTrackUp, false);\n        addGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let onTrackUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnTrack.current && id === currentPointer.current) {\n      isOnTrack.current = false;\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onTrackUp, false);\n        removeGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let trackInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    onMouseDown: (e: React.MouseEvent) => {\n      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n        return;\n      }\n      onThumbDown(undefined);\n    },\n    onPointerDown: (e: React.PointerEvent) => {\n      if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n        return;\n      }\n      onThumbDown(e.pointerId);\n    },\n    onTouchStart: (e: React.TouchEvent) => {\n      onThumbDown(e.changedTouches[0].identifier);\n    }\n  }, keyboardProps, movePropsThumb);\n  let {x, y} = state.getThumbPosition(thumbRadius);\n\n  // Provide a default aria-label if none is given\n  let {locale} = useLocale();\n  if (ariaLabel == null && props['aria-labelledby'] == null) {\n    ariaLabel = state.value.getChannelName('hue', locale);\n  }\n\n  let inputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n  });\n\n  let {minValue, maxValue, step} = state.value.getChannelRange('hue');\n\n  let forcedColorAdjustNoneStyle = {\n    forcedColorAdjust: 'none'\n  };\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...trackInteractions,\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        width: outerRadius * 2,\n        height: outerRadius * 2,\n        background: `\n          conic-gradient(\n            from 90deg,\n            hsl(0, 100%, 50%),\n            hsl(30, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(90, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(150, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(210, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(270, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(330, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        `,\n        clipPath: `path(evenodd, \"${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}\")`,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      style: {\n        position: 'absolute',\n        left: outerRadius + x,\n        top: outerRadius + y,\n        transform: 'translate(-50%, -50%)',\n        touchAction: 'none',\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    inputProps: mergeProps(\n      inputLabellingProps,\n      {\n        type: 'range',\n        min: String(minValue),\n        max: String(maxValue),\n        step: String(step),\n        'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,\n        disabled: isDisabled,\n        value: `${state.value.getChannelValue('hue')}`,\n        name,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => {\n          state.setHue(parseFloat(e.target.value));\n        },\n        style: visuallyHiddenProps.style,\n        'aria-errormessage': props['aria-errormessage'],\n        'aria-describedby': props['aria-describedby'],\n        'aria-details': props['aria-details']\n      }\n    )\n  };\n}\n\n// Creates an SVG path string for a circle.\nfunction circlePath(cx: number, cy: number, r: number) {\n  return `M ${cx}, ${cy} m ${-r}, 0 a ${r}, ${r}, 0, 1, 0, ${r * 2}, 0 a ${r}, ${r}, 0, 1, 0 ${-r * 2}, 0`;\n}\n"],"names":[],"version":3,"file":"useColorWheel.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/color/src/useColorWheel.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaColorWheelProps} from '@react-types/color';\nimport {ColorWheelState} from '@react-stately/color';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef} from 'react';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaColorWheelOptions extends AriaColorWheelProps {\n  /** The outer radius of the color wheel. */\n  outerRadius: number,\n  /** The inner radius of the color wheel. */\n  innerRadius: number\n}\n\nexport interface ColorWheelAria {\n  /** Props for the track element. */\n  trackProps: DOMAttributes,\n  /** Props for the thumb element. */\n  thumbProps: DOMAttributes,\n  /** Props for the visually hidden range input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelState, inputRef: RefObject<HTMLInputElement | null>): ColorWheelAria {\n  let {\n    isDisabled,\n    innerRadius,\n    outerRadius,\n    'aria-label': ariaLabel,\n    name,\n    form\n  } = props;\n\n  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n  let thumbRadius = (innerRadius + outerRadius) / 2;\n\n  let focusInput = useCallback(() => {\n    if (inputRef.current) {\n      focusWithoutScrolling(inputRef.current);\n    }\n  }, [inputRef]);\n\n  useFormReset(inputRef, state.defaultValue, state.setValue);\n\n  let currentPosition = useRef<{x: number, y: number} | null>(null);\n\n  let {keyboardProps} = useKeyboard({\n    onKeyDown(e) {\n      // these are the cases that useMove doesn't handle\n      if (!/^(PageUp|PageDown)$/.test(e.key)) {\n        e.continuePropagation();\n        return;\n      }\n      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us\n      e.preventDefault();\n      // remember to set this and unset it so that onChangeEnd is fired\n      state.setDragging(true);\n      switch (e.key) {\n        case 'PageUp':\n          e.preventDefault();\n          state.increment(state.pageStep);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          state.decrement(state.pageStep);\n          break;\n      }\n      state.setDragging(false);\n    }\n  });\n\n  let moveHandler = {\n    onMoveStart() {\n      currentPosition.current = null;\n      state.setDragging(true);\n    },\n    onMove({deltaX, deltaY, pointerType, shiftKey}) {\n      if (currentPosition.current == null) {\n        currentPosition.current = state.getThumbPosition(thumbRadius);\n      }\n      currentPosition.current.x += deltaX;\n      currentPosition.current.y += deltaY;\n      if (pointerType === 'keyboard') {\n        if (deltaX > 0 || deltaY < 0) {\n          state.increment(shiftKey ? state.pageStep : state.step);\n        } else if (deltaX < 0 || deltaY > 0) {\n          state.decrement(shiftKey ? state.pageStep : state.step);\n        }\n      } else {\n        state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);\n      }\n    },\n    onMoveEnd() {\n      isOnTrack.current = false;\n      state.setDragging(false);\n      focusInput();\n    }\n  };\n  let {moveProps: movePropsThumb} = useMove(moveHandler);\n\n  let currentPointer = useRef<number | null | undefined>(undefined);\n  let isOnTrack = useRef<boolean>(false);\n  let {moveProps: movePropsContainer} = useMove({\n    onMoveStart() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveStart();\n      }\n    },\n    onMove(e) {\n      if (isOnTrack.current) {\n        moveHandler.onMove(e);\n      }\n    },\n    onMoveEnd() {\n      if (isOnTrack.current) {\n        moveHandler.onMoveEnd();\n      }\n    }\n  });\n\n  let onThumbDown = (id: number | null | undefined) => {\n    if (!state.isDragging) {\n      currentPointer.current = id;\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onThumbUp, false);\n        addGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onThumbUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (id === currentPointer.current) {\n      focusInput();\n      state.setDragging(false);\n      currentPointer.current = undefined;\n      isOnTrack.current = false;\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onThumbUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onThumbUp, false);\n        removeGlobalListener(window, 'touchend', onThumbUp, false);\n      }\n    }\n  };\n\n  let onTrackDown = (track: Element, id: number | null | undefined, pageX: number, pageY: number) => {\n    let rect = track.getBoundingClientRect();\n    let x = pageX - rect.x - rect.width / 2;\n    let y = pageY - rect.y - rect.height / 2;\n    let radius = Math.sqrt(x * x + y * y);\n    if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {\n      isOnTrack.current = true;\n      currentPointer.current = id;\n      state.setHueFromPoint(x, y, radius);\n\n      focusInput();\n      state.setDragging(true);\n\n      if (typeof PointerEvent !== 'undefined') {\n        addGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        addGlobalListener(window, 'mouseup', onTrackUp, false);\n        addGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let onTrackUp = (e) => {\n    let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n    if (isOnTrack.current && id === currentPointer.current) {\n      isOnTrack.current = false;\n      currentPointer.current = undefined;\n      state.setDragging(false);\n      focusInput();\n\n\n      if (typeof PointerEvent !== 'undefined') {\n        removeGlobalListener(window, 'pointerup', onTrackUp, false);\n      } else {\n        removeGlobalListener(window, 'mouseup', onTrackUp, false);\n        removeGlobalListener(window, 'touchend', onTrackUp, false);\n      }\n    }\n  };\n\n  let trackInteractions = isDisabled ? {} : mergeProps({\n    ...(typeof PointerEvent !== 'undefined' ? {\n      onPointerDown: (e: React.PointerEvent) => {\n        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n          return;\n        }\n        onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n      }} : {\n        onMouseDown: (e: React.MouseEvent) => {\n          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n            return;\n          }\n          onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);\n        },\n        onTouchStart: (e: React.TouchEvent) => {\n          onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\n        }\n      })\n  }, movePropsContainer);\n\n  let thumbInteractions = isDisabled ? {} : mergeProps({\n    onMouseDown: (e: React.MouseEvent) => {\n      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n        return;\n      }\n      onThumbDown(undefined);\n    },\n    onPointerDown: (e: React.PointerEvent) => {\n      if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n        return;\n      }\n      onThumbDown(e.pointerId);\n    },\n    onTouchStart: (e: React.TouchEvent) => {\n      onThumbDown(e.changedTouches[0].identifier);\n    }\n  }, keyboardProps, movePropsThumb);\n  let {x, y} = state.getThumbPosition(thumbRadius);\n\n  // Provide a default aria-label if none is given\n  let {locale} = useLocale();\n  if (ariaLabel == null && props['aria-labelledby'] == null) {\n    ariaLabel = state.value.getChannelName('hue', locale);\n  }\n\n  let inputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n  });\n\n  let {minValue, maxValue, step} = state.value.getChannelRange('hue');\n\n  let forcedColorAdjustNoneStyle = {\n    forcedColorAdjust: 'none'\n  };\n\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  return {\n    trackProps: {\n      ...trackInteractions,\n      style: {\n        position: 'relative',\n        touchAction: 'none',\n        width: outerRadius * 2,\n        height: outerRadius * 2,\n        background: `\n          conic-gradient(\n            from 90deg,\n            hsl(0, 100%, 50%),\n            hsl(30, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(90, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(150, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(210, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(270, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(330, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        `,\n        clipPath: `path(evenodd, \"${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}\")`,\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    thumbProps: {\n      ...thumbInteractions,\n      style: {\n        position: 'absolute',\n        left: outerRadius + x,\n        top: outerRadius + y,\n        transform: 'translate(-50%, -50%)',\n        touchAction: 'none',\n        ...forcedColorAdjustNoneStyle\n      }\n    },\n    inputProps: mergeProps(\n      inputLabellingProps,\n      {\n        type: 'range',\n        min: String(minValue),\n        max: String(maxValue),\n        step: String(step),\n        'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,\n        disabled: isDisabled,\n        value: `${state.value.getChannelValue('hue')}`,\n        name,\n        form,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => {\n          state.setHue(parseFloat(e.target.value));\n        },\n        style: visuallyHiddenProps.style,\n        'aria-errormessage': props['aria-errormessage'],\n        'aria-describedby': props['aria-describedby'],\n        'aria-details': props['aria-details']\n      }\n    )\n  };\n}\n\n// Creates an SVG path string for a circle.\nfunction circlePath(cx: number, cy: number, r: number) {\n  return `M ${cx}, ${cy} m ${-r}, 0 a ${r}, ${r}, 0, 1, 0, ${r * 2}, 0 a ${r}, ${r}, 0, 1, 0 ${-r * 2}, 0`;\n}\n"],"names":[],"version":3,"file":"useColorWheel.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/color",
-  "version": "3.0.9",
+  "version": "3.1.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -26,18 +26,18 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "^3.12.10",
-    "@react-aria/interactions": "^3.25.3",
-    "@react-aria/numberfield": "^3.11.16",
-    "@react-aria/slider": "^3.7.21",
-    "@react-aria/spinbutton": "^3.6.16",
-    "@react-aria/textfield": "^3.17.5",
-    "@react-aria/utils": "^3.29.1",
-    "@react-aria/visually-hidden": "^3.8.25",
-    "@react-stately/color": "^3.8.6",
-    "@react-stately/form": "^3.1.5",
-    "@react-types/color": "^3.0.6",
-    "@react-types/shared": "^3.30.0",
+    "@react-aria/i18n": "^3.12.12",
+    "@react-aria/interactions": "^3.25.5",
+    "@react-aria/numberfield": "^3.12.1",
+    "@react-aria/slider": "^3.8.1",
+    "@react-aria/spinbutton": "^3.6.18",
+    "@react-aria/textfield": "^3.18.1",
+    "@react-aria/utils": "^3.30.1",
+    "@react-aria/visually-hidden": "^3.8.27",
+    "@react-stately/color": "^3.9.1",
+    "@react-stately/form": "^3.2.1",
+    "@react-types/color": "^3.1.1",
+    "@react-types/shared": "^3.32.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a063122082d2b372e4846b58c85ae69ec73887ff"
+  "gitHead": "2c58ed3ddd9be9100af9b1d0cfd137fcdc95ba2d"
 }

package/src/useColorArea.ts

@@ -54,7 +54,8 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
     containerRef,
     'aria-label': ariaLabel,
     xName,
-    yName
+    yName,
+    form
   } = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');
 
@@ -69,12 +70,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
     }
   }, [inputXRef]);
 
-  useFormReset(inputXRef, [state.xValue, state.yValue], ([x, y]) => {
-    let newColor = state.value
-      .withChannelValue(state.channels.xChannel, x)
-      .withChannelValue(state.channels.yChannel, y);
-    state.setValue(newColor);
-  });
+  useFormReset(inputXRef, state.defaultValue, state.setValue);
 
   let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
   let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);
@@ -431,6 +427,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       disabled: isDisabled,
       value: state.value.getChannelValue(xChannel),
       name: xName,
+      form,
       tabIndex: (isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1),
       /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
@@ -456,6 +453,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       disabled: isDisabled,
       value: state.value.getChannelValue(yChannel),
       name: yName,
+      form,
       tabIndex: (isMobile || focusedInput === 'y' ? undefined : -1),
       /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,

package/src/useColorField.ts

@@ -20,7 +20,7 @@ import {
   useCallback,
   useState
 } from 'react';
-import {mergeProps, useId} from '@react-aria/utils';
+import {mergeProps, useFormReset, useId} from '@react-aria/utils';
 import {privateValidationStateProp} from '@react-stately/form';
 import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
@@ -108,7 +108,9 @@ export function useColorField(
     ...props,
     id: inputId,
     value: inputValue,
-    defaultValue: undefined,
+    // Intentionally invalid value that will be ignored by onChange during form reset
+    // This is handled separately below.
+    defaultValue: '!',
     validate: undefined,
     [privateValidationStateProp]: state,
     type: 'text',
@@ -116,6 +118,8 @@ export function useColorField(
     onChange
   }, state, ref);
 
+  useFormReset(ref, state.defaultColorValue, state.setColorValue);
+
   inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {
     role: 'textbox',
     'aria-valuemax': null,

package/src/useColorSlider.ts

@@ -44,7 +44,7 @@ export interface ColorSliderAria {
  * Color sliders allow users to adjust an individual channel of a color value.
  */
 export function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {
-  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name} = props;
+  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name, form} = props;
 
   let {locale, direction} = useLocale();
 
@@ -60,6 +60,7 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
     orientation,
     isDisabled: props.isDisabled,
     name,
+    form,
     trackRef,
     inputRef
   }, state);

package/src/useColorWheel.ts

@@ -45,7 +45,8 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     innerRadius,
     outerRadius,
     'aria-label': ariaLabel,
-    name
+    name,
+    form
   } = props;
 
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
@@ -58,7 +59,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     }
   }, [inputRef]);
 
-  useFormReset(inputRef, state.hue, state.setHue);
+  useFormReset(inputRef, state.defaultValue, state.setValue);
 
   let currentPosition = useRef<{x: number, y: number} | null>(null);
 
@@ -325,6 +326,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
         disabled: isDisabled,
         value: `${state.value.getChannelValue('hue')}`,
         name,
+        form,
         onChange: (e: ChangeEvent<HTMLInputElement>) => {
           state.setHue(parseFloat(e.target.value));
         },