@dnd-kit/dom 0.0.2 → 0.0.3-beta-20240617115949

package/index.js

@@ -1,6 +1,6 @@
 import { Sensor, configurator, Plugin, CorePlugin, DragDropManager as DragDropManager$1, Draggable as Draggable$1, descriptor, Droppable as Droppable$1 } from '@dnd-kit/abstract';
 import { effect, batch, effects, untracked, reactive, computed, deepEqual, signal } from '@dnd-kit/state';
-import { ScrollDirection, Listeners, getDocument, DOMRectangle, Styles, getWindow, createPlaceholder, isKeyboardEvent, supportsPopover, showPopover, supportsStyle, animateTransform, canScroll, detectScrollIntent, scheduler, getScrollableAncestors, scrollIntoViewIfNeeded, getFirstScrollableAncestor } from '@dnd-kit/dom/utilities';
+import { ScrollDirection, Listeners, getDocument, DOMRectangle, Styles, getComputedStyles, createPlaceholder, isKeyboardEvent, parseTranslate, supportsPopover, showPopover, supportsStyle, animateTransform, canScroll, detectScrollIntent, scheduler, getScrollableAncestors, scrollIntoViewIfNeeded, getWindow, getFirstScrollableAncestor } from '@dnd-kit/dom/utilities';
 import { exceedsDistance, Axes } from '@dnd-kit/geometry';
 import { defaultCollisionDetection } from '@dnd-kit/collision';
 
