@react-stately/color 3.0.0-beta.4 → 3.0.0-beta.5

package/dist/main.js

@@ -5,10 +5,6 @@ var {
   useEffect
 } = require("react");
 
-var {
-  useControlledState
-} = require("@react-stately/utils");
-
 var {
   useSliderState
 } = require("@react-stately/slider");
@@ -26,8 +22,10 @@ var {
 } = require("@internationalized/message");
 
 var {
-  clamp
-} = require("@react-aria/utils");
+  clamp,
+  toFixedNumber,
+  useControlledState
+} = require("@react-stately/utils");
 
 var _babelRuntimeHelpersInteropRequireDefault = $parcel$interopDefault(require("@babel/runtime/helpers/interopRequireDefault"));
 
@@ -287,6 +285,14 @@ class $b54655da051f787a04029ec3711$var$RGBColor extends $b54655da051f787a04029ec
       case 'rgba':
         return this;
 
+      case 'hsb':
+      case 'hsba':
+        return this.toHSB();
+
+      case 'hsl':
+      case 'hsla':
+        return this.toHSL();
+
       default:
         throw new Error('Unsupported color conversion: rgb -> ' + format);
     }
@@ -295,6 +301,85 @@ class $b54655da051f787a04029ec3711$var$RGBColor extends $b54655da051f787a04029ec
   toHexInt() {
     return this.red << 16 | this.green << 8 | this.blue;
   }
+  /**
+   * Converts an RGB color value to HSB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+   * @returns An HSBColor object.
+   */
+
+
+  toHSB() {
+    const red = this.red / 255;
+    const green = this.green / 255;
+    const blue = this.blue / 255;
+    const min = Math.min(red, green, blue);
+    const brightness = Math.max(red, green, blue);
+    const chroma = brightness - min;
+    const saturation = brightness === 0 ? 0 : chroma / brightness;
+    let hue = 0; // achromatic
+
+    if (chroma !== 0) {
+      switch (brightness) {
+        case red:
+          hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+          break;
+
+        case green:
+          hue = (blue - red) / chroma + 2;
+          break;
+
+        case blue:
+          hue = (red - green) / chroma + 4;
+          break;
+      }
+
+      hue /= 6;
+    }
+
+    return new $b54655da051f787a04029ec3711$var$HSBColor(toFixedNumber(hue * 360, 2), toFixedNumber(saturation * 100, 2), toFixedNumber(brightness * 100, 2), this.alpha);
+  }
+  /**
+   * Converts an RGB color value to HSL.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+   * @returns An HSLColor object.
+   */
+
+
+  toHSL() {
+    const red = this.red / 255;
+    const green = this.green / 255;
+    const blue = this.blue / 255;
+    const min = Math.min(red, green, blue);
+    const max = Math.max(red, green, blue);
+    const lightness = (max + min) / 2;
+    const chroma = max - min;
+    let hue;
+    let saturation;
+
+    if (chroma === 0) {
+      hue = saturation = 0; // achromatic
+    } else {
+      saturation = chroma / (lightness < .5 ? max + min : 2 - max - min);
+
+      switch (max) {
+        case red:
+          hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+          break;
+
+        case green:
+          hue = (blue - red) / chroma + 2;
+          break;
+
+        case blue:
+          hue = (red - green) / chroma + 4;
+          break;
+      }
+
+      hue /= 6;
+    }
+
+    return new $b54655da051f787a04029ec3711$var$HSLColor(toFixedNumber(hue * 360, 2), toFixedNumber(saturation * 100, 2), toFixedNumber(lightness * 100, 2), this.alpha);
+  }
 
   clone() {
     return new $b54655da051f787a04029ec3711$var$RGBColor(this.red, this.green, this.blue, this.alpha);
@@ -349,6 +434,10 @@ class $b54655da051f787a04029ec3711$var$RGBColor extends $b54655da051f787a04029ec
     return new NumberFormatter(locale, options).format(value);
   }
 
+  getColorSpace() {
+    return 'rgb';
+  }
+
 } // X = <negative/positive number with/without decimal places>
 // before/after a comma, 0 or more whitespaces are allowed
 // - hsb(X, X%, X%)
