@visns-studio/visns-components 6.5.4 → 6.6.0

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.5.4",
+    "version": "6.6.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -43,6 +43,7 @@ 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 { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../utils/relationshipSortingUtils';
 import {
     extractColumnsMetadata,
@@ -923,31 +924,19 @@ const DataGrid = forwardRef(
             };
         }, []);
 
-        // Track body.tablet-mode so we can fix rowHeight in tablet views.
-        // With rowHeight={null} Inovua measures each row's content, which is
+        // The px geometry this grid lays out with — row heights, the width one
+        // action icon needs, the floor under a column — comes from the density
+        // table rather than from constants here, so app density (data-density
+        // on <html>) and per-view tablet mode (body.tablet-mode) are decided in
+        // one place. `grid` is a stable reference out of DENSITY_GRID, so it is
+        // safe in the dependency arrays below.
+        //
+        // Why a fixed rowHeight matters in the roomier modes: with
+        // rowHeight={null} Inovua measures each row's content, which is
         // unreliable after auto-refresh on an idle tab (background-throttled
-        // rAF/timers). A fixed height in tablet-mode bypasses measurement
-        // entirely and prevents action buttons from being clipped.
-        const [isTabletMode, setIsTabletMode] = useState(() =>
-            typeof document !== 'undefined' &&
-            document.body.classList.contains('tablet-mode')
-        );
-        useEffect(() => {
-            if (typeof document === 'undefined') {
-                return undefined;
-            }
-            const sync = () =>
-                setIsTabletMode(
-                    document.body.classList.contains('tablet-mode')
-                );
-            sync();
-            const observer = new MutationObserver(sync);
-            observer.observe(document.body, {
-                attributes: true,
-                attributeFilter: ['class'],
-            });
-            return () => observer.disconnect();
-        }, []);
+        // rAF/timers). A fixed height bypasses measurement entirely and
+        // prevents action buttons from being clipped.
+        const { grid } = useDensity();
 
         // Effect to handle autoRefresh setting
         useEffect(() => {
@@ -3613,14 +3602,11 @@ const DataGrid = forwardRef(
                             .filter((entry) => !isRowActionConfig(entry))
                     );
 
-                    // Width to fit N action icons: tablet-mode icons have a larger
-                    // tap target/margin (~44px) than the default (~34px), plus cell
+                    // Width to fit N action icons: roomier densities give icons a
+                    // larger tap target/margin than the default, plus cell
                     // padding. Used by both action columns and the trailing column.
                     const actionColumnWidthFor = (count) =>
-                        Math.max(
-                            100,
-                            count * (isTabletMode ? 44 : 34) + 16
-                        );
+                        Math.max(100, count * grid.actionColUnit + 16);
 
                     const renderColumn = (column) => {
                         let childValue;
@@ -3652,7 +3638,7 @@ 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 ?? 80,
+                            minWidth: column.minWidth ?? grid.columnMinWidth,
                             maxWidth: column.maxWidth ?? undefined,
                             textAlign: column.textAlign ?? undefined,
                             textVerticalAlign:
@@ -3822,9 +3808,7 @@ const DataGrid = forwardRef(
                                 // what the icons themselves need — tap targets
                                 // stay intact in tablet mode.
                                 const iconsNeed =
-                                    actionCount *
-                                        (isTabletMode ? 44 : 34) +
-                                    16;
+                                    actionCount * grid.actionColUnit + 16;
                                 const width =
                                     column.maxWidth != null
                                         ? Math.max(
@@ -4757,7 +4741,7 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource, memoizedSettings, isTabletMode]);
+        }, [columns, filterDataSource, memoizedSettings, grid]);
 
         // Force re-render when filterDataSource updates to ensure dropdown filters get their data
         const [renderKey, setRenderKey] = useState(0);
@@ -4886,13 +4870,16 @@ const DataGrid = forwardRef(
             } else if (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) / 32);
+                    Math.floor((height - 100) / grid.rowUnit);
 
                 const rowCount = calculateRows(minHeight);
                 setLimit(rowCount);
             }
