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

package/src/Color.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {clamp} from '@react-aria/utils';
+import {clamp, toFixedNumber} from '@react-stately/utils';
 import {ColorChannel, ColorChannelRange, ColorFormat, Color as IColor} from '@react-types/color';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -32,7 +32,7 @@ export function parseColor(value: string): IColor {
 abstract class Color implements IColor {
   abstract toFormat(format: ColorFormat): IColor;
   abstract toString(format: ColorFormat | 'css'): string;
-  abstract clone(): Color;
+  abstract clone(): IColor;
   abstract getChannelRange(channel: ColorChannel): ColorChannelRange;
   abstract formatChannelValue(channel: ColorChannel, locale: string): string;
 
@@ -61,6 +61,8 @@ abstract class Color implements IColor {
   getChannelName(channel: ColorChannel, locale: string) {
     return messages.getStringForLocale(channel, locale);
   }
+
+  abstract getColorSpace(): ColorFormat
 }
 
 const HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i;
@@ -90,7 +92,9 @@ class RGBColor extends Color {
         let b = parseInt(m[2][4] + m[2][5], 16);
         return new RGBColor(r, g, b, 1);
       }
-    } if ((m = value.match(RGB_REGEX))) {
+    }
+
+    if ((m = value.match(RGB_REGEX))) {
       const [r, g, b, a] = (m[1] ?? m[2]).split(',').map(n => Number(n.trim()));
       return new RGBColor(clamp(r, 0, 255), clamp(g, 0, 255), clamp(b, 0, 255), clamp(a ?? 1, 0, 1));
     }
@@ -119,6 +123,12 @@ class RGBColor extends Color {
       case 'rgb':
       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);
     }
@@ -128,7 +138,89 @@ class RGBColor extends Color {
     return this.red << 16 | this.green << 8 | this.blue;
   }
 
-  clone(): Color {
+  /**
+   * 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.
+   */
+  private toHSB(): IColor {
+    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 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.
+   */
+  private toHSL(): IColor {
+    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: number;
+    let saturation: number;
+
+    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 HSLColor(
+      toFixedNumber(hue * 360, 2),
+      toFixedNumber(saturation * 100, 2),
+      toFixedNumber(lightness * 100, 2),
+      this.alpha);
+  }
+
+  clone(): IColor {
     return new RGBColor(this.red, this.green, this.blue, this.alpha);
   }
 
@@ -162,6 +254,10 @@ class RGBColor extends Color {
     }
     return new NumberFormatter(locale, options).format(value);
   }
+
+  getColorSpace(): ColorFormat {
+    return 'rgb';
+  }
 }
 
 // X = <negative/positive number with/without decimal places>
@@ -187,10 +283,14 @@ class HSBColor extends Color {
     switch (format) {
       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);
     }
@@ -204,29 +304,52 @@ class HSBColor extends Color {
       case 'hsl':
       case 'hsla':
         return this.toHSL();
+      case 'rgb':
+      case 'rgba':
+        return this.toRGB();
       default:
         throw new Error('Unsupported color conversion: hsb -> ' + format);
     }
   }
 
-  private toHSL(): Color {
-    // determine the lightness in the range [0,100]
-    var l = (2 - this.saturation / 100) * this.brightness / 2;
+  /**
+   * 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.
+   */
+  private toHSL(): IColor {
+    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 HSLColor(
+      toFixedNumber(this.hue, 2),
+      toFixedNumber(saturation * 100, 2),
+        toFixedNumber(lightness * 100, 2),
+      this.alpha
+    );
+  }
 
-    // store the HSL components
+  /**
+   * 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.
+   */
+  private toRGB(): IColor {
     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
-    if (isNaN(saturation)) {
-      saturation = 0;
-    }
-
-    return new HSLColor(hue, saturation, lightness, this.alpha);
+    let saturation = this.saturation / 100;
+    let brightness = this.brightness / 100;
+    let fn = (n: number, k = (n + hue / 60) % 6) => brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
+    return new RGBColor(
+      Math.round(fn(5) * 255),
+      Math.round(fn(3) * 255),
+      Math.round(fn(1) * 255),
+      this.alpha
+    );
   }
 
-  clone(): Color {
+  clone(): IColor {
     return new HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
   }
 
@@ -264,6 +387,10 @@ class HSBColor extends Color {
     }
     return new NumberFormatter(locale, options).format(value);
   }
+
+  getColorSpace(): ColorFormat {
+    return 'hsb';
+  }
 }
 
 // X = <negative/positive number with/without decimal places>
