@dnd-kit/react 0.0.8-beta-20250202144138 → 0.0.8-beta-20250203030431

package/hooks.cjs

@@ -14,29 +14,38 @@ function useConstant(initializer) {
 }
 var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 var useIsomorphicLayoutEffect = canUseDOM ? react.useLayoutEffect : react.useEffect;
+function useForceUpdate() {
+  const setState = react.useState(0)[1];
+  return react.useCallback(() => {
+    setState((value) => value + 1);
+  }, [setState]);
+}
 
 // src/hooks/useSignal.ts
 function useSignal(signal, sync = false) {
-  let val = signal.peek();
+  const previous = react.useRef(signal.peek());
   const read = react.useRef(false);
-  const update = react.useState(val)[1];
+  const forceUpdate = useForceUpdate();
   useIsomorphicLayoutEffect(
     () => state.effect(() => {
-      if (val !== (val = signal.value)) {
+      const previousValue = previous.current;
+      const currentValue2 = signal.value;
+      if (previousValue !== currentValue2) {
+        previous.current = currentValue2;
         if (!read.current) return;
         if (sync) {
-          reactDom.flushSync(() => update(val));
+          reactDom.flushSync(forceUpdate);
         } else {
-          update(val);
+          forceUpdate();
         }
       }
     }),
-    [signal, sync]
+    [signal, sync, forceUpdate]
   );
   return {
     get value() {
       read.current = true;
-      return signal.value;
+      return signal.peek();
     }
   };
 }
@@ -50,6 +59,39 @@ function useComputed(compute, dependencies = [], sync = false) {
     sync
   );
 }
+function useDeepSignal(target) {
+  const tracked = react.useRef(/* @__PURE__ */ new Map());
+  const forceUpdate = useForceUpdate();
+  useIsomorphicLayoutEffect(() => {
+    if (!target) {
+      tracked.current.clear();
+      return;
+    }
+    return state.effect(() => {
+      let stale = false;
+      for (const entry of tracked.current) {
+        const [key] = entry;
+        const value = state.untracked(() => entry[1]);
+        const latestValue = target[key];
+        if (value !== latestValue) {
+          stale = true;
+          tracked.current.set(key, latestValue);
+        }
+      }
+      if (stale) forceUpdate();
+    });
+  }, [target]);
+  return react.useMemo(
+    () => target ? new Proxy(target, {
+      get(target2, key) {
+        const value = target2[key];
+        tracked.current.set(key, value);
+        return value;
+      }
+    }) : target,
+    [target]
+  );
+}
 
 // src/hooks/useImmediateEffect.ts
 function useImmediateEffect(callback, _) {
@@ -62,9 +104,9 @@ function useLatest(value) {
   }, [value]);
   return valueRef;
 }
