@visns-studio/visns-components 5.9.10 → 5.9.12

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -87,6 +87,7 @@ import Form from './Form';
 import _ from 'lodash';
 
 // CSS styles to ensure consistent group header heights with compact design and click indicators
+// Also includes improved multi-line content handling for data rows
 const groupHeaderStyles = `
     .datagrid-fixed-group-headers .group-header-fixed-height {
         height: 34px !important;
@@ -168,6 +169,31 @@ const groupHeaderStyles = `
         min-height: 34px !important;
         max-height: 34px !important;
     }
+    
+    /* Enhanced multi-line content support for data cells */
+    .InovuaReactDataGrid__cell {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        line-height: 1.3;
+        padding: 4px 8px;
+        vertical-align: top;
+        min-height: 32px;
+        display: flex;
+        align-items: flex-start;
+    }
+    
+    /* Ensure cell content adapts to content height */
+    .InovuaReactDataGrid__cell-content {
+        width: 100%;
+        overflow-wrap: break-word;
+        word-break: break-word;
+        hyphens: auto;
+    }
+    
+    /* Improve row height calculation trigger after data changes */
+    .InovuaReactDataGrid__row {
+        transition: height 0.1s ease-out;
+    }
 `;
 
 // Inject styles into the document head
@@ -359,6 +385,7 @@ const CellWithTooltip = ({
     );
 };
 
+
 const DataGrid = forwardRef(
     (
         {
@@ -595,6 +622,7 @@ const DataGrid = forwardRef(
             if (ajaxSetting?.groupBy) {
                 groupsInitializedRef.current = false;
                 setCollapsedGroups({}); // Clear existing state when groupBy changes
+                
             }
         }, [ajaxSetting?.groupBy]);
 
@@ -718,6 +746,14 @@ const DataGrid = forwardRef(
                         setTableData(res.data);
                     }
                     dataRef.current = res.data;
+                    
+                    // Force grid to recalculate row heights after data changes
+                    // This helps with multi-line content timing without interfering with core mechanisms
+                    setTimeout(() => {
+                        if (gridRef.current?.api) {
+                            gridRef.current.api.forceUpdate();
+                        }
+                    }, 10);
                 });
 
                 return sqlResult;
@@ -1636,6 +1672,21 @@ const DataGrid = forwardRef(
                 const { onClick } = rowProps;
 
                 rowProps.onClick = (event) => {
+                    // Check if this is a group row - group rows should only handle expand/collapse, not onRowClick
+                    const isGroupRow = rowProps.isGroupRow || 
+                                     rowProps.data?.__group || 
+                                     event.target.closest('.InovuaReactDataGrid__group-row') ||
+                                     event.target.closest('.InovuaReactDataGrid__group-cell');
+
+                    if (isGroupRow) {
+                        // For group rows, only allow the original onClick handler (for expand/collapse)
+                        // Do NOT call onRowClick as it should only apply to data rows
+                        if (onClick) {
+                            onClick(event);
+                        }
+                        return;
+                    }
+
                     const cellElement = event.target.closest(
                         '.InovuaReactDataGrid__cell'
                     );
@@ -2220,16 +2271,12 @@ const DataGrid = forwardRef(
                     });
                 };
 
-                // Apply immediately and with delays
+                // Apply immediately and with a conservative delay
                 applyGroupedStyling();
                 const timer1 = setTimeout(applyGroupedStyling, 100);
-                const timer2 = setTimeout(applyGroupedStyling, 500);
-                const timer3 = setTimeout(applyGroupedStyling, 1000);
-
+                
                 return () => {
                     clearTimeout(timer1);
-                    clearTimeout(timer2);
-                    clearTimeout(timer3);
                 };
             }
         }, [ajaxSetting?.groupBy, gridColumns]);
@@ -4538,15 +4585,16 @@ const DataGrid = forwardRef(
         }, [dataCount, gridHeight, window.innerHeight]);
 
         useEffect(() => {
-            const handleResize = () => {
+            const debouncedHandleResize = debounce(() => {
                 setWindowHeight(window.innerHeight);
-            };
+            }, 150);
 
-            window.addEventListener('resize', handleResize);
+            window.addEventListener('resize', debouncedHandleResize);
 
             // Clean up the event listener
             return () => {
-                window.removeEventListener('resize', handleResize);
+                window.removeEventListener('resize', debouncedHandleResize);
+                debouncedHandleResize.cancel();
             };
         }, []);