@elementor/editor-interactions 4.0.0-552 → 4.0.0-573

package/src/components/interaction-details.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type PropsWithChildren, useMemo } from 'react';
-import { ControlFormLabel, PopoverContent, PopoverGridContainer } from '@elementor/editor-controls';
-import { Divider, Grid } from '@elementor/ui';
+import { useMemo, useRef } from 'react';
+import { PopoverContent } from '@elementor/editor-controls';
+import { Box, Divider, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { getInteractionsControl } from '../interactions-controls-registry';
@@ -13,11 +13,12 @@ import {
 	extractSize,
 	extractString,
 } from '../utils/prop-value-utils';
+import { resolveDirection } from '../utils/resolve-direction';
 import { parseSizeValue } from '../utils/size-transform-utils';
 import { Direction } from './controls/direction';
-import { Effect } from './controls/effect';
 import { EffectType } from './controls/effect-type';
 import { TimeFrameIndicator } from './controls/time-frame-indicator';
+import { Field } from './field';
 
 type InteractionDetailsProps = {
 	interaction: InteractionItemValue;
@@ -39,7 +40,7 @@ const DEFAULT_VALUES = {
 	offsetBottom: 85,
 };
 
-const TRIGGERS_WITHOUT_REPLAY = [ 'load', 'scrollOn' ];
+const TRIGGERS_WITHOUT_REPLAY = [ 'load', 'scrollOn', 'hover', 'click' ];
 
 type InteractionsControlType =
 	| 'trigger'
@@ -130,6 +131,7 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	};
 
 	const TriggerControl = useControlComponent( 'trigger', true );
+	const EffectControl = useControlComponent( 'effect' );
 	const ReplayControl = useControlComponent( 'replay', controlVisibilityConfig.replay( interactionValues ) );
 	const RelativeToControl = useControlComponent(
 		'relativeTo',
@@ -143,16 +145,7 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 
 	const EasingControl = useControlComponent( 'easing' );
 
-	const resolveDirection = ( hasDirection: boolean, newEffect?: string, newDirection?: string ) => {
-		if ( newEffect === 'slide' && ! newDirection ) {
-			return 'top';
-		}
-		// Why? - New direction can be undefined when the effect is not slide, so if the updates object includes direction, we take it always!
-		if ( hasDirection ) {
-			return newDirection;
-		}
-		return direction;
-	};
+	const containerRef = useRef< HTMLDivElement >( null );
 
 	const updateInteraction = (
 		updates: Partial< {
@@ -169,7 +162,13 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 			offsetBottom: SizeStringValue;
 		} >
 	): void => {
-		const resolvedDirectionValue = resolveDirection( 'direction' in updates, updates.effect, updates.direction );
+		const resolvedDirectionValue = resolveDirection(
+			'direction' in updates,
+			updates.effect,
+			updates.direction,
+			direction,
+			effect
+		);
 
 		const updatedInteraction = {
 			...interaction,
@@ -199,131 +198,120 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	};
 
 	return (
-		<PopoverContent p={ 1.5 }>
-			<Grid container spacing={ 1.5 }>
-				{ TriggerControl && (
-					<Field label={ __( 'Trigger', 'elementor' ) }>
-						<TriggerControl value={ trigger } onChange={ ( v ) => updateInteraction( { trigger: v } ) } />
-					</Field>
-				) }
+		<Box ref={ containerRef }>
+			<PopoverContent p={ 1.5 }>
+				<Grid container spacing={ 1.5 }>
+					{ TriggerControl && (
+						<Field label={ __( 'Trigger', 'elementor' ) }>
+							<TriggerControl
+								value={ trigger }
+								onChange={ ( v ) => updateInteraction( { trigger: v } ) }
+							/>
+						</Field>
+					) }
+
+					{ ReplayControl && (
+						<Field label={ __( 'Replay', 'elementor' ) }>
+							<ReplayControl
+								value={ replay }
+								onChange={ ( v ) => updateInteraction( { replay: v } ) }
+								disabled={ true }
+								anchorRef={ containerRef }
+							/>
+						</Field>
+					) }
+				</Grid>
 
-				{ ReplayControl && (
-					<Field label={ __( 'Replay', 'elementor' ) }>
-						<ReplayControl
-							value={ replay }
-							onChange={ ( v ) => updateInteraction( { replay: v } ) }
-							disabled={ true }
-						/>
-					</Field>
-				) }
-			</Grid>
-
-			<Divider />
-
-			<Grid container spacing={ 1.5 }>
-				<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>
-
-				{ controlVisibilityConfig.duration( interactionValues ) && (
-					<Field label={ __( 'Duration', 'elementor' ) }>
-						<TimeFrameIndicator
-							value={ String( duration ) }
-							onChange={ ( v ) => updateInteraction( { duration: v as SizeStringValue } ) }
-							defaultValue={ DEFAULT_VALUES.duration as SizeStringValue }
-						/>
+				<Divider />
+
+				<Grid container spacing={ 1.5 }>
+					{ EffectControl && (
+						<Field label={ __( 'Effect', 'elementor' ) }>
+							<EffectControl value={ effect } onChange={ ( v ) => updateInteraction( { effect: v } ) } />
+						</Field>
+					) }
+
+					<Field label={ __( 'Type', 'elementor' ) }>
+						<EffectType value={ type } onChange={ ( v ) => updateInteraction( { type: v } ) } />
 					</Field>
-				) }
 
-				{ controlVisibilityConfig.delay( interactionValues ) && (
-					<Field label={ __( 'Delay', 'elementor' ) }>
-						<TimeFrameIndicator
-							value={ String( delay ) }
-							onChange={ ( v ) => updateInteraction( { delay: v as SizeStringValue } ) }
-							defaultValue={ DEFAULT_VALUES.delay as SizeStringValue }
+					<Field label={ __( 'Direction', 'elementor' ) }>
+						<Direction
+							value={ direction }
+							onChange={ ( v ) => updateInteraction( { direction: v } ) }
+							interactionType={ type }
 						/>
 					</Field>
-				) }
-			</Grid>
 
-			{ controlVisibilityConfig.relativeTo( interactionValues ) && RelativeToControl && (
-				<>
-					<Divider />
-					<Grid container spacing={ 1.5 }>
-						<Field label={ __( 'Relative To', 'elementor' ) }>
-							<RelativeToControl
-								value={ relativeTo }
-								onChange={ ( v ) => updateInteraction( { relativeTo: v } ) }
+					{ controlVisibilityConfig.duration( interactionValues ) && (
+						<Field label={ __( 'Duration', 'elementor' ) }>
+							<TimeFrameIndicator
+								value={ String( duration ) }
+								onChange={ ( v ) => updateInteraction( { duration: v as SizeStringValue } ) }
+								defaultValue={ DEFAULT_VALUES.duration as SizeStringValue }
 							/>
 						</Field>
-						{ OffsetTopControl && (
-							<Field label={ __( 'Offset Top', 'elementor' ) }>
-								<OffsetTopControl
-									value={ String( parseSizeValue( offsetTop, [ '%' ] ).size ) }
-									onChange={ ( v: string ) =>
-										updateInteraction( { offsetTop: v as SizeStringValue } )
-									}
-								/>
-							</Field>
-						) }
-						{ OffsetBottomControl && (
-							<Field label={ __( 'Offset Bottom', 'elementor' ) }>
-								<OffsetBottomControl
-									value={ String( parseSizeValue( offsetBottom, [ '%' ] ).size ) }
-									onChange={ ( v: string ) =>
-										updateInteraction( { offsetBottom: v as SizeStringValue } )
-									}
+					) }
+
+					{ controlVisibilityConfig.delay( interactionValues ) && (
+						<Field label={ __( 'Delay', 'elementor' ) }>
+							<TimeFrameIndicator
+								value={ String( delay ) }
+								onChange={ ( v ) => updateInteraction( { delay: v as SizeStringValue } ) }
+								defaultValue={ DEFAULT_VALUES.delay as SizeStringValue }
+							/>
+						</Field>
+					) }
+				</Grid>
+
+				{ controlVisibilityConfig.relativeTo( interactionValues ) && RelativeToControl && (
+					<>
+						<Divider />
+						<Grid container spacing={ 1.5 }>
+							<Field label={ __( 'Relative To', 'elementor' ) }>
+								<RelativeToControl
+									value={ relativeTo }
+									onChange={ ( v ) => updateInteraction( { relativeTo: v } ) }
 								/>
 							</Field>
-						) }
-					</Grid>
-					<Divider />
-				</>
-			) }
+							{ OffsetTopControl && (
+								<Field label={ __( 'Offset Top', 'elementor' ) }>
+									<OffsetTopControl
+										value={ String( parseSizeValue( offsetTop, [ '%' ] ).size ) }
+										onChange={ ( v: string ) =>
+											updateInteraction( { offsetTop: v as SizeStringValue } )
+										}
+									/>
+								</Field>
+							) }
+							{ OffsetBottomControl && (
+								<Field label={ __( 'Offset Bottom', 'elementor' ) }>
+									<OffsetBottomControl
+										value={ String( parseSizeValue( offsetBottom, [ '%' ] ).size ) }
+										onChange={ ( v: string ) =>
+											updateInteraction( { offsetBottom: v as SizeStringValue } )
+										}
+									/>
+								</Field>
+							) }
+						</Grid>
+						<Divider />
+					</>
+				) }
 
-			{ EasingControl && (
-				<Grid container spacing={ 1.5 }>
-					<Field label={ __( 'Easing', 'elementor' ) }>
-						<EasingControl
-							value={ easing }
-							onChange={ ( v ) => {
-								updateInteraction( { easing: v } );
-							} }
-						/>
-					</Field>
-				</Grid>
-			) }
-		</PopoverContent>
+				{ EasingControl && (
+					<Grid container spacing={ 1.5 }>
+						<Field label={ __( 'Easing', 'elementor' ) }>
+							<EasingControl
+								value={ easing }
+								onChange={ ( v ) => {
+									updateInteraction( { easing: v } );
+								} }
+							/>
+						</Field>
+					</Grid>
+				) }
+			</PopoverContent>
+		</Box>
 	);
 };
-
-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>
-	);
-}

