diff --git a/.changeset/soft-spoons-argue.md b/.changeset/soft-spoons-argue.md new file mode 100644 index 000000000..3324411ba --- /dev/null +++ b/.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. diff --git a/package.json b/package.json index a662065ed..86dedd501 100644 --- a/package.json +++ b/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", diff --git a/packages/react/package.json b/packages/react/package.json index d85e04460..e88201a9c 100644 --- a/packages/react/package.json +++ b/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", diff --git a/packages/react/types/tests-theming.tsx b/packages/react/types/tests-theming.tsx index 9c14b532a..3481deb18 100644 --- a/packages/react/types/tests-theming.tsx +++ b/packages/react/types/tests-theming.tsx @@ -14,9 +14,21 @@ declare const CompFC: React.FC declare class CompC extends React.Component {} const WrappedCompC = withTheme(CompC) +; + + +; theme}> +
+ +; ({ ...outerTheme, ...theme })}> +
+ +// $ExpectError +; +// $ExpectError +;{CompFC} +// $ExpectError ;{WrappedCompC} -; theme} /> -; ({ ...outerTheme, ...theme })} /> const ThemedFC = withTheme(CompFC) ; @@ -85,4 +97,6 @@ const style2: ObjectStyleDefinition = { } // Can use ThemeProvider -; +; +
+ diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx index 586b04765..bd54db51c 100644 --- a/packages/react/types/tests.tsx +++ b/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

= OldFunctionComponent

+ interface OldFunctionComponent

{ + (props: React.PropsWithChildren

, context?: any): React.ReactElement< + any, + any + > | null + propTypes?: React.WeakValidationMap

| undefined + contextTypes?: React.ValidationMap | undefined + defaultProps?: Partial

| 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 ; content

diff --git a/packages/react/types/theming.d.ts b/packages/react/types/theming.d.ts index 279bd2233..ace837bcb 100644 --- a/packages/react/types/theming.d.ts +++ b/packages/react/types/theming.d.ts @@ -7,7 +7,7 @@ import { DistributiveOmit, PropsOf } from './helper' export interface ThemeProviderProps { theme: Partial | ((outerTheme: Theme) => Theme) - children?: React.ReactNode + children: React.ReactNode } export interface ThemeProvider { diff --git a/yarn.lock b/yarn.lock index 09f9d1ade..ba04f678f 100644 --- a/yarn.lock +++ b/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==