matrix/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2025-08-08 03:42:14 +03:00
Code Activity

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

Browse Source 
* 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>
This commit is contained in:
Michael Telatynski
2025-03-28 10:07:41 +00:00
committed by GitHub
parent d7730f417b
commit fac982811c
75 changed files with 378 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -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",

13
patches/@matrix-org+react-sdk-module-api+2.5.0.patch Normal file
View File

@@ -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;
}>;

76
patches/@types+react+18.3.18.patch Normal file
View File

@@ -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

4
src/NodeAnimator.tsx
View File

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

2
src/accessibility/RovingTabIndex.tsx
View File

@@ -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);

2
src/accessibility/roving/RovingAccessibleButton.tsx
View File

@@ -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;
};

6
src/accessibility/roving/RovingTabIndexWrapper.tsx
View File

@@ -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;

4
src/accessibility/roving/types.ts
View File

@@ -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;

8
src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
View File

@@ -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>

2
src/components/structures/AutoHideScrollbar.tsx
View File

@@ -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) {

6
src/components/structures/ContextMenu.tsx
View File

@@ -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

6
src/components/structures/LoggedInView.tsx
View File

@@ -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 _resizeContainer: React.RefObject<HTMLDivElement>;
protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
protected readonly _roomView: React.RefObject<RoomView | null>;
protected readonly _resizeContainer: React.RefObject<HTMLDivElement | null>;
protected readonly resizeHandler: React.RefObject<HTMLDivElement | null>;
protected layoutWatcherRef?: string;
protected compactLayoutWatcherRef?: string;
protected backgroundImageWatcherRef?: string;

6
src/components/structures/PipContainer.tsx
View File

@@ -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} />;
};

2
src/components/structures/RoomSearchView.tsx
View File

@@ -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 () => {

2
src/components/structures/RoomView.tsx
View File

@@ -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;
}

2
src/components/structures/SpaceHierarchy.tsx
View File

@@ -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();

2
src/components/structures/UserMenu.tsx
View File

@@ -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);

2
src/components/structures/WaitingForThirdPartyRoomView.tsx
View File

@@ -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;
}

8
src/components/structures/auth/ForgotPassword.tsx
View File

@@ -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"
/>

6
src/components/views/audio_messages/AudioPlayerBase.tsx
View File

@@ -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 playPauseRef: RefObject<PlayPauseButton> = createRef();
protected seekRef = createRef<SeekBar>();
protected playPauseRef = createRef<PlayPauseButton>();
public constructor(props: T) {
super(props);

4
src/components/views/auth/EmailField.tsx
View File

@@ -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;

4
src/components/views/auth/PassphraseConfirmField.tsx
View File

@@ -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

4
src/components/views/auth/PassphraseField.tsx
View File

@@ -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[];

4
src/components/views/auth/PasswordLogin.tsx
View File

@@ -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 && (

20
src/components/views/auth/RegistrationForm.tsx
View File

@@ -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")}

2
src/components/views/context_menus/DialpadContextMenu.tsx
View File

@@ -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);

2
src/components/views/dialogs/BugReportDialog.tsx
View File

@@ -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);

2
src/components/views/dialogs/InviteDialog.tsx
View File

@@ -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;

2
src/components/views/dialogs/ModalWidgetDialog.tsx
View File

@@ -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 = {

2
src/components/views/dialogs/ModuleUiDialog.tsx
View File

@@ -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;

2
src/components/views/dialogs/ShareDialog.tsx
View File

@@ -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);

5
src/components/views/dialogs/spotlight/TooltipOption.tsx
View File

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

4
src/components/views/elements/AppTile.tsx
View File

@@ -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.

8
src/components/views/elements/Field.tsx
View File

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

2
src/components/views/elements/ImageView.tsx
View File

@@ -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, {

4
src/components/views/elements/Measured.tsx
View File

@@ -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);
}
}

4
src/components/views/elements/PersistedElement.tsx
View File

@@ -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;
}

4
src/components/views/elements/PersistentApp.tsx
View File

@@ -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;
}

2
src/components/views/elements/ResizeHandle.tsx
View File

@@ -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 }) => {

2
src/components/views/emojipicker/Category.tsx
View File

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

4
src/components/views/messages/MFileBody.tsx
View File

@@ -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 dummyLink: React.RefObject<HTMLAnchorElement> = createRef();
private iframe = createRef<HTMLIFrameElement>();
private dummyLink = createRef<HTMLAnchorElement>();
private userDidClick = false;
private fileDownloader: FileDownloader = new FileDownloader(() => this.iframe.current);

2
src/components/views/messages/MessageEvent.tsx
View File

@@ -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());

4
src/components/views/pips/WidgetPip.tsx
View File

@@ -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>;
}
/**

2
src/components/views/rooms/Autocomplete.tsx
View File

@@ -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>;

5
src/components/views/rooms/CollapsibleButton.tsx
View File

@@ -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;
}

2
src/components/views/rooms/MessageComposer.tsx
View File

@@ -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>;

4
src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
View File

@@ -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;
});

4
src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
View File

@@ -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;
});

4
src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
View File

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

4
src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
View File

@@ -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;
}

4
src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
View File

@@ -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;
}

2
src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts
View File

@@ -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;

4
src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
View File

@@ -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);

4
src/components/views/rooms/wysiwyg_composer/hooks/useIsExpanded.ts
View File

@@ -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) {

2
src/components/views/rooms/wysiwyg_composer/hooks/useIsFocused.ts
View File

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

2
src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
View File

@@ -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) {

8
src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
View File

@@ -49,8 +49,8 @@ export function usePlainTextListeners(
eventRelation?: IEventRelation,
isAutoReplaceEmojiEnabled?: boolean,
): {
ref: RefObject<HTMLDivElement>;
autocompleteRef: React.RefObject<Autocomplete>;
ref: RefObject<HTMLDivElement | null>;
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 autocompleteRef = useRef<Autocomplete | null>(null);
const ref = useRef<HTMLDivElement>(null);
const autocompleteRef = useRef<Autocomplete>(null);
const [content, setContent] = useState<string | undefined>(initialContent);
const send = useCallback(() => {

4
src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts
View File

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

4
src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
View File

@@ -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");

10
src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
View File

@@ -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;
}

4
src/components/views/settings/AddRemoveThreepids.tsx
View File

@@ -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("");

12
src/components/views/settings/ChangePassword.tsx
View File

@@ -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}

2
src/components/views/settings/tabs/user/SessionManagerTab.tsx
View File

@@ -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!;

4
src/components/views/spaces/SpaceCreateMenu.tsx
View File

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

2
src/components/views/spaces/SpaceTreeLevel.tsx
View File

@@ -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;
};

2
src/components/views/voip/DialPadModal.tsx
View File

@@ -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);

4
src/hooks/useTimeout.ts
View File

@@ -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(() => {

2
src/hooks/useTimeoutToggle.ts
View File

@@ -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 => {

2
src/modules/ProxiedModuleApi.ts
View File

@@ -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 =

4
test/unit-tests/components/structures/FilePanel-test.tsx
View File

@@ -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");

2
test/unit-tests/components/structures/RoomView-test.tsx
View File

@@ -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 = () => {

4
test/unit-tests/components/structures/TimelinePanel-test.tsx
View File

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

2
test/unit-tests/components/views/audio_messages/SeekBar-test.tsx
View File

@@ -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();

2
test/unit-tests/components/views/rooms/VoiceRecordComposerTile-test.tsx
View File

@@ -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;

138
yarn.lock
View File

@@ -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"