@floegence/floe-webapp-core 0.56.11 → 0.56.14

package/dist/components/ui/PersistentHorizontalScrollbar.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'solid-js';
+export interface PersistentHorizontalScrollbarProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'onScroll' | 'onKeyDown' | 'onPointerDown'> {
+    /** The real, constrained left-to-right scroll viewport. Native scrolling remains authoritative. */
+    viewport: HTMLElement | undefined;
+    'aria-label': string;
+}
+/** A persistent overflow affordance independent of OS overlay-scrollbar settings.
+ * Place beside the viewport in a flex column. This control owns pointer and keyboard
+ * interaction only; the host retains wheel and Workbench activation ownership.
+ */
+export declare function PersistentHorizontalScrollbar(allProps: PersistentHorizontalScrollbarProps): JSX.Element;

package/dist/components/ui/PersistentHorizontalScrollbar.js

@@ -0,0 +1,172 @@
+import { createComponent as E, use as y, spread as $, mergeProps as O, effect as _, setStyleProperty as W, template as B, delegateEvents as F } from "solid-js/web";
+import { splitProps as q, createSignal as U, createUniqueId as X, createMemo as h, createEffect as H, onCleanup as z, Show as K, untrack as N } from "solid-js";
+import { cn as V } from "../../utils/cn.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as Y } from "./localInteractionSurface.js";
+var j = /* @__PURE__ */ B("<div><div aria-hidden=true data-floe-horizontal-scrollbar-thumb=true class=floe-horizontal-scrollbar-thumb>");
+const w = {
+  clientWidth: 0,
+  trackWidth: 0,
+  scrollLeft: 0,
+  scrollWidth: 0
+};
+function tt(C) {
+  const [c, P] = q(C, ["viewport", "class"]), [l, m] = U(w), f = X();
+  let n, g, s;
+  const p = () => {
+    const t = c.viewport;
+    if (!t) {
+      m(w);
+      return;
+    }
+    m({
+      clientWidth: t.clientWidth,
+      trackWidth: n?.clientWidth ?? t.clientWidth,
+      scrollLeft: t.scrollLeft,
+      scrollWidth: t.scrollWidth
+    });
+  }, u = () => {
+    if (s === void 0) {
+      if (typeof window > "u" || typeof window.requestAnimationFrame != "function") {
+        p();
+        return;
+      }
+      s = window.requestAnimationFrame(() => {
+        s = void 0, N(p);
+      });
+    }
+  }, b = (t) => {
+    const e = c.viewport;
+    if (!e) return;
+    const o = Math.max(0, e.scrollWidth - e.clientWidth);
+    e.scrollLeft = Math.max(0, Math.min(o, t)), p();
+  }, a = h(() => {
+    const t = l();
+    return Math.max(0, t.scrollWidth - t.clientWidth);
+  }), T = h(() => a() > 1), v = h(() => {
+    const t = l();
+    return t.scrollWidth <= 0 ? 100 : Math.min(100, Math.max(28 / Math.max(1, t.trackWidth), t.clientWidth / t.scrollWidth) * 100);
+  }), k = h(() => {
+    const t = a();
+    return t <= 0 ? 0 : Math.max(0, Math.min(1, l().scrollLeft / t)) * (100 - v());
+  }), x = (t) => {
+    if (t.button !== 0 || !n) return;
+    t.preventDefault(), n.focus({
+      preventScroll: !0
+    });
+    const e = n.getBoundingClientRect(), r = n.querySelector("[data-floe-horizontal-scrollbar-thumb]")?.getBoundingClientRect().width ?? e.width * (v() / 100), i = Math.max(1, e.width - r), d = Math.max(0, Math.min(i, t.clientX - e.left - r / 2));
+    b(d / i * a());
+  };
+  let S = 0, M = 0;
+  const A = (t) => {
+    if (t.button !== 0 || !n) return;
+    const e = t.currentTarget;
+    n.focus({
+      preventScroll: !0
+    }), S = t.clientX, M = l().scrollLeft, e.setPointerCapture(t.pointerId), t.preventDefault(), t.stopPropagation();
+  }, D = (t) => {
+    const e = t.currentTarget;
+    if (!e.hasPointerCapture(t.pointerId) || !n) return;
+    const o = Math.max(1, n.getBoundingClientRect().width - e.getBoundingClientRect().width), r = (t.clientX - S) / o * a();
+    b(M + r);
+  }, L = (t) => {
+    const e = t.currentTarget;
+    e.hasPointerCapture(t.pointerId) && e.releasePointerCapture(t.pointerId);
+  }, R = (t) => {
+    const e = l(), o = 48;
+    let r;
+    switch (t.key) {
+      case "ArrowLeft":
+        r = e.scrollLeft - o;
+        break;
+      case "ArrowRight":
+        r = e.scrollLeft + o;
+        break;
+      case "Home":
+        r = 0;
+        break;
+      case "End":
+        r = a();
+        break;
+      case "PageUp":
+        r = e.scrollLeft - e.clientWidth;
+        break;
+      case "PageDown":
+        r = e.scrollLeft + e.clientWidth;
+        break;
+      default:
+        return;
+    }
+    t.preventDefault(), t.stopPropagation(), b(r);
+  };
+  return H(() => {
+    const t = c.viewport;
+    if (!t) {
+      m(w);
+      return;
+    }
+    const e = !t.id;
+    e && (t.id = f);
+    const o = t.getAttribute("data-floe-horizontal-scroll-viewport");
+    t.setAttribute("data-floe-horizontal-scroll-viewport", "true");
+    const r = new ResizeObserver(u);
+    g = r;
+    const i = () => {
+      r.disconnect(), r.observe(t);
+      for (const I of t.children) r.observe(I);
+      n?.isConnected && r.observe(n), u();
+    }, d = new MutationObserver(i);
+    d.observe(t, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    }), t.addEventListener("scroll", u, {
+      passive: !0
+    }), i(), z(() => {
+      r.disconnect(), d.disconnect(), t.removeEventListener("scroll", u), e && t.id === f && t.removeAttribute("id"), o === null ? t.removeAttribute("data-floe-horizontal-scroll-viewport") : t.setAttribute("data-floe-horizontal-scroll-viewport", o);
+    });
+  }), z(() => {
+    s !== void 0 && window.cancelAnimationFrame(s);
+  }), E(K, {
+    get when() {
+      return T();
+    },
+    get children() {
+      var t = j(), e = t.firstChild;
+      return y((o) => {
+        n = o, g?.observe(o), u();
+      }, t), $(t, O({
+        [Y]: "true"
+      }, P, {
+        get "aria-controls"() {
+          return c.viewport?.id || f;
+        },
+        "aria-orientation": "horizontal",
+        get "aria-valuemax"() {
+          return Math.round(a());
+        },
+        "aria-valuemin": "0",
+        get "aria-valuenow"() {
+          return Math.round(l().scrollLeft);
+        },
+        "data-floe-horizontal-scrollbar": "true",
+        role: "scrollbar",
+        tabIndex: 0,
+        get class() {
+          return V("floe-horizontal-scrollbar", c.class);
+        },
+        onKeyDown: R,
+        onPointerDown: x
+      }), !1, !0), e.addEventListener("pointercancel", L), e.$$pointerup = L, e.$$pointermove = D, e.$$pointerdown = A, _((o) => {
+        var r = `${k()}%`, i = `${v()}%`;
+        return r !== o.e && W(e, "left", o.e = r), i !== o.t && W(e, "width", o.t = i), o;
+      }, {
+        e: void 0,
+        t: void 0
+      }), t;
+    }
+  });
+}
+F(["pointerdown", "pointermove", "pointerup"]);
+export {
+  tt as PersistentHorizontalScrollbar
+};

package/dist/components/ui/index.d.ts

@@ -41,3 +41,4 @@ export { Pagination, type PaginationProps, type PaginationSize, type PaginationV
 export { MobileKeyboard, type MobileKeyboardProps, type MobileKeyboardSuggestionItem, } from './MobileKeyboard';
 export { LinearProgress, CircularProgress, SegmentedProgress, StepsProgress, type LinearProgressProps, type CircularProgressProps, type SegmentedProgressProps, type StepsProgressProps, type ProgressSize, type ProgressColor, } from './Progress';
 export { SurfaceAnchoredLayer, type SurfaceAnchoredLayerProps } from './SurfaceAnchoredLayer';
+export { PersistentHorizontalScrollbar, type PersistentHorizontalScrollbarProps } from './PersistentHorizontalScrollbar';