Merge pull request #23940 from overleaf/td-react-18

Upgrade to React 18

GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8

services/web/frontend/js/shared/components/error-boundary-fallback.tsx

@@ -2,10 +2,9 @@ import { FC, ReactNode } from 'react'
 import { DefaultMessage } from './default-message'
 import OLNotification from '@/features/ui/components/ol/ol-notification'
 
-export const ErrorBoundaryFallback: FC<{ modal?: ReactNode }> = ({
-  children,
-  modal,
-}) => {
+export const ErrorBoundaryFallback: FC<
+  React.PropsWithChildren<{ modal?: ReactNode }>
+> = ({ children, modal }) => {
   return (
     <div className="error-boundary-alert">
       <OLNotification type="error" content={children || <DefaultMessage />} />

services/web/frontend/js/shared/components/generic-error-boundary-fallback.tsx

@@ -5,7 +5,9 @@ import { DefaultMessage } from './default-message'
 import MaterialIcon from './material-icon'
 import OLButton from '@/features/ui/components/ol/ol-button'
 
-export const GenericErrorBoundaryFallback: FC = ({ children }) => {
+export const GenericErrorBoundaryFallback: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const { t } = useTranslation()
   const { reload: handleClick } = useLocation()
 

services/web/frontend/js/shared/components/menu-bar/menu-bar-dropdown.tsx

@@ -18,17 +18,13 @@ type MenuBarDropdownProps = {
   align?: 'start' | 'end'
 }
 
-export const MenuBarDropdown: FC<MenuBarDropdownProps> = ({
-  title,
-  children,
-  id,
-  className,
-  align = 'start',
-}) => {
+export const MenuBarDropdown: FC<
+  React.PropsWithChildren<MenuBarDropdownProps>
+> = ({ title, children, id, className, align = 'start' }) => {
   const { menuId, selected, setSelected } = useNestableDropdown()
 
   const onToggle = useCallback(
-    show => {
+    (show: boolean) => {
       setSelected(show ? id : null)
     },
     [id, setSelected]
@@ -65,11 +61,9 @@ export const MenuBarDropdown: FC<MenuBarDropdownProps> = ({
   )
 }
 
-const NestableDropdownMenu: FC<DropdownMenuProps & { id: string }> = ({
-  children,
-  id,
-  ...props
-}) => {
+const NestableDropdownMenu: FC<
+  React.PropsWithChildren<DropdownMenuProps & { id: string }>
+> = ({ children, id, ...props }) => {
   return (
     <DropdownMenu {...props}>
       <NestableDropdownContextProvider id={id}>
@@ -79,43 +73,42 @@ const NestableDropdownMenu: FC<DropdownMenuProps & { id: string }> = ({
   )
 }
 
-const NestedDropdownToggle: FC = forwardRef<HTMLAnchorElement, AnchorProps>(
-  function NestedDropdownToggle(
-    { children, className, onMouseEnter, id },
-    ref
-  ) {
-    return (
-      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-      <a
-        id={id}
-        href="#"
-        ref={ref}
-        onMouseEnter={onMouseEnter}
-        onClick={onMouseEnter}
-        className={classNames(
-          className,
-          'nested-dropdown-toggle',
-          'dropdown-item'
-        )}
-      >
-        {children}
-        <MaterialIcon type="chevron_right" />
-      </a>
-    )
-  }
-)
+const NestedDropdownToggle: FC<React.PropsWithChildren> = forwardRef<
+  HTMLAnchorElement,
+  AnchorProps
+>(function NestedDropdownToggle(
+  { children, className, onMouseEnter, id },
+  ref
+) {
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    <a
+      id={id}
+      href="#"
+      ref={ref}
+      onMouseEnter={onMouseEnter}
+      onClick={onMouseEnter}
+      className={classNames(
+        className,
+        'nested-dropdown-toggle',
+        'dropdown-item'
+      )}
+    >
+      {children}
+      <MaterialIcon type="chevron_right" />
+    </a>
+  )
+})
 
-export const NestedMenuBarDropdown: FC<{ id: string; title: string }> = ({
-  children,
-  id,
-  title,
-}) => {
+export const NestedMenuBarDropdown: FC<
+  React.PropsWithChildren<{ id: string; title: string }>
+> = ({ children, id, title }) => {
   const { menuId, selected, setSelected } = useNestableDropdown()
   const select = useCallback(() => {
     setSelected(id)
   }, [id, setSelected])
   const onToggle = useCallback(
-    show => {
+    (show: boolean) => {
       setSelected(show ? id : null)
     },
     [setSelected, id]

services/web/frontend/js/shared/components/menu-bar/menu-bar.tsx

@@ -1,11 +1,9 @@
 import { NestableDropdownContextProvider } from '@/shared/context/nestable-dropdown-context'
 import { FC, HTMLProps } from 'react'
 
-export const MenuBar: FC<HTMLProps<HTMLDivElement> & { id: string }> = ({
-  children,
-  id,
-  ...props
-}) => {
+export const MenuBar: FC<
+  React.PropsWithChildren<HTMLProps<HTMLDivElement> & { id: string }>
+> = ({ children, id, ...props }) => {
   return (
     <div {...props}>
       <NestableDropdownContextProvider id={id}>

services/web/frontend/js/shared/components/panel-heading.tsx

@@ -3,12 +3,14 @@ import SplitTestBadge from '@/shared/components/split-test-badge'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
 
-export const PanelHeading: FC<{
-  title: string
-  splitTestName?: string
-  children?: React.ReactNode
-  handleClose(): void
-}> = ({ title, splitTestName, children, handleClose }) => {
+export const PanelHeading: FC<
+  React.PropsWithChildren<{
+    title: string
+    splitTestName?: string
+    children?: React.ReactNode
+    handleClose(): void
+  }>
+> = ({ title, splitTestName, children, handleClose }) => {
   const { t } = useTranslation()
 
   return (

services/web/frontend/js/shared/components/start-free-trial-button.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useCallback, useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { startFreeTrial } from '@/main/account-upgrade'
 import * as eventTracking from '../../infrastructure/event-tracking'
@@ -9,7 +9,7 @@ type StartFreeTrialButtonProps = {
   variant?: string
   buttonProps?: React.ComponentProps<typeof OLButton>
   children?: React.ReactNode
-  handleClick?: MouseEventHandler<typeof OLButton>
+  handleClick?: React.ComponentProps<typeof OLButton>['onClick']
 }
 
 export default function StartFreeTrialButton({
@@ -34,7 +34,7 @@ export default function StartFreeTrialButton({
   }, [source, variant])
 
   const onClick = useCallback(
-    event => {
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
       event.preventDefault()
 
       if (handleClick) {