npm - react-aria - Versions diffs - 3.49.0 → 3.50.0 - Mend

react-aria 3.49.0 → 3.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (244) hide show

package/dist/private/color/useColorArea.cjs.map CHANGED Viewed

	@@ -1 +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';\n// @ts-ignore\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.cjs.map"}
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.cjs.map"}

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

	@@ -1 +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';\n// @ts-ignore\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"}
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"}

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

	@@ -1 +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';\n// @ts-ignore\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"}
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"}

package/dist/private/color/useColorSwatch.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;~~AAoCM~~,SAAS,0CAAe,KAA2B;IACxD,IAAI,EAAC,OAAO,KAAK,aAAE,SAAS,EAAC,GAAG;IAChC,IAAI,eAAe,SAAS;IAC5B,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAChB,IAAO,OAAO,iBAAiB,WAAW,CAAA,GAAA,mCAAS,EAAE,gBAAgB,cACrE;QAAC;KAAa;IAEhB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,mCAAQ;IACvB,IAAI,WAAW,CAAA,GAAA,wCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,kBAAkB,CAAA,GAAA,qDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,KAAK,CAAA,GAAA,+BAAI,EAAE,MAAM,EAAE;IAEvB,IAAI,CAAC,WACH,YACE,MAAM,eAAe,CAAC,aAAa,IAC/B,gBAAgB,MAAM,CAAC,iBACvB,MAAM,YAAY,CAAC;IAG3B,OAAO;QACL,kBAAkB;YAChB,GAAG,QAAQ;YACX,MAAM;YACN,wBAAwB,gBAAgB,MAAM,CAAC;YAC/C,cAAc;gBAAC;gBAAW,KAAK,CAAC,aAAa,IAAI;aAAG,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;YAC1E,mBAAmB,KAAK,CAAC,kBAAkB,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,kBAAkB,EAAE,GAAG;gBACpF;YACA,OAAO;gBACL,iBAAiB,MAAM,QAAQ,CAAC;gBAChC,aAAa;gBACb,mBAAmB;YACrB;QACF;QACA,OAAO,SAAS;IAClB;AACF","sources":["packages/react-aria/src/color/useColorSwatch.ts"],"sourcesContent":["/\n Copyright 2024 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, DOMProps} from '@react-types/shared';\nimport {Color} from 'react-stately/Color';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {HTMLAttributes, useMemo} from 'react';\nimport intlMessages from '../../intl/color/.json';\nimport {parseColor} from 'react-stately/Color';\~~n// @ts-ignore\~~nimport {useId} from '../utils/useId';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\n\nexport interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {\n /** The color value to display in the swatch. /\n color?: string \| Color;\n /\n A localized accessible name for the color.\n * By default, a description is generated from the color value,\n * but this can be overridden if you have a more specific color\n * name (e.g. Pantone colors).\n /\n colorName?: string;\n}\n\nexport interface ColorSwatchAria {\n /* Props for the color swatch element. /\n colorSwatchProps: HTMLAttributes<HTMLElement>;\n /* The parsed color value of the swatch. /\n color: Color;\n}\n\n/\n Provides the accessibility implementation for a color swatch component.\n * A color swatch displays a preview of a selected color.\n */\nexport function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {\n let {color: value, colorName} = props;\n let nonNullValue = value \|\| '#fff0';\n let color = useMemo(\n () => (typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue),\n [nonNullValue]\n );\n let {locale} = useLocale();\n let DOMProps = filterDOMProps(props, {labelable: true});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n let id = useId(props.id);\n\n if (!colorName) {\n colorName =\n color.getChannelValue('alpha') === 0\n ? stringFormatter.format('transparent')\n : color.getColorName(locale);\n }\n\n return {\n colorSwatchProps: {\n ...DOMProps,\n role: 'img',\n 'aria-roledescription': stringFormatter.format('colorSwatch'),\n 'aria-label': [colorName, props['aria-label'] \|\| ''].filter(Boolean).join(', '),\n 'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,\n id,\n style: {\n backgroundColor: color.toString('css'),\n // @ts-ignore\n forcedColorAdjust: 'none'\n }\n },\n color: color \|\| null\n };\n}\n"],"names":[],"version":3,"file":"useColorSwatch.cjs.map"}
1	+ {"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAmCM,SAAS,0CAAe,KAA2B;IACxD,IAAI,EAAC,OAAO,KAAK,aAAE,SAAS,EAAC,GAAG;IAChC,IAAI,eAAe,SAAS;IAC5B,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAChB,IAAO,OAAO,iBAAiB,WAAW,CAAA,GAAA,mCAAS,EAAE,gBAAgB,cACrE;QAAC;KAAa;IAEhB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,mCAAQ;IACvB,IAAI,WAAW,CAAA,GAAA,wCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,kBAAkB,CAAA,GAAA,qDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,KAAK,CAAA,GAAA,+BAAI,EAAE,MAAM,EAAE;IAEvB,IAAI,CAAC,WACH,YACE,MAAM,eAAe,CAAC,aAAa,IAC/B,gBAAgB,MAAM,CAAC,iBACvB,MAAM,YAAY,CAAC;IAG3B,OAAO;QACL,kBAAkB;YAChB,GAAG,QAAQ;YACX,MAAM;YACN,wBAAwB,gBAAgB,MAAM,CAAC;YAC/C,cAAc;gBAAC;gBAAW,KAAK,CAAC,aAAa,IAAI;aAAG,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;YAC1E,mBAAmB,KAAK,CAAC,kBAAkB,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,kBAAkB,EAAE,GAAG;gBACpF;YACA,OAAO;gBACL,iBAAiB,MAAM,QAAQ,CAAC;gBAChC,aAAa;gBACb,mBAAmB;YACrB;QACF;QACA,OAAO,SAAS;IAClB;AACF","sources":["packages/react-aria/src/color/useColorSwatch.ts"],"sourcesContent":["/\n Copyright 2024 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, DOMProps} from '@react-types/shared';\nimport {Color} from 'react-stately/Color';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {HTMLAttributes, useMemo} from 'react';\nimport intlMessages from '../../intl/color/.json';\nimport {parseColor} from 'react-stately/Color';\nimport {useId} from '../utils/useId';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\n\nexport interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {\n /** The color value to display in the swatch. /\n color?: string \| Color;\n /\n A localized accessible name for the color.\n * By default, a description is generated from the color value,\n * but this can be overridden if you have a more specific color\n * name (e.g. Pantone colors).\n /\n colorName?: string;\n}\n\nexport interface ColorSwatchAria {\n /* Props for the color swatch element. /\n colorSwatchProps: HTMLAttributes<HTMLElement>;\n /* The parsed color value of the swatch. /\n color: Color;\n}\n\n/\n Provides the accessibility implementation for a color swatch component.\n * A color swatch displays a preview of a selected color.\n */\nexport function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {\n let {color: value, colorName} = props;\n let nonNullValue = value \|\| '#fff0';\n let color = useMemo(\n () => (typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue),\n [nonNullValue]\n );\n let {locale} = useLocale();\n let DOMProps = filterDOMProps(props, {labelable: true});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n let id = useId(props.id);\n\n if (!colorName) {\n colorName =\n color.getChannelValue('alpha') === 0\n ? stringFormatter.format('transparent')\n : color.getColorName(locale);\n }\n\n return {\n colorSwatchProps: {\n ...DOMProps,\n role: 'img',\n 'aria-roledescription': stringFormatter.format('colorSwatch'),\n 'aria-label': [colorName, props['aria-label'] \|\| ''].filter(Boolean).join(', '),\n 'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,\n id,\n style: {\n backgroundColor: color.toString('css'),\n // @ts-ignore\n forcedColorAdjust: 'none'\n }\n },\n color: color \|\| null\n };\n}\n"],"names":[],"version":3,"file":"useColorSwatch.cjs.map"}

