@react-aria/color 3.0.0-beta.21 → 3.0.0-beta.23

package/dist/module.js

@@ -1,5 +1,5 @@
-import {useGlobalListeners as $7KHxM$useGlobalListeners, focusWithoutScrolling as $7KHxM$focusWithoutScrolling, mergeProps as $7KHxM$mergeProps, isIOS as $7KHxM$isIOS, isAndroid as $7KHxM$isAndroid, useLabels as $7KHxM$useLabels, useId as $7KHxM$useId} from "@react-aria/utils";
-import {useRef as $7KHxM$useRef, useCallback as $7KHxM$useCallback, useMemo as $7KHxM$useMemo, useState as $7KHxM$useState} from "react";
+import {useGlobalListeners as $7KHxM$useGlobalListeners, focusWithoutScrolling as $7KHxM$focusWithoutScrolling, useFormReset as $7KHxM$useFormReset, mergeProps as $7KHxM$mergeProps, isIOS as $7KHxM$isIOS, isAndroid as $7KHxM$isAndroid, useLabels as $7KHxM$useLabels, useId as $7KHxM$useId} from "@react-aria/utils";
+import {useState as $7KHxM$useState, useCallback as $7KHxM$useCallback, useRef as $7KHxM$useRef, useMemo as $7KHxM$useMemo} from "react";
 import {useKeyboard as $7KHxM$useKeyboard, useMove as $7KHxM$useMove, useFocusWithin as $7KHxM$useFocusWithin, useFocus as $7KHxM$useFocus, useScrollWheel as $7KHxM$useScrollWheel} from "@react-aria/interactions";
 import {useLocalizedStringFormatter as $7KHxM$useLocalizedStringFormatter, useLocale as $7KHxM$useLocale} from "@react-aria/i18n";
 import {useVisuallyHidden as $7KHxM$useVisuallyHidden} from "@react-aria/visually-hidden";
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-var $052cfdf4c32eb7c3$exports = {};
+var $3493a52097159720$exports = {};
 var $eccab2b0118aef08$exports = {};
 $eccab2b0118aef08$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
@@ -338,7 +338,7 @@ $b0fef28529309aa6$exports = {
 };
 
 
-$052cfdf4c32eb7c3$exports = {
+$3493a52097159720$exports = {
     "ar-AE": $eccab2b0118aef08$exports,
     "bg-BG": $bf2b4507594e3d45$exports,
     "cs-CZ": $01c08487af7ecd14$exports,
@@ -601,21 +601,27 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction , stat
 
 
 function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel  } = props;
-    let stringFormatter = (0, $7KHxM$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($052cfdf4c32eb7c3$exports))));
+    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel , xName: xName , yName: yName  } = props;
+    let stringFormatter = (0, $7KHxM$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($3493a52097159720$exports))));
     let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = (0, $7KHxM$useGlobalListeners)();
     let { direction: direction , locale: locale  } = (0, $7KHxM$useLocale)();
-    let focusedInputRef = (0, $7KHxM$useRef)(null);
+    let [focusedInput, setFocusedInput] = (0, $7KHxM$useState)(null);
     let focusInput = (0, $7KHxM$useCallback)((inputRef = inputXRef)=>{
         if (inputRef.current) (0, $7KHxM$focusWithoutScrolling)(inputRef.current);
     }, [
         inputXRef
     ]);
