@gfazioli/mantine-onboarding-tour/dist/esm/OnboardingTour.mjs

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';
import React, { useEffect } from 'react';
import { useProps, useStyles, useResolvedStylesApi } from '@mantine/core';
import { useOnboardingTour } from './hooks/use-onboarding-tour/use-onboarding-tour.mjs';
import { _OnboardingTourProvider } from './OnboardingTour.context.mjs';
import { OnboardingTourFocusReveal } from './OnboardingTourFocusReveal/OnboardingTourFocusReveal.mjs';
import { OnboardingTourPopoverContent } from './OnboardingTourPopoverContent/OnboardingTourPopoverContent.mjs';
import { OnboardingTourTarget } from './OnboardingTourTarget/OnboardingTourTarget.mjs';
import classes from './OnboardingTour.module.css.mjs';

const defaultProps = {};
function OnboardingTour(_props) {
  const props = useProps("OnboardingTour", defaultProps, _props);
  const {
    tour,
    started,
    loop,
    focusRevealProps: _focusRevealProps,
    onOnboardingTourStart,
    onOnboardingTourEnd,
    onOnboardingTourClose,
    onOnboardingTourChange,
    classNames,
    styles,
    unstyled,
    children,
    ...others
  } = props;
  const getStyles = useStyles({
    name: "OnboardingTour",
    classes,
    props,
    classNames,
    styles,
    unstyled
  });
  const onboardingTour = useOnboardingTour(tour, {
    loop,
    onOnboardingTourStart,
    onOnboardingTourEnd,
    onOnboardingTourChange
  });
  const focusRevealProps = _focusRevealProps ? typeof _focusRevealProps === "function" ? _focusRevealProps(onboardingTour) : _focusRevealProps : {};
  const value = {
    ...onboardingTour,
    ...others,
    focusRevealProps,
    onOnboardingTourClose,
    getStyles,
    unstyled
  };
  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
    classNames,
    styles,
    props
  });
  const { selectedStepId: selectedTourId, startTour } = onboardingTour;
  useEffect(() => {
    if (started) {
      startTour();
    }
  }, [started]);
  const wrapChildren = (children2) => {
    if (!started || !selectedTourId) {
      return children2;
    }
    return React.Children.map(children2, (child) => {
      if (React.isValidElement(child)) {
        const tourId = child.props["data-onboarding-tour-id"];
        if (tourId) {
          const mergedFocusRevealProps = {
            ...focusRevealProps,
            ...typeof onboardingTour.currentStep?.focusRevealProps === "function" ? onboardingTour.currentStep.focusRevealProps(onboardingTour) : onboardingTour.currentStep?.focusRevealProps
          };
          return /* @__PURE__ */ React.createElement(
            OnboardingTourFocusReveal,
            {
              ...mergedFocusRevealProps,
              classNames: resolvedClassNames,
              key: `onboarding-tour-${tourId}`,
              popoverContent: /* @__PURE__ */ React.createElement(
                OnboardingTour.PopoverContent,
                {
                  classNames: resolvedClassNames,
                  styles: resolvedStyles,
                  unstyled,
                  tourController: onboardingTour,
                  onOnboardingTourClose,
                  ...others,
                  key: `onboarding-tour-content-${tourId}`
                }
              ),
              focused: tourId === selectedTourId,
              transitionProps: { duration: 0, exitDuration: 0 }
            },
            React.cloneElement(child)
          );
        }
        if (child.props.children) {
          return React.cloneElement(child, {
            children: wrapChildren(child.props.children)
          });
        }
      }
      return child;
    });
  };
  return /* @__PURE__ */ React.createElement(_OnboardingTourProvider, { value }, wrapChildren(children));
}
OnboardingTour.displayName = "OnboardingTour";
OnboardingTour.classes = classes;
OnboardingTour.FocusReveal = OnboardingTourFocusReveal;
OnboardingTour.PopoverContent = OnboardingTourPopoverContent;
OnboardingTour.Target = OnboardingTourTarget;

export { OnboardingTour, defaultProps };
//# sourceMappingURL=OnboardingTour.mjs.map