Codemod

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/@types/common.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { JSXElementConstructor } from "react";
+import { JSXElementConstructor, type JSX } from "react";
 
 export type { NonEmptyArray, XOR, Writeable } from "matrix-js-sdk/src/matrix";
 

src/@types/react.d.ts

@@ -11,8 +11,8 @@ import React, { PropsWithChildren } from "react";
 declare module "react" {
     // Fix forwardRef types for Generic components - https://stackoverflow.com/a/58473012
     function forwardRef<T, P = {}>(
-        render: (props: PropsWithChildren<P>, ref: React.ForwardedRef<T>) => React.ReactElement | null,
+        render: (props: PropsWithChildren<P>, ref: React.ForwardedRef<T>) => React.ReactElement<any> | null,
-    ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+    ): (props: P & React.RefAttributes<T>) => React.ReactElement<any> | null;
 
     // Fix lazy types - https://stackoverflow.com/a/71017028
     function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): T;

src/HtmlUtils.tsx

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { LegacyRef, ReactNode } from "react";
+import React, { Ref, ReactNode, type JSX } from "react";
 import sanitizeHtml from "sanitize-html";
 import classNames from "classnames";
 import katex from "katex";
@@ -503,7 +503,7 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
 export function topicToHtml(
     topic?: string,
     htmlTopic?: string,
-    ref?: LegacyRef<HTMLSpanElement>,
+    ref?: Ref<HTMLSpanElement>,
     allowExtendedHtml = false,
 ): ReactNode {
     if (!SettingsStore.getValue("feature_html_topic")) {

src/Linkify.tsx

@@ -205,7 +205,7 @@ export const sanitizeHtmlParams: IExtendedSanitizeOptions = {
 };
 
 /* Wrapper around linkify-react merging in our default linkify options */
-export function Linkify({ as, options, children }: React.ComponentProps<typeof _Linkify>): ReactElement {
+export function Linkify({ as, options, children }: React.ComponentProps<typeof _Linkify>): ReactElement<any> {
     return (
         <_Linkify as={as} options={merge({}, linkifyMatrixOptions, options)}>
             {children}

src/NodeAnimator.tsx

@@ -23,7 +23,7 @@ interface IProps {
     innerRef?: MutableRefObject<any>;
 }
 
-function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement {
+function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement<any> {
     return typeof c === "object" && "type" in c;
 }
 
@@ -36,7 +36,7 @@ function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number
  */
 export default class NodeAnimator extends React.Component<IProps> {
     private nodes: Record<string, HTMLElement> = {};
-    private children: { [key: string]: ReactElement } = {};
+    private children: { [key: string]: ReactElement<any> } = {};
     public static defaultProps: Partial<IProps> = {
         startStyles: [],
     };

src/accessibility/RovingTabIndex.tsx

@@ -354,7 +354,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
  * nodeRef = inputRef when inputRef argument is provided.
  */
 export const useRovingTabIndex = <T extends HTMLElement>(
-    inputRef?: RefObject<T>,
+    inputRef?: RefObject<T | null>,
 ): [FocusHandler, boolean, RefCallback<T>, RefObject<T | null>] => {
     const context = useContext(RovingTabIndexContext);
 

src/accessibility/context_menu/ContextMenuButton.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ComponentProps, forwardRef, Ref } from "react";
+import React, { ComponentProps, forwardRef, Ref, type JSX } from "react";
 
 import AccessibleButton from "../../components/views/elements/AccessibleButton";
 

src/accessibility/context_menu/ContextMenuTooltipButton.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ComponentProps, forwardRef, Ref } from "react";
+import React, { ComponentProps, forwardRef, Ref, type JSX } from "react";
 
 import AccessibleButton from "../../components/views/elements/AccessibleButton";
 

src/accessibility/roving/RovingAccessibleButton.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, type JSX } from "react";
 
 import AccessibleButton from "../../components/views/elements/AccessibleButton";
 import { useRovingTabIndex } from "../RovingTabIndex";

src/accessibility/roving/types.ts

@@ -8,6 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 import { RefObject } from "react";
 
-export type Ref = RefObject<HTMLElement>;
+export type Ref = RefObject<HTMLElement | null>;
 
 export type FocusHandler = () => void;

src/async-components/structures/ErrorView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, type JSX } from "react";
 import { Text, Heading, Button, Separator } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
 

src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { MatrixClientPeg } from "../../../../MatrixClientPeg";

src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, type JSX } from "react";
 import FileSaver from "file-saver";
 import { logger } from "matrix-js-sdk/src/logger";
 import { AuthDict, CrossSigningKeys, MatrixError, UIAFlow, UIAResponse } from "matrix-js-sdk/src/matrix";

src/autocomplete/Autocompleter.ts

@@ -30,7 +30,7 @@ export interface ICompletion {
     type?: "at-room" | "command" | "community" | "room" | "user";
     completion: string;
     completionId?: string;
-    component: ReactElement;
+    component: ReactElement<any>;
     range: ISelectionRange;
     command?: string;
     suffix?: string;

src/components/structures/AutoHideScrollbar.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { HTMLAttributes, ReactHTML, ReactNode, WheelEvent } from "react";
+import React, { HTMLAttributes, ReactHTML, ReactNode, WheelEvent, type JSX } from "react";
 
 type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
     JSX.IntrinsicElements[T] extends HTMLAttributes<{}> ? DynamicElementProps<T> : DynamicElementProps<"div">;
@@ -30,7 +30,7 @@ export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> ex
         element: "div" as keyof ReactHTML,
     };
 
-    public readonly containerRef: React.RefObject<HTMLDivElement> = React.createRef();
+    public readonly containerRef: React.RefObject<HTMLDivElement | null> = React.createRef();
 
     public componentDidMount(): void {
         if (this.containerRef.current && this.props.onScroll) {

src/components/structures/AutocompleteInput.tsx

@@ -22,8 +22,8 @@ interface AutocompleteInputProps {
     selection: ICompletion[];
     onSelectionChange: (selection: ICompletion[]) => void;
     maxSuggestions?: number;
-    renderSuggestion?: (s: ICompletion) => ReactElement;
+    renderSuggestion?: (s: ICompletion) => ReactElement<any>;
-    renderSelection?: (m: ICompletion) => ReactElement;
+    renderSelection?: (m: ICompletion) => ReactElement<any>;
     additionalFilter?: (suggestion: ICompletion) => boolean;
 }
 
@@ -163,11 +163,11 @@ export const AutocompleteInput: React.FC<AutocompleteInputProps> = ({
 type SelectionItemProps = {
     item: ICompletion;
     onClick: (completion: ICompletion) => void;
-    render?: (completion: ICompletion) => ReactElement;
+    render?: (completion: ICompletion) => ReactElement<any>;
 };
 
 const SelectionItem: React.FC<SelectionItemProps> = ({ item, onClick, render }) => {
-    const withContainer = (children: ReactNode): ReactElement => (
+    const withContainer = (children: ReactNode): ReactElement<any> => (
         <span
             className="mx_AutocompleteInput_editor_selection"
             data-testid={`autocomplete-selection-item-${item.completionId}`}
@@ -194,7 +194,7 @@ type SuggestionItemProps = {
     item: ICompletion;
     selection: ICompletion[];
     onClick: (completion: ICompletion) => void;
-    render?: (completion: ICompletion) => ReactElement;
+    render?: (completion: ICompletion) => ReactElement<any>;
 };
 
 const SuggestionItem: React.FC<SuggestionItemProps> = ({ item, selection, onClick, render }) => {
@@ -204,7 +204,7 @@ const SuggestionItem: React.FC<SuggestionItemProps> = ({ item, selection, onClic
         "mx_AutocompleteInput_suggestion--selected": isSelected,
     });
 
-    const withContainer = (children: ReactNode): ReactElement => (
+    const withContainer = (children: ReactNode): ReactElement<any> => (
         <div
             className={classes}
             // `onClick` cannot be used here as it would lead to focus loss and closing the suggestion list.

src/components/structures/ContextMenu.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } from "react";
+import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState, type JSX } from "react";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import FocusLock from "react-focus-lock";
@@ -440,7 +440,7 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
         );
     }
 
-    public render(): React.ReactChild {
+    public render(): React.ReactElement<any> | number | string {
         if (this.props.mountAsChild) {
             // Render as a child of the current parent
             return this.renderMenu();
@@ -582,13 +582,13 @@ export const alwaysAboveRightOf = (
 
 type ContextMenuTuple<T> = [
     boolean,
-    RefObject<T>,
+    RefObject<T | null>,
     (ev?: SyntheticEvent) => void,
     (ev?: SyntheticEvent) => void,
     (val: boolean) => void,
 ];
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
-export const useContextMenu = <T extends any = HTMLElement>(inputRef?: RefObject<T>): ContextMenuTuple<T> => {
+export const useContextMenu = <T extends any = HTMLElement>(inputRef?: RefObject<T | null>): ContextMenuTuple<T> => {
     let button = useRef<T>(null);
     if (inputRef) {
         // if we are given a ref, use it instead of ours

src/components/structures/GenericDropdownMenu.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { FunctionComponent, Key, PropsWithChildren, ReactNode } from "react";
+import React, { FunctionComponent, Key, PropsWithChildren, ReactNode, type JSX } from "react";
 
 import { MenuItemRadio } from "../../accessibility/context_menu/MenuItemRadio";
 import { ButtonEvent } from "../views/elements/AccessibleButton";

src/components/structures/HomePage.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import * as React from "react";
-import { useContext, useState } from "react";
+import { useContext, useState, type JSX } from "react";
 
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { getHomePageUrl } from "../../utils/pages";

src/components/structures/IndicatorScrollbar.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, type JSX } from "react";
 
 import AutoHideScrollbar, { IProps as AutoHideScrollbarProps } from "./AutoHideScrollbar";
 import UIStore, { UI_EVENTS } from "../../stores/UIStore";

src/components/structures/LeftPanel.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import * as React from "react";
-import { createRef } from "react";
+import { createRef, type JSX } from "react";
 import classNames from "classnames";
 
 import dis from "../../dispatcher/dispatcher";

src/components/structures/LoggedInView.tsx

@@ -123,9 +123,9 @@ class LoggedInView extends React.Component<IProps, IState> {
     public static displayName = "LoggedInView";
 
     protected readonly _matrixClient: MatrixClient;
-    protected readonly _roomView: React.RefObject<RoomView>;
+    protected readonly _roomView: React.RefObject<RoomView | null>;
-    protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
+    protected readonly _resizeContainer: React.RefObject<HTMLDivElement | null>;
-    protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
+    protected readonly resizeHandler: React.RefObject<HTMLDivElement | null>;
     protected layoutWatcherRef?: string;
     protected compactLayoutWatcherRef?: string;
     protected backgroundImageWatcherRef?: string;

src/components/structures/MainSplit.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, type JSX } from "react";
 import { NumberSize, Resizable } from "re-resizable";
 import { Direction } from "re-resizable/lib/resizer";
 import { WebPanelResize } from "@matrix-org/analytics-events/types/typescript/WebPanelResize";

src/components/structures/MatrixChat.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, lazy } from "react";
+import React, { createRef, lazy, type JSX } from "react";
 import {
     ClientEvent,
     createClient,

src/components/structures/MessagePanel.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, ReactNode, TransitionEvent } from "react";
+import React, { createRef, ReactNode, TransitionEvent, type JSX } from "react";
 import classNames from "classnames";
 import { Room, MatrixClient, RoomStateEvent, EventStatus, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";

src/components/structures/NotificationPanel.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
 

src/components/structures/PictureInPictureDragger.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, type JSX } from "react";
 
 import UIStore, { UI_EVENTS } from "../../stores/UIStore";
 import { lerp } from "../../utils/AnimationUtils";

src/components/structures/PipContainer.tsx

@@ -280,7 +280,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
 }
 
 export const PipContainer: React.FC = () => {
-    const movePersistedElement = useRef<() => void>();
+    const movePersistedElement = useRef<() => void>(undefined);
 
     return <PipContainerInner movePersistedElement={movePersistedElement} />;
 };

src/components/structures/RoomSearchView.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useContext, useEffect, useRef, useState, type JSX } from "react";
 import {
     ISearchResults,
     IThreadBundledRelationship,
@@ -59,7 +59,7 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
         const aborted = useRef(false);
         // A map from room ID to permalink creator
         const permalinkCreators = useRef(new Map<string, RoomPermalinkCreator>()).current;
-        const innerRef = useRef<ScrollPanel | null>();
+        const innerRef = useRef<ScrollPanel | null>(undefined);
 
         useEffect(() => {
             return () => {

src/components/structures/RoomStatusBar.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, type JSX } from "react";
 import {
     ClientEvent,
     EventStatus,

src/components/structures/RoomStatusBarUnsentMessages.tsx

@@ -15,10 +15,10 @@ interface RoomStatusBarUnsentMessagesProps {
     title: ReactNode;
     description?: string;
     notificationState: StaticNotificationState;
-    buttons: ReactElement;
+    buttons: ReactElement<any>;
 }
 
-export const RoomStatusBarUnsentMessages = (props: RoomStatusBarUnsentMessagesProps): ReactElement => {
+export const RoomStatusBarUnsentMessages = (props: RoomStatusBarUnsentMessagesProps): ReactElement<any> => {
     return (
         <div className="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages">
             <div role="alert">

src/components/structures/RoomView.tsx

@@ -251,7 +251,7 @@ interface LocalRoomViewProps {
     localRoom: LocalRoom;
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
-    roomView: RefObject<HTMLElement>;
+    roomView: RefObject<HTMLElement | null>;
     onFileDrop: (dataTransfer: DataTransfer) => Promise<void>;
     mainSplitContentType: MainSplitContentType;
 }
@@ -262,7 +262,7 @@ interface LocalRoomViewProps {
  * @param {LocalRoomViewProps} props Room view props
  * @returns {ReactElement}
  */
-function LocalRoomView(props: LocalRoomViewProps): ReactElement {
+function LocalRoomView(props: LocalRoomViewProps): ReactElement<any> {
     const context = useScopedRoomContext("room");
     const room = context.room as LocalRoom;
     const encryptionEvent = props.localRoom.currentState.getStateEvents(EventType.RoomEncryption)[0];
@@ -280,8 +280,8 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
         });
     };
 
-    let statusBar: ReactElement | null = null;
+    let statusBar: ReactElement<any> | null = null;
-    let composer: ReactElement | null = null;
+    let composer: ReactElement<any> | null = null;
 
     if (room.isError) {
         const buttons = (
@@ -340,7 +340,7 @@ interface ILocalRoomCreateLoaderProps {
  * @param {ILocalRoomCreateLoaderProps} props Room view props
  * @return {ReactElement}
  */
-function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement {
+function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement<any> {
     const text = _t("room|creating_room_text", { names: props.names });
     return (
         <div className="mx_RoomView mx_RoomView--local">

src/components/structures/SpaceHierarchy.tsx

@@ -19,6 +19,7 @@ import React, {
     useMemo,
     useRef,
     useState,
+    type JSX,
 } from "react";
 import {
     Room,
@@ -134,7 +135,7 @@ const Tile: React.FC<ITileProps> = ({
         }
     };
 
-    let button: ReactElement;
+    let button: ReactElement<any>;
     if (busy) {
         button = (
             <AccessibleButton
@@ -169,7 +170,7 @@ const Tile: React.FC<ITileProps> = ({
         );
     }
 
-    let checkbox: ReactElement | undefined;
+    let checkbox: ReactElement<any> | undefined;
     if (onToggleClick) {
         if (hasPermissions) {
             checkbox = <StyledCheckbox checked={!!selected} onChange={onToggleClick} tabIndex={isActive ? 0 : -1} />;
@@ -187,7 +188,7 @@ const Tile: React.FC<ITileProps> = ({
         }
     }
 
-    let avatar: ReactElement;
+    let avatar: ReactElement<any>;
     if (joinedRoom) {
         avatar = <RoomAvatar room={joinedRoom} size="20px" />;
     } else {
@@ -233,12 +234,12 @@ const Tile: React.FC<ITileProps> = ({
         );
     }
 
-    let joinedSection: ReactElement | undefined;
+    let joinedSection: ReactElement<any> | undefined;
     if (joinedRoom) {
         joinedSection = <div className="mx_SpaceHierarchy_roomTile_joined">{_t("common|joined")}</div>;
     }
 
-    let suggestedSection: ReactElement | undefined;
+    let suggestedSection: ReactElement<any> | undefined;
     if (suggested && (!joinedRoom || hasPermissions)) {
         suggestedSection = <InfoTooltip tooltip={_t("space|suggested_tooltip")}>{_t("space|suggested")}</InfoTooltip>;
     }
@@ -619,7 +620,7 @@ const useIntersectionObserver = (callback: () => void): ((element: HTMLDivElemen
         }
     };
 
-    const observerRef = useRef<IntersectionObserver>();
+    const observerRef = useRef<IntersectionObserver>(undefined);
     return (element: HTMLDivElement) => {
         if (observerRef.current) {
             observerRef.current.disconnect();

src/components/structures/SpaceRoomView.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { EventType, RoomType, JoinRule, Preset, Room, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
-import React, { useCallback, useContext, useRef, useState } from "react";
+import React, { useCallback, useContext, useRef, useState, type JSX } from "react";
 
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import createRoom, { IOpts } from "../../createRoom";

src/components/structures/SplashPage.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+import React, { DetailedHTMLProps, HTMLAttributes, ReactNode, type JSX } from "react";
 
 interface Props extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
     className?: string;

src/components/structures/TabbedView.tsx

@@ -18,6 +18,8 @@ import { NonEmptyArray } from "../../@types/common";
 import { RovingAccessibleButton, RovingTabIndexProvider } from "../../accessibility/RovingTabIndex";
 import { useWindowWidth } from "../../hooks/useWindowWidth";
 
+import type { JSX } from "react";
+
 /**
  * Represents a tab for the TabbedView.
  */

src/components/structures/ThreadView.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, KeyboardEvent } from "react";
+import React, { createRef, KeyboardEvent, type JSX } from "react";
 import {
     Thread,
     THREAD_RELATION_TYPE,

src/components/structures/UserMenu.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, ReactNode } from "react";
+import React, { createRef, ReactNode, type JSX } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -81,7 +81,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     private dispatcherRef?: string;
     private themeWatcherRef?: string;
     private readonly dndWatcherRef?: string;
-    private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
+    private buttonRef: React.RefObject<HTMLButtonElement | null> = createRef();
 
     public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);

src/components/structures/ViewSource.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import SyntaxHighlight from "../views/elements/SyntaxHighlight";

src/components/structures/WaitingForThirdPartyRoomView.tsx

@@ -21,7 +21,7 @@ import SdkConfig from "../../SdkConfig";
 import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
 
 interface Props {
-    roomView: RefObject<HTMLElement>;
+    roomView: RefObject<HTMLElement | null>;
     resizeNotifier: ResizeNotifier;
     inviteEvent: MatrixEvent;
 }

src/components/structures/auth/ConfirmSessionLockTheftView.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";

src/components/structures/auth/ForgotPassword.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, type JSX } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { LockSolidIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

src/components/structures/auth/Login.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, type JSX } from "react";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
 import { SSOFlow, SSOAction } from "matrix-js-sdk/src/matrix";

src/components/structures/auth/Registration.tsx

@@ -20,7 +20,7 @@ import {
     SSOAction,
     RegisterResponse,
 } from "matrix-js-sdk/src/matrix";
-import React, { Fragment, ReactNode } from "react";
+import React, { Fragment, ReactNode, type JSX } from "react";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/components/structures/auth/SessionLockStolenView.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 
 import SplashPage from "../SplashPage";
 import { _t } from "../../../languageHandler";

src/components/structures/auth/SetupEncryptionBody.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { KeyBackupInfo, VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { SecretStorageKeyDescription } from "matrix-js-sdk/src/secret-storage";

src/components/structures/auth/SoftLogout.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ChangeEvent, SyntheticEvent } from "react";
+import React, { ChangeEvent, SyntheticEvent, type JSX } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Optional } from "matrix-events-sdk";
 import { LoginFlow, MatrixError, SSOAction, SSOFlow } from "matrix-js-sdk/src/matrix";

src/components/structures/auth/header/AuthHeaderDisplay.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { Fragment, PropsWithChildren, ReactNode, useContext } from "react";
+import React, { Fragment, PropsWithChildren, ReactNode, useContext, type JSX } from "react";
 
 import { AuthHeaderContext } from "./AuthHeaderContext";
 

src/components/structures/auth/header/AuthHeaderProvider.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { isEqual } from "lodash";
-import React, { ComponentProps, PropsWithChildren, Reducer, useReducer } from "react";
+import React, { ComponentProps, PropsWithChildren, Reducer, useReducer, type JSX } from "react";
 
 import { AuthHeaderContext } from "./AuthHeaderContext";
 import { AuthHeaderModifier } from "./AuthHeaderModifier";

src/components/utils/Box.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, type JSX } from "react";
 
 type FlexProps = {
     /**
@@ -71,7 +71,7 @@ export function Box({
     children,
     ...props
 }: React.PropsWithChildren<FlexProps>): JSX.Element {
-    const ref = useRef<HTMLElement>();
+    const ref = useRef<HTMLElement>(undefined);
 
     useEffect(() => {
         addOrRemoveProperty(ref, `--mx-box-flex`, flex);

src/components/utils/Flex.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, type JSX } from "react";
 
 type FlexProps = {
     /**
@@ -64,7 +64,7 @@ export function Flex({
     children,
     ...props
 }: React.PropsWithChildren<FlexProps>): JSX.Element {
-    const ref = useRef<HTMLElement>();
+    const ref = useRef<HTMLElement>(undefined);
 
     useEffect(() => {
         ref.current!.style.setProperty(`--mx-flex-display`, display);

src/components/views/audio_messages/AudioPlayerBase.tsx

@@ -31,8 +31,8 @@ interface IState {
 }
 
 export default abstract class AudioPlayerBase<T extends IProps = IProps> extends React.PureComponent<T, IState> {
-    protected seekRef: RefObject<SeekBar> = createRef();
+    protected seekRef: RefObject<SeekBar | null> = createRef();
-    protected playPauseRef: RefObject<PlayPauseButton> = createRef();
+    protected playPauseRef: RefObject<PlayPauseButton | null> = createRef();
 
     public constructor(props: T) {
         super(props);

src/components/views/auth/AuthBody.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, type JSX } from "react";
 
 interface Props {
     className?: string;

src/components/views/auth/AuthFooter.tsx

@@ -7,12 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactElement } from "react";
+import React, { ReactElement, type JSX } from "react";
 
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
 
-const AuthFooter = (): ReactElement => {
+const AuthFooter = (): ReactElement<any> => {
     const brandingConfig = SdkConfig.getObject("branding");
     const links = brandingConfig?.get("auth_footer_links") ?? [
         { text: "Blog", url: "https://element.io/blog" },

src/components/views/auth/AuthHeaderLogo.tsx

@@ -11,7 +11,7 @@ import React from "react";
 import SdkConfig from "../../../SdkConfig";
 
 export default class AuthHeaderLogo extends React.PureComponent {
-    public render(): React.ReactElement {
+    public render(): React.ReactElement<any> {
         const brandingConfig = SdkConfig.getObject("branding");
         const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
 

src/components/views/auth/AuthPage.tsx

@@ -35,7 +35,7 @@ export default class AuthPage extends React.PureComponent<React.PropsWithChildre
         return AuthPage.welcomeBackgroundUrl;
     }
 
-    public render(): React.ReactElement {
+    public render(): React.ReactElement<any> {
         const pageStyle = {
             background: `center/cover fixed url(${AuthPage.getWelcomeBackgroundUrl()})`,
         };

src/components/views/auth/CaptchaForm.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, type JSX } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";

src/components/views/auth/CountryDropdown.tsx

@@ -149,7 +149,7 @@ export default class CountryDropdown extends React.Component<IProps, IState> {
                     {country.name} (+{country.prefix})
                 </div>
             );
-        }) as NonEmptyArray<ReactElement & { key: string }>;
+        }) as NonEmptyArray<ReactElement<any> & { key: string }>;
 
         // default value here too, otherwise we need to handle null / undefined
         // values between mounting and the initial value propagating

src/components/views/auth/EmailField.tsx

@@ -15,7 +15,7 @@ import * as Email from "../../../email";
 
 interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     id?: string;
-    fieldRef?: RefCallback<Field> | RefObject<Field>;
+    fieldRef?: RefCallback<Field> | RefObject<Field | null>;
     value: string;
     autoFocus?: boolean;
 

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -10,7 +10,7 @@ import classNames from "classnames";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { AuthType, AuthDict, IInputs, IStageStatus } from "matrix-js-sdk/src/interactive-auth";
 import { logger } from "matrix-js-sdk/src/logger";
-import React, { ChangeEvent, createRef, FormEvent, Fragment } from "react";
+import React, { ChangeEvent, createRef, FormEvent, Fragment, type JSX } from "react";
 import { Button, Text } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
 

src/components/views/auth/LanguageSelector.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 
 import SdkConfig from "../../../SdkConfig";
 import { getCurrentLanguage } from "../../../languageHandler";

src/components/views/auth/LoginWithQRFlow.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, ReactNode } from "react";
+import React, { createRef, ReactNode, type JSX } from "react";
 import { ClientRendezvousFailureReason, MSC4108FailureReason } from "matrix-js-sdk/src/rendezvous";
 import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
 import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";

src/components/views/auth/PassphraseConfirmField.tsx

@@ -14,7 +14,7 @@ import { _t, _td, TranslationKey } from "../../../languageHandler";
 
 interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
     id?: string;
-    fieldRef?: RefCallback<Field> | RefObject<Field>;
+    fieldRef?: RefCallback<Field> | RefObject<Field | null>;
     autoComplete?: string;
     value: string;
     password: string; // The password we're confirming

src/components/views/auth/PassphraseField.tsx

@@ -22,7 +22,7 @@ interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     className?: string;
     minScore: 0 | 1 | 2 | 3 | 4;
     value: string;
-    fieldRef?: RefCallback<Field> | RefObject<Field>;
+    fieldRef?: RefCallback<Field> | RefObject<Field | null>;
     // Additional strings such as a username used to catch bad passwords
     userInputs?: string[];
 

src/components/views/auth/PasswordLogin.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { SyntheticEvent } from "react";
+import React, { SyntheticEvent, type JSX } from "react";
 import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
@@ -411,7 +411,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         }
 
         return (
-            <div>
+            (<div>
                 <form onSubmit={this.onSubmitForm}>
                     {loginType}
                     {loginField}
@@ -427,7 +427,9 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         disabled={this.props.busy}
                         autoFocus={autoFocusPassword}
                         onValidate={this.onPasswordValidate}
-                        ref={(field) => (this[LoginField.Password] = field)}
+                        ref={field => {
+                            (this[LoginField.Password] = field);
+                        }}
                     />
                     {forgotPasswordJsx}
                     {!this.props.busy && (
@@ -439,7 +441,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         />
                     )}
                 </form>
-            </div>
+            </div>)
         );
     }
 }

src/components/views/auth/RegistrationForm.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { BaseSyntheticEvent, ComponentProps, ReactNode } from "react";
+import React, { BaseSyntheticEvent, ComponentProps, ReactNode, type JSX } from "react";
 import { MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -513,23 +513,27 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             />
         );
         return (
-            <Field
+            (<Field
-                ref={(field) => (this[RegistrationField.PhoneNumber] = field)}
+                ref={field => {
+                    (this[RegistrationField.PhoneNumber] = field);
+                }}
                 type="text"
                 label={phoneLabel}
                 value={this.state.phoneNumber}
                 prefixComponent={phoneCountry}
                 onChange={this.onPhoneNumberChange}
                 onValidate={this.onPhoneNumberValidate}
-            />
+            />)
         );
     }
 
     public renderUsername(): ReactNode {
         return (
-            <Field
+            (<Field
                 id="mx_RegistrationForm_username"
-                ref={(field) => (this[RegistrationField.Username] = field)}
+                ref={field => {
+                    (this[RegistrationField.Username] = field);
+                }}
                 type="text"
                 autoFocus={true}
                 label={_t("common|username")}
@@ -540,7 +544,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
                 tooltipAlignment={this.tooltipAlignment()}
                 autoCorrect="off"
                 autoCapitalize="none"
-            />
+            />)
         );
     }
 

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import classNames from "classnames";
 import { EventType, JoinRule, MatrixEvent, Room, RoomEvent, User, UserEvent } from "matrix-js-sdk/src/matrix";
 import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";

src/components/views/avatars/MemberAvatar.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, ReactNode, Ref, useContext } from "react";
+import React, { forwardRef, ReactNode, Ref, useContext, type JSX } from "react";
 import { RoomMember, ResizeMethod } from "matrix-js-sdk/src/matrix";
 
 import dis from "../../../dispatcher/dispatcher";

src/components/views/avatars/SearchResultAvatar.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
 
 import emailPillAvatar from "../../../../res/img/icon-email-pill-avatar.svg";

src/components/views/avatars/WithPresenceIndicator.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useEffect, useState, type JSX } from "react";
 import { ClientEvent, Room, RoomMember, RoomStateEvent, UserEvent } from "matrix-js-sdk/src/matrix";
 import { Tooltip } from "@vector-im/compound-web";
 

src/components/views/beacon/index.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 // Exports beacon components which touch maplibre-gs wrapped in React Suspense to enable code splitting
 
-import React, { ComponentProps, lazy, Suspense } from "react";
+import React, { ComponentProps, lazy, Suspense, type JSX } from "react";
 
 import Spinner from "../elements/Spinner";
 

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -24,7 +24,7 @@ interface IState {
 }
 
 export default class DialpadContextMenu extends React.Component<IProps, IState> {
-    private numberEntryFieldRef: React.RefObject<Field> = createRef();
+    private numberEntryFieldRef: React.RefObject<Field | null> = createRef();
 
     public constructor(props: IProps) {
         super(props);

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, type JSX } from "react";
 import classNames from "classnames";
 
 import ContextMenu, {

src/components/views/context_menus/MessageContextMenu.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, useContext } from "react";
+import React, { createRef, useContext, type JSX } from "react";
 import {
     EventStatus,
     MatrixEvent,

src/components/views/context_menus/RoomGeneralContextMenu.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { logger } from "matrix-js-sdk/src/logger";
 import { Room } from "matrix-js-sdk/src/matrix";
-import React, { useContext } from "react";
+import React, { useContext, type JSX } from "react";
 
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import RoomListActions from "../../../actions/RoomListActions";

src/components/views/context_menus/RoomNotificationContextMenu.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { Room } from "matrix-js-sdk/src/matrix";
-import React from "react";
+import React, { type JSX } from "react";
 
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { useNotificationState } from "../../../hooks/useRoomNotificationState";

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useContext } from "react";
+import React, { useContext, type JSX } from "react";
 import { Room, EventType, RoomType } from "matrix-js-sdk/src/matrix";
 
 import { IProps as IContextMenuProps } from "../../structures/ContextMenu";

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ComponentProps, useContext } from "react";
+import React, { ComponentProps, useContext, type JSX } from "react";
 import { ClientWidgetApi, IWidget, MatrixCapabilities } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -423,7 +423,7 @@ export const SubspaceSelector: React.FC<ISubspaceSelectorProps> = ({ title, spac
                                 {space.name || getDisplayAliasForRoom(space) || space.roomId}
                             </div>
                         );
-                    }) as NonEmptyArray<ReactElement & { key: string }>
+                    }) as NonEmptyArray<ReactElement<any> & { key: string }>
                 }
             </Dropdown>
         );

src/components/views/dialogs/AskInviteAnywayDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useCallback } from "react";
+import React, { useCallback, type JSX } from "react";
 
 import { _t } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";

src/components/views/dialogs/BaseDialog.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import FocusLock from "react-focus-lock";
 import classNames from "classnames";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";

src/components/views/dialogs/BugReportDialog.tsx

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 
 import SdkConfig from "../../../SdkConfig";
 import Modal from "../../../Modal";
@@ -46,7 +46,7 @@ interface IState {
 
 export default class BugReportDialog extends React.Component<IProps, IState> {
     private unmounted: boolean;
-    private issueRef: React.RefObject<Field>;
+    private issueRef: React.RefObject<Field | null>;
 
     public constructor(props: IProps) {
         super(props);

src/components/views/dialogs/ChangelogDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
  */
 
-import React from "react";
+import React, { type JSX } from "react";
 
 import { _t } from "../../../languageHandler";
 import QuestionDialog from "./QuestionDialog";

src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ComponentProps, useMemo, useState } from "react";
+import React, { ComponentProps, useMemo, useState, type JSX } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import ConfirmUserActionDialog from "./ConfirmUserActionDialog";

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react";
+import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent, type JSX } from "react";
 import { Room, RoomType, JoinRule, Preset, Visibility } from "matrix-js-sdk/src/matrix";
 
 import SdkConfig from "../../../SdkConfig";

src/components/views/dialogs/CreateSubspaceDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, type JSX } from "react";
 import { Room, JoinRule } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/components/views/dialogs/DeactivateAccountDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { AuthType, IAuthData } from "matrix-js-sdk/src/interactive-auth";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useState } from "react";
+import React, { useState, type JSX } from "react";
 
 import { _t, _td, TranslationKey } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";

src/components/views/dialogs/ExportDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useRef, useState, Dispatch, SetStateAction } from "react";
+import React, { useRef, useState, Dispatch, SetStateAction, type JSX } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/components/views/dialogs/FeedbackDialog.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, type JSX } from "react";
 
 import QuestionDialog from "./QuestionDialog";
 import { _t } from "../../../languageHandler";

src/components/views/dialogs/ForwardDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, type JSX } from "react";
 import classnames from "classnames";
 import {
     IContent,

src/components/views/dialogs/InteractiveAuthDialog.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { MatrixClient, UIAResponse } from "matrix-js-sdk/src/matrix";
 import { AuthType } from "matrix-js-sdk/src/interactive-auth";
 

src/components/views/dialogs/InviteDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, ReactNode, SyntheticEvent } from "react";
+import React, { createRef, ReactNode, SyntheticEvent, type JSX } from "react";
 import classNames from "classnames";
 import { RoomMember, Room, MatrixError, EventType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
@@ -343,7 +343,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
 
     private debounceTimer: number | null = null; // actually number because we're in the browser
     private editorRef = createRef<HTMLInputElement>();
-    private numberEntryFieldRef: React.RefObject<Field> = createRef();
+    private numberEntryFieldRef: React.RefObject<Field | null> = createRef();
     private unmounted = false;
     private encryptionByDefault = false;
     private profilesStore: UserProfilesStore;

src/components/views/dialogs/MessageEditHistoryDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { MatrixEvent, EventType, RelationType, MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 import { defer } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -53,7 +53,7 @@ const MAX_BUTTONS = 3;
 export default class ModalWidgetDialog extends React.PureComponent<IProps, IState> {
     private readonly widget: Widget;
     private readonly possibleButtons: ModalButtonID[];
-    private appFrame: React.RefObject<HTMLIFrameElement> = React.createRef();
+    private appFrame: React.RefObject<HTMLIFrameElement | null> = React.createRef();
 
     public state: IState = {
         disabledButtonIds: (this.props.widgetDefinition.buttons || []).filter((b) => b.disabled).map((b) => b.id),

src/components/views/dialogs/ModuleUiDialog.tsx

@@ -16,7 +16,7 @@ import ScrollableBaseModal, { IScrollableBaseState } from "./ScrollableBaseModal
 import { _t } from "../../../languageHandler";
 
 interface IProps<P extends DialogProps, C extends DialogContent<P>> {
-    contentFactory: (props: P, ref: React.RefObject<C>) => React.ReactNode;
+    contentFactory: (props: P, ref: React.RefObject<C | null>) => React.ReactNode;
     additionalContentProps: Omit<P, keyof DialogProps> | undefined;
     initialOptions: ModuleUiDialogOptions;
     moduleApi: ModuleApi;

src/components/views/dialogs/ReportEventDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, type JSX } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/components/views/dialogs/RoomUpgradeDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import Modal from "../../../Modal";

src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ReactNode, SyntheticEvent } from "react";
+import React, { ReactNode, SyntheticEvent, type JSX } from "react";
 import { EventType, JoinRule } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";

src/components/views/dialogs/ShareDialog.tsx

@@ -103,7 +103,7 @@ export function ShareDialog({ target, customTitle, onFinished, permalinkCreator
     const showQrCode = useSettingValue<boolean>(UIFeature.ShareQRCode);
     const showSocials = useSettingValue<boolean>(UIFeature.ShareSocial);
 
-    const timeoutIdRef = useRef<number>();
+    const timeoutIdRef = useRef<number>(undefined);
     const [isCopied, setIsCopied] = useState(false);
 
     const [linkToSpecificEvent, setLinkToSpecificEvent] = useState(target instanceof MatrixEvent);