@mantine/core/esm/components/Transition/use-transition.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { useMantineTheme } from "../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { useEffect, useRef, useState } from "react";
import { useDidUpdate, useReducedMotion } from "@mantine/hooks";
import ReactDOM from "react-dom";
//#region packages/@mantine/core/src/components/Transition/use-transition.ts
function useTransition({ duration, exitDuration, timingFunction, mounted, onEnter, onExit, onEntered, onExited, enterDelay, exitDelay }) {
	const theme = useMantineTheme();
	const shouldReduceMotion = useReducedMotion();
	const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
	const [transitionDuration, setTransitionDuration] = useState(reduceMotion ? 0 : duration);
	const [transitionStatus, setStatus] = useState(mounted ? "entered" : "exited");
	const transitionTimeoutRef = useRef(-1);
	const delayTimeoutRef = useRef(-1);
	const rafRef = useRef(-1);
	function clearAllTimeouts() {
		window.clearTimeout(transitionTimeoutRef.current);
		window.clearTimeout(delayTimeoutRef.current);
		cancelAnimationFrame(rafRef.current);
	}
	const handleStateChange = (shouldMount) => {
		clearAllTimeouts();
		const preHandler = shouldMount ? onEnter : onExit;
		const handler = shouldMount ? onEntered : onExited;
		const newTransitionDuration = reduceMotion ? 0 : shouldMount ? duration : exitDuration;
		setTransitionDuration(newTransitionDuration);
		if (newTransitionDuration === 0) {
			typeof preHandler === "function" && preHandler();
			typeof handler === "function" && handler();
			setStatus(shouldMount ? "entered" : "exited");
		} else rafRef.current = requestAnimationFrame(() => {
			ReactDOM.flushSync(() => {
				setStatus(shouldMount ? "pre-entering" : "pre-exiting");
			});
			rafRef.current = requestAnimationFrame(() => {
				typeof preHandler === "function" && preHandler();
				setStatus(shouldMount ? "entering" : "exiting");
				transitionTimeoutRef.current = window.setTimeout(() => {
					typeof handler === "function" && handler();
					setStatus(shouldMount ? "entered" : "exited");
				}, newTransitionDuration);
			});
		});
	};
	const handleTransitionWithDelay = (shouldMount) => {
		clearAllTimeouts();
		if (typeof (shouldMount ? enterDelay : exitDelay) !== "number") {
			handleStateChange(shouldMount);
			return;
		}
		delayTimeoutRef.current = window.setTimeout(() => {
			handleStateChange(shouldMount);
		}, shouldMount ? enterDelay : exitDelay);
	};
	useDidUpdate(() => {
		handleTransitionWithDelay(mounted);
	}, [mounted]);
	useEffect(() => () => {
		clearAllTimeouts();
	}, []);
	return {
		transitionDuration,
		transitionStatus,
		transitionTimingFunction: timingFunction || "ease"
	};
}
//#endregion
export { useTransition };

//# sourceMappingURL=use-transition.mjs.map