@react-stately/color 3.0.0-nightly.3134 → 3.0.0-nightly.3156

package/dist/main.js

@@ -1,10 +1,12 @@
 var $4tN2K$reactstatelyutils = require("@react-stately/utils");
 var $4tN2K$internationalizedmessage = require("@internationalized/message");
 var $4tN2K$internationalizednumber = require("@internationalized/number");
-var $4tN2K$reactariautils = require("@react-aria/utils");
 var $4tN2K$react = require("react");
 var $4tN2K$reactstatelyslider = require("@react-stately/slider");
 
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
 function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
     if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
@@ -24,13 +26,8 @@ function $parcel$exportWildcard(dest, source) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-var $83fe1a57d631223b$exports = {};
 
-$parcel$export($83fe1a57d631223b$exports, "parseColor", () => $83fe1a57d631223b$export$6e865ea70d7724f);
-$parcel$export($83fe1a57d631223b$exports, "normalizeColor", () => $83fe1a57d631223b$export$4cde5df63f53f473);
+$parcel$export(module.exports, "parseColor", () => $83fe1a57d631223b$export$6e865ea70d7724f);
 
 var $c0b600cf8eafdee9$exports = {};
 var $b044e7150534af04$exports = {};
@@ -376,7 +373,7 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
                     minValue: 0,
                     maxValue: 255,
                     step: 1,
