@gfazioli/mantine-onboarding-tour/dist/cjs/OnboardingTourFocusReveal/OnboardingTourFocusReveal.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 hooks = require('@mantine/hooks');
var useScrollIntoView = require('../hooks/use-scroll-into-view/use-scroll-into-view.cjs');
var OnboardingTourFocusRevealGroup = require('../OnboardingTourFocusRevealGroup/OnboardingTourFocusRevealGroup.cjs');
var OnboardingTourFocusRevealGroup_context = require('../OnboardingTourFocusRevealGroup/OnboardingTourFocusRevealGroup.context.cjs');
var OnboardingTourFocusReveal_module = require('./OnboardingTourFocusReveal.module.css.cjs');

const defaultProps = {
  focusedMode: "none",
  withReveal: true,
  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"
  }
};
function OnboardingTourFocusReveal(_props) {
  const ctx = OnboardingTourFocusRevealGroup_context.useOnboardingTourFocusRevealGroupContext();
  const props = core.useProps(
    "OnboardingTourFocusReveal",
    {
      ...defaultProps,
      ...ctx ? ctx : {}
    },
    _props
  );
  props.overlayProps = { ...defaultProps.overlayProps, ..._props.overlayProps };
  props.transitionProps = { ...defaultProps.transitionProps, ..._props.transitionProps };
  props.popoverProps = { ...defaultProps.popoverProps, ..._props.popoverProps };
  props.defaultFocused = ctx && _props.defaultFocused === void 0 ? true : _props.defaultFocused;
  const {
    focused,
    defaultFocused,
    withOverlay,
    overlayProps,
    withReveal,
    revealProps,
    transitionProps,
    focusedMode,
    popoverContent,
    popoverProps,
    scrollableRef,
    onChange,
    onFocus,
    onBlur,
    onRevealFinish,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    children,
    className
  } = props;
  const getStyles = core.useStyles({
    name: "OnboardingTourFocusReveal",
    props,
    classes: OnboardingTourFocusReveal_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars
  });
  const uuid = React.useId();
  const [_focused, setFocused, controlled] = hooks.useUncontrolled({
    value: focused,
    defaultValue: defaultFocused,
    finalValue: false,
    onChange
  });
  const blur = () => {
    setFocused(false);
    _focused && onBlur?.();
  };
  const focus = () => {
    setFocused(true);
    !_focused && onFocus?.();
  };
  const [realFocused, setRealFocused] = React.useState(false);
  const fallbackRef = React.useRef(null);
  const { scrollIntoView, targetRef } = useScrollIntoView.useScrollIntoView({
    ...revealProps,
    onScrollFinish: onRevealFinish,
    scrollableRef: scrollableRef || fallbackRef
  });
  const { ref: inViewportRef, inViewport } = hooks.useInViewport();
  const mergedRef = hooks.useMergedRef(inViewportRef, targetRef);
  React.useEffect(() => {
    ctx?.setMeInViewport(uuid, inViewport);
    if (targetRef.current) {
      if (_focused || defaultFocused) {
        if (withReveal) {
          scrollIntoView({ alignment: "center" });
        }
      }
      if (_focused && inViewport && !realFocused) {
        setRealFocused(true);
        setFocused(_focused && inViewport);
      } else if (!_focused && realFocused) {
        setRealFocused(false);
      }
    }
  }, [_focused, withReveal, inViewport]);
  hooks.useDidUpdate(() => {
    ctx?.setMeInViewport(uuid, inViewport);
    if (_focused && !inViewport) {
      blur();
      setRealFocused(false);
      ctx?.setRequestOverlay(false);
    }
    if (inViewport && !controlled && defaultFocused === true) {
      focus();
      setRealFocused(true);
      ctx?.setRequestOverlay(true);
    }
  }, [inViewport, defaultFocused]);
  const clonedChildren = React.useMemo(() => {
    const child = children;
    const newProps = {
      ...realFocused && { "data-onboarding-tour-focus-reveal-focused": true },
      "data-onboarding-tour-focus-reveal-mode": focusedMode,
      ref: mergedRef,
      className: [realFocused ? OnboardingTourFocusReveal_module.focused : "", className, child.props.className].filter(Boolean).join(" "),
      style: {
        position: "relative",
        ...child.props.style,
        zIndex: realFocused ? 201 : 0
      }
    };
    newProps["data-popover-dropdown"] = !!popoverContent;
    return /* @__PURE__ */ React.createElement(core.Popover, { opened: realFocused && !!popoverContent, withinPortal: false, ...popoverProps }, /* @__PURE__ */ React.createElement(core.Popover.Target, null, React.cloneElement(child, newProps)), /* @__PURE__ */ React.createElement(core.Popover.Dropdown, null, popoverContent));
  }, [children, realFocused, _focused, inViewport, defaultFocused]);
  if (ctx) {
    return clonedChildren;
  }
  return /* @__PURE__ */ React.createElement(React.Fragment, null, withOverlay && /* @__PURE__ */ React.createElement(
    core.Transition,
    {
      transition: transitionProps?.transition,
      mounted: _focused && inViewport,
      duration: transitionProps?.duration,
      exitDuration: transitionProps?.exitDuration
    },
    (transitionStyles) => /* @__PURE__ */ React.createElement(
      core.Overlay,
      {
        "data-onboarding-tour-focus-reveal-overlay": true,
        ...overlayProps,
        ...getStyles("overlay", {
          className: overlayProps?.className,
          style: [transitionStyles, overlayProps?.style]
        })
      }
    )
  ), clonedChildren);
}
OnboardingTourFocusReveal.classes = OnboardingTourFocusReveal_module;
OnboardingTourFocusReveal.displayName = "OnboardingTourFocusReveal";
OnboardingTourFocusReveal.Group = OnboardingTourFocusRevealGroup.OnboardingTourFocusRevealGroup;

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