@elementor/editor-interactions 4.1.0-714 → 4.1.0-715

package/package.json

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

package/src/components/controls/repeat.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';
+import { Number123Icon, RepeatIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { InteractionsPromotionChip } from '../../ui/interactions-promotion-chip';
+import { PromotionOverlayLayout } from '../../ui/promotion-overlay-layout';
+
+const TRACKING_DATA = { target_name: 'interactions_repeat', location_l2: 'interactions' } as const;
+
+export const REPEAT_OPTIONS = {
+	times: __( 'times', 'elementor' ),
+	loop: __( 'loop', 'elementor' ),
+};
+
+export const REPEAT_TOOLTIPS = {
+	times: __( 'Enable number', 'elementor' ),
+	loop: __( 'Infinite repeat', 'elementor' ),
+};
+
+export function Repeat() {
+	const repeatContainerRef = useRef< HTMLDivElement >( null );
+
+	const options: ToggleButtonGroupItem< string >[] = [
+		{
+			value: REPEAT_OPTIONS.times,
+			disabled: true,
+			label: REPEAT_TOOLTIPS.times,
+			renderContent: ( { size } ) => <Number123Icon fontSize={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: REPEAT_OPTIONS.loop,
+			disabled: true,
+			label: REPEAT_TOOLTIPS.loop,
+			renderContent: ( { size } ) => <RepeatIcon fontSize={ size } />,
+			showTooltip: true,
+		},
+	];
+
+	return (
+		<PromotionOverlayLayout
+			ref={ repeatContainerRef }
+			promotionChip={
+				<InteractionsPromotionChip
+					content={ __( 'Upgrade to control how many times the animation repeats.', 'elementor' ) }
+					upgradeUrl={ 'https://go.elementor.com/go-pro-interactions-repeat-modal/' }
+					anchorRef={ repeatContainerRef }
+					trackingData={ TRACKING_DATA }
+				/>
+			}
+		>
+			<ToggleButtonGroupUi items={ options } exclusive onChange={ () => {} } value={ '' } />
+		</PromotionOverlayLayout>
+	);
+}

package/src/components/controls/replay.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';
 import { CheckIcon, MinusIcon } from '@elementor/icons';
-import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type ReplayFieldProps } from '../../types';
 import { InteractionsPromotionChip } from '../../ui/interactions-promotion-chip';
+import { PromotionOverlayLayout } from '../../ui/promotion-overlay-layout';
 
 const TRACKING_DATA = { target_name: 'interactions_replay', location_l2: 'interactions' } as const;
 
@@ -16,10 +17,8 @@ export const REPLAY_OPTIONS = {
 
 export const BASE_REPLAY: string[] = [ 'no' ];
 
-const OVERLAY_GRID = '1 / 1';
-const CHIP_OFFSET = '50%';
-
-export function Replay( { onChange, anchorRef }: ReplayFieldProps ) {
+export function Replay( { onChange }: ReplayFieldProps ) {
+	const replayContainerRef = useRef< HTMLDivElement >( null );
 	const options: ToggleButtonGroupItem< boolean >[] = [
 		{
 			value: false,
@@ -38,18 +37,18 @@ export function Replay( { onChange, anchorRef }: ReplayFieldProps ) {
 	];
 
 	return (
-		<Box sx={ { display: 'grid', alignItems: 'center' } }>
-			<Box sx={ { gridArea: OVERLAY_GRID } }>
-				<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ false } />
-			</Box>
-			<Box sx={ { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: 'end' } }>
+		<PromotionOverlayLayout
+			ref={ replayContainerRef }
+			promotionChip={
 				<InteractionsPromotionChip
 					content={ __( 'Upgrade to run the animation every time its trigger occurs.', 'elementor' ) }
 					upgradeUrl={ 'https://go.elementor.com/go-pro-interactions-replay-modal/' }
-					anchorRef={ anchorRef }
+					anchorRef={ replayContainerRef }
 					trackingData={ TRACKING_DATA }
 				/>
-			</Box>
-		</Box>
+			}
+		>
+			<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ false } />
+		</PromotionOverlayLayout>
 	);
 }

package/src/components/interaction-details.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { type ComponentType, useMemo, useRef } from 'react';
+import { type ComponentType, useMemo } from 'react';
 import { PopoverContent } from '@elementor/editor-controls';
 import { type PropValue } from '@elementor/editor-props';
-import { Box, Divider, Grid } from '@elementor/ui';
+import { Divider, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { getInteractionsControl } from '../interactions-controls-registry';
@@ -182,8 +182,6 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	) as ComponentType< FieldProps< number > >;
 	const EasingControl = useControlComponent( 'easing' );
 
-	const containerRef = useRef< HTMLDivElement >( null );
-
 	const updateInteraction = (
 		updates: Partial< {
 			trigger: string;
@@ -241,150 +239,142 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	};
 
 	return (
-		<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>
+		<PopoverContent p={ 1.5 }>
+			<Grid container spacing={ 1.5 }>
+				{ TriggerControl && (
+					<Field label={ __( 'Trigger', 'elementor' ) }>
+						<TriggerControl value={ trigger } onChange={ ( v ) => updateInteraction( { trigger: v } ) } />
+					</Field>
+				) }
 
-				<Divider />
+				{ ReplayControl && (
+					<Field label={ __( 'Replay', 'elementor' ) }>
+						<ReplayControl
+							value={ replay }
+							onChange={ ( v ) => updateInteraction( { replay: v } ) }
+							disabled={ true }
+						/>
+					</Field>
+				) }
+			</Grid>
 
-				<Grid container spacing={ 1.5 }>
-					{ EffectControl && (
-						<Field label={ __( 'Effect', 'elementor' ) }>
-							<EffectControl value={ effect } onChange={ ( v ) => updateInteraction( { effect: v } ) } />
-						</Field>
-					) }
+			<Divider />
 
-					{ CustomEffectControl && (
-						<Field label={ __( 'Custom Effect', 'elementor' ) }>
-							<CustomEffectControl
-								value={ customEffects }
-								onChange={ ( v: PropValue ) => updateInteraction( { customEffects: v } ) }
-							/>
-						</Field>
-					) }
+			<Grid container spacing={ 1.5 }>
+				{ EffectControl && (
+					<Field label={ __( 'Effect', 'elementor' ) }>
+						<EffectControl value={ effect } onChange={ ( v ) => updateInteraction( { effect: v } ) } />
+					</Field>
+				) }
 
-					{ EffectTypeControl && (
-						<Field label={ __( 'Type', 'elementor' ) }>
-							<EffectTypeControl value={ type } onChange={ ( v ) => updateInteraction( { type: v } ) } />
-						</Field>
-					) }
-
-					{ DirectionControl && (
-						<Field label={ __( 'Direction', 'elementor' ) }>
-							<DirectionControl
-								value={ direction }
-								onChange={ ( v ) => updateInteraction( { direction: v } ) }
-								interactionType={ type }
-							/>
-						</Field>
-					) }
+				{ CustomEffectControl && (
+					<Field label={ __( 'Custom Effect', 'elementor' ) }>
+						<CustomEffectControl
+							value={ customEffects }
+							onChange={ ( v: PropValue ) => updateInteraction( { customEffects: v } ) }
+						/>
+					</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
-								value={ String( duration ) }
-								onChange={ ( v ) => updateInteraction( { duration: v as SizeStringValue } ) }
-								defaultValue={ DEFAULT_VALUES.duration as SizeStringValue }
-							/>
-						</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>
-					) }
-				</Grid>
+				{ EffectTypeControl && (
+					<Field label={ __( 'Type', 'elementor' ) }>
+						<EffectTypeControl value={ type } onChange={ ( v ) => updateInteraction( { type: v } ) } />
+					</Field>
+				) }
 
-				{ controlVisibilityConfig.relativeTo( interactionValues ) && RelativeToControl && (
-					<>
-						<Divider />
-						<Grid container spacing={ 1.5 }>
-							{ StartControl && (
-								<Field label={ __( 'Start', 'elementor' ) }>
-									<StartControl
-										value={ parseSizeValue( start, [ '%' ] ).size?.toString() ?? '' }
-										onChange={ ( v: string ) =>
-											updateInteraction( { start: v as SizeStringValue } )
-										}
-									/>
-								</Field>
-							) }
-							{ 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 />
-					</>
+				{ DirectionControl && (
+					<Field label={ __( 'Direction', 'elementor' ) }>
+						<DirectionControl
+							value={ direction }
+							onChange={ ( v ) => updateInteraction( { direction: v } ) }
+							interactionType={ type }
+						/>
+					</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
+							value={ String( duration ) }
+							onChange={ ( v ) => updateInteraction( { duration: v as SizeStringValue } ) }
+							defaultValue={ DEFAULT_VALUES.duration as SizeStringValue }
+						/>
+					</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>
 				) }
+			</Grid>
 
-				{ EasingControl && (
+			{ controlVisibilityConfig.relativeTo( interactionValues ) && RelativeToControl && (
+				<>
+					<Divider />
 					<Grid container spacing={ 1.5 }>
-						<Field label={ __( 'Easing', 'elementor' ) }>
-							<EasingControl
-								value={ easing }
-								onChange={ ( v ) => {
-									updateInteraction( { easing: v } );
-								} }
+						{ StartControl && (
+							<Field label={ __( 'Start', 'elementor' ) }>
+								<StartControl
+									value={ parseSizeValue( start, [ '%' ] ).size?.toString() ?? '' }
+									onChange={ ( v: string ) => updateInteraction( { start: v as SizeStringValue } ) }
+								/>
+							</Field>
+						) }
+						{ 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>
-				) }
-			</PopoverContent>
-		</Box>
+					<Divider />
+				</>
+			) }
+
+			{ EasingControl && (
+				<Grid container spacing={ 1.5 }>
+					<Field label={ __( 'Easing', 'elementor' ) }>
+						<EasingControl
+							value={ easing }
+							onChange={ ( v ) => {
+								updateInteraction( { easing: v } );
+							} }
+						/>
+					</Field>
+				</Grid>
+			) }
+		</PopoverContent>
 	);
 };

package/src/index.ts

@@ -16,6 +16,7 @@ export { TRIGGER_OPTIONS, BASE_TRIGGERS } from './components/controls/trigger';
 export { EASING_OPTIONS, BASE_EASINGS } from './components/controls/easing';
 export { REPLAY_OPTIONS, BASE_REPLAY } from './components/controls/replay';
 export { EFFECT_OPTIONS, BASE_EFFECTS } from './components/controls/effect';
+export { REPEAT_OPTIONS, REPEAT_TOOLTIPS } from './components/controls/repeat';
 
 export {
 	createString,

package/src/init.ts

@@ -3,6 +3,7 @@ import { Direction } from './components/controls/direction';
 import { Easing } from './components/controls/easing';
 import { Effect } from './components/controls/effect';
 import { EffectType } from './components/controls/effect-type';
+import { Repeat } from './components/controls/repeat';
 import { Replay } from './components/controls/replay';
 import { Trigger } from './components/controls/trigger';
 import { initCleanInteractionIdsOnDuplicate } from './hooks/on-duplicate';
@@ -54,6 +55,11 @@ export function init() {
 			options: [ 'fade', 'slide', 'scale' ],
 		} );
 
+		registerInteractionsControl( {
+			type: 'repeat',
+			component: Repeat,
+		} );
+
 		initMcpInteractions();
 	} catch ( error ) {
 		throw error;

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

@@ -64,5 +64,3 @@ export const InteractionsPromotionChip = forwardRef< InteractionsPromotionChipRe
 		);
 	}
 );
-
-InteractionsPromotionChip.displayName = 'InteractionsPromotionChip';

package/src/ui/promotion-overlay-layout.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { forwardRef, type ReactNode } from 'react';
+import { Box } from '@elementor/ui';
+
+const OVERLAY_GRID = '1 / 1';
+const CHIP_OFFSET = '50%';
+
+type PromotionOverlayLayoutProps = {
+	children: ReactNode;
+	promotionChip: ReactNode;
+};
+
+export const PromotionOverlayLayout = forwardRef< HTMLDivElement, PromotionOverlayLayoutProps >(
+	( { children, promotionChip }, ref ) => (
+		<Box ref={ ref } sx={ { display: 'grid', alignItems: 'center' } }>
+			<Box sx={ { gridArea: OVERLAY_GRID } }>{ children }</Box>
+			<Box sx={ { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: 'end' } }>
+				{ promotionChip }
+			</Box>
+		</Box>
+	)
+);