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

package/index.js

@@ -1,7 +1,7 @@
 import { configurator, Plugin, CorePlugin, Sensor, DragDropManager as DragDropManager$1, Draggable as Draggable$1, descriptor, Droppable as Droppable$1 } from '@dnd-kit/abstract';
-import { ScrollDirection, isElement, generateUniqueId, isSafari, getDocument, getFrameTransform, DOMRectangle, Styles, getComputedStyles, isKeyboardEvent, parseTranslate, supportsPopover, showPopover, getWindow, supportsStyle, isKeyframeEffect, animateTransform, canScroll, detectScrollIntent, scheduler, getElementFromPoint, getScrollableAncestors, Listeners, scrollIntoViewIfNeeded, isHTMLElement, cloneElement, ProxiedElements, getFrameElement, isPointerEvent, PositionObserver } from '@dnd-kit/dom/utilities';
+import { ScrollDirection, isElement, generateUniqueId, isSafari, getDocument, getFrameTransform, DOMRectangle, Styles, getComputedStyles, isKeyboardEvent, parseTranslate, supportsPopover, showPopover, getWindow, supportsStyle, canScroll, detectScrollIntent, scheduler, getElementFromPoint, getScrollableAncestors, Listeners, scrollIntoViewIfNeeded, isHTMLElement, cloneElement, ProxiedElements, getFrameElement, isKeyframeEffect, animateTransform, isPointerEvent, PositionObserver } from '@dnd-kit/dom/utilities';
 import { effects, computed, effect, untracked, deepEqual, signal, reactive, batch } from '@dnd-kit/state';
-import { Rectangle, Axes, exceedsDistance } from '@dnd-kit/geometry';
+import { Axes, exceedsDistance, Rectangle } from '@dnd-kit/geometry';
 import { defaultCollisionDetection } from '@dnd-kit/collision';
 
 var __create = Object.create;
@@ -707,69 +707,74 @@ render_fn = function() {
         onComplete == null ? void 0 : onComplete();
         return;
       }
-      manager.renderer.rendering.then(() => {
-        showPopover(feedbackElement);
-        const target = placeholder != null ? placeholder : element;
-        const animations = feedbackElement.getAnimations();
-        if (animations.length) {
-          animations.forEach((animation) => {
-            const { effect: effect9 } = animation;
-            if (isKeyframeEffect(effect9) && effect9.getKeyframes().some((keyframe) => keyframe.translate)) {
-              animation.finish();
+      const dropAnimation = () => {
+        {
+          showPopover(feedbackElement);
+          const target = placeholder != null ? placeholder : element;
+          const animations = feedbackElement.getAnimations();
+          if (animations.length) {
+            animations.forEach((animation) => {
+              const { effect: effect9 } = animation;
+              if (isKeyframeEffect(effect9) && effect9.getKeyframes().some((keyframe) => keyframe.translate)) {
+                animation.finish();
+              }
+            });
+          }
+          const options2 = {
+            frameTransform: isSameFrame(feedbackElement, target) ? null : void 0
+          };
+          const current = new DOMRectangle(feedbackElement, options2);
+          const final = new DOMRectangle(target, options2);
+          const delta2 = 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`
+            ]
+          } : {};
+          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 DOMRectangle(feedbackElement, options2);
-        const final = new DOMRectangle(target, options2);
-        const delta2 = 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`
-          ]
-        } : {};
-        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();