Update react types (#5237)

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

Author: snowystinger

.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';