@elementor/editor-interactions 4.0.0-621 → 4.0.0-manual

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.0.0-621",
+  "version": "4.0.0-manual",
   "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-621",
-    "@elementor/editor-elements": "4.0.0-621",
-    "@elementor/editor-mcp": "4.0.0-621",
-    "@elementor/editor-props": "4.0.0-621",
-    "@elementor/editor-responsive": "4.0.0-621",
-    "@elementor/editor-ui": "4.0.0-621",
-    "@elementor/editor-v1-adapters": "4.0.0-621",
+    "@elementor/editor-controls": "4.0.0-manual",
+    "@elementor/editor-elements": "4.0.0-manual",
+    "@elementor/editor-mcp": "4.0.0-manual",
+    "@elementor/editor-props": "4.0.0-manual",
+    "@elementor/editor-responsive": "4.0.0-manual",
+    "@elementor/editor-ui": "4.0.0-manual",
+    "@elementor/editor-v1-adapters": "4.0.0-manual",
     "@elementor/icons": "^1.68.0",
-    "@elementor/schema": "4.0.0-621",
-    "@elementor/session": "4.0.0-621",
+    "@elementor/schema": "4.0.0-manual",
+    "@elementor/session": "4.0.0-manual",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-621",
+    "@elementor/utils": "4.0.0-manual",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/interaction-details.tsx

@@ -35,8 +35,8 @@ export const DEFAULT_VALUES = {
 	replay: false,
 	easing: 'easeIn',
 	relativeTo: 'viewport',
-	offsetTop: 15,
-	offsetBottom: 85,
+	start: 85,
+	end: 15,
 };
 
 const TRIGGERS_WITHOUT_REPLAY = [ 'load', 'scrollOn', 'hover', 'click' ];
@@ -51,8 +51,8 @@ type InteractionsControlType =
 	| 'replay'
 	| 'easing'
 	| 'relativeTo'
-	| 'offsetTop'
-	| 'offsetBottom'
+	| 'start'
+	| 'end'
 	| 'customEffects';
 
 type InteractionValues = {
@@ -65,8 +65,8 @@ type InteractionValues = {
 	replay: boolean;
 	easing: string;
 	relativeTo: string;
-	offsetTop: SizeStringValue;
-	offsetBottom: SizeStringValue;
+	start: SizeStringValue;
+	end: SizeStringValue;
 	customEffects?: PropValue;
 };
 
@@ -80,8 +80,8 @@ const controlVisibilityConfig: ControlVisibilityConfig = {
 	effectType: ( values ) => values.effect !== 'custom',
 	direction: ( values ) => values.effect !== 'custom',
 	relativeTo: ( values ) => values.trigger === 'scrollOn',
-	offsetTop: ( values ) => values.trigger === 'scrollOn',
-	offsetBottom: ( values ) => values.trigger === 'scrollOn',
+	start: ( values ) => values.trigger === 'scrollOn',
+	end: ( values ) => values.trigger === 'scrollOn',
 
 	duration: ( values ) => {
 		const isRelativeToVisible = values.trigger === 'scrollOn';
@@ -114,11 +114,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	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 offsetTop = extractSize( interaction.animation.value.config?.value.offsetTop, DEFAULT_VALUES.offsetTop );
-	const offsetBottom = extractSize(
-		interaction.animation.value.config?.value.offsetBottom,
-		DEFAULT_VALUES.offsetBottom
-	);
+	const start = extractSize( interaction.animation.value.config?.value.start, DEFAULT_VALUES.start );
+	const end = extractSize( interaction.animation.value.config?.value.end, DEFAULT_VALUES.end );
 
 	const interactionValues = {
 		trigger,
@@ -130,8 +127,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		easing,
 		replay,
 		relativeTo,
-		offsetTop,
-		offsetBottom,
+		start,
+		end,
 		customEffects,
 	};
 
@@ -142,11 +139,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		'relativeTo',
 		controlVisibilityConfig.relativeTo( interactionValues )
 	);
-	const OffsetTopControl = useControlComponent( 'offsetTop', controlVisibilityConfig.offsetTop( interactionValues ) );
-	const OffsetBottomControl = useControlComponent(
-		'offsetBottom',
-		controlVisibilityConfig.offsetBottom( interactionValues )
-	);
+	const StartControl = useControlComponent( 'start', controlVisibilityConfig.start( interactionValues ) );
+	const EndControl = useControlComponent( 'end', controlVisibilityConfig.end( interactionValues ) );
 	const CustomEffectControl = useControlComponent(
 		'customEffects',
 		controlVisibilityConfig.custom( interactionValues )
@@ -172,8 +166,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 			replay: boolean;
 			easing?: string;
 			relativeTo: string;
-			offsetTop: SizeStringValue;
-			offsetBottom: SizeStringValue;
+			start: SizeStringValue;
+			end: SizeStringValue;
 			customEffects?: PropValue;
 		} >
 	): void => {
@@ -198,8 +192,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 				replay: updates.replay ?? replay,
 				easing: updates.easing ?? easing,
 				relativeTo: updates.relativeTo ?? relativeTo,
-				offsetTop: updates.offsetTop ?? offsetTop,
-				offsetBottom: updates.offsetBottom ?? offsetBottom,
+				start: updates.start ?? start,
+				end: updates.end ?? end,
 				customEffects: updates.customEffects ?? customEffects,
 			} ),
 		};
