@floegence/floe-webapp-core 0.90.1 → 0.90.2

package/dist/components/ui/tabReorder.js

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