@gfazioli/mantine-onboarding-tour/dist/esm/OnboardingTourPopoverContent/OnboardingTourPopoverContent.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, { useMemo } from 'react';
import { factory, useProps, useStyles, Group, Stepper, Box, Stack, Text, Anchor, Button } from '@mantine/core';
import classes from './OnboardingTourPopoverContent.module.css.mjs';

const defaultProps = {
  withPrevButton: true,
  withNextButton: true,
  withSkipButton: true,
  withStepper: true,
  nextStepNavigation: "Next",
  endStepNavigation: "End",
  prevStepNavigation: "Prev",
  skipNavigation: "Skip",
  stepperStepProps: {
    allowStepClick: true
  }
};
const OnboardingTourPopoverContent = factory(
  (_props, ref) => {
    const props = useProps("OnboardingTourPopoverContent", defaultProps, _props);
    const {
      tourController,
      loop,
      header,
      title,
      content,
      footer,
      withPrevButton,
      withNextButton,
      withSkipButton,
      withStepper,
      nextStepNavigation,
      endStepNavigation,
      prevStepNavigation,
      skipNavigation,
      stepper,
      stepperStepProps,
      stepperProps,
      onOnboardingTourClose,
      classNames,
      style,
      styles,
      unstyled,
      vars,
      className,
      ...others
    } = props;
    const getStyles = useStyles({
      name: "OnboardingTourPopoverContent",
      props,
      classes,
      className,
      style,
      classNames,
      styles,
      unstyled,
      vars
      //varsResolver,
    });
    const {
      tour,
      currentStep,
      currentStepIndex,
      setCurrentStepIndex: setCurrentStep,
      endTour,
      nextStep: nextTour,
      prevStep: prevTour
    } = tourController;
    if (!tourController || !currentStep) {
      return null;
    }
    const {
      header: headerTourStep,
      title: titleTourStep,
      content: contentTourStep,
      footer: footerTourStep
    } = currentStep;
    const withFunction = (prop, wrapper) => {
      if (typeof prop === "function") {
        return prop(tourController);
      } else if (typeof prop === "string" && wrapper) {
        return wrapper(prop);
      }
      return prop;
    };
    const skipNavigationComponent = withSkipButton && withFunction(skipNavigation, (label) => /* @__PURE__ */ React.createElement(
      Anchor,
      {
        size: "xs",
        onClick: () => {
          endTour();
          onOnboardingTourClose?.();
        }
      },
      label
    )) || /* @__PURE__ */ React.createElement("div", null);
    const headerComponent = withFunction(header || headerTourStep);
    const titleComponent = withFunction(
      title || titleTourStep,
      (label) => /* @__PURE__ */ React.createElement(Text, { fw: 800, size: "xl" }, label)
    );
    const contentComponent = withFunction(content || contentTourStep);
    const footerComponent = withFunction(footer || footerTourStep);
    const prevNavigationComponent = withPrevButton && (currentStepIndex > 0 || loop) ? withFunction(prevStepNavigation, (label) => /* @__PURE__ */ React.createElement(Button, { variant: "light", size: "xs", onClick: prevTour }, label)) : /* @__PURE__ */ React.createElement("div", null);
    const nextNavigationComponent = withNextButton && (currentStepIndex < tour.length - 1 || loop) && withFunction(nextStepNavigation, (label) => /* @__PURE__ */ React.createElement(Button, { variant: "light", size: "xs", onClick: nextTour }, label));
    const endNavigationComponent = withNextButton && currentStepIndex === tour.length - 1 && !loop && withFunction(endStepNavigation, (label) => /* @__PURE__ */ React.createElement(Button, { size: "xs", onClick: nextTour }, label));
    const stepperComponent = withStepper && (withFunction(stepper) || /* @__PURE__ */ React.createElement(Group, { grow: true }, /* @__PURE__ */ React.createElement(
      Stepper,
      {
        ...stepperProps,
        onStepClick: setCurrentStep,
        classNames: {
          stepIcon: classes.stepIcon,
          separator: classes.separator
        },
        active: currentStepIndex,
        size: "xs"
      },
      tour.map((step) => /* @__PURE__ */ React.createElement(Stepper.Step, { ...stepperStepProps, key: step.id, value: step.id }))
    )));
    return useMemo(
      () => /* @__PURE__ */ React.createElement(Box, { ref, ...getStyles("popoverContent"), ...others }, /* @__PURE__ */ React.createElement(Stack, null, headerComponent, titleComponent, contentComponent, /* @__PURE__ */ React.createElement(Group, { justify: "space-between" }, skipNavigationComponent, /* @__PURE__ */ React.createElement(Group, { justify: "space-between" }, prevNavigationComponent, nextNavigationComponent, endNavigationComponent)), stepperComponent, footerComponent)),
      [
        withSkipButton,
        withPrevButton,
        withNextButton,
        withStepper,
        nextStepNavigation,
        prevStepNavigation,
        endStepNavigation,
        skipNavigation
      ]
    );
  }
);
OnboardingTourPopoverContent.displayName = "OnboardingTourPopoverContent";

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