@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/utils/useDensity.js

@@ -170,6 +170,224 @@ export const useDensity = () => {
     return useMemo(() => parseDensitySnapshot(snapshot), [snapshot]);
 };
 
+/**
+ * The arithmetic behind `useAvailableHeight`, split out so it can be tested
+ * without a DOM: how much room is left under an element whose top edge sits at
+ * `top`, in a window `windowHeight` tall, once `bottomGutter` px are reserved.
+ *
+ * Returns `null` rather than a number for anything unusable — a non-finite
+ * input, or a result at or below zero (the element is `display:none`, or has
+ * been scrolled past the bottom of the window) — so callers keep their own
+ * fallback instead of flashing a zero-height pane.
+ *
+ * @param {number} top
+ * @param {number} windowHeight
+ * @param {number} bottomGutter
+ * @returns {number|null}
+ */
+export const availableHeightFrom = (top, windowHeight, bottomGutter) => {
+    const next = windowHeight - top - bottomGutter;
+
+    return Number.isFinite(next) && next > 0 ? next : null;
+};
+
+/**
+ * Sub-pixel noise is not a layout change.
+ *
+ * `getBoundingClientRect()` returns fractions, and a `ResizeObserver` fires for
+ * changes far below the threshold anyone can see — a font swapping in, a
+ * scrollbar appearing, a zoom level that lands on a half pixel. Re-measuring on
+ * every one of those would set state (and so re-render the grid) constantly.
+ * Only a real move of the element's top edge counts.
+ *
+ * `null` for `previousTop` means nothing has been measured yet, which always
+ * counts.
+ *
+ * @param {number|null} previousTop
+ * @param {number} nextTop
+ * @param {number} [epsilon=2] px of movement to ignore.
+ * @returns {boolean}
+ */
+export const hasTopMoved = (previousTop, nextTop, epsilon = 2) => {
+    if (previousTop === null || !Number.isFinite(previousTop)) {
+        return true;
+    }
+
+    if (!Number.isFinite(nextTop)) {
+        return true;
+    }
+
+    return Math.abs(nextTop - previousTop) > epsilon;
+};
+
+/**
+ * Height for a grid that is *not* the page's main list: a sub-table inside a
+ * form, an attachments list inside a modal.
+ *
+ * Those cannot use the fill-the-viewport measurement. A modal is centred on the
+ * window, so measuring from the grid's top edge to the bottom of the window
+ * asks for roughly half the screen *below a box that is already centred* — the
+ * modal grows past the fold, the overlay starts scrolling, and the grid's own
+ * pager ends up below it. A fixed height keeps the whole panel, pager included,
+ * inside the dialog on every screen this application supports (the shortest
+ * being a 768px laptop: 60px modal header + 32px padding + this = 512px).
+ */
+export const SECONDARY_GRID_HEIGHT = 420;
+
+/**
+ * Whether an element is taken out of normal flow, and so contributes nothing to
+ * the space below a pane. `.polActions` — the button strip GenericIndex renders
+ * after the grid — is `position: fixed`, and counting its height would shrink
+ * every index grid by a row for no reason.
+ *
+ * @param {{position?: string, display?: string}} style computed style
+ * @returns {boolean}
+ */
+export const isOutOfFlow = (style) => {
+    if (!style) {
+        return true;
+    }
+
+    return (
+        style.display === 'none' ||
+        style.position === 'fixed' ||
+        style.position === 'absolute'
+    );
+};
+
+const px = (value) => {
+    const parsed = parseFloat(value);
+
+    return Number.isFinite(parsed) ? parsed : 0;
+};
+
+/**
+ * How much room everything below `node` needs, all the way up to the document.
+ *
+ * A pane that fills the window has to know what is underneath it, and "28px,
+ * probably" is a guess that goes wrong the moment a page nests its grid one
+ * card deeper or renders a second section after it. This walks the ancestor
+ * chain and adds up the three things that actually take room below the pane:
+ *
+ *   - the element's own bottom margin,
+ *   - anything laid out after it inside the same parent (the Family Tasks
+ *     table under the task list, a relocated auto-refresh control),
+ *   - each parent's bottom padding and bottom border (the card the grid sits
+ *     in, the page's `.padding` gutter).
+ *
+ * Deliberately computed from styles and sibling rects rather than from
+ * `parent.bottom - node.bottom`. Ancestors here are stretched by
+ * `min-height: 100vh` and by flex, so when the page is *shorter* than the
+ * window that difference reads as slack the pane could grow into — and the
+ * pane growing removes the slack, which is an oscillation, not a measurement.
+ * Padding, borders and siblings do not move when the pane resizes, so this
+ * converges in one pass.
+ *
+ * @param {HTMLElement} node
+ * @param {object} [readers] injectable DOM access, for tests.
+ * @param {(el: any) => any} [readers.getStyle]
+ * @param {(el: any) => {height: number}} [readers.getRect]
+ * @param {any} [readers.stopAt] ancestor to stop at, exclusive.
+ * @returns {number}
+ */
+export const bottomChromeBelow = (node, readers = {}) => {
+    const getStyle =
+        readers.getStyle ||
+        ((el) =>
+            typeof window !== 'undefined' && window.getComputedStyle
+                ? window.getComputedStyle(el)
+                : null);
+    const getRect =
+        readers.getRect ||
+        ((el) =>
+            typeof el.getBoundingClientRect === 'function'
+                ? el.getBoundingClientRect()
+                : { height: 0 });
+    const stopAt =
+        readers.stopAt !== undefined
+            ? readers.stopAt
+            : typeof document !== 'undefined'
+              ? document.documentElement
+              : null;
+
+    let total = 0;
+    let current = node;
+    // The chain is a dozen elements deep at worst; the cap is only here so a
+    // detached or circular tree cannot hang the page.
+    let guard = 0;
+
+    while (current && current !== stopAt && guard < 64) {
+        guard += 1;
+
+        const style = getStyle(current);
+
+        total += px(style?.marginBottom);
+
+        let sibling = current.nextElementSibling;
+
+        while (sibling) {
+            const siblingStyle = getStyle(sibling);
+
+            if (!isOutOfFlow(siblingStyle)) {
+                total +=
+                    px(getRect(sibling)?.height) +
+                    px(siblingStyle?.marginTop) +
+                    px(siblingStyle?.marginBottom);
+            }
+
+            sibling = sibling.nextElementSibling;
+        }
+
+        const parent = current.parentElement;
+
+        if (!parent) {
+            break;
+        }
+
+        const parentStyle = getStyle(parent);
+
+        total +=
+            px(parentStyle?.paddingBottom) + px(parentStyle?.borderBottomWidth);
+
+        current = parent;
+    }
+
+    return total > 0 ? total : 0;
+};
+
+/**
+ * How many rows to ask the server for, given the room the grid has.
+ *
+ * Exported for the tests; the arithmetic is the whole reason index pages
+ * either fill their card or leave a band of empty grid under the last row.
+ *
+ * `rowUnit` is the density's row height, not a measured one. Rows in this grid
+ * can be any height — a knowledge-base entry with a four-line description is
+ * 250px where the next one is 40 — and sizing a page off the first row would
+ * ask for three rows on those grids. The unit is deliberately the *smallest* a
+ * row can be, so this is an upper bound: a page of uniform rows lands exactly,
+ * and a page of tall ones over-fetches and scrolls inside the grid, which is
+ * the right way round.
+ *
+ * @param {number} height  the grid element's total height, pager included.
+ * @param {number} chrome  everything in that height which is not a data row:
+ *                         column header, filter row, footer, pager toolbar.
+ * @param {number} rowUnit
+ * @returns {number} at least 1.
+ */
+export const rowsForHeight = (height, chrome, rowUnit) => {
+    if (!(rowUnit > 0)) {
+        return 1;
+    }
+
+    const usable = height - chrome;
+
+    return Math.max(1, Math.floor(usable / rowUnit));
+};
+
+/** How long to wait after a layout change before re-measuring, in ms. */
+export const REMEASURE_DEBOUNCE_MS = 100;
+
 /**
  * Height left on screen below `ref`'s element, for panes that should fill the
  * window instead of taking a fraction of it.
@@ -179,17 +397,60 @@ export const useDensity = () => {
  * scrolled out of view) — so callers can keep their own fallback rather than
  * flashing a zero-height pane.
  *
+ * WHY IT WATCHES MORE THAN THE WINDOW
+ *
+ * The window resizing is not the only thing that changes how much room is left
+ * below an element. Everything stacked above it moves its top edge without the
+ * window changing size at all, and in this library that happens constantly
+ * *after* the first paint:
+ *
+ *   - `GenericIndex` renders its tab strip only once `subnav` arrives, so the
+ *     grid is measured before the tabs exist and then pushed down by them.
+ *   - A page header that fills in a record count, a client summary or an alert
+ *     from a second request grows a line taller.
+ *   - A filter panel above the grid expands or collapses.
+ *   - A grid mounted in a hidden tab measures as nothing, and nothing about the
+ *     window changes when its tab is finally shown.
+ *
+ * None of those touch `window.innerHeight`, and the ref object is stable across
+ * a remount, so the effect below does not re-run for any of them. A
+ * `ResizeObserver` on the document body — and on the element's own offset
+ * parent, for a pane that scrolls inside a fixed-height region where the body
+ * never changes size — catches all of them, debounced so a run of mutations
+ * costs one measurement.
+ *
+ * The measurement only becomes new state when the top edge actually moved (see
+ * `hasTopMoved`), which is also what stops the obvious feedback loop: the pane
+ * resizing itself from this value changes the body's height, which fires the
+ * observer again — but never moves the pane's own top edge, so it settles after
+ * one pass.
+ *
  * @param {{current: HTMLElement|null}} ref     wrapper to measure from.
  * @param {object}  [options]
  * @param {boolean} [options.enabled=true]      false parks the hook at null.
- * @param {number}  [options.bottomGutter=16]   px left below the element.
+ * @param {number}  [options.bottomGutter=16]   px left below the element, on
+ *                                              top of any measured chrome.
+ * @param {boolean} [options.measureChrome=false]  also subtract what the page
+ *                                              itself needs below the element
+ *                                              — card padding, the page
+ *                                              gutter, a section rendered
+ *                                              after it. See
+ *                                              `bottomChromeBelow`. With this
+ *                                              on, `bottomGutter` is a safety
+ *                                              margin rather than the whole
+ *                                              allowance, so pass it small.
  * @param {*}       [options.recomputeKey]      change it to force a re-measure
  *                                              (e.g. the app's window height).
  * @returns {number|null}
  */
 export const useAvailableHeight = (
     ref,
-    { enabled = true, bottomGutter = 16, recomputeKey } = {}
+    {
+        enabled = true,
+        bottomGutter = 16,
+        measureChrome = false,
+        recomputeKey,
+    } = {}
 ) => {
     const [height, setHeight] = useState(null);
 
@@ -199,25 +460,100 @@ export const useAvailableHeight = (
             return undefined;
         }
 
-        const measure = () => {
+        // What this effect last measured, so a `ResizeObserver` burst that
+        // leaves the page looking the same costs nothing.
+        let previousTop = null;
+        let previousGutter = null;
+        let timer = null;
+
+        const measure = (force) => {
             const node = ref?.current;
 
             if (!node || typeof node.getBoundingClientRect !== 'function') {
+                previousTop = null;
+                previousGutter = null;
                 setHeight(null);
                 return;
             }
 
             const { top } = node.getBoundingClientRect();
-            const next = window.innerHeight - top - bottomGutter;
 
-            setHeight(Number.isFinite(next) && next > 0 ? next : null);
+            // The gutter alone is a guess at what sits under the pane. When the
+            // caller asks, measure it instead, so `top + height + everything
+            // below === window.innerHeight` actually closes.
+            const gutter = measureChrome
+                ? bottomGutter + bottomChromeBelow(node)
+                : bottomGutter;
+
+            // Both ends matter, and they move independently. A tab strip
+            // arriving above the grid moves the top; a second section rendering
+            // *below* it (My Tasks grows a Family Tasks table once a
+            // relationship filter is set) changes what is underneath while the
+            // top edge stays exactly where it was.
+            if (
+                !force &&
+                !hasTopMoved(previousTop, top) &&
+                !hasTopMoved(previousGutter, gutter)
+            ) {
+                return;
+            }
+
+            previousTop = top;
+            previousGutter = gutter;
+
+            setHeight(availableHeightFrom(top, window.innerHeight, gutter));
+        };
+
+        // A resize changes the height even when the top edge has not moved, so
+        // it always re-measures; a layout shift only counts if the edge moved.
+        const remeasure = () => measure(true);
+        const remeasureIfMoved = () => measure(false);
+
+        const scheduleRemeasure = () => {
+            if (timer) {
+                clearTimeout(timer);
+            }
+
+            timer = setTimeout(() => {
+                timer = null;
+                remeasureIfMoved();
+            }, REMEASURE_DEBOUNCE_MS);
         };
 
-        measure();
-        window.addEventListener('resize', measure);
+        measure(true);
+        window.addEventListener('resize', remeasure);
+
+        const observers = [];
+
+        if (typeof ResizeObserver !== 'undefined') {
+            const observed = new Set();
+
+            // The body covers content flowing above the pane. The offset parent
+            // covers the case where it does not: a pane inside a fixed-height,
+            // internally scrolling region, whose siblings can grow without the
+            // document getting any taller.
+            [document.body, ref?.current?.offsetParent].forEach((target) => {
+                if (!target || observed.has(target)) {
+                    return;
+                }
 
-        return () => window.removeEventListener('resize', measure);
-    }, [ref, enabled, bottomGutter, recomputeKey]);
+                observed.add(target);
+
+                const observer = new ResizeObserver(scheduleRemeasure);
+                observer.observe(target);
+                observers.push(observer);
+            });
+        }
+
+        return () => {
+            window.removeEventListener('resize', remeasure);
+            observers.forEach((observer) => observer.disconnect());
+
+            if (timer) {
+                clearTimeout(timer);
+            }
+        };
+    }, [ref, enabled, bottomGutter, measureChrome, recomputeKey]);
 
     return height;
 };

