@dnd-kit/dom 0.0.3 → 0.0.4-beta-20240621131401

package/index.js

@@ -1,19 +1,85 @@
-import { Sensor, configurator, Plugin, CorePlugin, DragDropManager as DragDropManager$1, Draggable as Draggable$1, descriptor, Droppable as Droppable$1 } from '@dnd-kit/abstract';
-import { effect, batch, effects, untracked, reactive, computed, deepEqual, signal } from '@dnd-kit/state';
-import { ScrollDirection, Listeners, getDocument, DOMRectangle, Styles, getComputedStyles, createPlaceholder, isKeyboardEvent, parseTranslate, supportsPopover, showPopover, supportsStyle, animateTransform, canScroll, detectScrollIntent, scheduler, getScrollableAncestors, scrollIntoViewIfNeeded, getWindow, getFirstScrollableAncestor } from '@dnd-kit/dom/utilities';
-import { exceedsDistance, Axes } from '@dnd-kit/geometry';
+import { configurator, Plugin, CorePlugin, Sensor, DragDropManager as DragDropManager$1, Draggable as Draggable$1, descriptor, Droppable as Droppable$1 } from '@dnd-kit/abstract';
+import { effects, effect, untracked, computed, deepEqual, batch, signal, reactive } from '@dnd-kit/state';
+import { ScrollDirection, DOMRectangle, Styles, getComputedStyles, createPlaceholder, isKeyboardEvent, parseTranslate, supportsPopover, showPopover, supportsStyle, animateTransform, canScroll, detectScrollIntent, scheduler, getScrollableAncestors, Listeners, scrollIntoViewIfNeeded, getDocument, getWindow, getFirstScrollableAncestor } from '@dnd-kit/dom/utilities';
+import { Axes, exceedsDistance } from '@dnd-kit/geometry';
 import { defaultCollisionDetection } from '@dnd-kit/collision';
 
