@cntrl-site/sdk-nextjs 1.9.32 → 1.9.33

package/lib/components/items/ComponentItem/ComponentItem.js

@@ -33,7 +33,7 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
     const Element = component ? component.element : undefined;
     const parameters = layout ? item.layoutParams[layout].parameters : undefined;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: { itemId: item.id }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
       .custom-component-${item.id} {
         width: 100%;
         height: 100%;

package/lib/interactions/InteractionsRegistry.js

@@ -400,35 +400,8 @@ class InteractionsRegistry {
         });
         (_a = this.ctrls.get(itemId)) === null || _a === void 0 ? void 0 : _a.receiveChange();
     }
-    notifyPageOverlay() {
-        for (const interaction of this.interactions) {
-            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const startStateId = interaction.startStateId;
-            if (currentStateId === startStateId)
-                continue;
-            const hasScrollTriggers = interaction.triggers.find((trigger) => trigger.type === 'item-scroll-position' || trigger.type === 'scroll-position');
-            if (hasScrollTriggers)
-                continue;
-            const hoverOutTriggers = interaction.triggers.filter((trigger) => {
-                if (!('triggerEvent' in trigger))
-                    return false;
-                if (trigger.triggerEvent !== 'hover-out')
-                    return false;
-                if (trigger.from !== currentStateId)
-                    return false;
-                if (trigger.to !== startStateId)
-                    return false;
-                return true;
-            });
-            for (const trigger of hoverOutTriggers) {
-                if (!('itemId' in trigger))
-                    continue;
-                const itemId = trigger.itemId;
-                if (this.isItemScrollBasedTrigger(itemId))
-                    continue;
-                this.notifyItemTrigger(itemId, 'hover-out');
-            }
-        }
+    notifyPageOverlay(itemId) {
+        this.notifyItemTrigger(itemId, 'hover-out');
     }
     getCurrentStateByInteractionId(id) {
         let state;

package/lib/provider/InteractionsContext.js

@@ -36,10 +36,11 @@ const InteractionsProvider = ({ article, children }) => {
         });
     }, [registry]);
     (0, react_1.useEffect)(() => {
-        const handlePageOverlay = () => {
-            if (!registry)
+        const handlePageOverlay = (e) => {
+            const itemId = e.detail.itemId;
+            if (!registry || !itemId)
                 return;
-            registry.notifyPageOverlay();
+            registry.notifyPageOverlay(itemId);
         };
         window.addEventListener('page-overlay', handlePageOverlay);
         return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.32",
+  "version": "1.9.33",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^0.1.20",
+    "@cntrl-site/components": "^0.1.21",
     "@cntrl-site/effects": "^1.4.0",
     "@cntrl-site/sdk": "^1.25.6",
     "@types/vimeo__player": "^2.18.0",

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -43,6 +43,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
       >
         {parameters && Element && (
           <Element
+            metadata={{ itemId: item.id }}
             portalId="component-portal"
             content={item.commonParams.content}
             {...parameters}

package/src/interactions/InteractionsRegistry.ts

@@ -402,27 +402,8 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     this.ctrls.get(itemId)?.receiveChange();
   }
 
-  notifyPageOverlay(): void {
-    for (const interaction of this.interactions) {
-      const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-      const startStateId = interaction.startStateId;
-      if (currentStateId === startStateId) continue;
-      const hasScrollTriggers = interaction.triggers.find((trigger) => trigger.type === 'item-scroll-position' || trigger.type === 'scroll-position');
-      if (hasScrollTriggers) continue;
-      const hoverOutTriggers = interaction.triggers.filter((trigger) => {
-        if (!('triggerEvent' in trigger)) return false;
-        if (trigger.triggerEvent !== 'hover-out') return false;
-        if (trigger.from !== currentStateId) return false;
-        if (trigger.to !== startStateId) return false;
-        return true;
-      });
-      for (const trigger of hoverOutTriggers) {
-        if (!('itemId' in trigger)) continue;
-        const itemId = trigger.itemId;
-        if (this.isItemScrollBasedTrigger(itemId)) continue;
-        this.notifyItemTrigger(itemId, 'hover-out');
-      }
-    }
+  notifyPageOverlay(itemId: string): void {
+    this.notifyItemTrigger(itemId, 'hover-out');
   }
 
   private getCurrentStateByInteractionId(id: InteractionId): string {

package/src/provider/InteractionsContext.tsx

@@ -39,13 +39,14 @@ export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, ch
   }, [registry]);
 
   useEffect(() => {
-    const handlePageOverlay = () => {
-      if (!registry) return;
-      registry.notifyPageOverlay();
+    const handlePageOverlay = (e: CustomEvent) => {
+      const itemId = e.detail.itemId;
+      if (!registry || !itemId) return;
+      registry.notifyPageOverlay(itemId);
     };
-    window.addEventListener('page-overlay', handlePageOverlay);
+    window.addEventListener('page-overlay', handlePageOverlay as EventListener);
     return () => {
-      window.removeEventListener('page-overlay', handlePageOverlay);
+      window.removeEventListener('page-overlay', handlePageOverlay as EventListener);
     };
   }, [registry]);