@react-stately/color 3.3.3-nightly.3940 → 3.3.3-nightly.3960

package/dist/import.mjs

@@ -1050,13 +1050,17 @@ const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea
 function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
     let { value: value , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
     if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
-    let [color, setColor] = (0, $cBgAy$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [color, setColorState] = (0, $cBgAy$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
     let valueRef = (0, $cBgAy$useRef)(color);
-    valueRef.current = color;
-    let channels = (0, $cBgAy$useMemo)(()=>valueRef.current.getColorSpaceAxes({
+    let setColor = (color)=>{
+        valueRef.current = color;
+        setColorState(color);
+    };
+    let channels = (0, $cBgAy$useMemo)(()=>color.getColorSpaceAxes({
             xChannel: xChannel,
             yChannel: yChannel
         }), [
+        color,
         xChannel,
         yChannel
     ]);
@@ -1065,18 +1069,18 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
     let { minValue: minValueX , maxValue: maxValueX , step: stepX , pageSize: pageSizeX  } = xChannelRange;
     let { minValue: minValueY , maxValue: maxValueY , step: stepY , pageSize: pageSizeY  } = yChannelRange;
     let [isDragging, setDragging] = (0, $cBgAy$useState)(false);
-    let isDraggingRef = (0, $cBgAy$useRef)(false).current;
+    let isDraggingRef = (0, $cBgAy$useRef)(false);
     let xValue = color.getChannelValue(channels.xChannel);
     let yValue = color.getChannelValue(channels.yChannel);
     let setXValue = (v)=>{
         if (v === xValue) return;
-        valueRef.current = color.withChannelValue(channels.xChannel, v);
-        setColor(valueRef.current);
+        let newColor = color.withChannelValue(channels.xChannel, v);
+        setColor(newColor);
     };
     let setYValue = (v)=>{
         if (v === yValue) return;
-        valueRef.current = color.withChannelValue(channels.yChannel, v);
-        setColor(valueRef.current);
+        let newColor = color.withChannelValue(channels.yChannel, v);
+        setColor(newColor);
     };
     return {
         channels: channels,
@@ -1086,9 +1090,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
         yChannelPageStep: pageSizeY,
         value: color,
         setValue (value) {
-            let c = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
-            valueRef.current = c;
-            setColor(c);
+            setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
         },
         xValue: xValue,
         setXValue: setXValue,
@@ -1131,8 +1133,8 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
             setYValue((0, $cBgAy$snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
         },
         setDragging (isDragging) {
-            let wasDragging = isDraggingRef;
-            isDraggingRef = isDragging;
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
             if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
             setDragging(isDragging);
         },
@@ -1256,13 +1258,16 @@ function $ee4262c74a467b07$var$cartesianToAngle(x, y, radius) {
 function $ee4262c74a467b07$export$f4301076d9336137(props) {
     let { defaultValue: defaultValue , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
     if (!props.value && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR;
-    let [value, setValue] = (0, $cBgAy$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [value, setValueState] = (0, $cBgAy$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
     let valueRef = (0, $cBgAy$useRef)(value);
-    valueRef.current = value;
+    let setValue = (value)=>{
+        valueRef.current = value;
+        setValueState(value);
+    };
     let channelRange = value.getChannelRange("hue");
     let { minValue: minValueX , maxValue: maxValueX , step: step , pageSize: pageStep  } = channelRange;
     let [isDragging, setDragging] = (0, $cBgAy$useState)(false);
-    let isDraggingRef = (0, $cBgAy$useRef)(false).current;
+    let isDraggingRef = (0, $cBgAy$useRef)(false);
     let hue = value.getChannelValue("hue");
     function setHue(v) {
         if (v > 360) // Make sure you can always get back to 0.
@@ -1270,7 +1275,6 @@ function $ee4262c74a467b07$export$f4301076d9336137(props) {
         v = $ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(v, 360), step);
         if (hue !== v) {
             let color = value.withChannelValue("hue", v);
-            valueRef.current = color;
             setValue(color);
         }
     }
@@ -1280,7 +1284,6 @@ function $ee4262c74a467b07$export$f4301076d9336137(props) {
         pageStep: pageStep,
         setValue (v) {
             let color = (0, $799cddbef784668f$export$4cde5df63f53f473)(v);
-            valueRef.current = color;
             setValue(color);
         },
         hue: hue,
@@ -1306,8 +1309,8 @@ function $ee4262c74a467b07$export$f4301076d9336137(props) {
             else setHue($ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(hue - s, 360), s));
         },
         setDragging (isDragging) {
-            let wasDragging = isDraggingRef;
-            isDraggingRef = isDragging;
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
             if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
             setDragging(isDragging);
         },
@@ -1379,10 +1382,10 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
             return;
         }
     };
-    let prevValue = (0, $cBgAy$useRef)(colorValue);
-    if (prevValue.current !== colorValue) {
+    let [prevValue, setPrevValue] = (0, $cBgAy$useState)(colorValue);
+    if (prevValue !== colorValue) {
         setInputValue(colorValue ? colorValue.toString("hex") : "");
-        prevValue.current = colorValue;
+        setPrevValue(colorValue);
     }
     let parsedValue = (0, $cBgAy$useMemo)(()=>{
         let color;
@@ -1395,8 +1398,6 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
     }, [
         inputValue
     ]);
-    let parsed = (0, $cBgAy$useRef)(null);
-    parsed.current = parsedValue;
     let commit = ()=>{
         // Set to empty state if input value is empty
         if (!inputValue.length) {
@@ -1405,18 +1406,18 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
             return;
         }
         // if it failed to parse, then reset input to formatted version of current number
-        if (parsed.current == null) {
+        if (parsedValue == null) {
             setInputValue(colorValue ? colorValue.toString("hex") : "");
             return;
         }
-        safelySetColorValue(parsed.current);
+        safelySetColorValue(parsedValue);
         // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
         let newColorValue = "";
         if (colorValue) newColorValue = colorValue.toString("hex");
         setInputValue(newColorValue);
     };
     let increment = ()=>{
-        let newValue = $b335ada08155d9c0$var$addColorValue(parsed.current, step);
+        let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, step);
         // if we've arrived at the same value that was previously in the state, the
         // input value should be updated to match
         // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
@@ -1425,7 +1426,7 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
         safelySetColorValue(newValue);
     };
     let decrement = ()=>{
-        let newValue = $b335ada08155d9c0$var$addColorValue(parsed.current, -step);
+        let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, -step);
         // if we've arrived at the same value that was previously in the state, the
         // input value should be updated to match
         // ex type 4, press increment, highlight the number in the input, type 4 again, press increment

package/dist/main.js

@@ -1059,13 +1059,17 @@ const $af2d7ac9990cfee2$var$DEFAULT_COLOR = (0, $83fe1a57d631223b$export$6e865ea
 function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
     let { value: value , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
     if (!value && !defaultValue) defaultValue = $af2d7ac9990cfee2$var$DEFAULT_COLOR;
-    let [color, setColor] = (0, $4tN2K$reactstatelyutils.useControlledState)(value && (0, $83fe1a57d631223b$export$4cde5df63f53f473)(value), defaultValue && (0, $83fe1a57d631223b$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [color, setColorState] = (0, $4tN2K$reactstatelyutils.useControlledState)(value && (0, $83fe1a57d631223b$export$4cde5df63f53f473)(value), defaultValue && (0, $83fe1a57d631223b$export$4cde5df63f53f473)(defaultValue), onChange);
     let valueRef = (0, $4tN2K$react.useRef)(color);
-    valueRef.current = color;
-    let channels = (0, $4tN2K$react.useMemo)(()=>valueRef.current.getColorSpaceAxes({
+    let setColor = (color)=>{
+        valueRef.current = color;
+        setColorState(color);
+    };
+    let channels = (0, $4tN2K$react.useMemo)(()=>color.getColorSpaceAxes({
             xChannel: xChannel,
             yChannel: yChannel
         }), [
+        color,
         xChannel,
         yChannel
     ]);
@@ -1074,18 +1078,18 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
     let { minValue: minValueX , maxValue: maxValueX , step: stepX , pageSize: pageSizeX  } = xChannelRange;
     let { minValue: minValueY , maxValue: maxValueY , step: stepY , pageSize: pageSizeY  } = yChannelRange;
     let [isDragging, setDragging] = (0, $4tN2K$react.useState)(false);
-    let isDraggingRef = (0, $4tN2K$react.useRef)(false).current;
+    let isDraggingRef = (0, $4tN2K$react.useRef)(false);
     let xValue = color.getChannelValue(channels.xChannel);
     let yValue = color.getChannelValue(channels.yChannel);
     let setXValue = (v)=>{
         if (v === xValue) return;
-        valueRef.current = color.withChannelValue(channels.xChannel, v);
-        setColor(valueRef.current);
+        let newColor = color.withChannelValue(channels.xChannel, v);
+        setColor(newColor);
     };
     let setYValue = (v)=>{
         if (v === yValue) return;
-        valueRef.current = color.withChannelValue(channels.yChannel, v);
-        setColor(valueRef.current);
+        let newColor = color.withChannelValue(channels.yChannel, v);
+        setColor(newColor);
     };
     return {
         channels: channels,
@@ -1095,9 +1099,7 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
         yChannelPageStep: pageSizeY,
         value: color,
         setValue (value) {
-            let c = (0, $83fe1a57d631223b$export$4cde5df63f53f473)(value);
-            valueRef.current = c;
-            setColor(c);
+            setColor((0, $83fe1a57d631223b$export$4cde5df63f53f473)(value));
         },
         xValue: xValue,
         setXValue: setXValue,
@@ -1140,8 +1142,8 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
             setYValue((0, $4tN2K$reactstatelyutils.snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
         },
         setDragging (isDragging) {
-            let wasDragging = isDraggingRef;
-            isDraggingRef = isDragging;
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
             if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
             setDragging(isDragging);
         },
@@ -1265,13 +1267,16 @@ function $9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius) {
 function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
     let { defaultValue: defaultValue , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
     if (!props.value && !defaultValue) defaultValue = $9d7d8736d45f74b8$var$DEFAULT_COLOR;
-    let [value, setValue] = (0, $4tN2K$reactstatelyutils.useControlledState)((0, $83fe1a57d631223b$export$4cde5df63f53f473)(props.value), (0, $83fe1a57d631223b$export$4cde5df63f53f473)(defaultValue), onChange);
+    let [value, setValueState] = (0, $4tN2K$reactstatelyutils.useControlledState)((0, $83fe1a57d631223b$export$4cde5df63f53f473)(props.value), (0, $83fe1a57d631223b$export$4cde5df63f53f473)(defaultValue), onChange);
     let valueRef = (0, $4tN2K$react.useRef)(value);
-    valueRef.current = value;
+    let setValue = (value)=>{
+        valueRef.current = value;
+        setValueState(value);
+    };
     let channelRange = value.getChannelRange("hue");
     let { minValue: minValueX , maxValue: maxValueX , step: step , pageSize: pageStep  } = channelRange;
     let [isDragging, setDragging] = (0, $4tN2K$react.useState)(false);
-    let isDraggingRef = (0, $4tN2K$react.useRef)(false).current;
+    let isDraggingRef = (0, $4tN2K$react.useRef)(false);
     let hue = value.getChannelValue("hue");
     function setHue(v) {
         if (v > 360) // Make sure you can always get back to 0.
@@ -1279,7 +1284,6 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
         v = $9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(v, 360), step);
         if (hue !== v) {
             let color = value.withChannelValue("hue", v);
-            valueRef.current = color;
             setValue(color);
         }
     }
@@ -1289,7 +1293,6 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
         pageStep: pageStep,
         setValue (v) {
             let color = (0, $83fe1a57d631223b$export$4cde5df63f53f473)(v);
-            valueRef.current = color;
             setValue(color);
         },
         hue: hue,
@@ -1315,8 +1318,8 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
             else setHue($9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(hue - s, 360), s));
         },
         setDragging (isDragging) {
-            let wasDragging = isDraggingRef;
-            isDraggingRef = isDragging;
+            let wasDragging = isDraggingRef.current;
+            isDraggingRef.current = isDragging;
             if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
             setDragging(isDragging);
         },
@@ -1388,10 +1391,10 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
             return;
         }
     };
-    let prevValue = (0, $4tN2K$react.useRef)(colorValue);
-    if (prevValue.current !== colorValue) {
+    let [prevValue, setPrevValue] = (0, $4tN2K$react.useState)(colorValue);
+    if (prevValue !== colorValue) {
         setInputValue(colorValue ? colorValue.toString("hex") : "");
-        prevValue.current = colorValue;
+        setPrevValue(colorValue);
     }
     let parsedValue = (0, $4tN2K$react.useMemo)(()=>{
         let color;
@@ -1404,8 +1407,6 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
     }, [
         inputValue
     ]);
-    let parsed = (0, $4tN2K$react.useRef)(null);
-    parsed.current = parsedValue;
     let commit = ()=>{
         // Set to empty state if input value is empty
         if (!inputValue.length) {
@@ -1414,18 +1415,18 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
             return;
         }
         // if it failed to parse, then reset input to formatted version of current number
-        if (parsed.current == null) {
+        if (parsedValue == null) {
             setInputValue(colorValue ? colorValue.toString("hex") : "");
             return;
         }
-        safelySetColorValue(parsed.current);
+        safelySetColorValue(parsedValue);
         // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
         let newColorValue = "";
         if (colorValue) newColorValue = colorValue.toString("hex");
         setInputValue(newColorValue);
     };
     let increment = ()=>{
-        let newValue = $d59d0c2b2ce1568f$var$addColorValue(parsed.current, step);
+        let newValue = $d59d0c2b2ce1568f$var$addColorValue(parsedValue, step);
         // if we've arrived at the same value that was previously in the state, the
         // input value should be updated to match
         // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
@@ -1434,7 +1435,7 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
         safelySetColorValue(newValue);
     };
     let decrement = ()=>{
-        let newValue = $d59d0c2b2ce1568f$var$addColorValue(parsed.current, -step);
+        let newValue = $d59d0c2b2ce1568f$var$addColorValue(parsedValue, -step);
         // if we've arrived at the same value that was previously in the state, the
         // input value should be updated to match
         // ex type 4, press increment, highlight the number in the input, type 4 again, press increment