@elementor/editor-interactions 4.0.0-678 → 4.0.0-679

package/dist/index.js

@@ -152,6 +152,7 @@ var InteractionsProvider = ({ children, elementId }) => {
     (0, import_editor_elements2.playElementInteractions)(elementId, interactionId);
   };
   const contextValue = {
+    elementId,
     interactions,
     setInteractions,
     playInteractions
@@ -181,32 +182,6 @@ var PopupStateProvider = ({ children }) => {
   return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
 };
 
-// src/components/interactions-list.tsx
-var React10 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
-var import_icons2 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
-
-// src/contexts/interactions-item-context.tsx
-var React4 = __toESM(require("react"));
-var import_react4 = require("react");
-var InteractionItemContext = (0, import_react4.createContext)(null);
-function InteractionItemContextProvider({
-  value,
-  children
-}) {
-  return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
-}
-function useInteractionItemContext() {
-  const context = (0, import_react4.useContext)(InteractionItemContext);
-  if (!context) {
-    throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
-  }
-  return context;
-}
-
 // src/utils/prop-value-utils.ts
 var import_editor_props = require("@elementor/editor-props");
 
@@ -460,6 +435,67 @@ var buildDisplayLabel = (item) => {
   return `${triggerLabel}: ${effectLabel} ${typeLabel}`;
 };
 
+// src/utils/tracking.ts
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_events = require("@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 } = (0, import_events.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: (0, import_editor_elements3.getElementLabel)(elementId),
+    interaction_result: "interaction_created",
+    target_location: config?.locations?.widgetPanel,
+    location_l1: (0, import_editor_elements3.getElementLabel)(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
+var React10 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_icons2 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+
+// src/contexts/interactions-item-context.tsx
+var React4 = __toESM(require("react"));
+var import_react4 = require("react");
+var InteractionItemContext = (0, import_react4.createContext)(null);
+function InteractionItemContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
+}
+function useInteractionItemContext() {
+  const context = (0, import_react4.useContext)(InteractionItemContext);
+  if (!context) {
+    throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
+  }
+  return context;
+}
+
 // src/components/interactions-list-item.tsx
 var React9 = __toESM(require("react"));
 var import_react8 = require("react");
@@ -901,6 +937,7 @@ var InteractionsListItem = ({
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
+  const { elementId } = useInteractionsContext();
   const hasInitializedRef = (0, import_react9.useRef)(false);
   const handleUpdateInteractions = (0, import_react9.useCallback)(
     (newInteractions) => {
@@ -926,13 +963,19 @@ function InteractionsList(props) {
     "elementor"
   ))) : void 0;
   const handleRepeaterChange = (0, import_react9.useCallback)(
-    (newItems) => {
+    (newItems, _, meta) => {
       handleUpdateInteractions({
         ...interactions,
         items: newItems
       });
+      if (meta?.action?.type === "add") {
+        const addedItem = meta.action.payload[0]?.item;
+        if (addedItem) {
+          trackInteractionCreated(elementId, addedItem);
+        }
+      }
     },
-    [interactions, handleUpdateInteractions]
+    [interactions, handleUpdateInteractions, elementId]
   );
   const handleInteractionChange = (0, import_react9.useCallback)(
     (index, newInteractionValue) => {
@@ -1000,6 +1043,7 @@ function InteractionsTabContent({ elementId }) {
     {
       onCreateInteraction: () => {
         firstInteractionState[1](true);
+        trackInteractionCreated(elementId, createDefaultInteractionItem());
       }
     }
   ));
@@ -1090,12 +1134,12 @@ function createInteractionsProvider({
 }
 
 // src/providers/document-elements-interactions-provider.ts
-var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-interactions-";
 var documentElementsInteractionsProvider = createInteractionsProvider({
   key: () => {
-    const documentId = (0, import_editor_elements3.getCurrentDocumentId)();
+    const documentId = (0, import_editor_elements4.getCurrentDocumentId)();
     if (!documentId) {
       const pendingKey = `${ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX}pending`;
       return pendingKey;
@@ -1109,16 +1153,16 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   },
   actions: {
     all: () => {
-      const elements = (0, import_editor_elements3.getElements)();
+      const elements = (0, import_editor_elements4.getElements)();
       const filtered = elements.filter((element) => {
-        const interactions = (0, import_editor_elements3.getElementInteractions)(element.id);
+        const interactions = (0, import_editor_elements4.getElementInteractions)(element.id);
         if (!interactions) {
           return false;
         }
         return interactions?.items?.length > 0;
       });
       return filtered.map((element) => {
-        const interactions = (0, import_editor_elements3.getElementInteractions)(element.id);
+        const interactions = (0, import_editor_elements4.getElementInteractions)(element.id);
         return {
           elementId: element.id,
           dataId: element.id,
@@ -1130,7 +1174,7 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 });
 
 // src/commands/paste-interactions.ts
-var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_i18n6 = require("@wordpress/i18n");
 
@@ -1147,12 +1191,12 @@ function getClipboardElements(storageKey = "clipboard") {
 // src/commands/paste-interactions.ts
 function isAtomicContainer(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = (0, import_editor_elements4.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements5.getWidgetsCache)();
   const elementConfig = widgetsCache?.[type];
   return Boolean(elementConfig?.atomic_props_schema);
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n6.__)("Elements", "elementor") : (0, import_editor_elements4.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n6.__)("Elements", "elementor") : (0, import_editor_elements5.getElementLabel)(containers[0].id);
 }
 function normalizeClipboardInteractions(raw) {
   if (!raw) {
@@ -1180,8 +1224,8 @@ function initPasteInteractionsCommand() {
         const pasted = regenerateInteractionIds(newInteractions);
         return containers.map((container) => {
           const elementId = container.id;
-          const previous = (0, import_editor_elements4.getElementInteractions)(elementId);
-          (0, import_editor_elements4.updateElementInteractions)({
+          const previous = (0, import_editor_elements5.getElementInteractions)(elementId);
+          (0, import_editor_elements5.updateElementInteractions)({
             elementId,
             interactions: pasted
           });
@@ -1190,7 +1234,7 @@ function initPasteInteractionsCommand() {
       },
       undo: (_, revertData) => {
         revertData.forEach(({ elementId, previous }) => {
-          (0, import_editor_elements4.updateElementInteractions)({
+          (0, import_editor_elements5.updateElementInteractions)({
             elementId,
             interactions: previous.items?.length ? previous : void 0
           });
@@ -1218,7 +1262,7 @@ function initPasteInteractionsCommand() {
     if (!newInteractions) {
       return;
     }
-    const existingContainers = containers.filter((c) => (0, import_editor_elements4.getContainer)(c.id));
+    const existingContainers = containers.filter((c) => (0, import_editor_elements5.getContainer)(c.id));
     const validContainers = existingContainers.filter(isAtomicContainer);
     if (!validContainers.length) {
       return;
@@ -1554,7 +1598,7 @@ function Trigger({ value, onChange }) {
 }
 
 // src/hooks/on-duplicate.ts
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 function initCleanInteractionIdsOnDuplicate() {
   (0, import_editor_v1_adapters4.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
@@ -1565,16 +1609,16 @@ function initCleanInteractionIdsOnDuplicate() {
   });
 }
 function cleanInteractionIdsRecursive(elementId) {
-  const container = (0, import_editor_elements5.getContainer)(elementId);
+  const container = (0, import_editor_elements6.getContainer)(elementId);
   if (!container) {
     return;
   }
-  (0, import_editor_elements5.getAllDescendants)(container).forEach((element) => {
+  (0, import_editor_elements6.getAllDescendants)(container).forEach((element) => {
     cleanInteractionIds(element.id);
   });
 }
 function cleanInteractionIds(elementId) {
-  const container = (0, import_editor_elements5.getContainer)(elementId);
+  const container = (0, import_editor_elements6.getContainer)(elementId);
   if (!container) {
     return;
   }
@@ -1673,7 +1717,7 @@ var initInteractionsSchemaResource = (reg) => {
 };
 
 // src/mcp/tools/manage-element-interaction-tool.ts
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements7 = require("@elementor/editor-elements");
 var import_schema3 = require("@elementor/schema");
 var import_utils2 = require("@elementor/utils");
 var EMPTY_INTERACTIONS = {
@@ -1804,7 +1848,7 @@ var initManageElementInteractionTool = (reg) => {
         items: updatedItems
       };
       try {
-        (0, import_editor_elements6.updateElementInteractions)({ elementId, interactions: updatedInteractions });
+        (0, import_editor_elements7.updateElementInteractions)({ elementId, interactions: updatedInteractions });
       } catch (error) {
         throw new Error(
           `Failed to update interactions for element "${elementId}": ${error instanceof Error ? error.message : "Unknown error"}`