-                    pageSize: 16
+                    pageSize: 17
                 };
             case 'alpha':
                 return {
@@ -710,7 +707,6 @@ $parcel$export($af2d7ac9990cfee2$exports, "useColorAreaState", () => $af2d7ac999
 
 
 
-
 const $af2d7ac9990cfee2$var$DEFAULT_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('#ffffff');
 const $af2d7ac9990cfee2$var$RGBSet = new Set([
     'red',
@@ -723,8 +719,7 @@ let $af2d7ac9990cfee2$var$difference = (a, b)=>new Set([
     ))
 ;
 function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
-    // TODO: docs say the step props should be one, but should it be two different values?
-    let { value: value1 , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd , xChannelStep: xChannelStep , yChannelStep: yChannelStep  } = props;
+    let { value: value1 , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
     if (!value1 && !defaultValue) defaultValue = $af2d7ac9990cfee2$var$DEFAULT_COLOR;
     let [color, setColor] = $4tN2K$reactstatelyutils.useControlledState(value1 && $83fe1a57d631223b$export$4cde5df63f53f473(value1), defaultValue && $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange);
     let valueRef = $4tN2K$react.useRef(color);
@@ -771,10 +766,6 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
     let yChannelRange = color.getChannelRange(channels.yChannel);
     let { minValue: minValueX1 , maxValue: maxValueX1 , step: stepX , pageSize: pageSizeX  } = xChannelRange;
     let { minValue: minValueY1 , maxValue: maxValueY1 , step: stepY , pageSize: pageSizeY  } = yChannelRange;
-    if (isNaN(xChannelStep)) xChannelStep = stepX;
-    if (isNaN(yChannelStep)) yChannelStep = stepY;
-    let xChannelPageStep = Math.max(pageSizeX, xChannelStep);
-    let yChannelPageStep = Math.max(pageSizeY, yChannelStep);
     let [isDragging1, setDragging] = $4tN2K$react.useState(false);
     let isDraggingRef = $4tN2K$react.useRef(false).current;
     let xValue = color.getChannelValue(channels.xChannel);
@@ -791,10 +782,10 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
     };
     return {
         channels: channels,
-        xChannelStep: xChannelStep,
-        yChannelStep: yChannelStep,
-        xChannelPageStep: xChannelPageStep,
-        yChannelPageStep: yChannelPageStep,
+        xChannelStep: stepX,
+        yChannelStep: stepY,
+        xChannelPageStep: pageSizeX,
+        yChannelPageStep: pageSizeY,
         value: color,
         setValue (value) {
             let c = $83fe1a57d631223b$export$4cde5df63f53f473(value);
@@ -808,17 +799,17 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
         setColorFromPoint (x, y) {
             let { minValue: minValueX , maxValue: maxValueX  } = color.getChannelRange(channels.xChannel);
             let { minValue: minValueY , maxValue: maxValueY  } = color.getChannelRange(channels.yChannel);
-            let newXValue = minValueX + $4tN2K$reactariautils.clamp(x, 0, 1) * (maxValueX - minValueX);
-            let newYValue = minValueY + (1 - $4tN2K$reactariautils.clamp(y, 0, 1)) * (maxValueY - minValueY);
+            let newXValue = minValueX + $4tN2K$reactstatelyutils.clamp(x, 0, 1) * (maxValueX - minValueX);
+            let newYValue = minValueY + (1 - $4tN2K$reactstatelyutils.clamp(y, 0, 1)) * (maxValueY - minValueY);
             let newColor;
             if (newXValue !== xValue) {
                 // Round new value to multiple of step, clamp value between min and max
-                newXValue = $4tN2K$reactariautils.snapValueToStep(newXValue, minValueX, maxValueX, xChannelStep);
+                newXValue = $4tN2K$reactstatelyutils.snapValueToStep(newXValue, minValueX, maxValueX, stepX);
                 newColor = color.withChannelValue(channels.xChannel, newXValue);
             }
             if (newYValue !== yValue) {
                 // Round new value to multiple of step, clamp value between min and max
-                newYValue = $4tN2K$reactariautils.snapValueToStep(newYValue, minValueY, maxValueY, yChannelStep);
+                newYValue = $4tN2K$reactstatelyutils.snapValueToStep(newYValue, minValueY, maxValueY, stepY);
                 newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
             }
             if (newColor) setColor(newColor);
@@ -832,16 +823,16 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
             };
         },
         incrementX (stepSize) {
-            setXValue($4tN2K$reactariautils.snapValueToStep(xValue + stepSize, minValueX1, maxValueX1, stepSize));
+            setXValue(xValue + stepSize > maxValueX1 ? maxValueX1 : $4tN2K$reactstatelyutils.snapValueToStep(xValue + stepSize, minValueX1, maxValueX1, stepX));
         },
         incrementY (stepSize) {
-            setYValue($4tN2K$reactariautils.snapValueToStep(yValue + stepSize, minValueY1, maxValueY1, stepSize));
+            setYValue(yValue + stepSize > maxValueY1 ? maxValueY1 : $4tN2K$reactstatelyutils.snapValueToStep(yValue + stepSize, minValueY1, maxValueY1, stepY));
         },
         decrementX (stepSize) {
-            setXValue($4tN2K$reactariautils.snapValueToStep(xValue - stepSize, minValueX1, maxValueX1, stepSize));
+            setXValue($4tN2K$reactstatelyutils.snapValueToStep(xValue - stepSize, minValueX1, maxValueX1, stepX));
         },
         decrementY (stepSize) {
-            setYValue($4tN2K$reactariautils.snapValueToStep(yValue - stepSize, minValueY1, maxValueY1, stepSize));
+            setYValue($4tN2K$reactstatelyutils.snapValueToStep(yValue - stepSize, minValueY1, maxValueY1, stepY));
         },
         setDragging (isDragging) {
             let wasDragging = isDraggingRef;
@@ -879,10 +870,11 @@ function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
             setColor(color.withChannelValue(channel, v));
         },
         onChangeEnd ([v]) {
-            // onChange will have already been called with the right value, this is just to trigger onChangEnd
+            // onChange will have already been called with the right value, this is just to trigger onChangeEnd
             if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
         }
     });
+    let { step: step , pageSize: pageSize  } = color.getChannelRange(channel);
     return {
         ...sliderState,
         value: color,
@@ -908,7 +900,9 @@ function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
         },
         getThumbValueLabel () {
             return color.formatChannelValue(channel, locale);
-        }
+        },
+        step: step,
+        pageSize: pageSize
     };
 }
 
@@ -951,13 +945,14 @@ function $9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius) {
     let deg = $9d7d8736d45f74b8$var$radToDeg(Math.atan2(y / radius, x / radius));
     return (deg + 360) % 360;
 }
-const $9d7d8736d45f74b8$var$PAGE_MIN_STEP_SIZE = 6;
 function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
