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

[zachbwh]

Provide a general summary of the issue here

I'm just upgrading to the latest version of react-aria now and I'm getting a number of type errors that appear to be related to this PR (I believe this commit is responsible).

🤔 Expected Behavior?

There should be no type errors when using DismissButton or OverlayProvider components as JSX elements.

😯 Current Behavior

There are type errors when using the DismissButton or OverlayProvider components as a JSX elements

💁 Possible Solution

The return types of at least some of the overlay components should probably be ReactElement and not ReactNode, since ReactNode is broader than required and prevents components from being used as JSX elements.

I've highlighted DismissButton and OverlayProvider because they're the errors I've encountered so far. I suspect there are more components than that with this issue.

🔦 Context

No response

🖥️ Steps to Reproduce

1. Using @react-aria/overlays version 3.27.0
2. Attempt to use the DismissButton component, like below
3. See the below type errors

import React from 'react'
import { DismissButton } from 'react-aria'
import type { DismissButtonProps } from 'react-aria'

type AriaDismissProps = DismissButtonProps

export const AriaDismiss = ({ onDismiss }: AriaDismissProps) => {
  return (
    <DismissButton
      aria-label="Dismiss"
      onDismiss={onDismiss}
    />
  )
}

'DismissButton' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

We're in the process of moving away from react 17, so our @react-types @types/react version is currently 17.0.85

Version

react-aria@3.38.1, but the relevant transitive dependency seems to be react-aria/overlays@3.27.0

What browsers are you seeing the problem on?

Other

If other, please specify.

No response

What operating system are you using?

macOS Sequoia Version 15.4

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

What version of React Types are you on? you may need to update that.

[zachbwh]

What version of React Types are you on? you may need to update that.

We're on @types/react 17.0.85, which I believe is the latest version of v17 (published 19 days ago).

As for @react-types, I can repro with @react-types/overlays@3.8.14 in addition to the other specified packages. We use react-aria, react-stately, and react-types as a transitive dependency. I can repro when all the aforementioned packages are on the latest versions (though technically I haven't bumped react-aria, but I have deleted the lockfile and regenerated it's resolved dependencies.

[abeljohn]

I'm running into the same issue when trying to upgrade to react-aria-components 1.8.0, for several components that now return ReactNode.

Upgrading @types/react from 18.2.0 to 18.2.79 did not solve the issue, likely because I'm still using typescript 4.8.4, and overriding JSX.ElementType (which @types/react does) was only added in typescript 5.1.

[snowystinger]

I've opened a PR to explicitly go back to the types we implicitly had before, sorry for the disruption. #8099

[devongovett]

Please upgrade your dependencies though 😉. React 17 is almost 5 years old. TypeScript 4.8 is almost 3. At some point compatibility with these will inevitably break.

[mtpetros]

Thanks for the fix! When will this be published in a release?

[reidbarber]

Most likely within the next week or two. A nightly release is available to use now.