@tollbooth-dpyc/web 1.3.0 → 1.3.1

package/dist/react/TableFilter.d.ts

@@ -10,9 +10,9 @@
  * the query (server-side, or `filterRows` in the browser), so paging reflects
  * the filtered set. The search is applied on Enter or its chip, never on each
  * keystroke. Mechanics only: every visual choice is the site's, through
- * `classNames`; the actions are chips. The panel is kept on screen: once open,
- * it is slid sideways (`nudgeIntoView`) so no part of it hangs past either edge
- * of a phone.
+ * `classNames`; the actions are chips. The panel is kept on screen: while open,
+ * it is slid sideways (`reclampPanel`) so no part of it hangs past either edge
+ * of a phone, however its mark grows or the window changes.
  */
 import { type ReactNode } from "react";
 export interface DateFieldOption {

package/dist/react/TableFilter.js

@@ -11,13 +11,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * the query (server-side, or `filterRows` in the browser), so paging reflects
  * the filtered set. The search is applied on Enter or its chip, never on each
  * keystroke. Mechanics only: every visual choice is the site's, through
- * `classNames`; the actions are chips. The panel is kept on screen: once open,
- * it is slid sideways (`nudgeIntoView`) so no part of it hangs past either edge
- * of a phone.
+ * `classNames`; the actions are chips. The panel is kept on screen: while open,
+ * it is slid sideways (`reclampPanel`) so no part of it hangs past either edge
+ * of a phone, however its mark grows or the window changes.
  */
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Search, SlidersHorizontal, X } from "lucide-react";
-import { filterActive, nudgeIntoView } from "../table.js";
+import { filterActive } from "../table.js";
+import { oncePerFrame, reclampPanel } from "./panelPlacement.js";
 /** The panel keeps this many px from each edge of the viewport. */
 const EDGE = 8;
 function cx(...parts) {
@@ -47,26 +48,46 @@ function QuestionPanel({ q, clear, c, }) {
     const [open, setOpen] = useState(false);
     const box = useRef(null);
     const panel = useRef(null);
-    // Kept on screen: measured where the site's CSS puts it, then slid by the
-    // `translate` property (a site's own `transform` is left alone). Only a panel
-    // wider than the viewport gets a max-width.
+    const mark = useRef(null);
+    // Kept on screen, and kept there while open: the mark widens as questions
+    // are answered, the Clear chip joins the panel, the window turns or scrolls —
+    // each moves the panel, so each re-places it (at most once a frame). Slid by
+    // the `translate` property (a site's own `transform` is left alone); only a
+    // panel wider than the viewport gets a max-width.
     useLayoutEffect(() => {
         const el = panel.current;
         if (!open || !el)
             return;
+        let dx = 0;
         const place = () => {
-            el.style.translate = "";
-            el.style.maxWidth = "";
             const room = document.documentElement.clientWidth;
+            el.style.maxWidth = "";
             if (el.getBoundingClientRect().width > room - 2 * EDGE)
                 el.style.maxWidth = `${room - 2 * EDGE}px`;
             const r = el.getBoundingClientRect();
-            const dx = nudgeIntoView(r.left, r.width, room, EDGE);
-            el.style.translate = dx ? `${dx}px 0` : "";
+            const next = reclampPanel(dx, r.left, r.width, room, EDGE);
+            if (next !== dx) {
+                dx = next;
+                el.style.translate = dx ? `${dx}px 0` : "";
+            }
         };
         place();
-        window.addEventListener("resize", place);
-        return () => window.removeEventListener("resize", place);
+        const frame = oncePerFrame(place);
+        const sized = new ResizeObserver(frame.schedule);
+        sized.observe(el);
+        for (const around of [mark.current, box.current])
+            if (around)
+                sized.observe(around);
+        window.addEventListener("resize", frame.schedule);
+        window.addEventListener("orientationchange", frame.schedule);
+        window.addEventListener("scroll", frame.schedule, { capture: true, passive: true });
+        return () => {
+            frame.cancel();
+            sized.disconnect();
+            window.removeEventListener("resize", frame.schedule);
+            window.removeEventListener("orientationchange", frame.schedule);
+            window.removeEventListener("scroll", frame.schedule, { capture: true });
+        };
     }, [open]);
     // Dismissed by a tap outside or Escape.
     useEffect(() => {
@@ -89,7 +110,7 @@ function QuestionPanel({ q, clear, c, }) {
     }, [open]);
     const on = q.summary !== "";
     const set = (key, v) => q.onChange({ ...q.value, [key]: v });
-    return (_jsxs("div", { className: c.questions, ref: box, children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, title: on ? `Filtered: ${q.summary}` : "Filter", "aria-label": on ? `Filtered: ${q.summary}` : "Filter", className: cx(c.chip, on && c.chipActive), children: [q.icon ?? _jsx(SlidersHorizontal, { size: "1em", "aria-hidden": true }), on && _jsx("span", { className: c.summary, children: q.summary })] }), open && (_jsxs("div", { className: c.panel, ref: panel, role: "group", "aria-label": "Filter", children: [q.questions.map((question) => {
+    return (_jsxs("div", { className: c.questions, ref: box, children: [_jsxs("button", { ref: mark, type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, title: on ? `Filtered: ${q.summary}` : "Filter", "aria-label": on ? `Filtered: ${q.summary}` : "Filter", className: cx(c.chip, on && c.chipActive), children: [q.icon ?? _jsx(SlidersHorizontal, { size: "1em", "aria-hidden": true }), on && _jsx("span", { className: c.summary, children: q.summary })] }), open && (_jsxs("div", { className: c.panel, ref: panel, role: "group", "aria-label": "Filter", children: [q.questions.map((question) => {
                         const id = `tf-${String(question.key)}`;
                         return question.kind === "toggle" ? (_jsxs("label", { className: c.question, children: [_jsx("input", { type: "checkbox", checked: !!q.value[question.key], onChange: (e) => set(question.key, e.target.checked), className: c.checkbox }), " ", question.label] }, id)) : (_jsxs("div", { className: c.question, children: [_jsx("label", { htmlFor: id, children: question.label }), " ", _jsx("input", { id: id, inputMode: "numeric", value: String(q.value[question.key] ?? ""), onChange: (e) => set(question.key, e.target.value), className: c.number }), " ", _jsx("span", { className: c.unit, children: question.unit })] }, id));
                     }), clear] }))] }));

package/dist/react/panelPlacement.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Keeping TableFilter's questions panel on screen while it is open.
+ *
+ * The panel hangs from the filter mark, so anything that moves the mark moves
+ * the panel: ticking a question widens the mark (its summary), the Clear chip
+ * appears inside the panel, the window turns or scrolls. So the panel is
+ * re-placed on every one of those, not only when it opens.
+ *
+ * It is slid by the CSS `translate` property, which `getBoundingClientRect`
+ * already includes. Taking the slide in force back off gives where the site's
+ * CSS alone puts the panel, and the new slide is worked out from there — no
+ * need to clear the slide and force a second layout just to measure.
+ */
+/**
+ * The slide (px) that keeps the panel `margin` px inside both edges.
+ * `measuredLeft` is where it is drawn now, with `currentDx` already applied.
+ */
+export declare function reclampPanel(currentDx: number, measuredLeft: number, width: number, viewportWidth: number, margin?: number): number;
+/**
+ * `run` at most once per animation frame, however many times the returned
+ * function is called before that frame. `cancel` drops a pending run.
+ */
+export declare function oncePerFrame(run: () => void, request?: (cb: () => void) => number, release?: (id: number) => void): {
+    schedule: () => void;
+    cancel: () => void;
+};

package/dist/react/panelPlacement.js

@@ -0,0 +1,44 @@
+/**
+ * Keeping TableFilter's questions panel on screen while it is open.
+ *
+ * The panel hangs from the filter mark, so anything that moves the mark moves
+ * the panel: ticking a question widens the mark (its summary), the Clear chip
+ * appears inside the panel, the window turns or scrolls. So the panel is
+ * re-placed on every one of those, not only when it opens.
+ *
+ * It is slid by the CSS `translate` property, which `getBoundingClientRect`
+ * already includes. Taking the slide in force back off gives where the site's
+ * CSS alone puts the panel, and the new slide is worked out from there — no
+ * need to clear the slide and force a second layout just to measure.
+ */
+import { nudgeIntoView } from "../table.js";
+/**
+ * The slide (px) that keeps the panel `margin` px inside both edges.
+ * `measuredLeft` is where it is drawn now, with `currentDx` already applied.
+ */
+export function reclampPanel(currentDx, measuredLeft, width, viewportWidth, margin = 8) {
+    return nudgeIntoView(measuredLeft - currentDx, width, viewportWidth, margin);
+}
+/**
+ * `run` at most once per animation frame, however many times the returned
+ * function is called before that frame. `cancel` drops a pending run.
+ */
+export function oncePerFrame(run, request = (cb) => requestAnimationFrame(cb), release = (id) => cancelAnimationFrame(id)) {
+    let pending = null;
+    return {
+        schedule() {
+            if (pending !== null)
+                return;
+            pending = request(() => {
+                pending = null;
+                run();
+            });
+        },
+        cancel() {
+            if (pending === null)
+                return;
+            release(pending);
+            pending = null;
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tollbooth-dpyc/web",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Shared browser SDK for Tollbooth DPYC operator front ends: npub sign-in, proofs, MCP client, profile and wallet",
   "license": "Apache-2.0",
   "author": "Lonnie VanZandt",