@dnd-kit/react 0.0.7-beta-20250127022704 → 0.0.7-beta-20250127032323

package/hooks.cjs

@@ -3,6 +3,7 @@
 var react = require('react');
 var state = require('@dnd-kit/state');
 var reactDom = require('react-dom');
+var utilities = require('@dnd-kit/react/utilities');
 
 function useConstant(initializer) {
   const ref = react.useRef(null);
@@ -71,12 +72,24 @@ function useOnValueChange(value, onChange, effect2 = react.useEffect, compare =
     }
   }, [onChange, value]);
 }
+console.log("foo");
+function useOnElementChange(value, onChange) {
+  const previous = react.useRef(utilities.currentValue(value));
+  useIsomorphicLayoutEffect(() => {
+    const current = utilities.currentValue(value);
+    if (current !== previous.current) {
+      previous.current = current;
+      onChange(current);
+    }
+  });
+}
 
 exports.useComputed = useComputed;
 exports.useConstant = useConstant;
 exports.useImmediateEffect = useImmediateEffect;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLatest = useLatest;
+exports.useOnElementChange = useOnElementChange;
 exports.useOnValueChange = useOnValueChange;
 //# sourceMappingURL=hooks.cjs.map
 //# sourceMappingURL=hooks.cjs.map

package/hooks.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { EffectCallback, DependencyList, useLayoutEffect, useEffect } from 'react';
+import { RefOrValue } from '@dnd-kit/react/utilities';
 
 declare function useConstant<T = any>(initializer: () => T): T;
 
@@ -19,4 +20,6 @@ declare function useLatest<T>(value: T): react.RefObject<T | undefined>;
 
 declare function useOnValueChange<T>(value: T, onChange: (value: T, oldValue: T) => void, effect?: typeof useEffect, compare?: (value1: any, value2: any) => boolean): void;
 
-export { useComputed, useConstant, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnValueChange };
+declare function useOnElementChange(value: RefOrValue<Element>, onChange: (value: Element | undefined) => void): void;
+
+export { useComputed, useConstant, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnElementChange, useOnValueChange };

package/hooks.js

@@ -1,6 +1,7 @@
 import { useRef, useLayoutEffect, useEffect, useMemo, useState } from 'react';
 import { computed, effect } from '@dnd-kit/state';
 import { flushSync } from 'react-dom';
+import { currentValue } from '@dnd-kit/react/utilities';
 
 function useConstant(initializer) {
   const ref = useRef(null);
@@ -69,7 +70,18 @@ function useOnValueChange(value, onChange, effect2 = useEffect, compare = Object
     }
   }, [onChange, value]);
 }
+console.log("foo");
+function useOnElementChange(value, onChange) {
+  const previous = useRef(currentValue(value));
+  useIsomorphicLayoutEffect(() => {
+    const current = currentValue(value);
+    if (current !== previous.current) {
+      previous.current = current;
+      onChange(current);
+    }
+  });
+}
 
-export { useComputed, useConstant, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnValueChange };
+export { useComputed, useConstant, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnElementChange, useOnValueChange };
 //# sourceMappingURL=hooks.js.map
 //# sourceMappingURL=hooks.js.map

package/index.cjs

