@visns-studio/visns-components 5.11.15 → 5.11.17

package/package.json

@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.15",
+    "version": "5.11.17",
     "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/generic/GenericFormBuilder.jsx

@@ -106,6 +106,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     });
     const [modalFormShow, setModalFormShow] = useState(false);
     const [roles, setRoles] = useState([]);
+    const [hoveredField, setHoveredField] = useState(null);
 
     const canvasTypes = SketchConfig.canvasTypes;
 
@@ -249,9 +250,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                 className={`${fieldClassName} ${styles.interactiveField} ${
                     styles.previewField
                 } ${isDragging ? styles.dragging : ''}`}
-                data-tooltip-id="field-tooltip"
-                data-tooltip-content={getFieldTooltip(field)}
+                data-tooltip-id={hoveredField === field.id ? null : "field-tooltip"}
+                data-tooltip-content={hoveredField === field.id ? null : getFieldTooltip(field)}
                 data-tooltip-place="top"
+                data-tooltip-delay-show={200}
                 data-field-size={field.size}
             >
                 {/* Field info - always visible */}
@@ -270,6 +272,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                         data-tooltip-id="action-tooltip"
                         data-tooltip-content="Drag to Reorder"
                         data-tooltip-place="top"
+                        onMouseEnter={() => setHoveredField(field.id)}
+                        onMouseLeave={() => setHoveredField(null)}
                     >
                         <ChevronVertical strokeWidth={3} size={24} />
                     </div>
@@ -286,6 +290,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                             data-tooltip-id="action-tooltip"
                             data-tooltip-content="Edit Field"
                             data-tooltip-place="top"
+                            onMouseEnter={() => setHoveredField(field.id)}
+                            onMouseLeave={() => setHoveredField(null)}
                         />
                         <TrashCan
                             className={styles.deleteIcon}
@@ -299,6 +305,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                             data-tooltip-id="action-tooltip"
                             data-tooltip-content="Delete Field"
                             data-tooltip-place="top"
+                            onMouseEnter={() => setHoveredField(field.id)}
+                            onMouseLeave={() => setHoveredField(null)}
                         />
                     </div>
                 </div>
@@ -2314,10 +2322,16 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                     lineHeight: '1.4',
                     maxWidth: '300px',
                     whiteSpace: 'pre-line',
-                    zIndex: 99999,
+                    zIndex: 200000,
                 }}
                 place="top"
-                offset={10}
+                offset={15}
+                float={true}
+                noArrow={false}
+                clickable={false}
+                positionStrategy="fixed"
+                delayShow={200}
+                delayHide={50}
             />
             <Tooltip
                 id="action-tooltip"
@@ -2327,8 +2341,33 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                     borderRadius: '6px',
                     padding: '8px 12px',
                     fontSize: '13px',
-                    zIndex: 9999,
+                    zIndex: 200001,
+                }}
+                place="top"
+                offset={10}
+                float={true}
+                noArrow={false}
+                clickable={false}
+                positionStrategy="fixed"
+                delayShow={100}
+                delayHide={50}
+            />
+            <Tooltip
+                id="system-tooltip"
+                style={{
+                    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                    color: 'white',
+                    borderRadius: '6px',
+                    padding: '8px 12px',
+                    fontSize: '13px',
+                    zIndex: 200000,
                 }}
+                place="top"
+                offset={10}
+                float={true}
+                noArrow={false}
+                clickable={false}
+                positionStrategy="fixed"
             />
         </div>
     );

package/src/components/crm/generic/styles/GenericFormBuilder.module.scss

@@ -1195,7 +1195,7 @@ select:not(:placeholder-shown) + .fi__span {
     flex-direction: column;
     min-height: 100px;
     height: 100%;
-    margin-top: 15px; // Add margin to provide space for tooltip above
+    margin-top: 5px; // Reduced from 15px for better tooltip positioning
 
     // Ensure proper layout during sorting
     &.sortableHelper {
@@ -1289,25 +1289,25 @@ select:not(:placeholder-shown) + .fi__span {
 .dragHandle {
     color: var(--primary-color) !important;
     cursor: grab;
-    padding: 8px;
-    border-radius: 8px;
+    padding: 4px;
+    border-radius: 6px;
     background: white;
     border: 2px solid var(--primary-color);
-    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
+    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
     transition: all 0.2s ease;
     font-weight: bold;
     display: flex !important;
     align-items: center;
     justify-content: center;
-    min-width: 40px;
-    min-height: 40px;
+    min-width: 28px;
+    min-height: 28px;
     position: relative;
     z-index: 1003; // Reduced from 10001 to be below modals but above content
 
     svg {
         display: block !important;
-        width: 24px !important;
-        height: 24px !important;
+        width: 16px !important;
+        height: 16px !important;
         stroke: currentColor !important;
         fill: none !important;
 
@@ -1320,8 +1320,8 @@ select:not(:placeholder-shown) + .fi__span {
         background: var(--primary-color);
         color: white;
         border-color: var(--primary-color);
-        transform: scale(1.1);
-        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
     }
 
     &:active {
@@ -1338,26 +1338,26 @@ select:not(:placeholder-shown) + .fi__span {
 
 .editIcon,
 .deleteIcon {
-    padding: 8px;
-    border-radius: 8px;
+    padding: 4px;
+    border-radius: 6px;
     background: white;
     border: 2px solid;
     cursor: pointer;
     transition: all 0.2s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     font-weight: bold;
     display: flex !important;
     align-items: center;
     justify-content: center;
-    min-width: 36px;
-    min-height: 36px;
+    min-width: 28px;
+    min-height: 28px;
     position: relative;
     z-index: 1003; // Reduced from 10001 to be below modals but above content
 
     svg {
         display: block !important;
-        width: 20px !important;
-        height: 20px !important;
+        width: 16px !important;
+        height: 16px !important;
         stroke: currentColor !important;
         fill: none !important;
     }
@@ -1371,8 +1371,8 @@ select:not(:placeholder-shown) + .fi__span {
         background: var(--primary-color);
         color: white !important;
         border-color: var(--primary-color);
-        transform: scale(1.1);
-        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
     }
 }
 
@@ -1384,8 +1384,8 @@ select:not(:placeholder-shown) + .fi__span {
         background: #d32f2f;
         color: white !important;
         border-color: #d32f2f;
-        transform: scale(1.1);
-        box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4);
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
     }
 }
 
@@ -1527,7 +1527,7 @@ select:not(:placeholder-shown) + .fi__span {
 .fieldContent {
     position: relative;
     z-index: 1;
-    padding-top: 55px; /* Increased space for field info and controls */
+    padding-top: 45px; /* Reduced from 55px for better tooltip positioning */
     flex-grow: 1;
     display: flex;
     flex-direction: column;
@@ -1767,3 +1767,29 @@ select:not(:placeholder-shown) + .fi__span {
         }
     }
 }
+
+/* Tooltip positioning fixes */
+[data-tooltip-id] {
+    position: relative;
+    z-index: 200000; /* Ensure tooltips are above all other elements */
+}
+
+/* React Tooltip specific z-index override */
+:global([data-tooltip-id="field-tooltip"]),
+:global([data-tooltip-id="action-tooltip"]),
+:global([data-tooltip-id="system-tooltip"]) {
+    position: relative;
+    z-index: 200000 !important;
+}
+
+/* Ensure action tooltips take priority over field tooltips */
+.dragHandle,
+.editIcon,
+.deleteIcon {
+    position: relative;
+    z-index: 200002;
+    
+    &:hover {
+        z-index: 200003;
+    }
+}

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 */