@floegence/floe-webapp-core 0.90.1 → 0.90.3

package/dist/components/ui/tabReorder.js

@@ -1,55 +1,98 @@
-import { createSignal as p, createEffect as M, onCleanup as P } from "solid-js";
-import { startPointerSession as X } from "./pointerSession.js";
-function C(o) {
-  const [d, w] = p(), [h, b] = p(), [A, k] = p();
-  let a, l, c = 0, s = 0, u = !1, m, f;
-  const E = (e, r) => {
-    const t = o.items().map((n) => n.id).filter((n) => n !== e), i = r ? t.indexOf(r) : t.length;
-    return t.splice(i < 0 ? t.length : i, 0, e), t;
-  }, y = () => {
-    const e = o.items().filter((t) => t.id !== l), r = e.find((t) => {
-      const i = o.elements.get(t.id)?.getBoundingClientRect();
-      return i && c < i.left + i.width / 2;
+import { createSignal as Y, createEffect as q, onCleanup as W } from "solid-js";
+import { startPointerSession as _ } from "./pointerSession.js";
+function I(i) {
+  const [g, P] = Y();
+  let c, p, s = [], M = [], f = 0, R = 0, T = 0, u = 1, l = 0, x = !1, h, w;
+  const b = /* @__PURE__ */ new Map(), A = (e) => {
+    delete e.dataset.floeTabMotion, e.style.removeProperty("--floe-tab-offset");
+  }, C = () => {
+    for (const [e, t] of b)
+      t.cancel(), A(e);
+    b.clear();
+  }, X = () => {
+    const e = i.container();
+    if (!e) return;
+    const t = e.getBoundingClientRect();
+    u = e.offsetWidth > 0 && t.width > 0 ? t.width / e.offsetWidth : 1, T = e.scrollLeft, s = i.items().flatMap((n) => {
+      const o = i.elements.get(n.id);
+      if (!o) return [];
+      const r = o.getBoundingClientRect();
+      return [{ id: n.id, element: o, left: (r.left - t.left) / u + T, width: r.width / u }];
     });
-    b(r?.id), k(r ? void 0 : e.at(-1)?.id);
-  }, R = () => {
-    s = 0;
-    const e = o.container();
-    if (!d() || !e) return;
-    const r = e.getBoundingClientRect(), t = c < r.left + 28 ? c - r.left - 28 : c > r.right - 28 ? c - r.right + 28 : 0;
-    t && (e.scrollLeft += Math.sign(t) * Math.min(12, Math.abs(t) / 3)), y(), s = requestAnimationFrame(R);
-  }, g = (e) => {
-    e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), a?.stop({ commit: !1 }));
-  }, D = (e) => {
-    const r = l, t = !!d(), i = r && t ? E(r, h()) : void 0;
-    s && cancelAnimationFrame(s), s = 0, f?.defaultView?.removeEventListener("keydown", g, !0), a = void 0, l = void 0, w(void 0), b(void 0), k(void 0), t && (u = !0, m = setTimeout(() => {
-      u = !1;
-    }, 0)), e && i && i.join("\0") !== o.items().map((n) => n.id).join("\0") && o.onReorder()?.(i);
-  }, L = (e, r) => {
-    if (!o.onReorder() || r.disabled || e.button !== 0 || a || e.target?.closest('button, a, input, [contenteditable="true"]')) return;
-    const t = e.clientX, i = e.clientY;
-    l = r.id, c = t, f = e.currentTarget.ownerDocument, f.defaultView?.addEventListener("keydown", g, !0), a = X({
+  }, E = () => {
+    const e = i.container(), t = s.find((a) => a.id === p);
+    if (!e || !t) return;
+    const n = s[0], o = s.at(-1), r = Math.max(n.left, Math.min(
+      o.left + o.width - t.width,
+      t.left + (f - R) / u + e.scrollLeft - T
+    )), m = s.filter((a) => a !== t), k = s.length > 1 ? s[1].left - n.left - n.width : 0;
+    let y = 0, d = n.left;
+    for (const a of m) {
+      const V = d + a.width + k;
+      r >= (d + V) / 2 && (y += 1), d = V;
+    }
+    const D = [...m];
+    D.splice(y, 0, t), M = D.map((a) => a.id);
+    let F = n.left;
+    for (const a of D)
+      a.element.dataset.floeTabMotion = a === t ? "dragging" : "neighbor", a.element.style.setProperty("--floe-tab-offset", `${(a === t ? r : F) - a.left}px`), F += a.width + k;
+  }, B = () => {
+    l = 0;
+    const e = i.container();
+    if (!g() || !e) return;
+    const t = e.getBoundingClientRect(), n = f < t.left + 28 ? f - t.left - 28 : f > t.right - 28 ? f - t.right + 28 : 0;
+    n && (e.scrollLeft += Math.sign(n) * Math.min(12, Math.abs(n) / 3) / u), E(), l = requestAnimationFrame(B);
+  }, L = (e) => {
+    e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), c?.stop({ commit: !1 }));
+  }, j = (e) => {
+    const t = !!g();
+    l && cancelAnimationFrame(l), l = 0, t && E();
+    const n = s.map((o) => ({ element: o.element, rect: o.element.getBoundingClientRect() }));
+    w?.defaultView?.removeEventListener("keydown", L, !0), c = void 0, p = void 0, P(void 0), e && t && M.join("\0") !== i.items().map((o) => o.id).join("\0") && i.onReorder()?.(M);
+    for (const { element: o } of n) A(o);
+    if (t && (x = !0, h !== void 0 && clearTimeout(h), h = setTimeout(() => {
+      x = !1;
+    }, 0), !w?.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches))
+      for (const { element: r, rect: m } of n) {
+        if (!r.isConnected || typeof r.animate != "function") continue;
+        const k = r.getBoundingClientRect(), y = (m.left - k.left) / u;
+        if (Math.abs(y) < 0.5) continue;
+        r.dataset.floeTabMotion = "settling";
+        const d = r.animate([
+          { transform: `translate3d(${y}px, 0, 0)` },
+          { transform: "translate3d(0, 0, 0)" }
+        ], { duration: 180, easing: "cubic-bezier(0.22, 1, 0.36, 1)" });
+        b.set(r, d), d.onfinish = () => {
+          b.get(r) === d && (b.delete(r), A(r));
+        };
+      }
+    s = [], M = [];
+  }, S = (e, t) => {
+    if (!i.onReorder() || t.disabled || e.button !== 0 || c || e.target?.closest('button, a, input, [contenteditable="true"]')) return;
+    C(), R = e.clientX;
+    const n = e.clientY;
+    p = t.id, f = R, w = e.currentTarget.ownerDocument, w.defaultView?.addEventListener("keydown", L, !0), c = _({
       pointerEvent: e,
       captureEl: e.currentTarget,
       capturePointer: !1,
-      onMove: (n) => {
-        c = n.clientX, !(!d() && Math.hypot(n.clientX - t, n.clientY - i) < 5) && (d() || (w(r.id), a?.capturePointer()), n.preventDefault(), y(), s || (s = requestAnimationFrame(R)));
+      onMove: (o) => {
+        f = o.clientX, !(!g() && Math.hypot(o.clientX - R, o.clientY - n) < 5) && (g() || (X(), P(t.id), c?.capturePointer()), o.preventDefault(), E(), l || (l = requestAnimationFrame(B)));
       },
-      onEnd: (n) => D(n.commit && (n.reason === "pointer_up" || n.reason === "buttons_released"))
+      onEnd: (o) => j(o.commit && (o.reason === "pointer_up" || o.reason === "buttons_released"))
     });
-  }, T = (e, r) => {
-    if (!o.onReorder() || r.disabled || !e.altKey || !e.shiftKey || !["ArrowLeft", "ArrowRight"].includes(e.key)) return !1;
-    e.preventDefault(), e.stopPropagation();
-    const t = o.items().map((F) => F.id), i = t.indexOf(r.id), n = i + (e.key === "ArrowLeft" ? -1 : 1);
-    return n >= 0 && n < t.length && ([t[i], t[n]] = [t[n], t[i]], o.onReorder()?.(t), o.elements.get(r.id)?.focus({ preventScroll: !0 }), o.elements.get(r.id)?.scrollIntoView({ block: "nearest", inline: "nearest" })), !0;
+  }, K = (e, t) => {
+    if (!i.onReorder() || t.disabled || !e.altKey || !e.shiftKey || !["ArrowLeft", "ArrowRight"].includes(e.key)) return !1;
+    e.preventDefault(), e.stopPropagation(), C();
+    const n = i.items().map((m) => m.id), o = n.indexOf(t.id), r = o + (e.key === "ArrowLeft" ? -1 : 1);
+    return r >= 0 && r < n.length && ([n[o], n[r]] = [n[r], n[o]], i.onReorder()?.(n), i.elements.get(t.id)?.focus({ preventScroll: !0 }), i.elements.get(t.id)?.scrollIntoView({ block: "nearest", inline: "nearest" })), !0;
   };
-  return M(() => {
-    const e = o.items(), r = o.onReorder();
-    l && (!r || !e.some((t) => t.id === l && !t.disabled)) && a?.stop({ commit: !1 });
-  }), P(() => {
-    a?.stop({ commit: !1 }), s && cancelAnimationFrame(s), m !== void 0 && clearTimeout(m), f?.defaultView?.removeEventListener("keydown", g, !0);
-  }), { start: L, keyDown: T, dragging: d, before: h, after: A, suppressClick: () => u };
+  return q(() => {
+    const e = i.items(), t = i.onReorder();
+    p && (!t || !e.some((n) => n.id === p && !n.disabled) || s.length && e.map((n) => n.id).join("\0") !== s.map((n) => n.id).join("\0")) && c?.stop({ commit: !1 });
+  }), W(() => {
+    c?.stop({ commit: !1 }), C(), l && cancelAnimationFrame(l), h !== void 0 && clearTimeout(h), w?.defaultView?.removeEventListener("keydown", L, !0);
+  }), { start: S, keyDown: K, dragging: g, suppressClick: () => x };
 }
 export {
-  C as createTabReorder
+  I as createTabReorder
 };