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

package/dist/module.js

@@ -1,11 +1,10 @@
 import { useRef, useState, useMemo, useEffect } from "react";
-import { useControlledState } from "@react-stately/utils";
 import { useSliderState } from "@react-stately/slider";
 import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
 import { NumberFormatter } from "@internationalized/number";
 import { MessageDictionary } from "@internationalized/message";
-import { clamp } from "@react-aria/utils";
+import { clamp, toFixedNumber, useControlledState } from "@react-stately/utils";
 import _babelRuntimeHelpersEsmInteropRequireDefault from "@babel/runtime/helpers/esm/interopRequireDefault";
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ar-AE.json
 var $b2cd9264f0b716f5f6077988ebeb8d5$exports = {};
@@ -257,6 +256,14 @@ class $db5f3c2f048bca5be854d051d3f2729$var$RGBColor extends $db5f3c2f048bca5be85
       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);
     }
@@ -265,6 +272,85 @@ class $db5f3c2f048bca5be854d051d3f2729$var$RGBColor extends $db5f3c2f048bca5be85
   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 $db5f3c2f048bca5be854d051d3f2729$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 $db5f3c2f048bca5be854d051d3f2729$var$HSLColor(toFixedNumber(hue * 360, 2), toFixedNumber(saturation * 100, 2), toFixedNumber(lightness * 100, 2), this.alpha);
+  }
 
   clone() {
     return new $db5f3c2f048bca5be854d051d3f2729$var$RGBColor(this.red, this.green, this.blue, this.alpha);
@@ -319,6 +405,10 @@ class $db5f3c2f048bca5be854d051d3f2729$var$RGBColor extends $db5f3c2f048bca5be85
     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%)
@@ -352,11 +442,17 @@ class $db5f3c2f048bca5be854d051d3f2729$var$HSBColor extends $db5f3c2f048bca5be85
       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);
@@ -373,24 +469,49 @@ class $db5f3c2f048bca5be854d051d3f2729$var$HSBColor extends $db5f3c2f048bca5be85
       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 $db5f3c2f048bca5be854d051d3f2729$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 $db5f3c2f048bca5be854d051d3f2729$var$HSLColor(hue, saturation, lightness, this.alpha);
+      return brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
+    };
+
+    return new $db5f3c2f048bca5be854d051d3f2729$var$RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha);
   }
 
   clone() {
@@ -460,6 +581,10 @@ class $db5f3c2f048bca5be854d051d3f2729$var$HSBColor extends $db5f3c2f048bca5be85
     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%)
@@ -470,8 +595,7 @@ const $db5f3c2f048bca5be854d051d3f2729$var$HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\
 
 function $db5f3c2f048bca5be854d051d3f2729$var$mod(n, m) {
   return (n % m + m) % m;
-} // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+}
 
 class $db5f3c2f048bca5be854d051d3f2729$var$HSLColor extends $db5f3c2f048bca5be854d051d3f2729$var$Color {
   constructor(hue, saturation, lightness, alpha) {
@@ -480,8 +604,7 @@ class $db5f3c2f048bca5be854d051d3f2729$var$HSLColor extends $db5f3c2f048bca5be85
     this.saturation = saturation;
     this.lightness = lightness;
     this.alpha = alpha;
-  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+  }
 
   static parse(value) {
     let m;
@@ -496,12 +619,18 @@ class $db5f3c2f048bca5be854d051d3f2729$var$HSLColor extends $db5f3c2f048bca5be85
 
   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);
@@ -514,10 +643,55 @@ class $db5f3c2f048bca5be854d051d3f2729$var$HSLColor extends $db5f3c2f048bca5be85
       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 $db5f3c2f048bca5be854d051d3f2729$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 $db5f3c2f048bca5be854d051d3f2729$var$RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
+  }
 
   clone() {
     return new $db5f3c2f048bca5be854d051d3f2729$var$HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
@@ -586,6 +760,10 @@ class $db5f3c2f048bca5be854d051d3f2729$var$HSLColor extends $db5f3c2f048bca5be85
     return new NumberFormatter(locale, options).format(value);
   }
 
+  getColorSpace() {
+    return 'hsl';
+  }
+
 }
 
 function $dfa319d4be3239bcd232b84e0e071$var$normalizeColor(v) {
@@ -746,6 +924,7 @@ export 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) {
@@ -757,7 +936,9 @@ export function useColorWheelState(props) {
     v = $a54bad0097d5f20f12ac194ac13764$var$roundToStep($a54bad0097d5f20f12ac194ac13764$var$mod(v, 360), step);
 
     if (hue !== v) {
-      setValue(value.withChannelValue('hue', v));
+      let color = value.withChannelValue('hue', v);
+      valueRef.current = color;
+      setValue(color);
     }
   }
 
@@ -813,13 +994,14 @@ export 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,