@visns-studio/visns-components 5.14.3 → 5.14.4

package/package.json

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

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

@@ -587,7 +587,7 @@ select:not(:placeholder-shown) + .fi__span {
     opacity: 1 !important;
     padding: 0 4px !important;
     background: var(--tertiary-color) !important;
-    z-index: 500;
+    z-index: 5;
     font-weight: 300;
     border-radius: var(--br);
     top: 0;
@@ -600,7 +600,7 @@ select:not(:placeholder-shown) + .fi__span {
     border-top-left-radius: var(--br);
     border-top-right-radius: var(--br);
     position: relative;
-    z-index: 10000;
+    z-index: 100;
 }
 
 /* Modal backdrop to prevent background interactions */
@@ -611,7 +611,7 @@ select:not(:placeholder-shown) + .fi__span {
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
-    z-index: 9999;
+    z-index: 99;
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
 }
@@ -759,7 +759,7 @@ select:not(:placeholder-shown) + .fi__span {
     bottom: 20px;
     right: 20px;
     width: auto;
-    z-index: 500;
+    z-index: 5;
 
     button {
         display: block;
@@ -1192,7 +1192,7 @@ select:not(:placeholder-shown) + .fi__span {
     // Ensure proper layout during sorting
     &.sortableHelper {
         position: fixed !important;
-        z-index: 99999 !important;
+        z-index: 50 !important;
         pointer-events: none !important;
     }
 
@@ -1222,7 +1222,7 @@ select:not(:placeholder-shown) + .fi__span {
     align-items: flex-start;
     opacity: 0;
     transition: opacity 0.2s ease;
-    z-index: 1002; // Reduced from 10000 to be below modals but above content
+    z-index: 10; // Reduced significantly to stay below header
     pointer-events: none;
 
     > * {
@@ -1247,7 +1247,7 @@ select:not(:placeholder-shown) + .fi__span {
     font-weight: 400; // Lighter font weight - reduced from 500
     white-space: nowrap;
     box-shadow: 0 1px 4px rgba(var(--primary-rgb), 0.15); // Much softer shadow
-    z-index: 1001; // Reduced from 10001 to be below modals but above content
+    z-index: 11; // Reduced significantly to stay below header
     pointer-events: none;
     opacity: 0.7; // More subtle - reduced from 1
     transition: all 0.2s ease;
@@ -1294,7 +1294,7 @@ select:not(:placeholder-shown) + .fi__span {
     min-width: 28px;
     min-height: 28px;
     position: relative;
-    z-index: 1003; // Reduced from 10001 to be below modals but above content
+    z-index: 12; // Reduced significantly to stay below header
 
     svg {
         display: block !important;
@@ -1344,7 +1344,7 @@ select:not(:placeholder-shown) + .fi__span {
     min-width: 28px;
     min-height: 28px;
     position: relative;
-    z-index: 1003; // Reduced from 10001 to be below modals but above content
+    z-index: 12; // Reduced significantly to stay below header
 
     svg {
         display: block !important;
@@ -1556,7 +1556,7 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .sortingHelper {
-    z-index: 99999 !important;
+    z-index: 50 !important;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
     transform: rotate(2deg) scale(1.05) !important;
     pointer-events: none !important;
@@ -1763,7 +1763,7 @@ select:not(:placeholder-shown) + .fi__span {
 /* Tooltip positioning fixes */
 [data-tooltip-id] {
     position: relative;
-    z-index: 200000; /* Ensure tooltips are above all other elements */
+    z-index: 50; /* Reduced further to stay below header */
 }
 
 /* React Tooltip specific z-index override */
@@ -1771,7 +1771,7 @@ select:not(:placeholder-shown) + .fi__span {
 :global([data-tooltip-id="action-tooltip"]),
 :global([data-tooltip-id="system-tooltip"]) {
     position: relative;
-    z-index: 200000 !important;
+    z-index: 50 !important;
 }
 
 /* Ensure action tooltips take priority over field tooltips */
@@ -1779,9 +1779,9 @@ select:not(:placeholder-shown) + .fi__span {
 .editIcon,
 .deleteIcon {
     position: relative;
-    z-index: 200002;
+    z-index: 51;
     
     &:hover {
-        z-index: 200003;
+        z-index: 52;
     }
 }

package/src/components/styles/SweetAlert.module.css

@@ -1,5 +1,10 @@
 /* Custom styles for SweetAlert2 popups */
 
+/* Ensure SweetAlert appears above form builder */
+:global(.swal2-container) {
+    z-index: 1000 !important;
+}
+
 :global(.swal2-popup) {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
         Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -107,3 +112,4 @@
     font-size: 14px !important;
     font-size: clamp(14px, 14px, 14px) !important;
 }
+

package/src/components/utils/ConfirmDialog.js

@@ -107,6 +107,8 @@ export const confirmDialog = (options) => {
         reverseButtons: true,
         focusCancel: false,
         buttonsStyling: true,
+        zIndex: 1000,
+        backdrop: true,
         showClass: {
             popup: 'swal2-show',
             backdrop: 'swal2-backdrop-show',