Pass generic type arguments through to DropTargetMonitor

.yarn/versions/e9a7807a.yml

@@ -0,0 +1,5 @@
+releases:
+  react-dnd: patch
+  react-dnd-documentation: patch
+  react-dnd-examples: patch
+  react-dnd-test-utils: patch

packages/examples/src/04-sortable/simple/Card.tsx

@@ -1,7 +1,7 @@
 import { FC, useRef } from 'react'
-import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd'
+import { useDrag, useDrop } from 'react-dnd'
 import { ItemTypes } from './ItemTypes'
-import { XYCoord } from 'dnd-core'
+import { XYCoord, Identifier } from 'dnd-core'
 
 const style = {
 	border: '1px dashed gray',
@@ -26,14 +26,18 @@ interface DragItem {
 
 export const Card: FC<CardProps> = ({ id, text, index, moveCard }) => {
 	const ref = useRef<HTMLDivElement>(null)
-	const [{ handlerId }, drop] = useDrop({
+	const [{ handlerId }, drop] = useDrop<
+		DragItem,
+		void,
+		{ handlerId: Identifier | null }
+	>({
 		accept: ItemTypes.CARD,
 		collect(monitor) {
 			return {
 				handlerId: monitor.getHandlerId(),
 			}
 		},
-		hover(item: DragItem, monitor: DropTargetMonitor) {
+		hover(item: DragItem, monitor) {
 			if (!ref.current) {
 				return
 			}

packages/react-dnd/src/hooks/types.ts

@@ -113,7 +113,7 @@ export interface DropTargetHookSpec<DragObject, DropResult, CollectedProps> {
 	 */
 	drop?: (
 		item: DragObject,
-		monitor: DropTargetMonitor,
+		monitor: DropTargetMonitor<DragObject, DropResult>,
 	) => DropResult | undefined
 
 	/**
@@ -122,17 +122,25 @@ export interface DropTargetHookSpec<DragObject, DropResult, CollectedProps> {
 	 * the hover happens over just the current target, or over a nested one. Unlike drop(), this method will be called even
 	 * if canDrop() is defined and returns false. You can check monitor.canDrop() to test whether this is the case.
 	 */
-	hover?: (item: DragObject, monitor: DropTargetMonitor) => void
+	hover?: (
+		item: DragObject,
+		monitor: DropTargetMonitor<DragObject, DropResult>,
+	) => void
 
 	/**
 	 * Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just
 	 * omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or
 	 * monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.
 	 */
-	canDrop?: (item: DragObject, monitor: DropTargetMonitor) => boolean
+	canDrop?: (
+		item: DragObject,
+		monitor: DropTargetMonitor<DragObject, DropResult>,
+	) => boolean
 
 	/**
 	 * A function to collect rendering properties
 	 */
-	collect?: (monitor: DropTargetMonitor) => CollectedProps
+	collect?: (
+		monitor: DropTargetMonitor<DragObject, DropResult>,
+	) => CollectedProps
 }

packages/react-dnd/src/hooks/useDrag/useDrag.ts

@@ -13,7 +13,11 @@ import { invariant } from '@react-dnd/invariant'
  * @param sourceSpec The drag source specification (object or function, function preferred)
  * @param deps The memoization deps array to use when evaluating spec changes
  */
-export function useDrag<DragObject, DropResult, CollectedProps>(
+export function useDrag<
+	DragObject = unknown,
+	DropResult = unknown,
+	CollectedProps = unknown,
+>(
 	specArg: FactoryOrInstance<
 		DragSourceHookSpec<DragObject, DropResult, CollectedProps>
 	>,

packages/react-dnd/src/hooks/useDrop/useDrop.ts

@@ -12,7 +12,11 @@ import { useConnectDropTarget } from './connectors'
  * @param spec The drop target specification (object or function, function preferred)
  * @param deps The memoization deps array to use when evaluating spec changes
  */
-export function useDrop<DragObject, DropResult, CollectedProps>(
+export function useDrop<
+	DragObject = unknown,
+	DropResult = unknown,
+	CollectedProps = unknown,
+>(
 	specArg: FactoryOrInstance<
 		DropTargetHookSpec<DragObject, DropResult, CollectedProps>
 	>,