@floegence/floe-webapp-core 0.89.2 → 0.90.1

package/dist/components/ui/tabReorder.js

@@ -0,0 +1,55 @@
+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;
+    });
+    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({
+      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)));
+      },
+      onEnd: (n) => D(n.commit && (n.reason === "pointer_up" || n.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;
+  };
+  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 };
+}
+export {
+  C as createTabReorder
+};

package/dist/floe.css

@@ -480,6 +480,9 @@
    * which costs memory and rasterisation on every window, menu and dialog that
    * merely sits on screen. Only the two transitions need it. */
   .floe-floating-presence[data-floating-presence='entering'] {
+    /* Placement may resolve after the initial size read. Set its starting pose
+     * immediately; only the subsequent open state should transition. */
+    transition: none;
     opacity: 0;
     --floe-floating-presence-x: var(--floe-floating-enter-x);
     --floe-floating-presence-y: var(--floe-floating-enter-y);
@@ -591,6 +594,46 @@
     --floe-floating-origin: left top;
   }
 
+  /* The positioning owner supplies the resolved side, including collision flips.
+   * Keep motion on the child so measuring the anchor layer never reads a scale. */
+  [data-floe-surface-floating-layer][data-placement='above'] > .floe-floating-menu,
+  .floe-floating-menu[data-floating-side='top'] {
+    --floe-floating-enter-y: 0.375rem;
+    --floe-floating-exit-y: 0.125rem;
+    --floe-floating-origin: var(--floe-anchored-layer-anchor-x, 50%) bottom;
+  }
+
+  [data-floe-surface-floating-layer][data-placement='below'] > .floe-floating-menu,
+  .floe-floating-menu[data-floating-side='bottom'] {
+    --floe-floating-origin: var(--floe-anchored-layer-anchor-x, 50%) top;
+  }
+
+  [data-floe-surface-floating-layer][data-placement='right'] > .floe-floating-menu,
+  .floe-floating-menu[data-floating-side='right'] {
+    --floe-floating-enter-x: -0.375rem;
+    --floe-floating-exit-x: -0.125rem;
+    --floe-floating-enter-y: 0;
+    --floe-floating-exit-y: 0;
+    --floe-floating-origin: left var(--floe-anchored-layer-anchor-y, 50%);
+  }
+
+  [data-floe-surface-floating-layer][data-placement='left'] > .floe-floating-menu,
+  .floe-floating-menu[data-floating-side='left'] {
+    --floe-floating-enter-x: 0.375rem;
+    --floe-floating-exit-x: 0.125rem;
+    --floe-floating-enter-y: 0;
+    --floe-floating-exit-y: 0;
+    --floe-floating-origin: right var(--floe-anchored-layer-anchor-y, 50%);
+  }
+
+  /* A fully clamped panel has no reliable opening side. Fade it in place. */
+  [data-floe-surface-floating-layer][data-placement='edge'] > .floe-floating-menu {
+    --floe-floating-enter-y: 0;
+    --floe-floating-exit-y: 0;
+    --floe-floating-enter-scale: 1;
+    --floe-floating-exit-scale: 1;
+  }
+
   .floe-floating-tooltip {
     --floe-floating-enter-duration: 140ms;
     --floe-floating-exit-duration: 90ms;