@aladinbs/react-guided-tour 1.0.3 → 1.2.0

package/dist/index.js

@@ -1416,8 +1416,21 @@ function useTourHighlight(step) {
 }
 
 const TourOverlay = React.memo(function TourOverlay({ className }) {
-    const { state, theme, stop } = useTour();
+    const { state, theme, stop, config, next } = useTour();
     const { targetElement, highlightStyle, isVisible } = useTourHighlight(state.currentStep);
+    const [scrollTrigger, setScrollTrigger] = React.useState(0);
+    // Determine if interactions should be blocked
+    const shouldBlockInteractions = React.useMemo(() => {
+        const stepBlocking = state.currentStep?.blockInteractions;
+        const globalBlocking = config.blockInteractions;
+        return stepBlocking !== undefined ? stepBlocking : globalBlocking;
+    }, [state.currentStep?.blockInteractions, config.blockInteractions]);
+    // Determine if click-to-advance is enabled
+    const shouldClickToAdvance = React.useMemo(() => {
+        const stepClickToAdvance = state.currentStep?.clickToAdvance;
+        const globalClickToAdvance = config.clickToAdvance;
+        return stepClickToAdvance !== undefined ? stepClickToAdvance : globalClickToAdvance;
+    }, [state.currentStep?.clickToAdvance, config.clickToAdvance]);
     const overlayStyle = React.useMemo(() => ({
         position: 'fixed',
         top: 0,
@@ -1429,15 +1442,148 @@ const TourOverlay = React.memo(function TourOverlay({ className }) {
         zIndex: (theme.zIndex || 9999) - 1,
         pointerEvents: 'auto',
     }), [theme.overlay?.backgroundColor, theme.overlay?.opacity, theme.zIndex]);
-    const handleOverlayClick = React.useCallback(() => {
-        if (state.currentStep?.canSkip !== false) {
+    // Create cutout style for the highlighted element
+    const cutoutOverlayStyle = React.useMemo(() => {
+        if ((!shouldBlockInteractions && !shouldClickToAdvance) || !targetElement || !isVisible) {
+            return overlayStyle;
+        }
+        // Use getBoundingClientRect for viewport-relative coordinates (perfect for fixed overlay)
+        const rect = targetElement.getBoundingClientRect();
+        const padding = state.currentStep?.highlight?.padding || 8;
+        // Ensure coordinates are within viewport bounds
+        const left = Math.max(0, rect.left - padding);
+        const top = Math.max(0, rect.top - padding);
+        const right = Math.min(window.innerWidth, rect.right + padding);
+        const bottom = Math.min(window.innerHeight, rect.bottom + padding);
+        return {
+            ...overlayStyle,
+            clipPath: `polygon(
+        0% 0%, 
+        0% 100%, 
+        ${left}px 100%, 
+        ${left}px ${top}px, 
+        ${right}px ${top}px, 
+        ${right}px ${bottom}px, 
+        ${left}px ${bottom}px, 
+        ${left}px 100%, 
+        100% 100%, 
+        100% 0%
+      )`,
+        };
+    }, [overlayStyle, shouldBlockInteractions, shouldClickToAdvance, targetElement, isVisible, state.currentStep?.highlight?.padding, scrollTrigger]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Force re-render of cutout overlay on scroll to maintain proper positioning
+    React.useEffect(() => {
+        if (!shouldBlockInteractions && !shouldClickToAdvance) {
+            return;
+        }
+        const handleScroll = () => {
+            // Force recalculation by updating scroll trigger
+            setScrollTrigger(prev => prev + 1);
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        window.addEventListener('resize', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleScroll);
+        };
+    }, [shouldBlockInteractions, shouldClickToAdvance]);
+    const handleOverlayClick = React.useCallback((e) => {
+        // If interactions are blocked, prevent the click from propagating
+        if (shouldBlockInteractions) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        // Allow clicking outside to close tour if not blocking interactions
+        if (config.allowClickOutside !== false && state.currentStep?.canSkip !== false) {
             stop();
         }
-    }, [state.currentStep?.canSkip, stop]);
+    }, [shouldBlockInteractions, config.allowClickOutside, state.currentStep?.canSkip, stop]);
+    // Handle click-to-advance functionality
+    React.useEffect(() => {
+        if (!shouldClickToAdvance || !targetElement || !state.isRunning) {
+            return;
+        }
+        // Ensure target element is above the overlay when click-to-advance is enabled
+        const originalZIndex = targetElement.style.zIndex;
+        const originalPosition = targetElement.style.position;
+        targetElement.style.position = targetElement.style.position || 'relative';
+        targetElement.style.zIndex = String((theme.zIndex || 9999) + 1);
+        const handleTargetClick = (_e) => {
+            setTimeout(() => {
+                next();
+            }, 100);
+        };
+        targetElement.addEventListener('click', handleTargetClick, true);
+        return () => {
+            targetElement.removeEventListener('click', handleTargetClick, true);
+            // Restore original styles
+            targetElement.style.zIndex = originalZIndex;
+            targetElement.style.position = originalPosition;
+        };
+    }, [shouldClickToAdvance, targetElement, state.isRunning, next, theme.zIndex]);
+    // Block interactions on the entire page when blocking is enabled
+    React.useEffect(() => {
+        if (!shouldBlockInteractions || !state.isRunning) {
+            return;
+        }
+        const handleGlobalClick = (e) => {
+            const target = e.target;
+            // Allow clicks on the tour target element and its children
+            if (targetElement && (targetElement.contains(target) || targetElement === target)) {
+                // If click-to-advance is enabled, let the target click handler deal with it
+                if (shouldClickToAdvance) {
+                    return;
+                }
+                return;
+            }
+            // Allow clicks on tour UI elements (popover, buttons, etc.)
+            if (target.closest('[data-tour-popover]') ||
+                target.closest('[data-tour-highlight]') ||
+                target.closest('[data-tour-overlay]')) {
+                return;
+            }
+            // Block all other clicks
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const handleGlobalKeydown = (e) => {
+            // Allow tour navigation keys
+            if (['Escape', 'ArrowLeft', 'ArrowRight', 'Enter', 'Space'].includes(e.key)) {
+                return;
+            }
+            // Block other keyboard interactions
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        // Add event listeners to capture phase to block interactions early
+        document.addEventListener('click', handleGlobalClick, true);
+        document.addEventListener('keydown', handleGlobalKeydown, true);
+        document.addEventListener('mousedown', handleGlobalClick, true);
+        document.addEventListener('touchstart', handleGlobalClick, true);
+        return () => {
+            document.removeEventListener('click', handleGlobalClick, true);
+            document.removeEventListener('keydown', handleGlobalKeydown, true);
+            document.removeEventListener('mousedown', handleGlobalClick, true);
+            document.removeEventListener('touchstart', handleGlobalClick, true);
+        };
+    }, [shouldBlockInteractions, state.isRunning, targetElement, shouldClickToAdvance]);
     if (!state.isRunning || !state.currentStep) {
         return null;
     }
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { style: overlayStyle, onClick: handleOverlayClick, className: className, "data-tour-overlay": true }), isVisible && targetElement && (jsxRuntimeExports.jsx("div", { style: highlightStyle, "data-tour-highlight": true })), jsxRuntimeExports.jsx("style", { children: `
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { style: (shouldBlockInteractions || shouldClickToAdvance) ? cutoutOverlayStyle : overlayStyle, onClick: handleOverlayClick, className: className, "data-tour-overlay": true }), isVisible && targetElement && (jsxRuntimeExports.jsx("div", { style: highlightStyle, "data-tour-highlight": true })), shouldBlockInteractions && (jsxRuntimeExports.jsx("div", { style: {
+                    position: 'fixed',
+                    top: '20px',
+                    right: '20px',
+                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                    color: 'white',
+                    padding: '8px 12px',
+                    borderRadius: '4px',
+                    fontSize: '12px',
+                    zIndex: (theme.zIndex || 9999) + 1,
+                    pointerEvents: 'none',
+                    animation: 'tour-fade-in 0.3s ease-out',
+                }, "data-tour-blocking-indicator": true, children: "\uD83D\uDD12 Interactions blocked" })), jsxRuntimeExports.jsx("style", { children: `
         @keyframes tour-highlight-pulse {
           0%, 100% {
             box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.3);
@@ -1465,24 +1611,53 @@ const TourOverlay = React.memo(function TourOverlay({ className }) {
         [data-tour-highlight] {
           animation: tour-fade-in 0.3s ease-out;
         }
+        
+        [data-tour-blocking-indicator] {
+          animation: tour-fade-in 0.3s ease-out;
+        }
       ` })] }));
 });
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const TourPopover = React.memo(function TourPopover({ className }) {
-    const { state, theme, next, previous, skip, stop, isFirstStep, isLastStep, canGoNext, canGoPrevious } = useTour();
+    const { state, theme, next, previous, skip, stop, isFirstStep, isLastStep, canGoNext, canGoPrevious, config } = useTour();
     const { targetElement } = useTourHighlight(state.currentStep);
     const popoverRef = React.useRef(null);
     const [position, setPosition] = React.useState({ top: 0, left: 0, placement: 'top' });
     const updatePosition = React.useCallback(() => {
-        if (!popoverRef.current || !targetElement || !state.currentStep)
+        if (!popoverRef.current || !state.currentStep)
+            return;
+        // For center placement without target element, calculate center position directly
+        if (state.currentStep.placement === 'center' && !targetElement) {
+            const popoverRect = popoverRef.current.getBoundingClientRect();
+            const viewport = {
+                width: window.innerWidth,
+                height: window.innerHeight,
+                scrollTop: window.pageYOffset || document.documentElement.scrollTop,
+                scrollLeft: window.pageXOffset || document.documentElement.scrollLeft,
+            };
+            setPosition({
+                top: viewport.scrollTop + (viewport.height - popoverRect.height) / 2,
+                left: viewport.scrollLeft + (viewport.width - popoverRect.width) / 2,
+                placement: 'center',
+            });
+            return;
+        }
+        // For other placements, require target element
+        if (!targetElement)
             return;
         const newPosition = calculatePopoverPosition(targetElement, popoverRef.current, state.currentStep.placement || 'top');
         setPosition(newPosition);
     }, [targetElement, state.currentStep]);
     const step = state.currentStep;
     const popoverConfig = React.useMemo(() => step?.popover || {}, [step?.popover]);
+    // Determine if click-to-advance is enabled for this step
+    const shouldClickToAdvance = React.useMemo(() => {
+        const stepClickToAdvance = step?.clickToAdvance;
+        const globalClickToAdvance = config.clickToAdvance;
+        return stepClickToAdvance !== undefined ? stepClickToAdvance : globalClickToAdvance;
+    }, [step?.clickToAdvance, config.clickToAdvance]);
     const popoverStyle = React.useMemo(() => ({
         position: 'absolute',
         top: position.top,
@@ -1515,10 +1690,14 @@ const TourPopover = React.memo(function TourPopover({ className }) {
         }
     }, [canGoNext, isLastStep, next]);
     const handlePrevious = React.useCallback(async () => {
+        if (step?.previousButton?.handler) {
+            await step.previousButton.handler();
+            return;
+        }
         if (canGoPrevious) {
             await previous();
         }
-    }, [canGoPrevious, previous]);
+    }, [canGoPrevious, previous, step?.previousButton]);
     const handleSkip = React.useCallback(async () => {
         await skip();
     }, [skip]);
@@ -1526,12 +1705,16 @@ const TourPopover = React.memo(function TourPopover({ className }) {
         await stop();
     }, [stop]);
     React.useEffect(() => {
-        updatePosition();
+        // Small delay to ensure popover is rendered and has dimensions
+        const timeoutId = setTimeout(() => {
+            updatePosition();
+        }, 10);
         const handleResize = () => updatePosition();
         const handleScroll = () => updatePosition();
         window.addEventListener('resize', handleResize);
         window.addEventListener('scroll', handleScroll, { passive: true });
         return () => {
+            clearTimeout(timeoutId);
             window.removeEventListener('resize', handleResize);
             window.removeEventListener('scroll', handleScroll);
         };
@@ -1606,7 +1789,7 @@ const TourPopover = React.memo(function TourPopover({ className }) {
                             pointerEvents: 'auto',
                             position: 'relative',
                             zIndex: 99999,
-                        }, children: popoverConfig.skipLabel || 'Skip Tour' })), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '8px', marginLeft: 'auto' }, children: [!isFirstStep && (jsxRuntimeExports.jsx("button", { onClick: handlePrevious, disabled: !canGoPrevious, style: {
+                        }, children: popoverConfig.skipLabel || 'Skip Tour' })), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '8px', marginLeft: 'auto' }, children: [!isFirstStep && (step?.previousButton?.show !== false) && (jsxRuntimeExports.jsx("button", { onClick: handlePrevious, disabled: !canGoPrevious, style: {
                                     backgroundColor: 'transparent',
                                     borderTopWidth: '1px',
                                     borderRightWidth: '1px',
@@ -1628,7 +1811,7 @@ const TourPopover = React.memo(function TourPopover({ className }) {
                                     fontWeight: '500',
                                     opacity: canGoPrevious ? 1 : 0.5,
                                     transition: 'all 0.2s ease',
-                                }, children: "Previous" })), jsxRuntimeExports.jsx("button", { onClick: (e) => {
+                                }, children: step?.previousButton?.label || 'Previous' })), !shouldClickToAdvance && (jsxRuntimeExports.jsx("button", { onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                     handleNext();
@@ -1651,7 +1834,18 @@ const TourPopover = React.memo(function TourPopover({ className }) {
                                     zIndex: 99999,
                                 }, children: isLastStep
                                     ? (popoverConfig.finishLabel || 'Finish')
-                                    : (popoverConfig.nextLabel || 'Next') })] })] }), position.placement !== 'center' && (jsxRuntimeExports.jsx("div", { style: {
+                                    : (popoverConfig.nextLabel || 'Next') })), shouldClickToAdvance && (jsxRuntimeExports.jsx("div", { style: {
+                                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                                    border: '1px solid rgba(59, 130, 246, 0.3)',
+                                    color: theme.primaryColor || '#3b82f6',
+                                    padding: '8px 16px',
+                                    borderRadius: '8px',
+                                    fontSize: '14px',
+                                    fontWeight: '500',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                }, children: "\uD83D\uDC46 Click the highlighted element to continue" }))] })] }), position.placement !== 'center' && (jsxRuntimeExports.jsx("div", { style: {
                     position: 'absolute',
                     width: '12px',
                     height: '12px',