fix: auto scroll when drag to outside

src/atoms/index.ts

@@ -34,5 +34,6 @@ export const currentSourcesAtom = atom((get) => {
 
 export const goToTopAtom = atom({
   ok: false,
+  el: undefined as HTMLElement | undefined,
   fn: undefined as (() => void) | undefined,
 })

src/components/column/dnd.tsx

@@ -94,8 +94,12 @@ function DndWrapper({ items, setItems, children }: PropsWithChildren<{
     trailing: true,
     wait: AnimationDuration,
   })
+  const { el } = useAtomValue(goToTopAtom)
+  useEffect(() => {
+    console.log(el)
+  }, [el])
   return (
-    <DndContext onDropTargetChange={run}>
+    <DndContext onDropTargetChange={run} autoscroll={el ? { element: el } : undefined}>
       {children}
     </DndContext>
   )

src/components/common/dnd/index.tsx

@@ -1,12 +1,15 @@
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element"
 import type { PropsWithChildren } from "react"
 import type { AllEvents, ElementDragType } from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types"
+import type { ElementAutoScrollArgs } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/dist/types/internal-types"
 import { InstanceIdContext } from "./useSortable"
 
 interface ContextProps extends Partial<AllEvents<ElementDragType>> {
+  autoscroll?: ElementAutoScrollArgs<ElementDragType>
 }
-export function DndContext({ children, ...callback }: PropsWithChildren<ContextProps>) {
+export function DndContext({ children, autoscroll, ...callback }: PropsWithChildren<ContextProps>) {
   const [instanceId] = useState<string>(randomUUID())
   useEffect(() => {
     return (
@@ -17,9 +20,10 @@ export function DndContext({ children, ...callback }: PropsWithChildren<ContextP
           },
           ...callback,
         }),
+        autoscroll ? autoScrollForElements(autoscroll) : () => { },
       )
     )
-  }, [callback, instanceId])
+  }, [callback, instanceId, autoscroll])
   return (
     <InstanceIdContext.Provider value={instanceId}>
       {children}

src/components/common/overlay-scrollbar/index.tsx

@@ -71,6 +71,7 @@ export function GlobalOverlayScrollbar({ children, className, ...props }: PropsW
           const el = e.target as HTMLElement
           setGoToTop({
             ok: el.scrollTop > 100,
+            el,
             fn: () => el.scrollTo({ top: 0, behavior: "smooth" }),
           })
         },