Skip to content

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

Open
@zachbwh

Description

@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

[email protected], but the relevant transitive dependency seems to be react-aria/[email protected]

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions