@dnd-kit/dom 0.1.4 → 0.1.5-beta-20250429125415

package/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var abstract = require('@dnd-kit/abstract');
-var utilities = require('@dnd-kit/dom/utilities');
 var state = require('@dnd-kit/state');
+var utilities = require('@dnd-kit/dom/utilities');
 var geometry = require('@dnd-kit/geometry');
 var collision = require('@dnd-kit/collision');
 
@@ -709,69 +709,74 @@ render_fn = function() {
         onComplete == null ? void 0 : onComplete();
         return;
       }
-      manager.renderer.rendering.then(() => {
-        utilities.showPopover(feedbackElement);
-        const target = placeholder != null ? placeholder : element;
-        const animations = feedbackElement.getAnimations();
-        if (animations.length) {
-          animations.forEach((animation) => {
-            const { effect: effect9 } = animation;
-            if (utilities.isKeyframeEffect(effect9) && effect9.getKeyframes().some((keyframe) => keyframe.translate)) {
-              animation.finish();
+      const dropAnimation = () => {
+        {
+          utilities.showPopover(feedbackElement);
+          const target = placeholder != null ? placeholder : element;
+          const animations = feedbackElement.getAnimations();
+          if (animations.length) {
+            animations.forEach((animation) => {
+              const { effect: effect9 } = animation;
+              if (utilities.isKeyframeEffect(effect9) && effect9.getKeyframes().some((keyframe) => keyframe.translate)) {
+                animation.finish();
+              }
+            });
+          }
+          const options2 = {
+            frameTransform: isSameFrame(feedbackElement, target) ? null : void 0
+          };
+          const current = new utilities.DOMRectangle(feedbackElement, options2);
+          const final = new utilities.DOMRectangle(target, options2);
+          const delta2 = geometry.Rectangle.delta(current, final, source.alignment);
+          const finalTranslate = {
+            x: translate2.x - delta2.x,
+            y: translate2.y - delta2.y
+          };
+          const heightKeyframes = Math.round(current.intrinsicHeight) !== Math.round(final.intrinsicHeight) ? {
+            minHeight: [
+              `${current.intrinsicHeight}px`,
+              `${final.intrinsicHeight}px`
+            ],
+            maxHeight: [
+              `${current.intrinsicHeight}px`,
+              `${final.intrinsicHeight}px`
+            ]
+          } : {};
+          const widthKeyframes = Math.round(current.intrinsicWidth) !== Math.round(final.intrinsicWidth) ? {
+            minWidth: [
+              `${current.intrinsicWidth}px`,
+              `${final.intrinsicWidth}px`
+            ],
+            maxWidth: [
+              `${current.intrinsicWidth}px`,
+              `${final.intrinsicWidth}px`
+            ]
+          } : {};
+          utilities.animateTransform({
+            element: feedbackElement,
+            keyframes: __spreadProps(__spreadValues(__spreadValues({}, heightKeyframes), widthKeyframes), {
+              translate: [
+                `${translate2.x}px ${translate2.y}px 0`,
+                `${finalTranslate.x}px ${finalTranslate.y}px 0`
+              ]
+            }),
+            options: {
+              duration: moved || feedbackElement !== element ? 250 : 0,
+              easing: "ease"
+            },
+            onReady() {
+              styles.remove(["translate"], CSS_PREFIX);
+            },
+            onFinish() {
+              onComplete == null ? void 0 : onComplete();
+              requestAnimationFrame(restoreFocus);
             }
           });
         }
-        const options2 = {
-          frameTransform: isSameFrame(feedbackElement, target) ? null : void 0
-        };
-        const current = new utilities.DOMRectangle(feedbackElement, options2);
-        const final = new utilities.DOMRectangle(target, options2);
-        const delta2 = geometry.Rectangle.delta(current, final, source.alignment);
-        const finalTranslate = {
-          x: translate2.x - delta2.x,
-          y: translate2.y - delta2.y
-        };
-        const heightKeyframes = Math.round(current.intrinsicHeight) !== Math.round(final.intrinsicHeight) ? {
-          minHeight: [
-            `${current.intrinsicHeight}px`,
-            `${final.intrinsicHeight}px`
-          ],
-          maxHeight: [
-            `${current.intrinsicHeight}px`,
-            `${final.intrinsicHeight}px`
-          ]
-        } : {};
-        const widthKeyframes = Math.round(current.intrinsicWidth) !== Math.round(final.intrinsicWidth) ? {
-          minWidth: [
-            `${current.intrinsicWidth}px`,
-            `${final.intrinsicWidth}px`
-          ],
-          maxWidth: [
-            `${current.intrinsicWidth}px`,
-            `${final.intrinsicWidth}px`
-          ]
-        } : {};
-        utilities.animateTransform({
-          element: feedbackElement,
-          keyframes: __spreadProps(__spreadValues(__spreadValues({}, heightKeyframes), widthKeyframes), {
-            translate: [
-              `${translate2.x}px ${translate2.y}px 0`,
-              `${finalTranslate.x}px ${finalTranslate.y}px 0`
-            ]
-          }),
-          options: {
-            duration: moved || feedbackElement !== element ? 250 : 0,
-            easing: "ease"
-          },
-          onReady() {
-            styles.remove(["translate"], CSS_PREFIX);
-          },
-          onFinish() {
-            onComplete == null ? void 0 : onComplete();
-            requestAnimationFrame(restoreFocus);
-          }
-        });
-      });
+      };
+      manager.renderer.rendering.then(
+        () => requestAnimationFrame(dropAnimation)
+      );
     }
   });
   return () => cleanup == null ? void 0 : cleanup();
@@ -1309,6 +1314,24 @@ _cleanupFunctions = new WeakMap();
 function isKeycode(event, codes) {
   return codes.includes(event.code);
 }
+var defaults = Object.freeze({
+  activationConstraints(event, source) {
+    var _a4;
+    const { pointerType, target } = event;
+    if (pointerType === "mouse" && utilities.isElement(target) && (source.handle === target || ((_a4 = source.handle) == null ? void 0 : _a4.contains(target)))) {
+      return void 0;
+    }
+    if (pointerType === "touch") {
+      return {
+        delay: { value: 250, tolerance: 5 }
+      };
+    }
+    return {
+      delay: { value: 200, tolerance: 10 },
+      distance: { value: 5 }
+    };
+  }
+});
 var _cleanup, _clearTimeout;
 var _PointerSensor = class _PointerSensor extends abstract.Sensor {
   constructor(manager, options) {
@@ -1325,19 +1348,27 @@ var _PointerSensor = class _PointerSensor extends abstract.Sensor {
   bind(source, options = this.options) {
     const unbind = state.effect(() => {
       var _a4;
-      const target = (_a4 = source.handle) != null ? _a4 : source.element;
+      const controller = new AbortController();
+      const { signal: signal3 } = controller;
       const listener = (event) => {
         if (utilities.isPointerEvent(event)) {
           this.handlePointerDown(event, source, options);
         }
       };
-      if (target) {
+      let targets = [(_a4 = source.handle) != null ? _a4 : source.element];
+      if (options == null ? void 0 : options.activatorElements) {
+        if (Array.isArray(options.activatorElements)) {
+          targets = options.activatorElements;
+        } else {
+          targets = options.activatorElements(source);
+        }
+      }
+      for (const target of targets) {
+        if (!target) continue;
         patchWindow(target.ownerDocument.defaultView);
-        target.addEventListener("pointerdown", listener);
-        return () => {
-          target.removeEventListener("pointerdown", listener);
-        };
+        target.addEventListener("pointerdown", listener, { signal: signal3 });
       }
+      return () => controller.abort();
     });
     return unbind;
   }
@@ -1352,7 +1383,7 @@ var _PointerSensor = class _PointerSensor extends abstract.Sensor {
       x: event.clientX * offset.scaleX + offset.x,
       y: event.clientY * offset.scaleY + offset.y
     };
-    const { activationConstraints } = options;
+    const { activationConstraints = defaults.activationConstraints } = options;
     const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
     event.sensor = this;
     if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
@@ -1525,6 +1556,7 @@ var _PointerSensor = class _PointerSensor extends abstract.Sensor {
 _cleanup = new WeakMap();
 _clearTimeout = new WeakMap();
 _PointerSensor.configure = abstract.configurator(_PointerSensor);
+_PointerSensor.defaults = defaults;
 var PointerSensor = _PointerSensor;
 function isCapturedBySensor(event) {
   return "sensor" in event;
@@ -1550,27 +1582,7 @@ function patchWindow(window) {
 var defaultPreset = {
   modifiers: [],
   plugins: [Accessibility, AutoScroller, Cursor, Feedback, PreventSelection],
-  sensors: [
-    PointerSensor.configure({
-      activationConstraints(event, source) {
-        var _a4;
-        const { pointerType, target } = event;
-        if (pointerType === "mouse" && utilities.isElement(target) && (source.handle === target || ((_a4 = source.handle) == null ? void 0 : _a4.contains(target)))) {
-          return void 0;
-        }
-        if (pointerType === "touch") {
-          return {
-            delay: { value: 250, tolerance: 5 }
-          };
-        }
-        return {
-          delay: { value: 200, tolerance: 10 },
-          distance: { value: 5 }
-        };
-      }
-    }),
-    KeyboardSensor
-  ]
+  sensors: [PointerSensor, KeyboardSensor]
 };
 var DragDropManager = class extends abstract.DragDropManager {
   constructor(input = {}) {