-    let stateRef = (0, $7KHxM$useRef)(null);
-    stateRef.current = state;
-    let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel  } = stateRef.current.channels;
-    let xChannelStep = stateRef.current.xChannelStep;
-    let yChannelStep = stateRef.current.yChannelStep;
+    (0, $7KHxM$useFormReset)(inputXRef, [
+        state.xValue,
+        state.yValue
+    ], ([x, y])=>{
+        let newColor = state.value.withChannelValue(state.channels.xChannel, x).withChannelValue(state.channels.yChannel, y);
+        state.setValue(newColor);
+    });
+    let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $7KHxM$useState)(false);
+    let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel  } = state.channels;
+    let xChannelStep = state.xChannelStep;
+    let yChannelStep = state.yChannelStep;
     let currentPosition = (0, $7KHxM$useRef)(null);
     let { keyboardProps: keyboardProps  } = (0, $7KHxM$useKeyboard)({
         onKeyDown (e) {
@@ -627,37 +633,42 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
             e.preventDefault();
             // remember to set this and unset it so that onChangeEnd is fired
-            stateRef.current.setDragging(true);
-            valueChangedViaKeyboard.current = true;
+            state.setDragging(true);
+            setValueChangedViaKeyboard(true);
+            let dir;
             switch(e.key){
                 case "PageUp":
-                    stateRef.current.incrementY(stateRef.current.yChannelPageStep);
-                    focusedInputRef.current = inputYRef.current;
+                    state.incrementY(state.yChannelPageStep);
+                    dir = "y";
                     break;
                 case "PageDown":
-                    stateRef.current.decrementY(stateRef.current.yChannelPageStep);
-                    focusedInputRef.current = inputYRef.current;
+                    state.decrementY(state.yChannelPageStep);
+                    dir = "y";
                     break;
                 case "Home":
-                    direction === "rtl" ? stateRef.current.incrementX(stateRef.current.xChannelPageStep) : stateRef.current.decrementX(stateRef.current.xChannelPageStep);
-                    focusedInputRef.current = inputXRef.current;
+                    direction === "rtl" ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);
+                    dir = "x";
                     break;
                 case "End":
-                    direction === "rtl" ? stateRef.current.decrementX(stateRef.current.xChannelPageStep) : stateRef.current.incrementX(stateRef.current.xChannelPageStep);
-                    focusedInputRef.current = inputXRef.current;
+                    direction === "rtl" ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);
+                    dir = "x";
                     break;
             }
-            stateRef.current.setDragging(false);
-            if (focusedInputRef.current) focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
+            state.setDragging(false);
+            if (dir) {
+                let input = dir === "x" ? inputXRef : inputYRef;
+                focusInput(input);
+                setFocusedInput(dir);
+            }
         }
     });
     let moveHandler = {
         onMoveStart () {
             currentPosition.current = null;
-            stateRef.current.setDragging(true);
+            state.setDragging(true);
         },
         onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey  }) {
-            let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint  } = stateRef.current;
+            let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint  } = state;
             if (currentPosition.current == null) currentPosition.current = getThumbPosition();
             let { width: width , height: height  } = containerRef.current.getBoundingClientRect();
             let valueChanged = deltaX !== 0 || deltaY !== 0;
@@ -668,9 +679,10 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
                 else if (deltaX < 0 && direction === "ltr" || deltaX > 0 && direction === "rtl") decrementX(deltaXValue);
                 else if (deltaY > 0) decrementY(deltaYValue);
                 else if (deltaY < 0) incrementY(deltaYValue);
-                valueChangedViaKeyboard.current = valueChanged;
+                setValueChangedViaKeyboard(valueChanged);
                 // set the focused input based on which axis has the greater delta
-                focusedInputRef.current = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? inputYRef.current : inputXRef.current;
+                focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? "y" : "x";
+                setFocusedInput(focusedInput);
             } else {
                 currentPosition.current.x += (direction === "rtl" ? -1 : 1) * deltaX / width;
                 currentPosition.current.y += deltaY / height;
@@ -679,18 +691,15 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         },
         onMoveEnd () {
             isOnColorArea.current = undefined;
-            stateRef.current.setDragging(false);
-            focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
+            state.setDragging(false);
+            let input = focusedInput === "x" ? inputXRef : inputYRef;
+            focusInput(input);
         }
     };
     let { moveProps: movePropsThumb  } = (0, $7KHxM$useMove)(moveHandler);
