@visns-studio/visns-components 6.3.12 → 6.3.13

package/package.json

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

package/src/components/DataGrid.jsx

@@ -976,6 +976,19 @@ const DataGrid = forwardRef(
             },
         }));
 
+        // First matching `rowColours` rule for a row, shared by getRowStyle
+        // (which paints it) and rowClassName (which marks the row so the
+        // zebra banding stands down — see .tintedRow in the module styles).
+        const findRowColour = useCallback(
+            (data) =>
+                ajaxSetting?.rowColours?.length > 0 && data
+                    ? ajaxSetting.rowColours.find(
+                          (config) => data[config.id] === config.value
+                      )
+                    : undefined,
+            [ajaxSetting]
+        );
+
         const getRowStyle = useCallback(
             (rowProps) => {
                 const { data } = rowProps;
@@ -995,19 +1008,14 @@ const DataGrid = forwardRef(
                     style.fontWeight = 600;
                 }
 
-                if (ajaxSetting?.rowColours?.length > 0) {
-                    const colorConfig = ajaxSetting.rowColours.find(
-                        (config) => data[config.id] === config.value
-                    );
-
-                    if (colorConfig) {
-                        style.backgroundColor = colorConfig.colour;
-                    }
+                const colorConfig = findRowColour(data);
+                if (colorConfig) {
+                    style.backgroundColor = colorConfig.colour;
                 }
 
                 return Object.keys(style).length > 0 ? style : null;
             },
-            [ajaxSetting]
+            [ajaxSetting, findRowColour]
         );
 
         /**
@@ -1104,10 +1112,14 @@ const DataGrid = forwardRef(
                     'vs-datagrid--row',
                     treeRowClassName(rowProps?.data),
                     getRowClassName(rowProps),
+                    // A rowColours tint is an inline background on the row
+                    // element; the class lets the stylesheet clear the zebra
+                    // band that would otherwise paint over it on odd rows.
+                    findRowColour(rowProps?.data) ? styles.tintedRow : '',
                 ]
                     .filter(Boolean)
                     .join(' '),
-            [getRowClassName, treeRowClassName]
+            [getRowClassName, treeRowClassName, findRowColour]
         );
 
         const handleDownload = async (d) => {

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

@@ -83,6 +83,17 @@
     }
 }
 
+// A `rowColours` tint arrives as an inline background on the ROW element,
+// but the banding above paints the cell-wrap CHILD, which sits on top — so
+// on odd rows the stripe swallowed the tint and only even rows showed their
+// urgency colour. A tinted row (marked by rowClassName in DataGrid.jsx)
+// clears its cell-wrap so the row's own colour reads on every row. Must
+// stay AFTER the banding rule: same specificity, order decides. Hover is
+// unaffected — its background is `!important` on the hover target.
+.tintedRow :global(.InovuaReactDataGrid__row-cell-wrap) {
+    background: transparent;
+}
+
 .InovuaReactDataGrid__row-hover-target:hover {
     color: var(--primary-color) !important;
     background: var(--hover-color, rgb(230, 240, 250)) !important;