@dnd-kit/dom 0.1.13 → 0.1.14-beta-20250520125507

package/index.js

@@ -1,5 +1,5 @@
 import { configurator, Sensor, Plugin, CorePlugin, DragDropManager as DragDropManager$1, Draggable as Draggable$1, Droppable as Droppable$1, descriptor } from '@dnd-kit/abstract';
-import { ScrollDirection, Listeners, isElement, scrollIntoViewIfNeeded, DOMRectangle, getDocument, getWindow, isHTMLElement, getFrameTransform, scheduler, isTextInput, isKeyboardEvent, isPointerEvent, canScroll, detectScrollIntent, getElementFromPoint, getScrollableAncestors, generateUniqueId, isSafari, Styles, getComputedStyles, parseTranslate, supportsPopover, showPopover, supportsStyle, getFrameElement, cloneElement, isKeyframeEffect, animateTransform, ProxiedElements, PositionObserver } from '@dnd-kit/dom/utilities';
+import { ScrollDirection, Listeners, isElement, scrollIntoViewIfNeeded, DOMRectangle, getDocument, isHTMLElement, getFrameTransform, scheduler, isTextInput, isKeyboardEvent, isPointerEvent, canScroll, detectScrollIntent, getElementFromPoint, getScrollableAncestors, generateUniqueId, isSafari, Styles, getComputedStyles, parseTranslate, supportsPopover, showPopover, getWindow, supportsStyle, getFrameElement, cloneElement, isKeyframeEffect, animateTransform, ProxiedElements, PositionObserver } from '@dnd-kit/dom/utilities';
 import { effect, computed, deepEqual, signal, batch, untracked, reactive } from '@dnd-kit/state';
 import { exceedsDistance, Axes, Point, Rectangle } from '@dnd-kit/geometry';
 import { defaultCollisionDetection } from '@dnd-kit/collision';
@@ -599,7 +599,8 @@ render_fn = function() {
   const initialTranslate = (_b2 = initial.translate) != null ? _b2 : { x: 0, y: 0 };
   const tX = transform.x * frameTransform.scaleX + initialTranslate.x;
   const tY = transform.y * frameTransform.scaleY + initialTranslate.y;
-  const translateString = `${tX}px, ${tY}px, 0`;
+  const translateString = `${tX}px ${tY}px 0`;
+  const transitionString = transition ? `${transition}, translate 0ms linear` : "";
   styles.set(
     {
       width: width - widthOffset,
@@ -607,8 +608,8 @@ render_fn = function() {
       top: projected.top,
       left: projected.left,
       translate: translateString,
+      transition: transitionString,
       scale: crossFrame ? `${scaleDelta.x} ${scaleDelta.y}` : "",
-      transition,
       "transform-origin": `${transformOrigin.x * 100}% ${transformOrigin.y * 100}%`
     },
     CSS_PREFIX
@@ -654,9 +655,17 @@ render_fn = function() {
         cell.style.width = `${placeholderCell.offsetWidth}px`;
       }
     }
-    dragOperation.shape = new DOMRectangle(element);
+    dragOperation.shape = new DOMRectangle(feedbackElement);
   });
-  dragOperation.shape = new DOMRectangle(feedbackElement);
+  const initialShape = new DOMRectangle(feedbackElement);
+  untracked(() => dragOperation.shape = initialShape);
+  const feedbackWindow = getWindow(feedbackElement);
+  const handleWindowResize = (event) => {
+    this.manager.actions.stop({ event });
+  };
+  if (isKeyboardOperation) {
+    feedbackWindow.addEventListener("resize", handleWindowResize);
+  }
   if (untracked(() => source.status) === "idle") {
     requestAnimationFrame(() => source.status = "dragging");
   }
@@ -742,6 +751,12 @@ render_fn = function() {
         x: transform2.x / frameTransform.scaleX + initialTranslate2.x,
         y: transform2.y / frameTransform.scaleY + initialTranslate2.y
       };
+      const previousTranslate = state.current.translate;
+      const modifiers = untracked(() => dragOperation.modifiers);
+      const currentShape = untracked(() => {
+        var _a6;
+        return (_a6 = dragOperation.shape) == null ? void 0 : _a6.current;
+      });
       const translateTransition = isKeyboardOperation ? "250ms cubic-bezier(0.25, 1, 0.5, 1)" : "0ms linear";
       styles.set(
         {
@@ -751,13 +766,7 @@ render_fn = function() {
         CSS_PREFIX
       );
       elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
-      const previousTranslate = state.current.translate;
-      const modifiers = untracked(() => dragOperation.modifiers);
-      const currentShape = untracked(() => {
-        var _a6;
-        return (_a6 = dragOperation.shape) == null ? void 0 : _a6.current;
-      });
-      if (currentShape && previousTranslate && !modifiers.length) {
+      if (currentShape && currentShape !== initialShape && previousTranslate && !modifiers.length) {
         const delta2 = Point.delta(translate2, previousTranslate);
         dragOperation.shape = Rectangle.from(
           currentShape.boundingRectangle
@@ -785,6 +794,7 @@ render_fn = function() {
     elementMutationObserver == null ? void 0 : elementMutationObserver.disconnect();
     documentMutationObserver == null ? void 0 : documentMutationObserver.disconnect();
     resizeObserver.disconnect();
+    feedbackWindow.removeEventListener("resize", handleWindowResize);
     if (supportsPopover(feedbackElement)) {
       feedbackElement.removeEventListener(
         "beforetoggle",
@@ -893,7 +903,7 @@ render_fn = function() {
 injectStyles_fn = function() {
   var _a4, _b2;
   const { status, source, target } = this.manager.dragOperation;
-  if (status.initialized) {
+  if (status.initializing) {
     const sourceDocument = getDocument((_a4 = source == null ? void 0 : source.element) != null ? _a4 : null);
     const targetDocument = getDocument((_b2 = target == null ? void 0 : target.element) != null ? _b2 : null);
     const documents = /* @__PURE__ */ new Set([sourceDocument, targetDocument]);
@@ -1372,7 +1382,6 @@ var _KeyboardSensor = class _KeyboardSensor extends Sensor {
     if (controller.signal.aborted) return this.cleanup();
     this.sideEffects();
     const sourceDocument = getDocument(element);
-    const sourceWindow = getWindow(sourceDocument);
     const listeners = [
       this.listeners.bind(sourceDocument, [
         {
@@ -1380,9 +1389,6 @@ var _KeyboardSensor = class _KeyboardSensor extends Sensor {
           listener: (event2) => this.handleKeyDown(event2, source, options),
           options: { capture: true }
         }
-      ]),
-      this.listeners.bind(sourceWindow, [
-        { type: "resize", listener: () => this.handleEnd(event, true) }
       ])
     ];
     __privateGet(this, _cleanupFunctions).push(...listeners);