@elementor/editor-interactions 3.35.0-470 → 3.35.0-472

package/src/components/controls/effect.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type FieldProps } from '../../types';
+
 export function Effect( { value, onChange }: FieldProps ) {
 	const availableEffects = [
 		{ key: 'fade', label: __( 'Fade', 'elementor' ) },
@@ -13,29 +13,20 @@ export function Effect( { value, onChange }: FieldProps ) {
 	];
 
 	return (
-		<Grid item xs={ 12 }>
-			<PopoverGridContainer>
-				<Grid item xs={ 6 }>
-					<ControlFormLabel>{ __( 'Effect', 'elementor' ) }</ControlFormLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<Select
-						fullWidth
-						displayEmpty
-						size="tiny"
-						value={ value }
-						onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
-					>
-						{ availableEffects.map( ( effect ) => {
-							return (
-								<MenuListItem key={ effect.key } value={ effect.key }>
-									{ effect.label }
-								</MenuListItem>
-							);
-						} ) }
-					</Select>
-				</Grid>
-			</PopoverGridContainer>
-		</Grid>
+		<Select
+			fullWidth
+			displayEmpty
+			size="tiny"
+			value={ value }
+			onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
+		>
+			{ availableEffects.map( ( effect ) => {
+				return (
+					<MenuListItem key={ effect.key } value={ effect.key }>
+						{ effect.label }
+					</MenuListItem>
+				);
+			} ) }
+		</Select>
 	);
 }

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type FieldProps } from '../../types';
 
-export function TimeFrameIndicator( { value, onChange, label }: FieldProps ) {
+export function TimeFrameIndicator( { value, onChange }: FieldProps ) {
 	const availableTimeFrames = [ '0', '100', '200', '300', '400', '500', '750', '1000', '1250', '1500' ].map(
 		( key ) => ( {
 			key,
@@ -16,29 +15,20 @@ export function TimeFrameIndicator( { value, onChange, label }: FieldProps ) {
 	);
 
 	return (
-		<Grid item xs={ 12 }>
-			<PopoverGridContainer>
-				<Grid item xs={ 6 }>
-					<ControlFormLabel>{ label }</ControlFormLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<Select
-						fullWidth
-						displayEmpty
-						size="tiny"
-						value={ value }
-						onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
-					>
-						{ availableTimeFrames.map( ( timeFrame ) => {
-							return (
-								<MenuListItem key={ timeFrame.key } value={ timeFrame.key }>
-									{ timeFrame.label }
-								</MenuListItem>
-							);
-						} ) }
-					</Select>
-				</Grid>
-			</PopoverGridContainer>
-		</Grid>
+		<Select
+			fullWidth
+			displayEmpty
+			size="tiny"
+			value={ value }
+			onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
+		>
+			{ availableTimeFrames.map( ( timeFrame ) => {
+				return (
+					<MenuListItem key={ timeFrame.key } value={ timeFrame.key }>
+						{ timeFrame.label }
+					</MenuListItem>
+				);
+			} ) }
+		</Select>
 	);
 }

package/src/components/controls/trigger.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { ControlFormLabel, PopoverGridContainer } from '@elementor/editor-controls';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type FieldProps } from '../../types';
@@ -16,29 +15,20 @@ export function Trigger( { value, onChange }: FieldProps ) {
 	} ) );
 
 	return (
-		<Grid item xs={ 12 }>
-			<PopoverGridContainer>
-				<Grid item xs={ 6 }>
-					<ControlFormLabel>{ __( 'Trigger', 'elementor' ) }</ControlFormLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<Select
-						fullWidth
-						displayEmpty
-						size="tiny"
-						onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
-						value={ value }
-					>
-						{ availableTriggers.map( ( trigger ) => {
-							return (
-								<MenuListItem key={ trigger.key } value={ trigger.key }>
-									{ trigger.label }
-								</MenuListItem>
-							);
-						} ) }
-					</Select>
-				</Grid>
-			</PopoverGridContainer>
-		</Grid>
+		<Select
+			fullWidth
+			displayEmpty
+			size="tiny"
+			onChange={ ( event: SelectChangeEvent< string > ) => onChange( event.target.value ) }
+			value={ value }
+		>
+			{ availableTriggers.map( ( trigger ) => {
+				return (
+					<MenuListItem key={ trigger.key } value={ trigger.key }>
+						{ trigger.label }
+					</MenuListItem>
+				);
+			} ) }
+		</Select>
 	);
 }