+var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp(target, key, result);
-  return result;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
 };
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __decoratorStart = (base) => {
+  var _a3;
+  return [, , , __create((_a3 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a3 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = array.length + 1 , key = __decoratorStrings[k + 5];
+  var initializers = (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = ((target = target.prototype), __getOwnPropDesc({ get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+      access.set = (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])({ get: desc.get, set: desc.set } , ctx), done._ = 1;
+    if (it === void 0) __expectFn(it) && (desc[key] = it );
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return desc && __defProp(target, name, desc), target;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 
 // src/core/plugins/accessibility/defaults.ts
 var defaultAttributes = {
@@ -28,21 +94,18 @@ var defaultScreenReaderInstructions = {
 };
 var defaultAnnouncements = {
   dragstart({ operation: { source } }) {
-    if (!source)
-      return;
+    if (!source) return;
     return `Picked up draggable item ${source.id}.`;
   },
   dragover({ operation: { source, target } }) {
-    if (!source)
-      return;
+    if (!source) return;
     if (target) {
       return `Draggable item ${source.id} was moved over droppable target ${target.id}.`;
     }
     return `Draggable item ${source.id} is no longer over a droppable target.`;
   },
   dragend({ operation: { source, target }, canceled }) {
-    if (!source)
-      return;
+    if (!source) return;
     if (canceled) {
       return `Dragging was cancelled. Draggable item ${source.id} was dropped.`;
     }
@@ -105,7 +168,7 @@ var Accessibility = class extends Plugin {
       } = {},
       announcements = defaultAnnouncements,
       screenReaderInstructions = defaultScreenReaderInstructions
-    } = options ?? {};
+    } = options != null ? options : {};
     const descriptionId = id ? `${descriptionPrefix}-${id}` : generateUniqueId(descriptionPrefix);
     const announcementId = id ? `${announcementPrefix}-${id}` : generateUniqueId(announcementPrefix);
     let hiddenTextElement;
@@ -115,7 +178,7 @@ var Accessibility = class extends Plugin {
         return this.manager.monitor.addEventListener(
           eventName,
           (event, manager2) => {
-            const announcement = getAnnouncement?.(event, manager2);
+            const announcement = getAnnouncement == null ? void 0 : getAnnouncement(event, manager2);
             if (announcement && liveRegionElement) {
               liveRegionElement.innerText = announcement;
             }
@@ -134,7 +197,7 @@ var Accessibility = class extends Plugin {
     const cleanupEffects = effects(() => {
       for (const draggable of manager.registry.draggables.value) {
         const { element, handle } = draggable;
-        const activator = handle ?? element;
+        const activator = handle != null ? handle : element;
         if (activator) {
           if (!hiddenTextElement || !liveRegionElement) {
             initialize();
@@ -162,8 +225,8 @@ var Accessibility = class extends Plugin {
         }
       }
       this.destroy = () => {
-        hiddenTextElement?.remove();
-        liveRegionElement?.remove();
+        hiddenTextElement == null ? void 0 : hiddenTextElement.remove();
+        liveRegionElement == null ? void 0 : liveRegionElement.remove();
         eventListeners.forEach((unsubscribe) => unsubscribe());
         cleanupEffects();
       };
@@ -175,8 +238,9 @@ var Cursor = class extends Plugin {
     super(manager, options);
     this.manager = manager;
     this.destroy = effect(() => {
+      var _a3;
       const { dragOperation } = this.manager;
-      const { cursor = "grabbing" } = this.options ?? {};
+      const { cursor = "grabbing" } = (_a3 = this.options) != null ? _a3 : {};
       if (dragOperation.status.initialized) {
         const style = document.createElement("style");
         style.innerText = `* { cursor: ${cursor} !important; }`;
@@ -191,7 +255,7 @@ var Cursor = class extends 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:var(${CSS_PREFIX}background);border:var(${CSS_PREFIX}border);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}] *{pointer-events: none !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"];
@@ -213,6 +277,7 @@ var Feedback = class extends Plugin {
       }
     });
     const cleanupEffect = effect(() => {
+      var _a3;
       const { dragOperation } = manager;
       const { position, source, status } = dragOperation;
       if (status.idle) {
@@ -222,11 +287,9 @@ var Feedback = class extends Plugin {
         initialTranslate = { x: 0, y: 0 };
         return;
       }
-      if (!source)
-        return;
+      if (!source) return;
       const { element, feedback } = source;
-      if (!element || feedback === "none")
-        return;
+      if (!element || feedback === "none") return;
       const shape = new DOMRectangle(element, true);
       const { width, height, top, left } = shape;
       const styles = new Styles(element);
@@ -279,8 +342,7 @@ var Feedback = class extends Plugin {
         },
         CSS_PREFIX
       );
-      if (placeholder)
-        element.insertAdjacentElement("afterend", placeholder);
+      if (placeholder) element.insertAdjacentElement("afterend", placeholder);
       if (supportsPopover(element)) {
         if (!element.hasAttribute("popover")) {
           element.setAttribute("popover", "");
@@ -305,10 +367,9 @@ var Feedback = class extends Plugin {
         offset.top = 0;
       }
       const resizeObserver = new ResizeObserver(() => {
-        if (!placeholder)
-          return;
+        if (!placeholder) return;
         const placeholderShape = new DOMRectangle(placeholder, true);
-        const origin = transformOrigin ?? { x: 1, y: 1 };
+        const origin = transformOrigin != null ? transformOrigin : { x: 1, y: 1 };
         const dX = (width - placeholderShape.width) * origin.x + delta.x;
         const dY = (height - placeholderShape.height) * origin.y + delta.y;
         styles.set(
@@ -385,6 +446,7 @@ var Feedback = class extends Plugin {
         });
       }
       const cleanupEffect2 = effect(function updateTransform() {
+        var _a4, _b2;
         const { transform, status: status2 } = dragOperation;
         if (!transform.x && !transform.y && !moved) {
           return;
@@ -405,8 +467,8 @@ var Feedback = class extends Plugin {
             CSS_PREFIX
           );
           dragOperation.shape = shape2.translate(
-            x - (currentTransform?.x ?? 0),
-            y - (currentTransform?.y ?? 0)
+            x - ((_a4 = currentTransform == null ? void 0 : currentTransform.x) != null ? _a4 : 0),
+            y - ((_b2 = currentTransform == null ? void 0 : currentTransform.y) != null ? _b2 : 0)
           );
           currentTransform = {
             x,
@@ -417,26 +479,27 @@ var Feedback = class extends Plugin {
           };
         }
       });
-      const id = manager.dragOperation.source?.id;
+      const id = (_a3 = manager.dragOperation.source) == null ? void 0 : _a3.id;
       const restoreFocus = () => {
+        var _a4;
         if (!isKeyboardOperation || id == null) {
           return;
         }
         const draggable = manager.registry.draggables.get(id);
-        const element2 = draggable?.handle ?? draggable?.element;
+        const element2 = (_a4 = draggable == null ? void 0 : draggable.handle) != null ? _a4 : draggable == null ? void 0 : draggable.element;
         if (element2 instanceof HTMLElement) {
           element2.focus();
         }
       };
       let cleanup = () => {
-        elementMutationObserver?.disconnect();
-        documentMutationObserver?.disconnect();
+        elementMutationObserver == null ? void 0 : elementMutationObserver.disconnect();
+        documentMutationObserver == null ? void 0 : documentMutationObserver.disconnect();
         resizeObserver.disconnect();
         styles.reset();
         if (moved && element.isConnected) {
-          placeholder?.replaceWith(element);
+          placeholder == null ? void 0 : placeholder.replaceWith(element);
         }
-        placeholder?.remove();
+        placeholder == null ? void 0 : placeholder.remove();
         element.removeAttribute(ATTRIBUTE);
         if (supportsPopover(element)) {
           element.removeAttribute("popover");
@@ -454,12 +517,13 @@ var Feedback = class extends Plugin {
           cleanup = void 0;
           const transform = currentTransform;
           if (!transform) {
-            onComplete?.();
+            onComplete == null ? void 0 : onComplete();
             return;
           }
           manager.renderer.rendering.then(() => {
+            var _a4;
             showPopover(element);
-            const target = placeholder ?? element;
+            const target = placeholder != null ? placeholder : element;
             styles.remove(["translate"], CSS_PREFIX);
             const shape2 = new DOMRectangle(target);
             const currentShape = new DOMRectangle(element, true).translate(
@@ -479,7 +543,7 @@ var Feedback = class extends Plugin {
               element,
               keyframes: {
                 translate: [
-                  `${transform.x}px ${transform.y}px ${transform.z ?? 0}`,
+                  `${transform.x}px ${transform.y}px ${(_a4 = transform.z) != null ? _a4 : 0}`,
                   `${final.x}px ${final.y}px ${final.z}`
                 ]
               },
@@ -489,31 +553,29 @@ var Feedback = class extends Plugin {
               },
               onFinish() {
                 requestAnimationFrame(restoreFocus);
-                onComplete?.();
+                onComplete == null ? void 0 : onComplete();
               }
             });
           });
         }
       });
-      return () => cleanup?.();
+      return () => cleanup == null ? void 0 : cleanup();
     });
     this.destroy = () => {
       styleInjectionCleanup();
       cleanupEffect();
-      style?.remove();
+      style == null ? void 0 : style.remove();
     };
   }
 };
 var LOCKED = true;
 var UNLOCKED = false;
-var _a, _b;
+var _dec, _a, _dec2, _b, _init, __b, __a;
+_b = (_dec2 = [reactive], ScrollDirection.Forward), _a = (_dec = [reactive], ScrollDirection.Reverse);
 var ScrollLock = class {
   constructor() {
-    this[_a] = LOCKED;
-    this[_b] = LOCKED;
-  }
-  static {
-    _a = ScrollDirection.Forward, _b = ScrollDirection.Reverse;
+    __privateAdd(this, __b, __runInitializers(_init, 8, this, LOCKED)), __runInitializers(_init, 11, this);
+    __privateAdd(this, __a, __runInitializers(_init, 12, this, LOCKED)), __runInitializers(_init, 15, this);
   }
   isLocked(direction) {
     if (direction === ScrollDirection.Idle) {
@@ -531,12 +593,12 @@ var ScrollLock = class {
     this[direction] = UNLOCKED;
   }
 };
-__decorateClass([
-  reactive
-], ScrollLock.prototype, _a);
-__decorateClass([
-  reactive
-], ScrollLock.prototype, _b);
+_init = __decoratorStart(null);
+__b = new WeakMap();
+__a = new WeakMap();
+__decorateElement(_init, 4, _b, _dec2, ScrollLock, __b);
+__decorateElement(_init, 4, _a, _dec, ScrollLock, __a);
+__decoratorMetadata(_init, ScrollLock);
 
 // src/core/plugins/scrolling/ScrollIntent.ts
 var DIRECTIONS = [ScrollDirection.Forward, ScrollDirection.Reverse];
@@ -592,36 +654,39 @@ function getDirection(a, b) {
 }
 
 // src/core/plugins/scrolling/Scroller.ts
-var Scroller = class extends CorePlugin {
+var _autoScrolling_dec, _a2, _init2, _autoScrolling, _meta, _scroll;
+var Scroller = class extends (_a2 = CorePlugin, _autoScrolling_dec = [reactive], _a2) {
   constructor(manager) {
     super(manager);
-    this.autoScrolling = false;
-    this.#scroll = () => {
-      if (!this.#meta) {
+    __privateAdd(this, _autoScrolling, __runInitializers(_init2, 8, this, false)), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _meta);
+    __privateAdd(this, _scroll, () => {
+      if (!__privateGet(this, _meta)) {
         return;
       }
-      const { element, by } = this.#meta;
+      const { element, by } = __privateGet(this, _meta);
       element.scrollBy(by.x, by.y);
-    };
+    });
     this.scroll = (options) => {
+      var _a3;
       if (this.disabled) {
         return false;
       }
       const elements = this.getScrollableElements();
       if (!elements) {
-        this.#meta = void 0;
+        __privateSet(this, _meta, void 0);
         return false;
       }
       const { position } = this.manager.dragOperation;
-      const currentPosition = position?.current;
+      const currentPosition = position == null ? void 0 : position.current;
       if (currentPosition) {
-        const { by } = options ?? {};
+        const { by } = options != null ? options : {};
         const intent = by ? {
           x: getScrollIntent(by.x),
           y: getScrollIntent(by.y)
         } : void 0;
         const scrollIntent = intent ? void 0 : this.scrollIntentTracker.current;
-        if (scrollIntent?.isLocked()) {
+        if (scrollIntent == null ? void 0 : scrollIntent.isLocked()) {
           return false;
         }
         for (const scrollableElement of elements) {
@@ -641,36 +706,36 @@ var Scroller = class extends CorePlugin {
               }
             }
             if (direction.x || direction.y) {
-              const { x, y } = by ?? direction;
+              const { x, y } = by != null ? by : direction;
               const scrollLeftBy = x * speed.x;
               const scrollTopBy = y * speed.y;
               if (scrollLeftBy || scrollTopBy) {
-                const previousScrollBy = this.#meta?.by;
+                const previousScrollBy = (_a3 = __privateGet(this, _meta)) == null ? void 0 : _a3.by;
                 if (this.autoScrolling && previousScrollBy) {
                   const scrollIntentMismatch = previousScrollBy.x && !scrollLeftBy || previousScrollBy.y && !scrollTopBy;
-                  if (scrollIntentMismatch)
-                    continue;
+                  if (scrollIntentMismatch) continue;
                 }
-                this.#meta = {
+                __privateSet(this, _meta, {
                   element: scrollableElement,
                   by: {
                     x: scrollLeftBy,
                     y: scrollTopBy
                   }
-                };
-                scheduler.schedule(this.#scroll);
+                });
+                scheduler.schedule(__privateGet(this, _scroll));
                 return true;
               }
             }
           }
         }
       }
-      this.#meta = void 0;
+      __privateSet(this, _meta, void 0);
       return false;
     };
     let previousElementFromPoint = null;
     let previousScrollableElements = null;
     const elementFromPoint = computed(() => {
+      var _a3;
       const { position } = manager.dragOperation;
       if (!position) {
         return null;
@@ -680,13 +745,13 @@ var Scroller = class extends CorePlugin {
       if (element) {
         previousElementFromPoint = element;
       }
-      return document.elementFromPoint(x, y) ?? previousElementFromPoint;
+      return (_a3 = document.elementFromPoint(x, y)) != null ? _a3 : previousElementFromPoint;
     });
     const scrollableElements = computed(() => {
       const element = elementFromPoint.value;
       if (!element || element === document.documentElement) {
         const { target } = manager.dragOperation;
-        const targetElement = target?.element;
+        const targetElement = target == null ? void 0 : target.element;
         if (targetElement) {
           const elements = getScrollableAncestors(targetElement, {
             excludeElement: false
@@ -699,7 +764,7 @@ var Scroller = class extends CorePlugin {
         const elements = getScrollableAncestors(element, {
           excludeElement: false
         });
-        if (this.autoScrolling && previousScrollableElements && elements.size < previousScrollableElements?.size) {
+        if (this.autoScrolling && previousScrollableElements && elements.size < (previousScrollableElements == null ? void 0 : previousScrollableElements.size)) {
           return previousScrollableElements;
         }
         previousScrollableElements = elements;
@@ -721,12 +786,13 @@ var Scroller = class extends CorePlugin {
       }
     });
   }
-  #meta;
-  #scroll;
 };
-__decorateClass([
-  reactive
-], Scroller.prototype, "autoScrolling");
+_init2 = __decoratorStart(_a2);
+_autoScrolling = new WeakMap();
+_meta = new WeakMap();
+_scroll = new WeakMap();
+__decorateElement(_init2, 4, "autoScrolling", _autoScrolling_dec, Scroller, _autoScrolling);
+__decoratorMetadata(_init2, Scroller);
 function getScrollIntent(value) {
   if (value > 0) {
     return ScrollDirection.Forward;
@@ -768,15 +834,17 @@ var listenerOptions = {
   capture: true,
   passive: true
 };
+var _timeout;
 var ScrollListener = class extends CorePlugin {
   constructor(manager) {
     super(manager);
+    __privateAdd(this, _timeout);
     this.handleScroll = () => {
-      if (this.#timeout == null) {
-        this.#timeout = setTimeout(() => {
+      if (__privateGet(this, _timeout) == null) {
+        __privateSet(this, _timeout, setTimeout(() => {
           this.manager.collisionObserver.forceUpdate();
-          this.#timeout = void 0;
-        }, 50);
+          __privateSet(this, _timeout, void 0);
+        }, 50));
       }
     };
     const { dragOperation } = this.manager;
@@ -794,8 +862,8 @@ var ScrollListener = class extends CorePlugin {
       }
     });
   }
-  #timeout;
 };
+_timeout = new WeakMap();
 var PreventSelection = class extends Plugin {
   constructor(manager) {
     super(manager);
@@ -820,7 +888,8 @@ var PreventSelection = class extends Plugin {
   }
 };
 function removeSelection() {
-  document.getSelection()?.removeAllRanges();
+  var _a3;
+  (_a3 = document.getSelection()) == null ? void 0 : _a3.removeAllRanges();
 }
 var DEFAULT_KEYBOARD_CODES = {
   start: ["Space", "Enter"],
@@ -832,12 +901,13 @@ var DEFAULT_KEYBOARD_CODES = {
   right: ["ArrowRight"]
 };
 var DEFAULT_OFFSET = 10;
+var _cleanupFunctions;
 var KeyboardSensor = class extends Sensor {
   constructor(manager, options) {
     super(manager);
     this.manager = manager;
     this.options = options;
-    this.#cleanupFunctions = [];
+    __privateAdd(this, _cleanupFunctions, []);
     this.listeners = new Listeners();
     this.handleSourceKeyDown = (event, source, options) => {
       if (this.disabled || event.defaultPrevented) {
@@ -849,7 +919,7 @@ var KeyboardSensor = class extends Sensor {
       if (source.disabled || !source.element) {
         return;
       }
-      const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options ?? {};
+      const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options != null ? options : {};
       if (!keyboardCodes.start.includes(event.code)) {
         return;
       }
@@ -859,10 +929,10 @@ var KeyboardSensor = class extends Sensor {
       this.handleStart(event, source, options);
     };
   }
-  #cleanupFunctions;
   bind(source, options = this.options) {
     const unbind = effect(() => {
-      const target = source.handle ?? source.element;
+      var _a3;
+      const target = (_a3 = source.handle) != null ? _a3 : source.element;
       const listener = (event) => {
         if (event instanceof KeyboardEvent) {
           this.handleSourceKeyDown(event, source, options);
@@ -911,10 +981,10 @@ var KeyboardSensor = class extends Sensor {
         { type: "resize", listener: () => this.handleEnd(true) }
       ])
     ];
-    this.#cleanupFunctions.push(...listeners);
+    __privateGet(this, _cleanupFunctions).push(...listeners);
   }
   handleKeyDown(event, _source, options) {
-    const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options ?? {};
+    const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options != null ? options : {};
     if (isKeycode(event, [...keyboardCodes.end, ...keyboardCodes.cancel])) {
       event.preventDefault();
       const canceled = isKeycode(event, keyboardCodes.cancel);
@@ -962,7 +1032,7 @@ var KeyboardSensor = class extends Sensor {
         offset = { x: DEFAULT_OFFSET * factor, y: 0 };
         break;
     }
-    if (offset?.x || offset?.y) {
+    if ((offset == null ? void 0 : offset.x) || (offset == null ? void 0 : offset.y)) {
       event.preventDefault();
       this.manager.actions.move({
         by: offset
@@ -971,36 +1041,42 @@ var KeyboardSensor = class extends Sensor {
   }
   sideEffects() {
     const autoScroller = this.manager.registry.plugins.get(AutoScroller);
-    if (autoScroller?.disabled === false) {
+    if ((autoScroller == null ? void 0 : autoScroller.disabled) === false) {
       autoScroller.disable();
-      this.#cleanupFunctions.push(() => {
+      __privateGet(this, _cleanupFunctions).push(() => {
         autoScroller.enable();
       });
     }
   }
   cleanup() {
-    this.#cleanupFunctions.forEach((cleanup) => cleanup());
+    __privateGet(this, _cleanupFunctions).forEach((cleanup) => cleanup());
   }
   destroy() {
     this.cleanup();
     this.listeners.clear();
   }
 };
+_cleanupFunctions = new WeakMap();
 function isKeycode(event, codes) {
   return codes.includes(event.code);
 }
-var PointerSensor = class _PointerSensor extends Sensor {
+var _clearTimeout;
+var _PointerSensor = class _PointerSensor extends Sensor {
   constructor(manager, options) {
     super(manager);
     this.manager = manager;
     this.options = options;
     this.listeners = new Listeners();
     this.cleanup = /* @__PURE__ */ new Set();
+    __privateAdd(this, _clearTimeout);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handlePointerUp = this.handlePointerUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
-  #clearTimeout;
   bind(source, options = this.options) {
     const unbind = effect(() => {
-      const target = source.handle ?? source.element;
+      var _a3;
+      const target = (_a3 = source.handle) != null ? _a3 : source.element;
       const listener = (event) => {
         if (event instanceof PointerEvent) {
           this.handlePointerDown(event, source, options);
@@ -1017,15 +1093,11 @@ var PointerSensor = class _PointerSensor extends Sensor {
     return unbind;
   }
   handlePointerDown(event, source, options = {}) {
-    if (this.disabled) {
-      return;
-    }
-    if (!event.isPrimary || event.button !== 0 || !(event.target instanceof Element)) {
-      return;
-    }
-    if (source.disabled) {
+    if (this.disabled || !event.isPrimary || event.button !== 0 || !(event.target instanceof Element) || source.disabled) {
       return;
     }
+    const { target } = event;
+    const isNativeDraggable = target instanceof HTMLElement && target.draggable && target.getAttribute("draggable") === "true";
     this.initialCoordinates = {
       x: event.clientX,
       y: event.clientY
@@ -1033,7 +1105,7 @@ var PointerSensor = class _PointerSensor extends Sensor {
     const { activationConstraints } = options;
     const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
     event.stopImmediatePropagation();
-    if (!constraints?.delay && !constraints?.distance) {
+    if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
       this.handleStart(source, event);
     } else {
       const { delay } = constraints;
@@ -1042,10 +1114,10 @@ var PointerSensor = class _PointerSensor extends Sensor {
           () => this.handleStart(source, event),
           delay.value
         );
-        this.#clearTimeout = () => {
+        __privateSet(this, _clearTimeout, () => {
           clearTimeout(timeout);
-          this.#clearTimeout = void 0;
-        };
+          __privateSet(this, _clearTimeout, void 0);
+        });
       }
     }
     const ownerDocument = getDocument(event.target);
@@ -1056,7 +1128,10 @@ var PointerSensor = class _PointerSensor extends Sensor {
       },
       {
         type: "pointerup",
-        listener: this.handlePointerUp.bind(this)
+        listener: this.handlePointerUp,
+        options: {
+          capture: true
+        }
       },
       {
         // Prevent scrolling on touch devices
@@ -1066,19 +1141,25 @@ var PointerSensor = class _PointerSensor extends Sensor {
           passive: false
         }
       },
+      {
+        // Prevent click events
+        type: "click",
+        listener: preventDefault
+      },
       {
         // Cancel activation if there is a competing Drag and Drop interaction
         type: "dragstart",
-        listener: this.handleCancel.bind(this)
+        listener: isNativeDraggable ? this.handleCancel : preventDefault
       },
       {
         type: "keydown",
-        listener: this.handleKeyDown.bind(this)
+        listener: this.handleKeyDown
       }
     ]);
     const cleanup = () => {
-      unbindListeners();
-      this.#clearTimeout?.();
+      var _a3;
+      setTimeout(unbindListeners);
+      (_a3 = __privateGet(this, _clearTimeout)) == null ? void 0 : _a3.call(this);
       this.initialCoordinates = void 0;
       this.cleanup.delete(cleanup);
     };
@@ -1104,7 +1185,7 @@ var PointerSensor = class _PointerSensor extends Sensor {
     };
     const { activationConstraints } = options;
     const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
-    const { distance, delay } = constraints ?? {};
+    const { distance, delay } = constraints != null ? constraints : {};
     if (distance) {
       if (distance.tolerance != null && exceedsDistance(delta, distance.tolerance)) {
         return this.handleCancel();
@@ -1136,8 +1217,9 @@ var PointerSensor = class _PointerSensor extends Sensor {
     }
   }
   handleStart(source, event) {
+    var _a3;
     const { manager, initialCoordinates } = this;
-    this.#clearTimeout?.();
+    (_a3 = __privateGet(this, _clearTimeout)) == null ? void 0 : _a3.call(this);
     if (!initialCoordinates || manager.dragOperation.status.initialized) {
       return;
     }
@@ -1160,10 +1242,10 @@ var PointerSensor = class _PointerSensor extends Sensor {
   destroy() {
     this.listeners.clear();
   }
-  static {
-    this.configure = configurator(_PointerSensor);
-  }
 };
+_clearTimeout = new WeakMap();
+_PointerSensor.configure = configurator(_PointerSensor);
+var PointerSensor = _PointerSensor;
 function preventDefault(event) {
   event.preventDefault();
 }
@@ -1187,8 +1269,9 @@ var defaultPreset = {
   sensors: [
     PointerSensor.configure({
       activationConstraints(event, source) {
+        var _a3;
         const { pointerType, target } = event;
-        if (pointerType === "mouse" && target instanceof Element && (source.handle === target || source.handle?.contains(target))) {
+        if (pointerType === "mouse" && target instanceof Element && (source.handle === target || ((_a3 = source.handle) == null ? void 0 : _a3.contains(target)))) {
           return void 0;
         }
         return {
@@ -1207,29 +1290,36 @@ var DragDropManager = class extends DragDropManager$1 {
       sensors = defaultPreset.sensors,
       modifiers = []
     } = input;
-    super({
-      ...input,
+    super(__spreadProps(__spreadValues({}, input), {
       plugins: [ScrollListener, Scroller, ...plugins],
       sensors,
       modifiers
-    });
+    }));
   }
 };
-var Draggable = class extends Draggable$1 {
-  constructor({
-    element,
-    effects: effects2 = () => [],
-    handle,
-    feedback = "default",
-    ...input
-  }, manager) {
+var _feedback_dec, _element_dec, _handle_dec, _c, _init3, _handle, _element, _feedback;
+var Draggable = class extends (_c = Draggable$1, _handle_dec = [reactive], _element_dec = [reactive], _feedback_dec = [reactive], _c) {
+  constructor(_a3, manager) {
+    var _b2 = _a3, {
+      element,
+      effects: effects2 = () => [],
+      handle,
+      feedback = "default"
+    } = _b2, input = __objRest(_b2, [
+      "element",
+      "effects",
+      "handle",
+      "feedback"
+    ]);
     super(
-      {
+      __spreadValues({
         effects: () => [
           ...effects2(),
           () => {
+            var _a4, _b3;
             const { manager: manager2 } = this;
-            const sensors = this.sensors?.map(descriptor) ?? [
+            if (!manager2) return;
+            const sensors = (_b3 = (_a4 = this.sensors) == null ? void 0 : _a4.map(descriptor)) != null ? _b3 : [
               ...manager2.sensors
             ];
             const unbindFunctions = sensors.map((entry) => {
@@ -1242,37 +1332,40 @@ var Draggable = class extends Draggable$1 {
               unbindFunctions.forEach((unbind) => unbind());
             };
           }
-        ],
-        ...input
-      },
+        ]
+      }, input),
       manager
     );
-    this.manager = manager;
+    __privateAdd(this, _handle, __runInitializers(_init3, 8, this)), __runInitializers(_init3, 11, this);
+    __privateAdd(this, _element, __runInitializers(_init3, 12, this)), __runInitializers(_init3, 15, this);
+    __privateAdd(this, _feedback, __runInitializers(_init3, 16, this)), __runInitializers(_init3, 19, this);
     this.element = element;
     this.handle = handle;
     this.feedback = feedback;
   }
 };
-__decorateClass([
-  reactive
-], Draggable.prototype, "handle");
-__decorateClass([
-  reactive
-], Draggable.prototype, "element");
-__decorateClass([
-  reactive
-], Draggable.prototype, "feedback");
-var Droppable = class extends Droppable$1 {
-  constructor({ element, effects: effects2 = () => [], ...input }, manager) {
+_init3 = __decoratorStart(_c);
+_handle = new WeakMap();
+_element = new WeakMap();
+_feedback = new WeakMap();
+__decorateElement(_init3, 4, "handle", _handle_dec, Draggable, _handle);
+__decorateElement(_init3, 4, "element", _element_dec, Draggable, _element);
+__decorateElement(_init3, 4, "feedback", _feedback_dec, Draggable, _feedback);
+__decoratorMetadata(_init3, Draggable);
+var _placeholder_dec, _visible_dec, _c2, _init4, _visible, _placeholder;
+var Droppable = class extends (_c2 = Droppable$1, _visible_dec = [reactive], _placeholder_dec = [reactive], _c2) {
+  constructor(_a3, manager) {
+    var _b2 = _a3, { element, effects: effects2 = () => [] } = _b2, input = __objRest(_b2, ["element", "effects"]);
+    var _a4;
     const { collisionDetector = defaultCollisionDetection } = input;
     super(
-      {
-        ...input,
+      __spreadProps(__spreadValues({}, input), {
         collisionDetector,
         effects: () => [
           ...effects2(),
           () => {
             const { element: element2, manager: manager2 } = this;
+            if (!manager2) return;
             const { dragOperation } = manager2;
             if (element2 && dragOperation.status.initialized) {
               const scrollableAncestor = getFirstScrollableAncestor(element2);
@@ -1288,7 +1381,7 @@ var Droppable = class extends Droppable$1 {
                   this.visible = entry.isIntersecting;
                 },
                 {
-                  root: root ?? doc,
+                  root: root != null ? root : doc,
                   rootMargin: "40%"
                 }
               );
@@ -1316,34 +1409,36 @@ var Droppable = class extends Droppable$1 {
           },
           () => {
             const { manager: manager2 } = this;
+            if (!manager2) return;
             const { dragOperation } = manager2;
             const { status } = dragOperation;
             const source = untracked(() => dragOperation.source);
             if (status.initialized) {
-              if (source?.type != null && !this.accepts(source)) {
+              if ((source == null ? void 0 : source.type) != null && !this.accepts(source)) {
                 return;
               }
               scheduler.schedule(this.refreshShape);
             }
           },
           () => {
-            const { manager: manager2 } = this;
-            if (manager2.dragOperation.status.initialized) {
+            var _a5;
+            if ((_a5 = this.manager) == null ? void 0 : _a5.dragOperation.status.initialized) {
               return () => {
                 this.shape = void 0;
               };
             }
           }
         ]
-      },
+      }),
       manager
     );
-    this.manager = manager;
+    __privateAdd(this, _visible, __runInitializers(_init4, 8, this)), __runInitializers(_init4, 11, this);
+    __privateAdd(this, _placeholder, __runInitializers(_init4, 12, this)), __runInitializers(_init4, 15, this);
     this.internal = {
       element: signal(element)
     };
     this.refreshShape = this.refreshShape.bind(this);
-    if (manager.dragOperation.status.initialized) {
+    if ((_a4 = this.manager) == null ? void 0 : _a4.dragOperation.status.initialized) {
       this.visible = true;
     }
   }
@@ -1351,7 +1446,8 @@ var Droppable = class extends Droppable$1 {
     this.internal.element.value = value;
   }
   get element() {
-    return this.placeholder ?? this.internal?.element.value;
+    var _a3, _b2;
+    return (_b2 = this.placeholder) != null ? _b2 : (_a3 = this.internal) == null ? void 0 : _a3.element.value;
   }
   refreshShape(ignoreTransform) {
     const { element, shape } = this;
@@ -1360,19 +1456,19 @@ var Droppable = class extends Droppable$1 {
       return void 0;
     }
     const updatedShape = new DOMRectangle(element, ignoreTransform);
-    if (updatedShape && shape?.equals(updatedShape)) {
+    if (updatedShape && (shape == null ? void 0 : shape.equals(updatedShape))) {
       return shape;
     }
     this.shape = updatedShape;
     return updatedShape;
   }
 };
-__decorateClass([
-  reactive
-], Droppable.prototype, "visible");
-__decorateClass([
-  reactive
-], Droppable.prototype, "placeholder");
+_init4 = __decoratorStart(_c2);
+_visible = new WeakMap();
+_placeholder = new WeakMap();
+__decorateElement(_init4, 4, "visible", _visible_dec, Droppable, _visible);
+__decorateElement(_init4, 4, "placeholder", _placeholder_dec, Droppable, _placeholder);
+__decoratorMetadata(_init4, Droppable);
 
 export { Accessibility, AutoScroller, DragDropManager, Draggable, Droppable, Feedback, KeyboardSensor, PointerSensor, ScrollListener, Scroller, defaultPreset };
 //# sourceMappingURL=out.js.map