fix: react types backwards compat #8099

snowystinger · 2025-04-16T01:24:32Z

chore: Explicit module boundary types introduced some breaking changes for people using old versions of typescript or @types/react
This PR reverts v3 and RAC to match what was implicitly defined in our build, but now it's explicit about it.
You can compare the old build either by building locally before that PR or comparing https://unpkg.com/[email protected]/dist/types.d.ts

You can use a diff tool for before and after.

✅ 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 · 2025-04-16T01:30:28Z

Build successful! 🎉

zachbwh

Thank you for this!

btw, to address the specific issues I raised here, I would expect to see more changes in the @react-aria packages, for example in @react-aria/overlays/DismissButton

snowystinger · 2025-04-16T08:02:34Z

Ah, thank you for catching the react-aria packages, I'll update it tomorrow to include those

snowystinger · 2025-04-16T20:33:00Z

@zachbwh thanks again, I've updated the PR

rspbot · 2025-04-16T20:42:38Z

Build successful! 🎉

devongovett · 2025-04-17T23:49:52Z

packages/@react-aria/collections/src/Hidden.tsx

 export const HiddenContext = createContext<boolean>(false);

-export function Hidden(props: {children: ReactNode}): ReactNode {
+export function Hidden(props: {children: ReactNode}): JSX.Element {


Why JSX.Element here but ReactElement in other places?

For some of these, unpkg was down, so I relied on the ts inference
this one is internal, so doesn't matter too much

sure, though it may have been inconsistent before as well. Just wondering which one we should use.

I've double checked all the old ones and included direct links to the previously generated output

Including link to comment on type https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d2c29760d5939b14a41084d0154efbf45161bcfe/types/react/index.d.ts#L4005

snowystinger · 2025-04-17T23:55:13Z

packages/@react-aria/focus/src/FocusRing.tsx

 * not with a mouse, touch, or other input methods.
 */
-export function FocusRing(props: FocusRingProps): ReactNode {
+export function FocusRing(props: FocusRingProps): JSX.Element {


I just checked the unpkg for this one, apparently it was ReactElement, I'll update a few of the others
https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts

snowystinger · 2025-04-17T23:57:19Z

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

 * Provides the locale for the application to all child components.
 */
-export function I18nProvider(props: I18nProviderProps): ReactNode {
+export function I18nProvider(props: I18nProviderProps): JSX.Element {


but this one was https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts

snowystinger · 2025-04-17T23:58:31Z

packages/@react-aria/interactions/src/PressResponder.tsx

 });

-export function ClearPressResponder({children}: {children: ReactNode}): ReactNode {
+export function ClearPressResponder({children}: {children: ReactNode}): JSX.Element {


and this one https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L98

snowystinger · 2025-04-17T23:59:17Z

packages/@react-aria/overlays/src/DismissButton.tsx

 * affordance to do so.
 */
-export function DismissButton(props: DismissButtonProps): ReactNode {
+export function DismissButton(props: DismissButtonProps): JSX.Element {


https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L199

snowystinger · 2025-04-18T00:00:08Z

packages/@react-aria/overlays/src/Overlay.tsx

 * and provides a focus scope for the child elements.
 */
-export function Overlay(props: OverlayProps): ReactNode | null {
+export function Overlay(props: OverlayProps): JSX.Element | null {


https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L300

snowystinger · 2025-04-18T00:00:30Z

packages/@react-aria/overlays/src/PortalProvider.tsx

 * Sets the portal container for all overlay elements rendered by its children.
 */
-export function UNSAFE_PortalProvider(props: PortalProviderProps): ReactNode {
+export function UNSAFE_PortalProvider(props: PortalProviderProps): JSX.Element {


https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L270

snowystinger · 2025-04-18T00:00:46Z

packages/@react-aria/overlays/src/useModal.tsx

 * like portals, which can cause the React tree and the DOM tree to differ significantly in structure.
 */
-export function ModalProvider(props: ModalProviderProps): ReactNode {
+export function ModalProvider(props: ModalProviderProps): JSX.Element {


https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L136

snowystinger · 2025-04-18T00:01:04Z

packages/@react-aria/overlays/src/useModal.tsx

 * overlay should be accessible at once.
 */
-export function OverlayProvider(props: ModalProviderProps): ReactNode {
+export function OverlayProvider(props: ModalProviderProps): JSX.Element {


https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L156

snowystinger · 2025-04-18T00:01:36Z

packages/@react-aria/select/src/HiddenSelect.tsx

 * form autofill, mobile form navigation, and native form submission.
 */
-export function HiddenSelect<T>(props: HiddenSelectProps<T>): ReactNode | null {
+export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null {


https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L75

snowystinger · 2025-04-18T00:02:09Z

packages/@react-aria/utils/src/openLink.tsx

 * and provides it to all nested React Aria links to enable client side navigation.
 */
-export function RouterProvider(props: RouterProviderProps): ReactNode {
+export function RouterProvider(props: RouterProviderProps): JSX.Element {


https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L138

snowystinger · 2025-04-18T00:02:46Z

packages/@react-aria/virtualizer/src/VirtualizerItem.tsx

 }

-export function VirtualizerItem(props: VirtualizerItemProps): ReactNode {
+export function VirtualizerItem(props: VirtualizerItemProps): JSX.Element {


https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L321

snowystinger · 2025-04-18T00:04:27Z

packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx

 * to screen readers.
 */
-export function VisuallyHidden(props: VisuallyHiddenProps): ReactNode {
+export function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element {


https://app.unpkg.com/@react-aria/[email protected]/files/dist/types.d.ts#L26

snowystinger · 2025-04-18T00:05:02Z

packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx

 }

-export function BreadcrumbItem(props: SpectrumBreadcrumbItemProps): ReactNode {
+export function BreadcrumbItem(props: SpectrumBreadcrumbItemProps): JSX.Element {


internal type

snowystinger · 2025-04-18T00:05:10Z

packages/@react-spectrum/calendar/src/CalendarBase.tsx

 }

-export function CalendarBase<T extends CalendarState | RangeCalendarState>(props: CalendarBaseProps<T>): ReactNode {
+export function CalendarBase<T extends CalendarState | RangeCalendarState>(props: CalendarBaseProps<T>): JSX.Element {


internal type

snowystinger · 2025-04-18T00:05:16Z

packages/@react-spectrum/calendar/src/CalendarCell.tsx

 }

-export function CalendarCell({state, currentMonth, firstDayOfWeek, ...props}: CalendarCellProps): ReactNode {
+export function CalendarCell({state, currentMonth, firstDayOfWeek, ...props}: CalendarCellProps): JSX.Element {


snowystinger · 2025-04-18T00:05:24Z

packages/@react-spectrum/calendar/src/CalendarMonth.tsx

 }

-export function CalendarMonth(props: CalendarMonthProps): ReactNode {
+export function CalendarMonth(props: CalendarMonthProps): JSX.Element {


snowystinger · 2025-04-18T00:06:54Z

packages/@react-spectrum/datepicker/src/DatePickerField.tsx

 }

-export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps<T>): ReactNode {
+export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps<T>): JSX.Element {


snowystinger · 2025-04-18T00:07:34Z

packages/@react-spectrum/dialog/src/DialogContainer.tsx

 * or when the trigger unmounts while the dialog is open.
 */
-export function DialogContainer(props: SpectrumDialogContainerProps): ReactNode {
+export function DialogContainer(props: SpectrumDialogContainerProps): JSX.Element {


https://app.unpkg.com/@react-spectrum/[email protected]/files/dist/types.d.ts#L24

snowystinger · 2025-04-18T00:08:45Z

packages/@react-spectrum/overlays/src/OpenTransition.tsx

  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  props
-): ReactNode {
+): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {


was any https://app.unpkg.com/@react-spectrum/[email protected]/files/dist/types.d.ts#L19 but according to inference, this is more accurate

devongovett · 2025-04-18T00:56:55Z

packages/@react-aria/focus/src/FocusRing.tsx

 * not with a mouse, touch, or other input methods.
 */
-export function FocusRing(props: FocusRingProps): ReactNode {
+export function FocusRing(props: FocusRingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> {


I think these are the defaults for the generic arguments right? So you don't need to include them?

i'll double check, but for some reason our build previously expanded like this, so figured it was better to match that

ok but that's not necessarily the right thing

rspbot · 2025-04-18T01:03:40Z

Build successful! 🎉

rspbot · 2025-04-18T01:17:39Z

Build successful! 🎉

devongovett

ok whatever, but I don't think matching what we had previously is necessarily the goal here. 🤷

snowystinger added 2 commits April 16, 2025 10:56

fix: keep more compatible React component types

8c89fa6

revert v3 explicit change

7308759

snowystinger mentioned this pull request Apr 16, 2025

Overlay components cannot be used as JSX components due to type errors #8092

Closed

zachbwh reviewed Apr 16, 2025

View reviewed changes

add react-aria components as well

eccc320

devongovett reviewed Apr 17, 2025

View reviewed changes

devongovett previously approved these changes Apr 17, 2025

View reviewed changes

snowystinger commented Apr 17, 2025

View reviewed changes

snowystinger commented Apr 18, 2025

View reviewed changes

fix remaining

0136c6a

snowystinger dismissed devongovett’s stale review via 0136c6a April 18, 2025 00:53

devongovett reviewed Apr 18, 2025

View reviewed changes

Merge branch 'main' into fix-react-types-backwards-compat

44bdfb5

devongovett approved these changes Apr 18, 2025

View reviewed changes

snowystinger added release ready for review labels May 5, 2025

dannify approved these changes May 7, 2025

View reviewed changes

snowystinger added this pull request to the merge queue May 7, 2025

Merged via the queue into main with commit 804cc82 May 7, 2025
30 checks passed

snowystinger deleted the fix-react-types-backwards-compat branch May 7, 2025 23:07

snowystinger mentioned this pull request May 10, 2025

chore: Explicit module boundary types #7764

Merged

5 tasks

MukulAppDev mentioned this pull request Jul 29, 2025

Tabs components cannot be used as JSX components due to type errors #8650

Closed

fix: react types backwards compat #8099

fix: react types backwards compat #8099

Uh oh!

Conversation

snowystinger commented Apr 16, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Apr 16, 2025

Uh oh!

zachbwh left a comment

Choose a reason for hiding this comment

Uh oh!

snowystinger commented Apr 16, 2025

Uh oh!

snowystinger commented Apr 16, 2025

Uh oh!

rspbot commented Apr 16, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Apr 18, 2025

Uh oh!

rspbot commented Apr 18, 2025

Uh oh!

devongovett left a comment

Choose a reason for hiding this comment