@react-aria/color 3.0.0-nightly.4545 → 3.0.0-nightly.4550

package/dist/import.mjs

@@ -383,6 +383,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         state.setValue(newColor);
     });
     let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $7KHxM$useState)(false);
+    let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = (0, $7KHxM$useState)(false);
     let { xChannel: xChannel, yChannel: yChannel, zChannel: zChannel } = state.channels;
     let xChannelStep = state.xChannelStep;
     let yChannelStep = state.yChannelStep;
@@ -467,7 +468,10 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
     let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
         onFocusWithinChange: (focusWithin)=>{
-            if (!focusWithin) setValueChangedViaKeyboard(false);
+            if (!focusWithin) {
+                setValueChangedViaKeyboard(false);
+                setValueChangedViaInputChangeEvent(false);
+            }
         }
     });
     let currentPointer = (0, $7KHxM$useRef)(undefined);
@@ -592,22 +596,43 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             setFocusedInput("y");
         }
     });
+    const onChange = (e)=>{
+        const { target: target } = e;
+        setValueChangedViaInputChangeEvent(true);
+        if (target === inputXRef.current) state.setXValue(parseFloat(target.value));
+        else if (target === inputYRef.current) state.setYValue(parseFloat(target.value));
+    };
     let isMobile = (0, $7KHxM$isIOS)() || (0, $7KHxM$isAndroid)();
-    function getAriaValueTextForChannel(channel) {
-        return valueChangedViaKeyboard ? stringFormatter.format("colorNameAndValue", {
-            name: state.value.getChannelName(channel, locale),
-            value: state.value.formatChannelValue(channel, locale)
+    let value = state.getDisplayColor();
+    const getAriaValueTextForChannel = (0, $7KHxM$useCallback)((channel)=>{
+        const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;
+        return `${isAfterInput ? stringFormatter.format("colorNameAndValue", {
+            name: value.getChannelName(channel, locale),
+            value: value.formatChannelValue(channel, locale)
         }) : [
             stringFormatter.format("colorNameAndValue", {
-                name: state.value.getChannelName(channel, locale),
-                value: state.value.formatChannelValue(channel, locale)
+                name: value.getChannelName(channel, locale),
+                value: value.formatChannelValue(channel, locale)
+            }),
+            stringFormatter.format("colorNameAndValue", {
+                name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
+                value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
             }),
             stringFormatter.format("colorNameAndValue", {
-                name: state.value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
-                value: state.value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
+                name: value.getChannelName(zChannel, locale),
+                value: value.formatChannelValue(zChannel, locale)
             })
-        ].join(", ");
-    }
+        ].join(", ")}, ${value.getColorName(locale)}`;
+    }, [
+        locale,
+        value,
+        stringFormatter,
+        valueChangedViaInputChangeEvent,
+        valueChangedViaKeyboard,
+        xChannel,
+        yChannel,
+        zChannel
+    ]);
     let colorPickerLabel = stringFormatter.format("colorPicker");
     let xInputLabellingProps = (0, $7KHxM$useLabels)({
         ...props,
@@ -669,6 +694,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             step: xChannelStep,
             "aria-roledescription": ariaRoleDescription,
             "aria-valuetext": getAriaValueTextForChannel(xChannel),
+            "aria-orientation": "horizontal",
             disabled: isDisabled,
             value: state.value.getChannelValue(xChannel),
             name: xName,
@@ -678,9 +704,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         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 || !focusedInput || focusedInput === "x" || valueChangedViaKeyboard ? undefined : "true",
-            onChange: (e)=>{
-                state.setXValue(parseFloat(e.target.value));
-            }
+            onChange: onChange
         },
         yInputProps: {
             ...yInputLabellingProps,
@@ -702,9 +726,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         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 || focusedInput === "y" || valueChangedViaKeyboard ? undefined : "true",
-            onChange: (e)=>{
-                state.setYValue(parseFloat(e.target.value));
-            }
+            onChange: onChange
         }
     };
 }
@@ -741,8 +763,8 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
         trackRef: trackRef,
         inputRef: inputRef
     }, state);
+    let value = state.getDisplayColor();
     let generateBackground = ()=>{
-        let value = state.getDisplayColor();
         let to;
         if (orientation === "vertical") to = "top";
         else if (direction === "ltr") to = "right";
@@ -779,6 +801,8 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
     let forcedColorAdjustNoneStyle = {
         forcedColorAdjust: "none"
     };
+    if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
+    else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
     return {
         trackProps: {
             ...(0, $7KHxM$mergeProps)(groupProps, trackProps),
@@ -1034,7 +1058,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
             min: String(minValue),
             max: String(maxValue),
             step: String(step),
-            "aria-valuetext": state.value.formatChannelValue("hue", locale),
+            "aria-valuetext": `${state.value.formatChannelValue("hue", locale)}, ${state.value.getHueName(locale)}`,
             disabled: isDisabled,
             value: `${state.value.getChannelValue("hue")}`,
             name: name,

package/dist/main.js

@@ -392,6 +392,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
         state.setValue(newColor);
     });
     let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $kZqDi$react.useState)(false);
