refactor: disable fallback collisions temporarily on zone change

This addresses an issue where the collision would jump after a zone change, noted as part of original #598 implementation and made more frequent in #767 after performance improvements.

Author: chrisvxd

packages/core/components/DragDropContext/index.tsx

@@ -26,6 +26,7 @@ import { ComponentDndData } from "../DraggableComponent";
 import { isElement } from "@dnd-kit/dom/utilities";
 
 import { PointerSensor } from "./PointerSensor";
+import { collisionStore } from "../DraggableComponent/collision/dynamic/store";
 
 const DEBUG = false;
 
@@ -95,6 +96,13 @@ const DragDropContextClient = ({
 
       useZoneStore.setState({ zoneDepthIndex, areaDepthIndex });
 
+      // Disable fallback collisions temporarily after zone change, as
+      // these can cause unexpected collisions
+      collisionStore.setState({ fallbackEnabled: false });
+      setTimeout(() => {
+        collisionStore.setState({ fallbackEnabled: true });
+      }, 500);
+
       setTimeout(() => {
         // Force update after debounce
         manager.collisionObserver.forceUpdate(true);

packages/core/components/DraggableComponent/collision/dynamic/index.ts

@@ -12,6 +12,7 @@ import { trackMovementInterval } from "./track-movement-interval";
 import { collisionDebug } from "../collision-debug";
 import { closestCorners } from "@dnd-kit/collision";
 import { DragAxis, Direction } from "../../../../types";
+import { collisionStore } from "./store";
 
 export type CollisionMap = Record<
   string,
@@ -59,6 +60,8 @@ export const createDynamicCollisionDetector = (
 
     const { center: dragCenter } = dragShape;
 
+    const { fallbackEnabled } = collisionStore.getState();
+
     const interval = trackMovementInterval(position.current, dragAxis);
 
     dragOperation.data = {
@@ -128,7 +131,7 @@ export const createDynamicCollisionDetector = (
       return { ...collision, id: shouldFlushId ? "flush" : collision.id };
     }
 
-    if (dragOperation.source?.id !== droppable.id) {
+    if (fallbackEnabled && dragOperation.source?.id !== droppable.id) {
       // Only calculate fallbacks when the draggable sits within the droppable's axis projection
       const xAxisIntersection =
         dropShape.boundingRectangle.right > dragShape.boundingRectangle.left &&

packages/core/components/DraggableComponent/collision/dynamic/store.ts

@@ -0,0 +1,7 @@
+import { createStore } from "zustand/vanilla";
+
+export const collisionStore = createStore<{
+  fallbackEnabled: boolean;
+}>(() => ({
+  fallbackEnabled: false,
+}));