@react-aria/color 3.0.0-nightly.4569 → 3.0.0-nightly.4578

package/src/useColorAreaGradient.ts

@@ -10,205 +10,89 @@
  * governing permissions and limitations under the License.
 */
 
+import {Color} from '@react-types/color';
 import {CSSProperties, useMemo} from 'react';
+import {parseColor} from '@react-stately/color';
 
-const generateRGB_R = (orientation, dir: boolean, zValue: number) => {
-  let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-  let result = {
-    colorAreaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
-    },
-    gradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
-      'WebkitMaskImage': maskImage,
-      maskImage
-    }
-  };
-  return result;
-};
-
-const generateRGB_G = (orientation, dir: boolean, zValue: number) => {
-  let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-  let result = {
-    colorAreaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
-    },
-    gradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
-      'WebkitMaskImage': maskImage,
-      maskImage
-    }
-  };
-  return result;
-};
-
-const generateRGB_B = (orientation, dir: boolean, zValue: number) => {
-  let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-  let result = {
-    colorAreaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
-    },
-    gradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
-      'WebkitMaskImage': maskImage,
-      maskImage
-    }
-  };
-  return result;
-};
-
-
-const generateHSL_H = (orientation, dir: boolean, zValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
-        `hsl(${zValue}, 100%, 50%)`
-      ].join(',')
-    }
-  };
-  return result;
-};
-
-const generateHSL_S = (orientation, dir: boolean, alphaValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        'hsl(0, 0%, 50%)'
-      ].join(',')
-    }
-  };
-  return result;
-};
-
-const generateHSL_L = (orientation, dir: boolean, zValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      backgroundImage: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
-      ].join(',')
-    }
-  };
-  return result;
-};
-
-
-const generateHSB_H = (orientation, dir: boolean, zValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
-        `hsl(${zValue}, 100%, 50%)`
-      ].join(',')
-    }
-  };
-  return result;
-};
+const hue = (color: Color) => [0, 60, 120, 180, 240, 300, 360].map(hue => color.withChannelValue('hue', hue).toString('css')).join(', ');
+const saturation = (color: Color) => `${color.withChannelValue('saturation', 0)}, transparent`;
 
-const generateHSB_S = (orientation, dir: boolean, alphaValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
-      ].join(',')
-    }
-  };
-  return result;
+const hslChannels = {
+  hue,
+  saturation,
+  lightness: () => 'black, transparent, white'
 };
 
-const generateHSB_B = (orientation, dir: boolean, alphaValue: number) => {
-  let result = {
-    colorAreaStyles: {},
-    gradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        '#000'
-      ].join(',')
-    }
-  };
-  return result;
+const hsbChannels = {
+  hue,
+  saturation,
+  brightness: () => 'black, transparent'
 };
 
-
 interface Gradients {
   colorAreaStyleProps: {
     style: CSSProperties
   },
-  gradientStyleProps: {
-    style: CSSProperties
-  },
   thumbStyleProps: {
     style: CSSProperties
   }
 }
 
