@react-stately/color 3.0.0-beta.1 → 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 brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
+    };
 
-    return new $db5f3c2f048bca5be854d051d3f2729$var$HSLColor(hue, saturation, lightness, this.alpha);
+    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,
@@ -864,68 +1046,124 @@ export function useColorFieldState(props) {
   let initialValue = $a8b4ca293b41af7f07c8a5216dae5f3$export$useColor(value);
   let initialDefaultValue = $a8b4ca293b41af7f07c8a5216dae5f3$export$useColor(defaultValue);
   let [colorValue, setColorValue] = useControlledState(initialValue, initialDefaultValue, onChange);
-  let initialInputValue = (value || defaultValue) && colorValue ? colorValue.toString('hex') : '';
-  let [inputValue, setInputValue] = useState(initialInputValue);
-  useEffect(() => {
-    setInputValue(inputValue => {
-      // Parse color from current inputValue.
-      // Only update the input value if the parseColorValue is not equivalent.
-      if (!inputValue.length && colorValue) {
-        return colorValue.toString('hex');
-      }
+  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
 
-      try {
-        let currentColor = parseColor(inputValue.startsWith('#') ? inputValue : "#" + inputValue);
+  let safelySetColorValue = newColor => {
+    if (typeof newColor === 'function') {
+      setColorValue(prev => {
+        let resolved = newColor(prev);
 
-        if (currentColor.toHexInt() !== (colorValue == null ? void 0 : colorValue.toHexInt())) {
-          return colorValue ? colorValue.toString('hex') : '';
+        if (!prev || !resolved) {
+          return resolved;
         }
-      } catch (err) {// ignore
-      }
 
-      return inputValue;
-    });
-  }, [inputValue, colorValue, setInputValue]);
+        if (resolved.toHexInt() !== prev.toHexInt()) {
+          return resolved;
+        }
+
+        return prev;
+      });
+      return;
+    }
+
+    if (!colorValue || !newColor) {
+      setColorValue(newColor);
+      return;
+    }
+
+    if (newColor.toHexInt() !== colorValue.toHexInt()) {
+      setColorValue(newColor);
+      return;
+    }
+  };
 
-  let increment = () => setColorValue(prevColor => $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(prevColor, step));
+  useEffect(() => {
+    setInputValue(colorValue ? colorValue.toString('hex') : '');
+  }, [colorValue, setInputValue]);
+  let parsedValue = useMemo(() => {
+    let color;
+
+    try {
+      color = parseColor(inputValue.startsWith('#') ? inputValue : "#" + inputValue);
+    } catch (err) {
+      color = null;
+    }
 
-  let decrement = () => setColorValue(prevColor => $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(prevColor, -step));
+    return color;
+  }, [parseColor, inputValue]);
+  let parsed = useRef(null);
+  parsed.current = parsedValue;
 
-  let incrementToMax = () => setColorValue(prevColor => $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(prevColor, $f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR_INT));
+  let commit = () => {
+    // Set to empty state if input value is empty
+    if (!inputValue.length) {
+      safelySetColorValue(null);
+      setInputValue(value === undefined ? '' : colorValue.toString('hex'));
+      return;
+    } // if it failed to parse, then reset input to formatted version of current number
 
-  let decrementToMin = () => setColorValue(prevColor => $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(prevColor, -$f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR_INT));
 
-  let setFieldInputValue = value => {
-    var _value$match;
+    if (parsed.current == null) {
+      setInputValue(colorValue ? colorValue.toString('hex') : '');
+      return;
+    }
+
+    safelySetColorValue(parsed.current); // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
 
-    value = (_value$match = value.match(/^#?[0-9a-f]{0,6}$/i)) == null ? void 0 : _value$match[0];
+    let newColorValue = '';
 
-    if (value !== undefined) {
-      if (!value.length && colorValue) {
-        setColorValue(null);
-        return;
+    if (colorValue) {
+      newColorValue = colorValue.toString('hex');
+    }
+
+    setInputValue(newColorValue);
+  };
+
+  let increment = () => {
+    safelySetColorValue(prevColor => {
+      let newValue = $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(parsed.current, 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
+      // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+
+      if (newValue === prevColor) {
+        setInputValue(newValue.toString('hex'));
       }
 
-      try {
-        let newColor = parseColor(value.startsWith('#') ? value : "#" + value);
-        setColorValue(prevColor => {
-          setInputValue(value);
-          return prevColor && prevColor.toHexInt() === newColor.toHexInt() ? prevColor : newColor;
-        });
-      } catch (err) {
-        setInputValue(value);
+      return newValue;
+    });
+  };
+
+  let decrement = () => {
+    safelySetColorValue(prevColor => {
+      let newValue = $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(parsed.current, -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
+      // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+
+      if (newValue === prevColor) {
+        setInputValue(newValue.toString('hex'));
       }
-    }
+
+      return newValue;
+    });
   };
 
-  let commit = () => {
-    setInputValue(colorValue ? colorValue.toString('hex') : '');
+  let incrementToMax = () => safelySetColorValue($f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR);
+
+  let decrementToMin = () => safelySetColorValue($f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR);
+
+  let validate = value => {
+    var _value$match;
+
+    return value === '' || !!((_value$match = value.match(/^#?[0-9a-f]{0,6}$/i)) != null && _value$match[0]);
   };
 
   return {
+    validate,
     colorValue,
     inputValue,
-    setInputValue: setFieldInputValue,
+    setInputValue,
     commit,
     increment,
     incrementToMax,
@@ -937,11 +1175,10 @@ export function useColorFieldState(props) {
 function $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(color, step) {
   let newColor = color ? color : $f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR;
   let colorInt = newColor.toHexInt();
-  let newColorString = color ? color.toString('hex') : '';
   let clampInt = Math.min(Math.max(colorInt + step, $f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR_INT), $f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR_INT);
 
   if (clampInt !== colorInt) {
-    newColorString = "#" + clampInt.toString(16).padStart(6, '0').toUpperCase();
+    let newColorString = "#" + clampInt.toString(16).padStart(6, '0').toUpperCase();
     newColor = parseColor(newColorString);
   }