-function useOnValueChange(value, onChange, effect2 = react.useEffect, compare = Object.is) {
+function useOnValueChange(value, onChange, effect3 = react.useEffect, compare = Object.is) {
   const tracked = react.useRef(value);
-  effect2(() => {
+  effect3(() => {
     const oldValue = tracked.current;
     if (!compare(value, oldValue)) {
       tracked.current = value;
@@ -85,6 +127,7 @@ function useOnElementChange(value, onChange) {
 
 exports.useComputed = useComputed;
 exports.useConstant = useConstant;
+exports.useDeepSignal = useDeepSignal;
 exports.useImmediateEffect = useImmediateEffect;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLatest = useLatest;

package/hooks.d.ts

@@ -8,6 +8,9 @@ declare function useComputed<T = any>(compute: () => T, dependencies?: any[], sy
     readonly value: T;
 };
 
+/** Trigger a re-render when reading signal properties of an object. */
+declare function useDeepSignal<T extends object | null | undefined>(target: T): T;
+
 declare function useImmediateEffect(callback: EffectCallback, _?: DependencyList): void;
 
 /**
@@ -22,4 +25,4 @@ declare function useOnValueChange<T>(value: T, onChange: (value: T, oldValue: T)
 
 declare function useOnElementChange(value: RefOrValue<Element>, onChange: (value: Element | undefined) => void): void;
 
-export { useComputed, useConstant, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnElementChange, useOnValueChange };
+export { useComputed, useConstant, useDeepSignal, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnElementChange, useOnValueChange };

package/hooks.js

@@ -1,5 +1,5 @@
-import { useRef, useLayoutEffect, useEffect, useMemo, useState } from 'react';
-import { computed, effect } from '@dnd-kit/state';
+import { useRef, useLayoutEffect, useEffect, useMemo, useState, useCallback } from 'react';
+import { computed, effect, untracked } from '@dnd-kit/state';
 import { flushSync } from 'react-dom';
 import { currentValue } from '@dnd-kit/react/utilities';
 
@@ -12,29 +12,38 @@ function useConstant(initializer) {
 }
 var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
+function useForceUpdate() {
+  const setState = useState(0)[1];
+  return useCallback(() => {
+    setState((value) => value + 1);
+  }, [setState]);
+}
 
 // src/hooks/useSignal.ts
 function useSignal(signal, sync = false) {
-  let val = signal.peek();
+  const previous = useRef(signal.peek());
   const read = useRef(false);
-  const update = useState(val)[1];
+  const forceUpdate = useForceUpdate();
   useIsomorphicLayoutEffect(
     () => effect(() => {
-      if (val !== (val = signal.value)) {
+      const previousValue = previous.current;
+      const currentValue2 = signal.value;
+      if (previousValue !== currentValue2) {
+        previous.current = currentValue2;
         if (!read.current) return;
         if (sync) {
-          flushSync(() => update(val));
+          flushSync(forceUpdate);
         } else {
-          update(val);
+          forceUpdate();
         }
       }
     }),
-    [signal, sync]
+    [signal, sync, forceUpdate]
   );
   return {
     get value() {
       read.current = true;
-      return signal.value;
+      return signal.peek();
     }
   };
 }
@@ -48,6 +57,39 @@ function useComputed(compute, dependencies = [], sync = false) {
     sync
   );
 }
+function useDeepSignal(target) {
+  const tracked = useRef(/* @__PURE__ */ new Map());
+  const forceUpdate = useForceUpdate();
+  useIsomorphicLayoutEffect(() => {
+    if (!target) {
+      tracked.current.clear();
+      return;
+    }
+    return effect(() => {
+      let stale = false;
+      for (const entry of tracked.current) {
+        const [key] = entry;
+        const value = untracked(() => entry[1]);
+        const latestValue = target[key];
+        if (value !== latestValue) {
+          stale = true;
+          tracked.current.set(key, latestValue);
+        }
+      }
+      if (stale) forceUpdate();
+    });
+  }, [target]);
+  return useMemo(
+    () => target ? new Proxy(target, {
+      get(target2, key) {
+        const value = target2[key];
+        tracked.current.set(key, value);
+        return value;
+      }
+    }) : target,
+    [target]
+  );
+}
 
 // src/hooks/useImmediateEffect.ts
 function useImmediateEffect(callback, _) {
@@ -60,9 +102,9 @@ function useLatest(value) {
   }, [value]);
   return valueRef;
 }
-function useOnValueChange(value, onChange, effect2 = useEffect, compare = Object.is) {
+function useOnValueChange(value, onChange, effect3 = useEffect, compare = Object.is) {
   const tracked = useRef(value);
-  effect2(() => {
+  effect3(() => {
     const oldValue = tracked.current;
     if (!compare(value, oldValue)) {
       tracked.current = value;
@@ -81,6 +123,6 @@ function useOnElementChange(value, onChange) {
   });
 }
 
-export { useComputed, useConstant, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnElementChange, useOnValueChange };
+export { useComputed, useConstant, useDeepSignal, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnElementChange, useOnValueChange };
 //# sourceMappingURL=hooks.js.map
 //# sourceMappingURL=hooks.js.map

package/index.cjs

@@ -245,6 +245,39 @@ function useDraggable(input) {
     )
   };
 }
+function DragOverlay({ children, className }) {
+  const ref = react.useRef(null);
+  const manager = useDragDropManager();
+  const source = hooks.useComputed(
+    () => manager == null ? void 0 : manager.dragOperation.source,
+    [manager]
+  ).value;
+  react.useEffect(() => {
+    if (!ref.current || !manager) return;
+    const feedback = manager.plugins.find(
+      (plugin) => plugin instanceof dom.Feedback
+    );
+    if (!feedback) return;
+    feedback.overlay = ref.current;
+    return () => {
+      feedback.overlay = void 0;
+    };
+  }, [manager]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ref, "data-dnd-overlay": true, children: renderChildren() });
+  function renderChildren() {
+    if (!source) return null;
+    if (typeof children === "function") {
+      return /* @__PURE__ */ jsxRuntime.jsx(Children, { source, children });
+    }
+    return children;
+  }
+}
+function Children({
+  children,
+  source
+}) {
+  return children(hooks.useDeepSignal(source));
+}
 function useDroppable(input) {
   const { collisionDetector, data, disabled, element, id, accept, type } = input;
   const droppable = useInstance(
@@ -295,6 +328,7 @@ function useDragOperation() {
 }
 
 exports.DragDropProvider = DragDropProvider;
+exports.DragOverlay = DragOverlay;
 exports.useDragDropManager = useDragDropManager;
 exports.useDragOperation = useDragOperation;
 exports.useDraggable = useDraggable;

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import * as _dnd_kit_abstract from '@dnd-kit/abstract';
 import { DragDropEvents, Data, DragDropManager as DragDropManager$1 } from '@dnd-kit/abstract';
 import * as _dnd_kit_dom from '@dnd-kit/dom';
@@ -8,7 +8,7 @@ import { RefOrValue } from '@dnd-kit/react/utilities';
 import { CleanupFunction } from '@dnd-kit/state';
 
 type Events = DragDropEvents<Draggable, Droppable, DragDropManager>;
-interface Props extends DragDropManagerInput, PropsWithChildren {
+interface Props$1 extends DragDropManagerInput, PropsWithChildren {
     manager?: DragDropManager;
     onBeforeDragStart?: Events['beforedragstart'];
     onCollision?: Events['collision'];
@@ -17,7 +17,7 @@ interface Props extends DragDropManagerInput, PropsWithChildren {
     onDragOver?: Events['dragover'];
     onDragEnd?: Events['dragend'];
 }
-declare function DragDropProvider({ children, onCollision, onBeforeDragStart, onDragStart, onDragMove, onDragOver, onDragEnd, ...input }: Props): react_jsx_runtime.JSX.Element;
+declare function DragDropProvider({ children, onCollision, onBeforeDragStart, onDragStart, onDragMove, onDragOver, onDragEnd, ...input }: Props$1): react_jsx_runtime.JSX.Element;
 
 interface UseDraggableInput<T extends Data = Data> extends Omit<DraggableInput<T>, 'handle' | 'element'> {
     handle?: RefOrValue<Element>;
@@ -31,6 +31,12 @@ declare function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>
     ref: (element: Element | null) => void;
 };
 
+interface Props {
+    className?: string;
+    children: ReactNode | ((source: Draggable) => ReactNode);
+}
+declare function DragOverlay({ children, className }: Props): react_jsx_runtime.JSX.Element;
+
 interface UseDroppableInput<T extends Data = Data> extends Omit<DroppableInput<T>, 'element'> {
     element?: RefOrValue<Element>;
 }
@@ -53,4 +59,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, type UseDraggableInput, type UseDroppableInput, useDragDropManager, useDragOperation, useDraggable, useDroppable, useInstance };
+export { DragDropProvider, DragOverlay, type UseDraggableInput, type UseDroppableInput, useDragDropManager, useDragOperation, useDraggable, useDroppable, useInstance };

package/index.js

@@ -1,6 +1,6 @@
-import { createContext, useState, useEffect, startTransition, useContext, useCallback, useTransition, useRef, useLayoutEffect } from 'react';
-import { DragDropManager, defaultPreset, Draggable, Droppable } from '@dnd-kit/dom';
-import { useLatest, useOnValueChange, useIsomorphicLayoutEffect, useComputed, useOnElementChange, useConstant } from '@dnd-kit/react/hooks';
+import { createContext, useState, useEffect, startTransition, useContext, useCallback, useRef, 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 { deepEqual } from '@dnd-kit/state';
 import { jsx } from 'react/jsx-runtime';
 import { currentValue } from '@dnd-kit/react/utilities';
@@ -243,6 +243,39 @@ function useDraggable(input) {
     )
   };
 }
+function DragOverlay({ children, className }) {
+  const ref = useRef(null);
+  const manager = useDragDropManager();
+  const source = useComputed(
+    () => manager == null ? void 0 : manager.dragOperation.source,
+    [manager]
+  ).value;
+  useEffect(() => {
+    if (!ref.current || !manager) return;
+    const feedback = manager.plugins.find(
+      (plugin) => plugin instanceof Feedback
+    );
+    if (!feedback) return;
+    feedback.overlay = ref.current;
+    return () => {
+      feedback.overlay = void 0;
+    };
+  }, [manager]);
+  return /* @__PURE__ */ jsx("div", { className, ref, "data-dnd-overlay": true, children: renderChildren() });
+  function renderChildren() {
+    if (!source) return null;
+    if (typeof children === "function") {
+      return /* @__PURE__ */ jsx(Children, { source, children });
+    }
+    return children;
+  }
+}
+function Children({
+  children,
+  source
+}) {
+  return children(useDeepSignal(source));
+}
 function useDroppable(input) {
   const { collisionDetector, data, disabled, element, id, accept, type } = input;
   const droppable = useInstance(
@@ -292,6 +325,6 @@ function useDragOperation() {
   };
 }
 
-export { DragDropProvider, useDragDropManager, useDragOperation, useDraggable, useDroppable, useInstance };
+export { DragDropProvider, DragOverlay, useDragDropManager, 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.8-beta-20250202144138",
+  "version": "0.0.8-beta-20250203030431",
   "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-20250202144138",
-    "@dnd-kit/dom": "0.0.8-beta-20250202144138",
-    "@dnd-kit/state": "0.0.8-beta-20250202144138",
+    "@dnd-kit/abstract": "0.0.8-beta-20250203030431",
+    "@dnd-kit/dom": "0.0.8-beta-20250203030431",
+    "@dnd-kit/state": "0.0.8-beta-20250203030431",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {