Update to Typescript 5.1 (#52621)

* Update typescript to 5.1
* Update @typescript/eslint dependencies to the latest minor update which includes TS 5.1 support.

* Fix an error related to a code path not returning something
* Remove type references that cause errors

* Remove importsNotUsedAsValues tsconfig flag in favor of eslint rule which enforces
  separate type import statements, and autofix all current lint issues with this rule.

.eslintrc.js

@@ -132,6 +132,13 @@ module.exports = {
 				],
 			},
 		],
+		'@typescript-eslint/consistent-type-imports': [
+			'error',
+			{
+				prefer: 'type-imports',
+				disallowTypeAnnotations: false,
+			},
+		],
 		'no-restricted-syntax': [
 			'error',
 			// NOTE: We can't include the forward slash in our regex or

package.json

@@ -244,7 +244,7 @@
 		"strip-json-comments": "5.0.0",
 		"style-loader": "3.2.1",
 		"terser-webpack-plugin": "5.3.9",
-		"typescript": "4.9.5",
+		"typescript": "5.1.6",
 		"uglify-js": "3.13.7",
 		"uuid": "8.3.0",
 		"wd": "1.12.1",

packages/components/src/border-box-control/border-box-control-linked-button/component.tsx

@@ -10,7 +10,8 @@ import { __ } from '@wordpress/i18n';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
 import { View } from '../../view';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { useBorderBoxControlLinkedButton } from './hook';
 
 import type { LinkedButtonProps } from '../types';

packages/components/src/border-box-control/border-box-control-linked-button/hook.ts

@@ -7,7 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { LinkedButtonProps } from '../types';

packages/components/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -11,7 +11,8 @@ import { useMergeRefs } from '@wordpress/compose';
 import BorderBoxControlVisualizer from '../border-box-control-visualizer';
 import { BorderControl } from '../../border-control';
 import { Grid } from '../../grid';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { useBorderBoxControlSplitControls } from './hook';
 
 import type { BorderControlProps } from '../../border-control/types';

packages/components/src/border-box-control/border-box-control-split-controls/hook.ts

@@ -7,7 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/';
 
 import type { SplitControlsProps } from '../types';

packages/components/src/border-box-control/border-box-control-visualizer/component.tsx

@@ -7,7 +7,8 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { View } from '../../view';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { useBorderBoxControlVisualizer } from './hook';
 
 import type { VisualizerProps } from '../types';

packages/components/src/border-box-control/border-box-control-visualizer/hook.ts

@@ -7,7 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils';
 
 import type { VisualizerProps } from '../types';

packages/components/src/border-box-control/border-box-control/component.tsx

@@ -14,7 +14,8 @@ import { BorderControl } from '../../border-control';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { useBorderBoxControl } from './hook';
 
 import type { BorderBoxControlProps } from '../types';

packages/components/src/border-box-control/border-box-control/hook.ts

@@ -16,7 +16,8 @@ import {
 	isCompleteBorder,
 	isEmptyBorder,
 } from '../utils';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { Border } from '../../border-control/types';

packages/components/src/border-control/border-control-dropdown/component.tsx

@@ -19,7 +19,8 @@ import ColorPalette from '../../color-palette';
 import Dropdown from '../../dropdown';
 import { HStack } from '../../h-stack';
 import { VStack } from '../../v-stack';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';

packages/components/src/border-control/border-control-dropdown/hook.ts

@@ -8,7 +8,8 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { DropdownProps } from '../types';

packages/components/src/border-control/border-control-style-picker/component.tsx

@@ -12,7 +12,8 @@ import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { Flex } from '../../flex';
 import { VisuallyHidden } from '../../visually-hidden';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { useBorderControlStylePicker } from './hook';
 
 import type { LabelProps, StylePickerProps } from '../types';

packages/components/src/border-control/border-control-style-picker/hook.ts

@@ -7,7 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { StylePickerProps } from '../types';

packages/components/src/border-control/border-control/component.tsx

@@ -13,7 +13,8 @@ import { HStack } from '../../h-stack';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { useBorderControl } from './hook';
 
 import type { BorderControlProps, LabelProps } from '../types';

packages/components/src/border-control/border-control/hook.ts

@@ -8,7 +8,8 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { Border, BorderControlProps } from '../types';

packages/components/src/card/card-body/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { Scrollable } from '../../scrollable';
 import { View } from '../../view';
 import { useCardBody } from './hook';

packages/components/src/card/card-body/hook.ts

@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { BodyProps } from '../types';

packages/components/src/card/card-divider/component.tsx

@@ -6,8 +6,10 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
-import { Divider, DividerProps } from '../../divider';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
+import type { DividerProps } from '../../divider';
+import { Divider } from '../../divider';
 import { useCardDivider } from './hook';
 
 function UnconnectedCardDivider(

packages/components/src/card/card-divider/hook.ts

@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { DividerProps } from '../../divider';

packages/components/src/card/card-footer/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
 import type { FooterProps } from '../types';

packages/components/src/card/card-footer/hook.ts

@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { FooterProps } from '../types';

packages/components/src/card/card-header/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
 import type { HeaderProps } from '../types';

packages/components/src/card/card-header/hook.ts

@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { HeaderProps } from '../types';

packages/components/src/card/card-media/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { View } from '../../view';
 import { useCardMedia } from './hook';
 import type { MediaProps } from '../types';

packages/components/src/card/card-media/hook.ts

@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { MediaProps } from '../types';

packages/components/src/card/card/component.tsx

@@ -12,11 +12,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	ContextSystemProvider,
-	WordPressComponentProps,
-} from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect, ContextSystemProvider } from '../../ui/context';
 import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import * as styles from '../styles';

packages/components/src/card/card/hook.ts

@@ -7,7 +7,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import { useSurface } from '../../surface';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';

packages/components/src/color-picker/component.tsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
+import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**

packages/components/src/confirm-dialog/component.tsx

@@ -14,11 +14,8 @@ import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
  */
 import Modal from '../modal';
 import type { OwnProps, DialogInputEvent } from './types';
-import {
-	useContextSystem,
-	contextConnect,
-	WordPressComponentProps,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { useContextSystem, contextConnect } from '../ui/context';
 import { Flex } from '../flex';
 import Button from '../button';
 import { Text } from '../text';

packages/components/src/date-time/time/index.tsx

@@ -33,9 +33,9 @@ import { HStack } from '../../h-stack';
 import { Spacer } from '../../spacer';
 import type { InputChangeCallback } from '../../input-control/types';
 import type { InputState } from '../../input-control/reducer/state';
+import type { InputAction } from '../../input-control/reducer/actions';
 import {
 	COMMIT,
-	InputAction,
 	PRESS_DOWN,
 	PRESS_UP,
 } from '../../input-control/reducer/actions';

packages/components/src/divider/component.tsx

@@ -8,11 +8,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect, useContextSystem } from '../ui/context';
 import { DividerView } from './styles';
 import type { DividerProps } from './types';
 

packages/components/src/dropdown/dropdown-content-wrapper.tsx

@@ -6,11 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	WordPressComponentProps,
-	contextConnect,
-	useContextSystem,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect, useContextSystem } from '../ui/context';
 import { DropdownContentWrapperDiv } from './styles';
 import type { DropdownContentWrapperProps } from './types';
 

packages/components/src/elevation/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect } from '../ui/context';
 import { View } from '../view';
 import { useElevation } from './hook';
 import type { ElevationProps } from './types';

packages/components/src/elevation/hook.ts

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { css, SerializedStyles } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -11,7 +12,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { useContextSystem } from '../ui/context';
 import * as styles from './styles';
 import { CONFIG, reduceMotion } from '../utils';
 import { useCx } from '../utils/hooks/use-cx';

packages/components/src/flex/flex-block/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { View } from '../../view';
 import type { FlexBlockProps } from '../types';
 import { useFlexBlock } from './hook';