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/elements/AppTile.tsx

@@ -14,7 +14,7 @@ import React, {
     type ContextType,
     createRef,
     type CSSProperties,
-    type MutableRefObject,
+    type RefObject,
     type ReactNode,
 } from "react";
 import classNames from "classnames";
@@ -96,7 +96,7 @@ interface IProps {
     widgetPageTitle?: string;
     showLayoutButtons?: boolean;
     // Handle to manually notify the PersistedElement that it needs to move
-    movePersistedElement?: MutableRefObject<(() => void) | undefined>;
+    movePersistedElement?: RefObject<(() => void) | null>;
     // An element to render after the iframe as an overlay
     overlay?: ReactNode;
     // If defined this async method will be called when the widget requests to become sticky.

src/components/views/elements/Field.tsx

@@ -13,7 +13,6 @@ import React, {
     type RefObject,
     createRef,
     type ComponentProps,
-    type MutableRefObject,
     type RefCallback,
     type Ref,
 } from "react";
@@ -122,8 +121,7 @@ interface IState {
 
 export default class Field extends React.PureComponent<PropShapes, IState> {
     private readonly id: string;
-    private readonly _inputRef: MutableRefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null> =
-        createRef();
+    private readonly _inputRef = createRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>();
 
     /**
      * When props.inputRef is a callback ref, we will pass callbackRef to the DOM element.
@@ -243,13 +241,13 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         return valid;
     }
 
-    private get inputRef(): RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> {
+    private get inputRef(): RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null> {
         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<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+        return inputRef ?? this._inputRef;
     }
 
     private onTooltipOpenChange = (open: boolean): void => {

src/components/views/elements/ImageView.tsx

@@ -585,7 +585,7 @@ export default class ImageView extends React.Component<IProps, IState> {
 function DownloadButton({ url, fileName }: { url: string; fileName?: string }): JSX.Element {
     const downloader = useRef(new FileDownloader()).current;
     const [loading, setLoading] = useState(false);
-    const blobRef = useRef<Blob>();
+    const blobRef = useRef<Blob>(undefined);
 
     function showError(e: unknown): void {
         Modal.createDialog(ErrorDialog, {

src/components/views/elements/Measured.tsx

@@ -11,7 +11,7 @@ import React, { type RefObject } from "react";
 import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
 
 interface IProps {
-    sensor: RefObject<Element>;
+    sensor: RefObject<Element | null>;
     breakpoint: number;
     onMeasurement(narrow: boolean): void;
 }
@@ -42,7 +42,7 @@ export default class Measured extends React.PureComponent<IProps> {
             UIStore.instance.stopTrackingElementDimensions(`Measured${this.instanceId}`);
         }
         if (current) {
-            UIStore.instance.trackElementDimensions(`Measured${this.instanceId}`, this.props.sensor.current);
+            UIStore.instance.trackElementDimensions(`Measured${this.instanceId}`, current);
         }
     }
 

src/components/views/elements/PersistedElement.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type MutableRefObject, type ReactNode, StrictMode } from "react";
+import React, { type RefObject, type ReactNode, StrictMode } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -54,7 +54,7 @@ interface IProps {
     style?: React.StyleHTMLAttributes<HTMLDivElement>;
 
     // Handle to manually notify this PersistedElement that it needs to move
-    moveRef?: MutableRefObject<(() => void) | undefined>;
+    moveRef?: RefObject<(() => void) | null>;
     children: ReactNode;
 }
 

src/components/views/elements/PersistentApp.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ContextType, type CSSProperties, type MutableRefObject, type ReactNode } from "react";
+import React, { type JSX, type ContextType, type CSSProperties, type RefObject, type ReactNode } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 
 import WidgetUtils from "../../../utils/WidgetUtils";
@@ -19,7 +19,7 @@ interface IProps {
     persistentWidgetId: string;
     persistentRoomId: string;
     pointerEvents?: CSSProperties["pointerEvents"];
-    movePersistedElement: MutableRefObject<(() => void) | undefined>;
+    movePersistedElement: RefObject<(() => void) | null>;
     children?: ReactNode;
 }
 

src/components/views/elements/ResizeHandle.tsx

@@ -13,7 +13,7 @@ interface IResizeHandleProps {
     vertical?: boolean;
     reverse?: boolean;
     id?: string;
-    passRef?: React.RefObject<HTMLDivElement>;
+    passRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id, passRef }) => {