@react-stately/color 3.0.0-nightly.3120 → 3.0.0-nightly.3124

package/dist/main.js

@@ -1,8 +1,9 @@
 var $4tN2K$reactstatelyutils = require("@react-stately/utils");
 var $4tN2K$internationalizedmessage = require("@internationalized/message");
 var $4tN2K$internationalizednumber = require("@internationalized/number");
-var $4tN2K$reactstatelyslider = require("@react-stately/slider");
+var $4tN2K$reactariautils = require("@react-aria/utils");
 var $4tN2K$react = require("react");
+var $4tN2K$reactstatelyslider = require("@react-stately/slider");
 
 function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
@@ -29,6 +30,7 @@ function $parcel$export(e, n, v, s) {
 var $83fe1a57d631223b$exports = {};
 
 $parcel$export($83fe1a57d631223b$exports, "parseColor", () => $83fe1a57d631223b$export$6e865ea70d7724f);
+$parcel$export($83fe1a57d631223b$exports, "normalizeColor", () => $83fe1a57d631223b$export$4cde5df63f53f473);
 
 var $c0b600cf8eafdee9$exports = {};
 var $b044e7150534af04$exports = {};
@@ -213,6 +215,10 @@ function $83fe1a57d631223b$export$6e865ea70d7724f(value) {
     if (res) return res;
     throw new Error('Invalid color value: ' + value);
 }
+function $83fe1a57d631223b$export$4cde5df63f53f473(v) {
+    if (typeof v === 'string') return $83fe1a57d631223b$export$6e865ea70d7724f(v);
+    else return v;
+}
 class $83fe1a57d631223b$var$Color {
     toHexInt() {
         return this.toFormat('rgb').toHexInt();
@@ -369,13 +375,15 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
                 return {
                     minValue: 0,
                     maxValue: 255,
-                    step: 1
+                    step: 1,
+                    pageSize: 16
                 };
             case 'alpha':
                 return {
                     minValue: 0,
                     maxValue: 1,
-                    step: 0.01
+                    step: 0.01,
+                    pageSize: 0.1
                 };
             default:
                 throw new Error('Unknown color channel: ' + channel);
@@ -491,20 +499,23 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
                 return {
                     minValue: 0,
                     maxValue: 360,
-                    step: 1
+                    step: 1,
+                    pageSize: 15
                 };
             case 'saturation':
             case 'brightness':
                 return {
                     minValue: 0,
                     maxValue: 100,
-                    step: 1
+                    step: 1,
+                    pageSize: 10
                 };
             case 'alpha':
                 return {
                     minValue: 0,
                     maxValue: 1,
-                    step: 0.01
+                    step: 0.01,
+                    pageSize: 0.1
                 };
             default:
                 throw new Error('Unknown color channel: ' + channel);
@@ -630,20 +641,23 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
                 return {
                     minValue: 0,
                     maxValue: 360,
-                    step: 1
+                    step: 1,
+                    pageSize: 15
                 };
             case 'saturation':
             case 'lightness':
                 return {
                     minValue: 0,
                     maxValue: 100,
-                    step: 1
+                    step: 1,
+                    pageSize: 10
                 };
             case 'alpha':
                 return {
                     minValue: 0,
                     maxValue: 1,
-                    step: 0.01
+                    step: 0.01,
+                    pageSize: 0.1
                 };
             default:
                 throw new Error('Unknown color channel: ' + channel);
@@ -690,20 +704,169 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
 }
 
 
+var $af2d7ac9990cfee2$exports = {};
+
+$parcel$export($af2d7ac9990cfee2$exports, "useColorAreaState", () => $af2d7ac9990cfee2$export$6df7f0e2cabc7eef);
+
+
+
+
+const $af2d7ac9990cfee2$var$DEFAULT_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('#ffffff');
+const $af2d7ac9990cfee2$var$RGBSet = new Set([
+    'red',
+    'green',
+    'blue'
+]);
+let $af2d7ac9990cfee2$var$difference = (a, b)=>new Set([
+        ...a
+    ].filter((x)=>!b.has(x)
+    ))
+;
+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;
+    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);
+    valueRef.current = color;
+    let channels = $4tN2K$react.useMemo(()=>{
+        if (!xChannel) switch(yChannel){
+            case 'red':
+            case 'green':
+                xChannel = 'blue';
+                break;
+            case 'blue':
+                xChannel = 'red';
+                break;
+            default:
+                xChannel = 'blue';
+                yChannel = 'green';
+        }
+        else if (!yChannel) switch(xChannel){
+            case 'red':
+                yChannel = 'green';
+                break;
+            case 'blue':
+                yChannel = 'red';
+                break;
+            default:
+                xChannel = 'blue';
+                yChannel = 'green';
+        }
+        let xyChannels = new Set([
+            xChannel,
+            yChannel
+        ]);
+        let zChannel = $af2d7ac9990cfee2$var$difference($af2d7ac9990cfee2$var$RGBSet, xyChannels).values().next().value;
+        return {
+            xChannel: xChannel,
+            yChannel: yChannel,
+            zChannel: zChannel
+        };
+    }, [
+        xChannel,
+        yChannel
+    ]);
+    let xChannelRange = color.getChannelRange(channels.xChannel);
+    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);
+    let yValue = color.getChannelValue(channels.yChannel);
+    let setXValue = (v)=>{
+        if (v === xValue) return;
+        valueRef.current = color.withChannelValue(channels.xChannel, v);
+        setColor(valueRef.current);
+    };
+    let setYValue = (v)=>{
+        if (v === yValue) return;
+        valueRef.current = color.withChannelValue(channels.yChannel, v);
+        setColor(valueRef.current);
+    };
+    return {
+        channels: channels,
+        xChannelStep: xChannelStep,
+        yChannelStep: yChannelStep,
+        xChannelPageStep: xChannelPageStep,
+        yChannelPageStep: yChannelPageStep,
+        value: color,
+        setValue (value) {
+            let c = $83fe1a57d631223b$export$4cde5df63f53f473(value);
+            valueRef.current = c;
+            setColor(c);
+        },
+        xValue: xValue,
+        setXValue: setXValue,
+        yValue: yValue,
+        setYValue: setYValue,
+        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 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);
+                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);
+                newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+            }
+            if (newColor) setColor(newColor);
+        },
+        getThumbPosition () {
+            let x = (xValue - minValueX1) / (maxValueX1 - minValueX1);
+            let y = 1 - (yValue - minValueY1) / (maxValueY1 - minValueY1);
+            return {
+                x: x,
+                y: y
+            };
+        },
+        incrementX (stepSize) {
+            setXValue($4tN2K$reactariautils.snapValueToStep(xValue + stepSize, minValueX1, maxValueX1, stepSize));
+        },
+        incrementY (stepSize) {
+            setYValue($4tN2K$reactariautils.snapValueToStep(yValue + stepSize, minValueY1, maxValueY1, stepSize));
+        },
+        decrementX (stepSize) {
+            setXValue($4tN2K$reactariautils.snapValueToStep(xValue - stepSize, minValueX1, maxValueX1, stepSize));
+        },
+        decrementY (stepSize) {
+            setYValue($4tN2K$reactariautils.snapValueToStep(yValue - stepSize, minValueY1, maxValueY1, stepSize));
+        },
+        setDragging (isDragging) {
+            let wasDragging = isDraggingRef;
+            isDraggingRef = isDragging;
+            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+            setDragging(isDragging);
+        },
+        isDragging: isDragging1,
+        getDisplayColor () {
+            return color.withChannelValue('alpha', 1);
+        }
+    };
+}
+
+
 var $5386a492cfd3234c$exports = {};
 
 $parcel$export($5386a492cfd3234c$exports, "useColorSliderState", () => $5386a492cfd3234c$export$57bc203e1c9c6d44);
 
 
 