@@ -191,7 +191,7 @@ var Cursor = class extends Plugin {
 var ATTR_PREFIX = "data-dnd-";
 var CSS_PREFIX = "--dnd-";
 var ATTRIBUTE = `${ATTR_PREFIX}dragging`;
-var cssRules = `[${ATTRIBUTE}] {position: fixed !important; pointer-events: none !important; touch-action: none !important; z-index: calc(infinity); will-change: transform;top: var(${CSS_PREFIX}top, 0px) !important;left: var(${CSS_PREFIX}left, 0px) !important;width: var(${CSS_PREFIX}width, auto) !important;height: var(${CSS_PREFIX}height, auto) !important;}[${ATTRIBUTE}][style*="${CSS_PREFIX}translate"] {translate: var(${CSS_PREFIX}translate) !important;}[style*="${CSS_PREFIX}transition"] {transition: var(${CSS_PREFIX}transition) !important;}*:where([${ATTRIBUTE}][popover]){overflow:visible;background:unset;border:unset;margin:unset;padding:unset;color:inherit;}[${ATTRIBUTE}]::backdrop {display: none}`;
+var cssRules = `[${ATTRIBUTE}] {position: fixed !important; pointer-events: none !important; touch-action: none !important; z-index: calc(infinity); will-change: transform;top: var(${CSS_PREFIX}top, 0px) !important;left: var(${CSS_PREFIX}left, 0px) !important;width: var(${CSS_PREFIX}width, auto) !important;height: var(${CSS_PREFIX}height, auto) !important;}[${ATTRIBUTE}][style*="${CSS_PREFIX}translate"] {translate: var(${CSS_PREFIX}translate) !important;}[style*="${CSS_PREFIX}transition"] {transition: var(${CSS_PREFIX}transition) !important;}*:where([${ATTRIBUTE}][popover]){overflow:visible;background:var(${CSS_PREFIX}background);border:var(${CSS_PREFIX}border);margin:unset;padding:unset;color:inherit;}[${ATTRIBUTE}]::backdrop {display: none}`;
 var PLACEHOLDER_ATTRIBUTE = `${ATTR_PREFIX}placeholder`;
 var IGNORED_ATTRIBUTES = [ATTRIBUTE, PLACEHOLDER_ATTRIBUTE, "popover"];
 var IGNORED_STYLES = ["view-transition-name"];
@@ -200,6 +200,7 @@ var Feedback = class extends Plugin {
     super(manager);
     let style;
     let initialCoordinates;
+    let initialTranslate = { x: 0, y: 0 };
     let currentTransform;
     let transformOrigin;
     let moved = false;
@@ -218,7 +219,7 @@ var Feedback = class extends Plugin {
         initialCoordinates = void 0;
         currentTransform = void 0;
         transformOrigin = void 0;
-        moved = false;
+        initialTranslate = { x: 0, y: 0 };
         return;
       }
       if (!source)
@@ -229,15 +230,21 @@ var Feedback = class extends Plugin {
       const shape = new DOMRectangle(element, true);
       const { width, height, top, left } = shape;
       const styles = new Styles(element);
-      const { transition } = getWindow(element).getComputedStyle(element);
+      const { background, border, transition, translate } = getComputedStyles(element);
       const droppable = manager.registry.droppables.get(source.id);
       const clone = feedback === "clone";
-      const placeholder = createPlaceholder(element, clone, {
+      const placeholder = feedback !== "move" ? createPlaceholder(element, clone, {
         [PLACEHOLDER_ATTRIBUTE]: ""
-      });
+      }) : null;
       const isKeyboardOperation = untracked(
         () => isKeyboardEvent(manager.dragOperation.activatorEvent)
       );
+      if (translate !== "none") {
+        const parsedTranslate = parseTranslate(translate);
+        if (parsedTranslate) {
+          initialTranslate = parsedTranslate;
+        }
+      }
       if (!initialCoordinates) {
         initialCoordinates = {
           x: left,
@@ -266,11 +273,14 @@ var Feedback = class extends Plugin {
           height,
           top: projected.top,
           left: projected.left,
+          background,
+          border,
           translate: currentTransform ? `${currentTransform.x}px ${currentTransform.y}px 0` : ""
         },
         CSS_PREFIX
       );
-      element.insertAdjacentElement("afterend", placeholder);
+      if (placeholder)
+        element.insertAdjacentElement("afterend", placeholder);
       if (supportsPopover(element)) {
         if (!element.hasAttribute("popover")) {
           element.setAttribute("popover", "");
@@ -282,7 +292,7 @@ var Feedback = class extends Plugin {
         top: projected.top - actual.top,
         left: projected.left - actual.left
       };
-      if (Math.abs(offset.top) || Math.abs(offset.left)) {
+      if (offset.left > 0.01 || offset.top > 0.01) {
         styles.set(
           {
             top: projected.top + offset.top,
@@ -290,8 +300,13 @@ var Feedback = class extends Plugin {
           },
           CSS_PREFIX
         );
+      } else {
+        offset.left = 0;
+        offset.top = 0;
       }
       const resizeObserver = new ResizeObserver(() => {
+        if (!placeholder)
+          return;
         const placeholderShape = new DOMRectangle(placeholder, true);
         const origin = transformOrigin ?? { x: 1, y: 1 };
         const dX = (width - placeholderShape.width) * origin.x + delta.x;
@@ -315,60 +330,63 @@ var Feedback = class extends Plugin {
         }
         manager.dragOperation.shape = new DOMRectangle(element);
       });
-      if (droppable) {
+      if (droppable && placeholder) {
         droppable.placeholder = placeholder;
         untracked(droppable.refreshShape);
       }
-      dragOperation.shape = shape;
-      resizeObserver.observe(placeholder);
-      const elementMutationObserver = new MutationObserver(() => {
-        for (const attribute of Array.from(element.attributes)) {
-          if (attribute.name.startsWith("aria-") || IGNORED_ATTRIBUTES.includes(attribute.name)) {
-            continue;
-          }
-          if (attribute.name === "style") {
-            if (supportsStyle(element) && supportsStyle(placeholder)) {
-              placeholder.setAttribute("style", clone ? "" : "opacity: 0;");
-              placeholder.style.setProperty("transition", "none");
-              for (const key of Object.values(element.style)) {
-                if (key.startsWith(CSS_PREFIX) || IGNORED_STYLES.includes(key)) {
-                  continue;
+      dragOperation.shape = new DOMRectangle(element);
+      let elementMutationObserver;
+      let documentMutationObserver;
+      if (placeholder) {
+        resizeObserver.observe(placeholder);
+        elementMutationObserver = new MutationObserver(() => {
+          for (const attribute of Array.from(element.attributes)) {
+            if (attribute.name.startsWith("aria-") || IGNORED_ATTRIBUTES.includes(attribute.name)) {
+              continue;
+            }
+            if (attribute.name === "style") {
+              if (supportsStyle(element) && supportsStyle(placeholder)) {
+                placeholder.setAttribute("style", clone ? "" : "opacity: 0;");
+                placeholder.style.setProperty("transition", "none");
+                for (const key of Object.values(element.style)) {
+                  if (key.startsWith(CSS_PREFIX) || IGNORED_STYLES.includes(key)) {
+                    continue;
+                  }
+                  placeholder.style.setProperty(
+                    key,
+                    element.style.getPropertyValue(key)
+                  );
                 }
-                placeholder.style.setProperty(
-                  key,
-                  element.style.getPropertyValue(key)
-                );
               }
+              continue;
             }
-            continue;
+            placeholder.setAttribute(attribute.name, attribute.value);
           }
-          placeholder.setAttribute(attribute.name, attribute.value);
-        }
-        if (clone) {
-          placeholder.innerHTML = element.innerHTML;
-        }
-      });
-      elementMutationObserver.observe(element, {
-        attributes: true,
-        subtree: true
-      });
-      const documentMutationObserver = new MutationObserver((entries) => {
-        for (const entry of entries) {
-          if (Array.from(entry.addedNodes).includes(element)) {
-            element.insertAdjacentElement("afterend", placeholder);
-            showPopover(element);
-            return;
+          if (clone) {
+            placeholder.innerHTML = element.innerHTML;
           }
-        }
-      });
-      documentMutationObserver.observe(element.ownerDocument.body, {
-        childList: true,
-        subtree: true
-      });
+        });
+        elementMutationObserver.observe(element, {
+          attributes: true,
+          subtree: true
+        });
+        documentMutationObserver = new MutationObserver((entries) => {
+          for (const entry of entries) {
+            if (Array.from(entry.addedNodes).includes(element)) {
+              element.insertAdjacentElement("afterend", placeholder);
+              showPopover(element);
+              return;
+            }
+          }
+        });
+        documentMutationObserver.observe(element.ownerDocument.body, {
+          childList: true,
+          subtree: true
+        });
+      }
       const cleanupEffect2 = effect(function updateTransform() {
         const { transform, status: status2 } = dragOperation;
-        const { x, y } = transform;
-        if (!x && !y && !moved) {
+        if (!transform.x && !transform.y && !moved) {
           return;
         }
         if (!moved) {
@@ -376,6 +394,8 @@ var Feedback = class extends Plugin {
         }
         if (status2.dragging) {
           const translateTransition = isKeyboardOperation ? "250ms ease" : "0ms linear";
+          const x = transform.x + initialTranslate.x;
+          const y = transform.y + initialTranslate.y;
           const shape2 = new DOMRectangle(element);
           styles.set(
             {
@@ -409,14 +429,14 @@ var Feedback = class extends Plugin {
         }
       };
       let cleanup = () => {
-        elementMutationObserver.disconnect();
-        documentMutationObserver.disconnect();
+        elementMutationObserver?.disconnect();
+        documentMutationObserver?.disconnect();
         resizeObserver.disconnect();
         styles.reset();
         if (moved && element.isConnected) {
-          placeholder.replaceWith(element);
+          placeholder?.replaceWith(element);
         }
-        placeholder.remove();
+        placeholder?.remove();
         element.removeAttribute(ATTRIBUTE);
         if (supportsPopover(element)) {
           element.removeAttribute("popover");
@@ -426,6 +446,7 @@ var Feedback = class extends Plugin {
         if (droppable) {
           droppable.placeholder = void 0;
         }
+        moved = false;
       };
       const dropEffectCleanup = effect(function dropAnimation() {
         if (dragOperation.status.dropped) {
@@ -438,7 +459,9 @@ var Feedback = class extends Plugin {
           }
           manager.renderer.rendering.then(() => {
             showPopover(element);
-            const shape2 = new DOMRectangle(placeholder, true);
+            const target = placeholder ?? element;
+            styles.remove(["translate"], CSS_PREFIX);
+            const shape2 = new DOMRectangle(target);
             const currentShape = new DOMRectangle(element, true).translate(
               transform.x,
               transform.y
@@ -464,9 +487,6 @@ var Feedback = class extends Plugin {
                 duration: moved ? 250 : 0,
                 easing: "ease"
               },
-              onReady() {
-                styles.remove(["translate", "transition"], CSS_PREFIX);
-              },
               onFinish() {
                 requestAnimationFrame(restoreFocus);
                 onComplete?.();
@@ -1331,12 +1351,11 @@ var Droppable = class extends Droppable$1 {
     return this.placeholder ?? this.internal?.element.value;
   }
   refreshShape(ignoreTransform) {
-    const { element } = this;
+    const { element, shape } = this;
     if (!element || this.visible === false) {
       this.shape = void 0;
       return void 0;
     }
-    const { shape } = this;
     const updatedShape = new DOMRectangle(element, ignoreTransform);
     if (updatedShape && shape?.equals(updatedShape)) {
       return shape;