Update to React 18

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

package.json

@@ -63,8 +63,8 @@
         "lint:workflows": "find .github/workflows -type f \\( -iname '*.yaml' -o -iname '*.yml' \\) | xargs -I {} sh -c 'echo \"Linting {}\"; action-validator \"{}\"'"
     },
     "resolutions": {
-        "@types/react-dom": "17.0.25",
-        "@types/react": "17.0.80",
+        "@types/react-dom": "18.3.0",
+        "@types/react": "18.3.3",
         "@types/seedrandom": "3.0.8",
         "oidc-client-ts": "3.0.1",
         "jwt-decode": "4.0.0",
@@ -81,7 +81,6 @@
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
-        "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.6.1",
         "@vector-im/compound-web": "^5.5.0",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -129,10 +128,10 @@
         "posthog-js": "1.149.1",
         "qrcode": "1.5.3",
         "re-resizable": "^6.9.0",
-        "react": "17.0.2",
+        "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
-        "react-dom": "17.0.2",
+        "react-dom": "^18.3.1",
         "react-focus-lock": "^2.5.1",
         "react-transition-group": "^4.4.1",
         "rfc4648": "^1.4.0",
@@ -167,7 +166,7 @@
         "@playwright/test": "^1.40.1",
         "@testing-library/dom": "^9.0.0",
         "@testing-library/jest-dom": "^6.0.0",
-        "@testing-library/react": "^12.1.5",
+        "@testing-library/react": "^14",
         "@testing-library/user-event": "^14.4.3",
         "@types/commonmark": "^0.27.4",
         "@types/content-type": "^1.1.5",
@@ -187,9 +186,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "17.0.80",
+        "@types/react": "18.3.3",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "17.0.25",
+        "@types/react-dom": "18.3.0",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.11.0",
         "@types/sdp-transform": "^2.4.6",
@@ -246,6 +245,10 @@
         "postcss": "^8.4.19",
         "webpack": "^4.0.0 || ^5.0.0"
     },
