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

package/index.cjs

@@ -193,7 +193,7 @@ var Cursor = class extends abstract.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"];
@@ -202,6 +202,7 @@ var Feedback = class extends abstract.Plugin {
     super(manager);
     let style;
     let initialCoordinates;
+    let initialTranslate = { x: 0, y: 0 };
     let currentTransform;
     let transformOrigin;
     let moved = false;
@@ -220,7 +221,7 @@ var Feedback = class extends abstract.Plugin {
         initialCoordinates = void 0;
         currentTransform = void 0;
         transformOrigin = void 0;
-        moved = false;
+        initialTranslate = { x: 0, y: 0 };
         return;
       }
       if (!source)
@@ -231,15 +232,21 @@ var Feedback = class extends abstract.Plugin {
       const shape = new utilities.DOMRectangle(element, true);
       const { width, height, top, left } = shape;
       const styles = new utilities.Styles(element);
-      const { transition } = utilities.getWindow(element).getComputedStyle(element);
+      const { background, border, transition, translate } = utilities.getComputedStyles(element);
       const droppable = manager.registry.droppables.get(source.id);
       const clone = feedback === "clone";
-      const placeholder = utilities.createPlaceholder(element, clone, {
+      const placeholder = feedback !== "move" ? utilities.createPlaceholder(element, clone, {
         [PLACEHOLDER_ATTRIBUTE]: ""
-      });
+      }) : null;
       const isKeyboardOperation = state.untracked(
         () => utilities.isKeyboardEvent(manager.dragOperation.activatorEvent)
       );
+      if (translate !== "none") {
+        const parsedTranslate = utilities.parseTranslate(translate);
+        if (parsedTranslate) {
+          initialTranslate = parsedTranslate;
+        }
+      }
       if (!initialCoordinates) {
         initialCoordinates = {
           x: left,
@@ -268,11 +275,14 @@ var Feedback = class extends abstract.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 (utilities.supportsPopover(element)) {
         if (!element.hasAttribute("popover")) {
           element.setAttribute("popover", "");
@@ -284,7 +294,7 @@ var Feedback = class extends abstract.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,
@@ -292,8 +302,13 @@ var Feedback = class extends abstract.Plugin {
           },
           CSS_PREFIX
         );
+      } else {
+        offset.left = 0;
+        offset.top = 0;
       }
       const resizeObserver = new ResizeObserver(() => {
+        if (!placeholder)
+          return;
         const placeholderShape = new utilities.DOMRectangle(placeholder, true);
         const origin = transformOrigin ?? { x: 1, y: 1 };
         const dX = (width - placeholderShape.width) * origin.x + delta.x;
@@ -317,60 +332,63 @@ var Feedback = class extends abstract.Plugin {
         }
         manager.dragOperation.shape = new utilities.DOMRectangle(element);
       });
-      if (droppable) {
+      if (droppable && placeholder) {
         droppable.placeholder = placeholder;
         state.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 (utilities.supportsStyle(element) && utilities.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 utilities.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 (utilities.supportsStyle(element) && utilities.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);
-            utilities.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);
+              utilities.showPopover(element);
+              return;
+            }
+          }
+        });
+        documentMutationObserver.observe(element.ownerDocument.body, {
+          childList: true,
+          subtree: true
+        });
+      }
       const cleanupEffect2 = state.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) {
@@ -378,6 +396,8 @@ var Feedback = class extends abstract.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 utilities.DOMRectangle(element);
           styles.set(
             {
@@ -411,14 +431,14 @@ var Feedback = class extends abstract.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 (utilities.supportsPopover(element)) {
           element.removeAttribute("popover");
@@ -428,6 +448,7 @@ var Feedback = class extends abstract.Plugin {
         if (droppable) {
           droppable.placeholder = void 0;
         }
+        moved = false;
       };
       const dropEffectCleanup = state.effect(function dropAnimation() {
         if (dragOperation.status.dropped) {
@@ -440,7 +461,9 @@ var Feedback = class extends abstract.Plugin {
           }
           manager.renderer.rendering.then(() => {
             utilities.showPopover(element);
-            const shape2 = new utilities.DOMRectangle(placeholder, true);
+            const target = placeholder ?? element;
+            styles.remove(["translate"], CSS_PREFIX);
+            const shape2 = new utilities.DOMRectangle(target);
             const currentShape = new utilities.DOMRectangle(element, true).translate(
               transform.x,
               transform.y
@@ -466,9 +489,6 @@ var Feedback = class extends abstract.Plugin {
                 duration: moved ? 250 : 0,
                 easing: "ease"
               },
-              onReady() {
-                styles.remove(["translate", "transition"], CSS_PREFIX);
-              },
               onFinish() {
                 requestAnimationFrame(restoreFocus);
                 onComplete?.();
@@ -1333,12 +1353,11 @@ var Droppable = class extends abstract.Droppable {
     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 utilities.DOMRectangle(element, ignoreTransform);
     if (updatedShape && shape?.equals(updatedShape)) {
       return shape;