@gfazioli/mantine-onboarding-tour/dist/cjs/OnboardingTourTarget/OnboardingTourTarget.cjs

A Mantine 9 onboarding tour component with focus-reveal overlays, cutout highlights, step-by-step popover navigation, and compound components for guided user experiences.

'use client';
'use strict';

var core = require('@mantine/core');
var React = require('react');
var OnboardingTour_context = require('../OnboardingTour.context.cjs');
var OnboardingTourFocusReveal = require('../OnboardingTourFocusReveal/OnboardingTourFocusReveal.cjs');
var OnboardingTourPopoverContent = require('../OnboardingTourPopoverContent/OnboardingTourPopoverContent.cjs');

const defaultProps = {
  refProp: "ref"
};
function OnboardingTourTarget(props) {
  const { children, id, refProp, focusRevealProps, ...others } = core.useProps(
    "OnboardingTourTarget",
    defaultProps,
    props
  );
  const ctx = OnboardingTour_context.useOnboardingTourContext();
  const [focused, setFocused] = React.useState(false);
  React.useEffect(() => {
    if (ctx && ctx.selectedStepId === id) {
      setFocused(true);
    } else {
      setFocused(false);
    }
  }, [ctx?.selectedStepId, id]);
  if (!core.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 || !ctx) {
    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.OnboardingTourFocusReveal,
    {
      ...mergedFocusRevealProps,
      withOverlay: false,
      popoverProps: {
        ...mergedFocusRevealProps.popoverProps,
        withinPortal: true
      },
      popoverContent: /* @__PURE__ */ React.createElement(
        OnboardingTourPopoverContent.OnboardingTourPopoverContent,
        {
          header,
          title,
          content,
          footer,
          nextStepNavigation,
          endStepNavigation,
          prevStepNavigation,
          skipNavigation,
          withNextButton,
          withPrevButton,
          withSkipButton,
          withStepper,
          ...others,
          tourController: ctx
        }
      ),
      focused: true,
      transitionProps: { duration: 0, exitDuration: 0 }
    },
    children
  );
}
OnboardingTourTarget.displayName = "OnboardingTourTarget";

exports.OnboardingTourTarget = OnboardingTourTarget;
//# sourceMappingURL=OnboardingTourTarget.cjs.map