Tweak to not use js-sdk

* test(e2e crypto): use encryption tab in `enableKeyBackup` instead of security & settings tab

* test(e2e crypto): verify device before trying to enable key backup

* doc: improve `enableKeyBackup` documentation

package.json

@@ -108,7 +108,7 @@
         "diff-dom": "^5.0.0",
         "diff-match-patch": "^1.0.5",
         "domutils": "^3.2.2",
-        "emojibase-regex": "16.0.0",
+        "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
         "filesize": "10.1.6",

playwright/e2e/crypto/crypto.spec.ts

@@ -162,6 +162,7 @@ test.describe("Cryptography", function () {
     }
 
     test("Can reset cross-signing keys", async ({ page, app, user: aliceCredentials }) => {
+        await app.client.bootstrapCrossSigning(aliceCredentials);
         const secretStorageKey = await enableKeyBackup(app);
 
         // Fetch the current cross-signing keys

playwright/e2e/crypto/dehydration.spec.ts

@@ -27,16 +27,22 @@ test.use({
 test.describe("Dehydration", () => {
     test.skip(isDendrite, "does not yet support dehydration v2");
 
-    test("'Set up secure backup' creates dehydrated device", async ({ page, user, app }, workerInfo) => {
-        // Create a backup (which will create SSSS, and dehydrated device)
+    test("Verify device and reset creates dehydrated device", async ({ page, user, credentials, app }, workerInfo) => {
+        // Verify the device by resetting the key (which will create SSSS, and dehydrated device)
 
         const securityTab = await app.settings.openUserSettings("Security & Privacy");
-
-        await expect(securityTab.getByRole("heading", { name: "Secure Backup" })).toBeVisible();
         await expect(securityTab.getByText("Offline device enabled")).not.toBeVisible();
-        await securityTab.getByRole("button", { name: "Set up", exact: true }).click();
 
-        await completeCreateSecretStorageDialog(page);
+        await app.closeDialog();
+
+        // Verify the device by resetting the key
+        const settings = await app.settings.openUserSettings("Encryption");
+        await settings.getByRole("button", { name: "Verify this device" }).click();
+        await page.getByRole("button", { name: "Proceed with reset" }).click();
+        await page.getByRole("button", { name: "Continue" }).click();
+        await page.getByRole("button", { name: "Copy" }).click();
+        await page.getByRole("button", { name: "Continue" }).click();
+        await page.getByRole("button", { name: "Done" }).click();
 
         await expectDehydratedDeviceEnabled(app);
 

playwright/e2e/crypto/utils.ts

@@ -292,17 +292,28 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
 }
 
 /**
- * Open the security settings and enable secure key backup.
- *
- * Assumes that the current device has been cross-signed (which means that we skip a step where we set it up).
+ * Open the encryption settings and enable key storage and recovery
+ * Assumes that the current device has been verified
  *
  * Returns the recovery key
  */
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
-    await app.settings.openUserSettings("Security & Privacy");
-    await app.page.getByRole("button", { name: "Set up Secure Backup" }).click();
+    const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    return await completeCreateSecretStorageDialog(app.page);
+    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+    if (!(await keyStorageToggle.isChecked())) {
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+    }
+
+    await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
+    await encryptionTab.getByRole("button", { name: "Continue" }).click();
+
+    const recoveryKey = await encryptionTab.getByTestId("recoveryKey").innerText();
+    await encryptionTab.getByRole("button", { name: "Continue" }).click();
+    await encryptionTab.getByRole("textbox").fill(recoveryKey);
+    await encryptionTab.getByRole("button", { name: "Finish set up" }).click();
+    await app.settings.closeDialog();
+    return recoveryKey;
 }
 
 /**

playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -165,6 +165,8 @@ test.describe("Room list", () => {
         test("should render an activity decoration", { tag: "@screenshot" }, async ({ page, app, user, bot }) => {
             const roomListView = getRoomList(page);
 
+            const otherRoomId = await app.client.createRoom({ name: "other room" });
+
             const roomId = await app.client.createRoom({ name: "activity" });
             await app.client.inviteUser(roomId, bot.credentials.userId);
             await bot.joinRoom(roomId);
@@ -178,6 +180,8 @@ test.describe("Room list", () => {
             await page.getByText("Show all activity in the room list (dots or number of unread messages)").click();
             await app.settings.closeDialog();
 
+            // Switch to the other room to avoid the notification to be cleared
+            await app.viewRoomById(otherRoomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
             const room = roomListView.getByRole("gridcell", { name: "activity" });

playwright/testcontainers/synapse.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
 
-const TAG = "develop@sha256:4a66d4e3052740743f32648846a66c2517dd525fe8fd30db421a1c020b7e32e4";
+const TAG = "develop@sha256:5f127cc6933dcf69548493b240ad6db7d9245a6b2d05a6c5c3a4dffd2700ca5d";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,

src/@types/common.ts

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

src/@types/matrix-js-sdk.d.ts

@@ -15,6 +15,8 @@ import type { EmptyObject } from "matrix-js-sdk/src/matrix";
 import type { DeviceClientInformation } from "../utils/device/types.ts";
 import type { UserWidget } from "../utils/WidgetUtils-types.ts";
 
+type InviteConfigAccountDataRule = "allow" | "block";
+
 // Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types
 declare module "matrix-js-sdk/src/types" {
     export interface FileInfo {
@@ -60,6 +62,21 @@ declare module "matrix-js-sdk/src/types" {
         };
     }
 
+    export interface InviteConfigAccountData {
+        /**
+         * Rule exceptions for users. Takes priority over `default` and `server_exceptions`.
+         */
+        user_exceptions: Record<string, InviteConfigAccountDataRule>;
+        /**
+         * Rule exceptions for users. Takes priority over `default`.
+         */
+        server_exceptions: Record<string, InviteConfigAccountDataRule>;
+        /**
+         * The default rule for invite handling when no exceptions match.
+         */
+        default: InviteConfigAccountDataRule;
+    }
+
     export interface AccountDataEvents {
         // Analytics account data event
         "im.vector.analytics": {
@@ -87,6 +104,9 @@ declare module "matrix-js-sdk/src/types" {
         "m.accepted_terms": {
             accepted: string[];
         };
+
+        // MSC4155: Invite filtering
+        "org.matrix.msc4155.invite_permission_config": InviteConfigAccountData;
     }
 
     export interface AudioContent {

src/HtmlUtils.tsx

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type LegacyRef, type ReactNode } from "react";
+import React, { type JSX, type LegacyRef, type ReactNode } from "react";
 import sanitizeHtml, { type IOptions } from "sanitize-html";
 import classNames from "classnames";
 import katex from "katex";

src/accessibility/roving/RovingAccessibleButton.tsx

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

src/async-components/structures/ErrorView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactNode } from "react";
+import React, { type JSX, type ReactNode } 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 OR LicenseRef-Element-Com
 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef } from "react";
+import React, { type JSX, createRef } from "react";
 import FileSaver from "file-saver";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type AuthDict } from "matrix-js-sdk/src/matrix";

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, { type HTMLAttributes, type ReactHTML, type ReactNode, type WheelEvent } from "react";
+import React, { type HTMLAttributes, type JSX, type ReactHTML, type ReactNode, type WheelEvent } from "react";
 
 type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
     JSX.IntrinsicElements[T] extends HTMLAttributes<object> ? DynamicElementProps<T> : DynamicElementProps<"div">;

src/components/structures/ContextMenu.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type CSSProperties, type RefObject, type SyntheticEvent, useRef, useState } from "react";
+import React, { type JSX, type CSSProperties, type RefObject, type SyntheticEvent, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import FocusLock from "react-focus-lock";

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, { type FunctionComponent, type Key, type PropsWithChildren, type ReactNode } from "react";
+import React, { type JSX, type FunctionComponent, type Key, type PropsWithChildren, type ReactNode } from "react";
 
 import { MenuItemRadio } from "../../accessibility/context_menu/MenuItemRadio";
 import { type ButtonEvent } from "../views/elements/AccessibleButton";

src/components/structures/HomePage.tsx

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

src/components/structures/IndicatorScrollbar.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 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, { type IProps as AutoHideScrollbarProps } from "./AutoHideScrollbar";
 import UIStore, { UI_EVENTS } from "../../stores/UIStore";

src/components/structures/LeftPanel.tsx

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

src/components/structures/MainSplit.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactNode } from "react";
+import React, { type JSX, type ReactNode } from "react";
 import { type NumberSize, Resizable } from "re-resizable";
 import { type Direction } from "re-resizable/lib/resizer";
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, lazy } from "react";
+import React, { type JSX, createRef, lazy } 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type ReactNode, type TransitionEvent } from "react";
+import React, { type JSX, createRef, type ReactNode, type TransitionEvent } from "react";
 import classNames from "classnames";
 import {
     type Room,

src/components/structures/NotificationPanel.tsx

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

src/components/structures/RoomSearchView.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { type JSX, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import {
     type ISearchResults,
     type IThreadBundledRelationship,

src/components/structures/RoomStatusBar.tsx

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

src/components/structures/SpaceHierarchy.tsx

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, {
+    type JSX,
     type Dispatch,
     type KeyboardEvent,
     type KeyboardEventHandler,

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, type 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, { type JSX, useCallback, useContext, useRef, useState } from "react";
 
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import createRoom, { type 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, { type DetailedHTMLProps, type HTMLAttributes, type ReactNode } from "react";
+import React, { type JSX, type DetailedHTMLProps, type HTMLAttributes, type ReactNode } from "react";
 
 interface Props extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
     className?: string;

src/components/structures/TabbedView.tsx

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

src/components/structures/ThreadView.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type KeyboardEvent } from "react";
+import React, { type JSX, createRef, type KeyboardEvent } from "react";
 import {
     type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type ReactNode } from "react";
+import React, { type JSX, createRef, type ReactNode } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";

src/components/structures/ViewSource.tsx

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

src/components/structures/auth/ConfirmSessionLockTheftView.tsx

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

src/components/structures/auth/Registration.tsx

@@ -20,7 +20,7 @@ import {
     SSOAction,
     type RegisterResponse,
 } from "matrix-js-sdk/src/matrix";
-import React, { Fragment, type ReactNode } from "react";
+import React, { type JSX, Fragment, type ReactNode } 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 OR LicenseRef-Element-Com
 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { type KeyBackupInfo, type VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ChangeEvent, type SyntheticEvent } from "react";
+import React, { type JSX, type ChangeEvent, type SyntheticEvent } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type Optional } from "matrix-events-sdk";
 import { type LoginFlow, MatrixError, SSOAction, type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { Fragment, type PropsWithChildren, type ReactNode, useContext } from "react";
+import React, { type JSX, Fragment, type PropsWithChildren, type ReactNode, useContext } 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, { type ComponentProps, type PropsWithChildren, type Reducer, useReducer } from "react";
+import React, { type JSX, type ComponentProps, type PropsWithChildren, type Reducer, useReducer } from "react";
 
 import { AuthHeaderContext } from "./AuthHeaderContext";
 import { type 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, { useMemo } from "react";
+import React, { type JSX, useMemo } from "react";
 
 type FlexProps = {
     /**

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, { type ComponentProps, type JSXElementConstructor, useMemo } from "react";
+import React, { type JSX, type ComponentProps, type JSXElementConstructor, useMemo } from "react";
 
 type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = {
     /**

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, { type PropsWithChildren } from "react";
+import React, { type JSX, type PropsWithChildren } from "react";
 
 interface Props {
     className?: string;

src/components/views/auth/AuthFooter.tsx

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

src/components/views/auth/CaptchaForm.tsx

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

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -10,7 +10,7 @@ import classNames from "classnames";
 import { type InternationalisedPolicy, type Terms, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { AuthType, type AuthDict, type IInputs, type IStageStatus } from "matrix-js-sdk/src/interactive-auth";
 import { logger } from "matrix-js-sdk/src/logger";
-import React, { type ChangeEvent, createRef, type FormEvent, Fragment } from "react";
+import React, { type JSX, type ChangeEvent, createRef, type FormEvent, Fragment } 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 OR LicenseRef-Element-Com
 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type ReactNode } from "react";
+import React, { type JSX, createRef, type ReactNode } 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/PasswordLogin.tsx

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

src/components/views/auth/RegistrationForm.tsx

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

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 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,

src/components/views/avatars/MemberAvatar.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, type ReactNode, type Ref, useContext } from "react";
+import React, { type JSX, forwardRef, type ReactNode, type Ref, useContext } from "react";
 import { type RoomMember, type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactNode, useEffect, useState } from "react";
+import React, { type JSX, type ReactNode, useEffect, useState } from "react";
 import { ClientEvent, type Room, type 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, { type ComponentProps, lazy, Suspense } from "react";
+import React, { type JSX, type ComponentProps, lazy, Suspense } from "react";
 
 import Spinner from "../elements/Spinner";
 

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactNode } from "react";
+import React, { type JSX, type ReactNode } 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, useContext } from "react";
+import React, { type JSX, createRef, useContext } from "react";
 import {
     EventStatus,
     type 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 { type Room } from "matrix-js-sdk/src/matrix";
-import React, { useContext } from "react";
+import React, { type JSX, useContext } 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 { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useContext } from "react";
+import React, { type JSX, useContext } from "react";
 import { type Room, EventType, RoomType } from "matrix-js-sdk/src/matrix";
 
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ComponentProps, useContext } from "react";
+import React, { type JSX, type ComponentProps, useContext } from "react";
 import { type ClientWidgetApi, type IWidget, MatrixCapabilities } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";

src/components/views/dialogs/AskInviteAnywayDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useCallback } from "react";
+import React, { type JSX, useCallback } 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 OR LicenseRef-Element-Com
 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 { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactNode } from "react";
+import React, { type JSX, type ReactNode } from "react";
 import { Link } from "@vector-im/compound-web";
 
 import SdkConfig from "../../../SdkConfig";

src/components/views/dialogs/ChangelogDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ComponentProps, useMemo, useState } from "react";
+import React, { type JSX, type ComponentProps, useMemo, useState } from "react";
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ChangeEvent, createRef, type KeyboardEvent, type SyntheticEvent } from "react";
+import React, { type JSX, type ChangeEvent, createRef, type KeyboardEvent, type SyntheticEvent } from "react";
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useRef, useState } from "react";
+import React, { type JSX, useRef, useState } from "react";
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { type AuthType, type IAuthData } from "matrix-js-sdk/src/interactive-auth";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useState } from "react";
+import React, { type JSX, useState } from "react";
 
 import { _t, _td, type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useRef, useState, type Dispatch, type SetStateAction } from "react";
+import React, { type JSX, useRef, useState, type Dispatch, type SetStateAction } from "react";
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { type JSX, useEffect, useRef, useState } 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useEffect, useMemo, useState } from "react";
+import React, { type JSX, useEffect, useMemo, useState } from "react";
 import classnames from "classnames";
 import {
     type IContent,

src/components/views/dialogs/InteractiveAuthDialog.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { type 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 OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type ReactNode, type SyntheticEvent } from "react";
+import React, { type JSX, createRef, type ReactNode, type SyntheticEvent } from "react";
 import classNames from "classnames";
 import { RoomMember, type Room, MatrixError, EventType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";

src/components/views/dialogs/MessageEditHistoryDialog.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { type MatrixEvent, EventType, RelationType, type 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/ReportEventDialog.tsx

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

src/components/views/dialogs/TermsDialog.tsx

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

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { FilesIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { Toast } from "@vector-im/compound-web";
-import React, { useState } from "react";
+import React, { type JSX, useState } from "react";
 import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 import DevicesIcon from "@vector-im/compound-design-tokens/assets/web/icons/devices";
 import VisibilityOnIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on";

src/components/views/dialogs/devtools/FilteredList.tsx

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

src/components/views/dialogs/devtools/RoomNotifications.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { NotificationCountType, type Room, type Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
-import React, { useContext } from "react";
+import React, { type JSX, useContext } from "react";
 import { type ReadReceipt } from "matrix-js-sdk/src/models/read-receipt";
 
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";

src/components/views/dialogs/devtools/ServerInfo.tsx

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

src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx

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

src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import classNames from "classnames";
 import { type Room } from "matrix-js-sdk/src/matrix";
-import React, { Fragment, useState } from "react";
+import React, { type JSX, Fragment, useState } from "react";
 
 import { ContextMenuTooltipButton } from "../../../../accessibility/context_menu/ContextMenuTooltipButton";
 import { useNotificationState } from "../../../../hooks/useRoomNotificationState";

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -20,7 +20,16 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { normalize } from "matrix-js-sdk/src/utils";
-import React, { type ChangeEvent, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+    type JSX,
+    type ChangeEvent,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
 import sanitizeHtml from "sanitize-html";
 
 import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";

src/components/views/dialogs/spotlight/TooltipOption.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { type ReactNode } from "react";
+import React, { type JSX, type ReactNode } from "react";
 
 import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
 import AccessibleButton, { type ButtonProps } from "../../elements/AccessibleButton";

src/components/views/elements/AccessibleButton.tsx

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
  */
 
 import React, {
+    type JSX,
     type ComponentProps,
     type ComponentPropsWithoutRef,
     forwardRef,

src/components/views/elements/AppTile.tsx

@@ -9,7 +9,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ContextType, createRef, type CSSProperties, type MutableRefObject, type ReactNode } from "react";
+import React, {
+    type JSX,
+    type ContextType,
+    createRef,
+    type CSSProperties,
+    type MutableRefObject,
+    type ReactNode,
+} from "react";
 import classNames from "classnames";
 import { type IWidget, MatrixCapabilities } from "matrix-widget-api";
 import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";

src/components/views/elements/DialogButtons.tsx

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

src/components/views/elements/Dropdown.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, {
+    type JSX,
     type ChangeEvent,
     createRef,
     type CSSProperties,

src/components/views/elements/EditableItemList.tsx

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

src/components/views/elements/ErrorBoundary.tsx

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

src/components/views/elements/Field.tsx

@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, {
+    type JSX,
     type InputHTMLAttributes,
     type SelectHTMLAttributes,
     type TextareaHTMLAttributes,

src/components/views/elements/FilterTabGroup.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type FieldsetHTMLAttributes, type ReactNode } from "react";
+import React, { type JSX, type FieldsetHTMLAttributes, type ReactNode } from "react";
 
 export type FilterTab<T> = {
     label: string | ReactNode;

src/components/views/elements/ImageView.tsx

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type CSSProperties, useRef, useState } from "react";
+import React, { type JSX, createRef, type CSSProperties, useRef, useState } from "react";
 import FocusLock from "react-focus-lock";
 import { type MatrixEvent, parseErrorResponse } from "matrix-js-sdk/src/matrix";