@dnd-kit/dom 0.1.8 → 0.1.9

package/index.cjs

@@ -260,7 +260,6 @@ var Cursor = class extends abstract.Plugin {
 var ATTR_PREFIX = "data-dnd-";
 var DROPPING_ATTRIBUTE = `${ATTR_PREFIX}dropping`;
 var CSS_PREFIX = "--dnd-";
-var ROOT_ATTRIBUTE = `${ATTR_PREFIX}root`;
 var ATTRIBUTE = `${ATTR_PREFIX}dragging`;
 var PLACEHOLDER_ATTRIBUTE = `${ATTR_PREFIX}placeholder`;
 var IGNORED_ATTRIBUTES = [
@@ -270,6 +269,7 @@ var IGNORED_ATTRIBUTES = [
   "aria-pressed",
   "aria-grabbing"
 ];
+var IGNORED_STYLES = ["view-transition-name"];
 var CSS_RULES = `
   :root [${ATTRIBUTE}] {
     position: fixed !important;
@@ -305,11 +305,9 @@ var CSS_RULES = `
     translate: var(${CSS_PREFIX}translate) !important;
   }
 
-  [${ROOT_ATTRIBUTE}][style*='${CSS_PREFIX}scale'] {
-    &:is([${ATTRIBUTE}]), [${ATTRIBUTE}] {
-      scale: var(${CSS_PREFIX}scale) !important;
-      transform-origin: var(${CSS_PREFIX}transform-origin) !important;
-    }
+  [${ATTRIBUTE}][style*='${CSS_PREFIX}scale'] {
+    scale: var(${CSS_PREFIX}scale) !important;
+    transform-origin: var(${CSS_PREFIX}transform-origin) !important;
   }
 
   @layer {
@@ -424,7 +422,7 @@ _init = __decoratorStart(_a);
 _overlay = new WeakMap();
 _Feedback_instances = new WeakSet();
 render_fn = function() {
-  var _a4, _b2, _c3, _d2;
+  var _a4, _b2, _c3;
   const { state: state$1, manager, options } = this;
   const { dragOperation } = manager;
   const { position, source, status } = dragOperation;
@@ -457,11 +455,9 @@ render_fn = function() {
     width = width / scaleDelta.x;
     height = height / scaleDelta.y;
   }
-  let root = (_b2 = this.overlay) != null ? _b2 : feedbackElement.ownerDocument.body;
-  if (options == null ? void 0 : options.rootElement) {
-    root = typeof options.rootElement === "function" ? options.rootElement(source) : options.rootElement;
-  }
-  const styles = new utilities.Styles(root);
+  let elementMutationObserver;
+  let documentMutationObserver;
+  const styles = new utilities.Styles(feedbackElement);
   const { transition, translate } = utilities.getComputedStyles(element);
   const clone = feedback === "clone";
   const placeholder = feedback !== "move" && !this.overlay ? createPlaceholder(source, clone ? "clone" : "hidden") : null;
@@ -520,11 +516,10 @@ render_fn = function() {
   };
   feedbackElement.setAttribute(ATTRIBUTE, "true");
   const transform = state.untracked(() => dragOperation.transform);
-  const initialTranslate = (_c3 = initial.translate) != null ? _c3 : { x: 0, y: 0 };
+  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`;
-  root.setAttribute(ROOT_ATTRIBUTE, "");
   styles.set(
     {
       width,
@@ -541,6 +536,7 @@ render_fn = function() {
   if (placeholder) {
     element.insertAdjacentElement("afterend", placeholder);
     if (options == null ? void 0 : options.rootElement) {
+      const root = typeof options.rootElement === "function" ? options.rootElement(source) : options.rootElement;
       root.appendChild(element);
     }
   }
@@ -569,6 +565,7 @@ render_fn = function() {
       },
       CSS_PREFIX
     );
+    elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
     if (isTableRow(element) && isTableRow(placeholder)) {
       const cells = Array.from(element.cells);
       const placeholderCells = Array.from(placeholder.cells);
@@ -583,8 +580,6 @@ render_fn = function() {
   if (state.untracked(() => source.status) === "idle") {
     requestAnimationFrame(() => source.status = "dragging");
   }
-  let elementMutationObserver;
-  let documentMutationObserver;
   if (placeholder) {
     resizeObserver.observe(placeholder);
     elementMutationObserver = new MutationObserver((mutations) => {
@@ -602,7 +597,23 @@ render_fn = function() {
           continue;
         }
         const attributeValue = element.getAttribute(attributeName);
-        if (attributeValue !== null) {
+        if (attributeName === "style") {
+          if (utilities.supportsStyle(element) && utilities.supportsStyle(placeholder)) {
+            const styles2 = element.style;
+            for (const key of Array.from(placeholder.style)) {
+              if (styles2.getPropertyValue(key) === "") {
+                placeholder.style.removeProperty(key);
+              }
+            }
+            for (const key of Array.from(styles2)) {
+              if (IGNORED_STYLES.includes(key) || key.startsWith(CSS_PREFIX)) {
+                continue;
+              }
+              const value = styles2.getPropertyValue(key);
+              placeholder.style.setProperty(key, value);
+            }
+          }
+        } else if (attributeValue !== null) {
           placeholder.setAttribute(attributeName, attributeValue);
         } else {
           placeholder.removeAttribute(attributeName);
@@ -657,6 +668,7 @@ render_fn = function() {
         },
         CSS_PREFIX
       );
+      elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
       dragOperation.shape = new utilities.DOMRectangle(feedbackElement);
       state$1.current.translate = {
         x,
@@ -664,7 +676,7 @@ render_fn = function() {
       };
     }
   });
-  const id = (_d2 = manager.dragOperation.source) == null ? void 0 : _d2.id;
+  const id = (_c3 = manager.dragOperation.source) == null ? void 0 : _c3.id;
   const restoreFocus = () => {
     var _a5;
     if (!isKeyboardOperation || id == null) {
@@ -696,7 +708,6 @@ render_fn = function() {
       placeholder.replaceWith(feedbackElement);
     }
     placeholder == null ? void 0 : placeholder.remove();
-    root.removeAttribute(ROOT_ATTRIBUTE);
     cleanupEffect();
     dropEffectCleanup == null ? void 0 : dropEffectCleanup();
   };
@@ -762,6 +773,7 @@ render_fn = function() {
           } : {};
           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), {