@elementor/editor-interactions 4.0.0-manual → 4.1.0-684

package/package.json

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

package/src/commands/get-clipboard-elements.ts

@@ -0,0 +1,11 @@
+import type { V1ElementModelProps } from '@elementor/editor-elements';
+
+export function getClipboardElements( storageKey: string = 'clipboard' ): V1ElementModelProps[] | undefined {
+	try {
+		const storedData = JSON.parse( localStorage.getItem( 'elementor' ) ?? '{}' );
+
+		return storedData[ storageKey ]?.elements as V1ElementModelProps[] | undefined;
+	} catch {
+		return undefined;
+	}
+}

package/src/commands/paste-interactions.ts

@@ -0,0 +1,136 @@
+import {
+	getContainer,
+	getElementInteractions,
+	getElementLabel,
+	getWidgetsCache,
+	updateElementInteractions,
+	type V1Element,
+	type V1ElementModelProps,
+} from '@elementor/editor-elements';
+import {
+	__privateListenTo as listenTo,
+	type CommandEvent,
+	commandStartEvent,
+	undoable,
+} from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import type { ElementInteractions } from '../types';
+import { createString } from '../utils/prop-value-utils';
+import { generateTempInteractionId } from '../utils/temp-id-utils';
+import { getClipboardElements } from './get-clipboard-elements';
+
+function isAtomicContainer( container: V1Element ): boolean {
+	const type = container?.model.get( 'widgetType' ) || container?.model.get( 'elType' );
+	const widgetsCache = getWidgetsCache();
+	const elementConfig = widgetsCache?.[ type ];
+
+	return Boolean( elementConfig?.atomic_props_schema );
+}
+
+type PasteInteractionsCommandArgs = {
+	container?: V1Element;
+	containers?: V1Element[];
+	storageKey?: string;
+};
+
+type PasteInteractionsPayload = {
+	containers: V1Element[];
+	newInteractions: ElementInteractions;
+};
+
+function getTitleForContainers( containers: V1Element[] ): string {
+	return containers.length > 1 ? __( 'Elements', 'elementor' ) : getElementLabel( containers[ 0 ].id );
+}
+
+function normalizeClipboardInteractions( raw: V1ElementModelProps[ 'interactions' ] ): ElementInteractions | null {
+	if ( ! raw ) {
+		return null;
+	}
+
+	const parsed: ElementInteractions = typeof raw === 'string' ? ( JSON.parse( raw ) as ElementInteractions ) : raw;
+
+	if ( ! parsed?.items?.length ) {
+		return null;
+	}
+
+	return { version: parsed.version ?? 1, items: parsed.items };
+}
+
+function regenerateInteractionIds( interactions: ElementInteractions ): ElementInteractions {
+	const cloned = structuredClone( interactions ) as ElementInteractions;
+
+	cloned.items?.forEach( ( item ) => {
+		if ( item.$$type === 'interaction-item' && item.value ) {
+			item.value.interaction_id = createString( generateTempInteractionId() );
+		}
+	} );
+
+	return cloned;
+}
+
+export function initPasteInteractionsCommand() {
+	const undoablePasteInteractions = undoable(
+		{
+			do: ( { containers, newInteractions }: PasteInteractionsPayload ) => {
+				const pasted = regenerateInteractionIds( newInteractions );
+
+				return containers.map( ( container ) => {
+					const elementId = container.id;
+					const previous = getElementInteractions( elementId );
+
+					updateElementInteractions( {
+						elementId,
+						interactions: pasted,
+					} );
+
+					return { elementId, previous: previous ?? { version: 1, items: [] } };
+				} );
+			},
+			undo: ( _: PasteInteractionsPayload, revertData ) => {
+				revertData.forEach( ( { elementId, previous } ) => {
+					updateElementInteractions( {
+						elementId,
+						interactions: previous.items?.length ? previous : undefined,
+					} );
+				} );
+			},
+		},
+		{
+			title: ( { containers } ) => getTitleForContainers( containers ),
+			subtitle: __( 'Interactions Pasted', 'elementor' ),
+		}
+	);
+
+	listenTo( commandStartEvent( 'document/elements/paste-interactions' ), ( e ) => {
+		const args = ( e as CommandEvent ).args as PasteInteractionsCommandArgs;
+		const containers = args.containers ?? ( args.container ? [ args.container ] : [] );
+		const storageKey = args.storageKey ?? 'clipboard';
+
+		if ( ! containers.length ) {
+			return;
+		}
+
+		const clipboardElements = getClipboardElements( storageKey );
+		const [ clipboardElement ] = clipboardElements ?? [];
+
+		if ( ! clipboardElement ) {
+			return;
+		}
+
+		const newInteractions = normalizeClipboardInteractions( clipboardElement.interactions );
+
+		if ( ! newInteractions ) {
+			return;
+		}
+
+		const existingContainers = containers.filter( ( c ) => getContainer( c.id ) ) as V1Element[];
+		const validContainers = existingContainers.filter( isAtomicContainer );
+
+		if ( ! validContainers.length ) {
+			return;
+		}
+
+		undoablePasteInteractions( { containers: validContainers, newInteractions } );
+	} );
+}