package/src/components/vault/OtpChip.jsx

@@ -0,0 +1,208 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import { KeyRound, Loader2 } from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import styles from '../styles/Vault.module.scss';
+import { copyText } from './vaultClipboard';
+import { fetchOtp } from './vaultOtp';
+import { formatOtp } from './vaultHelpers';
+import { resolveVaultEndpoints } from './vaultEndpoints';
+
+const RING_RADIUS = 7;
+const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+
+/**
+ * The 2FA code for one vault entry.
+ *
+ * Starts as a chip rather than a live code on purpose: a screen full of
+ * ticking six-digit codes is a screen full of credentials that anyone walking
+ * past can read, and it would put one request per row on the server every 30
+ * seconds. A code appears only when its chip is clicked.
+ *
+ * Once open it keeps itself current — the countdown ring drains, and at the
+ * boundary the next code is fetched — until the chip unmounts or is closed.
+ * Clicking an open chip copies the code, which is what the user came for.
+ *
+ * The code is never computed here. The shared secret stays on the server and
+ * the endpoint returns only the current code and how long it has left, so a
+ * compromised bundle leaks one 30-second code rather than a permanent seed.
+ *
+ * `size` picks the shape: `sm` and `lg` are labelled pills, `icon` is a square
+ * button carrying only the glyph — the quick search's rows are one line each
+ * and cannot afford the word. An `icon` chip still expands to the code and
+ * ring once it is opened, because at that point the digits are the content.
+ *
+ * `buttonRef` is handed straight to the button so a parent can drive the chip
+ * from the keyboard; the quick search's `Alt+O` uses it.
+ */
+const OtpChip = ({ entryId, endpoints, size = 'sm', buttonRef = null }) => {
+    // Memoised: an unstable routes object changes `fetchCode`'s identity every
+    // render, which tears down and rebuilds the countdown interval below on
+    // every render rather than once per open chip.
+    const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
+
+    const [code, setCode] = useState('');
+    const [period, setPeriod] = useState(30);
+    const [remaining, setRemaining] = useState(0);
+    const [loading, setLoading] = useState(false);
+
+    // Every async path checks this before touching state: the chip lives in a
+    // popover that is routinely closed mid-request.
+    const mountedRef = useRef(true);
+    const tickRef = useRef(null);
+    const openRef = useRef(false);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+            if (tickRef.current) clearInterval(tickRef.current);
+        },
+        []
+    );
+
+    const fetchCode = useCallback(() => {
+        setLoading(true);
+
+        fetchOtp(CustomFetch, routes, entryId)
+            .then(({ code: next, period: seconds, expiresIn }) => {
+                if (!mountedRef.current || !openRef.current) return;
+
+                setLoading(false);
+                setCode(next);
+                setPeriod(seconds);
+                // The server's own count, so the ring agrees with the code
+                // rather than with this browser's clock.
+                setRemaining(expiresIn);
+            })
+            .catch(() => {
+                if (!mountedRef.current) return;
+
+                setLoading(false);
+                // CustomFetch has already said what went wrong. Fall back to
+                // the idle chip so the user can try again.
+                openRef.current = false;
+                setCode('');
+            });
+    }, [entryId, routes]);
+
+    // One interval for the life of an open chip, and it does nothing but
+    // drain the ring. Fetching the next code from inside the updater would be
+    // a side effect in a function React is free to call twice.
+    useEffect(() => {
+        if (code === '') return undefined;
+
+        tickRef.current = setInterval(() => {
+            setRemaining((prev) => (prev <= 0 ? 0 : prev - 1));
+        }, 1000);
+
+        return () => {
+            if (tickRef.current) clearInterval(tickRef.current);
+            tickRef.current = null;
+        };
+    }, [code]);
+
+    // Reaching the boundary is what asks for the next code.
+    useEffect(() => {
+        if (code === '' || remaining > 0) return;
+
+        fetchCode();
+    }, [code, remaining, fetchCode]);
+
+    const handleClick = useCallback(
+        async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (code === '') {
+                openRef.current = true;
+                fetchCode();
+                return;
+            }
+
+            const copied = await copyText(code);
+
+            toast[copied ? 'success' : 'info'](
+                copied ? 'Code copied' : `Code: ${formatOtp(code)}`
+            );
+        },
+        [code, fetchCode]
+    );
+
+    const isOpen = code !== '';
+    const fraction = isOpen && period > 0 ? Math.max(0, remaining) / period : 0;
+    // A code with under five seconds left is about to change under the user's
+    // fingers, which is worth flagging before they paste it somewhere.
+    const expiring = isOpen && remaining > 0 && remaining <= 5;
+
+    // Icon-only until there is something to show; once there is, the code
+    // itself is the label and the square shape gives way to it.
+    const iconOnly = size === 'icon' && !isOpen;
+
+    return (
+        <button
+            type="button"
+            ref={buttonRef}
+            className={[
+                styles.otpChip,
+                size === 'lg' ? styles.otpChipLg : '',
+                size === 'icon' ? styles.otpChipCompact : '',
+                iconOnly ? styles.otpChipIcon : '',
+                isOpen ? styles.otpChipOpen : '',
+                expiring ? styles.otpChipExpiring : '',
+            ]
+                .filter(Boolean)
+                .join(' ')}
+            onClick={handleClick}
+            disabled={loading && !isOpen}
+            data-tooltip-id="system-tooltip"
+            data-tooltip-content={
+                isOpen ? 'Copy this code' : '2FA code'
+            }
+            aria-label={
+                isOpen
+                    ? `Copy the 2FA code, ${remaining} seconds remaining`
+                    : 'Show the 2FA code'
+            }
+        >
+            {loading && !isOpen ? (
+                <Loader2 size={13} className={styles.spin} aria-hidden="true" />
+            ) : isOpen ? (
+                <svg
+                    className={styles.otpRing}
+                    width="18"
+                    height="18"
+                    viewBox="0 0 18 18"
+                    aria-hidden="true"
+                >
+                    <circle
+                        className={styles.otpRingTrack}
+                        cx="9"
+                        cy="9"
+                        r={RING_RADIUS}
+                    />
+                    <circle
+                        className={styles.otpRingValue}
+                        cx="9"
+                        cy="9"
+                        r={RING_RADIUS}
+                        strokeDasharray={RING_CIRCUMFERENCE}
+                        strokeDashoffset={RING_CIRCUMFERENCE * (1 - fraction)}
+                    />
+                </svg>
+            ) : (
+                <KeyRound size={13} strokeWidth={2} aria-hidden="true" />
+            )}
+
+            {/* Tabular figures: without them the code jitters every second as
+                the glyph widths change. */}
+            {!iconOnly && (
+                <span className={isOpen ? styles.otpCode : styles.otpLabel}>
+                    {isOpen ? formatOtp(code) : 'OTP'}
+                </span>
+            )}
+        </button>
+    );
+};
+
+export default OtpChip;