From 60de6f13e8fdd72812f90d2837bade0ad26f798e Mon Sep 17 00:00:00 2001
From: Philipp Keck <git@philippkeck.de>
Date: Fri, 4 Feb 2022 00:02:04 +0100
Subject: [PATCH] Pass generic type arguments through to DropTargetMonitor
 (#3300)

* Pass generic type arguments through to DropTargetMonitor

Otherwise it's `unknown`.

* feat: add default generic types to useDrag, useDrop

* chore: cut semver

Co-authored-by: Chris Trevino <darthtrevino@users.noreply.github.com>
Co-authored-by: Chris Trevino <chtrevin@microsoft.com>
---
 .yarn/versions/e9a7807a.yml                      |  5 +++++
 .../examples/src/04-sortable/simple/Card.tsx     | 12 ++++++++----
 packages/react-dnd/src/hooks/types.ts            | 16 ++++++++++++----
 packages/react-dnd/src/hooks/useDrag/useDrag.ts  |  6 +++++-
 packages/react-dnd/src/hooks/useDrop/useDrop.ts  |  6 +++++-
 5 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 .yarn/versions/e9a7807a.yml

diff --git a/.yarn/versions/e9a7807a.yml b/.yarn/versions/e9a7807a.yml
new file mode 100644
index 0000000000..82260afc6a
--- /dev/null
+++ b/.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
diff --git a/packages/examples/src/04-sortable/simple/Card.tsx b/packages/examples/src/04-sortable/simple/Card.tsx
index 93e5bc9f00..e764d309fd 100644
--- a/packages/examples/src/04-sortable/simple/Card.tsx
+++ b/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
 			}
diff --git a/packages/react-dnd/src/hooks/types.ts b/packages/react-dnd/src/hooks/types.ts
index 214a4e605e..5240c7d936 100644
--- a/packages/react-dnd/src/hooks/types.ts
+++ b/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
 }
diff --git a/packages/react-dnd/src/hooks/useDrag/useDrag.ts b/packages/react-dnd/src/hooks/useDrag/useDrag.ts
index b06295d308..cfc2d6a056 100644
--- a/packages/react-dnd/src/hooks/useDrag/useDrag.ts
+++ b/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>
 	>,
diff --git a/packages/react-dnd/src/hooks/useDrop/useDrop.ts b/packages/react-dnd/src/hooks/useDrop/useDrop.ts
index eaf2a7f9f9..4854e6e5cd 100644
--- a/packages/react-dnd/src/hooks/useDrop/useDrop.ts
+++ b/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>
 	>,