package/src/components/controls/easing.tsx

@@ -5,6 +5,8 @@ import { type FieldProps } from '../../types';
 import { PromotionSelect } from '../../ui/promotion-select';
 import { DEFAULT_VALUES } from '../interaction-details';
 
+const TRACKING_DATA = { target_name: 'interactions_easing', location_l2: 'interactions' } as const;
+
 export const EASING_OPTIONS = {
 	easeIn: __( 'Ease In', 'elementor' ),
 	easeInOut: __( 'Ease In Out', 'elementor' ),
@@ -33,6 +35,7 @@ export function Easing( {}: FieldProps ) {
 			disabledOptions={ disabledOptions }
 			promotionContent={ __( 'Upgrade to control the smoothness of the interaction.', 'elementor' ) }
 			upgradeUrl="https://go.elementor.com/go-pro-interactions-easing-modal/"
+			trackingData={ TRACKING_DATA }
 		/>
 	);
 }

package/src/components/controls/effect.tsx

@@ -5,6 +5,8 @@ import { type FieldProps } from '../../types';
 import { PromotionSelect } from '../../ui/promotion-select';
 import { DEFAULT_VALUES } from '../interaction-details';
 
+const TRACKING_DATA = { target_name: 'interactions_effect', location_l2: 'interactions' } as const;
+
 export const EFFECT_OPTIONS = {
 	fade: __( 'Fade', 'elementor' ),
 	slide: __( 'Slide', 'elementor' ),
@@ -35,6 +37,7 @@ export function Effect( { value, onChange }: FieldProps ) {
 				'elementor'
 			) }
 			upgradeUrl="https://go.elementor.com/go-pro-interactions-custom-effect-modal/"
+			trackingData={ TRACKING_DATA }
 		/>
 	);
 }

package/src/components/controls/replay.tsx

@@ -7,6 +7,8 @@ import { __ } from '@wordpress/i18n';
 import { type ReplayFieldProps } from '../../types';
 import { InteractionsPromotionChip } from '../../ui/interactions-promotion-chip';
 
