@nexub/react 7.6.0 → 7.7.0

package/dist/components/Sortable/reorder.js

@@ -11,18 +11,69 @@ function moveItem(lists, [fc, fi], [tc, ti]) {
   next[tc].splice(Math.min(ti, next[tc].length), 0, item);
   return next;
 }
+const THRESHOLD = 4;
+const EDGE = 48;
+const MAX_SPEED = 16;
+const itemOf = (el) => el.closest("[data-nx-reorder-item]");
+function scrollParent(el, axis) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const s = getComputedStyle(p);
+    const scrolls = axis === "y" ? /auto|scroll/.test(s.overflowY) && p.scrollHeight > p.clientHeight : /auto|scroll/.test(s.overflowX) && p.scrollWidth > p.clientWidth;
+    if (scrolls) return p;
+  }
+  return document.scrollingElement;
+}
+function edgeSpeed(at, start, end) {
+  if (at < start + EDGE) return -MAX_SPEED * Math.min(1, (start + EDGE - at) / EDGE);
+  if (at > end - EDGE) return MAX_SPEED * Math.min(1, (at - end + EDGE) / EDGE);
+  return 0;
+}
+const sameMark = (a, b) => a === b || !!a && !!b && a.edge === b.edge && ("id" in a ? "id" in b && a.id === b.id : "list" in b && a.list === b.list);
 function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
   const t = useNexubMessages();
   const { dir } = useLocale();
-  const dragged = React.useRef(null);
   const handles = React.useRef(/* @__PURE__ */ new Map());
+  const listEls = React.useRef(/* @__PURE__ */ new Map());
   const refocus = React.useRef(null);
+  const drag = React.useRef(null);
+  const flipFrom = React.useRef(null);
   const [announcement, setAnnouncement] = React.useState("");
+  const [dragging, setDragging] = React.useState(null);
+  const [mark, setMark] = React.useState(null);
+  const itemCache = React.useRef(/* @__PURE__ */ new Map());
   const hintId = React.useId();
   React.useEffect(() => {
     if (refocus.current) handles.current.get(refocus.current)?.focus();
     refocus.current = null;
   });
