@elementor/editor-interactions 4.0.0-521 → 4.0.0-523

package/dist/index.js

@@ -68,8 +68,8 @@ var EmptyState = ({ onCreateInteraction }) => {
 };
 
 // src/components/interactions-tab.tsx
-var React10 = __toESM(require("react"));
-var import_react7 = require("react");
+var React12 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_session = require("@elementor/session");
 var import_ui5 = require("@elementor/ui");
@@ -130,13 +130,31 @@ var PopupStateProvider = ({ children }) => {
 };
 
 // src/components/interactions-list.tsx
-var React9 = __toESM(require("react"));
-var import_react6 = require("react");
+var React11 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_icons3 = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
+// src/contexts/interactions-item-context.tsx
+var React4 = __toESM(require("react"));
+var import_react3 = require("react");
+var InteractionItemContext = (0, import_react3.createContext)(null);
+function InteractionItemContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
+}
+function useInteractionItemContext() {
+  const context = (0, import_react3.useContext)(InteractionItemContext);
+  if (!context) {
+    throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
+  }
+  return context;
+}
+
 // src/utils/temp-id-utils.ts
 var TEMP_ID_PREFIX = "temp-";
 function generateTempInteractionId() {
@@ -278,9 +296,13 @@ var buildDisplayLabel = (item) => {
   return `${triggerLabel}: ${effectLabel} ${typeLabel}`;
 };
 
+// src/components/interactions-list-item.tsx
+var React10 = __toESM(require("react"));
+var import_react7 = require("react");
+
 // src/components/interaction-details.tsx
-var React8 = __toESM(require("react"));
-var import_react5 = require("react");
+var React9 = __toESM(require("react"));
+var import_react6 = require("react");
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_ui3 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
@@ -299,46 +321,46 @@ function getInteractionsControl(type) {
 }
 
 // src/components/controls/direction.tsx
-var React4 = __toESM(require("react"));
-var import_react3 = require("react");
+var React5 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
 var import_icons2 = require("@elementor/icons");
 var import_i18n2 = require("@wordpress/i18n");
 function Direction({ value, onChange, interactionType }) {
-  const options = (0, import_react3.useMemo)(() => {
+  const options = (0, import_react4.useMemo)(() => {
     const isIn = interactionType === "in";
     return [
       {
         value: "top",
         label: isIn ? (0, import_i18n2.__)("From top", "elementor") : (0, import_i18n2.__)("To top", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React4.createElement(import_icons2.ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React4.createElement(import_icons2.ArrowUpSmallIcon, { fontSize: size }),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(import_icons2.ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(import_icons2.ArrowUpSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "bottom",
         label: interactionType === "in" ? (0, import_i18n2.__)("From bottom", "elementor") : (0, import_i18n2.__)("To bottom", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React4.createElement(import_icons2.ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React4.createElement(import_icons2.ArrowDownSmallIcon, { fontSize: size }),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(import_icons2.ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(import_icons2.ArrowDownSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "left",
         label: interactionType === "in" ? (0, import_i18n2.__)("From left", "elementor") : (0, import_i18n2.__)("To left", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React4.createElement(import_icons2.ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React4.createElement(import_icons2.ArrowLeftIcon, { fontSize: size }),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(import_icons2.ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(import_icons2.ArrowLeftIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "right",
         label: interactionType === "in" ? (0, import_i18n2.__)("From right", "elementor") : (0, import_i18n2.__)("To right", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React4.createElement(import_icons2.ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React4.createElement(import_icons2.ArrowRightIcon, { fontSize: size }),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(import_icons2.ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(import_icons2.ArrowRightIcon, { fontSize: size }),
         showTooltip: true
       }
     ];
   }, [interactionType]);
-  return /* @__PURE__ */ React4.createElement(import_editor_controls.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
+  return /* @__PURE__ */ React5.createElement(import_editor_controls.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
 // src/components/controls/effect.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui2 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
@@ -348,7 +370,7 @@ function Effect({ value, onChange }) {
     { key: "slide", label: (0, import_i18n3.__)("Slide", "elementor") },
     { key: "scale", label: (0, import_i18n3.__)("Scale", "elementor") }
   ];
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     import_ui2.Select,
     {
       fullWidth: true,
@@ -358,13 +380,13 @@ function Effect({ value, onChange }) {
       onChange: (event) => onChange(event.target.value)
     },
     availableEffects.map((effect) => {
-      return /* @__PURE__ */ React5.createElement(import_editor_ui.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
+      return /* @__PURE__ */ React6.createElement(import_editor_ui.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
     })
   );
 }
 
 // src/components/controls/effect-type.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_i18n4 = require("@wordpress/i18n");
 function EffectType({ value, onChange }) {
@@ -382,18 +404,18 @@ function EffectType({ value, onChange }) {
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React6.createElement(import_editor_controls2.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
+  return /* @__PURE__ */ React7.createElement(import_editor_controls2.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
 // src/components/controls/time-frame-indicator.tsx
-var React7 = __toESM(require("react"));
-var import_react4 = require("react");
+var React8 = __toESM(require("react"));
+var import_react5 = require("react");
 var import_editor_controls3 = require("@elementor/editor-controls");
 var import_editor_props = require("@elementor/editor-props");
 var DEFAULT_UNIT = "ms";
 function TimeFrameIndicator({ value, onChange, defaultValue }) {
   const sizeValue = toSizeValue(value ?? defaultValue);
-  const setValue = (0, import_react4.useCallback)(
+  const setValue = (0, import_react5.useCallback)(
     (size) => {
       onChange(String(size));
     },
@@ -407,7 +429,7 @@ function TimeFrameIndicator({ value, onChange, defaultValue }) {
       setValue(defaultValue);
     }
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     import_editor_controls3.UnstableSizeField,
     {
       units: [DEFAULT_UNIT],
@@ -459,7 +481,7 @@ var controlVisibilityConfig = {
   }
 };
 function useControlComponent(controlName, isVisible = true) {
-  return (0, import_react5.useMemo)(() => {
+  return (0, import_react6.useMemo)(() => {
     if (!isVisible) {
       return null;
     }
@@ -540,53 +562,53 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React8.createElement(import_editor_controls4.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React8.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Trigger", "elementor") }, /* @__PURE__ */ React8.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Replay", "elementor") }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(import_editor_controls4.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Trigger", "elementor") }, /* @__PURE__ */ React9.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Replay", "elementor") }, /* @__PURE__ */ React9.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
       disabled: true
     }
-  ))), /* @__PURE__ */ React8.createElement(import_ui3.Divider, null), /* @__PURE__ */ React8.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Effect", "elementor") }, /* @__PURE__ */ React8.createElement(Effect, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Type", "elementor") }, /* @__PURE__ */ React8.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) })), /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Direction", "elementor") }, /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React9.createElement(import_ui3.Divider, null), /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Effect", "elementor") }, /* @__PURE__ */ React9.createElement(Effect, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Type", "elementor") }, /* @__PURE__ */ React9.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Direction", "elementor") }, /* @__PURE__ */ React9.createElement(
     Direction,
     {
       value: direction,
       onChange: (v) => updateInteraction({ direction: v }),
       interactionType: type
     }
-  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Duration", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Duration", "elementor") }, /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
       value: String(duration),
       onChange: (v) => updateInteraction({ duration: parseInt(v, 10) }),
       defaultValue: DEFAULT_VALUES.duration
     }
-  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Delay", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Delay", "elementor") }, /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
       value: String(delay),
       onChange: (v) => updateInteraction({ delay: parseInt(v, 10) }),
       defaultValue: DEFAULT_VALUES.delay
     }
-  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui3.Divider, null), /* @__PURE__ */ React8.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Relative To", "elementor") }, /* @__PURE__ */ React8.createElement(
+  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui3.Divider, null), /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Relative To", "elementor") }, /* @__PURE__ */ React9.createElement(
     RelativeToControl,
     {
       value: relativeTo,
       onChange: (v) => updateInteraction({ relativeTo: v })
     }
-  )), OffsetTopControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Offset Top", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), OffsetTopControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Offset Top", "elementor") }, /* @__PURE__ */ React9.createElement(
     OffsetTopControl,
     {
       value: String(offsetTop),
       onChange: (v) => updateInteraction({ offsetTop: parseInt(v, 10) })
     }
-  )), OffsetBottomControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Offset Bottom", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), OffsetBottomControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Offset Bottom", "elementor") }, /* @__PURE__ */ React9.createElement(
     OffsetBottomControl,
     {
       value: String(offsetBottom),
       onChange: (v) => updateInteraction({ offsetBottom: parseInt(v, 10) })
     }
-  ))), /* @__PURE__ */ React8.createElement(import_ui3.Divider, null)), EasingControl && /* @__PURE__ */ React8.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Easing", "elementor") }, /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React9.createElement(import_ui3.Divider, null)), EasingControl && /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Easing", "elementor") }, /* @__PURE__ */ React9.createElement(
     EasingControl,
     {
       value: easing,
@@ -597,22 +619,47 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   ))));
 };
 function Field({ label, children }) {
-  return /* @__PURE__ */ React8.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_editor_controls4.PopoverGridContainer, null, /* @__PURE__ */ React8.createElement(import_ui3.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(import_editor_controls4.ControlFormLabel, null, label)), /* @__PURE__ */ React8.createElement(import_ui3.Grid, { item: true, xs: 6 }, children)));
+  return /* @__PURE__ */ React9.createElement(import_ui3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_editor_controls4.PopoverGridContainer, null, /* @__PURE__ */ React9.createElement(import_ui3.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React9.createElement(import_editor_controls4.ControlFormLabel, null, label)), /* @__PURE__ */ React9.createElement(import_ui3.Grid, { item: true, xs: 6 }, children)));
 }
 
