chore(deps): bump the react group across 1 directory with 2 updates

dotcom-rendering/index.d.ts

@@ -29,91 +29,91 @@ interface PerformanceEntry {
 	renderTime: number;
 }
 
-declare namespace JSX {
-	interface IntrinsicElements {
-		/** Island {@link ./src/components/Island.tsx} */
-		'gu-island': import('./src/components/Island.tsx').GuIsland;
-	}
+declare namespace React {
+	namespace JSX {
+		interface IntrinsicElements {
+			/** Island {@link ./src/components/Island.tsx} */
+			'gu-island': import('./src/components/Island.tsx').GuIsland;
+		}
 
-	interface IntrinsicAttributes {
-		/**
-		 * **Rendered Components – Ophan**
-		 *
-		 * The Ophan client automatically tracks components on the page
-		 * that have the `data-component` attribute.
-		 * To avoid race conditions, it is best to add this attribute only
-		 * to server-rendered HTML.
-		 *
-		 * Add `data-component="component-name"` to the element you want
-		 * to track.
-		 *
-		 * The page views table will then contain `component-name` when the
-		 * element is present on the page.
-		 */
-		'data-component'?: string;
-		/**
-		 * **Component Clicks – Ophan**
-		 *
-		 * The Ophan client automatically tracks click interactions
-		 * on components that have the `data-link-name` attribute.
-		 * To avoid race conditions, it is best to add this attribute only
-		 * to server-rendered HTML.
-		 *
-		 * Some elements are not trackable, e.g. `div`, `span`.
-		 * Refer to the Ophan documentation for more information.
-		 * https://github.com/guardian/ophan/blob/0f365862682cd97cc50cf381299e0f4875e2996c/tracker-js/src/click-path-capture.js
-		 *
-		 * Add `data-component="component-name"` to the element you want
-		 * to track. Then `add data-link-name="link-name"` to the anchor for which
-		 * clicks will be tracked.
-		 *
-		 * The page views table will then contain `link-name` when the
-		 * link is clicked.
-		 */
-		'data-link-name'?: string;
-		/**
-		 * Ignore a DOM element in Chromatic builds with `data-chromatic="ignore"`.
-		 *
-		 * https://www.chromatic.com/docs/ignoring-elements/#ignore-dom-elements
-		 *
-		 * Note that if the dimensions of the ignored element
-		 * change, Chromatic will still capture the incoming changes.
-		 */
-		'data-chromatic'?: 'ignore';
+		interface IntrinsicAttributes {
+			/**
+			 * **Rendered Components – Ophan**
+			 *
+			 * The Ophan client automatically tracks components on the page
+			 * that have the `data-component` attribute.
+			 * To avoid race conditions, it is best to add this attribute only
+			 * to server-rendered HTML.
+			 *
+			 * Add `data-component="component-name"` to the element you want
+			 * to track.
+			 *
+			 * The page views table will then contain `component-name` when the
+			 * element is present on the page.
+			 */
+			'data-component'?: string;
+			/**
+			 * **Component Clicks – Ophan**
+			 *
+			 * The Ophan client automatically tracks click interactions
+			 * on components that have the `data-link-name` attribute.
+			 * To avoid race conditions, it is best to add this attribute only
+			 * to server-rendered HTML.
+			 *
+			 * Some elements are not trackable, e.g. `div`, `span`.
+			 * Refer to the Ophan documentation for more information.
+			 * https://github.com/guardian/ophan/blob/0f365862682cd97cc50cf381299e0f4875e2996c/tracker-js/src/click-path-capture.js
+			 *
+			 * Add `data-component="component-name"` to the element you want
+			 * to track. Then `add data-link-name="link-name"` to the anchor for which
+			 * clicks will be tracked.
+			 *
+			 * The page views table will then contain `link-name` when the
+			 * link is clicked.
+			 */
+			'data-link-name'?: string;
+			/**
+			 * Ignore a DOM element in Chromatic builds with `data-chromatic="ignore"`.
+			 *
+			 * https://www.chromatic.com/docs/ignoring-elements/#ignore-dom-elements
+			 *
+			 * Note that if the dimensions of the ignored element
+			 * change, Chromatic will still capture the incoming changes.
+			 */
+			'data-chromatic'?: 'ignore';
 
-		/**
-		 * **Spacefinder Role**
-		 *
-		 * [Spacefinder](https://github.com/guardian/commercial/blob/7866c914573cb6352b4076683b7906b87a70da72/docs/spacefinder/readme.md)
-		 * is a part of the commercial bundle that is used to find positions
-		 * for ad slots within articles.
-		 *
-		 * Spacefinder has rules specified for elements with this data attribute
-		 * that it will use to find positions for ads.
-		 */
-		'data-spacefinder-role'?:
-			| 'nested'
-			| 'immersive'
-			| 'fullWidth'
-			| 'inline'
-			| 'richLink'
-			| 'thumbnail';
+			/**
+			 * **Spacefinder Role**
+			 *
+			 * [Spacefinder](https://github.com/guardian/commercial/blob/7866c914573cb6352b4076683b7906b87a70da72/docs/spacefinder/readme.md)
+			 * is a part of the commercial bundle that is used to find positions
+			 * for ad slots within articles.
+			 *
+			 * Spacefinder has rules specified for elements with this data attribute
+			 * that it will use to find positions for ads.
+			 */
+			'data-spacefinder-role'?:
+				| 'nested'
+				| 'immersive'
+				| 'fullWidth'
+				| 'inline'
+				| 'richLink'
+				| 'thumbnail';
 
-		/**
-		 * **Spacefinder Type**
-		 *
-		 * [Spacefinder](https://github.com/guardian/commercial/blob/7866c914573cb6352b4076683b7906b87a70da72/docs/spacefinder/readme.md)
-		 * is a part of the commercial bundle that is used to find positions
-		 * for ad slots within articles.
-		 *
-		 * Spacefinder has rules specified for elements with this data attribute
-		 * that it will use to find positions for ads.
-		 */
-		'data-spacefinder-type'?: import('./src/types/content').FEElement['_type'];
+			/**
+			 * **Spacefinder Type**
+			 *
+			 * [Spacefinder](https://github.com/guardian/commercial/blob/7866c914573cb6352b4076683b7906b87a70da72/docs/spacefinder/readme.md)
+			 * is a part of the commercial bundle that is used to find positions
+			 * for ad slots within articles.
+			 *
+			 * Spacefinder has rules specified for elements with this data attribute
+			 * that it will use to find positions for ads.
+			 */
+			'data-spacefinder-type'?: import('./src/types/content').FEElement['_type'];
+		}
 	}
-}
 
-declare namespace React {
 	interface CSSProperties {
 		// Allow custom properties to be passed to the style prop
 		[key: `--${string}`]: string | undefined;

dotcom-rendering/package.json

@@ -75,8 +75,8 @@
 		"@types/lodash.get": "4.4.9",
 		"@types/node": "catalog:",
 		"@types/qs": "6.9.15",
-		"@types/react": "18.3.1",
-		"@types/react-dom": "18.3.0",
+		"@types/react": "19.2.18",
+		"@types/react-dom": "19.2.4",
 		"@types/react-google-recaptcha": "2.1.9",
 		"@types/react-test-renderer": "18.3.0",
 		"@types/relateurl": "0.2.33",
@@ -132,8 +132,8 @@
 		"postcss-styled-syntax": "0.7.1",
 		"preact": "10.15.1",
 		"preact-render-to-string": "6.0.2",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.2.8",
+		"react-dom": "19.2.8",
 		"react-google-recaptcha": "3.1.0",
 		"rehype-autolink-headings": "7.1.0",
 		"rehype-slug": "6.0.0",

dotcom-rendering/scripts/jest/setup.ts

@@ -2,7 +2,7 @@
 import '@testing-library/jest-dom';
 import { ReadableStream } from 'node:stream/web';
 import { TextDecoder, TextEncoder } from 'node:util';
-import { MessagePort } from 'node:worker_threads';
+import { MessageChannel, MessagePort } from 'node:worker_threads';
 import { isServer } from '../../src/lib/isServer';
 import type { Guardian } from '../../src/model/guardian';
 
@@ -112,6 +112,8 @@ global.TextDecoder = TextDecoder as unknown as typeof global.TextDecoder;
 global.ReadableStream =
 	ReadableStream as unknown as typeof global.ReadableStream;
 global.MessagePort = MessagePort as unknown as typeof global.MessagePort;
+global.MessageChannel =
+	MessageChannel as unknown as typeof global.MessageChannel;
 
 if (!isServer) {
 	Object.defineProperty(window, 'matchMedia', {

dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx

@@ -5,7 +5,7 @@ import {
 	headlineMedium17,
 	textSans15,
 } from '@guardian/source/foundations';
-import type { MouseEvent } from 'react';
+import type { JSX, MouseEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { formatTime } from '../../lib/formatTime';
 import { palette } from '../../palette';

dotcom-rendering/src/components/AudioPlayerWeb.island.tsx

@@ -170,7 +170,7 @@ export const AudioPlayerWeb = ({
 
 	// ********************* interactions *********************
 
-	const boundingClientRect = useRef<DOMRect>();
+	const boundingClientRect = useRef<DOMRect>(undefined);
 
 	const playPause = useCallback(() => {
 		if (audioRef.current) {

dotcom-rendering/src/components/AuthProviderButtons/AuthProviderButtons.tsx

@@ -28,7 +28,7 @@ type AuthProviderButtonsProps = {
 
 type AuthProviderButtonProps = {
 	label: string;
-	icon: React.ReactElement;
+	icon: React.ReactElement<any>;
 	socialProvider: string;
 	queryParams: QueryParams;
 	onClick?: (provider: AuthButtonProvider) => void;
@@ -120,7 +120,7 @@ const authProviderButtonLabel = (label: string) => {
 	return `Sign in with ${capitalisedLabel}`;
 };
 
-const socialButtonIcon = (socialProvider: string): React.ReactElement => {
+const socialButtonIcon = (socialProvider: string): React.ReactElement<any> => {
 	switch (socialProvider) {
 		case 'google':
 			return <SvgGoogleBrand />;

dotcom-rendering/src/components/Callout/MessageUs.tsx

@@ -32,7 +32,9 @@ export const formatContactType = (s: string): string =>
 		? 'WhatsApp'
 		: s.charAt(0).toUpperCase() + s.slice(1);
 
-export const conditionallyRenderContactIcon = (name: string): ReactElement => {
+export const conditionallyRenderContactIcon = (
+	name: string,
+): ReactElement<any> => {
 	switch (name.toLowerCase()) {
 		case 'whatsapp':
 			return <SvgWhatsAppBrand size="small" />;

dotcom-rendering/src/components/Card/components/CardFooter.tsx

@@ -5,6 +5,7 @@ import {
 	space,
 	textSansBold12,
 } from '@guardian/source/foundations';
+import type { JSX } from 'react';
 import { type ArticleFormat, ArticleSpecial } from '../../../lib/articleFormat';
 import type { ArticleMedia } from '../../../types/mainMedia';
 import { CardPill } from '../../CardPill';

dotcom-rendering/src/components/Carousel.island.tsx

@@ -100,8 +100,8 @@ const CarouselColours = ({
 	children,
 }: {
 	props: { format: ArticleFormat } | { palette: DCRContainerPalette };
-	children: React.ReactElement;
-}): React.ReactElement => {
+	children: React.ReactElement<any>;
+}): React.ReactElement<any> => {
 	if ('palette' in props) {
 		return (
 			<ContainerOverrides containerPalette={props.palette}>

dotcom-rendering/src/components/DirectoryPageNav.island.tsx

@@ -43,7 +43,7 @@ interface SlimDirectoryPageNavConfig {
 	textHoverColor: PlatformColor;
 	backgroundColor: PlatformColor;
 	borderColor: PlatformColor;
-	titleIcon?: React.ReactElement;
+	titleIcon?: React.ReactElement<any>;
 	title: { label: string; id: string };
 	links: Array<{ label: string; id: string }>;
 	slimNav: true;
@@ -54,7 +54,7 @@ interface FullDirectoryPageNavConfig {
 	tagIds: string[];
 	textColor: PlatformColor;
 	backgroundColor: PlatformColor;
-	titleIcon?: React.ReactElement;
+	titleIcon?: React.ReactElement<any>;
 	title: { label: string; id: string };
 	links: Array<{ label: string; id: string }>;
 	backgroundImages: {

dotcom-rendering/src/components/Discussion/PillarButton.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { textSansBold15 } from '@guardian/source/foundations';
 import { Button } from '@guardian/source/react-components';
+import type { JSX } from 'react';
 import { palette as themePalette } from '../../palette';
 
 type Props = {

dotcom-rendering/src/components/EnhancePinnedPost.island.tsx

@@ -120,7 +120,7 @@ export const EnhancePinnedPost = () => {
 	const { renderingTarget } = useConfig();
 
 	const pinnedPostTiming =
-		useRef<ReturnType<typeof startPerformanceMeasure>>();
+		useRef<ReturnType<typeof startPerformanceMeasure>>(undefined);
 
 	const checkContentHeight = useCallback(() => {
 		if (!pinnedPostContent) {

dotcom-rendering/src/components/EpicContent.apps.tsx

@@ -21,7 +21,7 @@ export function EpicContent({
 	body,
 	firstButton,
 	secondButton,
-}: EpicProps): React.ReactElement | null {
+}: EpicProps): React.ReactElement<any> | null {
 	const [impressionSeen, setImpressionSeenRef] = useIsInView({
 		debounce: true,
 	});

dotcom-rendering/src/components/ExpandableAtom/Body.tsx

@@ -5,6 +5,7 @@ import {
 	textSans14,
 } from '@guardian/source/foundations';
 import { SvgInfoRound } from '@guardian/source/react-components';
+import type { JSX } from 'react';
 import { palette as themePalette } from '../../palette';
 
 const imageStyling = css`

dotcom-rendering/src/components/ExpandableAtom/Container.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { palette as sourcePalette } from '@guardian/source/foundations';
+import type { JSX } from 'react';
 import { palette as themePalette } from '../../palette';
 import { Summary } from './Summary';
 

dotcom-rendering/src/components/ExpandableAtom/Footer.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { textSans14 } from '@guardian/source/foundations';
-import { useState } from 'react';
+import { type JSX, useState } from 'react';
 import { palette as themePalette } from '../../palette';
 
 /// LIKE/DISLIKE FEEDBACK FOOTER

dotcom-rendering/src/components/ExpandableAtom/Summary.tsx

@@ -5,7 +5,7 @@ import {
 	textSans15,
 } from '@guardian/source/foundations';
 import { SvgMinus, SvgPlus } from '@guardian/source/react-components';
-import { useState } from 'react';
+import { type JSX, useState } from 'react';
 import { palette as themePalette } from '../../palette';
 
 /// SUMMARY ELEMENT

dotcom-rendering/src/components/Footer.stories.tsx

@@ -5,6 +5,7 @@ import {
 	space,
 	textSans34,
 } from '@guardian/source/foundations';
+import type { JSX } from 'react';
 import { Standard } from '../../fixtures/generated/fe-articles/Standard';
 import { Pillar } from '../lib/articleFormat';
 import { editionList } from '../lib/edition';

dotcom-rendering/src/components/GuideAtom/GuideAtom.stories.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import type { JSX } from 'react';
 import { splitTheme } from '../../../.storybook/decorators/splitThemeDecorator';
 import {
 	analysisStoryExpanded,

dotcom-rendering/src/components/GuideAtom/GuideAtom.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { submitComponentEvent } from '../../client/ophan/ophan';
 import { useConfig } from '../ConfigContext';
 import { Body } from '../ExpandableAtom/Body';

dotcom-rendering/src/components/Island.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { type JSX, useContext } from 'react';
 import type { ScheduleOptions, SchedulePriority } from '../lib/scheduler';
 import { IslandContext, IslandProvider } from './IslandContext';
 

dotcom-rendering/src/components/Lazy.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import type { JSX } from 'react';
 import { useIsInView } from '../lib/useIsInView';
 
 type Props = {

dotcom-rendering/src/components/ManyNewslettersForm.tsx

@@ -28,7 +28,7 @@ export interface FormProps {
 	useReCaptcha?: boolean;
 	captchaSiteKey?: string;
 	visibleRecaptcha?: boolean;
-	reCaptchaRef?: React.RefObject<ReactGoogleRecaptcha>;
+	reCaptchaRef?: React.RefObject<ReactGoogleRecaptcha | null>;
 	handleCaptchaError?: ReactEventHandler<HTMLDivElement>;
 }