+    "peerDependencies": {
+        "postcss": "^8.4.19",
+        "webpack": "^4.0.0 || ^5.0.0"
+    },
     "@casualbot/jest-sonar-reporter": {
         "outputDirectory": "coverage",
         "outputName": "jest-sonar-report.xml",

src/@types/react.d.ts

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

src/NodeAnimator.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Key, MutableRefObject, ReactElement, ReactFragment, ReactInstance, ReactPortal } from "react";
+import React, { Key, MutableRefObject, ReactElement, ReactInstance } from "react";
 import ReactDom from "react-dom";
 
 interface IChildProps {
@@ -35,7 +35,7 @@ interface IProps {
     innerRef?: MutableRefObject<any>;
 }
 
-function isReactElement(c: ReactElement | ReactFragment | ReactPortal): c is ReactElement {
+function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement {
     return typeof c === "object" && "type" in c;
 }
 
@@ -110,7 +110,8 @@ export default class NodeAnimator extends React.Component<IProps> {
     }
 
     private collectNode(k: Key, node: React.ReactInstance, restingStyle: React.CSSProperties): void {
-        if (node && this.nodes[k] === undefined && this.props.startStyles.length > 0) {
+        const key = typeof k === "bigint" ? Number(k) : k;
+        if (node && this.nodes[key] === undefined && this.props.startStyles.length > 0) {
             const startStyles = this.props.startStyles;
             const domNode = ReactDom.findDOMNode(node);
             // start from startStyle 1: 0 is the one we gave it
@@ -124,7 +125,7 @@ export default class NodeAnimator extends React.Component<IProps> {
                 this.applyStyles(domNode as HTMLElement, restingStyle);
             }, 0);
         }
-        this.nodes[k] = node;
+        this.nodes[key] = node;
 
         if (this.props.innerRef) {
             this.props.innerRef.current = node;

src/components/structures/GenericDropdownMenu.tsx

@@ -97,6 +97,12 @@ type WithKeyFunction<T> = T extends Key
           toKey: (key: T) => Key;
       };
 
+export interface AdditionalOptionsProps {
+    menuDisplayed: boolean;
+    closeMenu: () => void;
+    openMenu: () => void;
+}
+
 type IProps<T> = WithKeyFunction<T> & {
     value: T;
     options: readonly GenericDropdownMenuOption<T>[] | readonly GenericDropdownMenuGroup<T>[];
@@ -105,11 +111,7 @@ type IProps<T> = WithKeyFunction<T> & {
     onOpen?: (ev: ButtonEvent) => void;
     onClose?: (ev: ButtonEvent) => void;
     className?: string;
-    AdditionalOptions?: FunctionComponent<{
-        menuDisplayed: boolean;
-        closeMenu: () => void;
-        openMenu: () => void;
-    }>;
+    AdditionalOptions?: FunctionComponent<AdditionalOptionsProps>;
 };
 
 export function GenericDropdownMenu<T>({

src/components/structures/ThreadPanel.tsx

@@ -117,7 +117,7 @@ export const ThreadPanelHeader: React.FC<{
     ) : null;
 
     const onMarkAllThreadsReadClick = React.useCallback(
-        (e) => {
+        (e: React.MouseEvent) => {
             PosthogTrackers.trackInteraction("WebThreadsMarkAllReadButton", e);
             if (!roomContext.room) {
                 logger.error("No room in context to mark all threads read");

src/components/views/avatars/BaseAvatar.tsx

@@ -19,7 +19,7 @@ limitations under the License.
 
 import React, { forwardRef, useCallback, useContext, useEffect, useState } from "react";
 import classNames from "classnames";
-import { ClientEvent } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, SyncState } from "matrix-js-sdk/src/matrix";
 import { Avatar } from "@vector-im/compound-web";
 
 import SettingsStore from "../../../settings/SettingsStore";
@@ -80,7 +80,7 @@ const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [
     }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const cli = useContext(MatrixClientContext);
-    const onClientSync = useCallback((syncState, prevState) => {
+    const onClientSync = useCallback((syncState: SyncState, prevState: SyncState | null) => {
         // Consider the client reconnected if there is no error with syncing.
         // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
         const reconnected = syncState !== "ERROR" && prevState !== syncState;

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

@@ -26,6 +26,7 @@ interface OptionProps {
     id?: string;
     className?: string;
     onClick: ((ev: ButtonEvent) => void) | null;
+    children?: ReactNode;
 }
 
 export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment, className, ...props }) => {

src/components/views/directory/NetworkDropdown.tsx

@@ -26,7 +26,11 @@ import SdkConfig from "../../../SdkConfig";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import SettingsStore from "../../../settings/SettingsStore";
 import { Protocols } from "../../../utils/DirectoryUtils";
-import { GenericDropdownMenu, GenericDropdownMenuItem } from "../../structures/GenericDropdownMenu";
+import {
+    AdditionalOptionsProps,
+    GenericDropdownMenu,
+    GenericDropdownMenuItem,
+} from "../../structures/GenericDropdownMenu";
 import TextInputDialog from "../dialogs/TextInputDialog";
 import AccessibleButton from "../elements/AccessibleButton";
 import withValidation from "../elements/Validation";
@@ -181,7 +185,7 @@ export const NetworkDropdown: React.FC<IProps> = ({ protocols, config, setConfig
     }));
 
     const addNewServer = useCallback(
-        ({ closeMenu }) => (
+        ({ closeMenu }: AdditionalOptionsProps) => (
             <>
                 <span className="mx_GenericDropdownMenu_divider" />
                 <MenuItemRadio

src/components/views/elements/PersistentApp.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ContextType, CSSProperties, MutableRefObject } from "react";
+import React, { ContextType, CSSProperties, MutableRefObject, ReactNode } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 
 import WidgetUtils from "../../../utils/WidgetUtils";
@@ -28,6 +28,7 @@ interface IProps {
     persistentRoomId: string;
     pointerEvents?: CSSProperties["pointerEvents"];
     movePersistedElement: MutableRefObject<(() => void) | undefined>;
+    children?: ReactNode;
 }
 
 export default class PersistentApp extends React.Component<IProps> {

src/components/views/messages/RoomPredecessorTile.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React, { useCallback, useContext } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { MatrixEvent, Room, RoomState } from "matrix-js-sdk/src/matrix";
 
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
@@ -52,7 +52,7 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
     const predecessor = useRoomState(
         roomContext.room,
         useCallback(
-            (state) => state.findPredecessor(msc3946ProcessDynamicPredecessor),
+            (state: RoomState) => state.findPredecessor(msc3946ProcessDynamicPredecessor),
             [msc3946ProcessDynamicPredecessor],
         ),
     );
@@ -63,9 +63,9 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
 
             dis.dispatch<ViewRoomPayload>({
                 action: Action.ViewRoom,
-                event_id: predecessor.eventId,
+                event_id: predecessor?.eventId,
                 highlighted: true,
-                room_id: predecessor.roomId,
+                room_id: predecessor?.roomId,
                 metricsTrigger: "Predecessor",
                 metricsViaKeyboard: e.type !== "click",
             });
@@ -126,7 +126,7 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
 
     const predecessorPermalink = prevRoom
         ? createLinkWithRoom(prevRoom, predecessor.roomId, predecessor.eventId)
-        : createLinkWithoutRoom(predecessor.roomId, predecessor.viaServers, predecessor.eventId);
+        : createLinkWithoutRoom(predecessor.roomId, predecessor?.viaServers ?? [], predecessor.eventId);
 
     const link = (
         <a href={predecessorPermalink} onClick={onLinkClicked}>

src/components/views/messages/TextualEvent.tsx

@@ -27,6 +27,7 @@ interface IProps {
 
 export default class TextualEvent extends React.Component<IProps> {
     public static contextType = RoomContext;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public render(): React.ReactNode {
         const text = TextForEvent.textForEvent(

src/components/views/messages/TimelineSeparator.tsx

@@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 
 interface Props {
     label: string;
+    children?: ReactNode;
 }
 
 export const enum SeparatorKind {

src/components/views/pips/WidgetPip.tsx

@@ -34,6 +34,7 @@ import { WidgetType } from "../../../widgets/WidgetType";
 import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
 import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions";
+import { ButtonEvent } from "../elements/AccessibleButton";
 
 interface Props {
     widgetId: string;
@@ -62,7 +63,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
     const call = useCallForWidget(widgetId, room.roomId);
 
     const onBackClick = useCallback(
-        (ev) => {
+        (ev: ButtonEvent) => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -87,7 +88,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
     );
 
     const onLeaveClick = useCallback(
-        (ev) => {
+        (ev: ButtonEvent) => {
             ev.preventDefault();
             ev.stopPropagation();
 

src/components/views/right_panel/UserInfo.tsx

@@ -424,6 +424,7 @@ export const UserOptionsSection: React.FC<{
     member: Member;
     canInvite: boolean;
     isSpace?: boolean;
+    children?: ReactNode;
 }> = ({ member, canInvite, isSpace, children }) => {
     const cli = useContext(MatrixClientContext);
 
@@ -1036,7 +1037,7 @@ const IgnoreToggleButton: React.FC<{
     }, [cli, member.userId]);
     // Recheck also if we receive new accountData m.ignored_user_list
     const accountDataHandler = useCallback(
-        (ev) => {
+        (ev: MatrixEvent) => {
             if (ev.getType() === "m.ignored_user_list") {
                 setIsIgnored(cli.isUserIgnored(member.userId));
             }

src/components/views/rooms/RoomHeader.tsx

@@ -116,7 +116,10 @@ export default function RoomHeader({
 
     const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join");
 
-    const videoClick = useCallback((ev) => videoCallClick(ev, callOptions[0]), [callOptions, videoCallClick]);
+    const videoClick = useCallback(
+        (ev: React.MouseEvent) => videoCallClick(ev, callOptions[0]),
+        [callOptions, videoCallClick],
+    );
 
     const toggleCallButton = (
         <Tooltip label={isViewingCall ? _t("voip|minimise_call") : _t("voip|maximise_call")}>

src/components/views/settings/UserProfileSettings.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
+import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
 import { Icon as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
@@ -37,7 +37,7 @@ import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { Flex } from "../../utils/Flex";
 
-const SpinnerToast: React.FC = ({ children }) => (
+const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>
         <InlineSpinner />
         {children}

src/components/views/spaces/QuickSettingsButton.tsx

@@ -45,7 +45,7 @@ const QuickSettingsButton: React.FC<{
         useSettingValue<Record<MetaSpace, boolean>>("Spaces.enabledMetaSpaces");
 
     const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
-    const developerModeEnabled = useSettingValue("developerMode");
+    const developerModeEnabled = useSettingValue<boolean>("developerMode");
 
     let contextMenu: JSX.Element | undefined;
     if (menuDisplayed && handle.current) {

src/hooks/useAccountData.ts

@@ -26,9 +26,9 @@ export const useAccountData = <T extends {}>(cli: MatrixClient, eventType: strin
     const [value, setValue] = useState<T | undefined>(() => tryGetContent<T>(cli.getAccountData(eventType)));
 
     const handler = useCallback(
-        (event) => {
+        (event: MatrixEvent) => {
             if (event.getType() !== eventType) return;
-            setValue(event.getContent());
+            setValue(event.getContent<T>());
         },
         [eventType],
     );