@elementor/editor-interactions 4.0.0-552 → 4.0.0-573

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentType } from 'react';
+import { RefObject, ComponentType } from 'react';
 import { Unit } from '@elementor/editor-controls';
 import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
 export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
@@ -36,6 +36,7 @@ type ReplayFieldProps = {
     value: boolean;
     onChange: (value: boolean) => void;
     disabled?: boolean;
+    anchorRef?: RefObject<HTMLElement | null>;
 };
 type DirectionFieldProps = FieldProps & {
     interactionType: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentType } from 'react';
+import { RefObject, ComponentType } from 'react';
 import { Unit } from '@elementor/editor-controls';
 import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
 export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
@@ -36,6 +36,7 @@ type ReplayFieldProps = {
     value: boolean;
     onChange: (value: boolean) => void;
     disabled?: boolean;
+    anchorRef?: RefObject<HTMLElement | null>;
 };
 type DirectionFieldProps = FieldProps & {
     interactionType: string;

package/dist/index.js

@@ -132,10 +132,10 @@ var PopupStateProvider = ({ children }) => {
 // src/components/interactions-list.tsx
 var React12 = __toESM(require("react"));
 var import_react9 = require("react");
-var import_editor_controls6 = require("@elementor/editor-controls");
+var import_editor_controls7 = require("@elementor/editor-controls");
 var import_icons3 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/contexts/interactions-item-context.tsx
 var React4 = __toESM(require("react"));
@@ -378,14 +378,14 @@ var buildDisplayLabel = (item) => {
 var React11 = __toESM(require("react"));
 var import_react8 = require("react");
 var import_ui5 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/interaction-details.tsx
 var React9 = __toESM(require("react"));
 var import_react6 = require("react");
-var import_editor_controls4 = require("@elementor/editor-controls");
+var import_editor_controls5 = require("@elementor/editor-controls");
 var import_ui3 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/interactions-controls-registry.ts
 var controlsRegistry = /* @__PURE__ */ new Map();
@@ -400,6 +400,20 @@ function getInteractionsControl(type) {
   return controlsRegistry.get(type);
 }
 
+// src/utils/resolve-direction.ts
+var resolveDirection = (hasDirection, newEffect, newDirection, currentDirection, currentEffect) => {
+  if (newEffect === "slide" && !newDirection) {
+    return "top";
+  }
+  if (currentEffect === "slide" && hasDirection) {
+    return newDirection ?? "top";
+  }
+  if (hasDirection) {
+    return newDirection;
+  }
+  return currentDirection;
+};
+
 // src/components/controls/direction.tsx
 var React5 = __toESM(require("react"));
 var import_react4 = require("react");
@@ -439,56 +453,30 @@ function Direction({ value, onChange, interactionType }) {
   return /* @__PURE__ */ React5.createElement(import_editor_controls.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
-// src/components/controls/effect.tsx
-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");
-function Effect({ value, onChange }) {
-  const availableEffects = [
-    { key: "fade", label: (0, import_i18n3.__)("Fade", "elementor") },
-    { key: "slide", label: (0, import_i18n3.__)("Slide", "elementor") },
-    { key: "scale", label: (0, import_i18n3.__)("Scale", "elementor") }
-  ];
-  return /* @__PURE__ */ React6.createElement(
-    import_ui2.Select,
-    {
-      fullWidth: true,
-      displayEmpty: true,
-      size: "tiny",
-      value,
-      onChange: (event) => onChange(event.target.value)
-    },
-    availableEffects.map((effect) => {
-      return /* @__PURE__ */ React6.createElement(import_editor_ui.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
-    })
-  );
-}
-
 // src/components/controls/effect-type.tsx
-var React7 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 function EffectType({ value, onChange }) {
   const options = [
     {
       value: "in",
-      label: (0, import_i18n4.__)("In", "elementor"),
-      renderContent: () => (0, import_i18n4.__)("In", "elementor"),
+      label: (0, import_i18n3.__)("In", "elementor"),
+      renderContent: () => (0, import_i18n3.__)("In", "elementor"),
       showTooltip: true
     },
     {
       value: "out",
-      label: (0, import_i18n4.__)("Out", "elementor"),
-      renderContent: () => (0, import_i18n4.__)("Out", "elementor"),
+      label: (0, import_i18n3.__)("Out", "elementor"),
+      renderContent: () => (0, import_i18n3.__)("Out", "elementor"),
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React7.createElement(import_editor_controls2.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
+  return /* @__PURE__ */ React6.createElement(import_editor_controls2.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
 // src/components/controls/time-frame-indicator.tsx
-var React8 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_react5 = require("react");
 var import_editor_controls3 = require("@elementor/editor-controls");
 
@@ -530,7 +518,7 @@ function TimeFrameIndicator({
       setValue(parseSizeValue(defaultValue, TIME_UNITS, void 0, DEFAULT_TIME_UNIT));
     }
   };
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React7.createElement(
     import_editor_controls3.UnstableSizeField,
     {
       units: TIME_UNITS,
@@ -546,6 +534,14 @@ function TimeFrameIndicator({
   );
 }
 
+// src/components/field.tsx
+var React8 = __toESM(require("react"));
+var import_editor_controls4 = require("@elementor/editor-controls");
+var import_ui2 = require("@elementor/ui");
+var Field = ({ label, children }) => {
+  return /* @__PURE__ */ React8.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_editor_controls4.PopoverGridContainer, null, /* @__PURE__ */ React8.createElement(import_ui2.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(import_editor_controls4.ControlFormLabel, null, label)), /* @__PURE__ */ React8.createElement(import_ui2.Grid, { item: true, xs: 6 }, children)));
+};
+
 // src/components/interaction-details.tsx
 var DEFAULT_VALUES = {
   trigger: "load",
@@ -560,7 +556,7 @@ var DEFAULT_VALUES = {
   offsetTop: 15,
   offsetBottom: 85
 };
-var TRIGGERS_WITHOUT_REPLAY = ["load", "scrollOn"];
+var TRIGGERS_WITHOUT_REPLAY = ["load", "scrollOn", "hover", "click"];
 var controlVisibilityConfig = {
   replay: (values) => !TRIGGERS_WITHOUT_REPLAY.includes(values.trigger),
   relativeTo: (values) => values.trigger === "scrollOn",
@@ -612,6 +608,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     offsetBottom
   };
   const TriggerControl = useControlComponent("trigger", true);
+  const EffectControl = useControlComponent("effect");
   const ReplayControl = useControlComponent("replay", controlVisibilityConfig.replay(interactionValues));
   const RelativeToControl = useControlComponent(
     "relativeTo",
@@ -623,17 +620,15 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     controlVisibilityConfig.offsetBottom(interactionValues)
   );
   const EasingControl = useControlComponent("easing");
-  const resolveDirection = (hasDirection, newEffect, newDirection) => {
-    if (newEffect === "slide" && !newDirection) {
-      return "top";
-    }
-    if (hasDirection) {
-      return newDirection;
-    }
-    return direction;
-  };
+  const containerRef = (0, import_react6.useRef)(null);
   const updateInteraction = (updates) => {
-    const resolvedDirectionValue = resolveDirection("direction" in updates, updates.effect, updates.direction);
+    const resolvedDirectionValue = resolveDirection(
+      "direction" in updates,
+      updates.effect,
+      updates.direction,
+      direction,
+      effect
+    );
     const updatedInteraction = {
       ...interaction,
       interaction_id: interaction.interaction_id,
@@ -657,53 +652,60 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  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(
+  return /* @__PURE__ */ React9.createElement(import_ui3.Box, { ref: containerRef }, /* @__PURE__ */ React9.createElement(import_editor_controls5.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Trigger", "elementor") }, /* @__PURE__ */ React9.createElement(
+    TriggerControl,
+    {
+      value: trigger,
+      onChange: (v) => updateInteraction({ trigger: v })
+    }
+  )), ReplayControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Replay", "elementor") }, /* @__PURE__ */ React9.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
-      disabled: true
+      disabled: true,
+      anchorRef: containerRef
     }
-  ))), /* @__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(
+  ))), /* @__PURE__ */ React9.createElement(import_ui3.Divider, null), /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Effect", "elementor") }, /* @__PURE__ */ React9.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Type", "elementor") }, /* @__PURE__ */ React9.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Direction", "elementor") }, /* @__PURE__ */ React9.createElement(
     Direction,
     {
       value: direction,
       onChange: (v) => updateInteraction({ direction: v }),
       interactionType: type
     }
-  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Duration", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Duration", "elementor") }, /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
       value: String(duration),
       onChange: (v) => updateInteraction({ duration: v }),
       defaultValue: DEFAULT_VALUES.duration
     }
-  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Delay", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Delay", "elementor") }, /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
       value: String(delay),
       onChange: (v) => updateInteraction({ delay: v }),
       defaultValue: DEFAULT_VALUES.delay
     }
-  ))), 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(
+  ))), 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_i18n4.__)("Relative To", "elementor") }, /* @__PURE__ */ React9.createElement(
     RelativeToControl,
     {
       value: relativeTo,
       onChange: (v) => updateInteraction({ relativeTo: v })
     }
-  )), OffsetTopControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Offset Top", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), OffsetTopControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Offset Top", "elementor") }, /* @__PURE__ */ React9.createElement(
     OffsetTopControl,
     {
       value: String(parseSizeValue(offsetTop, ["%"]).size),
       onChange: (v) => updateInteraction({ offsetTop: v })
     }
-  )), OffsetBottomControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Offset Bottom", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), OffsetBottomControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Offset Bottom", "elementor") }, /* @__PURE__ */ React9.createElement(
     OffsetBottomControl,
     {
       value: String(parseSizeValue(offsetBottom, ["%"]).size),
       onChange: (v) => updateInteraction({ offsetBottom: v })
     }
-  ))), /* @__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(
+  ))), /* @__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_i18n4.__)("Easing", "elementor") }, /* @__PURE__ */ React9.createElement(
     EasingControl,
     {
       value: easing,
@@ -711,19 +713,16 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         updateInteraction({ easing: v });
       }
     }
