@elementor/editor-interactions 4.1.0-764 → 4.1.0-765

package/dist/index.mjs

@@ -559,41 +559,6 @@ var PopupStateProvider = ({ children }) => {
   return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
 };
 
-// src/utils/tracking.ts
-import { getElementLabel as getElementLabel2 } from "@elementor/editor-elements";
-import { getMixpanel } from "@elementor/events";
-var TRIGGER_LABELS2 = {
-  load: "On page load",
-  scrollIn: "Scroll into view",
-  scrollOut: "Scroll out of view",
-  scrollOn: "While scrolling",
-  hover: "Hover",
-  click: "Click"
-};
-var capitalize2 = (s) => s.charAt(0).toUpperCase() + s.slice(1);
-var trackInteractionCreated = (elementId, item) => {
-  const { dispatchEvent, config } = getMixpanel();
-  if (!config?.names?.interactions?.created) {
-    return;
-  }
-  const trigger = extractString(item.value.trigger);
-  const effect = extractString(item.value.animation.value.effect);
-  const type = extractString(item.value.animation.value.type);
-  dispatchEvent?.(config.names.interactions.created, {
-    app_type: config?.appTypes?.editor,
-    window_name: config?.appTypes?.editor,
-    interaction_type: config?.triggers?.click,
-    target_name: getElementLabel2(elementId),
-    interaction_result: "interaction_created",
-    target_location: config?.locations?.widgetPanel,
-    location_l1: getElementLabel2(elementId),
-    location_l2: "interactions",
-    interaction_description: "interaction_created",
-    interaction_trigger: TRIGGER_LABELS2[trigger] ?? capitalize2(trigger),
-    interaction_effect: effect === "custom" ? capitalize2(effect) : `${capitalize2(effect)} ${capitalize2(type)}`
-  });
-};
-
 // src/components/interactions-list.tsx
 import * as React10 from "react";
 import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2 } from "react";
@@ -641,6 +606,41 @@ function syncGridOverlay(trigger, start, end, relativeTo) {
   }
 }
 
+// src/utils/tracking.ts
+import { getElementLabel as getElementLabel2 } from "@elementor/editor-elements";
+import { getMixpanel } from "@elementor/events";
+var TRIGGER_LABELS2 = {
+  load: "On page load",
+  scrollIn: "Scroll into view",
+  scrollOut: "Scroll out of view",
+  scrollOn: "While scrolling",
+  hover: "Hover",
+  click: "Click"
+};
+var capitalize2 = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+var trackInteractionCreated = (elementId, item) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.interactions?.created) {
+    return;
+  }
+  const trigger = extractString(item.value.trigger);
+  const effect = extractString(item.value.animation.value.effect);
+  const type = extractString(item.value.animation.value.type);
+  dispatchEvent?.(config.names.interactions.created, {
+    app_type: config?.appTypes?.editor,
+    window_name: config?.appTypes?.editor,
+    interaction_type: config?.triggers?.click,
+    target_name: getElementLabel2(elementId),
+    interaction_result: "interaction_created",
+    target_location: config?.locations?.widgetPanel,
+    location_l1: getElementLabel2(elementId),
+    location_l2: "interactions",
+    interaction_description: "interaction_created",
+    interaction_trigger: TRIGGER_LABELS2[trigger] ?? capitalize2(trigger),
+    interaction_effect: effect === "custom" ? capitalize2(effect) : `${capitalize2(effect)} ${capitalize2(type)}`
+  });
+};
+
 // src/components/interaction-details.tsx
 import * as React7 from "react";
 import { useMemo as useMemo2 } from "react";
@@ -1069,6 +1069,7 @@ function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
   const { elementId } = useInteractionsContext();
   const hasInitializedRef = useRef2(false);
+  const newlyCreatedIdsRef = useRef2(/* @__PURE__ */ new Set());
   const handleUpdateInteractions = useCallback5(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
@@ -1078,9 +1079,11 @@ function InteractionsList(props) {
   useEffect2(() => {
     if (triggerCreateOnShowEmpty && !hasInitializedRef.current && (!interactions.items || interactions.items?.length === 0)) {
       hasInitializedRef.current = true;
+      const newItem = createDefaultInteractionItem();
+      newlyCreatedIdsRef.current.add(extractString(newItem.value.interaction_id));
       const newState = {
         version: 1,
-        items: [createDefaultInteractionItem()]
+        items: [newItem]
       };
       handleUpdateInteractions(newState);
     }
@@ -1101,11 +1104,11 @@ function InteractionsList(props) {
       if (meta?.action?.type === "add") {
         const addedItem = meta.action.payload[0]?.item;
         if (addedItem) {
-          trackInteractionCreated(elementId, addedItem);
+          newlyCreatedIdsRef.current.add(extractString(addedItem.value.interaction_id));
         }
       }
     },
-    [interactions, handleUpdateInteractions, elementId]
+    [interactions, handleUpdateInteractions]
   );
   const handleInteractionChange = useCallback5(
     (index, newInteractionValue) => {
@@ -1153,7 +1156,14 @@ function InteractionsList(props) {
           );
           syncGridOverlay(trigger, start, end, relativeTo);
         },
-        onPopoverClose: () => dispatchScrollInteraction(null),
+        onPopoverClose: (value) => {
+          dispatchScrollInteraction(null);
+          const id = extractString(value.value.interaction_id);
+          if (newlyCreatedIdsRef.current.has(id)) {
+            newlyCreatedIdsRef.current.delete(id);
+            trackInteractionCreated(elementId, value);
+          }
+        },
         actions: (value) => /* @__PURE__ */ React10.createElement(Tooltip, { key: "preview", placement: "top", title: __6("Preview", "elementor") }, /* @__PURE__ */ React10.createElement(
           IconButton,
           {
@@ -1181,7 +1191,6 @@ function InteractionsTabContent({ elementId }) {
     {
       onCreateInteraction: () => {
         firstInteractionState[1](true);
-        trackInteractionCreated(elementId, createDefaultInteractionItem());
       }
     }
   ));