@primer/react-brand/esm/river/RiverStoryScroll/RiverStoryScrollTracker.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../../node_modules/clsx/dist/clsx.js";
import { useWindowSize as t } from "../../hooks/useWindowSize.js";
import { useStoryScrollContext as n } from "./RiverStoryScrollProvider.js";
import r from "./RiverStoryScroll.module.js";
import { useEffect as i, useRef as a, useState as o } from "react";
import { jsx as s } from "react/jsx-runtime";
//#region src/river/RiverStoryScroll/RiverStoryScrollTracker.tsx
var c = ({ index: c, children: l, className: u = "" }) => {
	let { isLarge: d } = t(), f = a(null), [p, m] = o(!1), { setVisibilityStates: h } = n();
	return i(() => {
		function e() {
			return window.innerWidth / window.innerHeight >= .78;
		}
		let t = ([t]) => {
			e() && (m(t.isIntersecting), h(c, t.isIntersecting));
		}, n = ([t]) => {
			e() || (m(t.isIntersecting), h(c, t.isIntersecting));
		}, r = new IntersectionObserver(t, d ? { threshold: .8 } : {
			rootMargin: "-80% 0% -19.99% 0%",
			threshold: 0
		}), i = new IntersectionObserver(n, d ? { threshold: .8 } : {
			rootMargin: "-65% 0% -34.99% 0%",
			threshold: 0
		});
		return f.current && (r.observe(f.current), i.observe(f.current)), () => {
			r.disconnect(), i.disconnect();
		};
	}, [
		c,
		d,
		h
	]), /* @__PURE__ */ s("div", {
		ref: f,
		className: e(u, p ? r["in-viewport"] : r["outside-viewport"]),
		children: l
	});
};
//#endregion
export { c as RiverStoryScrollTracker };

//# sourceMappingURL=RiverStoryScrollTracker.js.map