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

package/index.d.cts

@@ -248,6 +248,9 @@ declare class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
     accessor overlay: Element | undefined;
     private state;
     constructor(manager: DragDropManager, options?: FeedbackOptions);
+    private get sourceRoot();
+    private get targetRoot();
+    private get roots();
     destroy(): void;
     static configure: (options: FeedbackOptions) => _dnd_kit_abstract.PluginDescriptor<any, any, typeof Feedback>;
 }

package/index.d.ts

@@ -248,6 +248,9 @@ declare class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
     accessor overlay: Element | undefined;
     private state;
     constructor(manager: DragDropManager, options?: FeedbackOptions);
+    private get sourceRoot();
+    private get targetRoot();
+    private get roots();
     destroy(): void;
     static configure: (options: FeedbackOptions) => _dnd_kit_abstract.PluginDescriptor<any, any, typeof Feedback>;
 }

package/index.js

@@ -1,6 +1,6 @@
 import { configurator, Sensor, ActivationController, Plugin, CorePlugin, DragDropManager as DragDropManager$1, Draggable as Draggable$1, Droppable as Droppable$1, ActivationConstraint, descriptor } from '@dnd-kit/abstract';
-import { ScrollDirection, Listeners, isElement, scrollIntoViewIfNeeded, DOMRectangle, getDocument, isHTMLElement, getFrameTransform, getEventCoordinates, getDocuments, scheduler, isInteractiveElement, isTextInput, isKeyboardEvent, isPointerEvent, canScroll, detectScrollIntent, getElementFromPoint, getScrollableAncestors, generateUniqueId, isSafari, Styles, getComputedStyles, parseTranslate, supportsPopover, showPopover, getWindow, supportsStyle, getFrameElement, cloneElement, getFinalKeyframe, animateTransform, ProxiedElements, PositionObserver } from '@dnd-kit/dom/utilities';
-import { effect, computed, deepEqual, signal, batch, untracked, effects, reactive } from '@dnd-kit/state';
+import { ScrollDirection, getRoot, Listeners, isElement, scrollIntoViewIfNeeded, DOMRectangle, getDocument, isHTMLElement, getFrameTransform, getEventCoordinates, getDocuments, scheduler, isInteractiveElement, isTextInput, isKeyboardEvent, isPointerEvent, canScroll, detectScrollIntent, getElementFromPoint, getScrollableAncestors, generateUniqueId, isSafari, Styles, getComputedStyles, parseTranslate, supportsPopover, showPopover, getWindow, supportsStyle, isDocument, isShadowRoot, getFrameElement, cloneElement, getFinalKeyframe, animateTransform, ProxiedElements, PositionObserver } from '@dnd-kit/dom/utilities';
+import { effect, computed, deepEqual, signal, batch, untracked, effects, reactive, derived } from '@dnd-kit/state';
 import { Axes, Point, Rectangle, exceedsDistance } from '@dnd-kit/geometry';
 import { defaultCollisionDetection } from '@dnd-kit/collision';
 
@@ -339,7 +339,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;
@@ -356,11 +356,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;
   }
 
@@ -468,10 +468,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 = Plugin, _overlay_dec = [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 = Plugin, _overlay_dec = [reactive], _sourceRoot_dec = [derived], _targetRoot_dec = [derived], _roots_dec = [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 = {
@@ -481,14 +482,32 @@ var _Feedback = class _Feedback extends (_a = Plugin, _overlay_dec = [reactive],
     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 getRoot((_a4 = source == null ? void 0 : source.element) != null ? _a4 : null);
+  }
+  get targetRoot() {
+    var _a4;
+    const { target } = this.manager.dragOperation;
+    return 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);
         }
       }
     }
@@ -917,47 +936,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 = getDocument((_b2 = source == null ? void 0 : source.element) != null ? _b2 : null);
-    const targetDocument = 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 = 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 (isDocument(root) || 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 = configurator(_Feedback);
 var Feedback = _Feedback;
@@ -1134,7 +1151,7 @@ var Scroller = class extends (_a3 = CorePlugin, _autoScrolling_dec = [reactive],
         return null;
       }
       const element = getElementFromPoint(
-        getDocument(source == null ? void 0 : source.element),
+        getRoot(source == null ? void 0 : source.element),
         position.current
       );
       if (element) {
@@ -1802,7 +1819,7 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     const ownerDocument = getDocument(event.target);
     const pointerCaptureTarget = ownerDocument.body;
     pointerCaptureTarget.setPointerCapture(event.pointerId);
-    const listenerTargets = isElement(event.target) ? [event.target, ownerDocument.body] : ownerDocument.body;
+    const listenerTargets = isElement(event.target) ? [event.target, pointerCaptureTarget] : pointerCaptureTarget;
     const unbind = this.listeners.bind(listenerTargets, [
       {
         // Prevent scrolling on touch devices