@elementor/editor-interactions 4.0.0-545 → 4.0.0-546

package/src/components/controls/time-frame-indicator.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import { useCallback, useRef } from 'react';
-import { UnstableSizeField } from '@elementor/editor-controls';
+import { type Unit, UnstableSizeField } from '@elementor/editor-controls';
 import { type SizePropValue } from '@elementor/editor-props';
 
 import { DEFAULT_TIME_UNIT, TIME_UNITS } from '../../configs/time-constants';
-import { type FieldProps, type TimeUnit, type TimeValue } from '../../types';
+import { type FieldProps, type SizeStringValue } from '../../types';
 import { formatSizeValue, parseSizeValue } from '../../utils/size-transform-utils';
 import { convertTimeUnit } from '../../utils/time-conversion';
 
-export function TimeFrameIndicator( { value, onChange, defaultValue }: FieldProps & { defaultValue: TimeValue } ) {
-	const sizeValue = parseSizeValue( value as TimeValue, TIME_UNITS, defaultValue, DEFAULT_TIME_UNIT );
-	const prevUnitRef = useRef< TimeUnit >( sizeValue.unit as TimeUnit );
+export function TimeFrameIndicator( {
+	value,
+	onChange,
+	defaultValue,
+}: FieldProps & { defaultValue: SizeStringValue } ) {
+	const sizeValue = parseSizeValue( value as SizeStringValue, TIME_UNITS, defaultValue, DEFAULT_TIME_UNIT );
+	const prevUnitRef = useRef< Unit >( sizeValue.unit as Unit );
 
 	const setValue = useCallback(
 		( size: SizePropValue[ 'value' ] ) => {
@@ -18,7 +22,7 @@ export function TimeFrameIndicator( { value, onChange, defaultValue }: FieldProp
 
 			if ( unitChanged ) {
 				const fromUnit = prevUnitRef.current;
-				const toUnit = size.unit as TimeUnit;
+				const toUnit = size.unit as Unit;
 
 				size.size = convertTimeUnit( Number( size.size ), fromUnit, toUnit );
 				prevUnitRef.current = toUnit;

package/src/components/controls/trigger.tsx

@@ -9,6 +9,7 @@ export function Trigger( { value, onChange }: FieldProps ) {
 	const availableTriggers = Object.entries( {
 		load: __( 'Page load', 'elementor' ),
 		scrollIn: __( 'Scroll into view', 'elementor' ),
+		scrollOn: __( 'While Scrolling', 'elementor' ),
 	} ).map( ( [ key, label ] ) => ( {
 		key,
 		label,

package/src/components/interaction-details.tsx

@@ -5,15 +5,15 @@ import { Divider, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { getInteractionsControl } from '../interactions-controls-registry';
-import type { InteractionItemValue, TimeValue } from '../types';
+import { type InteractionItemValue, type SizeStringValue } from '../types';
 import {
 	createAnimationPreset,
 	createString,
 	extractBoolean,
-	extractNumber,
 	extractSize,
 	extractString,
 } from '../utils/prop-value-utils';
+import { parseSizeValue } from '../utils/size-transform-utils';
 import { Direction } from './controls/direction';
 import { Effect } from './controls/effect';
 import { EffectType } from './controls/effect-type';
@@ -59,13 +59,13 @@ type InteractionValues = {
 	effect: string;
 	type: string;
 	direction: string;
-	duration: TimeValue;
-	delay: TimeValue;
+	duration: SizeStringValue;
+	delay: SizeStringValue;
 	replay: boolean;
 	easing: string;
 	relativeTo: string;
-	offsetTop: number;
-	offsetBottom: number;
+	offsetTop: SizeStringValue;
+	offsetBottom: SizeStringValue;
 };
 
 type ControlVisibilityConfig = {
@@ -108,8 +108,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 offsetTop = extractNumber( interaction.animation.value.config?.value.offsetTop, DEFAULT_VALUES.offsetTop );
-	const offsetBottom = extractNumber(
+
+	const offsetTop = extractSize( interaction.animation.value.config?.value.offsetTop, DEFAULT_VALUES.offsetTop );
+	const offsetBottom = extractSize(
 		interaction.animation.value.config?.value.offsetBottom,
 		DEFAULT_VALUES.offsetBottom
 	);
@@ -159,13 +160,13 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 			effect: string;
 			type: string;
 			direction: string;
-			duration: TimeValue;
-			delay: TimeValue;
+			duration: SizeStringValue;
+			delay: SizeStringValue;
 			replay: boolean;
 			easing?: string;
 			relativeTo: string;
-			offsetTop: number;
-			offsetBottom: number;
+			offsetTop: SizeStringValue;
+			offsetBottom: SizeStringValue;
 		} >
 	): void => {
 		const resolvedDirectionValue = resolveDirection( 'direction' in updates, updates.effect, updates.direction );
@@ -240,8 +241,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 					<Field label={ __( 'Duration', 'elementor' ) }>
 						<TimeFrameIndicator
 							value={ String( duration ) }
-							onChange={ ( v ) => updateInteraction( { duration: v as TimeValue } ) }
-							defaultValue={ DEFAULT_VALUES.duration }
+							onChange={ ( v ) => updateInteraction( { duration: v as SizeStringValue } ) }
+							defaultValue={ DEFAULT_VALUES.duration as SizeStringValue }
 						/>
 					</Field>
 				) }
@@ -250,8 +251,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 					<Field label={ __( 'Delay', 'elementor' ) }>
 						<TimeFrameIndicator
 							value={ String( delay ) }
-							onChange={ ( v ) => updateInteraction( { delay: v as TimeValue } ) }
-							defaultValue={ DEFAULT_VALUES.delay }
+							onChange={ ( v ) => updateInteraction( { delay: v as SizeStringValue } ) }
+							defaultValue={ DEFAULT_VALUES.delay as SizeStringValue }
 						/>
 					</Field>
 				) }
@@ -270,17 +271,19 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 						{ OffsetTopControl && (
 							<Field label={ __( 'Offset Top', 'elementor' ) }>
 								<OffsetTopControl
-									value={ String( offsetTop ) }
-									onChange={ ( v: string ) => updateInteraction( { offsetTop: parseInt( v, 10 ) } ) }
+									value={ String( parseSizeValue( offsetTop, [ '%' ] ).size ) }
+									onChange={ ( v: string ) =>
+										updateInteraction( { offsetTop: v as SizeStringValue } )
+									}
 								/>
 							</Field>
 						) }
 						{ OffsetBottomControl && (
 							<Field label={ __( 'Offset Bottom', 'elementor' ) }>
 								<OffsetBottomControl
-									value={ String( offsetBottom ) }
+									value={ String( parseSizeValue( offsetBottom, [ '%' ] ).size ) }
 									onChange={ ( v: string ) =>
-										updateInteraction( { offsetBottom: parseInt( v, 10 ) } )
+										updateInteraction( { offsetBottom: v as SizeStringValue } )
 									}
 								/>
 							</Field>

package/src/configs/time-constants.ts

@@ -1,5 +1,5 @@
-import { type TimeUnit } from '../types';
+import { type Unit } from '@elementor/editor-controls';
 
-export const TIME_UNITS: TimeUnit[] = [ 's', 'ms' ];
+export const TIME_UNITS: Unit[] = [ 's', 'ms' ];
 
 export const DEFAULT_TIME_UNIT = 'ms';

package/src/providers/utils/normalize-interactions.ts

@@ -1,3 +1,4 @@
+import { type Unit } from '@elementor/editor-controls';
 import { type ElementInteractions } from '@elementor/editor-elements';
 import {
 	isTransformable,
@@ -7,16 +8,15 @@ import {
 	type TransformablePropValue,
 } from '@elementor/editor-props';
 
-import { type TimeUnit } from '../../types';
 import { convertTimeUnit } from '../../utils/time-conversion';
 
-type Normalizer = ( value: TransformablePropValue< string, unknown > ) => PropValue;
+type Normalizer = ( value: TransformablePropValue< string > ) => PropValue;
 
 const FIELD_NORMALIZERS: Record< string, Normalizer > = {
 	size: ( value ) => {
 		const sizeProp = value as SizePropValue;
 		const { size, unit } = sizeProp.value;
-		const numberPropValue = convertTimeUnit( size as number, unit as TimeUnit, 'ms' );
+		const numberPropValue = convertTimeUnit( size as number, unit as Unit, 'ms' );
 
 		return numberPropTypeUtil.create( numberPropValue );
 	},

package/src/types.ts

@@ -77,6 +77,4 @@ export type InteractionsProvider = {
 
 export type InteractionItemValue = InteractionItemPropValue[ 'value' ];
 
-export type TimeUnit = Extract< Unit, 'ms' | 's' >;
-
-export type TimeValue = `${ number }${ TimeUnit }` | number;
+export type SizeStringValue = `${ number }${ Unit }` | number;

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

@@ -1,3 +1,4 @@
+import { type Unit } from '@elementor/editor-controls';
 import { sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 
 import { DEFAULT_TIME_UNIT, TIME_UNITS } from '../configs/time-constants';
@@ -11,8 +12,8 @@ import {
 	type InteractionItemPropValue,
 	type InteractionItemValue,
 	type NumberPropValue,
+	type SizeStringValue,
 	type StringPropValue,
-	type TimeValue,
 	type TimingConfigPropValue,
 } from '../types';
 import { formatSizeValue, parseSizeValue } from '../utils/size-transform-utils';
@@ -28,7 +29,7 @@ export const createNumber = ( value: number ): NumberPropValue => ( {
 	value,
 } );
 
-export const createTimingConfig = ( duration: TimeValue, delay: TimeValue ): TimingConfigPropValue => ( {
+export const createTimingConfig = ( duration: SizeStringValue, delay: SizeStringValue ): TimingConfigPropValue => ( {
 	$$type: 'timing-config',
 	value: {
 		duration: sizePropTypeUtil.create( parseSizeValue( duration, TIME_UNITS, undefined, DEFAULT_TIME_UNIT ) ),
@@ -46,24 +47,32 @@ export const createConfig = ( {
 	easing = 'easeIn',
 	relativeTo = '',
 	offsetTop = 0,
-	offsetBottom = 100,
+	offsetBottom = 85,
 }: {
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
-	offsetTop?: number;
-	offsetBottom?: number;
+	offsetTop?: SizeStringValue;
+	offsetBottom?: SizeStringValue;
 } ): ConfigPropValue => ( {
 	$$type: 'config',
 	value: {
 		replay: createBoolean( replay ),
 		easing: createString( easing ),
 		relativeTo: createString( relativeTo ),
-		offsetTop: createNumber( offsetTop ),
-		offsetBottom: createNumber( offsetBottom ),
+		offsetTop: createSize( offsetTop, '%' ),
+		offsetBottom: createSize( offsetBottom, '%' ),
 	},
 } );
 
+const createSize = ( value?: SizeStringValue, defaultUnit?: Unit, defaultValue?: SizeStringValue ) => {
+	if ( ! value ) {
+		return;
+	}
+
+	return sizePropTypeUtil.create( parseSizeValue( value, [ '%' ], defaultValue, defaultUnit ) );
+};
+
 export const extractBoolean = ( prop: BooleanPropValue | undefined, fallback = false ): boolean => {
 	return prop?.value ?? fallback;
 };
@@ -99,13 +108,13 @@ export const createAnimationPreset = ( {
 	effect: string;
 	type: string;
 	direction?: string;
-	duration: TimeValue;
-	delay: TimeValue;
+	duration: SizeStringValue;
+	delay: SizeStringValue;
 	replay: boolean;
 	easing?: string;
 	relativeTo?: string;
-	offsetTop?: number;
-	offsetBottom?: number;
+	offsetTop?: SizeStringValue;
+	offsetBottom?: SizeStringValue;
 } ): AnimationPresetPropValue => ( {
 	$$type: 'animation-preset-props',
 	value: {
@@ -142,8 +151,8 @@ export const createInteractionItem = ( {
 	effect: string;
 	type: string;
 	direction?: string;
-	duration: TimeValue;
-	delay: TimeValue;
+	duration: SizeStringValue;
+	delay: SizeStringValue;
 	interactionId?: string;
 	replay: boolean;
 	easing?: string;
@@ -197,12 +206,12 @@ export const extractString = ( prop: StringPropValue | undefined, fallback = ''
 	return prop?.value ?? fallback;
 };
 
-export const extractSize = ( prop: SizePropValue ): TimeValue => {
-	return formatSizeValue( prop?.value );
-};
+export const extractSize = ( prop?: SizePropValue, defaultValue?: SizeStringValue ): SizeStringValue => {
+	if ( ! prop?.value ) {
+		return defaultValue as SizeStringValue;
+	}
 
-export const extractNumber = ( prop: NumberPropValue | undefined, fallback = 0 ): number => {
-	return prop?.value ?? fallback;
+	return formatSizeValue( prop.value );
 };
 
 const TRIGGER_LABELS: Record< string, string > = {

package/src/utils/size-transform-utils.ts

@@ -1,6 +1,7 @@
+import { type Unit } from '@elementor/editor-controls';
 import { type SizePropValue } from '@elementor/editor-props';
 
-import { type TimeUnit, type TimeValue } from '../types';
+import { type SizeStringValue } from '../types';
 
 type SizeValue = SizePropValue[ 'value' ];
 type SizeUnit = SizeValue[ 'unit' ];
@@ -8,15 +9,15 @@ type SizeUnit = SizeValue[ 'unit' ];
 const SIZE_REGEX = /^(?:(-?\d*\.?\d+)([a-z%]+)|([a-z%]+))$/i;
 
 export const parseSizeValue = (
-	value: TimeValue,
+	value: SizeStringValue,
 	allowedUnits: SizeUnit[],
-	defaultValue?: TimeValue,
-	defaultUnit?: TimeUnit
+	defaultValue?: SizeStringValue,
+	defaultUnit?: Unit
 ): SizeValue => {
 	if ( typeof value === 'number' ) {
 		return {
 			size: value,
-			unit: defaultUnit as TimeUnit,
+			unit: defaultUnit as Unit,
 		};
 	}
 
@@ -37,7 +38,7 @@ export const parseSizeValue = (
 	return createSizeValue( null, defaultUnit );
 };
 
-const tryParse = ( value: TimeValue, allowedUnits: SizeUnit[], defaultUnit?: TimeUnit ): SizeValue | null => {
+const tryParse = ( value: SizeStringValue, allowedUnits: SizeUnit[], defaultUnit?: Unit ): SizeValue | null => {
 	if ( typeof value === 'number' ) {
 		return createSizeValue( value, defaultUnit );
 	}
@@ -45,6 +46,13 @@ const tryParse = ( value: TimeValue, allowedUnits: SizeUnit[], defaultUnit?: Tim
 	const match = value && value.match( SIZE_REGEX );
 
 	if ( ! match ) {
+		if ( value ) {
+			return {
+				size: Number( value ),
+				unit: defaultUnit as Unit,
+			};
+		}
+
 		return null;
 	}
 
@@ -58,8 +66,8 @@ const tryParse = ( value: TimeValue, allowedUnits: SizeUnit[], defaultUnit?: Tim
 	return createSizeValue( size, unit );
 };
 
-export const formatSizeValue = ( { size, unit }: SizeValue ): TimeValue => {
-	return `${ size ?? '' }${ unit }` as TimeValue;
+export const formatSizeValue = ( { size, unit }: SizeValue ): SizeStringValue => {
+	return `${ size ?? '' }${ unit }` as SizeStringValue;
 };
 
 const createSizeValue = ( size: number | null, unit?: SizeUnit ): SizeValue => {

package/src/utils/time-conversion.ts

@@ -1,10 +1,11 @@
-import { type TimeUnit } from '../types';
+import { type Unit } from '@elementor/editor-controls';
 
+type TimeUnit = Extract< Unit, 'ms' | 's' >;
 const UNIT_TO_MS: Record< TimeUnit, number > = {
 	ms: 1,
 	s: 1000,
 };
 
-export const convertTimeUnit = ( value: number, from: TimeUnit, to: TimeUnit ): number => {
-	return ( value * UNIT_TO_MS[ from ] ) / UNIT_TO_MS[ to ];
+export const convertTimeUnit = ( value: number, from: Unit, to: Unit ): number => {
+	return ( value * UNIT_TO_MS[ from as TimeUnit ] ) / UNIT_TO_MS[ to as TimeUnit ];
 };