@visns-studio/visns-components 5.11.15 → 5.11.16

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.16",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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;
+    }
+}