Update to typescript 5.1

apps/editing-toolkit/package.json

@@ -65,7 +65,7 @@
 		"@automattic/viewport": "workspace:^",
 		"@automattic/whats-new": "workspace:^",
 		"@babel/core": "^7.17.5",
-		"@popperjs/core": "^2.10.2",
+		"@popperjs/core": "^2.11.8",
 		"@sentry/browser": "^7.54.0",
 		"@tanstack/react-query": "^4.29.1",
 		"@wordpress/a11y": "^3.38.0",

apps/happy-blocks/package.json

@@ -33,7 +33,7 @@
 		"@automattic/typography": "workspace:^",
 		"@automattic/wp-babel-makepot": "workspace:^",
 		"@automattic/wpcom-template-parts": "workspace:^",
-		"@emotion/styled": "^11.3.0",
+		"@emotion/styled": "^11.11.0",
 		"@wordpress/base-styles": "^4.29.0",
 		"@wordpress/block-editor": "^12.6.0",
 		"@wordpress/blocks": "^12.15.0",
@@ -48,7 +48,7 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-apps-builder": "workspace:^",
-		"@emotion/react": "^11.4.1",
+		"@emotion/react": "^11.11.1",
 		"@testing-library/react": "^14.0.0",
 		"@wordpress/readable-js-assets-webpack-plugin": "^2.21.0",
 		"copy-webpack-plugin": "^10.1.0",

client/components/marketing-survey/cancel-jetpack-form/index.tsx

@@ -1,6 +1,6 @@
 import config from '@automattic/calypso-config';
 import { Button, Dialog } from '@automattic/components';
-import { Button as ButtonType } from '@automattic/components/dist/types/dialog/button-bar';
+import { BaseButton } from '@automattic/components/dist/types/dialog/button-bar';
 import { useTranslate, TranslateResult } from 'i18n-calypso';
 import page from 'page';
 import { useState, useEffect, useMemo, useCallback } from 'react';
