@dnd-kit/dom 0.1.19 → 0.1.20-beta-20250611154151

package/index.cjs

@@ -524,7 +524,6 @@ render_fn = function() {
     x: elementFrameTransform.scaleX / frameTransform.scaleX,
     y: elementFrameTransform.scaleY / frameTransform.scaleY
   };
-  let cleanup;
   let { width, height, top, left } = shape;
   if (crossFrame) {
     width = width / scaleDelta.x;
@@ -749,48 +748,6 @@ render_fn = function() {
       subtree: true
     });
   }
-  const cleanupEffect = state.effect(() => {
-    var _a5;
-    const { transform: transform2, status: status2 } = dragOperation;
-    if (!transform2.x && !transform2.y && !state$1.current.translate) {
-      return;
-    }
-    if (status2.dragging) {
-      const initialTranslate2 = (_a5 = initial.translate) != null ? _a5 : { x: 0, y: 0 };
-      const translate2 = {
-        x: transform2.x / frameTransform.scaleX + initialTranslate2.x,
-        y: transform2.y / frameTransform.scaleY + initialTranslate2.y
-      };
-      const previousTranslate = state$1.current.translate;
-      const modifiers = state.untracked(() => dragOperation.modifiers);
-      const currentShape = state.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(
-        {
-          transition: `${transition}, translate ${translateTransition}`,
-          translate: `${translate2.x}px ${translate2.y}px 0`
-        },
-        CSS_PREFIX
-      );
-      elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
-      if (currentShape && currentShape !== initialShape && previousTranslate && !modifiers.length) {
-        const delta2 = geometry.Point.delta(translate2, previousTranslate);
-        dragOperation.shape = geometry.Rectangle.from(
-          currentShape.boundingRectangle
-        ).translate(
-          // Need to take into account frame transform when optimistically updating shape
-          delta2.x * frameTransform.scaleX,
-          delta2.y * frameTransform.scaleY
-        );
-      } else {
-        dragOperation.shape = new utilities.DOMRectangle(feedbackElement);
-      }
-      state$1.current.translate = translate2;
-    }
-  });
   const id = (_c3 = manager.dragOperation.source) == null ? void 0 : _c3.id;
   const restoreFocus = () => {
     var _a5;
@@ -803,8 +760,7 @@ render_fn = function() {
       element2.focus();
     }
   };