-    let { defaultValue: defaultValue , onChange: onChange , onChangeEnd: onChangeEnd , step: step = 1  } = props;
+    let { defaultValue: defaultValue , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
     if (!props.value && !defaultValue) defaultValue = $9d7d8736d45f74b8$var$DEFAULT_COLOR;
     let [value, setValue] = $4tN2K$reactstatelyutils.useControlledState($83fe1a57d631223b$export$4cde5df63f53f473(props.value), $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange);
     let valueRef = $4tN2K$react.useRef(value);
     valueRef.current = value;
+    let channelRange = value.getChannelRange('hue');
+    let { minValue: minValueX , maxValue: maxValueX , step: step , pageSize: pageStep  } = channelRange;
     let [isDragging1, setDragging] = $4tN2K$react.useState(false);
     let isDraggingRef = $4tN2K$react.useRef(false).current;
     let hue = value.getChannelValue('hue');
@@ -971,7 +966,6 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
             setValue(color);
         }
     }
-    let pageStep = $9d7d8736d45f74b8$var$PAGE_MIN_STEP_SIZE;
     return {
         value: value,
         step: step,
@@ -989,18 +983,19 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
         getThumbPosition (radius) {
             return $9d7d8736d45f74b8$var$angleToCartesian(value.getChannelValue('hue'), radius);
         },
-        increment (stepSize) {
-            let newValue = hue + Math.max(stepSize, step);
-            if (newValue > 360) // Make sure you can always get back to 0.
-            newValue = 0;
-            setHue(newValue);
+        increment (stepSize = 1) {
+            let s = Math.max(stepSize, step);
+            let newValue = hue + s;
+            if (newValue >= maxValueX) // Make sure you can always get back to 0.
+            newValue = minValueX;
+            setHue($9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(newValue, 360), s));
         },
-        decrement (stepSize) {
+        decrement (stepSize = 1) {
             let s = Math.max(stepSize, step);
             if (hue === 0) // We can't just subtract step because this might be the case:
             // |(previous step) - 0| < step size
             setHue($9d7d8736d45f74b8$var$roundDown(360 / s) * s);
-            else setHue(hue - s);
+            else setHue($9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(hue - s, 360), s));
         },
         setDragging (isDragging) {
             let wasDragging = isDraggingRef;
@@ -1043,7 +1038,8 @@ const $d59d0c2b2ce1568f$var$MAX_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f
 const $d59d0c2b2ce1568f$var$MIN_COLOR_INT = $d59d0c2b2ce1568f$var$MIN_COLOR.toHexInt();
 const $d59d0c2b2ce1568f$var$MAX_COLOR_INT = $d59d0c2b2ce1568f$var$MAX_COLOR.toHexInt();
 function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
-    let { step: step = 1 , value: value1 , defaultValue: defaultValue , onChange: onChange  } = props;
+    let { value: value1 , defaultValue: defaultValue , onChange: onChange  } = props;
+    let { step: step  } = $d59d0c2b2ce1568f$var$MIN_COLOR.getChannelRange('red');
     let initialValue = $f8b3be23ba4462b1$export$5aadd9c0606af5c2(value1);
     let initialDefaultValue = $f8b3be23ba4462b1$export$5aadd9c0606af5c2(defaultValue);
     let [colorValue, setColorValue] = $4tN2K$reactstatelyutils.useControlledState(initialValue, initialDefaultValue, onChange);
@@ -1059,12 +1055,11 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
             return;
         }
     };
-    $4tN2K$react.useEffect(()=>{
+    let prevValue = $4tN2K$react.useRef(colorValue);
+    if (prevValue.current !== colorValue) {
         setInputValue(colorValue ? colorValue.toString('hex') : '');
-    }, [
-        colorValue,
-        setInputValue
-    ]);
+        prevValue.current = colorValue;
+    }
     let parsedValue = $4tN2K$react.useMemo(()=>{
         let color;
         try {
@@ -1147,7 +1142,6 @@ function $d59d0c2b2ce1568f$var$addColorValue(color, step) {
 }
 
 
-$parcel$exportWildcard(module.exports, $83fe1a57d631223b$exports);
 $parcel$exportWildcard(module.exports, $af2d7ac9990cfee2$exports);
 $parcel$exportWildcard(module.exports, $5386a492cfd3234c$exports);
 $parcel$exportWildcard(module.exports, $9d7d8736d45f74b8$exports);