chore: update deps (#213)

* chore: update deps

* chore: upgrade deps

* add key types

package.json

@@ -133,7 +133,7 @@
     "@react-aria/visually-hidden": "^3.5.0",
     "@react-stately/collections": "^3.10.2",
     "@react-stately/layout": "^3.8.0",
-    "@react-stately/list": "3.6.1",
+    "@react-stately/list": "^3.10.4",
     "@react-stately/overlays": "^3.4.2",
     "@react-stately/radio": "^3.6.0",
     "@react-stately/select": "^3.3.2",

src/menu/Menu.tsx

@@ -1,5 +1,5 @@
 import { mergeProps, useSyncRef } from '@react-aria/utils';
-import React, { Key, ReactElement, useContext } from 'react';
+import React, { ReactElement, useContext } from 'react';
 import { useMenu } from '@react-aria/menu';
 import { useTreeState } from '@react-stately/tree';
 import { css } from '@emotion/react';
@@ -12,6 +12,7 @@ import {
   FocusStrategy,
   MultipleSelection,
 } from '../types';
+import { Key } from '../types';
 import { MenuContext } from './context';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';

src/menu/MenuItem.tsx

@@ -1,13 +1,13 @@
 import { FocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import React, { Key, useRef } from 'react';
+import React, { useRef } from 'react';
 import { TreeState } from '@react-stately/tree';
 import { useHover } from '@react-aria/interactions';
 import { useMenuItem } from '@react-aria/menu';
 import { Text } from '../content';
 import { classNames } from '../utils';
 import { Icon, CheckmarkOutline } from '../icon';
-import { Node } from '../types';
+import { Key, Node } from '../types';
 import { useMenuContext } from './context';
 import { menuItemCSS } from './styles';
 

src/menu/MenuSection.tsx

@@ -1,11 +1,11 @@
-import React, { Fragment, Key } from 'react';
+import React, { Fragment } from 'react';
 import { TreeState } from '@react-stately/tree';
 import { useMenuSection } from '@react-aria/menu';
 import { useSeparator } from '@react-aria/separator';
 import { getChildNodes } from '@react-stately/collections';
 import { css } from '@emotion/react';
 import theme from '../theme';
-import { Node } from '../types';
+import { Key, Node } from '../types';
 import { MenuItem } from './MenuItem';
 interface MenuSectionProps<T> {
   item: Node<T>;

src/navlist/NavList.tsx

@@ -1,7 +1,7 @@
-import React, { Key, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { css } from '@emotion/react';
 import { ListBox, ListBoxProps } from '../listbox';
-import { DOMRef } from '../types';
+import { DOMRef, Key } from '../types';
 import { useDOMRef } from '../utils';
 import theme from '../theme';
 

src/textfield/TextArea.tsx

@@ -32,7 +32,7 @@ function TextArea(props: TextAreaProps, ref: RefObject<TextFieldRef>) {
 
   // not in stately because this is so we know when to re-measure, which is a spectrum design
   const [inputValue, setInputValue] = useControlledState(
-    props.value,
+    props.value || '',
     props.defaultValue,
     () => {}
   );

src/types/collection.ts

@@ -1,4 +1,5 @@
-import { Key, ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { Key } from './key';
 
 export interface ItemProps<T> {
   /** Rendered contents of the item or child items. */

src/types/index.ts

@@ -17,3 +17,4 @@ export * from './progress';
 export * from './style';
 export * from './locale';
 export * from './breadcrumb';
+export * from './key';

src/types/key.ts

@@ -0,0 +1 @@
+export type Key = string | number;

src/types/menu.ts

@@ -1,11 +1,12 @@
-import { Key, ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { ButtonProps } from './button';
 import { OverlayTriggerProps } from './overlays';
 import { Alignment } from './labelable';
 import { FocusStrategy, MultipleSelection } from './selection';
 import { CollectionBase } from './collection';
 import { AriaLabelingProps, DOMProps } from './dom';
 import { StyleProps } from './style';
+import { Key } from './key';
 
 export type MenuTriggerType = 'press' | 'longPress';
 

src/types/selection.ts

@@ -1,4 +1,4 @@
-import { Key } from 'react';
+import { Key } from './key';
 
 export interface SingleSelection {
   /** Whether the collection allows empty selection. */