@elementor/editor-interactions 4.1.0-732 → 4.1.0-733

package/package.json

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

package/src/components/interaction-details.tsx

@@ -15,6 +15,7 @@ import {
 	extractString,
 } from '../utils/prop-value-utils';
 import { resolveDirection } from '../utils/resolve-direction';
+import { syncGridOverlay } from '../utils/scroll-interaction-event';
 import { parseSizeValue } from '../utils/size-transform-utils';
 import { TimeFrameIndicator } from './controls/time-frame-indicator';
 import { Field } from './field';
@@ -231,6 +232,13 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 
 		onChange( updatedInteraction );
 
+		syncGridOverlay(
+			updates.trigger ?? trigger,
+			updates.start ?? start,
+			updates.end ?? end,
+			updates.relativeTo ?? relativeTo
+		);
+
 		const interactionId = extractString( updatedInteraction.interaction_id );
 
 		setTimeout( () => {

package/src/components/interactions-list.tsx

@@ -9,7 +9,13 @@ 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 {
+	dispatchScrollInteraction,
+	extractScrollOverlayParams,
+	syncGridOverlay,
+} from '../utils/scroll-interaction-event';
 import { trackInteractionCreated } from '../utils/tracking';
+import { DEFAULT_VALUES } from './interaction-details';
 import { InteractionsListItem } from './interactions-list-item';
 export const MAX_NUMBER_OF_INTERACTIONS = 5;
 
@@ -125,6 +131,14 @@ export function InteractionsList( props: InteractionListProps ) {
 					Label: ( { value }: { value: InteractionItemPropValue } ) => buildDisplayLabel( value.value ),
 					Icon: () => null,
 					Content: InteractionsListItem,
+					onPopoverOpen: ( value: InteractionItemPropValue ) => {
+						const { trigger, start, end, relativeTo } = extractScrollOverlayParams(
+							value.value,
+							DEFAULT_VALUES
+						);
+						syncGridOverlay( trigger, start, end, relativeTo );
+					},
+					onPopoverClose: () => dispatchScrollInteraction( null ),
 					actions: ( value: InteractionItemPropValue ) => (
 						<Tooltip key="preview" placement="top" title={ __( 'Preview', 'elementor' ) }>
 							<IconButton

package/src/index.ts

@@ -43,3 +43,10 @@ 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';
+export {
+	SCROLL_INTERACTION_EVENT,
+	dispatchScrollInteraction,
+	syncGridOverlay,
+	extractScrollOverlayParams,
+	type ActiveScrollInteraction,
+} from './utils/scroll-interaction-event';

package/src/utils/scroll-interaction-event.ts

@@ -0,0 +1,34 @@
+import { type InteractionItemValue, type SizeStringValue } from '../types';
+import { extractSize, extractString } from './prop-value-utils';
+
+export type ActiveScrollInteraction = {
+	start: SizeStringValue;
+	end: SizeStringValue;
+	relativeTo: string;
+};
+
+export const SCROLL_INTERACTION_EVENT = 'elementor/interactions/scroll-change';
+
+export function dispatchScrollInteraction( data: ActiveScrollInteraction | null ) {
+	window.dispatchEvent( new CustomEvent( SCROLL_INTERACTION_EVENT, { detail: data } ) );
+}
+
+export function extractScrollOverlayParams(
+	interaction: InteractionItemValue,
+	defaults: { trigger: string; start: number; end: number; relativeTo: string }
+) {
+	return {
+		trigger: extractString( interaction.trigger, defaults.trigger ),
+		start: extractSize( interaction.animation.value.config?.value.start, defaults.start ),
+		end: extractSize( interaction.animation.value.config?.value.end, defaults.end ),
+		relativeTo: extractString( interaction.animation.value.config?.value.relativeTo, defaults.relativeTo ),
+	};
+}
+
+export function syncGridOverlay( trigger: string, start: SizeStringValue, end: SizeStringValue, relativeTo: string ) {
+	if ( trigger === 'scrollOn' ) {
+		dispatchScrollInteraction( { start, end, relativeTo } );
+	} else {
+		dispatchScrollInteraction( null );
+	}
+}