@dnd-kit/react 0.0.8 → 0.0.9-beta-20250205134032

package/hooks.cjs

@@ -59,7 +59,7 @@ function useComputed(compute, dependencies = [], sync = false) {
     sync
   );
 }
-function useDeepSignal(target) {
+function useDeepSignal(target, synchronous) {
   const tracked = react.useRef(/* @__PURE__ */ new Map());
   const forceUpdate = useForceUpdate();
   useIsomorphicLayoutEffect(() => {
@@ -68,7 +68,9 @@ function useDeepSignal(target) {
       return;
     }
     return state.effect(() => {
+      var _a;
       let stale = false;
+      let sync = false;
       for (const entry of tracked.current) {
         const [key] = entry;
         const value = state.untracked(() => entry[1]);
@@ -76,9 +78,12 @@ function useDeepSignal(target) {
         if (value !== latestValue) {
           stale = true;
           tracked.current.set(key, latestValue);
+          sync = (_a = synchronous == null ? void 0 : synchronous(key, value, latestValue)) != null ? _a : false;
         }
       }
-      if (stale) forceUpdate();
+      if (stale) {
+        sync ? reactDom.flushSync(forceUpdate) : forceUpdate();
+      }
     });
   }, [target]);
   return react.useMemo(

package/hooks.d.ts

@@ -9,7 +9,7 @@ declare function useComputed<T = any>(compute: () => T, dependencies?: any[], sy
 };
 
 /** Trigger a re-render when reading signal properties of an object. */
-declare function useDeepSignal<T extends object | null | undefined>(target: T): T;
+declare function useDeepSignal<T extends object | null | undefined>(target: T, synchronous?: (property: keyof T, oldValue: any, newValue: any) => boolean): T;
 
 declare function useImmediateEffect(callback: EffectCallback, _?: DependencyList): void;
 

package/hooks.js

@@ -57,7 +57,7 @@ function useComputed(compute, dependencies = [], sync = false) {
     sync
   );
 }
-function useDeepSignal(target) {
+function useDeepSignal(target, synchronous) {
   const tracked = useRef(/* @__PURE__ */ new Map());
   const forceUpdate = useForceUpdate();
   useIsomorphicLayoutEffect(() => {
@@ -66,7 +66,9 @@ function useDeepSignal(target) {
       return;
     }
     return effect(() => {
+      var _a;
       let stale = false;
+      let sync = false;
       for (const entry of tracked.current) {
         const [key] = entry;
         const value = untracked(() => entry[1]);
@@ -74,9 +76,12 @@ function useDeepSignal(target) {
         if (value !== latestValue) {
           stale = true;
           tracked.current.set(key, latestValue);
+          sync = (_a = synchronous == null ? void 0 : synchronous(key, value, latestValue)) != null ? _a : false;
         }
       }
-      if (stale) forceUpdate();
+      if (stale) {
+        sync ? flushSync(forceUpdate) : forceUpdate();
+      }
     });
   }, [target]);
   return useMemo(

package/index.cjs

@@ -199,7 +199,7 @@ function useDraggable(input) {
       manager
     )
   );
-  const trackedDraggable = hooks.useDeepSignal(draggable);
+  const trackedDraggable = hooks.useDeepSignal(draggable, shouldUpdateSynchronously);
   hooks.useOnValueChange(id, () => draggable.id = id);
   hooks.useOnElementChange(handle, (handle2) => draggable.handle = handle2);
   hooks.useOnElementChange(element, (element2) => draggable.element = element2);
@@ -248,6 +248,10 @@ function useDraggable(input) {
     )
   };
 }
+function shouldUpdateSynchronously(key, oldValue, newValue) {
+  if (key === "isDragSource" && !newValue && oldValue) return true;
+  return false;
+}
 function DragOverlay({ children, className }) {
   const ref = react.useRef(null);
   const manager = useDragDropManager();

package/index.js

@@ -197,7 +197,7 @@ function useDraggable(input) {
       manager
     )
   );
-  const trackedDraggable = useDeepSignal(draggable);
+  const trackedDraggable = useDeepSignal(draggable, shouldUpdateSynchronously);
   useOnValueChange(id, () => draggable.id = id);
   useOnElementChange(handle, (handle2) => draggable.handle = handle2);
   useOnElementChange(element, (element2) => draggable.element = element2);
@@ -246,6 +246,10 @@ function useDraggable(input) {
     )
   };
 }
+function shouldUpdateSynchronously(key, oldValue, newValue) {
+  if (key === "isDragSource" && !newValue && oldValue) return true;
+  return false;
+}
 function DragOverlay({ children, className }) {
   const ref = useRef(null);
   const manager = useDragDropManager();

package/package.json

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

package/sortable.cjs

@@ -57,7 +57,7 @@ function useSortable(input) {
       manager
     );
   });
-  const trackedSortable = hooks.useDeepSignal(sortable$1);
+  const trackedSortable = hooks.useDeepSignal(sortable$1, shouldUpdateSynchronously);
   hooks.useOnValueChange(id, () => sortable$1.id = id);
   hooks.useIsomorphicLayoutEffect(() => {
     state.batch(() => {
@@ -156,7 +156,15 @@ function useSortable(input) {
     )
   };
 }
+function shouldUpdateSynchronously(key, oldValue, newValue) {
+  if (key === "isDragSource" && !newValue && oldValue) return true;
+  return false;
+}
 
+Object.defineProperty(exports, "isSortable", {
+  enumerable: true,
+  get: function () { return sortable.isSortable; }
+});
 exports.useSortable = useSortable;
 //# sourceMappingURL=sortable.cjs.map
 //# sourceMappingURL=sortable.cjs.map

package/sortable.d.ts

@@ -1,5 +1,6 @@
 import { Data } from '@dnd-kit/abstract';
 import { SortableInput, Sortable } from '@dnd-kit/dom/sortable';
+export { isSortable } 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'> {

package/sortable.js

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { batch, deepEqual } from '@dnd-kit/state';
 import { Sortable, defaultSortableTransition } from '@dnd-kit/dom/sortable';
+export { isSortable } from '@dnd-kit/dom/sortable';
 import { useInstance } from '@dnd-kit/react';
 import { useDeepSignal, useOnValueChange, useIsomorphicLayoutEffect, useImmediateEffect, useOnElementChange } from '@dnd-kit/react/hooks';
 import { currentValue } from '@dnd-kit/react/utilities';
@@ -55,7 +56,7 @@ function useSortable(input) {
       manager
     );
   });
-  const trackedSortable = useDeepSignal(sortable);
+  const trackedSortable = useDeepSignal(sortable, shouldUpdateSynchronously);
   useOnValueChange(id, () => sortable.id = id);
   useIsomorphicLayoutEffect(() => {
     batch(() => {
@@ -154,6 +155,10 @@ function useSortable(input) {
     )
   };
 }
+function shouldUpdateSynchronously(key, oldValue, newValue) {
+  if (key === "isDragSource" && !newValue && oldValue) return true;
+  return false;
+}
 
 export { useSortable };
 //# sourceMappingURL=sortable.js.map