@elementor/editor-interactions 4.0.0-679 → 4.0.0-680

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.0.0-679",
+  "version": "4.0.0-680",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-controls": "4.0.0-679",
-    "@elementor/editor-elements": "4.0.0-679",
-    "@elementor/editor-mcp": "4.0.0-679",
-    "@elementor/editor-props": "4.0.0-679",
-    "@elementor/editor-responsive": "4.0.0-679",
-    "@elementor/editor-ui": "4.0.0-679",
-    "@elementor/editor-v1-adapters": "4.0.0-679",
+    "@elementor/editor-controls": "4.0.0-680",
+    "@elementor/editor-elements": "4.0.0-680",
+    "@elementor/editor-mcp": "4.0.0-680",
+    "@elementor/editor-props": "4.0.0-680",
+    "@elementor/editor-responsive": "4.0.0-680",
+    "@elementor/editor-ui": "4.0.0-680",
+    "@elementor/editor-v1-adapters": "4.0.0-680",
     "@elementor/icons": "^1.68.0",
-    "@elementor/schema": "4.0.0-679",
-    "@elementor/session": "4.0.0-679",
+    "@elementor/schema": "4.0.0-680",
+    "@elementor/session": "4.0.0-680",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-679",
-    "@elementor/events": "4.0.0-679",
+    "@elementor/utils": "4.0.0-680",
+    "@elementor/events": "4.0.0-680",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/hooks/use-element-interactions.ts

@@ -2,18 +2,22 @@ import { useState } from 'react';
 import { type ElementID, type ElementInteractions, getElementInteractions } from '@elementor/editor-elements';
 import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';
 
+import { filterInteractions } from '../utils/filter-interactions';
+
 export const useElementInteractions = ( elementId: ElementID ) => {
 	const [ interactions, setInteractions ] = useState< ElementInteractions >( () => {
 		const initial = getElementInteractions( elementId );
+		const filteredInteractions = filterInteractions( initial?.items ?? [] );
 
-		return initial ?? { version: 1, items: [] };
+		return { version: initial?.version ?? 1, items: filteredInteractions };
 	} );
 
 	useListenTo(
 		windowEvent( 'elementor/element/update_interactions' ),
 		() => {
 			const newInteractions = getElementInteractions( elementId );
-			setInteractions( newInteractions ?? { version: 1, items: [] } );
+			const filteredInteractions = filterInteractions( newInteractions?.items ?? [] );
+			setInteractions( { version: newInteractions?.version ?? 1, items: filteredInteractions } );
 		},
 		[ elementId ]
 	);

package/src/init.ts

@@ -33,7 +33,7 @@ export function init() {
 		registerInteractionsControl( {
 			type: 'replay',
 			component: Replay,
-			options: [ 'true', 'false' ],
+			options: [ 'no' ],
 		} );
 
 		registerInteractionsControl( {

package/src/interactions-controls-registry.ts

@@ -9,7 +9,7 @@ import {
 	type TimesFieldProps,
 } from './types';
 
-type InteractionsControlType =
+export type InteractionsControlType =
 	| 'trigger'
 	| 'effect'
 	| 'effectType'

package/src/utils/filter-interactions.ts

@@ -0,0 +1,9 @@
+import { type InteractionItemPropValue } from '@elementor/editor-elements';
+
+import { isSupportedInteractionItem } from './is-supported-interaction-item';
+
+export const filterInteractions = ( interactions: InteractionItemPropValue[] ) => {
+	return interactions.filter( ( interaction ) => {
+		return isSupportedInteractionItem( interaction );
+	} );
+};

package/src/utils/is-supported-interaction-item.ts

@@ -0,0 +1,39 @@
+import { getInteractionsControlOptions, type InteractionsControlType } from '../interactions-controls-registry';
+import { type InteractionItemPropValue } from '../types';
+import { extractBoolean, extractString } from '../utils/prop-value-utils';
+
+export function isSupportedInteractionItem( interaction: InteractionItemPropValue ): boolean {
+	const value = interaction.value;
+
+	const replay = extractBoolean( value.animation.value.config?.value.replay );
+	if ( true === replay ) {
+		return hasSupport( 'replay', 'yes' );
+	}
+
+	const trigger = extractString( value.trigger );
+	const easing = extractString( value.animation.value.config?.value.easing );
+	const effect = extractString( value.animation.value.effect );
+
+	const checks: Array< [ string, string ] > = [
+		[ 'trigger', trigger ],
+		[ 'easing', easing ],
+		[ 'effect', effect ],
+	];
+
+	return checks.every( ( [ controlType, controlValue ] ) => {
+		if ( controlValue === '' || controlValue === null ) {
+			return true;
+		}
+		return hasSupport( controlType, controlValue );
+	} );
+}
+
+function hasSupport( controlType: string, controlValue: string ) {
+	const supportedOptions = getInteractionsControlOptions( controlType as InteractionsControlType );
+
+	if ( 1 > supportedOptions.length ) {
+		return true;
+	}
+
+	return supportedOptions.includes( controlValue );
+}