Skip to content

Commit 4dede01

Browse files
snowystingersnowystinger
authored
Update react types (#5237)
* Update Typescript and react types, use our own Key type
1 parent 66c2850 commit 4dede01

File tree

176 files changed

+762
-358
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

176 files changed

+762
-358
lines changed

‎.eslintrc.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ module.exports = {
5353
}, {
5454
files: ['**/test/**', '**/stories/**', '**/docs/**', '**/chromatic/**', '**/__tests__/**'],
5555
rules: {
56+
'rsp-rules/no-react-key': [ERROR],
5657
'rsp-rules/act-events-test': ERROR,
5758
'rsp-rules/no-getByRole-toThrow': ERROR,
5859
'rulesdir/imports': OFF,
@@ -182,7 +183,8 @@ module.exports = {
182183
'react-hooks/exhaustive-deps': WARN,
183184

184185
// custom rules
185-
'rulesdir/sort-imports': [ERROR],
186+
'rsp-rules/no-react-key': [ERROR],
187+
'rsp-rules/sort-imports': [ERROR],
186188
'rulesdir/imports': [ERROR],
187189
'rulesdir/useLayoutEffectRule': [ERROR],
188190
'rulesdir/pure-render': [ERROR],

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function App() {
4646
{(item: any) =>
4747
(<Row key={item.foo} UNSTABLE_childItems={item.childRows}>
4848
{(key) => {
49-
return <Cell>{item[key.toString()]}</Cell>;
49+
return <Cell>{item[key]}</Cell>;
5050
}}
5151
</Row>)
5252
}

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {Key} from 'react'
1+
import {Key} from '@react-types/shared';
22

33
interface Journal{
4-
rate: Key,
5-
description: string,
4+
rate: Key,
5+
description: string,
66
id: number
77
}
88

9-
export default Journal
9+
export default Journal

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function JournalEntries(props : {list : Journal[]}){
66
const element = props.list.map(item => (
77
<li key={item.id}>
88
<Divider size="M" marginTop="size-200" marginBottom="size-300" />
9-
<p>Your day was: {item.rate.toString()} </p>
9+
<p>Your day was: {item.rate} </p>
1010
<p>{item.description}</p>
1111
</li>
1212

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33

44
interface SectionProps {
55
title: string;
6-
children: JSX.Element | JSX.Element[];
6+
children: React.JSX.Element | React.JSX.Element[];
77
}
88

99
export default function Section(props: SectionProps) {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33

44
interface SectionProps {
55
title: string;
6-
children: JSX.Element | JSX.Element[];
6+
children: React.JSX.Element | React.JSX.Element[];
77
}
88

99
export default function Section(props: SectionProps) {

‎package.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"copyrights": "babel-node --presets @babel/env ./scripts/addHeaders.js",
3434
"build:icons": "babel-node --presets @babel/env ./scripts/buildIcons.js",
3535
"clean:icons": "babel-node --presets @babel/env ./scripts/cleanIcons.js",
36-
"postinstall": "yarn build:icons && patch-package",
36+
"postinstall": "patch-package && yarn build:icons",
3737
"plop": "plop --plopfile scripts/plopfile.js",
3838
"chromatic": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name 'build:chromatic'",
3939
"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 @@
9898
"@testing-library/jest-dom": "^5.16.5",
9999
"@testing-library/react": "^14.0.0",
100100
"@testing-library/user-event": "^14.4.3",
101-
"@types/react": "^18.2.7",
101+
"@types/react": "^18.2.28",
102102
"@types/storybook__react": "^5.2.1",
103-
"@typescript-eslint/eslint-plugin": "^5.40.0",
104-
"@typescript-eslint/parser": "^5.40.0",
103+
"@typescript-eslint/eslint-plugin": "^6.7.5",
104+
"@typescript-eslint/parser": "^6.7.5",
105105
"autoprefixer": "^9.6.0",
106106
"axe-core": "^4.6.3",
107107
"axe-playwright": "^1.1.11",
@@ -169,7 +169,7 @@
169169
"tailwindcss": "^3.2.2",
170170
"tailwindcss-animate": "^1.0.7",
171171
"tempy": "^0.5.0",
172-
"typescript": "5.0.4",
172+
"typescript": "5.2.2",
173173
"typescript-strict-plugin": "^2.0.0",
174174
"verdaccio": "^5.13.0",
175175
"walk-object": "^4.0.0",
@@ -178,6 +178,7 @@
178178
},
179179
"resolutions": {
180180
"@babel/core": "7.12.10",
181+
"@types/react": "18.2.28",
181182
"postcss": "8.4.24",
182183
"postcss-custom-properties": "13.2.0",
183184
"postcss-import": "15.1.0",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {DOMAttributes, FocusableElement} from '@react-types/shared';
14-
import {Key, RefObject, useEffect} from 'react';
13+
import {DOMAttributes, FocusableElement, Key} from '@react-types/shared';
1514
import {ListState} from '@react-stately/list';
1615
import {mergeProps, useEffectEvent} from '@react-aria/utils';
1716
import {PressProps} from '@react-aria/interactions';
17+
import {RefObject, useEffect} from 'react';
1818

1919
export interface AriaActionGroupItemProps {
2020
key: Key

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ import {flushSync} from 'react-dom';
1515
import React, {RefObject, useImperativeHandle, useRef, useState} from 'react';
1616

1717
export interface DragPreviewProps {
18-
children: (items: DragItem[]) => JSX.Element
18+
children: (items: DragItem[]) => React.JSX.Element
1919
}
2020

2121
function DragPreview(props: DragPreviewProps, ref: RefObject<DragPreviewRenderer>) {
2222
let render = props.children;
23-
let [children, setChildren] = useState<JSX.Element>(null);
23+
let [children, setChildren] = useState<React.JSX.Element>(null);
2424
let domRef = useRef(null);
2525

2626
useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement) => void) => {

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@
1313
import {AriaButtonProps} from '@react-types/button';
1414
import {clearGlobalDnDState, isInternalDropOperation, setDraggingKeys, useDragModality} from './utils';
1515
import {DraggableCollectionState} from '@react-stately/dnd';
16-
import {HTMLAttributes, Key} from 'react';
16+
import {HTMLAttributes} from 'react';
1717
// @ts-ignore
1818
import intlMessages from '../intl/*.json';
19+
import {Key} from '@react-types/shared';
1920
import {useDescription} from '@react-aria/utils';
2021
import {useDrag} from './useDrag';
2122
import {useLocalizedStringFormatter} from '@react-aria/i18n';

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212

1313
import * as DragManager from './DragManager';
1414
import {DroppableCollectionState} from '@react-stately/dnd';
15-
import {DropTarget} from '@react-types/shared';
15+
import {DropTarget, Key} from '@react-types/shared';
1616
import {getDroppableCollectionId} from './utils';
17-
import {HTMLAttributes, Key, RefObject} from 'react';
17+
import {HTMLAttributes, RefObject} from 'react';
1818
// @ts-ignore
1919
import intlMessages from '../intl/*.json';
2020
import {useDroppableItem} from './useDroppableItem';

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,13 @@ import {
2828
DropPosition,
2929
DropTarget,
3030
DropTargetDelegate,
31+
Key,
3132
KeyboardDelegate,
3233
Node
3334
} from '@react-types/shared';
3435
import * as DragManager from './DragManager';
3536
import {DroppableCollectionState} from '@react-stately/dnd';
36-
import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useRef} from 'react';
37+
import {HTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react';
3738
import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
3839
import {setInteractionModality} from '@react-aria/interactions';
3940
import {useAutoScroll} from './useAutoScroll';

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
*/
1212

1313
import {CUSTOM_DRAG_TYPE, DROP_OPERATION, GENERIC_TYPE, NATIVE_DRAG_TYPES} from './constants';
14-
import {DirectoryDropItem, DragItem, DropItem, FileDropItem, DragTypes as IDragTypes, TextDropItem} from '@react-types/shared';
14+
import {DirectoryDropItem, DragItem, DropItem, FileDropItem, DragTypes as IDragTypes, Key, TextDropItem} from '@react-types/shared';
1515
import {DroppableCollectionState} from '@react-stately/dnd';
1616
import {getInteractionModality, useInteractionModality} from '@react-aria/interactions';
17-
import {Key, RefObject} from 'react';
17+
import {RefObject} from 'react';
1818

1919
interface DroppableCollectionMap {
2020
id: string,

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {FocusRing} from '@react-aria/focus';
2020
import Folder from '@spectrum-icons/workflow/Folder';
2121
import {GridCollection, useGridState} from '@react-stately/grid';
2222
import {Item} from '@react-stately/collections';
23-
import {ItemDropTarget} from '@react-types/shared';
23+
import {ItemDropTarget, Key} from '@react-types/shared';
2424
import {ListDropTargetDelegate} from '@react-aria/dnd';
2525
import {ListKeyboardDelegate} from '@react-aria/selection';
2626
import React, {useRef} from 'react';
@@ -45,7 +45,7 @@ export function ReorderableGridExample(props) {
4545
]
4646
});
4747

48-
let onMove = (keys: React.Key[], target: ItemDropTarget) => {
48+
let onMove = (keys: Key[], target: ItemDropTarget) => {
4949
if (target.dropPosition === 'before') {
5050
list.moveBefore(target.key, keys);
5151
} else {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Direction, KeyboardDelegate, Node} from '@react-types/shared';
13+
import {Direction, Key, KeyboardDelegate, Node} from '@react-types/shared';
1414
import {getChildNodes, getFirstItem, getLastItem, getNthItem} from '@react-stately/collections';
1515
import {GridCollection} from '@react-types/grid';
16-
import {Key, RefObject} from 'react';
1716
import {Layout, Rect} from '@react-stately/virtualizer';
17+
import {RefObject} from 'react';
1818

1919
export interface GridKeyboardDelegateOptions<T, C> {
2020
collection: C,

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {AriaLabelingProps, DOMAttributes, DOMProps, KeyboardDelegate} from '@react-types/shared';
13+
import {AriaLabelingProps, DOMAttributes, DOMProps, Key, KeyboardDelegate} from '@react-types/shared';
1414
import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
1515
import {GridCollection} from '@react-types/grid';
1616
import {GridKeyboardDelegate} from './GridKeyboardDelegate';
1717
import {gridMap} from './utils';
1818
import {GridState} from '@react-stately/grid';
19-
import {Key, RefObject, useCallback, useMemo} from 'react';
19+
import {RefObject, useCallback, useMemo} from 'react';
2020
import {useCollator, useLocale} from '@react-aria/i18n';
2121
import {useGridSelectionAnnouncement} from './useGridSelectionAnnouncement';
2222
import {useHasTabbableChild} from '@react-aria/focus';

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
*/
1212

1313
import {announce} from '@react-aria/live-announcer';
14-
import {Collection, Node, Selection} from '@react-types/shared';
14+
import {Collection, Key, Node, Selection} from '@react-types/shared';
1515
// @ts-ignore
1616
import intlMessages from '../intl/*.json';
17-
import {Key, useRef} from 'react';
1817
import {SelectionManager} from '@react-stately/selection';
1918
import {useLocalizedStringFormatter} from '@react-aria/i18n';
19+
import {useRef} from 'react';
2020
import {useUpdateEffect} from '@react-aria/utils';
2121

2222
export interface GridSelectionAnnouncementProps {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {GridCollection} from '@react-types/grid';
33
import {GridState} from '@react-stately/grid';
44
// @ts-ignore
55
import intlMessages from '../intl/*.json';
6-
import {Key} from 'react';
6+
import {Key} from '@react-types/shared';
77
import {useId} from '@react-aria/utils';
88
import {useLocalizedStringFormatter} from '@react-aria/i18n';
99

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@
1212

1313
import type {GridCollection} from '@react-types/grid';
1414
import type {GridState} from '@react-stately/grid';
15-
import {Key} from 'react';
16-
import type {KeyboardDelegate} from '@react-types/shared';
15+
import type {Key, KeyboardDelegate} from '@react-types/shared';
1716

1817
interface GridMapShared {
1918
keyboardDelegate: KeyboardDelegate,

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,14 @@ import {
1616
DisabledBehavior,
1717
DOMAttributes,
1818
DOMProps,
19+
Key,
1920
KeyboardDelegate,
2021
MultipleSelection
2122
} from '@react-types/shared';
2223
import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
23-
import {Key, RefObject} from 'react';
2424
import {listMap} from './utils';
2525
import {ListState} from '@react-stately/list';
26+
import {RefObject} from 'react';
2627
import {useGridSelectionAnnouncement, useHighlightSelectionDescription} from '@react-aria/grid';
2728
import {useHasTabbableChild} from '@react-aria/focus';
2829
import {useSelectableList} from '@react-aria/selection';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Key} from 'react';
13+
import {Key} from '@react-types/shared';
1414
import type {ListState} from '@react-stately/list';
1515

1616
interface ListMapShared {

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

-4
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,7 @@ import {useMemo} from 'react';
1818
* and handles caching of the list formatter for performance.
1919
* @param options - Formatting options.
2020
*/
21-
22-
// Typescript version 4.7 supports Intl.ListFormat - TODO upgrade
23-
// @ts-ignore
2421
export function useListFormatter(options: Intl.ListFormatOptions = {}): Intl.ListFormat {
2522
let {locale} = useLocale();
26-
// @ts-ignore
2723
return useMemo(() => new Intl.ListFormat(locale, options), [locale, options]);
2824
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
*/
1212

1313
import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
14+
import {Key} from '@react-types/shared';
1415
import React, {useState} from 'react';
1516
import {SearchField} from '@react-spectrum/searchfield';
1617

@@ -80,7 +81,7 @@ function SearchExample() {
8081
<TableBody items={items}>
8182
{item =>
8283
(<Row key={item.key}>
83-
{key => <Cell>{item[key]}</Cell>}
84+
{(key: Key) => <Cell>{item[key]}</Cell>}
8485
</Row>)
8586
}
8687
</TableBody>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {DOMAttributes, FocusableElement} from '@react-types/shared';
13+
import {DOMAttributes, FocusableElement, Key} from '@react-types/shared';
1414
import {filterDOMProps, isMac, isWebKit, mergeProps, useSlotId} from '@react-aria/utils';
1515
import {getItemCount} from '@react-stately/collections';
1616
import {getItemId, listData} from './utils';
1717
import {isFocusVisible, useHover} from '@react-aria/interactions';
18-
import {Key, RefObject} from 'react';
1918
import {ListState} from '@react-stately/list';
19+
import {RefObject} from 'react';
2020
import {SelectableItemStates, useSelectableItem} from '@react-aria/selection';
2121

2222
export interface OptionAria extends SelectableItemStates {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Key} from 'react';
13+
import {Key} from '@react-types/shared';
1414
import {ListState} from '@react-stately/list';
1515

1616
interface ListData {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
*/
1212

1313
import {AriaMenuProps} from '@react-types/menu';
14-
import {DOMAttributes, KeyboardDelegate} from '@react-types/shared';
14+
import {DOMAttributes, Key, KeyboardDelegate} from '@react-types/shared';
1515
import {filterDOMProps, mergeProps} from '@react-aria/utils';
16-
import {Key, RefObject} from 'react';
16+
import {RefObject} from 'react';
1717
import {TreeState} from '@react-stately/tree';
1818
import {useSelectableList} from '@react-aria/selection';
1919

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {DOMAttributes, FocusableElement, PressEvent} from '@react-types/shared';
13+
import {DOMAttributes, FocusableElement, Key, PressEvent} from '@react-types/shared';
1414
import {filterDOMProps, mergeProps, useEffectEvent, useLayoutEffect, useRouter, useSlotId} from '@react-aria/utils';
1515
import {focusSafely} from '@react-aria/focus';
1616
import {getItemCount} from '@react-stately/collections';
1717
import {isFocusVisible, useHover, useKeyboard, usePress} from '@react-aria/interactions';
18-
import {Key, RefObject, useCallback, useRef} from 'react';
1918
import {menuData} from './useMenu';
19+
import {RefObject, useCallback, useRef} from 'react';
2020
import {TreeState} from '@react-stately/tree';
2121
import {useLocale} from '@react-aria/i18n';
2222
import {useSelectableItem} from '@react-aria/selection';

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Collection, Direction, KeyboardDelegate, Node, Orientation} from '@react-types/shared';
13+
import {Collection, Direction, Key, KeyboardDelegate, Node, Orientation} from '@react-types/shared';
1414
import {isScrollable} from '@react-aria/utils';
15-
import {Key, RefObject} from 'react';
15+
import {RefObject} from 'react';
1616

1717
interface ListKeyboardDelegateOptions<T> {
1818
collection: Collection<Node<T>>,

0 commit comments

Comments
 (0)