{"version":3,"file":"useIntersectionObserver.cjs","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import {\n    type MutableRefObject,\n    type RefObject,\n    useEffect,\n    useRef,\n} from \"react\";\n\ntype ValidElement = HTMLElement | SVGElement;\ntype Target =\n    | MutableRefObject<ValidElement>\n    | RefObject<ValidElement>\n    | MutableRefObject<ValidElement | null>\n    | RefObject<ValidElement | null>\n    | MutableRefObject<NodeListOf<ValidElement>>\n    | RefObject<NodeListOf<ValidElement>>\n    | MutableRefObject<NodeListOf<ValidElement> | null>\n    | RefObject<NodeListOf<ValidElement> | null>\n    | NodeListOf<ValidElement>;\n\nfunction isNodeList(\n    target: Target | ValidElement,\n): target is NodeListOf<ValidElement> {\n    return (target as NodeListOf<ValidElement>).forEach !== undefined;\n}\n\nconst hasWindowWithIntersectionObserver = () =>\n    typeof window !== \"undefined\" &&\n    typeof IntersectionObserver !== \"undefined\";\n\n/**\n * Hook som gjør det enkelt å observere om et element er synlig i viewporten.\n *\n * @param target Elementet eller elementene som skal observeres. Du kan sende in en React ref til et HTMLElement eller SVG Element, eller en NodeList av samme type elementer (returneres f.eks. av document.querySelectorAll), eller en React ref med en NodeList av samme type elementer.\n * @param onIntersect Callback-funksjon som utføres når et av elementene som observeres overlapper angitt mål. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.\n * @param fallback Funksjon som kalles dersom nettleseren ikke støtter IntersectionOpserver-APIet.\n * @param options Objekt med innstillinger for oberveren. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.\n */\nexport const useIntersectionObserver = (\n    target: Target,\n    onIntersect: IntersectionObserverCallback,\n    fallback?: VoidFunction | null,\n    options?: Partial<IntersectionObserverInit>,\n): void => {\n    const observerRef = useRef<IntersectionObserver>(null);\n\n    useEffect(() => {\n        let observer = observerRef.current;\n\n        if (hasWindowWithIntersectionObserver()) {\n            if (observer) {\n                observer.disconnect();\n            }\n\n            observer = new IntersectionObserver(onIntersect, options);\n\n            if (isNodeList(target)) {\n                for (const element of target) {\n                    observer?.observe(element);\n                }\n            } else if (target.current && isNodeList(target.current)) {\n                for (const element of target.current) {\n                    observer?.observe(element);\n                }\n            } else if (target.current) {\n                observer.observe(target.current);\n            }\n        } else if (fallback) {\n            fallback();\n        }\n\n        return () => {\n            if (hasWindowWithIntersectionObserver() && observer) {\n                observer.disconnect();\n            }\n        };\n    }, [target, onIntersect, fallback, options]);\n};\n"],"names":["isNodeList","target","forEach","hasWindowWithIntersectionObserver","window","IntersectionObserver","onIntersect","fallback","options","observerRef","useRef","useEffect","observer","current","disconnect","element","observe"],"mappings":"yGAmBA,SAASA,EACLC,GAEA,YAAwD,IAAhDA,EAAoCC,OAChD,CAEA,MAAMC,EAAoC,WAC/BC,OAAW,YACXC,qBAAyB,oCAUG,CACnCJ,EACAK,EACAC,EACAC,KAEA,MAAMC,EAAcC,EAAAA,OAA6B,MAEjDC,EAAAA,UAAU,KACN,IAAIC,EAAWH,EAAYI,QAE3B,GAAIV,IAOA,GANIS,GACAA,EAASE,aAGbF,EAAW,IAAIP,qBAAqBC,EAAaE,GAE7CR,EAAWC,GACX,IAAA,MAAWc,KAAWd,EAClBW,GAAUI,QAAQD,QAAO,GAEtBd,EAAOY,SAAWb,EAAWC,EAAOY,SAC3C,IAAA,MAAWE,KAAWd,EAAOY,QACzBD,GAAUI,QAAQD,QAEfd,EAAOY,SACdD,EAASI,QAAQf,EAAOY,cAErBN,GACPA,IAGJ,MAAO,KACCJ,KAAuCS,GACvCA,EAASE,eAGlB,CAACb,EAAQK,EAAaC,EAAUC"}