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 { useState } from 'react'
 
 import { Dialog, DialogContent, DialogHeader, DialogBody } from '../dialog'
-import { Overlay } from '../overlay/overlay'
+import { Overlay, OverlayBackdrop } from '../overlay'
 import {
   ACTION_DEVTOOLS_PANEL_CLOSE,
   STORAGE_KEY_DEVTOOLS_PANEL_POSITION,
@@ -48,6 +48,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-overlay-backdrop onClick={onClose} />
       <Draggable
         padding={INDICATOR_PADDING}
         onDragStart={() => {}}
@@ -81,6 +83,11 @@ export const DEVTOOLS_PANEL_STYLES = css`
     /* top: 10vh; */
   }
 
+  [data-nextjs-devtools-panel-overlay-backdrop] {
+    /* TODO: Blur on fullscreen mode. */
+    opacity: 0;
+  }
+
   [data-nextjs-devtools-panel-dialog] {
     -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
         }