@gfazioli/mantine-onboarding-tour/dist/esm/hooks/use-onboarding-tour/use-onboarding-tour.mjs

A Mantine 9 onboarding tour component with focus-reveal overlays, cutout highlights, step-by-step popover navigation, and compound components for guided user experiences.

'use client';
import { useState, useEffect } from 'react';

function useOnboardingTour(tour, options) {
  const defaultOptions = {
    loop: false
  };
  const mergedOptions = { ...defaultOptions, ...options };
  const [currentStepIndex, _setCurrentStepIndex] = useState();
  const [pendingStepIndex, setPendingStepIndex] = useState(null);
  const isTransitioning = pendingStepIndex !== null;
  const {
    loop,
    onOnboardingTourStart,
    onOnboardingTourEnd,
    onOnboardingTourComplete,
    onOnboardingTourSkip,
    onOnboardingTourChange
  } = mergedOptions || {};
  useEffect(() => {
    if (pendingStepIndex !== null) {
      _setCurrentStepIndex(pendingStepIndex);
      onOnboardingTourChange?.(tour[pendingStepIndex]);
      setPendingStepIndex(null);
    }
  }, [pendingStepIndex, tour, onOnboardingTourChange]);
  const transitionToStep = (index) => {
    setPendingStepIndex(index);
  };
  const startTour = () => {
    if (tour.length === 0) {
      return;
    }
    _setCurrentStepIndex(0);
    onOnboardingTourStart?.();
    onOnboardingTourChange?.(tour[0]);
  };
  const nextStep = () => {
    if (currentStepIndex === void 0) {
      return;
    }
    if (currentStepIndex < tour.length - 1) {
      transitionToStep(currentStepIndex + 1);
    } else if (loop) {
      transitionToStep(0);
    } else {
      _setCurrentStepIndex(void 0);
      onOnboardingTourComplete?.();
      onOnboardingTourEnd?.();
    }
  };
  const prevStep = () => {
    if (currentStepIndex === void 0) {
      return;
    }
    if (currentStepIndex > 0) {
      transitionToStep(currentStepIndex - 1);
    } else if (loop) {
      transitionToStep(tour.length - 1);
    } else {
      _setCurrentStepIndex(void 0);
      onOnboardingTourEnd?.();
    }
  };
  const endTour = () => {
    _setCurrentStepIndex(void 0);
    onOnboardingTourEnd?.();
  };
  const skipTour = () => {
    _setCurrentStepIndex(void 0);
    onOnboardingTourSkip?.();
    onOnboardingTourEnd?.();
  };
  const setCurrentStepIndex = (index) => {
    if (currentStepIndex !== void 0) {
      transitionToStep(index);
    } else {
      _setCurrentStepIndex(index);
    }
  };
  return {
    tour,
    currentStep: currentStepIndex !== void 0 ? tour[currentStepIndex] : void 0,
    currentStepIndex,
    selectedStepId: isTransitioning || currentStepIndex === void 0 ? void 0 : tour[currentStepIndex]?.id,
    setCurrentStepIndex,
    startTour,
    endTour,
    skipTour,
    nextStep,
    prevStep,
    options: mergedOptions
  };
}

export { useOnboardingTour };
//# sourceMappingURL=use-onboarding-tour.mjs.map