@gfazioli/mantine-onboarding-tour/dist/esm/OnboardingTourFocusRevealGroup/OnboardingTourFocusRevealGroup.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, useRef } from 'react';
import { useProps, Transition, Overlay } from '@mantine/core';
import { OnboardingTourFocusRevealGroupProvider } from './OnboardingTourFocusRevealGroup.context.mjs';

function OnboardingTourFocusRevealGroup(_props) {
  const groupDefaultProps = {
    focusedMode: "none",
    withReveal: false,
    withOverlay: true,
    overlayProps: {
      blur: 2,
      backgroundOpacity: 0.5,
      color: "black"
    },
    transitionProps: { transition: "fade", duration: 150 },
    popoverProps: {
      position: "left",
      withArrow: true,
      arrowSize: 16,
      arrowRadius: 4,
      offset: -4,
      radius: "md",
      shadow: "xl"
    }
  };
  const props = useProps("OnboardingTourFocusRevealGroup", groupDefaultProps, _props);
  props.overlayProps = { ...groupDefaultProps.overlayProps, ..._props.overlayProps };
  props.transitionProps = { ...groupDefaultProps.transitionProps, ..._props.transitionProps };
  props.popoverProps = { ...groupDefaultProps.popoverProps, ..._props.popoverProps };
  const {
    withReveal,
    withOverlay,
    focusedMode,
    overlayProps,
    transitionProps,
    popoverProps,
    children
  } = props;
  const [overlay, setOverlay] = useState(false);
  const listInViewport = useRef({});
  const areAllNotVisible = () => Object.values(listInViewport.current).every((visible) => !visible);
  const setMeInViewport = (uuid, visible) => {
    listInViewport.current[uuid] = visible;
  };
  const setRequestOverlay = (value) => {
    if (value) {
      setOverlay(true);
    } else if (areAllNotVisible()) {
      setOverlay(false);
    }
  };
  return /* @__PURE__ */ React.createElement(
    OnboardingTourFocusRevealGroupProvider,
    {
      value: {
        setRequestOverlay,
        setMeInViewport,
        focusedMode,
        withReveal,
        withOverlay,
        overlayProps,
        transitionProps,
        popoverProps
      }
    },
    withOverlay && /* @__PURE__ */ React.createElement(
      Transition,
      {
        transition: transitionProps?.transition,
        mounted: overlay,
        duration: transitionProps?.duration,
        exitDuration: transitionProps?.exitDuration
      },
      (transitionStyles) => /* @__PURE__ */ React.createElement(
        Overlay,
        {
          "data-focus-reveal-overlay": true,
          ...overlayProps,
          style: {
            position: "fixed",
            inset: 0,
            ...transitionStyles
          }
        }
      )
    ),
    children
  );
}
OnboardingTourFocusRevealGroup.displayName = "OnboardingTourFocusRevealGroup";

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