@dnd-kit/react 0.1.5 → 0.1.6-beta-20250501000355

package/index.cjs

@@ -6,6 +6,7 @@ var hooks = require('@dnd-kit/react/hooks');
 var state = require('@dnd-kit/state');
 var jsxRuntime = require('react/jsx-runtime');
 var utilities = require('@dnd-kit/react/utilities');
+var abstract = require('@dnd-kit/abstract');
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -49,15 +50,15 @@ function useRenderer() {
   const resolver = react.useRef(null);
   const renderer = hooks.useConstant(() => ({
     get rendering() {
-      var _a;
-      return (_a = rendering.current) != null ? _a : Promise.resolve();
+      var _a2;
+      return (_a2 = rendering.current) != null ? _a2 : Promise.resolve();
     }
   }));
   hooks.useOnValueChange(
     transitionCount,
     () => {
-      var _a;
-      (_a = resolver.current) == null ? void 0 : _a.call(resolver);
+      var _a2;
+      (_a2 = resolver.current) == null ? void 0 : _a2.call(resolver);
       rendering.current = null;
     },
     react.useLayoutEffect
@@ -78,8 +79,8 @@ function useRenderer() {
   };
 }
 var options = [void 0, state.deepEqual];
-function DragDropProvider(_a) {
-  var _b = _a, {
+function DragDropProvider(_a2) {
+  var _b = _a2, {
     children,
     onCollision,
     onBeforeDragStart,
@@ -96,10 +97,10 @@ function DragDropProvider(_a) {
     "onDragOver",
     "onDragEnd"
   ]);
-  var _a2;
+  var _a3;
   const { renderer, trackRendering } = useRenderer();
   const [manager, setManager] = react.useState(
-    (_a2 = input.manager) != null ? _a2 : null
+    (_a3 = input.manager) != null ? _a3 : null
   );
   const { plugins, modifiers, sensors } = input;
   const handleBeforeDragStart = hooks.useLatest(onBeforeDragStart);
@@ -109,8 +110,8 @@ function DragDropProvider(_a) {
   const handleDragEnd = hooks.useLatest(onDragEnd);
   const handleCollision = hooks.useLatest(onCollision);
   react.useEffect(() => {
-    var _a3;
-    const manager2 = (_a3 = input.manager) != null ? _a3 : new dom.DragDropManager(input);
+    var _a4;
+    const manager2 = (_a4 = input.manager) != null ? _a4 : new dom.DragDropManager(input);
     manager2.renderer = renderer;
     manager2.monitor.addEventListener("beforedragstart", (event, manager3) => {
       const callback = handleBeforeDragStart.current;
@@ -121,8 +122,8 @@ function DragDropProvider(_a) {
     manager2.monitor.addEventListener(
       "dragstart",
       (event, manager3) => {
-        var _a4;
-        return (_a4 = handleDragStart.current) == null ? void 0 : _a4.call(handleDragStart, event, manager3);
+        var _a5;
+        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager3);
       }
     );
     manager2.monitor.addEventListener("dragover", (event, manager3) => {
@@ -146,8 +147,8 @@ function DragDropProvider(_a) {
     manager2.monitor.addEventListener(
       "collision",
       (event, manager3) => {
-        var _a4;
-        return (_a4 = handleCollision.current) == null ? void 0 : _a4.call(handleCollision, event, manager3);
+        var _a5;
+        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager3);
       }
     );
     react.startTransition(() => setManager(manager2));
@@ -176,8 +177,8 @@ function useDragDropManager() {
 
 // src/core/hooks/useInstance.ts
 function useInstance(initializer) {
-  var _a;
-  const manager = (_a = useDragDropManager()) != null ? _a : void 0;
+  var _a2;
+  const manager = (_a2 = useDragDropManager()) != null ? _a2 : void 0;
   const [instance] = react.useState(() => initializer(manager));
   if (instance.manager !== manager) {
     instance.manager = manager;
@@ -215,8 +216,8 @@ function useDraggable(input) {
   hooks.useOnValueChange(
     input.feedback,
     () => {
-      var _a;
-      return draggable.feedback = (_a = input.feedback) != null ? _a : "default";
+      var _a2;
+      return draggable.feedback = (_a2 = input.feedback) != null ? _a2 : "default";
     }
   );
   hooks.useOnValueChange(
@@ -242,8 +243,8 @@ 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)) {
+        var _a2, _b;
+        if (!element2 && ((_a2 = draggable.element) == null ? void 0 : _a2.isConnected) && !((_b = draggable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
           return;
         }
         draggable.element = element2 != null ? element2 : void 0;
@@ -316,6 +317,207 @@ function Children({
 }) {
   return children(hooks.useDeepSignal(source));
 }
+var __create = Object.create;
+var __defProp2 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp2(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self) ;
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = 2 , key = __decoratorStrings[k + 5];
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = ((target = target.prototype), __getOwnPropDesc(target , name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+    }
+    it = (0, decorators[i])(desc[key]  , ctx), done._ = 1;
+    __expectFn(it) && (desc[key] = it );
+  }
+  return desc && __defProp2(target, name, desc), target;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var Point = class _Point {
+  /**
+   * @param {number} Coordinate of the point on the horizontal axis
+   * @param {number} Coordinate of the point on the vertical axis
+   */
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+  /**
+   * Returns the delta between this point and another point.
+   *
+   * @param {Point} a - A point
+   * @param {Point} b - Another point
+   */
+  static delta(a, b) {
+    return new _Point(a.x - b.x, a.y - b.y);
+  }
+  /**
+   * Returns the distance (hypotenuse) between this point and another point.
+   *
+   * @param {Point} a - A point
+   * @param {Point} b - Another point
+   */
+  static distance(a, b) {
+    return Math.hypot(a.x - b.x, a.y - b.y);
+  }
+  /**
+   * Returns true if both points are equal.
+   *
+   * @param {Point} a - A point
+   * @param {Point} b - Another point
+   */
+  static equals(a, b) {
+    return a.x === b.x && a.y === b.y;
+  }
+  static from({ x, y }) {
+    return new _Point(x, y);
+  }
+};
+var _direction_dec;
+var _delta_dec;
+var _a;
+var _timestamp;
+var _init;
+var Position = class extends (_a = state.ValueHistory, _delta_dec = [state.derived], _direction_dec = [state.derived], _a) {
+  constructor(initialValue) {
+    const point = Point.from(initialValue);
+    super(point, (a, b) => Point.equals(a, b));
+    __runInitializers(_init, 5, this);
+    __privateAdd(this, _timestamp, 0);
+    this.velocity = { x: 0, y: 0 };
+  }
+  get delta() {
+    return Point.delta(this.current, this.initial);
+  }
+  get direction() {
+    const { current, previous } = this;
+    if (!previous) return null;
+    const delta = {
+      x: current.x - previous.x,
+      y: current.y - previous.y
+    };
+    if (!delta.x && !delta.y) {
+      return null;
+    }
+    if (Math.abs(delta.x) > Math.abs(delta.y)) {
+      return delta.x > 0 ? "right" : "left";
+    }
+    return delta.y > 0 ? "down" : "up";
+  }
+  get current() {
+    return super.current;
+  }
+  set current(coordinates) {
+    const { current } = this;
+    const point = Point.from(coordinates);
+    const delta = {
+      x: point.x - current.x,
+      y: point.y - current.y
+    };
+    const timestamp = Date.now();
+    const timeDelta = timestamp - __privateGet(this, _timestamp);
+    const velocity = (delta2) => Math.round(delta2 / timeDelta * 100);
+    state.batch(() => {
+      __privateSet(this, _timestamp, timestamp);
+      this.velocity = {
+        x: velocity(delta.x),
+        y: velocity(delta.y)
+      };
+      super.current = point;
+    });
+  }
+  reset(coordinates = this.defaultValue) {
+    super.reset(Point.from(coordinates));
+    this.velocity = { x: 0, y: 0 };
+  }
+};
+_init = __decoratorStart(_a);
+_timestamp = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 2, "delta", _delta_dec, Position);
+__decorateElement(_init, 2, "direction", _direction_dec, Position);
+__decoratorMetadata(_init, Position);
+var Axis = /* @__PURE__ */ ((Axis2) => {
+  Axis2["Horizontal"] = "x";
+  Axis2["Vertical"] = "y";
+  return Axis2;
+})(Axis || {});
+Object.values(Axis);
+var pointerIntersection = ({
+  dragOperation,
+  droppable
+}) => {
+  const pointerCoordinates = dragOperation.position.current;
+  if (!pointerCoordinates) {
+    return null;
+  }
+  const { id } = droppable;
+  if (!droppable.shape) {
+    return null;
+  }
+  if (droppable.shape.containsPoint(pointerCoordinates)) {
+    const distance = Point.distance(droppable.shape.center, pointerCoordinates);
+    return {
+      id,
+      value: 1 / distance,
+      type: abstract.CollisionType.PointerIntersection,
+      priority: abstract.CollisionPriority.High
+    };
+  }
+  return null;
+};
+var shapeIntersection = ({
+  dragOperation,
+  droppable
+}) => {
+  const { shape } = dragOperation;
+  if (!droppable.shape || !(shape == null ? void 0 : shape.current)) {
+    return null;
+  }
+  const intersectionArea = shape.current.intersectionArea(droppable.shape);
+  if (intersectionArea) {
+    const { position } = dragOperation;
+    const distance = Point.distance(droppable.shape.center, position.current);
+    const intersectionRatio = intersectionArea / (shape.current.area + droppable.shape.area - intersectionArea);
+    const value = intersectionRatio / distance;
+    return {
+      id: droppable.id,
+      value,
+      type: abstract.CollisionType.ShapeIntersection,
+      priority: abstract.CollisionPriority.Normal
+    };
+  }
+  return null;
+};
+var defaultCollisionDetection = (args) => {
+  var _a2;
+  return (_a2 = pointerIntersection(args)) != null ? _a2 : shapeIntersection(args);
+};
+
+// src/core/droppable/useDroppable.ts
 function useDroppable(input) {
   const { collisionDetector, data, disabled, element, id, accept, type } = input;
   const droppable = useInstance(
@@ -330,11 +532,19 @@ function useDroppable(input) {
   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);
-  hooks.useOnValueChange(collisionDetector, () => droppable.id = id);
+  hooks.useOnValueChange(
+    accept,
+    () => droppable.accept = accept,
+    void 0,
+    state.deepEqual
+  );
+  hooks.useOnValueChange(
+    collisionDetector,
+    () => droppable.collisionDetector = collisionDetector != null ? collisionDetector : defaultCollisionDetection
+  );
   hooks.useOnValueChange(data, () => data && (droppable.data = data));
   hooks.useOnValueChange(disabled, () => droppable.disabled = disabled === true);
-  hooks.useOnValueChange(type, () => droppable.id = id);
+  hooks.useOnValueChange(type, () => droppable.type = type);
   return {
     droppable: trackedDroppalbe,
     get isDropTarget() {
@@ -342,8 +552,8 @@ function useDroppable(input) {
     },
     ref: react.useCallback(
       (element2) => {
-        var _a, _b;
-        if (!element2 && ((_a = droppable.element) == null ? void 0 : _a.isConnected) && !((_b = droppable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
+        var _a2, _b;
+        if (!element2 && ((_a2 = droppable.element) == null ? void 0 : _a2.isConnected) && !((_b = droppable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
           return;
         }
         droppable.element = element2 != null ? element2 : void 0;

package/index.js

@@ -2,9 +2,10 @@ import { createContext, useState, useEffect, startTransition, useContext, useCal
 import { DragDropManager, defaultPreset, Draggable, Feedback, Droppable } from '@dnd-kit/dom';
 export { KeyboardSensor, PointerSensor } from '@dnd-kit/dom';
 import { useLatest, useOnValueChange, useIsomorphicLayoutEffect, useDeepSignal, useOnElementChange, useComputed, useConstant } from '@dnd-kit/react/hooks';
-import { deepEqual } from '@dnd-kit/state';
+import { deepEqual, ValueHistory, derived, batch } from '@dnd-kit/state';
 import { jsx } from 'react/jsx-runtime';
 import { currentValue } from '@dnd-kit/react/utilities';
+import { CollisionType, CollisionPriority } from '@dnd-kit/abstract';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -48,15 +49,15 @@ function useRenderer() {
   const resolver = useRef(null);
   const renderer = useConstant(() => ({
     get rendering() {
-      var _a;
-      return (_a = rendering.current) != null ? _a : Promise.resolve();
+      var _a2;
+      return (_a2 = rendering.current) != null ? _a2 : Promise.resolve();
     }
   }));
   useOnValueChange(
     transitionCount,
     () => {
-      var _a;
-      (_a = resolver.current) == null ? void 0 : _a.call(resolver);
+      var _a2;
+      (_a2 = resolver.current) == null ? void 0 : _a2.call(resolver);
       rendering.current = null;
     },
     useLayoutEffect
@@ -77,8 +78,8 @@ function useRenderer() {
   };
 }
 var options = [void 0, deepEqual];
-function DragDropProvider(_a) {
-  var _b = _a, {
+function DragDropProvider(_a2) {
+  var _b = _a2, {
     children,
     onCollision,
     onBeforeDragStart,
@@ -95,10 +96,10 @@ function DragDropProvider(_a) {
     "onDragOver",
     "onDragEnd"
   ]);
-  var _a2;
+  var _a3;
   const { renderer, trackRendering } = useRenderer();
   const [manager, setManager] = useState(
-    (_a2 = input.manager) != null ? _a2 : null
+    (_a3 = input.manager) != null ? _a3 : null
   );
   const { plugins, modifiers, sensors } = input;
   const handleBeforeDragStart = useLatest(onBeforeDragStart);
@@ -108,8 +109,8 @@ function DragDropProvider(_a) {
   const handleDragEnd = useLatest(onDragEnd);
   const handleCollision = useLatest(onCollision);
   useEffect(() => {
-    var _a3;
-    const manager2 = (_a3 = input.manager) != null ? _a3 : new DragDropManager(input);
+    var _a4;
+    const manager2 = (_a4 = input.manager) != null ? _a4 : new DragDropManager(input);
     manager2.renderer = renderer;
     manager2.monitor.addEventListener("beforedragstart", (event, manager3) => {
       const callback = handleBeforeDragStart.current;
@@ -120,8 +121,8 @@ function DragDropProvider(_a) {
     manager2.monitor.addEventListener(
       "dragstart",
       (event, manager3) => {
-        var _a4;
-        return (_a4 = handleDragStart.current) == null ? void 0 : _a4.call(handleDragStart, event, manager3);
+        var _a5;
+        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager3);
       }
     );
     manager2.monitor.addEventListener("dragover", (event, manager3) => {
@@ -145,8 +146,8 @@ function DragDropProvider(_a) {
     manager2.monitor.addEventListener(
       "collision",
       (event, manager3) => {
-        var _a4;
-        return (_a4 = handleCollision.current) == null ? void 0 : _a4.call(handleCollision, event, manager3);
+        var _a5;
+        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager3);
       }
     );
     startTransition(() => setManager(manager2));
@@ -175,8 +176,8 @@ function useDragDropManager() {
 
 // src/core/hooks/useInstance.ts
 function useInstance(initializer) {
-  var _a;
-  const manager = (_a = useDragDropManager()) != null ? _a : void 0;
+  var _a2;
+  const manager = (_a2 = useDragDropManager()) != null ? _a2 : void 0;
   const [instance] = useState(() => initializer(manager));
   if (instance.manager !== manager) {
     instance.manager = manager;
@@ -214,8 +215,8 @@ function useDraggable(input) {
   useOnValueChange(
     input.feedback,
     () => {
-      var _a;
-      return draggable.feedback = (_a = input.feedback) != null ? _a : "default";
+      var _a2;
+      return draggable.feedback = (_a2 = input.feedback) != null ? _a2 : "default";
     }
   );
   useOnValueChange(
@@ -241,8 +242,8 @@ 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)) {
+        var _a2, _b;
+        if (!element2 && ((_a2 = draggable.element) == null ? void 0 : _a2.isConnected) && !((_b = draggable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
           return;
         }
         draggable.element = element2 != null ? element2 : void 0;
@@ -315,6 +316,207 @@ function Children({
 }) {
   return children(useDeepSignal(source));
 }
+var __create = Object.create;
+var __defProp2 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp2(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self) ;
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = 2 , key = __decoratorStrings[k + 5];
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = ((target = target.prototype), __getOwnPropDesc(target , name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+    }
+    it = (0, decorators[i])(desc[key]  , ctx), done._ = 1;
+    __expectFn(it) && (desc[key] = it );
+  }
+  return desc && __defProp2(target, name, desc), target;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var Point = class _Point {
+  /**
+   * @param {number} Coordinate of the point on the horizontal axis
+   * @param {number} Coordinate of the point on the vertical axis
+   */
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+  /**
+   * Returns the delta between this point and another point.
+   *
+   * @param {Point} a - A point
+   * @param {Point} b - Another point
+   */
+  static delta(a, b) {
+    return new _Point(a.x - b.x, a.y - b.y);
+  }
+  /**
+   * Returns the distance (hypotenuse) between this point and another point.
+   *
+   * @param {Point} a - A point
+   * @param {Point} b - Another point
+   */
+  static distance(a, b) {
+    return Math.hypot(a.x - b.x, a.y - b.y);
+  }
+  /**
+   * Returns true if both points are equal.
+   *
+   * @param {Point} a - A point
+   * @param {Point} b - Another point
+   */
+  static equals(a, b) {
+    return a.x === b.x && a.y === b.y;
+  }
+  static from({ x, y }) {
+    return new _Point(x, y);
+  }
+};
+var _direction_dec;
+var _delta_dec;
+var _a;
+var _timestamp;
+var _init;
+var Position = class extends (_a = ValueHistory, _delta_dec = [derived], _direction_dec = [derived], _a) {
+  constructor(initialValue) {
+    const point = Point.from(initialValue);
+    super(point, (a, b) => Point.equals(a, b));
+    __runInitializers(_init, 5, this);
+    __privateAdd(this, _timestamp, 0);
+    this.velocity = { x: 0, y: 0 };
+  }
+  get delta() {
+    return Point.delta(this.current, this.initial);
+  }
+  get direction() {
+    const { current, previous } = this;
+    if (!previous) return null;
+    const delta = {
+      x: current.x - previous.x,
+      y: current.y - previous.y
+    };
+    if (!delta.x && !delta.y) {
+      return null;
+    }
+    if (Math.abs(delta.x) > Math.abs(delta.y)) {
+      return delta.x > 0 ? "right" : "left";
+    }
+    return delta.y > 0 ? "down" : "up";
+  }
+  get current() {
+    return super.current;
+  }
+  set current(coordinates) {
+    const { current } = this;
+    const point = Point.from(coordinates);
+    const delta = {
+      x: point.x - current.x,
+      y: point.y - current.y
+    };
+    const timestamp = Date.now();
+    const timeDelta = timestamp - __privateGet(this, _timestamp);
+    const velocity = (delta2) => Math.round(delta2 / timeDelta * 100);
+    batch(() => {
+      __privateSet(this, _timestamp, timestamp);
+      this.velocity = {
+        x: velocity(delta.x),
+        y: velocity(delta.y)
+      };
+      super.current = point;
+    });
+  }
+  reset(coordinates = this.defaultValue) {
+    super.reset(Point.from(coordinates));
+    this.velocity = { x: 0, y: 0 };
+  }
+};
+_init = __decoratorStart(_a);
+_timestamp = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 2, "delta", _delta_dec, Position);
+__decorateElement(_init, 2, "direction", _direction_dec, Position);
+__decoratorMetadata(_init, Position);
+var Axis = /* @__PURE__ */ ((Axis2) => {
+  Axis2["Horizontal"] = "x";
+  Axis2["Vertical"] = "y";
+  return Axis2;
+})(Axis || {});
+Object.values(Axis);
+var pointerIntersection = ({
+  dragOperation,
+  droppable
+}) => {
+  const pointerCoordinates = dragOperation.position.current;
+  if (!pointerCoordinates) {
+    return null;
+  }
+  const { id } = droppable;
+  if (!droppable.shape) {
+    return null;
+  }
+  if (droppable.shape.containsPoint(pointerCoordinates)) {
+    const distance = Point.distance(droppable.shape.center, pointerCoordinates);
+    return {
+      id,
+      value: 1 / distance,
+      type: CollisionType.PointerIntersection,
+      priority: CollisionPriority.High
+    };
+  }
+  return null;
+};
+var shapeIntersection = ({
+  dragOperation,
+  droppable
+}) => {
+  const { shape } = dragOperation;
+  if (!droppable.shape || !(shape == null ? void 0 : shape.current)) {
+    return null;
+  }
+  const intersectionArea = shape.current.intersectionArea(droppable.shape);
+  if (intersectionArea) {
+    const { position } = dragOperation;
+    const distance = Point.distance(droppable.shape.center, position.current);
+    const intersectionRatio = intersectionArea / (shape.current.area + droppable.shape.area - intersectionArea);
+    const value = intersectionRatio / distance;
+    return {
+      id: droppable.id,
+      value,
+      type: CollisionType.ShapeIntersection,
+      priority: CollisionPriority.Normal
+    };
+  }
+  return null;
+};
+var defaultCollisionDetection = (args) => {
+  var _a2;
+  return (_a2 = pointerIntersection(args)) != null ? _a2 : shapeIntersection(args);
+};
+
+// src/core/droppable/useDroppable.ts
 function useDroppable(input) {
   const { collisionDetector, data, disabled, element, id, accept, type } = input;
   const droppable = useInstance(
@@ -329,11 +531,19 @@ function useDroppable(input) {
   const trackedDroppalbe = useDeepSignal(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(
+    accept,
+    () => droppable.accept = accept,
+    void 0,
+    deepEqual
+  );
+  useOnValueChange(
+    collisionDetector,
+    () => droppable.collisionDetector = collisionDetector != null ? collisionDetector : defaultCollisionDetection
+  );
   useOnValueChange(data, () => data && (droppable.data = data));
   useOnValueChange(disabled, () => droppable.disabled = disabled === true);
-  useOnValueChange(type, () => droppable.id = id);
+  useOnValueChange(type, () => droppable.type = type);
   return {
     droppable: trackedDroppalbe,
     get isDropTarget() {
@@ -341,8 +551,8 @@ function useDroppable(input) {
     },
     ref: useCallback(
       (element2) => {
-        var _a, _b;
-        if (!element2 && ((_a = droppable.element) == null ? void 0 : _a.isConnected) && !((_b = droppable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
+        var _a2, _b;
+        if (!element2 && ((_a2 = droppable.element) == null ? void 0 : _a2.isConnected) && !((_b = droppable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
           return;
         }
         droppable.element = element2 != null ? element2 : void 0;

package/package.json

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