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>

package.json

@@ -65,7 +65,8 @@
         "test:playwright:screenshots": "playwright-screenshots --project=Chrome",
         "coverage": "yarn test --coverage",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
-        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
+        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
+        "postinstall": "patch-package"
     },
     "resolutions": {
         "@playwright/test": "1.51.1",
@@ -265,6 +266,7 @@
         "minimist": "^1.2.6",
         "modernizr": "^3.12.0",
         "node-fetch": "^2.6.7",
+        "patch-package": "^8.0.0",
         "playwright-core": "^1.51.0",
         "postcss": "8.4.46",
         "postcss-easings": "^4.0.0",

patches/@matrix-org+react-sdk-module-api+2.5.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts b/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
+index 917a7fc..a2710c6 100644
+--- a/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
++++ b/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
+@@ -37,7 +37,7 @@ export interface ModuleApi {
+      * @returns Whether the user submitted the dialog or closed it, and the model returned by the
+      * dialog component if submitted.
+      */
+-    openDialog<M extends object, P extends DialogProps = DialogProps, C extends DialogContent<P> = DialogContent<P>>(initialTitleOrOptions: string | ModuleUiDialogOptions, body: (props: P, ref: React.RefObject<C>) => React.ReactNode, props?: Omit<P, keyof DialogProps>): Promise<{
++    openDialog<M extends object, P extends DialogProps = DialogProps, C extends DialogContent<P> = DialogContent<P>>(initialTitleOrOptions: string | ModuleUiDialogOptions, body: (props: P, ref: React.RefObject<C | null>) => React.ReactNode, props?: Omit<P, keyof DialogProps>): Promise<{
+         didOkOrSubmit: boolean;
+         model: M;
+     }>;

patches/@types+react+18.3.18.patch

@@ -0,0 +1,76 @@
+diff --git a/node_modules/@types/react/index.d.ts b/node_modules/@types/react/index.d.ts
+index 6ea73ef..cb51757 100644
+--- a/node_modules/@types/react/index.d.ts
++++ b/node_modules/@types/react/index.d.ts
+@@ -151,7 +151,7 @@ declare namespace React {
+         /**
+          * The current value of the ref.
+          */
+-        readonly current: T | null;
++        current: T;
+     }
+ 
+     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {
+@@ -186,7 +186,7 @@ declare namespace React {
+      * @see {@link RefObject}
+      */
+ 
+-    type Ref<T> = RefCallback<T> | RefObject<T> | null;
++    type Ref<T> = RefCallback<T> | RefObject<T | null> | null;
+     /**
+      * A legacy implementation of refs where you can pass a string to a ref prop.
+      *
+@@ -300,7 +300,7 @@ declare namespace React {
+          *
+          * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
+          */
+-        ref?: LegacyRef<T> | undefined;
++        ref?: LegacyRef<T | null> | undefined;
+     }
+ 
+     /**
+@@ -1234,7 +1234,7 @@ declare namespace React {
+      *
+      * @see {@link ForwardRefRenderFunction}
+      */
+-    type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
++    type ForwardedRef<T> = ((instance: T | null) => void) | RefObject<T | null> | null;
+ 
+     /**
+      * The type of the function passed to {@link forwardRef}. This is considered different
+@@ -1565,7 +1565,7 @@ declare namespace React {
+         [propertyName: string]: any;
+     }
+ 
+-    function createRef<T>(): RefObject<T>;
++    function createRef<T>(): RefObject<T | null>;
+ 
+     /**
+      * The type of the component returned from {@link forwardRef}.
+@@ -1989,7 +1989,7 @@ declare namespace React {
+      * @version 16.8.0
+      * @see {@link https://react.dev/reference/react/useRef}
+      */
+-    function useRef<T>(initialValue: T): MutableRefObject<T>;
++    function useRef<T>(initialValue: T): RefObject<T>;
+     // convenience overload for refs given as a ref prop as they typically start with a null value
+     /**
+      * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
+@@ -2004,7 +2004,7 @@ declare namespace React {
+      * @version 16.8.0
+      * @see {@link https://react.dev/reference/react/useRef}
+      */
+-    function useRef<T>(initialValue: T | null): RefObject<T>;
++    function useRef<T>(initialValue: T | null): RefObject<T | null>;
+     // convenience overload for potentially undefined initialValue / call with 0 arguments
+     // has a default to stop it from defaulting to {} instead
+     /**
+@@ -2017,7 +2017,7 @@ declare namespace React {
+      * @version 16.8.0
+      * @see {@link https://react.dev/reference/react/useRef}
+      */
+-    function useRef<T = undefined>(initialValue?: undefined): MutableRefObject<T | undefined>;
++    function useRef<T>(initialValue: T | undefined): RefObject<T | undefined>;
+     /**
+      * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.
+      * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside

src/NodeAnimator.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type Key, type MutableRefObject, type ReactElement, type RefCallback } from "react";
+import React, { type Key, type RefObject, type ReactElement, type RefCallback } from "react";
 
 interface IChildProps {
     style: React.CSSProperties;
@@ -20,7 +20,7 @@ interface IProps {
     // a list of state objects to apply to each child node in turn
     startStyles: React.CSSProperties[];
 
-    innerRef?: MutableRefObject<any>;
+    innerRef?: RefObject<any>;
 }
 
 function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement {

src/accessibility/RovingTabIndex.tsx

@@ -354,7 +354,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
  * nodeRef = inputRef when inputRef argument is provided.
  */
 export const useRovingTabIndex = <T extends HTMLElement>(
-    inputRef?: RefObject<T>,
+    inputRef?: RefObject<T | null>,
 ): [FocusHandler, boolean, RefCallback<T>, RefObject<T | null>] => {
     const context = useContext(RovingTabIndexContext);
 

src/accessibility/roving/RovingAccessibleButton.tsx

@@ -12,7 +12,7 @@ import AccessibleButton, { type ButtonProps } from "../../components/views/eleme
 import { useRovingTabIndex } from "../RovingTabIndex";
 
 type Props<T extends keyof HTMLElementTagNameMap> = Omit<ButtonProps<T>, "tabIndex"> & {
-    inputRef?: RefObject<HTMLElementTagNameMap[T]>;
+    inputRef?: RefObject<HTMLElementTagNameMap[T] | null>;
     focusOnMouseOver?: boolean;
 };
 

src/accessibility/roving/RovingTabIndexWrapper.tsx

@@ -6,14 +6,14 @@ 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 { type ReactElement, type RefCallback } from "react";
+import { type ReactElement, type RefCallback, type RefObject } from "react";
 
 import type React from "react";
 import { useRovingTabIndex } from "../RovingTabIndex";
-import { type FocusHandler, type Ref } from "./types";
+import { type FocusHandler } from "./types";
 
 interface IProps {
-    inputRef?: Ref;
+    inputRef?: RefObject<HTMLElement | null>;
     children(renderProps: {
         onFocus: FocusHandler;
         isActive: boolean;

src/accessibility/roving/types.ts

@@ -6,8 +6,4 @@ 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 { type RefObject } from "react";
-
-export type Ref = RefObject<HTMLElement>;
-
 export type FocusHandler = () => void;

src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx

@@ -178,7 +178,9 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
                                     type="password"
                                     disabled={disableForm}
                                     autoComplete="new-password"
-                                    fieldRef={(field) => (this.fieldPassword = field)}
+                                    fieldRef={(field) => {
+                                        this.fieldPassword = field;
+                                    }}
                                 />
                             </div>
                             <div className="mx_E2eKeysDialog_inputRow">
@@ -195,7 +197,9 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
                                     type="password"
                                     disabled={disableForm}
                                     autoComplete="new-password"
-                                    fieldRef={(field) => (this.fieldPasswordConfirm = field)}
+                                    fieldRef={(field) => {
+                                        this.fieldPasswordConfirm = field;
+                                    }}
                                 />
                             </div>
                         </div>

src/components/structures/AutoHideScrollbar.tsx

@@ -30,7 +30,7 @@ export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> ex
         element: "div" as keyof ReactHTML,
     };
 
-    public readonly containerRef: React.RefObject<HTMLDivElement> = React.createRef();
+    public readonly containerRef = React.createRef<HTMLDivElement>();
 
     public componentDidMount(): void {
         if (this.containerRef.current && this.props.onScroll) {

src/components/structures/ContextMenu.tsx

@@ -582,13 +582,15 @@ export const alwaysAboveRightOf = (
 
 type ContextMenuTuple<T> = [
     boolean,
-    RefObject<T>,
+    RefObject<T | null>,
     (ev?: SyntheticEvent) => void,
     (ev?: SyntheticEvent) => void,
     (val: boolean) => void,
 ];
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
-export const useContextMenu = <T extends any = HTMLElement>(inputRef?: RefObject<T>): ContextMenuTuple<T> => {
+export const useContextMenu = <T extends HTMLElement = HTMLElement>(
+    inputRef?: RefObject<T | null>,
+): ContextMenuTuple<T> => {
     let button = useRef<T>(null);
     if (inputRef) {
         // if we are given a ref, use it instead of ours

src/components/structures/LoggedInView.tsx

@@ -124,9 +124,9 @@ class LoggedInView extends React.Component<IProps, IState> {
     public static displayName = "LoggedInView";
 
     protected readonly _matrixClient: MatrixClient;
-    protected readonly _roomView: React.RefObject<RoomView>;
+    protected readonly _roomView: React.RefObject<RoomView | null>;
-    protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
+    protected readonly _resizeContainer: React.RefObject<HTMLDivElement | null>;
-    protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
+    protected readonly resizeHandler: React.RefObject<HTMLDivElement | null>;
     protected layoutWatcherRef?: string;
     protected compactLayoutWatcherRef?: string;
     protected backgroundImageWatcherRef?: string;

src/components/structures/PipContainer.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type MutableRefObject, type ReactNode, useRef } from "react";
+import React, { type RefObject, type ReactNode, useRef } from "react";
 import { CallEvent, CallState, type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type Optional } from "matrix-events-sdk";
@@ -34,7 +34,7 @@ const SHOW_CALL_IN_STATES = [
 ];
 
 interface IProps {
-    movePersistedElement: MutableRefObject<(() => void) | undefined>;
+    movePersistedElement: RefObject<(() => void) | null>;
 }
 
 interface IState {
@@ -280,7 +280,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
 }
 
 export const PipContainer: React.FC = () => {
-    const movePersistedElement = useRef<() => void>();
+    const movePersistedElement = useRef<() => void>(null);
 
     return <PipContainerInner movePersistedElement={movePersistedElement} />;
 };

src/components/structures/RoomSearchView.tsx

@@ -59,7 +59,7 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
         const aborted = useRef(false);
         // A map from room ID to permalink creator
         const permalinkCreators = useMemo(() => new Map<string, RoomPermalinkCreator>(), []);
-        const innerRef = useRef<ScrollPanel | null>();
+        const innerRef = useRef<ScrollPanel>(null);
 
         useEffect(() => {
             return () => {

src/components/structures/RoomView.tsx

@@ -256,7 +256,7 @@ interface LocalRoomViewProps {
     localRoom: LocalRoom;
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
-    roomView: RefObject<HTMLElement>;
+    roomView: RefObject<HTMLElement | null>;
     onFileDrop: (dataTransfer: DataTransfer) => Promise<void>;
     mainSplitContentType: MainSplitContentType;
 }

src/components/structures/SpaceHierarchy.tsx

@@ -637,7 +637,7 @@ const useIntersectionObserver = (callback: () => void): ((element: HTMLDivElemen
         }
     };
 
-    const observerRef = useRef<IntersectionObserver>();
+    const observerRef = useRef<IntersectionObserver>(undefined);
     return (element: HTMLDivElement) => {
         if (observerRef.current) {
             observerRef.current.disconnect();

src/components/structures/UserMenu.tsx

@@ -81,7 +81,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     private dispatcherRef?: string;
     private themeWatcherRef?: string;
     private readonly dndWatcherRef?: string;
-    private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
+    private buttonRef = createRef<HTMLButtonElement>();
 
     public constructor(props: IProps) {
         super(props);

src/components/structures/WaitingForThirdPartyRoomView.tsx

@@ -21,7 +21,7 @@ import SdkConfig from "../../SdkConfig";
 import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
 
 interface Props {
-    roomView: RefObject<HTMLElement>;
+    roomView: RefObject<HTMLElement | null>;
     resizeNotifier: ResizeNotifier;
     inviteEvent: MatrixEvent;
 }

src/components/structures/auth/ForgotPassword.tsx

@@ -388,7 +388,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
                                 label={_td("auth|change_password_new_label")}
                                 value={this.state.password}
                                 minScore={PASSWORD_MIN_SCORE}
-                                fieldRef={(field) => (this.fieldPassword = field)}
+                                fieldRef={(field) => {
+                                    this.fieldPassword = field;
+                                }}
                                 onChange={this.onInputChanged.bind(this, "password")}
                                 autoComplete="new-password"
                             />
@@ -399,7 +401,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
                                 labelInvalid={_td("auth|reset_password|passwords_mismatch")}
                                 value={this.state.password2}
                                 password={this.state.password}
-                                fieldRef={(field) => (this.fieldPasswordConfirm = field)}
+                                fieldRef={(field) => {
+                                    this.fieldPasswordConfirm = field;
+                                }}
                                 onChange={this.onInputChanged.bind(this, "password2")}
                                 autoComplete="new-password"
                             />

src/components/views/audio_messages/AudioPlayerBase.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type ReactNode, type RefObject } from "react";
+import React, { createRef, type ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { type Playback, type PlaybackState } from "../../../audio/Playback";
@@ -31,8 +31,8 @@ interface IState {
 }
 
 export default abstract class AudioPlayerBase<T extends IProps = IProps> extends React.PureComponent<T, IState> {
-    protected seekRef: RefObject<SeekBar> = createRef();
+    protected seekRef = createRef<SeekBar>();
-    protected playPauseRef: RefObject<PlayPauseButton> = createRef();
+    protected playPauseRef = createRef<PlayPauseButton>();
 
     public constructor(props: T) {
         super(props);

src/components/views/auth/EmailField.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ComponentProps, PureComponent, type RefCallback, type RefObject } from "react";
+import React, { type ComponentProps, PureComponent, type Ref } from "react";
 
 import Field, { type IInputProps } from "../elements/Field";
 import { _t, _td, type TranslationKey } from "../../../languageHandler";
@@ -15,7 +15,7 @@ import * as Email from "../../../email";
 
 interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     id?: string;
-    fieldRef?: RefCallback<Field> | RefObject<Field>;
+    fieldRef?: Ref<Field>;
     value: string;
     autoFocus?: boolean;
 

src/components/views/auth/PassphraseConfirmField.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ComponentProps, PureComponent, type RefCallback, type RefObject } from "react";
+import React, { type ComponentProps, PureComponent, type Ref } from "react";
 
 import Field, { type IInputProps } from "../elements/Field";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
@@ -14,7 +14,7 @@ import { _t, _td, type TranslationKey } from "../../../languageHandler";
 
 interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
     id?: string;
-    fieldRef?: RefCallback<Field> | RefObject<Field>;
+    fieldRef?: Ref<Field>;
     autoComplete?: string;
     value: string;
     password: string; // The password we're confirming

src/components/views/auth/PassphraseField.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ComponentProps, PureComponent, type RefCallback, type RefObject } from "react";
+import React, { type ComponentProps, PureComponent, type Ref } from "react";
 import classNames from "classnames";
 
 import type { ZxcvbnResult } from "@zxcvbn-ts/core";
@@ -22,7 +22,7 @@ interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     className?: string;
     minScore: 0 | 1 | 2 | 3 | 4;
     value: string;
-    fieldRef?: RefCallback<Field> | RefObject<Field>;
+    fieldRef?: Ref<Field>;
     // Additional strings such as a username used to catch bad passwords
     userInputs?: string[];
 

src/components/views/auth/PasswordLogin.tsx

@@ -427,7 +427,9 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         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 && (

src/components/views/auth/RegistrationForm.tsx

@@ -456,7 +456,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             : _td("auth|registration|continue_without_email_field_label");
         return (
             <EmailField
-                fieldRef={(field) => (this[RegistrationField.Email] = field)}
+                fieldRef={(field) => {
+                    this[RegistrationField.Email] = field;
+                }}
                 label={emailLabel}
                 value={this.state.email}
                 validationRules={this.validateEmailRules.bind(this)}
@@ -471,7 +473,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return (
             <PassphraseField
                 id="mx_RegistrationForm_password"
-                fieldRef={(field) => (this[RegistrationField.Password] = field)}
+                fieldRef={(field) => {
+                    this[RegistrationField.Password] = field;
+                }}
                 minScore={PASSWORD_MIN_SCORE}
                 value={this.state.password}
                 onChange={this.onPasswordChange}
@@ -486,7 +490,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return (
             <PassphraseConfirmField
                 id="mx_RegistrationForm_passwordConfirm"
-                fieldRef={(field) => (this[RegistrationField.PasswordConfirm] = field)}
+                fieldRef={(field) => {
+                    this[RegistrationField.PasswordConfirm] = field;
+                }}
                 autoComplete="new-password"
                 value={this.state.passwordConfirm}
                 password={this.state.password}
@@ -514,7 +520,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
         return (
             <Field
-                ref={(field) => (this[RegistrationField.PhoneNumber] = field)}
+                ref={(field) => {
+                    this[RegistrationField.PhoneNumber] = field;
+                }}
                 type="text"
                 label={phoneLabel}
                 value={this.state.phoneNumber}
@@ -529,7 +537,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return (
             <Field
                 id="mx_RegistrationForm_username"
-                ref={(field) => (this[RegistrationField.Username] = field)}
+                ref={(field) => {
+                    this[RegistrationField.Username] = field;
+                }}
                 type="text"
                 autoFocus={true}
                 label={_t("common|username")}

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -23,7 +23,7 @@ interface IState {
 }
 
 export default class DialpadContextMenu extends React.Component<IProps, IState> {
-    private numberEntryFieldRef: React.RefObject<Field> = createRef();
+    private numberEntryFieldRef = createRef<Field>();
 
     public constructor(props: IProps) {
         super(props);

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>({

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> =
+    private readonly _inputRef = createRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>();
-        createRef();
 
     /**
      * 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 }) => {

src/components/views/emojipicker/Category.tsx

@@ -24,7 +24,7 @@ export interface ICategory {
     name: string;
     enabled: boolean;
     visible: boolean;
-    ref: RefObject<HTMLButtonElement>;
+    ref: RefObject<HTMLButtonElement | null>;
 }
 
 interface IProps {

src/components/views/messages/MFileBody.tsx

@@ -105,8 +105,8 @@ export default class MFileBody extends React.Component<IProps, IState> {
     declare public context: React.ContextType<typeof RoomContext>;
 
     public state: IState = {};
-    private iframe: React.RefObject<HTMLIFrameElement> = createRef();
+    private iframe = createRef<HTMLIFrameElement>();
-    private dummyLink: React.RefObject<HTMLAnchorElement> = createRef();
+    private dummyLink = createRef<HTMLAnchorElement>();
     private userDidClick = false;
     private fileDownloader: FileDownloader = new FileDownloader(() => this.iframe.current);
 

src/components/views/messages/MessageEvent.tsx

@@ -77,7 +77,7 @@ const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
 ]);
 
 export default class MessageEvent extends React.Component<IProps> implements IMediaBody, IOperableEventTile {
-    private body: React.RefObject<React.Component | IOperableEventTile> = createRef();
+    private body = createRef<React.Component | IOperableEventTile>();
     private mediaHelper?: MediaEventHelper;
     private bodyTypes = new Map<string, React.ComponentType<IBodyProps>>(baseBodyTypes.entries());
     private evTypes = new Map<string, React.ComponentType<IBodyProps>>(baseEvTypes.entries());

src/components/views/pips/WidgetPip.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type FC, type MutableRefObject, useCallback, useMemo } from "react";
+import React, { type FC, type RefObject, useCallback, useMemo } from "react";
 import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
 import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left";
 
@@ -33,7 +33,7 @@ interface Props {
     room: Room;
     viewingRoom: boolean;
     onStartMoving: (e: React.MouseEvent<Element, MouseEvent>) => void;
-    movePersistedElement: MutableRefObject<(() => void) | undefined>;
+    movePersistedElement: RefObject<(() => void) | null>;
 }
 
 /**

src/components/views/rooms/Autocomplete.tsx

@@ -50,7 +50,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     public queryRequested?: string;
     public debounceCompletionsRequest?: number;
     private containerRef = createRef<HTMLDivElement>();
-    private completionRefs: Record<string, RefObject<HTMLElement>> = {};
+    private completionRefs: Record<string, RefObject<HTMLElement | null>> = {};
 
     public static contextType = RoomContext;
     declare public context: React.ContextType<typeof RoomContext>;

src/components/views/rooms/CollapsibleButton.tsx

@@ -6,16 +6,15 @@ 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, { useContext } from "react";
+import React, { type RefObject, useContext } from "react";
 import classNames from "classnames";
 
 import AccessibleButton, { type ButtonProps } from "../elements/AccessibleButton";
 import { OverflowMenuContext } from "./MessageComposerButtons";
 import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu";
-import { type Ref } from "../../../accessibility/roving/types";
 
 interface Props extends Omit<ButtonProps<"div">, "element"> {
-    inputRef?: Ref;
+    inputRef?: RefObject<HTMLElement | null>;
     title: string;
     iconClassName: string;
 }

src/components/views/rooms/MessageComposer.tsx

@@ -111,7 +111,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
     private dispatcherRef?: string;
     private messageComposerInput = createRef<SendMessageComposerClass>();
     private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
-    private ref: React.RefObject<HTMLDivElement> = createRef();
+    private ref = createRef<HTMLDivElement>();
     private instanceId: number;
 
     private _voiceRecording: Optional<VoiceMessageRecording>;

src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ForwardedRef, forwardRef, type MutableRefObject, useMemo } from "react";
+import React, { type JSX, type ForwardedRef, forwardRef, type RefObject, useMemo } from "react";
 import classNames from "classnames";
 
 import type EditorStateTransfer from "../../../../utils/EditorStateTransfer";
@@ -27,7 +27,7 @@ const Content = forwardRef<HTMLElement, ContentProps>(function Content(
     { disabled = false, composerFunctions }: ContentProps,
     forwardRef: ForwardedRef<HTMLElement>,
 ) {
-    useWysiwygEditActionHandler(disabled, forwardRef as MutableRefObject<HTMLElement>, composerFunctions);
+    useWysiwygEditActionHandler(disabled, forwardRef as RefObject<HTMLElement>, composerFunctions);
     return null;
 });
 

src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ForwardedRef, forwardRef, type MutableRefObject, useMemo } from "react";
+import React, { type JSX, type ForwardedRef, forwardRef, type RefObject, useMemo } from "react";
 import { type IEventRelation } from "matrix-js-sdk/src/matrix";
 
 import { useWysiwygSendActionHandler } from "./hooks/useWysiwygSendActionHandler";
@@ -28,7 +28,7 @@ const Content = forwardRef<HTMLElement, ContentProps>(function Content(
     { disabled = false, composerFunctions }: ContentProps,
     forwardRef: ForwardedRef<HTMLElement>,
 ) {
-    useWysiwygSendActionHandler(disabled, forwardRef as MutableRefObject<HTMLElement>, composerFunctions);
+    useWysiwygSendActionHandler(disabled, forwardRef as RefObject<HTMLElement>, composerFunctions);
     return null;
 });
 

src/components/views/rooms/wysiwyg_composer/components/Editor.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { type CSSProperties, forwardRef, memo, type MutableRefObject, type ReactNode } from "react";
+import React, { type CSSProperties, forwardRef, memo, type RefObject, type ReactNode } from "react";
 
 import { useIsExpanded } from "../hooks/useIsExpanded";
 import { useSelection } from "../hooks/useSelection";
@@ -26,7 +26,7 @@ export const Editor = memo(
         { disabled, placeholder, leftComponent, rightComponent }: EditorProps,
         ref,
     ) {
-        const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
+        const isExpanded = useIsExpanded(ref as RefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
         const { onFocus, onBlur, onInput } = useSelection();
 
         return (

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 { type IEventRelation } from "matrix-js-sdk/src/matrix";
-import React, { type JSX, type MutableRefObject, type ReactNode } from "react";
+import React, { type JSX, type RefObject, type ReactNode } from "react";
 
 import { useComposerFunctions } from "../hooks/useComposerFunctions";
 import { useIsFocused } from "../hooks/useIsFocused";
@@ -29,7 +29,7 @@ interface PlainTextComposerProps {
     className?: string;
     leftComponent?: ReactNode;
     rightComponent?: ReactNode;
-    children?: (ref: MutableRefObject<HTMLDivElement | null>, composerFunctions: ComposerFunctions) => ReactNode;
+    children?: (ref: RefObject<HTMLDivElement | null>, composerFunctions: ComposerFunctions) => ReactNode;
     eventRelation?: IEventRelation;
 }
 

src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { memo, type MutableRefObject, type ReactNode, useEffect, useMemo, useRef } from "react";
+import React, { memo, type RefObject, type ReactNode, useEffect, useMemo, useRef } from "react";
 import { type IEventRelation } from "matrix-js-sdk/src/matrix";
 import { EMOTICON_TO_EMOJI } from "@matrix-org/emojibase-bindings";
 import { useWysiwyg, type FormattingFunctions } from "@vector-im/matrix-wysiwyg";
@@ -35,7 +35,7 @@ interface WysiwygComposerProps {
     className?: string;
     leftComponent?: ReactNode;
     rightComponent?: ReactNode;
-    children?: (ref: MutableRefObject<HTMLDivElement | null>, wysiwyg: FormattingFunctions) => ReactNode;
+    children?: (ref: RefObject<HTMLDivElement | null>, wysiwyg: FormattingFunctions) => ReactNode;
     eventRelation?: IEventRelation;
 }
 

src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts

@@ -11,7 +11,7 @@ import { type RefObject, useMemo } from "react";
 import { setSelection } from "../utils/selection";
 
 export function useComposerFunctions(
-    ref: RefObject<HTMLDivElement>,
+    ref: RefObject<HTMLDivElement | null>,
     setContent: (content: string) => void,
 ): {
     clear(): void;

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<Autocomplete>,
+    autocompleteRef: React.RefObject<Autocomplete | null>,
     initialContent?: string,
     eventRelation?: IEventRelation,
 ): (event: WysiwygEvent, composer: Wysiwyg, editor: HTMLElement) => WysiwygEvent | null {
@@ -97,7 +97,7 @@ function handleKeyboardEvent(
     roomContext: Pick<IRoomState, "liveTimeline" | "timelineRenderingType" | "room">,
     composerContext: ComposerContextState,
     mxClient: MatrixClient | undefined,
-    autocompleteRef: React.RefObject<Autocomplete>,
+    autocompleteRef: React.RefObject<Autocomplete | null>,
 ): KeyboardEvent | null {
     const { editorStateTransfer } = composerContext;
     const isEditing = Boolean(editorStateTransfer);

src/components/views/rooms/wysiwyg_composer/hooks/useIsExpanded.ts

@@ -6,9 +6,9 @@ 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 { type MutableRefObject, useEffect, useState } from "react";
+import { type RefObject, useEffect, useState } from "react";
 
-export function useIsExpanded(ref: MutableRefObject<HTMLElement | null>, breakingPoint: number): boolean {
+export function useIsExpanded(ref: RefObject<HTMLElement | null>, breakingPoint: number): boolean {
     const [isExpanded, setIsExpanded] = useState(false);
     useEffect(() => {
         if (ref.current) {

src/components/views/rooms/wysiwyg_composer/hooks/useIsFocused.ts

@@ -13,7 +13,7 @@ export function useIsFocused(): {
     onFocus(event: FocusEvent<HTMLElement>): void;
 } {
     const [isFocused, setIsFocused] = useState(false);
-    const timeoutIDRef = useRef<number>();
+    const timeoutIDRef = useRef<number>(undefined);
 
     useEffect(() => () => clearTimeout(timeoutIDRef.current), [timeoutIDRef]);
     const onFocus = useCallback(

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 { type RefObject, useEffect } from "react";
 
-export function usePlainTextInitialization(initialContent = "", ref: RefObject<HTMLElement>): void {
+export function usePlainTextInitialization(initialContent = "", ref: RefObject<HTMLElement | null>): void {
     useEffect(() => {
         // always read and write the ref.current using .innerHTML for consistency in linebreak and HTML entity handling
         if (ref.current) {

src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts

@@ -49,8 +49,8 @@ export function usePlainTextListeners(
     eventRelation?: IEventRelation,
     isAutoReplaceEmojiEnabled?: boolean,
 ): {
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
-    autocompleteRef: React.RefObject<Autocomplete>;
+    autocompleteRef: RefObject<Autocomplete | null>;
     content?: string;
     onBeforeInput(event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>): void;
     onInput(event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>): void;
@@ -66,8 +66,8 @@ export function usePlainTextListeners(
     const roomContext = useScopedRoomContext("room", "timelineRenderingType", "replyToEvent");
     const mxClient = useMatrixClientContext();
 
-    const ref = useRef<HTMLDivElement | null>(null);
+    const ref = useRef<HTMLDivElement>(null);
-    const autocompleteRef = useRef<Autocomplete | null>(null);
+    const autocompleteRef = useRef<Autocomplete>(null);
     const [content, setContent] = useState<string | undefined>(initialContent);
 
     const send = useCallback(() => {

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<HTMLDivElement>,
+    editorRef: React.RefObject<HTMLDivElement | null>,
     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<HTMLDivElement>,
+    editorRef: React.RefObject<HTMLDivElement | null>,
     setSuggestionData: React.Dispatch<React.SetStateAction<SuggestionState>>,
     isAutoReplaceEmojiEnabled?: boolean,
 ): void {

src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type MutableRefObject, useCallback, useRef } from "react";
+import { type RefObject, useCallback, useRef } from "react";
 
 import defaultDispatcher from "../../../../../dispatcher/dispatcher";
 import { Action } from "../../../../../dispatcher/actions";
@@ -22,7 +22,7 @@ import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.
 
 export function useWysiwygSendActionHandler(
     disabled: boolean,
-    composerElement: MutableRefObject<HTMLElement>,
+    composerElement: RefObject<HTMLElement>,
     composerFunctions: ComposerFunctions,
 ): void {
     const roomContext = useScopedRoomContext("timelineRenderingType");

src/components/views/rooms/wysiwyg_composer/hooks/utils.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type MutableRefObject, type RefObject } from "react";
+import { type RefObject } from "react";
 import { type IEventRelation, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { type WysiwygEvent } from "@vector-im/matrix-wysiwyg";
 
@@ -20,10 +20,10 @@ import ContentMessages from "../../../../../ContentMessages";
 import { isNotNull } from "../../../../../Typeguards";
 
 export function focusComposer(
-    composerElement: MutableRefObject<HTMLElement | null>,
+    composerElement: RefObject<HTMLElement | null>,
     renderingType: TimelineRenderingType,
     roomContext: Pick<IRoomState, "timelineRenderingType">,
-    timeoutId: MutableRefObject<number | null>,
+    timeoutId: RefObject<number | null>,
 ): void {
     if (renderingType === roomContext.timelineRenderingType) {
         // Immediately set the focus, so if you start typing it
@@ -62,13 +62,13 @@ export function setCursorPositionAtTheEnd(element: HTMLElement): void {
  * @returns boolean - whether or not the autocomplete has handled the event
  */
 export function handleEventWithAutocomplete(
-    autocompleteRef: RefObject<Autocomplete>,
+    autocompleteRef: RefObject<Autocomplete | null>,
     // we get a React Keyboard event from plain text composer, a Keyboard Event from the rich text composer
     event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>,
 ): boolean {
     const autocompleteIsOpen = autocompleteRef?.current && !autocompleteRef.current.state.hide;
 
-    if (!autocompleteIsOpen) {
+    if (!autocompleteRef.current || !autocompleteIsOpen) {
         return false;
     }
 

src/components/views/settings/AddRemoveThreepids.tsx

@@ -40,7 +40,7 @@ interface ExistingThreepidProps {
 const ExistingThreepid: React.FC<ExistingThreepidProps> = ({ mode, threepid, onChange, disabled }) => {
     const [isConfirming, setIsConfirming] = useState(false);
     const client = useMatrixClientContext();
-    const bindTask = useRef<AddThreepid | undefined>();
+    const bindTask = useRef<AddThreepid>(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<AddThreepid | undefined>();
+    const addTask = useRef<AddThreepid>(undefined);
     const [newThreepidInput, setNewThreepidInput] = useState("");
     const [phoneCountryInput, setPhoneCountryInput] = useState("");
     const [verificationCodeInput, setVerificationCodeInput] = useState("");

src/components/views/settings/ChangePassword.tsx

@@ -330,7 +330,9 @@ export default class ChangePassword extends React.Component<IProps, IState> {
                     <form className={this.props.className} onSubmit={this.onClickChange}>
                         <div className={rowClassName}>
                             <Field
-                                ref={(field) => (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}
@@ -340,7 +342,9 @@ export default class ChangePassword extends React.Component<IProps, IState> {
                         </div>
                         <div className={rowClassName}>
                             <PassphraseField
-                                fieldRef={(field) => (this[FIELD_NEW_PASSWORD] = field)}
+                                fieldRef={(field) => {
+                                    this[FIELD_NEW_PASSWORD] = field;
+                                }}
                                 type="password"
                                 label={_td("auth|change_password_new_label")}
                                 minScore={PASSWORD_MIN_SCORE}
@@ -353,7 +357,9 @@ export default class ChangePassword extends React.Component<IProps, IState> {
                         </div>
                         <div className={rowClassName}>
                             <Field
-                                ref={(field) => (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}

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

@@ -143,7 +143,7 @@ const SessionManagerTab: React.FC<{
     const [expandedDeviceIds, setExpandedDeviceIds] = useState<ExtendedDevice["device_id"][]>([]);
     const [selectedDeviceIds, setSelectedDeviceIds] = useState<ExtendedDevice["device_id"][]>([]);
     const filteredDeviceListRef = useRef<HTMLDivElement>(null);
-    const scrollIntoViewTimeoutRef = useRef<number>();
+    const scrollIntoViewTimeoutRef = useRef<number>(undefined);
 
     const sdkContext = useContext(SDKContext);
     const matrixClient = sdkContext.client!;

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -120,8 +120,8 @@ type BProps = Omit<ComponentProps<typeof SpaceBasicSettings>, "nameDisabled" | "
 interface ISpaceCreateFormProps extends BProps {
     busy: boolean;
     alias: string;
-    nameFieldRef: RefObject<Field>;
+    nameFieldRef: RefObject<Field | null>;
-    aliasFieldRef: RefObject<RoomAliasField>;
+    aliasFieldRef: RefObject<RoomAliasField | null>;
     showAliasField?: boolean;
     children?: ReactNode;
     onSubmit(e: SyntheticEvent): void;

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -56,7 +56,7 @@ type ButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<
     notificationState?: NotificationState;
     isNarrow?: boolean;
     size: string;
-    innerRef?: RefObject<HTMLDivElement>;
+    innerRef?: RefObject<HTMLDivElement | null>;
     ContextMenuComponent?: ComponentType<ComponentProps<typeof SpaceContextMenu>>;
     onClick?(ev?: ButtonEvent): void;
 };

src/components/views/voip/DialPadModal.tsx

@@ -23,7 +23,7 @@ interface IState {
 }
 
 export default class DialpadModal extends React.PureComponent<IProps, IState> {
-    private numberEntryFieldRef: React.RefObject<Field> = createRef();
+    private numberEntryFieldRef = createRef<Field>();
 
     public constructor(props: IProps) {
         super(props);

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<Handler>();
+    const savedHandler = useRef<Handler>(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<Handler>();
+    const savedHandler = useRef<Handler>(undefined);
 
     // Update ref.current value if handler changes.
     useEffect(() => {

src/hooks/useTimeoutToggle.ts

@@ -21,7 +21,7 @@ export const useTimeoutToggle = (
     value: boolean;
     toggle(): void;
 } => {
-    const timeoutId = useRef<number | undefined>();
+    const timeoutId = useRef<number | undefined>(undefined);
     const [value, setValue] = useState<boolean>(defaultValue);
 
     const toggle = (): void => {

src/modules/ProxiedModuleApi.ts

@@ -81,7 +81,7 @@ export class ProxiedModuleApi implements ModuleApi {
      */
     public openDialog<M extends object, P extends DialogProps, C extends DialogContent<P>>(
         initialTitleOrOptions: string | ModuleUiDialogOptions,
-        body: (props: P, ref: React.RefObject<C>) => React.ReactNode,
+        body: (props: P, ref: React.RefObject<C | null>) => React.ReactNode,
         props?: Omit<P, keyof DialogProps>,
     ): Promise<{ didOkOrSubmit: boolean; model: M }> {
         const initialOptions: ModuleUiDialogOptions =

test/unit-tests/components/structures/FilePanel-test.tsx

@@ -65,7 +65,9 @@ describe("FilePanel", () => {
                     roomId={room.roomId}
                     onClose={jest.fn()}
                     resizeNotifier={new ResizeNotifier()}
-                    ref={(ref) => (filePanel = ref)}
+                    ref={(ref) => {
+                        filePanel = ref;
+                    }}
                 />,
             );
             await screen.findByText("No files visible in this room");

test/unit-tests/components/structures/RoomView-test.tsx

@@ -128,7 +128,7 @@ describe("RoomView", () => {
         cleanup();
     });
 
-    const mountRoomView = async (ref?: RefObject<RoomView>): Promise<RenderResult> => {
+    const mountRoomView = async (ref?: RefObject<RoomView | null>): Promise<RenderResult> => {
         if (stores.roomViewStore.getRoomId() !== room.roomId) {
             const switchedRoom = new Promise<void>((resolve) => {
                 const subFn = () => {

test/unit-tests/components/structures/TimelinePanel-test.tsx

@@ -211,7 +211,9 @@ describe("TimelinePanel", () => {
                     timelineSet={timelineSet}
                     manageReadMarkers={true}
                     manageReadReceipts={true}
-                    ref={(ref) => (timelinePanel = ref)}
+                    ref={(ref) => {
+                        timelinePanel = ref;
+                    }}
                 />,
                 withClientContextRenderOptions(MatrixClientPeg.safeGet()),
             );

test/unit-tests/components/views/audio_messages/SeekBar-test.tsx

@@ -18,7 +18,7 @@ describe("SeekBar", () => {
     let playback: Playback;
     let renderResult: RenderResult;
     let frameRequestCallback: FrameRequestCallback;
-    let seekBarRef: RefObject<SeekBar>;
+    let seekBarRef: RefObject<SeekBar | null>;
 
     beforeEach(() => {
         seekBarRef = createRef();

test/unit-tests/components/views/rooms/VoiceRecordComposerTile-test.tsx

@@ -34,7 +34,7 @@ jest.mock("../../../../../src/stores/VoiceRecordingStore", () => ({
 }));
 
 describe("<VoiceRecordComposerTile/>", () => {
-    let voiceRecordComposerTile: RefObject<VoiceRecordComposerTile>;
+    let voiceRecordComposerTile: RefObject<VoiceRecordComposerTile | null>;
     let mockRecorder: VoiceMessageRecording;
     let mockUpload: IUpload;
     let mockClient: MatrixClient;

yarn.lock

@@ -3612,15 +3612,16 @@
     classnames "^2.5.1"
     vaul "^1.0.0"
 
-"@vector-im/matrix-wysiwyg-wasm@link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm":
+"@vector-im/matrix-wysiwyg-wasm@link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
+  uid ""
 
 "@vector-im/matrix-wysiwyg@2.38.2":
   version "2.38.2"
   resolved "https://registry.yarnpkg.com/@vector-im/matrix-wysiwyg/-/matrix-wysiwyg-2.38.2.tgz#3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8"
   integrity sha512-TUnLPgZ8/zGUccQZxjIP3MVHjqybgV4u0r6kXibs35wlXgomXjwcN5gchl3FpgGkiHbi8g3D2ao0oHaqi2GaIw==
   dependencies:
-    "@vector-im/matrix-wysiwyg-wasm" "link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm"
+    "@vector-im/matrix-wysiwyg-wasm" "link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm"
 
 "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"
@@ -3768,6 +3769,11 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@yarnpkg/lockfile@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
+
 "@zxcvbn-ts/core@^3.0.4":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@zxcvbn-ts/core/-/core-3.0.4.tgz#c5bde72235eb6c273cec78b672bb47c0d7045cad"
@@ -4186,6 +4192,11 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
 autoprefixer@^10.4.19:
   version "10.4.20"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
@@ -4730,7 +4741,7 @@ chrome-trace-event@^1.0.2:
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
   integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
 
-ci-info@^3.2.0:
+ci-info@^3.2.0, ci-info@^3.7.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
@@ -6623,6 +6634,13 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+find-yarn-workspace-root@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
+  integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
+  dependencies:
+    micromatch "^4.0.2"
+
 flat-cache@^3.0.4:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
@@ -6718,6 +6736,16 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
+fs-extra@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -6985,7 +7013,7 @@ gopd@^1.0.1, gopd@^1.2.0:
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
   integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
 
-graceful-fs@^4.1.2, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -7536,6 +7564,11 @@ is-date-object@^1.0.5, is-date-object@^1.1.0:
     call-bound "^1.0.2"
     has-tostringtag "^1.0.2"
 
+is-docker@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
 is-docker@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
@@ -7751,6 +7784,13 @@ is-weakset@^2.0.3:
     call-bound "^1.0.3"
     get-intrinsic "^1.2.6"
 
+is-wsl@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
 is-wsl@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-3.1.0.tgz#e1c657e39c10090afcbedec61720f6b924c3cbd2"
@@ -8375,6 +8415,17 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json-stable-stringify@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.2.1.tgz#addb683c2b78014d0b78d704c2fcbdf0695a60e2"
+  integrity sha512-Lp6HbbBgosLmJbjx0pBLbgvx68FaFU1sdkmBuckmhhJ88kL13OA51CDtR2yJB50eCNMH9wRqtQNNiAqQH4YXnA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    isarray "^2.0.5"
+    jsonify "^0.0.1"
+    object-keys "^1.1.1"
+
 json-stringify-pretty-compact@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz#cf4844770bddee3cb89a6170fe4b00eee5dbf1d4"
@@ -8392,6 +8443,20 @@ json5@^2.1.2, json5@^2.2.3:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonify@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
+  integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
+
 jsqr@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/jsqr/-/jsqr-1.4.0.tgz#8efb8d0a7cc6863cb6d95116b9069123ce9eb2d1"
@@ -8458,6 +8523,13 @@ kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+klaw-sync@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
+  integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+
 kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@@ -9367,6 +9439,14 @@ open@^10.0.3:
     is-inside-container "^1.0.0"
     is-wsl "^3.1.0"
 
+open@^7.4.2:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
+  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 opener@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
@@ -9389,6 +9469,11 @@ opus-recorder@^8.0.3:
   resolved "https://registry.yarnpkg.com/opus-recorder/-/opus-recorder-8.0.5.tgz#06d3e32e15da57ebc3f57e41b93033475fcb4e3e"
   integrity sha512-tBRXc9Btds7i3bVfA7d5rekAlyOcfsivt5vSIXHxRV1Oa+s6iXFW8omZ0Lm3ABWotVcEyKt96iIIUcgbV07YOw==
 
+os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
+
 own-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
@@ -9525,6 +9610,27 @@ pascal-case@^3.1.2:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+patch-package@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-8.0.0.tgz#d191e2f1b6e06a4624a0116bcb88edd6714ede61"
+  integrity sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==
+  dependencies:
+    "@yarnpkg/lockfile" "^1.1.0"
+    chalk "^4.1.2"
+    ci-info "^3.7.0"
+    cross-spawn "^7.0.3"
+    find-yarn-workspace-root "^2.0.0"
+    fs-extra "^9.0.0"
+    json-stable-stringify "^1.0.2"
+    klaw-sync "^6.0.0"
+    minimist "^1.2.6"
+    open "^7.4.2"
+    rimraf "^2.6.3"
+    semver "^7.5.3"
+    slash "^2.0.0"
+    tmp "^0.0.33"
+    yaml "^2.2.2"
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -10999,6 +11105,13 @@ rfdc@^1.4.1:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
+rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -11359,6 +11472,11 @@ sisteransi@^1.0.5:
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
   integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -12111,6 +12229,13 @@ tinyqueue@^3.0.0:
   resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-3.0.0.tgz#101ea761ccc81f979e29200929e78f1556e3661e"
   integrity sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==
 
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
+  dependencies:
+    os-tmpdir "~1.0.2"
+
 tmp@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
@@ -12403,6 +12528,11 @@ universalify@^0.2.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
   integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
 
+universalify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"