[devtools] apply react-draggable

Author: devjiwonchoi

packages/next/package.json

@@ -304,6 +304,7 @@
     "punycode": "2.1.1",
     "querystring-es3": "0.2.1",
     "raw-body": "2.4.1",
+    "react-draggable": "4.4.6",
     "react-refresh": "0.12.0",
     "recast": "0.23.11",
     "regenerator-runtime": "0.13.4",

packages/next/src/compiled/react-draggable/LICENSE

@@ -0,0 +1,21 @@
+(MIT License)
+
+Copyright (c) 2014-2016 Matt Zabriskie. All rights reserved.
+ 
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the "Software"), 
+to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+and/or sell copies of the Software, and to permit persons to whom the 
+Software is furnished to do so, subject to the following conditions:
+ 
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+ 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+DEALINGS IN THE SOFTWARE.

packages/next/src/compiled/react-draggable/cjs.js

@@ -0,0 +1 @@
+{"name":"react-draggable","main":"cjs.js","author":"Matt Zabriskie","license":"MIT"}

packages/next/src/compiled/react-draggable/package.json

@@ -1,6 +1,8 @@
 import type { OverlayDispatch, OverlayState } from '../../shared'
 
 import { Suspense, useRef } from 'react'
+import Draggable from 'next/dist/compiled/react-draggable'
+
 import { Dialog, DialogContent, DialogHeader, DialogBody } from '../dialog'
 import { Overlay } from '../overlay/overlay'
 import { useFocusTrap } from '../errors/dev-tools-indicator/utils'
@@ -15,7 +17,7 @@ export function DevToolsPanel({
   state: OverlayState
   dispatch: OverlayDispatch
 }) {
-  const dialogRef = useRef<HTMLDivElement>(null)
+  const dialogRef = useRef<HTMLDivElement>(null as unknown as HTMLDivElement)
 
   // This hook lets us do an exit animation before unmounting the component
   const { mounted, rendered } = useDelayedRender(state.isDevToolsPanelOpen)
@@ -34,19 +36,21 @@ export function DevToolsPanel({
 
   return (
     <Overlay data-nextjs-devtools-panel-overlay>
-      <div data-nextjs-devtools-panel-container ref={dialogRef}>
-        <Dialog
-          data-nextjs-devtools-panel-dialog
-          aria-labelledby="nextjs__container_dev_tools_panel_label"
-          aria-describedby="nextjs__container_dev_tools_panel_desc"
-          onClose={onClose}
-        >
-          <DialogContent>
-            <DialogHeader></DialogHeader>
-            <DialogBody></DialogBody>
-          </DialogContent>
-        </Dialog>
-      </div>
+      <Draggable nodeRef={dialogRef}>
+        <div data-nextjs-devtools-panel-container ref={dialogRef}>
+          <Dialog
+            data-nextjs-devtools-panel-dialog
+            aria-labelledby="nextjs__container_dev_tools_panel_label"
+            aria-describedby="nextjs__container_dev_tools_panel_desc"
+            onClose={onClose}
+          >
+            <DialogContent>
+              <DialogHeader></DialogHeader>
+              <DialogBody></DialogBody>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </Draggable>
     </Overlay>
   )
 }

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

@@ -2390,6 +2390,14 @@ export async function ncc_https_proxy_agent(task, opts) {
     .target('src/compiled/https-proxy-agent')
 }
 
+externals['react-draggable'] = 'next/dist/compiled/react-draggable'
+export async function ncc_react_draggable(task, opts) {
+  await task
+    .source(relative(__dirname, require.resolve('react-draggable')))
+    .ncc({ packageName: 'react-draggable', externals })
+    .target('src/compiled/react-draggable')
+}
+
 export async function precompile(task, opts) {
   await task.parallel(
     ['browser_polyfills', 'copy_ncced', 'copy_styled_jsx_assets'],
@@ -2537,6 +2545,7 @@ export async function ncc(task, opts) {
         'ncc_opentelemetry_api',
         'ncc_http_proxy_agent',
         'ncc_https_proxy_agent',
+        'ncc_react_draggable',
         'ncc_mini_css_extract_plugin',
       ],
       opts

packages/next/taskfile.js

@@ -709,6 +709,11 @@ declare module 'next/dist/compiled/shell-quote' {
   export = m
 }
 
+declare module 'next/dist/compiled/react-draggable' {
+  import * as m from 'react-draggable'
+  export = m
+}
+
 declare module 'next/dist/compiled/@vercel/og/satori-types' {
   export * from 'satori'
 }