@react-stately/color 3.6.2-nightly.4664 → 3.6.2-nightly.4666

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/color",
-  "version": "3.6.2-nightly.4664+10bac541a",
+  "version": "3.6.2-nightly.4666+bd458c1ed",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,15 +22,15 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/number": "3.5.4-nightly.4664+10bac541a",
-    "@internationalized/string": "3.2.4-nightly.4664+10bac541a",
-    "@react-aria/i18n": "3.0.0-nightly.2952+10bac541a",
-    "@react-stately/form": "3.0.4-nightly.4664+10bac541a",
-    "@react-stately/numberfield": "3.0.0-nightly.2952+10bac541a",
-    "@react-stately/slider": "3.5.5-nightly.4664+10bac541a",
-    "@react-stately/utils": "3.0.0-nightly.2952+10bac541a",
-    "@react-types/color": "3.0.0-nightly.4664+10bac541a",
-    "@react-types/shared": "3.0.0-nightly.2952+10bac541a",
+    "@internationalized/number": "3.5.4-nightly.4666+bd458c1ed",
+    "@internationalized/string": "3.2.4-nightly.4666+bd458c1ed",
+    "@react-aria/i18n": "3.0.0-nightly.2954+bd458c1ed",
+    "@react-stately/form": "3.0.4-nightly.4666+bd458c1ed",
+    "@react-stately/numberfield": "3.0.0-nightly.2954+bd458c1ed",
+    "@react-stately/slider": "3.5.5-nightly.4666+bd458c1ed",
+    "@react-stately/utils": "3.0.0-nightly.2954+bd458c1ed",
+    "@react-types/color": "3.0.0-nightly.4666+bd458c1ed",
+    "@react-types/shared": "3.0.0-nightly.2954+bd458c1ed",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "10bac541a2a5c666b443fe70f313455a405a5c77"
+  "gitHead": "bd458c1ed166a5ff1fd93f0c1a397e1540b3d880"
 }

package/src/Color.ts

@@ -120,9 +120,9 @@ abstract class Color implements IColor {
 
   getColorSpaceAxes(xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel}): ColorAxes {
     let {xChannel, yChannel} = xyChannels;
-    let xCh = xChannel || this.getColorChannels().find(c => c !== yChannel);
-    let yCh = yChannel || this.getColorChannels().find(c => c !== xCh);
-    let zCh = this.getColorChannels().find(c => c !== xCh && c !== yCh);
+    let xCh = xChannel || this.getColorChannels().find(c => c !== yChannel)!;
+    let yCh = yChannel || this.getColorChannels().find(c => c !== xCh)!;
+    let zCh = this.getColorChannels().find(c => c !== xCh && c !== yCh)!;
 
     return {xChannel: xCh, yChannel: yCh, zChannel: zCh};
   }
