Color release audit (#2916)

* Color release audit

Author: snowystinger

packages/@react-aria/color/src/useColorArea.ts

@@ -33,13 +33,25 @@ interface ColorAreaAria {
   yInputProps: InputHTMLAttributes<HTMLInputElement>
 }
 
+interface ColorAreaAriaProps extends AriaColorAreaProps {
+  /** A ref to the input that represents the x axis of the color area. */
+  inputXRef: RefObject<HTMLElement>,
+  /** A ref to the input that represents the y axis of the color area. */
+  inputYRef: RefObject<HTMLElement>,
+  /** A ref to the color area containing element. */
+  containerRef: RefObject<HTMLElement>
+}
+
 /**
  * Provides the behavior and accessibility implementation for a color wheel component.
  * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
  */
-export function useColorArea(props: AriaColorAreaProps, state: ColorAreaState, inputXRef: RefObject<HTMLElement>, inputYRef: RefObject<HTMLElement>, containerRef: RefObject<HTMLElement>): ColorAreaAria {
+export function useColorArea(props: ColorAreaAriaProps, state: ColorAreaState): ColorAreaAria {
   let {
-    isDisabled
+    isDisabled,
+    inputXRef,
+    inputYRef,
+    containerRef
   } = props;
   let formatMessage = useMessageFormatter(intlMessages);
 

packages/@react-spectrum/color/src/ColorArea.tsx

@@ -30,9 +30,9 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
   let size = props.size && dimensionValue(props.size);
   let {styleProps} = useStyleProps(props);
 
-  let xInputRef = useRef(null);
-  let yInputRef = useRef(null);
-  let containerRef = useFocusableRef(ref, xInputRef);
+  let inputXRef = useRef();
+  let inputYRef = useRef();
+  let containerRef = useFocusableRef(ref, inputXRef);
 
   let state = useColorAreaState(props);
 
@@ -43,7 +43,7 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
     xInputProps,
     yInputProps,
     thumbProps
-  } = useColorArea(props, state, xInputRef, yInputRef, containerRef);
+  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);
   let {direction} = useLocale();
   let {colorAreaStyleProps, gradientStyleProps, thumbStyleProps} = useGradients({direction, state, xChannel, zChannel, isDisabled: props.isDisabled});
 
@@ -80,8 +80,8 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
         {...thumbProps}
         {...thumbStyleProps}>
         <div role="presentation">
-          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={xInputRef} />
-          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={yInputRef} />
+          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />
+          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />
         </div>
       </ColorThumb>
     </div>

packages/@react-stately/color/package.json

@@ -20,7 +20,6 @@
     "@babel/runtime": "^7.6.2",
     "@internationalized/message": "^3.0.2",
     "@internationalized/number": "^3.0.3",
-    "@react-aria/utils": "^3.9.0",
     "@react-stately/slider": "^3.0.3",
     "@react-stately/utils": "^3.3.0",
     "@react-types/color": "3.0.0-beta.5",

packages/@react-stately/color/src/index.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './Color';
+export {parseColor} from './Color';
 export * from './useColorAreaState';
 export * from './useColorSliderState';
 export * from './useColorWheelState';

packages/@react-stately/color/src/useColorAreaState.ts

@@ -10,10 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {clamp, snapValueToStep} from '@react-aria/utils';
+import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';
 import {Color, ColorAreaProps, ColorChannel} from '@react-types/color';
 import {normalizeColor, parseColor} from './Color';
-import {useControlledState} from '@react-stately/utils';
 import {useMemo, useRef, useState} from 'react';
 
 export interface ColorAreaState {

packages/@react-stately/color/src/useColorWheelState.ts

@@ -138,15 +138,15 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
     getThumbPosition(radius) {
       return angleToCartesian(value.getChannelValue('hue'), radius);
     },
-    increment(stepSize) {
+    increment(stepSize = 1) {
       let newValue = hue + Math.max(stepSize, step);
       if (newValue > maxValueX) {
         // Make sure you can always get back to 0.
         newValue = minValueX;
       }
       setHue(newValue);
     },
-    decrement(stepSize) {
+    decrement(stepSize = 1) {
       let s = Math.max(stepSize, step);
       if (hue === 0) {
         // We can't just subtract step because this might be the case: