Explicitly specify all children props (#10312)

src/AsyncWrapper.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentType } from "react";
+import React, { ComponentType, PropsWithChildren } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "./languageHandler";
@@ -31,7 +31,7 @@ interface IProps {
 }
 
 interface IState {
-    component?: ComponentType;
+    component?: ComponentType<PropsWithChildren<any>>;
     error?: Error;
 }
 

src/components/structures/AutoHideScrollbar.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import React, { HTMLAttributes, ReactHTML, WheelEvent } from "react";
+import React, { HTMLAttributes, ReactHTML, ReactNode, WheelEvent } from "react";
 
 type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
     JSX.IntrinsicElements[T] extends HTMLAttributes<{}> ? DynamicElementProps<T> : DynamicElementProps<"div">;
@@ -30,6 +30,7 @@ export type IProps<T extends keyof JSX.IntrinsicElements> = Omit<DynamicHtmlElem
     style?: React.CSSProperties;
     tabIndex?: number;
     wrappedRef?: (ref: HTMLDivElement) => void;
+    children: ReactNode;
 };
 
 export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> extends React.Component<IProps<T>> {

src/components/structures/ContextMenu.tsx

@@ -111,7 +111,7 @@ interface IState {
 // Generic ContextMenu Portal wrapper
 // all options inside the menu should be of role=menuitem/menuitemcheckbox/menuitemradiobutton and have tabIndex={-1}
 // this will allow the ContextMenu to manage its own focus using arrow keys as per the ARIA guidelines.
-export default class ContextMenu extends React.PureComponent<IProps, IState> {
+export default class ContextMenu extends React.PureComponent<React.PropsWithChildren<IProps>, IState> {
     private readonly initialFocus: HTMLElement;
 
     public static defaultProps = {

src/components/structures/MainSplit.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import { NumberSize, Resizable } from "re-resizable";
 import { Direction } from "re-resizable/lib/resizer";
 
@@ -25,6 +25,7 @@ interface IProps {
     resizeNotifier: ResizeNotifier;
     collapsedRhs?: boolean;
     panel?: JSX.Element;
+    children: ReactNode;
 }
 
 export default class MainSplit extends React.Component<IProps> {

src/components/structures/ScrollPanel.tsx

@@ -74,6 +74,7 @@ interface IProps {
      * of the wrapper
      */
     fixedChildren?: ReactNode;
+    children?: ReactNode;
 
     /* onFillRequest(backwards): a callback which is called on scroll when
      * the user nears the start (backwards = true) or end (backwards =

src/components/structures/SpaceHierarchy.tsx

@@ -81,6 +81,7 @@ interface ITileProps {
     selected?: boolean;
     numChildRooms?: number;
     hasPermissions?: boolean;
+    children?: ReactNode;
     onViewRoomClick(): void;
     onJoinRoomClick(): Promise<unknown>;
     onToggleClick?(): void;

src/components/structures/UserMenu.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, ReactNode } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -54,6 +54,7 @@ import { SDKContext } from "../../contexts/SDKContext";
 
 interface IProps {
     isPanelCollapsed: boolean;
+    children?: ReactNode;
 }
 
 type PartialDOMRect = Pick<DOMRect, "width" | "left" | "top" | "height">;

src/components/views/auth/AuthPage.tsx

@@ -16,11 +16,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 
 import AuthFooter from "./AuthFooter";
 
-export default class AuthPage extends React.PureComponent {
+export default class AuthPage extends React.PureComponent<{ children: ReactNode }> {
     public render(): React.ReactNode {
         return (
             <div className="mx_AuthPage">

src/components/views/auth/CompleteSecurityBody.tsx

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 
-export default class CompleteSecurityBody extends React.PureComponent {
+export default class CompleteSecurityBody extends React.PureComponent<{ children: ReactNode }> {
     public render(): React.ReactNode {
         return <div className="mx_CompleteSecurityBody">{this.props.children}</div>;
     }

src/components/views/avatars/MemberAvatar.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useContext } from "react";
+import React, { ReactNode, useContext } from "react";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
 
@@ -42,6 +42,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     style?: any;
     forceHistorical?: boolean; // true to deny `useOnlyCurrentProfiles` usage. Default false.
     hideTitle?: boolean;
+    children?: ReactNode;
 }
 
 export default function MemberAvatar({

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import classNames from "classnames";
 
 import ContextMenu, {
@@ -36,6 +36,7 @@ interface IOptionListProps {
     red?: boolean;
     label?: string;
     className?: string;
+    children: ReactNode;
 }
 
 interface IOptionProps extends React.ComponentProps<typeof MenuItem> {
@@ -163,7 +164,7 @@ export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({
     );
 };
 
-const IconizedContextMenu: React.FC<IProps> = ({ className, children, compact, ...props }) => {
+const IconizedContextMenu: React.FC<React.PropsWithChildren<IProps>> = ({ className, children, compact, ...props }) => {
     const classes = classNames("mx_IconizedContextMenu", className, {
         mx_IconizedContextMenu_compact: compact,
     });

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useContext } from "react";
+import React, { ComponentProps, useContext } from "react";
 import { MatrixCapabilities } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
@@ -38,7 +38,7 @@ import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Live
 import { ModuleRunner } from "../../../modules/ModuleRunner";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
 
-interface IProps extends React.ComponentProps<typeof IconizedContextMenu> {
+interface IProps extends Omit<ComponentProps<typeof IconizedContextMenu>, "children"> {
     app: IApp;
     userWidget?: boolean;
     showUnpin?: boolean;

src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState } from "react";
+import React, { ReactNode, useState } from "react";
 
 import QuestionDialog from "./QuestionDialog";
 import { _t } from "../../../languageHandler";
@@ -30,6 +30,7 @@ interface IProps {
     subheading: string;
     rageshakeLabel: string;
     rageshakeData?: Record<string, string>;
+    children?: ReactNode;
     onFinished(sendFeedback?: boolean): void;
 }
 

src/components/views/dialogs/devtools/BaseTool.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createContext, useState } from "react";
+import React, { createContext, ReactNode, useState } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import classNames from "classnames";
 
@@ -29,6 +29,7 @@ export interface IDevtoolsProps {
 
 interface IMinProps extends Pick<IDevtoolsProps, "onBack"> {
     className?: string;
+    children?: ReactNode;
 }
 
 interface IProps extends IMinProps {

src/components/views/elements/DialogButtons.tsx

@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 
 import { _t } from "../../../languageHandler";
 
@@ -53,9 +53,10 @@ interface IProps {
     primaryDisabled?: boolean;
 
     // something to stick next to the buttons, optionally
-    additive?: React.ReactNode;
+    additive?: ReactNode;
 
     primaryButtonClass?: string;
+    children?: ReactNode;
 }
 
 /**

src/components/views/elements/ErrorBoundary.tsx

@@ -25,6 +25,10 @@ import SdkConfig from "../../../SdkConfig";
 import BugReportDialog from "../dialogs/BugReportDialog";
 import AccessibleButton from "./AccessibleButton";
 
+interface Props {
+    children: ReactNode;
+}
+
 interface IState {
     error: Error;
 }
@@ -33,8 +37,8 @@ interface IState {
  * This error boundary component can be used to wrap large content areas and
  * catch exceptions during rendering in the component tree below them.
  */
-export default class ErrorBoundary extends React.PureComponent<{}, IState> {
+export default class ErrorBoundary extends React.PureComponent<Props, IState> {
-    public constructor(props: {}) {
+    public constructor(props: Props) {
         super(props);
 
         this.state = {

src/components/views/elements/InfoTooltip.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import classNames from "classnames";
 
 import { Alignment } from "./Tooltip";
@@ -32,6 +32,7 @@ interface ITooltipProps {
     className?: string;
     tooltipClassName?: string;
     kind?: InfoTooltipKind;
+    children?: ReactNode;
 }
 
 export default class InfoTooltip extends React.PureComponent<ITooltipProps> {

src/components/views/elements/MiniAvatarUploader.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import classNames from "classnames";
 import { EventType } from "matrix-js-sdk/src/@types/event";
-import React, { useContext, useRef, useState, MouseEvent } from "react";
+import React, { useContext, useRef, useState, MouseEvent, ReactNode } from "react";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import RoomContext from "../../../contexts/RoomContext";
@@ -35,6 +35,7 @@ interface IProps {
     setAvatarUrl(url: string): Promise<unknown>;
     isUserAvatar?: boolean;
     onClick?(ev: MouseEvent<HTMLInputElement>): void;
+    children?: ReactNode;
 }
 
 const MiniAvatarUploader: React.FC<IProps> = ({

src/components/views/elements/PersistedElement.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MutableRefObject } from "react";
+import React, { MutableRefObject, ReactNode } from "react";
 import ReactDOM from "react-dom";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 
@@ -58,6 +58,7 @@ interface IProps {
 
     // Handle to manually notify this PersistedElement that it needs to move
     moveRef?: MutableRefObject<(() => void) | undefined>;
+    children: ReactNode;
 }
 
 /**

src/components/views/elements/TruncatedList.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 
 import { _t } from "../../../languageHandler";
 
@@ -35,6 +35,7 @@ interface IProps {
     // A function which will be invoked when an overflow element is required.
     // This will be inserted after the children.
     createOverflowElement?: (overflowCount: number, totalCount: number) => React.ReactNode;
+    children?: ReactNode;
 }
 
 export default class TruncatedList extends React.Component<IProps> {

src/components/views/messages/TileErrorBoundary.tsx

@@ -30,6 +30,7 @@ import { Layout } from "../../../settings/enums/Layout";
 interface IProps {
     mxEvent: MatrixEvent;
     layout: Layout;
+    children: ReactNode;
 }
 
 interface IState {

src/components/views/polls/PollOption.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import classNames from "classnames";
 import { PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 
@@ -47,6 +47,7 @@ interface PollOptionProps extends PollOptionContentProps {
     isEnded?: boolean;
     isChecked?: boolean;
     onOptionSelected?: (id: string) => void;
+    children?: ReactNode;
 }
 
 const EndedPollOption: React.FC<Omit<PollOptionProps, "voteCount" | "totalVoteCount">> = ({

src/components/views/right_panel/BaseCard.tsx

@@ -35,11 +35,13 @@ interface IProps {
     onKeyDown?(ev: KeyboardEvent): void;
     cardState?: any;
     ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
 }
 
 interface IGroupProps {
     className?: string;
     title: string;
+    children: ReactNode;
 }
 
 export const Group: React.FC<IGroupProps> = ({ className, title, children }) => {

src/components/views/right_panel/HeaderButton.tsx

@@ -18,7 +18,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import classNames from "classnames";
 
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
@@ -36,6 +36,7 @@ interface IProps {
     name: string;
     // Button title
     title: string;
+    children?: ReactNode;
 }
 
 // TODO: replace this, the composer buttons and the right panel buttons with a unified representation

src/components/views/right_panel/UserInfo.tsx

@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import React, { ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
@@ -520,7 +520,9 @@ const warnSelfDemote = async (isSpace: boolean): Promise<boolean> => {
     return confirmed;
 };
 
-const GenericAdminToolsContainer: React.FC<{}> = ({ children }) => {
+const GenericAdminToolsContainer: React.FC<{
+    children: ReactNode;
+}> = ({ children }) => {
     return (
         <div className="mx_UserInfo_container">
             <h3>{_t("Admin Tools")}</h3>
@@ -840,6 +842,7 @@ export const BanToggleButton = ({
 interface IBaseRoomProps extends IBaseProps {
     room: Room;
     powerLevels: IPowerLevelsContent;
+    children?: ReactNode;
 }
 
 const MuteToggleButton: React.FC<IBaseRoomProps> = ({ member, room, powerLevels, startUpdating, stopUpdating }) => {

src/components/views/rooms/AuxPanel.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import { lexicographicCompare } from "matrix-js-sdk/src/utils";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { throttle } from "lodash";
@@ -36,6 +36,7 @@ interface IProps {
     userId: string;
     showApps: boolean; // Render apps
     resizeNotifier: ResizeNotifier;
+    children?: ReactNode;
 }
 
 interface Counter {

src/components/views/rooms/EventTile.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef, forwardRef, MouseEvent, RefObject } from "react";
+import React, { createRef, forwardRef, MouseEvent, ReactNode, RefObject } from "react";
 import classNames from "classnames";
 import { EventType, MsgType, RelationType } from "matrix-js-sdk/src/@types/event";
 import { EventStatus, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
@@ -840,7 +840,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         return false;
     }
 
-    private renderContextMenu(): React.ReactFragment {
+    private renderContextMenu(): ReactNode {
         if (!this.state.contextMenu) return null;
 
         const tile = this.getTile();
@@ -864,7 +864,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         );
     }
 
-    public render(): React.ReactNode {
+    public render(): ReactNode {
         const msgtype = this.props.mxEvent.getContent().msgtype;
         const eventType = this.props.mxEvent.getType();
         const {

src/components/views/rooms/LinkPreviewWidget.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps, createRef } from "react";
+import React, { ComponentProps, createRef, ReactNode } from "react";
 import { decode } from "html-entities";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { IPreviewUrlResponse } from "matrix-js-sdk/src/client";
@@ -32,6 +32,7 @@ interface IProps {
     link: string;
     preview: IPreviewUrlResponse;
     mxEvent: MatrixEvent; // the Event associated with the preview
+    children?: ReactNode;
 }
 
 export default class LinkPreviewWidget extends React.Component<IProps> {

src/components/views/rooms/MessageComposerButtons.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import classNames from "classnames";
 import { IEventRelation } from "matrix-js-sdk/src/models/event";
 import { M_POLL_START } from "matrix-js-sdk/src/@types/polls";
-import React, { createContext, MouseEventHandler, ReactElement, useContext, useRef } from "react";
+import React, { createContext, MouseEventHandler, ReactElement, ReactNode, useContext, useRef } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
@@ -173,6 +173,7 @@ export const UploadButtonContext = createContext<UploadButtonFn | null>(null);
 interface IUploadButtonProps {
     roomId: string;
     relation?: IEventRelation | null;
+    children: ReactNode;
 }
 
 // We put the file input outside the UploadButton component so that it doesn't get killed when the context menu closes.

src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MouseEvent } from "react";
+import React, { MouseEvent, ReactNode } from "react";
 import classNames from "classnames";
 
 import { formatCount } from "../../../../utils/FormattingUtils";
@@ -29,7 +29,7 @@ interface Props {
     onClick?: (ev: MouseEvent) => void;
     onMouseOver?: (ev: MouseEvent) => void;
     onMouseLeave?: (ev: MouseEvent) => void;
-    children?: React.ReactChildren | JSX.Element;
+    children?: ReactNode;
     label?: string;
 }
 

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -23,6 +23,7 @@ import React, {
     useRef,
     useState,
     ChangeEvent,
+    ReactNode,
 } from "react";
 import classNames from "classnames";
 import { RoomType } from "matrix-js-sdk/src/@types/event";
@@ -158,6 +159,7 @@ interface ISpaceCreateFormProps extends BProps {
     nameFieldRef: RefObject<Field>;
     aliasFieldRef: RefObject<RoomAliasField>;
     showAliasField?: boolean;
+    children?: ReactNode;
     onSubmit(e: SyntheticEvent): void;
     setAlias(alias: string): void;
 }

test/components/views/context_menus/ContextMenu-test.tsx

@@ -51,7 +51,9 @@ describe("<ContextMenu />", () => {
                 onFinished={onFinished}
                 chevronFace={ChevronFace.Left}
                 chevronOffset={targetChevronOffset}
-            />,
+            >
+                <React.Fragment />
+            </ContextMenu>,
         );
         const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_left")!;
 
@@ -78,7 +80,9 @@ describe("<ContextMenu />", () => {
                 left={targetX}
                 chevronFace={ChevronFace.Top}
                 chevronOffset={targetChevronOffset}
-            />,
+            >
+                <React.Fragment />
+            </ContextMenu>,
         );
         const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_top")!;
 
@@ -104,7 +108,9 @@ describe("<ContextMenu />", () => {
                 onFinished={onFinished}
                 chevronFace={ChevronFace.Right}
                 chevronOffset={targetChevronOffset}
-            />,
+            >
+                <React.Fragment />
+            </ContextMenu>,
         );
         const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_right")!;
 
@@ -130,7 +136,9 @@ describe("<ContextMenu />", () => {
                 chevronFace={ChevronFace.Bottom}
                 onFinished={onFinished}
                 chevronOffset={targetChevronOffset}
-            />,
+            >
+                <React.Fragment />
+            </ContextMenu>,
         );
         const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_bottom")!;
 
@@ -157,7 +165,9 @@ describe("<ContextMenu />", () => {
                 chevronFace={ChevronFace.Bottom}
                 onFinished={onFinished}
                 chevronOffset={targetChevronOffset}
-            />,
+            >
+                <React.Fragment />
+            </ContextMenu>,
         );
 
         expect(onFinished).not.toHaveBeenCalled();
@@ -177,7 +187,9 @@ describe("<ContextMenu />", () => {
                 chevronFace={ChevronFace.Bottom}
                 onFinished={onFinished}
                 chevronOffset={targetChevronOffset}
-            />,
+            >
+                <React.Fragment />
+            </ContextMenu>,
         );
 
         expect(onFinished).not.toHaveBeenCalled();