@@ -276,13 +403,11 @@ function mod(n, m) {
   return ((n % m) + m) % m;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 class HSLColor extends Color {
   constructor(private hue: number, private saturation: number, private lightness: number, private alpha: number) {
     super();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   static parse(value: string): HSLColor | void {
     let m: RegExpMatchArray | void;
     if ((m = value.match(HSL_REGEX))) {
@@ -293,27 +418,73 @@ class HSLColor extends Color {
 
   toString(format: ColorFormat | 'css') {
     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);
     }
   }
-
   toFormat(format: ColorFormat): IColor {
     switch (format) {
       case 'hsl':
       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);
     }
   }
 
-  clone(): Color {
+  /**
+   * 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.
+   */
+  private toHSB(): IColor {
+    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 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.
+   */
+  private toRGB(): IColor {
+    let hue = this.hue;
+    let saturation = this.saturation / 100;
+    let lightness = this.lightness / 100;
+    let a = saturation * Math.min(lightness, 1 - lightness);
+    let fn = (n: number, k = (n + hue / 30) % 12) => lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return new RGBColor(
+      Math.round(fn(0) * 255),
+      Math.round(fn(8) * 255),
+      Math.round(fn(4) * 255),
+      this.alpha
+    );
+  }
+
+  clone(): IColor {
     return new HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
   }
 
@@ -351,4 +522,8 @@ class HSLColor extends Color {
     }
     return new NumberFormatter(locale, options).format(value);
   }
+
+  getColorSpace(): ColorFormat {
+    return 'hsl';
+  }
 }

package/src/useColorFieldState.ts

@@ -14,7 +14,7 @@ import {Color, ColorFieldProps} from '@react-types/color';
 import {parseColor} from './Color';
 import {useColor} from './useColor';
 import {useControlledState} from '@react-stately/utils';
-import {useEffect, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 export interface ColorFieldState {
   /**
@@ -41,7 +41,13 @@ export interface ColorFieldState {
   /** Sets the current value to the maximum color value, and fires `onChange`. */
   incrementToMax(): void,
   /** Sets the current value to the minimum color value, and fires `onChange`. */
-  decrementToMin(): void
+  decrementToMin(): void,
+  /**
+   * Validates a user input string.
+   * Values can be partially entered, and may be valid even if they cannot currently be parsed to a color.
+   * Can be used to implement validation as a user types.
+   */
+  validate(value: string): boolean
 }
 
 const MIN_COLOR = parseColor('#000000');
@@ -66,59 +72,107 @@ export function useColorFieldState(
   let initialValue = useColor(value);
   let initialDefaultValue = useColor(defaultValue);
   let [colorValue, setColorValue] = useControlledState<Color>(initialValue, initialDefaultValue, onChange);
+  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
 
-  let initialInputValue = (value || defaultValue) && colorValue ? colorValue.toString('hex') : '';
-  let [inputValue, setInputValue] = useState(initialInputValue);
+  let safelySetColorValue = (newColor: Color | ((prevState: Color) => Color)) => {
+    if (typeof newColor === 'function') {
+      setColorValue((prev:Color) => {
+        let resolved: Color = newColor(prev);
+        if (!prev || !resolved) {
+          return resolved;
+        }
+        if (resolved.toHexInt() !== prev.toHexInt()) {
+          return resolved;
+        }
+        return prev;
+      });
+      return;
+    }
+    if (!colorValue || !newColor) {
+      setColorValue(newColor);
+      return;
+    }
+    if (newColor.toHexInt() !== colorValue.toHexInt()) {
+      setColorValue(newColor);
+      return;
+    }
+  };
 
   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'); }
-      try {
-        let currentColor = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
-        if (currentColor.toHexInt() !== colorValue?.toHexInt()) {
-          return colorValue ? colorValue.toString('hex') : '';
-        }
-      } catch (err) {
-        // ignore
+    setInputValue(colorValue ? colorValue.toString('hex') : '');
+  }, [colorValue, setInputValue]);
+
+  let parsedValue = useMemo(() => {
+    let color;
+    try {
+      color = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
+    } catch (err) {
+      color = null;
+    }
+    return color;
+  }, [parseColor, inputValue]);
+  let parsed = useRef(null);
+  parsed.current = parsedValue;
+
+  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
+    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
+    let newColorValue = '';
+    if (colorValue) {
+      newColorValue = colorValue.toString('hex');
+    }
+    setInputValue(newColorValue);
+  };
+
+  let increment = () => {
+    safelySetColorValue((prevColor: Color) => {
+      let newValue = 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 inputValue;
+      return newValue;
     });
-  }, [inputValue, colorValue, setInputValue]);
-
-  let increment = () => setColorValue((prevColor: Color) => addColorValue(prevColor, step));
-  let decrement = () => setColorValue((prevColor: Color) => addColorValue(prevColor, -step));
-  let incrementToMax = () => setColorValue((prevColor: Color) => addColorValue(prevColor, MAX_COLOR_INT));
-  let decrementToMin = () => setColorValue((prevColor: Color) => addColorValue(prevColor, -MAX_COLOR_INT));
-
-  let setFieldInputValue = (value: string) => {
-    value = value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];
-    if (value !== undefined) {
-      if (!value.length && colorValue) {
-        setColorValue(null);
-        return;
-      }
-      try {
-        let newColor = parseColor(value.startsWith('#') ? value : `#${value}`);
-        setColorValue((prevColor: Color) => {
-          setInputValue(value);
-          return prevColor && prevColor.toHexInt() === newColor.toHexInt() ? prevColor : newColor;
-        });
-      } catch (err) {
-        setInputValue(value);
+  };
+  let decrement = () => {
+    safelySetColorValue((prevColor: Color) => {
+      let newValue = 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 incrementToMax = () => safelySetColorValue(MAX_COLOR);
+  let decrementToMin = () => safelySetColorValue(MIN_COLOR);
 
-  let commit = () => {
-    setInputValue(colorValue ? colorValue.toString('hex') : '');
-  };
+  let validate = (value: string) => value === '' || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];
 
   return {
+    validate,
     colorValue,
     inputValue,
-    setInputValue: setFieldInputValue,
+    setInputValue,
     commit,
     increment,
     incrementToMax,
@@ -130,11 +184,10 @@ export function useColorFieldState(
 function addColorValue(color: Color, step: number) {
   let newColor = color ? color : MIN_COLOR;
   let colorInt = newColor.toHexInt();
-  let newColorString = color ? color.toString('hex') : '';
 
   let clampInt = Math.min(Math.max(colorInt + step, MIN_COLOR_INT), 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);
   }
   return newColor;

package/src/useColorWheelState.ts

@@ -108,6 +108,7 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
   valueRef.current = value;
 
   let [isDragging, setDragging] = useState(false);
+  let isDraggingRef = useRef(false).current;
 
   let hue = value.getChannelValue('hue');
   function setHue(v: number) {
@@ -117,7 +118,9 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
     }
     v = roundToStep(mod(v, 360), step);
     if (hue !== v) {
-      setValue(value.withChannelValue('hue', v));
+      let color = value.withChannelValue('hue', v);
+      valueRef.current = color;
+      setValue(color);
     }
   }
 
@@ -155,13 +158,14 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
       }
     },
     setDragging(isDragging) {
-      setDragging(wasDragging => {
-        if (onChangeEnd && !isDragging && wasDragging) {
-          onChangeEnd(valueRef.current);
-        }
+      let wasDragging = isDraggingRef;
+      isDraggingRef = isDragging;
+
+      if (onChangeEnd && !isDragging && wasDragging) {
+        onChangeEnd(valueRef.current);
+      }
 
-        return isDragging;
-      });
+      setDragging(isDragging);
     },
     isDragging,
     getDisplayColor() {