properly close when click outside

Author: devjiwonchoi

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

@@ -3,7 +3,7 @@ import type { OverlayDispatch, OverlayState, Corners } from '../../shared'
 import { Suspense, useRef, useState } from 'react'
 
 import { Dialog, DialogContent, DialogHeader, DialogBody } from '../dialog'
-import { Overlay } from '../overlay/overlay'
+import { Overlay, OverlayBackdrop } from '../overlay'
 import { useFocusTrap } from '../errors/dev-tools-indicator/utils'
 import { useDelayedRender } from '../../hooks/use-delayed-render'
 import {
@@ -61,6 +61,8 @@ export function DevToolsPanel({
         [horizontal === 'left' ? 'right' : 'left']: 'auto',
       }}
     >
+      {/* TODO: Investigate why onClose on Dialog doesn't close when clicked outside. */}
+      <OverlayBackdrop data-nextjs-devtools-panel-backdrop onClick={onClose} />
       <Draggable
         padding={INDICATOR_PADDING}
         onDragStart={() => {}}
@@ -96,6 +98,11 @@ export const DEVTOOLS_PANEL_STYLES = css`
     /* top: 10vh; */
   }
 
+  [data-nextjs-devtools-panel-backdrop] {
+    /* TODO: Blur on fullscreen mode. */
+    opacity: 0;
+  }
+
   [data-nextjs-devtools-panel-container] {
     -webkit-font-smoothing: antialiased;
     display: flex;

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

@@ -7,6 +7,7 @@ import imgApp from './app.png'
 import { useReducer } from 'react'
 import { DevOverlay } from './dev-overlay'
 import {
+  ACTION_DEVTOOLS_PANEL_CLOSE,
   ACTION_DEVTOOLS_PANEL_TOGGLE,
   ACTION_ERROR_OVERLAY_CLOSE,
   ACTION_ERROR_OVERLAY_OPEN,
@@ -114,6 +115,9 @@ function useOverlayReducer() {
         case ACTION_DEVTOOLS_PANEL_TOGGLE: {
           return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
         }
+        case ACTION_DEVTOOLS_PANEL_CLOSE: {
+          return { ...state, isDevToolsPanelOpen: false }
+        }
         default: {
           return state
         }