Update react types #5237

snowystinger · 2023-10-12T05:06:18Z

Closes #5157

Also handles https://github.com/orgs/adobe/projects/19/views/4?pane=issue&itemId=41163780

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2023-10-12T05:15:46Z

Build successful! 🎉

snowystinger · 2023-10-12T05:27:34Z

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


tested via verdaccio build
see https://github.com/adobe/react-spectrum/pull/5237/commits commit See if we fixed the key issue in the CRA app circle ci build

snowystinger · 2023-10-12T05:30:04Z

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[];


React got rid of the global namespace, but JSX is still in the React namespace, so reference through that
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L3309

deprecated but not removed. Doesn't really explain why it broke. Any idea?

It broke between RAC alpha 4 and alpha 5 https://unpkg.com/browse/react-aria-components@1.0.0-alpha.5/dist/
Here's the list of commits between those two versions 5911ed2...7186d21

in alpha 4, we exported using the global namespace which included JSX. in alpha 5, we stopped doing that and started exporting the React namespaced version.

I suspect some parcel or update to types in our own repo which caused us to stop using the global namespace, but I haven't nailed it down yet. Upgrading the types caused it to be marked as deprecated in our own code base, but the problem was already present.

I'm following up with the issue author because I suspect they have multiple copies of react types. I suspect users just need to upgrade their types and dedupe.

it "broke" in 1123b0f
we upgraded our react/types from 17 to 18, and it seems as though our type generation is smart enough to find the non-global namespace of JSX and prefer that. I'm not sure where that is in the parcel transformer?

I haven't actually "fixed" it in this PR, I think people have to update themselves which is what I followed up with the issue author to do.

In addition to explicit references to the global JSX (RAC DialogTrigger), we also have many implicit references to it. Any inferred component's return value for instance. So if we wanted to "fix" this by using the global JSX namespace again, we'd need to handle both of these.

snowystinger · 2023-10-12T05:30:59Z

package.json

@@ -31,7 +31,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",


run first so that we can fix lodash types before icons build since they'll fail if the types are bad

snowystinger · 2023-10-12T05:32:58Z

packages/@react-types/shared/src/key.d.ts

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


this a good place for the type?

I'd have just put it in collections.d.ts. But if you want to keep it in a new file you'll need a license header.

snowystinger · 2023-10-13T05:27:53Z

packages/dev/docs/src/PropTable.js