-        }, [dataCount, gridHeight, window.innerHeight, userProfile?.rows_per_page, userProfile?.settings?.rows_per_page]);
+        }, [dataCount, gridHeight, window.innerHeight, grid, userProfile?.rows_per_page, userProfile?.settings?.rows_per_page]);
 
         useEffect(() => {
             const debouncedHandleResize = debounce(() => {
@@ -5578,7 +5565,7 @@ const DataGrid = forwardRef(
                             }
                             headerProps={headerProps}
                             idProperty="id"
-                            minRowHeight={isTabletMode ? 52 : 32}
+                            minRowHeight={grid.minRowHeight}
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}
@@ -5590,7 +5577,12 @@ const DataGrid = forwardRef(
                             renderRowContextMenu={renderRowContextMenu}
                             renderColumnContextMenu={renderColumnContextMenu}
                             rowClassName={rowClassName}
-                            rowHeight={isTabletMode ? 52 : null}
+                            // null lets the grid measure each row; a number
+                            // fixes the height, which the roomier densities
+                            // need — measurement is unreliable in a
+                            // background-throttled tab and clips action
+                            // buttons. See the density table in useDensity.
+                            rowHeight={grid.rowHeight}
                             rowStyle={getRowStyle}
                             selected={selected}
                             showZebraRows={true}
@@ -5616,15 +5608,36 @@ const DataGrid = forwardRef(
                                     ? 'InovuaReactDataGrid--grouped datagrid-with-grouping datagrid-fixed-group-headers'
                                     : 'datagrid-without-grouping'
                             }
-                            checkboxColumnProps={{
-                                width: 60,
-                                minWidth: 60,
-                                maxWidth: 60,
+                            // The real prop is `checkboxColumn` (bool | column
+                            // object) — {...tableSetting} spreads the view's
+                            // `checkboxColumn: true` and this object, placed
+                            // after the spread, replaces it. It previously sat
+                            // on a prop named `checkboxColumnProps`, which no
+                            // version of the datagrid has ever read: the grid
+                            // fell back to its internal 40px default column and
+                            // the custom select-all header below never
+                            // rendered.
+                            checkboxColumn={
+                                tableSetting?.checkboxColumn
+                                    ? {
+                                // The ?? 60 is a backstop, not a second
+                                // source of truth: if the density table ever
+                                // fails to supply a width (a stale-HMR module
+                                // mix did exactly that once), the grid would
+                                // otherwise fall back to its internal 40px
+                                // default and clip the checkbox.
+                                width: grid.checkboxColWidth ?? 60,
+                                minWidth: grid.checkboxColWidth ?? 60,
+                                maxWidth: grid.checkboxColWidth ?? 60,
                                 resizable: false,
                                 sortable: false,
                                 headerAlign: 'center',
                                 textAlign: 'center',
-                                renderHeader: () => {
+                                // `header`, not `renderHeader`: the column
+                                // merge is {...default, ...this}, and the
+                                // default supplies its select-all through
+                                // `header` — this key must shadow that one.
+                                header: () => {
                                     // Custom header checkbox that works with grouped data
                                     const allRowsSelected =
                                         dataRef.current &&
@@ -5649,7 +5662,12 @@ const DataGrid = forwardRef(
                                     return (
                                         <input
                                             type="checkbox"
-                                            checked={allRowsSelected}
+                                            // Boolean() — the && chain yields
+                                            // undefined before data arrives,
+                                            // which React reads as
+                                            // "uncontrolled" and then warns
+                                            // when it flips to controlled.
+                                            checked={Boolean(allRowsSelected)}
                                             ref={(checkbox) => {
                                                 if (checkbox) {
                                                     checkbox.indeterminate =
@@ -5695,8 +5713,11 @@ const DataGrid = forwardRef(
                                                 }
                                             }}
                                             style={{
-                                                width: '20px',
-                                                height: '20px',
+                                                // rem so it rides the density
+                                                // root: 20px default, 22.5px
+                                                // in large.
+                                                width: '1.25rem',
+                                                height: '1.25rem',
                                                 cursor: 'pointer',
                                                 accentColor:
                                                     'var(--primary-color, #3b82f6)',
@@ -5704,7 +5725,9 @@ const DataGrid = forwardRef(
                                         />
                                     );
                                 },
-                            }}
+                            }
+                                    : undefined
+                            }
                             checkboxOnlyRowSelect={true}
                         />
                     ) : null}

package/src/components/auth/Login.jsx

@@ -146,12 +146,12 @@ const Login = ({
                             if (result.previous && result.previous !== '') {
                                 window.location.href = result.previous;
                             } else {
+                                // GenericAuth owns the transition from here:
+                                // its curtain drops over this screen and its
+                                // profile check performs the one navigation
+                                // to '/'. Navigating here as well produced a
+                                // double route change and a visible flicker.
                                 setSystemAuth(true);
-                                // Move now, with the profile the server just
-                                // returned — waiting for the background
-                                // re-check to navigate leaves the login form
-                                // on screen for a beat after success.
-                                navigate('/', { replace: true });
                             }
                         }
                     } else {

package/src/components/generic/GenericAuth.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useInsertionEffect } from 'react';
 import {
     useNavigate,
     useLocation,
@@ -26,7 +26,7 @@ import ClientOTPVerify from '../auth/ClientOTPVerify';
 // blank white page between the sign-in redirect and the first authenticated
 // paint. Self-contained: SMIL animation, no stylesheet dependency, and the
 // consuming app's design tokens with neutral fallbacks.
-const AuthLoading = () => (
+const AuthLoading = ({ label }) => (
     <div
         role="status"
         aria-label="Loading"
@@ -34,9 +34,13 @@ const AuthLoading = () => (
             position: 'fixed',
             inset: 0,
             display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
             alignItems: 'center',
             justifyContent: 'center',
             background: 'var(--bg-color, #f4f4f5)',
+            // Above every app surface — this is a curtain, not a page.
+            zIndex: 2000,
         }}
     >
         <svg width="42" height="42" viewBox="0 0 42 42" fill="none">
@@ -63,13 +67,27 @@ const AuthLoading = () => (
                 />
             </path>
         </svg>
+        {label ? (
+            <p
+                style={{
+                    margin: 0,
+                    fontFamily: 'var(--font-family, inherit)',
+                    fontSize: 'var(--font-size-md, 0.9375rem)',
+                    color: 'var(--paragraph-color, #52525b)',
+                }}
+            >
+                {label}
+            </p>
+        ) : null}
     </div>
 );
 
 const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     const location = useLocation();
 
-    return loading ? <AuthLoading /> : !user || !user.id ? (
+    // The full-screen curtain in GenericAuth covers the loading state; this
+    // just refrains from redirecting until the check settles.
+    return loading ? null : !user || !user.id ? (
         <Navigate
             to={redirectPath}
             replace
@@ -110,6 +128,7 @@ const GenericAuth = ({
     enforce2FA = false, // Default to not enforcing 2FA
     clientPortalConfig = null, // Configuration for client portal with component and URLs
     config = {}, // Configuration object for auth features
+    density = 'default', // 'default' | 'large' — app-wide display density
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -120,15 +139,37 @@ const GenericAuth = ({
     const [isAuthenticated, setIsAuthenticated] = useState(false);
     const [isClientAuthenticated, setIsClientAuthenticated] = useState(false);
 
+    // Mirror the `density` prop onto <html> as data-density, which is what
+    // styles/density.css keys off. 'default' writes nothing, so an app that
+    // never passes the prop leaves no attribute and matches no rule.
+    // useInsertionEffect fires before child useLayoutEffects, so the root
+    // font-size is in place before anything downstream (the DataGrid most of
+    // all) measures itself against it.
+    useInsertionEffect(() => {
+        if (
+            typeof document === 'undefined' ||
+            !density ||
+            density === 'default'
+        ) {
+            return undefined;
+        }
+        document.documentElement.setAttribute('data-density', density);
+        return () => {
+            document.documentElement.removeAttribute('data-density');
+        };
+    }, [density]);
+
     const updateAuthStatus = async () => {
-        // Guards must not act while the FIRST profile check is in flight:
-        // evaluated against empty state they bounced dashboard → /login →
-        // dashboard after sign-in. But only block when there is no usable
-        // profile — raising loading over an already-authenticated tree swaps
-        // the whole page for a spinner on every background re-check, which
-        // is its own flicker. With a profile in hand the re-check is
-        // invisible.
-        if (!userProfile.id) {
+        // The loading curtain covers two moments and stays down for neither
+        // more nor less: the first profile check of a page load (no usable
+        // profile yet), and the sign-in transition (still on the login
+        // screen) — the user asked for "everything behind a please-wait
+        // screen, then the dashboard", not a settled page interrupted by a
+        // background re-check.
+        if (
+            !userProfile.id ||
+            window.location.pathname.split('/')[1] === 'login'
+        ) {
             setIsLoading(true);
         }
 
@@ -232,6 +273,10 @@ const GenericAuth = ({
 
     return (
         <>
+            {/* One curtain over everything while auth settles — the login
+                screen included, so sign-in reads: submit → please wait →
+                dashboard, with no intermediate paint. */}
+            {isLoading ? <AuthLoading label="Please wait…" /> : null}
             <Routes>
                 <Route
                     path="login"
@@ -366,6 +411,7 @@ const GenericAuth = ({
                                 themeType={themeType}
                                 userProfile={userProfile}
                                 enforce2FA={enforce2FA}
+                                density={density}
                             />
                         }
                     />

package/src/components/generic/GenericIndex.jsx

@@ -16,6 +16,7 @@ import TableFilter from '../TableFilter';
 import GenericGrid from './GenericGrid';
 import GenericReportForm from './GenericReportForm';
 import StandardModal from './StandardModal';
+import { useDensity, useAvailableHeight } from '../utils/useDensity';
 
 import styles from '../styles/GenericIndex.module.scss';
 
@@ -302,6 +303,23 @@ function GenericIndex({
     const [customActionConfig, setCustomActionConfig] = useState(null);
     const { windowHeight, windowWidth } = useWindowDimensions();
 
+    // Grid height. The long-standing behaviour is a flat 80% of the viewport,
+    // which leaves a dead band below the table; at large density the screen is
+    // the point, so measure what is actually left below the grid instead.
+    // `useAvailableHeight` returns null until it can measure (and always when
+    // disabled), so the 80% rule stays the fallback and remains exactly what
+    // every non-density app gets.
+    const { isLarge } = useDensity();
+    const gridWrapperRef = useRef(null);
+    const measuredGridHeight = useAvailableHeight(gridWrapperRef, {
+        enabled: isLarge,
+        recomputeKey: windowHeight,
+    });
+    const gridHeight =
+        isLarge && measuredGridHeight != null
+            ? measuredGridHeight
+            : windowHeight * 0.8;
+
     // Toggle a body-level "tablet-mode" class when this view opts in via
     // setting.tabletMode. Lets consumer projects style the whole UI
     // (including app-level chrome) for tablet use without touching this lib.
@@ -663,12 +681,12 @@ function GenericIndex({
                 style: config.style || userProfile?.settings?.style || {},
             };
 
-            return (
+            const table = (
                 <Table
                     {...configWithStyle}
                     ref={gridRef}
                     hoverColor={configWithStyle.style?.hoverColor}
-                    gridHeight={windowHeight * 0.8}
+                    gridHeight={gridHeight}
                     setConfig={setConfig}
                     setTableData={setTableData}
                     setTotal={setTotal}
@@ -677,6 +695,19 @@ function GenericIndex({
                     userProfile={userProfile}
                 />
             );
+
+            // The measuring wrapper only exists in large density — every other
+            // app renders the exact tree it always has.
+            return isLarge ? (
+                <div
+                    ref={gridWrapperRef}
+                    style={{ flex: '1 1 auto', minHeight: 0 }}
+                >
+                    {table}
+                </div>
+            ) : (
+                table
+            );
         };
 
         if (subnav) {
@@ -693,7 +724,8 @@ function GenericIndex({
     }, [
         config,
         subnav,
-        windowHeight,
+        gridHeight,
+        isLarge,
         userProfile,
         setConfig,
         setTotal,

package/src/components/generic/GenericMain.jsx

@@ -1,3 +1,7 @@
+// Density first: its `:root[data-density='large']` block is inert until the
+// app opts in via GenericAuth's `density` prop, but the root font-size it
+// sets is what every rem in the stylesheets below resolves against.
+import '../styles/density.css';
 import '../styles/global.css';
 
 import React, { useState, useEffect, useCallback } from 'react';
@@ -27,6 +31,10 @@ const GenericMain = ({
     themeType,
     userProfile,
     enforce2FA = false, // Default to not enforcing 2FA
+    // Accepted so density is part of the main-layout interface too; the
+    // attribute that actually drives the CSS is written by GenericAuth, and
+    // nothing in here reads the value yet.
+    density = 'default',
 }) => {
     const navigate = useNavigate();
     const location = useLocation();

package/src/components/styles/DataGrid.module.scss

@@ -690,7 +690,7 @@
 }
 
 .searchInput {
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     border-radius: 0;
     border: none;
     padding: 0 10px 0 50px;
@@ -722,7 +722,7 @@
     display: inline-flex;
     align-items: center;
     padding: 0 15px;
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     background-color: #f9fafb;
     border: 1px solid #d1d5db;
     margin-bottom: 0;
@@ -734,7 +734,7 @@
     display: inline-flex;
     align-items: center;
     padding: 0 15px;
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     background-color: #f9fafb;
     border: 1px solid #d1d5db;
     border-radius: var(--br, 4px);
@@ -771,11 +771,11 @@
 .actionButtons {
     display: flex;
     align-items: center;
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     gap: 0;
 
     > .btn {
-        height: 38px;
+        height: var(--grid-toolbar-height, 38px);
         border-radius: 0;
         display: flex;
         align-items: center;
@@ -799,11 +799,11 @@
 .actionButtonsStandalone {
     display: flex;
     align-items: center;
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     gap: 0;
 
     > .btn {
-        height: 38px;
+        height: var(--grid-toolbar-height, 38px);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -884,7 +884,7 @@
         justify-content: flex-start;
         margin-bottom: 0;
         width: 100%;
-        height: 38px;
+        height: var(--grid-toolbar-height, 38px);
         position: relative;
         border: 1px solid #d1d5db;
         border-bottom: none;
@@ -906,7 +906,7 @@
         }
 
         input {
-            height: 38px;
+            height: var(--grid-toolbar-height, 38px);
             border-radius: 0;
             border: none;
             padding: 0 10px 0 50px;
@@ -930,14 +930,14 @@
 
         .filterAction--alt {
             position: relative;
-            height: 38px;
+            height: var(--grid-toolbar-height, 38px);
             z-index: 5;
             display: flex;
             gap: 0;
             /* margin-left is now controlled in the component */
 
             > .btn {
-                height: 38px;
+                height: var(--grid-toolbar-height, 38px);
                 border-radius: 0;
                 display: flex;
                 align-items: center;

package/src/components/styles/Field.module.scss

@@ -960,7 +960,7 @@ input[type='file']:hover {
     border-radius: var(--br, 6px);
     font-size: 0.8rem;
     transition: all 0.2s ease;
-    min-height: 36px;
+    min-height: var(--field-pocket-size, 36px);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
     position: relative;
     overflow: hidden;
@@ -997,8 +997,8 @@ input[type='file']:hover {
     padding: 0.35em;
     border-radius: 4px;
     transition: all 0.2s ease;
-    min-width: 28px;
-    height: 28px;
+    min-width: var(--field-pocket-size-sm, 28px);
+    height: var(--field-pocket-size-sm, 28px);
     flex-shrink: 0;
 }
 
@@ -1151,7 +1151,7 @@ input[type='file']:hover {
     transition: all 0.2s ease;
     margin-bottom: 0.25em;
     border: 1px solid transparent;
-    min-height: 36px;
+    min-height: var(--field-pocket-size, 36px);
 }
 
 .file-list-item-image {
@@ -1370,7 +1370,7 @@ input[type='file']:hover {
     z-index: 999; /* Match react-select z-index */
     max-height: 200px;
     overflow-y: auto;
-    font-size: 14px; /* Match react-select font size */
+    font-size: var(--field-suggestion-font-size, 14px); /* Match react-select font size */
 }
 
 .emailSuggestion {

package/src/components/styles/GenericDetail.module.scss

@@ -260,7 +260,7 @@
        close under its heading and the whole block is separated from the
        content below rather than floating between the two. */
     margin: calc(-1 * var(--spacing-sm, 0.5rem)) 0 var(--spacing-lg, 1.5rem);
-    max-width: 70ch;
+    max-width: var(--detail-prose-width, 70ch);
     font-size: var(--font-size-sm, 0.8125rem);
     line-height: 1.55;
     color: var(--muted-color, #6e7276);
@@ -765,6 +765,9 @@
         display: flex;
         align-items: center;
         min-width: 0;
+        /* Flex drops whitespace-only text nodes — same fix as the index
+           header: one word-space back between title fragments. */
+        column-gap: 0.3em;
     }
 
     /* The parent crumb. Same size and baseline as the entity it leads to, so
@@ -877,7 +880,7 @@
     background: #f9f9f9; /* Subtle background to match the theme */
     border: 1px solid #ddd; /* Light border for structure */
     border-radius: 6px; /* Slight rounding for a modern feel */
-    max-width: 600px; /* Constrain width for a balanced layout */
+    max-width: var(--detail-panel-max-width, 600px); /* Constrain width for a balanced layout */
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Gentle shadow for depth */
     font-style: italic; /* Optional: Add a subtle font style */
 }
@@ -1078,7 +1081,7 @@
 
 .modalWide {
     width: 90vw;
-    max-width: 1400px;
+    max-width: var(--detail-max-width, 1400px);
     min-width: 600px;
 }