@@ -382,11 +471,17 @@ class $b54655da051f787a04029ec3711$var$HSBColor extends $b54655da051f787a04029ec
       case 'css':
         return this.toHSL().toString('css');
 
+      case 'hex':
+        return this.toRGB().toString('hex');
+
+      case 'hexa':
+        return this.toRGB().toString('hexa');
+
       case 'hsb':
-        return "hsb(" + this.hue + ", " + this.saturation + "%, " + this.brightness + "%)";
+        return "hsb(" + this.hue + ", " + toFixedNumber(this.saturation, 2) + "%, " + toFixedNumber(this.brightness, 2) + "%)";
 
       case 'hsba':
-        return "hsba(" + this.hue + ", " + this.saturation + "%, " + this.brightness + "%, " + this.alpha + ")";
+        return "hsba(" + this.hue + ", " + toFixedNumber(this.saturation, 2) + "%, " + toFixedNumber(this.brightness, 2) + "%, " + this.alpha + ")";
 
       default:
         return this.toFormat(format).toString(format);
@@ -403,24 +498,49 @@ class $b54655da051f787a04029ec3711$var$HSBColor extends $b54655da051f787a04029ec
       case 'hsla':
         return this.toHSL();
 
+      case 'rgb':
+      case 'rgba':
+        return this.toRGB();
+
       default:
         throw new Error('Unsupported color conversion: hsb -> ' + format);
     }
   }
+  /**
+   * Converts a HSB color to HSL.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL.
+   * @returns An HSLColor object.
+   */
+
 
   toHSL() {
-    // determine the lightness in the range [0,100]
-    var l = (2 - this.saturation / 100) * this.brightness / 2; // store the HSL components
+    let saturation = this.saturation / 100;
+    let brightness = this.brightness / 100;
+    let lightness = brightness * (1 - saturation / 2);
+    saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness);
+    return new $b54655da051f787a04029ec3711$var$HSLColor(toFixedNumber(this.hue, 2), toFixedNumber(saturation * 100, 2), toFixedNumber(lightness * 100, 2), this.alpha);
+  }
+  /**
+   * Converts a HSV color value to RGB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative.
+   * @returns An RGBColor object.
+   */
 
+
+  toRGB() {
     let hue = this.hue;
-    let saturation = this.saturation * this.brightness / (l < 50 ? l * 2 : 200 - l * 2);
-    let lightness = l; // correct a division-by-zero error
+    let saturation = this.saturation / 100;
+    let brightness = this.brightness / 100;
 
-    if (isNaN(saturation)) {
-      saturation = 0;
-    }
+    let fn = function fn(n, k) {
+      if (k === void 0) {
+        k = (n + hue / 60) % 6;
+      }
 
-    return new $b54655da051f787a04029ec3711$var$HSLColor(hue, saturation, lightness, this.alpha);
+      return brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
+    };
+
+    return new $b54655da051f787a04029ec3711$var$RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha);
   }
 
   clone() {
@@ -490,6 +610,10 @@ class $b54655da051f787a04029ec3711$var$HSBColor extends $b54655da051f787a04029ec
     return new NumberFormatter(locale, options).format(value);
   }
 
+  getColorSpace() {
+    return 'hsb';
+  }
+
 } // X = <negative/positive number with/without decimal places>
 // before/after a comma, 0 or more whitespaces are allowed
 // - hsl(X, X%, X%)