-    let valueChangedViaKeyboard = (0, $7KHxM$useRef)(false);
     let { focusWithinProps: focusWithinProps  } = (0, $7KHxM$useFocusWithin)({
         onFocusWithinChange: (focusWithin)=>{
-            if (!focusWithin) {
-                valueChangedViaKeyboard.current = false;
-                focusedInputRef.current;
-            }
+            if (!focusWithin) setValueChangedViaKeyboard(false);
         }
     });
     let currentPointer = (0, $7KHxM$useRef)(undefined);
@@ -709,7 +718,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     let onThumbDown = (id)=>{
         if (!state.isDragging) {
             currentPointer.current = id;
-            valueChangedViaKeyboard.current = false;
+            setValueChangedViaKeyboard(false);
             focusInput();
             state.setDragging(true);
             if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
@@ -724,7 +733,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         var _e_pointerId;
         let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
         if (id === currentPointer.current) {
-            valueChangedViaKeyboard.current = false;
+            setValueChangedViaKeyboard(false);
             focusInput();
             state.setDragging(false);
             currentPointer.current = undefined;
@@ -744,7 +753,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         if (direction === "rtl") x = 1 - x;
         if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {
             isOnColorArea.current = true;
-            valueChangedViaKeyboard.current = false;
+            setValueChangedViaKeyboard(false);
             currentPointer.current = id;
             state.setColorFromPoint(x, y);
             focusInput();
@@ -762,7 +771,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
         if (isOnColorArea.current && id === currentPointer.current) {
             isOnColorArea.current = false;
-            valueChangedViaKeyboard.current = false;
+            setValueChangedViaKeyboard(false);
             currentPointer.current = undefined;
             state.setDragging(false);
             focusInput();
@@ -807,17 +816,17 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     }, focusWithinProps, keyboardProps, movePropsThumb);
     let { focusProps: xInputFocusProps  } = (0, $7KHxM$useFocus)({
         onFocus: ()=>{
-            focusedInputRef.current = inputXRef.current;
+            setFocusedInput("x");
         }
     });
     let { focusProps: yInputFocusProps  } = (0, $7KHxM$useFocus)({
         onFocus: ()=>{
-            focusedInputRef.current = inputYRef.current;
+            setFocusedInput("y");
         }
     });
     let isMobile = (0, $7KHxM$isIOS)() || (0, $7KHxM$isAndroid)();
     function getAriaValueTextForChannel(channel) {
-        return valueChangedViaKeyboard.current ? stringFormatter.format("colorNameAndValue", {
+        return valueChangedViaKeyboard ? stringFormatter.format("colorNameAndValue", {
             name: state.value.getChannelName(channel, locale),
             value: state.value.formatChannelValue(channel, locale)
         }) : [
@@ -894,12 +903,13 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             "aria-valuetext": getAriaValueTextForChannel(xChannel),
             disabled: isDisabled,
             value: state.value.getChannelValue(xChannel),
-            tabIndex: isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current ? undefined : -1,
+            name: xName,
+            tabIndex: isMobile || !focusedInput || focusedInput === "x" ? undefined : -1,
             /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
         add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
         but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
-      */ "aria-hidden": isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current || valueChangedViaKeyboard.current ? undefined : "true",
+      */ "aria-hidden": isMobile || !focusedInput || focusedInput === "x" || valueChangedViaKeyboard ? undefined : "true",
             onChange: (e)=>{
                 state.setXValue(parseFloat(e.target.value));
             }
@@ -917,12 +927,13 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             "aria-orientation": "vertical",
             disabled: isDisabled,
             value: state.value.getChannelValue(yChannel),
-            tabIndex: isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current ? undefined : -1,
+            name: yName,
+            tabIndex: isMobile || focusedInput === "y" ? undefined : -1,
             /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
         add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
         but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
-      */ "aria-hidden": isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current || valueChangedViaKeyboard.current ? undefined : "true",
+      */ "aria-hidden": isMobile || focusedInput === "y" || valueChangedViaKeyboard ? undefined : "true",
             onChange: (e)=>{
                 state.setYValue(parseFloat(e.target.value));
             }
@@ -945,7 +956,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
 
 
 function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
-    let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel , "aria-label": ariaLabel  } = props;
+    let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel , "aria-label": ariaLabel , name: name  } = props;
     let { locale: locale , direction: direction  } = (0, $7KHxM$useLocale)();
     // Provide a default aria-label if there is no other label provided.
     if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
@@ -958,6 +969,7 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
         index: 0,
         orientation: orientation,
         isDisabled: props.isDisabled,
+        name: name,
         trackRef: trackRef,
         inputRef: inputRef
     }, state);
@@ -988,9 +1000,9 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
             case "blue":
             case "alpha":
                 {
-                    let start1 = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
-                    let end1 = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
-                    return `linear-gradient(to ${to}, ${start1}, ${end1})`;
+                    let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
+                    let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
+                    return `linear-gradient(to ${to}, ${start}, ${end})`;
                 }
             default:
                 throw new Error("Unknown color channel: " + channel);
@@ -1037,7 +1049,7 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
 
 
 function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
-    let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius , "aria-label": ariaLabel  } = props;
+    let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius , "aria-label": ariaLabel , name: name  } = props;
     let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = (0, $7KHxM$useGlobalListeners)();
     let thumbRadius = (innerRadius + outerRadius) / 2;
     let focusInput = (0, $7KHxM$useCallback)(()=>{
@@ -1045,8 +1057,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
     }, [
         inputRef
     ]);
-    let stateRef = (0, $7KHxM$useRef)(null);
-    stateRef.current = state;
+    (0, $7KHxM$useFormReset)(inputRef, state.hue, state.setHue);
     let currentPosition = (0, $7KHxM$useRef)(null);
     let { keyboardProps: keyboardProps  } = (0, $7KHxM$useKeyboard)({
         onKeyDown (e) {
@@ -1058,18 +1069,18 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
             // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
             e.preventDefault();
             // remember to set this and unset it so that onChangeEnd is fired
-            stateRef.current.setDragging(true);
+            state.setDragging(true);
             switch(e.key){
                 case "PageUp":
                     e.preventDefault();
-                    state.increment(stateRef.current.pageStep);
+                    state.increment(state.pageStep);
                     break;
                 case "PageDown":
                     e.preventDefault();
-                    state.decrement(stateRef.current.pageStep);
+                    state.decrement(state.pageStep);
                     break;
             }
-            stateRef.current.setDragging(false);
+            state.setDragging(false);
         }
     });
     let moveHandler = {
@@ -1078,13 +1089,13 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
             state.setDragging(true);
         },
         onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey  }) {
-            if (currentPosition.current == null) currentPosition.current = stateRef.current.getThumbPosition(thumbRadius);
+            if (currentPosition.current == null) currentPosition.current = state.getThumbPosition(thumbRadius);
             currentPosition.current.x += deltaX;
             currentPosition.current.y += deltaY;
             if (pointerType === "keyboard") {
-                if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
-                else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
-            } else stateRef.current.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
+                if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? state.pageStep : state.step);
+                else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? state.pageStep : state.step);
+            } else state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
         },
         onMoveEnd () {
             isOnTrack.current = undefined;
@@ -1142,7 +1153,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
         if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {
             isOnTrack.current = true;
             currentPointer.current = id;
-            stateRef.current.setHueFromPoint(x, y, radius);
+            state.setHueFromPoint(x, y, radius);
             focusInput();
             state.setDragging(true);
             if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onTrackUp, false);
@@ -1258,6 +1269,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
             "aria-valuetext": state.value.formatChannelValue("hue", locale),
             disabled: isDisabled,
             value: `${state.value.getChannelValue("hue")}`,
+            name: name,
             onChange: (e)=>{
                 state.setHue(parseFloat(e.target.value));
             }