@floegence/floe-webapp-core 0.90.2 → 0.90.3

package/dist/components/ui/tabReorder.js

@@ -1,93 +1,98 @@
-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) => {
+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 w)
+    for (const [e, t] of b)
       t.cancel(), A(e);
-    w.clear();
-  }, F = () => {
+    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 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 }];
+      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 }];
     });
   }, E = () => {
-    const e = i.container(), t = s.find((a) => a.id === g);
+    const e = i.container(), t = s.find((a) => a.id === p);
     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 = () => {
+    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 (!m() || !e) return;
+    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(P);
+    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 }));
-  }, V = (e) => {
-    const t = !!m();
+  }, j = (e) => {
+    const t = !!g();
     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(() => {
+    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), !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)` },
+    }, 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)" });
-        w.set(o, d), d.onfinish = () => {
-          w.get(o) === d && (w.delete(o), A(o));
+        b.set(r, d), d.onfinish = () => {
+          b.get(r) === d && (b.delete(r), A(r));
         };
       }
-    s = [], R = [];
-  }, X = (e, t) => {
+    s = [], M = [];
+  }, S = (e, t) => {
     if (!i.onReorder() || t.disabled || e.button !== 0 || c || e.target?.closest('button, a, input, [contenteditable="true"]')) return;
-    C(), k = e.clientX;
+    C(), R = e.clientX;
     const n = e.clientY;
-    g = t.id, f = k, h = e.currentTarget.ownerDocument, h.defaultView?.addEventListener("keydown", L, !0), c = I({
+    p = t.id, f = R, w = e.currentTarget.ownerDocument, w.defaultView?.addEventListener("keydown", L, !0), c = _({
       pointerEvent: e,
       captureEl: e.currentTarget,
       capturePointer: !1,
-      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)));
+      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: (r) => V(r.commit && (r.reason === "pointer_up" || r.reason === "buttons_released"))
+      onEnd: (o) => j(o.commit && (o.reason === "pointer_up" || o.reason === "buttons_released"))
     });
-  }, j = (e, t) => {
+  }, 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((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;
+    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 Y(() => {
+  return q(() => {
     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 };
+    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 {
-  $ as createTabReorder
+  I as createTabReorder
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.90.2",
+  "version": "0.90.3",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",