Update to React 18

src/components/AppBody.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useEffect } from 'react';
+import React, { type FC, type PropsWithChildren, useEffect } from 'react';
 import viewContainer from './viewContainer';
 
 /**
  * A simple component that includes the correct structure for ViewManager pages
  * to exist alongside standard React pages.
  */
-const AppBody: FC = ({ children }) => {
+const AppBody: FC<PropsWithChildren<unknown>> = ({ children }) => {
     useEffect(() => () => {
         // Reset view container state on unload
         viewContainer.reset();

src/components/Page.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, HTMLAttributes, useEffect, useRef } from 'react';
+import React, { type FC, type PropsWithChildren, type HTMLAttributes, useEffect, useRef } from 'react';
 
 import viewManager from './viewManager/viewManager';
 
@@ -9,14 +9,14 @@ type PageProps = {
     isMenuButtonEnabled?: boolean,
     isNowPlayingBarEnabled?: boolean,
     isThemeMediaSupported?: boolean,
-    backDropType?: string
+    backDropType?: string,
 };
 
 /**
  * Page component that handles hiding active non-react views, triggering the required events for
  * navigation and appRouter state updates, and setting the correct classes and data attributes.
  */
-const Page: FunctionComponent<PageProps & HTMLAttributes<HTMLDivElement>> = ({
+const Page: FC<PropsWithChildren<PageProps & HTMLAttributes<HTMLDivElement>>> = ({
     children,
     id,
     className = '',

src/components/ResponsiveDrawer.tsx

@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import React, { FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 
 import browser from 'scripts/browser';
 
@@ -15,7 +15,7 @@ export interface ResponsiveDrawerProps {
     onOpen: () => void
 }
 
-const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
+const ResponsiveDrawer: FC<PropsWithChildren<ResponsiveDrawerProps>> = ({
     children,
     open = false,
     onClose,

src/components/cardbuilder/Card/CardWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 import layoutManager from 'components/layoutManager';
 import type { DataAttributes } from 'types/dataAttributes';
 
@@ -7,7 +7,7 @@ interface CardWrapperProps {
     dataAttributes: DataAttributes;
 }
 
-const CardWrapper: FC<CardWrapperProps> = ({
+const CardWrapper: FC<PropsWithChildren<CardWrapperProps>> = ({
     className,
     dataAttributes,
     children

src/components/dashboard/users/AccessContainer.tsx

@@ -1,8 +1,8 @@
-import React, { FunctionComponent } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 import globalize from '../../../scripts/globalize';
 import CheckBoxElement from '../../../elements/CheckBoxElement';
 
-type IProps = {
+interface AccessContainerProps {
     containerClassName?: string;
     headerTitle?: string;
     checkBoxClassName?: string;
@@ -11,10 +11,19 @@ type IProps = {
     accessClassName?: string;
     listTitle?: string;
     description?: string;
-    children?: React.ReactNode
-};
+}
 
-const AccessContainer: FunctionComponent<IProps> = ({ containerClassName, headerTitle, checkBoxClassName, checkBoxTitle, listContainerClassName, accessClassName, listTitle, description, children }: IProps) => {
+const AccessContainer: FC<PropsWithChildren<AccessContainerProps>> = ({
+    containerClassName,
+    headerTitle,
+    checkBoxClassName,
+    checkBoxTitle,
+    listContainerClassName,
+    accessClassName,
+    listTitle,
+    description,
+    children
+}) => {
     return (
         <div className={containerClassName}>
             <h2>{globalize.translate(headerTitle)}</h2>
@@ -28,9 +37,12 @@ const AccessContainer: FunctionComponent<IProps> = ({ containerClassName, header
                     <h3 className='checkboxListLabel'>
                         {globalize.translate(listTitle)}
                     </h3>
-                    <div className='checkboxList paperList' style={{
-                        padding: '.5em 1em'
-                    }}>
+                    <div
+                        className='checkboxList paperList'
+                        style={{
+                            padding: '.5em 1em'
+                        }}
+                    >
                         {children}
                     </div>
                 </div>

src/components/listview/List/ListContentWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 import Box from '@mui/material/Box';
 
 interface ListContentWrapperProps {
@@ -7,7 +7,7 @@ interface ListContentWrapperProps {
     enableOverview?: boolean;
 }
 
-const ListContentWrapper: FC<ListContentWrapperProps> = ({
+const ListContentWrapper: FC<PropsWithChildren<ListContentWrapperProps>> = ({
     itemOverview,
     enableContentWrapper,
     enableOverview,

src/components/listview/List/ListGroupHeaderWrapper.tsx

@@ -1,11 +1,11 @@
-import React, { type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 import Typography from '@mui/material/Typography';
 
 interface ListGroupHeaderWrapperProps {
     index?: number;
 }
 
-const ListGroupHeaderWrapper: FC<ListGroupHeaderWrapperProps> = ({
+const ListGroupHeaderWrapper: FC<PropsWithChildren<ListGroupHeaderWrapperProps>> = ({
     index,
     children
 }) => {

src/components/listview/List/ListTextWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
@@ -7,7 +7,7 @@ interface ListTextWrapperProps {
     isLargeStyle?: boolean;
 }
 
-const ListTextWrapper: FC<ListTextWrapperProps> = ({
+const ListTextWrapper: FC<PropsWithChildren<ListTextWrapperProps>> = ({
     index,
     isLargeStyle,
     children

src/components/listview/List/ListWrapper.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import layoutManager from '../../layoutManager';
@@ -13,7 +13,7 @@ interface ListWrapperProps {
     className?: string;
 }
 
-const ListWrapper: FC<ListWrapperProps> = ({
+const ListWrapper: FC<PropsWithChildren<ListWrapperProps>> = ({
     index,
     action,
     title,

src/components/toolbar/AppToolbar.tsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import Tooltip from '@mui/material/Tooltip';
-import React, { FC, ReactNode } from 'react';
+import React, { type FC, type PropsWithChildren, ReactNode } from 'react';
 
 import { appRouter } from 'components/router/appRouter';
 import { useApi } from 'hooks/useApi';
@@ -27,7 +27,7 @@ const onBackButtonClick = () => {
         });
 };
 
-const AppToolbar: FC<AppToolbarProps> = ({
+const AppToolbar: FC<PropsWithChildren<AppToolbarProps>> = ({
     buttons,
     children,
     isDrawerAvailable,

src/components/toolbar/UserMenuButton.tsx

@@ -14,7 +14,7 @@ const UserMenuButton = () => {
     const [ userMenuAnchorEl, setUserMenuAnchorEl ] = useState<null | HTMLElement>(null);
     const isUserMenuOpen = Boolean(userMenuAnchorEl);
 
-    const onUserButtonClick = useCallback((event) => {
+    const onUserButtonClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
         setUserMenuAnchorEl(event.currentTarget);
     }, [ setUserMenuAnchorEl ]);