@gfazioli/mantine-onboarding-tour/dist/cjs/hooks/use-onboarding-tour/use-onboarding-tour.cjs

A Mantine component enables you to create a onboarding-tour effect using overlays, popovers, and onboarding tours, which enhances element visibility and interactivity.

'use client';
'use strict';

var React = require('react');

function useOnboardingTour(tour, options) {
  const defaultOptions = {
    loop: false
  };
  const mergedOptions = { ...defaultOptions, ...options };
  const [currentStepIndex, setCurrentStepIndex] = React.useState();
  const { loop, onOnboardingTourStart, onOnboardingTourEnd, onOnboardingTourChange } = mergedOptions || {};
  const startTour = () => {
    setCurrentStepIndex(0);
    onOnboardingTourStart?.();
    onOnboardingTourChange?.(tour[0]);
  };
  const nextStep = () => {
    if (currentStepIndex < tour.length - 1) {
      setCurrentStepIndex((currentStep) => currentStep + 1);
      onOnboardingTourChange?.(tour[currentStepIndex + 1]);
    } else if (loop) {
      setCurrentStepIndex(0);
    } else {
      setCurrentStepIndex(void 0);
      onOnboardingTourEnd?.();
    }
  };
  const prevStep = () => {
    if (currentStepIndex > 0) {
      setCurrentStepIndex((currentStep) => currentStep - 1);
      onOnboardingTourChange?.(tour[currentStepIndex - 1]);
    } else if (loop) {
      setCurrentStepIndex(tour.length - 1);
    } else {
      setCurrentStepIndex(void 0);
      onOnboardingTourEnd?.();
    }
  };
  const endTour = () => {
    setCurrentStepIndex(void 0);
    onOnboardingTourEnd?.();
  };
  return {
    tour,
    currentStep: tour[currentStepIndex],
    currentStepIndex,
    selectedStepId: tour[currentStepIndex]?.id,
    setCurrentStepIndex,
    startTour,
    endTour,
    nextStep,
    prevStep,
    options: mergedOptions
  };
}

exports.useOnboardingTour = useOnboardingTour;
//# sourceMappingURL=use-onboarding-tour.cjs.map