Explicitly specify all children props (matrix-org#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({

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> {
-    public constructor(props: {}) {
+export default class ErrorBoundary extends React.PureComponent<Props, IState> {
+    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