-function $5386a492cfd3234c$var$normalizeColor(v) {
-    if (typeof v === 'string') return $83fe1a57d631223b$export$6e865ea70d7724f(v);
-    else return v;
-}
 function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
     let { channel: channel , value: value1 , defaultValue: defaultValue , onChange: onChange , locale: locale , ...otherProps } = props;
     if (value1 == null && defaultValue == null) throw new Error('useColorSliderState requires a value or defaultValue');
-    let [color, setColor] = $4tN2K$reactstatelyutils.useControlledState(value1 && $5386a492cfd3234c$var$normalizeColor(value1), defaultValue && $5386a492cfd3234c$var$normalizeColor(defaultValue), onChange);
+    let [color, setColor] = $4tN2K$reactstatelyutils.useControlledState(value1 && $83fe1a57d631223b$export$4cde5df63f53f473(value1), defaultValue && $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange);
     let sliderState = $4tN2K$reactstatelyslider.useSliderState({
         ...color.getChannelRange(channel),
         ...otherProps,
@@ -724,7 +887,7 @@ function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
         ...sliderState,
         value: color,
         setValue (value) {
-            setColor($5386a492cfd3234c$var$normalizeColor(value));
+            setColor($83fe1a57d631223b$export$4cde5df63f53f473(value));
         },
         getDisplayColor () {
             switch(channel){
@@ -756,10 +919,6 @@ $parcel$export($9d7d8736d45f74b8$exports, "useColorWheelState", () => $9d7d8736d
 
 
 
-function $9d7d8736d45f74b8$var$normalizeColor(v) {
-    if (typeof v === 'string') return $83fe1a57d631223b$export$6e865ea70d7724f(v);
-    else return v;
-}
 const $9d7d8736d45f74b8$var$DEFAULT_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('hsl(0, 100%, 50%)');
 function $9d7d8736d45f74b8$var$roundToStep(value, step) {
     return Math.round(value / step) * step;
@@ -792,10 +951,11 @@ 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;
     if (!props.value && !defaultValue) defaultValue = $9d7d8736d45f74b8$var$DEFAULT_COLOR;
-    let [value, setValue] = $4tN2K$reactstatelyutils.useControlledState($9d7d8736d45f74b8$var$normalizeColor(props.value), $9d7d8736d45f74b8$var$normalizeColor(defaultValue), onChange);
+    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 [isDragging1, setDragging] = $4tN2K$react.useState(false);
@@ -811,10 +971,13 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
             setValue(color);
         }
     }
+    let pageStep = $9d7d8736d45f74b8$var$PAGE_MIN_STEP_SIZE;
     return {
         value: value,
+        step: step,
+        pageStep: pageStep,
         setValue (v) {
-            let color = $9d7d8736d45f74b8$var$normalizeColor(v);
+            let color = $83fe1a57d631223b$export$4cde5df63f53f473(v);
             valueRef.current = color;
             setValue(color);
         },
@@ -826,14 +989,14 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
         getThumbPosition (radius) {
             return $9d7d8736d45f74b8$var$angleToCartesian(value.getChannelValue('hue'), radius);
         },
-        increment (minStepSize = 0) {
-            let newValue = hue + Math.max(minStepSize, step);
+        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);
         },
-        decrement (minStepSize = 0) {
-            let s = Math.max(minStepSize, step);
+        decrement (stepSize) {
+            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);
@@ -985,6 +1148,7 @@ 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);
 $parcel$exportWildcard(module.exports, $d59d0c2b2ce1568f$exports);