@visns-studio/visns-components 5.26.0 → 5.26.2

package/package.json

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

package/src/components/DataGrid.jsx

@@ -242,6 +242,7 @@ const DataGrid = forwardRef(
             form,
             gridHeight,
             hoverColor,
+            legend,
             mapbox,
             pageData,
             pageSetting,
@@ -473,6 +474,36 @@ const DataGrid = forwardRef(
                         setColumnsMetadata(res.metadata);
                     }
 
+                    // Opt-in (ajaxSetting.suppressRepeated {key, columns}):
+                    // when consecutive rows share the same non-empty `key`
+                    // value, blank the listed fields on every row after the
+                    // first, so the first row of the run reads as the group
+                    // row and the rest show only what differs. Rows must
+                    // already be sorted so related rows are adjacent.
+                    if (
+                        ajaxSetting?.suppressRepeated?.key &&
+                        Array.isArray(ajaxSetting.suppressRepeated.columns) &&
+                        Array.isArray(res.data)
+                    ) {
+                        const { key, columns: repeatedFields } =
+                            ajaxSetting.suppressRepeated;
+
+                        for (let i = 1; i < res.data.length; i++) {
+                            const current = res.data[i]?.[key];
+                            const previous = res.data[i - 1]?.[key];
+
+                            if (
+                                current != null &&
+                                current !== '' &&
+                                current === previous
+                            ) {
+                                repeatedFields.forEach((field) => {
+                                    res.data[i][field] = null;
+                                });
+                            }
+                        }
+                    }
+
                     // Group rows together while preserving the backend's sortBy order:
                     // first appearance of each group key determines group order, so when
                     // the backend sorts by e.g. pickling_completed_at desc, groups appear
@@ -524,6 +555,103 @@ const DataGrid = forwardRef(
                     }
                     dataRef.current = res.data;
 
+                    // Opt-in grouped display (ajaxSetting.treeGroupBy {key,
+                    // column, parentFields, countLabel}): consecutive rows
+                    // sharing a non-empty `key` value get a synthetic summary
+                    // parent row inserted above them, always visible — no
+                    // expand/collapse. `parentFields` are lifted from the
+                    // first row onto the parent and blanked on the children,
+                    // so shared details display once; children get an "↳"
+                    // prefix in the display column. Single rows stay plain.
+                    // Runs after dataRef is set so selection/group helpers
+                    // keep operating on the real rows only.
+                    if (
+                        ajaxSetting?.treeGroupBy?.key &&
+                        Array.isArray(res.data)
+                    ) {
+                        const {
+                            key: treeKey,
+                            column: treeDisplayColumn,
+                            parentFields = [],
+                            countLabel,
+                        } = ajaxSetting.treeGroupBy;
+                        const rows = res.data;
+                        const grouped = [];
+                        let i = 0;
+
+                        while (i < rows.length) {
+                            const row = rows[i];
+                            const value = row?.[treeKey];
+                            let j = i + 1;
+
+                            if (value != null && value !== '') {
+                                while (
+                                    j < rows.length &&
+                                    rows[j]?.[treeKey] === value
+                                ) {
+                                    j++;
+                                }
+                            }
+
+                            if (j - i > 1) {
+                                const children = rows.slice(i, j);
+                                const parent = {
+                                    __treeParent: true,
+                                    id: `tree-group-${value}`,
+                                    [treeKey]: value,
+                                };
+
+                                // Show the group value in the display column
+                                if (treeDisplayColumn) {
+                                    parent[treeDisplayColumn] = value;
+                                }
+
+                                // Lift shared fields onto the parent, blank
+                                // them on every child
+                                parentFields.forEach((field) => {
+                                    parent[field] = children[0]?.[field];
+                                    children.forEach((child) => {
+                                        child[field] = null;
+                                    });
+                                });
+
+                                // Mark children for styling (getRowStyle) and
+                                // prefix their display value so nesting reads
+                                children.forEach((child) => {
+                                    child.__treeChild = true;
+
+                                    if (
+                                        treeDisplayColumn &&
+                                        child[treeDisplayColumn] != null &&
+                                        String(
+                                            child[treeDisplayColumn]
+                                        ).indexOf('↳') !== 0
+                                    ) {
+                                        child[treeDisplayColumn] =
+                                            '↳ ' + child[treeDisplayColumn];
+                                    }
+                                });
+
+                                // Optional member count, e.g. "3 Headers"
+                                if (countLabel?.field && countLabel?.template) {
+                                    parent[countLabel.field] =
+                                        countLabel.template.replace(
+                                            '{count}',
+                                            String(children.length)
+                                        );
+                                }
+
+                                grouped.push(parent, ...children);
+                            } else {
+                                grouped.push(row);
+                            }
+
+                            i = j;
+                        }
+
+                        res.data = grouped;
+                    }
+
                     // Force grid to recalculate row heights after data changes
                     // This helps with multi-line content timing without interfering with core mechanisms
                     setTimeout(() => {
@@ -687,6 +815,19 @@ const DataGrid = forwardRef(
         const getRowStyle = useCallback(
             (rowProps) => {
                 const { data } = rowProps;
+                const style = {};
+
+                // Tree mode: mark the summary parent and its nested
+                // children with a left accent bar so the block reads as
+                // one unit and children are visibly subordinate
+                if (ajaxSetting?.treeGroupBy?.key) {
+                    if (data?.__treeParent) {
+                        style.borderLeft = '4px solid #2e7dbd';
+                        style.fontWeight = 600;
+                    } else if (data?.__treeChild) {
+                        style.borderLeft = '4px solid #93c5fd';
+                    }
+                }
 
                 if (ajaxSetting?.rowColours?.length > 0) {
                     const colorConfig = ajaxSetting.rowColours.find(
@@ -694,13 +835,11 @@ const DataGrid = forwardRef(
                     );
 
                     if (colorConfig) {
-                        return {
-                            backgroundColor: colorConfig.colour,
-                        };
+                        style.backgroundColor = colorConfig.colour;
                     }
                 }
 
-                return null;
+                return Object.keys(style).length > 0 ? style : null;
             },
             [ajaxSetting]
         );
@@ -821,12 +960,14 @@ const DataGrid = forwardRef(
                     const cleanSelection = {};
                     Object.keys(param.selected).forEach((key) => {
                         const item = param.selected[key];
-                        // Only keep items that have valid IDs and are not group objects
+                        // Only keep items that have valid IDs and are not
+                        // group objects or synthetic tree parent rows
                         if (
                             key !== 'undefined' &&
                             key !== 'null' &&
                             item &&
                             !item.__group &&
+                            !item.__treeParent &&
                             item.id !== undefined
                         ) {
                             cleanSelection[key] = item;
@@ -3373,7 +3514,43 @@ const DataGrid = forwardRef(
                         }
                     };
 
-                    const newColumns = columns.map(renderColumn);
+                    // Interactive cells (inline dropdowns, timers, stage
+                    // toggles) must not render on synthetic tree parent
+                    // rows — they'd write against the fake id. Display-only
+                    // renders (text, relation, gallery, stageCounter) are
+                    // safe and show the lifted shared values.
+                    const TREE_PARENT_BLOCKED_TYPES = [
+                        'dropdown',
+                        'multiDropdown',
+                        'timer',
+                        'stage',
+                        'input',
+                    ];
+                    const guardTreeParentRender = (gridColumn, columnDef) => {
+                        if (
+                            !ajaxSetting?.treeGroupBy?.key ||
+                            !gridColumn?.render ||
+                            !TREE_PARENT_BLOCKED_TYPES.includes(
+                                columnDef?.type
+                            )
+                        ) {
+                            return gridColumn;
+                        }
+
+                        const originalRender = gridColumn.render;
+
+                        return {
+                            ...gridColumn,
+                            render: (arg) =>
+                                arg?.data?.__treeParent
+                                    ? null
+                                    : originalRender(arg),
+                        };
+                    };
+
+                    const newColumns = columns.map((column) =>
+                        guardTreeParentRender(renderColumn(column), column)
+                    );
 
                     // Count settings that could render in the trailing Action
                     // column: role-permitted AND not claimed by an 'action' column.
@@ -3417,6 +3594,12 @@ const DataGrid = forwardRef(
                                     ? style.text_vertical_align
                                     : 'center',
                             render: ({ data }) => {
+                                // Synthetic tree parent rows are summaries —
+                                // no row actions
+                                if (data?.__treeParent) {
+                                    return null;
+                                }
+
                                 return (
                                     <div className={styles.tdactions}>
                                         {memoizedSettings
@@ -3774,6 +3957,49 @@ const DataGrid = forwardRef(
                     </div>
                 )}
 
+                {/* Opt-in colour legend (config key `legend`: array of
+                    {colour, label}); entries without a colour render as
+                    plain lead-in text */}
+                {Array.isArray(legend) && legend.length > 0 && (
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            alignItems: 'center',
+                            gap: '14px',
+                            padding: '6px 4px 8px',
+                            fontSize: '0.8rem',
+                            color: '#555',
+                        }}
+                    >
+                        {legend.map((item, index) => (
+                            <span
+                                key={index}
+                                style={{
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                }}
+                            >
+                                {(item.colour || item.color) && (
+                                    <span
+                                        style={{
+                                            width: '14px',
+                                            height: '14px',
+                                            borderRadius: '3px',
+                                            backgroundColor:
+                                                item.colour || item.color,
+                                            display: 'inline-block',
+                                            flexShrink: 0,
+                                        }}
+                                    />
+                                )}
+                                {item.label}
+                            </span>
+                        ))}
+                    </div>
+                )}
+
                 {/* DataGrid container with its own border */}
                 <div className={styles.dataGridContainer}>
 

package/src/components/Form.jsx

@@ -9,7 +9,7 @@ import moment from 'moment';
 import parse from 'html-react-parser';
 import _ from 'lodash';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { X } from 'lucide-react';
+import { Info, X } from 'lucide-react';
 import imageCompression from 'browser-image-compression';
 import { confirmDialog } from './utils/ConfirmDialog';
 
@@ -2686,11 +2686,11 @@ function Form({
                         <div
                             className={`${styles.formItem} ${styles.fwItem}`}
                             style={{
-                                width: formSettings?.save?.return?.width
-                                    ? `min(${parseInt(
-                                          formSettings.save.return.width
-                                      )}px, 100vw - 40px)`
-                                    : '100%',
+                                // Never exceed the parent panel (sizing
+                                // against 100vw bled past narrower panels);
+                                // the grid keeps its configured px width
+                                // inside and scrolls horizontally here
+                                width: '100%',
                                 maxWidth: formSettings?.save?.return?.width
                                     ? `${parseInt(
                                           formSettings.save.return.width
@@ -3376,82 +3376,128 @@ function Form({
                                             </div>
                                         );
                                     } else if (formType === 'update') {
+                                        const saveAnotherDisableWhen =
+                                            formSettings.update?.saveAnother
+                                                ?.disableWhen;
+                                        const saveAnotherDisabled =
+                                            saveAnotherDisableWhen
+                                                ? evaluateDisableWhen(
+                                                      saveAnotherDisableWhen,
+                                                      formData
+                                                  )
+                                                : false;
+
                                         return (
-                                            <div
-                                                className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
-                                            >
-                                                <button
-                                                    className={styles.btn}
-                                                    onClick={handleSubmit}
-                                                    data-type="save"
+                                            <>
+                                                <div
+                                                    className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
                                                 >
-                                                    Save & Close
-                                                </button>
-                                                {formSettings.update?.hasOwnProperty(
-                                                    'saveAnother'
-                                                ) &&
-                                                    (() => {
-                                                        const disableWhen =
-                                                            formSettings.update
-                                                                .saveAnother
-                                                                ?.disableWhen;
-                                                        const isDisabled =
-                                                            disableWhen
-                                                                ? evaluateDisableWhen(
-                                                                      disableWhen,
-                                                                      formData
-                                                                  )
-                                                                : false;
-
-                                                        return (
-                                                            <button
-                                                                className={
-                                                                    styles.btn
-                                                                }
-                                                                onClick={
-                                                                    handleSubmit
-                                                                }
-                                                                data-type="saveAnother"
-                                                                disabled={
-                                                                    isDisabled
-                                                                }
-                                                                title={
-                                                                    isDisabled
-                                                                        ? disableWhen?.message ||
-                                                                          ''
-                                                                        : undefined
-                                                                }
-                                                                style={
-                                                                    isDisabled
-                                                                        ? {
-                                                                              opacity: 0.5,
-                                                                              cursor: 'not-allowed',
-                                                                          }
-                                                                        : undefined
-                                                                }
-                                                            >
-                                                                {formSettings
-                                                                    .update
-                                                                    .saveAnother
-                                                                    ?.label ||
-                                                                    'Save & Create Another'}
-                                                            </button>
-                                                        );
-                                                    })()}
-                                                {formSettings.update?.hasOwnProperty(
-                                                    'saveExit'
-                                                ) && (
                                                     <button
                                                         className={styles.btn}
                                                         onClick={handleSubmit}
-                                                        data-type="saveExit"
+                                                        data-type="save"
                                                     >
-                                                        {formSettings.update
-                                                            .saveExit?.label ||
-                                                            'Save & Exit'}
+                                                        Save & Close
                                                     </button>
+                                                    {formSettings.update?.hasOwnProperty(
+                                                        'saveAnother'
+                                                    ) && (
+                                                        <button
+                                                            className={
+                                                                styles.btn
+                                                            }
+                                                            onClick={
+                                                                handleSubmit
+                                                            }
+                                                            data-type="saveAnother"
+                                                            disabled={
+                                                                saveAnotherDisabled
+                                                            }
+                                                            style={
+                                                                saveAnotherDisabled
+                                                                    ? {
+                                                                          opacity: 0.5,
+                                                                          cursor: 'not-allowed',
+                                                                      }
+                                                                    : undefined
+                                                            }
+                                                        >
+                                                            {formSettings
+                                                                .update
+                                                                .saveAnother
+                                                                ?.label ||
+                                                                'Save & Create Another'}
+                                                        </button>
+                                                    )}
+                                                    {formSettings.update?.hasOwnProperty(
+                                                        'saveExit'
+                                                    ) && (
+                                                        <button
+                                                            className={
+                                                                styles.btn
+                                                            }
+                                                            onClick={
+                                                                handleSubmit
+                                                            }
+                                                            data-type="saveExit"
+                                                        >
+                                                            {formSettings
+                                                                .update
+                                                                .saveExit
+                                                                ?.label ||
+                                                                'Save & Exit'}
+                                                        </button>
+                                                    )}
+                                                </div>
+                                                {saveAnotherDisabled && (
+                                                    /* Always-visible note (hover
+                                                       tooltips don't exist on
+                                                       tablets) explaining why the
+                                                       button is disabled */
+                                                    <div
+                                                        className={`${styles.formItem} ${styles.fwItem}`}
+                                                        style={{
+                                                            display: 'flex',
+                                                            justifyContent:
+                                                                'flex-end',
+                                                        }}
+                                                    >
+                                                        <div
+                                                            style={{
+                                                                display: 'flex',
+                                                                alignItems:
+                                                                    'center',
+                                                                gap: '8px',
+                                                                fontSize:
+                                                                    '0.85rem',
+                                                                color: '#1e40af',
+                                                                backgroundColor:
+                                                                    '#eff6ff',
+                                                                border: '1px solid #bfdbfe',
+                                                                borderRadius:
+                                                                    '6px',
+                                                                padding:
+                                                                    '8px 12px',
+                                                                marginTop:
+                                                                    '8px',
+                                                                maxWidth:
+                                                                    '100%',
+                                                            }}
+                                                        >
+                                                            <Info
+                                                                size={16}
+                                                                style={{
+                                                                    flexShrink: 0,
+                                                                }}
+                                                            />
+                                                            <span>
+                                                                {saveAnotherDisableWhen?.message ||
+                                                                    'This action is currently unavailable.'}
+                                                            </span>
+                                                        </div>
+                                                    </div>
                                                 )}
-                                            </div>
+                                            </>
                                         );
                                     } else {
                                         return (

package/src/components/cells/CellWithTooltip.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Tooltip } from 'react-tooltip';
 import moment from 'moment';
 import numeral from 'numeral';
@@ -138,9 +139,14 @@ const CellWithTooltip = ({
             width: '100%',
         };
 
-    // Render tooltip with improved positioning
-    const tooltipPortal = shouldShowTooltip && (
-        <Tooltip
+    // Render the tooltip into document.body: grid rows are transformed
+    // (virtualization), which traps a fixed-position tooltip inside the
+    // row's stacking context — the next row paints over it no matter how
+    // high its z-index. Portaling out of the row escapes that entirely.
+    const tooltipPortal =
+        shouldShowTooltip &&
+        createPortal(
+            <Tooltip
             id={tooltipId}
             style={{
                 backgroundColor: 'rgba(0, 0, 0, 0.9)',
@@ -162,10 +168,11 @@ const CellWithTooltip = ({
             noArrow={false}
             variant="dark"
             className="cell-tooltip"
-            positionStrategy="fixed" // Use fixed positioning strategy
-            fallbackPlacements={['bottom', 'right', 'left']} // Fallback positions if top doesn't fit
-        />
-    );
+                positionStrategy="fixed" // Use fixed positioning strategy
+                fallbackPlacements={['bottom', 'right', 'left']} // Fallback positions if top doesn't fit
+            />,
+            document.body
+        );
 
     return (
         <>

package/src/components/columns/ColumnRenderers.jsx

@@ -2498,6 +2498,13 @@ export const renderGalleryColumn = ({
                 !Array.isArray(imagesArray) ||
                 imagesArray.length === 0
             ) {
+                // Nested child rows have their shared fields lifted onto
+                // the summary parent — "No images" there would wrongly
+                // suggest the item has none, so stay blank
+                if (data?.__treeChild) {
+                    return null;
+                }
+
                 return (
                     <div
                         style={{
@@ -2639,8 +2646,15 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate, onUpda
         sortable: false,
         render: ({ data }) => {
             if (data && column.stageConfig && column.stageConfig.key) {
-                // Check if the data has the specified key and it's an array
-                const stageData = data[column.stageConfig.key];
+                // Check if the data has the specified key and it's an array;
+                // fallbackKey (opt-in) covers rows whose primary key field
+                // was lifted elsewhere (e.g. nested child rows showing their
+                // own progress while the parent shows the whole group's)
+                const stageData =
+                    data[column.stageConfig.key] ??
+                    (column.stageConfig.fallbackKey
+                        ? data[column.stageConfig.fallbackKey]
+                        : null);
 
                 if (stageData && Array.isArray(stageData)) {
                     const stageCount = stageData.length;

package/src/components/generic/GenericIndex.jsx

@@ -109,6 +109,8 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
             type: setting.type ? setting.type : 'table',
             // Make sure to include functions if they exist in the setting
             functions: setting.functions || {},
+            // Optional colour legend rendered above the grid
+            legend: setting.legend,
         };
 
         setConfig(newConfig);
@@ -222,6 +224,8 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
                         // Preserve functions from the tab config, falling back to the original config functions
                         functions:
                             activeTabConfig.functions || config.functions || {},
+                        // Tab-specific legend, falling back to the base one
+                        legend: activeTabConfig.legend ?? setting.legend,
                     };
 
                     setConfig(updatedConfig);
@@ -248,6 +252,7 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
                         type: setting.type ? setting.type : 'table',
                         // Preserve functions from the original config or setting
                         functions: config.functions || setting.functions || {},
+                        legend: setting.legend,
                     };
 
                     // Add the filter for the active child

package/src/components/styles/global-datagrid.css

@@ -70,6 +70,32 @@ div[role="tooltip"],
     align-items: flex-start !important; /* Align content to top */
 }
 
+/* Tablet mode uses a fixed row height (natural row measurement is
+   disabled there), so word-wrap cells must clamp to the row instead of
+   spilling their overflow into the row below. The cell itself must FILL
+   the row (height:auto would shrink it and paint its borders as a
+   floating box inside the row); the innermost wrapper gets a two-line
+   clamp — what fits a 52px row — for a clean ellipsis. */
+body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap,
+body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > *,
+body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap div,
+body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap span {
+    overflow: hidden !important;
+    max-height: 100% !important;
+}
+
+body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap {
+    height: 100% !important;
+    align-items: center !important;
+    padding: 6px 8px !important;
+}
+
+body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical !important;
+    -webkit-line-clamp: 2 !important;
+}
+
 /* Default cell behavior - no word wrap */
 .InovuaReactDataGrid__cell:not(.cell-word-wrap) {
     white-space: nowrap !important;