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

@@ -35,7 +35,7 @@ if (typeof HTMLTemplateElement !== 'undefined') {

 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

@@ -40,7 +40,7 @@ export interface FocusRingProps {
 * Focus rings are visible only when the user is interacting with a keyboard,
 * 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

@@ -26,7 +26,7 @@ const I18nContext = React.createContext<Locale | null>(null);
 /**
 * 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

@@ -56,7 +56,7 @@ export const PressResponder = React.forwardRef(({children, ...props}: PressRespo
  );
 });

-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

@@ -28,7 +28,7 @@ export interface DismissButtonProps extends AriaLabelingProps, DOMProps {
 * users to dismiss a modal or popup when there is no visual
 * 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

@@ -49,7 +49,7 @@ export const OverlayContext = React.createContext<{contain: boolean, setContain:
 * A container which renders an overlay such as a popover or modal in a portal,
 * 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

@@ -26,7 +26,7 @@ export const PortalContext = createContext<PortalProviderContextValue>({});
 /**
 * 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

@@ -37,7 +37,7 @@ const Context = React.createContext<ModalContext | null>(null);
 * subtree from screen readers. This is done using React context in order to account for things
 * 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

@@ -101,7 +101,7 @@ function OverlayContainerDOM(props: ModalProviderProps) {
 * if a modal or other overlay is opened. Only the top-most modal or
 * 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

@@ -109,7 +109,7 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
 * Renders a hidden native `<select>` element, which can be used to support browser
 * 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

@@ -37,7 +37,7 @@ interface RouterProviderProps {
 * A RouterProvider accepts a `navigate` function from a framework or client side router,
 * 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

@@ -24,7 +24,7 @@ interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
  children: ReactNode
 }

-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

@@ -86,7 +86,7 @@ export function useVisuallyHidden(props: VisuallyHiddenProps = {}): VisuallyHidd
 * VisuallyHidden hides its children visually, while keeping content visible
 * 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

@@ -25,7 +25,7 @@ interface SpectrumBreadcrumbItemProps extends BreadcrumbItemProps {
  isMenu?: boolean
 }

-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

@@ -38,7 +38,7 @@ interface CalendarBaseProps<T extends CalendarState | RangeCalendarState> extend
  calendarRef: RefObject<HTMLDivElement | null>
 }

-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

@@ -27,7 +27,7 @@ interface CalendarCellProps extends AriaCalendarCellProps {
  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
 }

-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

@@ -25,7 +25,7 @@ interface CalendarMonthProps extends CalendarPropsBase, DOMProps, StyleProps {
  startDate: CalendarDate
 }

-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

@@ -26,7 +26,7 @@ interface DatePickerFieldProps<T extends DateValue> extends SpectrumDatePickerPr
  maxGranularity?: SpectrumDatePickerProps<T>['granularity']
 }

-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

@@ -21,7 +21,7 @@ import {useOverlayTriggerState} from '@react-stately/overlays';
 * it in a modal. Useful in cases where there is no trigger element
 * 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

@@ -35,15 +35,15 @@ const OPEN_STATES = {
 export function OpenTransition(
  // 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

@@ -40,7 +40,7 @@ export interface FocusRingProps {
 * Focus rings are visible only when the user is interacting with a keyboard,
 * 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

Open

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

fix: react types backwards compat #8099

Are you sure you want to change the base?

fix: react types backwards compat #8099

Conversation

snowystinger commented Apr 16, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Apr 16, 2025

zachbwh left a comment

Choose a reason for hiding this comment

snowystinger commented Apr 16, 2025

snowystinger commented Apr 16, 2025

rspbot commented Apr 16, 2025

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

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

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 Apr 18, 2025

rspbot commented Apr 18, 2025

devongovett left a comment

Choose a reason for hiding this comment