Fix circular dependency between @react-types/color and @react-stately/color

packages/@react-aria/color/test/useColorWheel.test.tsx

@@ -11,9 +11,9 @@
  */
 
 import {act, fireEvent, render} from '@testing-library/react';
-import {Color, useColorWheelState} from '@react-stately/color';
 import {ColorWheelProps} from '@react-types/color';
 import {installMouseEvent, installPointerEvent} from '@react-spectrum/test-utils';
+import {parseColor, useColorWheelState} from '@react-stately/color';
 import React, {useRef} from 'react';
 import {useColorWheel} from '../';
 import userEvent from '@testing-library/user-event';
@@ -124,7 +124,7 @@ describe('useColorWheel', () => {
 
   describe('keyboard events', () => {
     it('left/right works', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
       let slider = getByRole('slider');
       act(() => {slider.focus();});
@@ -138,7 +138,7 @@ describe('useColorWheel', () => {
     });
 
     it('up/down works', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
       let slider = getByRole('slider');
       act(() => {slider.focus();});
@@ -152,7 +152,7 @@ describe('useColorWheel', () => {
     });
 
     it('doesn\'t work when disabled', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} isDisabled />);
       let slider = getByRole('slider');
       act(() => {slider.focus();});
@@ -164,7 +164,7 @@ describe('useColorWheel', () => {
     });
 
     it('wraps around', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
       let slider = getByRole('slider');
       act(() => {slider.focus();});
@@ -175,7 +175,7 @@ describe('useColorWheel', () => {
     });
 
     it('respects step', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} step={45} />);
       let slider = getByRole('slider');
       act(() => {slider.focus();});
@@ -189,7 +189,7 @@ describe('useColorWheel', () => {
     });
 
     it('can always get back to 0 even with step', () => {
-      let defaultColor = new Color('hsl(330, 100%, 50%)');
+      let defaultColor = parseColor('hsl(330, 100%, 50%)');
       let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} step={110} />);
       let slider = getByRole('slider');
       act(() => {slider.focus();});
@@ -203,7 +203,7 @@ describe('useColorWheel', () => {
     });
 
     it('steps with page up/down', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
       let slider = getByRole('slider');
       act(() => {slider.focus();});
@@ -238,7 +238,7 @@ describe('useColorWheel', () => {
     prepare();
 
     it('dragging the thumb works', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole, getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
       let thumb = getByTestId('thumb');
       let slider = getByRole('slider');
@@ -261,7 +261,7 @@ describe('useColorWheel', () => {
     });
 
     it('dragging the thumb doesn\'t work when disabled', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole, getByTestId} = render(<ColorWheel isDisabled defaultValue={defaultColor} onChange={onChangeSpy} />);
       let thumb = getByTestId('thumb');
       let slider = getByRole('slider');
@@ -283,7 +283,7 @@ describe('useColorWheel', () => {
     });
 
     it('dragging the thumb respects the step', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} step={120} />);
       let thumb = getByTestId('thumb');
       let container = getByTestId('container');
@@ -299,7 +299,7 @@ describe('useColorWheel', () => {
     });
 
     it('clicking and dragging on the track works', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole, getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
       let thumb = getByTestId('thumb');
       let slider = getByRole('slider');
@@ -323,7 +323,7 @@ describe('useColorWheel', () => {
     });
 
     it('clicking and dragging on the track doesn\'t work when disabled', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByRole, getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} isDisabled />);
       let slider = getByRole('slider');
       let container = getByTestId('container');
@@ -344,7 +344,7 @@ describe('useColorWheel', () => {
     });
 
     it('clicking and dragging on the track respects the step', () => {
-      let defaultColor = new Color('hsl(0, 100%, 50%)');
+      let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} step={120} />);
       let thumb = getByTestId('thumb');
       let container = getByTestId('container');

packages/@react-aria/color/test/useHexColorField.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Color} from '@react-stately/color';
+import {parseColor} from '@react-stately/color';
 import React from 'react';
 import {renderHook} from '@testing-library/react-hooks';
 import {useHexColorField} from '../';
@@ -50,7 +50,7 @@ describe('useHexColorField', function () {
   });
 
   it('should return props for colorValue provided', function () {
-    let colorValue = new Color('#ff88a0');
+    let colorValue = parseColor('#ff88a0');
     let {inputFieldProps} = renderHexColorFieldHook({}, {colorValue});
     expect(inputFieldProps['aria-valuenow']).toBe(colorValue.toHexInt());
     expect(inputFieldProps['aria-valuetext']).toBe('#FF88A0');
@@ -77,12 +77,12 @@ describe('useHexColorField', function () {
     let {inputFieldProps} = renderHexColorFieldHook({validationState: 'invalid'});
     expect(inputFieldProps['aria-invalid']).toBe(true);
   });
-  
+
   it('should return prop for required', function () {
     let {inputFieldProps} = renderHexColorFieldHook({isRequired: true});
     expect(inputFieldProps['aria-required']).toBe(true);
   });
-  
+
   it('should return prop for readonly', function () {
     let {inputFieldProps} = renderHexColorFieldHook({isReadOnly: true});
     expect(inputFieldProps['aria-readonly']).toBe(true);

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

@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import {Color} from '@react-stately/color';
+import {Color} from '@react-types/color';
 import {DOMProps} from '@react-types/shared';
 import React, {ReactElement} from 'react';
 import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';

packages/@react-spectrum/color/stories/ColorSlider.stories.tsx

@@ -10,54 +10,54 @@
  * governing permissions and limitations under the License.
  */
 
-import {Color} from '@react-stately/color';
 import {ColorSlider} from '../';
 import {Flex} from '@react-spectrum/layout';
+import {parseColor} from '@react-stately/color';
 import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
 import {Text} from '@react-spectrum/text';
 
 storiesOf('ColorSlider', module)
   .add(
     'default',
-    () => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} />
+    () => <ColorSlider defaultValue="#7f0000" channel={'red'} />
   )
   .add(
     'no label',
-    () => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} label={null} />
+    () => <ColorSlider defaultValue="#7f0000" channel={'red'} label={null} />
   )
   .add(
     'no value label',
-    () => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} showValueLabel={false} />
+    () => <ColorSlider defaultValue="#7f0000" channel={'red'} showValueLabel={false} />
   )
   .add(
     'no label, no value label',
-    () => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} label={null} showValueLabel={false} />
+    () => <ColorSlider defaultValue="#7f0000" channel={'red'} label={null} showValueLabel={false} />
   )
   .add(
     'step',
-    () => <ColorSlider defaultValue={new Color('hsl(0, 100%, 50%)')} channel={'hue'} step={72} />
+    () => <ColorSlider defaultValue="hsl(0, 100%, 50%)" channel={'hue'} step={72} />
   )
   .add(
     'disabled',
-    () => <ColorSlider defaultValue={new Color('#333333')} channel={'red'} isDisabled />
+    () => <ColorSlider defaultValue="#333333" channel={'red'} isDisabled />
   )
   .add(
     'vertical',
-    () => <ColorSlider defaultValue={new Color('#ff0000')} channel={'red'} orientation="vertical" />
+    () => <ColorSlider defaultValue="#ff0000" channel={'red'} orientation="vertical" />
   )
   .add(
     'controlled',
-    () => <ColorSlider value={new Color('#ff0000')} channel={'red'} />
+    () => <ColorSlider value="#ff0000" channel={'red'} />
   )
   .add(
     'custom width',
-    () => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} width={300} />
+    () => <ColorSlider defaultValue="#7f0000" channel={'red'} width={300} />
   )
   .add(
     'rgba',
     () => {
-      let [color, setColor] = useState(new Color('#ff00ff'));
+      let [color, setColor] = useState(parseColor('#ff00ff'));
       return (<Flex gap="size-500" alignItems="center">
         <Flex direction="column">
           <ColorSlider value={color} onChange={setColor} channel={'red'} />
@@ -75,7 +75,7 @@ storiesOf('ColorSlider', module)
   .add(
     'hsla',
     () => {
-      let [color, setColor] = useState(new Color('hsla(0, 100%, 50%, 0.5)'));
+      let [color, setColor] = useState(parseColor('hsla(0, 100%, 50%, 0.5)'));
       return (<Flex gap="size-500" alignItems="center">
         <Flex direction="column">
           <ColorSlider value={color} onChange={setColor} channel={'hue'} />
@@ -92,7 +92,7 @@ storiesOf('ColorSlider', module)
   .add(
     'hsba',
     () => {
-      let [color, setColor] = useState(new Color('hsba(0, 100%, 50%, 0.5)'));
+      let [color, setColor] = useState(parseColor('hsba(0, 100%, 50%, 0.5)'));
       return (<Flex gap="size-500" alignItems="center">
         <Flex direction="column">
           <ColorSlider value={color} onChange={setColor} channel={'hue'} />

packages/@react-spectrum/color/stories/ColorThumb.stories.tsx

@@ -10,29 +10,29 @@
  * governing permissions and limitations under the License.
  */
 
-import {Color} from '@react-stately/color';
 import {ColorThumb} from '../src/ColorThumb';
+import {parseColor} from '@react-stately/color';
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 
 storiesOf('ColorThumb', module)
   .add(
     'default',
-    () => <ColorThumb value={new Color('#f00')} />
+    () => <ColorThumb value={parseColor('#f00')} />
   )
   .add(
     'focused',
-    () => <ColorThumb value={new Color('#f00')} isFocused />
+    () => <ColorThumb value={parseColor('#f00')} isFocused />
   )
   .add(
     'focused, dragging',
-    () => <ColorThumb value={new Color('#f00')} isFocused isDragging />
+    () => <ColorThumb value={parseColor('#f00')} isFocused isDragging />
   )
   .add(
     'focused, dragging, alpha',
-    () => <ColorThumb value={new Color('hsla(0, 100%, 100%, 0)')} isFocused isDragging />
+    () => <ColorThumb value={parseColor('hsla(0, 100%, 100%, 0)')} isFocused isDragging />
   )
   .add(
     'disabled',
-    () => <ColorThumb value={new Color('#f00')} isDisabled />
+    () => <ColorThumb value={parseColor('#f00')} isDisabled />
   );

packages/@react-spectrum/color/stories/ColorWheel.stories.tsx

@@ -11,24 +11,24 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Color} from '@react-stately/color';
 import {ColorWheel} from '../';
 import {Flex} from '@adobe/react-spectrum';
+import {parseColor} from '@react-stately/color';
 import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
 
 storiesOf('ColorWheel', module)
   .add(
     'default',
-    () => <ColorWheel defaultValue={new Color('hsl(0, 100%, 50%)')} onChange={action('change')} />
+    () => <ColorWheel defaultValue="hsl(0, 100%, 50%)')" onChange={action('change')} />
   )
   .add(
     'disabled',
-    () => <ColorWheel isDisabled defaultValue={new Color('hsl(0, 100%, 50%)')} />
+    () => <ColorWheel isDisabled defaultValue="hsl(0, 100%, 50%)" />
   )
   .add(
     'step',
-    () => <ColorWheel step={6} defaultValue={new Color('hsl(0, 100%, 50%)')} />
+    () => <ColorWheel step={6} defaultValue="hsl(0, 100%, 50%)" />
   )
   .add(
     'custom size',
@@ -40,14 +40,14 @@ storiesOf('ColorWheel', module)
           <button onClick={() => setSize('size-5000')}>size-5000</button>
           <button onClick={() => setSize('50vh')}>50vh</button>
         </Flex>
-        <ColorWheel defaultValue={new Color('hsl(0, 100%, 50%)')} size={size} />
+        <ColorWheel defaultValue="hsl(0, 100%, 50%)" size={size} />
       </Flex>);
     }
   )
   .add(
     'controlled',
     () => {
-      let [color, setColor] = useState(new Color('hsl(0, 100%, 50%)'));
+      let [color, setColor] = useState(parseColor('hsl(0, 100%, 50%)'));
       let colorCSS = color.toString('css');
       return (<Flex gap={'size-500'} direction="row" alignItems="center">
         <ColorWheel onChange={setColor} value={color} />

packages/@react-spectrum/color/stories/HexColorField.stories.tsx

@@ -12,7 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import {ActionButton} from '@react-spectrum/button';
-import {Color} from '@react-stately/color';
+import {Color} from '@react-types/color';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Flex} from '@react-spectrum/layout';
 import {HexColorField} from '../';
@@ -61,7 +61,7 @@ storiesOf('HexColorField', module)
     'controlled value',
     () => (
       <ControlledHexColorField
-        value={new Color('#FF00AA')}
+        value="#FF00AA"
         onChange={action('change')} />
     )
   )
@@ -91,7 +91,7 @@ function HexColorFieldPopover(props: any = {}) {
         UNSAFE_style={{
           background: colorString
         }} >{colorString}</ActionButton>
-      <Dialog 
+      <Dialog
         width="size-3600"
         height="size-1600" >
         <View padding="size-300">