Added ElementType to the Emotion's JSX namespace (#3048)

* Support JSX.ElementType

* Reexport ElementType

* Remove failing test case due to type safe concerns

see also: #3048 (comment)

* Create wicked-boxes-lick.md

---------

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>

.changeset/wicked-boxes-lick.md

@@ -0,0 +1,5 @@
+---
+"@emotion/react": patch
+---
+
+Added `ElementType` to the Emotion's `JSX` namespace. It's defined in the same way as the one in `@types/react` and should make it possible to use components that return `string`s, `Promise`s and other types that are valid in React.

packages/react/types/index.d.ts

@@ -96,6 +96,7 @@ export function ClassNames(props: ClassNamesProps): ReactElement
 export const jsx: typeof createElement
 export namespace jsx {
   namespace JSX {
+    type ElementType = EmotionJSX.ElementType
     interface Element extends EmotionJSX.Element {}
     interface ElementClass extends EmotionJSX.ElementClass {}
     interface ElementAttributesProperty

packages/react/types/jsx-namespace.d.ts

@@ -18,7 +18,12 @@ type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
 type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
 type ReactJSXIntrinsicElements = JSX.IntrinsicElements
 
+// based on the code from @types/react@18.2.8
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
+type ReactJSXElementType = string | React.JSXElementConstructor<any>
+
 export namespace EmotionJSX {
+  type ElementType = ReactJSXElementType
   interface Element extends ReactJSXElement {}
   interface ElementClass extends ReactJSXElementClass {}
   interface ElementAttributesProperty

packages/react/types/tests.tsx

@@ -245,19 +245,3 @@ const anim1 = keyframes`
       ? true
       : false
 }
-
-// RMWC-like component test
-declare const OtherComponent: {
-  <Tag extends React.ElementType>(
-    props:
-      | React.AllHTMLAttributes<HTMLInputElement>
-      | React.ComponentPropsWithRef<Tag>,
-    ref: any
-  ): JSX.Element
-  displayName?: string
-}
-;<OtherComponent
-  onChange={ev => {
-    console.log(ev.currentTarget.value)
-  }}
-/>