diff --git a/src/@types/common.ts b/src/@types/common.ts index f80b66a632..07c0881b49 100644 --- a/src/@types/common.ts +++ b/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"; diff --git a/src/@types/react.d.ts b/src/@types/react.d.ts index ba97b2bba6..0c069e8324 100644 --- a/src/@types/react.d.ts +++ b/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( - render: (props: PropsWithChildren

, ref: React.ForwardedRef) => React.ReactElement | null, - ): (props: P & React.RefAttributes) => React.ReactElement | null; + render: (props: PropsWithChildren

, ref: React.ForwardedRef) => React.ReactElement | null, + ): (props: P & React.RefAttributes) => React.ReactElement | null; // Fix lazy types - https://stackoverflow.com/a/71017028 function lazy>(factory: () => Promise<{ default: T }>): T; diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 3146a9eb07..61343899be 100644 --- a/src/HtmlUtils.tsx +++ b/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, op export function topicToHtml( topic?: string, htmlTopic?: string, - ref?: LegacyRef, + ref?: Ref, allowExtendedHtml = false, ): ReactNode { if (!SettingsStore.getValue("feature_html_topic")) { diff --git a/src/Linkify.tsx b/src/Linkify.tsx index d980c496c4..f0ba3a4450 100644 --- a/src/Linkify.tsx +++ b/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): ReactElement { +export function Linkify({ as, options, children }: React.ComponentProps): ReactElement { return ( <_Linkify as={as} options={merge({}, linkifyMatrixOptions, options)}> {children} diff --git a/src/NodeAnimator.tsx b/src/NodeAnimator.tsx index 3ca098311f..4f8c7e92e6 100644 --- a/src/NodeAnimator.tsx +++ b/src/NodeAnimator.tsx @@ -23,7 +23,7 @@ interface IProps { innerRef?: MutableRefObject; } -function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement { +function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement { 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 { private nodes: Record = {}; - private children: { [key: string]: ReactElement } = {}; + private children: { [key: string]: ReactElement } = {}; public static defaultProps: Partial = { startStyles: [], }; diff --git a/src/accessibility/RovingTabIndex.tsx b/src/accessibility/RovingTabIndex.tsx index d35a0291c3..9d56e09422 100644 --- a/src/accessibility/RovingTabIndex.tsx +++ b/src/accessibility/RovingTabIndex.tsx @@ -354,7 +354,7 @@ export const RovingTabIndexProvider: React.FC = ({ * nodeRef = inputRef when inputRef argument is provided. */ export const useRovingTabIndex = ( - inputRef?: RefObject, + inputRef?: RefObject, ): [FocusHandler, boolean, RefCallback, RefObject] => { const context = useContext(RovingTabIndexContext); diff --git a/src/accessibility/context_menu/ContextMenuButton.tsx b/src/accessibility/context_menu/ContextMenuButton.tsx index d8c7d912c1..e665ff9178 100644 --- a/src/accessibility/context_menu/ContextMenuButton.tsx +++ b/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"; diff --git a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx index 11437866bd..2d28be3f37 100644 --- a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx +++ b/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"; diff --git a/src/accessibility/roving/RovingAccessibleButton.tsx b/src/accessibility/roving/RovingAccessibleButton.tsx index f50fb010ae..ce10a086e1 100644 --- a/src/accessibility/roving/RovingAccessibleButton.tsx +++ b/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"; diff --git a/src/accessibility/roving/types.ts b/src/accessibility/roving/types.ts index 98b498844b..748912521c 100644 --- a/src/accessibility/roving/types.ts +++ b/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; +export type Ref = RefObject; export type FocusHandler = () => void; diff --git a/src/async-components/structures/ErrorView.tsx b/src/async-components/structures/ErrorView.tsx index 5e60b8e67c..4b8a743eea 100644 --- a/src/async-components/structures/ErrorView.tsx +++ b/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"; diff --git a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx index 9608abc4bc..f9829d6fcc 100644 --- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx +++ b/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"; diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx index 932f6d7fcf..1154ea510c 100644 --- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx +++ b/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"; diff --git a/src/autocomplete/Autocompleter.ts b/src/autocomplete/Autocompleter.ts index b2a2b1e13e..fd5fac499b 100644 --- a/src/autocomplete/Autocompleter.ts +++ b/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; range: ISelectionRange; command?: string; suffix?: string; diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx index 549fbf4592..1885041226 100644 --- a/src/components/structures/AutoHideScrollbar.tsx +++ b/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 = JSX.IntrinsicElements[T] extends HTMLAttributes<{}> ? DynamicElementProps : DynamicElementProps<"div">; @@ -30,7 +30,7 @@ export default class AutoHideScrollbar ex element: "div" as keyof ReactHTML, }; - public readonly containerRef: React.RefObject = React.createRef(); + public readonly containerRef: React.RefObject = React.createRef(); public componentDidMount(): void { if (this.containerRef.current && this.props.onScroll) { diff --git a/src/components/structures/AutocompleteInput.tsx b/src/components/structures/AutocompleteInput.tsx index 5e930d5f1b..283826e135 100644 --- a/src/components/structures/AutocompleteInput.tsx +++ b/src/components/structures/AutocompleteInput.tsx @@ -22,8 +22,8 @@ interface AutocompleteInputProps { selection: ICompletion[]; onSelectionChange: (selection: ICompletion[]) => void; maxSuggestions?: number; - renderSuggestion?: (s: ICompletion) => ReactElement; - renderSelection?: (m: ICompletion) => ReactElement; + renderSuggestion?: (s: ICompletion) => ReactElement; + renderSelection?: (m: ICompletion) => ReactElement; additionalFilter?: (suggestion: ICompletion) => boolean; } @@ -163,11 +163,11 @@ export const AutocompleteInput: React.FC = ({ type SelectionItemProps = { item: ICompletion; onClick: (completion: ICompletion) => void; - render?: (completion: ICompletion) => ReactElement; + render?: (completion: ICompletion) => ReactElement; }; const SelectionItem: React.FC = ({ item, onClick, render }) => { - const withContainer = (children: ReactNode): ReactElement => ( + const withContainer = (children: ReactNode): ReactElement => ( void; - render?: (completion: ICompletion) => ReactElement; + render?: (completion: ICompletion) => ReactElement; }; const SuggestionItem: React.FC = ({ item, selection, onClick, render }) => { @@ -204,7 +204,7 @@ const SuggestionItem: React.FC = ({ item, selection, onClic "mx_AutocompleteInput_suggestion--selected": isSelected, }); - const withContainer = (children: ReactNode): ReactElement => ( + const withContainer = (children: ReactNode): ReactElement => (

