@visns-studio/visns-components 5.14.2 → 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.2",
+    "version": "5.14.4",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/generic/OcrTemplateEnhanced.jsx

@@ -122,15 +122,17 @@ const OcrTemplateEnhanced = ({
         });
         setCompletedSteps(newCompletedSteps);
 
-        // Auto-advance to next step if current step is completed
-        const currentStepData = journeySteps.find(s => s.id === currentStep);
-        if (currentStepData?.isCompleted() && currentStep < journeySteps.length) {
-            const nextIncompleteStep = journeySteps.find(s => s.id > currentStep && !newCompletedSteps.has(s.id));
-            if (nextIncompleteStep) {
-                setCurrentStep(nextIncompleteStep.id);
+        // Only auto-advance if we haven't manually navigated
+        if (!hasAutoJumped) {
+            const currentStepData = journeySteps.find(s => s.id === currentStep);
+            if (currentStepData?.isCompleted() && currentStep < journeySteps.length) {
+                const nextIncompleteStep = journeySteps.find(s => s.id > currentStep && !newCompletedSteps.has(s.id));
+                if (nextIncompleteStep) {
+                    setCurrentStep(nextIncompleteStep.id);
+                }
             }
         }
-    }, [ocrTemplateBuilder, data, currentStep]);
+    }, [ocrTemplateBuilder, data, currentStep, hasAutoJumped]);
 
     // Initial step detection - jump to latest completed step on load (only once)
     React.useEffect(() => {
@@ -168,8 +170,31 @@ const OcrTemplateEnhanced = ({
 
     // Manual navigation function to prevent auto-jump interference
     const navigateToStep = (stepId) => {
-        setCurrentStep(stepId);
-        setHasAutoJumped(true); // Prevent future auto-jumping after manual navigation
+        // Validate step ID
+        if (stepId < 1 || stepId > journeySteps.length) {
+            console.warn(`Invalid step ID: ${stepId}`);
+            return;
+        }
+        
+        const targetStep = journeySteps.find(s => s.id === stepId);
+        if (!targetStep) {
+            console.warn(`Step not found: ${stepId}`);
+            return;
+        }
+        
+        // Check if we can access this step
+        const stepIndex = journeySteps.findIndex(s => s.id === stepId);
+        const canAccess = stepIndex === 0 || 
+                         completedSteps.has(stepId) || 
+                         completedSteps.has(journeySteps[stepIndex - 1].id);
+        
+        if (canAccess) {
+            console.log(`Navigating to step ${stepId}`);
+            setCurrentStep(stepId);
+            setHasAutoJumped(true); // Prevent future auto-jumping after manual navigation
+        } else {
+            console.warn(`Cannot access step ${stepId}. Step index: ${stepIndex}, Completed steps:`, Array.from(completedSteps));
+        }
     };
 
     // Enhanced smart categorization utility
@@ -1125,7 +1150,14 @@ const OcrTemplateEnhanced = ({
                         <div 
                             key={step.id}
                             className={`${styles.progressStep} ${isActive ? styles.active : ''} ${isCompleted ? styles.completed : ''} ${!canAccess ? styles.disabled : ''}`}
-                            onClick={() => canAccess && navigateToStep(step.id)}
+                            onClick={() => {
+                                if (canAccess) {
+                                    navigateToStep(step.id);
+                                } else {
+                                    console.log(`Step ${step.id} not accessible. Completed steps:`, Array.from(completedSteps));
+                                }
+                            }}
+                            style={{ cursor: canAccess ? 'pointer' : 'not-allowed' }}
                         >
                             <div className={styles.stepIcon}>
                                 {isCompleted ? (
@@ -1294,7 +1326,7 @@ const OcrTemplateEnhanced = ({
             <div className={styles.journeyNavigation}>
                 <button 
                     className={styles.navBtn}
-                    onClick={() => navigateToStep(Math.max(1, currentStep - 1))}
+                    onClick={() => navigateToStep(currentStep - 1)}
                     disabled={currentStep === 1}
                 >
                     <ArrowLeft size={16} />
@@ -1303,11 +1335,17 @@ const OcrTemplateEnhanced = ({
                 
                 <div className={styles.stepIndicator}>
                     Step {currentStep} of {journeySteps.length}
+                    {completedSteps.has(currentStep) && (
+                        <span className={styles.completedBadge}>
+                            <CheckCircle2 size={14} />
+                            Completed
+                        </span>
+                    )}
                 </div>
                 
                 <button 
                     className={styles.navBtn}
-                    onClick={() => navigateToStep(Math.min(journeySteps.length, currentStep + 1))}
+                    onClick={() => navigateToStep(currentStep + 1)}
                     disabled={currentStep === journeySteps.length}
                 >
                     Next Step

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',