@visns-studio/visns-components 5.11.16 → 5.11.18

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -2639,15 +2639,31 @@ const DataGrid = forwardRef(
                                     ? column.id.join('-')
                                     : column.id;
 
+                                // Auto-detect columns that should have word wrap enabled
+                                const shouldAutoEnableWordWrap = 
+                                    column.wordWrap !== false && // Allow explicit disable with wordWrap: false
+                                    (
+                                        // Text-heavy column patterns
+                                        /^(task|description|notes?|comments?|content|message|details?|summary|reason|remarks?)$/i.test(columnId) ||
+                                        /.*_(task|description|notes?|comments?|content|message|details?|summary|reason|remarks?)$/i.test(columnId) ||
+                                        /(task|description|notes?|comments?|content|message|details?|summary|reason|remarks?)_.*$/i.test(columnId) ||
+                                        // Check for long labels that might indicate text content
+                                        (column.label && column.label.length > 15 && /description|notes|comments|details|content/i.test(column.label))
+                                    );
+
+                                const finalWordWrap = column.wordWrap === true || shouldAutoEnableWordWrap;
+
+                                // Debug logging for word wrap detection
+                                if (shouldAutoEnableWordWrap && column.wordWrap !== true) {
+                                    console.log(`DataGrid: Auto-enabled wordWrap for column "${columnId}" (${column.label})`);
+                                }
+
                                 return {
                                     ...commonProps,
                                     name: columnId,
                                     filterEditor: filterEditor,
                                     filterEditorProps: filterEditorProps,
-                                    className:
-                                        column.wordWrap === true
-                                            ? 'cell-word-wrap'
-                                            : '',
+                                    className: finalWordWrap ? 'cell-word-wrap' : '',
                                     render: ({ data }) => {
                                         if (
                                             data &&
@@ -2711,9 +2727,7 @@ const DataGrid = forwardRef(
                                                 <CellWithTooltip
                                                     value={data[column.id]}
                                                     columnType="text"
-                                                    wordWrap={
-                                                        column.wordWrap === true
-                                                    }
+                                                    wordWrap={finalWordWrap}
                                                 >
                                                     <span>
                                                         {parse(content)}

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

@@ -1,5 +1,4 @@
 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';
@@ -13,6 +12,7 @@ const isTextTruncated = (element) => {
     );
 };
 
+
 // Utility function to format cell value for tooltip display
 const formatCellValueForTooltip = (value, columnType) => {
     if (value === null || value === undefined || value === '') {
@@ -70,12 +70,46 @@ const CellWithTooltip = ({
         // Check truncation on mount and when content changes
         checkTruncation();
 
-        // Also check on window resize
-        const handleResize = () => checkTruncation();
+        // Use intersection observer to re-check when cell becomes visible (helps with scrolling)
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        // Small delay to ensure layout is complete
+                        setTimeout(checkTruncation, 10);
+                    } else {
+                        // Hide tooltip when cell is out of view
+                        setShowTooltip(false);
+                    }
+                });
+            },
+            { 
+                threshold: 0.1,
+                rootMargin: '50px' // Add margin to prevent premature hiding
+            }
+        );
+
+        if (cellRef.current) {
+            observer.observe(cellRef.current);
+        }
+
+        // Also check on window resize and scroll
+        const handleResize = () => setTimeout(checkTruncation, 10);
+        const handleScroll = () => setTimeout(checkTruncation, 10);
+        
         window.addEventListener('resize', handleResize);
+        // Listen to scroll events on the grid container
+        const gridContainer = cellRef.current?.closest('.InovuaReactDataGrid');
+        if (gridContainer) {
+            gridContainer.addEventListener('scroll', handleScroll);
+        }
 
         return () => {
+            observer.disconnect();
             window.removeEventListener('resize', handleResize);
+            if (gridContainer) {
+                gridContainer.removeEventListener('scroll', handleScroll);
+            }
         };
     }, [children, value]);
 
@@ -104,8 +138,8 @@ const CellWithTooltip = ({
             width: '100%',
         };
 
-    // Render tooltip using createPortal to escape stacking contexts
-    const tooltipPortal = shouldShowTooltip && createPortal(
+    // Render tooltip with improved positioning
+    const tooltipPortal = shouldShowTooltip && (
         <Tooltip
             id={tooltipId}
             style={{
@@ -116,12 +150,21 @@ const CellWithTooltip = ({
                 fontSize: '13px',
                 maxWidth: '500px',
                 wordWrap: 'break-word',
-                zIndex: 9999, // Slightly lower since we're now at document.body level
+                zIndex: 999999,
+                position: 'fixed', // Ensure fixed positioning for proper calculation
             }}
             place="top"
-            offset={5}
-        />,
-        document.body
+            offset={8}
+            float={false} // Prevent floating behavior that can cause displacement
+            clickable={false} // Prevent click interference
+            delayShow={300} // Small delay to prevent accidental shows
+            delayHide={100}
+            noArrow={false}
+            variant="dark"
+            className="cell-tooltip"
+            positionStrategy="fixed" // Use fixed positioning strategy
+            fallbackPlacements={['bottom', 'right', 'left']} // Fallback positions if top doesn't fit
+        />
     );
 
     return (
@@ -133,6 +176,8 @@ const CellWithTooltip = ({
                 {...(shouldShowTooltip && {
                     'data-tooltip-id': tooltipId,
                     'data-tooltip-html': tooltipContent,
+                    'data-tooltip-place': 'top',
+                    'data-tooltip-offset': '8',
                 })}
             >
                 {children}

package/src/components/crm/styles/TableFilter.module.scss

@@ -195,7 +195,7 @@
 /* Media queries for responsive design */
 
 /* Tablet view (961px to 1024px) - Keep filter expanded in left container */
-@media (max-width: 1024px) and (min-width: 961px) {
+@media (max-width: 1024px) and (min-width: 760px) {
     /* Ensure filter remains visible and properly styled for tablets */
     .tableFilter {
         display: block;
@@ -224,7 +224,7 @@
 }
 
 /* Phone view (960px and below) - Use hamburger menu when navigation moves to top */
-@media (max-width: 960px) {
+@media (max-width: 759px) {
     .mobileToggle {
         display: flex;
     }

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

@@ -12,6 +12,22 @@ div[role="tooltip"],
     position: fixed !important;
 }
 
+/* Specific styles for cell tooltips to prevent positioning issues */
+.cell-tooltip {
+    position: fixed !important;
+    z-index: 999999 !important;
+    pointer-events: none !important; /* Prevent tooltip from interfering with mouse events */
+    max-width: 500px !important;
+    word-wrap: break-word !important;
+    white-space: normal !important;
+    line-height: 1.4 !important;
+}
+
+/* Ensure cell tooltip arrow positioning works correctly */
+.cell-tooltip .react-tooltip-arrow {
+    position: absolute !important;
+}
+
 .InovuaReactDataGrid__header-wrapper {
     border-top-left-radius: var(--br, 4px) !important;
     border-top-right-radius: var(--br, 4px) !important;
@@ -46,7 +62,12 @@ div[role="tooltip"],
     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 */
+    min-height: 40px !important; /* Increased minimum height for better spacing */
+    line-height: 1.4 !important; /* Better line spacing for readability */
+    padding: 10px 8px !important; /* Increased vertical padding for multi-line content */
+    vertical-align: top !important; /* Align content to top for multi-line cells */
+    display: flex !important; /* Use flexbox for better content alignment */
+    align-items: flex-start !important; /* Align content to top */
 }
 
 /* Default cell behavior - no word wrap */