package/src/index.ts

@@ -12,3 +12,4 @@ export {
 export { ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX } from './providers/document-elements-interactions-provider';
 export { init } from './init';
 export { registerInteractionsControl } from './interactions-controls-registry';
+export type { InteractionItemPropValue, FieldProps } from './types';

package/src/init.ts

@@ -1,4 +1,5 @@
 import { Easing } from './components/controls/easing';
+import { Effect } from './components/controls/effect';
 import { Replay } from './components/controls/replay';
 import { Trigger } from './components/controls/trigger';
 import { initCleanInteractionIdsOnDuplicate } from './hooks/on-duplicate';
@@ -9,7 +10,9 @@ import { documentElementsInteractionsProvider } from './providers/document-eleme
 export function init() {
 	try {
 		interactionsRepository.register( documentElementsInteractionsProvider );
+
 		initCleanInteractionIdsOnDuplicate();
+
 		registerInteractionsControl( {
 			type: 'trigger',
 			component: Trigger,
@@ -21,11 +24,17 @@ export function init() {
 			component: Easing,
 			options: [ 'easeIn' ],
 		} );
+
 		registerInteractionsControl( {
 			type: 'replay',
 			component: Replay,
 			options: [ 'true', 'false' ],
 		} );
+		registerInteractionsControl( {
+			type: 'effect',
+			component: Effect,
+			options: [ 'fade', 'slide', 'scale' ],
+		} );
 	} catch ( error ) {
 		throw error;
 	}

package/src/types.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 import { type Unit } from '@elementor/editor-controls';
 import type {
 	AnimationPresetPropValue,
@@ -53,6 +54,7 @@ export type ReplayFieldProps = {
 	value: boolean;
 	onChange: ( value: boolean ) => void;
 	disabled?: boolean;
+	anchorRef?: RefObject< HTMLElement | null >;
 };
 export type DirectionFieldProps = FieldProps & {
 	interactionType: string;

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type MouseEvent, type RefObject, useState } from 'react';
+import { PromotionChip, PromotionPopover, useCanvasClickHandler } from '@elementor/editor-ui';
+import { Box } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export type InteractionsPromotionChipProps = {
+	content: string;
+	upgradeUrl: string;
+	anchorRef?: RefObject< HTMLElement | null >;
+};
+
+export function InteractionsPromotionChip( { content, upgradeUrl, anchorRef }: InteractionsPromotionChipProps ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	useCanvasClickHandler( isOpen, () => setIsOpen( false ) );
+
+	const handleToggle = ( e: MouseEvent ) => {
+		e.stopPropagation();
+		setIsOpen( ( prev ) => ! prev );
+	};
+
+	return (
+		<PromotionPopover
+			open={ isOpen }
+			title={ __( 'Interactions', 'elementor' ) }
+			content={ content }
+			ctaText={ __( 'Upgrade now', 'elementor' ) }
+			ctaUrl={ upgradeUrl }
+			anchorRef={ anchorRef }
+			placement={ anchorRef ? 'right-start' : undefined }
+			onClose={ handleToggle }
+		>
+			<Box onClick={ handleToggle } sx={ { cursor: 'pointer', display: 'inline-flex', mr: 1 } }>
+				<PromotionChip />
+			</Box>
+		</PromotionPopover>
+	);
+}

package/src/utils/resolve-direction.ts

@@ -0,0 +1,20 @@
+export const resolveDirection = (
+	hasDirection: boolean,
+	newEffect?: string,
+	newDirection?: string,
+	currentDirection?: string,
+	currentEffect?: string
+) => {
+	if ( newEffect === 'slide' && ! newDirection ) {
+		return 'top';
+	}
+
+	if ( currentEffect === 'slide' && hasDirection ) {
+		return newDirection ?? 'top';
+	}
+	// Why? - New direction can be undefined when the effect is not slide, so if the updates object includes direction, we take it always!
+	if ( hasDirection ) {
+		return newDirection;
+	}
+	return currentDirection;
+};