package/dist/private/color/useColorSwatch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;~~AAoCM~~,SAAS,0CAAe,KAA2B;IACxD,IAAI,EAAC,OAAO,KAAK,aAAE,SAAS,EAAC,GAAG;IAChC,IAAI,eAAe,SAAS;IAC5B,IAAI,QAAQ,CAAA,GAAA,cAAM,EAChB,IAAO,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cACrE;QAAC;KAAa;IAEhB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,yCAAQ;IACvB,IAAI,WAAW,CAAA,GAAA,yCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,kBAAkB,CAAA,GAAA,yCAA0B,EAAE,CAAA,GAAA,8CAAW,GAAG;IAChE,IAAI,KAAK,CAAA,GAAA,yCAAI,EAAE,MAAM,EAAE;IAEvB,IAAI,CAAC,WACH,YACE,MAAM,eAAe,CAAC,aAAa,IAC/B,gBAAgB,MAAM,CAAC,iBACvB,MAAM,YAAY,CAAC;IAG3B,OAAO;QACL,kBAAkB;YAChB,GAAG,QAAQ;YACX,MAAM;YACN,wBAAwB,gBAAgB,MAAM,CAAC;YAC/C,cAAc;gBAAC;gBAAW,KAAK,CAAC,aAAa,IAAI;aAAG,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;YAC1E,mBAAmB,KAAK,CAAC,kBAAkB,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,kBAAkB,EAAE,GAAG;gBACpF;YACA,OAAO;gBACL,iBAAiB,MAAM,QAAQ,CAAC;gBAChC,aAAa;gBACb,mBAAmB;YACrB;QACF;QACA,OAAO,SAAS;IAClB;AACF","sources":["packages/react-aria/src/color/useColorSwatch.ts"],"sourcesContent":["/\n Copyright 2024 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, DOMProps} from '@react-types/shared';\nimport {Color} from 'react-stately/Color';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {HTMLAttributes, useMemo} from 'react';\nimport intlMessages from '../../intl/color/.json';\nimport {parseColor} from 'react-stately/Color';\~~n// @ts-ignore\~~nimport {useId} from '../utils/useId';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\n\nexport interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {\n /** The color value to display in the swatch. /\n color?: string \| Color;\n /\n A localized accessible name for the color.\n * By default, a description is generated from the color value,\n * but this can be overridden if you have a more specific color\n * name (e.g. Pantone colors).\n /\n colorName?: string;\n}\n\nexport interface ColorSwatchAria {\n /* Props for the color swatch element. /\n colorSwatchProps: HTMLAttributes<HTMLElement>;\n /* The parsed color value of the swatch. /\n color: Color;\n}\n\n/\n Provides the accessibility implementation for a color swatch component.\n * A color swatch displays a preview of a selected color.\n */\nexport function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {\n let {color: value, colorName} = props;\n let nonNullValue = value \|\| '#fff0';\n let color = useMemo(\n () => (typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue),\n [nonNullValue]\n );\n let {locale} = useLocale();\n let DOMProps = filterDOMProps(props, {labelable: true});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n let id = useId(props.id);\n\n if (!colorName) {\n colorName =\n color.getChannelValue('alpha') === 0\n ? stringFormatter.format('transparent')\n : color.getColorName(locale);\n }\n\n return {\n colorSwatchProps: {\n ...DOMProps,\n role: 'img',\n 'aria-roledescription': stringFormatter.format('colorSwatch'),\n 'aria-label': [colorName, props['aria-label'] \|\| ''].filter(Boolean).join(', '),\n 'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,\n id,\n style: {\n backgroundColor: color.toString('css'),\n // @ts-ignore\n forcedColorAdjust: 'none'\n }\n },\n color: color \|\| null\n };\n}\n"],"names":[],"version":3,"file":"useColorSwatch.js.map"}
1	+ {"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAmCM,SAAS,0CAAe,KAA2B;IACxD,IAAI,EAAC,OAAO,KAAK,aAAE,SAAS,EAAC,GAAG;IAChC,IAAI,eAAe,SAAS;IAC5B,IAAI,QAAQ,CAAA,GAAA,cAAM,EAChB,IAAO,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cACrE;QAAC;KAAa;IAEhB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,yCAAQ;IACvB,IAAI,WAAW,CAAA,GAAA,yCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,kBAAkB,CAAA,GAAA,yCAA0B,EAAE,CAAA,GAAA,8CAAW,GAAG;IAChE,IAAI,KAAK,CAAA,GAAA,yCAAI,EAAE,MAAM,EAAE;IAEvB,IAAI,CAAC,WACH,YACE,MAAM,eAAe,CAAC,aAAa,IAC/B,gBAAgB,MAAM,CAAC,iBACvB,MAAM,YAAY,CAAC;IAG3B,OAAO;QACL,kBAAkB;YAChB,GAAG,QAAQ;YACX,MAAM;YACN,wBAAwB,gBAAgB,MAAM,CAAC;YAC/C,cAAc;gBAAC;gBAAW,KAAK,CAAC,aAAa,IAAI;aAAG,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;YAC1E,mBAAmB,KAAK,CAAC,kBAAkB,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,kBAAkB,EAAE,GAAG;gBACpF;YACA,OAAO;gBACL,iBAAiB,MAAM,QAAQ,CAAC;gBAChC,aAAa;gBACb,mBAAmB;YACrB;QACF;QACA,OAAO,SAAS;IAClB;AACF","sources":["packages/react-aria/src/color/useColorSwatch.ts"],"sourcesContent":["/\n Copyright 2024 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, DOMProps} from '@react-types/shared';\nimport {Color} from 'react-stately/Color';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {HTMLAttributes, useMemo} from 'react';\nimport intlMessages from '../../intl/color/.json';\nimport {parseColor} from 'react-stately/Color';\nimport {useId} from '../utils/useId';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\n\nexport interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {\n /** The color value to display in the swatch. /\n color?: string \| Color;\n /\n A localized accessible name for the color.\n * By default, a description is generated from the color value,\n * but this can be overridden if you have a more specific color\n * name (e.g. Pantone colors).\n /\n colorName?: string;\n}\n\nexport interface ColorSwatchAria {\n /* Props for the color swatch element. /\n colorSwatchProps: HTMLAttributes<HTMLElement>;\n /* The parsed color value of the swatch. /\n color: Color;\n}\n\n/\n Provides the accessibility implementation for a color swatch component.\n * A color swatch displays a preview of a selected color.\n */\nexport function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {\n let {color: value, colorName} = props;\n let nonNullValue = value \|\| '#fff0';\n let color = useMemo(\n () => (typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue),\n [nonNullValue]\n );\n let {locale} = useLocale();\n let DOMProps = filterDOMProps(props, {labelable: true});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n let id = useId(props.id);\n\n if (!colorName) {\n colorName =\n color.getChannelValue('alpha') === 0\n ? stringFormatter.format('transparent')\n : color.getColorName(locale);\n }\n\n return {\n colorSwatchProps: {\n ...DOMProps,\n role: 'img',\n 'aria-roledescription': stringFormatter.format('colorSwatch'),\n 'aria-label': [colorName, props['aria-label'] \|\| ''].filter(Boolean).join(', '),\n 'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,\n id,\n style: {\n backgroundColor: color.toString('css'),\n // @ts-ignore\n forcedColorAdjust: 'none'\n }\n },\n color: color \|\| null\n };\n}\n"],"names":[],"version":3,"file":"useColorSwatch.js.map"}

