[devtools] port overlay baackdrop out of overlay

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.tsx

@@ -37,6 +37,7 @@ import { EnvironmentNameLabel } from '../environment-name-label/environment-name
 import { useFocusTrap } from '../dev-tools-indicator/utils'
 import { Fader } from '../../fader'
 import { Resizer } from '../../resizer'
+import { OverlayBackdrop } from '../../overlay'
 
 export interface ErrorOverlayLayoutProps extends ErrorBaseProps {
   errorMessage: ErrorMessageType
@@ -109,7 +110,8 @@ export function ErrorOverlayLayout({
   }
 
   return (
-    <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>
+    <ErrorOverlayOverlay {...animationProps}>
+      <OverlayBackdrop fixed={isBuildError} />
       <div
         data-nextjs-dialog-root
         onTransitionEnd={onTransitionEnd}

packages/next/src/next-devtools/dev-overlay/components/overlay/index.tsx

@@ -1 +1,2 @@
 export { Overlay } from './overlay'
+export { OverlayBackdrop } from './overlay-backdrop'

packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx

@@ -0,0 +1,14 @@
+export type OverlayBackDropProps = {
+  className?: string
+  fixed?: boolean
+}
+
+export function OverlayBackdrop({ fixed, ...props }: OverlayBackDropProps) {
+  return (
+    <div
+      data-nextjs-dialog-backdrop
+      data-nextjs-dialog-backdrop-fixed={fixed ? true : undefined}
+      {...props}
+    />
+  )
+}

packages/next/src/next-devtools/dev-overlay/components/overlay/overlay.tsx

@@ -10,7 +10,6 @@ export type OverlayProps = {
 const Overlay: React.FC<OverlayProps> = function Overlay({
   className,
   children,
-  fixed,
   ...props
 }) {
   React.useEffect(() => {
@@ -22,10 +21,6 @@ const Overlay: React.FC<OverlayProps> = function Overlay({
 
   return (
     <div data-nextjs-dialog-overlay className={className} {...props}>
-      <div
-        data-nextjs-dialog-backdrop
-        data-nextjs-dialog-backdrop-fixed={fixed ? true : undefined}
-      />
       {children}
     </div>
   )

packages/next/src/next-devtools/dev-overlay/container/errors.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo, useRef, Suspense } from 'react'
 import type { DebugInfo } from '../../shared/types'
-import { Overlay } from '../components/overlay'
+import { Overlay, OverlayBackdrop } from '../components/overlay'
 import { RuntimeError } from './runtime-error'
 import { getErrorSource } from '../../../shared/lib/error-source'
 import { HotlinkedText } from '../components/hot-linked-text'
@@ -139,7 +139,11 @@ export function Errors({
 
   if (isLoading) {
     // TODO: better loading state
-    return <Overlay />
+    return (
+      <Overlay>
+        <OverlayBackdrop />
+      </Overlay>
+    )
   }
 
   if (!activeError) {