@dnd-kit/react 0.0.6-beta-20240917191338 → 0.0.6-beta-20240918141737

package/hooks.cjs

@@ -15,15 +15,12 @@ var canUseDOM = typeof window !== "undefined" && typeof window.document !== "und
 var useIsomorphicLayoutEffect = canUseDOM ? react.useLayoutEffect : react.useEffect;
 
 // src/hooks/useSignal.ts
-function useSignal(signalOrValue, sync = false) {
-  const sig = useConstant(
-    () => signalOrValue instanceof state.Signal ? signalOrValue : state.signal(signalOrValue)
-  );
-  let val = sig.peek();
+function useSignal(signal, sync = false) {
+  let val = signal.peek();
   const update = react.useState(val)[1];
   useIsomorphicLayoutEffect(
     () => state.effect(() => {
-      if (val !== (val = sig.value)) {
+      if (val !== (val = signal.value)) {
         if (sync) {
           reactDom.flushSync(() => update(val));
         } else {
@@ -31,15 +28,17 @@ function useSignal(signalOrValue, sync = false) {
         }
       }
     }),
-    [sync]
+    [signal, sync]
   );
-  return sig;
+  return signal;
 }
 
 // src/hooks/useComputed.ts
-function useComputed(compute, sync = false) {
+function useComputed(compute, dependencies = [], sync = false) {
+  const $compute = react.useRef(compute);
+  $compute.current = compute;
   return useSignal(
-    useConstant(() => state.computed(compute)),
+    react.useMemo(() => state.computed(() => $compute.current()), dependencies),
     sync
   );
 }

package/hooks.d.ts

@@ -4,7 +4,7 @@ import { EffectCallback, DependencyList, useLayoutEffect, useEffect } from 'reac
 
 declare function useConstant<T = any>(initializer: () => T): T;
 
-declare function useComputed<T = any>(compute: () => T, sync?: boolean): _preact_signals_core.ReadonlySignal<T>;
+declare function useComputed<T = any>(compute: () => T, dependencies?: any[], sync?: boolean): _preact_signals_core.Signal<T>;
 
 declare function useImmediateEffect(callback: EffectCallback, _?: DependencyList): void;
 

package/hooks.js

@@ -1,5 +1,5 @@
-import { useRef, useLayoutEffect, useEffect, useState } from 'react';
-import { computed, Signal, signal, effect } from '@dnd-kit/state';
+import { useRef, useLayoutEffect, useEffect, useMemo, useState } from 'react';
+import { computed, effect } from '@dnd-kit/state';
 import { flushSync } from 'react-dom';
 
 function useConstant(initializer) {
@@ -13,15 +13,12 @@ var canUseDOM = typeof window !== "undefined" && typeof window.document !== "und
 var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
 
 // src/hooks/useSignal.ts
-function useSignal(signalOrValue, sync = false) {
-  const sig = useConstant(
-    () => signalOrValue instanceof Signal ? signalOrValue : signal(signalOrValue)
-  );
-  let val = sig.peek();
+function useSignal(signal, sync = false) {
+  let val = signal.peek();
   const update = useState(val)[1];
   useIsomorphicLayoutEffect(
     () => effect(() => {
-      if (val !== (val = sig.value)) {
+      if (val !== (val = signal.value)) {
         if (sync) {
           flushSync(() => update(val));
         } else {
@@ -29,15 +26,17 @@ function useSignal(signalOrValue, sync = false) {
         }
       }
     }),
-    [sync]
+    [signal, sync]
   );
-  return sig;
+  return signal;
 }
 
 // src/hooks/useComputed.ts
-function useComputed(compute, sync = false) {
+function useComputed(compute, dependencies = [], sync = false) {
+  const $compute = useRef(compute);
+  $compute.current = compute;
   return useSignal(
-    useConstant(() => computed(compute)),
+    useMemo(() => computed(() => $compute.current()), dependencies),
     sync
   );
 }

package/index.cjs

@@ -236,6 +236,10 @@ function useDraggable(input) {
     ),
     ref: react.useCallback(
       (element2) => {
+        var _a, _b;
+        if (!element2 && ((_a = draggable.element) == null ? void 0 : _a.isConnected) && !((_b = draggable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
+          return;
+        }
         draggable.element = element2 != null ? element2 : void 0;
       },
       [draggable]
@@ -276,8 +280,8 @@ function useDroppable(input) {
 }
 function useDragOperation() {
   const manager = useDragDropManager();
-  const source = hooks.useComputed(() => manager == null ? void 0 : manager.dragOperation.source);
-  const target = hooks.useComputed(() => manager == null ? void 0 : manager.dragOperation.target);
+  const source = hooks.useComputed(() => manager == null ? void 0 : manager.dragOperation.source, [manager]);
+  const target = hooks.useComputed(() => manager == null ? void 0 : manager.dragOperation.target, [manager]);
   return {
     get source() {
       return source.value;

package/index.js

@@ -234,6 +234,10 @@ function useDraggable(input) {
     ),
     ref: useCallback(
       (element2) => {
+        var _a, _b;
+        if (!element2 && ((_a = draggable.element) == null ? void 0 : _a.isConnected) && !((_b = draggable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
+          return;
+        }
         draggable.element = element2 != null ? element2 : void 0;
       },
       [draggable]
@@ -274,8 +278,8 @@ function useDroppable(input) {
 }
 function useDragOperation() {
   const manager = useDragDropManager();
-  const source = useComputed(() => manager == null ? void 0 : manager.dragOperation.source);
-  const target = useComputed(() => manager == null ? void 0 : manager.dragOperation.target);
+  const source = useComputed(() => manager == null ? void 0 : manager.dragOperation.source, [manager]);
+  const target = useComputed(() => manager == null ? void 0 : manager.dragOperation.target, [manager]);
   return {
     get source() {
       return source.value;

package/package.json

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

package/sortable.cjs

@@ -122,6 +122,11 @@ function useSortable(input) {
     ),
     sourceRef: react$1.useCallback(
       (element2) => {
+        var _a;
+        const { manager: manager2 } = sortable$1;
+        if (!element2 && ((_a = sortable$1.source) == null ? void 0 : _a.isConnected) && !(manager2 == null ? void 0 : manager2.dragOperation.status.idle)) {
+          return;
+        }
         sortable$1.source = element2 != null ? element2 : void 0;
       },
       [sortable$1]

package/sortable.js

@@ -120,6 +120,11 @@ function useSortable(input) {
     ),
     sourceRef: useCallback(
       (element2) => {
+        var _a;
+        const { manager: manager2 } = sortable;
+        if (!element2 && ((_a = sortable.source) == null ? void 0 : _a.isConnected) && !(manager2 == null ? void 0 : manager2.dragOperation.status.idle)) {
+          return;
+        }
         sortable.source = element2 != null ? element2 : void 0;
       },
       [sortable]