From ddf5f921632c2dc72b83e3b4c849201f1c86c51c Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Tue, 7 Nov 2023 19:15:37 +0000
Subject: [PATCH] refactor: remove DroppableStrictMode as no longer needed

---
 .../core/components/ComponentList/index.tsx   |  7 +++--
 packages/core/components/DropZone/index.tsx   |  6 ++---
 .../components/DroppableStrictMode/index.tsx  | 26 -------------------
 .../InputOrGroup/fields/ArrayField/index.tsx  |  6 ++---
 4 files changed, 9 insertions(+), 36 deletions(-)
 delete mode 100644 packages/core/components/DroppableStrictMode/index.tsx

diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
index 683a10188b..7c3d06afed 100644
--- a/packages/core/components/ComponentList/index.tsx
+++ b/packages/core/components/ComponentList/index.tsx
@@ -1,5 +1,4 @@
-import DroppableStrictMode from "../DroppableStrictMode";
-
+import { Droppable } from "@hello-pangea/dnd";
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Draggable } from "../Draggable";
@@ -85,7 +84,7 @@ const ComponentList = ({
         </div>
       )}
       <div className={getClassName("content")}>
-        <DroppableStrictMode
+        <Droppable
           droppableId={`component-list${title ? `:${title}` : ""}`}
           isDropDisabled
         >
@@ -112,7 +111,7 @@ const ComponentList = ({
               <span style={{ display: "none" }}>{provided.placeholder}</span>
             </div>
           )}
-        </DroppableStrictMode>
+        </Droppable>
       </div>
     </div>
   );
diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
index 365d1044c2..fe6277a8c6 100644
--- a/packages/core/components/DropZone/index.tsx
+++ b/packages/core/components/DropZone/index.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties, useContext, useEffect, useState } from "react";
 import { DraggableComponent } from "../DraggableComponent";
-import DroppableStrictMode from "../DroppableStrictMode";
+import { Droppable } from "@hello-pangea/dnd";
 import { getItem } from "../../lib/get-item";
 import { setupZone } from "../../lib/setup-zone";
 import { rootDroppableId } from "../../lib/root-droppable-id";
@@ -150,7 +150,7 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
         hasChildren: content.length > 0,
       })}
     >
-      <DroppableStrictMode
+      <Droppable
         droppableId={zoneCompound}
         direction={"vertical"}
         isDropDisabled={!isEnabled}
@@ -331,7 +331,7 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
             </div>
           );
         }}
-      </DroppableStrictMode>
+      </Droppable>
     </div>
   );
 }
diff --git a/packages/core/components/DroppableStrictMode/index.tsx b/packages/core/components/DroppableStrictMode/index.tsx
deleted file mode 100644
index 1fd2d5da9f..0000000000
--- a/packages/core/components/DroppableStrictMode/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// @hello-pangea/dnd doesn't play well with React 18 strict mode
-//
-// See https://github.com/atlassian/@hello-pangea/dnd/issues/2399#issuecomment-1175638194
-import { useEffect, useState } from "react";
-import { Droppable, DroppableProps } from "@hello-pangea/dnd";
-
-const DroppableStrictMode = ({ children, ...props }: DroppableProps) => {
-  const [enabled, setEnabled] = useState(false);
-
-  useEffect(() => {
-    const animation = requestAnimationFrame(() => setEnabled(true));
-
-    return () => {
-      cancelAnimationFrame(animation);
-      setEnabled(false);
-    };
-  }, []);
-
-  if (!enabled) {
-    return null;
-  }
-
-  return <Droppable {...props}>{children}</Droppable>;
-};
-
-export default DroppableStrictMode;
diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
index cff7d5d9c2..4110a49092 100644
--- a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -4,7 +4,7 @@ import { List, Plus, Trash } from "react-feather";
 import { FieldLabelInternal, InputOrGroup, type InputProps } from "../..";
 import { IconButton } from "../../../IconButton";
 import { reorder, replace } from "../../../../lib";
-import DroppableStrictMode from "../../../DroppableStrictMode";
+import { Droppable } from "@hello-pangea/dnd";
 import { DragDropContext } from "@hello-pangea/dnd";
 import { Draggable } from "../../../Draggable";
 import { generateId } from "../../../../lib/generate-id";
@@ -88,7 +88,7 @@ export const ArrayField = ({
           }
         }}
       >
-        <DroppableStrictMode droppableId="array" isDropDisabled={readOnly}>
+        <Droppable droppableId="array" isDropDisabled={readOnly}>
           {(provided, snapshot) => {
             return (
               <div
@@ -228,7 +228,7 @@ export const ArrayField = ({
               </div>
             );
           }}
-        </DroppableStrictMode>
+        </Droppable>
       </DragDropContext>
     </FieldLabelInternal>
   );