@elogroup-sereduc/portal-aluno-tour 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elogroup-sereduc/portal-aluno-tour",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Componente de tour guiado customizado usando HeroUI para o Portal do Aluno",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Tour.tsx

@@ -31,6 +31,19 @@ export function Tour({
     exitOnEsc = true,
   } = options;
 
+  // Garante que o overlay seja renderizado quando enabled for true
+  useEffect(() => {
+    if (enabled) {
+      // Força o body a não ter scroll quando o tour está ativo
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [enabled]);
+
   // Calcula a posição da tooltip baseado no elemento destacado
   const calculateTooltipPosition = useCallback((element: HTMLElement, position: string = "bottom") => {
     const rect = element.getBoundingClientRect();
@@ -103,11 +116,14 @@ export function Tour({
       return;
     }
 
-    // Adiciona classe de highlight
+    // Adiciona classe de highlight e z-index alto
     highlightedElement.classList.add("tour-highlight");
+    const originalZIndex = highlightedElement.style.zIndex;
+    highlightedElement.style.zIndex = "10000";
 
     return () => {
       highlightedElement.classList.remove("tour-highlight");
+      highlightedElement.style.zIndex = originalZIndex;
     };
   }, [highlightedElement]);
 
@@ -179,20 +195,29 @@ export function Tour({
 
   return (
     <>
-      {/* Overlay escuro */}
+      {/* Overlay escuro - sempre visível quando tour está ativo */}
       <div
         ref={overlayRef}
-        className="fixed inset-0 bg-black/60 z-[9998]"
         onClick={handleOverlayClick}
-        style={{ pointerEvents: exitOnOverlayClick ? "auto" : "none" }}
+        style={{ 
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.6)",
+          zIndex: 9998,
+          pointerEvents: exitOnOverlayClick ? "auto" : "none",
+        }}
       />
 
       {/* Tooltip */}
       {tooltipPosition && currentStepData && highlightedElement && (
         <div
           ref={tooltipRef}
-          className="fixed z-[9999] max-w-sm"
+          className="max-w-sm"
           style={{
+            position: "fixed",
             top: currentStepData.position === "bottom" ? `${tooltipPosition.top}px` : undefined,
             bottom: currentStepData.position === "top" ? `${window.innerHeight - tooltipPosition.top}px` : undefined,
             left: currentStepData.position === "left" || currentStepData.position === "right" 
@@ -201,6 +226,7 @@ export function Tour({
             transform: currentStepData.position === "left" || currentStepData.position === "right"
               ? "translate(0, -50%)"
               : "translate(-50%, 0)",
+            zIndex: 10001,
           }}
         >
           <div className="bg-white rounded-lg shadow-xl p-6 relative">
@@ -336,11 +362,12 @@ export function Tour({
       {/* Estilos inline para highlight */}
       <style>{`
         .tour-highlight {
-          position: relative;
-          z-index: 9999 !important;
+          position: relative !important;
+          z-index: 10000 !important;
           outline: 3px solid var(--brand-primary, #0056b0) !important;
           outline-offset: 2px;
           border-radius: 4px;
+          box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6) !important;
         }
       `}</style>
     </>