@@ -245,7 +245,7 @@ class RGBColor extends Color {
   }
 
   static parse(value: string) {
-    let colors = [];
+    let colors: Array<number | undefined> = [];
     // matching #rgb, #rgba, #rrggbb, #rrggbbaa
     if (/^#[\da-f]+$/i.test(value) && [4, 5, 7, 9].includes(value.length)) {
       const values = (value.length < 6 ? value.replace(/[^#]/gi, '$&$&') : value).slice(1).split('');
@@ -259,7 +259,12 @@ class RGBColor extends Color {
     const match = value.match(/^rgba?\((.*)\)$/);
     if (match?.[1]) {
       colors = match[1].split(',').map(value => Number(value.trim()));
-      colors = colors.map((num, i) => clamp(num, 0, i < 3 ? 255 : 1));
+      colors = colors.map((num, i) => {
+        return clamp(num ?? 0, 0, i < 3 ? 255 : 1);
+      });
+    }
+    if (colors[0] === undefined || colors[1] === undefined || colors[2] === undefined) {
+      return undefined;
     }
 
     return colors.length < 3 ? undefined : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
@@ -371,6 +376,7 @@ class RGBColor extends Color {
           hue = (blue - red) / chroma + 2;
           break;
         case blue:
+        default:
           hue = (red - green) / chroma + 4;
           break;
       }
@@ -443,7 +449,7 @@ class HSBColor extends Color {
   }
 
   static parse(value: string): HSBColor | void {
-    let m: RegExpMatchArray | void;
+    let m: RegExpMatchArray | null;
     if ((m = value.match(HSB_REGEX))) {
       const [h, s, b, a] = (m[1] ?? m[2]).split(',').map(n => Number(n.trim().replace('%', '')));
       return new HSBColor(normalizeHue(h), clamp(s, 0, 100), clamp(b, 0, 100), clamp(a ?? 1, 0, 1));
@@ -582,7 +588,7 @@ class HSLColor extends Color {
   }
 
   static parse(value: string): HSLColor | void {
-    let m: RegExpMatchArray | void;
+    let m: RegExpMatchArray | null;
     if ((m = value.match(HSL_REGEX))) {
       const [h, s, l, a] = (m[1] ?? m[2]).split(',').map(n => Number(n.trim().replace('%', '')));
       return new HSLColor(normalizeHue(h), clamp(s, 0, 100), clamp(l, 0, 100), clamp(a ?? 1, 0, 1));

package/src/useColorAreaState.ts

@@ -85,8 +85,15 @@ export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
   if (!value && !defaultValue) {
     defaultValue = DEFAULT_COLOR;
   }
+  if (value) {
+    value = normalizeColor(value);
+  }
+  if (defaultValue) {
+    defaultValue = normalizeColor(defaultValue);
+  }
 
-  let [colorValue, setColorState] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);
+  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+  let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);
   let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);
   let valueRef = useRef(color);
   let setColor = (color: Color) => {
@@ -141,7 +148,7 @@ export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
     setColorFromPoint(x: number, y: number) {
       let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);
       let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);
-      let newColor:Color;
+      let newColor: Color | undefined;
       if (newXValue !== xValue) {
         // Round new value to multiple of step, clamp value between min and max
         newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);
@@ -161,16 +168,16 @@ export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
       let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
       return {x, y};
     },
-    incrementX(stepSize) {
+    incrementX(stepSize = 1) {
       setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));
     },
-    incrementY(stepSize) {
+    incrementY(stepSize = 1) {
       setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));
     },
-    decrementX(stepSize) {
+    decrementX(stepSize = 1) {
       setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));
     },
-    decrementY(stepSize) {
+    decrementY(stepSize = 1) {
       setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));
     },
     setDragging(isDragging) {

package/src/useColorFieldState.ts

@@ -27,7 +27,7 @@ export interface ColorFieldState extends FormValidationState {
    * The currently parsed color value, or null if the field is empty.
    * Updated based on the `inputValue` as the user types.
    */
-  readonly colorValue: Color,
+  readonly colorValue: Color | null,
   /** Sets the current text value of the input. */
   setInputValue(value: string): void,
   /**
@@ -72,7 +72,7 @@ export function useColorFieldState(
 
   let initialValue = useColor(value);
   let initialDefaultValue = useColor(defaultValue);
-  let [colorValue, setColorValue] = useControlledState<Color>(initialValue, initialDefaultValue, onChange);
+  let [colorValue, setColorValue] = useControlledState<Color | null>(initialValue!, initialDefaultValue!, onChange);
   let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
 
   let validation = useFormValidationState({
@@ -80,7 +80,7 @@ export function useColorFieldState(
     value: colorValue
   });
 
-  let safelySetColorValue = (newColor: Color) => {
+  let safelySetColorValue = (newColor: Color | null) => {
     if (!colorValue || !newColor) {
       setColorValue(newColor);
       return;
@@ -111,7 +111,11 @@ export function useColorFieldState(
     // Set to empty state if input value is empty
     if (!inputValue.length) {
       safelySetColorValue(null);
-      setInputValue(value === undefined ? '' : colorValue.toString('hex'));
+      if (value === undefined || colorValue === null) {
+        setInputValue('');
+      } else {
+        setInputValue(colorValue.toString('hex'));
+      }
       return;
     }
 

package/src/useColorSliderState.ts

@@ -43,12 +43,20 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
     throw new Error('useColorSliderState requires a value or defaultValue');
   }
 
-  let [colorValue, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange);
+  if (value) {
+    value = normalizeColor(value);
+  }
+  if (defaultValue) {
+    defaultValue = normalizeColor(defaultValue);
+  }
+  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error
+  let [colorValue, setColor] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);
   let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);
   let sliderState = useSliderState({
     ...color.getChannelRange(channel),
     ...otherProps,
-    // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
+    // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
+    // @ts-ignore
     numberFormatter: null,
     value: color.getChannelValue(channel),
     onChange(v) {

package/src/useColorWheelState.ts

@@ -96,13 +96,20 @@ function cartesianToAngle(x: number, y: number, radius: number): number {
  * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
  */
 export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
-  let {defaultValue, onChange, onChangeEnd} = props;
+  let {value: propsValue, defaultValue, onChange, onChangeEnd} = props;
 
-  if (!props.value && !defaultValue) {
+  if (!propsValue && !defaultValue) {
     defaultValue = DEFAULT_COLOR;
   }
+  if (propsValue) {
+    propsValue = normalizeColor(propsValue);
+  }
+  if (defaultValue) {
+    defaultValue = normalizeColor(defaultValue);
+  }
 
-  let [stateValue, setValueState] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange);
+  // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+  let [stateValue, setValueState] = useControlledState<Color>(propsValue as Color, defaultValue as Color, onChange);
   let value = useMemo(() => {
     let colorSpace = stateValue.getColorSpace();
     return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');