@@ -500,8 +624,7 @@ const $b54655da051f787a04029ec3711$var$HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\s*,\
 
 function $b54655da051f787a04029ec3711$var$mod(n, m) {
   return (n % m + m) % m;
-} // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+}
 
 class $b54655da051f787a04029ec3711$var$HSLColor extends $b54655da051f787a04029ec3711$var$Color {
   constructor(hue, saturation, lightness, alpha) {
@@ -510,8 +633,7 @@ class $b54655da051f787a04029ec3711$var$HSLColor extends $b54655da051f787a04029ec
     this.saturation = saturation;
     this.lightness = lightness;
     this.alpha = alpha;
-  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+  }
 
   static parse(value) {
     let m;
@@ -526,12 +648,18 @@ class $b54655da051f787a04029ec3711$var$HSLColor extends $b54655da051f787a04029ec
 
   toString(format) {
     switch (format) {
+      case 'hex':
+        return this.toRGB().toString('hex');
+
+      case 'hexa':
+        return this.toRGB().toString('hexa');
+
       case 'hsl':
-        return "hsl(" + this.hue + ", " + this.saturation + "%, " + this.lightness + "%)";
+        return "hsl(" + this.hue + ", " + toFixedNumber(this.saturation, 2) + "%, " + toFixedNumber(this.lightness, 2) + "%)";
 
       case 'css':
       case 'hsla':
-        return "hsla(" + this.hue + ", " + this.saturation + "%, " + this.lightness + "%, " + this.alpha + ")";
+        return "hsla(" + this.hue + ", " + toFixedNumber(this.saturation, 2) + "%, " + toFixedNumber(this.lightness, 2) + "%, " + this.alpha + ")";
 
       default:
         return this.toFormat(format).toString(format);
@@ -544,10 +672,55 @@ class $b54655da051f787a04029ec3711$var$HSLColor extends $b54655da051f787a04029ec
       case 'hsla':
         return this;
 
+      case 'hsb':
+      case 'hsba':
+        return this.toHSB();
+
+      case 'rgb':
+      case 'rgba':
+        return this.toRGB();
+
       default:
         throw new Error('Unsupported color conversion: hsl -> ' + format);
     }
   }
+  /**
+   * Converts a HSL color to HSB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV.
+   * @returns An HSBColor object.
+   */
+
+
+  toHSB() {
+    let saturation = this.saturation / 100;
+    let lightness = this.lightness / 100;
+    let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
+    saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
+    return new $b54655da051f787a04029ec3711$var$HSBColor(toFixedNumber(this.hue, 2), toFixedNumber(saturation * 100, 2), toFixedNumber(brightness * 100, 2), this.alpha);
+  }
+  /**
+   * Converts a HSL color to RGB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative.
+   * @returns An RGBColor object.
+   */
+
+
+  toRGB() {
+    let hue = this.hue;
+    let saturation = this.saturation / 100;
+    let lightness = this.lightness / 100;
+    let a = saturation * Math.min(lightness, 1 - lightness);
+
+    let fn = function fn(n, k) {
+      if (k === void 0) {
+        k = (n + hue / 30) % 12;
+      }
+
+      return lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    };
+
+    return new $b54655da051f787a04029ec3711$var$RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
+  }
 
   clone() {
     return new $b54655da051f787a04029ec3711$var$HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
@@ -616,6 +789,10 @@ class $b54655da051f787a04029ec3711$var$HSLColor extends $b54655da051f787a04029ec
     return new NumberFormatter(locale, options).format(value);
   }
 
+  getColorSpace() {
+    return 'hsl';
+  }
+
 }
 
 function $d78e953dd1c924c8b48953f9b24957b7$var$normalizeColor(v) {
@@ -778,6 +955,7 @@ function useColorWheelState(props) {
   let valueRef = useRef(value);
   valueRef.current = value;
   let [isDragging, setDragging] = useState(false);
+  let isDraggingRef = useRef(false).current;
   let hue = value.getChannelValue('hue');
 
   function setHue(v) {
@@ -789,7 +967,9 @@ function useColorWheelState(props) {
     v = $dba59c0b8a82682c07fa6f5c72e73481$var$roundToStep($dba59c0b8a82682c07fa6f5c72e73481$var$mod(v, 360), step);
 
     if (hue !== v) {
-      setValue(value.withChannelValue('hue', v));
+      let color = value.withChannelValue('hue', v);
+      valueRef.current = color;
+      setValue(color);
     }
   }
 
@@ -845,13 +1025,14 @@ function useColorWheelState(props) {
     },
 
     setDragging(isDragging) {
-      setDragging(wasDragging => {
-        if (onChangeEnd && !isDragging && wasDragging) {
-          onChangeEnd(valueRef.current);
-        }
+      let wasDragging = isDraggingRef;
+      isDraggingRef = isDragging;
 
-        return isDragging;
-      });
+      if (onChangeEnd && !isDragging && wasDragging) {
+        onChangeEnd(valueRef.current);
+      }
+
+      setDragging(isDragging);
     },
 
     isDragging,