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

Upgrade to React 18

GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8

services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx

@@ -8,12 +8,14 @@ import { EditorView } from '@codemirror/view'
 import { emitToolbarEvent } from '../../extensions/toolbar/utils/analytics'
 import { useCodeMirrorViewContext } from '../codemirror-context'
 
-export const ToolbarButtonMenu: FC<{
-  id: string
-  label: string
-  icon: React.ReactNode
-  altCommand?: (view: EditorView) => void
-}> = memo(function ButtonMenu({ icon, id, label, altCommand, children }) {
+export const ToolbarButtonMenu: FC<
+  React.PropsWithChildren<{
+    id: string
+    label: string
+    icon: React.ReactNode
+    altCommand?: (view: EditorView) => void
+  }>
+> = memo(function ButtonMenu({ icon, id, label, altCommand, children }) {
   const target = useRef<any>(null)
   const { open, onToggle, ref } = useDropdown()
   const view = useCodeMirrorViewContext()

services/web/frontend/js/features/source-editor/components/toolbar/overflow.tsx

@@ -6,14 +6,15 @@ import { useCodeMirrorViewContext } from '../codemirror-context'
 import OLOverlay from '@/features/ui/components/ol/ol-overlay'
 import OLPopover from '@/features/ui/components/ol/ol-popover'
 
-export const ToolbarOverflow: FC<{
-  overflowed: boolean
-  overflowOpen: boolean
-  setOverflowOpen: (open: boolean) => void
-  overflowRef?: React.Ref<HTMLDivElement>
-}> = ({ overflowed, overflowOpen, setOverflowOpen, overflowRef, children }) => {
+export const ToolbarOverflow: FC<
+  React.PropsWithChildren<{
+    overflowed: boolean
+    overflowOpen: boolean
+    setOverflowOpen: (open: boolean) => void
+    overflowRef?: React.Ref<HTMLDivElement>
+  }>
+> = ({ overflowed, overflowOpen, setOverflowOpen, overflowRef, children }) => {
   const { t } = useTranslation()
-
   const buttonRef = useRef<HTMLButtonElement>(null)
   const keyboardInputRef = useRef(false)
   const view = useCodeMirrorViewContext()

services/web/frontend/js/features/source-editor/components/toolbar/toolbar-button.tsx

@@ -31,12 +31,12 @@ export const ToolbarButton = memo<{
 }) {
   const view = useCodeMirrorViewContext()
 
-  const handleMouseDown = useCallback(event => {
+  const handleMouseDown = useCallback((event: React.MouseEvent) => {
     event.preventDefault()
   }, [])
 
   const handleClick = useCallback(
-    event => {
+    (event: React.MouseEvent) => {
       emitToolbarEvent(view, id)
       if (command) {
         event.preventDefault()