Prepare for React 19 upgrade (#29612)

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

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 JSX, type ReactHTML, type ReactNode, type WheelEvent } from "react";
+import React, { type HTMLAttributes, type JSX, type ReactNode, type WheelEvent } from "react";
 
 type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
     JSX.IntrinsicElements[T] extends HTMLAttributes<object> ? DynamicElementProps<T> : DynamicElementProps<"div">;
@@ -27,7 +27,7 @@ export type IProps<T extends keyof JSX.IntrinsicElements> = Omit<DynamicHtmlElem
 
 export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> extends React.Component<IProps<T>> {
     public static defaultProps = {
-        element: "div" as keyof ReactHTML,
+        element: "div" as keyof HTMLElementTagNameMap,
     };
 
     public readonly containerRef = React.createRef<HTMLDivElement>();

src/components/structures/ContextMenu.tsx

@@ -440,7 +440,7 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
         );
     }
 
-    public render(): React.ReactChild {
+    public render(): JSX.Element {
         if (this.props.mountAsChild) {
             // Render as a child of the current parent
             return this.renderMenu();

src/components/views/dialogs/ReportRoomDialog.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 ChangeEventHandler, useCallback, useState } from "react";
+import React, { type JSX, type ChangeEventHandler, useCallback, useState } from "react";
 import { Root, Field, Label, InlineSpinner, ErrorMessage } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";

src/components/views/location/MapFallback.tsx

@@ -16,7 +16,6 @@ import Spinner from "../elements/Spinner";
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     isLoading?: boolean;
-    children?: React.ReactNode | React.ReactNodeArray;
 }
 
 const MapFallback: React.FC<Props> = ({ className, isLoading, children, ...rest }) => {

src/components/views/messages/EventTileBubble.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 JSX, forwardRef, type ReactNode, type ReactChild } from "react";
+import React, { type JSX, forwardRef, type ReactNode } from "react";
 import classNames from "classnames";
 
 interface IProps {
@@ -14,7 +14,7 @@ interface IProps {
     title: string;
     timestamp?: JSX.Element;
     subtitle?: ReactNode;
-    children?: ReactChild;
+    children?: JSX.Element;
 }
 
 const EventTileBubble = forwardRef<HTMLDivElement, IProps>(

src/components/views/room_settings/AliasSettings.tsx

@@ -280,7 +280,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
 
     private onLocalAliasesToggled = (event: ChangeEvent<HTMLDetailsElement>): void => {
         // expanded
-        if (event.target.open) {
+        if (event.currentTarget.open) {
             // if local aliases haven't been preloaded yet at component mount
             if (!this.props.canSetCanonicalAlias && this.state.localAliases.length === 0) {
                 this.loadLocalAliases();

src/components/views/rooms/RoomContextDetails.tsx

@@ -7,16 +7,20 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Room } from "matrix-js-sdk/src/matrix";
-import React, { type JSX, type HTMLAttributes, type ReactHTML } from "react";
+import React, { type JSX, type HTMLAttributes } from "react";
 
 import { roomContextDetails } from "../../../utils/i18n-helpers";
 
-type Props<T extends keyof ReactHTML> = HTMLAttributes<T> & {
+type Props<T extends keyof HTMLElementTagNameMap> = HTMLAttributes<T> & {
     component?: T;
     room: Room;
 };
 
-export function RoomContextDetails<T extends keyof ReactHTML>({ room, component, ...other }: Props<T>): JSX.Element {
+export function RoomContextDetails<T extends keyof HTMLElementTagNameMap>({
+    room,
+    component,
+    ...other
+}: Props<T>): JSX.Element {
     const contextDetails = roomContextDetails(room);
     if (contextDetails) {
         return React.createElement(

src/components/views/rooms/RoomKnocksBar.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { EventTimeline, JoinRule, type MatrixError, type Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import React, { type ReactElement, type ReactNode, useCallback, useState, type VFC } from "react";
+import React, { type ReactElement, type ReactNode, useCallback, useState, type FC } from "react";
 import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import dis from "../../../dispatcher/dispatcher";
@@ -22,7 +22,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import Heading from "../typography/Heading";
 import { formatList } from "../../../utils/FormattingUtils";
 
-export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
+export const RoomKnocksBar: FC<{ room: Room }> = ({ room }) => {
     const [disabled, setDisabled] = useState(false);
     const knockMembers = useTypedEventEmitterState(
         room,

src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { EventTimeline, type MatrixError, type Room, type RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import React, { useCallback, useState, type VFC } from "react";
+import React, { useCallback, useState, type FC } from "react";
 import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { formatRelativeTime } from "../../../../../DateUtils";
@@ -22,13 +22,13 @@ import SettingsFieldset from "../../SettingsFieldset";
 import { SettingsSection } from "../../shared/SettingsSection";
 import SettingsTab from "../SettingsTab";
 
-const Timestamp: VFC<{ roomMember: RoomMember }> = ({ roomMember }) => {
+const Timestamp: FC<{ roomMember: RoomMember }> = ({ roomMember }) => {
     const timestamp = roomMember.events.member?.event.origin_server_ts;
     if (!timestamp) return null;
     return <time className="mx_PeopleRoomSettingsTab_timestamp">{formatRelativeTime(new Date(timestamp))}</time>;
 };
 
-const SeeMoreOrLess: VFC<{ roomMember: RoomMember }> = ({ roomMember }) => {
+const SeeMoreOrLess: FC<{ roomMember: RoomMember }> = ({ roomMember }) => {
     const [seeMore, setSeeMore] = useState(false);
     const reason = roomMember.events.member?.getContent().reason;
 
@@ -51,7 +51,7 @@ const SeeMoreOrLess: VFC<{ roomMember: RoomMember }> = ({ roomMember }) => {
     );
 };
 
-const Knock: VFC<{
+const Knock: FC<{
     canInvite: boolean;
     canKick: boolean;
     onApprove: (userId: string) => Promise<void>;
@@ -103,7 +103,7 @@ const Knock: VFC<{
     );
 };
 
-export const PeopleRoomSettingsTab: VFC<{ room: Room }> = ({ room }) => {
+export const PeopleRoomSettingsTab: FC<{ room: Room }> = ({ room }) => {
     const client = room.client;
     const userId = client.getUserId() || "";
     const canInvite = room.canInvite(userId);

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -224,8 +224,14 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    private renderGroup(settingIds: BooleanSettingKey[], level = SettingLevel.ACCOUNT): React.ReactNodeArray {
+    private renderGroup(settingIds: BooleanSettingKey[], level = SettingLevel.ACCOUNT): JSX.Element {
-        return settingIds.map((i) => <SettingsFlag key={i} name={i} level={level} />);
+        return (
+            <>
+                {settingIds.map((i) => (
+                    <SettingsFlag key={i} name={i} level={level} />
+                ))}
+            </>
+        );
     }
 
     private onKeyboardShortcutsClicked = (): void => {