diff --git a/.changeset/wicked-boxes-lick.md b/.changeset/wicked-boxes-lick.md new file mode 100644 index 000000000..9d94671c4 --- /dev/null +++ b/.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. diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts index 07f8468be..ed51fb030 100644 --- a/packages/react/types/index.d.ts +++ b/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 diff --git a/packages/react/types/jsx-namespace.d.ts b/packages/react/types/jsx-namespace.d.ts index d43bee28c..101c582ac 100644 --- a/packages/react/types/jsx-namespace.d.ts +++ b/packages/react/types/jsx-namespace.d.ts @@ -18,7 +18,12 @@ type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes type ReactJSXIntrinsicClassAttributes = JSX.IntrinsicClassAttributes 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 + export namespace EmotionJSX { + type ElementType = ReactJSXElementType interface Element extends ReactJSXElement {} interface ElementClass extends ReactJSXElementClass {} interface ElementAttributesProperty diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx index bd54db51c..0a2d59143 100644 --- a/packages/react/types/tests.tsx +++ b/packages/react/types/tests.tsx @@ -245,19 +245,3 @@ const anim1 = keyframes` ? true : false } - -// RMWC-like component test -declare const OtherComponent: { - ( - props: - | React.AllHTMLAttributes - | React.ComponentPropsWithRef, - ref: any - ): JSX.Element - displayName?: string -} -; { - console.log(ev.currentTarget.value) - }} -/>