diff --git a/packages/@react-aria/collections/src/CollectionBuilder.tsx b/packages/@react-aria/collections/src/CollectionBuilder.tsx index ac3c5b73f0b..595ae3d4822 100644 --- a/packages/@react-aria/collections/src/CollectionBuilder.tsx +++ b/packages/@react-aria/collections/src/CollectionBuilder.tsx @@ -33,11 +33,16 @@ export interface CollectionBuilderProps> { /** * Builds a `Collection` from the children provided to the `content` prop, and passes it to the child render prop function. */ -export function CollectionBuilder>(props: CollectionBuilderProps) { +export function CollectionBuilder>(props: CollectionBuilderProps): ReactElement { // If a document was provided above us, we're already in a hidden tree. Just render the content. let doc = useContext(CollectionDocumentContext); if (doc) { - return props.content; + // The React types prior to 18 did not allow returning ReactNode from components + // even though the actual implementation since React 16 did. + // We must return ReactElement so that TS does not complain that + // is not a valid JSX element with React 16 and 17 types. + // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544 + return props.content as ReactElement; } // Otherwise, render a hidden copy of the children so that we can build the collection before constructing the state. @@ -151,9 +156,9 @@ function useSSRCollectionNode(Type: string, props: object, re return {children}; } -export function createLeafComponent(type: string, render: (props: P, ref: ForwardedRef) => ReactNode): (props: P & React.RefAttributes) => ReactNode | null; -export function createLeafComponent(type: string, render: (props: P, ref: ForwardedRef, node: Node) => ReactNode): (props: P & React.RefAttributes) => ReactNode | null; -export function createLeafComponent

(type: string, render: (props: P, ref: ForwardedRef, node?: any) => ReactNode) { +export function createLeafComponent(type: string, render: (props: P, ref: ForwardedRef) => ReactElement): (props: P & React.RefAttributes) => ReactElement | null; +export function createLeafComponent(type: string, render: (props: P, ref: ForwardedRef, node: Node) => ReactElement): (props: P & React.RefAttributes) => ReactElement | null; +export function createLeafComponent

(type: string, render: (props: P, ref: ForwardedRef, node?: any) => ReactElement) { let Component = ({node}) => render(node.props, node.props.ref, node); let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef) => { let isShallow = useContext(ShallowRenderContext); @@ -171,7 +176,7 @@ export function createLeafComponent

(type: s return Result; } -export function createBranchComponent(type: string, render: (props: P, ref: ForwardedRef, node: Node) => ReactNode, useChildren: (props: P) => ReactNode = useCollectionChildren) { +export function createBranchComponent(type: string, render: (props: P, ref: ForwardedRef, node: Node) => ReactElement, useChildren: (props: P) => ReactNode = useCollectionChildren) { let Component = ({node}) => render(node.props, node.props.ref, node); let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef) => { let children = useChildren(props); diff --git a/packages/@react-aria/collections/src/Hidden.tsx b/packages/@react-aria/collections/src/Hidden.tsx index f68fc637941..51cfa96034e 100644 --- a/packages/@react-aria/collections/src/Hidden.tsx +++ b/packages/@react-aria/collections/src/Hidden.tsx @@ -12,7 +12,7 @@ import {createPortal} from 'react-dom'; import {forwardRefType} from '@react-types/shared'; -import React, {createContext, forwardRef, ReactNode, useContext} from 'react'; +import React, {createContext, forwardRef, ReactElement, ReactNode, useContext} from 'react'; import {useIsSSR} from '@react-aria/ssr'; // React doesn't understand the