+    let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = (0, $kZqDi$react.useState)(false);
     let { xChannel: xChannel, yChannel: yChannel, zChannel: zChannel } = state.channels;
     let xChannelStep = state.xChannelStep;
     let yChannelStep = state.yChannelStep;
@@ -476,7 +477,10 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
     let { moveProps: movePropsThumb } = (0, $kZqDi$reactariainteractions.useMove)(moveHandler);
     let { focusWithinProps: focusWithinProps } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
         onFocusWithinChange: (focusWithin)=>{
-            if (!focusWithin) setValueChangedViaKeyboard(false);
+            if (!focusWithin) {
+                setValueChangedViaKeyboard(false);
+                setValueChangedViaInputChangeEvent(false);
+            }
         }
     });
     let currentPointer = (0, $kZqDi$react.useRef)(undefined);
@@ -601,22 +605,43 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             setFocusedInput("y");
         }
     });
+    const onChange = (e)=>{
+        const { target: target } = e;
+        setValueChangedViaInputChangeEvent(true);
+        if (target === inputXRef.current) state.setXValue(parseFloat(target.value));
+        else if (target === inputYRef.current) state.setYValue(parseFloat(target.value));
+    };
     let isMobile = (0, $kZqDi$reactariautils.isIOS)() || (0, $kZqDi$reactariautils.isAndroid)();
-    function getAriaValueTextForChannel(channel) {
-        return valueChangedViaKeyboard ? stringFormatter.format("colorNameAndValue", {
-            name: state.value.getChannelName(channel, locale),
-            value: state.value.formatChannelValue(channel, locale)
+    let value = state.getDisplayColor();
+    const getAriaValueTextForChannel = (0, $kZqDi$react.useCallback)((channel)=>{
+        const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;
+        return `${isAfterInput ? stringFormatter.format("colorNameAndValue", {
+            name: value.getChannelName(channel, locale),
+            value: value.formatChannelValue(channel, locale)
         }) : [
             stringFormatter.format("colorNameAndValue", {
-                name: state.value.getChannelName(channel, locale),
-                value: state.value.formatChannelValue(channel, locale)
+                name: value.getChannelName(channel, locale),
+                value: value.formatChannelValue(channel, locale)
+            }),
+            stringFormatter.format("colorNameAndValue", {
+                name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
+                value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
             }),
             stringFormatter.format("colorNameAndValue", {
-                name: state.value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
-                value: state.value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
+                name: value.getChannelName(zChannel, locale),
+                value: value.formatChannelValue(zChannel, locale)
             })
-        ].join(", ");
-    }
+        ].join(", ")}, ${value.getColorName(locale)}`;
+    }, [
+        locale,
+        value,
+        stringFormatter,
+        valueChangedViaInputChangeEvent,
+        valueChangedViaKeyboard,
+        xChannel,
+        yChannel,
+        zChannel
+    ]);
     let colorPickerLabel = stringFormatter.format("colorPicker");
     let xInputLabellingProps = (0, $kZqDi$reactariautils.useLabels)({
         ...props,
@@ -678,6 +703,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             step: xChannelStep,
             "aria-roledescription": ariaRoleDescription,
             "aria-valuetext": getAriaValueTextForChannel(xChannel),
+            "aria-orientation": "horizontal",
             disabled: isDisabled,
             value: state.value.getChannelValue(xChannel),
             name: xName,
@@ -687,9 +713,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
         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 || !focusedInput || focusedInput === "x" || valueChangedViaKeyboard ? undefined : "true",
-            onChange: (e)=>{
-                state.setXValue(parseFloat(e.target.value));
-            }
+            onChange: onChange
         },
         yInputProps: {
             ...yInputLabellingProps,
@@ -711,9 +735,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
         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 || focusedInput === "y" || valueChangedViaKeyboard ? undefined : "true",
-            onChange: (e)=>{
-                state.setYValue(parseFloat(e.target.value));
-            }
+            onChange: onChange
         }
     };
 }
@@ -750,8 +772,8 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
         trackRef: trackRef,
         inputRef: inputRef
     }, state);
+    let value = state.getDisplayColor();
     let generateBackground = ()=>{
-        let value = state.getDisplayColor();
         let to;
         if (orientation === "vertical") to = "top";
         else if (direction === "ltr") to = "right";
@@ -788,6 +810,8 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
     let forcedColorAdjustNoneStyle = {
         forcedColorAdjust: "none"
     };
+    if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
+    else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
     return {
         trackProps: {
             ...(0, $kZqDi$reactariautils.mergeProps)(groupProps, trackProps),
@@ -1043,7 +1067,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             min: String(minValue),
             max: String(maxValue),
             step: String(step),
-            "aria-valuetext": state.value.formatChannelValue("hue", locale),
+            "aria-valuetext": `${state.value.formatChannelValue("hue", locale)}, ${state.value.getHueName(locale)}`,
             disabled: isDisabled,
             value: `${state.value.getChannelValue("hue")}`,
             name: name,