fix(react): change return type of Consumers as JSX.Element (#891)

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

Same reason with #887

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

.changeset/wicked-mails-check.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+fix(react): change return type of Consumers as JSX.Element

packages/react-query/src/SuspenseInfiniteQuery.test-d.tsx

@@ -1,5 +1,6 @@
 import { queryFn, queryKey } from '@suspensive/test-utils'
 import type { InfiniteData } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
 import { describe, expectTypeOf, it } from 'vitest'
 import { SuspenseInfiniteQuery } from './SuspenseInfiniteQuery'
 import type { UseSuspenseInfiniteQueryResult } from './useSuspenseInfiniteQuery'
@@ -92,5 +93,10 @@ describe('<SuspenseInfiniteQuery/>', () => {
         {() => <></>}
       </SuspenseInfiniteQuery>
     ).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(
+      <SuspenseInfiniteQuery queryKey={queryKey} queryFn={queryFn}>
+        {() => <></>}
+      </SuspenseInfiniteQuery>
+    ).not.toEqualTypeOf<ReactNode>()
   })
 })

packages/react-query/src/SuspenseQuery.test-d.tsx

@@ -1,4 +1,5 @@
 import { queryFn, queryKey } from '@suspensive/test-utils'
+import type { ReactNode } from 'react'
 import { describe, expectTypeOf, it } from 'vitest'
 import { SuspenseQuery } from './SuspenseQuery'
 import type { UseSuspenseQueryResult } from './useSuspenseQuery'
@@ -84,5 +85,10 @@ describe('<SuspenseQuery/>', () => {
         {() => <></>}
       </SuspenseQuery>
     ).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(
+      <SuspenseQuery queryKey={queryKey} queryFn={queryFn}>
+        {() => <></>}
+      </SuspenseQuery>
+    ).not.toEqualTypeOf<ReactNode>()
   })
 })

packages/react/src/ErrorBoundary.test-d.tsx

@@ -1,5 +1,5 @@
 import { CustomError, CustomNotError } from '@suspensive/test-utils'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import { ErrorBoundary } from './ErrorBoundary'
 import type { ConstructorType } from './utility-types'
 
@@ -34,4 +34,9 @@ describe('<ErrorBoundary/>', () => {
       ></ErrorBoundary>
     )
   })
+
+  it('type check', () => {
+    expectTypeOf(<ErrorBoundary.Consumer>{() => <></>}</ErrorBoundary.Consumer>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(<ErrorBoundary.Consumer>{() => <></>}</ErrorBoundary.Consumer>).not.toEqualTypeOf<ReactNode>()
+  })
 })

packages/react/src/ErrorBoundary.tsx

@@ -181,8 +181,9 @@ export const ErrorBoundary = Object.assign(
     return ErrorBoundary
   })(),
   {
-    Consumer: ({ children }: { children: (errorBoundary: ReturnType<typeof useErrorBoundary>) => ReactNode }) =>
-      children(useErrorBoundary()),
+    Consumer: ({ children }: { children: (errorBoundary: ReturnType<typeof useErrorBoundary>) => ReactNode }) => (
+      <>{children(useErrorBoundary())}</>
+    ),
   }
 )
 

packages/react/src/ErrorBoundaryGroup.test-d.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import { ErrorBoundaryGroup } from './ErrorBoundaryGroup'
+
+describe('ErrorBoundaryGroup', () => {
+  it('type check', () => {
+    expectTypeOf(<ErrorBoundaryGroup.Consumer>{() => <></>}</ErrorBoundaryGroup.Consumer>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(
+      <ErrorBoundaryGroup.Consumer>{() => <></>}</ErrorBoundaryGroup.Consumer>
+    ).not.toEqualTypeOf<ReactNode>()
+  })
+})

packages/react/src/ErrorBoundaryGroup.tsx

@@ -59,7 +59,7 @@ export const ErrorBoundaryGroup = Object.assign(
       children,
     }: {
       children: (errorBoundaryGroup: ReturnType<typeof useErrorBoundaryGroup>) => ReactNode
-    }) => children(useErrorBoundaryGroup()),
+    }) => <>{children(useErrorBoundaryGroup())}</>,
   }
 )