Skip to content

Commit fac9828

Browse files
t3chguyt3chguy
authored
Update usages of refs for React 19 compatibility (#29536)
* Update usages of refs for React 19 compatibility Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Simplify Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent d7730f4 commit fac9828

File tree

75 files changed

+378
-133
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+378
-133
lines changed

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@
6565
"test:playwright:screenshots": "playwright-screenshots --project=Chrome",
6666
"coverage": "yarn test --coverage",
6767
"analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
68-
"update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
68+
"update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
69+
"postinstall": "patch-package"
6970
},
7071
"resolutions": {
7172
"@playwright/test": "1.51.1",
@@ -265,6 +266,7 @@
265266
"minimist": "^1.2.6",
266267
"modernizr": "^3.12.0",
267268
"node-fetch": "^2.6.7",
269+
"patch-package": "^8.0.0",
268270
"playwright-core": "^1.51.0",
269271
"postcss": "8.4.46",
270272
"postcss-easings": "^4.0.0",

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
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
2+
index 917a7fc..a2710c6 100644
3+
--- a/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
4+
+++ b/node_modules/@matrix-org/react-sdk-module-api/lib/ModuleApi.d.ts
5+
@@ -37,7 +37,7 @@ export interface ModuleApi {
6+
* @returns Whether the user submitted the dialog or closed it, and the model returned by the
7+
* dialog component if submitted.
8+
*/
9+
- 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<{
10+
+ 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<{
11+
didOkOrSubmit: boolean;
12+
model: M;
13+
}>;

‎patches/@types+react+18.3.18.patch

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
diff --git a/node_modules/@types/react/index.d.ts b/node_modules/@types/react/index.d.ts
2+
index 6ea73ef..cb51757 100644
3+
--- a/node_modules/@types/react/index.d.ts
4+
+++ b/node_modules/@types/react/index.d.ts
5+
@@ -151,7 +151,7 @@ declare namespace React {
6+
/**
7+
* The current value of the ref.
8+
*/
9+
- readonly current: T | null;
10+
+ current: T;
11+
}
12+
13+
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {
14+
@@ -186,7 +186,7 @@ declare namespace React {
15+
* @see {@link RefObject}
16+
*/
17+
18+
- type Ref<T> = RefCallback<T> | RefObject<T> | null;
19+
+ type Ref<T> = RefCallback<T> | RefObject<T | null> | null;
20+
/**
21+
* A legacy implementation of refs where you can pass a string to a ref prop.
22+
*
23+
@@ -300,7 +300,7 @@ declare namespace React {
24+
*
25+
* @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
26+
*/
27+
- ref?: LegacyRef<T> | undefined;
28+
+ ref?: LegacyRef<T | null> | undefined;
29+
}
30+
31+
/**
32+
@@ -1234,7 +1234,7 @@ declare namespace React {
33+
*
34+
* @see {@link ForwardRefRenderFunction}
35+
*/
36+
- type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
37+
+ type ForwardedRef<T> = ((instance: T | null) => void) | RefObject<T | null> | null;
38+
39+
/**
40+
* The type of the function passed to {@link forwardRef}. This is considered different
41+
@@ -1565,7 +1565,7 @@ declare namespace React {
42+
[propertyName: string]: any;
43+
}
44+
45+
- function createRef<T>(): RefObject<T>;
46+
+ function createRef<T>(): RefObject<T | null>;
47+
48+
/**
49+
* The type of the component returned from {@link forwardRef}.
50+
@@ -1989,7 +1989,7 @@ declare namespace React {
51+
* @version 16.8.0
52+
* @see {@link https://react.dev/reference/react/useRef}
53+
*/
54+
- function useRef<T>(initialValue: T): MutableRefObject<T>;
55+
+ function useRef<T>(initialValue: T): RefObject<T>;
56+
// convenience overload for refs given as a ref prop as they typically start with a null value
57+
/**
58+
* `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
59+
@@ -2004,7 +2004,7 @@ declare namespace React {
60+
* @version 16.8.0
61+
* @see {@link https://react.dev/reference/react/useRef}
62+
*/
63+
- function useRef<T>(initialValue: T | null): RefObject<T>;
64+
+ function useRef<T>(initialValue: T | null): RefObject<T | null>;
65+
// convenience overload for potentially undefined initialValue / call with 0 arguments
66+
// has a default to stop it from defaulting to {} instead
67+
/**
68+
@@ -2017,7 +2017,7 @@ declare namespace React {
69+
* @version 16.8.0
70+
* @see {@link https://react.dev/reference/react/useRef}
71+
*/
72+
- function useRef<T = undefined>(initialValue?: undefined): MutableRefObject<T | undefined>;
73+
+ function useRef<T>(initialValue: T | undefined): RefObject<T | undefined>;
74+
/**
75+
* The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.
76+
* Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside

‎src/NodeAnimator.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import React, { type Key, type MutableRefObject, type ReactElement, type RefCallback } from "react";
9+
import React, { type Key, type RefObject, type ReactElement, type RefCallback } from "react";
1010

1111
interface IChildProps {
1212
style: React.CSSProperties;
@@ -20,7 +20,7 @@ interface IProps {
2020
// a list of state objects to apply to each child node in turn
2121
startStyles: React.CSSProperties[];
2222

23-
innerRef?: MutableRefObject<any>;
23+
innerRef?: RefObject<any>;
2424
}
2525

2626
function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement {

‎src/accessibility/RovingTabIndex.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
354354
* nodeRef = inputRef when inputRef argument is provided.
355355
*/
356356
export const useRovingTabIndex = <T extends HTMLElement>(
357-
inputRef?: RefObject<T>,
357+
inputRef?: RefObject<T | null>,
358358
): [FocusHandler, boolean, RefCallback<T>, RefObject<T | null>] => {
359359
const context = useContext(RovingTabIndexContext);
360360

‎src/accessibility/roving/RovingAccessibleButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import AccessibleButton, { type ButtonProps } from "../../components/views/eleme
1212
import { useRovingTabIndex } from "../RovingTabIndex";
1313

1414
type Props<T extends keyof HTMLElementTagNameMap> = Omit<ButtonProps<T>, "tabIndex"> & {
15-
inputRef?: RefObject<HTMLElementTagNameMap[T]>;
15+
inputRef?: RefObject<HTMLElementTagNameMap[T] | null>;
1616
focusOnMouseOver?: boolean;
1717
};
1818

‎src/accessibility/roving/RovingTabIndexWrapper.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import { type ReactElement, type RefCallback } from "react";
9+
import { type ReactElement, type RefCallback, type RefObject } from "react";
1010

1111
import type React from "react";
1212
import { useRovingTabIndex } from "../RovingTabIndex";
13-
import { type FocusHandler, type Ref } from "./types";
13+
import { type FocusHandler } from "./types";
1414

1515
interface IProps {
16-
inputRef?: Ref;
16+
inputRef?: RefObject<HTMLElement | null>;
1717
children(renderProps: {
1818
onFocus: FocusHandler;
1919
isActive: boolean;

‎src/accessibility/roving/types.ts

-4
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,4 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import { type RefObject } from "react";
10-
11-
export type Ref = RefObject<HTMLElement>;
12-
139
export type FocusHandler = () => void;

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,9 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
178178
type="password"
179179
disabled={disableForm}
180180
autoComplete="new-password"
181-
fieldRef={(field) => (this.fieldPassword = field)}
181+
fieldRef={(field) => {
182+
this.fieldPassword = field;
183+
}}
182184
/>
183185
</div>
184186
<div className="mx_E2eKeysDialog_inputRow">
@@ -195,7 +197,9 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
195197
type="password"
196198
disabled={disableForm}
197199
autoComplete="new-password"
198-
fieldRef={(field) => (this.fieldPasswordConfirm = field)}
200+
fieldRef={(field) => {
201+
this.fieldPasswordConfirm = field;
202+
}}
199203
/>
200204
</div>
201205
</div>

‎src/components/structures/AutoHideScrollbar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> ex
3030
element: "div" as keyof ReactHTML,
3131
};
3232

33-
public readonly containerRef: React.RefObject<HTMLDivElement> = React.createRef();
33+
public readonly containerRef = React.createRef<HTMLDivElement>();
3434

3535
public componentDidMount(): void {
3636
if (this.containerRef.current && this.props.onScroll) {

‎src/components/structures/ContextMenu.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -582,13 +582,15 @@ export const alwaysAboveRightOf = (
582582

583583
type ContextMenuTuple<T> = [
584584
boolean,
585-
RefObject<T>,
585+
RefObject<T | null>,
586586
(ev?: SyntheticEvent) => void,
587587
(ev?: SyntheticEvent) => void,
588588
(val: boolean) => void,
589589
];
590590
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
591-
export const useContextMenu = <T extends any = HTMLElement>(inputRef?: RefObject<T>): ContextMenuTuple<T> => {
591+
export const useContextMenu = <T extends HTMLElement = HTMLElement>(
592+
inputRef?: RefObject<T | null>,
593+
): ContextMenuTuple<T> => {
592594
let button = useRef<T>(null);
593595
if (inputRef) {
594596
// if we are given a ref, use it instead of ours

‎src/components/structures/LoggedInView.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,9 @@ class LoggedInView extends React.Component<IProps, IState> {
124124
public static displayName = "LoggedInView";
125125

126126
protected readonly _matrixClient: MatrixClient;
127-
protected readonly _roomView: React.RefObject<RoomView>;
128-
protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
129-
protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
127+
protected readonly _roomView: React.RefObject<RoomView | null>;
128+
protected readonly _resizeContainer: React.RefObject<HTMLDivElement | null>;
129+
protected readonly resizeHandler: React.RefObject<HTMLDivElement | null>;
130130
protected layoutWatcherRef?: string;
131131
protected compactLayoutWatcherRef?: string;
132132
protected backgroundImageWatcherRef?: string;

‎src/components/structures/PipContainer.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import React, { type MutableRefObject, type ReactNode, useRef } from "react";
9+
import React, { type RefObject, type ReactNode, useRef } from "react";
1010
import { CallEvent, CallState, type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
1111
import { logger } from "matrix-js-sdk/src/logger";
1212
import { type Optional } from "matrix-events-sdk";
@@ -34,7 +34,7 @@ const SHOW_CALL_IN_STATES = [
3434
];
3535

3636
interface IProps {
37-
movePersistedElement: MutableRefObject<(() => void) | undefined>;
37+
movePersistedElement: RefObject<(() => void) | null>;
3838
}
3939

4040
interface IState {
@@ -280,7 +280,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
280280
}
281281

282282
export const PipContainer: React.FC = () => {
283-
const movePersistedElement = useRef<() => void>();
283+
const movePersistedElement = useRef<() => void>(null);
284284

285285
return <PipContainerInner movePersistedElement={movePersistedElement} />;
286286
};

‎src/components/structures/RoomSearchView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
5959
const aborted = useRef(false);
6060
// A map from room ID to permalink creator
6161
const permalinkCreators = useMemo(() => new Map<string, RoomPermalinkCreator>(), []);
62-
const innerRef = useRef<ScrollPanel | null>();
62+
const innerRef = useRef<ScrollPanel>(null);
6363

6464
useEffect(() => {
6565
return () => {

‎src/components/structures/RoomView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ interface LocalRoomViewProps {
256256
localRoom: LocalRoom;
257257
resizeNotifier: ResizeNotifier;
258258
permalinkCreator: RoomPermalinkCreator;
259-
roomView: RefObject<HTMLElement>;
259+
roomView: RefObject<HTMLElement | null>;
260260
onFileDrop: (dataTransfer: DataTransfer) => Promise<void>;
261261
mainSplitContentType: MainSplitContentType;
262262
}

‎src/components/structures/SpaceHierarchy.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -637,7 +637,7 @@ const useIntersectionObserver = (callback: () => void): ((element: HTMLDivElemen
637637
}
638638
};
639639

640-
const observerRef = useRef<IntersectionObserver>();
640+
const observerRef = useRef<IntersectionObserver>(undefined);
641641
return (element: HTMLDivElement) => {
642642
if (observerRef.current) {
643643
observerRef.current.disconnect();

‎src/components/structures/UserMenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
8181
private dispatcherRef?: string;
8282
private themeWatcherRef?: string;
8383
private readonly dndWatcherRef?: string;
84-
private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
84+
private buttonRef = createRef<HTMLButtonElement>();
8585

8686
public constructor(props: IProps) {
8787
super(props);

‎src/components/structures/WaitingForThirdPartyRoomView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import SdkConfig from "../../SdkConfig";
2121
import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
2222

2323
interface Props {
24-
roomView: RefObject<HTMLElement>;
24+
roomView: RefObject<HTMLElement | null>;
2525
resizeNotifier: ResizeNotifier;
2626
inviteEvent: MatrixEvent;
2727
}

‎src/components/structures/auth/ForgotPassword.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
388388
label={_td("auth|change_password_new_label")}
389389
value={this.state.password}
390390
minScore={PASSWORD_MIN_SCORE}
391-
fieldRef={(field) => (this.fieldPassword = field)}
391+
fieldRef={(field) => {
392+
this.fieldPassword = field;
393+
}}
392394
onChange={this.onInputChanged.bind(this, "password")}
393395
autoComplete="new-password"
394396
/>
@@ -399,7 +401,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
399401
labelInvalid={_td("auth|reset_password|passwords_mismatch")}
400402
value={this.state.password2}
401403
password={this.state.password}
402-
fieldRef={(field) => (this.fieldPasswordConfirm = field)}
404+
fieldRef={(field) => {
405+
this.fieldPasswordConfirm = field;
406+
}}
403407
onChange={this.onInputChanged.bind(this, "password2")}
404408
autoComplete="new-password"
405409
/>

‎src/components/views/audio_messages/AudioPlayerBase.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import React, { createRef, type ReactNode, type RefObject } from "react";
9+
import React, { createRef, type ReactNode } from "react";
1010
import { logger } from "matrix-js-sdk/src/logger";
1111

1212
import { type Playback, type PlaybackState } from "../../../audio/Playback";
@@ -31,8 +31,8 @@ interface IState {
3131
}
3232

3333
export default abstract class AudioPlayerBase<T extends IProps = IProps> extends React.PureComponent<T, IState> {
34-
protected seekRef: RefObject<SeekBar> = createRef();
35-
protected playPauseRef: RefObject<PlayPauseButton> = createRef();
34+
protected seekRef = createRef<SeekBar>();
35+
protected playPauseRef = createRef<PlayPauseButton>();
3636

3737
public constructor(props: T) {
3838
super(props);

‎src/components/views/auth/EmailField.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import React, { type ComponentProps, PureComponent, type RefCallback, type RefObject } from "react";
9+
import React, { type ComponentProps, PureComponent, type Ref } from "react";
1010

1111
import Field, { type IInputProps } from "../elements/Field";
1212
import { _t, _td, type TranslationKey } from "../../../languageHandler";
@@ -15,7 +15,7 @@ import * as Email from "../../../email";
1515

1616
interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
1717
id?: string;
18-
fieldRef?: RefCallback<Field> | RefObject<Field>;
18+
fieldRef?: Ref<Field>;
1919
value: string;
2020
autoFocus?: boolean;
2121

‎src/components/views/auth/PassphraseConfirmField.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import React, { type ComponentProps, PureComponent, type RefCallback, type RefObject } from "react";
9+
import React, { type ComponentProps, PureComponent, type Ref } from "react";
1010

1111
import Field, { type IInputProps } from "../elements/Field";
1212
import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
1313
import { _t, _td, type TranslationKey } from "../../../languageHandler";
1414

1515
interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
1616
id?: string;
17-
fieldRef?: RefCallback<Field> | RefObject<Field>;
17+
fieldRef?: Ref<Field>;
1818
autoComplete?: string;
1919
value: string;
2020
password: string; // The password we're confirming

0 commit comments

Comments
 (0)