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

package/dist/main.js

@@ -39,7 +39,7 @@ $parcel$export(module.exports, "useColorField", () => $58c850037bc7a7ce$export$7
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-var $4f97b428b4cbcd4e$exports = {};
+var $4a33e168940636d5$exports = {};
 var $f141a15c3076a67b$exports = {};
 $f141a15c3076a67b$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
@@ -346,7 +346,7 @@ $7377d28aec5fa200$exports = {
 };
 
 
-$4f97b428b4cbcd4e$exports = {
+$4a33e168940636d5$exports = {
     "ar-AE": $f141a15c3076a67b$exports,
     "bg-BG": $435ac2a9fdd2ae5e$exports,
     "cs-CZ": $6b29758b432284f5$exports,
@@ -609,21 +609,27 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , stat
 
 
 function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel  } = props;
-    let stringFormatter = (0, $kZqDi$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($4f97b428b4cbcd4e$exports))));
+    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel , xName: xName , yName: yName  } = props;
+    let stringFormatter = (0, $kZqDi$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($4a33e168940636d5$exports))));
     let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = (0, $kZqDi$reactariautils.useGlobalListeners)();
     let { direction: direction , locale: locale  } = (0, $kZqDi$reactariai18n.useLocale)();
-    let focusedInputRef = (0, $kZqDi$react.useRef)(null);
+    let [focusedInput, setFocusedInput] = (0, $kZqDi$react.useState)(null);
     let focusInput = (0, $kZqDi$react.useCallback)((inputRef = inputXRef)=>{
         if (inputRef.current) (0, $kZqDi$reactariautils.focusWithoutScrolling)(inputRef.current);
     }, [
         inputXRef
     ]);
-    let stateRef = (0, $kZqDi$react.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, $kZqDi$reactariautils.useFormReset)(inputXRef, [
+        state.xValue,
+        state.yValue
+    ], ([x, y])=>{
+        let newColor = state.value.withChannelValue(state.channels.xChannel, x).withChannelValue(state.channels.yChannel, y);
+        state.setValue(newColor);
+    });
+    let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $kZqDi$react.useState)(false);
+    let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel  } = state.channels;
+    let xChannelStep = state.xChannelStep;
+    let yChannelStep = state.yChannelStep;
     let currentPosition = (0, $kZqDi$react.useRef)(null);
     let { keyboardProps: keyboardProps  } = (0, $kZqDi$reactariainteractions.useKeyboard)({
         onKeyDown (e) {
@@ -635,37 +641,42 @@ function $47925bd68062ac17$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;
@@ -676,9 +687,10 @@ function $47925bd68062ac17$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;
@@ -687,18 +699,15 @@ function $47925bd68062ac17$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, $kZqDi$reactariainteractions.useMove)(moveHandler);
-    let valueChangedViaKeyboard = (0, $kZqDi$react.useRef)(false);
     let { focusWithinProps: focusWithinProps  } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
         onFocusWithinChange: (focusWithin)=>{
-            if (!focusWithin) {
-                valueChangedViaKeyboard.current = false;
-                focusedInputRef.current;
-            }
+            if (!focusWithin) setValueChangedViaKeyboard(false);
         }
     });
     let currentPointer = (0, $kZqDi$react.useRef)(undefined);
@@ -717,7 +726,7 @@ function $47925bd68062ac17$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);
@@ -732,7 +741,7 @@ function $47925bd68062ac17$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;
@@ -752,7 +761,7 @@ function $47925bd68062ac17$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();
@@ -770,7 +779,7 @@ function $47925bd68062ac17$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();
@@ -815,17 +824,17 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
     }, focusWithinProps, keyboardProps, movePropsThumb);
     let { focusProps: xInputFocusProps  } = (0, $kZqDi$reactariainteractions.useFocus)({
         onFocus: ()=>{
-            focusedInputRef.current = inputXRef.current;
+            setFocusedInput("x");
         }
     });
     let { focusProps: yInputFocusProps  } = (0, $kZqDi$reactariainteractions.useFocus)({
         onFocus: ()=>{
-            focusedInputRef.current = inputYRef.current;
+            setFocusedInput("y");
         }
     });
     let isMobile = (0, $kZqDi$reactariautils.isIOS)() || (0, $kZqDi$reactariautils.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)
         }) : [
@@ -902,12 +911,13 @@ function $47925bd68062ac17$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));
             }
@@ -925,12 +935,13 @@ function $47925bd68062ac17$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));
             }
@@ -953,7 +964,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
 
 
 function $afbb9647440a7f5b$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, $kZqDi$reactariai18n.useLocale)();
     // Provide a default aria-label if there is no other label provided.
     if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
@@ -966,6 +977,7 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
         index: 0,
         orientation: orientation,
         isDisabled: props.isDisabled,
+        name: name,
         trackRef: trackRef,
         inputRef: inputRef
     }, state);
@@ -996,9 +1008,9 @@ function $afbb9647440a7f5b$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);
@@ -1045,7 +1057,7 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
 
 
 function $1d29bf243d4a9a53$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, $kZqDi$reactariautils.useGlobalListeners)();
     let thumbRadius = (innerRadius + outerRadius) / 2;
     let focusInput = (0, $kZqDi$react.useCallback)(()=>{
@@ -1053,8 +1065,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
     }, [
         inputRef
     ]);
-    let stateRef = (0, $kZqDi$react.useRef)(null);
-    stateRef.current = state;
+    (0, $kZqDi$reactariautils.useFormReset)(inputRef, state.hue, state.setHue);
     let currentPosition = (0, $kZqDi$react.useRef)(null);
     let { keyboardProps: keyboardProps  } = (0, $kZqDi$reactariainteractions.useKeyboard)({
         onKeyDown (e) {
@@ -1066,18 +1077,18 @@ function $1d29bf243d4a9a53$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 = {
@@ -1086,13 +1097,13 @@ function $1d29bf243d4a9a53$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;
@@ -1150,7 +1161,7 @@ function $1d29bf243d4a9a53$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);
@@ -1266,6 +1277,7 @@ function $1d29bf243d4a9a53$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));
             }