+  React.useLayoutEffect(() => {
+    const from = flipFrom.current;
+    flipFrom.current = null;
+    if (!from || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    for (const [id, h] of handles.current) {
+      const el = itemOf(h);
+      const old = from.get(id);
+      if (!el || !old) continue;
+      const now = el.getBoundingClientRect();
+      const dx = old.left - now.left;
+      const dy = old.top - now.top;
+      if (!dx && !dy) continue;
+      el.style.transition = "none";
+      el.style.transform = `translate(${dx}px, ${dy}px)`;
+      el.getBoundingClientRect();
+      el.style.transition = "transform var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing)";
+      el.style.transform = "";
+      el.addEventListener("transitionend", () => el.style.transition = "", { once: true });
+    }
+  });
+  const snapshot = () => {
+    const rects = /* @__PURE__ */ new Map();
+    for (const [id, h] of handles.current) {
+      const el = itemOf(h);
+      if (el) rects.set(id, el.getBoundingClientRect());
+    }
+    return rects;
+  };
   const move = (from, to, keepFocus) => {
     if (from[0] === to[0] && from[1] === to[1]) return;
     const item = lists[from[0]][from[1]];
@@ -30,40 +81,102 @@ function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
     const [tc] = to;
     const ti = next[tc].indexOf(item);
     if (keepFocus) refocus.current = getId(item);
+    flipFrom.current ??= snapshot();
     onMove(next);
     const total = next[tc].length;
     setAnnouncement(
       from[0] !== tc && listLabels?.[tc] ? t.itemMovedToColumn(getLabel(item), listLabels[tc], ti + 1, total) : t.itemMoved(getLabel(item), ti + 1, total)
     );
   };
-  const itemProps = (pos) => ({
-    draggable: true,
-    onDragStart: (e) => {
-      dragged.current = pos;
-      e.dataTransfer.effectAllowed = "move";
-    },
-    onDragOver: (e) => {
-      if (dragged.current) e.preventDefault();
-    },
-    onDrop: (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (dragged.current) move(dragged.current, pos, false);
-      dragged.current = null;
-    },
-    onDragEnd: () => {
-      dragged.current = null;
+  const targetAt = (d) => {
+    let list = d.from[0];
+    if (lists.length > 1) {
+      let best = Infinity;
+      for (const [l, el] of listEls.current) {
+        const r = el.getBoundingClientRect();
+        const dist = Math.hypot(Math.max(r.left - d.x, 0, d.x - r.right), Math.max(r.top - d.y, 0, d.y - r.bottom));
+        if (dist < best) [best, list] = [dist, l];
+      }
     }
-  });
+    const others = lists[list].filter((it) => getId(it) !== d.id);
+    let k = others.findIndex((it) => {
+      const h = handles.current.get(getId(it));
+      const r = h && itemOf(h)?.getBoundingClientRect();
+      return r && d.y < r.top + r.height / 2;
+    });
+    if (k < 0) k = others.length;
+    const to = [list, k];
+    if (list === d.from[0] && k === d.from[1]) return { to, mark: null };
+    const m = k < others.length ? { id: getId(others[k]), edge: "before" } : others.length ? { id: getId(others[others.length - 1]), edge: "after" } : { list, edge: "inside" };
+    return { to, mark: m };
+  };
+  const update = (d) => {
+    if (d.el && d.rect0) {
+      const r = d.el.getBoundingClientRect();
+      d.tx = d.x - d.x0 - (r.left - d.tx - d.rect0.left);
+      d.ty = d.y - d.y0 - (r.top - d.ty - d.rect0.top);
+      d.el.style.translate = `${d.tx}px ${d.ty}px`;
+    }
+    const { to, mark: m } = targetAt(d);
+    d.target = m ? to : null;
+    if (!sameMark(d.mark, m)) setMark(d.mark = m);
+  };
+  const tick = () => {
+    const d = drag.current;
+    if (!d?.active) return;
+    let scrolled = false;
+    d.scrollers.forEach((s, i) => {
+      if (!s) return;
+      const page = s === document.scrollingElement;
+      const r = page ? { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight } : s.getBoundingClientRect();
+      const v = i === 0 ? edgeSpeed(d.x, r.left, r.right) : edgeSpeed(d.y, r.top, r.bottom);
+      if (!v) return;
+      const before = i === 0 ? s.scrollLeft : s.scrollTop;
+      if (i === 0) s.scrollLeft += v;
+      else s.scrollTop += v;
+      scrolled ||= (i === 0 ? s.scrollLeft : s.scrollTop) !== before;
+    });
+    if (scrolled) update(d);
+    d.raf = requestAnimationFrame(tick);
+  };
+  const finish = (commit) => {
+    const d = drag.current;
+    if (!d) return;
+    drag.current = null;
+    window.removeEventListener("keydown", d.onKey, true);
+    if (!d.active) return;
+    cancelAnimationFrame(d.raf);
+    flipFrom.current = snapshot();
+    if (d.el) d.el.style.translate = "";
+    if (commit && d.target) move(d.from, d.target, false);
+    setDragging(null);
+    setMark(null);
+  };
+  React.useEffect(() => () => finish(false), []);
+  const begin = (d) => {
+    d.active = true;
+    d.el = itemOf(d.handle) ?? d.handle;
+    d.rect0 = d.el.getBoundingClientRect();
+    d.scrollers = [scrollParent(d.el, "x"), scrollParent(d.el, "y")];
+    setDragging(d.id);
+    d.raf = requestAnimationFrame(tick);
+  };
+  const itemProps = (pos) => {
+    const id = getId(lists[pos[0]][pos[1]]);
+    const lifted = dragging === id ? "" : void 0;
+    const drop = mark && "id" in mark && mark.id === id ? mark.edge : void 0;
+    const prev = itemCache.current.get(id);
+    if (prev && prev["data-nx-dragging"] === lifted && prev["data-nx-drop"] === drop) return prev;
+    const next = { "data-nx-reorder-item": "", "data-nx-dragging": lifted, "data-nx-drop": drop };
+    itemCache.current.set(id, next);
+    return next;
+  };
   const listProps = (list) => ({
-    onDragOver: (e) => {
-      if (dragged.current) e.preventDefault();
+    ref: (el) => {
+      if (el) listEls.current.set(list, el);
+      else listEls.current.delete(list);
     },
-    onDrop: (e) => {
-      e.preventDefault();
-      if (dragged.current) move(dragged.current, [list, lists[list].length], false);
-      dragged.current = null;
-    }
+    "data-nx-drop": mark && "list" in mark && mark.list === list ? "inside" : void 0
   });
   const handle = (pos, className) => {
     const item = lists[pos[0]][pos[1]];
@@ -78,6 +191,51 @@ function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
         },
         "aria-label": t.moveItem(getLabel(item)),
         "aria-describedby": hintId,
+        onPointerDown: (e) => {
+          if (e.button !== 0 || drag.current) return;
+          const { clientX: x, clientY: y } = e;
+          const d = {
+            from: pos,
+            id,
+            handle: e.currentTarget,
+            x0: x,
+            y0: y,
+            x,
+            y,
+            active: false,
+            tx: 0,
+            ty: 0,
+            target: null,
+            mark: null,
+            scrollers: [null, null],
+            raf: 0,
+            onKey: (k) => {
+              if (k.key !== "Escape") return;
+              k.preventDefault();
+              k.stopPropagation();
+              finish(false);
+            }
+          };
+          drag.current = d;
+          window.addEventListener("keydown", d.onKey, true);
+          try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+          } catch {
+          }
+        },
+        onPointerMove: (e) => {
+          const d = drag.current;
+          if (!d || d.id !== id) return;
+          d.x = e.clientX;
+          d.y = e.clientY;
+          if (!d.active) {
+            if (Math.hypot(d.x - d.x0, d.y - d.y0) < THRESHOLD) return;
+            begin(d);
+          }
+          update(d);
+        },
+        onPointerUp: () => finish(true),
+        onPointerCancel: () => finish(false),
         onKeyDown: (e) => {
           if (!e.altKey) return;
           const [c, i] = pos;
@@ -94,7 +252,7 @@ function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
           move(pos, to, true);
         },
         className: cn(
-          "inline-flex size-7 shrink-0 cursor-grab items-center justify-center rounded-shape-min text-[var(--color-on-surface-variant)]",
+          "inline-flex size-7 shrink-0 cursor-grab touch-none select-none items-center justify-center rounded-shape-min text-[var(--color-on-surface-variant)]",
           "hover:bg-[var(--color-surface-container-high)] active:cursor-grabbing",
           className
         ),