@gfazioli/mantine-onboarding-tour/dist/cjs/hooks/use-scroll-into-view/use-scroll-into-view.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 hooks = require('@mantine/hooks');
var easeInOutQuad = require('./utils/ease-in-out-quad.cjs');
var getRelativePosition = require('./utils/get-relative-position.cjs');
var getScrollStart = require('./utils/get-scroll-start.cjs');
var setScrollParam = require('./utils/set-scroll-param.cjs');

function useScrollIntoView({
  duration = 1250,
  axis = "y",
  onScrollFinish,
  easing = easeInOutQuad.easeInOutQuad,
  offset = 0,
  cancelable = true,
  isList = false,
  scrollableRef
} = {}) {
  const frameID = React.useRef(0);
  const startTime = React.useRef(0);
  const shouldStop = React.useRef(false);
  const targetRef = React.useRef(null);
  const reducedMotion = hooks.useReducedMotion();
  const cancel = () => {
    if (frameID.current) {
      cancelAnimationFrame(frameID.current);
    }
  };
  const scrollIntoView = React.useCallback(
    ({ alignment = "start" } = {}) => {
      shouldStop.current = false;
      if (frameID.current) {
        cancel();
      }
      const start = getScrollStart.getScrollStart({ parent: scrollableRef.current, axis }) ?? 0;
      const change = getRelativePosition.getRelativePosition({
        parent: scrollableRef.current,
        target: targetRef.current,
        axis,
        alignment,
        offset,
        isList
      }) - (scrollableRef.current ? 0 : start);
      function animateScroll() {
        if (startTime.current === 0) {
          startTime.current = performance.now();
        }
        const now = performance.now();
        const elapsed = now - startTime.current;
        const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;
        const distance = start + change * easing(t);
        setScrollParam.setScrollParam({
          parent: scrollableRef.current,
          axis,
          distance
        });
        if (!shouldStop.current && t < 1) {
          frameID.current = requestAnimationFrame(animateScroll);
        } else {
          typeof onScrollFinish === "function" && onScrollFinish();
          startTime.current = 0;
          frameID.current = 0;
          cancel();
        }
      }
      animateScroll();
    },
    [axis, duration, easing, isList, offset, onScrollFinish, reducedMotion]
  );
  const handleStop = () => {
    if (cancelable) {
      shouldStop.current = true;
    }
  };
  hooks.useWindowEvent("wheel", handleStop, {
    passive: true
  });
  hooks.useWindowEvent("touchmove", handleStop, {
    passive: true
  });
  React.useEffect(() => cancel, []);
  return {
    scrollableRef,
    targetRef,
    scrollIntoView,
    cancel
  };
}

exports.useScrollIntoView = useScrollIntoView;
//# sourceMappingURL=use-scroll-into-view.cjs.map