@dnd-kit/react 0.0.8-beta-20250203132449 → 0.0.8-beta-20250203145345

package/index.cjs

@@ -198,8 +198,8 @@ function useDraggable(input) {
       manager
     )
   );
-  const isDragSource = hooks.useComputed(() => draggable.isDragSource, [draggable]);
-  const status = hooks.useComputed(() => draggable.status, [draggable]);
+  const trackedDraggable = hooks.useDeepSignal(draggable);
+  hooks.useComputed(() => draggable.status, [draggable]);
   hooks.useOnValueChange(id, () => draggable.id = id);
   hooks.useOnElementChange(handle, (handle2) => draggable.handle = handle2);
   hooks.useOnElementChange(element, (element2) => draggable.element = element2);
@@ -220,12 +220,15 @@ function useDraggable(input) {
     }
   );
   return {
-    draggable,
-    get isDragSource() {
-      return isDragSource.value;
+    draggable: trackedDraggable,
+    get isDragging() {
+      return trackedDraggable.isDragging;
+    },
+    get isDropping() {
+      return trackedDraggable.isDropping;
     },
-    get status() {
-      return status.value;
+    get isDragSource() {
+      return trackedDraggable.isDragSource;
     },
     handleRef: react.useCallback(
       (element2) => {
@@ -263,7 +266,26 @@ function DragOverlay({ children, className }) {
       feedback.overlay = void 0;
     };
   }, [manager]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ref, "data-dnd-overlay": true, children: renderChildren() });
+  const patchedManager = react.useMemo(() => {
+    if (!manager) return null;
+    const patchedRegistry = new Proxy(manager.registry, {
+      get(target, property) {
+        if (property === "register" || property === "unregister") {
+          return noop;
+        }
+        return target[property];
+      }
+    });
+    return new Proxy(manager, {
+      get(target, property) {
+        if (property === "registry") {
+          return patchedRegistry;
+        }
+        return target[property];
+      }
+    });
+  }, [manager]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ref, "data-dnd-overlay": true, children: /* @__PURE__ */ jsxRuntime.jsx(DragDropContext.Provider, { value: patchedManager, children: renderChildren() }) });
   function renderChildren() {
     if (!source) return null;
     if (typeof children === "function") {
@@ -272,6 +294,10 @@ function DragOverlay({ children, className }) {
     return children;
   }
 }
+function noop() {
+  return () => {
+  };
+}
 function Children({
   children,
   source
@@ -288,7 +314,7 @@ function useDroppable(input) {
       manager
     )
   );
-  const isDropTarget = hooks.useComputed(() => droppable.isDropTarget, [droppable]);
+  const trackedDroppalbe = hooks.useDeepSignal(droppable);
   hooks.useOnValueChange(id, () => droppable.id = id);
   hooks.useOnElementChange(element, (element2) => droppable.element = element2);
   hooks.useOnValueChange(accept, () => droppable.id = id, void 0, state.deepEqual);
@@ -297,8 +323,9 @@ function useDroppable(input) {
   hooks.useOnValueChange(disabled, () => droppable.disabled = disabled === true);
   hooks.useOnValueChange(type, () => droppable.id = id);
   return {
+    droppable: trackedDroppalbe,
     get isDropTarget() {
-      return isDropTarget.value;
+      return trackedDroppalbe.isDropTarget;
     },
     ref: react.useCallback(
       (element2) => {
@@ -309,8 +336,7 @@ function useDroppable(input) {
         droppable.element = element2 != null ? element2 : void 0;
       },
       [droppable]
-    ),
-    droppable
+    )
   };
 }
 function useDragOperation() {

package/index.d.ts

@@ -25,8 +25,9 @@ interface UseDraggableInput<T extends Data = Data> extends Omit<DraggableInput<T
 }
 declare function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>): {
     draggable: Draggable<T>;
+    readonly isDragging: boolean;
+    readonly isDropping: boolean;
     readonly isDragSource: boolean;
-    readonly status: "idle" | "dragging" | "dropping";
     handleRef: (element: Element | null) => void;
     ref: (element: Element | null) => void;
 };
@@ -41,9 +42,9 @@ interface UseDroppableInput<T extends Data = Data> extends Omit<DroppableInput<T
     element?: RefOrValue<Element>;
 }
 declare function useDroppable<T extends Data = Data>(input: UseDroppableInput<T>): {
+    droppable: Droppable<T>;
     readonly isDropTarget: boolean;
     ref: (element: Element | null) => void;
-    droppable: Droppable<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;

package/index.js

@@ -1,6 +1,6 @@
-import { createContext, useState, useEffect, startTransition, useContext, useCallback, useRef, useTransition, useLayoutEffect } from 'react';
+import { createContext, useState, useEffect, startTransition, useContext, useCallback, useRef, useMemo, useTransition, useLayoutEffect } from 'react';
 import { DragDropManager, defaultPreset, Draggable, Feedback, Droppable } from '@dnd-kit/dom';
-import { useLatest, useOnValueChange, useIsomorphicLayoutEffect, useComputed, useOnElementChange, useDeepSignal, useConstant } from '@dnd-kit/react/hooks';
+import { useLatest, useOnValueChange, useIsomorphicLayoutEffect, useDeepSignal, useComputed, useOnElementChange, useConstant } from '@dnd-kit/react/hooks';
 import { deepEqual } from '@dnd-kit/state';
 import { jsx } from 'react/jsx-runtime';
 import { currentValue } from '@dnd-kit/react/utilities';
@@ -196,8 +196,8 @@ function useDraggable(input) {
       manager
     )
   );
-  const isDragSource = useComputed(() => draggable.isDragSource, [draggable]);
-  const status = useComputed(() => draggable.status, [draggable]);
+  const trackedDraggable = useDeepSignal(draggable);
+  useComputed(() => draggable.status, [draggable]);
   useOnValueChange(id, () => draggable.id = id);
   useOnElementChange(handle, (handle2) => draggable.handle = handle2);
   useOnElementChange(element, (element2) => draggable.element = element2);
@@ -218,12 +218,15 @@ function useDraggable(input) {
     }
   );
   return {
-    draggable,
-    get isDragSource() {
-      return isDragSource.value;
+    draggable: trackedDraggable,
+    get isDragging() {
+      return trackedDraggable.isDragging;
+    },
+    get isDropping() {
+      return trackedDraggable.isDropping;
     },
-    get status() {
-      return status.value;
+    get isDragSource() {
+      return trackedDraggable.isDragSource;
     },
     handleRef: useCallback(
       (element2) => {
@@ -261,7 +264,26 @@ function DragOverlay({ children, className }) {
       feedback.overlay = void 0;
     };
   }, [manager]);
-  return /* @__PURE__ */ jsx("div", { className, ref, "data-dnd-overlay": true, children: renderChildren() });
+  const patchedManager = useMemo(() => {
+    if (!manager) return null;
+    const patchedRegistry = new Proxy(manager.registry, {
+      get(target, property) {
+        if (property === "register" || property === "unregister") {
+          return noop;
+        }
+        return target[property];
+      }
+    });
+    return new Proxy(manager, {
+      get(target, property) {
+        if (property === "registry") {
+          return patchedRegistry;
+        }
+        return target[property];
+      }
+    });
+  }, [manager]);
+  return /* @__PURE__ */ jsx("div", { className, ref, "data-dnd-overlay": true, children: /* @__PURE__ */ jsx(DragDropContext.Provider, { value: patchedManager, children: renderChildren() }) });
   function renderChildren() {
     if (!source) return null;
     if (typeof children === "function") {
@@ -270,6 +292,10 @@ function DragOverlay({ children, className }) {
     return children;
   }
 }
+function noop() {
+  return () => {
+  };
+}
 function Children({
   children,
   source
@@ -286,7 +312,7 @@ function useDroppable(input) {
       manager
     )
   );
-  const isDropTarget = useComputed(() => droppable.isDropTarget, [droppable]);
+  const trackedDroppalbe = useDeepSignal(droppable);
   useOnValueChange(id, () => droppable.id = id);
   useOnElementChange(element, (element2) => droppable.element = element2);
   useOnValueChange(accept, () => droppable.id = id, void 0, deepEqual);
@@ -295,8 +321,9 @@ function useDroppable(input) {
   useOnValueChange(disabled, () => droppable.disabled = disabled === true);
   useOnValueChange(type, () => droppable.id = id);
   return {
+    droppable: trackedDroppalbe,
     get isDropTarget() {
-      return isDropTarget.value;
+      return trackedDroppalbe.isDropTarget;
     },
     ref: useCallback(
       (element2) => {
@@ -307,8 +334,7 @@ function useDroppable(input) {
         droppable.element = element2 != null ? element2 : void 0;
       },
       [droppable]
-    ),
-    droppable
+    )
   };
 }
 function useDragOperation() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.8-beta-20250203132449",
+  "version": "0.0.8-beta-20250203145345",
   "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.8-beta-20250203132449",
-    "@dnd-kit/dom": "0.0.8-beta-20250203132449",
-    "@dnd-kit/state": "0.0.8-beta-20250203132449",
+    "@dnd-kit/abstract": "0.0.8-beta-20250203145345",
+    "@dnd-kit/dom": "0.0.8-beta-20250203145345",
+    "@dnd-kit/state": "0.0.8-beta-20250203145345",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {

package/sortable.cjs

@@ -56,9 +56,7 @@ function useSortable(input) {
       manager
     );
   });
-  const isDropTarget = hooks.useComputed(() => sortable$1.isDropTarget, [sortable$1]);
-  const isDragSource = hooks.useComputed(() => sortable$1.isDragSource, [sortable$1]);
-  const status = hooks.useComputed(() => sortable$1.status, [sortable$1]);
+  const trackedSortable = hooks.useDeepSignal(sortable$1);
   hooks.useOnValueChange(id, () => sortable$1.id = id);
   hooks.useIsomorphicLayoutEffect(() => {
     state.batch(() => {
@@ -106,14 +104,18 @@ function useSortable(input) {
     state.deepEqual
   );
   return {
+    sortable: trackedSortable,
+    get isDragging() {
+      return trackedSortable.isDragging;
+    },
+    get isDropping() {
+      return trackedSortable.isDropping;
+    },
     get isDragSource() {
-      return isDragSource.value;
+      return trackedSortable.isDragSource;
     },
     get isDropTarget() {
-      return isDropTarget.value;
-    },
-    get status() {
-      return status.value;
+      return trackedSortable.isDropTarget;
     },
     handleRef: react$1.useCallback(
       (element2) => {

package/sortable.d.ts

@@ -1,5 +1,5 @@
 import { Data } from '@dnd-kit/abstract';
-import { SortableInput } from '@dnd-kit/dom/sortable';
+import { SortableInput, Sortable } from '@dnd-kit/dom/sortable';
 import { RefOrValue } from '@dnd-kit/react/utilities';
 
 interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>, 'handle' | 'element' | 'target'> {
@@ -8,9 +8,11 @@ interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>,
     target?: RefOrValue<Element>;
 }
 declare function useSortable<T extends Data = Data>(input: UseSortableInput<T>): {
+    sortable: Sortable<T>;
+    readonly isDragging: boolean;
+    readonly isDropping: boolean;
     readonly isDragSource: boolean;
     readonly isDropTarget: boolean;
-    readonly status: "idle" | "dragging" | "dropping";
     handleRef: (element: Element | null) => void;
     ref: (element: Element | null) => void;
     sourceRef: (element: Element | null) => void;

package/sortable.js

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { batch, deepEqual } from '@dnd-kit/state';
 import { Sortable, defaultSortableTransition } from '@dnd-kit/dom/sortable';
 import { useInstance } from '@dnd-kit/react';
-import { useComputed, useOnValueChange, useIsomorphicLayoutEffect, useImmediateEffect, useOnElementChange } from '@dnd-kit/react/hooks';
+import { useDeepSignal, useOnValueChange, useIsomorphicLayoutEffect, useImmediateEffect, useOnElementChange } from '@dnd-kit/react/hooks';
 import { currentValue } from '@dnd-kit/react/utilities';
 
 var __defProp = Object.defineProperty;
@@ -54,9 +54,7 @@ function useSortable(input) {
       manager
     );
   });
-  const isDropTarget = useComputed(() => sortable.isDropTarget, [sortable]);
-  const isDragSource = useComputed(() => sortable.isDragSource, [sortable]);
-  const status = useComputed(() => sortable.status, [sortable]);
+  const trackedSortable = useDeepSignal(sortable);
   useOnValueChange(id, () => sortable.id = id);
   useIsomorphicLayoutEffect(() => {
     batch(() => {
@@ -104,14 +102,18 @@ function useSortable(input) {
     deepEqual
   );
   return {
+    sortable: trackedSortable,
+    get isDragging() {
+      return trackedSortable.isDragging;
+    },
+    get isDropping() {
+      return trackedSortable.isDropping;
+    },
     get isDragSource() {
-      return isDragSource.value;
+      return trackedSortable.isDragSource;
     },
     get isDropTarget() {
-      return isDropTarget.value;
-    },
-    get status() {
-      return status.value;
+      return trackedSortable.isDropTarget;
     },
     handleRef: useCallback(
       (element2) => {