@dnd-kit/dom 0.3.2 → 0.4.0-beta-20260219130201

package/index.d.cts

@@ -238,10 +238,6 @@ interface CursorPluginOptions {
      * @default 'grabbing'
      */
     cursor?: string;
-    /**
-     * The nonce to be applied to the style element.
-     */
-    nonce?: string;
 }
 declare class Cursor extends Plugin<DragDropManager> {
     manager: DragDropManager;
@@ -265,7 +261,6 @@ type DropAnimation = DropAnimationOptions | DropAnimationFunction;
 
 interface FeedbackOptions {
     rootElement?: Element | ((source: Draggable) => Element);
-    nonce?: string;
     dropAnimation?: DropAnimation | null;
 }
 declare class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
@@ -322,25 +317,22 @@ declare class ScrollListener extends CorePlugin<DragDropManager> {
     private handleScroll;
 }
 
-interface PreventSelectionPluginOptions {
-    /**
-     * The nonce to be applied to the style element.
-     */
-    nonce?: string;
-}
 declare class PreventSelection extends Plugin<DragDropManager> {
     manager: DragDropManager;
-    constructor(manager: DragDropManager, options?: PreventSelectionPluginOptions);
+    constructor(manager: DragDropManager);
 }
 
 type CleanupFunction = () => void;
-declare class StyleSheetManager extends CorePlugin<DragDropManager> {
+interface StyleInjectorOptions {
+    nonce?: string;
+}
+declare class StyleInjector extends CorePlugin<DragDropManager, StyleInjectorOptions> {
     #private;
     private accessor additionalRoots;
-    constructor(manager: DragDropManager);
+    constructor(manager: DragDropManager, options?: StyleInjectorOptions);
     /**
      * Registers CSS rules to be injected into the active drag operation's
-     * document and shadow roots. The StyleSheetManager handles tracking
+     * document and shadow roots. The StyleInjector handles tracking
      * which roots need the styles and cleaning up when they're no longer needed.
      *
      * Returns a cleanup function that unregisters the rules.
@@ -354,6 +346,7 @@ declare class StyleSheetManager extends CorePlugin<DragDropManager> {
     private get sourceRoot();
     private get targetRoot();
     private get roots();
+    static configure: (options: StyleInjectorOptions) => _dnd_kit_abstract.PluginDescriptor<any, any, typeof StyleInjector>;
 }
 
-export { Accessibility, AutoScroller, type BeforeDragStartEvent, type CollisionEvent, Cursor, DragDropManager, type Input as DragDropManagerInput, type DragEndEvent, type DragMoveEvent, type DragOverEvent, type DragStartEvent, Draggable, type Input$2 as DraggableInput, type DropAnimation, type DropAnimationFunction, type DropAnimationOptions, Droppable, type Input$1 as DroppableInput, Feedback, type FeedbackType, KeyboardSensor, type KeyboardSensorOptions, PointerActivationConstraints, PointerSensor, type PointerSensorOptions, PreventSelection, ScrollListener, Scroller, type Sensors, StyleSheetManager, type Transition, defaultPreset };
+export { Accessibility, AutoScroller, type BeforeDragStartEvent, type CollisionEvent, Cursor, DragDropManager, type Input as DragDropManagerInput, type DragEndEvent, type DragMoveEvent, type DragOverEvent, type DragStartEvent, Draggable, type Input$2 as DraggableInput, type DropAnimation, type DropAnimationFunction, type DropAnimationOptions, Droppable, type Input$1 as DroppableInput, Feedback, type FeedbackType, KeyboardSensor, type KeyboardSensorOptions, PointerActivationConstraints, PointerSensor, type PointerSensorOptions, PreventSelection, ScrollListener, Scroller, type Sensors, StyleInjector, type Transition, defaultPreset };

package/index.d.ts

@@ -238,10 +238,6 @@ interface CursorPluginOptions {
      * @default 'grabbing'
      */
     cursor?: string;
-    /**
-     * The nonce to be applied to the style element.
-     */
-    nonce?: string;
 }
 declare class Cursor extends Plugin<DragDropManager> {
     manager: DragDropManager;
@@ -265,7 +261,6 @@ type DropAnimation = DropAnimationOptions | DropAnimationFunction;
 
 interface FeedbackOptions {
     rootElement?: Element | ((source: Draggable) => Element);
-    nonce?: string;
     dropAnimation?: DropAnimation | null;
 }
 declare class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
@@ -322,25 +317,22 @@ declare class ScrollListener extends CorePlugin<DragDropManager> {
     private handleScroll;
 }
 
-interface PreventSelectionPluginOptions {
-    /**
-     * The nonce to be applied to the style element.
-     */
-    nonce?: string;
-}
 declare class PreventSelection extends Plugin<DragDropManager> {
     manager: DragDropManager;
-    constructor(manager: DragDropManager, options?: PreventSelectionPluginOptions);
+    constructor(manager: DragDropManager);
 }
 
 type CleanupFunction = () => void;
-declare class StyleSheetManager extends CorePlugin<DragDropManager> {
+interface StyleInjectorOptions {
+    nonce?: string;
+}
+declare class StyleInjector extends CorePlugin<DragDropManager, StyleInjectorOptions> {
     #private;
     private accessor additionalRoots;
-    constructor(manager: DragDropManager);
+    constructor(manager: DragDropManager, options?: StyleInjectorOptions);
     /**
      * Registers CSS rules to be injected into the active drag operation's
-     * document and shadow roots. The StyleSheetManager handles tracking
+     * document and shadow roots. The StyleInjector handles tracking
      * which roots need the styles and cleaning up when they're no longer needed.
      *
      * Returns a cleanup function that unregisters the rules.
@@ -354,6 +346,7 @@ declare class StyleSheetManager extends CorePlugin<DragDropManager> {
     private get sourceRoot();
     private get targetRoot();
     private get roots();
+    static configure: (options: StyleInjectorOptions) => _dnd_kit_abstract.PluginDescriptor<any, any, typeof StyleInjector>;
 }
 
-export { Accessibility, AutoScroller, type BeforeDragStartEvent, type CollisionEvent, Cursor, DragDropManager, type Input as DragDropManagerInput, type DragEndEvent, type DragMoveEvent, type DragOverEvent, type DragStartEvent, Draggable, type Input$2 as DraggableInput, type DropAnimation, type DropAnimationFunction, type DropAnimationOptions, Droppable, type Input$1 as DroppableInput, Feedback, type FeedbackType, KeyboardSensor, type KeyboardSensorOptions, PointerActivationConstraints, PointerSensor, type PointerSensorOptions, PreventSelection, ScrollListener, Scroller, type Sensors, StyleSheetManager, type Transition, defaultPreset };
+export { Accessibility, AutoScroller, type BeforeDragStartEvent, type CollisionEvent, Cursor, DragDropManager, type Input as DragDropManagerInput, type DragEndEvent, type DragMoveEvent, type DragOverEvent, type DragStartEvent, Draggable, type Input$2 as DraggableInput, type DropAnimation, type DropAnimationFunction, type DropAnimationOptions, Droppable, type Input$1 as DroppableInput, Feedback, type FeedbackType, KeyboardSensor, type KeyboardSensorOptions, PointerActivationConstraints, PointerSensor, type PointerSensorOptions, PreventSelection, ScrollListener, Scroller, type Sensors, StyleInjector, type Transition, defaultPreset };

package/index.js

@@ -1,7 +1,7 @@
-import { configurator, Sensor, ActivationController, Plugin, CorePlugin, DragDropManager as DragDropManager$1, resolveCustomizable, Draggable as Draggable$1, Droppable as Droppable$1, ActivationConstraint, descriptor } from '@dnd-kit/abstract';
+import { configurator, Sensor, ActivationController, CorePlugin, Plugin, DragDropManager as DragDropManager$1, resolveCustomizable, Draggable as Draggable$1, Droppable as Droppable$1, ActivationConstraint, descriptor } from '@dnd-kit/abstract';
 export { resolveCustomizable } from '@dnd-kit/abstract';
-import { ScrollDirection, Listeners, isElement, scrollIntoViewIfNeeded, DOMRectangle, getDocument, isHTMLElement, getFrameTransform, getEventCoordinates, getDocuments, scheduler, isInteractiveElement, isTextInput, getRoot, isKeyboardEvent, isPointerEvent, canScroll, detectScrollIntent, getElementFromPoint, getScrollableAncestors, generateUniqueId, isSafari, isDocument, isShadowRoot, Styles, getComputedStyles, parseTranslate, getFixedPositionOffset, supportsPopover, showPopover, getWindow, prefersReducedMotion, getFrameElement, cloneElement, supportsStyle, getFinalKeyframe, animateTransform, ProxiedElements, PositionObserver } from '@dnd-kit/dom/utilities';
-import { effect, untracked, computed, deepEqual, signal, batch, effects, reactive, derived } 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, isDocument, isShadowRoot, Styles, getComputedStyles, parseTranslate, getFixedPositionOffset, supportsPopover, showPopover, getWindow, prefersReducedMotion, getFrameElement, cloneElement, supportsStyle, getFinalKeyframe, animateTransform, ProxiedElements, PositionObserver } from '@dnd-kit/dom/utilities';
+import { untracked, effect, computed, deepEqual, signal, batch, effects, reactive, derived } from '@dnd-kit/state';
 import { Axes, Point, Rectangle, exceedsDistance } from '@dnd-kit/geometry';
 import { defaultCollisionDetection } from '@dnd-kit/collision';
 
@@ -297,47 +297,20 @@ function debounce(fn, wait) {
   debounced.cancel = () => clearTimeout(timeout);
   return debounced;
 }
-var Cursor = class extends Plugin {
+var styleRegistry = /* @__PURE__ */ new Map();
+var _roots_dec, _targetRoot_dec, _sourceRoot_dec, _additionalRoots_dec, _a, _registeredRules, _init, _additionalRoots, _StyleInjector_instances, syncStyles_fn, inject_fn, injectStyleElement_fn, injectAdoptedSheet_fn;
+var _StyleInjector = class _StyleInjector extends (_a = CorePlugin, _additionalRoots_dec = [reactive], _sourceRoot_dec = [derived], _targetRoot_dec = [derived], _roots_dec = [derived], _a) {
   constructor(manager, options) {
     super(manager, options);
-    this.manager = manager;
-    const doc = computed(
-      () => {
-        var _a5;
-        return getDocument((_a5 = this.manager.dragOperation.source) == null ? void 0 : _a5.element);
-      }
-    );
-    this.destroy = effect(() => {
-      var _a5;
-      const { dragOperation } = this.manager;
-      const { cursor = "grabbing", nonce } = (_a5 = this.options) != null ? _a5 : {};
-      if (dragOperation.status.initialized) {
-        const document2 = doc.value;
-        const style = document2.createElement("style");
-        if (nonce) {
-          style.setAttribute("nonce", nonce);
-        }
-        style.textContent = `* { cursor: ${cursor} !important; }`;
-        document2.head.appendChild(style);
-        return () => style.remove();
-      }
-    });
-  }
-};
-var styleRegistry = /* @__PURE__ */ new Map();
-var _roots_dec, _targetRoot_dec, _sourceRoot_dec, _additionalRoots_dec, _a, _registeredRules, _init, _additionalRoots, _StyleSheetManager_instances, syncStyles_fn, inject_fn, injectStyleElement_fn, injectAdoptedSheet_fn;
-var StyleSheetManager = class extends (_a = CorePlugin, _additionalRoots_dec = [reactive], _sourceRoot_dec = [derived], _targetRoot_dec = [derived], _roots_dec = [derived], _a) {
-  constructor(manager) {
-    super(manager);
     __runInitializers(_init, 5, this);
-    __privateAdd(this, _StyleSheetManager_instances);
+    __privateAdd(this, _StyleInjector_instances);
     __privateAdd(this, _registeredRules, /* @__PURE__ */ new Set());
     __privateAdd(this, _additionalRoots, __runInitializers(_init, 8, this, /* @__PURE__ */ new Set())), __runInitializers(_init, 11, this);
-    this.registerEffect(__privateMethod(this, _StyleSheetManager_instances, syncStyles_fn));
+    this.registerEffect(__privateMethod(this, _StyleInjector_instances, syncStyles_fn));
   }
   /**
    * Registers CSS rules to be injected into the active drag operation's
-   * document and shadow roots. The StyleSheetManager handles tracking
+   * document and shadow roots. The StyleInjector handles tracking
    * which roots need the styles and cleaning up when they're no longer needed.
    *
    * Returns a cleanup function that unregisters the rules.
@@ -390,13 +363,13 @@ var StyleSheetManager = class extends (_a = CorePlugin, _additionalRoots_dec = [
 _init = __decoratorStart(_a);
 _registeredRules = new WeakMap();
 _additionalRoots = new WeakMap();
-_StyleSheetManager_instances = new WeakSet();
+_StyleInjector_instances = new WeakSet();
 syncStyles_fn = function() {
   const { roots } = this;
   const cleanups = [];
   for (const root of roots) {
     for (const cssRules of __privateGet(this, _registeredRules)) {
-      cleanups.push(__privateMethod(this, _StyleSheetManager_instances, inject_fn).call(this, root, cssRules));
+      cleanups.push(__privateMethod(this, _StyleInjector_instances, inject_fn).call(this, root, cssRules));
     }
   }
   return () => {
@@ -413,7 +386,7 @@ inject_fn = function(root, cssRules) {
   }
   let registration = rootStyles.get(cssRules);
   if (!registration) {
-    const created = isDocument(root) ? __privateMethod(this, _StyleSheetManager_instances, injectStyleElement_fn).call(this, root, rootStyles, cssRules) : __privateMethod(this, _StyleSheetManager_instances, injectAdoptedSheet_fn).call(this, root, rootStyles, cssRules);
+    const created = isDocument(root) ? __privateMethod(this, _StyleInjector_instances, injectStyleElement_fn).call(this, root, rootStyles, cssRules) : __privateMethod(this, _StyleInjector_instances, injectAdoptedSheet_fn).call(this, root, rootStyles, cssRules);
     if (!created) {
       return () => {
       };
@@ -438,7 +411,12 @@ inject_fn = function(root, cssRules) {
  * giving them the lowest cascade priority.
  */
 injectStyleElement_fn = function(root, rootStyles, cssRules) {
+  var _a5;
   const style = root.createElement("style");
+  const { nonce } = (_a5 = this.options) != null ? _a5 : {};
+  if (nonce) {
+    style.setAttribute("nonce", nonce);
+  }
   style.textContent = cssRules;
   root.head.prepend(style);
   const observer = new MutationObserver((entries) => {
@@ -504,11 +482,35 @@ injectAdoptedSheet_fn = function(root, rootStyles, cssRules) {
     }
   };
 };
-__decorateElement(_init, 4, "additionalRoots", _additionalRoots_dec, StyleSheetManager, _additionalRoots);
-__decorateElement(_init, 2, "sourceRoot", _sourceRoot_dec, StyleSheetManager);
-__decorateElement(_init, 2, "targetRoot", _targetRoot_dec, StyleSheetManager);
-__decorateElement(_init, 2, "roots", _roots_dec, StyleSheetManager);
-__decoratorMetadata(_init, StyleSheetManager);
+__decorateElement(_init, 4, "additionalRoots", _additionalRoots_dec, _StyleInjector, _additionalRoots);
+__decorateElement(_init, 2, "sourceRoot", _sourceRoot_dec, _StyleInjector);
+__decorateElement(_init, 2, "targetRoot", _targetRoot_dec, _StyleInjector);
+__decorateElement(_init, 2, "roots", _roots_dec, _StyleInjector);
+__decoratorMetadata(_init, _StyleInjector);
+_StyleInjector.configure = configurator(_StyleInjector);
+var StyleInjector = _StyleInjector;
+
+// src/core/plugins/cursor/Cursor.ts
+var Cursor = class extends Plugin {
+  constructor(manager, options) {
+    super(manager, options);
+    this.manager = manager;
+    const { cursor = "grabbing" } = options != null ? options : {};
+    const styleInjector = manager.registry.plugins.get(
+      StyleInjector
+    );
+    const unregisterStyles = styleInjector == null ? void 0 : styleInjector.register(
+      `* { cursor: ${cursor} !important; }`
+    );
+    if (unregisterStyles) {
+      const originalDestroy = this.destroy.bind(this);
+      this.destroy = () => {
+        unregisterStyles();
+        originalDestroy();
+      };
+    }
+  }
+};
 
 // src/core/plugins/feedback/constants.ts
 var ATTR_PREFIX = "data-dnd-";
@@ -854,10 +856,10 @@ var _Feedback = class _Feedback extends (_a2 = Plugin, _overlay_dec = [reactive]
       initial: {},
       current: {}
     };
-    const styleSheetManager = manager.registry.plugins.get(
-      StyleSheetManager
+    const styleInjector = manager.registry.plugins.get(
+      StyleInjector
     );
-    const unregisterStyles = styleSheetManager == null ? void 0 : styleSheetManager.register(CSS_RULES);
+    const unregisterStyles = styleInjector == null ? void 0 : styleInjector.register(CSS_RULES);
     if (unregisterStyles) {
       const originalDestroy = this.destroy.bind(this);
       this.destroy = () => {
@@ -865,19 +867,19 @@ var _Feedback = class _Feedback extends (_a2 = Plugin, _overlay_dec = [reactive]
         originalDestroy();
       };
     }
-    this.registerEffect(__privateMethod(this, _Feedback_instances, trackOverlayRoot_fn).bind(this, styleSheetManager));
+    this.registerEffect(__privateMethod(this, _Feedback_instances, trackOverlayRoot_fn).bind(this, styleInjector));
     this.registerEffect(__privateMethod(this, _Feedback_instances, render_fn));
   }
 };
 _init2 = __decoratorStart(_a2);
 _overlay = new WeakMap();
 _Feedback_instances = new WeakSet();
-trackOverlayRoot_fn = function(styleSheetManager) {
+trackOverlayRoot_fn = function(styleInjector) {
   const { overlay } = this;
-  if (!overlay || !styleSheetManager) return;
+  if (!overlay || !styleInjector) return;
   const root = getRoot(overlay);
   if (!root) return;
-  return styleSheetManager.addRoot(root);
+  return styleInjector.addRoot(root);
 };
 render_fn = function() {
   var _a5, _b2, _c3;
@@ -1536,21 +1538,18 @@ var ScrollListener = class extends CorePlugin {
   }
 };
 _timeout = new WeakMap();
+var CSS_RULES2 = "* { user-select: none !important; -webkit-user-select: none !important; }";
 var PreventSelection = class extends Plugin {
-  constructor(manager, options) {
-    super(manager, options);
+  constructor(manager) {
+    super(manager);
     this.manager = manager;
+    const styleInjector = manager.registry.plugins.get(
+      StyleInjector
+    );
+    const unregisterStyles = styleInjector == null ? void 0 : styleInjector.register(CSS_RULES2);
     this.destroy = effect(() => {
-      var _a5;
       const { dragOperation } = this.manager;
-      const { nonce } = (_a5 = this.options) != null ? _a5 : {};
       if (dragOperation.status.initialized) {
-        const style = document.createElement("style");
-        if (nonce) {
-          style.setAttribute("nonce", nonce);
-        }
-        style.textContent = `* { user-select: none !important; -webkit-user-select: none !important; }`;
-        document.head.appendChild(style);
         removeSelection();
         document.addEventListener("selectionchange", removeSelection, {
           capture: true
@@ -1559,10 +1558,16 @@ var PreventSelection = class extends Plugin {
           document.removeEventListener("selectionchange", removeSelection, {
             capture: true
           });
-          style.remove();
         };
       }
     });
+    if (unregisterStyles) {
+      const originalDestroy = this.destroy.bind(this);
+      this.destroy = () => {
+        unregisterStyles();
+        originalDestroy();
+      };
+    }
   }
 };
 function removeSelection() {
@@ -2120,7 +2125,7 @@ var DragDropManager = class extends DragDropManager$1 {
     const sensors = resolveCustomizable(input.sensors, defaultPreset.sensors);
     const modifiers = resolveCustomizable(input.modifiers, defaultPreset.modifiers);
     super(__spreadProps(__spreadValues({}, input), {
-      plugins: [ScrollListener, Scroller, StyleSheetManager, ...plugins],
+      plugins: [ScrollListener, Scroller, StyleInjector, ...plugins],
       sensors,
       modifiers
     }));
@@ -2263,6 +2268,6 @@ _d = __decorateElement(_init6, 20, "#element", _element_dec2, _Droppable_instanc
 __decorateElement(_init6, 4, "proxy", _proxy_dec, Droppable, _proxy);
 __decoratorMetadata(_init6, Droppable);
 
-export { Accessibility, AutoScroller, Cursor, DragDropManager, Draggable, Droppable, Feedback, KeyboardSensor, PointerActivationConstraints, PointerSensor, PreventSelection, ScrollListener, Scroller, StyleSheetManager, defaultPreset };
+export { Accessibility, AutoScroller, Cursor, DragDropManager, Draggable, Droppable, Feedback, KeyboardSensor, PointerActivationConstraints, PointerSensor, PreventSelection, ScrollListener, Scroller, StyleInjector, defaultPreset };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map