@elementor/editor-interactions 4.0.0-manual → 4.1.0-685

package/src/mcp/tools/manage-element-interaction-tool.ts

@@ -5,7 +5,12 @@ import { isProActive } from '@elementor/utils';
 
 import { interactionsRepository } from '../../interactions-repository';
 import { type ElementInteractions } from '../../types';
-import { createInteractionItem, extractString } from '../../utils/prop-value-utils';
+import {
+	createInteractionItem,
+	extractExcludedBreakpoints,
+	extractSize,
+	extractString,
+} from '../../utils/prop-value-utils';
 import { generateTempInteractionId } from '../../utils/temp-id-utils';
 import { MAX_INTERACTIONS_PER_ELEMENT } from '../constants';
 import { INTERACTIONS_SCHEMA_URI } from '../resources/interactions-schema-resource';
@@ -16,6 +21,8 @@ const EMPTY_INTERACTIONS: ElementInteractions = {
 	items: [],
 };
 
+const EFFECTS_WITHOUT_TYPE = [ 'custom' ];
+
 export const initManageElementInteractionTool = ( reg: MCPRegistryEntry ) => {
 	const { addTool } = reg;
 	const extendedSchema = isProActive() ? { ...baseSchema, ...proSchema } : baseSchema;
@@ -55,18 +62,44 @@ export const initManageElementInteractionTool = ( reg: MCPRegistryEntry ) => {
 			[ key: string ]: unknown;
 		} ) => {
 			const { elementId, action, interactionId, ...animationData } = input;
+			const { effectType, ...restAnimationData } = animationData as {
+				effectType?: string;
+				[ key: string ]: unknown;
+			};
+			const effect = restAnimationData.effect as string | undefined;
+			const resolvedType =
+				effectType ?? ( effect && ! EFFECTS_WITHOUT_TYPE.includes( effect ) ? 'in' : undefined );
 
 			const allInteractions = interactionsRepository.all();
 			const elementData = allInteractions.find( ( data ) => data.elementId === elementId );
 			const currentInteractions: ElementInteractions = elementData?.interactions ?? EMPTY_INTERACTIONS;
 
 			if ( action === 'get' ) {
+				const summary = currentInteractions.items.map( ( item ) => {
+					const { value } = item;
+					const animValue = value.animation.value;
+					const timingValue = animValue.timing_config.value;
+					const configValue = animValue.config.value;
+
+					return {
+						id: extractString( value.interaction_id ),
+						trigger: extractString( value.trigger ),
+						effect: extractString( animValue.effect ),
+						effectType: extractString( animValue.type ),
+						direction: extractString( animValue.direction ),
+						duration: extractSize( timingValue.duration ),
+						delay: extractSize( timingValue.delay ),
+						easing: extractString( configValue.easing ),
+						excludedBreakpoints: extractExcludedBreakpoints( value.breakpoints ),
+					};
+				} );
+
 				return {
 					success: true,
 					elementId,
 					action,
-					interactions: currentInteractions.items,
-					count: currentInteractions.items.length,
+					interactions: summary,
+					count: summary.length,
 				};
 			}
 
@@ -82,7 +115,8 @@ export const initManageElementInteractionTool = ( reg: MCPRegistryEntry ) => {
 
 					const newItem = createInteractionItem( {
 						interactionId: generateTempInteractionId(),
-						...animationData,
+						...restAnimationData,
+						type: resolvedType,
 					} );
 
 					updatedItems = [ ...updatedItems, newItem ];
@@ -106,7 +140,8 @@ export const initManageElementInteractionTool = ( reg: MCPRegistryEntry ) => {
 
 					const updatedItem = createInteractionItem( {
 						interactionId,
-						...animationData,
+						...restAnimationData,
+						type: resolvedType,
 					} );
 
 					updatedItems = [

package/src/types.ts

@@ -31,7 +31,10 @@ export type InteractionConstants = {
 	defaultDelay: number;
 	slideDistance: number;
 	scaleStart: number;
-	easing: string;
+	defaultEasing: string;
+	relativeTo: string;
+	start: number;
+	end: number;
 };
 
 export type InteractionsConfig = {
@@ -47,6 +50,8 @@ export type FieldProps< T = string > = {
 };
 
 export type ReplayFieldProps = FieldProps< boolean >;
+export type RepeatFieldProps = FieldProps< string >;
+export type TimesFieldProps = FieldProps< number >;
 export type DirectionFieldProps = FieldProps< string > & {
 	interactionType: string;
 };

package/src/ui/interactions-promotion-chip.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { forwardRef, type MouseEvent, type RefObject, useImperativeHandle, useState } from 'react';
+import { forwardRef, type MouseEvent, type RefObject, useCallback, useImperativeHandle, useState } from 'react';
+import { type PromotionTrackingData, trackUpgradePromotionClick, trackViewPromotion } from '@elementor/editor-controls';
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from '@elementor/editor-ui';
 import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -8,6 +9,7 @@ export type InteractionsPromotionChipProps = {
 	content: string;
 	upgradeUrl: string;
 	anchorRef?: RefObject< HTMLElement | null >;
+	trackingData: PromotionTrackingData;
 };
 
 export type InteractionsPromotionChipRef = {
@@ -15,14 +17,21 @@ export type InteractionsPromotionChipRef = {
 };
 
 export const InteractionsPromotionChip = forwardRef< InteractionsPromotionChipRef, InteractionsPromotionChipProps >(
-	( { content, upgradeUrl, anchorRef }, ref ) => {
+	( { content, upgradeUrl, anchorRef, trackingData }, ref ) => {
 		const [ isOpen, setIsOpen ] = useState( false );
 
 		useCanvasClickHandler( isOpen, () => setIsOpen( false ) );
 
-		const toggle = () => setIsOpen( ( prev ) => ! prev );
+		const toggle = useCallback( () => {
+			setIsOpen( ( prev ) => {
+				if ( ! prev ) {
+					trackViewPromotion( trackingData );
+				}
+				return ! prev;
+			} );
+		}, [ trackingData ] );
 
-		useImperativeHandle( ref, () => ( { toggle } ), [] );
+		useImperativeHandle( ref, () => ( { toggle } ), [ toggle ] );
 
 		const handleToggle = ( e: MouseEvent ) => {
 			e.stopPropagation();
@@ -42,6 +51,7 @@ export const InteractionsPromotionChip = forwardRef< InteractionsPromotionChipRe
 					e.stopPropagation();
 					setIsOpen( false );
 				} }
+				onCtaClick={ () => trackUpgradePromotionClick( trackingData ) }
 			>
 				<Box
 					onMouseDown={ ( e: MouseEvent ) => e.stopPropagation() }

package/src/ui/promotion-select.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { type MouseEvent, useRef } from 'react';
+import { type PromotionTrackingData } from '@elementor/editor-controls';
 import { MenuListItem } from '@elementor/editor-ui';
 import { MenuSubheader, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -14,6 +15,7 @@ type PromotionSelectProps = {
 	promotionLabel?: string;
 	promotionContent: string;
 	upgradeUrl: string;
+	trackingData: PromotionTrackingData;
 };
 
 export function PromotionSelect( {
@@ -24,6 +26,7 @@ export function PromotionSelect( {
 	promotionLabel,
 	promotionContent,
 	upgradeUrl,
+	trackingData,
 }: PromotionSelectProps ) {
 	const promotionRef = useRef< InteractionsPromotionChipRef >( null );
 	const anchorRef = useRef< HTMLElement >( null );
@@ -63,6 +66,7 @@ export function PromotionSelect( {
 					upgradeUrl={ upgradeUrl }
 					ref={ promotionRef }
 					anchorRef={ anchorRef }
+					trackingData={ trackingData }
 				/>
 			</MenuSubheader>
 

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/get-interactions-config.ts

@@ -1,15 +1,5 @@
 import { type InteractionsConfig } from '../types';
 
-const DEFAULT_CONFIG: InteractionsConfig = {
-	constants: {
-		defaultDuration: 300,
-		defaultDelay: 0,
-		slideDistance: 100,
-		scaleStart: 0.5,
-		easing: 'linear',
-	},
-};
-
 export function getInteractionsConfig(): InteractionsConfig {
-	return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
+	return window.ElementorInteractionsConfig ?? ( {} as InteractionsConfig );
 }

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 );
+}

package/src/utils/prop-value-utils.ts

@@ -17,6 +17,7 @@ import {
 	type TimingConfigPropValue,
 } from '../types';
 import { formatSizeValue, parseSizeValue } from '../utils/size-transform-utils';
+import { getInteractionsConfig } from './get-interactions-config';
 import { generateTempInteractionId } from './temp-id-utils';
 
 export const createString = ( value: string ): StringPropValue => ( {
@@ -46,24 +47,31 @@ export const createConfig = ( {
 	replay,
 	easing = 'easeIn',
 	relativeTo = '',
+	repeat = '',
+	times = 1,
 	start = 85,
 	end = 15,
 }: {
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
+	repeat?: string;
+	times?: number;
 	start?: SizeStringValue;
 	end?: SizeStringValue;
-} ): ConfigPropValue => ( {
-	$$type: 'config',
-	value: {
-		replay: createBoolean( replay ),
-		easing: createString( easing ),
-		relativeTo: createString( relativeTo ),
-		start: createSize( start, '%' ),
-		end: createSize( end, '%' ),
-	},
-} );
+} ): ConfigPropValue =>
+	( {
+		$$type: 'config',
+		value: {
+			replay: createBoolean( replay ),
+			easing: createString( easing ),
+			relativeTo: createString( relativeTo ),
+			repeat: createString( repeat ),
+			times: createNumber( times ),
+			start: createSize( start, '%' ),
+			end: createSize( end, '%' ),
+		},
+	} ) as ConfigPropValue;
 
 const createSize = ( value?: SizeStringValue, defaultUnit?: Unit, defaultValue?: SizeStringValue ) => {
 	if ( ! value ) {
@@ -102,6 +110,8 @@ export const createAnimationPreset = ( {
 	replay = false,
 	easing = 'easeIn',
 	relativeTo,
+	repeat,
+	times,
 	start,
 	end,
 	customEffects,
@@ -114,6 +124,8 @@ export const createAnimationPreset = ( {
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
+	repeat?: string;
+	times?: number;
 	start?: SizeStringValue;
 	end?: SizeStringValue;
 	customEffects?: PropValue;
@@ -129,6 +141,8 @@ export const createAnimationPreset = ( {
 			replay,
 			easing,
 			relativeTo,
+			repeat,
+			times,
 			start,
 			end,
 		} ),
@@ -146,6 +160,8 @@ export const createInteractionItem = ( {
 	replay = false,
 	easing = 'easeIn',
 	relativeTo,
+	repeat,
+	times,
 	start,
 	end,
 	excludedBreakpoints,
@@ -161,6 +177,8 @@ export const createInteractionItem = ( {
 	replay?: boolean;
 	easing?: string;
 	relativeTo?: string;
+	repeat?: string;
+	times?: number;
 	start?: number;
 	end?: number;
 	excludedBreakpoints?: string[];
@@ -179,6 +197,8 @@ export const createInteractionItem = ( {
 			replay,
 			easing,
 			relativeTo,
+			repeat,
+			times,
 			start,
 			end,
 			customEffects,
@@ -191,14 +211,15 @@ export const createInteractionItem = ( {
 } );
 
 export const createDefaultInteractionItem = (): InteractionItemPropValue => {
+	const { constants } = getInteractionsConfig();
 	return createInteractionItem( {
 		trigger: 'load',
 		effect: 'fade',
 		type: 'in',
-		duration: 600,
-		delay: 0,
+		duration: constants.defaultDuration,
+		delay: constants.defaultDelay,
 		replay: false,
-		easing: 'easeIn',
+		easing: constants.defaultEasing,
 		interactionId: generateTempInteractionId(),
 	} );
 };
@@ -238,7 +259,7 @@ export const buildDisplayLabel = ( item: InteractionItemValue ): string => {
 
 	const triggerLabel = TRIGGER_LABELS[ trigger ] || capitalize( trigger );
 	const effectLabel = capitalize( effect );
-	const typeLabel = capitalize( type );
+	const typeLabel = 'custom' === effect ? '' : capitalize( type );
 
 	return `${ triggerLabel }: ${ effectLabel } ${ typeLabel }`;
 };

package/src/utils/tracking.ts

@@ -0,0 +1,42 @@
+import { getElementLabel } from '@elementor/editor-elements';
+import { getMixpanel } from '@elementor/events';
+
+import type { InteractionItemPropValue } from '../types';
+import { extractString } from './prop-value-utils';
+
+const TRIGGER_LABELS: Record< string, string > = {
+	load: 'On page load',
+	scrollIn: 'Scroll into view',
+	scrollOut: 'Scroll out of view',
+	scrollOn: 'While scrolling',
+	hover: 'Hover',
+	click: 'Click',
+};
+
+const capitalize = ( s: string ) => s.charAt( 0 ).toUpperCase() + s.slice( 1 );
+
+export const trackInteractionCreated = ( elementId: string, item: InteractionItemPropValue ) => {
+	const { dispatchEvent, config } = getMixpanel();
+	if ( ! config?.names?.interactions?.created ) {
+		return;
+	}
+
+	const trigger = extractString( item.value.trigger );
+	const effect = extractString( item.value.animation.value.effect );
+	const type = extractString( item.value.animation.value.type );
+
+	dispatchEvent?.( config.names.interactions.created, {
+		app_type: config?.appTypes?.editor,
+		window_name: config?.appTypes?.editor,
+		interaction_type: config?.triggers?.click,
+		target_name: getElementLabel( elementId ),
+		interaction_result: 'interaction_created',
+		target_location: config?.locations?.widgetPanel,
+		location_l1: getElementLabel( elementId ),
+		location_l2: 'interactions',
+		interaction_description: 'interaction_created',
+		interaction_trigger: TRIGGER_LABELS[ trigger ] ?? capitalize( trigger ),
+		interaction_effect:
+			effect === 'custom' ? capitalize( effect ) : `${ capitalize( effect ) } ${ capitalize( type ) }`,
+	} );
+};