Error overlay refactors

packages/next/src/client/components/react-dev-overlay/internal/components/Dialog/Dialog.tsx

@@ -6,7 +6,7 @@ export type DialogProps = {
   type: 'error' | 'warning'
   'aria-labelledby': string
   'aria-describedby': string
-  onClose?: (e: MouseEvent | TouchEvent) => void
+  onClose?: () => void
 }
 
 const Dialog: React.FC<DialogProps> = function Dialog({
@@ -24,7 +24,10 @@ const Dialog: React.FC<DialogProps> = function Dialog({
   const onDialog = React.useCallback((node: HTMLDivElement | null) => {
     setDialog(node)
   }, [])
-  useOnClickOutside(dialog, onClose)
+  useOnClickOutside(dialog, (e) => {
+    e.preventDefault()
+    return onClose?.()
+  })
 
   // Make HTMLElements with `role=link` accessible to be triggered by the
   // keyboard, i.e. [Enter].

packages/next/src/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx

@@ -36,18 +36,21 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> =
 
       function handler(e: KeyboardEvent) {
         if (e.key === 'ArrowLeft') {
+          e.preventDefault()
           e.stopPropagation()
           if (buttonLeft.current) {
             buttonLeft.current.focus()
           }
           previous && previous()
         } else if (e.key === 'ArrowRight') {
+          e.preventDefault()
           e.stopPropagation()
           if (buttonRight.current) {
             buttonRight.current.focus()
           }
           next && next()
         } else if (e.key === 'Escape') {
+          e.preventDefault()
           e.stopPropagation()
           if (root instanceof ShadowRoot) {
             const a = root.activeElement
@@ -57,9 +60,7 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> =
             }
           }
 
-          if (close) {
-            close()
-          }
+          close?.()
         }
       }
 

packages/next/src/client/components/react-dev-overlay/internal/components/Toast/Toast.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 export type ToastProps = {
   children?: React.ReactNode
-  onClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onClick?: () => void
   className?: string
 }
 
@@ -12,7 +12,14 @@ export const Toast: React.FC<ToastProps> = function Toast({
   className,
 }) {
   return (
-    <div data-nextjs-toast onClick={onClick} className={className}>
+    <div
+      data-nextjs-toast
+      onClick={(e) => {
+        e.preventDefault()
+        return onClick?.()
+      }}
+      className={className}
+    >
       <div data-nextjs-toast-wrapper>{children}</div>
     </div>
   )

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState, useEffect, useMemo, useCallback } from 'react'
 import {
   ACTION_UNHANDLED_ERROR,
   ACTION_UNHANDLED_REJECTION,
@@ -56,16 +56,16 @@ function getErrorSignature(ev: SupportedErrorEvent): string {
   return ''
 }
 
-export const Errors: React.FC<ErrorsProps> = function Errors({
+export function Errors({
   errors,
   initialDisplayState,
   versionInfo,
-}) {
-  const [lookups, setLookups] = React.useState(
+}: ErrorsProps) {
+  const [lookups, setLookups] = useState(
     {} as { [eventId: string]: ReadyErrorEvent }
   )
 
-  const [readyErrors, nextError] = React.useMemo<
+  const [readyErrors, nextError] = useMemo<
     [ReadyErrorEvent[], SupportedErrorEvent | null]
   >(() => {
     let ready: ReadyErrorEvent[] = []
@@ -95,11 +95,11 @@ export const Errors: React.FC<ErrorsProps> = function Errors({
     return [ready, next]
   }, [errors, lookups])
 
-  const isLoading = React.useMemo<boolean>(() => {
+  const isLoading = useMemo<boolean>(() => {
     return readyErrors.length < 1 && Boolean(errors.length)
   }, [errors.length, readyErrors.length])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (nextError == null) {
       return
     }
@@ -125,52 +125,38 @@ export const Errors: React.FC<ErrorsProps> = function Errors({
   }, [nextError])
 
   const [displayState, setDisplayState] =
-    React.useState<DisplayState>(initialDisplayState)
-  const [activeIdx, setActiveIndex] = React.useState<number>(0)
-  const previous = React.useCallback((e?: MouseEvent | TouchEvent) => {
-    e?.preventDefault()
-    setActiveIndex((v) => Math.max(0, v - 1))
-  }, [])
-  const next = React.useCallback(
-    (e?: MouseEvent | TouchEvent) => {
-      e?.preventDefault()
+    useState<DisplayState>(initialDisplayState)
+  const [activeIdx, setActiveIndex] = useState<number>(0)
+  const previous = useCallback(
+    () => setActiveIndex((v) => Math.max(0, v - 1)),
+    []
+  )
+  const next = useCallback(
+    () =>
       setActiveIndex((v) =>
         Math.max(0, Math.min(readyErrors.length - 1, v + 1))
-      )
-    },
+      ),
     [readyErrors.length]
   )
 
-  const activeError = React.useMemo<ReadyErrorEvent | null>(
+  const activeError = useMemo<ReadyErrorEvent | null>(
     () => readyErrors[activeIdx] ?? null,
     [activeIdx, readyErrors]
   )
 
   // Reset component state when there are no errors to be displayed.
   // This should never happen, but lets handle it.
-  React.useEffect(() => {
+  useEffect(() => {
     if (errors.length < 1) {
       setLookups({})
       setDisplayState('hidden')
       setActiveIndex(0)
     }
   }, [errors.length])
 
-  const minimize = React.useCallback((e?: MouseEvent | TouchEvent) => {
-    e?.preventDefault()
-    setDisplayState('minimized')
-  }, [])
-  const hide = React.useCallback((e?: MouseEvent | TouchEvent) => {
-    e?.preventDefault()
-    setDisplayState('hidden')
-  }, [])
-  const fullscreen = React.useCallback(
-    (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      e?.preventDefault()
-      setDisplayState('fullscreen')
-    },
-    []
-  )
+  const minimize = useCallback(() => setDisplayState('minimized'), [])
+  const hide = useCallback(() => setDisplayState('hidden'), [])
+  const fullscreen = useCallback(() => setDisplayState('fullscreen'), [])
 
   // This component shouldn't be rendered with no errors, but if it is, let's
   // handle it gracefully by rendering nothing.

packages/next/src/client/components/react-dev-overlay/internal/helpers/stack-frame.ts

@@ -32,7 +32,7 @@ export type OriginalStackFrame =
       sourcePackage?: string
     }
 
-export function getOriginalStackFrame(
+function getOriginalStackFrame(
   source: StackFrame,
   type: 'server' | 'edge-server' | null,
   errorMessage: string

packages/react-dev-overlay/src/internal/helpers/stack-frame.ts

@@ -30,7 +30,7 @@ export type OriginalStackFrame =
       originalCodeFrame: null
     }
 
-export function getOriginalStackFrame(
+function getOriginalStackFrame(
   source: StackFrame,
   type: 'server' | 'edge-server' | null,
   errorMessage: string