@visns-studio/visns-components 6.6.4 → 6.15.1

package/package.json

@@ -28,6 +28,7 @@
         "framer-motion": "^12.38.0",
         "html-react-parser": "^5.2.17",
         "html2canvas": "^1.4.1",
+        "jsqr": "^1.4.0",
         "lodash": "^4.18.1",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.544.0",
@@ -36,6 +37,7 @@
         "motion": "^12.38.0",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
+        "prop-types": "^15.8.1",
         "qrcode.react": "^4.2.0",
         "quill-image-uploader": "^1.3.0",
         "react-big-calendar": "^1.19.4",
@@ -81,17 +83,19 @@
         "css-loader": "^7.1.4",
         "css-minimizer-webpack-plugin": "^7.0.4",
         "mini-css-extract-plugin": "^2.10.2",
+        "pngjs": "^7.0.0",
+        "qrcode": "^1.5.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "sass": "^1.99.0",
         "sass-loader": "^16.0.7"
     },
     "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.6.4",
+    "version": "6.15.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -100,7 +104,9 @@
     ],
     "scripts": {
         "build": "vite build",
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "node --test tests/*.test.mjs",
+        "dev:vault": "vite --config dev/vite.config.js",
+        "dev:sms": "FIXTURE=sms vite --config dev/vite.config.js"
     },
     "repository": {
         "type": "git",

package/src/components/DataGrid.jsx

@@ -30,6 +30,7 @@ import React, {
     useState,
 } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { buildEnv } from './utils/buildEnv';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
 import 'reactjs-popup/dist/index.css';
@@ -43,7 +44,11 @@ import NativeDateFilterEditor from './columns/NativeDateFilterEditor';
 import { toast } from 'react-toastify';
 import fetchUtil from '../utils/fetchUtil';
 import { confirmDialog } from './utils/ConfirmDialog';
-import { useDensity } from './utils/useDensity';
+import {
+    useDensity,
+    useAvailableHeight,
+    rowsForHeight,
+} from './utils/useDensity';
 import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../utils/relationshipSortingUtils';
 import {
     extractColumnsMetadata,
@@ -873,6 +878,22 @@ const DataGrid = forwardRef(
             debugLog('[DataGrid] Initial limit set to:', initialLimit);
             return initialLimit;
         });
+
+        // Set the moment the user picks a size from the pager's "Results per
+        // page" control. From then on nothing auto-sizes the page behind their
+        // back — not the profile default, not a window resize. Deliberately a
+        // ref rather than state: it must not itself trigger a re-render, and
+        // the sizing effect reads it without wanting to re-run when it flips.
+        const userChoseLimitRef = useRef(false);
+        // The current limit, readable from the sizing effect without listing
+        // `limit` as a dependency (which would re-run it on every page change).
+        const limitRef = useRef(limit);
+        limitRef.current = limit;
+
+        const handleLimitChange = useCallback((next) => {
+            userChoseLimitRef.current = true;
+            setLimit(next);
+        }, []);
         const [search, setSearch] = useState('');
 
         // This component instance survives client-side route changes — React Router
@@ -907,8 +928,12 @@ const DataGrid = forwardRef(
                 userProfile_settings_rows_per_page: userProfile?.settings?.rows_per_page,
                 currentLimit: limit,
             });
