@gfazioli/mantine-onboarding-tour/dist/esm/OnboardingTourTarget/OnboardingTourTarget.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, { useState, useEffect } from 'react';
import { useProps, isElement } from '@mantine/core';
import { useOnboardingTourContext } from '../OnboardingTour.context.mjs';
import { OnboardingTourFocusReveal } from '../OnboardingTourFocusReveal/OnboardingTourFocusReveal.mjs';
import { OnboardingTourPopoverContent } from '../OnboardingTourPopoverContent/OnboardingTourPopoverContent.mjs';

const defaultProps = {
  refProp: "ref"
};
function OnboardingTourTarget(props) {
  const { children, id, refProp, focusRevealProps, ...others } = useProps(
    "OnboardingTourTarget",
    defaultProps,
    props
  );
  const ctx = useOnboardingTourContext();
  const [focused, setFocused] = useState(false);
  useEffect(() => {
    if (ctx && ctx.selectedStepId === id) {
      setFocused(true);
    } else {
      setFocused(false);
    }
  }, [ctx]);
  if (!isElement(children)) {
    throw new Error(
      "OnboardingTour.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
    );
  }
  if (!focused) {
    return children;
  }
  const mergedFocusRevealProps = {
    ...ctx.focusRevealProps,
    ...typeof focusRevealProps === "function" ? focusRevealProps(ctx) : focusRevealProps
  };
  const {
    header,
    title,
    content,
    footer,
    withPrevButton,
    withNextButton,
    withSkipButton,
    withStepper,
    nextStepNavigation,
    endStepNavigation,
    prevStepNavigation,
    skipNavigation
  } = ctx;
  return /* @__PURE__ */ React.createElement(
    OnboardingTourFocusReveal,
    {
      ...mergedFocusRevealProps,
      popoverContent: /* @__PURE__ */ React.createElement(
        OnboardingTourPopoverContent,
        {
          header,
          title,
          content,
          footer,
          nextStepNavigation,
          endStepNavigation,
          prevStepNavigation,
          skipNavigation,
          withNextButton,
          withPrevButton,
          withSkipButton,
          withStepper,
          tourController: ctx,
          onOnboardingTourClose: ctx.onOnboardingTourClose,
          ...others
        }
      ),
      focused: true,
      transitionProps: { duration: 0, exitDuration: 0 }
    },
    children
  );
}
OnboardingTourTarget.displayName = "OnboardingTourTarget";

export { OnboardingTourTarget };
//# sourceMappingURL=OnboardingTourTarget.mjs.map