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

package/dist/index.mjs

@@ -81,6 +81,7 @@ var InteractionsProvider = ({ children, elementId }) => {
     playElementInteractions(elementId, interactionId);
   };
   const contextValue = {
+    elementId,
     interactions,
     setInteractions,
     playInteractions
@@ -110,32 +111,6 @@ var PopupStateProvider = ({ children }) => {
   return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
 };
 
-// src/components/interactions-list.tsx
-import * as React10 from "react";
-import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3 } from "react";
-import { Repeater } from "@elementor/editor-controls";
-import { InfoCircleFilledIcon, PlayerPlayIcon } from "@elementor/icons";
-import { Alert, AlertTitle, Box as Box2, IconButton, Tooltip } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
-
-// src/contexts/interactions-item-context.tsx
-import * as React4 from "react";
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var InteractionItemContext = createContext3(null);
-function InteractionItemContextProvider({
-  value,
-  children
-}) {
-  return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
-}
-function useInteractionItemContext() {
-  const context = useContext3(InteractionItemContext);
-  if (!context) {
-    throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
-  }
-  return context;
-}
-
 // src/utils/prop-value-utils.ts
 import { sizePropTypeUtil } from "@elementor/editor-props";
 
@@ -389,6 +364,67 @@ var buildDisplayLabel = (item) => {
   return `${triggerLabel}: ${effectLabel} ${typeLabel}`;
 };
 
+// src/utils/tracking.ts
+import { getElementLabel } 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: getElementLabel(elementId),
+    interaction_result: "interaction_created",
+    target_location: config?.locations?.widgetPanel,
+    location_l1: 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
+import * as React10 from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { Repeater } from "@elementor/editor-controls";
+import { InfoCircleFilledIcon, PlayerPlayIcon } from "@elementor/icons";
+import { Alert, AlertTitle, Box as Box2, IconButton, Tooltip } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+
+// src/contexts/interactions-item-context.tsx
+import * as React4 from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var InteractionItemContext = createContext3(null);
+function InteractionItemContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
+}
+function useInteractionItemContext() {
+  const context = useContext3(InteractionItemContext);
+  if (!context) {
+    throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
+  }
+  return context;
+}
+
 // src/components/interactions-list-item.tsx
 import * as React9 from "react";
 import { useCallback as useCallback4 } from "react";
@@ -830,6 +866,7 @@ var InteractionsListItem = ({
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
+  const { elementId } = useInteractionsContext();
   const hasInitializedRef = useRef3(false);
   const handleUpdateInteractions = useCallback5(
     (newInteractions) => {
@@ -855,13 +892,19 @@ function InteractionsList(props) {
     "elementor"
   ))) : void 0;
   const handleRepeaterChange = useCallback5(
-    (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 = useCallback5(
     (index, newInteractionValue) => {
@@ -929,6 +972,7 @@ function InteractionsTabContent({ elementId }) {
     {
       onCreateInteraction: () => {
         firstInteractionState[1](true);
+        trackInteractionCreated(elementId, createDefaultInteractionItem());
       }
     }
   ));
@@ -1062,7 +1106,7 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 import {
   getContainer,
   getElementInteractions as getElementInteractions3,
-  getElementLabel,
+  getElementLabel as getElementLabel2,
   getWidgetsCache,
   updateElementInteractions as updateElementInteractions2
 } from "@elementor/editor-elements";
@@ -1091,7 +1135,7 @@ function isAtomicContainer(container) {
   return Boolean(elementConfig?.atomic_props_schema);
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? __6("Elements", "elementor") : getElementLabel(containers[0].id);
+  return containers.length > 1 ? __6("Elements", "elementor") : getElementLabel2(containers[0].id);
 }
 function normalizeClipboardInteractions(raw) {
   if (!raw) {