From f7a40fb206ae4314085d667cc092c5416f75413b Mon Sep 17 00:00:00 2001
From: Jethary <jethary@opentrons.com>
Date: Tue, 13 Feb 2024 12:59:35 -0500
Subject: [PATCH] feat(protocol-designer): update React DnD to version 16.0.1

closes RAUT-964
---
 .../DeckSetup/LabwareOverlays/EditLabware.tsx | 24 +++++++++++--------
 .../src/containers/ConnectedStepItem.tsx      |  2 +-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx
index 530032c2306..f6ca329cafa 100644
--- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx
+++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx
@@ -25,6 +25,9 @@ interface Props {
   swapBlocked: boolean
 }
 
+interface DroppedItem {
+  labwareOnDeck: LabwareOnDeck
+}
 export const EditLabware = (props: Props): JSX.Element | null => {
   const {
     labwareOnDeck,
@@ -59,30 +62,30 @@ export const EditLabware = (props: Props): JSX.Element | null => {
 
   const [{ draggedLabware, isOver }, drop] = useDrop(() => ({
     accept: DND_TYPES.LABWARE,
-    canDrop: (monitor: DropTargetMonitor) => {
-      const draggedItem: any = monitor.getItem()
+    canDrop: (item: any) => {
+      const draggedItem = item?.labwareOnDeck
       const draggedLabware = draggedItem?.labwareOnDeck
       const isDifferentSlot =
-        draggedLabware && draggedLabware.slot !== props.labwareOnDeck.slot
-      return isDifferentSlot && !props.swapBlocked
+        draggedLabware && draggedLabware.slot !== labwareOnDeck.slot
+      return isDifferentSlot && !swapBlocked
     },
-    drop: (monitor: DropTargetMonitor) => {
-      const draggedItem: any = monitor.getItem()
+    drop: (item: any) => {
+      const draggedItem = item?.labwareOnDeck
       if (draggedItem) {
         dispatch(
-          moveDeckItem(draggedItem.labwareOnDeck.slot, props.labwareOnDeck.slot)
+          moveDeckItem(draggedItem.labwareOnDeck.slot, labwareOnDeck.slot)
         )
       }
     },
 
     hover: (monitor: DropTargetMonitor) => {
       if (monitor.canDrop()) {
-        props.setHoveredLabware(labwareOnDeck)
+        setHoveredLabware(labwareOnDeck)
       }
     },
     collect: (monitor: DropTargetMonitor) => ({
       isOver: monitor.isOver(),
-      draggedLabware: monitor.getItem() as any,
+      draggedLabware: monitor.getItem() as DroppedItem,
     }),
   }))
 
@@ -94,7 +97,8 @@ export const EditLabware = (props: Props): JSX.Element | null => {
       />
     )
   } else {
-    const isBeingDragged = draggedLabware?.slot === labwareOnDeck.slot
+    const isBeingDragged =
+      draggedLabware?.labwareOnDeck.slot === labwareOnDeck.slot
 
     let contents: React.ReactNode | null = null
 
diff --git a/protocol-designer/src/containers/ConnectedStepItem.tsx b/protocol-designer/src/containers/ConnectedStepItem.tsx
index 15988747480..27ea034b099 100644
--- a/protocol-designer/src/containers/ConnectedStepItem.tsx
+++ b/protocol-designer/src/containers/ConnectedStepItem.tsx
@@ -70,7 +70,7 @@ export const ConnectedStepItem = (
   props: ConnectedStepItemProps
 ): JSX.Element => {
   const { stepId, stepNumber } = props
-  
+
   const step = useSelector(stepFormSelectors.getSavedStepForms)[stepId]
   const argsAndErrors = useSelector(stepFormSelectors.getArgsAndErrorsByStepId)[
     stepId