@visns-studio/visns-components 5.10.3 → 5.10.5

package/package.json

@@ -15,7 +15,7 @@
         "@tinymce/tinymce-react": "^6.2.1",
         "@visns-studio/visns-datagrid-community": "^1.0.14",
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
-        "@vitejs/plugin-react": "^4.5.1",
+        "@vitejs/plugin-react": "^4.5.2",
         "add": "^2.0.6",
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
@@ -79,7 +79,7 @@
         "mini-css-extract-plugin": "^2.9.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.89.1",
+        "sass": "^1.89.2",
         "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.10.3",
+    "version": "5.10.5",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -1220,7 +1220,7 @@ const DataGrid = forwardRef(
         const handleGroupAction = async (groupValue, iconConfig) => {
             // Get all rows for this group
             const groupRows = getGroupRows(groupValue);
-            
+
             // Show confirmation dialog to prevent accidental clicks
             const confirmMessage = `Are you sure you want to perform "${iconConfig.label}" action on group "${groupValue}" (${groupRows.length} rows)?`;
 
@@ -1232,15 +1232,15 @@ const DataGrid = forwardRef(
                         label: 'Yes',
                         onClick: () => {
                             executeGroupAction(groupValue, iconConfig);
-                        }
+                        },
                     },
                     {
                         label: 'No',
                         onClick: () => {
                             // User cancelled
-                        }
-                    }
-                ]
+                        },
+                    },
+                ],
             });
         };
 