+// src/components/interactions-list-item.tsx
+var InteractionsListItem = ({ index, value }) => {
+  const context = useInteractionItemContext();
+  const handleChange = (0, import_react7.useCallback)(
+    (newInteractionValue) => {
+      context?.onInteractionChange(index, newInteractionValue);
+    },
+    [context, index]
+  );
+  const handlePlayInteraction = (0, import_react7.useCallback)(
+    (interactionId) => {
+      context?.onPlayInteraction(interactionId);
+    },
+    [context]
+  );
+  return /* @__PURE__ */ React10.createElement(
+    InteractionDetails,
+    {
+      key: index,
+      interaction: value.value,
+      onChange: handleChange,
+      onPlayInteraction: handlePlayInteraction
+    }
+  );
+};
+
 // src/components/interactions-list.tsx
 var MAX_NUMBER_OF_INTERACTIONS = 5;
-var InteractionItemContext = (0, import_react6.createContext)(null);
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
-  const hasInitializedRef = (0, import_react6.useRef)(false);
-  const handleUpdateInteractions = (0, import_react6.useCallback)(
+  const hasInitializedRef = (0, import_react8.useRef)(false);
+  const handleUpdateInteractions = (0, import_react8.useCallback)(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
     },
     [onSelectInteractions]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (triggerCreateOnShowEmpty && !hasInitializedRef.current && (!interactions.items || interactions.items?.length === 0)) {
       hasInitializedRef.current = true;
       const newState = {
@@ -622,14 +669,14 @@ function InteractionsList(props) {
       handleUpdateInteractions(newState);
     }
   }, [triggerCreateOnShowEmpty, interactions.items, handleUpdateInteractions]);
-  const isMaxNumberOfInteractionsReached = (0, import_react6.useMemo)(() => {
+  const isMaxNumberOfInteractionsReached = (0, import_react8.useMemo)(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React9.createElement(import_ui4.Alert, { color: "secondary", icon: /* @__PURE__ */ React9.createElement(import_icons3.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React9.createElement(import_ui4.AlertTitle, null, (0, import_i18n6.__)("Interactions", "elementor")), /* @__PURE__ */ React9.createElement(import_ui4.Box, { component: "span" }, (0, import_i18n6.__)(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React11.createElement(import_ui4.Alert, { color: "secondary", icon: /* @__PURE__ */ React11.createElement(import_icons3.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React11.createElement(import_ui4.AlertTitle, null, (0, import_i18n6.__)("Interactions", "elementor")), /* @__PURE__ */ React11.createElement(import_ui4.Box, { component: "span" }, (0, import_i18n6.__)(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
-  const handleRepeaterChange = (0, import_react6.useCallback)(
+  const handleRepeaterChange = (0, import_react8.useCallback)(
     (newItems) => {
       handleUpdateInteractions({
         ...interactions,
@@ -638,7 +685,7 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const handleInteractionChange = (0, import_react6.useCallback)(
+  const handleInteractionChange = (0, import_react8.useCallback)(
     (index, newInteractionValue) => {
       const newItems = structuredClone(interactions.items);
       newItems[index] = {
@@ -652,14 +699,14 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const contextValue = (0, import_react6.useMemo)(
+  const contextValue = (0, import_react8.useMemo)(
     () => ({
       onInteractionChange: handleInteractionChange,
       onPlayInteraction
     }),
     [handleInteractionChange, onPlayInteraction]
   );
-  return /* @__PURE__ */ React9.createElement(InteractionItemContext.Provider, { value: contextValue }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React11.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ React11.createElement(
     import_editor_controls5.Repeater,
     {
       openOnAdd: true,
@@ -676,54 +723,30 @@ function InteractionsList(props) {
         initialValues: createDefaultInteractionItem(),
         Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
-        Content,
-        actions: (value) => /* @__PURE__ */ React9.createElement(import_ui4.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n6.__)("Preview", "elementor") }, /* @__PURE__ */ React9.createElement(
+        Content: InteractionsListItem,
+        actions: (value) => /* @__PURE__ */ React11.createElement(import_ui4.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n6.__)("Preview", "elementor") }, /* @__PURE__ */ React11.createElement(
           import_ui4.IconButton,
           {
             "aria-label": (0, import_i18n6.__)("Play interaction", "elementor"),
             size: "tiny",
             onClick: () => onPlayInteraction(extractString(value.value.interaction_id))
           },
-          /* @__PURE__ */ React9.createElement(import_icons3.PlayerPlayIcon, { fontSize: "tiny" })
+          /* @__PURE__ */ React11.createElement(import_icons3.PlayerPlayIcon, { fontSize: "tiny" })
         ))
       }
     }
   ));
 }
-var Content = ({ index, value }) => {
-  const context = (0, import_react6.useContext)(InteractionItemContext);
-  const handleChange = (0, import_react6.useCallback)(
-    (newInteractionValue) => {
-      context?.onInteractionChange(index, newInteractionValue);
-    },
-    [context, index]
-  );
-  const handlePlayInteraction = (0, import_react6.useCallback)(
-    (interactionId) => {
-      context?.onPlayInteraction(interactionId);
-    },
-    [context]
-  );
-  return /* @__PURE__ */ React9.createElement(
-    InteractionDetails,
-    {
-      key: index,
-      interaction: value.value,
-      onChange: handleChange,
-      onPlayInteraction: handlePlayInteraction
-    }
-  );
-};
 
 // src/components/interactions-tab.tsx
 var InteractionsTab = ({ elementId }) => {
-  return /* @__PURE__ */ React10.createElement(PopupStateProvider, null, /* @__PURE__ */ React10.createElement(InteractionsTabContent, { elementId }));
+  return /* @__PURE__ */ React12.createElement(PopupStateProvider, null, /* @__PURE__ */ React12.createElement(InteractionsTabContent, { elementId }));
 };
 function InteractionsTabContent({ elementId }) {
   const existingInteractions = (0, import_editor_elements2.useElementInteractions)(elementId);
-  const firstInteractionState = (0, import_react7.useState)(false);
+  const firstInteractionState = (0, import_react9.useState)(false);
   const hasInteractions = existingInteractions?.items?.length || firstInteractionState[0];
-  return /* @__PURE__ */ React10.createElement(import_session.SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React10.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React10.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(import_session.SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React12.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React12.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React12.createElement(
     EmptyState,
     {
       onCreateInteraction: () => {
@@ -736,7 +759,7 @@ function InteractionsContent({
   firstInteractionState
 }) {
   const { interactions, setInteractions, playInteractions } = useInteractionsContext();
-  const applyInteraction = (0, import_react7.useCallback)(
+  const applyInteraction = (0, import_react9.useCallback)(
     (newInteractions) => {
       firstInteractionState[1](false);
       if (!newInteractions) {
@@ -747,7 +770,7 @@ function InteractionsContent({
     },
     [setInteractions, firstInteractionState]
   );
-  return /* @__PURE__ */ React10.createElement(import_ui5.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(import_ui5.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React12.createElement(
     InteractionsList,
     {
       triggerCreateOnShowEmpty: firstInteractionState[0],
@@ -873,7 +896,7 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 });
 
 // src/components/controls/easing.tsx
-var React11 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui6 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
@@ -892,15 +915,15 @@ function Easing({}) {
     key,
     label
   }));
-  return /* @__PURE__ */ React11.createElement(import_ui6.Select, { value: DEFAULT_EASING, onChange: () => {
+  return /* @__PURE__ */ React13.createElement(import_ui6.Select, { value: DEFAULT_EASING, onChange: () => {
   }, fullWidth: true, displayEmpty: true, size: "tiny" }, availableOptions.map((option) => {
     const isDisabled = DEFAULT_EASING !== option.key;
-    return /* @__PURE__ */ React11.createElement(import_editor_ui2.MenuListItem, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
+    return /* @__PURE__ */ React13.createElement(import_editor_ui2.MenuListItem, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
   }));
 }
 
 // src/components/controls/trigger.tsx
-var React12 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_ui7 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
@@ -912,7 +935,7 @@ function Trigger({ value, onChange }) {
     key,
     label
   }));
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement(
     import_ui7.Select,
     {
       fullWidth: true,
@@ -922,7 +945,7 @@ function Trigger({ value, onChange }) {
       value
     },
     availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React12.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
+      return /* @__PURE__ */ React14.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   );
 }