@@ -356,7 +356,7 @@ const CancelJetpackForm: React.FC< Props > = ( {
 			label: translate( 'Back to my purchases' ),
 		};
 
-		const firstButtons: [ ButtonType ] = [ close ];
+		const firstButtons: ( BaseButton | React.ReactElement )[] = [ close ];
 
 		// Offer accepted screen only provides back to site button.
 		if ( steps.OFFER_ACCEPTED_STEP === cancellationStep ) {

client/components/promo-section/promo-card/index.tsx

@@ -98,7 +98,7 @@ const PromoCard: FunctionComponent< Props > = ( {
 				{ titleComponentLocation === TitleLocation.BODY && titleComponentHeader }
 				{ isPrimary
 					? Children.map( children, ( child ) => {
-							if ( ! child || ! isValidElement( child ) ) {
+							if ( ! child || ! isValidElement< { isPrimary?: boolean } >( child ) ) {
 								return child;
 							}
 							return PromoCardCta === child.type ? cloneElement( child, { isPrimary } ) : child;

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/with-global-styles-provider.tsx

@@ -8,7 +8,7 @@ import StepperLoader from '../../components/stepper-loader';
 import type { OnboardSelect } from '@automattic/data-stores';
 
 const withGlobalStylesProvider = createHigherOrderComponent(
-	< OuterProps, >( InnerComponent: React.ComponentType< OuterProps > ) => {
+	< OuterProps extends object >( InnerComponent: React.ComponentType< OuterProps > ) => {
 		return ( props: OuterProps ) => {
 			const selectedDesign = useSelect(
 				( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedDesign(),

client/my-sites/domains/domain-management/transfer/transfer-page/index.tsx

@@ -59,6 +59,10 @@ import './style.scss';
 type ToggleControlProps = React.ComponentProps< typeof ToggleControl > & { disabled?: boolean };
 const FixedToggleControl = ( props: ToggleControlProps ) => <ToggleControl { ...props } />;
 
+type ErrResponse = {
+	error?: string;
+};
+
 const TransferPage = ( props: TransferPageProps ) => {
 	const dispatch = useDispatch();
 	const {
@@ -216,9 +220,13 @@ const TransferPage = ( props: TransferPageProps ) => {
 					getNoticeOptions( selectedDomainName )
 				)
 			);
-		} catch ( { error } ) {
+		} catch ( error ) {
 			dispatch(
-				errorNotice( getDomainTransferCodeError( error ), getNoticeOptions( selectedDomainName ) )
+				errorNotice(
+					// Note: getDomainTransferCodeError handles undefined error codes.
+					getDomainTransferCodeError( ( error as ErrResponse )?.error ),
+					getNoticeOptions( selectedDomainName )
+				)
 			);
 		} finally {
 			setIsRequestingTransferCode( false );

client/package.json

@@ -66,10 +66,10 @@
 		"@automattic/wpcom-checkout": "workspace:^",
 		"@automattic/wpcom-template-parts": "workspace:^",
 		"@babel/core": "^7.17.5",
-		"@emotion/css": "^11.9.0",
+		"@emotion/css": "^11.11.2",
 		"@emotion/jest": "^11.11.0",
-		"@emotion/react": "^11.4.1",
-		"@emotion/styled": "^11.3.0",
+		"@emotion/react": "^11.11.1",
+		"@emotion/styled": "^11.11.0",
 		"@github/webauthn-json": "^0.4.1",
 		"@sentry/react": "^7.54.0",
 		"@stripe/react-stripe-js": "^2.1.0",

package.json

@@ -223,8 +223,8 @@
 		"@types/gtag.js": "^0.0.10",
 		"@types/highlight-words-core": "^1.2.1",
 		"@types/superagent": "^4.1.15",
-		"@typescript-eslint/eslint-plugin": "^5.53.0",
-		"@typescript-eslint/parser": "^5.53.0",
+		"@typescript-eslint/eslint-plugin": "^5.62.0",
+		"@typescript-eslint/parser": "^5.62.0",
 		"@wordpress/eslint-plugin": "^14.11.0",
 		"@wordpress/stylelint-config": "^21.21.0",
 		"babel-loader": "^8.2.3",
@@ -281,7 +281,7 @@
 		"stacktrace-gps": "^3.0.3",
 		"stylelint": "^14.11.0",
 		"tslib": "^2.3.0",
-		"typescript": "^4.7.4",
+		"typescript": "^5.1.6",
 		"v8-profiler-next": "^1.9.0",
 		"webpack": "^5.68.0",
 		"webpack-bundle-analyzer": "^4.5.0",

packages/accessible-focus/package.json

@@ -31,6 +31,6 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	}
 }

packages/block-renderer/package.json

@@ -42,7 +42,7 @@
 		"@automattic/calypso-typescript-config": "workspace:^",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	},
 	"peerDependencies": {
 		"@wordpress/data": "^9.5.0",

packages/browser-data-collector/package.json

@@ -27,6 +27,6 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	}
 }

packages/browser-data-collector/src/report.ts

@@ -12,12 +12,19 @@ import {
 
 export class ReportImpl implements Report {
 	id: string;
+	url: string;
 	beginning!: number;
 	end?: number;
 	data: ReportData = new Map();
 	startCollectors!: Collector[];
 	stopCollectors!: Collector[];
 
+	// Stubs that are necessary to implement but are not used.
+	body = null;
+	type = 'intervention';
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	toJSON() {}
+
 	static async fromNow( id: string, collectors: Collector[] = [] ): Promise< Report > {
 		const report = new ReportImpl( id, false );
 		await report.start( collectors );
@@ -32,6 +39,7 @@ export class ReportImpl implements Report {
 
 	private constructor( id: string, isInitial: boolean ) {
 		this.id = id;
+		this.url = document.location.href;
 		const commonStartCollectors = [ pageVisibilityStart ];
 		const commonStopCollectors = [
 			deviceMemory,

packages/calypso-analytics/package.json

@@ -39,6 +39,6 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	}
 }

packages/calypso-babel-config/package.json

@@ -35,7 +35,7 @@
 		"@babel/preset-typescript": "^7.16.7",
 		"@babel/register": "^7.17.0",
 		"@babel/runtime": "^7.17.2",
-		"@emotion/babel-plugin": "^11.3.0",
+		"@emotion/babel-plugin": "^11.11.0",
 		"@wordpress/babel-plugin-import-jsx-pragma": "^4.21.0",
 		"babel-plugin-dynamic-import-node": "^2.3.3",
 		"babel-plugin-transform-react-remove-prop-types": "^0.4.24"

packages/calypso-build/package.json

@@ -56,7 +56,7 @@
 		"stream-browserify": "^3.0.0",
 		"terser-webpack-plugin": "^5.2.4",
 		"thread-loader": "^3.0.4",
-		"typescript": "^4.7.4",
+		"typescript": "^5.1.6",
 		"webpack-cli": "^4.9.2"
 	},
 	"devDependencies": {

packages/calypso-config/package.json

@@ -39,6 +39,6 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	}
 }

packages/calypso-e2e/package.json

@@ -37,7 +37,7 @@
 		"@wordpress/i18n": "^4.38.0",
 		"asana-phrase": "^0.0.8",
 		"node-fetch": "^2.6.7",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	},
 	"scripts": {
 		"clean": "yarn build --clean && rm -rf dist",

packages/calypso-products/package.json

@@ -40,7 +40,7 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"

packages/calypso-stripe/package.json

@@ -43,7 +43,7 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	},
 	"private": true
 }

packages/calypso-url/package.json

@@ -39,6 +39,6 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	}
 }

packages/components/package.json

@@ -65,7 +65,7 @@
 		"@types/react-slider": "^1.3.1",
 		"qrcode.react": "^3.1.0",
 		"resize-observer-polyfill": "^1.5.1",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	},
 	"scripts": {
 		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",

packages/components/src/dialog/button-bar.tsx

@@ -15,10 +15,8 @@ export type BaseButton = {
 	target?: string;
 };
 
-export type Button = ReactElement | BaseButton;
-
 type Props = {
-	buttons?: Button[];
+	buttons?: ( ReactElement | BaseButton )[];
 	baseClassName: string;
 	onButtonClick: ( button: BaseButton ) => void;
 };
@@ -33,7 +31,7 @@ const ButtonBar: FunctionComponent< Props > = ( { buttons, baseClassName, onButt
 			{ buttons.map( ( button, index ) => {
 				const key = index;
 
-				if ( isValidElement( button ) ) {
+				if ( isElement( button ) ) {
 					return cloneElement( button, { key } );
 				}
 
@@ -60,4 +58,10 @@ const ButtonBar: FunctionComponent< Props > = ( { buttons, baseClassName, onButt
 	);
 };
 
+// Note: a bug in TypeScript doesn't narrow ReactElement properly, but the wrapper
+// helps it work. See https://github.com/microsoft/TypeScript/issues/53178#issuecomment-1659301034
+function isElement( element: ReactElement | BaseButton ): element is ReactElement {
+	return isValidElement( element );
+}
+
 export default ButtonBar;

packages/components/src/dialog/index.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import Modal from 'react-modal';
 import Gridicon from '../gridicon';
 import ButtonBar from './button-bar';
-import type { Button, BaseButton } from './button-bar';
+import type { BaseButton } from './button-bar';
 import type { PropsWithChildren } from 'react';
 
 import './style.scss';
@@ -12,7 +12,7 @@ type Props = {
 	additionalClassNames?: Parameters< typeof classnames >[ 0 ];
 	additionalOverlayClassNames?: Parameters< typeof classnames >[ 0 ];
 	baseClassName?: string;
-	buttons?: Button[];
+	buttons?: ( React.ReactElement | BaseButton )[];
 	className?: string;
 	isBackdropVisible?: boolean;
 	isFullScreen?: boolean;

packages/components/src/list-tile/index.tsx

@@ -30,7 +30,7 @@ export const ListTile = ( {
 	const leadingElement =
 		typeof leading === 'string' ? (
 			<div className="list-tile__leading">{ leading }</div>
-		) : isValidElement( leading ) ? (
+		) : isValidElement< { className: string } >( leading ) ? (
 			cloneElement( leading, {
 				className: classNames( 'list-tile__leading', leading.props.className ),
 			} )
@@ -39,7 +39,7 @@ export const ListTile = ( {
 	const trailingElement =
 		typeof trailing === 'string' ? (
 			<div className="list-tile__trailing">{ trailing }</div>
-		) : isValidElement( trailing ) ? (
+		) : isValidElement< { className: string } >( trailing ) ? (
 			cloneElement( trailing, {
 				className: classNames( 'list-tile__trailing', trailing.props.className ),
 			} )

packages/composite-checkout/package.json

@@ -36,8 +36,8 @@
 	"bugs": "https://github.com/Automattic/wp-calypso/issues",
 	"homepage": "https://github.com/Automattic/wp-calypso/tree/HEAD/packages/composite-checkout#readme",
 	"dependencies": {
-		"@emotion/react": "^11.4.1",
-		"@emotion/styled": "^11.3.0",
+		"@emotion/react": "^11.11.1",
+		"@emotion/styled": "^11.11.0",
 		"@wordpress/i18n": "^4.38.0",
 		"@wordpress/react-i18n": "^3.36.0",
 		"debug": "^4.3.3",
@@ -55,7 +55,7 @@
 		"@testing-library/user-event": "^14.4.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",

packages/create-calypso-config/package.json

@@ -36,6 +36,6 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	}
 }

packages/data-stores/package.json

@@ -60,7 +60,7 @@
 		"jest-fetch-mock": "^3.0.3",
 		"nock": "^12.0.3",
 		"node-fetch": "^2.6.6",
-		"typescript": "^4.7.4",
+		"typescript": "^5.1.6",
 		"wait-for-expect": "^3.0.2",
 		"wpcom-proxy-request": "workspace:^"
 	}

packages/design-carousel/package.json

@@ -46,7 +46,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"redux": "^4.2.1",
-		"typescript": "^4.7.4",
+		"typescript": "^5.1.6",
 		"webpack": "^5.68.0"
 	},
 	"peerDependencies": {

packages/design-picker/package.json

@@ -56,7 +56,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"redux": "^4.2.1",
-		"typescript": "^4.7.4",
+		"typescript": "^5.1.6",
 		"webpack": "^5.68.0"
 	},
 	"peerDependencies": {

packages/design-preview/package.json

@@ -47,7 +47,7 @@
 		"@testing-library/react": "^14.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"typescript": "^4.7.4"
+		"typescript": "^5.1.6"
 	},
 	"peerDependencies": {
 		"@wordpress/data": "^9.5.0",

packages/design-preview/src/components/index.tsx

@@ -31,7 +31,7 @@ interface DesignPreviewProps {
 	onSelectColorVariation: ( variation: GlobalStylesObject | null ) => void;
 	selectedFontVariation: GlobalStylesObject | null;
 	onSelectFontVariation: ( variation: GlobalStylesObject | null ) => void;
-	onGlobalStylesChange: ( globalStyles: GlobalStylesObject | null ) => void;
+	onGlobalStylesChange: ( globalStyles?: GlobalStylesObject | null ) => void;
 	limitGlobalStyles: boolean;
 	globalStylesInPersonalPlan: boolean;
 	onNavigatorPathChange?: ( path?: string ) => void;