react-aria 3.50.0 → 3.52.0

package/dist/private/color/useColorArea.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-aria/src/color/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 {AriaLabelingProps, DOMAttributes, DOMProps, RefObject} from '@react-types/shared';\nimport {ColorAreaProps, ColorAreaState} from 'react-stately/useColorAreaState';\nimport {ColorChannel} from 'react-stately/Color';\nimport {focusWithoutScrolling} from '../utils/focusWithoutScrolling';\nimport intlMessages from '../../intl/color/*.json';\nimport {isAndroid, isIOS} from '../utils/platform';\nimport {mergeProps} from '../utils/mergeProps';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef, useState} from 'react';\nimport {useColorAreaGradient} from './useColorAreaGradient';\nimport {useFocus} from '../interactions/useFocus';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useGlobalListeners} from '../utils/useGlobalListeners';\nimport {useKeyboard} from '../interactions/useKeyboard';\nimport {useLabels} from '../utils/useLabels';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\nimport {useMove} from '../interactions/useMove';\nimport {useVisuallyHidden} from '../visually-hidden/VisuallyHidden';\n\nexport interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps {\n  /**\n   * The name of the x channel input element, used when submitting an HTML form. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).\n   */\n  xName?: string;\n  /**\n   * The name of the y channel input element, used when submitting an HTML form. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).\n   */\n  yName?: string;\n  /**\n   * The `<form>` element to associate the ColorArea with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n}\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. Color area\n * allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional\n * 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(\n    (inputRef: RefObject<HTMLInputElement | null> = inputXRef) => {\n      if (inputRef.current) {\n        focusWithoutScrolling(inputRef.current);\n      }\n    },\n    [inputXRef]\n  );\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'\n            ? state.incrementX(state.xChannelPageStep)\n            : state.decrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n        case 'End':\n          direction === 'rtl'\n            ? state.decrementX(state.xChannelPageStep)\n            : 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 =\n          shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;\n        let deltaYValue =\n          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 = (\n    colorArea: Element,\n    id: number | null | undefined,\n    clientX: number,\n    clientY: number\n  ) => {\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 (\n      x >= 0 &&\n      x <= 1 &&\n      y >= 0 &&\n      y <= 1 &&\n      !state.isDragging &&\n      currentPointer.current === undefined\n    ) {\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\n    ? {}\n    : mergeProps(\n        {\n          ...(typeof PointerEvent !== 'undefined'\n            ? {\n                onPointerDown: (e: React.PointerEvent) => {\n                  if (\n                    e.pointerType === 'mouse' &&\n                    (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n                  ) {\n                    return;\n                  }\n                  onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n                }\n              }\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(\n                    e.currentTarget,\n                    e.changedTouches[0].identifier,\n                    e.changedTouches[0].clientX,\n                    e.changedTouches[0].clientY\n                  );\n                }\n              })\n        },\n        movePropsContainer\n      );\n\n  let thumbInteractions = isDisabled\n    ? {}\n    : mergeProps(\n        {\n          ...(typeof PointerEvent !== 'undefined'\n            ? {\n                onPointerDown: (e: React.PointerEvent) => {\n                  if (\n                    e.pointerType === 'mouse' &&\n                    (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n                  ) {\n                    return;\n                  }\n                  onThumbDown(e.pointerId);\n                }\n              }\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        },\n        focusWithinProps,\n        keyboardProps,\n        movePropsThumb\n      );\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(\n    (channel: ColorChannel) => {\n      const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;\n      return `${\n        isAfterInput\n          ? stringFormatter.format('colorNameAndValue', {\n              name: value.getChannelName(channel, locale),\n              value: value.formatChannelValue(channel, locale)\n            })\n          : [\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(channel, locale),\n                value: value.formatChannelValue(channel, locale)\n              }),\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),\n                value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)\n              }),\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(zChannel, locale),\n                value: value.formatChannelValue(zChannel, locale)\n              })\n            ].join(', ')\n      }, ${value.getColorName(locale)}`;\n    },\n    [\n      locale,\n      value,\n      stringFormatter,\n      valueChangedViaInputChangeEvent,\n      valueChangedViaKeyboard,\n      xChannel,\n      yChannel,\n      zChannel\n    ]\n  );\n\n  let colorPickerLabel = stringFormatter.format('colorPicker');\n\n  let xInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n      ? stringFormatter.format('colorInputLabel', {\n          label: ariaLabel,\n          channelLabel: colorPickerLabel\n        })\n      : colorPickerLabel\n  });\n\n  let yInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n      ? stringFormatter.format('colorInputLabel', {\n          label: ariaLabel,\n          channelLabel: colorPickerLabel\n        })\n      : 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({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  let {colorAreaStyleProps, thumbStyleProps} = 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':\n        isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard\n          ? undefined\n          : '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':\n        isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true',\n      onChange\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorArea.js.map"}
+{"mappings":"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","sources":["packages/react-aria/src/color/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 {AriaLabelingProps, DOMAttributes, DOMProps, RefObject} from '@react-types/shared';\nimport {ColorAreaProps, ColorAreaState} from 'react-stately/useColorAreaState';\nimport {ColorChannel} from 'react-stately/Color';\nimport {focusWithoutScrolling} from '../utils/focusWithoutScrolling';\nimport intlMessages from '../../intl/color/*.json';\nimport {isAndroid, isIOS} from '../utils/platform';\nimport {mergeProps} from '../utils/mergeProps';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef, useState} from 'react';\nimport {useColorAreaGradient} from './useColorAreaGradient';\nimport {useFocus} from '../interactions/useFocus';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useGlobalListeners} from '../utils/useGlobalListeners';\nimport {useKeyboard} from '../interactions/useKeyboard';\nimport {useLabels} from '../utils/useLabels';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\nimport {useMove} from '../interactions/useMove';\nimport {useVisuallyHidden} from '../visually-hidden/VisuallyHidden';\n\nexport interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps {\n  /**\n   * The name of the x channel input element, used when submitting an HTML form. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).\n   */\n  xName?: string;\n  /**\n   * The name of the y channel input element, used when submitting an HTML form. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).\n   */\n  yName?: string;\n  /**\n   * The `<form>` element to associate the ColorArea with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n}\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. Color area\n * allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional\n * 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(\n    (inputRef: RefObject<HTMLInputElement | null> = inputXRef) => {\n      if (inputRef.current) {\n        focusWithoutScrolling(inputRef.current);\n      }\n    },\n    [inputXRef]\n  );\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 keyboardUpdate = (cb, inputRef: RefObject<HTMLInputElement | null>, input: 'x' | 'y') => {\n    state.setDragging(true);\n    setValueChangedViaKeyboard(true);\n    cb();\n    state.setDragging(false);\n    focusInput(inputRef);\n    setFocusedInput(input);\n  };\n\n  let {keyboardProps} = useKeyboard({\n    shortcuts: {\n      PageUp: () => {\n        return keyboardUpdate(\n          () => {\n            state.incrementY(state.yChannelPageStep);\n          },\n          inputYRef,\n          'y'\n        );\n      },\n      PageDown: () => {\n        return keyboardUpdate(\n          () => {\n            state.decrementY(state.yChannelPageStep);\n          },\n          inputYRef,\n          'y'\n        );\n      },\n      Home: () => {\n        return keyboardUpdate(\n          () => {\n            direction === 'rtl'\n              ? state.incrementX(state.xChannelPageStep)\n              : state.decrementX(state.xChannelPageStep);\n          },\n          inputXRef,\n          'x'\n        );\n      },\n      End: () => {\n        return keyboardUpdate(\n          () => {\n            direction === 'rtl'\n              ? state.decrementX(state.xChannelPageStep)\n              : state.incrementX(state.xChannelPageStep);\n          },\n          inputXRef,\n          'x'\n        );\n      }\n    },\n    allowRepeats: true\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 =\n          shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;\n        let deltaYValue =\n          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        // oxlint-disable-next-line react/react-compiler\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 = (\n    colorArea: Element,\n    id: number | null | undefined,\n    clientX: number,\n    clientY: number\n  ) => {\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 (\n      x >= 0 &&\n      x <= 1 &&\n      y >= 0 &&\n      y <= 1 &&\n      !state.isDragging &&\n      currentPointer.current === undefined\n    ) {\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\n    ? {}\n    : mergeProps(\n        // oxlint-disable-next-line react/react-compiler\n        {\n          ...(typeof PointerEvent !== 'undefined'\n            ? {\n                onPointerDown: (e: React.PointerEvent) => {\n                  if (\n                    e.pointerType === 'mouse' &&\n                    (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n                  ) {\n                    return;\n                  }\n                  onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n                }\n              }\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(\n                    e.currentTarget,\n                    e.changedTouches[0].identifier,\n                    e.changedTouches[0].clientX,\n                    e.changedTouches[0].clientY\n                  );\n                }\n              })\n        },\n        movePropsContainer\n      );\n\n  let thumbInteractions = isDisabled\n    ? {}\n    : mergeProps(\n        // oxlint-disable-next-line react/react-compiler\n        {\n          ...(typeof PointerEvent !== 'undefined'\n            ? {\n                onPointerDown: (e: React.PointerEvent) => {\n                  if (\n                    e.pointerType === 'mouse' &&\n                    (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n                  ) {\n                    return;\n                  }\n                  onThumbDown(e.pointerId);\n                }\n              }\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        },\n        focusWithinProps,\n        keyboardProps,\n        movePropsThumb\n      );\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(\n    (channel: ColorChannel) => {\n      const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;\n      return `${\n        isAfterInput\n          ? stringFormatter.format('colorNameAndValue', {\n              name: value.getChannelName(channel, locale),\n              value: value.formatChannelValue(channel, locale)\n            })\n          : [\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(channel, locale),\n                value: value.formatChannelValue(channel, locale)\n              }),\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),\n                value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)\n              }),\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(zChannel, locale),\n                value: value.formatChannelValue(zChannel, locale)\n              })\n            ].join(', ')\n      }, ${value.getColorName(locale)}`;\n    },\n    [\n      locale,\n      value,\n      stringFormatter,\n      valueChangedViaInputChangeEvent,\n      valueChangedViaKeyboard,\n      xChannel,\n      yChannel,\n      zChannel\n    ]\n  );\n\n  let colorPickerLabel = stringFormatter.format('colorPicker');\n\n  let xInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n      ? stringFormatter.format('colorInputLabel', {\n          label: ariaLabel,\n          channelLabel: colorPickerLabel\n        })\n      : colorPickerLabel\n  });\n\n  let yInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n      ? stringFormatter.format('colorInputLabel', {\n          label: ariaLabel,\n          channelLabel: colorPickerLabel\n        })\n      : 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({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  let {colorAreaStyleProps, thumbStyleProps} = 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':\n        isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard\n          ? undefined\n          : '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':\n        isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true',\n      onChange\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorArea.js.map"}

package/dist/private/color/useColorArea.mjs

@@ -63,44 +63,38 @@ function $12db0b624ec2ac09$export$2f92a7a615a014f6(props, state) {
     let xChannelStep = state.xChannelStep;
     let yChannelStep = state.yChannelStep;
     let currentPosition = (0, $U6XIH$useRef)(null);
+    let keyboardUpdate = (cb, inputRef, input)=>{
+        state.setDragging(true);
+        setValueChangedViaKeyboard(true);
+        cb();
+        state.setDragging(false);
+        focusInput(inputRef);
+        setFocusedInput(input);
+    };
     let { keyboardProps: keyboardProps } = (0, $8296dad1a4c5e0dc$export$8f71654801c2f7cd)({
-        onKeyDown (e) {
-            // these are the cases that useMove doesn't handle
-            if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
-                e.continuePropagation();
-                return;
-            }
-            // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
-            e.preventDefault();
-            // remember to set this and unset it so that onChangeEnd is fired
-            state.setDragging(true);
-            setValueChangedViaKeyboard(true);
-            let dir;
-            switch(e.key){
-                case 'PageUp':
+        shortcuts: {
+            PageUp: ()=>{
+                return keyboardUpdate(()=>{
                     state.incrementY(state.yChannelPageStep);
-                    dir = 'y';
-                    break;
-                case 'PageDown':
+                }, inputYRef, 'y');
+            },
+            PageDown: ()=>{
+                return keyboardUpdate(()=>{
                     state.decrementY(state.yChannelPageStep);
-                    dir = 'y';
-                    break;
-                case 'Home':
+                }, inputYRef, 'y');
+            },
+            Home: ()=>{
+                return keyboardUpdate(()=>{
                     direction === 'rtl' ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);
-                    dir = 'x';
-                    break;
-                case 'End':
+                }, inputXRef, 'x');
+            },
+            End: ()=>{
+                return keyboardUpdate(()=>{
                     direction === 'rtl' ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);
-                    dir = 'x';
-                    break;
-            }
-            state.setDragging(false);
-            if (dir) {
-                let input = dir === 'x' ? inputXRef : inputYRef;
-                focusInput(input);
-                setFocusedInput(dir);
+                }, inputXRef, 'x');
             }
-        }
+        },
+        allowRepeats: true
     });
     let moveHandler = {
         onMoveStart () {
@@ -124,6 +118,7 @@ function $12db0b624ec2ac09$export$2f92a7a615a014f6(props, state) {
                 else if (deltaY < 0) incrementY(deltaYValue);
                 setValueChangedViaKeyboard(valueChanged);
                 // set the focused input based on which axis has the greater delta
+                // oxlint-disable-next-line react/react-compiler
                 focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? 'y' : 'x';
                 setFocusedInput(focusedInput);
             } else {
@@ -224,7 +219,8 @@ function $12db0b624ec2ac09$export$2f92a7a615a014f6(props, state) {
             }
         }
     };
-    let colorAreaInteractions = isDisabled ? {} : (0, $bbaa08b3cd72f041$export$9d1611c77c2fe928)({
+    let colorAreaInteractions = isDisabled ? {} : (0, $bbaa08b3cd72f041$export$9d1611c77c2fe928)(// oxlint-disable-next-line react/react-compiler
+    {
         ...typeof PointerEvent !== 'undefined' ? {
             onPointerDown: (e)=>{
                 if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
@@ -240,7 +236,8 @@ function $12db0b624ec2ac09$export$2f92a7a615a014f6(props, state) {
             }
         }
     }, movePropsContainer);
-    let thumbInteractions = isDisabled ? {} : (0, $bbaa08b3cd72f041$export$9d1611c77c2fe928)({
+    let thumbInteractions = isDisabled ? {} : (0, $bbaa08b3cd72f041$export$9d1611c77c2fe928)(// oxlint-disable-next-line react/react-compiler
+    {
         ...typeof PointerEvent !== 'undefined' ? {
             onPointerDown: (e)=>{
                 if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;

package/dist/private/color/useColorArea.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-aria/src/color/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 {AriaLabelingProps, DOMAttributes, DOMProps, RefObject} from '@react-types/shared';\nimport {ColorAreaProps, ColorAreaState} from 'react-stately/useColorAreaState';\nimport {ColorChannel} from 'react-stately/Color';\nimport {focusWithoutScrolling} from '../utils/focusWithoutScrolling';\nimport intlMessages from '../../intl/color/*.json';\nimport {isAndroid, isIOS} from '../utils/platform';\nimport {mergeProps} from '../utils/mergeProps';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef, useState} from 'react';\nimport {useColorAreaGradient} from './useColorAreaGradient';\nimport {useFocus} from '../interactions/useFocus';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useGlobalListeners} from '../utils/useGlobalListeners';\nimport {useKeyboard} from '../interactions/useKeyboard';\nimport {useLabels} from '../utils/useLabels';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\nimport {useMove} from '../interactions/useMove';\nimport {useVisuallyHidden} from '../visually-hidden/VisuallyHidden';\n\nexport interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps {\n  /**\n   * The name of the x channel input element, used when submitting an HTML form. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).\n   */\n  xName?: string;\n  /**\n   * The name of the y channel input element, used when submitting an HTML form. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).\n   */\n  yName?: string;\n  /**\n   * The `<form>` element to associate the ColorArea with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n}\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. Color area\n * allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional\n * 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(\n    (inputRef: RefObject<HTMLInputElement | null> = inputXRef) => {\n      if (inputRef.current) {\n        focusWithoutScrolling(inputRef.current);\n      }\n    },\n    [inputXRef]\n  );\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'\n            ? state.incrementX(state.xChannelPageStep)\n            : state.decrementX(state.xChannelPageStep);\n          dir = 'x';\n          break;\n        case 'End':\n          direction === 'rtl'\n            ? state.decrementX(state.xChannelPageStep)\n            : 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 =\n          shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;\n        let deltaYValue =\n          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 = (\n    colorArea: Element,\n    id: number | null | undefined,\n    clientX: number,\n    clientY: number\n  ) => {\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 (\n      x >= 0 &&\n      x <= 1 &&\n      y >= 0 &&\n      y <= 1 &&\n      !state.isDragging &&\n      currentPointer.current === undefined\n    ) {\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\n    ? {}\n    : mergeProps(\n        {\n          ...(typeof PointerEvent !== 'undefined'\n            ? {\n                onPointerDown: (e: React.PointerEvent) => {\n                  if (\n                    e.pointerType === 'mouse' &&\n                    (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n                  ) {\n                    return;\n                  }\n                  onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n                }\n              }\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(\n                    e.currentTarget,\n                    e.changedTouches[0].identifier,\n                    e.changedTouches[0].clientX,\n                    e.changedTouches[0].clientY\n                  );\n                }\n              })\n        },\n        movePropsContainer\n      );\n\n  let thumbInteractions = isDisabled\n    ? {}\n    : mergeProps(\n        {\n          ...(typeof PointerEvent !== 'undefined'\n            ? {\n                onPointerDown: (e: React.PointerEvent) => {\n                  if (\n                    e.pointerType === 'mouse' &&\n                    (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n                  ) {\n                    return;\n                  }\n                  onThumbDown(e.pointerId);\n                }\n              }\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        },\n        focusWithinProps,\n        keyboardProps,\n        movePropsThumb\n      );\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(\n    (channel: ColorChannel) => {\n      const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;\n      return `${\n        isAfterInput\n          ? stringFormatter.format('colorNameAndValue', {\n              name: value.getChannelName(channel, locale),\n              value: value.formatChannelValue(channel, locale)\n            })\n          : [\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(channel, locale),\n                value: value.formatChannelValue(channel, locale)\n              }),\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),\n                value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)\n              }),\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(zChannel, locale),\n                value: value.formatChannelValue(zChannel, locale)\n              })\n            ].join(', ')\n      }, ${value.getColorName(locale)}`;\n    },\n    [\n      locale,\n      value,\n      stringFormatter,\n      valueChangedViaInputChangeEvent,\n      valueChangedViaKeyboard,\n      xChannel,\n      yChannel,\n      zChannel\n    ]\n  );\n\n  let colorPickerLabel = stringFormatter.format('colorPicker');\n\n  let xInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n      ? stringFormatter.format('colorInputLabel', {\n          label: ariaLabel,\n          channelLabel: colorPickerLabel\n        })\n      : colorPickerLabel\n  });\n\n  let yInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n      ? stringFormatter.format('colorInputLabel', {\n          label: ariaLabel,\n          channelLabel: colorPickerLabel\n        })\n      : 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({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  let {colorAreaStyleProps, thumbStyleProps} = 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':\n        isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard\n          ? undefined\n          : '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':\n        isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true',\n      onChange\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorArea.mjs.map"}
+{"mappings":"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","sources":["packages/react-aria/src/color/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 {AriaLabelingProps, DOMAttributes, DOMProps, RefObject} from '@react-types/shared';\nimport {ColorAreaProps, ColorAreaState} from 'react-stately/useColorAreaState';\nimport {ColorChannel} from 'react-stately/Color';\nimport {focusWithoutScrolling} from '../utils/focusWithoutScrolling';\nimport intlMessages from '../../intl/color/*.json';\nimport {isAndroid, isIOS} from '../utils/platform';\nimport {mergeProps} from '../utils/mergeProps';\nimport React, {ChangeEvent, InputHTMLAttributes, useCallback, useRef, useState} from 'react';\nimport {useColorAreaGradient} from './useColorAreaGradient';\nimport {useFocus} from '../interactions/useFocus';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useGlobalListeners} from '../utils/useGlobalListeners';\nimport {useKeyboard} from '../interactions/useKeyboard';\nimport {useLabels} from '../utils/useLabels';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\nimport {useMove} from '../interactions/useMove';\nimport {useVisuallyHidden} from '../visually-hidden/VisuallyHidden';\n\nexport interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps {\n  /**\n   * The name of the x channel input element, used when submitting an HTML form. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).\n   */\n  xName?: string;\n  /**\n   * The name of the y channel input element, used when submitting an HTML form. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).\n   */\n  yName?: string;\n  /**\n   * The `<form>` element to associate the ColorArea with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n}\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. Color area\n * allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional\n * 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(\n    (inputRef: RefObject<HTMLInputElement | null> = inputXRef) => {\n      if (inputRef.current) {\n        focusWithoutScrolling(inputRef.current);\n      }\n    },\n    [inputXRef]\n  );\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 keyboardUpdate = (cb, inputRef: RefObject<HTMLInputElement | null>, input: 'x' | 'y') => {\n    state.setDragging(true);\n    setValueChangedViaKeyboard(true);\n    cb();\n    state.setDragging(false);\n    focusInput(inputRef);\n    setFocusedInput(input);\n  };\n\n  let {keyboardProps} = useKeyboard({\n    shortcuts: {\n      PageUp: () => {\n        return keyboardUpdate(\n          () => {\n            state.incrementY(state.yChannelPageStep);\n          },\n          inputYRef,\n          'y'\n        );\n      },\n      PageDown: () => {\n        return keyboardUpdate(\n          () => {\n            state.decrementY(state.yChannelPageStep);\n          },\n          inputYRef,\n          'y'\n        );\n      },\n      Home: () => {\n        return keyboardUpdate(\n          () => {\n            direction === 'rtl'\n              ? state.incrementX(state.xChannelPageStep)\n              : state.decrementX(state.xChannelPageStep);\n          },\n          inputXRef,\n          'x'\n        );\n      },\n      End: () => {\n        return keyboardUpdate(\n          () => {\n            direction === 'rtl'\n              ? state.decrementX(state.xChannelPageStep)\n              : state.incrementX(state.xChannelPageStep);\n          },\n          inputXRef,\n          'x'\n        );\n      }\n    },\n    allowRepeats: true\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 =\n          shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;\n        let deltaYValue =\n          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        // oxlint-disable-next-line react/react-compiler\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 = (\n    colorArea: Element,\n    id: number | null | undefined,\n    clientX: number,\n    clientY: number\n  ) => {\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 (\n      x >= 0 &&\n      x <= 1 &&\n      y >= 0 &&\n      y <= 1 &&\n      !state.isDragging &&\n      currentPointer.current === undefined\n    ) {\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\n    ? {}\n    : mergeProps(\n        // oxlint-disable-next-line react/react-compiler\n        {\n          ...(typeof PointerEvent !== 'undefined'\n            ? {\n                onPointerDown: (e: React.PointerEvent) => {\n                  if (\n                    e.pointerType === 'mouse' &&\n                    (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n                  ) {\n                    return;\n                  }\n                  onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);\n                }\n              }\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(\n                    e.currentTarget,\n                    e.changedTouches[0].identifier,\n                    e.changedTouches[0].clientX,\n                    e.changedTouches[0].clientY\n                  );\n                }\n              })\n        },\n        movePropsContainer\n      );\n\n  let thumbInteractions = isDisabled\n    ? {}\n    : mergeProps(\n        // oxlint-disable-next-line react/react-compiler\n        {\n          ...(typeof PointerEvent !== 'undefined'\n            ? {\n                onPointerDown: (e: React.PointerEvent) => {\n                  if (\n                    e.pointerType === 'mouse' &&\n                    (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)\n                  ) {\n                    return;\n                  }\n                  onThumbDown(e.pointerId);\n                }\n              }\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        },\n        focusWithinProps,\n        keyboardProps,\n        movePropsThumb\n      );\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(\n    (channel: ColorChannel) => {\n      const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;\n      return `${\n        isAfterInput\n          ? stringFormatter.format('colorNameAndValue', {\n              name: value.getChannelName(channel, locale),\n              value: value.formatChannelValue(channel, locale)\n            })\n          : [\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(channel, locale),\n                value: value.formatChannelValue(channel, locale)\n              }),\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),\n                value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)\n              }),\n              stringFormatter.format('colorNameAndValue', {\n                name: value.getChannelName(zChannel, locale),\n                value: value.formatChannelValue(zChannel, locale)\n              })\n            ].join(', ')\n      }, ${value.getColorName(locale)}`;\n    },\n    [\n      locale,\n      value,\n      stringFormatter,\n      valueChangedViaInputChangeEvent,\n      valueChangedViaKeyboard,\n      xChannel,\n      yChannel,\n      zChannel\n    ]\n  );\n\n  let colorPickerLabel = stringFormatter.format('colorPicker');\n\n  let xInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n      ? stringFormatter.format('colorInputLabel', {\n          label: ariaLabel,\n          channelLabel: colorPickerLabel\n        })\n      : colorPickerLabel\n  });\n\n  let yInputLabellingProps = useLabels({\n    ...props,\n    'aria-label': ariaLabel\n      ? stringFormatter.format('colorInputLabel', {\n          label: ariaLabel,\n          channelLabel: colorPickerLabel\n        })\n      : 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({\n    style: {\n      opacity: '0.0001',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  });\n\n  let {colorAreaStyleProps, thumbStyleProps} = 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':\n        isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard\n          ? undefined\n          : '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':\n        isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true',\n      onChange\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useColorArea.mjs.map"}

package/dist/private/color/useColorField.cjs

@@ -3,8 +3,10 @@ var $b4f85e31b7b8044c$exports = require("../interactions/useFocusWithin.cjs");
 var $7619b0bd43420560$exports = require("../textfield/useFormattedTextField.cjs");
 var $bbab3903416f8d01$exports = require("../utils/useFormReset.cjs");
 var $7ac82d1fee77eb8a$exports = require("../utils/useId.cjs");
+var $6d2f10bb8b359da5$exports = require("../interactions/useKeyboard.cjs");
 var $c162bca8afbf554a$exports = require("../interactions/useScrollWheel.cjs");
 var $fcf004be7e8533a5$exports = require("../spinbutton/useSpinButton.cjs");
+var $iXcTC$reactdom = require("react-dom");
 var $iXcTC$react = require("react");
 var $iXcTC$reactstatelyprivateformuseFormValidationState = require("react-stately/private/form/useFormValidationState");
 
@@ -33,9 +35,11 @@ $parcel$export(module.exports, "useColorField", function () { return $00801e87d3
 
 
 
+
+
 function $00801e87d3dfcae5$export$77e32ca575a28fdf(props, state, ref) {
-    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria' } = props;
-    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria', onKeyDown: onKeyDown, onKeyUp: onKeyUp } = props;
+    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit, commitValidation: commitValidation } = state;
     let inputId = (0, $7ac82d1fee77eb8a$exports.useId)();
     let { spinButtonProps: spinButtonProps } = (0, $fcf004be7e8533a5$exports.useSpinButton)({
         isDisabled: isDisabled,
@@ -69,6 +73,22 @@ function $00801e87d3dfcae5$export$77e32ca575a28fdf(props, state, ref) {
         onScroll: onWheel,
         isDisabled: scrollingDisabled
     }, ref);
+    let { keyboardProps: keyboardProps } = (0, $6d2f10bb8b359da5$exports.useKeyboard)({
+        isDisabled: isDisabled || isReadOnly,
+        shortcuts: {
+            Enter: ()=>{
+                (0, $iXcTC$reactdom.flushSync)(()=>{
+                    commit();
+                });
+                commitValidation();
+                return {
+                    shouldPreventDefault: false
+                };
+            }
+        },
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+    });
     let onChange = (value)=>{
         if (state.validate(value)) state.setInputValue(value);
     };
@@ -83,10 +103,12 @@ function $00801e87d3dfcae5$export$77e32ca575a28fdf(props, state, ref) {
         [(0, $iXcTC$reactstatelyprivateformuseFormValidationState.privateValidationStateProp)]: state,
         type: 'text',
         autoComplete: 'off',
-        onChange: onChange
+        onChange: onChange,
+        onKeyDown: undefined,
+        onKeyUp: undefined
     }, state, ref);
     (0, $bbab3903416f8d01$exports.useFormReset)(ref, state.defaultColorValue, state.setColorValue);
-    inputProps = (0, $89b39774f3b79dbb$exports.mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
+    inputProps = (0, $89b39774f3b79dbb$exports.mergeProps)(keyboardProps, inputProps, spinButtonProps, focusWithinProps, {
         role: 'textbox',
         'aria-valuemax': null,
         'aria-valuemin': null,

package/dist/private/color/useColorField.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAyDM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAuC;IAEvC,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,mBAAE,eAAe,sBAAE,qBAAqB,QAAO,GAAG;IAEzF,IAAI,cAAC,UAAU,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,kBAAE,cAAc,kBAAE,cAAc,UAAE,MAAM,EAAC,GACxF;IAEF,IAAI,UAAU,CAAA,GAAA,+BAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;oBACpC;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;IAEA,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,wCAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,wBAAU,EACtB,CAAA;QACE,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,GACA;QAAC;QAAW;KAAU;IAExB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,wCAAa,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,EACpD;QACE,GAAG,KAAK;QACR,IAAI;QACJ,OAAO;QACP,iFAAiF;QACjF,oCAAoC;QACpC,cAAc;QACd,UAAU;QACV,CAAC,CAAA,GAAA,+EAAyB,EAAE,EAAE;QAC9B,MAAM;QACN,cAAc;kBACd;IACF,GACA,OACA;IAGF,CAAA,GAAA,sCAAW,EAAE,KAAK,MAAM,iBAAiB,EAAE,MAAM,aAAa;IAE9D,aAAa,CAAA,GAAA,oCAAS,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/src/color/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 {\n  AriaLabelingProps,\n  AriaValidationProps,\n  DOMAttributes,\n  FocusableDOMProps,\n  TextInputDOMProps,\n  ValidationResult\n} from '@react-types/shared';\nimport {ColorFieldProps, ColorFieldState} from 'react-stately/useColorFieldState';\nimport {InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useState} from 'react';\nimport {mergeProps} from '../utils/mergeProps';\nimport {privateValidationStateProp} from 'react-stately/private/form/useFormValidationState';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useFormattedTextField} from '../textfield/useFormattedTextField';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useId} from '../utils/useId';\nimport {useScrollWheel} from '../interactions/useScrollWheel';\nimport {useSpinButton} from '../spinbutton/useSpinButton';\n\nexport interface AriaColorFieldProps\n  extends\n    ColorFieldProps,\n    AriaLabelingProps,\n    FocusableDOMProps,\n    Omit<\n      TextInputDOMProps,\n      | 'minLength'\n      | 'maxLength'\n      | 'pattern'\n      | 'type'\n      | 'inputMode'\n      | 'autoComplete'\n      | 'autoCorrect'\n      | 'spellCheck'\n    >,\n    AriaValidationProps {\n  /** Enables or disables changing the value with scroll. */\n  isWheelDisabled?: boolean;\n}\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 {isDisabled, isReadOnly, isRequired, isWheelDisabled, validationBehavior = 'aria'} = props;\n\n  let {colorValue, inputValue, increment, decrement, incrementToMax, decrementToMin, commit} =\n    state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton({\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  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback(\n    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    },\n    [decrement, increment]\n  );\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    {\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    },\n    state,\n    ref\n  );\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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA2DM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAuC;IAEvC,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,mBACV,eAAe,sBACf,qBAAqB,mBACrB,SAAS,WACT,OAAO,EACR,GAAG;IAEJ,IAAI,cACF,UAAU,cACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,kBACd,cAAc,UACd,MAAM,oBACN,gBAAgB,EACjB,GAAG;IAEJ,IAAI,UAAU,CAAA,GAAA,+BAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;oBACpC;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;IAEA,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,wCAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,wBAAU,EACtB,CAAA;QACE,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,GACA;QAAC;QAAW;KAAU;IAExB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,wCAAa,EAAE;QAAC,UAAU;QAAS,YAAY;IAAiB,GAAG;IAEnE,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,qCAAU,EAAE;QAChC,YAAY,cAAc;QAC1B,WAAW;YACT,OAAO;gBACL,CAAA,GAAA,yBAAQ,EAAE;oBACR;gBACF;gBACA;gBACA,OAAO;oBAAC,sBAAsB;gBAAK;YACrC;QACF;mBACA;iBACA;IACF;IAEA,IAAI,WAAW,CAAA;QACb,IAAI,MAAM,QAAQ,CAAC,QACjB,MAAM,aAAa,CAAC;IAExB;IAEA,IAAI,cAAC,UAAU,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,+CAAoB,EACpD;QACE,GAAG,KAAK;QACR,IAAI;QACJ,OAAO;QACP,iFAAiF;QACjF,oCAAoC;QACpC,cAAc;QACd,UAAU;QACV,CAAC,CAAA,GAAA,+EAAyB,EAAE,EAAE;QAC9B,MAAM;QACN,cAAc;kBACd;QACA,WAAW;QACX,SAAS;IACX,GACA,OACA;IAGF,CAAA,GAAA,sCAAW,EAAE,KAAK,MAAM,iBAAiB,EAAE,MAAM,aAAa;IAE9D,aAAa,CAAA,GAAA,oCAAS,EAAE,eAAe,YAAY,iBAAiB,kBAAkB;QACpF,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/src/color/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 {\n  AriaLabelingProps,\n  AriaValidationProps,\n  DOMAttributes,\n  FocusableDOMProps,\n  TextInputDOMProps,\n  ValidationResult\n} from '@react-types/shared';\nimport {ColorFieldProps, ColorFieldState} from 'react-stately/useColorFieldState';\nimport {flushSync} from 'react-dom';\nimport {InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useState} from 'react';\nimport {mergeProps} from '../utils/mergeProps';\nimport {privateValidationStateProp} from 'react-stately/private/form/useFormValidationState';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useFormattedTextField} from '../textfield/useFormattedTextField';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useId} from '../utils/useId';\nimport {useKeyboard} from '../interactions/useKeyboard';\nimport {useScrollWheel} from '../interactions/useScrollWheel';\nimport {useSpinButton} from '../spinbutton/useSpinButton';\n\nexport interface AriaColorFieldProps\n  extends\n    ColorFieldProps,\n    AriaLabelingProps,\n    FocusableDOMProps,\n    Omit<\n      TextInputDOMProps,\n      | 'minLength'\n      | 'maxLength'\n      | 'pattern'\n      | 'type'\n      | 'inputMode'\n      | 'autoComplete'\n      | 'autoCorrect'\n      | 'spellCheck'\n    >,\n    AriaValidationProps {\n  /** Enables or disables changing the value with scroll. */\n  isWheelDisabled?: boolean;\n}\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    onKeyDown,\n    onKeyUp\n  } = props;\n\n  let {\n    colorValue,\n    inputValue,\n    increment,\n    decrement,\n    incrementToMax,\n    decrementToMin,\n    commit,\n    commitValidation\n  } = state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton({\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  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback(\n    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    },\n    [decrement, increment]\n  );\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 {keyboardProps} = useKeyboard({\n    isDisabled: isDisabled || isReadOnly,\n    shortcuts: {\n      Enter: () => {\n        flushSync(() => {\n          commit();\n        });\n        commitValidation();\n        return {shouldPreventDefault: false};\n      }\n    },\n    onKeyDown,\n    onKeyUp\n  });\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let {inputProps, ...otherProps} = useFormattedTextField(\n    {\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      onKeyDown: undefined,\n      onKeyUp: undefined\n    },\n    state,\n    ref\n  );\n\n  useFormReset(ref, state.defaultColorValue, state.setColorValue);\n\n  inputProps = mergeProps(keyboardProps, 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.cjs.map"}

package/dist/private/color/useColorField.js

@@ -3,8 +3,10 @@ import {useFocusWithin as $b842b95ed9b5d4d5$export$420e68273165f4ec} from "../in
 import {useFormattedTextField as $a97100a6dd40f368$export$4f384c9210e583c3} from "../textfield/useFormattedTextField.js";
 import {useFormReset as $5dfd40f1661a7fc3$export$5add1d006293d136} from "../utils/useFormReset.js";
 import {useId as $0292efe68908de6b$export$f680877a34711e37} from "../utils/useId.js";
+import {useKeyboard as $bf74df7506f65576$export$8f71654801c2f7cd} from "../interactions/useKeyboard.js";
 import {useScrollWheel as $387080635b69cb2d$export$2123ff2b87c81ca} from "../interactions/useScrollWheel.js";
 import {useSpinButton as $b36f0efc8d77b16f$export$e908e06f4b8e3402} from "../spinbutton/useSpinButton.js";
+import {flushSync as $j4wZN$flushSync} from "react-dom";
 import {useState as $j4wZN$useState, useCallback as $j4wZN$useCallback} from "react";
 import {privateValidationStateProp as $j4wZN$privateValidationStateProp} from "react-stately/private/form/useFormValidationState";
 
@@ -27,9 +29,11 @@ import {privateValidationStateProp as $j4wZN$privateValidationStateProp} from "r
 
 
 
+
+
 function $23951a0914b6cb31$export$77e32ca575a28fdf(props, state, ref) {
-    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria' } = props;
-    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria', onKeyDown: onKeyDown, onKeyUp: onKeyUp } = props;
+    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit, commitValidation: commitValidation } = state;
     let inputId = (0, $0292efe68908de6b$export$f680877a34711e37)();
     let { spinButtonProps: spinButtonProps } = (0, $b36f0efc8d77b16f$export$e908e06f4b8e3402)({
         isDisabled: isDisabled,
@@ -63,6 +67,22 @@ function $23951a0914b6cb31$export$77e32ca575a28fdf(props, state, ref) {
         onScroll: onWheel,
         isDisabled: scrollingDisabled
     }, ref);
+    let { keyboardProps: keyboardProps } = (0, $bf74df7506f65576$export$8f71654801c2f7cd)({
+        isDisabled: isDisabled || isReadOnly,
+        shortcuts: {
+            Enter: ()=>{
+                (0, $j4wZN$flushSync)(()=>{
+                    commit();
+                });
+                commitValidation();
+                return {
+                    shouldPreventDefault: false
+                };
+            }
+        },
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+    });
     let onChange = (value)=>{
         if (state.validate(value)) state.setInputValue(value);
     };
@@ -77,10 +97,12 @@ function $23951a0914b6cb31$export$77e32ca575a28fdf(props, state, ref) {
         [(0, $j4wZN$privateValidationStateProp)]: state,
         type: 'text',
         autoComplete: 'off',
-        onChange: onChange
+        onChange: onChange,
+        onKeyDown: undefined,
+        onKeyUp: undefined
     }, state, ref);
     (0, $5dfd40f1661a7fc3$export$5add1d006293d136)(ref, state.defaultColorValue, state.setColorValue);
-    inputProps = (0, $64c36edd757dfa16$export$9d1611c77c2fe928)(inputProps, spinButtonProps, focusWithinProps, {
+    inputProps = (0, $64c36edd757dfa16$export$9d1611c77c2fe928)(keyboardProps, inputProps, spinButtonProps, focusWithinProps, {
         role: 'textbox',
         'aria-valuemax': null,
         'aria-valuemin': null,

package/dist/private/color/useColorField.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAyDM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAuC;IAEvC,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,mBAAE,eAAe,sBAAE,qBAAqB,QAAO,GAAG;IAEzF,IAAI,cAAC,UAAU,cAAE,UAAU,aAAE,SAAS,aAAE,SAAS,kBAAE,cAAc,kBAAE,cAAc,UAAE,MAAM,EAAC,GACxF;IAEF,IAAI,UAAU,CAAA,GAAA,yCAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;oBACpC;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;IAEA,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,yCAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,kBAAU,EACtB,CAAA;QACE,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,GACA;QAAC;QAAW;KAAU;IAExB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,wCAAa,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,yCAAoB,EACpD;QACE,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,GACA,OACA;IAGF,CAAA,GAAA,yCAAW,EAAE,KAAK,MAAM,iBAAiB,EAAE,MAAM,aAAa;IAE9D,aAAa,CAAA,GAAA,yCAAS,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/src/color/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 {\n  AriaLabelingProps,\n  AriaValidationProps,\n  DOMAttributes,\n  FocusableDOMProps,\n  TextInputDOMProps,\n  ValidationResult\n} from '@react-types/shared';\nimport {ColorFieldProps, ColorFieldState} from 'react-stately/useColorFieldState';\nimport {InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useState} from 'react';\nimport {mergeProps} from '../utils/mergeProps';\nimport {privateValidationStateProp} from 'react-stately/private/form/useFormValidationState';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useFormattedTextField} from '../textfield/useFormattedTextField';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useId} from '../utils/useId';\nimport {useScrollWheel} from '../interactions/useScrollWheel';\nimport {useSpinButton} from '../spinbutton/useSpinButton';\n\nexport interface AriaColorFieldProps\n  extends\n    ColorFieldProps,\n    AriaLabelingProps,\n    FocusableDOMProps,\n    Omit<\n      TextInputDOMProps,\n      | 'minLength'\n      | 'maxLength'\n      | 'pattern'\n      | 'type'\n      | 'inputMode'\n      | 'autoComplete'\n      | 'autoCorrect'\n      | 'spellCheck'\n    >,\n    AriaValidationProps {\n  /** Enables or disables changing the value with scroll. */\n  isWheelDisabled?: boolean;\n}\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 {isDisabled, isReadOnly, isRequired, isWheelDisabled, validationBehavior = 'aria'} = props;\n\n  let {colorValue, inputValue, increment, decrement, incrementToMax, decrementToMin, commit} =\n    state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton({\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  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback(\n    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    },\n    [decrement, increment]\n  );\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    {\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    },\n    state,\n    ref\n  );\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.js.map"}
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA2DM,SAAS,0CACd,KAA0B,EAC1B,KAAsB,EACtB,GAAuC;IAEvC,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,mBACV,eAAe,sBACf,qBAAqB,mBACrB,SAAS,WACT,OAAO,EACR,GAAG;IAEJ,IAAI,cACF,UAAU,cACV,UAAU,aACV,SAAS,aACT,SAAS,kBACT,cAAc,kBACd,cAAc,UACd,MAAM,oBACN,gBAAgB,EACjB,GAAG;IAEJ,IAAI,UAAU,CAAA,GAAA,yCAAI;IAClB,IAAI,mBAAC,eAAe,EAAC,GAAG,CAAA,GAAA,yCAAY,EAAE;oBACpC;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;IAEA,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAE;IAC7C,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,yCAAa,EAAE;oBAAC;QAAY,qBAAqB;IAAc;IAExF,IAAI,UAAU,CAAA,GAAA,kBAAU,EACtB,CAAA;QACE,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,GACA;QAAC;QAAW;KAAU;IAExB,mEAAmE;IACnE,IAAI,oBAAoB,mBAAmB,cAAc,cAAc,CAAC;IACxE,CAAA,GAAA,wCAAa,EAAE;QAAC,UAAU;QAAS,YAAY;IAAiB,GAAG;IAEnE,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,yCAAU,EAAE;QAChC,YAAY,cAAc;QAC1B,WAAW;YACT,OAAO;gBACL,CAAA,GAAA,gBAAQ,EAAE;oBACR;gBACF;gBACA;gBACA,OAAO;oBAAC,sBAAsB;gBAAK;YACrC;QACF;mBACA;iBACA;IACF;IAEA,IAAI,WAAW,CAAA;QACb,IAAI,MAAM,QAAQ,CAAC,QACjB,MAAM,aAAa,CAAC;IAExB;IAEA,IAAI,cAAC,UAAU,EAAE,GAAG,YAAW,GAAG,CAAA,GAAA,yCAAoB,EACpD;QACE,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;QACA,WAAW;QACX,SAAS;IACX,GACA,OACA;IAGF,CAAA,GAAA,yCAAW,EAAE,KAAK,MAAM,iBAAiB,EAAE,MAAM,aAAa;IAE9D,aAAa,CAAA,GAAA,yCAAS,EAAE,eAAe,YAAY,iBAAiB,kBAAkB;QACpF,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/src/color/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 {\n  AriaLabelingProps,\n  AriaValidationProps,\n  DOMAttributes,\n  FocusableDOMProps,\n  TextInputDOMProps,\n  ValidationResult\n} from '@react-types/shared';\nimport {ColorFieldProps, ColorFieldState} from 'react-stately/useColorFieldState';\nimport {flushSync} from 'react-dom';\nimport {InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useState} from 'react';\nimport {mergeProps} from '../utils/mergeProps';\nimport {privateValidationStateProp} from 'react-stately/private/form/useFormValidationState';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useFormattedTextField} from '../textfield/useFormattedTextField';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useId} from '../utils/useId';\nimport {useKeyboard} from '../interactions/useKeyboard';\nimport {useScrollWheel} from '../interactions/useScrollWheel';\nimport {useSpinButton} from '../spinbutton/useSpinButton';\n\nexport interface AriaColorFieldProps\n  extends\n    ColorFieldProps,\n    AriaLabelingProps,\n    FocusableDOMProps,\n    Omit<\n      TextInputDOMProps,\n      | 'minLength'\n      | 'maxLength'\n      | 'pattern'\n      | 'type'\n      | 'inputMode'\n      | 'autoComplete'\n      | 'autoCorrect'\n      | 'spellCheck'\n    >,\n    AriaValidationProps {\n  /** Enables or disables changing the value with scroll. */\n  isWheelDisabled?: boolean;\n}\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    onKeyDown,\n    onKeyUp\n  } = props;\n\n  let {\n    colorValue,\n    inputValue,\n    increment,\n    decrement,\n    incrementToMax,\n    decrementToMin,\n    commit,\n    commitValidation\n  } = state;\n\n  let inputId = useId();\n  let {spinButtonProps} = useSpinButton({\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  let [focusWithin, setFocusWithin] = useState(false);\n  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});\n\n  let onWheel = useCallback(\n    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    },\n    [decrement, increment]\n  );\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 {keyboardProps} = useKeyboard({\n    isDisabled: isDisabled || isReadOnly,\n    shortcuts: {\n      Enter: () => {\n        flushSync(() => {\n          commit();\n        });\n        commitValidation();\n        return {shouldPreventDefault: false};\n      }\n    },\n    onKeyDown,\n    onKeyUp\n  });\n\n  let onChange = value => {\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  let {inputProps, ...otherProps} = useFormattedTextField(\n    {\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      onKeyDown: undefined,\n      onKeyUp: undefined\n    },\n    state,\n    ref\n  );\n\n  useFormReset(ref, state.defaultColorValue, state.setColorValue);\n\n  inputProps = mergeProps(keyboardProps, 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.js.map"}