@@ -184,14 +184,12 @@ function useInstance(initializer) {
 
 // src/core/draggable/useDraggable.ts
 function useDraggable(input) {
-  const { disabled, data, id, modifiers, sensors } = input;
-  const handle = utilities.currentValue(input.handle);
-  const element = utilities.currentValue(input.element);
+  const { disabled, data, element, handle, id, modifiers, sensors } = input;
   const draggable = useInstance(
     (manager) => new dom.Draggable(
       __spreadProps(__spreadValues({}, input), {
-        handle,
-        element
+        handle: utilities.currentValue(handle),
+        element: utilities.currentValue(element)
       }),
       manager
     )
@@ -199,8 +197,8 @@ function useDraggable(input) {
   const isDragSource = hooks.useComputed(() => draggable.isDragSource, [draggable]);
   const status = hooks.useComputed(() => draggable.status, [draggable]);
   hooks.useOnValueChange(id, () => draggable.id = id);
-  hooks.useOnValueChange(handle, () => draggable.handle = handle);
-  hooks.useOnValueChange(element, () => draggable.element = element);
+  hooks.useOnElementChange(handle, (handle2) => draggable.handle = handle2);
+  hooks.useOnElementChange(element, (element2) => draggable.element = element2);
   hooks.useOnValueChange(data, () => data && (draggable.data = data));
   hooks.useOnValueChange(disabled, () => draggable.disabled = disabled === true);
   hooks.useOnValueChange(sensors, () => draggable.sensors = sensors);
@@ -244,23 +242,22 @@ function useDraggable(input) {
   };
 }
 function useDroppable(input) {
-  const { collisionDetector, data, disabled, id, accept, type } = input;
-  const element = utilities.currentValue(input.element);
+  const { collisionDetector, data, disabled, element, id, accept, type } = input;
   const droppable = useInstance(
     (manager) => new dom.Droppable(
       __spreadProps(__spreadValues({}, input), {
-        element
+        element: utilities.currentValue(element)
       }),
       manager
     )
   );
   const isDropTarget = hooks.useComputed(() => droppable.isDropTarget, [droppable]);
   hooks.useOnValueChange(id, () => droppable.id = id);
+  hooks.useOnElementChange(element, (element2) => droppable.element = element2);
   hooks.useOnValueChange(accept, () => droppable.id = id, void 0, state.deepEqual);
   hooks.useOnValueChange(collisionDetector, () => droppable.id = id);
   hooks.useOnValueChange(data, () => data && (droppable.data = data));
   hooks.useOnValueChange(disabled, () => droppable.disabled = disabled === true);
-  hooks.useOnValueChange(element, () => droppable.element = element);
   hooks.useOnValueChange(type, () => droppable.id = id);
   return {
     get isDropTarget() {

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, useConstant } from '@dnd-kit/react/hooks';
+import { useLatest, useOnValueChange, useIsomorphicLayoutEffect, useComputed, useOnElementChange, useConstant } from '@dnd-kit/react/hooks';
 import { jsx } from 'react/jsx-runtime';
 import { deepEqual } from '@dnd-kit/state';
 import { currentValue } from '@dnd-kit/react/utilities';
@@ -182,14 +182,12 @@ function useInstance(initializer) {
 
 // src/core/draggable/useDraggable.ts
 function useDraggable(input) {
-  const { disabled, data, id, modifiers, sensors } = input;
-  const handle = currentValue(input.handle);
-  const element = currentValue(input.element);
+  const { disabled, data, element, handle, id, modifiers, sensors } = input;
   const draggable = useInstance(
     (manager) => new Draggable(
       __spreadProps(__spreadValues({}, input), {
-        handle,
-        element
+        handle: currentValue(handle),
+        element: currentValue(element)
       }),
       manager
     )
@@ -197,8 +195,8 @@ function useDraggable(input) {
   const isDragSource = useComputed(() => draggable.isDragSource, [draggable]);
   const status = useComputed(() => draggable.status, [draggable]);
   useOnValueChange(id, () => draggable.id = id);
-  useOnValueChange(handle, () => draggable.handle = handle);
-  useOnValueChange(element, () => draggable.element = element);
+  useOnElementChange(handle, (handle2) => draggable.handle = handle2);
+  useOnElementChange(element, (element2) => draggable.element = element2);
   useOnValueChange(data, () => data && (draggable.data = data));
   useOnValueChange(disabled, () => draggable.disabled = disabled === true);
   useOnValueChange(sensors, () => draggable.sensors = sensors);
@@ -242,23 +240,22 @@ function useDraggable(input) {
   };
 }
 function useDroppable(input) {
-  const { collisionDetector, data, disabled, id, accept, type } = input;
-  const element = currentValue(input.element);
+  const { collisionDetector, data, disabled, element, id, accept, type } = input;
   const droppable = useInstance(
     (manager) => new Droppable(
       __spreadProps(__spreadValues({}, input), {
-        element
+        element: currentValue(element)
       }),
       manager
     )
   );
   const isDropTarget = useComputed(() => droppable.isDropTarget, [droppable]);
   useOnValueChange(id, () => droppable.id = id);
+  useOnElementChange(element, (element2) => droppable.element = element2);
   useOnValueChange(accept, () => droppable.id = id, void 0, deepEqual);
   useOnValueChange(collisionDetector, () => droppable.id = id);
   useOnValueChange(data, () => data && (droppable.data = data));
   useOnValueChange(disabled, () => droppable.disabled = disabled === true);
-  useOnValueChange(element, () => droppable.element = element);
   useOnValueChange(type, () => droppable.id = id);
   return {
     get isDropTarget() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.7-beta-20250127022704",
+  "version": "0.0.7-beta-20250127032323",
   "main": "./index.cjs",
   "module": "./index.js",
   "type": "module",
@@ -46,19 +46,19 @@
     }
   },
   "scripts": {
-    "build": "bun build:hooks && bun build:utilities && bun build:core && bun build:sortable",
+    "build": "bun build:utilities && bun build:hooks && bun build:core && bun build:sortable",
     "build:core": "tsup src/core/index.ts",
     "build:hooks": "tsup --entry.hooks src/hooks/index.ts",
     "build:sortable": "tsup --entry.sortable src/sortable/index.ts",
     "build:utilities": "tsup --entry.utilities src/utilities/index.ts",
-    "dev": "bun build:hooks --watch & bun build:utilities --watch & bun build:core --watch & bun build:sortable --watch",
+    "dev": "bun build:utilities --watch & bun build:hooks --watch & bun build:core --watch & bun build:sortable --watch",
     "lint": "TIMING=1 eslint src/**/*.ts* --fix",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
-    "@dnd-kit/abstract": "0.0.7-beta-20250127022704",
-    "@dnd-kit/dom": "0.0.7-beta-20250127022704",
-    "@dnd-kit/state": "0.0.7-beta-20250127022704",
+    "@dnd-kit/abstract": "0.0.7-beta-20250127032323",
+    "@dnd-kit/dom": "0.0.7-beta-20250127032323",
+    "@dnd-kit/state": "0.0.7-beta-20250127032323",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {

package/sortable.cjs

@@ -33,24 +33,24 @@ function useSortable(input) {
     collisionPriority,
     id,
     data,
+    element,
+    handle,
     index,
     group,
     disabled,
     feedback,
     modifiers,
     sensors,
+    target,
     transition = sortable.defaultSortableTransition,
     type
   } = input;
-  const handle = utilities.currentValue(input.handle);
-  const element = utilities.currentValue(input.element);
-  const target = utilities.currentValue(input.target);
   const sortable$1 = react.useInstance((manager) => {
     return new sortable.Sortable(
       __spreadProps(__spreadValues({}, input), {
-        handle,
-        element,
-        target,
+        handle: utilities.currentValue(handle),
+        element: utilities.currentValue(element),
+        target: utilities.currentValue(target),
         feedback
       }),
       manager
@@ -84,9 +84,9 @@ function useSortable(input) {
     },
     hooks.useImmediateEffect
   );
-  hooks.useOnValueChange(handle, () => sortable$1.handle = handle);
-  hooks.useOnValueChange(element, () => sortable$1.element = element);
-  hooks.useOnValueChange(target, () => sortable$1.target = target);
+  hooks.useOnElementChange(handle, (handle2) => sortable$1.handle = handle2);
+  hooks.useOnElementChange(element, (element2) => sortable$1.element = element2);
+  hooks.useOnElementChange(target, (target2) => sortable$1.target = target2);
   hooks.useOnValueChange(disabled, () => sortable$1.disabled = disabled === true);
   hooks.useOnValueChange(sensors, () => sortable$1.sensors = sensors);
   hooks.useOnValueChange(

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 } from '@dnd-kit/react/hooks';
+import { useComputed, useOnValueChange, useIsomorphicLayoutEffect, useImmediateEffect, useOnElementChange } from '@dnd-kit/react/hooks';
 import { currentValue } from '@dnd-kit/react/utilities';
 
 var __defProp = Object.defineProperty;
@@ -31,24 +31,24 @@ function useSortable(input) {
     collisionPriority,
     id,
     data,
+    element,
+    handle,
     index,
     group,
     disabled,
     feedback,
     modifiers,
     sensors,
+    target,
     transition = defaultSortableTransition,
     type
   } = input;
-  const handle = currentValue(input.handle);
-  const element = currentValue(input.element);
-  const target = currentValue(input.target);
   const sortable = useInstance((manager) => {
     return new Sortable(
       __spreadProps(__spreadValues({}, input), {
-        handle,
-        element,
-        target,
+        handle: currentValue(handle),
+        element: currentValue(element),
+        target: currentValue(target),
         feedback
       }),
       manager
@@ -82,9 +82,9 @@ function useSortable(input) {
     },
     useImmediateEffect
   );
-  useOnValueChange(handle, () => sortable.handle = handle);
-  useOnValueChange(element, () => sortable.element = element);
-  useOnValueChange(target, () => sortable.target = target);
+  useOnElementChange(handle, (handle2) => sortable.handle = handle2);
+  useOnElementChange(element, (element2) => sortable.element = element2);
+  useOnElementChange(target, (target2) => sortable.target = target2);
   useOnValueChange(disabled, () => sortable.disabled = disabled === true);
   useOnValueChange(sensors, () => sortable.sensors = sensors);
   useOnValueChange(

package/utilities.cjs

@@ -1,12 +1,15 @@
 'use strict';
 
 // src/utilities/currentValue.ts
+function isRef(value) {
+  return value != null && typeof value === "object" && "current" in value;
+}
 function currentValue(value) {
   var _a;
   if (value == null) {
     return void 0;
   }
-  if (typeof value === "object" && "current" in value) {
+  if (isRef(value)) {
     return (_a = value.current) != null ? _a : void 0;
   }
   return value;

package/utilities.d.ts

@@ -1,6 +1,7 @@
 import { RefObject, MutableRefObject } from 'react';
 
-type RefOrValue<T> = T | RefObject<T | null | undefined> | MutableRefObject<T> | null | undefined;
+type Ref<T> = RefObject<T | null | undefined> | MutableRefObject<T>;
+type RefOrValue<T> = T | Ref<T> | null | undefined;
 declare function currentValue<T>(value: RefOrValue<T>): NonNullable<T> | undefined;
 
 export { type RefOrValue, currentValue };

package/utilities.js

@@ -1,10 +1,13 @@
 // src/utilities/currentValue.ts
+function isRef(value) {
+  return value != null && typeof value === "object" && "current" in value;
+}
 function currentValue(value) {
   var _a;
   if (value == null) {
     return void 0;
   }
-  if (typeof value === "object" && "current" in value) {
+  if (isRef(value)) {
     return (_a = value.current) != null ? _a : void 0;
   }
   return value;