@elementor/editor-interactions 3.33.0-224

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type FieldProps } from '../../types';
+
+export function TimeFrameIndicator( { value, onChange, label }: FieldProps ) {
+	const availableTimeFrames = [ '0', '100', '200', '300', '400', '500', '750', '1000', '1250', '1500' ].map(
+		( key ) => ( {
+			key,
+			// translators: %s: time in milliseconds
+			label: __( '%s MS', 'elementor' ).replace( '%s', key ),
+		} )
+	);
+
+	return (
+		<>
+			<Grid item xs={ 12 } md={ 6 }>
+				<Typography variant="caption" color="text.secondary">
+					{ label }
+				</Typography>
+			</Grid>
+			<Grid item xs={ 12 } md={ 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>
+		</>
+	);
+}

package/src/components/controls/trigger.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Grid, Select, type SelectChangeEvent, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type FieldProps } from '../../types';
+
+export function Trigger( { value, onChange }: FieldProps ) {
+	const availableTriggers = Object.entries( {
+		load: __( 'Page load', 'elementor' ),
+		scrollIn: __( 'Scroll into view', 'elementor' ),
+		scrollOut: __( 'Scroll out of view', 'elementor' ),
+	} ).map( ( [ key, label ] ) => ( {
+		key,
+		label,
+	} ) );
+
+	return (
+		<>
+			<Grid item xs={ 12 } md={ 6 }>
+				<Typography variant="caption" color="text.secondary">
+					{ __( 'Trigger', 'elementor' ) }
+				</Typography>
+			</Grid>
+			<Grid item xs={ 12 } md={ 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>
+		</>
+	);
+}

package/src/components/empty-state.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { SwipeIcon } from '@elementor/icons';
+import { Button, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const EmptyState = ( { onCreateInteraction }: { onCreateInteraction: () => void } ) => {
+	return (
+		<Stack
+			alignItems="center"
+			justifyContent="center"
+			height="100%"
+			color="text.secondary"
+			sx={ { p: 2.5, pt: 8, pb: 5.5 } }
+			gap={ 1.5 }
+		>
+			<SwipeIcon fontSize="large" />
+
+			<Typography align="center" variant="subtitle2">
+				{ __( 'Animate elements with Interactions', 'elementor' ) }
+			</Typography>
+
+			<Typography align="center" variant="caption" maxWidth="170px">
+				{ __(
+					'Add entrance animations and effects triggered by user interactions such as click, hover, or scroll.',
+					'elementor'
+				) }
+			</Typography>
+
+			<Button variant="outlined" color="secondary" size="small" sx={ { mt: 1 } } onClick={ onCreateInteraction }>
+				{ __( 'Create an interaction', 'elementor' ) }
+			</Button>
+		</Stack>
+	);
+};

package/src/components/header.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { PlusIcon } from '@elementor/icons';
+import { IconButton, Stack, Typography } from '@elementor/ui';
+
+export const Header = ( { label }: { label: string } ) => {
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			justifyContent="space-between"
+			gap={ 1 }
+			sx={ { marginInlineEnd: -0.75, py: 0.25 } }
+		>
+			<Typography component="label" variant="caption" color="text.secondary" sx={ { lineHeight: 1 } }>
+				{ label }
+			</Typography>
+			<IconButton size="tiny" disabled>
+				<PlusIcon fontSize="tiny" />
+			</IconButton>
+		</Stack>
+	);
+};

package/src/components/interaction-details.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { Divider, Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { Direction } from './controls/direction';
+import { Effect } from './controls/effect';
+import { EffectType } from './controls/effect-type';
+import { TimeFrameIndicator } from './controls/time-frame-indicator';
+import { Trigger } from './controls/trigger';
+
+const DELIMITER = '-';
+
+type InteractionDetailsProps = {
+	interaction: string;
+	onChange: ( interaction: string ) => void;
+};
+
+export const InteractionDetails = ( { interaction, onChange }: InteractionDetailsProps ) => {
+	const [ interactionDetails, setInteractionDetails ] = useState( () => {
+		const [ trigger, effect, type, direction, duration, delay ] = interaction.split( DELIMITER );
+
+		return {
+			trigger: trigger || 'load',
+			effect: effect || 'fade',
+			type: type || 'in',
+			direction: direction || '',
+			duration: duration || '300',
+			delay: delay || '0',
+		};
+	} );
+
+	useEffect( () => {
+		const newValue = Object.values( interactionDetails ).join( DELIMITER );
+		onChange( newValue );
+	}, [ interactionDetails, onChange ] );
+
+	const handleChange = < K extends keyof typeof interactionDetails >(
+		key: K,
+		value: ( typeof interactionDetails )[ K ]
+	) => {
+		setInteractionDetails( ( prev ) => ( { ...prev, [ key ]: value } ) );
+	};
+
+	return (
+		<>
+			<Grid container spacing={ 2 } sx={ { width: '300px', p: 1 } }>
+				<Trigger value={ interactionDetails.trigger } onChange={ ( v ) => handleChange( 'trigger', v ) } />
+			</Grid>
+			<Divider />
+			<Grid container spacing={ 2 } sx={ { width: '300px', p: 1 } }>
+				<Effect value={ interactionDetails.effect } onChange={ ( v ) => handleChange( 'effect', v ) } />
+				<EffectType value={ interactionDetails.type } onChange={ ( v ) => handleChange( 'type', v ) } />
+				<Direction
+					value={ interactionDetails.direction ?? '' }
+					onChange={ ( v ) => handleChange( 'direction', v ) }
+				/>
+				<TimeFrameIndicator
+					value={ interactionDetails.duration }
+					onChange={ ( v ) => handleChange( 'duration', v ) }
+					label={ __( 'Duration', 'elementor' ) }
+				/>
+				<TimeFrameIndicator
+					value={ interactionDetails.delay }
+					onChange={ ( v ) => handleChange( 'delay', v ) }
+					label={ __( 'Delay', 'elementor' ) }
+				/>
+			</Grid>
+		</>
+	);
+};

package/src/components/interactions-list.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { EyeIcon, XIcon } from '@elementor/icons';
+import { bindPopover, bindTrigger, IconButton, Popover, Stack, UnstableTag, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { usePopupStateContext } from '../contexts/popup-state-contex';
+import { formatInteractionLabel } from '../utils/format-interaction-label';
+import { Header } from './header';
+import { InteractionDetails } from './interaction-details';
+
+type PredefinedInteractionsListProps = {
+	onSelectInteraction: ( interaction: string ) => void;
+	selectedInteraction: string;
+	onDelete?: () => void;
+};
+
+export const PredefinedInteractionsList = ( {
+	onSelectInteraction,
+	selectedInteraction,
+	onDelete,
+}: PredefinedInteractionsListProps ) => {
+	return (
+		<Stack sx={ { m: 1, p: 1.5 } } gap={ 2 }>
+			<Header label={ __( 'Interactions', 'elementor' ) } />
+			<InteractionsList
+				onDelete={ () => onDelete?.() }
+				selectedInteraction={ selectedInteraction }
+				onSelectInteraction={ onSelectInteraction }
+			/>
+		</Stack>
+	);
+};
+
+type InteractionListProps = {
+	onDelete: () => void;
+	onSelectInteraction: ( interaction: string ) => void;
+	selectedInteraction: string;
+	defaultStateRef?: React.MutableRefObject< boolean | undefined >;
+};
+
+function InteractionsList( { onSelectInteraction, selectedInteraction, defaultStateRef }: InteractionListProps ) {
+	const [ interactionId, setInteractionId ] = useState( selectedInteraction );
+
+	const anchorEl = useRef< HTMLDivElement | null >( null );
+
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-interactions-list-${ popupId }`,
+	} );
+
+	const { openByDefault, resetDefaultOpen } = usePopupStateContext();
+
+	useEffect( () => {
+		if ( interactionId ) {
+			onSelectInteraction( interactionId );
+		}
+	}, [ interactionId, onSelectInteraction ] );
+
+	useEffect( () => {
+		if ( openByDefault && anchorEl.current ) {
+			popupState.open();
+			resetDefaultOpen();
+		}
+	}, [ defaultStateRef, openByDefault, popupState, resetDefaultOpen ] );
+
+	const displayLabel = useMemo( () => {
+		return formatInteractionLabel( interactionId );
+	}, [ interactionId ] );
+
+	return (
+		<Stack gap={ 1.5 } ref={ anchorEl }>
+			<UnstableTag
+				{ ...bindTrigger( popupState ) }
+				fullWidth
+				variant="outlined"
+				label={ displayLabel }
+				showActionsOnHover
+				actions={
+					<>
+						<IconButton size="tiny" disabled>
+							<EyeIcon fontSize="tiny" />
+						</IconButton>
+						<IconButton size="tiny">
+							<XIcon fontSize="tiny" />
+						</IconButton>
+					</>
+				}
+			/>
+			<Popover
+				{ ...bindPopover( popupState ) }
+				disableScrollLock
+				anchorEl={ anchorEl.current }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'left' } }
+				PaperProps={ {
+					sx: { my: 1 },
+				} }
+				onClose={ () => {
+					popupState.close();
+				} }
+			>
+				<InteractionDetails
+					interaction={ selectedInteraction }
+					onChange={ ( newValue: string ) => {
+						setInteractionId( newValue );
+					} }
+				/>
+			</Popover>
+		</Stack>
+	);
+}

package/src/contexts/popup-state-contex.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createContext, useCallback, useContext, useState } from 'react';
+
+type PopupStateContextType = {
+	openByDefault: boolean;
+	triggerDefaultOpen: () => void;
+	resetDefaultOpen: () => void;
+};
+
+const PopupStateContext = createContext< PopupStateContextType | undefined >( undefined );
+
+export const PopupStateProvider = ( { children }: { children: React.ReactNode } ) => {
+	const [ openByDefault, setOpenByDefault ] = useState( false );
+
+	const triggerDefaultOpen = useCallback( () => {
+		setOpenByDefault( true );
+	}, [] );
+
+	const resetDefaultOpen = useCallback( () => {
+		setOpenByDefault( false );
+	}, [] );
+
+	return (
+		<PopupStateContext.Provider value={ { openByDefault, triggerDefaultOpen, resetDefaultOpen } }>
+			{ children }
+		</PopupStateContext.Provider>
+	);
+};
+
+export const usePopupStateContext = () => {
+	const context = useContext( PopupStateContext );
+	if ( ! context ) {
+		throw new Error( 'usePopupStateContext must be used within PopupStateProvider' );
+	}
+	return context;
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components/empty-state';
+export * from './components/interactions-list';
+export * from './types';
+export * from './utils/get-interactions-config';
+export * from './contexts/popup-state-contex';

package/src/types.ts

@@ -0,0 +1,23 @@
+export type AnimationOption = {
+	value: string;
+	label: string;
+};
+
+export type InteractionConstants = {
+	defaultDuration: number;
+	defaultDelay: number;
+	slideDistance: number;
+	scaleStart: number;
+	easing: string;
+};
+
+export type InteractionsConfig = {
+	constants: InteractionConstants;
+	animationOptions: AnimationOption[];
+};
+
+export type FieldProps = {
+	value: string;
+	onChange: ( value: string ) => void;
+	label?: string;
+};

package/src/utils/format-interaction-label.ts

@@ -0,0 +1,32 @@
+import { getInteractionsConfig } from './get-interactions-config';
+
+export function formatInteractionLabel( animationId: string ): string {
+	if ( ! animationId ) {
+		return '';
+	}
+
+	const [ trigger, effect, type, direction, duration, delay ] = animationId.split( '-' );
+
+	const baseValue = `${ trigger }-${ effect }-${ type }-${ direction || '' }`;
+
+	const animationOptions = getInteractionsConfig()?.animationOptions;
+	const option = animationOptions.find( ( opt ) => opt.value === baseValue );
+
+	let label = option?.label || animationId;
+
+	if ( duration || delay ) {
+		const constants = getInteractionsConfig()?.constants;
+		const durationValue = duration || String( constants.defaultDuration );
+		const delayValue = delay || String( constants.defaultDelay );
+
+		label += ` (${ durationValue }ms`;
+
+		if ( delayValue !== '0' ) {
+			label += `, ${ delayValue }ms delay`;
+		}
+
+		label += ')';
+	}
+
+	return label;
+}

package/src/utils/get-interactions-config.ts

@@ -0,0 +1,16 @@
+import { type InteractionsConfig } from '../types';
+
+const DEFAULT_CONFIG: InteractionsConfig = {
+	constants: {
+		defaultDuration: 300,
+		defaultDelay: 0,
+		slideDistance: 100,
+		scaleStart: 0.5,
+		easing: 'linear',
+	},
+	animationOptions: [],
+};
+
+export function getInteractionsConfig(): InteractionsConfig {
+	return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
+}