Update to React 18 (#28710)

Updates react packages and corresponding `@types/`, all the
`@wordpress/*` and `@types/wordpress__*`, and `@testing-library/react`.

Also updates some indirect deps of `@storybook/addon-actions` and
`@storybook/react` that we have new overrides for.

Also `@testing-library/react-hooks` has been merged into
`@testing-library/react` now, so we need to remove that (and then update
tests to get `renderHook` from the latter package instead).

Additional code changes:

* Replace deprecated `react-dom` methods with `@wordpress/element`
* Adjust jest configs.
* Add missing `act()` and other waiting in tests.
* Declare `children` in some TypeScript types.
* Replace deprecated wp.components.Dropdown position prop.
* Add mocking for GB color settings.

Then add new overrides to .pnpmfile.cjs. Various indirect deps don't
declare support for React 18 yet.

.pnpmfile.cjs

@@ -40,6 +40,14 @@ function fixDeps( pkg ) {
 		if ( pkg.dependencies[ '@types/webpack' ] ) {
 			pkg.dependencies[ '@types/webpack' ] = '^5';
 		}
+
+		// Same for some react deps, again fixed in v7.
+		if ( pkg.dependencies[ 'react-inspector' ] ) {
+			pkg.dependencies[ 'react-inspector' ] += ' || ^6';
+		}
+		if ( pkg.dependencies[ 'react-element-to-jsx-string' ] ) {
+			pkg.dependencies[ 'react-element-to-jsx-string' ] += ' || ^15';
+		}
 	}
 
 	// Undeclared dependency on prop-types.
@@ -81,14 +89,6 @@ function fixDeps( pkg ) {
 		}
 	}
 
-	// Override @types/react* dependencies in order to use their specific versions
-	// @todo This is probably not safe: https://github.com/Automattic/jetpack/pull/24294#discussion_r881708463
-	for ( const dep of [ '@types/react', '@types/react-dom', '@types/react-test-renderer' ] ) {
-		if ( pkg.dependencies?.[ dep ] ) {
-			pkg.dependencies[ dep ] = '17.x';
-		}
-	}
-
 	// Regular expression DOS.
 	// Dep is via storybook, fix in v7: https://github.com/storybookjs/storybook/issues/14603#issuecomment-1105006210
 	if ( pkg.dependencies.trim === '0.0.1' ) {
@@ -116,6 +116,15 @@ function fixDeps( pkg ) {
 		delete pkg.dependencies[ '@testing-library/dom' ];
 	}
 
+	// Outdated dependency.
+	// No upstream bug link yet.
+	if (
+		pkg.name === '@automattic/social-previews' &&
+		pkg.dependencies[ '@wordpress/components' ] === '^19.15.0'
+	) {
+		pkg.dependencies[ '@wordpress/components' ] = '*';
+	}
+
 	return pkg;
 }
 
@@ -128,32 +137,48 @@ function fixDeps( pkg ) {
  * @returns {object} Modified pkg.
  */
 function fixPeerDeps( pkg ) {
-	// React 17 is entirely compatible with React 16, but of course abandoned packages exist...
-	const react16Pkgs = new Set( [
-		'react-dates', // @wordpress/components <https://github.com/WordPress/gutenberg/issues/21820?>
-		'airbnb-prop-types', // @wordpress/components → react-dates
-		'react-with-direction', // @wordpress/components → react-dates → react-with-styles
+	// Indirect deps that still depend on React <18.
+	const reactOldPkgs = new Set( [
+		// Still on 16.
 		'react-autosize-textarea', // @wordpress/block-editor <https://github.com/WordPress/gutenberg/issues/39619>
+
+		// Still on 17.
+		'reakit', // @wordpress/components
+		'reakit-system', // @wordpress/components → reakit
+		'reakit-utils', // @wordpress/components → reakit
+		'reakit-warning', // @wordpress/components → reakit
+		'@mdx-js/react',
+		'@automattic/components',
+		'@automattic/social-previews',
 	] );
-	if ( react16Pkgs.has( pkg.name ) ) {
+	if ( reactOldPkgs.has( pkg.name ) ) {
 		for ( const p of [ 'react', 'react-dom' ] ) {
+			if ( ! pkg.peerDependencies?.[ p ] ) {
+				continue;
+			}
+
 			if (
-				pkg.peerDependencies?.[ p ] &&
 				pkg.peerDependencies[ p ].match( /(?:^|\|\|\s*)(?:\^16|16\.x)/ ) &&
 				! pkg.peerDependencies[ p ].match( /(?:^|\|\|\s*)(?:\^17|17\.x)/ )
 			) {
 				pkg.peerDependencies[ p ] += ' || ^17';
 			}
+			if (
+				pkg.peerDependencies[ p ].match( /(?:^|\|\|\s*)(?:\^17|17\.x)/ ) &&
+				! pkg.peerDependencies[ p ].match( /(?:^|\|\|\s*)(?:\^18|18\.x)/ )
+			) {
+				pkg.peerDependencies[ p ] += ' || ^18';
+			}
 		}
 	}
 
-	// Outdated peer dependency. Major version bump was apparently the addition of TypeScript types.
+	// Outdated peer dependency.
 	// No upstream bug link yet.
 	if (
 		pkg.name === '@automattic/components' &&
 		pkg.peerDependencies[ '@wordpress/data' ] === '^6.1.5'
 	) {
-		pkg.peerDependencies[ '@wordpress/data' ] = '^6.1.5 || ^7.0.0';
+		pkg.peerDependencies[ '@wordpress/data' ] = '*';
 	}
 
 	return pkg;