package/dist/private/color/useColorSwatch.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;~~AAoCM~~,SAAS,0CAAe,KAA2B;IACxD,IAAI,EAAC,OAAO,KAAK,aAAE,SAAS,EAAC,GAAG;IAChC,IAAI,eAAe,SAAS;IAC5B,IAAI,QAAQ,CAAA,GAAA,cAAM,EAChB,IAAO,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cACrE;QAAC;KAAa;IAEhB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,yCAAQ;IACvB,IAAI,WAAW,CAAA,GAAA,yCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,kBAAkB,CAAA,GAAA,yCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,KAAK,CAAA,GAAA,yCAAI,EAAE,MAAM,EAAE;IAEvB,IAAI,CAAC,WACH,YACE,MAAM,eAAe,CAAC,aAAa,IAC/B,gBAAgB,MAAM,CAAC,iBACvB,MAAM,YAAY,CAAC;IAG3B,OAAO;QACL,kBAAkB;YAChB,GAAG,QAAQ;YACX,MAAM;YACN,wBAAwB,gBAAgB,MAAM,CAAC;YAC/C,cAAc;gBAAC;gBAAW,KAAK,CAAC,aAAa,IAAI;aAAG,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;YAC1E,mBAAmB,KAAK,CAAC,kBAAkB,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,kBAAkB,EAAE,GAAG;gBACpF;YACA,OAAO;gBACL,iBAAiB,MAAM,QAAQ,CAAC;gBAChC,aAAa;gBACb,mBAAmB;YACrB;QACF;QACA,OAAO,SAAS;IAClB;AACF","sources":["packages/react-aria/src/color/useColorSwatch.ts"],"sourcesContent":["/\n Copyright 2024 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, DOMProps} from '@react-types/shared';\nimport {Color} from 'react-stately/Color';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {HTMLAttributes, useMemo} from 'react';\nimport intlMessages from '../../intl/color/.json';\nimport {parseColor} from 'react-stately/Color';\~~n// @ts-ignore\~~nimport {useId} from '../utils/useId';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\n\nexport interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {\n /** The color value to display in the swatch. /\n color?: string \| Color;\n /\n A localized accessible name for the color.\n * By default, a description is generated from the color value,\n * but this can be overridden if you have a more specific color\n * name (e.g. Pantone colors).\n /\n colorName?: string;\n}\n\nexport interface ColorSwatchAria {\n /* Props for the color swatch element. /\n colorSwatchProps: HTMLAttributes<HTMLElement>;\n /* The parsed color value of the swatch. /\n color: Color;\n}\n\n/\n Provides the accessibility implementation for a color swatch component.\n * A color swatch displays a preview of a selected color.\n */\nexport function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {\n let {color: value, colorName} = props;\n let nonNullValue = value \|\| '#fff0';\n let color = useMemo(\n () => (typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue),\n [nonNullValue]\n );\n let {locale} = useLocale();\n let DOMProps = filterDOMProps(props, {labelable: true});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n let id = useId(props.id);\n\n if (!colorName) {\n colorName =\n color.getChannelValue('alpha') === 0\n ? stringFormatter.format('transparent')\n : color.getColorName(locale);\n }\n\n return {\n colorSwatchProps: {\n ...DOMProps,\n role: 'img',\n 'aria-roledescription': stringFormatter.format('colorSwatch'),\n 'aria-label': [colorName, props['aria-label'] \|\| ''].filter(Boolean).join(', '),\n 'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,\n id,\n style: {\n backgroundColor: color.toString('css'),\n // @ts-ignore\n forcedColorAdjust: 'none'\n }\n },\n color: color \|\| null\n };\n}\n"],"names":[],"version":3,"file":"useColorSwatch.mjs.map"}
1	+ {"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAmCM,SAAS,0CAAe,KAA2B;IACxD,IAAI,EAAC,OAAO,KAAK,aAAE,SAAS,EAAC,GAAG;IAChC,IAAI,eAAe,SAAS;IAC5B,IAAI,QAAQ,CAAA,GAAA,cAAM,EAChB,IAAO,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cACrE;QAAC;KAAa;IAEhB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,yCAAQ;IACvB,IAAI,WAAW,CAAA,GAAA,yCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACrD,IAAI,kBAAkB,CAAA,GAAA,yCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,KAAK,CAAA,GAAA,yCAAI,EAAE,MAAM,EAAE;IAEvB,IAAI,CAAC,WACH,YACE,MAAM,eAAe,CAAC,aAAa,IAC/B,gBAAgB,MAAM,CAAC,iBACvB,MAAM,YAAY,CAAC;IAG3B,OAAO;QACL,kBAAkB;YAChB,GAAG,QAAQ;YACX,MAAM;YACN,wBAAwB,gBAAgB,MAAM,CAAC;YAC/C,cAAc;gBAAC;gBAAW,KAAK,CAAC,aAAa,IAAI;aAAG,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;YAC1E,mBAAmB,KAAK,CAAC,kBAAkB,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,kBAAkB,EAAE,GAAG;gBACpF;YACA,OAAO;gBACL,iBAAiB,MAAM,QAAQ,CAAC;gBAChC,aAAa;gBACb,mBAAmB;YACrB;QACF;QACA,OAAO,SAAS;IAClB;AACF","sources":["packages/react-aria/src/color/useColorSwatch.ts"],"sourcesContent":["/\n Copyright 2024 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, DOMProps} from '@react-types/shared';\nimport {Color} from 'react-stately/Color';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {HTMLAttributes, useMemo} from 'react';\nimport intlMessages from '../../intl/color/.json';\nimport {parseColor} from 'react-stately/Color';\nimport {useId} from '../utils/useId';\nimport {useLocale} from '../i18n/I18nProvider';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\n\nexport interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {\n /** The color value to display in the swatch. /\n color?: string \| Color;\n /\n A localized accessible name for the color.\n * By default, a description is generated from the color value,\n * but this can be overridden if you have a more specific color\n * name (e.g. Pantone colors).\n /\n colorName?: string;\n}\n\nexport interface ColorSwatchAria {\n /* Props for the color swatch element. /\n colorSwatchProps: HTMLAttributes<HTMLElement>;\n /* The parsed color value of the swatch. /\n color: Color;\n}\n\n/\n Provides the accessibility implementation for a color swatch component.\n * A color swatch displays a preview of a selected color.\n */\nexport function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {\n let {color: value, colorName} = props;\n let nonNullValue = value \|\| '#fff0';\n let color = useMemo(\n () => (typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue),\n [nonNullValue]\n );\n let {locale} = useLocale();\n let DOMProps = filterDOMProps(props, {labelable: true});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');\n let id = useId(props.id);\n\n if (!colorName) {\n colorName =\n color.getChannelValue('alpha') === 0\n ? stringFormatter.format('transparent')\n : color.getColorName(locale);\n }\n\n return {\n colorSwatchProps: {\n ...DOMProps,\n role: 'img',\n 'aria-roledescription': stringFormatter.format('colorSwatch'),\n 'aria-label': [colorName, props['aria-label'] \|\| ''].filter(Boolean).join(', '),\n 'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,\n id,\n style: {\n backgroundColor: color.toString('css'),\n // @ts-ignore\n forcedColorAdjust: 'none'\n }\n },\n color: color \|\| null\n };\n}\n"],"names":[],"version":3,"file":"useColorSwatch.mjs.map"}

package/dist/private/combobox/useComboBox.cjs CHANGED Viewed

@@ -134,6 +134,7 @@ function $9f4ec1506bb7618d$export$8c18d1b4f7232bbf(props, state) {
                     }
                 }
                 if (e.key === 'Enter' || state.isOpen) state.commit();
+                if (e.key === 'Tab') e.continuePropagation();
                 break;
             case 'Escape':
                 if (!state.selectionManager.isEmpty || state.inputValue === '' || props.allowsCustomValue) e.continuePropagation();
@@ -335,6 +336,7 @@ function $9f4ec1506bb7618d$export$8c18d1b4f7232bbf(props, state) {
             spellCheck: 'false'
         }),
         listBoxProps: (0, $89b39774f3b79dbb$exports.mergeProps)(menuProps, listBoxProps, {
+            onAction: undefined,
             autoFocus: state.focusStrategy || true,
             shouldUseVirtualFocus: true,
             shouldSelectOnPressUp: true,