fix: react types backwards compat (#8099)

* fix: keep more compatible React component types

* revert v3 explicit change

* add react-aria components as well

* fix remaining

Author: snowystinger

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} />