@@ -76,7 +76,12 @@ const GROUPS = {
 };

 export function PropTable({component, links, style}) {
-  let [ungrouped, groups] = groupProps(component.props.properties);
+  let ungrouped, groups;
+  if (!component.props) {


I'm not sure what about the typescript update broke this, but some times we now get 'parameters' instead of just 'props'

snowystinger · 2023-10-13T05:29:15Z

packages/@react-spectrum/labeledvalue/docs/types.ts

@@ -6,6 +6,5 @@ export interface LabeledValueProps extends LabeledValueBaseProps {
  /** The value to display. */
  value: string | string[] | number | RangeValue<number> | DateTime | RangeValue<DateTime>,
  /** Formatting options for the value. The available options depend on the type passed to the `value` prop. */
-  // @ts-ignore


we could have gotten rid of these Intl.ListFormatOptions anytime after upgrading ts to v5, may as well remove it here

snowystinger · 2023-10-13T05:30:42Z

packages/dev/eslint-plugin-rsp-rules/index.js

-  'no-getByRole-toThrow': noGetByRoleToThrow
+  'no-getByRole-toThrow': noGetByRoleToThrow,
+  'no-react-key': noReactKey,
+  'sort-imports': sortImports


moved in here so i could add some tests more easily

snowystinger · 2023-10-13T05:31:54Z

patches/@types+lodash+4.14.194.patch

+ }
+-
+-// Backward compatibility with --target es5
+-declare global {


not sure why lodash has this but I don't think it's needed and it was causing our build to fail because we don't skip lib check

rspbot · 2023-10-13T05:36:36Z

Build successful! 🎉

reidbarber

LGTM, let's get this in for testing.

rspbot · 2023-10-14T00:02:09Z

Build successful! 🎉

rspbot · 2023-10-15T21:55:02Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx # yarn.lock

rspbot · 2023-10-26T01:50:07Z

Build successful! 🎉

LFDanLu

commenting a review here to merge some newline removals nits, will push a separate commit for the rest

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

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

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

packages/@react-aria/table/src/TableKeyboardDelegate.ts

packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts

packages/@react-spectrum/card/src/BaseLayout.tsx

rspbot · 2023-10-26T21:00:13Z

Build successful! 🎉

LFDanLu

LGTM, verified that the new lint rule works as well

devongovett · 2023-10-26T21:38:56Z

looks good aside from the undefined.JSX.Element showing up in the docs

rspbot · 2023-10-27T23:12:38Z

Build successful! 🎉

# Conflicts: # packages/@react-aria/interactions/stories/useFocusRing.stories.tsx # packages/@react-aria/tag/src/useTagGroup.ts # packages/@react-spectrum/form/stories/Form.stories.tsx # packages/@react-types/autocomplete/src/index.d.ts # yarn.lock

snowystinger · 2023-10-27T23:20:46Z

looks good aside from the undefined.JSX.Element showing up in the docs

@devongovett fixed

rspbot · 2023-10-27T23:30:10Z

Build successful! 🎉

LFDanLu

LGTM, verified that the undefined.JSX.Element are fixed. Looks like you've got some conflicts so I'll approve after those are fixed

# Conflicts: # packages/react-aria-components/src/Collection.tsx # packages/react-aria-components/src/ListBox.tsx # packages/react-aria-components/src/utils.tsx

rspbot · 2023-10-31T23:25:12Z

Build successful! 🎉

rspbot · 2023-11-02T17:22:16Z

Build successful! 🎉

rspbot · 2023-11-03T04:27:00Z

Build successful! 🎉

rspbot · 2023-11-03T04:27:02Z

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

@react-aria/dnd

DragPreviewProps

 DragPreviewProps {
-  children: (Array<DragItem>) => JSX.Element
+  children: (Array<DragItem>) => React.JSX.Element
 }

useClipboard

 DragPreview {
-  children: (Array<DragItem>) => JSX.Element
+  children: (Array<DragItem>) => React.JSX.Element
 }

@react-spectrum/dnd

DragAndDropOptions

 DragAndDropOptions {
   getItems?: (Set<Key>) => Array<DragItem> = () => []
-  renderPreview?: (Set<Key>, Key) => JSX.Element
+  renderPreview?: (Set<Key>, Key) => React.JSX.Element
 }

it changed:

useDragAndDrop

DragAndDropHooks

 DragAndDropHooks {
   dragAndDropHooks: (DragHooks & DropHooks & {
     isVirtualDragging?: () => boolean
-  renderPreview?: (Set<Key>, Key) => JSX.Element
+  renderPreview?: (Set<Key>, Key) => React.JSX.Element
 })
 }

it changed:

useDragAndDrop

@react-spectrum/list

ListView

 ListView<T extends {}> {
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   overflowMode?: 'truncate' | 'wrap' = 'truncate'
-  renderEmptyState?: () => JSX.Element
+  renderEmptyState?: () => React.JSX.Element
 }

SpectrumListViewProps

 SpectrumListViewProps<T> {
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   overflowMode?: 'truncate' | 'wrap' = 'truncate'
-  renderEmptyState?: () => JSX.Element
+  renderEmptyState?: () => React.JSX.Element
 }

@react-spectrum/table

Column

 TableView<T extends {}> {
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
   isQuiet?: boolean
   onAction?: (Key) => void
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
-  renderEmptyState?: () => JSX.Element
+  renderEmptyState?: () => React.JSX.Element
 }

CellProps

 SpectrumTableProps<T> {
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
   isQuiet?: boolean
   onAction?: (Key) => void
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
-  renderEmptyState?: () => JSX.Element
+  renderEmptyState?: () => React.JSX.Element
 }

@react-spectrum/tag

TagGroup

 TagGroup<T extends {}> {
   actionLabel?: string
   maxRows?: number
   onAction?: () => void
-  renderEmptyState?: () => JSX.Element
+  renderEmptyState?: () => React.JSX.Element
 }

SpectrumTagGroupProps

 SpectrumTagGroupProps<T> {
   actionLabel?: string
   maxRows?: number
   onAction?: () => void
-  renderEmptyState?: () => JSX.Element
+  renderEmptyState?: () => React.JSX.Element
 }

snowystinger added 5 commits October 11, 2023 17:32

Update Typescript

a7fed41

Convert to our own Key

f195c37

attempt to fix esm build

1c201da

See if we fixed the key issue in the CRA app

e035406

revert circleci

1ef9647

snowystinger added 2 commits October 12, 2023 16:18

No longer use deprecated JSX global namespace

3a03d1e

fix lint

52d6ab5

snowystinger commented Oct 12, 2023

View reviewed changes

fix prop tables

4872f12

snowystinger commented Oct 13, 2023

View reviewed changes

reidbarber previously approved these changes Oct 13, 2023

View reviewed changes

Merge branch 'main' into update-ts

e6bd0c6

add license header

e807b54

snowystinger dismissed reidbarber’s stale review via e807b54 October 15, 2023 21:45

reidbarber previously approved these changes Oct 17, 2023

View reviewed changes

Merge branch 'main' into update-ts

bbe25ac

# Conflicts: # packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx # yarn.lock

snowystinger dismissed reidbarber’s stale review via bbe25ac October 26, 2023 01:37

LFDanLu reviewed Oct 26, 2023

View reviewed changes

getting rid of extra newlines

07c9cf8

LFDanLu previously approved these changes Oct 26, 2023

View reviewed changes

fix props table

3c3957f

snowystinger dismissed LFDanLu’s stale review via 3c3957f October 27, 2023 23:02

Merge branch 'main' into update-ts

f6d2cbe

# Conflicts: # packages/@react-aria/interactions/stories/useFocusRing.stories.tsx # packages/@react-aria/tag/src/useTagGroup.ts # packages/@react-spectrum/form/stories/Form.stories.tsx # packages/@react-types/autocomplete/src/index.d.ts # yarn.lock

LFDanLu reviewed Oct 31, 2023

View reviewed changes

Merge branch 'main' into update-ts

4156b72

# Conflicts: # packages/react-aria-components/src/Collection.tsx # packages/react-aria-components/src/ListBox.tsx # packages/react-aria-components/src/utils.tsx

LFDanLu approved these changes Oct 31, 2023

View reviewed changes

snowystinger and others added 2 commits November 2, 2023 18:08

Merge branch 'main' into update-ts

7a5e6b8

Merge branch 'main' into update-ts

204c7dc

devongovett approved these changes Nov 3, 2023

View reviewed changes

snowystinger added 2 commits November 3, 2023 15:03

Merge branch 'main' into update-ts

3787860

Merge branch 'main' into update-ts

9c020a7

snowystinger merged commit 4dede01 into main Nov 3, 2023

snowystinger deleted the update-ts branch November 3, 2023 04:46

snowystinger mentioned this pull request Nov 29, 2023

React Aria Key type incompatible with React Key type due to missing bigint #5492

Closed

yihuiliao mentioned this pull request Dec 5, 2023

Fix prop table in docs #5532

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update react types #5237

Update react types #5237

snowystinger commented Oct 12, 2023 •

edited

Loading

rspbot commented Oct 12, 2023

snowystinger Oct 12, 2023

snowystinger Oct 12, 2023

devongovett Oct 13, 2023

snowystinger Oct 14, 2023 •

edited

Loading

snowystinger Oct 15, 2023

snowystinger Oct 12, 2023

snowystinger Oct 12, 2023

devongovett Oct 13, 2023

snowystinger Oct 13, 2023

snowystinger Oct 13, 2023

snowystinger Oct 13, 2023

snowystinger Oct 13, 2023

rspbot commented Oct 13, 2023

reidbarber left a comment

rspbot commented Oct 14, 2023

rspbot commented Oct 15, 2023

rspbot commented Oct 26, 2023

LFDanLu left a comment

rspbot commented Oct 26, 2023

LFDanLu left a comment

devongovett commented Oct 26, 2023

rspbot commented Oct 27, 2023

snowystinger commented Oct 27, 2023 •

edited

Loading

rspbot commented Oct 27, 2023

LFDanLu left a comment

rspbot commented Oct 31, 2023

rspbot commented Nov 2, 2023

rspbot commented Nov 3, 2023

rspbot commented Nov 3, 2023

Update react types #5237

Update react types #5237

Conversation

snowystinger commented Oct 12, 2023 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Oct 12, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snowystinger Oct 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Oct 13, 2023

reidbarber left a comment

Choose a reason for hiding this comment

rspbot commented Oct 14, 2023

rspbot commented Oct 15, 2023

rspbot commented Oct 26, 2023

LFDanLu left a comment

Choose a reason for hiding this comment

rspbot commented Oct 26, 2023

LFDanLu left a comment

Choose a reason for hiding this comment

devongovett commented Oct 26, 2023

rspbot commented Oct 27, 2023

snowystinger commented Oct 27, 2023 • edited Loading

rspbot commented Oct 27, 2023

LFDanLu left a comment

Choose a reason for hiding this comment

rspbot commented Oct 31, 2023

rspbot commented Nov 2, 2023

rspbot commented Nov 3, 2023

rspbot commented Nov 3, 2023

@react-aria/dnd

DragPreviewProps

useClipboard

@react-spectrum/dnd

DragAndDropOptions

DragAndDropHooks

@react-spectrum/list

ListView

SpectrumListViewProps

@react-spectrum/table

Column

CellProps

@react-spectrum/tag

TagGroup

SpectrumTagGroupProps

snowystinger commented Oct 12, 2023 •

edited

Loading

snowystinger Oct 14, 2023 •

edited

Loading

snowystinger commented Oct 27, 2023 •

edited

Loading