Explicitly specify all children props (#10312)

Author: t3chguy

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