@visns-studio/visns-components 6.3.10 → 6.3.11

package/package.json

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

package/src/components/DataGrid.jsx

@@ -759,21 +759,23 @@ const DataGrid = forwardRef(
                                     }
                                 );
 
-                                // Mark children for styling (getRowStyle) and
-                                // prefix their display value so nesting reads
+                                // Mark children so the row and its display cell
+                                // can be styled as nested.
+                                //
+                                // The "↳" marker is NOT written into the value
+                                // here any more. Prepending it made the string
+                                // itself longer, so the member's text started
+                                // roughly a character and a half further right
+                                // than the same column's text on every other
+                                // row, and the indent had no fixed budget — it
+                                // was however wide the glyph plus a space
+                                // happened to set. It also left the row's own
+                                // data holding a decoration, which anything
+                                // reading that field downstream then had to
+                                // know about. It is drawn instead by
+                                // decorateTreeChildIndent, inside the cell.
                                 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"
@@ -979,16 +981,18 @@ const DataGrid = forwardRef(
                 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';
-                    }
+                // Tree mode: the parent's heavier weight. The left accent bar
+                // that used to be set here as `borderLeft` is now drawn by
+                // `.treeParentRow` / `.treeChildRow` — see rowClassName below
+                // and the notes in DataGrid.module.scss.
+                //
+                // A border belongs to the row's box, so a 4px one shifted the
+                // whole cell strip 4px right: every column edge on a tree row
+                // sat 4px off the same edge on an ordinary row and off the
+                // column header. The bar is now an inset overlay that occupies
+                // no space in the box model, so the columns line up exactly.
+                if (ajaxSetting?.treeGroupBy?.key && data?.__treeParent) {
+                    style.fontWeight = 600;
                 }
 
                 if (ajaxSetting?.rowColours?.length > 0) {
@@ -1066,6 +1070,28 @@ const DataGrid = forwardRef(
             [ajaxSetting]
         );
 
+        /**
+         * The tree row's accent bar, as a class rather than a border.
+         *
+         * Kept out of `rowStyles` (which is a project-facing config) because
+         * this is the library's own tree chrome, not something a view asks
+         * for.
+         */
+        const treeRowClassName = useCallback(
+            (data) => {
+                if (!ajaxSetting?.treeGroupBy?.key || !data) {
+                    return '';
+                }
+
+                if (data.__treeParent) {
+                    return styles.treeParentRow;
+                }
+
+                return data.__treeChild ? styles.treeChildRow : '';
+            },
+            [ajaxSetting]
+        );
+
         /**
          * The grid's own row class plus whatever `rowStyles` adds. Passed as a
          * function rather than the bare string the grid used to get: the grid
@@ -1074,10 +1100,14 @@ const DataGrid = forwardRef(
          */
         const rowClassName = useCallback(
             (rowProps) =>
-                ['vs-datagrid--row', getRowClassName(rowProps)]
+                [
+                    'vs-datagrid--row',
+                    treeRowClassName(rowProps?.data),
+                    getRowClassName(rowProps),
+                ]
                     .filter(Boolean)
                     .join(' '),
-            [getRowClassName]
+            [getRowClassName, treeRowClassName]
         );
 
         const handleDownload = async (d) => {
@@ -4171,6 +4201,68 @@ const DataGrid = forwardRef(
                         };
                     };
 
+                    /**
+                     * The nesting marker on a tree member's display cell.
+                     *
+                     * Drawn here rather than prepended to the value, so the
+                     * indent is a FIXED budget spent inside the cell's content
+                     * box instead of however much advance width the glyph and
+                     * a space happen to take. The marker is a flex item of a
+                     * known width and the value takes the rest with
+                     * `min-width: 0`, so a long value ellipsizes at the column
+                     * edge rather than running past it — the column's left and
+                     * right edges are then identical on ordinary, parent and
+                     * member rows.
+                     *
+                     * Applied UNDER decorateTreeParentActions, which delegates
+                     * to this for every non-parent row.
+                     */
+                    const decorateTreeChildIndent = (gridColumn, columnDef) => {
+                        const tree = ajaxSetting?.treeGroupBy;
+                        const columnId = Array.isArray(columnDef?.id)
+                            ? columnDef.id.join('-')
+                            : columnDef?.id;
+
+                        if (
+                            !tree?.key ||
+                            !tree.column ||
+                            tree.column !== columnId
+                        ) {
+                            return gridColumn;
+                        }
+
+                        const originalRender = gridColumn.render;
+
+                        return {
+                            ...gridColumn,
+                            render: (arg) => {
+                                const content = originalRender
+                                    ? originalRender(arg)
+                                    : arg?.value ?? null;
+
+                                if (!arg?.data?.__treeChild) {
+                                    return content;
+                                }
+
+                                return (
+                                    <span className={styles.treeChildCell}>
+                                        <span
+                                            className={styles.treeChildMarker}
+                                            aria-hidden="true"
+                                        >
+                                            ↳
+                                        </span>
+                                        <span
+                                            className={styles.treeChildValue}
+                                        >
+                                            {content}
+                                        </span>
+                                    </span>
+                                );
+                            },
+                        };
+                    };
+
                     /**
                      * The group's collapse control.
                      *
@@ -4449,11 +4541,18 @@ const DataGrid = forwardRef(
                         };
                     };
 
+                    // decorateTreeChildIndent sits INSIDE
+                    // decorateTreeParentActions: the latter draws parent rows
+                    // itself and delegates everything else downward, so the
+                    // member indent has to be the render it delegates to.
                     const newColumns = columns.map((column) =>
                         decorateColumnRowActions(
                             decorateTreeParentActions(
-                                guardTreeParentRender(
-                                    renderColumn(column),
+                                decorateTreeChildIndent(
+                                    guardTreeParentRender(
+                                        renderColumn(column),
+                                        column
+                                    ),
                                     column
                                 ),
                                 column

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

@@ -1579,3 +1579,96 @@
         );
     }
 }
+
+/* =========================================================================
+   treeGroupBy nesting: accent bar and member indent
+
+   Both of these used to be drawn in ways that took up space in the layout,
+   which is what pushed tree rows out of line with ordinary ones:
+
+     - the accent bar was `border-left: 4px` set on the ROW. A border is part
+       of the row's box, so the whole cell strip started 4px to the right and
+       every column edge on a tree row sat 4px off the same edge on an
+       ordinary row (and off the column header).
+
+     - the "↳" was PREPENDED TO THE VALUE, so it was ordinary text inside the
+       cell's single text run. The member's own text therefore began after the
+       glyph plus a space — about 11px at 14px Barlow — while the parent's
+       label and every ordinary row's text began at the cell's padding edge.
+       The indent was whatever the font made it, it varied with the type size,
+       and a long value had that much less room before it ran out of cell.
+
+   Both are now drawn without occupying layout: the bar is an inset overlay,
+   and the marker is a fixed-width flex item spent from INSIDE the cell's
+   existing content box.
+
+   Density hooks, per the convention above:
+
+     --grid-tree-accent-width  the nesting bar.            default: 4px
+     --grid-tree-indent        member indent budget, marker included.
+                               default: 18px
+   ========================================================================= */
+
+/* The bar is painted by an overlay pinned to the row's left edge rather than
+   by a border, so it costs nothing in the box model. It has to be an overlay
+   rather than an inset box-shadow because `.InovuaReactDataGrid__row-cell-wrap`
+   carries `background: inherit` — it repaints the row's own background across
+   the full width and would cover any shadow the row painted underneath. */
+.treeParentRow,
+.treeChildRow {
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: var(--grid-tree-accent-width, 4px);
+        /* Above the cell strip, which paints an opaque background of its own */
+        z-index: 1;
+        pointer-events: none;
+    }
+}
+
+.treeParentRow::after {
+    background: var(--grid-tree-accent-parent, #2e7dbd);
+}
+
+.treeChildRow::after {
+    background: var(--grid-tree-accent-child, #93c5fd);
+}
+
+/* The member's display cell: marker and value on one line, inside the cell.
+   `min-width: 0` on both the wrapper and the value is what lets the value
+   ellipsize at the column edge instead of overflowing past it — a flex item
+   defaults to `min-width: auto`, which refuses to shrink below its content. */
+.treeChildCell {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.treeChildMarker {
+    /* Fixed basis, never shrinks: this IS the indent budget, so the value
+       starts at the same offset on every member row whatever the glyph, the
+       type size or the value's length. */
+    flex: 0 0 var(--grid-tree-indent, 18px);
+    width: var(--grid-tree-indent, 18px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    color: var(--muted-color, #6b7688);
+    line-height: 1;
+    user-select: none;
+}
+
+.treeChildValue {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}