@@ -297,32 +291,30 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 					<>
 						<Divider />
 						<Grid container spacing={ 1.5 }>
-							<Field label={ __( 'Relative To', 'elementor' ) }>
-								<RelativeToControl
-									value={ relativeTo }
-									onChange={ ( v ) => updateInteraction( { relativeTo: v } ) }
-								/>
-							</Field>
-							{ OffsetTopControl && (
-								<Field label={ __( 'Offset Top', 'elementor' ) }>
-									<OffsetTopControl
-										value={ String( parseSizeValue( offsetTop, [ '%' ] ).size ) }
+							{ StartControl && (
+								<Field label={ __( 'Start', 'elementor' ) }>
+									<StartControl
+										value={ parseSizeValue( start, [ '%' ] ).size?.toString() ?? '' }
 										onChange={ ( v: string ) =>
-											updateInteraction( { offsetTop: v as SizeStringValue } )
+											updateInteraction( { start: v as SizeStringValue } )
 										}
 									/>
 								</Field>
 							) }
-							{ OffsetBottomControl && (
-								<Field label={ __( 'Offset Bottom', 'elementor' ) }>
-									<OffsetBottomControl
-										value={ String( parseSizeValue( offsetBottom, [ '%' ] ).size ) }
-										onChange={ ( v: string ) =>
-											updateInteraction( { offsetBottom: v as SizeStringValue } )
-										}
+							{ EndControl && (
+								<Field label={ __( 'End', 'elementor' ) }>
+									<EndControl
+										value={ parseSizeValue( end, [ '%' ] ).size?.toString() ?? '' }
+										onChange={ ( v: string ) => updateInteraction( { end: v as SizeStringValue } ) }
 									/>
 								</Field>
 							) }
+							<Field label={ __( 'Relative To', 'elementor' ) }>
+								<RelativeToControl
+									value={ relativeTo }
+									onChange={ ( v ) => updateInteraction( { relativeTo: v } ) }
+								/>
+							</Field>
 						</Grid>
 						<Divider />
 					</>

package/src/interactions-controls-registry.ts

@@ -13,8 +13,8 @@ type InteractionsControlType =
 	| 'replay'
 	| 'easing'
 	| 'relativeTo'
-	| 'offsetTop'
-	| 'offsetBottom'
+	| 'start'
+	| 'end'
 	| 'customEffects';
 
 type InteractionsControlPropsMap = {
@@ -28,8 +28,8 @@ type InteractionsControlPropsMap = {
 	replay: ReplayFieldProps;
 	easing: FieldProps;
 	relativeTo: FieldProps;
-	offsetTop: FieldProps;
-	offsetBottom: FieldProps;
+	start: FieldProps;
+	end: FieldProps;
 };
 
 type ControlOptions< T extends InteractionsControlType > = {

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

@@ -46,22 +46,22 @@ export const createConfig = ( {
 	replay,
 	easing = 'easeIn',
 	relativeTo = '',
-	offsetTop = 0,
-	offsetBottom = 85,
+	start = 85,
+	end = 15,
 }: {
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
-	offsetTop?: SizeStringValue;
-	offsetBottom?: SizeStringValue;
+	start?: SizeStringValue;
+	end?: SizeStringValue;
 } ): ConfigPropValue => ( {
 	$$type: 'config',
 	value: {
 		replay: createBoolean( replay ),
 		easing: createString( easing ),
 		relativeTo: createString( relativeTo ),
-		offsetTop: createSize( offsetTop, '%' ),
-		offsetBottom: createSize( offsetBottom, '%' ),
+		start: createSize( start, '%' ),
+		end: createSize( end, '%' ),
 	},
 } );
 
@@ -102,8 +102,8 @@ export const createAnimationPreset = ( {
 	replay = false,
 	easing = 'easeIn',
 	relativeTo,
-	offsetTop,
-	offsetBottom,
+	start,
+	end,
 	customEffects,
 }: {
 	effect: string;
@@ -114,8 +114,8 @@ export const createAnimationPreset = ( {
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
-	offsetTop?: SizeStringValue;
-	offsetBottom?: SizeStringValue;
+	start?: SizeStringValue;
+	end?: SizeStringValue;
 	customEffects?: PropValue;
 } ): AnimationPresetPropValue => ( {
 	$$type: 'animation-preset-props',
@@ -129,8 +129,8 @@ export const createAnimationPreset = ( {
 			replay,
 			easing,
 			relativeTo,
-			offsetTop,
-			offsetBottom,
+			start,
+			end,
 		} ),
 	},
 } );
@@ -146,8 +146,8 @@ export const createInteractionItem = ( {
 	replay = false,
 	easing = 'easeIn',
 	relativeTo,
-	offsetTop,
-	offsetBottom,
+	start,
+	end,
 	excludedBreakpoints,
 	customEffects,
 }: {
@@ -161,8 +161,8 @@ export const createInteractionItem = ( {
 	replay?: boolean;
 	easing?: string;
 	relativeTo?: string;
-	offsetTop?: number;
-	offsetBottom?: number;
+	start?: number;
+	end?: number;
 	excludedBreakpoints?: string[];
 	customEffects?: PropValue;
 } ): InteractionItemPropValue => ( {
@@ -179,8 +179,8 @@ export const createInteractionItem = ( {
 			replay,
 			easing,
 			relativeTo,
-			offsetTop,
-			offsetBottom,
+			start,
+			end,
 			customEffects,
 		} ),
 		...( excludedBreakpoints &&