@elementor/editor-interactions 4.1.0-712 → 4.1.0-713

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.1.0-712",
+  "version": "4.1.0-713",
   "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-712",
-    "@elementor/editor-elements": "4.1.0-712",
-    "@elementor/editor-mcp": "4.1.0-712",
-    "@elementor/editor-props": "4.1.0-712",
-    "@elementor/editor-responsive": "4.1.0-712",
-    "@elementor/editor-ui": "4.1.0-712",
-    "@elementor/editor-v1-adapters": "4.1.0-712",
+    "@elementor/editor-controls": "4.1.0-713",
+    "@elementor/editor-elements": "4.1.0-713",
+    "@elementor/editor-mcp": "4.1.0-713",
+    "@elementor/editor-props": "4.1.0-713",
+    "@elementor/editor-responsive": "4.1.0-713",
+    "@elementor/editor-ui": "4.1.0-713",
+    "@elementor/editor-v1-adapters": "4.1.0-713",
     "@elementor/icons": "^1.68.0",
-    "@elementor/schema": "4.1.0-712",
-    "@elementor/session": "4.1.0-712",
+    "@elementor/schema": "4.1.0-713",
+    "@elementor/session": "4.1.0-713",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-712",
-    "@elementor/events": "4.1.0-712",
+    "@elementor/utils": "4.1.0-713",
+    "@elementor/events": "4.1.0-713",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/controls/direction.tsx

@@ -1,48 +1,100 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';
+import { StyledToggleButton, StyledToggleButtonGroup } from '@elementor/editor-controls';
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';
+import { Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type DirectionFieldProps } from '../../types';
 
 type Direction = 'top' | 'bottom' | 'left' | 'right';
 
+const AXIS: Record< Direction, 'vertical' | 'horizontal' > = {
+	top: 'vertical',
+	bottom: 'vertical',
+	left: 'horizontal',
+	right: 'horizontal',
+};
+
+function parseValue( value: string ): Direction[] {
+	return value.split( '-' ).filter( Boolean ) as Direction[];
+}
+
+function serializeValue( directions: Direction[] ): string {
+	const vertical = directions.find( ( d ) => d === 'top' || d === 'bottom' );
+	const horizontal = directions.find( ( d ) => d === 'left' || d === 'right' );
+	if ( vertical && horizontal ) {
+		return `${ vertical }-${ horizontal }`;
+	}
+	return directions[ 0 ] ?? '';
+}
+
+function toggleDirection( current: Direction[], clicked: Direction ): Direction[] {
+	if ( current.includes( clicked ) ) {
+		return current.filter( ( d ) => d !== clicked );
+	}
+	const filtered = current.filter( ( d ) => AXIS[ d ] !== AXIS[ clicked ] );
+	return [ ...filtered, clicked ];
+}
+
 export function Direction( { value, onChange, interactionType }: DirectionFieldProps ) {
-	const options: ToggleButtonGroupItem< Direction >[] = useMemo( () => {
-		const isIn = interactionType === 'in';
+	const isIn = interactionType === 'in';
 
-		return [
+	const options = useMemo(
+		() => [
 			{
-				value: 'top',
+				dir: 'top' as Direction,
 				label: isIn ? __( 'From top', 'elementor' ) : __( 'To top', 'elementor' ),
-				renderContent: ( { size } ) =>
-					isIn ? <ArrowDownSmallIcon fontSize={ size } /> : <ArrowUpSmallIcon fontSize={ size } />,
-				showTooltip: true,
+				Icon: isIn ? ArrowDownSmallIcon : ArrowUpSmallIcon,
 			},
 			{
-				value: 'bottom',
-				label: interactionType === 'in' ? __( 'From bottom', 'elementor' ) : __( 'To bottom', 'elementor' ),
-				renderContent: ( { size } ) =>
-					isIn ? <ArrowUpSmallIcon fontSize={ size } /> : <ArrowDownSmallIcon fontSize={ size } />,
-				showTooltip: true,
+				dir: 'bottom' as Direction,
+				label: isIn ? __( 'From bottom', 'elementor' ) : __( 'To bottom', 'elementor' ),
+				Icon: isIn ? ArrowUpSmallIcon : ArrowDownSmallIcon,
 			},
 			{
-				value: 'left',
-				label: interactionType === 'in' ? __( 'From left', 'elementor' ) : __( 'To left', 'elementor' ),
-				renderContent: ( { size } ) =>
-					isIn ? <ArrowRightIcon fontSize={ size } /> : <ArrowLeftIcon fontSize={ size } />,
-				showTooltip: true,
+				dir: 'left' as Direction,
+				label: isIn ? __( 'From left', 'elementor' ) : __( 'To left', 'elementor' ),
+				Icon: isIn ? ArrowRightIcon : ArrowLeftIcon,
 			},
 			{
-				value: 'right',
-				label: interactionType === 'in' ? __( 'From right', 'elementor' ) : __( 'To right', 'elementor' ),
-				renderContent: ( { size } ) =>
-					isIn ? <ArrowLeftIcon fontSize={ size } /> : <ArrowRightIcon fontSize={ size } />,
-				showTooltip: true,
+				dir: 'right' as Direction,
+				label: isIn ? __( 'From right', 'elementor' ) : __( 'To right', 'elementor' ),
+				Icon: isIn ? ArrowLeftIcon : ArrowRightIcon,
 			},
-		];
-	}, [ interactionType ] );
+		],
+		[ isIn ]
+	);
+
+	const selectedDirections = useMemo( () => parseValue( value ), [ value ] );
 
-	return <ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ value } />;
+	return (
+		<StyledToggleButtonGroup
+			size="tiny"
+			justify="end"
+			sx={ {
+				display: 'grid',
+				gridTemplateColumns: 'repeat(4, minmax(0, 25%))',
+				width: '100%',
+			} }
+		>
+			{ options.map( ( { dir, label, Icon } ) => (
+				<Tooltip key={ dir } title={ label } disableFocusListener placement="top">
+					<StyledToggleButton
+						value={ dir }
+						selected={ selectedDirections.includes( dir ) }
+						aria-label={ label }
+						size="tiny"
+						isPlaceholder={ false }
+						onChange={ () => {
+							const next = toggleDirection( selectedDirections, dir );
+							onChange( serializeValue( next ) );
+						} }
+					>
+						<Icon fontSize="tiny" />
+					</StyledToggleButton>
+				</Tooltip>
+			) ) }
+		</StyledToggleButtonGroup>
+	);
 }

package/src/mcp/tools/schema.ts

@@ -5,9 +5,11 @@ export const baseSchema = {
 	effect: z.enum( [ 'fade', 'slide', 'scale' ] ).optional().describe( 'Animation effect type' ),
 	effectType: z.enum( [ 'in', 'out' ] ).optional().describe( 'Whether the animation plays in or out' ),
 	direction: z
-		.enum( [ 'top', 'bottom', 'left', 'right', '' ] )
+		.enum( [ 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right' ] )
 		.optional()
-		.describe( 'Direction for slide effect. Use empty string for fade/scale.' ),
+		.describe(
+			'Direction of the Animation. Can be one of the following or empty if not needed. At slide effect, this is required field.'
+		),
 	duration: z.number().min( 0 ).max( 10000 ).optional().describe( 'Animation duration in milliseconds' ),
 	delay: z.number().min( 0 ).max( 10000 ).optional().describe( 'Animation delay in milliseconds' ),
 	easing: z.string().optional().describe( 'Easing function. See interactions schema for options.' ),