feat: add support for React v19 (#341)

__mocks__/react-dnd-preview.ts

@@ -1,6 +1,8 @@
 import {MockDragMonitor} from '@mocks/mocks'
 import type {PreviewProps, PreviewState, usePreviewState} from 'react-dnd-preview'
 
+import type {JSX} from 'react'
+
 const preview = jest.createMockFromModule<Record<string, unknown>>('react-dnd-preview')
 
 const state: PreviewState = {

biome.json

@@ -24,6 +24,6 @@
     }
   },
   "files": {
-    "ignore": ["examples", "coverage", "packages/*/dist"]
+    "ignore": ["examples/*.js", "coverage", "packages/*/dist"]
   }
 }

package.json

@@ -39,20 +39,21 @@
     "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.14",
     "@types/jsdom": "^21.1.7",
-    "@types/react-dom": "^18.3.5",
+    "@types/react-dom": "^19.0.2",
+    "@types/react": "^19.0.2",
     "esbuild": "^0.24",
     "esbuild-jest": "^0.5.0",
-    "esbuild-node-externals": "^1.15.0",
+    "esbuild-node-externals": "^1.16.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "node-notifier": "^10.0.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-test-backend": "^16.0.1",
     "react-dnd-test-utils": "^16.0.1",
     "react-dnd-touch-backend": "^16.0.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "typescript": "^5.7.2"
   },
   "workspaces": ["./packages/*"]

packages/dnd-multi-backend/examples/Backends.ts

@@ -1,7 +1,7 @@
-import {DragDropManager, DragDropActions, BackendFactory, Backend, Unsubscribe, Identifier} from 'dnd-core'
+import type {Backend, BackendFactory, DragDropActions, DragDropManager, Identifier, Unsubscribe} from 'dnd-core'
 
 type Options = {
-  draggable?: boolean,
+  draggable?: boolean
 }
 
 class DnDBackend implements Backend {
@@ -37,6 +37,7 @@ class DnDBackend implements Backend {
     }
   }
 
+  // biome-ignore lint/suspicious/noExplicitAny: interface is like that
   connectDragSource(sourceId: Identifier, nodeRaw?: any, _options?: any): Unsubscribe {
     const node = nodeRaw as Element
 
@@ -49,7 +50,7 @@ class DnDBackend implements Backend {
       console.log(`${this.#label}: drag`)
       this.#actions.beginDrag([sourceId], {
         clientOffset: this.#getXY(node),
-        getSourceClientOffset: (_id: unknown): {x: number, y: number} => {
+        getSourceClientOffset: (_id: unknown): {x: number; y: number} => {
           return this.#getXY(node)
         },
       })
@@ -74,13 +75,15 @@ class DnDBackend implements Backend {
     }
   }
 
+  // biome-ignore lint/suspicious/noExplicitAny: interface is like that
   connectDragPreview(_sourceId: any, _node?: any, _options?: any): Unsubscribe {
-    return () => { }
+    return () => {}
   }
 
+  // biome-ignore lint/suspicious/noExplicitAny: interface is like that
   connectDropTarget(targetId: Identifier, node?: Element, _options?: any): Unsubscribe {
     if (node === undefined) {
-      return () => { }
+      return () => {}
     }
 
     const hover = (e: Event) => {
@@ -120,7 +123,7 @@ class DnDBackend implements Backend {
     this.#actions.endDrag()
   }
 
-  #getXY = (node: Element): {x: number, y: number} => {
+  #getXY = (node: Element): {x: number; y: number} => {
     const {top: x, left: y} = node.getBoundingClientRect()
     return {x, y}
   }

packages/dnd-multi-backend/examples/DnD.ts

@@ -1,8 +1,8 @@
-import {DragSource as IDragSource, DropTarget as IDropTarget, DragDropMonitor, Identifier} from 'dnd-core'
+import type {DragDropMonitor, DragSource as IDragSource, DropTarget as IDropTarget, Identifier} from 'dnd-core'
 
 type createElementProps = {
-  text: string,
-  color: string,
+  text: string
+  color: string
 }
 
 const createElement = ({text, color}: createElementProps): Element => {
@@ -28,7 +28,8 @@ export class DragSource implements IDragSource {
 
   beginDrag(_monitor: DragDropMonitor, _targetId: Identifier): void {
     // FIXME: the interface is actually wrong
-    return {color: this.#color} as unknown as void
+    // biome-ignore lint/correctness/noVoidTypeReturn: interface is wrong
+    return {color: this.#color} as unknown as undefined
   }
 
   endDrag(_monitor: DragDropMonitor, _targetId: Identifier): void {}
@@ -42,11 +43,11 @@ export class DragSource implements IDragSource {
   }
 }
 
-export class DropTarget implements IDropTarget {
+export class DropTarget<T> implements IDropTarget {
   #node: Element
-  #onDrop?: (r: any) => void
+  #onDrop?: (r: T) => void
 
-  constructor({text, color, onDrop}: createElementProps & {onDrop?: (r: any) => void}) {
+  constructor({text, color, onDrop}: createElementProps & {onDrop?: (r: T) => void}) {
     this.#node = createElement({text, color})
     this.#onDrop = onDrop
   }
@@ -61,7 +62,7 @@ export class DropTarget implements IDropTarget {
 
   hover(_monitor: DragDropMonitor, _targetId: Identifier): void {}
 
-  drop(monitor: DragDropMonitor, _targetId: Identifier): any {
+  drop(monitor: DragDropMonitor, _targetId: Identifier): void {
     this.#onDrop?.(monitor.getItem())
   }
 }