-  let dropEffectCleanup;
-  cleanup = () => {
+  const cleanup = () => {
     elementMutationObserver == null ? void 0 : elementMutationObserver.disconnect();
     documentMutationObserver == null ? void 0 : documentMutationObserver.disconnect();
     resizeObserver.disconnect();
@@ -824,95 +780,140 @@ render_fn = function() {
       placeholder.replaceWith(feedbackElement);
     }
     placeholder == null ? void 0 : placeholder.remove();
-    cleanupEffect();
-    dropEffectCleanup == null ? void 0 : dropEffectCleanup();
   };
-  dropEffectCleanup = state.effect(() => {
-    if (dragOperation.status.dropped) {
-      queueMicrotask(() => dropEffectCleanup == null ? void 0 : dropEffectCleanup());
-      const onComplete = cleanup;
-      cleanup = void 0;
-      source.status = "dropping";
-      let translate2 = state$1.current.translate;
-      const moved = translate2 != null;
-      if (!translate2 && element !== feedbackElement) {
-        translate2 = {
-          x: 0,
-          y: 0
-        };
-      }
-      if (!translate2) {
-        onComplete == null ? void 0 : onComplete();
+  const cleanupEffects = state.effects(
+    // Update transform on move
+    () => {
+      var _a5;
+      const { transform: transform2, status: status2 } = dragOperation;
+      if (!transform2.x && !transform2.y && !state$1.current.translate) {
         return;
       }
-      const dropAnimation = () => {
-        var _a5, _b3;
-        {
-          utilities.showPopover(feedbackElement);
-          const [, animation] = (_a5 = utilities.getFinalKeyframe(
-            feedbackElement,
-            (keyframe) => "translate" in keyframe
-          )) != null ? _a5 : [];
-          animation == null ? void 0 : animation.pause();
-          const target = placeholder != null ? placeholder : element;
-          const options2 = {
-            frameTransform: isSameFrame(feedbackElement, target) ? null : void 0
-          };
-          const current = new utilities.DOMRectangle(feedbackElement, options2);
-          const currentTranslate = (_b3 = utilities.parseTranslate(utilities.getComputedStyles(feedbackElement).translate)) != null ? _b3 : translate2;
-          const final = new utilities.DOMRectangle(target, options2);
-          const delta2 = geometry.Rectangle.delta(current, final, source.alignment);
-          const finalTranslate = {
-            x: currentTranslate.x - delta2.x,
-            y: currentTranslate.y - delta2.y
+      if (status2.dragging) {
+        const initialTranslate2 = (_a5 = initial.translate) != null ? _a5 : { x: 0, y: 0 };
+        const translate2 = {
+          x: transform2.x / frameTransform.scaleX + initialTranslate2.x,
+          y: transform2.y / frameTransform.scaleY + initialTranslate2.y
+        };
+        const previousTranslate = state$1.current.translate;
+        const modifiers = state.untracked(() => dragOperation.modifiers);
+        const currentShape = state.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(
+          {
+            transition: `${transition}, translate ${translateTransition}`,
+            translate: `${translate2.x}px ${translate2.y}px 0`
+          },
+          CSS_PREFIX
+        );
+        elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
+        if (currentShape && currentShape !== initialShape && previousTranslate && !modifiers.length) {
+          const delta2 = geometry.Point.delta(translate2, previousTranslate);
+          dragOperation.shape = geometry.Rectangle.from(
+            currentShape.boundingRectangle
+          ).translate(
+            // Need to take into account frame transform when optimistically updating shape
+            delta2.x * frameTransform.scaleX,
+            delta2.y * frameTransform.scaleY
+          );
+        } else {
+          dragOperation.shape = new utilities.DOMRectangle(feedbackElement);
+        }
+        state$1.current.translate = translate2;
+      }
+    },
+    // Drop animation
+    function() {
+      if (dragOperation.status.dropped) {
+        this.dispose();
+        source.status = "dropping";
+        let translate2 = state$1.current.translate;
+        const moved = translate2 != null;
+        if (!translate2 && element !== feedbackElement) {
+          translate2 = {
+            x: 0,
+            y: 0
           };
-          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`
-            ]
-          } : {};
-          styles.set({ transition }, CSS_PREFIX);
-          feedbackElement.setAttribute(DROPPING_ATTRIBUTE, "");
-          elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
-          utilities.animateTransform({
-            element: feedbackElement,
-            keyframes: __spreadProps(__spreadValues(__spreadValues({}, heightKeyframes), widthKeyframes), {
-              translate: [
-                `${currentTranslate.x}px ${currentTranslate.y}px 0`,
-                `${finalTranslate.x}px ${finalTranslate.y}px 0`
-              ]
-            }),
-            options: {
-              duration: moved || feedbackElement !== element ? 250 : 0,
-              easing: "ease"
-            }
-          }).then(() => {
-            feedbackElement.removeAttribute(DROPPING_ATTRIBUTE);
-            animation == null ? void 0 : animation.finish();
-            onComplete == null ? void 0 : onComplete();
-            requestAnimationFrame(restoreFocus);
-          });
         }
-      };
-      manager.renderer.rendering.then(dropAnimation);
+        if (!translate2) {
+          cleanup();
+          return;
+        }
+        const dropAnimation = () => {
+          var _a5, _b3;
+          {
+            utilities.showPopover(feedbackElement);
+            const [, animation] = (_a5 = utilities.getFinalKeyframe(
+              feedbackElement,
+              (keyframe) => "translate" in keyframe
+            )) != null ? _a5 : [];
+            animation == null ? void 0 : animation.pause();
+            const target = placeholder != null ? placeholder : element;
+            const options2 = {
+              frameTransform: isSameFrame(feedbackElement, target) ? null : void 0
+            };
+            const current = new utilities.DOMRectangle(feedbackElement, options2);
+            const currentTranslate = (_b3 = utilities.parseTranslate(utilities.getComputedStyles(feedbackElement).translate)) != null ? _b3 : translate2;
+            const final = new utilities.DOMRectangle(target, options2);
+            const delta2 = geometry.Rectangle.delta(current, final, source.alignment);
+            const finalTranslate = {
+              x: currentTranslate.x - delta2.x,
+              y: currentTranslate.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`
+              ]
+            } : {};
+            styles.set({ transition }, CSS_PREFIX);
+            feedbackElement.setAttribute(DROPPING_ATTRIBUTE, "");
+            elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
+            utilities.animateTransform({
+              element: feedbackElement,
+              keyframes: __spreadProps(__spreadValues(__spreadValues({}, heightKeyframes), widthKeyframes), {
+                translate: [
+                  `${currentTranslate.x}px ${currentTranslate.y}px 0`,
+                  `${finalTranslate.x}px ${finalTranslate.y}px 0`
+                ]
+              }),
+              options: {
+                duration: moved || feedbackElement !== element ? 250 : 0,
+                easing: "ease"
+              }
+            }).then(() => {
+              feedbackElement.removeAttribute(DROPPING_ATTRIBUTE);
+              animation == null ? void 0 : animation.finish();
+              cleanup();
+              requestAnimationFrame(restoreFocus);
+            });
+          }
+        };
+        manager.renderer.rendering.then(dropAnimation);
+      }
     }
-  });
-  return () => cleanup == null ? void 0 : cleanup();
+  );
+  return () => {
+    cleanup();
+    cleanupEffects();
+  };
 };
 injectStyles_fn = function() {
   var _a4, _b2;
@@ -1829,7 +1830,7 @@ var Draggable = class extends (_c = abstract.Draggable, _handle_dec = [state.rea
   constructor(_a4, manager) {
     var _b2 = _a4, {
       element,
-      effects = () => [],
+      effects: effects2 = () => [],
       handle,
       feedback = "default"
     } = _b2, input = __objRest(_b2, [
@@ -1841,7 +1842,7 @@ var Draggable = class extends (_c = abstract.Draggable, _handle_dec = [state.rea
     super(
       __spreadValues({
         effects: () => [
-          ...effects(),
+          ...effects2(),
           () => {
             var _a5, _b3;
             const { manager: manager2 } = this;
@@ -1882,7 +1883,7 @@ __decoratorMetadata(_init4, Draggable);
 var _proxy_dec, _element_dec2, _c2, _init5, _element2, _d, element_get, element_set, _Droppable_instances, _proxy;
 var Droppable = class extends (_c2 = abstract.Droppable, _element_dec2 = [state.reactive], _proxy_dec = [state.reactive], _c2) {
   constructor(_a4, manager) {
-    var _b2 = _a4, { element, effects = () => [] } = _b2, input = __objRest(_b2, ["element", "effects"]);
+    var _b2 = _a4, { element, effects: effects2 = () => [] } = _b2, input = __objRest(_b2, ["element", "effects"]);
     const { collisionDetector = collision.defaultCollisionDetection } = input;
     const updateShape = (boundingClientRect) => {
       const { manager: manager2, element: element2 } = this;
@@ -1904,7 +1905,7 @@ var Droppable = class extends (_c2 = abstract.Droppable, _element_dec2 = [state.
       __spreadProps(__spreadValues({}, input), {
         collisionDetector,
         effects: () => [
-          ...effects(),
+          ...effects2(),
           () => {
             const { element: element2, manager: manager2 } = this;
             if (!manager2) return;