@dnd-kit/dom 0.2.3 → 0.2.4-beta-20260207150257

package/index.cjs

@@ -341,7 +341,7 @@ var IGNORED_ATTRIBUTES = [
 ];
 var IGNORED_STYLES = ["view-transition-name"];
 var CSS_RULES = `
-  :root [${ATTRIBUTE}] {
+  :is(:root,:host) [${ATTRIBUTE}] {
     position: fixed !important;
     pointer-events: none !important;
     touch-action: none;
@@ -358,11 +358,11 @@ var CSS_RULES = `
     transition: var(${CSS_PREFIX}transition) !important;
   }
 
-  :root [${PLACEHOLDER_ATTRIBUTE}] {
+  :is(:root,:host) [${PLACEHOLDER_ATTRIBUTE}] {
     transition: none;
   }
 
-  :root [${PLACEHOLDER_ATTRIBUTE}='hidden'] {
+  :is(:root,:host) [${PLACEHOLDER_ATTRIBUTE}='hidden'] {
     visibility: hidden;
   }
 
@@ -470,10 +470,11 @@ function isTableRow(element) {
 
 // src/core/plugins/feedback/Feedback.ts
 var styleSheetRegistry = /* @__PURE__ */ new Map();
-var _overlay_dec, _a, _init, _overlay, _Feedback_instances, render_fn, injectStyles_fn;
-var _Feedback = class _Feedback extends (_a = abstract.Plugin, _overlay_dec = [state.reactive], _a) {
+var _roots_dec, _targetRoot_dec, _sourceRoot_dec, _overlay_dec, _a, _init, _overlay, _Feedback_instances, render_fn, injectStyles_fn;
+var _Feedback = class _Feedback extends (_a = abstract.Plugin, _overlay_dec = [state.reactive], _sourceRoot_dec = [state.derived], _targetRoot_dec = [state.derived], _roots_dec = [state.derived], _a) {
   constructor(manager, options) {
     super(manager, options);
+    __runInitializers(_init, 5, this);
     __privateAdd(this, _Feedback_instances);
     __privateAdd(this, _overlay, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     this.state = {
@@ -483,14 +484,32 @@ var _Feedback = class _Feedback extends (_a = abstract.Plugin, _overlay_dec = [s
     this.registerEffect(__privateMethod(this, _Feedback_instances, injectStyles_fn));
     this.registerEffect(__privateMethod(this, _Feedback_instances, render_fn));
   }
+  get sourceRoot() {
+    var _a4;
+    const { source } = this.manager.dragOperation;
+    return utilities.getRoot((_a4 = source == null ? void 0 : source.element) != null ? _a4 : null);
+  }
+  get targetRoot() {
+    var _a4;
+    const { target } = this.manager.dragOperation;
+    return utilities.getRoot((_a4 = target == null ? void 0 : target.element) != null ? _a4 : null);
+  }
+  get roots() {
+    const { status } = this.manager.dragOperation;
+    if (status.initializing || status.initialized) {
+      const roots = [this.sourceRoot, this.targetRoot].filter((root) => root != null);
+      return new Set(roots);
+    }
+    return /* @__PURE__ */ new Set();
+  }
   destroy() {
     super.destroy();
-    for (const [doc, registration] of styleSheetRegistry.entries()) {
+    for (const [root, registration] of styleSheetRegistry.entries()) {
       if (registration.instances.has(this)) {
         registration.instances.delete(this);
         if (registration.instances.size === 0) {
           registration.cleanup();
-          styleSheetRegistry.delete(doc);
+          styleSheetRegistry.delete(root);
         }
       }
     }
@@ -919,47 +938,45 @@ render_fn = function() {
   };
 };
 injectStyles_fn = function() {
-  var _a4, _b2, _c3;
-  const { status, source, target } = this.manager.dragOperation;
-  const { nonce } = (_a4 = this.options) != null ? _a4 : {};
-  if (status.initializing) {
-    const sourceDocument = utilities.getDocument((_b2 = source == null ? void 0 : source.element) != null ? _b2 : null);
-    const targetDocument = utilities.getDocument((_c3 = target == null ? void 0 : target.element) != null ? _c3 : null);
-    const documents = /* @__PURE__ */ new Set([sourceDocument, targetDocument]);
-    for (const doc of documents) {
-      let registration = styleSheetRegistry.get(doc);
-      if (!registration) {
-        const style = document.createElement("style");
-        style.textContent = CSS_RULES;
-        if (nonce) {
-          style.setAttribute("nonce", nonce);
+  const { roots } = this;
+  for (const root of roots) {
+    let registration = styleSheetRegistry.get(root);
+    if (!registration) {
+      if (!("adoptedStyleSheets" in root && Array.isArray(root.adoptedStyleSheets)) && process.env.NODE_ENV !== "production") {
+        console.error("Cannot inject styles: This browser doesn't support adoptedStyleSheets");
+      }
+      const targetWindow = utilities.isDocument(root) ? root.defaultView : root.ownerDocument.defaultView;
+      const { CSSStyleSheet } = targetWindow != null ? targetWindow : {};
+      if (!CSSStyleSheet) {
+        if (process.env.NODE_ENV !== "production") {
+          console.error("Cannot inject styles: CSSStyleSheet constructor not available");
         }
-        doc.head.prepend(style);
-        const mutationObserver = new MutationObserver((entries) => {
-          for (const entry of entries) {
-            if (entry.type === "childList") {
-              const removedNodes = Array.from(entry.removedNodes);
-              if (removedNodes.length > 0 && removedNodes.includes(style)) {
-                doc.head.prepend(style);
-              }
+        continue;
+      }
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(CSS_RULES);
+      root.adoptedStyleSheets.push(sheet);
+      registration = {
+        cleanup: () => {
+          var _a4;
+          if (utilities.isDocument(root) || utilities.isShadowRoot(root) && ((_a4 = root.host) == null ? void 0 : _a4.isConnected)) {
+            const index = root.adoptedStyleSheets.indexOf(sheet);
+            if (index != -1) {
+              root.adoptedStyleSheets.splice(index, 1);
             }
           }
-        });
-        mutationObserver.observe(doc.head, { childList: true });
-        registration = {
-          cleanup: () => {
-            mutationObserver.disconnect();
-            style.remove();
-          },
-          instances: /* @__PURE__ */ new Set()
-        };
-        styleSheetRegistry.set(doc, registration);
-      }
-      registration.instances.add(this);
+        },
+        instances: /* @__PURE__ */ new Set()
+      };
+      styleSheetRegistry.set(root, registration);
     }
+    registration.instances.add(this);
   }
 };
 __decorateElement(_init, 4, "overlay", _overlay_dec, _Feedback, _overlay);
+__decorateElement(_init, 2, "sourceRoot", _sourceRoot_dec, _Feedback);
+__decorateElement(_init, 2, "targetRoot", _targetRoot_dec, _Feedback);
+__decorateElement(_init, 2, "roots", _roots_dec, _Feedback);
 __decoratorMetadata(_init, _Feedback);
 _Feedback.configure = abstract.configurator(_Feedback);
 var Feedback = _Feedback;
@@ -1136,7 +1153,7 @@ var Scroller = class extends (_a3 = abstract.CorePlugin, _autoScrolling_dec = [s
         return null;
       }
       const element = utilities.getElementFromPoint(
-        utilities.getDocument(source == null ? void 0 : source.element),
+        utilities.getRoot(source == null ? void 0 : source.element),
         position.current
       );
       if (element) {
@@ -1804,7 +1821,7 @@ var _PointerSensor = class _PointerSensor extends abstract.Sensor {
     const ownerDocument = utilities.getDocument(event.target);
     const pointerCaptureTarget = ownerDocument.body;
     pointerCaptureTarget.setPointerCapture(event.pointerId);
-    const listenerTargets = utilities.isElement(event.target) ? [event.target, ownerDocument.body] : ownerDocument.body;
+    const listenerTargets = utilities.isElement(event.target) ? [event.target, pointerCaptureTarget] : pointerCaptureTarget;
     const unbind = this.listeners.bind(listenerTargets, [
       {
         // Prevent scrolling on touch devices