Update @types/react (#2766)

* Update `@types/react`

* Dedupe `@types/react`

* Add changeset

.changeset/soft-spoons-argue.md

@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+`ThemeProviderProps["children"]` was marked as a required prop as `ThemeProvider` should always wrap some subtree.

package.json

@@ -194,7 +194,7 @@
     "@testing-library/react": "13.0.0-alpha.5",
     "@types/jest": "^27.0.3",
     "@types/node": "^10.11.4",
-    "@types/react": "^16.9.11",
+    "@types/react": "^18.0.9",
     "babel-check-duplicated-nodes": "^1.0.0",
     "babel-eslint": "^10.1.0",
     "babel-flow-types": "^1.2.3",

packages/react/package.json

@@ -52,7 +52,6 @@
     "@emotion/css-prettifier": "1.0.1",
     "@emotion/server": "11.4.0",
     "@emotion/styled": "11.8.1",
-    "@types/react": "^16.9.11",
     "dtslint": "^4.2.1",
     "html-tag-names": "^1.1.2",
     "react": "16.14.0",

packages/react/types/tests-theming.tsx

@@ -14,9 +14,21 @@ declare const CompFC: React.FC<Props>
 declare class CompC extends React.Component<Props & { theme: Theme }> {}
 
 const WrappedCompC = withTheme(CompC)
+;<ThemeProvider theme={theme}>
+  <WrappedCompC prop />
+</ThemeProvider>
+;<ThemeProvider theme={() => theme}>
+  <div />
+</ThemeProvider>
+;<ThemeProvider theme={(outerTheme: Theme) => ({ ...outerTheme, ...theme })}>
+  <div />
+</ThemeProvider>
+// $ExpectError
+;<ThemeProvider theme={theme} />
+// $ExpectError
+;<ThemeProvider theme={theme}>{CompFC}</ThemeProvider>
+// $ExpectError
 ;<ThemeProvider theme={theme}>{WrappedCompC}</ThemeProvider>
-;<ThemeProvider theme={() => theme} />
-;<ThemeProvider theme={(outerTheme: Theme) => ({ ...outerTheme, ...theme })} />
 
 const ThemedFC = withTheme(CompFC)
 ;<ThemedFC prop />
@@ -85,4 +97,6 @@ const style2: ObjectStyleDefinition = {
 }
 
 // Can use ThemeProvider
-;<ThemeProvider theme={{ primary: 'val' }} />
+;<ThemeProvider theme={{ primary: 'val' }}>
+  <div />
+</ThemeProvider>

packages/react/types/tests.tsx

@@ -179,10 +179,23 @@ const anim1 = keyframes`
 }
 
 {
+  // based on the code from @types/react@17.x
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/98fa4486aefd5a1916aa385402467a7157e3c73f/types/react/v17/index.d.ts#L540-L548
+  type OldFC<P = {}> = OldFunctionComponent<P>
+  interface OldFunctionComponent<P = {}> {
+    (props: React.PropsWithChildren<P>, context?: any): React.ReactElement<
+      any,
+      any
+    > | null
+    propTypes?: React.WeakValidationMap<P> | undefined
+    contextTypes?: React.ValidationMap<any> | undefined
+    defaultProps?: Partial<P> | undefined
+    displayName?: string | undefined
+  }
   // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/40993
-  // this is really problematic behaviour by @types/react IMO
-  // but it's what @types/react does so let's not break it.
-  const CompWithImplicitChildren: React.FC = () => null
+  // this is really problematic behaviour by @types/react@<18 IMO
+  // but it's what @types/react did so let's not break it.
+  const CompWithImplicitChildren: OldFC = () => null
   ;<CompWithImplicitChildren>
     content
     <div />

packages/react/types/theming.d.ts

@@ -7,7 +7,7 @@ import { DistributiveOmit, PropsOf } from './helper'
 
 export interface ThemeProviderProps {
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
-  children?: React.ReactNode
+  children: React.ReactNode
 }
 
 export interface ThemeProvider {

yarn.lock

@@ -6129,19 +6129,20 @@
     "@types/react" "*"
 
 "@types/react-native@^0.63.2":
-  version "0.63.2"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.2.tgz#428a4d71351ccbc31ab170b5f32477c7ce78dfd7"
-  integrity sha512-oxbp084lUsZvwfdWmWxKjJAuqEraQDRf+cE/JgwmrHQMguSrmgIHZ3xkeoQ5FYnW5NHIPpHudB3BbjL1Zn3vnA==
+  version "0.63.61"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.61.tgz#44fd2ec982bb15a0ee12dbfa70fb0f779e54465e"
+  integrity sha512-9WgPhoDCmz0TZl3LKaGG2YDlN+N7AW/bio4kEhzitNLANPuaagfUr4KbcSx1wuUPmb9AFks1V/PG+2L3Y2rdkg==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.11":
-  version "16.9.11"
-  resolved "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz#70e0b7ad79058a7842f25ccf2999807076ada120"
-  integrity sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==
+"@types/react@*", "@types/react@^18.0.9":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
   dependencies:
     "@types/prop-types" "*"
-    csstype "^2.2.0"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
 
 "@types/resolve@0.0.8":
   version "0.0.8"
@@ -6172,6 +6173,11 @@
     "@types/glob" "*"
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/semver@^6.0.0", "@types/semver@^6.0.1":
   version "6.0.1"
   resolved "https://registry.npmjs.org/@types/semver/-/semver-6.0.1.tgz#a984b405c702fa5a7ec6abc56b37f2ba35ef5af6"
@@ -10702,7 +10708,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.2.0, csstype@^2.5.7:
+csstype@^2.5.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==