Update react types (#5237)

* Update Typescript and react types, use our own Key type

.eslintrc.js

@@ -53,6 +53,7 @@ module.exports = {
   }, {
     files: ['**/test/**', '**/stories/**', '**/docs/**', '**/chromatic/**', '**/__tests__/**'],
     rules: {
+      'rsp-rules/no-react-key': [ERROR],
       'rsp-rules/act-events-test': ERROR,
       'rsp-rules/no-getByRole-toThrow': ERROR,
       'rulesdir/imports': OFF,
@@ -182,7 +183,8 @@ module.exports = {
     'react-hooks/exhaustive-deps': WARN,
 
     // custom rules
-    'rulesdir/sort-imports': [ERROR],
+    'rsp-rules/no-react-key': [ERROR],
+    'rsp-rules/sort-imports': [ERROR],
     'rulesdir/imports': [ERROR],
     'rulesdir/useLayoutEffectRule': [ERROR],
     'rulesdir/pure-render': [ERROR],

examples/rsp-cra-18/src/App.tsx

@@ -46,7 +46,7 @@ function App() {
             {(item: any) =>
               (<Row key={item.foo} UNSTABLE_childItems={item.childRows}>
                 {(key) => {
-                  return <Cell>{item[key.toString()]}</Cell>;
+                  return <Cell>{item[key]}</Cell>;
                 }}
               </Row>)
             }

examples/rsp-cra-18/src/Journal.tsx

@@ -1,9 +1,9 @@
-import {Key} from 'react'
+import {Key} from '@react-types/shared';
 
 interface Journal{
-    rate: Key, 
-    description: string, 
+    rate: Key,
+    description: string,
     id: number
 }
 
-export default Journal
+export default Journal

examples/rsp-cra-18/src/JournalEntries.tsx

@@ -6,7 +6,7 @@ function JournalEntries(props : {list : Journal[]}){
     const element = props.list.map(item => (
         <li key={item.id}>
             <Divider size="M" marginTop="size-200" marginBottom="size-300" />
-            <p>Your day was: {item.rate.toString()} </p>
+            <p>Your day was: {item.rate} </p>
             <p>{item.description}</p>
         </li>
 

examples/rsp-next-ts-17/components/Section.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 interface SectionProps {
   title: string;
-  children: JSX.Element | JSX.Element[];
+  children: React.JSX.Element | React.JSX.Element[];
 }
 
 export default function Section(props: SectionProps) {

examples/rsp-next-ts/components/Section.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 interface SectionProps {
   title: string;
-  children: JSX.Element | JSX.Element[];
+  children: React.JSX.Element | React.JSX.Element[];
 }
 
 export default function Section(props: SectionProps) {

package.json

@@ -33,7 +33,7 @@
     "copyrights": "babel-node --presets @babel/env ./scripts/addHeaders.js",
     "build:icons": "babel-node --presets @babel/env ./scripts/buildIcons.js",
     "clean:icons": "babel-node --presets @babel/env ./scripts/cleanIcons.js",
-    "postinstall": "yarn build:icons && patch-package",
+    "postinstall": "patch-package && yarn build:icons",
     "plop": "plop --plopfile scripts/plopfile.js",
     "chromatic": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name 'build:chromatic'",
     "chromatic:forced-colors": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_FC_PROJECT_TOKEN --build-script-name 'build:chromatic-fc'",
@@ -98,10 +98,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/react": "^18.2.7",
+    "@types/react": "^18.2.28",
     "@types/storybook__react": "^5.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
     "autoprefixer": "^9.6.0",
     "axe-core": "^4.6.3",
     "axe-playwright": "^1.1.11",
@@ -169,7 +169,7 @@
     "tailwindcss": "^3.2.2",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
-    "typescript": "5.0.4",
+    "typescript": "5.2.2",
     "typescript-strict-plugin": "^2.0.0",
     "verdaccio": "^5.13.0",
     "walk-object": "^4.0.0",
@@ -178,6 +178,7 @@
   },
   "resolutions": {
     "@babel/core": "7.12.10",
+    "@types/react": "18.2.28",
     "postcss": "8.4.24",
     "postcss-custom-properties": "13.2.0",
     "postcss-import": "15.1.0",

packages/@react-aria/actiongroup/src/useActionGroupItem.ts

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableElement} from '@react-types/shared';
-import {Key, RefObject, useEffect} from 'react';
+import {DOMAttributes, FocusableElement, Key} from '@react-types/shared';
 import {ListState} from '@react-stately/list';
 import {mergeProps, useEffectEvent} from '@react-aria/utils';
 import {PressProps} from '@react-aria/interactions';
+import {RefObject, useEffect} from 'react';
 
 export interface AriaActionGroupItemProps {
   key: Key

packages/@react-aria/dnd/src/DragPreview.tsx

@@ -15,12 +15,12 @@ import {flushSync} from 'react-dom';
 import React, {RefObject, useImperativeHandle, useRef, useState} from 'react';
 
 export interface DragPreviewProps {
-  children: (items: DragItem[]) => JSX.Element
+  children: (items: DragItem[]) => React.JSX.Element
 }
 
 function DragPreview(props: DragPreviewProps, ref: RefObject<DragPreviewRenderer>) {
   let render = props.children;
-  let [children, setChildren] = useState<JSX.Element>(null);
+  let [children, setChildren] = useState<React.JSX.Element>(null);
   let domRef = useRef(null);
 
   useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement) => void) => {

packages/@react-aria/dnd/src/useDraggableItem.ts

@@ -13,9 +13,10 @@
 import {AriaButtonProps} from '@react-types/button';
 import {clearGlobalDnDState, isInternalDropOperation, setDraggingKeys, useDragModality} from './utils';
 import {DraggableCollectionState} from '@react-stately/dnd';
-import {HTMLAttributes, Key} from 'react';
+import {HTMLAttributes} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {Key} from '@react-types/shared';
 import {useDescription} from '@react-aria/utils';
 import {useDrag} from './useDrag';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';

packages/@react-aria/dnd/src/useDropIndicator.ts

@@ -12,9 +12,9 @@
 
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {DropTarget} from '@react-types/shared';
+import {DropTarget, Key} from '@react-types/shared';
 import {getDroppableCollectionId} from './utils';
-import {HTMLAttributes, Key, RefObject} from 'react';
+import {HTMLAttributes, RefObject} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useDroppableItem} from './useDroppableItem';

packages/@react-aria/dnd/src/useDroppableCollection.ts

@@ -28,12 +28,13 @@ import {
   DropPosition,
   DropTarget,
   DropTargetDelegate,
+  Key,
   KeyboardDelegate,
   Node
 } from '@react-types/shared';
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useRef} from 'react';
+import {HTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react';
 import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
 import {setInteractionModality} from '@react-aria/interactions';
 import {useAutoScroll} from './useAutoScroll';

packages/@react-aria/dnd/src/utils.ts

@@ -11,10 +11,10 @@
  */
 
 import {CUSTOM_DRAG_TYPE, DROP_OPERATION, GENERIC_TYPE, NATIVE_DRAG_TYPES} from './constants';
-import {DirectoryDropItem, DragItem, DropItem, FileDropItem, DragTypes as IDragTypes, TextDropItem} from '@react-types/shared';
+import {DirectoryDropItem, DragItem, DropItem, FileDropItem, DragTypes as IDragTypes, Key, TextDropItem} from '@react-types/shared';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getInteractionModality, useInteractionModality} from '@react-aria/interactions';
-import {Key, RefObject} from 'react';
+import {RefObject} from 'react';
 
 interface DroppableCollectionMap {
   id: string,

packages/@react-aria/dnd/stories/Reorderable.tsx

@@ -20,7 +20,7 @@ import {FocusRing} from '@react-aria/focus';
 import Folder from '@spectrum-icons/workflow/Folder';
 import {GridCollection, useGridState} from '@react-stately/grid';
 import {Item} from '@react-stately/collections';
-import {ItemDropTarget} from '@react-types/shared';
+import {ItemDropTarget, Key} from '@react-types/shared';
 import {ListDropTargetDelegate} from '@react-aria/dnd';
 import {ListKeyboardDelegate} from '@react-aria/selection';
 import React, {useRef} from 'react';
@@ -45,7 +45,7 @@ export function ReorderableGridExample(props) {
     ]
   });
 
-  let onMove = (keys: React.Key[], target: ItemDropTarget) => {
+  let onMove = (keys: Key[], target: ItemDropTarget) => {
     if (target.dropPosition === 'before') {
       list.moveBefore(target.key, keys);
     } else {

packages/@react-aria/grid/src/GridKeyboardDelegate.ts

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Direction, KeyboardDelegate, Node} from '@react-types/shared';
+import {Direction, Key, KeyboardDelegate, Node} from '@react-types/shared';
 import {getChildNodes, getFirstItem, getLastItem, getNthItem} from '@react-stately/collections';
 import {GridCollection} from '@react-types/grid';
-import {Key, RefObject} from 'react';
 import {Layout, Rect} from '@react-stately/virtualizer';
+import {RefObject} from 'react';
 
 export interface GridKeyboardDelegateOptions<T, C> {
   collection: C,

packages/@react-aria/grid/src/useGrid.ts

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMAttributes, DOMProps, KeyboardDelegate} from '@react-types/shared';
+import {AriaLabelingProps, DOMAttributes, DOMProps, Key, KeyboardDelegate} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {GridCollection} from '@react-types/grid';
 import {GridKeyboardDelegate} from './GridKeyboardDelegate';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
-import {Key, RefObject, useCallback, useMemo} from 'react';
+import {RefObject, useCallback, useMemo} from 'react';
 import {useCollator, useLocale} from '@react-aria/i18n';
 import {useGridSelectionAnnouncement} from './useGridSelectionAnnouncement';
 import {useHasTabbableChild} from '@react-aria/focus';

packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts

@@ -11,12 +11,12 @@
  */
 
 import {announce} from '@react-aria/live-announcer';
-import {Collection, Node, Selection} from '@react-types/shared';
+import {Collection, Key, Node, Selection} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {Key, useRef} from 'react';
 import {SelectionManager} from '@react-stately/selection';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useRef} from 'react';
 import {useUpdateEffect} from '@react-aria/utils';
 
 export interface GridSelectionAnnouncementProps {

packages/@react-aria/grid/src/useGridSelectionCheckbox.ts

@@ -3,7 +3,7 @@ import {GridCollection} from '@react-types/grid';
 import {GridState} from '@react-stately/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {Key} from 'react';
+import {Key} from '@react-types/shared';
 import {useId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 

packages/@react-aria/grid/src/utils.ts

@@ -12,8 +12,7 @@
 
 import type {GridCollection} from '@react-types/grid';
 import type {GridState} from '@react-stately/grid';
-import {Key} from 'react';
-import type {KeyboardDelegate} from '@react-types/shared';
+import type {Key, KeyboardDelegate} from '@react-types/shared';
 
 interface GridMapShared {
   keyboardDelegate: KeyboardDelegate,

packages/@react-aria/gridlist/src/useGridList.ts

@@ -16,13 +16,14 @@ import {
   DisabledBehavior,
   DOMAttributes,
   DOMProps,
+  Key,
   KeyboardDelegate,
   MultipleSelection
 } from '@react-types/shared';
 import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
-import {Key, RefObject} from 'react';
 import {listMap} from './utils';
 import {ListState} from '@react-stately/list';
+import {RefObject} from 'react';
 import {useGridSelectionAnnouncement, useHighlightSelectionDescription} from '@react-aria/grid';
 import {useHasTabbableChild} from '@react-aria/focus';
 import {useSelectableList} from '@react-aria/selection';

packages/@react-aria/gridlist/src/utils.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Key} from 'react';
+import {Key} from '@react-types/shared';
 import type {ListState} from '@react-stately/list';
 
 interface ListMapShared {

packages/@react-aria/i18n/src/useListFormatter.tsx

@@ -18,11 +18,7 @@ import {useMemo} from 'react';
  * and handles caching of the list formatter for performance.
  * @param options - Formatting options.
  */
-
-// Typescript version 4.7 supports Intl.ListFormat - TODO upgrade
-// @ts-ignore
 export function useListFormatter(options: Intl.ListFormatOptions = {}): Intl.ListFormat {
   let {locale} = useLocale();
-  // @ts-ignore
   return useMemo(() => new Intl.ListFormat(locale, options), [locale, options]);
 }

packages/@react-aria/interactions/stories/useFocusRing.stories.tsx

@@ -11,6 +11,7 @@
  */
 
 import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
+import {Key} from '@react-types/shared';
 import React, {useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 
@@ -80,7 +81,7 @@ function SearchExample() {
         <TableBody items={items}>
           {item =>
             (<Row key={item.key}>
-              {key => <Cell>{item[key]}</Cell>}
+              {(key: Key) => <Cell>{item[key]}</Cell>}
             </Row>)
           }
         </TableBody>

packages/@react-aria/listbox/src/useOption.ts

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableElement} from '@react-types/shared';
+import {DOMAttributes, FocusableElement, Key} from '@react-types/shared';
 import {filterDOMProps, isMac, isWebKit, mergeProps, useSlotId} from '@react-aria/utils';
 import {getItemCount} from '@react-stately/collections';
 import {getItemId, listData} from './utils';
 import {isFocusVisible, useHover} from '@react-aria/interactions';
-import {Key, RefObject} from 'react';
 import {ListState} from '@react-stately/list';
+import {RefObject} from 'react';
 import {SelectableItemStates, useSelectableItem} from '@react-aria/selection';
 
 export interface OptionAria extends SelectableItemStates {

packages/@react-aria/listbox/src/utils.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Key} from 'react';
+import {Key} from '@react-types/shared';
 import {ListState} from '@react-stately/list';
 
 interface ListData {

packages/@react-aria/menu/src/useMenu.ts

@@ -11,9 +11,9 @@
  */
 
 import {AriaMenuProps} from '@react-types/menu';
-import {DOMAttributes, KeyboardDelegate} from '@react-types/shared';
+import {DOMAttributes, Key, KeyboardDelegate} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {Key, RefObject} from 'react';
+import {RefObject} from 'react';
 import {TreeState} from '@react-stately/tree';
 import {useSelectableList} from '@react-aria/selection';
 

packages/@react-aria/menu/src/useMenuItem.ts

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableElement, PressEvent} from '@react-types/shared';
+import {DOMAttributes, FocusableElement, Key, PressEvent} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useEffectEvent, useLayoutEffect, useRouter, useSlotId} from '@react-aria/utils';
 import {focusSafely} from '@react-aria/focus';
 import {getItemCount} from '@react-stately/collections';
 import {isFocusVisible, useHover, useKeyboard, usePress} from '@react-aria/interactions';
-import {Key, RefObject, useCallback, useRef} from 'react';
 import {menuData} from './useMenu';
+import {RefObject, useCallback, useRef} from 'react';
 import {TreeState} from '@react-stately/tree';
 import {useLocale} from '@react-aria/i18n';
 import {useSelectableItem} from '@react-aria/selection';

packages/@react-aria/selection/src/ListKeyboardDelegate.ts

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, Direction, KeyboardDelegate, Node, Orientation} from '@react-types/shared';
+import {Collection, Direction, Key, KeyboardDelegate, Node, Orientation} from '@react-types/shared';
 import {isScrollable} from '@react-aria/utils';
-import {Key, RefObject} from 'react';
+import {RefObject} from 'react';
 
 interface ListKeyboardDelegateOptions<T> {
   collection: Collection<Node<T>>,