+const TRACKING_DATA = { target_name: 'interactions_replay', location_l2: 'interactions' } as const;
+
 export const REPLAY_OPTIONS = {
 	no: __( 'No', 'elementor' ),
 	yes: __( 'Yes', 'elementor' ),
@@ -45,6 +47,7 @@ export function Replay( { onChange, anchorRef }: ReplayFieldProps ) {
 					content={ __( 'Upgrade to run the animation every time its trigger occurs.', 'elementor' ) }
 					upgradeUrl={ 'https://go.elementor.com/go-pro-interactions-replay-modal/' }
 					anchorRef={ anchorRef }
+					trackingData={ TRACKING_DATA }
 				/>
 			</Box>
 		</Box>

package/src/components/controls/trigger.tsx

@@ -5,6 +5,8 @@ import { type FieldProps } from '../../types';
 import { PromotionSelect } from '../../ui/promotion-select';
 import { DEFAULT_VALUES } from '../interaction-details';
 
+const TRACKING_DATA = { target_name: 'interactions_trigger', location_l2: 'interactions' } as const;
+
 export const TRIGGER_OPTIONS = {
 	load: __( 'Page load', 'elementor' ),
 	scrollIn: __( 'Scroll into view', 'elementor' ),
@@ -33,6 +35,7 @@ export function Trigger( { value, onChange }: FieldProps ) {
 			promotionLabel={ __( 'PRO triggers', 'elementor' ) }
 			promotionContent={ __( 'Upgrade to unlock more interactions triggers.', 'elementor' ) }
 			upgradeUrl="https://go.elementor.com/go-pro-interactions-triggers-modal/"
+			trackingData={ TRACKING_DATA }
 		/>
 	);
 }

package/src/components/interaction-details.tsx

@@ -35,6 +35,8 @@ export const DEFAULT_VALUES = {
 	replay: false,
 	easing: 'easeIn',
 	relativeTo: 'viewport',
+	repeat: '',
+	times: 1,
 	start: 85,
 	end: 15,
 };
@@ -53,7 +55,9 @@ type InteractionsControlType =
 	| 'relativeTo'
 	| 'start'
 	| 'end'
-	| 'customEffects';
+	| 'customEffects'
+	| 'repeat'
+	| 'times';
 
 type InteractionValues = {
 	trigger: string;
@@ -68,6 +72,8 @@ type InteractionValues = {
 	start: SizeStringValue;
 	end: SizeStringValue;
 	customEffects?: PropValue;
+	repeat: string;
+	times: number;
 };
 
 type ControlVisibilityConfig = {
@@ -82,6 +88,8 @@ const controlVisibilityConfig: ControlVisibilityConfig = {
 	relativeTo: ( values ) => values.trigger === 'scrollOn',
 	start: ( values ) => values.trigger === 'scrollOn',
 	end: ( values ) => values.trigger === 'scrollOn',
+	repeat: ( values ) => values.trigger !== 'scrollOn',
+	times: ( values ) => values.trigger !== 'scrollOn' && values.repeat === 'times',
 
 	duration: ( values ) => {
 		const isRelativeToVisible = values.trigger === 'scrollOn';
@@ -93,6 +101,14 @@ const controlVisibilityConfig: ControlVisibilityConfig = {
 	},
 };
 
+function normalizeTimesValue( value: unknown, fallback: number ): number {
+	const numericValue = Number( value );
+	if ( ! Number.isFinite( numericValue ) ) {
+		return fallback;
+	}
+	return Math.max( 1, Math.floor( numericValue ) );
+}
+
 function useControlComponent( controlName: InteractionsControlType, isVisible: boolean = true ) {
 	return useMemo( () => {
 		if ( ! isVisible ) {
@@ -113,6 +129,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 configValue = interaction.animation.value.config?.value;
+	const repeat = extractString( configValue?.repeat, DEFAULT_VALUES.repeat );
+	const times = normalizeTimesValue( configValue?.times?.value, DEFAULT_VALUES.times );
 
 	const start = extractSize( interaction.animation.value.config?.value.start, DEFAULT_VALUES.start );
 	const end = extractSize( interaction.animation.value.config?.value.end, DEFAULT_VALUES.end );
@@ -127,6 +146,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		easing,
 		replay,
 		relativeTo,
+		repeat,
+		times,
 		start,
 		end,
 		customEffects,
@@ -151,6 +172,14 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 		controlVisibilityConfig.effectType( interactionValues )
 	);
 	const DirectionControl = useControlComponent( 'direction', controlVisibilityConfig.direction( interactionValues ) );
+	const RepeatControl = useControlComponent(
+		'repeat',
+		controlVisibilityConfig.repeat( interactionValues )
+	) as ComponentType< FieldProps< string > >;
+	const TimesControl = useControlComponent(
+		'times',
+		controlVisibilityConfig.times( interactionValues )
+	) as ComponentType< FieldProps< number > >;
 	const EasingControl = useControlComponent( 'easing' );
 
 	const containerRef = useRef< HTMLDivElement >( null );
@@ -166,6 +195,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 			replay: boolean;
 			easing?: string;
 			relativeTo: string;
+			repeat: string;
+			times?: number;
 			start: SizeStringValue;
 			end: SizeStringValue;
 			customEffects?: PropValue;
@@ -192,6 +223,8 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 				replay: updates.replay ?? replay,
 				easing: updates.easing ?? easing,
 				relativeTo: updates.relativeTo ?? relativeTo,
+				repeat: updates.repeat ?? repeat,
+				times: updates.times ?? times,
 				start: updates.start ?? start,
 				end: updates.end ?? end,
 				customEffects: updates.customEffects ?? customEffects,
@@ -266,6 +299,25 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 						</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

package/src/components/interactions-list.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Repeater } from '@elementor/editor-controls';
+import { Repeater, type SetRepeaterValuesMeta } from '@elementor/editor-controls';
 import { InfoCircleFilledIcon, PlayerPlayIcon } from '@elementor/icons';
 import { Alert, AlertTitle, Box, IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useInteractionsContext } from '../contexts/interactions-context';
 import { InteractionItemContextProvider } from '../contexts/interactions-item-context';
 import type { ElementInteractions, InteractionItemPropValue, InteractionItemValue } from '../types';
 import { buildDisplayLabel, createDefaultInteractionItem, extractString } from '../utils/prop-value-utils';
+import { trackInteractionCreated } from '../utils/tracking';
 import { InteractionsListItem } from './interactions-list-item';
 export const MAX_NUMBER_OF_INTERACTIONS = 5;
 
@@ -20,6 +22,7 @@ export type InteractionListProps = {
 
 export function InteractionsList( props: InteractionListProps ) {
 	const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
+	const { elementId } = useInteractionsContext();
 
 	const hasInitializedRef = useRef( false );
 
@@ -62,13 +65,23 @@ export function InteractionsList( props: InteractionListProps ) {
 	) : undefined;
 
 	const handleRepeaterChange = useCallback(
-		( newItems: ElementInteractions[ 'items' ] ) => {
+		(
+			newItems: ElementInteractions[ 'items' ],
+			_: unknown,
+			meta?: SetRepeaterValuesMeta< InteractionItemPropValue >
+		) => {
 			handleUpdateInteractions( {
 				...interactions,
 				items: newItems,
 			} );
+			if ( meta?.action?.type === 'add' ) {
+				const addedItem = meta.action.payload[ 0 ]?.item;
+				if ( addedItem ) {
+					trackInteractionCreated( elementId, addedItem );
+				}
+			}
 		},
-		[ interactions, handleUpdateInteractions ]
+		[ interactions, handleUpdateInteractions, elementId ]
 	);
 
 	const handleInteractionChange = useCallback(

package/src/components/interactions-tab.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { useCallback, useState } from 'react';
-import { useElementInteractions } from '@elementor/editor-elements';
 import { SessionStorageProvider } from '@elementor/session';
 import { Stack } from '@elementor/ui';
 
 import { InteractionsProvider, useInteractionsContext } from '../contexts/interactions-context';
 import { PopupStateProvider } from '../contexts/popup-state-context';
+import { useElementInteractions } from '../hooks/use-element-interactions';
 import type { ElementInteractions } from '../types';
+import { createDefaultInteractionItem } from '../utils/prop-value-utils';
+import { trackInteractionCreated } from '../utils/tracking';
 import { EmptyState } from './empty-state';
 import { InteractionsList } from './interactions-list';
 
@@ -33,6 +35,7 @@ function InteractionsTabContent( { elementId }: { elementId: string } ) {
 				<EmptyState
 					onCreateInteraction={ () => {
 						firstInteractionState[ 1 ]( true );
+						trackInteractionCreated( elementId, createDefaultInteractionItem() );
 					} }
 				/>
 			) }

package/src/contexts/interactions-context.tsx

@@ -4,10 +4,12 @@ import {
 	type ElementInteractions,
 	playElementInteractions,
 	updateElementInteractions,
-	useElementInteractions,
 } from '@elementor/editor-elements';
 
+import { useElementInteractions } from '../hooks/use-element-interactions';
+
 type InteractionsContextValue = {
+	elementId: string;
 	interactions: ElementInteractions;
 	setInteractions: ( value: ElementInteractions | undefined ) => void;
 	playInteractions: ( interactionId: string ) => void;
@@ -44,6 +46,7 @@ export const InteractionsProvider = ( { children, elementId }: { children: React
 	};
 
 	const contextValue: InteractionsContextValue = {
+		elementId,
 		interactions,
 		setInteractions,
 		playInteractions,

package/src/hooks/use-element-interactions.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { type ElementID, type ElementInteractions, getElementInteractions } from '@elementor/editor-elements';
+import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';
+
+import { filterInteractions } from '../utils/filter-interactions';
+
+export const useElementInteractions = ( elementId: ElementID ) => {
+	const [ interactions, setInteractions ] = useState< ElementInteractions >( () => {
+		const initial = getElementInteractions( elementId );
+		const filteredInteractions = filterInteractions( initial?.items ?? [] );
+
+		return { version: initial?.version ?? 1, items: filteredInteractions };
+	} );
+
+	useListenTo(
+		windowEvent( 'elementor/element/update_interactions' ),
+		() => {
+			const newInteractions = getElementInteractions( elementId );
+			const filteredInteractions = filterInteractions( newInteractions?.items ?? [] );
+			setInteractions( { version: newInteractions?.version ?? 1, items: filteredInteractions } );
+		},
+		[ elementId ]
+	);
+
+	return interactions;
+};

package/src/index.ts

@@ -16,3 +16,28 @@ 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 {
+	createString,
+	createNumber,
+	createBoolean,
+	createTimingConfig,
+	createConfig,
+	createExcludedBreakpoints,
+	createInteractionBreakpoints,
+	createAnimationPreset,
+	createInteractionItem,
+	createDefaultInteractionItem,
+	createDefaultInteractions,
+	extractString,
+	extractBoolean,
+	extractSize,
+	extractExcludedBreakpoints,
+	buildDisplayLabel,
+} from './utils/prop-value-utils';
+
+export { generateTempInteractionId, isTempId } from './utils/temp-id-utils';
+export { resolveDirection } from './utils/resolve-direction';
+export { convertTimeUnit } from './utils/time-conversion';
+export { parseSizeValue, formatSizeValue } from './utils/size-transform-utils';
+export { useElementInteractions } from './hooks/use-element-interactions';

package/src/init.ts

@@ -1,3 +1,4 @@
+import { initPasteInteractionsCommand } from './commands/paste-interactions';
 import { Direction } from './components/controls/direction';
 import { Easing } from './components/controls/easing';
 import { Effect } from './components/controls/effect';
@@ -15,6 +16,7 @@ export function init() {
 		interactionsRepository.register( documentElementsInteractionsProvider );
 
 		initCleanInteractionIdsOnDuplicate();
+		initPasteInteractionsCommand();
 
 		registerInteractionsControl( {
 			type: 'trigger',
@@ -31,7 +33,7 @@ export function init() {
 		registerInteractionsControl( {
 			type: 'replay',
 			component: Replay,
-			options: [ 'true', 'false' ],
+			options: [ 'no' ],
 		} );
 
 		registerInteractionsControl( {

package/src/interactions-controls-registry.ts

@@ -1,9 +1,15 @@
 import { type ComponentType } from 'react';
 import { type PropValue } from '@elementor/editor-props';
 
-import { type DirectionFieldProps, type FieldProps, type ReplayFieldProps } from './types';
+import {
+	type DirectionFieldProps,
+	type FieldProps,
+	type RepeatFieldProps,
+	type ReplayFieldProps,
+	type TimesFieldProps,
+} from './types';
 
-type InteractionsControlType =
+export type InteractionsControlType =
 	| 'trigger'
 	| 'effect'
 	| 'effectType'
@@ -11,6 +17,8 @@ type InteractionsControlType =
 	| 'duration'
 	| 'delay'
 	| 'replay'
+	| 'repeat'
+	| 'times'
 	| 'easing'
 	| 'relativeTo'
 	| 'start'
@@ -26,6 +34,8 @@ type InteractionsControlPropsMap = {
 	duration: FieldProps;
 	delay: FieldProps;
 	replay: ReplayFieldProps;
+	repeat: RepeatFieldProps;
+	times: TimesFieldProps;
 	easing: FieldProps;
 	relativeTo: FieldProps;
 	start: FieldProps;
@@ -40,7 +50,9 @@ type ControlOptions< T extends InteractionsControlType > = {
 
 type StoredControlOptions = {
 	type: InteractionsControlType;
-	component: ComponentType< FieldProps | DirectionFieldProps | ReplayFieldProps >;
+	component: ComponentType<
+		FieldProps | DirectionFieldProps | ReplayFieldProps | RepeatFieldProps | TimesFieldProps
+	>;
 	options?: string[];
 };