| 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 = [ boolean, - RefObject, + RefObject, (ev?: SyntheticEvent) => void, (ev?: SyntheticEvent) => void, (val: boolean) => void, ]; // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint -export const useContextMenu = (inputRef?: RefObject): ContextMenuTuple => { +export const useContextMenu = (inputRef?: RefObject): ContextMenuTuple => { let button = useRef(null); if (inputRef) { // if we are given a ref, use it instead of ours diff --git a/src/components/structures/GenericDropdownMenu.tsx b/src/components/structures/GenericDropdownMenu.tsx index b323d9b8ad..02a88bd556 100644 --- a/src/components/structures/GenericDropdownMenu.tsx +++ b/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"; diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx index 31deb381dd..5b169f640e 100644 --- a/src/components/structures/HomePage.tsx +++ b/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"; diff --git a/src/components/structures/IndicatorScrollbar.tsx b/src/components/structures/IndicatorScrollbar.tsx index 2c1db504b1..c7fbe8e02c 100644 --- a/src/components/structures/IndicatorScrollbar.tsx +++ b/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"; diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 49d0f570a5..94e6e27500 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/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"; diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 019f9cd1a8..975c5dc09a 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -123,9 +123,9 @@ class LoggedInView extends React.Component { public static displayName = "LoggedInView"; protected readonly _matrixClient: MatrixClient; - protected readonly _roomView: React.RefObject; - protected readonly _resizeContainer: React.RefObject; - protected readonly resizeHandler: React.RefObject; + protected readonly _roomView: React.RefObject; + protected readonly _resizeContainer: React.RefObject; + protected readonly resizeHandler: React.RefObject; protected layoutWatcherRef?: string; protected compactLayoutWatcherRef?: string; protected backgroundImageWatcherRef?: string; diff --git a/src/components/structures/MainSplit.tsx b/src/components/structures/MainSplit.tsx index 54aa220354..68b243c414 100644 --- a/src/components/structures/MainSplit.tsx +++ b/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"; diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 548dbff983..56daa6364b 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/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, diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index d2133f4f13..4b9b88a4ae 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/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"; diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx index 236da25409..3e612ab993 100644 --- a/src/components/structures/NotificationPanel.tsx +++ b/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"; diff --git a/src/components/structures/PictureInPictureDragger.tsx b/src/components/structures/PictureInPictureDragger.tsx index fe8badd99d..925c92f557 100644 --- a/src/components/structures/PictureInPictureDragger.tsx +++ b/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"; diff --git a/src/components/structures/PipContainer.tsx b/src/components/structures/PipContainer.tsx index c9fabfe0c9..f0204c0e4e 100644 --- a/src/components/structures/PipContainer.tsx +++ b/src/components/structures/PipContainer.tsx @@ -280,7 +280,7 @@ class PipContainerInner extends React.Component { } export const PipContainer: React.FC = () => { - const movePersistedElement = useRef<() => void>(); + const movePersistedElement = useRef<() => void>(undefined); return ; }; diff --git a/src/components/structures/RoomSearchView.tsx b/src/components/structures/RoomSearchView.tsx index 82146bcc5e..8c1d5e921e 100644 --- a/src/components/structures/RoomSearchView.tsx +++ b/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( const aborted = useRef(false); // A map from room ID to permalink creator const permalinkCreators = useRef(new Map()).current; - const innerRef = useRef(); + const innerRef = useRef(undefined); useEffect(() => { return () => { diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 3bd69148ae..9120367042 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/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, diff --git a/src/components/structures/RoomStatusBarUnsentMessages.tsx b/src/components/structures/RoomStatusBarUnsentMessages.tsx index ab356405b2..0de52ff24e 100644 --- a/src/components/structures/RoomStatusBarUnsentMessages.tsx +++ b/src/components/structures/RoomStatusBarUnsentMessages.tsx @@ -15,10 +15,10 @@ interface RoomStatusBarUnsentMessagesProps { title: ReactNode; description?: string; notificationState: StaticNotificationState; - buttons: ReactElement; + buttons: ReactElement; } -export const RoomStatusBarUnsentMessages = (props: RoomStatusBarUnsentMessagesProps): ReactElement => { +export const RoomStatusBarUnsentMessages = (props: RoomStatusBarUnsentMessagesProps): ReactElement => { return (
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 772d5698a3..30f425dc55 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -251,7 +251,7 @@ interface LocalRoomViewProps { localRoom: LocalRoom; resizeNotifier: ResizeNotifier; permalinkCreator: RoomPermalinkCreator; - roomView: RefObject; + roomView: RefObject; onFileDrop: (dataTransfer: DataTransfer) => Promise; 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 { 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 composer: ReactElement | null = null; + let statusBar: ReactElement | null = null; + let composer: ReactElement | 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 { const text = _t("room|creating_room_text", { names: props.names }); return (
diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx index 80193fd338..a294b5ac5e 100644 --- a/src/components/structures/SpaceHierarchy.tsx +++ b/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 = ({ } }; - let button: ReactElement; + let button: ReactElement; if (busy) { button = ( = ({ ); } - let checkbox: ReactElement | undefined; + let checkbox: ReactElement | undefined; if (onToggleClick) { if (hasPermissions) { checkbox = ; @@ -187,7 +188,7 @@ const Tile: React.FC = ({ } } - let avatar: ReactElement; + let avatar: ReactElement; if (joinedRoom) { avatar = ; } else { @@ -233,12 +234,12 @@ const Tile: React.FC = ({ ); } - let joinedSection: ReactElement | undefined; + let joinedSection: ReactElement | undefined; if (joinedRoom) { joinedSection =
{_t("common|joined")}
; } - let suggestedSection: ReactElement | undefined; + let suggestedSection: ReactElement | undefined; if (suggested && (!joinedRoom || hasPermissions)) { suggestedSection = {_t("space|suggested")}; } @@ -619,7 +620,7 @@ const useIntersectionObserver = (callback: () => void): ((element: HTMLDivElemen } }; - const observerRef = useRef(); + const observerRef = useRef(undefined); return (element: HTMLDivElement) => { if (observerRef.current) { observerRef.current.disconnect(); diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index bf0ddb1fe2..8046d95749 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/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"; diff --git a/src/components/structures/SplashPage.tsx b/src/components/structures/SplashPage.tsx index 6ca20fdb3c..121f421129 100644 --- a/src/components/structures/SplashPage.tsx +++ b/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, HTMLElement> { className?: string; diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx index 7678dbf784..f961f4232e 100644 --- a/src/components/structures/TabbedView.tsx +++ b/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. */ diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index bc1e26d087..e2cecf3ebf 100644 --- a/src/components/structures/ThreadView.tsx +++ b/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, diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index c5f8ef841d..f5bde3e676 100644 --- a/src/components/structures/UserMenu.tsx +++ b/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 { private dispatcherRef?: string; private themeWatcherRef?: string; private readonly dndWatcherRef?: string; - private buttonRef: React.RefObject = createRef(); + private buttonRef: React.RefObject = createRef(); public constructor(props: IProps, context: React.ContextType) { super(props, context); diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx index 3aba3be472..b026c9b6c2 100644 --- a/src/components/structures/ViewSource.tsx +++ b/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"; diff --git a/src/components/structures/WaitingForThirdPartyRoomView.tsx b/src/components/structures/WaitingForThirdPartyRoomView.tsx index cabe92a53d..9bf6eb661b 100644 --- a/src/components/structures/WaitingForThirdPartyRoomView.tsx +++ b/src/components/structures/WaitingForThirdPartyRoomView.tsx @@ -21,7 +21,7 @@ import SdkConfig from "../../SdkConfig"; import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx"; interface Props { - roomView: RefObject; + roomView: RefObject; resizeNotifier: ResizeNotifier; inviteEvent: MatrixEvent; } diff --git a/src/components/structures/auth/ConfirmSessionLockTheftView.tsx b/src/components/structures/auth/ConfirmSessionLockTheftView.tsx index 38d0d4efcc..43cc0155d2 100644 --- a/src/components/structures/auth/ConfirmSessionLockTheftView.tsx +++ b/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"; diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx index 0cc6fbd04d..5e0c947591 100644 --- a/src/components/structures/auth/ForgotPassword.tsx +++ b/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"; diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx index 0a14450e63..c96eefe298 100644 --- a/src/components/structures/auth/Login.tsx +++ b/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"; diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index 0ae5c93346..5724cae71f 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/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"; diff --git a/src/components/structures/auth/SessionLockStolenView.tsx b/src/components/structures/auth/SessionLockStolenView.tsx index edb20188a6..5ec11d73b1 100644 --- a/src/components/structures/auth/SessionLockStolenView.tsx +++ b/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"; diff --git a/src/components/structures/auth/SetupEncryptionBody.tsx b/src/components/structures/auth/SetupEncryptionBody.tsx index 32528fc7e3..9f4eaabc2a 100644 --- a/src/components/structures/auth/SetupEncryptionBody.tsx +++ b/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"; diff --git a/src/components/structures/auth/SoftLogout.tsx b/src/components/structures/auth/SoftLogout.tsx index db72a0a04b..7f0cbc5d49 100644 --- a/src/components/structures/auth/SoftLogout.tsx +++ b/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"; diff --git a/src/components/structures/auth/header/AuthHeaderDisplay.tsx b/src/components/structures/auth/header/AuthHeaderDisplay.tsx index 479e982c9b..20c5a14284 100644 --- a/src/components/structures/auth/header/AuthHeaderDisplay.tsx +++ b/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"; diff --git a/src/components/structures/auth/header/AuthHeaderProvider.tsx b/src/components/structures/auth/header/AuthHeaderProvider.tsx index 0bf5028274..0626020a5e 100644 --- a/src/components/structures/auth/header/AuthHeaderProvider.tsx +++ b/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"; diff --git a/src/components/utils/Box.tsx b/src/components/utils/Box.tsx index b48b13aa0f..8be8802256 100644 --- a/src/components/utils/Box.tsx +++ b/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): JSX.Element { - const ref = useRef(); + const ref = useRef(undefined); useEffect(() => { addOrRemoveProperty(ref, `--mx-box-flex`, flex); diff --git a/src/components/utils/Flex.tsx b/src/components/utils/Flex.tsx index 852ebb7e40..2f7ac4b673 100644 --- a/src/components/utils/Flex.tsx +++ b/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): JSX.Element { - const ref = useRef(); + const ref = useRef(undefined); useEffect(() => { ref.current!.style.setProperty(`--mx-flex-display`, display); diff --git a/src/components/views/audio_messages/AudioPlayerBase.tsx b/src/components/views/audio_messages/AudioPlayerBase.tsx index 601611e422..16a45bafde 100644 --- a/src/components/views/audio_messages/AudioPlayerBase.tsx +++ b/src/components/views/audio_messages/AudioPlayerBase.tsx @@ -31,8 +31,8 @@ interface IState { } export default abstract class AudioPlayerBase extends React.PureComponent { - protected seekRef: RefObject = createRef(); - protected playPauseRef: RefObject = createRef(); + protected seekRef: RefObject = createRef(); + protected playPauseRef: RefObject = createRef(); public constructor(props: T) { super(props); diff --git a/src/components/views/auth/AuthBody.tsx b/src/components/views/auth/AuthBody.tsx index ea4deb4f12..1c5e115a70 100644 --- a/src/components/views/auth/AuthBody.tsx +++ b/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; diff --git a/src/components/views/auth/AuthFooter.tsx b/src/components/views/auth/AuthFooter.tsx index a792896a88..71f6151fb6 100644 --- a/src/components/views/auth/AuthFooter.tsx +++ b/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 => { const brandingConfig = SdkConfig.getObject("branding"); const links = brandingConfig?.get("auth_footer_links") ?? [ { text: "Blog", url: "https://element.io/blog" }, diff --git a/src/components/views/auth/AuthHeaderLogo.tsx b/src/components/views/auth/AuthHeaderLogo.tsx index 07cc2f978a..c61ddfa1ea 100644 --- a/src/components/views/auth/AuthHeaderLogo.tsx +++ b/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 { const brandingConfig = SdkConfig.getObject("branding"); const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg"; diff --git a/src/components/views/auth/AuthPage.tsx b/src/components/views/auth/AuthPage.tsx index 2782d0a641..ee83152a69 100644 --- a/src/components/views/auth/AuthPage.tsx +++ b/src/components/views/auth/AuthPage.tsx @@ -35,7 +35,7 @@ export default class AuthPage extends React.PureComponent { const pageStyle = { background: `center/cover fixed url(${AuthPage.getWelcomeBackgroundUrl()})`, }; diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx index f216f004fd..fe2be91033 100644 --- a/src/components/views/auth/CaptchaForm.tsx +++ b/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"; diff --git a/src/components/views/auth/CountryDropdown.tsx b/src/components/views/auth/CountryDropdown.tsx index a4bf6592bf..3a18b8aaba 100644 --- a/src/components/views/auth/CountryDropdown.tsx +++ b/src/components/views/auth/CountryDropdown.tsx @@ -149,7 +149,7 @@ export default class CountryDropdown extends React.Component { {country.name} (+{country.prefix})
); - }) as NonEmptyArray; + }) as NonEmptyArray & { key: string }>; // default value here too, otherwise we need to handle null / undefined // values between mounting and the initial value propagating diff --git a/src/components/views/auth/EmailField.tsx b/src/components/views/auth/EmailField.tsx index 1a72872b95..5f437b321f 100644 --- a/src/components/views/auth/EmailField.tsx +++ b/src/components/views/auth/EmailField.tsx @@ -15,7 +15,7 @@ import * as Email from "../../../email"; interface IProps extends Omit { id?: string; - fieldRef?: RefCallback | RefObject; + fieldRef?: RefCallback | RefObject; value: string; autoFocus?: boolean; diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index b1360f5560..4bb2eaf218 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/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"; diff --git a/src/components/views/auth/LanguageSelector.tsx b/src/components/views/auth/LanguageSelector.tsx index c15189b88d..c2381460e2 100644 --- a/src/components/views/auth/LanguageSelector.tsx +++ b/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"; diff --git a/src/components/views/auth/LoginWithQRFlow.tsx b/src/components/views/auth/LoginWithQRFlow.tsx index 33d51f6952..84c8cadf47 100644 --- a/src/components/views/auth/LoginWithQRFlow.tsx +++ b/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"; diff --git a/src/components/views/auth/PassphraseConfirmField.tsx b/src/components/views/auth/PassphraseConfirmField.tsx index 2b27d3ecaf..4e46bd9ea2 100644 --- a/src/components/views/auth/PassphraseConfirmField.tsx +++ b/src/components/views/auth/PassphraseConfirmField.tsx @@ -14,7 +14,7 @@ import { _t, _td, TranslationKey } from "../../../languageHandler"; interface IProps extends Omit { id?: string; - fieldRef?: RefCallback | RefObject; + fieldRef?: RefCallback | RefObject; autoComplete?: string; value: string; password: string; // The password we're confirming diff --git a/src/components/views/auth/PassphraseField.tsx b/src/components/views/auth/PassphraseField.tsx index 90201d1ec1..ac56402f2a 100644 --- a/src/components/views/auth/PassphraseField.tsx +++ b/src/components/views/auth/PassphraseField.tsx @@ -22,7 +22,7 @@ interface IProps extends Omit { className?: string; minScore: 0 | 1 | 2 | 3 | 4; value: string; - fieldRef?: RefCallback | RefObject; + fieldRef?: RefCallback | RefObject; // Additional strings such as a username used to catch bad passwords userInputs?: string[]; diff --git a/src/components/views/auth/PasswordLogin.tsx b/src/components/views/auth/PasswordLogin.tsx index c2c1e9382d..227c9fb549 100644 --- a/src/components/views/auth/PasswordLogin.tsx +++ b/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 { } return ( -
+ (
{loginType} {loginField} @@ -427,7 +427,9 @@ export default class PasswordLogin extends React.PureComponent { 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 { /> )} -
+
) ); } } diff --git a/src/components/views/auth/RegistrationForm.tsx b/src/components/views/auth/RegistrationForm.tsx index 540e5905a3..800b20a130 100644 --- a/src/components/views/auth/RegistrationForm.tsx +++ b/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 ); return ( - (this[RegistrationField.PhoneNumber] = 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 ( - (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 + />) ); } diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index df8a6c00d8..11f0f66844 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/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"; diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx index 19df06a249..ed6e8015bd 100644 --- a/src/components/views/avatars/MemberAvatar.tsx +++ b/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"; diff --git a/src/components/views/avatars/SearchResultAvatar.tsx b/src/components/views/avatars/SearchResultAvatar.tsx index ad2b3dd668..ba2513770f 100644 --- a/src/components/views/avatars/SearchResultAvatar.tsx +++ b/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"; diff --git a/src/components/views/avatars/WithPresenceIndicator.tsx b/src/components/views/avatars/WithPresenceIndicator.tsx index 519575d0d5..ea8033f262 100644 --- a/src/components/views/avatars/WithPresenceIndicator.tsx +++ b/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"; diff --git a/src/components/views/beacon/index.tsx b/src/components/views/beacon/index.tsx index 782a69f98e..0b9eb3fa47 100644 --- a/src/components/views/beacon/index.tsx +++ b/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"; diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx index 72e7e04817..e924bee595 100644 --- a/src/components/views/context_menus/DialpadContextMenu.tsx +++ b/src/components/views/context_menus/DialpadContextMenu.tsx @@ -24,7 +24,7 @@ interface IState { } export default class DialpadContextMenu extends React.Component { - private numberEntryFieldRef: React.RefObject = createRef(); + private numberEntryFieldRef: React.RefObject = createRef(); public constructor(props: IProps) { super(props); diff --git a/src/components/views/context_menus/IconizedContextMenu.tsx b/src/components/views/context_menus/IconizedContextMenu.tsx index f621d8af87..d664c87018 100644 --- a/src/components/views/context_menus/IconizedContextMenu.tsx +++ b/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, { diff --git a/src/components/views/context_menus/MessageContextMenu.tsx b/src/components/views/context_menus/MessageContextMenu.tsx index 711ffbe70f..773285bdf4 100644 --- a/src/components/views/context_menus/MessageContextMenu.tsx +++ b/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, diff --git a/src/components/views/context_menus/RoomGeneralContextMenu.tsx b/src/components/views/context_menus/RoomGeneralContextMenu.tsx index 714f97ed98..106fe55d7e 100644 --- a/src/components/views/context_menus/RoomGeneralContextMenu.tsx +++ b/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"; diff --git a/src/components/views/context_menus/RoomNotificationContextMenu.tsx b/src/components/views/context_menus/RoomNotificationContextMenu.tsx index b43f4e4112..13b9bba851 100644 --- a/src/components/views/context_menus/RoomNotificationContextMenu.tsx +++ b/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"; diff --git a/src/components/views/context_menus/SpaceContextMenu.tsx b/src/components/views/context_menus/SpaceContextMenu.tsx index 2d407214da..cd933583b0 100644 --- a/src/components/views/context_menus/SpaceContextMenu.tsx +++ b/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"; diff --git a/src/components/views/context_menus/WidgetContextMenu.tsx b/src/components/views/context_menus/WidgetContextMenu.tsx index 46052de9ff..270fb27fb5 100644 --- a/src/components/views/context_menus/WidgetContextMenu.tsx +++ b/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"; diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx index 31162b45f4..5490546039 100644 --- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx +++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx @@ -423,7 +423,7 @@ export const SubspaceSelector: React.FC = ({ title, spac {space.name || getDisplayAliasForRoom(space) || space.roomId}
); - }) as NonEmptyArray + }) as NonEmptyArray & { key: string }> } ); diff --git a/src/components/views/dialogs/AskInviteAnywayDialog.tsx b/src/components/views/dialogs/AskInviteAnywayDialog.tsx index de8fc5eb3c..4d33db446a 100644 --- a/src/components/views/dialogs/AskInviteAnywayDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx index ccb162e1cb..6d17f0a887 100644 --- a/src/components/views/dialogs/BaseDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/BugReportDialog.tsx b/src/components/views/dialogs/BugReportDialog.tsx index 373f30d3ae..5650348213 100644 --- a/src/components/views/dialogs/BugReportDialog.tsx +++ b/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 { private unmounted: boolean; - private issueRef: React.RefObject; + private issueRef: React.RefObject; public constructor(props: IProps) { super(props); diff --git a/src/components/views/dialogs/ChangelogDialog.tsx b/src/components/views/dialogs/ChangelogDialog.tsx index ae3c157c78..2be730f8be 100644 --- a/src/components/views/dialogs/ChangelogDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx b/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx index cb79f27a2f..7a119f9d07 100644 --- a/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/CreateRoomDialog.tsx b/src/components/views/dialogs/CreateRoomDialog.tsx index 4d36d01623..51d50786c9 100644 --- a/src/components/views/dialogs/CreateRoomDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/CreateSubspaceDialog.tsx b/src/components/views/dialogs/CreateSubspaceDialog.tsx index 6add812793..9ac3fa7121 100644 --- a/src/components/views/dialogs/CreateSubspaceDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/DeactivateAccountDialog.tsx b/src/components/views/dialogs/DeactivateAccountDialog.tsx index d68c931cc1..eecf8c007c 100644 --- a/src/components/views/dialogs/DeactivateAccountDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx index 7dc683469a..b8800f2ee6 100644 --- a/src/components/views/dialogs/DevtoolsDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx index 54c58fe2e4..1d369a9551 100644 --- a/src/components/views/dialogs/ExportDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/FeedbackDialog.tsx b/src/components/views/dialogs/FeedbackDialog.tsx index 1e391d8002..6dd6a203f7 100644 --- a/src/components/views/dialogs/FeedbackDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index 0a0a70d1b5..eba6da78c8 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/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, diff --git a/src/components/views/dialogs/InteractiveAuthDialog.tsx b/src/components/views/dialogs/InteractiveAuthDialog.tsx index 305534e6db..a2b5548f18 100644 --- a/src/components/views/dialogs/InteractiveAuthDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 35e04fb12e..f90cfe068e 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/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(); - private numberEntryFieldRef: React.RefObject = createRef(); + private numberEntryFieldRef: React.RefObject = createRef(); private unmounted = false; private encryptionByDefault = false; private profilesStore: UserProfilesStore; diff --git a/src/components/views/dialogs/MessageEditHistoryDialog.tsx b/src/components/views/dialogs/MessageEditHistoryDialog.tsx index 48564e2411..3f852c394f 100644 --- a/src/components/views/dialogs/MessageEditHistoryDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/ModalWidgetDialog.tsx b/src/components/views/dialogs/ModalWidgetDialog.tsx index 7df9130a7a..06a9485dca 100644 --- a/src/components/views/dialogs/ModalWidgetDialog.tsx +++ b/src/components/views/dialogs/ModalWidgetDialog.tsx @@ -53,7 +53,7 @@ const MAX_BUTTONS = 3; export default class ModalWidgetDialog extends React.PureComponent { private readonly widget: Widget; private readonly possibleButtons: ModalButtonID[]; - private appFrame: React.RefObject = React.createRef(); + private appFrame: React.RefObject = React.createRef(); public state: IState = { disabledButtonIds: (this.props.widgetDefinition.buttons || []).filter((b) => b.disabled).map((b) => b.id), diff --git a/src/components/views/dialogs/ModuleUiDialog.tsx b/src/components/views/dialogs/ModuleUiDialog.tsx index 7cdb0190d0..f9f02f42ba 100644 --- a/src/components/views/dialogs/ModuleUiDialog.tsx +++ b/src/components/views/dialogs/ModuleUiDialog.tsx @@ -16,7 +16,7 @@ import ScrollableBaseModal, { IScrollableBaseState } from "./ScrollableBaseModal import { _t } from "../../../languageHandler"; interface IProps

> { - contentFactory: (props: P, ref: React.RefObject) => React.ReactNode; + contentFactory: (props: P, ref: React.RefObject) => React.ReactNode; additionalContentProps: Omit | undefined; initialOptions: ModuleUiDialogOptions; moduleApi: ModuleApi; diff --git a/src/components/views/dialogs/ReportEventDialog.tsx b/src/components/views/dialogs/ReportEventDialog.tsx index 3234c2be35..73722a6200 100644 --- a/src/components/views/dialogs/ReportEventDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/RoomUpgradeDialog.tsx b/src/components/views/dialogs/RoomUpgradeDialog.tsx index 337c1a334c..30cdc5d079 100644 --- a/src/components/views/dialogs/RoomUpgradeDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx b/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx index 48d0bef28c..f20b88a192 100644 --- a/src/components/views/dialogs/RoomUpgradeWarningDialog.tsx +++ b/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"; diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx index 1796b79239..93f298c5b0 100644 --- a/src/components/views/dialogs/ShareDialog.tsx +++ b/src/components/views/dialogs/ShareDialog.tsx @@ -103,7 +103,7 @@ export function ShareDialog({ target, customTitle, onFinished, permalinkCreator const showQrCode = useSettingValue(UIFeature.ShareQRCode); const showSocials = useSettingValue(UIFeature.ShareSocial); - const timeoutIdRef = useRef(); + const timeoutIdRef = useRef(undefined); const [isCopied, setIsCopied] = useState(false); const [linkToSpecificEvent, setLinkToSpecificEvent] = useState(target instanceof MatrixEvent); diff --git a/src/components/views/dialogs/TermsDialog.tsx b/src/components/views/dialogs/TermsDialog.tsx index 4d66e41b5a..2dfd4d8732 100644 --- a/src/components/views/dialogs/TermsDialog.tsx +++ b/src/components/views/dialogs/TermsDialog.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 { SERVICE_TYPES } from "matrix-js-sdk/src/matrix"; import { _t, pickBestLanguage } from "../../../languageHandler"; diff --git a/src/components/views/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx index 7fdb601c44..df24101388 100644 --- a/src/components/views/dialogs/UploadConfirmDialog.tsx +++ b/src/components/views/dialogs/UploadConfirmDialog.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 { FilesIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx index 8ae7a302ac..6eea846f0a 100644 --- a/src/components/views/dialogs/UserSettingsDialog.tsx +++ b/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, { useState, type JSX } 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"; @@ -221,7 +221,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element { // XXX: SDKContext is provided within the LoggedInView subtree. // Modals function outside the MatrixChat React tree, so sdkContext is reprovided here to simulate that. // The longer term solution is to move our ModalManager into the React tree to inherit contexts properly. - + ( - + ) ); } diff --git a/src/components/views/dialogs/devtools/FilteredList.tsx b/src/components/views/dialogs/devtools/FilteredList.tsx index 400c646958..cf52770c80 100644 --- a/src/components/views/dialogs/devtools/FilteredList.tsx +++ b/src/components/views/dialogs/devtools/FilteredList.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, useEffect, useState } from "react"; +import React, { ChangeEvent, useEffect, useState, type JSX } from "react"; import { _t } from "../../../../languageHandler"; import Field from "../../elements/Field"; @@ -17,14 +17,14 @@ const INITIAL_LOAD_TILES = 20; const LOAD_TILES_STEP_SIZE = 50; interface IProps { - children: React.ReactElement[]; + children: React.ReactElement[]; query: string; onChange(value: string): void; } const FilteredList: React.FC = ({ children, query, onChange }) => { const [truncateAt, setTruncateAt] = useState(INITIAL_LOAD_TILES); - const [filteredChildren, setFilteredChildren] = useState(children); + const [filteredChildren, setFilteredChildren] = useState[]>(children); useEffect(() => { let filteredChildren = children; @@ -36,7 +36,7 @@ const FilteredList: React.FC = ({ children, query, onChange }) => { setTruncateAt(INITIAL_LOAD_TILES); }, [children, query]); - const getChildren = (start: number, end: number): React.ReactElement[] => { + const getChildren = (start: number, end: number): React.ReactElement[] => { return filteredChildren.slice(start, end); }; diff --git a/src/components/views/dialogs/devtools/RoomNotifications.tsx b/src/components/views/dialogs/devtools/RoomNotifications.tsx index 1bcff78487..d25eda080c 100644 --- a/src/components/views/dialogs/devtools/RoomNotifications.tsx +++ b/src/components/views/dialogs/devtools/RoomNotifications.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import { NotificationCountType, Room, Thread, ReceiptType } from "matrix-js-sdk/src/matrix"; -import React, { useContext } from "react"; +import React, { useContext, type JSX } from "react"; import { ReadReceipt } from "matrix-js-sdk/src/models/read-receipt"; import MatrixClientContext from "../../../../contexts/MatrixClientContext"; diff --git a/src/components/views/dialogs/devtools/ServerInfo.tsx b/src/components/views/dialogs/devtools/ServerInfo.tsx index 337ed42177..2214cd108b 100644 --- a/src/components/views/dialogs/devtools/ServerInfo.tsx +++ b/src/components/views/dialogs/devtools/ServerInfo.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 { MatrixClient } from "matrix-js-sdk/src/matrix"; import BaseTool, { IDevtoolsProps } from "./BaseTool"; diff --git a/src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx b/src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx index d2003473b9..1e0f59d1a9 100644 --- a/src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx +++ b/src/components/views/dialogs/spotlight/PublicRoomResultDetails.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 { IPublicRoomsChunkRoom } from "matrix-js-sdk/src/matrix"; import { linkifyAndSanitizeHtml } from "../../../../HtmlUtils"; diff --git a/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx b/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx index 667cc7980a..adf7298096 100644 --- a/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx +++ b/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 { Room } from "matrix-js-sdk/src/matrix"; -import React, { Fragment, useState } from "react"; +import React, { Fragment, useState, type JSX } from "react"; import { ContextMenuTooltipButton } from "../../../../accessibility/context_menu/ContextMenuTooltipButton"; import { useNotificationState } from "../../../../hooks/useRoomNotificationState"; diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx index 20d6825b9b..bbd1071c5d 100644 --- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx +++ b/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, { ChangeEvent, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; +import React, { + ChangeEvent, + useCallback, + useContext, + useEffect, + useMemo, + useRef, + useState, + type JSX, +} from "react"; import sanitizeHtml from "sanitize-html"; import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts"; diff --git a/src/components/views/dialogs/spotlight/TooltipOption.tsx b/src/components/views/dialogs/spotlight/TooltipOption.tsx index 1d60fed5b3..3ff30c7241 100644 --- a/src/components/views/dialogs/spotlight/TooltipOption.tsx +++ b/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, { ReactNode } from "react"; +import React, { ReactNode, type JSX } from "react"; import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex"; import AccessibleButton, { ButtonProps } from "../../elements/AccessibleButton"; diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index b8b5297384..4d842a1c20 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -6,7 +6,15 @@ 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, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react"; +import React, { + ComponentProps, + forwardRef, + FunctionComponent, + HTMLAttributes, + InputHTMLAttributes, + Ref, + type JSX, +} from "react"; import classnames from "classnames"; import { Tooltip } from "@vector-im/compound-web"; diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 56754f14a6..6db9e7d385 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -9,7 +9,14 @@ 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, { ContextType, createRef, CSSProperties, MutableRefObject, ReactNode } from "react"; +import React, { + ContextType, + createRef, + CSSProperties, + MutableRefObject, + ReactNode, + type JSX, +} from "react"; import classNames from "classnames"; import { IWidget, MatrixCapabilities } from "matrix-widget-api"; import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; diff --git a/src/components/views/elements/DialogButtons.tsx b/src/components/views/elements/DialogButtons.tsx index 7b49c9af5a..7aa1aba59c 100644 --- a/src/components/views/elements/DialogButtons.tsx +++ b/src/components/views/elements/DialogButtons.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 { _t } from "../../../languageHandler"; diff --git a/src/components/views/elements/Dropdown.tsx b/src/components/views/elements/Dropdown.tsx index a7ce84163c..1eca03d8aa 100644 --- a/src/components/views/elements/Dropdown.tsx +++ b/src/components/views/elements/Dropdown.tsx @@ -7,7 +7,15 @@ 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, CSSProperties, ReactElement, ReactNode, Ref } from "react"; +import React, { + ChangeEvent, + createRef, + CSSProperties, + ReactElement, + ReactNode, + Ref, + type JSX, +} from "react"; import classnames from "classnames"; import AccessibleButton, { ButtonEvent } from "./AccessibleButton"; @@ -18,7 +26,7 @@ import { objectHasDiff } from "../../../utils/objects"; import { NonEmptyArray } from "../../../@types/common"; interface IMenuOptionProps { - children: ReactElement; + children: ReactElement; highlighted?: boolean; dropdownKey: string; id?: string; @@ -71,7 +79,7 @@ export interface DropdownProps { value?: string; className?: string; autoComplete?: string; - children: NonEmptyArray; + children: NonEmptyArray & { key: string }>; // negative for consistency with HTML disabled?: boolean; // The width that the dropdown should be. If specified, @@ -149,7 +157,7 @@ export default class Dropdown extends React.Component { document.removeEventListener("click", this.onDocumentClick, false); } - private reindexChildren(children: ReactElement[]): void { + private reindexChildren(children: ReactElement[]): void { this.childrenByKey = {}; React.Children.forEach(children, (child) => { this.childrenByKey[(child as DropdownProps["children"][number]).key] = child; @@ -295,7 +303,7 @@ export default class Dropdown extends React.Component { } private getMenuOptions(): JSX.Element[] { - const options = React.Children.map(this.props.children, (child: ReactElement) => { + const options = React.Children.map(this.props.children, (child: ReactElement) => { const highlighted = this.state.highlightedOption === child.key; return ( { return valid; } - private get inputRef(): RefObject { + private get inputRef(): RefObject { const inputRef = this.props.inputRef; if (typeof inputRef === "function") { // This is a callback ref, so return _inputRef which will point to the actual DOM element. return this._inputRef; } - return (inputRef ?? this._inputRef) as RefObject; + return (inputRef ?? this._inputRef) as RefObject; } private onTooltipOpenChange = (open: boolean): void => { diff --git a/src/components/views/elements/FilterDropdown.tsx b/src/components/views/elements/FilterDropdown.tsx index 9a66ffcea1..f99480006a 100644 --- a/src/components/views/elements/FilterDropdown.tsx +++ b/src/components/views/elements/FilterDropdown.tsx @@ -50,7 +50,7 @@ export const FilterDropdown = ({ ...restProps }: FilterDropdownProps): React.ReactElement> => { return ( - ({ {label} {!!description && {description}}

- )) as NonEmptyArray + )) as NonEmptyArray & { key: string }> } - + ) ); }; diff --git a/src/components/views/elements/FilterTabGroup.tsx b/src/components/views/elements/FilterTabGroup.tsx index 6129cd1219..fba82a57cb 100644 --- a/src/components/views/elements/FilterTabGroup.tsx +++ b/src/components/views/elements/FilterTabGroup.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, { FieldsetHTMLAttributes, ReactNode } from "react"; +import React, { FieldsetHTMLAttributes, ReactNode, type JSX } from "react"; export type FilterTab = { label: string | ReactNode; diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 711a221994..fc23184f9f 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.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, CSSProperties, useRef, useState } from "react"; +import React, { createRef, CSSProperties, useRef, useState, type JSX } from "react"; import FocusLock from "react-focus-lock"; import { MatrixEvent, parseErrorResponse } from "matrix-js-sdk/src/matrix"; @@ -585,7 +585,7 @@ export default class ImageView extends React.Component { function DownloadButton({ url, fileName }: { url: string; fileName?: string }): JSX.Element { const downloader = useRef(new FileDownloader()).current; const [loading, setLoading] = useState(false); - const blobRef = useRef(); + const blobRef = useRef(undefined); function showError(e: unknown): void { Modal.createDialog(ErrorDialog, { diff --git a/src/components/views/elements/JoinRuleDropdown.tsx b/src/components/views/elements/JoinRuleDropdown.tsx index 19afdc828c..9b277a90ed 100644 --- a/src/components/views/elements/JoinRuleDropdown.tsx +++ b/src/components/views/elements/JoinRuleDropdown.tsx @@ -41,7 +41,7 @@ const JoinRuleDropdown: React.FC = ({
{labelPublic}
, - ] as NonEmptyArray; + ] as NonEmptyArray & { key: string }>; if (labelKnock) { options.unshift( @@ -50,7 +50,7 @@ const JoinRuleDropdown: React.FC = ({ {labelKnock}
- ) as ReactElement & { key: string }, + ) as ReactElement & { key: string }, ); } @@ -60,7 +60,7 @@ const JoinRuleDropdown: React.FC = ({
{labelRestricted}
- ) as ReactElement & { key: string }, + ) as ReactElement & { key: string }, ); } diff --git a/src/components/views/elements/LanguageDropdown.tsx b/src/components/views/elements/LanguageDropdown.tsx index 27b4b2b31c..e13406e8fe 100644 --- a/src/components/views/elements/LanguageDropdown.tsx +++ b/src/components/views/elements/LanguageDropdown.tsx @@ -101,7 +101,7 @@ export default class LanguageDropdown extends React.Component { const options = displayedLanguages.map((language) => { return
{language.labelInTargetLanguage}
; - }) as NonEmptyArray; + }) as NonEmptyArray & { key: string }>; // default value here too, otherwise we need to handle null / undefined // values between mounting and the initial value propagating diff --git a/src/components/views/elements/LazyRenderList.tsx b/src/components/views/elements/LazyRenderList.tsx index 996a3981ce..3372a2ec2c 100644 --- a/src/components/views/elements/LazyRenderList.tsx +++ b/src/components/views/elements/LazyRenderList.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"; class ItemRange { public constructor( diff --git a/src/components/views/elements/PersistentApp.tsx b/src/components/views/elements/PersistentApp.tsx index 5f720dc85e..13f1c5294a 100644 --- a/src/components/views/elements/PersistentApp.tsx +++ b/src/components/views/elements/PersistentApp.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, { ContextType, CSSProperties, MutableRefObject, ReactNode } from "react"; +import React, { ContextType, CSSProperties, MutableRefObject, ReactNode, type JSX } from "react"; import { Room } from "matrix-js-sdk/src/matrix"; import WidgetUtils from "../../../utils/WidgetUtils"; diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index 14093587ad..02e4004b3e 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -98,7 +98,7 @@ export const Pill: React.FC = ({ type: propType, url, inMessage, room mx_EventPill: type === PillType.EventInOtherRoom || type === PillType.EventInSameRoom, }); - let avatar: ReactElement | null = null; + let avatar: ReactElement | null = null; let pillText: string | null = text; switch (type) { diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx index 8e10ca3af9..14cd8a655a 100644 --- a/src/components/views/elements/ReplyChain.tsx +++ b/src/components/views/elements/ReplyChain.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 classNames from "classnames"; import { MatrixEvent, Room, MatrixClient } from "matrix-js-sdk/src/matrix"; diff --git a/src/components/views/elements/ResizeHandle.tsx b/src/components/views/elements/ResizeHandle.tsx index 4890921663..1a19a84e8a 100644 --- a/src/components/views/elements/ResizeHandle.tsx +++ b/src/components/views/elements/ResizeHandle.tsx @@ -13,7 +13,7 @@ interface IResizeHandleProps { vertical?: boolean; reverse?: boolean; id?: string; - passRef?: React.RefObject; + passRef?: React.RefObject; } const ResizeHandle: React.FC = ({ vertical, reverse, id, passRef }) => { diff --git a/src/components/views/elements/RoomAliasField.tsx b/src/components/views/elements/RoomAliasField.tsx index faa0ccf1a6..751a7e1d62 100644 --- a/src/components/views/elements/RoomAliasField.tsx +++ b/src/components/views/elements/RoomAliasField.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, KeyboardEventHandler } from "react"; +import React, { createRef, KeyboardEventHandler, type JSX } from "react"; import { MatrixError } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/elements/RoomName.tsx b/src/components/views/elements/RoomName.tsx index 169671f057..d299357d7c 100644 --- a/src/components/views/elements/RoomName.tsx +++ b/src/components/views/elements/RoomName.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, useState } from "react"; +import React, { useEffect, useState, type JSX } from "react"; import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; import { useTypedEventEmitter } from "../../../hooks/useEventEmitter"; diff --git a/src/components/views/elements/RoomTopic.tsx b/src/components/views/elements/RoomTopic.tsx index a23f396be5..502aa117b5 100644 --- a/src/components/views/elements/RoomTopic.tsx +++ b/src/components/views/elements/RoomTopic.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, { useCallback, useContext, useState } from "react"; +import React, { useCallback, useContext, useState, type JSX } from "react"; import { Room, EventType } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; import { Tooltip } from "@vector-im/compound-web"; diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx index e2fd92e97b..54ff91328a 100644 --- a/src/components/views/elements/SSOButtons.tsx +++ b/src/components/views/elements/SSOButtons.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 { chunk } from "lodash"; import classNames from "classnames"; import { diff --git a/src/components/views/elements/SearchWarning.tsx b/src/components/views/elements/SearchWarning.tsx index e7c651c802..4b6eb09cc8 100644 --- a/src/components/views/elements/SearchWarning.tsx +++ b/src/components/views/elements/SearchWarning.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 { logger } from "matrix-js-sdk/src/logger"; import EventIndexPeg from "../../../indexing/EventIndexPeg"; diff --git a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx index ce521c959a..42c301b529 100644 --- a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx +++ b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx @@ -103,7 +103,7 @@ export default class SpellCheckLanguagesDropdown extends React.Component< const options = displayedLanguages.map((language) => { return
{language.label}
; - }) as NonEmptyArray; + }) as NonEmptyArray & { key: string }>; // default value here too, otherwise we need to handle null / undefined; // values between mounting and the initial value propagating diff --git a/src/components/views/elements/StyledRadioGroup.tsx b/src/components/views/elements/StyledRadioGroup.tsx index 7e527aade5..5e119db03f 100644 --- a/src/components/views/elements/StyledRadioGroup.tsx +++ b/src/components/views/elements/StyledRadioGroup.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, ReactNode } from "react"; +import React, { ChangeEvent, ReactNode, type JSX } from "react"; import classNames from "classnames"; import StyledRadioButton from "./StyledRadioButton"; diff --git a/src/components/views/elements/SyntaxHighlight.tsx b/src/components/views/elements/SyntaxHighlight.tsx index 7570ea22ed..3ae0d8bcd4 100644 --- a/src/components/views/elements/SyntaxHighlight.tsx +++ b/src/components/views/elements/SyntaxHighlight.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 { useAsyncMemo } from "../../../hooks/useAsyncMemo"; diff --git a/src/components/views/elements/Tag.tsx b/src/components/views/elements/Tag.tsx index b9f8780628..4d3e79c204 100644 --- a/src/components/views/elements/Tag.tsx +++ b/src/components/views/elements/Tag.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, { DetailedHTMLProps, HTMLAttributes } from "react"; +import React, { DetailedHTMLProps, HTMLAttributes, type JSX } from "react"; import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; import AccessibleButton from "./AccessibleButton"; diff --git a/src/components/views/elements/ToggleSwitch.tsx b/src/components/views/elements/ToggleSwitch.tsx index a6ed4fb4f1..783cbbac60 100644 --- a/src/components/views/elements/ToggleSwitch.tsx +++ b/src/components/views/elements/ToggleSwitch.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 AccessibleButton from "./AccessibleButton"; diff --git a/src/components/views/elements/UseCaseSelection.tsx b/src/components/views/elements/UseCaseSelection.tsx index 2c64c2903a..452dd302ab 100644 --- a/src/components/views/elements/UseCaseSelection.tsx +++ b/src/components/views/elements/UseCaseSelection.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import classNames from "classnames"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, type JSX } from "react"; import { _t } from "../../../languageHandler"; import { UseCase } from "../../../settings/enums/UseCase"; diff --git a/src/components/views/elements/UseCaseSelectionButton.tsx b/src/components/views/elements/UseCaseSelectionButton.tsx index 2899a1ee50..a5413ccb98 100644 --- a/src/components/views/elements/UseCaseSelectionButton.tsx +++ b/src/components/views/elements/UseCaseSelectionButton.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import classNames from "classnames"; -import React from "react"; +import React, { type JSX } from "react"; import { _t } from "../../../languageHandler"; import { UseCase } from "../../../settings/enums/UseCase"; diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx index f859c00beb..9361a259b4 100644 --- a/src/components/views/elements/Validation.tsx +++ b/src/components/views/elements/Validation.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 classNames from "classnames"; import memoizeOne from "memoize-one"; diff --git a/src/components/views/emojipicker/Category.tsx b/src/components/views/emojipicker/Category.tsx index 4c9fbc2d89..7566f81f2e 100644 --- a/src/components/views/emojipicker/Category.tsx +++ b/src/components/views/emojipicker/Category.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, { RefObject } from "react"; +import React, { RefObject, type JSX } from "react"; import { DATA_BY_CATEGORY, Emoji as IEmoji } from "@matrix-org/emojibase-bindings"; import { CATEGORY_HEADER_HEIGHT, EMOJI_HEIGHT, EMOJIS_PER_ROW } from "./EmojiPicker"; @@ -24,7 +24,7 @@ export interface ICategory { name: string; enabled: boolean; visible: boolean; - ref: RefObject; + ref: RefObject; } interface IProps { diff --git a/src/components/views/emojipicker/Search.tsx b/src/components/views/emojipicker/Search.tsx index bce045cb8c..0d131a7f75 100644 --- a/src/components/views/emojipicker/Search.tsx +++ b/src/components/views/emojipicker/Search.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 { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; diff --git a/src/components/views/location/LiveDurationDropdown.tsx b/src/components/views/location/LiveDurationDropdown.tsx index f0a85b842a..d0232e167e 100644 --- a/src/components/views/location/LiveDurationDropdown.tsx +++ b/src/components/views/location/LiveDurationDropdown.tsx @@ -53,7 +53,7 @@ const LiveDurationDropdown: React.FC = ({ timeout, onChange }) => { }; return ( - = ({ timeout, onChange }) => {
{label}
- )) as NonEmptyArray + )) as NonEmptyArray & { key: string }> } - + ) ); }; diff --git a/src/components/views/location/MapFallback.tsx b/src/components/views/location/MapFallback.tsx index 101a5d8066..cbb1abf295 100644 --- a/src/components/views/location/MapFallback.tsx +++ b/src/components/views/location/MapFallback.tsx @@ -16,7 +16,7 @@ import Spinner from "../elements/Spinner"; interface Props extends React.HTMLAttributes { className?: string; isLoading?: boolean; - children?: React.ReactNode | React.ReactNodeArray; + children?: React.ReactNode | ReadonlyArray; } const MapFallback: React.FC = ({ className, isLoading, children, ...rest }) => { diff --git a/src/components/views/location/index.tsx b/src/components/views/location/index.tsx index d51d6c58f3..1dbcb07c80 100644 --- a/src/components/views/location/index.tsx +++ b/src/components/views/location/index.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. // Exports location 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"; diff --git a/src/components/views/messages/CodeBlock.tsx b/src/components/views/messages/CodeBlock.tsx index 8061991405..57935cb999 100644 --- a/src/components/views/messages/CodeBlock.tsx +++ b/src/components/views/messages/CodeBlock.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, { useState } from "react"; +import React, { useState, type JSX } from "react"; import classNames from "classnames"; import { TooltipProvider } from "@vector-im/compound-web"; diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx index 98f397eb45..c7c27ca551 100644 --- a/src/components/views/messages/DateSeparator.tsx +++ b/src/components/views/messages/DateSeparator.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 { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { capitalize } from "lodash"; @@ -265,7 +265,7 @@ export default class DateSeparator extends React.Component { this.closeMenu(); }; - private renderJumpToDateMenu(): React.ReactElement { + private renderJumpToDateMenu(): React.ReactElement { let contextMenu: JSX.Element | undefined; if (this.state.contextMenuPosition) { const relativeTimeFormat = this.relativeTimeFormat; diff --git a/src/components/views/messages/DownloadActionButton.tsx b/src/components/views/messages/DownloadActionButton.tsx index 2940dab292..f0a05ac603 100644 --- a/src/components/views/messages/DownloadActionButton.tsx +++ b/src/components/views/messages/DownloadActionButton.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import { MatrixEvent } from "matrix-js-sdk/src/matrix"; -import React from "react"; +import React, { type JSX } from "react"; import classNames from "classnames"; import { DownloadIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; diff --git a/src/components/views/messages/EditHistoryMessage.tsx b/src/components/views/messages/EditHistoryMessage.tsx index fb6f04c08f..b20beaaf95 100644 --- a/src/components/views/messages/EditHistoryMessage.tsx +++ b/src/components/views/messages/EditHistoryMessage.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 { EventStatus, IContent, MatrixEvent, MatrixEventEvent, MsgType } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; diff --git a/src/components/views/messages/EncryptionEvent.tsx b/src/components/views/messages/EncryptionEvent.tsx index bc6680d300..6ec15f4354 100644 --- a/src/components/views/messages/EncryptionEvent.tsx +++ b/src/components/views/messages/EncryptionEvent.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 } from "react"; +import React, { forwardRef, type JSX } from "react"; import { MatrixEvent } from "matrix-js-sdk/src/matrix"; import type { RoomEncryptionEventContent } from "matrix-js-sdk/src/types"; diff --git a/src/components/views/messages/EventTileBubble.tsx b/src/components/views/messages/EventTileBubble.tsx index 05c8a66f99..a90f2f1e11 100644 --- a/src/components/views/messages/EventTileBubble.tsx +++ b/src/components/views/messages/EventTileBubble.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, ReactNode, ReactChild } from "react"; +import React, { forwardRef, ReactNode, ReactElement, type JSX } from "react"; import classNames from "classnames"; interface IProps { @@ -14,7 +14,7 @@ interface IProps { title: string; timestamp?: JSX.Element; subtitle?: ReactNode; - children?: ReactChild; + children?: ReactElement | number | string; } const EventTileBubble = forwardRef( diff --git a/src/components/views/messages/IBodyProps.ts b/src/components/views/messages/IBodyProps.ts index e48ba96b56..2e1e6ee4b6 100644 --- a/src/components/views/messages/IBodyProps.ts +++ b/src/components/views/messages/IBodyProps.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 React, { LegacyRef } from "react"; +import React, { Ref } from "react"; import { MatrixEvent } from "matrix-js-sdk/src/matrix"; import { MediaEventHelper } from "../../../utils/MediaEventHelper"; @@ -46,7 +46,7 @@ export interface IBodyProps { // helper function to access relations for this event getRelationsForEvent?: GetRelationsForEvent; - ref?: React.RefObject | LegacyRef; + ref?: React.RefObject | Ref; // Set to `true` to disable interactions (e.g. video controls) and to remove controls from the tab order. // This may be useful when displaying a preview of the event. diff --git a/src/components/views/messages/LegacyCallEvent.tsx b/src/components/views/messages/LegacyCallEvent.tsx index 3f24459b5b..ed871617a1 100644 --- a/src/components/views/messages/LegacyCallEvent.tsx +++ b/src/components/views/messages/LegacyCallEvent.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 { MatrixEvent } from "matrix-js-sdk/src/matrix"; import { CallErrorCode, CallState } from "matrix-js-sdk/src/webrtc/call"; import classNames from "classnames"; diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index 8b250fa0d5..e5b4aa4b59 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/src/components/views/messages/MBeaconBody.tsx @@ -6,7 +6,14 @@ 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, { ForwardRefExoticComponent, useCallback, useContext, useEffect, useState } from "react"; +import React, { + ForwardRefExoticComponent, + useCallback, + useContext, + useEffect, + useState, + type JSX, +} from "react"; import { Beacon, BeaconEvent, diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx index 1235b73b4b..9d6f4d1a02 100644 --- a/src/components/views/messages/MFileBody.tsx +++ b/src/components/views/messages/MFileBody.tsx @@ -110,8 +110,8 @@ export default class MFileBody extends React.Component { showGenericPlaceholder: true, }; - private iframe: React.RefObject = createRef(); - private dummyLink: React.RefObject = createRef(); + private iframe: React.RefObject = createRef(); + private dummyLink: React.RefObject = createRef(); private userDidClick = false; private fileDownloader: FileDownloader = new FileDownloader(() => this.iframe.current); diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index c3aeee1a54..b2071c9341 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.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, { ComponentProps, createRef, ReactNode } from "react"; +import React, { ComponentProps, createRef, ReactNode, type JSX } from "react"; import { Blurhash } from "react-blurhash"; import classNames from "classnames"; import { CSSTransition, SwitchTransition } from "react-transition-group"; diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx index c1ba78fbf7..3afe514c39 100644 --- a/src/components/views/messages/MImageReplyBody.tsx +++ b/src/components/views/messages/MImageReplyBody.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 { ImageContent } from "matrix-js-sdk/src/types"; import MImageBody from "./MImageBody"; diff --git a/src/components/views/messages/MJitsiWidgetEvent.tsx b/src/components/views/messages/MJitsiWidgetEvent.tsx index bec4f56164..0919eee36d 100644 --- a/src/components/views/messages/MJitsiWidgetEvent.tsx +++ b/src/components/views/messages/MJitsiWidgetEvent.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 } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx index 56e7b1c39c..9bf58fc2dc 100644 --- a/src/components/views/messages/MKeyVerificationRequest.tsx +++ b/src/components/views/messages/MKeyVerificationRequest.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 } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx index b1638d5b31..ec156cbfc7 100644 --- a/src/components/views/messages/MStickerBody.tsx +++ b/src/components/views/messages/MStickerBody.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, { ComponentProps, ReactNode } from "react"; +import React, { ComponentProps, ReactNode, type JSX } from "react"; import { Tooltip } from "@vector-im/compound-web"; import { MediaEventContent } from "matrix-js-sdk/src/types"; diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 9d21b8fa45..f5305876ba 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.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, { ReactElement, useCallback, useContext, useEffect } from "react"; +import React, { ReactElement, useCallback, useContext, useEffect, type JSX } from "react"; import { EventStatus, MatrixEvent, @@ -99,7 +99,7 @@ const OptionsButton: React.FC = ({ [openMenu, onFocus], ); - let contextMenu: ReactElement | undefined; + let contextMenu: ReactElement | undefined; if (menuDisplayed && button.current) { const tile = getTile?.(); const replyChain = getReplyChain(); diff --git a/src/components/views/messages/MessageEvent.tsx b/src/components/views/messages/MessageEvent.tsx index d1a1c59141..d8a3d3b813 100644 --- a/src/components/views/messages/MessageEvent.tsx +++ b/src/components/views/messages/MessageEvent.tsx @@ -78,7 +78,7 @@ const baseEvTypes = new Map>([ ]); export default class MessageEvent extends React.Component implements IMediaBody, IOperableEventTile { - private body: React.RefObject = createRef(); + private body: React.RefObject = createRef(); private mediaHelper?: MediaEventHelper; private bodyTypes = new Map(baseBodyTypes.entries()); private evTypes = new Map>(baseEvTypes.entries()); diff --git a/src/components/views/messages/ReactionsRow.tsx b/src/components/views/messages/ReactionsRow.tsx index 605e6a7dfe..97cb20ff4d 100644 --- a/src/components/views/messages/ReactionsRow.tsx +++ b/src/components/views/messages/ReactionsRow.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 { MatrixEvent, MatrixEventEvent, Relations, RelationsEvent } from "matrix-js-sdk/src/matrix"; import { uniqBy } from "lodash"; diff --git a/src/components/views/messages/RoomPredecessorTile.tsx b/src/components/views/messages/RoomPredecessorTile.tsx index afc8142234..7f0957fe38 100644 --- a/src/components/views/messages/RoomPredecessorTile.tsx +++ b/src/components/views/messages/RoomPredecessorTile.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 { logger } from "matrix-js-sdk/src/logger"; import { MatrixEvent, Room, RoomState } from "matrix-js-sdk/src/matrix"; diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx index 7c239d0500..f393fb86a6 100644 --- a/src/components/views/messages/SenderProfile.tsx +++ b/src/components/views/messages/SenderProfile.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, MsgType } from "matrix-js-sdk/src/matrix"; import DisambiguatedProfile from "./DisambiguatedProfile"; diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index ae99754cba..7e5127bacc 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.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, SyntheticEvent, MouseEvent, StrictMode } from "react"; +import React, { createRef, SyntheticEvent, MouseEvent, StrictMode, type JSX } from "react"; import { MsgType } from "matrix-js-sdk/src/matrix"; import { TooltipProvider } from "@vector-im/compound-web"; diff --git a/src/components/views/right_panel/EncryptionInfo.tsx b/src/components/views/right_panel/EncryptionInfo.tsx index 588d2d910e..98eaedaa8b 100644 --- a/src/components/views/right_panel/EncryptionInfo.tsx +++ b/src/components/views/right_panel/EncryptionInfo.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, User } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/right_panel/ExtensionsCard.tsx b/src/components/views/right_panel/ExtensionsCard.tsx index 0c6b3ecde0..b681b18665 100644 --- a/src/components/views/right_panel/ExtensionsCard.tsx +++ b/src/components/views/right_panel/ExtensionsCard.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 { Room } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; import { Button, Link, Separator, Text } from "@vector-im/compound-web"; diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index c8dd0b9738..5f4020d3ba 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -6,7 +6,15 @@ 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, useContext, useEffect, useRef, useState } from "react"; +import React, { + ChangeEvent, + SyntheticEvent, + useContext, + useEffect, + useRef, + useState, + type JSX, +} from "react"; import classNames from "classnames"; import { MenuItem, diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 591e2327ae..45d381232a 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.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, { ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react"; +import React, { ReactNode, useCallback, useContext, useEffect, useMemo, useState, type JSX } from "react"; import classNames from "classnames"; import { ClientEvent, diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx index 6f8295dece..f6b68a4ea6 100644 --- a/src/components/views/right_panel/VerificationPanel.tsx +++ b/src/components/views/right_panel/VerificationPanel.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 { ShowQrCodeCallbacks, ShowSasCallbacks, diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index 887ecb6190..7b0e56929e 100644 --- a/src/components/views/right_panel/WidgetCard.tsx +++ b/src/components/views/right_panel/WidgetCard.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, useEffect } from "react"; +import React, { useContext, useEffect, type JSX } from "react"; import { Room } from "matrix-js-sdk/src/matrix"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; diff --git a/src/components/views/room_settings/AliasSettings.tsx b/src/components/views/room_settings/AliasSettings.tsx index 0bb29b7f89..8d957bffc2 100644 --- a/src/components/views/room_settings/AliasSettings.tsx +++ b/src/components/views/room_settings/AliasSettings.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, ContextType, createRef, SyntheticEvent } from "react"; +import React, { ChangeEvent, ContextType, createRef, SyntheticEvent, type JSX } from "react"; import { MatrixEvent, EventType } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { RoomCanonicalAliasEventContent } from "matrix-js-sdk/src/types"; diff --git a/src/components/views/rooms/Autocomplete.tsx b/src/components/views/rooms/Autocomplete.tsx index 3ffd6648ea..461175c85c 100644 --- a/src/components/views/rooms/Autocomplete.tsx +++ b/src/components/views/rooms/Autocomplete.tsx @@ -46,7 +46,7 @@ export default class Autocomplete extends React.PureComponent { public queryRequested?: string; public debounceCompletionsRequest?: number; private containerRef = createRef(); - private completionRefs: Record> = {}; + private completionRefs: Record> = {}; public static contextType = RoomContext; declare public context: React.ContextType; diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index 5f033de238..d2f7620fe9 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import classNames from "classnames"; -import React, { createRef, ClipboardEvent, SyntheticEvent } from "react"; +import React, { createRef, ClipboardEvent, SyntheticEvent, type JSX } from "react"; import { Room, MatrixEvent } from "matrix-js-sdk/src/matrix"; import EMOTICON_REGEX from "emojibase-regex/emoticon"; import { logger } from "matrix-js-sdk/src/logger"; diff --git a/src/components/views/rooms/E2EIcon.tsx b/src/components/views/rooms/E2EIcon.tsx index 29899e85ba..51fa89291f 100644 --- a/src/components/views/rooms/E2EIcon.tsx +++ b/src/components/views/rooms/E2EIcon.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, { ComponentProps, CSSProperties } from "react"; +import React, { ComponentProps, CSSProperties, type JSX } from "react"; import classNames from "classnames"; import { Tooltip } from "@vector-im/compound-web"; diff --git a/src/components/views/rooms/EmojiButton.tsx b/src/components/views/rooms/EmojiButton.tsx index de64b3d42c..75e5f827de 100644 --- a/src/components/views/rooms/EmojiButton.tsx +++ b/src/components/views/rooms/EmojiButton.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import classNames from "classnames"; -import React, { useContext } from "react"; +import React, { useContext, type JSX } from "react"; import { _t } from "../../../languageHandler"; import ContextMenu, { aboveLeftOf, MenuProps, useContextMenu } from "../../structures/ContextMenu"; @@ -25,7 +25,7 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP const overflowMenuCloser = useContext(OverflowMenuContext); const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); - let contextMenu: React.ReactElement | null = null; + let contextMenu: React.ReactElement | null = null; if (menuDisplayed && button.current) { const position = menuPosition ?? aboveLeftOf(button.current.getBoundingClientRect()); const onFinished = (): void => { diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx index 946a5cd46b..51bfcb7a57 100644 --- a/src/components/views/rooms/EntityTile.tsx +++ b/src/components/views/rooms/EntityTile.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 classNames from "classnames"; import AccessibleButton from "../elements/AccessibleButton"; diff --git a/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx b/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx index ad1a6ce9a6..fe99067510 100644 --- a/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx +++ b/src/components/views/rooms/EventTile/EventTileThreadToolbar.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 LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link"; import { RovingAccessibleButton } from "../../../../accessibility/RovingTabIndex"; diff --git a/src/components/views/rooms/ExtraTile.tsx b/src/components/views/rooms/ExtraTile.tsx index 8f94264623..8a7cff267d 100644 --- a/src/components/views/rooms/ExtraTile.tsx +++ b/src/components/views/rooms/ExtraTile.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 { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex"; @@ -19,7 +19,7 @@ interface ExtraTileProps { isMinimized: boolean; isSelected: boolean; displayName: string; - avatar: React.ReactElement; + avatar: React.ReactElement; notificationState?: NotificationState; onClick: (ev: ButtonEvent) => void; } diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx index cbbd2a3d7b..a93bfb0abb 100644 --- a/src/components/views/rooms/LinkPreviewGroup.tsx +++ b/src/components/views/rooms/LinkPreviewGroup.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, useEffect } from "react"; +import React, { useContext, useEffect, type JSX } from "react"; import { MatrixEvent, MatrixError, IPreviewUrlResponse, MatrixClient } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; diff --git a/src/components/views/rooms/LinkPreviewWidget.tsx b/src/components/views/rooms/LinkPreviewWidget.tsx index 91fb0608aa..f1e677ffc4 100644 --- a/src/components/views/rooms/LinkPreviewWidget.tsx +++ b/src/components/views/rooms/LinkPreviewWidget.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, createRef, ReactNode } from "react"; +import React, { ComponentProps, createRef, ReactNode, type JSX } from "react"; import { decode } from "html-entities"; import { MatrixEvent, IPreviewUrlResponse } from "matrix-js-sdk/src/matrix"; diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index 5587b56bf8..a9250c81ab 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.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 { MatrixEvent, Room, diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index f5716d728b..18549ef7d3 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.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 classNames from "classnames"; import { IEventRelation, @@ -111,7 +111,7 @@ export class MessageComposer extends React.Component { private dispatcherRef?: string; private messageComposerInput = createRef(); private voiceRecordingButton = createRef(); - private ref: React.RefObject = createRef(); + private ref: React.RefObject = createRef(); private instanceId: number; private _voiceRecording: Optional; diff --git a/src/components/views/rooms/MessageComposerButtons.tsx b/src/components/views/rooms/MessageComposerButtons.tsx index 19b86834dd..eb10e50b07 100644 --- a/src/components/views/rooms/MessageComposerButtons.tsx +++ b/src/components/views/rooms/MessageComposerButtons.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import classNames from "classnames"; import { IEventRelation, Room, MatrixClient, THREAD_RELATION_TYPE, M_POLL_START } from "matrix-js-sdk/src/matrix"; -import React, { createContext, ReactElement, ReactNode, useContext, useRef } from "react"; +import React, { createContext, ReactElement, ReactNode, useContext, useRef, type JSX } from "react"; import { _t } from "../../../languageHandler"; import { CollapsibleButton } from "./CollapsibleButton"; @@ -137,7 +137,7 @@ const MessageComposerButtons: React.FC = (props: IProps) => { ); }; -function emojiButton(props: IProps): ReactElement { +function emojiButton(props: IProps): ReactElement { return ( { return ; } @@ -237,7 +237,7 @@ const UploadButton: React.FC = () => { ); }; -function showStickersButton(props: IProps): ReactElement | null { +function showStickersButton(props: IProps): ReactElement | null { return props.showStickersButton ? ( | null { // XXX: recording UI does not work well in narrow mode, so hide for now return narrow ? null : ( { return ; } @@ -319,7 +319,7 @@ class PollButton extends React.PureComponent { } } -function showLocationButton(props: IProps, room: Room, matrixClient: MatrixClient): ReactElement | null { +function showLocationButton(props: IProps, room: Room, matrixClient: MatrixClient): ReactElement | null { const sender = room.getMember(matrixClient.getSafeUserId()); return props.showLocationButton && sender ? ( diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx index a5577ee372..ce40c6b6a0 100644 --- a/src/components/views/rooms/NewRoomIntro.tsx +++ b/src/components/views/rooms/NewRoomIntro.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 { EventType, Room, User, MatrixClient } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx index 6825ea8e43..442912be71 100644 --- a/src/components/views/rooms/NotificationBadge.tsx +++ b/src/components/views/rooms/NotificationBadge.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 { Tooltip } from "@vector-im/compound-web"; import SettingsStore from "../../../settings/SettingsStore"; diff --git a/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx index dee861f11c..5e989b065f 100644 --- a/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx +++ b/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.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 { useUnreadNotifications } from "../../../../hooks/useUnreadNotifications"; import { StatelessNotificationBadge } from "./StatelessNotificationBadge"; diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx index ea60518f4b..fee076a105 100644 --- a/src/components/views/rooms/ReadReceiptGroup.tsx +++ b/src/components/views/rooms/ReadReceiptGroup.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, { PropsWithChildren } from "react"; +import React, { PropsWithChildren, type JSX } from "react"; import { User } from "matrix-js-sdk/src/matrix"; import { Tooltip } from "@vector-im/compound-web"; diff --git a/src/components/views/rooms/ReplyPreview.tsx b/src/components/views/rooms/ReplyPreview.tsx index 7851f7914d..573c373d11 100644 --- a/src/components/views/rooms/ReplyPreview.tsx +++ b/src/components/views/rooms/ReplyPreview.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 } from "matrix-js-sdk/src/matrix"; import dis from "../../../dispatcher/dispatcher"; diff --git a/src/components/views/rooms/RoomBreadcrumbs.tsx b/src/components/views/rooms/RoomBreadcrumbs.tsx index bb787d509a..270fc27e6d 100644 --- a/src/components/views/rooms/RoomBreadcrumbs.tsx +++ b/src/components/views/rooms/RoomBreadcrumbs.tsx @@ -105,7 +105,7 @@ export default class RoomBreadcrumbs extends React.PureComponent }); }; - public render(): React.ReactElement { + public render(): React.ReactElement { const tiles = BreadcrumbsStore.instance.rooms.map((r, i) => ( = ({ room }) => { +export const RoomKnocksBar: FC<{ room: Room }> = ({ room }) => { const [disabled, setDisabled] = useState(false); const knockMembers = useTypedEventEmitterState( room, @@ -65,7 +65,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => { const handleOpenRoomSettings = (): void => dis.dispatch({ action: "open_room_settings", room_id: room.roomId, initial_tab_id: RoomSettingsTab.People }); - let buttons: ReactElement = ( + let buttons: ReactElement = ( { }); } - private renderSublists(): React.ReactElement[] { + private renderSublists(): React.ReactElement[] { // show a skeleton UI if the user is in no rooms and they are not filtering and have no suggested rooms const showSkeleton = !this.state.suggestedRooms?.length && diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx index 9ce1d7524f..6b5b4de48a 100644 --- a/src/components/views/rooms/RoomListHeader.tsx +++ b/src/components/views/rooms/RoomListHeader.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import { EventType, RoomType, Room, RoomEvent, ClientEvent } from "matrix-js-sdk/src/matrix"; -import React, { useContext, useEffect, useState } from "react"; +import React, { useContext, useEffect, useState, type JSX } from "react"; import { Tooltip } from "@vector-im/compound-web"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; diff --git a/src/components/views/rooms/RoomPreviewBar.tsx b/src/components/views/rooms/RoomPreviewBar.tsx index b69b01177e..200b989db7 100644 --- a/src/components/views/rooms/RoomPreviewBar.tsx +++ b/src/components/views/rooms/RoomPreviewBar.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, ReactNode } from "react"; +import React, { ChangeEvent, ReactNode, type JSX } from "react"; import { Room, RoomMember, EventType, RoomType, JoinRule, MatrixError } from "matrix-js-sdk/src/matrix"; import { KnownMembership, RoomJoinRulesEventContent } from "matrix-js-sdk/src/types"; import classNames from "classnames"; diff --git a/src/components/views/rooms/RoomPreviewCard.tsx b/src/components/views/rooms/RoomPreviewCard.tsx index 2c816e4743..5346495391 100644 --- a/src/components/views/rooms/RoomPreviewCard.tsx +++ b/src/components/views/rooms/RoomPreviewCard.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, { FC, useContext, useState } from "react"; +import React, { FC, useContext, useState, type JSX } from "react"; import { Room, JoinRule } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index 34961c0853..b132bda07d 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -13,7 +13,7 @@ import classNames from "classnames"; import { Enable, Resizable } from "re-resizable"; import { Direction } from "re-resizable/lib/resizer"; import * as React from "react"; -import { ComponentType, createRef, ReactComponentElement, ReactNode } from "react"; +import { ComponentType, createRef, ReactComponentElement, ReactNode, type JSX } from "react"; import { polyfillTouchEvent } from "../../../@types/polyfill"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; @@ -506,13 +506,13 @@ export default class RoomSublist extends React.Component { } }; - private renderVisibleTiles(): React.ReactElement[] { + private renderVisibleTiles(): React.ReactElement[] { if (!this.state.isExpanded && !this.props.forceExpanded) { // don't waste time on rendering return []; } - const tiles: React.ReactElement[] = []; + const tiles: React.ReactElement[] = []; if (this.state.rooms) { let visibleRooms = this.state.rooms; @@ -635,7 +635,7 @@ export default class RoomSublist extends React.Component { ); } - private renderHeader(): React.ReactElement { + private renderHeader(): React.ReactElement { return ( {({ onFocus, isActive, ref }) => { @@ -726,7 +726,7 @@ export default class RoomSublist extends React.Component { (e.target as HTMLDivElement).scrollTop = 0; } - public render(): React.ReactElement { + public render(): React.ReactElement { const visibleTiles = this.renderVisibleTiles(); const hidden = !this.state.rooms.length && !this.props.extraTiles?.length && this.props.alwaysVisible !== true; const classes = classNames({ diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 7953c5068d..9f56914f3f 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -278,7 +278,7 @@ class RoomTile extends React.PureComponent { this.setState({ generalMenuPosition: null }); }; - private renderNotificationsMenu(isActive: boolean): React.ReactElement | null { + private renderNotificationsMenu(isActive: boolean): React.ReactElement | null { if ( MatrixClientPeg.safeGet().isGuest() || this.props.tag === DefaultTagID.Archived || @@ -323,7 +323,7 @@ class RoomTile extends React.PureComponent { ); } - private renderGeneralMenu(): React.ReactElement | null { + private renderGeneralMenu(): React.ReactElement | null { if (!this.showContextMenu) return null; // no menu to show return ( @@ -371,7 +371,7 @@ class RoomTile extends React.PureComponent { return !!this.state.call || (this.props.showMessagePreview && !!this.state.messagePreview); } - public render(): React.ReactElement { + public render(): React.ReactElement { const classes = classNames({ mx_RoomTile: true, mx_RoomTile_sticky: diff --git a/src/components/views/rooms/Stickerpicker.tsx b/src/components/views/rooms/Stickerpicker.tsx index ad1b11f368..58f04965c6 100644 --- a/src/components/views/rooms/Stickerpicker.tsx +++ b/src/components/views/rooms/Stickerpicker.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 { Room, ClientEvent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { IWidget } from "matrix-widget-api"; diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.tsx b/src/components/views/rooms/ThirdPartyMemberInfo.tsx index df008199cd..017514dcdf 100644 --- a/src/components/views/rooms/ThirdPartyMemberInfo.tsx +++ b/src/components/views/rooms/ThirdPartyMemberInfo.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 { EventType, MatrixEvent, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { Button, Text } from "@vector-im/compound-web"; diff --git a/src/components/views/rooms/WhoIsTypingTile.tsx b/src/components/views/rooms/WhoIsTypingTile.tsx index 85cf4f6dd6..67876047de 100644 --- a/src/components/views/rooms/WhoIsTypingTile.tsx +++ b/src/components/views/rooms/WhoIsTypingTile.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, RoomEvent, RoomMember, RoomMemberEvent, MatrixEvent } from "matrix-js-sdk/src/matrix"; import * as WhoIsTyping from "../../../WhoIsTyping"; diff --git a/src/components/views/rooms/wysiwyg_composer/DynamicImportWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/DynamicImportWysiwygComposer.tsx index 46210949f5..e77f561777 100644 --- a/src/components/views/rooms/wysiwyg_composer/DynamicImportWysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/DynamicImportWysiwygComposer.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, lazy, Suspense } from "react"; +import React, { ComponentProps, lazy, Suspense, type JSX } from "react"; import { ISendEventResponse } from "matrix-js-sdk/src/matrix"; // we need to import the types for TS, but do not import the sendMessage diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx index 98597c7360..6f1691332f 100644 --- a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.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, { ForwardedRef, forwardRef, MutableRefObject, useRef } from "react"; +import React, { ForwardedRef, forwardRef, MutableRefObject, useRef, type JSX } from "react"; import classNames from "classnames"; import EditorStateTransfer from "../../../../utils/EditorStateTransfer"; diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx index 7f790978f6..a6f1feb0ae 100644 --- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.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, { ForwardedRef, forwardRef, MutableRefObject, useRef } from "react"; +import React, { ForwardedRef, forwardRef, MutableRefObject, useRef, type JSX } from "react"; import { IEventRelation } from "matrix-js-sdk/src/matrix"; import { useWysiwygSendActionHandler } from "./hooks/useWysiwygSendActionHandler"; diff --git a/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx index fccd4b7f24..c6dfa95878 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.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 AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton"; diff --git a/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx b/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx index 9ab3d210ab..19f11bc113 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/Emoji.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 { MenuProps } from "../../../../structures/ContextMenu"; import { EmojiButton } from "../../EmojiButton"; diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx index f02f1a4c6b..453ee0ff59 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.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, { MouseEventHandler, ReactNode } from "react"; +import React, { MouseEventHandler, ReactNode, type JSX } from "react"; import { FormattingFunctions, AllActionStates, ActionState } from "@vector-im/matrix-wysiwyg"; import classNames from "classnames"; import BoldIcon from "@vector-im/compound-design-tokens/assets/web/icons/bold"; diff --git a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx index 787f0dd889..ad675f9ed1 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import classNames from "classnames"; import { IEventRelation } from "matrix-js-sdk/src/matrix"; -import React, { MutableRefObject, ReactNode } from "react"; +import React, { MutableRefObject, ReactNode, type JSX } from "react"; import { useComposerFunctions } from "../hooks/useComposerFunctions"; import { useIsFocused } from "../hooks/useIsFocused"; diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx index 4d06adcd4e..e07cb63d18 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.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, { ForwardedRef, forwardRef, FunctionComponent } from "react"; +import React, { ForwardedRef, forwardRef, FunctionComponent, type JSX } from "react"; import { FormattingFunctions, MappedSuggestion } from "@vector-im/matrix-wysiwyg"; import { logger } from "matrix-js-sdk/src/logger"; diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts index aa7c672af3..ab6637f176 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts @@ -11,7 +11,7 @@ import { RefObject, useMemo } from "react"; import { setSelection } from "../utils/selection"; export function useComposerFunctions( - ref: RefObject, + ref: RefObject, setContent: (content: string) => void, ): { clear(): void; diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts index cab3bdefb8..ec7ee36c01 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts @@ -29,7 +29,7 @@ import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext. export function useInputEventProcessor( onSend: () => void, - autocompleteRef: React.RefObject, + autocompleteRef: React.RefObject, initialContent?: string, eventRelation?: IEventRelation, ): (event: WysiwygEvent, composer: Wysiwyg, editor: HTMLElement) => WysiwygEvent | null { @@ -97,7 +97,7 @@ function handleKeyboardEvent( roomContext: Pick, composerContext: ComposerContextState, mxClient: MatrixClient | undefined, - autocompleteRef: React.RefObject, + autocompleteRef: React.RefObject, ): KeyboardEvent | null { const { editorStateTransfer } = composerContext; const isEditing = Boolean(editorStateTransfer); diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useIsFocused.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useIsFocused.ts index de9f758dc6..96f5ac98de 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useIsFocused.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useIsFocused.ts @@ -13,7 +13,7 @@ export function useIsFocused(): { onFocus(event: FocusEvent): void; } { const [isFocused, setIsFocused] = useState(false); - const timeoutIDRef = useRef(); + const timeoutIDRef = useRef(undefined); useEffect(() => () => clearTimeout(timeoutIDRef.current), [timeoutIDRef]); const onFocus = useCallback( diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts index 6adf43d9a4..c2efa2c65a 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import { RefObject, useEffect } from "react"; -export function usePlainTextInitialization(initialContent = "", ref: RefObject): void { +export function usePlainTextInitialization(initialContent = "", ref: RefObject): void { useEffect(() => { // always read and write the ref.current using .innerHTML for consistency in linebreak and HTML entity handling if (ref.current) { diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts index 1dc23cc274..a8325e879c 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts @@ -49,8 +49,8 @@ export function usePlainTextListeners( eventRelation?: IEventRelation, isAutoReplaceEmojiEnabled?: boolean, ): { - ref: RefObject; - autocompleteRef: React.RefObject; + ref: RefObject; + autocompleteRef: React.RefObject; content?: string; onBeforeInput(event: SyntheticEvent): void; onInput(event: SyntheticEvent): void; diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts index 01d42378a8..1c6ab4fd12 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts @@ -10,7 +10,7 @@ import { RefObject, useEffect } from "react"; import { setCursorPositionAtTheEnd } from "./utils"; -export function useSetCursorPosition(disabled: boolean, ref: RefObject): void { +export function useSetCursorPosition(disabled: boolean, ref: RefObject): void { useEffect(() => { if (ref.current && !disabled) { setCursorPositionAtTheEnd(ref.current); diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts index 5b4957a9c5..15ac18e7f5 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts @@ -45,7 +45,7 @@ type SuggestionState = Suggestion | null; * this will be an object representing that command or mention, otherwise it is null */ export function useSuggestion( - editorRef: React.RefObject, + editorRef: React.RefObject, setText: (text?: string) => void, isAutoReplaceEmojiEnabled?: boolean, ): { @@ -105,7 +105,7 @@ export function useSuggestion( * @param isAutoReplaceEmojiEnabled - whether plain text emoticons should be auto replaced with emojis */ export function processSelectionChange( - editorRef: React.RefObject, + editorRef: React.RefObject, setSuggestionData: React.Dispatch>, isAutoReplaceEmojiEnabled?: boolean, ): void { diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts index eb76d77af5..81b88aa009 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts @@ -22,7 +22,7 @@ import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext. export function useWysiwygEditActionHandler( disabled: boolean, - composerElement: RefObject, + composerElement: RefObject, composerFunctions: ComposerFunctions, ): void { const roomContext = useScopedRoomContext("timelineRenderingType"); diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts index 3345c9f474..01763fda6a 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts @@ -62,7 +62,7 @@ export function setCursorPositionAtTheEnd(element: HTMLElement): void { * @returns boolean - whether or not the autocomplete has handled the event */ export function handleEventWithAutocomplete( - autocompleteRef: RefObject, + autocompleteRef: RefObject, // we get a React Keyboard event from plain text composer, a Keyboard Event from the rich text composer event: KeyboardEvent | React.KeyboardEvent, ): boolean { diff --git a/src/components/views/settings/AddRemoveThreepids.tsx b/src/components/views/settings/AddRemoveThreepids.tsx index 8b2b61bb9a..47406d3fe2 100644 --- a/src/components/views/settings/AddRemoveThreepids.tsx +++ b/src/components/views/settings/AddRemoveThreepids.tsx @@ -40,7 +40,7 @@ interface ExistingThreepidProps { const ExistingThreepid: React.FC = ({ mode, threepid, onChange, disabled }) => { const [isConfirming, setIsConfirming] = useState(false); const client = useMatrixClientContext(); - const bindTask = useRef(); + const bindTask = useRef(undefined); const [isVerifyingBind, setIsVerifyingBind] = useState(false); const [continueDisabled, setContinueDisabled] = useState(false); @@ -289,7 +289,7 @@ const AddThreepidSection: React.FC<{ medium: "email" | "msisdn"; disabled?: bool disabled, onChange, }) => { - const addTask = useRef(); + const addTask = useRef(undefined); const [newThreepidInput, setNewThreepidInput] = useState(""); const [phoneCountryInput, setPhoneCountryInput] = useState(""); const [verificationCodeInput, setVerificationCodeInput] = useState(""); diff --git a/src/components/views/settings/AvatarSetting.tsx b/src/components/views/settings/AvatarSetting.tsx index ee47094cf9..46048cff27 100644 --- a/src/components/views/settings/AvatarSetting.tsx +++ b/src/components/views/settings/AvatarSetting.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, createRef, useCallback, useEffect, useState, useId } from "react"; +import React, { ReactNode, createRef, useCallback, useEffect, useState, useId, type JSX } from "react"; import EditIcon from "@vector-im/compound-design-tokens/assets/web/icons/edit"; import UploadIcon from "@vector-im/compound-design-tokens/assets/web/icons/share"; import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete"; diff --git a/src/components/views/settings/BridgeTile.tsx b/src/components/views/settings/BridgeTile.tsx index 6ae860aa0a..533904cf9a 100644 --- a/src/components/views/settings/BridgeTile.tsx +++ b/src/components/views/settings/BridgeTile.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 { MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; diff --git a/src/components/views/settings/ChangePassword.tsx b/src/components/views/settings/ChangePassword.tsx index 9461f20d8a..8206b30a93 100644 --- a/src/components/views/settings/ChangePassword.tsx +++ b/src/components/views/settings/ChangePassword.tsx @@ -327,10 +327,12 @@ export default class ChangePassword extends React.Component { switch (this.state.phase) { case Phase.Edit: return ( -
+ (
(this[FIELD_OLD_PASSWORD] = field)} + ref={field => { + (this[FIELD_OLD_PASSWORD] = field); + }} type="password" label={_t("auth|change_password_current_label")} value={this.state.oldPassword} @@ -353,7 +355,9 @@ export default class ChangePassword extends React.Component {
(this[FIELD_NEW_PASSWORD_CONFIRM] = field)} + ref={field => { + (this[FIELD_NEW_PASSWORD_CONFIRM] = field); + }} type="password" label={_t("auth|change_password_confirm_label")} value={this.state.newPasswordConfirm} @@ -369,7 +373,7 @@ export default class ChangePassword extends React.Component { > {this.props.buttonLabel || _t("auth|change_password_action")} - + ) ); case Phase.Uploading: return ( diff --git a/src/components/views/settings/CrossSigningPanel.tsx b/src/components/views/settings/CrossSigningPanel.tsx index a91238848e..e1b68b5eca 100644 --- a/src/components/views/settings/CrossSigningPanel.tsx +++ b/src/components/views/settings/CrossSigningPanel.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 { ClientEvent, MatrixEvent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { CryptoEvent } from "matrix-js-sdk/src/crypto-api"; diff --git a/src/components/views/settings/CryptographyPanel.tsx b/src/components/views/settings/CryptographyPanel.tsx index fbd696f243..4c92e8a22d 100644 --- a/src/components/views/settings/CryptographyPanel.tsx +++ b/src/components/views/settings/CryptographyPanel.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, { lazy } from "react"; +import React, { lazy, type JSX } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/settings/EventIndexPanel.tsx b/src/components/views/settings/EventIndexPanel.tsx index 0051c4dc3a..8ff8fb3b51 100644 --- a/src/components/views/settings/EventIndexPanel.tsx +++ b/src/components/views/settings/EventIndexPanel.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, { lazy } from "react"; +import React, { lazy, type JSX } from "react"; import { _t } from "../../../languageHandler"; import SdkConfig from "../../../SdkConfig"; diff --git a/src/components/views/settings/JoinRuleSettings.tsx b/src/components/views/settings/JoinRuleSettings.tsx index a6c1e91241..94e7b247ad 100644 --- a/src/components/views/settings/JoinRuleSettings.tsx +++ b/src/components/views/settings/JoinRuleSettings.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 { JoinRule, RestrictedAllowType, Room, EventType, Visibility } from "matrix-js-sdk/src/matrix"; import { RoomJoinRulesEventContent } from "matrix-js-sdk/src/types"; diff --git a/src/components/views/settings/KeyboardShortcut.tsx b/src/components/views/settings/KeyboardShortcut.tsx index 4f0973b102..d35f88f40e 100644 --- a/src/components/views/settings/KeyboardShortcut.tsx +++ b/src/components/views/settings/KeyboardShortcut.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 { ALTERNATE_KEY_NAME, KEY_ICON } from "../../../accessibility/KeyboardShortcuts"; import { KeyCombo } from "../../../KeyBindingsManager"; diff --git a/src/components/views/settings/Notifications.tsx b/src/components/views/settings/Notifications.tsx index 4ac5e2069b..8558687217 100644 --- a/src/components/views/settings/Notifications.tsx +++ b/src/components/views/settings/Notifications.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 { IAnnotatedPushRule, IPusher, diff --git a/src/components/views/settings/SecureBackupPanel.tsx b/src/components/views/settings/SecureBackupPanel.tsx index 05c7829644..ca9a166789 100644 --- a/src/components/views/settings/SecureBackupPanel.tsx +++ b/src/components/views/settings/SecureBackupPanel.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, { lazy, ReactNode } from "react"; +import React, { lazy, ReactNode, type JSX } from "react"; import { CryptoEvent, BackupTrustInfo, KeyBackupInfo } from "matrix-js-sdk/src/crypto-api"; import { logger } from "matrix-js-sdk/src/logger"; diff --git a/src/components/views/settings/SetIdServer.tsx b/src/components/views/settings/SetIdServer.tsx index 8ed6461d0a..be4774dd20 100644 --- a/src/components/views/settings/SetIdServer.tsx +++ b/src/components/views/settings/SetIdServer.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 { logger } from "matrix-js-sdk/src/logger"; import { IThreepid } from "matrix-js-sdk/src/matrix"; diff --git a/src/components/views/settings/UpdateCheckButton.tsx b/src/components/views/settings/UpdateCheckButton.tsx index 3b2c9bfa68..3973ef4451 100644 --- a/src/components/views/settings/UpdateCheckButton.tsx +++ b/src/components/views/settings/UpdateCheckButton.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, useState } from "react"; +import React, { ReactNode, useState, type JSX } from "react"; import { UpdateCheckStatus } from "../../../BasePlatform"; import PlatformPeg from "../../../PlatformPeg"; diff --git a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx index e7839b71da..9fc2d24529 100644 --- a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx +++ b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import classNames from "classnames"; -import React, { ComponentProps } from "react"; +import React, { ComponentProps, type JSX } from "react"; import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../../languageHandler"; diff --git a/src/components/views/settings/notifications/NotificationPusherSettings.tsx b/src/components/views/settings/notifications/NotificationPusherSettings.tsx index 9e17e7b829..d54fce4158 100644 --- a/src/components/views/settings/notifications/NotificationPusherSettings.tsx +++ b/src/components/views/settings/notifications/NotificationPusherSettings.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import { ThreepidMedium, IPusher } from "matrix-js-sdk/src/matrix"; -import React, { useCallback, useMemo } from "react"; +import React, { useCallback, useMemo, type JSX } from "react"; import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext"; import { Action } from "../../../../dispatcher/actions"; diff --git a/src/components/views/settings/notifications/NotificationSettings2.tsx b/src/components/views/settings/notifications/NotificationSettings2.tsx index 5f91c3874c..53c8495762 100644 --- a/src/components/views/settings/notifications/NotificationSettings2.tsx +++ b/src/components/views/settings/notifications/NotificationSettings2.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, { useState } from "react"; +import React, { useState, type JSX } from "react"; import NewAndImprovedIcon from "../../../../../res/img/element-icons/new-and-improved.svg"; import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext"; diff --git a/src/components/views/settings/shared/SettingsBanner.tsx b/src/components/views/settings/shared/SettingsBanner.tsx index c35703bf16..fc99860d50 100644 --- a/src/components/views/settings/shared/SettingsBanner.tsx +++ b/src/components/views/settings/shared/SettingsBanner.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, { PropsWithChildren, ReactNode } from "react"; +import React, { PropsWithChildren, ReactNode, type JSX } from "react"; import AccessibleButton from "../../elements/AccessibleButton"; diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx index 5798771e67..0098531721 100644 --- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.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 { EventType, Room } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../../../languageHandler"; diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx b/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx index 0da257607e..23ceb06dda 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.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 { Room, MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../../../languageHandler"; diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx index 9aabf1edb0..0764ca9722 100644 --- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.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"; diff --git a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx index 768d35890a..488efe3702 100644 --- a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx +++ b/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, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; -import React, { useCallback, useState, VFC } from "react"; +import React, { useCallback, useState, 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 ; }; -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; @@ -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); diff --git a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx index baf4b41253..852a577c23 100644 --- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.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 { EventType, RoomMember, RoomState, RoomStateEvent, Room, IContent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { throttle, get } from "lodash"; diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index ece6a7deaf..a9b7ddd863 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.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 { GuestAccess, HistoryVisibility, diff --git a/src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx index cd52b2a76b..303ba37cdd 100644 --- a/src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AccountUserSettingsTab.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, useContext, useEffect } from "react"; +import React, { useCallback, useContext, useEffect, type JSX } from "react"; import { HTTPError } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx index f19343be20..972ca7bbf8 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.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 { logger } from "matrix-js-sdk/src/logger"; import AccessibleButton from "../../../elements/AccessibleButton"; diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx index 54995415e2..afce03b567 100644 --- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.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 { sortBy } from "lodash"; import { _t } from "../../../../../languageHandler"; diff --git a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx index 9ad7df31e9..c7550b6ac1 100644 --- a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.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 { _t } from "../../../../../languageHandler"; diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx index 8cb662a9f0..24b97dc5dc 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx @@ -220,7 +220,7 @@ export default class PreferencesUserSettingsTab extends React.Component { return settingIds.map((i) => ); } @@ -248,7 +248,7 @@ export default class PreferencesUserSettingsTab extends React.Component{browserTimezoneLabel}
); return ( - + ( {/* The heading string is still 'general' from where it was moved, but this section should become 'general' */} @@ -297,7 +297,7 @@ export default class PreferencesUserSettingsTab extends React.Component - {timezones as NonEmptyArray} + {timezones as NonEmptyArray & { key: string }>} @@ -368,7 +368,7 @@ export default class PreferencesUserSettingsTab extends React.Component - + ) ); } } diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx index 7d5e27580c..7cf37eb389 100644 --- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.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 { sleep } from "matrix-js-sdk/src/utils"; import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; import { KnownMembership, Membership } from "matrix-js-sdk/src/types"; diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index 5e9445bb99..39132f12fe 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -166,7 +166,7 @@ const SessionManagerTab: React.FC<{ const [expandedDeviceIds, setExpandedDeviceIds] = useState([]); const [selectedDeviceIds, setSelectedDeviceIds] = useState([]); const filteredDeviceListRef = useRef(null); - const scrollIntoViewTimeoutRef = useRef(); + const scrollIntoViewTimeoutRef = useRef(undefined); const sdkContext = useContext(SDKContext); const matrixClient = sdkContext.client!; diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx index 9711159a10..47651dc6cc 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.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 { logger } from "matrix-js-sdk/src/logger"; import { FALLBACK_ICE_SERVER } from "matrix-js-sdk/src/webrtc/call"; diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index 161290fca8..85c6369ff2 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.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 { OverflowHorizontalIcon, diff --git a/src/components/views/spaces/QuickThemeSwitcher.tsx b/src/components/views/spaces/QuickThemeSwitcher.tsx index 195fcb9899..9a53c1c87f 100644 --- a/src/components/views/spaces/QuickThemeSwitcher.tsx +++ b/src/components/views/spaces/QuickThemeSwitcher.tsx @@ -71,7 +71,7 @@ const QuickThemeSwitcher: React.FC = ({ requestClose }) => { }; return ( -
+ (

{_t("common|theme")}

= ({ requestClose }) => { > { themeOptions.map((theme) =>
{theme.name}
) as NonEmptyArray< - ReactElement & { key: string } + ReactElement & { key: string } > } -
+
) ); }; diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index 764417e0b2..ca3c136543 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -119,8 +119,8 @@ type BProps = Omit, "nameDisabled" | " interface ISpaceCreateFormProps extends BProps { busy: boolean; alias: string; - nameFieldRef: RefObject; - aliasFieldRef: RefObject; + nameFieldRef: RefObject; + aliasFieldRef: RefObject; showAliasField?: boolean; children?: ReactNode; onSubmit(e: SyntheticEvent): void; diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index af484445b4..53b8207d69 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -17,6 +17,7 @@ import React, { useLayoutEffect, useRef, useState, + type JSX, } from "react"; import { DragDropContext, Draggable, Droppable, DroppableProvidedProps } from "react-beautiful-dnd"; import classNames from "classnames"; diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx index 47f4fe8ce9..e4179cf3e7 100644 --- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx +++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.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, { useState } from "react"; +import React, { useState, type JSX } from "react"; import { Room, EventType, GuestAccess, HistoryVisibility, JoinRule, MatrixClient } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index cee4cf54ec..3ac279120c 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -12,8 +12,9 @@ import React, { ComponentType, createRef, InputHTMLAttributes, - LegacyRef, + Ref, RefObject, + type JSX, } from "react"; import classNames from "classnames"; import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; @@ -52,7 +53,7 @@ type ButtonProps = Omit< notificationState?: NotificationState; isNarrow?: boolean; size: string; - innerRef?: RefObject; + innerRef?: RefObject; ContextMenuComponent?: ComponentType>; onClick?(ev?: ButtonEvent): void; }; @@ -178,7 +179,7 @@ interface IItemProps extends InputHTMLAttributes { isPanelCollapsed?: boolean; onExpand?: () => void; parents?: Set; - innerRef?: LegacyRef; + innerRef?: Ref; dragHandleProps?: DraggableProvidedDragHandleProps | null; } diff --git a/src/components/views/terms/InlineTermsAgreement.tsx b/src/components/views/terms/InlineTermsAgreement.tsx index 350c408d75..b7dae1d1c9 100644 --- a/src/components/views/terms/InlineTermsAgreement.tsx +++ b/src/components/views/terms/InlineTermsAgreement.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, pickBestLanguage } from "../../../languageHandler"; import { objectClone } from "../../../utils/objects"; diff --git a/src/components/views/user-onboarding/UserOnboardingButton.tsx b/src/components/views/user-onboarding/UserOnboardingButton.tsx index d1e420d4ac..a8941fc5ae 100644 --- a/src/components/views/user-onboarding/UserOnboardingButton.tsx +++ b/src/components/views/user-onboarding/UserOnboardingButton.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import classNames from "classnames"; -import React, { useCallback } from "react"; +import React, { useCallback, type JSX } from "react"; import { Action } from "../../../dispatcher/actions"; import defaultDispatcher from "../../../dispatcher/dispatcher"; diff --git a/src/components/views/user-onboarding/UserOnboardingHeader.tsx b/src/components/views/user-onboarding/UserOnboardingHeader.tsx index 1f6edbff1d..70b7b43d39 100644 --- a/src/components/views/user-onboarding/UserOnboardingHeader.tsx +++ b/src/components/views/user-onboarding/UserOnboardingHeader.tsx @@ -16,6 +16,8 @@ import { UseCase } from "../../../settings/enums/UseCase"; import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton"; import Heading from "../../views/typography/Heading"; +import type { JSX } from "react"; + const onClickSendDm = (ev: ButtonEvent): void => { PosthogTrackers.trackInteraction("WebUserOnboardingHeaderSendDm", ev); defaultDispatcher.dispatch({ action: "view_create_chat" }); diff --git a/src/components/views/user-onboarding/UserOnboardingList.tsx b/src/components/views/user-onboarding/UserOnboardingList.tsx index c6c03527cb..48f12c9680 100644 --- a/src/components/views/user-onboarding/UserOnboardingList.tsx +++ b/src/components/views/user-onboarding/UserOnboardingList.tsx @@ -15,6 +15,8 @@ import ProgressBar from "../../views/elements/ProgressBar"; import Heading from "../../views/typography/Heading"; import { UserOnboardingTask } from "./UserOnboardingTask"; +import type { JSX } from "react"; + export const getUserOnboardingCounters = ( tasks: UserOnboardingTaskWithResolvedCompletion[], ): { diff --git a/src/components/views/user-onboarding/UserOnboardingPage.tsx b/src/components/views/user-onboarding/UserOnboardingPage.tsx index ebb9b9565e..f8faea4285 100644 --- a/src/components/views/user-onboarding/UserOnboardingPage.tsx +++ b/src/components/views/user-onboarding/UserOnboardingPage.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 { useEffect, useState } from "react"; +import { useEffect, useState, type JSX } from "react"; import * as React from "react"; import { useInitialSyncComplete } from "../../../hooks/useIsInitialSyncComplete"; diff --git a/src/components/views/user-onboarding/UserOnboardingTask.tsx b/src/components/views/user-onboarding/UserOnboardingTask.tsx index add9db1b35..dee68172c0 100644 --- a/src/components/views/user-onboarding/UserOnboardingTask.tsx +++ b/src/components/views/user-onboarding/UserOnboardingTask.tsx @@ -13,6 +13,8 @@ import { UserOnboardingTaskWithResolvedCompletion } from "../../../hooks/useUser import AccessibleButton from "../../views/elements/AccessibleButton"; import Heading from "../../views/typography/Heading"; +import type { JSX } from "react"; + interface Props { task: UserOnboardingTaskWithResolvedCompletion; completed?: boolean; diff --git a/src/components/views/voip/AudioFeedArrayForLegacyCall.tsx b/src/components/views/voip/AudioFeedArrayForLegacyCall.tsx index b135bb0279..d025b48853 100644 --- a/src/components/views/voip/AudioFeedArrayForLegacyCall.tsx +++ b/src/components/views/voip/AudioFeedArrayForLegacyCall.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 { CallEvent, MatrixCall } from "matrix-js-sdk/src/webrtc/call"; import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed"; diff --git a/src/components/views/voip/DialPad.tsx b/src/components/views/voip/DialPad.tsx index 9dda9468d8..6100577aa1 100644 --- a/src/components/views/voip/DialPad.tsx +++ b/src/components/views/voip/DialPad.tsx @@ -12,6 +12,8 @@ import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import { _t } from "../../../languageHandler"; import { XOR } from "../../../@types/common"; +import type { JSX } from "react"; + export const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "0", "#"]; export const BUTTON_LETTERS = ["", "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ", "", "+", ""]; diff --git a/src/components/views/voip/DialPadModal.tsx b/src/components/views/voip/DialPadModal.tsx index b4b7cdf647..651002e86f 100644 --- a/src/components/views/voip/DialPadModal.tsx +++ b/src/components/views/voip/DialPadModal.tsx @@ -23,7 +23,7 @@ interface IState { } export default class DialpadModal extends React.PureComponent { - private numberEntryFieldRef: React.RefObject = createRef(); + private numberEntryFieldRef: React.RefObject = createRef(); public constructor(props: IProps) { super(props); diff --git a/src/components/views/voip/LegacyCallView.tsx b/src/components/views/voip/LegacyCallView.tsx index aba3d60743..8da2985e7a 100644 --- a/src/components/views/voip/LegacyCallView.tsx +++ b/src/components/views/voip/LegacyCallView.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 } from "react"; +import React, { createRef, type JSX } from "react"; import { CallEvent, CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call"; import classNames from "classnames"; import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed"; diff --git a/src/contexts/MatrixClientContext.tsx b/src/contexts/MatrixClientContext.tsx index ec804f881b..559fa24fe0 100644 --- a/src/contexts/MatrixClientContext.tsx +++ b/src/contexts/MatrixClientContext.tsx @@ -28,7 +28,7 @@ const matrixHOC = ( ComposedComponent: ComponentClass, ): (( props: Omit & React.RefAttributes>, -) => React.ReactElement | null) => { +) => React.ReactElement | null) => { type ComposedComponentInstance = InstanceType; // eslint-disable-next-line react-hooks/rules-of-hooks diff --git a/src/contexts/ScopedRoomContext.tsx b/src/contexts/ScopedRoomContext.tsx index 1222443d29..a64dddf8eb 100644 --- a/src/contexts/ScopedRoomContext.tsx +++ b/src/contexts/ScopedRoomContext.tsx @@ -7,7 +7,17 @@ Please see LICENSE files in the repository root for full details. */ import { TypedEventEmitter } from "matrix-js-sdk/src/matrix"; -import React, { ContextType, createContext, memo, ReactNode, useContext, useEffect, useRef, useState } from "react"; +import React, { + ContextType, + createContext, + memo, + ReactNode, + useContext, + useEffect, + useRef, + useState, + type JSX, +} from "react"; import { objectKeyChanges } from "../utils/objects.ts"; import { useTypedEventEmitter } from "../hooks/useEventEmitter.ts"; diff --git a/src/events/EventTileFactory.tsx b/src/events/EventTileFactory.tsx index ec1651872a..379c54c6ae 100644 --- a/src/events/EventTileFactory.tsx +++ b/src/events/EventTileFactory.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, diff --git a/src/hooks/useTimeout.ts b/src/hooks/useTimeout.ts index c88de82c0f..1c9760e832 100644 --- a/src/hooks/useTimeout.ts +++ b/src/hooks/useTimeout.ts @@ -13,7 +13,7 @@ type Handler = () => void; // Hook to simplify timeouts in functional components export const useTimeout = (handler: Handler, timeoutMs: number): void => { // Create a ref that stores handler - const savedHandler = useRef(); + const savedHandler = useRef(undefined); // Update ref.current value if handler changes. useEffect(() => { @@ -32,7 +32,7 @@ export const useTimeout = (handler: Handler, timeoutMs: number): void => { // Hook to simplify intervals in functional components export const useInterval = (handler: Handler, intervalMs: number): void => { // Create a ref that stores handler - const savedHandler = useRef(); + const savedHandler = useRef(undefined); // Update ref.current value if handler changes. useEffect(() => { diff --git a/src/hooks/useTimeoutToggle.ts b/src/hooks/useTimeoutToggle.ts index 83f1bc333b..78e88ced52 100644 --- a/src/hooks/useTimeoutToggle.ts +++ b/src/hooks/useTimeoutToggle.ts @@ -21,7 +21,7 @@ export const useTimeoutToggle = ( value: boolean; toggle(): void; } => { - const timeoutId = useRef(); + const timeoutId = useRef(undefined); const [value, setValue] = useState(defaultValue); const toggle = (): void => { diff --git a/src/modules/ProxiedModuleApi.ts b/src/modules/ProxiedModuleApi.ts index 34735afe0f..dbffacdecc 100644 --- a/src/modules/ProxiedModuleApi.ts +++ b/src/modules/ProxiedModuleApi.ts @@ -78,7 +78,7 @@ export class ProxiedModuleApi implements ModuleApi { */ public openDialog>( initialTitleOrOptions: string | ModuleUiDialogOptions, - body: (props: P, ref: React.RefObject) => React.ReactNode, + body: (props: P, ref: React.RefObject) => React.ReactNode, props?: Omit, ): Promise<{ didOkOrSubmit: boolean; model: M }> { const initialOptions: ModuleUiDialogOptions = diff --git a/src/toasts/AnalyticsToast.tsx b/src/toasts/AnalyticsToast.tsx index c9cd218b49..91b8fdcb61 100644 --- a/src/toasts/AnalyticsToast.tsx +++ b/src/toasts/AnalyticsToast.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"; diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx index 58e6980733..ca021ed77d 100644 --- a/src/toasts/IncomingCallToast.tsx +++ b/src/toasts/IncomingCallToast.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, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState, type JSX } from "react"; import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix"; import { Button, Tooltip, TooltipProvider } from "@vector-im/compound-web"; import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid"; diff --git a/src/utils/FormattingUtils.ts b/src/utils/FormattingUtils.ts index d16ced944a..ba91154625 100644 --- a/src/utils/FormattingUtils.ts +++ b/src/utils/FormattingUtils.ts @@ -85,7 +85,7 @@ export function getUserNameColorClass(userId: string): string { * between each item, but with the last item appended as " and [lastItem]". */ export function formatList(items: string[], itemLimit?: number, includeCount?: boolean): string; -export function formatList(items: ReactElement[], itemLimit?: number, includeCount?: boolean): ReactElement; +export function formatList(items: ReactElement[], itemLimit?: number, includeCount?: boolean): ReactElement; export function formatList(items: ReactNode[], itemLimit?: number, includeCount?: boolean): ReactNode; export function formatList(items: ReactNode[], itemLimit = items.length, includeCount = false): ReactNode { let remaining = Math.max(items.length - itemLimit, 0); diff --git a/src/utils/MessageDiffUtils.tsx b/src/utils/MessageDiffUtils.tsx index ff30b12cac..dfcfe05325 100644 --- a/src/utils/MessageDiffUtils.tsx +++ b/src/utils/MessageDiffUtils.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 DiffMatchPatch from "diff-match-patch"; import { DiffDOM, IDiff } from "diff-dom"; diff --git a/src/utils/ReactUtils.tsx b/src/utils/ReactUtils.tsx index ee7469945a..14ca114270 100644 --- a/src/utils/ReactUtils.tsx +++ b/src/utils/ReactUtils.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"; /** * Joins an array into one value with a joiner. E.g. join(["hello", "world"], " ") -> hello world diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx index e5b4667fc2..bb0382f998 100644 --- a/src/utils/exportUtils/HtmlExport.tsx +++ b/src/utils/exportUtils/HtmlExport.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 { createRoot } from "react-dom/client"; import { Room, MatrixEvent, EventType, MsgType } from "matrix-js-sdk/src/matrix"; import { renderToStaticMarkup } from "react-dom/server"; diff --git a/src/vector/app.tsx b/src/vector/app.tsx index 426163db0b..5558f23b28 100644 --- a/src/vector/app.tsx +++ b/src/vector/app.tsx @@ -54,7 +54,7 @@ function onTokenLoginCompleted(): void { window.history.replaceState(null, "", url.href); } -export async function loadApp(fragParams: {}, matrixChatRef: React.Ref): Promise { +export async function loadApp(fragParams: {}, matrixChatRef: React.Ref): Promise> { initRouting(); const platform = PlatformPeg.get();