@cntrl-site/sdk-nextjs 1.8.9-alpha.1 → 1.8.9-alpha.2

package/lib/provider/InteractionsContext.js

@@ -5,24 +5,25 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InteractionsRegistry_1 = require("../interactions/InteractionsRegistry");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const ArticleRectContext_1 = require("./ArticleRectContext");
 exports.InteractionsContext = (0, react_1.createContext)(undefined);
 const InteractionsProvider = ({ article, children }) => {
     const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const registry = (0, react_1.useMemo)(() => {
         if (!layoutId)
             return;
         return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId);
     }, [layoutId]);
     (0, react_1.useEffect)(() => {
-        if (!registry)
+        if (!registry || !articleRectObserver)
             return;
         const handleScroll = () => {
-            const scrollY = window.scrollY;
-            registry.notifyScrollTrigger(scrollY);
+            registry.notifyScrollTrigger(window.scrollY);
         };
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, [registry]);
+        articleRectObserver.on('scroll', handleScroll);
+        return () => articleRectObserver.off('scroll', handleScroll);
+    }, [registry, articleRectObserver]);
     return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
 };
 exports.InteractionsProvider = InteractionsProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.8.9-alpha.1",
+  "version": "1.8.9-alpha.2",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/provider/InteractionsContext.tsx

@@ -2,6 +2,7 @@ import { createContext, FC, PropsWithChildren, useContext, useEffect, useMemo }
 import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
 import { Article } from '@cntrl-site/sdk';
 import { useCurrentLayout } from '../common/useCurrentLayout';
+import { ArticleRectContext } from './ArticleRectContext';
 
 export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
 
@@ -11,20 +12,20 @@ interface Props {
 
 export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, children }) => {
   const { layoutId } = useCurrentLayout();
+  const articleRectObserver = useContext(ArticleRectContext);
   const registry = useMemo(() => {
     if (!layoutId) return;
     return new InteractionsRegistry(article, layoutId);
   }, [layoutId]);
 
   useEffect(() => {
-    if (!registry) return;
+    if (!registry || !articleRectObserver) return;
     const handleScroll = () => {
-      const scrollY = window.scrollY;
-      registry.notifyScrollTrigger(scrollY);
+      registry.notifyScrollTrigger(window.scrollY);
     };
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [registry]);
+    articleRectObserver.on('scroll', handleScroll);
+    return () => articleRectObserver.off('scroll', handleScroll);
+  }, [registry, articleRectObserver]);
 
   return (
     <InteractionsContext.Provider value={registry}>