package/src/components/interaction-details.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMemo } from 'react';
+import { type PropsWithChildren, useMemo } from 'react';
 import { ControlFormLabel, PopoverContent, PopoverGridContainer } from '@elementor/editor-controls';
 import { Divider, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -44,10 +44,13 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	const duration = extractNumber( interaction.animation.value.timing_config.value.duration, DEFAULT_VALUES.duration );
 	const delay = extractNumber( interaction.animation.value.timing_config.value.delay, DEFAULT_VALUES.delay );
 	const replay = extractBoolean( interaction.animation.value.config?.value.replay, DEFAULT_VALUES.replay );
+
 	const shouldShowReplay = TRIGGERS_WITH_REPLAY.includes( trigger );
+
 	const TriggerControl = useMemo( () => {
 		return getInteractionsControl( 'trigger' )?.component ?? null;
 	}, [] );
+
 	const ReplayControl = useMemo( () => {
 		if ( ! shouldShowReplay ) {
 			return null;
@@ -97,6 +100,7 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		onChange( updatedInteraction );
 
 		const interactionId = extractString( updatedInteraction.interaction_id );
+
 		setTimeout( () => {
 			onPlayInteraction( interactionId );
 		}, 0 );
@@ -106,47 +110,74 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		<PopoverContent p={ 1.5 }>
 			<Grid container spacing={ 1.5 }>
 				{ TriggerControl && (
-					<TriggerControl value={ trigger } onChange={ ( v ) => updateInteraction( { trigger: v } ) } />
+					<Field label={ __( 'Trigger', 'elementor' ) }>
+						<TriggerControl value={ trigger } onChange={ ( v ) => updateInteraction( { trigger: v } ) } />
+					</Field>
 				) }
+
 				{ ReplayControl && (
-					<>
-						<Grid item xs={ 12 }>
-							<PopoverGridContainer>
-								<Grid item xs={ 6 }>
-									<ControlFormLabel>{ __( 'Replay', 'elementor' ) }</ControlFormLabel>
-								</Grid>
-								<Grid item xs={ 6 }>
-									<ReplayControl
-										value={ replay }
-										onChange={ ( v ) => updateInteraction( { replay: v } ) }
-										disabled={ true }
-									/>
-								</Grid>
-							</PopoverGridContainer>
-						</Grid>
-					</>
+					<Field label={ __( 'Replay', 'elementor' ) }>
+						<ReplayControl
+							value={ replay }
+							onChange={ ( v ) => updateInteraction( { replay: v } ) }
+							disabled={ true }
+						/>
+					</Field>
 				) }
 			</Grid>
+
 			<Divider />
+
 			<Grid container spacing={ 1.5 }>
-				<Effect value={ effect } onChange={ ( v ) => updateInteraction( { effect: v } ) } />
-				<EffectType value={ type } onChange={ ( v ) => updateInteraction( { type: v } ) } />
-				<Direction
-					value={ direction }
-					onChange={ ( v ) => updateInteraction( { direction: v } ) }
-					interactionType={ type }
-				/>
-				<TimeFrameIndicator
-					value={ String( duration ) }
-					onChange={ ( v ) => updateInteraction( { duration: parseInt( v, 10 ) } ) }
-					label={ __( 'Duration', 'elementor' ) }
-				/>
-				<TimeFrameIndicator
-					value={ String( delay ) }
-					onChange={ ( v ) => updateInteraction( { delay: parseInt( v, 10 ) } ) }
-					label={ __( 'Delay', 'elementor' ) }
-				/>
+				<Field label={ __( 'Effect', 'elementor' ) }>
+					<Effect value={ effect } onChange={ ( v ) => updateInteraction( { effect: v } ) } />
+				</Field>
+
+				<Field label={ __( 'Type', 'elementor' ) }>
+					<EffectType value={ type } onChange={ ( v ) => updateInteraction( { type: v } ) } />
+				</Field>
+
+				<Field label={ __( 'Direction', 'elementor' ) }>
+					<Direction
+						value={ direction }
+						onChange={ ( v ) => updateInteraction( { direction: v } ) }
+						interactionType={ type }
+					/>
+				</Field>
+
+				<Field label={ __( 'Duration', 'elementor' ) }>
+					<TimeFrameIndicator
+						value={ String( duration ) }
+						onChange={ ( v ) => updateInteraction( { duration: parseInt( v, 10 ) } ) }
+					/>
+				</Field>
+
+				<Field label={ __( 'Delay', 'elementor' ) }>
+					<TimeFrameIndicator
+						value={ String( delay ) }
+						onChange={ ( v ) => updateInteraction( { delay: parseInt( v, 10 ) } ) }
+					/>
+				</Field>
 			</Grid>
 		</PopoverContent>
 	);
 };
+
+type FieldProps = {
+	label: string;
+} & PropsWithChildren;
+
+function Field( { label, children }: FieldProps ) {
+	return (
+		<Grid item xs={ 12 }>
+			<PopoverGridContainer>
+				<Grid item xs={ 6 }>
+					<ControlFormLabel>{ label }</ControlFormLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					{ children }
+				</Grid>
+			</PopoverGridContainer>
+		</Grid>
+	);
+}