@dnd-kit/dom 0.1.10 → 0.1.11

package/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var abstract = require('@dnd-kit/abstract');
-var state = require('@dnd-kit/state');
 var utilities = require('@dnd-kit/dom/utilities');
+var state = require('@dnd-kit/state');
 var geometry = require('@dnd-kit/geometry');
 var collision = require('@dnd-kit/collision');
 
@@ -102,7 +102,7 @@ var defaultAnnouncements = {
     return `Picked up draggable item ${source.id}.`;
   },
   dragover({ operation: { source, target } }) {
-    if (!source) return;
+    if (!source || source.id === (target == null ? void 0 : target.id)) return;
     if (target) {
       return `Draggable item ${source.id} was moved over droppable target ${target.id}.`;
     }
@@ -156,6 +156,7 @@ function createLiveRegion(id) {
 }
 
 // src/core/plugins/accessibility/Accessibility.ts
+var debouncedEvents = ["dragover", "dragmove"];
 var Accessibility = class extends abstract.Plugin {
   constructor(manager, options) {
     super(manager);
@@ -166,20 +167,42 @@ var Accessibility = class extends abstract.Plugin {
         announcement: announcementPrefix = defaultAnnouncementIdPrefix
       } = {},
       announcements = defaultAnnouncements,
-      screenReaderInstructions = defaultScreenReaderInstructions
+      screenReaderInstructions = defaultScreenReaderInstructions,
+      debounce: debounceMs = 500
     } = options != null ? options : {};
     const descriptionId = id ? `${descriptionPrefix}-${id}` : utilities.generateUniqueId(descriptionPrefix);
     const announcementId = id ? `${announcementPrefix}-${id}` : utilities.generateUniqueId(announcementPrefix);
     let hiddenTextElement;
     let liveRegionElement;
+    let liveRegionTextNode;
+    let latestAnnouncement;
+    const updateAnnouncement = (value = latestAnnouncement) => {
+      if (!liveRegionTextNode || !value) return;
+      if ((liveRegionTextNode == null ? void 0 : liveRegionTextNode.nodeValue) !== value) {
+        liveRegionTextNode.nodeValue = value;
+      }
+    };
+    const scheduleUpdateAnnouncement = () => utilities.scheduler.schedule(updateAnnouncement);
+    const debouncedUpdateAnnouncement = debounce(
+      scheduleUpdateAnnouncement,
+      debounceMs
+    );
     const eventListeners = Object.entries(announcements).map(
       ([eventName, getAnnouncement]) => {
         return this.manager.monitor.addEventListener(
           eventName,
           (event, manager2) => {
+            const element = liveRegionTextNode;
+            if (!element) return;
             const announcement = getAnnouncement == null ? void 0 : getAnnouncement(event, manager2);
-            if (announcement && liveRegionElement) {
-              liveRegionElement.textContent = announcement;
+            if (announcement && element.nodeValue !== announcement) {
+              latestAnnouncement = announcement;
+              if (debouncedEvents.includes(eventName)) {
+                debouncedUpdateAnnouncement();
+              } else {
+                scheduleUpdateAnnouncement();
+                debouncedUpdateAnnouncement.cancel();
+              }
             }
           }
         );
@@ -191,12 +214,14 @@ var Accessibility = class extends abstract.Plugin {
         screenReaderInstructions.draggable
       );
       liveRegionElement = createLiveRegion(announcementId);
+      liveRegionTextNode = document.createTextNode("");
+      liveRegionElement.appendChild(liveRegionTextNode);
       document.body.append(hiddenTextElement, liveRegionElement);
     };
-    const cleanupEffects = state.effects(() => {
-      for (const draggable of manager.registry.draggables.value) {
-        const { element, handle } = draggable;
-        const activator = handle != null ? handle : element;
+    const updateAttributes = () => {
+      var _a4;
+      for (const draggable of this.manager.registry.draggables.value) {
+        const activator = (_a4 = draggable.handle) != null ? _a4 : draggable.element;
         if (activator) {
           if (!hiddenTextElement || !liveRegionElement) {
             initialize();
@@ -222,15 +247,31 @@ var Accessibility = class extends abstract.Plugin {
           activator.setAttribute("aria-disabled", String(draggable.disabled));
         }
       }
-      this.destroy = () => {
-        hiddenTextElement == null ? void 0 : hiddenTextElement.remove();
-        liveRegionElement == null ? void 0 : liveRegionElement.remove();
-        eventListeners.forEach((unsubscribe) => unsubscribe());
-        cleanupEffects();
-      };
+    };
+    this.registerEffect(() => {
+      for (const draggable of this.manager.registry.draggables.value) {
+        void draggable.element;
+        void draggable.handle;
+      }
+      utilities.scheduler.schedule(updateAttributes);
     });
+    this.destroy = () => {
+      super.destroy();
+      hiddenTextElement == null ? void 0 : hiddenTextElement.remove();
+      liveRegionElement == null ? void 0 : liveRegionElement.remove();
+      eventListeners.forEach((unsubscribe) => unsubscribe());
+    };
   }
 };
+function debounce(fn, wait) {
+  let timeout;
+  const debounced = () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(fn, wait);
+  };
+  debounced.cancel = () => clearTimeout(timeout);
+  return debounced;
+}
 var Cursor = class extends abstract.Plugin {
   constructor(manager, options) {
     super(manager, options);
@@ -1069,6 +1110,41 @@ function getScrollIntent(value) {
   }
   return utilities.ScrollDirection.Idle;
 }
+
+// src/utilities/scheduling/scheduler.ts
+var Scheduler = class {
+  constructor(scheduler5) {
+    this.scheduler = scheduler5;
+    this.pending = false;
+    this.tasks = /* @__PURE__ */ new Set();
+    this.resolvers = /* @__PURE__ */ new Set();
+    this.flush = () => {
+      const { tasks, resolvers } = this;
+      this.pending = false;
+      this.tasks = /* @__PURE__ */ new Set();
+      this.resolvers = /* @__PURE__ */ new Set();
+      for (const task of tasks) {
+        task();
+      }
+      for (const resolve of resolvers) {
+        resolve();
+      }
+    };
+  }
+  schedule(task) {
+    this.tasks.add(task);
+    if (!this.pending) {
+      this.pending = true;
+      this.scheduler(this.flush);
+    }
+    return new Promise((resolve) => this.resolvers.add(resolve));
+  }
+};
+var scheduler3 = new Scheduler(
+  (callback) => requestAnimationFrame(callback)
+);
+
+// src/core/plugins/scrolling/AutoScroller.ts
 var AUTOSCROLL_INTERVAL = 10;
 var AutoScroller = class extends abstract.Plugin {
   constructor(manager, _options) {
@@ -1086,7 +1162,10 @@ var AutoScroller = class extends abstract.Plugin {
         const canScroll2 = scroller.scroll();
         if (canScroll2) {
           scroller.autoScrolling = true;
-          const interval = setInterval(scroller.scroll, AUTOSCROLL_INTERVAL);
+          const interval = setInterval(
+            () => scheduler3.schedule(scroller.scroll),
+            AUTOSCROLL_INTERVAL
+          );
           return () => {
             clearInterval(interval);
           };
@@ -1663,7 +1742,7 @@ var Draggable = class extends (_c = abstract.Draggable, _handle_dec = [state.rea
   constructor(_a4, manager) {
     var _b2 = _a4, {
       element,
-      effects: effects2 = () => [],
+      effects = () => [],
       handle,
       feedback = "default"
     } = _b2, input = __objRest(_b2, [
@@ -1675,7 +1754,7 @@ var Draggable = class extends (_c = abstract.Draggable, _handle_dec = [state.rea
     super(
       __spreadValues({
         effects: () => [
-          ...effects2(),
+          ...effects(),
           () => {
             var _a5, _b3;
             const { manager: manager2 } = this;
@@ -1716,7 +1795,7 @@ __decoratorMetadata(_init4, Draggable);
 var _proxy_dec, _element_dec2, _c2, _init5, _element2, _d, element_get, element_set, _Droppable_instances, _proxy;
 var Droppable = class extends (_c2 = abstract.Droppable, _element_dec2 = [state.reactive], _proxy_dec = [state.reactive], _c2) {
   constructor(_a4, manager) {
-    var _b2 = _a4, { element, effects: effects2 = () => [] } = _b2, input = __objRest(_b2, ["element", "effects"]);
+    var _b2 = _a4, { element, effects = () => [] } = _b2, input = __objRest(_b2, ["element", "effects"]);
     const { collisionDetector = collision.defaultCollisionDetection } = input;
     const updateShape = (boundingClientRect) => {
       const { manager: manager2, element: element2 } = this;
@@ -1738,7 +1817,7 @@ var Droppable = class extends (_c2 = abstract.Droppable, _element_dec2 = [state.
       __spreadProps(__spreadValues({}, input), {
         collisionDetector,
         effects: () => [
-          ...effects2(),
+          ...effects(),
           () => {
             const { element: element2, manager: manager2 } = this;
             if (!manager2) return;