Update usages of refs for React 19 compatibility (#29536)

* Update usages of refs for React 19 compatibility

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

* Iterate

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

* Iterate

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

* Simplify

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

---------

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

src/components/views/dialogs/BugReportDialog.tsx

@@ -47,7 +47,7 @@ interface IState {
 
 export default class BugReportDialog extends React.Component<BugReportDialogProps, IState> {
     private unmounted: boolean;
-    private issueRef: React.RefObject<Field>;
+    private issueRef: React.RefObject<Field | null>;
 
     public constructor(props: BugReportDialogProps) {
         super(props);

src/components/views/dialogs/InviteDialog.tsx

@@ -343,7 +343,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
 
     private debounceTimer: number | null = null; // actually number because we're in the browser
     private editorRef = createRef<HTMLInputElement>();
-    private numberEntryFieldRef: React.RefObject<Field> = createRef();
+    private numberEntryFieldRef = createRef<Field>();
     private unmounted = false;
     private encryptionByDefault = false;
     private profilesStore: UserProfilesStore;

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -53,7 +53,7 @@ const MAX_BUTTONS = 3;
 export default class ModalWidgetDialog extends React.PureComponent<IProps, IState> {
     private readonly widget: Widget;
     private readonly possibleButtons: ModalButtonID[];
-    private appFrame: React.RefObject<HTMLIFrameElement> = React.createRef();
+    private appFrame = React.createRef<HTMLIFrameElement>();
     private readonly themeWatcher = new ThemeWatcher();
 
     public state: IState = {

src/components/views/dialogs/ModuleUiDialog.tsx

@@ -16,7 +16,7 @@ import ScrollableBaseModal, { type IScrollableBaseState } from "./ScrollableBase
 import { _t } from "../../../languageHandler";
 
 interface IProps<P extends DialogProps, C extends DialogContent<P>> {
-    contentFactory: (props: P, ref: React.RefObject<C>) => React.ReactNode;
+    contentFactory: (props: P, ref: React.RefObject<C | null>) => React.ReactNode;
     additionalContentProps: Omit<P, keyof DialogProps> | undefined;
     initialOptions: ModuleUiDialogOptions;
     moduleApi: ModuleApi;

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<number>();
+    const timeoutIdRef = useRef<number>(undefined);
     const [isCopied, setIsCopied] = useState(false);
 
     const [linkToSpecificEvent, setLinkToSpecificEvent] = useState(target instanceof MatrixEvent);

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

@@ -7,16 +7,15 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { type JSX, type ReactNode } from "react";
+import React, { type JSX, type ReactNode, type RefObject } from "react";
 
 import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
 import AccessibleButton, { type ButtonProps } from "../../elements/AccessibleButton";
-import { type Ref } from "../../../../accessibility/roving/types";
 
 type TooltipOptionProps<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
     className?: string;
     endAdornment?: ReactNode;
-    inputRef?: Ref;
+    inputRef?: RefObject<HTMLElement | null>;
 };
 
 export const TooltipOption = <T extends keyof HTMLElementTagNameMap>({