@elementor/editor-interactions 4.0.0-650 → 4.0.0-660

package/package.json

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

package/src/components/interaction-details.tsx

@@ -35,6 +35,8 @@ export const DEFAULT_VALUES = {
 	replay: false,
 	easing: 'easeIn',
 	relativeTo: 'viewport',
+	repeat: '',
+	times: 1,
 	start: 85,
 	end: 15,
 };
@@ -53,7 +55,9 @@ type InteractionsControlType =
 	| 'relativeTo'
 	| 'start'
 	| 'end'
-	| 'customEffects';
+	| 'customEffects'
+	| 'repeat'
+	| 'times';
 
 type InteractionValues = {
 	trigger: string;
@@ -68,6 +72,8 @@ type InteractionValues = {
 	start: SizeStringValue;
 	end: SizeStringValue;
 	customEffects?: PropValue;
+	repeat: string;
+	times: number;
 };
 
 type ControlVisibilityConfig = {
@@ -82,6 +88,8 @@ const controlVisibilityConfig: ControlVisibilityConfig = {
 	relativeTo: ( values ) => values.trigger === 'scrollOn',
 	start: ( values ) => values.trigger === 'scrollOn',
 	end: ( values ) => values.trigger === 'scrollOn',
+	repeat: ( values ) => values.trigger !== 'scrollOn',
+	times: ( values ) => values.trigger !== 'scrollOn' && values.repeat === 'times',
 
 	duration: ( values ) => {
 		const isRelativeToVisible = values.trigger === 'scrollOn';
@@ -93,6 +101,14 @@ const controlVisibilityConfig: ControlVisibilityConfig = {
 	},
 };
 
+function normalizeTimesValue( value: unknown, fallback: number ): number {
+	const numericValue = Number( value );
+	if ( ! Number.isFinite( numericValue ) ) {
+		return fallback;
+	}
+	return Math.max( 1, Math.floor( numericValue ) );
+}
+
 function useControlComponent( controlName: InteractionsControlType, isVisible: boolean = true ) {
 	return useMemo( () => {
 		if ( ! isVisible ) {
@@ -113,6 +129,9 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	const replay = extractBoolean( interaction.animation.value.config?.value.replay, DEFAULT_VALUES.replay );
 	const easing = extractString( interaction.animation.value.config?.value.easing, DEFAULT_VALUES.easing );
 	const relativeTo = extractString( interaction.animation.value.config?.value.relativeTo, DEFAULT_VALUES.relativeTo );
+	const configValue = interaction.animation.value.config?.value;
+	const repeat = extractString( configValue?.repeat, DEFAULT_VALUES.repeat );
+	const times = normalizeTimesValue( configValue?.times?.value, DEFAULT_VALUES.times );
 
 	const start = extractSize( interaction.animation.value.config?.value.start, DEFAULT_VALUES.start );
 	const end = extractSize( interaction.animation.value.config?.value.end, DEFAULT_VALUES.end );
@@ -127,6 +146,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		easing,
 		replay,
 		relativeTo,
+		repeat,
+		times,
 		start,
 		end,
 		customEffects,
@@ -151,6 +172,14 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		controlVisibilityConfig.effectType( interactionValues )
 	);
 	const DirectionControl = useControlComponent( 'direction', controlVisibilityConfig.direction( interactionValues ) );
+	const RepeatControl = useControlComponent(
+		'repeat',
+		controlVisibilityConfig.repeat( interactionValues )
+	) as ComponentType< FieldProps< string > >;
+	const TimesControl = useControlComponent(
+		'times',
+		controlVisibilityConfig.times( interactionValues )
+	) as ComponentType< FieldProps< number > >;
 	const EasingControl = useControlComponent( 'easing' );
 
 	const containerRef = useRef< HTMLDivElement >( null );
@@ -166,6 +195,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 			replay: boolean;
 			easing?: string;
 			relativeTo: string;
+			repeat: string;
+			times?: number;
 			start: SizeStringValue;
 			end: SizeStringValue;
 			customEffects?: PropValue;
@@ -192,6 +223,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 				replay: updates.replay ?? replay,
 				easing: updates.easing ?? easing,
 				relativeTo: updates.relativeTo ?? relativeTo,
+				repeat: updates.repeat ?? repeat,
+				times: updates.times ?? times,
 				start: updates.start ?? start,
 				end: updates.end ?? end,
 				customEffects: updates.customEffects ?? customEffects,
@@ -266,6 +299,25 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 						</Field>
 					) }
 
+					{ RepeatControl && (
+						<Field label={ __( 'Repeat', 'elementor' ) }>
+							<RepeatControl value={ repeat } onChange={ ( v ) => updateInteraction( { repeat: v } ) } />
+						</Field>
+					) }
+
+					{ TimesControl && (
+						<Field label={ __( 'Times', 'elementor' ) }>
+							<TimesControl
+								value={ times }
+								onChange={ ( v ) =>
+									updateInteraction( {
+										times: normalizeTimesValue( v, DEFAULT_VALUES.times ),
+									} )
+								}
+							/>
+						</Field>
+					) }
+
 					{ controlVisibilityConfig.duration( interactionValues ) && (
 						<Field label={ __( 'Duration', 'elementor' ) }>
 							<TimeFrameIndicator

package/src/interactions-controls-registry.ts

@@ -1,7 +1,13 @@
 import { type ComponentType } from 'react';
 import { type PropValue } from '@elementor/editor-props';
 
-import { type DirectionFieldProps, type FieldProps, type ReplayFieldProps } from './types';
+import {
+	type DirectionFieldProps,
+	type FieldProps,
+	type RepeatFieldProps,
+	type ReplayFieldProps,
+	type TimesFieldProps,
+} from './types';
 
 type InteractionsControlType =
 	| 'trigger'
@@ -11,6 +17,8 @@ type InteractionsControlType =
 	| 'duration'
 	| 'delay'
 	| 'replay'
+	| 'repeat'
+	| 'times'
 	| 'easing'
 	| 'relativeTo'
 	| 'start'
@@ -26,6 +34,8 @@ type InteractionsControlPropsMap = {
 	duration: FieldProps;
 	delay: FieldProps;
 	replay: ReplayFieldProps;
+	repeat: RepeatFieldProps;
+	times: TimesFieldProps;
 	easing: FieldProps;
 	relativeTo: FieldProps;
 	start: FieldProps;
@@ -40,7 +50,9 @@ type ControlOptions< T extends InteractionsControlType > = {
 
 type StoredControlOptions = {
 	type: InteractionsControlType;
-	component: ComponentType< FieldProps | DirectionFieldProps | ReplayFieldProps >;
+	component: ComponentType<
+		FieldProps | DirectionFieldProps | ReplayFieldProps | RepeatFieldProps | TimesFieldProps
+	>;
 	options?: string[];
 };
 

package/src/types.ts

@@ -50,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/utils/prop-value-utils.ts

@@ -47,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 ) {
@@ -103,6 +110,8 @@ export const createAnimationPreset = ( {
 	replay = false,
 	easing = 'easeIn',
 	relativeTo,
+	repeat,
+	times,
 	start,
 	end,
 	customEffects,
@@ -115,6 +124,8 @@ export const createAnimationPreset = ( {
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
+	repeat?: string;
+	times?: number;
 	start?: SizeStringValue;
 	end?: SizeStringValue;
 	customEffects?: PropValue;
@@ -130,6 +141,8 @@ export const createAnimationPreset = ( {
 			replay,
 			easing,
 			relativeTo,
+			repeat,
+			times,
 			start,
 			end,
 		} ),
@@ -147,6 +160,8 @@ export const createInteractionItem = ( {
 	replay = false,
 	easing = 'easeIn',
 	relativeTo,
+	repeat,
+	times,
 	start,
 	end,
 	excludedBreakpoints,
@@ -162,6 +177,8 @@ export const createInteractionItem = ( {
 	replay?: boolean;
 	easing?: string;
 	relativeTo?: string;
+	repeat?: string;
+	times?: number;
 	start?: number;
 	end?: number;
 	excludedBreakpoints?: string[];
@@ -180,6 +197,8 @@ export const createInteractionItem = ( {
 			replay,
 			easing,
 			relativeTo,
+			repeat,
+			times,
 			start,
 			end,
 			customEffects,