@dnd-kit/react 0.0.10-beta-20250216045856 → 0.0.10-beta-20250216195101

package/index.cjs

@@ -352,6 +352,34 @@ function useDroppable(input) {
     )
   };
 }
+function useDragDropMonitor(handlers) {
+  const manager = useDragDropManager();
+  react.useEffect(() => {
+    if (!manager) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          "useDndMonitor hook was called outside of a DragDropProvider. Make sure your app is wrapped in a DragDropProvider component."
+        );
+      }
+      return;
+    }
+    const cleanupFns = Object.entries(handlers).reduce(
+      (acc, [handlerName, handler]) => {
+        if (handler) {
+          const eventName = handlerName.replace(/^on/, "").toLowerCase();
+          const unsubscribe = manager.monitor.addEventListener(
+            eventName,
+            handler
+          );
+          acc.push(unsubscribe);
+        }
+        return acc;
+      },
+      []
+    );
+    return () => cleanupFns.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
+  }, [manager, handlers]);
+}
 function useDragOperation() {
   const manager = useDragDropManager();
   const source = hooks.useComputed(() => manager == null ? void 0 : manager.dragOperation.source, [manager]);
@@ -369,6 +397,7 @@ function useDragOperation() {
 exports.DragDropProvider = DragDropProvider;
 exports.DragOverlay = DragOverlay;
 exports.useDragDropManager = useDragDropManager;
+exports.useDragDropMonitor = useDragDropMonitor;
 exports.useDragOperation = useDragOperation;
 exports.useDraggable = useDraggable;
 exports.useDroppable = useDroppable;

package/index.d.ts

@@ -7,15 +7,15 @@ import { DragDropManagerInput, DragDropManager, Draggable, Droppable, DraggableI
 import { RefOrValue } from '@dnd-kit/react/utilities';
 import { CleanupFunction } from '@dnd-kit/state';
 
-type Events = DragDropEvents<Draggable, Droppable, DragDropManager>;
+type Events$1 = DragDropEvents<Draggable, Droppable, DragDropManager>;
 interface Props$1 extends DragDropManagerInput, PropsWithChildren {
     manager?: DragDropManager;
-    onBeforeDragStart?: Events['beforedragstart'];
-    onCollision?: Events['collision'];
-    onDragStart?: Events['dragstart'];
-    onDragMove?: Events['dragmove'];
-    onDragOver?: Events['dragover'];
-    onDragEnd?: Events['dragend'];
+    onBeforeDragStart?: Events$1['beforedragstart'];
+    onCollision?: Events$1['collision'];
+    onDragStart?: Events$1['dragstart'];
+    onDragMove?: Events$1['dragmove'];
+    onDragOver?: Events$1['dragover'];
+    onDragEnd?: Events$1['dragend'];
 }
 declare function DragDropProvider({ children, onCollision, onBeforeDragStart, onDragStart, onDragMove, onDragOver, onDragEnd, ...input }: Props$1): react_jsx_runtime.JSX.Element;
 
@@ -51,6 +51,23 @@ declare function useDroppable<T extends Data = Data>(input: UseDroppableInput<T>
 
 declare function useDragDropManager(): _dnd_kit_dom.DragDropManager<_dnd_kit_dom.Draggable<_dnd_kit_abstract.Data>, _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data>> | null;
 
+/**
+ * Type helper to convert event names to handler names (e.g. 'dragstart' -> 'onDragStart')
+ */
+type EventHandlerName<T extends string> = `on${Capitalize<T>}`;
+/**
+ * Type for all possible event handlers
+ */
+type Events<T extends Data> = DragDropEvents<Draggable<T>, Droppable<T>, DragDropManager<Draggable<T>, Droppable<T>>>;
+type DndMonitorEventHandlers<T extends Data> = {
+    [K in keyof Events<T> as EventHandlerName<K>]?: Events<T>[K];
+};
+/**
+ * Hook to monitor drag and drop events within a DragDropProvider
+ * @param handlers Object containing event handlers for drag and drop events
+ */
+declare function useDragDropMonitor<T extends Data = Data>(handlers: DndMonitorEventHandlers<T>): void;
+
 declare function useDragOperation(): {
     readonly source: _dnd_kit_dom.Draggable<_dnd_kit_abstract.Data> | null | undefined;
     readonly target: _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data> | null | undefined;
@@ -62,4 +79,4 @@ interface Instance<T extends DragDropManager$1<any, any> = DragDropManager$1<any
 }
 declare function useInstance<T extends Instance>(initializer: (manager: DragDropManager$1<any, any> | undefined) => T): T;
 
-export { DragDropProvider, DragOverlay, type UseDraggableInput, type UseDroppableInput, useDragDropManager, useDragOperation, useDraggable, useDroppable, useInstance };
+export { DragDropProvider, DragOverlay, type UseDraggableInput, type UseDroppableInput, useDragDropManager, useDragDropMonitor, useDragOperation, useDraggable, useDroppable, useInstance };

package/index.js

@@ -350,6 +350,34 @@ function useDroppable(input) {
     )
   };
 }
+function useDragDropMonitor(handlers) {
+  const manager = useDragDropManager();
+  useEffect(() => {
+    if (!manager) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          "useDndMonitor hook was called outside of a DragDropProvider. Make sure your app is wrapped in a DragDropProvider component."
+        );
+      }
+      return;
+    }
+    const cleanupFns = Object.entries(handlers).reduce(
+      (acc, [handlerName, handler]) => {
+        if (handler) {
+          const eventName = handlerName.replace(/^on/, "").toLowerCase();
+          const unsubscribe = manager.monitor.addEventListener(
+            eventName,
+            handler
+          );
+          acc.push(unsubscribe);
+        }
+        return acc;
+      },
+      []
+    );
+    return () => cleanupFns.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
+  }, [manager, handlers]);
+}
 function useDragOperation() {
   const manager = useDragDropManager();
   const source = useComputed(() => manager == null ? void 0 : manager.dragOperation.source, [manager]);
@@ -364,6 +392,6 @@ function useDragOperation() {
   };
 }
 
-export { DragDropProvider, DragOverlay, useDragDropManager, useDragOperation, useDraggable, useDroppable, useInstance };
+export { DragDropProvider, DragOverlay, useDragDropManager, useDragDropMonitor, useDragOperation, useDraggable, useDroppable, useInstance };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.10-beta-20250216045856",
+  "version": "0.0.10-beta-20250216195101",
   "main": "./index.cjs",
   "module": "./index.js",
   "type": "module",
@@ -56,9 +56,9 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
-    "@dnd-kit/abstract": "0.0.10-beta-20250216045856",
-    "@dnd-kit/dom": "0.0.10-beta-20250216045856",
-    "@dnd-kit/state": "0.0.10-beta-20250216045856",
+    "@dnd-kit/abstract": "0.0.10-beta-20250216195101",
+    "@dnd-kit/dom": "0.0.10-beta-20250216195101",
+    "@dnd-kit/state": "0.0.10-beta-20250216195101",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {