@react-spectrum/color 3.0.2 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/color",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,25 +36,25 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/color": "^3.0.2",
-    "@react-aria/focus": "^3.19.0",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/interactions": "^3.22.5",
-    "@react-aria/utils": "^3.26.0",
-    "@react-spectrum/dialog": "^3.8.16",
-    "@react-spectrum/form": "^3.7.10",
-    "@react-spectrum/label": "^3.16.10",
-    "@react-spectrum/overlays": "^5.7.0",
-    "@react-spectrum/picker": "^3.15.4",
-    "@react-spectrum/textfield": "^3.12.7",
-    "@react-spectrum/utils": "^3.12.0",
-    "@react-spectrum/view": "^3.6.14",
-    "@react-stately/color": "^3.8.1",
-    "@react-types/color": "^3.0.1",
-    "@react-types/shared": "^3.26.0",
-    "@react-types/textfield": "^3.10.0",
+    "@react-aria/color": "^3.0.3",
+    "@react-aria/focus": "^3.19.1",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/utils": "^3.27.0",
+    "@react-spectrum/dialog": "^3.8.17",
+    "@react-spectrum/form": "^3.7.11",
+    "@react-spectrum/label": "^3.16.11",
+    "@react-spectrum/overlays": "^5.7.1",
+    "@react-spectrum/picker": "^3.15.5",
+    "@react-spectrum/textfield": "^3.12.8",
+    "@react-spectrum/utils": "^3.12.1",
+    "@react-spectrum/view": "^3.6.15",
+    "@react-stately/color": "^3.8.2",
+    "@react-types/color": "^3.0.2",
+    "@react-types/shared": "^3.27.0",
+    "@react-types/textfield": "^3.11.0",
     "@swc/helpers": "^0.5.0",
-    "react-aria-components": "^1.5.0"
+    "react-aria-components": "^1.6.0"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1",
@@ -68,5 +68,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
 }

package/src/ColorArea.tsx

@@ -23,7 +23,10 @@ import {useColorAreaState} from '@react-stately/color';
 import {useFocusRing} from '@react-aria/focus';
 import {useProviderProps} from '@react-spectrum/provider';
 
-function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {
+/**
+ * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
+ */
+export const ColorArea = React.forwardRef(function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let inputXRef = useRef(null);
   let inputYRef = useRef(null);
@@ -81,10 +84,4 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
       </ColorThumb>
     </div>
   );
-}
-
-/**
- * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- */
-let _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;
-export {_ColorArea as ColorArea};
+}) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;

package/src/ColorEditor.tsx

@@ -17,7 +17,10 @@ export interface SpectrumColorEditorProps {
   hideAlphaChannel?: boolean
 }
 
-function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * ColorEditor provides a default UI for editing colors within a ColorPicker.
+ */
+export const ColorEditor = React.forwardRef(function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
   let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
   let domRef = useDOMRef(ref);
   let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');
@@ -54,10 +57,4 @@ function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement
       </div>
     </div>
   );
-}
-
-/**
- * ColorEditor provides a default UI for editing colors within a ColorPicker.
- */
-let _ColorEditor = React.forwardRef(ColorEditor);
-export {_ColorEditor as ColorEditor};
+});

package/src/ColorField.tsx

@@ -23,7 +23,10 @@ import {useFormProps} from '@react-spectrum/form';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */
+export const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   [props] = useContextProps(props, null, ColorFieldContext);
@@ -36,13 +39,7 @@ function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
   } else {
     return <HexColorField {...props} forwardedRef={ref} />;
   }
-}
-
-/**
- * A color field allows users to edit a hex color or individual color channel value.
- */
-const _ColorField = React.forwardRef(ColorField);
-export {_ColorField as ColorField};
+});
 
 interface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {
   channel: ColorChannel,

package/src/ColorPicker.tsx

@@ -37,7 +37,10 @@ export interface SpectrumColorPickerProps extends ValueBase<string | Color, Colo
   rounding?: 'default' | 'none' | 'full'
 }
 
-function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * A ColorPicker combines a swatch with a customizable popover for editing a color.
+ */
+export const ColorPicker = React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {
   let swatchRef = useRef(null);
   let domRef = useFocusableRef(ref);
   let labelId = useId();
@@ -114,10 +117,4 @@ function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButt
       </DialogTrigger>
     </AriaColorPicker>
   );
-}
-
-/**
- * A ColorPicker combines a swatch with a customizable popover for editing a color.
- */
-let _ColorPicker = React.forwardRef(ColorPicker);
-export {_ColorPicker as ColorPicker};
+});

package/src/ColorSlider.tsx

@@ -24,7 +24,10 @@ import {useFocus, useFocusVisible} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {
+/**
+ * ColorSliders allow users to adjust an individual channel of a color value.
+ */
+export const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let inputRef = useRef(null);
   let trackRef = useRef(null);
@@ -135,10 +138,4 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivE
       </div>
     </div>
   );
-}
-
-/**
- * ColorSliders allow users to adjust an individual channel of a color value.
- */
-let _ColorSlider = React.forwardRef(ColorSlider);
-export {_ColorSlider as ColorSlider};
+});

package/src/ColorSwatch.tsx

@@ -37,7 +37,10 @@ interface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps,
 
 export const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
 
-function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+export const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
   let domRef = useDOMRef(ref);
   [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);
   let {colorSwatchProps, color} = useColorSwatch(props);
@@ -93,10 +96,4 @@ function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement
   }
 
   return swatch;
-}
-
-/**
- * A ColorSwatch displays a preview of a selected color.
- */
-let _ColorSwatch = forwardRef(ColorSwatch);
-export {_ColorSwatch as ColorSwatch};
+});

package/src/ColorSwatchPicker.tsx

@@ -38,7 +38,10 @@ export interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color
   rounding?: 'none' | 'default' | 'full'
 }
 
-function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+ */
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
   let {
     density = 'regular',
     size = 'M',
@@ -69,13 +72,7 @@ function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HT
       </SpectrumColorSwatchContext.Provider>
     </AriaColorSwatchPicker>
   );
-}
-
-/**
- * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- */
-let _ColorSwatchPicker = forwardRef(ColorSwatchPicker);
-export {_ColorSwatchPicker as ColorSwatchPicker};
+});
 
 function useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) {
   return (

package/src/ColorWheel.tsx

@@ -25,7 +25,10 @@ import {useResizeObserver} from '@react-aria/utils';
 
 const WHEEL_THICKNESS = 24;
 
-function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {
+/**
+ * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let inputRef = useRef(null);
   let containerRef = useFocusableRef(ref, inputRef);
@@ -104,10 +107,4 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivEle
       </ColorThumb>
     </div>
   );
-}
-
-/**
- * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
- */
-let _ColorWheel = React.forwardRef(ColorWheel);
-export {_ColorWheel as ColorWheel};
+});