fix: react types backwards compat

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

@@ -157,9 +157,9 @@ function useSSRCollectionNode<T extends Element>(Type: string, props: object, re
   return <Type ref={itemRef}>{children}</Type>;
 }
 
-export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactNode;
-export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactNode;
-export function createLeafComponent<P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement): (props: P & React.RefAttributes<any>) => ReactNode {
+export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactElement | null;
+export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactElement | null;
+export function createLeafComponent<P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement): (props: P & React.RefAttributes<any>) => ReactElement | null {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let focusableProps = useContext(FocusableContext);
@@ -190,7 +190,7 @@ export function createLeafComponent<P extends object, E extends Element>(type: s
   return Result;
 }
 
-export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement, useChildren: (props: P) => ReactNode = useCollectionChildren): (props: P & React.RefAttributes<E>) => ReactNode {
+export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement, useChildren: (props: P) => ReactNode = useCollectionChildren): (props: P & React.RefAttributes<E>) => ReactElement | null {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let children = useChildren(props);

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

@@ -11,7 +11,7 @@
  */
 
 import {forwardRefType} from '@react-types/shared';
-import React, {createContext, forwardRef, ReactElement, ReactNode, useContext} from 'react';
+import React, {createContext, forwardRef, JSX, ReactElement, ReactNode, useContext} from 'react';
 
 // React doesn't understand the <template> element, which doesn't have children like a normal element.
 // It will throw an error during hydration when it expects the firstChild to contain content rendered
@@ -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 {
   let isHidden = useContext(HiddenContext);
   if (isHidden) {
     // Don't hide again if we are already hidden.

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

@@ -12,7 +12,7 @@
 
 import clsx from 'clsx';
 import {mergeProps} from '@react-aria/utils';
-import React, {ReactElement, ReactNode} from 'react';
+import React, {ReactElement} from 'react';
 import {useFocusRing} from './useFocusRing';
 
 export interface FocusRingProps {
@@ -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>> {
   let {children, focusClass, focusRingClass} = props;
   let {isFocused, isFocusVisible, focusProps} = useFocusRing(props);
   let child = React.Children.only(children);

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

@@ -12,7 +12,7 @@
 
 import {isRTL} from './utils';
 import {Locale, useDefaultLocale} from './useDefaultLocale';
-import React, {ReactNode, useContext} from 'react';
+import React, {JSX, ReactNode, useContext} from 'react';
 
 export interface I18nProviderProps {
   /** Contents that should have the locale applied. */
@@ -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 {
   let {locale, children} = props;
   let defaultLocale = useDefaultLocale();
 

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

@@ -11,7 +11,7 @@
  */
 
 import type {LocalizedString} from '@internationalized/string';
-import React, {ReactNode} from 'react';
+import React, {JSX} from 'react';
 
 type PackageLocalizedStrings = {
   [packageName: string]: Record<string, LocalizedString>
@@ -27,7 +27,7 @@ interface PackageLocalizationProviderProps {
  * A PackageLocalizationProvider can be rendered on the server to inject the localized strings
  * needed by the client into the initial HTML.
  */
-export function PackageLocalizationProvider(props: PackageLocalizationProviderProps): ReactNode | null {
+export function PackageLocalizationProvider(props: PackageLocalizationProviderProps): JSX.Element | null {
   if (typeof document !== 'undefined') {
     console.log('PackageLocalizationProvider should only be rendered on the server.');
     return null;

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

@@ -14,7 +14,7 @@ import {FocusableElement} from '@react-types/shared';
 import {mergeProps, useObjectRef, useSyncRef} from '@react-aria/utils';
 import {PressProps} from './usePress';
 import {PressResponderContext} from './context';
-import React, {ForwardedRef, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {ForwardedRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 
 interface PressResponderProps extends PressProps {
   children: ReactNode
@@ -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 {
   let context = useMemo(() => ({register: () => {}}), []);
   return (
     <PressResponderContext.Provider value={context}>

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

@@ -13,7 +13,7 @@
 import {AriaLabelingProps, DOMProps} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {ReactNode} from 'react';
+import React, {JSX} from 'react';
 import {useLabels} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
@@ -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 {
   let {onDismiss, ...otherProps} = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/overlays');
 

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): React.ReactPortal | null {
   let isSSR = useIsSSR();
   let {portalContainer = isSSR ? null : document.body, isExiting} = props;
   let [contain, setContain] = useState(false);

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {createContext, ReactNode, useContext} from 'react';
+import React, {createContext, JSX, ReactNode, useContext} from 'react';
 
 export interface PortalProviderProps {
   /** Should return the element where we should portal to. Can clear the context by passing null. */
@@ -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 {
   let {getContainer} = props;
   let {getContainer: ctxGetContainer} = useUNSAFE_PortalContext();
   return (

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

@@ -11,7 +11,7 @@
  */
 
 import {DOMAttributes} from '@react-types/shared';
-import React, {AriaAttributes, ReactNode, useContext, useEffect, useMemo, useState} from 'react';
+import React, {AriaAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useState} from 'react';
 import ReactDOM from 'react-dom';
 import {useIsSSR} from '@react-aria/ssr';
 import {useUNSAFE_PortalContext} from './PortalProvider';
@@ -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 {
   let {children} = props;
   let parent = useContext(Context);
   let [modalCount, setModalCount] = useState(0);
@@ -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 {
   return (
     <ModalProvider>
       <OverlayContainerDOM {...props} />

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

@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement, RefObject} from '@react-types/shared';
-import React, {ReactNode, useRef} from 'react';
+import React, {JSX, ReactNode, useRef} from 'react';
 import {selectData} from './useSelect';
 import {SelectState} from '@react-stately/select';
 import {useFormReset} from '@react-aria/utils';
@@ -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 {
   let {state, triggerRef, label, name, isDisabled} = props;
   let selectRef = useRef(null);
   let {containerProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);

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

@@ -13,7 +13,7 @@
 import {focusWithoutScrolling, isMac, isWebKit} from './index';
 import {Href, LinkDOMProps, RouterOptions} from '@react-types/shared';
 import {isFirefox, isIPad} from './platform';
-import React, {createContext, DOMAttributes, ReactNode, useContext, useMemo} from 'react';
+import React, {createContext, DOMAttributes, JSX, ReactNode, useContext, useMemo} from 'react';
 
 interface Router {
   isNative: boolean,
@@ -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 {
   let {children, navigate, useHref} = props;
 
   let ctx = useMemo(() => ({

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

@@ -12,7 +12,7 @@
 
 import {Direction} from '@react-types/shared';
 import {LayoutInfo} from '@react-stately/virtualizer';
-import React, {CSSProperties, ReactNode, useRef} from 'react';
+import React, {CSSProperties, JSX, ReactNode, useRef} from 'react';
 import {useLocale} from '@react-aria/i18n';
 import {useVirtualizerItem, VirtualizerItemOptions} from './useVirtualizerItem';
 
@@ -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 {
   let {style, className, layoutInfo, virtualizer, parent, children} = props;
   let {direction} = useLocale();
   let ref = useRef<HTMLDivElement | null>(null);

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

@@ -12,7 +12,7 @@
 
 import {DOMAttributes} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
-import React, {CSSProperties, JSXElementConstructor, ReactNode, useMemo, useState} from 'react';
+import React, {CSSProperties, JSX, JSXElementConstructor, ReactNode, useMemo, useState} from 'react';
 import {useFocusWithin} from '@react-aria/interactions';
 
 export interface VisuallyHiddenProps extends DOMAttributes {
@@ -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 {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let {children, elementType: Element = 'div', isFocusable, style, ...otherProps} = props;
   let {visuallyHiddenProps} = useVisuallyHidden(props);

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

@@ -15,7 +15,7 @@ import ChevronRightSmall from '@spectrum-icons/ui/ChevronRightSmall';
 import {classNames} from '@react-spectrum/utils';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
-import React, {Fragment, ReactNode, useRef} from 'react';
+import React, {Fragment, JSX, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';
 import {useBreadcrumbItem} from '@react-aria/breadcrumbs';
 import {useHover} from '@react-aria/interactions';
@@ -25,7 +25,7 @@ interface SpectrumBreadcrumbItemProps extends BreadcrumbItemProps {
   isMenu?: boolean
 }
 
-export function BreadcrumbItem(props: SpectrumBreadcrumbItemProps): ReactNode {
+export function BreadcrumbItem(props: SpectrumBreadcrumbItemProps): JSX.Element {
   let {
     children,
     isCurrent,

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

@@ -23,7 +23,7 @@ import {DOMProps, RefObject, StyleProps} from '@react-types/shared';
 import {HelpText} from '@react-spectrum/label';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {HTMLAttributes, JSX, ReactNode} from 'react';
+import React, {HTMLAttributes, JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
@@ -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 {
   let {
     state,
     calendarProps,

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

@@ -15,7 +15,7 @@ import {CalendarDate, getDayOfWeek, isSameDay, isSameMonth, isToday} from '@inte
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {classNames} from '@react-spectrum/utils';
 import {mergeProps} from '@react-aria/utils';
-import React, {ReactNode, useRef} from 'react';
+import React, {JSX, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 import {useHover} from '@react-aria/interactions';
@@ -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 {
   let ref = useRef<HTMLElement>(null);
   let {
     cellProps,

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

@@ -16,7 +16,7 @@ import {CalendarPropsBase} from '@react-types/calendar';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {classNames} from '@react-spectrum/utils';
 import {DOMProps, StyleProps} from '@react-types/shared';
-import React, {ReactNode} from 'react';
+import React, {JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useCalendarGrid} from '@react-aria/calendar';
 
@@ -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 {
   let {
     state,
     startDate,

packages/@react-spectrum/color/src/ColorThumb.tsx

@@ -14,7 +14,7 @@ import {classNames} from '@react-spectrum/utils';
 import {Color} from '@react-types/color';
 import {DOMProps, RefObject} from '@react-types/shared';
 import {Overlay} from '@react-spectrum/overlays';
-import React, {CSSProperties, ReactElement, ReactNode, useRef, useState} from 'react';
+import React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react';
 import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';
 import stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';
 import {useId, useLayoutEffect} from '@react-aria/utils';
@@ -31,7 +31,7 @@ interface ColorThumbProps extends DOMProps {
   containerRef?: RefObject<HTMLElement | null>
 }
 
-function ColorThumb(props: ColorThumbProps): ReactNode {
+function ColorThumb(props: ColorThumbProps): JSX.Element {
   let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;
 
   let valueCSS = value.toString('css');

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

@@ -15,7 +15,7 @@ import {createCalendar} from '@internationalized/date';
 import {DatePickerSegment} from './DatePickerSegment';
 import datepickerStyles from './styles.css';
 import {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';
-import React, {ReactNode, useRef} from 'react';
+import React, {JSX, useRef} from 'react';
 import {useDateField} from '@react-aria/datepicker';
 import {useDateFieldState} from '@react-stately/datepicker';
 import {useLocale} from '@react-aria/i18n';
@@ -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 {
   let {
     isDisabled,
     isReadOnly,

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

@@ -13,7 +13,7 @@
 import {classNames} from '@react-spectrum/utils';
 import {DateFieldState, DateSegment} from '@react-stately/datepicker';
 import {DatePickerBase, DateValue} from '@react-types/datepicker';
-import React, {ReactNode, useRef} from 'react';
+import React, {JSX, useRef} from 'react';
 import styles from './styles.css';
 import {useDateSegment} from '@react-aria/datepicker';
 
@@ -26,7 +26,7 @@ interface LiteralSegmentProps {
   segment: DateSegment
 }
 
-export function DatePickerSegment({segment, state, ...otherProps}: DatePickerSegmentProps): ReactNode {
+export function DatePickerSegment({segment, state, ...otherProps}: DatePickerSegmentProps): JSX.Element {
   switch (segment.type) {
     // A separator, e.g. punctuation
     case 'literal':