-  ))));
+  )))));
 };
-function Field({ label, 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/interaction-settings.tsx
 var React10 = __toESM(require("react"));
 var import_react7 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
+var import_editor_controls6 = require("@elementor/editor-controls");
 var import_editor_responsive = require("@elementor/editor-responsive");
 var import_ui4 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 var SIZE = "tiny";
 var InteractionSettings = ({ interaction, onChange }) => {
   const breakpoints = (0, import_editor_responsive.useBreakpoints)();
@@ -757,7 +756,7 @@ var InteractionSettings = ({ interaction, onChange }) => {
     },
     [interaction, availableBreakpoints, onChange]
   );
-  return /* @__PURE__ */ React10.createElement(import_editor_controls5.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui4.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui4.Stack, { direction: "column", gap: 1 }, /* @__PURE__ */ React10.createElement(import_editor_controls5.ControlFormLabel, { sx: { width: "100%" } }, (0, import_i18n6.__)("Trigger on", "elementor")), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(import_editor_controls6.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui4.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui4.Stack, { direction: "column", gap: 1 }, /* @__PURE__ */ React10.createElement(import_editor_controls6.ControlFormLabel, { sx: { width: "100%" } }, (0, import_i18n5.__)("Trigger on", "elementor")), /* @__PURE__ */ React10.createElement(
     import_ui4.Autocomplete,
     {
       fullWidth: true,
@@ -801,11 +800,11 @@ var InteractionsListItem = ({
     {
       size: "small",
       variant: "fullWidth",
-      "aria-label": (0, import_i18n7.__)("Interaction", "elementor"),
+      "aria-label": (0, import_i18n6.__)("Interaction", "elementor"),
       ...getTabsProps()
     },
-    /* @__PURE__ */ React11.createElement(import_ui5.Tab, { label: (0, import_i18n7.__)("Details", "elementor"), ...getTabProps("details") }),
-    /* @__PURE__ */ React11.createElement(import_ui5.Tab, { label: (0, import_i18n7.__)("Settings", "elementor"), ...getTabProps("settings") })
+    /* @__PURE__ */ React11.createElement(import_ui5.Tab, { label: (0, import_i18n6.__)("Details", "elementor"), ...getTabProps("details") }),
+    /* @__PURE__ */ React11.createElement(import_ui5.Tab, { label: (0, import_i18n6.__)("Settings", "elementor"), ...getTabProps("settings") })
   ), /* @__PURE__ */ React11.createElement(import_ui5.Divider, null), /* @__PURE__ */ React11.createElement(import_ui5.TabPanel, { sx: { p: 0 }, ...getTabPanelProps("details") }, /* @__PURE__ */ React11.createElement(
     InteractionDetails,
     {
@@ -848,7 +847,7 @@ function InteractionsList(props) {
   const isMaxNumberOfInteractionsReached = (0, import_react9.useMemo)(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React12.createElement(import_ui6.Alert, { color: "secondary", icon: /* @__PURE__ */ React12.createElement(import_icons3.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React12.createElement(import_ui6.AlertTitle, null, (0, import_i18n8.__)("Interactions", "elementor")), /* @__PURE__ */ React12.createElement(import_ui6.Box, { component: "span" }, (0, import_i18n8.__)(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React12.createElement(import_ui6.Alert, { color: "secondary", icon: /* @__PURE__ */ React12.createElement(import_icons3.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React12.createElement(import_ui6.AlertTitle, null, (0, import_i18n7.__)("Interactions", "elementor")), /* @__PURE__ */ React12.createElement(import_ui6.Box, { component: "span" }, (0, import_i18n7.__)(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
@@ -883,11 +882,11 @@ function InteractionsList(props) {
     [handleInteractionChange, onPlayInteraction]
   );
   return /* @__PURE__ */ React12.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ React12.createElement(
-    import_editor_controls6.Repeater,
+    import_editor_controls7.Repeater,
     {
       openOnAdd: true,
       openItem: triggerCreateOnShowEmpty ? 0 : void 0,
-      label: (0, import_i18n8.__)("Interactions", "elementor"),
+      label: (0, import_i18n7.__)("Interactions", "elementor"),
       values: interactions.items,
       setValues: handleRepeaterChange,
       showDuplicate: false,
@@ -900,10 +899,10 @@ function InteractionsList(props) {
         Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
         Content: InteractionsListItem,
-        actions: (value) => /* @__PURE__ */ React12.createElement(import_ui6.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n8.__)("Preview", "elementor") }, /* @__PURE__ */ React12.createElement(
+        actions: (value) => /* @__PURE__ */ React12.createElement(import_ui6.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n7.__)("Preview", "elementor") }, /* @__PURE__ */ React12.createElement(
           import_ui6.IconButton,
           {
-            "aria-label": (0, import_i18n8.__)("Play interaction", "elementor"),
+            "aria-label": (0, import_i18n7.__)("Play interaction", "elementor"),
             size: "tiny",
             onClick: () => onPlayInteraction(extractString(value.value.interaction_id))
           },
@@ -1119,17 +1118,17 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 
 // src/components/controls/easing.tsx
 var React14 = __toESM(require("react"));
-var import_editor_ui2 = require("@elementor/editor-ui");
+var import_editor_ui = require("@elementor/editor-ui");
 var import_ui8 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 var EASING_OPTIONS = {
-  easeIn: (0, import_i18n9.__)("Ease In", "elementor"),
-  easeInOut: (0, import_i18n9.__)("Ease In Out", "elementor"),
-  easeOut: (0, import_i18n9.__)("Ease Out", "elementor"),
-  backIn: (0, import_i18n9.__)("Back In", "elementor"),
-  backInOut: (0, import_i18n9.__)("Back In Out", "elementor"),
-  backOut: (0, import_i18n9.__)("Back Out", "elementor"),
-  linear: (0, import_i18n9.__)("Linear", "elementor")
+  easeIn: (0, import_i18n8.__)("Ease In", "elementor"),
+  easeInOut: (0, import_i18n8.__)("Ease In Out", "elementor"),
+  easeOut: (0, import_i18n8.__)("Ease Out", "elementor"),
+  backIn: (0, import_i18n8.__)("Back In", "elementor"),
+  backInOut: (0, import_i18n8.__)("Back In Out", "elementor"),
+  backOut: (0, import_i18n8.__)("Back Out", "elementor"),
+  linear: (0, import_i18n8.__)("Linear", "elementor")
 };
 var DEFAULT_EASING = "easeIn";
 function Easing({}) {
@@ -1140,49 +1139,118 @@ function Easing({}) {
   return /* @__PURE__ */ React14.createElement(import_ui8.Select, { value: DEFAULT_EASING, onChange: () => {
   }, fullWidth: true, displayEmpty: true, size: "tiny" }, availableOptions.map((option) => {
     const isDisabled = DEFAULT_EASING !== option.key;
-    return /* @__PURE__ */ React14.createElement(import_editor_ui2.MenuListItem, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
+    return /* @__PURE__ */ React14.createElement(import_editor_ui.MenuListItem, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
   }));
 }
 
-// src/components/controls/replay.tsx
+// src/components/controls/effect.tsx
 var React15 = __toESM(require("react"));
-var import_editor_controls7 = require("@elementor/editor-controls");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_ui9 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
+function Effect({ value, onChange }) {
+  const availableEffects = [
+    { key: "fade", label: (0, import_i18n9.__)("Fade", "elementor") },
+    { key: "slide", label: (0, import_i18n9.__)("Slide", "elementor") },
+    { key: "scale", label: (0, import_i18n9.__)("Scale", "elementor") }
+  ];
+  return /* @__PURE__ */ React15.createElement(
+    import_ui9.Select,
+    {
+      fullWidth: true,
+      displayEmpty: true,
+      size: "tiny",
+      value,
+      onChange: (event) => onChange(event.target.value)
+    },
+    availableEffects.map((effect) => {
+      return /* @__PURE__ */ React15.createElement(import_editor_ui2.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
+    })
+  );
+}
+
+// src/components/controls/replay.tsx
+var React17 = __toESM(require("react"));
+var import_editor_controls8 = require("@elementor/editor-controls");
 var import_icons4 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
+
+// src/ui/interactions-promotion-chip.tsx
+var React16 = __toESM(require("react"));
+var import_react11 = require("react");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_ui10 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
-function Replay({ onChange }) {
+function InteractionsPromotionChip({ content, upgradeUrl, anchorRef }) {
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  (0, import_editor_ui3.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
+  const handleToggle = (e) => {
+    e.stopPropagation();
+    setIsOpen((prev) => !prev);
+  };
+  return /* @__PURE__ */ React16.createElement(
+    import_editor_ui3.PromotionPopover,
+    {
+      open: isOpen,
+      title: (0, import_i18n10.__)("Interactions", "elementor"),
+      content,
+      ctaText: (0, import_i18n10.__)("Upgrade now", "elementor"),
+      ctaUrl: upgradeUrl,
+      anchorRef,
+      placement: anchorRef ? "right-start" : void 0,
+      onClose: handleToggle
+    },
+    /* @__PURE__ */ React16.createElement(import_ui10.Box, { onClick: handleToggle, sx: { cursor: "pointer", display: "inline-flex", mr: 1 } }, /* @__PURE__ */ React16.createElement(import_editor_ui3.PromotionChip, null))
+  );
+}
+
+// src/components/controls/replay.tsx
+var OVERLAY_GRID = "1 / 1";
+var CHIP_OFFSET = "50%";
+function Replay({ onChange, anchorRef }) {
   const options = [
     {
       value: false,
       disabled: false,
-      label: (0, import_i18n10.__)("No", "elementor"),
-      renderContent: ({ size }) => /* @__PURE__ */ React15.createElement(import_icons4.MinusIcon, { fontSize: size })
+      label: (0, import_i18n11.__)("No", "elementor"),
+      renderContent: ({ size }) => /* @__PURE__ */ React17.createElement(import_icons4.MinusIcon, { fontSize: size }),
+      showTooltip: true
     },
     {
       value: true,
       disabled: true,
-      label: (0, import_i18n10.__)("Yes", "elementor"),
-      renderContent: ({ size }) => /* @__PURE__ */ React15.createElement(import_icons4.CheckIcon, { fontSize: size })
+      label: (0, import_i18n11.__)("Yes", "elementor"),
+      renderContent: ({ size }) => /* @__PURE__ */ React17.createElement(import_icons4.CheckIcon, { fontSize: size }),
+      showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React15.createElement(import_editor_controls7.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false });
+  return /* @__PURE__ */ React17.createElement(import_ui11.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React17.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React17.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React17.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React17.createElement(
+    InteractionsPromotionChip,
+    {
+      content: (0, import_i18n11.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
+      anchorRef
+    }
+  )));
 }
 
 // src/components/controls/trigger.tsx
-var React16 = __toESM(require("react"));
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_ui9 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var React18 = __toESM(require("react"));
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_ui12 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 function Trigger({ value, onChange }) {
   const availableTriggers = Object.entries({
-    load: (0, import_i18n11.__)("Page load", "elementor"),
-    scrollIn: (0, import_i18n11.__)("Scroll into view", "elementor"),
-    scrollOn: (0, import_i18n11.__)("While Scrolling", "elementor")
+    load: (0, import_i18n12.__)("Page load", "elementor"),
+    scrollIn: (0, import_i18n12.__)("Scroll into view", "elementor"),
+    scrollOn: (0, import_i18n12.__)("While Scrolling", "elementor")
   }).map(([key, label]) => ({
     key,
     label
   }));
-  return /* @__PURE__ */ React16.createElement(
-    import_ui9.Select,
+  return /* @__PURE__ */ React18.createElement(
+    import_ui12.Select,
     {
       fullWidth: true,
       displayEmpty: true,
@@ -1191,7 +1259,7 @@ function Trigger({ value, onChange }) {
       value
     },
     availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React16.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
+      return /* @__PURE__ */ React18.createElement(import_editor_ui4.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   );
 }
@@ -1254,6 +1322,11 @@ function init() {
       component: Replay,
       options: ["true", "false"]
     });
+    registerInteractionsControl({
+      type: "effect",
+      component: Effect,
+      options: ["fade", "slide", "scale"]
+    });
   } catch (error) {
     throw error;
   }