@@ -1248,9 +1248,11 @@ const DataGrid = forwardRef(
             if (!dataRef.current || !ajaxSetting?.groupBy) {
                 return [];
             }
-            
+
             const groupField = ajaxSetting.groupBy[0];
-            return dataRef.current.filter((row) => row[groupField] === groupValue);
+            return dataRef.current.filter(
+                (row) => row[groupField] === groupValue
+            );
         };
 
         const shouldShowGroupAction = (iconConfig, groupValue) => {
@@ -1261,20 +1263,24 @@ const DataGrid = forwardRef(
 
             // Get all rows for this group
             const groupRows = getGroupRows(groupValue);
-            
+
             // Check if all show conditions are met
-            return iconConfig.show.every(condition => {
+            return iconConfig.show.every((condition) => {
                 const { id, value } = condition;
-                
+
                 // Check if any row in the group matches the condition
-                return groupRows.some(row => {
+                return groupRows.some((row) => {
                     const rowValue = row[id];
-                    
+
                     // Handle null value condition
                     if (value === null) {
-                        return rowValue === null || rowValue === undefined || rowValue === '';
+                        return (
+                            rowValue === null ||
+                            rowValue === undefined ||
+                            rowValue === ''
+                        );
                     }
-                    
+
                     // Handle other value conditions
                     return rowValue === value;
                 });
@@ -1287,7 +1293,7 @@ const DataGrid = forwardRef(
                 try {
                     const payload = {
                         ...iconConfig.fetch.data,
-                        groupLabel: groupValue
+                        groupLabel: groupValue,
                     };
 
                     const result = await CustomFetch(
@@ -2644,6 +2650,10 @@ const DataGrid = forwardRef(
                                     name: columnId,
                                     filterEditor: filterEditor,
                                     filterEditorProps: filterEditorProps,
+                                    className:
+                                        column.wordWrap === true
+                                            ? 'cell-word-wrap'
+                                            : '',
                                     render: ({ data }) => {
                                         if (
                                             data &&
@@ -2654,6 +2664,25 @@ const DataGrid = forwardRef(
                                                 data[column.id]
                                             );
 
+                                            // Debug logging for wordWrap cell rendering
+                                            if (column.wordWrap === true) {
+                                                console.log(
+                                                    'DataGrid DEBUG - Rendering WordWrap Cell:',
+                                                    {
+                                                        columnId,
+                                                        contentLength:
+                                                            content.length,
+                                                        contentPreview:
+                                                            content.substring(
+                                                                0,
+                                                                50
+                                                            ) + '...',
+                                                        wordWrapProp:
+                                                            column.wordWrap,
+                                                    }
+                                                );
+                                            }
+
                                             // If removeFormat is true, strip HTML tags
                                             if (column.removeFormat) {
                                                 content = content.replace(
@@ -2688,6 +2717,9 @@ const DataGrid = forwardRef(
                                                 <CellWithTooltip
                                                     value={data[column.id]}
                                                     columnType="text"
+                                                    wordWrap={
+                                                        column.wordWrap === true
+                                                    }
                                                 >
                                                     <span>
                                                         {parse(content)}
@@ -2995,11 +3027,18 @@ const DataGrid = forwardRef(
             <>
                 {/* Top container with search, action buttons, and auto-refresh */}
                 {/* Only show top container if there are controls to display */}
-                {(!form.searchDisable ||
-                    !form.createDisable ||
-                    (!shouldRelocateAutoRefresh() &&
-                        ajaxSetting &&
-                        ajaxSetting.autoRefresh !== undefined)) && (
+                {(() => {
+                    const hasSearchOrCreate = !form.searchDisable || !form.createDisable;
+                    const hasAutoRefresh = !shouldRelocateAutoRefresh() && ajaxSetting && ajaxSetting.autoRefresh !== undefined;
+                    
+                    // If DataGridSearch would return null (both search and create disabled), 
+                    // only show container if there are other controls besides auto-refresh
+                    if (form.searchDisable === true && form.createDisable === true) {
+                        return false; // Hide AutoRefreshControls when it would be the only control
+                    }
+                    
+                    return hasSearchOrCreate || hasAutoRefresh;
+                })() && (
                     <div className={styles.dataGridTopContainer}>
                         <div className={styles.dataGridTopLeftContainer}>
                             <DataGridSearch
@@ -3242,7 +3281,12 @@ const DataGrid = forwardRef(
                                                                   };
 
                                                               // Check if this icon should be shown based on show conditions
-                                                              if (!shouldShowGroupAction(iconConfig, groupValue)) {
+                                                              if (
+                                                                  !shouldShowGroupAction(
+                                                                      iconConfig,
+                                                                      groupValue
+                                                                  )
+                                                              ) {
                                                                   return null;
                                                               }
 

package/src/components/crm/Form.jsx

@@ -819,11 +819,12 @@ function Form({
                                 : null;
 
                             // Check if formData[item.id] is null, undefined, or an empty string AND there's no auto value
-                            if (!formData[item.id] && !autoValue) {
+                            // Note: 0 is considered a valid value for dropdowns/options
+                            if ((formData[item.id] === null || formData[item.id] === undefined || formData[item.id] === '') && !autoValue) {
                                 // Check for required_check dependency
                                 if (
                                     item.required_check &&
-                                    !formData[item.required_check]
+                                    (formData[item.required_check] === null || formData[item.required_check] === undefined || formData[item.required_check] === '')
                                 ) {
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
@@ -837,7 +838,7 @@ function Form({
                         } else if (
                             item.required_rely &&
                             formData[item.required_rely] &&
-                            !formData[item.id]
+                            (formData[item.id] === null || formData[item.id] === undefined || formData[item.id] === '')
                         ) {
                             // Check if the dependent required field is empty when it should be filled
                             validation += `${item.label} is a required field.<br/>`;

package/src/components/crm/cells/CellWithTooltip.jsx

@@ -50,6 +50,7 @@ const CellWithTooltip = ({
     value,
     columnType = 'text',
     className = '',
+    wordWrap = false,
 }) => {
     const cellRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
@@ -79,20 +80,34 @@ const CellWithTooltip = ({
 
     const tooltipContent = formatCellValueForTooltip(value, columnType);
 
-    // Only show tooltip if content is truncated and we have meaningful content
-    const shouldShowTooltip =
-        showTooltip && tooltipContent && tooltipContent.trim() !== '';
+    // For wordWrap columns, only show tooltip if explicitly requested (content is still truncated due to height limits)
+    // For non-wordWrap columns, show tooltip when content is truncated
+    const shouldShowTooltip = 
+        wordWrap 
+            ? false // Disable tooltip for wordWrap columns since content is visible
+            : showTooltip && tooltipContent && tooltipContent.trim() !== '';
+
+    // Dynamic styles based on wordWrap setting
+    const cellStyles = wordWrap 
+        ? {
+            width: '100%',
+            whiteSpace: 'normal',
+            wordWrap: 'break-word',
+            overflowWrap: 'break-word',
+            overflow: 'visible',
+        }
+        : {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: '100%',
+        };
 
     return (
         <div
             ref={cellRef}
             className={className}
-            style={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                width: '100%',
-            }}
+            style={cellStyles}
             {...(shouldShowTooltip && {
                 'data-tooltip-id': tooltipId,
                 'data-tooltip-html': tooltipContent,

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

@@ -26,6 +26,27 @@
     padding: 6px 8px !important; /* Reduced from default padding */
 }
 
+/* Word wrap enabled cells - specific class for columns with wordWrap: true */
+.InovuaReactDataGrid__cell.cell-word-wrap,
+.InovuaReactDataGrid__cell.cell-word-wrap > *,
+.InovuaReactDataGrid__cell.cell-word-wrap div,
+.InovuaReactDataGrid__cell.cell-word-wrap span {
+    white-space: normal !important; /* Allow text wrapping */
+    word-wrap: break-word !important; /* Break long words */
+    overflow-wrap: break-word !important; /* Modern alternative to word-wrap */
+    text-overflow: unset !important; /* Disable text truncation */
+    overflow: visible !important; /* Show wrapped content */
+    height: auto !important; /* Allow cell to expand vertically */
+    min-height: 32px !important; /* Maintain minimum height */
+}
+
+/* Default cell behavior - no word wrap */
+.InovuaReactDataGrid__cell:not(.cell-word-wrap) {
+    white-space: nowrap !important;
+    text-overflow: ellipsis !important;
+    overflow: hidden !important;
+}
+
 /* Reduce header cell padding as well */
 .InovuaReactDataGrid__header-cell {
     padding: 6px 8px !important;