@elementor/editor-interactions 4.0.0-660 → 4.0.0-662

package/package.json

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

package/src/components/interactions-tab.tsx

@@ -1,11 +1,11 @@
 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 { EmptyState } from './empty-state';
 import { InteractionsList } from './interactions-list';

package/src/contexts/interactions-context.tsx

@@ -4,9 +4,10 @@ import {
 	type ElementInteractions,
 	playElementInteractions,
 	updateElementInteractions,
-	useElementInteractions,
 } from '@elementor/editor-elements';
 
+import { useElementInteractions } from '../hooks/use-element-interactions';
+
 type InteractionsContextValue = {
 	interactions: ElementInteractions;
 	setInteractions: ( value: ElementInteractions | undefined ) => void;

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

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

package/src/index.ts

@@ -40,3 +40,4 @@ 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';