Preparing for React 18: children property will become explicit

Author: shepmaster

ui/frontend/ButtonMenuItem.tsx

@@ -7,6 +7,7 @@ import styles from './ButtonMenuItem.module.css';
 type Button = JSX.IntrinsicElements['button'];
 
 interface ButtonMenuItemProps extends Button {
+  children: React.ReactNode;
   name: string;
 }
 

ui/frontend/ChannelMenu.tsx

@@ -63,7 +63,7 @@ const ChannelMenu: React.FC<ChannelMenuProps> = props => {
   );
 };
 
-const Desc: React.FC<{}> = ({ children }) => (
+const Desc: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <p className={styles.description}>{children}</p>
 );
 

ui/frontend/ConfigElement.tsx

@@ -51,6 +51,7 @@ export const Select = <T extends string,>({ value, onChange, children, ...rest }
 );
 
 interface ConfigElementProps {
+  children?: React.ReactNode;
   name: string;
   isNotDefault?: boolean;
   aside?: JSX.Element,

ui/frontend/ConfigMenu.tsx

@@ -17,15 +17,11 @@ import {
   ProcessAssembly,
 } from './types';
 
-interface ConfigMenuProps {
-  close: () => void;
-}
-
 const MONACO_THEMES = [
   'vs', 'vs-dark', 'vscode-dark-plus',
 ];
 
-const ConfigMenu: React.FC<ConfigMenuProps> = () => {
+const ConfigMenu: React.FC = () => {
   const keybinding = useSelector((state: State) => state.configuration.ace.keybinding);
   const aceTheme = useSelector((state: State) => state.configuration.ace.theme);
   const monacoTheme = useSelector((state: State) => state.configuration.monaco.theme);

ui/frontend/Header.tsx

@@ -57,6 +57,7 @@ const Header: React.FC = () => (
 );
 
 interface HeaderSetProps {
+  children: React.ReactNode;
   id: string;
 }
 

ui/frontend/HeaderButton.tsx

@@ -5,6 +5,7 @@ import { ExpandableIcon } from './Icon';
 import styles from './HeaderButton.module.css';
 
 interface HeaderButtonProps {
+  children?: React.ReactNode;
   bold?: boolean;
   icon?: React.ReactNode;
   rightIcon?: React.ReactNode;

ui/frontend/Help.tsx

@@ -330,12 +330,13 @@ const LinkableSection: React.FC<LinkableSectionProps> = ({
 );
 
 interface LinkableSectionProps {
+  children: React.ReactNode;
   id: string;
   header: string;
   level: React.ElementType;
 }
 
-const Code: React.FC = ({ children }) => (
+const Code: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <code className={styles.code}>{children}</code>
 );
 

ui/frontend/MenuAside.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles from './MenuAside.module.css';
 
-const MenuAside: React.FC = ({ children }) => (
+const MenuAside: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <p className={styles.aside}>
     {children}
   </p>

ui/frontend/MenuGroup.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import styles from './MenuGroup.module.css';
 
 interface MenuGroupProps {
+  children: React.ReactNode;
   title: string;
 }
 

ui/frontend/MenuItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles from './MenuItem.module.css';
 
-const MenuItem: React.FC<{}> = ({ children }) => (
+const MenuItem: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <div className={styles.container}>{children}</div>
 );