@gfazioli/mantine-onboarding-tour/dist/cjs/OnboardingTour.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');
var core = require('@mantine/core');
var useOnboardingTour = require('./hooks/use-onboarding-tour/use-onboarding-tour.cjs');
var OnboardingTour_context = require('./OnboardingTour.context.cjs');
var OnboardingTourFocusReveal = require('./OnboardingTourFocusReveal/OnboardingTourFocusReveal.cjs');
var OnboardingTourPopoverContent = require('./OnboardingTourPopoverContent/OnboardingTourPopoverContent.cjs');
var OnboardingTourTarget = require('./OnboardingTourTarget/OnboardingTourTarget.cjs');
var OnboardingTour_module = require('./OnboardingTour.module.css.cjs');

const defaultProps = {};
function OnboardingTour(_props) {
  const props = core.useProps("OnboardingTour", defaultProps, _props);
  const {
    tour,
    started,
    loop,
    focusRevealProps: _focusRevealProps,
    onOnboardingTourStart,
    onOnboardingTourEnd,
    onOnboardingTourClose,
    onOnboardingTourChange,
    classNames,
    styles,
    unstyled,
    children,
    ...others
  } = props;
  const getStyles = core.useStyles({
    name: "OnboardingTour",
    classes: OnboardingTour_module,
    props,
    classNames,
    styles,
    unstyled
  });
  const onboardingTour = useOnboardingTour.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 } = core.useResolvedStylesApi({
    classNames,
    styles,
    props
  });
  const { selectedStepId: selectedTourId, startTour } = onboardingTour;
  React.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.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(OnboardingTour_context._OnboardingTourProvider, { value }, wrapChildren(children));
}
OnboardingTour.displayName = "OnboardingTour";
OnboardingTour.classes = OnboardingTour_module;
OnboardingTour.FocusReveal = OnboardingTourFocusReveal.OnboardingTourFocusReveal;
OnboardingTour.PopoverContent = OnboardingTourPopoverContent.OnboardingTourPopoverContent;
OnboardingTour.Target = OnboardingTourTarget.OnboardingTourTarget;

exports.OnboardingTour = OnboardingTour;
exports.defaultProps = defaultProps;
//# sourceMappingURL=OnboardingTour.cjs.map