Conform more of the codebase to strictNullChecks (#10358

src/components/views/auth/EmailField.tsx

@@ -21,7 +21,7 @@ import { _t, _td } from "../../../languageHandler";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import * as Email from "../../../email";
 
-interface IProps extends Omit<IInputProps, "onValidate"> {
+interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     id?: string;
     fieldRef?: RefCallback<Field> | RefObject<Field>;
     value: string;

src/components/views/auth/PassphraseConfirmField.tsx

@@ -20,7 +20,7 @@ import Field, { IInputProps } from "../elements/Field";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import { _t, _td } from "../../../languageHandler";
 
-interface IProps extends Omit<IInputProps, "onValidate" | "label"> {
+interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
     id?: string;
     fieldRef?: RefCallback<Field> | RefObject<Field>;
     autoComplete?: string;

src/components/views/auth/PassphraseField.tsx

@@ -23,7 +23,7 @@ import withValidation, { IFieldState, IValidationResult } from "../elements/Vali
 import { _t, _td } from "../../../languageHandler";
 import Field, { IInputProps } from "../elements/Field";
 
-interface IProps extends Omit<IInputProps, "onValidate"> {
+interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     autoFocus?: boolean;
     id?: string;
     className?: string;

src/components/views/context_menus/MessageContextMenu.tsx

@@ -179,7 +179,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
 
     private isPinned(): boolean {
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        const pinnedEvent = room.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
+        const pinnedEvent = room?.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
         if (!pinnedEvent) return false;
         const content = pinnedEvent.getContent();
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
@@ -389,7 +389,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             timelineRenderingType === TimelineRenderingType.ThreadsList;
         const isThreadRootEvent = isThread && mxEvent?.getThread()?.rootEvent === mxEvent;
 
-        let resendReactionsButton: JSX.Element;
+        let resendReactionsButton: JSX.Element | undefined;
         if (!mxEvent.isRedacted() && unsentReactionsCount !== 0) {
             resendReactionsButton = (
                 <IconizedContextMenuOption
@@ -400,7 +400,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let redactButton: JSX.Element;
+        let redactButton: JSX.Element | undefined;
         if (isSent && this.state.canRedact) {
             redactButton = (
                 <IconizedContextMenuOption
@@ -411,7 +411,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let openInMapSiteButton: JSX.Element;
+        let openInMapSiteButton: JSX.Element | undefined;
         const shareableLocationEvent = getShareableLocationEvent(mxEvent, cli);
         if (shareableLocationEvent) {
             const mapSiteLink = createMapSiteLinkFromEvent(shareableLocationEvent);
@@ -430,7 +430,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let forwardButton: JSX.Element;
+        let forwardButton: JSX.Element | undefined;
         const forwardableEvent = getForwardableEvent(mxEvent, cli);
         if (contentActionable && forwardableEvent) {
             forwardButton = (
@@ -442,7 +442,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let pinButton: JSX.Element;
+        let pinButton: JSX.Element | undefined;
         if (contentActionable && this.state.canPin) {
             pinButton = (
                 <IconizedContextMenuOption
@@ -462,7 +462,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             />
         );
 
-        let unhidePreviewButton: JSX.Element;
+        let unhidePreviewButton: JSX.Element | undefined;
         if (eventTileOps?.isWidgetHidden()) {
             unhidePreviewButton = (
                 <IconizedContextMenuOption
@@ -473,7 +473,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let permalinkButton: JSX.Element;
+        let permalinkButton: JSX.Element | undefined;
         if (permalink) {
             permalinkButton = (
                 <IconizedContextMenuOption
@@ -493,7 +493,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let endPollButton: JSX.Element;
+        let endPollButton: JSX.Element | undefined;
         if (this.canEndPoll(mxEvent)) {
             endPollButton = (
                 <IconizedContextMenuOption
@@ -504,7 +504,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let quoteButton: JSX.Element;
+        let quoteButton: JSX.Element | undefined;
         if (eventTileOps && canSendMessages) {
             // this event is rendered using TextualBody
             quoteButton = (
@@ -517,7 +517,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        let externalURLButton: JSX.Element;
+        let externalURLButton: JSX.Element | undefined;
         if (
             typeof mxEvent.getContent().external_url === "string" &&
             isUrlPermitted(mxEvent.getContent().external_url)
@@ -540,7 +540,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let collapseReplyChainButton: JSX.Element;
+        let collapseReplyChainButton: JSX.Element | undefined;
         if (collapseReplyChain) {
             collapseReplyChainButton = (
                 <IconizedContextMenuOption
@@ -551,7 +551,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let jumpToRelatedEventButton: JSX.Element;
+        let jumpToRelatedEventButton: JSX.Element | undefined;
         const relatedEventId = mxEvent.getWireContent()?.["m.relates_to"]?.event_id;
         if (relatedEventId && SettingsStore.getValue("developerMode")) {
             jumpToRelatedEventButton = (
@@ -563,7 +563,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let reportEventButton: JSX.Element;
+        let reportEventButton: JSX.Element | undefined;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
                 <IconizedContextMenuOption
@@ -574,7 +574,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let copyLinkButton: JSX.Element;
+        let copyLinkButton: JSX.Element | undefined;
         if (link) {
             copyLinkButton = (
                 <IconizedContextMenuOption
@@ -594,7 +594,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let copyButton: JSX.Element;
+        let copyButton: JSX.Element | undefined;
         if (rightClick && getSelectedText()) {
             copyButton = (
                 <IconizedContextMenuOption
@@ -606,7 +606,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let editButton: JSX.Element;
+        let editButton: JSX.Element | undefined;
         if (rightClick && canEditContent(mxEvent)) {
             editButton = (
                 <IconizedContextMenuOption
@@ -617,7 +617,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let replyButton: JSX.Element;
+        let replyButton: JSX.Element | undefined;
         if (rightClick && contentActionable && canSendMessages) {
             replyButton = (
                 <IconizedContextMenuOption
@@ -628,7 +628,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let replyInThreadButton: JSX.Element;
+        let replyInThreadButton: JSX.Element | undefined;
         if (
             rightClick &&
             contentActionable &&
@@ -639,7 +639,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             replyInThreadButton = <ReplyInThreadButton mxEvent={mxEvent} closeMenu={this.closeMenu} />;
         }
 
-        let reactButton;
+        let reactButton: JSX.Element | undefined;
         if (rightClick && contentActionable && canReact) {
             reactButton = (
                 <IconizedContextMenuOption
@@ -651,7 +651,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let viewInRoomButton: JSX.Element;
+        let viewInRoomButton: JSX.Element | undefined;
         if (isThreadRootEvent) {
             viewInRoomButton = (
                 <IconizedContextMenuOption
@@ -662,7 +662,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let nativeItemsList: JSX.Element;
+        let nativeItemsList: JSX.Element | undefined;
         if (copyButton || copyLinkButton) {
             nativeItemsList = (
                 <IconizedContextMenuOptionList>
@@ -672,7 +672,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let quickItemsList: JSX.Element;
+        let quickItemsList: JSX.Element | undefined;
         if (editButton || replyButton || reactButton) {
             quickItemsList = (
                 <IconizedContextMenuOptionList>
@@ -703,12 +703,12 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             </IconizedContextMenuOptionList>
         );
 
-        let redactItemList: JSX.Element;
+        let redactItemList: JSX.Element | undefined;
         if (redactButton) {
             redactItemList = <IconizedContextMenuOptionList red>{redactButton}</IconizedContextMenuOptionList>;
         }
 
-        let reactionPicker: JSX.Element;
+        let reactionPicker: JSX.Element | undefined;
         if (this.state.reactionPickerDisplayed) {
             const buttonRect = (this.reactButtonRef.current as HTMLElement)?.getBoundingClientRect();
             reactionPicker = (

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

@@ -64,7 +64,7 @@ interface ICanEditLevelFieldProps {
 }
 
 const CanEditLevelField: React.FC<ICanEditLevelFieldProps> = ({ setting, roomId, level }) => {
-    const canEdit = SettingsStore.canSetValue(setting, roomId, level);
+    const canEdit = SettingsStore.canSetValue(setting, roomId ?? null, level);
     const className = canEdit ? "mx_DevTools_SettingsExplorer_mutable" : "mx_DevTools_SettingsExplorer_immutable";
     return (
         <td className={className}>

src/components/views/directory/NetworkDropdown.tsx

@@ -44,7 +44,7 @@ const validServer = withValidation<undefined, { error?: MatrixError }>({
             // check if we can successfully load this server's room directory
             await MatrixClientPeg.get().publicRooms({
                 limit: 1,
-                server: value,
+                server: value ?? undefined,
             });
             return {};
         } catch (error) {

src/components/views/elements/AccessibleButton.tsx

@@ -14,7 +14,7 @@
  limitations under the License.
  */
 
-import React, { HTMLAttributes, InputHTMLAttributes, ReactHTML, ReactNode } from "react";
+import React, { HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
 import classnames from "classnames";
 
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
@@ -91,7 +91,7 @@ export interface IAccessibleButtonProps extends React.InputHTMLAttributes<Elemen
  * @returns {Object} rendered react
  */
 export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>({
-    element,
+    element = "div" as T,
     onClick,
     children,
     kind,
@@ -169,7 +169,6 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
 }
 
 AccessibleButton.defaultProps = {
-    element: "div" as keyof ReactHTML,
     role: "button",
     tabIndex: 0,
 };

src/components/views/elements/AppPermission.tsx

@@ -61,8 +61,6 @@ export default class AppPermission extends React.Component<IProps, IState> {
 
         // Set all this into the initial state
         this.state = {
-            widgetDomain: null,
-            isWrapped: null,
             roomMember,
             ...urlInfo,
         };

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -33,7 +33,8 @@ export function getDesktopCapturerSources(): Promise<Array<DesktopCapturerSource
         },
         types: ["screen", "window"],
     };
-    return PlatformPeg.get().getDesktopCapturerSources(options);
+    const plaf = PlatformPeg.get();
+    return plaf ? plaf?.getDesktopCapturerSources(options) : Promise.resolve<DesktopCapturerSource[]>([]);
 }
 
 export enum Tabs {

src/components/views/elements/DialogButtons.tsx

@@ -69,17 +69,17 @@ export default class DialogButtons extends React.Component<IProps> {
     };
 
     private onCancelClick = (event: React.MouseEvent): void => {
-        this.props.onCancel(event);
+        this.props.onCancel?.(event);
     };
 
     public render(): React.ReactNode {
         let primaryButtonClassName = "mx_Dialog_primary";
         if (this.props.primaryButtonClass) {
             primaryButtonClassName += " " + this.props.primaryButtonClass;
         }
-        let cancelButton;
 
-        if (this.props.cancelButton || this.props.hasCancel) {
+        let cancelButton: JSX.Element | undefined;
+        if (this.props.hasCancel) {
             cancelButton = (
                 <button
                     // important: the default type is 'submit' and this button comes before the
@@ -95,7 +95,7 @@ export default class DialogButtons extends React.Component<IProps> {
             );
         }
 
-        let additive = null;
+        let additive: JSX.Element | undefined;
         if (this.props.additive) {
             additive = <div className="mx_Dialog_buttons_additive">{this.props.additive}</div>;
         }

src/components/views/elements/Dropdown.tsx

@@ -113,8 +113,8 @@ interface IState {
  */
 export default class Dropdown extends React.Component<DropdownProps, IState> {
     private readonly buttonRef = createRef<HTMLDivElement>();
-    private dropdownRootElement: HTMLDivElement = null;
-    private ignoreEvent: MouseEvent = null;
+    private dropdownRootElement: HTMLDivElement | null = null;
+    private ignoreEvent: MouseEvent | null = null;
     private childrenByKey: Record<string, ReactNode> = {};
 
     public constructor(props: DropdownProps) {
@@ -373,18 +373,14 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
             );
         }
 
-        const dropdownClasses: Record<string, boolean> = {
-            mx_Dropdown: true,
-            mx_Dropdown_disabled: this.props.disabled,
-        };
-        if (this.props.className) {
-            dropdownClasses[this.props.className] = true;
-        }
+        const dropdownClasses = classnames("mx_Dropdown", this.props.className, {
+            mx_Dropdown_disabled: !!this.props.disabled,
+        });
 
         // Note the menu sits inside the AccessibleButton div so it's anchored
         // to the input, but overflows below it. The root contains both.
         return (
-            <div className={classnames(dropdownClasses)} ref={this.collectRoot}>
+            <div className={dropdownClasses} ref={this.collectRoot}>
                 <AccessibleButton
                     className="mx_Dropdown_input mx_no_textinput"
                     onClick={this.onAccessibleButtonClick}