@vue-dnd-kit/core 2.0.0-alpha3 → 2.0.0-alpha4

package/dist/vue-dnd-kit-core.es.js

@@ -1,14 +1,14 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dnd-kit-default-overlay{transform:translate3d(var(--position-x),var(--position-y),0)}.dnd-kit-overlay-container{position:fixed;top:0;left:0;pointer-events:none;cursor:grabbing}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { ref as F, watch as Ae, shallowRef as ne, reactive as _, computed as E, onMounted as R, onBeforeUnmount as P, inject as de, defineComponent as ye, unref as A, openBlock as p, createElementBlock as K, normalizeStyle as se, Fragment as X, renderList as we, createBlock as V, resolveDynamicComponent as q, createCommentVNode as xe, useTemplateRef as Le, provide as Ce, renderSlot as ie, createElementVNode as ke } from "vue";
-const v = {
+import { ref as I, watch as Se, shallowRef as ne, reactive as _, computed as E, onMounted as R, onBeforeUnmount as P, inject as de, defineComponent as ye, unref as A, openBlock as v, createElementBlock as K, normalizeStyle as se, Fragment as Z, renderList as Ae, createBlock as V, resolveDynamicComponent as q, createCommentVNode as we, useTemplateRef as xe, provide as Le, renderSlot as ie, createElementVNode as Ce } from "vue";
+const M = {
   SELECT_AREA: "data-dnd-kit-select-area",
   DRAGGABLE: "data-dnd-kit-draggable",
   DROPPABLE: "data-dnd-kit-droppable",
   CONSTRAINT_AREA: "data-dnd-kit-constraint-area"
 }, k = {
-  SELECT_AREA: `[${v.SELECT_AREA}]`,
-  DRAGGABLE: `[${v.DRAGGABLE}]`,
-  CONSTRAINT_AREA: `[${v.CONSTRAINT_AREA}]`
+  SELECT_AREA: `[${M.SELECT_AREA}]`,
+  DRAGGABLE: `[${M.DRAGGABLE}]`,
+  CONSTRAINT_AREA: `[${M.CONSTRAINT_AREA}]`
 }, te = "VueDnDKitProvider", ae = (e, t, n, s) => {
   const i = /* @__PURE__ */ new Set();
   return t.forEach((a) => {
@@ -22,14 +22,14 @@ const v = {
     l[c]((u) => n.value.has(u)) && i.add(a);
   }), i;
 };
-let be = "", Re = "", Pe = "";
-const N = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$el : null, B = (e, t) => e !== t && e.contains(t), Be = (e, t) => !(e.right < t.left || e.left > t.right || e.bottom < t.top || e.top > t.bottom), W = () => {
+let be = "", ke = "", Re = "";
+const N = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$el : null, B = (e, t) => e !== t && e.contains(t), Pe = (e, t) => !(e.right < t.left || e.left > t.right || e.bottom < t.top || e.top > t.bottom), W = () => {
   const e = document.body;
   be = e.style.userSelect, e.style.userSelect = "none", window.addEventListener("contextmenu", m), window.addEventListener("selectstart", m), window.addEventListener("touchstart", m), window.addEventListener("touchmove", m);
 }, j = () => {
   const e = document.body;
-  e.style.userSelect = be, e.style.touchAction = Re, e.style.overscrollBehavior = Pe, window.removeEventListener("contextmenu", m), window.removeEventListener("selectstart", m), window.removeEventListener("touchstart", m), window.removeEventListener("touchmove", m);
-}, m = (e) => e.preventDefault(), M = (e, t) => {
+  e.style.userSelect = be, e.style.touchAction = ke, e.style.overscrollBehavior = Re, window.removeEventListener("contextmenu", m), window.removeEventListener("selectstart", m), window.removeEventListener("touchstart", m), window.removeEventListener("touchmove", m);
+}, m = (e) => e.preventDefault(), S = (e, t) => {
   if (t.entities.draggableMap.get(e)?.disabled) return !0;
   for (const [s, i] of t.entities.draggableMap)
     if (i.disabled && B(s, e)) return !0;
@@ -51,7 +51,7 @@ const N = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$e
     unobserve: (n) => t.unobserve(n),
     disconnect: () => t.disconnect()
   };
-}, Oe = (e) => {
+}, Be = (e) => {
   const t = new ResizeObserver((n) => {
     const s = n[0];
     if (!s) return;
@@ -63,8 +63,8 @@ const N = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$e
     unobserve: (n) => t.unobserve(n),
     disconnect: () => t.disconnect()
   };
-}, Te = (e) => {
-  const t = F(null), n = Oe(t), s = Ae(
+}, Oe = (e) => {
+  const t = I(null), n = Be(t), s = Se(
     e,
     (a) => {
       n.disconnect(), a && n.observe(a);
@@ -92,30 +92,31 @@ function he(e, t) {
   return {
     ...t,
     initialHTML: e.innerHTML,
-    initialRect: e.getBoundingClientRect()
+    initialRect: e.getBoundingClientRect(),
+    initialOuterHTML: e.outerHTML
   };
 }
-function ze(e, t, n) {
+function Te(e, t, n) {
   e.forEach((s) => {
     const i = t.get(s);
     n.set(s, he(s, i));
   }), e.clear();
 }
-function _e(e, t, n) {
+function ze(e, t, n) {
   n.clear();
   const s = t.get(e);
   n.set(e, he(e, s));
 }
-function G(e) {
-  e.entities.initiatingDraggable && (e.state.value = "dragging", Ie(
+function H(e) {
+  e.entities.initiatingDraggable && (e.state.value = "dragging", _e(
     e.entities.initiatingDraggable,
     e.entities.selectedSet,
     e.entities.draggableMap,
     e.entities.draggingMap
   ));
 }
-function Ie(e, t, n, s) {
-  t.has(e) ? ze(t, n, s) : (t.clear(), _e(e, n, s));
+function _e(e, t, n, s) {
+  t.has(e) ? Te(t, n, s) : (t.clear(), ze(e, n, s));
 }
 function De(e, t, n, s) {
   if (s || !n) return !0;
@@ -143,7 +144,7 @@ function pe(e, t, n) {
   const s = n.distance != null, i = n.delay != null;
   return !s && !i ? !0 : s && !i ? e >= 1 : !s && i ? t >= 1 : (n.condition ?? "both") === "both" ? e >= 1 && t >= 1 : e >= 1 || t >= 1;
 }
-function Ke(e) {
+function Ie(e) {
   if (e.state.value !== "activating" || !e.entities.initiatingDraggable)
     return !1;
   const t = e.entities.draggableMap.get(
@@ -153,9 +154,9 @@ function Ke(e) {
     e.distanceProgress.value,
     e.delay.progress,
     t?.activation
-  ) ? (G(e), !0) : !1;
+  ) ? (H(e), !0) : !1;
 }
-function Ge(e, t) {
+function Ke(e, t) {
   let n = null;
   const s = () => {
     if (e.state.value !== "activating" || !e.entities.initiatingDraggable) {
@@ -193,10 +194,10 @@ function He(e, t) {
     entity: t.get(n)
   };
 }
-function Ne(e, t, n, s) {
+function Ge(e, t, n, s) {
   return n === "x" ? { x: e, y: s.top } : n === "y" ? { x: s.left, y: t } : { x: e, y: t };
 }
-function Ue(e, t, n, s, i) {
+function Ne(e, t, n, s, i) {
   let a = e, o = t;
   return n !== "y" && (a = Math.max(
     s.left,
@@ -206,7 +207,7 @@ function Ue(e, t, n, s, i) {
     Math.min(s.bottom - i.height, t)
   )), { x: a, y: o };
 }
-function Ye(e, t, n, s, i) {
+function Ue(e, t, n, s, i) {
   if (!e || !t)
     return { x: 0, y: 0 };
   const a = t.getBoundingClientRect(), o = a.width || i?.width || 0, r = a.height || i?.height || 0;
@@ -216,13 +217,13 @@ function Ye(e, t, n, s, i) {
   const f = He(n, s);
   if (!f)
     return { x: l, y: c };
-  const { element: u, entity: d } = f, g = u.getBoundingClientRect(), y = n.getBoundingClientRect(), b = Ne(
+  const { element: u, entity: d } = f, g = u.getBoundingClientRect(), y = n.getBoundingClientRect(), b = Ge(
     l,
     c,
     d.axis || "both",
     y
   );
-  return d.restrictToArea ? Ue(
+  return d.restrictToArea ? Ne(
     b.x,
     b.y,
     d.axis || "both",
@@ -246,10 +247,10 @@ const C = {
   ],
   forMoveFaster: ["ShiftLeft", "ShiftRight"]
 };
-function Ze(e) {
-  const t = ne(), n = F(), i = {
+function Ye(e) {
+  const t = ne(), n = I(), i = {
     keys: {
-      pressedKeys: F(/* @__PURE__ */ new Set()),
+      pressedKeys: I(/* @__PURE__ */ new Set()),
       forDrag: [...C.forDrag],
       forCancel: [...C.forCancel],
       forDrop: [...C.forDrop],
@@ -276,7 +277,7 @@ function Ze(e) {
       a.draggableMap,
       a.visibleDraggableSet,
       i.keys.pressedKeys,
-      (z) => M(z, { entities: a })
+      (z) => S(z, { entities: a })
     )),
     visibleDraggableSet: /* @__PURE__ */ new Set(),
     visibleDroppableSet: /* @__PURE__ */ new Set(),
@@ -297,15 +298,15 @@ function Ze(e) {
     a.visibleDroppableSet
   ), u = Y(
     a.visibleSelectableAreaSet
-  ), { overlaySize: d, overlaySizeObserver: g } = Te(e), y = F(), b = _({
+  ), { overlaySize: d, overlaySizeObserver: g } = Oe(e), y = I(), b = _({
     draggable: /* @__PURE__ */ new Map(),
     droppable: /* @__PURE__ */ new Map()
-  }), D = {
+  }), p = {
     throttle: ne(0)
   }, O = E(() => {
     o.y, o.x;
     const T = a.initiatingDraggable;
-    return Ye(
+    return Ue(
       n.value,
       e.value,
       T || null,
@@ -322,7 +323,7 @@ function Ze(e) {
     delay: r,
     distanceProgress: l,
     hovered: b,
-    collision: D,
+    collision: p,
     overlay: {
       size: d,
       style: O,
@@ -337,9 +338,9 @@ function Ze(e) {
     }
   };
 }
-const H = (e) => {
+const G = (e) => {
   e.pointer.value = void 0, e.state.value = void 0, e.entities.selectingArea = void 0, e.entities.initiatingDraggable = void 0, e.delay.progress = 0, e.delay.startTime = 0, e.entities.draggingMap.clear(), e.hovered.draggable.clear(), e.hovered.droppable.clear();
-}, Ee = (e) => {
+}, $e = (e) => {
   const t = e.entities.initiatingDraggable;
   if (!t) return;
   const s = e.entities.draggableMap.get(t)?.payload;
@@ -352,46 +353,65 @@ const H = (e) => {
     items: Array.isArray(o) ? o : [],
     dropData: r
   };
-}, w = (e) => e.keys().next().value, $e = (e) => e.target.closest(k.DRAGGABLE), S = (e) => ({
-  payload: Ee(e),
-  provider: e
-}), Z = (e, t, n) => {
-  const s = $e(t);
+}, Xe = (e, t) => {
+  const s = e.entities.droppableMap.get(t)?.payload;
+  if (!s) return;
+  const i = s();
+  if (!Array.isArray(i) || i.length < 1) return;
+  const [a, o] = i;
+  return {
+    items: Array.isArray(a) ? a : [],
+    userData: o
+  };
+}, w = (e) => e.keys().next().value, Ze = (e) => e.target.closest(k.DRAGGABLE), D = (e, t) => {
+  const n = {
+    payload: $e(e),
+    provider: e
+  };
+  return t && (n.dropZonePayload = Xe(e, t)), n;
+}, $ = (e, t, n) => {
+  const s = Ze(t);
   if (!s || !e.entities.draggingMap.has(s)) return;
-  const i = S(e);
+  const i = D(e);
   e.entities.draggingMap.get(s)?.events?.[n]?.(i);
 }, x = (e, t, n) => {
-  if (!t || M(t, e)) return;
-  const s = S(e);
+  if (!t || S(t, e)) return;
+  const s = D(e);
   e.entities.draggableMap.get(t)?.events?.[n]?.(s);
 }, h = (e, t) => {
-  const n = S(e);
+  const n = D(e);
   e.entities.draggableMap.forEach((s, i) => {
-    M(i, e) || s.events?.[t]?.(n);
+    S(i, e) || s.events?.[t]?.(n);
   });
-}, Xe = (e, t, n) => {
+}, Ve = (e, t, n) => {
   if (t !== n) {
-    const s = S(e);
-    t && !L(t, e) && e.entities.droppableMap.get(t)?.events?.onLeave?.(s), n && !L(n, e) && e.entities.droppableMap.get(n)?.events?.onEnter?.(s);
+    if (t && !L(t, e)) {
+      const s = D(e, t);
+      e.entities.droppableMap.get(t)?.events?.onLeave?.(s);
+    }
+    if (n && !L(n, e)) {
+      const s = D(e, n);
+      e.entities.droppableMap.get(n)?.events?.onEnter?.(s);
+    }
   }
-}, Ve = (e, t, n) => {
+}, qe = (e, t, n) => {
   if (t !== n) {
-    const s = S(e);
-    t && !M(t, e) && e.entities.draggableMap.get(t)?.events?.onLeave?.(s), n && !M(n, e) && e.entities.draggableMap.get(n)?.events?.onHover?.(s);
+    const s = D(e);
+    t && !S(t, e) && e.entities.draggableMap.get(t)?.events?.onLeave?.(s), n && !S(n, e) && e.entities.draggableMap.get(n)?.events?.onHover?.(s);
   }
-}, qe = (e, t) => {
+}, We = (e, t) => {
   const n = w(t.droppable);
   if (n && !L(n, e)) {
-    const s = S(e);
+    const s = D(e, n);
     e.entities.droppableMap.get(n)?.events?.onLeave?.(s);
   }
 }, ve = (e, t) => {
   const n = w(t.droppable);
   if (n && !L(n, e)) {
-    const s = S(e);
+    const s = D(e, n);
     e.entities.droppableMap.get(n)?.events?.onLeave?.(s);
   }
-}, We = (e, t) => !e.length || !t.length ? !0 : e.some((n) => t.includes(n)), je = (e, t, n) => {
+}, je = (e, t) => !e.length || !t.length ? !0 : e.some((n) => t.includes(n)), Je = (e, t, n) => {
   if (!n) return {};
   const s = n.getBoundingClientRect(), i = Math.max(s.left, Math.min(e.x, t.x)), a = Math.max(s.top, Math.min(e.y, t.y)), o = Math.min(s.right, Math.max(e.x, t.x)), r = Math.min(s.bottom, Math.max(e.y, t.y)), l = Math.max(0, o - i), c = Math.max(0, r - a);
   return {
@@ -404,29 +424,29 @@ const H = (e) => {
     border: "1px solid #3b82f6",
     backgroundColor: "#3b82f61a"
   };
-}, Je = (e) => {
+}, Qe = (e) => {
   if (!e.pointer.value || !e.entities.selectingArea) return;
-  const { selectingArea: t } = e.entities, n = Qe(
+  const { selectingArea: t } = e.entities, n = et(
     e.pointer.value.start,
     e.pointer.value.current
   ), s = e.entities.selectableAreaMap.get(t)?.groups ?? [];
   e.entities.visibleDraggableSet.forEach((i) => {
     if (!t.contains(i)) return;
-    if (M(i, e)) {
+    if (S(i, e)) {
       e.entities.selectedSet.delete(i);
       return;
     }
     const o = e.entities.draggableMap.get(i)?.groups ?? [];
-    if (!We(s, o)) {
+    if (!je(s, o)) {
       e.entities.selectedSet.delete(i);
       return;
     }
-    Be(n, i.getBoundingClientRect()) ? e.entities.selectedSet.add(i) : e.entities.selectedSet.delete(i);
+    Pe(n, i.getBoundingClientRect()) ? e.entities.selectedSet.add(i) : e.entities.selectedSet.delete(i);
   });
-}, Qe = (e, t) => {
+}, et = (e, t) => {
   const n = Math.min(e.x, t.x), s = Math.min(e.y, t.y), i = Math.max(e.x, t.x), a = Math.max(e.y, t.y), o = i - n, r = a - s;
   return new DOMRect(n, s, o, r);
-}, et = (e, t, n = 5) => {
+}, tt = (e, t, n = 5) => {
   const s = n / 2;
   return {
     left: e - s,
@@ -434,14 +454,14 @@ const H = (e) => {
     width: n,
     height: n
   };
-}, tt = (e) => {
+}, nt = (e) => {
   const t = e.pointer.value?.current, n = t?.x ?? 0, s = t?.y ?? 0;
-  return et(n, s, 5);
-}, I = (e, t, n) => {
+  return tt(n, s, 5);
+}, F = (e, t, n) => {
   const s = e.left + e.width / 2, i = e.top + e.height / 2;
   if (n) {
-    const f = n.top ?? 0, u = n.right ?? 0, d = n.bottom ?? 0, g = n.left ?? 0, y = t.left + g, b = t.right - u, D = t.top + f, O = t.bottom - d;
-    if (y < b && D < O && s >= y && s <= b && i >= D && i <= O)
+    const f = n.top ?? 0, u = n.right ?? 0, d = n.bottom ?? 0, g = n.left ?? 0, y = t.left + g, b = t.right - u, p = t.top + f, O = t.bottom - d;
+    if (y < b && p < O && s >= y && s <= b && i >= p && i <= O)
       return { top: !1, right: !1, bottom: !1, left: !1, center: !0 };
   }
   const a = i - t.top, o = t.bottom - i, r = s - t.left, l = t.right - s, c = Math.min(a, o, r, l);
@@ -451,20 +471,20 @@ const H = (e) => {
     left: r === c,
     right: l === c
   };
-}, nt = (e, t) => e.find((n) => n !== t && B(t, n)), Q = (e, t, n) => {
+}, st = (e, t) => e.find((n) => n !== t && B(t, n)), Q = (e, t, n) => {
   const s = w(t.droppable), i = w(t.draggable);
   t.draggable.clear(), t.droppable.clear();
-  const a = tt(e), o = n.zones[0], r = n.elements[0];
+  const a = nt(e), o = n.zones[0], r = n.elements[0];
   if (o && r && o === r && e.entities.droppableMap.has(o) && o) {
-    const u = o.getBoundingClientRect(), d = e.entities.draggableMap.get(o)?.placementMargins, g = I(a, u, d);
+    const u = o.getBoundingClientRect(), d = e.entities.draggableMap.get(o)?.placementMargins, g = F(a, u, d);
     if (g.center) {
       t.droppable.set(o, g);
-      const y = nt(n.elements, o);
+      const y = st(n.elements, o);
       if (y) {
         const b = y.getBoundingClientRect();
         t.draggable.set(
           y,
-          I(a, b, void 0)
+          F(a, b, void 0)
         );
       }
     } else
@@ -472,19 +492,19 @@ const H = (e) => {
   } else {
     if (o) {
       const u = o.getBoundingClientRect();
-      t.droppable.set(o, I(a, u));
+      t.droppable.set(o, F(a, u));
     }
     if (r) {
       const u = r.getBoundingClientRect(), d = e.entities.draggableMap.get(r)?.placementMargins;
       t.draggable.set(
         r,
-        I(a, u, d)
+        F(a, u, d)
       );
     }
   }
   const c = w(t.droppable), f = w(t.draggable);
-  Xe(e, s, c), Ve(e, i, f);
-}, st = (e, t) => e.x < t.x + t.width && e.x + e.width > t.x && e.y < t.y + t.height && e.y + e.height > t.y, oe = (e) => {
+  Ve(e, s, c), qe(e, i, f);
+}, it = (e, t) => e.x < t.x + t.width && e.x + e.width > t.x && e.y < t.y + t.height && e.y + e.height > t.y, oe = (e) => {
   if (!e)
     return { x: 0, y: 0, width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0 };
   const t = e.getBoundingClientRect();
@@ -501,7 +521,7 @@ const H = (e) => {
 }, re = (e) => ({
   x: e.x + e.width / 2,
   y: e.y + e.height / 2
-}), it = (e, t) => Math.hypot(t.x - e.x, t.y - e.y), at = (e, t) => {
+}), at = (e, t) => Math.hypot(t.x - e.x, t.y - e.y), ot = (e, t) => {
   const n = Math.max(
     0,
     Math.min(e.x + e.width, t.x + t.width) - Math.max(e.x, t.x)
@@ -510,7 +530,7 @@ const H = (e) => {
     Math.min(e.y + e.height, t.y + t.height) - Math.max(e.y, t.y)
   ), i = n * s, a = e.width * e.height, o = t.width * t.height;
   return a === 0 || o === 0 ? 0 : (i / a * 100 + i / o * 100) / 2;
-}, ot = (e, t, n) => t >= e.x && t <= e.x + e.width && n >= e.y && n <= e.y + e.height, le = () => !0, ce = () => 0, rt = () => {
+}, rt = (e, t, n) => t >= e.x && t <= e.x + e.width && n >= e.y && n <= e.y + e.height, le = () => !0, ce = () => 0, lt = () => {
   const e = {
     filterElements: le,
     filterZones: le,
@@ -521,16 +541,16 @@ const H = (e) => {
       const y = oe(g);
       if (!c(y, u)) return null;
       let b = 0;
-      for (const D of f)
-        D !== g && B(D, g) && b++;
+      for (const p of f)
+        p !== g && B(p, g) && b++;
       return {
         node: g,
         box: y,
         meta: {
-          isPointerInElement: ot(y, a.x, a.y),
-          overlapPercent: at(y, i),
+          isPointerInElement: rt(y, a.x, a.y),
+          overlapPercent: ot(y, i),
           depth: b,
-          centerDistance: it(re(i), re(y))
+          centerDistance: at(re(i), re(y))
         }
       };
     }).filter((g) => g !== null);
@@ -595,7 +615,7 @@ const H = (e) => {
     }
   };
   return n;
-}, lt = () => rt(), ct = (e) => e.overlay.ref?.value ?? null, gt = (e) => {
+}, ct = () => lt(), gt = (e) => e.overlay.ref?.value ?? null, ut = (e) => {
   const t = e.overlay.style?.value ?? { x: 0, y: 0 }, n = e.overlay.size?.value ?? null, { x: s, y: i } = t, a = n?.width ?? 0, o = n?.height ?? 0;
   return {
     x: s,
@@ -607,9 +627,9 @@ const H = (e) => {
     right: s + a,
     bottom: i + o
   };
-}, ut = (e) => e.entities.visibleDraggableSet, ft = (e) => e.entities.visibleDroppableSet, dt = (e, t) => !t.entities.draggingMap.has(e), yt = (e, t) => ![...t.entities.draggingMap.keys()].some(
+}, ft = (e) => e.entities.visibleDraggableSet, dt = (e) => e.entities.visibleDroppableSet, yt = (e, t) => !t.entities.draggingMap.has(e), bt = (e, t) => ![...t.entities.draggingMap.keys()].some(
   (n) => B(n, e)
-), bt = (e, t) => t.entities.draggableMap.has(e) ? !M(e, t) : t.entities.droppableMap.has(e) ? !L(e, t) : !0, ge = (e, t) => dt(e, t) && yt(e, t) && bt(e, t), mt = (e, t) => st(e, t.containerBox), ue = (e, t, n) => {
+), mt = (e, t) => t.entities.draggableMap.has(e) ? !S(e, t) : t.entities.droppableMap.has(e) ? !L(e, t) : !0, ge = (e, t) => yt(e, t) && bt(e, t) && mt(e, t), ht = (e, t) => it(e, t.containerBox), ue = (e, t, n) => {
   if (n.pointer.x >= n.containerBox.x && n.pointer.x <= n.containerBox.x + n.containerBox.width && n.pointer.y >= n.containerBox.y && n.pointer.y <= n.containerBox.y + n.containerBox.height) {
     if (e.meta.isPointerInElement && t.meta.isPointerInElement)
       return t.meta.depth - e.meta.depth;
@@ -617,12 +637,12 @@ const H = (e) => {
       return e.meta.isPointerInElement ? -1 : 1;
   }
   return Math.abs(e.meta.overlapPercent - t.meta.overlapPercent) <= 1 ? e.meta.centerDistance - t.meta.centerDistance : t.meta.overlapPercent - e.meta.overlapPercent;
-}, ee = lt().container(ct).containerBox(gt).elements(ut).zones(ft).filterElements(ge).filterZones(ge).collision(mt).sortElements(ue).sortZones(ue).build();
+}, ee = ct().container(gt).containerBox(ut).elements(ft).zones(dt).filterElements(ge).filterZones(ge).collision(ht).sortElements(ue).sortZones(ue).build();
 function fe(e) {
   const n = (e.collision?.run ?? ee)(e);
   Q(e, e.hovered, n);
 }
-function ht(e, t) {
+function Dt(e, t) {
   const n = e.collision?.throttle?.value ?? 0;
   if (n <= 0) {
     fe(e);
@@ -631,13 +651,10 @@ function ht(e, t) {
   const s = Date.now();
   s - t.value >= n && (t.value = s, fe(e));
 }
-async function Me(e) {
+async function Ee(e) {
   const t = e.hovered.droppable.keys().next().value;
   if (!t || L(t, e)) return !0;
-  const n = e.entities.droppableMap.get(t), s = {
-    payload: Ee(e),
-    provider: e
-  }, i = n?.events?.onDrop?.(s);
+  const n = e.entities.droppableMap.get(t), s = D(e, t), i = n?.events?.onDrop?.(s);
   if (i != null && typeof i.then == "function")
     try {
       return await i, !0;
@@ -647,42 +664,42 @@ async function Me(e) {
     }
   return !0;
 }
-function Se(e) {
+function Me(e) {
   const t = e.entities.initiatingDraggable;
-  x(e, t, "onSelfDragEnd"), h(e, "onDragEnd"), qe(e, e.hovered);
+  x(e, t, "onSelfDragEnd"), h(e, "onDragEnd"), We(e, e.hovered);
 }
-function Dt(e) {
+function pt(e) {
   const t = e.entities.selectingArea;
   if (!t) return;
   const n = e.entities.selectableAreaMap.get(t), s = [...e.entities.selectedSet];
   n?.events?.onSelected?.(s);
 }
-const pt = (e) => {
+const vt = (e) => {
   const t = {
     current: null
   }, n = { value: 0 }, s = async () => {
     j(), t.current?.cancel(), t.current = null;
     const r = e.state.value;
     if (r === "dragging") {
-      if (!await Me(e)) {
-        H(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i);
+      if (!await Ee(e)) {
+        G(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i);
         return;
       }
-      Se(e);
-    } else r === "selecting" && Dt(e);
-    H(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i);
+      Me(e);
+    } else r === "selecting" && pt(e);
+    G(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i);
   }, i = (r) => {
     if (e.pointer.value) {
-      if (e.pointer.value.current = { x: r.clientX, y: r.clientY }, Ke(e)) {
-        Z(e, r, "onSelfDragStart"), h(e, "onDragStart");
+      if (e.pointer.value.current = { x: r.clientX, y: r.clientY }, Ie(e)) {
+        $(e, r, "onSelfDragStart"), h(e, "onDragStart");
         return;
       }
       if (e.state.value === "dragging") {
-        ht(e, n);
+        Dt(e, n);
         const l = e.entities.initiatingDraggable;
         x(e, l, "onSelfDragMove"), h(e, "onDragMove");
       }
-      e.state.value === "selecting" && Je(e);
+      e.state.value === "selecting" && Qe(e);
     }
   };
   return { pointerDown: (r) => {
@@ -702,9 +719,9 @@ const pt = (e) => {
         return;
       W(), e.entities.initiatingDraggable = f;
       const d = me(r, f);
-      e.pointer.value = J(r, d.x, d.y), u?.activation?.distance || u?.activation?.delay ? (e.state.value = "activating", u?.activation?.delay && (e.delay.startTime = Date.now(), t.current = Ge(e, () => {
-        G(e), Z(e, r, "onSelfDragStart"), h(e, "onDragStart");
-      }))) : (G(e), Z(e, r, "onSelfDragStart"), h(e, "onDragStart"));
+      e.pointer.value = J(r, d.x, d.y), u?.activation?.distance || u?.activation?.delay ? (e.state.value = "activating", u?.activation?.delay && (e.delay.startTime = Date.now(), t.current = Ke(e, () => {
+        H(e), $(e, r, "onSelfDragStart"), h(e, "onDragStart");
+      }))) : (H(e), $(e, r, "onSelfDragStart"), h(e, "onDragStart"));
     }
   }, pointerUp: s, pointerMove: i, cleanup: () => {
     t.current?.cancel(), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i), e.lib.draggableObserver.disconnect(), e.lib.droppableObserver.disconnect(), e.lib.selectableAreaObserver.disconnect(), e.lib.overlaySizeObserver.disconnect();
@@ -718,15 +735,15 @@ const pt = (e) => {
   KeyA: { dx: -1, dy: 0 },
   KeyS: { dx: 0, dy: 1 },
   KeyD: { dx: 1, dy: 0 }
-}, vt = (e) => (t) => {
+}, Mt = (e) => (t) => {
   const { keys: n } = e.keyboard;
   if (n.pressedKeys.value.add(t.code), e.state.value === "dragging") {
     if (n.forCancel.includes(t.code)) {
-      t.preventDefault(), j(), x(e, e.entities.initiatingDraggable, "onSelfDragCancel"), h(e, "onDragCancel"), ve(e, e.hovered), H(e);
+      t.preventDefault(), j(), x(e, e.entities.initiatingDraggable, "onSelfDragCancel"), h(e, "onDragCancel"), ve(e, e.hovered), G(e);
       return;
     }
     if (n.forDrop.includes(t.code)) {
-      t.preventDefault(), (async () => (await Me(e) && Se(e), j(), H(e)))();
+      t.preventDefault(), (async () => (await Ee(e) && Me(e), j(), G(e)))();
       return;
     }
     const i = Et[t.code];
@@ -758,22 +775,22 @@ const pt = (e) => {
     };
     e.entities.initiatingDraggable = a;
     const u = me(f, a);
-    e.pointer.value = J(f, u.x, u.y), G(e);
+    e.pointer.value = J(f, u.x, u.y), H(e);
     const g = (e.collision?.run ?? ee)(e);
     Q(e, e.hovered, g), x(e, a, "onSelfDragStart"), h(e, "onDragStart");
   }
-}, Mt = (e) => (t) => {
+}, St = (e) => (t) => {
   e.keyboard.keys.pressedKeys.value.delete(t.code);
-}, St = (e) => () => {
-  e.keyboard.keys.pressedKeys.value.clear();
-}, $ = {
-  keyDown: vt,
-  keyUp: Mt,
-  clear: St
 }, At = (e) => () => {
+  e.keyboard.keys.pressedKeys.value.clear();
+}, X = {
+  keyDown: Mt,
+  keyUp: St,
+  clear: At
+}, wt = (e) => () => {
   e.state.value && (e.scrollPosition.x = window.scrollX, e.scrollPosition.y = window.scrollY);
-}, wt = (e) => {
-  const t = pt(e), n = $.keyDown(e), s = $.keyUp(e), i = $.clear(e), a = At(e);
+}, xt = (e) => {
+  const t = vt(e), n = X.keyDown(e), s = X.keyUp(e), i = X.clear(e), a = wt(e);
   R(() => {
     document.addEventListener("pointerdown", t.pointerDown), document.addEventListener("keydown", n), document.addEventListener("keyup", s), document.addEventListener("blur", i), document.addEventListener("scroll", a, !0);
   }), P(() => {
@@ -783,7 +800,7 @@ const pt = (e) => {
   const e = de(te);
   if (!e) throw Error("DnD provider not found");
   return e;
-}, xt = () => {
+}, Lt = () => {
   const e = U();
   return {
     overlay: e.overlay,
@@ -797,11 +814,11 @@ const pt = (e) => {
     hovered: e.hovered,
     collision: e.collision
   };
-}, Lt = /* @__PURE__ */ ye({
+}, Ct = /* @__PURE__ */ ye({
   __name: "DefaultOverlay",
   setup(e) {
-    const { entities: t, state: n, overlay: s } = xt();
-    return (i, a) => A(n) === "dragging" ? (p(), K("div", {
+    const { entities: t, state: n, overlay: s } = Lt();
+    return (i, a) => A(n) === "dragging" ? (v(), K("div", {
       key: 0,
       class: "dnd-kit-default-overlay",
       style: se({
@@ -809,13 +826,13 @@ const pt = (e) => {
         "--position-y": A(s).style.value.y + "px"
       })
     }, [
-      (p(!0), K(X, null, we(A(t).draggingMap, ([o, r]) => (p(), K(X, null, [
-        A(t).draggableMap.get(o)?.render ? (p(), V(q(A(t).draggableMap.get(o)?.render), {
+      (v(!0), K(Z, null, Ae(A(t).draggingMap, ([o, r]) => (v(), K(Z, null, [
+        A(t).draggableMap.get(o)?.render ? (v(), V(q(A(t).draggableMap.get(o)?.render), {
           key: 0,
           class: "test"
-        })) : (p(), V(q(o.tagName), {
+        })) : (v(), V(q(o.tagName), {
           key: 1,
-          innerHTML: r.initialHTML,
+          innerHTML: r.initialOuterHTML,
           class: "test",
           style: se({
             width: r.initialRect.width + "px",
@@ -823,35 +840,35 @@ const pt = (e) => {
           })
         }, null, 8, ["innerHTML", "style"]))
       ], 64))), 256))
-    ], 4)) : xe("", !0);
+    ], 4)) : we("", !0);
   }
-}), kt = /* @__PURE__ */ ye({
+}), Rt = /* @__PURE__ */ ye({
   __name: "DnDProvider",
   setup(e) {
-    const t = Le("overlayRef"), n = Ze(t);
-    wt(n);
+    const t = xe("overlayRef"), n = Ye(t);
+    xt(n);
     const s = E(
-      () => n.overlay.render.value ?? Lt
+      () => n.overlay.render.value ?? Ct
     );
-    return Ce(te, n), (i, a) => (p(), K(X, null, [
+    return Le(te, n), (i, a) => (v(), K(Z, null, [
       ie(i.$slots, "default"),
-      ke("div", {
+      Ce("div", {
         ref_key: "overlayRef",
         ref: t,
         class: "dnd-kit-overlay-container"
       }, [
         ie(i.$slots, "overlay", { overlay: s.value }, () => [
-          (p(), V(q(s.value)))
+          (v(), V(q(s.value)))
         ])
       ], 512)
     ], 64));
   }
 });
-function Rt(e, t, n) {
+function Pt(e, t, n) {
   const s = U();
   let i, a, o;
   return typeof t == "function" ? (i = {}, a = t) : (i = t ?? {}, a = n), R(() => {
-    o = N(e), o && (o.addEventListener("dragstart", m), o.addEventListener("drag", m), o.addEventListener("dragend", m), o.setAttribute(v.DRAGGABLE, ""), s.lib.draggableObserver.observe(o), s.entities.draggableMap.set(o, {
+    o = N(e), o && (o.addEventListener("dragstart", m), o.addEventListener("drag", m), o.addEventListener("dragend", m), o.setAttribute(M.DRAGGABLE, ""), s.lib.draggableObserver.observe(o), s.entities.draggableMap.set(o, {
       render: i.render,
       disabled: i.disabled ?? !1,
       groups: i.groups ?? [],
@@ -866,11 +883,11 @@ function Rt(e, t, n) {
     o && (s.lib.draggableObserver.unobserve(o), s.entities.visibleDraggableSet.delete(o), s.entities.draggableMap.delete(o), s.entities.modifiersDraggableSet.delete(o));
   }), {};
 }
-const Pt = (e, t) => {
+const Bt = (e, t) => {
   const n = U(), s = E(() => e.value === n.entities.selectingArea);
   let i = null;
   R(() => {
-    i = N(e), i && (i.setAttribute(v.SELECT_AREA, ""), n.lib.selectableAreaObserver.observe(i), n.entities.selectableAreaMap.set(i, {
+    i = N(e), i && (i.setAttribute(M.SELECT_AREA, ""), n.lib.selectableAreaObserver.observe(i), n.entities.selectableAreaMap.set(i, {
       modifier: t?.modifier ?? {
         keys: ["ControlLeft"],
         method: "every"
@@ -885,19 +902,19 @@ const Pt = (e, t) => {
   const a = E(() => {
     n.scrollPosition.x, n.scrollPosition.y;
     const o = n.pointer.value;
-    return !o || n.state.value !== "selecting" || !i ? {} : je(o.start, o.current, i);
+    return !o || n.state.value !== "selecting" || !i ? {} : Je(o.start, o.current, i);
   });
   return {
     isSelecting: s,
     style: a
   };
 };
-function Bt(e, t) {
+function Ot(e, t) {
   const n = de(te);
   if (!n) throw Error("DnD provider not found");
   let s = null;
   return R(() => {
-    s = N(e), s && (s.setAttribute(v.CONSTRAINT_AREA, ""), n.entities.constraintsAreaMap.set(s, {
+    s = N(e), s && (s.setAttribute(M.CONSTRAINT_AREA, ""), n.entities.constraintsAreaMap.set(s, {
       axis: t?.axis || "both",
       restrictToArea: t?.restrictToArea || !1
     }));
@@ -905,25 +922,25 @@ function Bt(e, t) {
     s && n.entities.constraintsAreaMap.delete(s);
   }), {};
 }
-function Ot(e, t = {}) {
-  const n = U();
-  let s = null;
-  R(() => {
-    s = N(e), s && (s.setAttribute(v.DROPPABLE, ""), n.lib.droppableObserver.observe(s), n.entities.droppableMap.set(s, {
-      disabled: t.disabled ?? !1,
-      groups: t.groups ?? [],
-      events: t.events
+function Tt(e, t, n) {
+  const s = U();
+  let i = null, a, o;
+  typeof t == "function" ? (a = {}, o = t) : (a = t ?? {}, o = n), R(() => {
+    i = N(e), i && (i.setAttribute(M.DROPPABLE, ""), s.lib.droppableObserver.observe(i), s.entities.droppableMap.set(i, {
+      disabled: a.disabled ?? !1,
+      groups: a.groups ?? [],
+      events: a.events,
+      payload: o
     }));
   }), P(() => {
-    s && (n.lib.droppableObserver.unobserve(s), n.entities.visibleDroppableSet.delete(s), n.entities.droppableMap.delete(s));
+    i && (s.lib.droppableObserver.unobserve(i), s.entities.visibleDroppableSet.delete(i), s.entities.droppableMap.delete(i));
   });
 }
 export {
-  kt as DnDProvider,
-  Bt as makeBoundingBox,
-  Rt as makeDraggable,
-  Ot as makeDroppable,
-  Pt as makeSelectableArea,
-  xt as useDnDProvider
+  Rt as DnDProvider,
+  Ot as makeConstraintArea,
+  Pt as makeDraggable,
+  Tt as makeDroppable,
+  Bt as makeSelectionArea,
+  Lt as useDnDProvider
 };
-//# sourceMappingURL=vue-dnd-kit-core.es.js.map