import { jsx as _jsx } from "react/jsx-runtime";
import { createRef, forwardRef, useEffect, useRef, useState, } from "react";
import Styles from "./FadeIn.module.scss";
function _FadeIn({ onHidden, children, className = "", active, onClick, ...props }, divRef) {
    if (!divRef) {
        divRef = createRef();
    }
    const [, trigger] = useState(0);
    const prevChildren = useRef(undefined);
    prevChildren.current = children || prevChildren.current;
    useEffect(() => {
        const el = divRef.current;
        const isElHidden = active !== undefined ? !active : !children;
        if (isElHidden) {
            el.classList.remove(Styles.active);
            const handler = () => {
                prevChildren.current = null;
                trigger((a) => a + 1);
                if (onHidden && !el.classList.contains(Styles.active))
                    onHidden();
            };
            el.addEventListener("transitionend", handler);
            return () => {
                el.removeEventListener("transitionend", handler);
            };
        }
        else {
            setTimeout(() => {
                el.classList.add(Styles.active);
            }, 0);
        }
    }, [children, active]);
    return (_jsx("div", { ref: divRef, className: `${Styles.container} ${className}`, onClick: onClick, ...props, children: prevChildren.current }));
}
/**
 * This component wraps content to make it fade in when it appears and fade out when it disappears.
 * It helps animations feel smoother and more natural.
 **/
const FadeIn = forwardRef(_FadeIn);
export default FadeIn;
//# sourceMappingURL=FadeIn.js.map