-            // Only apply the user's preference once, when userProfile first becomes available
-            if (!initialLimitApplied.current) {
+            // Only apply the user's preference once, when userProfile first
+            // becomes available — and never over a size the user has picked
+            // from the pager since. This seeds the limit for the first fetch;
+            // the sizing effect below replaces it as soon as the grid has
+            // measured itself against the window.
+            if (!initialLimitApplied.current && !userChoseLimitRef.current) {
                 const userLimit = userProfile?.rows_per_page || userProfile?.settings?.rows_per_page;
                 debugLog('[DataGrid] Checking userLimit:', userLimit);
                 if (userLimit && userLimit > 0) {
@@ -3099,10 +3124,10 @@ const DataGrid = forwardRef(
 
         const handleCoding = (c, data) => {
             const icons = [];
-            const assetPath =
-                import.meta.env.REACT_APP_ASSET_PATH !== undefined
-                    ? import.meta.env.REACT_APP_ASSET_PATH
-                    : '';
+            // Read through buildEnv, not import.meta.env directly: the
+            // latter is Vite's interface and throws a TypeError under
+            // webpack, which took the whole grid down in the Next.js portal.
+            const assetPath = buildEnv('REACT_APP_ASSET_PATH', '');
 
             const addIcon = (src, icon, alt, tooltipContent, key) => {
                 if (src && src !== '') {
@@ -3920,7 +3945,16 @@ const DataGrid = forwardRef(
                             // clamped columns exceed the container (narrow
                             // screens) — columns then render a few px wide
                             // with no horizontal scrollbar ever appearing.
-                            minWidth: column.minWidth ?? grid.columnMinWidth,
+                            // A date filter needs room for its locale mask
+                            // ("dd/mm/yyyy" + the picker glyph); below ~140px
+                            // the native input clips its own value.
+                            minWidth:
+                                column.minWidth ??
+                                (['date', 'datetime', 'datetime-local'].includes(
+                                    column.type
+                                )
+                                    ? Math.max(grid.columnMinWidth, 140)
+                                    : grid.columnMinWidth),
                             maxWidth: column.maxWidth ?? undefined,
                             textAlign: column.textAlign ?? undefined,
                             textVerticalAlign:
@@ -5193,11 +5227,42 @@ const DataGrid = forwardRef(
         // Data Grid Styling
         const [windowHeight, setWindowHeight] = useState(window.innerHeight);
         const [dataCount, setDataCount] = useState(0);
+
+        // Pages that mount the grid directly (rather than through GenericIndex)
+        // pass no gridHeight, and fitToRows deliberately never grows past the
+        // rows - so on a tall screen the grid sat at a few rows' height and
+        // scrolled inside itself. The grid now measures what is left between
+        // its own top edge and the bottom of the viewport; fitToRows remains
+        // the first-paint fallback.
+        //
+        // Measured from `.dataGridContainer` rather than from the whole
+        // component, so the search/create bar and the legend above it are part
+        // of `top` instead of being asked for a second time below.
+        // `measureChrome` subtracts what the *page* needs under the grid — the
+        // card's padding and border, the page gutter, any section rendered
+        // after it — which used to be a flat 28px guess that was wrong for any
+        // page nesting its grid differently.
+        const containerRef = useRef(null);
+        const measuredHeight = useAvailableHeight(containerRef, {
+            bottomGutter: 0,
+            measureChrome: true,
+            recomputeKey: windowHeight,
+        });
+        const resolvedHeight =
+            gridHeight && gridHeight > 0
+                ? gridHeight
+                : measuredHeight != null && measuredHeight > 0
+                  ? measuredHeight
+                  : null;
+
+        // Both minHeight AND height: with minHeight alone the grid settles at
+        // its content height on a tall screen. An explicit height makes it
+        // take the room measured for it.
+        const initialHeight =
+            resolvedHeight ?? fitToRows(dataCount, windowHeight);
         const [gridStyle, setGridStyle] = useState({
-            minHeight:
-                gridHeight && gridHeight > 0
-                    ? gridHeight
-                    : fitToRows(dataCount, windowHeight),
+            minHeight: initialHeight,
+            height: initialHeight,
             boxShadow: 'none',
             ...(hoverColor ? { '--hover-color': hoverColor } : {}),
         });
@@ -5205,39 +5270,116 @@ const DataGrid = forwardRef(
             style: style ? style : {},
         };
 
+        /**
+         * The part of the grid's height that is not data rows: the column
+         * header, the filter row (only some pages have one), the footer rows
+         * and the pagination toolbar.
+         *
+         * Read off the rendered grid rather than assumed, because it changes
+         * with density, with `enableFiltering`, and with whether the page shows
+         * a footer — and because the pager *is* inside the grid element, so
+         * getting this wrong is exactly what leaves the last row hidden behind
+         * it or the pager stranded under a band of empty body.
+         *
+         * Returns null on the first pass, before the grid is in the DOM; the
+         * caller falls back to GRID_CHROME.
+         */
+        const measureGridChrome = () => {
+            const root = containerRef.current;
+
+            if (!root || typeof root.querySelector !== 'function') {
+                return null;
+            }
+
+            const gridEl = root.querySelector('.InovuaReactDataGrid');
+            const body = root.querySelector('.InovuaReactDataGrid__body');
+
+            if (!gridEl || !body) {
+                return null;
+            }
+
+            const chrome =
+                gridEl.getBoundingClientRect().height -
+                body.getBoundingClientRect().height;
+
+            return chrome > 0 ? chrome : null;
+        };
+
         useEffect(() => {
             const getMinimumHeight = () => {
-                if (gridHeight > 0) return gridHeight;
+                if (resolvedHeight > 0) return resolvedHeight;
                 return fitToRows(dataCount, window.innerHeight);
             };
 
             const minHeight = getMinimumHeight();
-            setGridStyle((prevState) => ({ ...prevState, minHeight }));
-
-            // Priority for limit:
-            // 1. User's rows_per_page preference (already applied via initialLimitApplied ref)
-            // 2. ajaxSetting.take if >= 35
-            // 3. Calculated rows based on height (fallback)
-
-            // Only auto-calculate limit if user hasn't set a preference
-            const userPreferredLimit = userProfile?.rows_per_page || userProfile?.settings?.rows_per_page;
+            setGridStyle((prevState) => ({
+                ...prevState,
+                minHeight,
+                height: minHeight,
+            }));
 
-            if (userPreferredLimit && userPreferredLimit > 0) {
-                // User has a preference, don't override it
-                debugLog('[DataGrid] Respecting user preference, not auto-calculating limit:', userPreferredLimit);
-            } else if (ajaxSetting?.take >= 35) {
+            // How many rows to ask for.
+            //
+            // The rule used to be "if the profile has a rows_per_page, never
+            // auto-calculate". That is a stored default, not a decision anyone
+            // made — it is 25 for most staff — so every index page on a 1080p
+            // screen drew 25 rows and then several hundred px of empty grid
+            // body under them, with the pager stranded at the bottom of it.
+            //
+            // The profile value now *seeds* the limit (see the initial state
+            // and the effect that applies it once the profile arrives) and
+            // nothing more. Once the grid has measured itself against the
+            // window, the measurement wins — unless the user has picked a size
+            // from the pager's "Results per page" control in this session, in
+            // which case their choice is final for as long as the grid is
+            // mounted. Whatever the pager does about persisting that choice to
+            // the profile is unchanged.
+            //
+            // A page that passes an explicit `gridHeight` is not sized to the
+            // window at all (a grid in a modal, a secondary grid on a detail
+            // page), so it keeps the old order: profile preference, then a
+            // configured `take`, then the arithmetic.
+            const autoSizedToWindow = !(gridHeight && gridHeight > 0);
+            const userPreferredLimit =
+                userProfile?.rows_per_page ||
+                userProfile?.settings?.rows_per_page;
+
+            if (userChoseLimitRef.current) {
+                debugLog(
+                    '[DataGrid] Honouring the size the user picked this session:',
+                    limitRef.current
+                );
+            } else if (
+                !autoSizedToWindow &&
+                userPreferredLimit &&
+                userPreferredLimit > 0
+            ) {
+                debugLog(
+                    '[DataGrid] Fixed-height grid, respecting profile preference:',
+                    userPreferredLimit
+                );
+            } else if (!autoSizedToWindow && ajaxSetting?.take >= 35) {
                 setLimit(ajaxSetting.take);
             } else {
-                // Divide by the row height actually in force. This was
-                // hardcoded to 32 even in tablet mode, so tablet pages asked
-                // for far more rows than could ever fit on screen.
-                const calculateRows = (height) =>
-                    Math.floor((height - 100) / grid.rowUnit);
-
-                const rowCount = calculateRows(minHeight);
-                setLimit(rowCount);
+                // Prefer the chrome the grid is really wearing — the column
+                // header, the filter row if this page has one, and the pager
+                // toolbar all live inside `minHeight`, and they differ by
+                // density and by config. GRID_CHROME is the fallback for the
+                // first pass, before the grid exists to be measured.
+                const chrome = measureGridChrome() ?? GRID_CHROME;
+
+                setLimit(rowsForHeight(minHeight, chrome, grid.rowUnit));
             }
-        }, [dataCount, gridHeight, window.innerHeight, grid, userProfile?.rows_per_page, userProfile?.settings?.rows_per_page]);
+        }, [
+            dataCount,
+            gridHeight,
+            resolvedHeight,
+            window.innerHeight,
+            grid,
+            ajaxSetting?.take,
+            userProfile?.rows_per_page,
+            userProfile?.settings?.rows_per_page,
+        ]);
 
         useEffect(() => {
             const debouncedHandleResize = debounce(() => {
@@ -5393,8 +5535,9 @@ const DataGrid = forwardRef(
                     </div>
                 )}
 
-                {/* DataGrid container with its own border */}
-                <div className={styles.dataGridContainer}>
+                {/* DataGrid container with its own border; its top edge is
+                    what the available height is measured from. */}
+                <div className={styles.dataGridContainer} ref={containerRef}>
 
                     {limit && limit > 0 ? (
                         <ReactDataGrid
@@ -5933,7 +6076,7 @@ const DataGrid = forwardRef(
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}
-                            onLimitChange={setLimit}
+                            onLimitChange={handleLimitChange}
                             onSelectionChange={handleSelectionChange}
                             onSortInfoChange={handleSort}
                             onRenderRow={onRenderRow}

package/src/components/Fetch.jsx

@@ -4,6 +4,9 @@ import { trackPromise } from 'react-promise-tracker';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
 
+// import.meta.env is Vite-only; this reads it safely under any bundler.
+import { readBuildEnv } from './utils/buildEnv';
+
 // Create a singleton QueryClient instance for the entire visns-components ecosystem
 const createQueryClient = () => {
     return new QueryClient({
@@ -165,7 +168,8 @@ const originalCustomFetch = (
     method,
     formData,
     successCallback = null,
-    errorCallback = null
+    errorCallback = null,
+    options = {}
 ) => {
     const baseUrl = '';
 
@@ -191,7 +195,7 @@ const originalCustomFetch = (
         headers['X-XSRF-TOKEN'] = csrfToken;
     }
     const MAX_PAYLOAD_SIZE_MB =
-        parseFloat(import.meta.env.VITE_MAX_PAYLOAD_SIZE_MB) || 4.5;
+        parseFloat(readBuildEnv('VITE_MAX_PAYLOAD_SIZE_MB')) || 4.5;
     const MAX_PAYLOAD_SIZE = MAX_PAYLOAD_SIZE_MB * 1024 * 1024; // Convert MB to bytes
 
     // Estimate headers size
@@ -304,6 +308,40 @@ const originalCustomFetch = (
                 resolve(responseObj);
             })
             .catch((error) => {
+                /*
+                 * `options.silentStatuses` — an opt-in list of HTTP statuses
+                 * that are part of a flow rather than a failure, and so must
+                 * not be announced.
+                 *
+                 * The vault's reveal endpoint answers 423 to mean "confirm
+                 * your password first", which the caller handles by drawing a
+                 * confirm panel. Without this, that perfectly ordinary step
+                 * either toasts an error at the user or forces the caller to
+                 * pass an errorCallback that can only see a message string —
+                 * never the status it needs to branch on.
+                 *
+                 * A listed status skips the toast AND the errorCallback, and
+                 * rejects with the status and parsed body hung directly off
+                 * the error so `catch (e) { e.status; e.data }` works. Opt-in,
+                 * so every existing caller behaves exactly as before.
+                 */
+                const silentStatuses = Array.isArray(options.silentStatuses)
+                    ? options.silentStatuses
+                    : [];
+                const responseStatus = error.response
+                    ? error.response.status
+                    : undefined;
+
+                if (
+                    responseStatus !== undefined &&
+                    silentStatuses.includes(responseStatus)
+                ) {
+                    error.status = responseStatus;
+                    error.data = error.response.data;
+                    reject(error);
+                    return;
+                }
+
                 let errorMessage = '';
 
                 if (error.response && error.response.data) {
@@ -323,6 +361,21 @@ const originalCustomFetch = (
                             errorMessage = data.message;
                         }
                     }
+
+                    // Last resort, and only when nothing above found anything:
+                    // this library's own backends answer a rejected auth
+                    // attempt with `{error: '…'}` and no `message` at all, and
+                    // on a non-200 that body used to be dropped entirely — the
+                    // caller got an empty toast and no idea why it failed.
+                    // Ordered after `message` so nothing that already surfaced
+                    // changes.
+                    if (
+                        !errorMessage &&
+                        typeof data.error === 'string' &&
+                        data.error !== ''
+                    ) {
+                        errorMessage = data.error;
+                    }
                 } else {
                     errorMessage = error.message;
                 }
@@ -386,6 +439,15 @@ const CustomFetch = (
                         } else if (data.message) {
                             errorMessage = data.message;
                         }
+                        // Same last-resort `{error}` fallback as the
+                        // uncached path above.
+                        if (
+                            !errorMessage &&
+                            typeof data.error === 'string' &&
+                            data.error !== ''
+                        ) {
+                            errorMessage = data.error;
+                        }
                     } else {
                         errorMessage = error.message;
                     }
@@ -408,6 +470,14 @@ const CustomFetch = (
                                 errorMessage = data.message;
                             }
                         }
+                        // Same last-resort `{error}` fallback as above.
+                        if (
+                            !errorMessage &&
+                            typeof data.error === 'string' &&
+                            data.error !== ''
+                        ) {
+                            errorMessage = data.error;
+                        }
                     } else {
                         errorMessage = error.message;
                     }
@@ -424,7 +494,14 @@ const CustomFetch = (
     } else {
         // Use original implementation for non-cacheable requests (mutations)
         const result = trackPromise(
-            originalCustomFetch(url, method, formData, successCallback, errorCallback)
+            originalCustomFetch(
+                url,
+                method,
+                formData,
+                successCallback,
+                errorCallback,
+                options
+            )
         );
         
         // Auto-invalidate related caches after mutations

package/src/components/Form.jsx

@@ -23,6 +23,7 @@ import SumEqualsSummary, {
     sumEqualsHintFor,
 } from './SumEqualsSummary';
 import Table from './DataGrid';
+import { SECONDARY_GRID_HEIGHT } from './utils/useDensity';
 
 import styles from './styles/Form.module.scss';
 
@@ -3195,6 +3196,14 @@ function Form({
                                             mapbox={mapbox}
                                             paramValue={paramValue}
                                             settings={item.settings}
+                                            /* A form is almost always inside
+                                               a modal, so this grid must not
+                                               take the room between itself and
+                                               the bottom of the window — that
+                                               is measured from a box that is
+                                               already centred, and pushes the
+                                               pager below the fold. */
+                                            gridHeight={SECONDARY_GRID_HEIGHT}
                                             style={
                                                 userProfile?.settings?.style ||
                                                 {}