-export function useColorAreaGradient({direction, state, zChannel, xChannel, isDisabled}): Gradients {
+export function useColorAreaGradient({direction, state, zChannel, xChannel, yChannel}): Gradients {
   let returnVal = useMemo<Gradients>(() => {
-    let orientation = ['top', direction === 'rtl' ? 'left' : 'right'];
-    let dir = false;
-    let background = {colorAreaStyles: {}, gradientStyles: {}};
+    let end = direction === 'rtl' ? 'left' : 'right';
+    let colorAreaStyles = {};
     let zValue = state.value.getChannelValue(zChannel);
-    let {minValue: zMin, maxValue: zMax} = state.value.getChannelRange(zChannel);
-    let alphaValue = (zValue - zMin) / (zMax - zMin);
-    let isHSL = state.value.getColorSpace() === 'hsl';
-    if (!isDisabled) {
-      switch (zChannel) {
-        case 'red': {
-          dir = xChannel === 'green';
-          background = generateRGB_R(orientation, dir, zValue);
-          break;
-        }
-        case 'green': {
-          dir = xChannel === 'red';
-          background = generateRGB_G(orientation, dir, zValue);
-          break;
-        }
-        case 'blue': {
-          dir = xChannel === 'red';
-          background = generateRGB_B(orientation, dir, zValue);
-          break;
-        }
-        case 'hue': {
-          dir = xChannel !== 'saturation';
-          if (isHSL) {
-            background = generateHSL_H(orientation, dir, zValue);
-          } else {
-            background = generateHSB_H(orientation, dir, zValue);
-          }
-          break;
-        }
-        case 'saturation': {
-          dir = xChannel === 'hue';
-          if (isHSL) {
-            background = generateHSL_S(orientation, dir, alphaValue);
-          } else {
-            background = generateHSB_S(orientation, dir, alphaValue);
-          }
-          break;
-        }
-        case 'brightness': {
-          dir = xChannel === 'hue';
-          background = generateHSB_B(orientation, dir, alphaValue);
-          break;
+
+    switch (state.value.getColorSpace()) {
+      case 'rgb': {
+        let rgb = parseColor('rgb(0, 0, 0)');
+        colorAreaStyles = {
+          background: [
+            // The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).
+            // Create a layer for each channel, with the other channels as 0. After blending, this should
+            // result in the gradients being combined channel by channel.
+            `linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,
+            `linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,
+            rgb.withChannelValue(zChannel, zValue)
+          ].join(','),
+          backgroundBlendMode: 'screen'
+        };
+        break;
+      }
+      case 'hsl': {
+        let channels = state.value.getColorChannels();
+        let value = parseColor('hsl(0, 100%, 50%)').withChannelValue(zChannel, zValue);
+
+        let bg = channels
+          .filter(c => c !== zChannel)
+          .map(c => `linear-gradient(to ${c === xChannel ? end : 'top'}, ${hslChannels[c](value)})`)
+          .reverse();
+        if (zChannel === 'hue') {
+          bg.push(value.toString('css'));
         }
-        case 'lightness': {
-          dir = xChannel === 'hue';
-          background = generateHSL_L(orientation, dir, zValue);
-          break;
+    
+        colorAreaStyles = {
+          background: bg.join(', ')
+        };
+        break;
+      }
+      case 'hsb': {
+        let channels = state.value.getColorChannels();
+        let value = parseColor('hsb(0, 100%, 100%)').withChannelValue(zChannel, zValue);
+
+        let bg = channels
+          .filter(c => c !== zChannel)
+          .map(c => `linear-gradient(to ${c === xChannel ? end : 'top'}, ${hsbChannels[c](value)})`)
+          .reverse();
+        if (zChannel === 'hue') {
+          bg.push(value.toString('css'));
         }
+    
+        colorAreaStyles = {
+          background: bg.join(', ')
+        };
+        break;
       }
     }
 
@@ -226,14 +110,7 @@ export function useColorAreaGradient({direction, state, zChannel, xChannel, isDi
           position: 'relative',
           touchAction: 'none',
           ...forcedColorAdjustNoneStyle,
-          ...background.colorAreaStyles
-        }
-      },
-      gradientStyleProps: {
-        style: {
-          touchAction: 'none',
-          ...forcedColorAdjustNoneStyle,
-          ...background.gradientStyles
+          ...colorAreaStyles
         }
       },
       thumbStyleProps: {
@@ -241,13 +118,13 @@ export function useColorAreaGradient({direction, state, zChannel, xChannel, isDi
           position: 'absolute',
           left: `${x * 100}%`,
           top: `${y * 100}%`,
-          transform: 'translate(0%, 0%)',
+          transform: 'translate(-50%, -50%)',
           touchAction: 'none',
           ...forcedColorAdjustNoneStyle
         }
       }
     };
-  }, [direction, state, zChannel, xChannel, isDisabled]);
+  }, [direction, state, zChannel, xChannel, yChannel]);
 
   return returnVal;
 }

package/src/useColorChannelField.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaLabelingProps} from '@react-types/shared';
+import {ColorChannelFieldProps, ColorChannelFieldState} from '@react-stately/color';
+import {NumberFieldAria, useNumberField} from '@react-aria/numberfield';
+import {RefObject} from 'react';
+import {useLocale} from '@react-aria/i18n';
+
+export interface AriaColorChannelFieldProps extends ColorChannelFieldProps, AriaLabelingProps {}
+export interface ColorChannelFieldAria extends NumberFieldAria {}
+
+/**
+ * Provides the behavior and accessibility implementation for a color channel field, allowing users to edit the
+ * value of an individual color channel.
+ */
+export function useColorChannelField(props: AriaColorChannelFieldProps, state: ColorChannelFieldState, inputRef: RefObject<HTMLInputElement>): ColorChannelFieldAria {
+  let {locale} = useLocale();
+  return useNumberField({
+    ...props,
+    value: undefined,
+    defaultValue: undefined,
+    onChange: undefined,
+    validate: undefined,
+    // Provide a default aria-label if no other label is provided.
+    'aria-label': props['aria-label'] || (props.label || props['aria-labelledby'] ? undefined : state.colorValue.getChannelName(props.channel, locale))
+  }, state, inputRef);
+}

package/src/useColorField.ts

@@ -12,8 +12,9 @@
 
 import {AriaColorFieldProps} from '@react-types/color';
 import {ColorFieldState} from '@react-stately/color';
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
 import {
-  HTMLAttributes,
+  InputHTMLAttributes,
   LabelHTMLAttributes,
   RefObject,
   useCallback,
@@ -24,13 +25,16 @@ import {privateValidationStateProp} from '@react-stately/form';
 import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
 import {useSpinButton} from '@react-aria/spinbutton';
-import {ValidationResult} from '@react-types/shared';
 
 export interface ColorFieldAria extends ValidationResult {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
-  inputProps: HTMLAttributes<HTMLInputElement>
+  inputProps: InputHTMLAttributes<HTMLInputElement>,
+  /** Props for the text field's description element, if any. */
+  descriptionProps: DOMAttributes,
+  /** Props for the text field's error message element, if any. */
+  errorMessageProps: DOMAttributes
 }
 
 /**
@@ -100,17 +104,17 @@ export function useColorField(
     }
   };
 
-  let {inputProps, ...otherProps} = useFormattedTextField(
-    mergeProps(props, {
-      id: inputId,
-      value: inputValue,
-      defaultValue: undefined,
-      validate: undefined,
-      [privateValidationStateProp]: state,
-      type: 'text',
-      autoComplete: 'off',
-      onChange
-    }), state, ref);
+  let {inputProps, ...otherProps} = useFormattedTextField({
+    ...props,
+    id: inputId,
+    value: inputValue,
+    defaultValue: undefined,
+    validate: undefined,
+    [privateValidationStateProp]: state,
+    type: 'text',
+    autoComplete: 'off',
+    onChange
+  }, state, ref);
 
   inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {
     role: 'textbox',

package/src/useColorSlider.ts

@@ -17,6 +17,7 @@ import {InputHTMLAttributes, RefObject} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 import {useSlider, useSliderThumb} from '@react-aria/slider';
+import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export interface AriaColorSliderOptions extends AriaColorSliderProps {
   /** A ref for the track element. */
@@ -74,8 +75,10 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
       to = 'left';
     }
     switch (channel) {
-      case 'hue':
-        return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+      case 'hue': {
+        let stops = [0, 60, 120, 180, 240, 300, 360].map(hue => value.withChannelValue('hue', hue).toString('css')).join(', ');
+        return `linear-gradient(to ${to}, ${stops})`;
+      }
       case 'lightness': {
         // We have to add an extra color stop in the middle so that the hue shows up at all.
         // Otherwise it will always just be black to white.
@@ -109,6 +112,15 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
     inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;
   }
 
+  let {visuallyHiddenProps} = useVisuallyHidden({
+    style: {
+      opacity: '0.0001',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  });
+
   return {
     trackProps: {
       ...mergeProps(groupProps, trackProps),
@@ -118,7 +130,13 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
         background: generateBackground()
       }
     },
-    inputProps,
+    inputProps: {
+      ...inputProps,
+      style: {
+        ...inputProps.style,
+        ...visuallyHiddenProps.style
+      }
+    },
     thumbProps: {
       ...thumbProps,
       style: {

package/src/useColorSwatch.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaLabelingProps, DOMProps} from '@react-types/shared';
+import {Color} from '@react-types/color';
+import {filterDOMProps, useId} from '@react-aria/utils';
+import {HTMLAttributes, useMemo} from 'react';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {parseColor} from '@react-stately/color';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+
+export interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {
+  /** The color value to display in the swatch. */
+  color?: string | Color | null,
+  /** 
+   * A localized accessible name for the color.
+   * By default, a description is generated from the color value,
+   * but this can be overridden if you have a more specific color
+   * name (e.g. Pantone colors).
+   */
+  colorName?: string
+}
+
+export interface ColorSwatchAria {
+  /** Props for the color swatch element. */
+  colorSwatchProps: HTMLAttributes<HTMLElement>,
+  /** The parsed color value of the swatch. */
+  color: Color
+}
+
+/**
+ * Provides the accessibility implementation for a color swatch component.
+ * A color swatch displays a preview of a selected color.
+ */
+export function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {
+  let {color: value, colorName} = props;
+  let nonNullValue = value || '#fff0';
+  let color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);
+  let {locale} = useLocale();
+  let DOMProps = filterDOMProps(props, {labelable: true});
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');
+  let id = useId(props.id);
+
+  if (!colorName) {
+    colorName = color.getChannelValue('alpha') === 0 ? stringFormatter.format('transparent') : color.getColorName(locale);
+  }
+
+  return {
+    colorSwatchProps: {
+      ...DOMProps,
+      role: 'img',
+      'aria-roledescription': stringFormatter.format('colorSwatch'),
+      'aria-label': [colorName, props['aria-label'] || ''].filter(Boolean).join(', '),
+      'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,
+      id,
+      style: {
+        backgroundColor: color.toString('css'),
+        // @ts-ignore
+        forcedColorAdjust: 'none'
+      }
+    },
+    color: color || null
+  };
+}

package/src/useColorWheel.ts

@@ -17,6 +17,7 @@ import {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, use
 import React, {ChangeEvent, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
 import {useKeyboard, useMove} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
+import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export interface AriaColorWheelOptions extends AriaColorWheelProps {
   /** The outer radius of the color wheel. */
@@ -263,6 +264,15 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     forcedColorAdjust: 'none'
   };
 
+  let {visuallyHiddenProps} = useVisuallyHidden({
+    style: {
+      opacity: '0.0001',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  });
+
   return {
     trackProps: {
       ...trackInteractions,
@@ -297,9 +307,9 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
       ...thumbInteractions,
       style: {
         position: 'absolute',
-        left: '50%',
-        top: '50%',
-        transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
+        left: outerRadius + x,
+        top: outerRadius + y,
+        transform: 'translate(-50%, -50%)',
         touchAction: 'none',
         ...forcedColorAdjustNoneStyle
       }
@@ -317,7 +327,11 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
         name,
         onChange: (e: ChangeEvent<HTMLInputElement>) => {
           state.setHue(parseFloat(e.target.value));
-        }
+        },
+        style: visuallyHiddenProps.style,
+        'aria-errormessage': props['aria-errormessage'],
+        'aria-describedby': props['aria-describedby'],
+        'aria-details': props['aria-details']
       }
     )
   };