@dnd-kit/react 0.0.1 → 0.0.2-beta-20240604015414

package/index.cjs

@@ -129,34 +129,41 @@ var DragDropProvider = react.forwardRef(
     const handleDragEnd = hooks.useLatest(onDragEnd);
     const handleCollision = hooks.useEvent(onCollision);
     react.useEffect(() => {
-      manager.monitor.addEventListener("beforedragstart", (event, manager2) => {
-        const callback = handleBeforeDragStart.current;
-        if (callback) {
-          trackRendering(() => callback(event, manager2));
-        }
-      });
-      manager.monitor.addEventListener("dragstart", handleDragStart);
-      manager.monitor.addEventListener("dragover", (event, manager2) => {
-        const callback = handleDragOver.current;
-        if (callback) {
-          trackRendering(() => callback(event, manager2));
-        }
-      });
-      manager.monitor.addEventListener("dragmove", (event, manager2) => {
-        const callback = handleDragMove.current;
-        if (callback) {
-          trackRendering(() => callback(event, manager2));
-        }
-      });
-      manager.monitor.addEventListener("dragend", (event, manager2) => {
-        const callback = handleDragEnd.current;
-        if (callback) {
-          trackRendering(() => callback(event, manager2));
-        }
-      });
-      manager.monitor.addEventListener("collision", handleCollision);
+      const listeners = [
+        manager.monitor.addEventListener(
+          "beforedragstart",
+          (event, manager2) => {
+            const callback = handleBeforeDragStart.current;
+            if (callback) {
+              trackRendering(() => callback(event, manager2));
+            }
+          }
+        ),
+        manager.monitor.addEventListener("dragstart", handleDragStart),
+        manager.monitor.addEventListener("dragover", (event, manager2) => {
+          const callback = handleDragOver.current;
+          if (callback) {
+            trackRendering(() => callback(event, manager2));
+          }
+        }),
+        manager.monitor.addEventListener("dragmove", (event, manager2) => {
+          const callback = handleDragMove.current;
+          if (callback) {
+            trackRendering(() => callback(event, manager2));
+          }
+        }),
+        manager.monitor.addEventListener("dragend", (event, manager2) => {
+          const callback = handleDragEnd.current;
+          if (callback) {
+            trackRendering(() => callback(event, manager2));
+          }
+        }),
+        manager.monitor.addEventListener("collision", handleCollision)
+      ];
       return () => {
-        manager.destroy();
+        for (const unsubscribe of listeners) {
+          unsubscribe();
+        }
       };
     }, [manager]);
     hooks.useOnValueChange(
@@ -188,8 +195,11 @@ function useDraggable(input) {
     () => draggable.feedback = input.feedback ?? "default"
   );
   react.useEffect(() => {
-    return draggable.destroy;
-  }, [draggable]);
+    manager.registry.register(draggable);
+    return () => {
+      manager.registry.unregister(draggable);
+    };
+  }, [manager, draggable]);
   return {
     get isDragSource() {
       return isDragSource.value;
@@ -225,8 +235,11 @@ function useDroppable(input) {
   hooks.useOnValueChange(element, () => droppable.element = element);
   hooks.useOnValueChange(type, () => droppable.id = id);
   react.useEffect(() => {
-    return droppable.destroy;
-  }, [droppable]);
+    manager.registry.register(droppable);
+    return () => {
+      manager.registry.unregister(droppable);
+    };
+  }, [manager, droppable]);
   return {
     get isDisabled() {
       return isDisabled.value;

package/index.js

@@ -127,34 +127,41 @@ var DragDropProvider = forwardRef(
     const handleDragEnd = useLatest(onDragEnd);
     const handleCollision = useEvent(onCollision);
     useEffect(() => {
-      manager.monitor.addEventListener("beforedragstart", (event, manager2) => {
-        const callback = handleBeforeDragStart.current;
-        if (callback) {
-          trackRendering(() => callback(event, manager2));
-        }
-      });
-      manager.monitor.addEventListener("dragstart", handleDragStart);
-      manager.monitor.addEventListener("dragover", (event, manager2) => {
-        const callback = handleDragOver.current;
-        if (callback) {
-          trackRendering(() => callback(event, manager2));
-        }
-      });
-      manager.monitor.addEventListener("dragmove", (event, manager2) => {
-        const callback = handleDragMove.current;
-        if (callback) {
-          trackRendering(() => callback(event, manager2));
-        }
-      });
-      manager.monitor.addEventListener("dragend", (event, manager2) => {
-        const callback = handleDragEnd.current;
-        if (callback) {
-          trackRendering(() => callback(event, manager2));
-        }
-      });
-      manager.monitor.addEventListener("collision", handleCollision);
+      const listeners = [
+        manager.monitor.addEventListener(
+          "beforedragstart",
+          (event, manager2) => {
+            const callback = handleBeforeDragStart.current;
+            if (callback) {
+              trackRendering(() => callback(event, manager2));
+            }
+          }
+        ),
+        manager.monitor.addEventListener("dragstart", handleDragStart),
+        manager.monitor.addEventListener("dragover", (event, manager2) => {
+          const callback = handleDragOver.current;
+          if (callback) {
+            trackRendering(() => callback(event, manager2));
+          }
+        }),
+        manager.monitor.addEventListener("dragmove", (event, manager2) => {
+          const callback = handleDragMove.current;
+          if (callback) {
+            trackRendering(() => callback(event, manager2));
+          }
+        }),
+        manager.monitor.addEventListener("dragend", (event, manager2) => {
+          const callback = handleDragEnd.current;
+          if (callback) {
+            trackRendering(() => callback(event, manager2));
+          }
+        }),
+        manager.monitor.addEventListener("collision", handleCollision)
+      ];
       return () => {
-        manager.destroy();
+        for (const unsubscribe of listeners) {
+          unsubscribe();
+        }
       };
     }, [manager]);
     useOnValueChange(
@@ -186,8 +193,11 @@ function useDraggable(input) {
     () => draggable.feedback = input.feedback ?? "default"
   );
   useEffect(() => {
-    return draggable.destroy;
-  }, [draggable]);
+    manager.registry.register(draggable);
+    return () => {
+      manager.registry.unregister(draggable);
+    };
+  }, [manager, draggable]);
   return {
     get isDragSource() {
       return isDragSource.value;
@@ -223,8 +233,11 @@ function useDroppable(input) {
   useOnValueChange(element, () => droppable.element = element);
   useOnValueChange(type, () => droppable.id = id);
   useEffect(() => {
-    return droppable.destroy;
-  }, [droppable]);
+    manager.registry.register(droppable);
+    return () => {
+      manager.registry.unregister(droppable);
+    };
+  }, [manager, droppable]);
   return {
     get isDisabled() {
       return isDisabled.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.1",
+  "version": "0.0.2-beta-20240604015414",
   "main": "./index.cjs",
   "module": "./index.js",
   "type": "module",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@dnd-kit/abstract": "*",
-    "@dnd-kit/dom": "*",
+    "@dnd-kit/dom": "0.0.2-beta-20240604015414",
     "@dnd-kit/state": "*",
     "tslib": "^2.6.2"
   },

package/sortable.cjs

@@ -17,11 +17,11 @@ function useSortable(input) {
     data,
     index,
     disabled,
+    feedback,
     sensors,
     transition = sortable.defaultSortableTransition,
     type
   } = input;
-  const feedback = typeof input.feedback === "function" ? "none" : input.feedback;
   const manager = react.useDragDropManager();
   const handle = utilities.getCurrentValue(input.handle);
   const element = utilities.getCurrentValue(input.element);
@@ -71,14 +71,8 @@ function useSortable(input) {
     collisionPriority,
     () => sortable$1.collisionPriority = collisionPriority
   );
-  hooks.useOnValueChange(
-    input.feedback,
-    () => sortable$1.feedback = feedback ?? "default"
-  );
+  hooks.useOnValueChange(feedback, () => sortable$1.feedback = feedback ?? "default");
   hooks.useOnValueChange(transition, () => sortable$1.transition = transition);
-  react$1.useEffect(() => {
-    return sortable$1.destroy;
-  }, [sortable$1]);
   return {
     get isDisabled() {
       return isDisabled.value;

package/sortable.d.ts

@@ -1,12 +1,10 @@
 import { Data } from '@dnd-kit/abstract';
 import { SortableInput } from '@dnd-kit/dom/sortable';
 import { RefOrValue } from '@dnd-kit/react/utilities';
-import { FeedbackType } from '@dnd-kit/dom';
 
-interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>, 'handle' | 'element' | 'feedback'> {
+interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>, 'handle' | 'element'> {
     handle?: RefOrValue<Element>;
     element?: RefOrValue<Element>;
-    feedback?: FeedbackType | (() => React.ReactNode);
 }
 declare function useSortable<T extends Data = Data>(input: UseSortableInput<T>): {
     readonly isDisabled: boolean;

package/sortable.js

@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from 'react';
+import { useCallback } from 'react';
 import { deepEqual } from '@dnd-kit/state';
 import { Sortable, defaultSortableTransition } from '@dnd-kit/dom/sortable';
 import { useDragDropManager } from '@dnd-kit/react';
@@ -15,11 +15,11 @@ function useSortable(input) {
     data,
     index,
     disabled,
+    feedback,
     sensors,
     transition = defaultSortableTransition,
     type
   } = input;
-  const feedback = typeof input.feedback === "function" ? "none" : input.feedback;
   const manager = useDragDropManager();
   const handle = getCurrentValue(input.handle);
   const element = getCurrentValue(input.element);
@@ -69,14 +69,8 @@ function useSortable(input) {
     collisionPriority,
     () => sortable.collisionPriority = collisionPriority
   );
-  useOnValueChange(
-    input.feedback,
-    () => sortable.feedback = feedback ?? "default"
-  );
+  useOnValueChange(feedback, () => sortable.feedback = feedback ?? "default");
   useOnValueChange(transition, () => sortable.transition = transition);
-  useEffect(() => {
-    return sortable.destroy;
-  }, [sortable]);
   return {
     get isDisabled() {
       return isDisabled.value;