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

package/dist/index.mjs

@@ -92,11 +92,11 @@ var PopupStateProvider = ({ children }) => {
 
 // src/components/interactions-list.tsx
 import * as React12 from "react";
-import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef3 } from "react";
 import { Repeater } from "@elementor/editor-controls";
 import { InfoCircleFilledIcon, PlayerPlayIcon } from "@elementor/icons";
-import { Alert, AlertTitle, Box, IconButton, Tooltip } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { Alert, AlertTitle, Box as Box2, IconButton, Tooltip } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/contexts/interactions-item-context.tsx
 import * as React4 from "react";
@@ -339,14 +339,14 @@ var buildDisplayLabel = (item) => {
 import * as React11 from "react";
 import { useCallback as useCallback4 } from "react";
 import { Divider as Divider2, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/components/interaction-details.tsx
 import * as React9 from "react";
-import { useMemo as useMemo2 } from "react";
-import { ControlFormLabel, PopoverContent, PopoverGridContainer } from "@elementor/editor-controls";
-import { Divider, Grid } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { useMemo as useMemo2, useRef as useRef2 } from "react";
+import { PopoverContent } from "@elementor/editor-controls";
+import { Box, Divider, Grid as Grid2 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/interactions-controls-registry.ts
 var controlsRegistry = /* @__PURE__ */ new Map();
@@ -361,6 +361,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
 import * as React5 from "react";
 import { useMemo } from "react";
@@ -400,56 +414,30 @@ function Direction({ value, onChange, interactionType }) {
   return /* @__PURE__ */ React5.createElement(ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
-// src/components/controls/effect.tsx
-import * as React6 from "react";
-import { MenuListItem } from "@elementor/editor-ui";
-import { Select } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
-function Effect({ value, onChange }) {
-  const availableEffects = [
-    { key: "fade", label: __3("Fade", "elementor") },
-    { key: "slide", label: __3("Slide", "elementor") },
-    { key: "scale", label: __3("Scale", "elementor") }
-  ];
-  return /* @__PURE__ */ React6.createElement(
-    Select,
-    {
-      fullWidth: true,
-      displayEmpty: true,
-      size: "tiny",
-      value,
-      onChange: (event) => onChange(event.target.value)
-    },
-    availableEffects.map((effect) => {
-      return /* @__PURE__ */ React6.createElement(MenuListItem, { key: effect.key, value: effect.key }, effect.label);
-    })
-  );
-}
-
 // src/components/controls/effect-type.tsx
-import * as React7 from "react";
+import * as React6 from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi2 } from "@elementor/editor-controls";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 function EffectType({ value, onChange }) {
   const options = [
     {
       value: "in",
-      label: __4("In", "elementor"),
-      renderContent: () => __4("In", "elementor"),
+      label: __3("In", "elementor"),
+      renderContent: () => __3("In", "elementor"),
       showTooltip: true
     },
     {
       value: "out",
-      label: __4("Out", "elementor"),
-      renderContent: () => __4("Out", "elementor"),
+      label: __3("Out", "elementor"),
+      renderContent: () => __3("Out", "elementor"),
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React7.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value });
+  return /* @__PURE__ */ React6.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value });
 }
 
 // src/components/controls/time-frame-indicator.tsx
-import * as React8 from "react";
+import * as React7 from "react";
 import { useCallback as useCallback2, useRef } from "react";
 import { UnstableSizeField } from "@elementor/editor-controls";
 
@@ -491,7 +479,7 @@ function TimeFrameIndicator({
       setValue(parseSizeValue(defaultValue, TIME_UNITS, void 0, DEFAULT_TIME_UNIT));
     }
   };
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React7.createElement(
     UnstableSizeField,
     {
       units: TIME_UNITS,
@@ -507,6 +495,14 @@ function TimeFrameIndicator({
   );
 }
 
+// src/components/field.tsx
+import * as React8 from "react";
+import { ControlFormLabel, PopoverGridContainer } from "@elementor/editor-controls";
+import { Grid } from "@elementor/ui";
+var Field = ({ label, children }) => {
+  return /* @__PURE__ */ React8.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(PopoverGridContainer, null, /* @__PURE__ */ React8.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React8.createElement(Grid, { item: true, xs: 6 }, children)));
+};
+
 // src/components/interaction-details.tsx
 var DEFAULT_VALUES = {
   trigger: "load",
@@ -521,7 +517,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",
@@ -573,6 +569,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",
@@ -584,17 +581,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 = useRef2(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,
@@ -618,53 +613,60 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React9.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React9.createElement(Field, { label: __5("Trigger", "elementor") }, /* @__PURE__ */ React9.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React9.createElement(Field, { label: __5("Replay", "elementor") }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement(Box, { ref: containerRef }, /* @__PURE__ */ React9.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(Grid2, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React9.createElement(Field, { label: __4("Trigger", "elementor") }, /* @__PURE__ */ React9.createElement(
+    TriggerControl,
+    {
+      value: trigger,
+      onChange: (v) => updateInteraction({ trigger: v })
+    }
+  )), ReplayControl && /* @__PURE__ */ React9.createElement(Field, { label: __4("Replay", "elementor") }, /* @__PURE__ */ React9.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
-      disabled: true
+      disabled: true,
+      anchorRef: containerRef
     }
-  ))), /* @__PURE__ */ React9.createElement(Divider, null), /* @__PURE__ */ React9.createElement(Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: __5("Effect", "elementor") }, /* @__PURE__ */ React9.createElement(Effect, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: __5("Type", "elementor") }, /* @__PURE__ */ React9.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: __5("Direction", "elementor") }, /* @__PURE__ */ React9.createElement(
+  ))), /* @__PURE__ */ React9.createElement(Divider, null), /* @__PURE__ */ React9.createElement(Grid2, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React9.createElement(Field, { label: __4("Effect", "elementor") }, /* @__PURE__ */ React9.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: __4("Type", "elementor") }, /* @__PURE__ */ React9.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: __4("Direction", "elementor") }, /* @__PURE__ */ React9.createElement(
     Direction,
     {
       value: direction,
       onChange: (v) => updateInteraction({ direction: v }),
       interactionType: type
     }
-  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: __5("Duration", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: __4("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: __5("Delay", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: __4("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(Divider, null), /* @__PURE__ */ React9.createElement(Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: __5("Relative To", "elementor") }, /* @__PURE__ */ React9.createElement(
+  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Divider, null), /* @__PURE__ */ React9.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: __4("Relative To", "elementor") }, /* @__PURE__ */ React9.createElement(
     RelativeToControl,
     {
       value: relativeTo,
       onChange: (v) => updateInteraction({ relativeTo: v })
     }
-  )), OffsetTopControl && /* @__PURE__ */ React9.createElement(Field, { label: __5("Offset Top", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), OffsetTopControl && /* @__PURE__ */ React9.createElement(Field, { label: __4("Offset Top", "elementor") }, /* @__PURE__ */ React9.createElement(
     OffsetTopControl,
     {
       value: String(parseSizeValue(offsetTop, ["%"]).size),
       onChange: (v) => updateInteraction({ offsetTop: v })
     }
-  )), OffsetBottomControl && /* @__PURE__ */ React9.createElement(Field, { label: __5("Offset Bottom", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), OffsetBottomControl && /* @__PURE__ */ React9.createElement(Field, { label: __4("Offset Bottom", "elementor") }, /* @__PURE__ */ React9.createElement(
     OffsetBottomControl,
     {
       value: String(parseSizeValue(offsetBottom, ["%"]).size),
       onChange: (v) => updateInteraction({ offsetBottom: v })
     }
-  ))), /* @__PURE__ */ React9.createElement(Divider, null)), EasingControl && /* @__PURE__ */ React9.createElement(Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: __5("Easing", "elementor") }, /* @__PURE__ */ React9.createElement(
+  ))), /* @__PURE__ */ React9.createElement(Divider, null)), EasingControl && /* @__PURE__ */ React9.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: __4("Easing", "elementor") }, /* @__PURE__ */ React9.createElement(
     EasingControl,
     {
       value: easing,
@@ -672,19 +674,16 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         updateInteraction({ easing: v });
       }
     }
-  ))));
+  )))));
 };
-function Field({ label, children }) {
-  return /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(PopoverGridContainer, null, /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React9.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 6 }, children)));
-}
 
 // src/components/interaction-settings.tsx
 import * as React10 from "react";
 import { useCallback as useCallback3, useMemo as useMemo3, useState as useState2 } from "react";
 import { ControlFormLabel as ControlFormLabel2, PopoverContent as PopoverContent2 } from "@elementor/editor-controls";
 import { useBreakpoints } from "@elementor/editor-responsive";
-import { Autocomplete, Chip, Grid as Grid2, Stack as Stack2, TextField } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { Autocomplete, Chip, Grid as Grid3, Stack as Stack2, TextField } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
 var SIZE = "tiny";
 var InteractionSettings = ({ interaction, onChange }) => {
   const breakpoints = useBreakpoints();
@@ -718,7 +717,7 @@ var InteractionSettings = ({ interaction, onChange }) => {
     },
     [interaction, availableBreakpoints, onChange]
   );
-  return /* @__PURE__ */ React10.createElement(PopoverContent2, { p: 1.5 }, /* @__PURE__ */ React10.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React10.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(Stack2, { direction: "column", gap: 1 }, /* @__PURE__ */ React10.createElement(ControlFormLabel2, { sx: { width: "100%" } }, __6("Trigger on", "elementor")), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(PopoverContent2, { p: 1.5 }, /* @__PURE__ */ React10.createElement(Grid3, { container: true, spacing: 1.5 }, /* @__PURE__ */ React10.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(Stack2, { direction: "column", gap: 1 }, /* @__PURE__ */ React10.createElement(ControlFormLabel2, { sx: { width: "100%" } }, __5("Trigger on", "elementor")), /* @__PURE__ */ React10.createElement(
     Autocomplete,
     {
       fullWidth: true,
@@ -762,11 +761,11 @@ var InteractionsListItem = ({
     {
       size: "small",
       variant: "fullWidth",
-      "aria-label": __7("Interaction", "elementor"),
+      "aria-label": __6("Interaction", "elementor"),
       ...getTabsProps()
     },
-    /* @__PURE__ */ React11.createElement(Tab, { label: __7("Details", "elementor"), ...getTabProps("details") }),
-    /* @__PURE__ */ React11.createElement(Tab, { label: __7("Settings", "elementor"), ...getTabProps("settings") })
+    /* @__PURE__ */ React11.createElement(Tab, { label: __6("Details", "elementor"), ...getTabProps("details") }),
+    /* @__PURE__ */ React11.createElement(Tab, { label: __6("Settings", "elementor"), ...getTabProps("settings") })
   ), /* @__PURE__ */ React11.createElement(Divider2, null), /* @__PURE__ */ React11.createElement(TabPanel, { sx: { p: 0 }, ...getTabPanelProps("details") }, /* @__PURE__ */ React11.createElement(
     InteractionDetails,
     {
@@ -789,7 +788,7 @@ var InteractionsListItem = ({
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
-  const hasInitializedRef = useRef2(false);
+  const hasInitializedRef = useRef3(false);
   const handleUpdateInteractions = useCallback5(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
@@ -809,7 +808,7 @@ function InteractionsList(props) {
   const isMaxNumberOfInteractionsReached = useMemo4(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React12.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React12.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React12.createElement(AlertTitle, null, __8("Interactions", "elementor")), /* @__PURE__ */ React12.createElement(Box, { component: "span" }, __8(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React12.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React12.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React12.createElement(AlertTitle, null, __7("Interactions", "elementor")), /* @__PURE__ */ React12.createElement(Box2, { component: "span" }, __7(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
@@ -848,7 +847,7 @@ function InteractionsList(props) {
     {
       openOnAdd: true,
       openItem: triggerCreateOnShowEmpty ? 0 : void 0,
-      label: __8("Interactions", "elementor"),
+      label: __7("Interactions", "elementor"),
       values: interactions.items,
       setValues: handleRepeaterChange,
       showDuplicate: false,
@@ -861,10 +860,10 @@ function InteractionsList(props) {
         Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
         Content: InteractionsListItem,
-        actions: (value) => /* @__PURE__ */ React12.createElement(Tooltip, { key: "preview", placement: "top", title: __8("Preview", "elementor") }, /* @__PURE__ */ React12.createElement(
+        actions: (value) => /* @__PURE__ */ React12.createElement(Tooltip, { key: "preview", placement: "top", title: __7("Preview", "elementor") }, /* @__PURE__ */ React12.createElement(
           IconButton,
           {
-            "aria-label": __8("Play interaction", "elementor"),
+            "aria-label": __7("Play interaction", "elementor"),
             size: "tiny",
             onClick: () => onPlayInteraction(extractString(value.value.interaction_id))
           },
@@ -1083,17 +1082,17 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 
 // src/components/controls/easing.tsx
 import * as React14 from "react";
-import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
-import { Select as Select2 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { MenuListItem } from "@elementor/editor-ui";
+import { Select } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
 var EASING_OPTIONS = {
-  easeIn: __9("Ease In", "elementor"),
-  easeInOut: __9("Ease In Out", "elementor"),
-  easeOut: __9("Ease Out", "elementor"),
-  backIn: __9("Back In", "elementor"),
-  backInOut: __9("Back In Out", "elementor"),
-  backOut: __9("Back Out", "elementor"),
-  linear: __9("Linear", "elementor")
+  easeIn: __8("Ease In", "elementor"),
+  easeInOut: __8("Ease In Out", "elementor"),
+  easeOut: __8("Ease Out", "elementor"),
+  backIn: __8("Back In", "elementor"),
+  backInOut: __8("Back In Out", "elementor"),
+  backOut: __8("Back Out", "elementor"),
+  linear: __8("Linear", "elementor")
 };
 var DEFAULT_EASING = "easeIn";
 function Easing({}) {
@@ -1101,51 +1100,120 @@ function Easing({}) {
     key,
     label
   }));
-  return /* @__PURE__ */ React14.createElement(Select2, { value: DEFAULT_EASING, onChange: () => {
+  return /* @__PURE__ */ React14.createElement(Select, { value: DEFAULT_EASING, onChange: () => {
   }, fullWidth: true, displayEmpty: true, size: "tiny" }, availableOptions.map((option) => {
     const isDisabled = DEFAULT_EASING !== option.key;
-    return /* @__PURE__ */ React14.createElement(MenuListItem2, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
+    return /* @__PURE__ */ React14.createElement(MenuListItem, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
   }));
 }
 
-// src/components/controls/replay.tsx
+// src/components/controls/effect.tsx
 import * as React15 from "react";
+import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
+import { Select as Select2 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
+function Effect({ value, onChange }) {
+  const availableEffects = [
+    { key: "fade", label: __9("Fade", "elementor") },
+    { key: "slide", label: __9("Slide", "elementor") },
+    { key: "scale", label: __9("Scale", "elementor") }
+  ];
+  return /* @__PURE__ */ React15.createElement(
+    Select2,
+    {
+      fullWidth: true,
+      displayEmpty: true,
+      size: "tiny",
+      value,
+      onChange: (event) => onChange(event.target.value)
+    },
+    availableEffects.map((effect) => {
+      return /* @__PURE__ */ React15.createElement(MenuListItem2, { key: effect.key, value: effect.key }, effect.label);
+    })
+  );
+}
+
+// src/components/controls/replay.tsx
+import * as React17 from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi3 } from "@elementor/editor-controls";
 import { CheckIcon, MinusIcon } from "@elementor/icons";
+import { Box as Box4 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
+
+// src/ui/interactions-promotion-chip.tsx
+import * as React16 from "react";
+import { useState as useState4 } from "react";
+import { PromotionChip, PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
+import { Box as Box3 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
-function Replay({ onChange }) {
+function InteractionsPromotionChip({ content, upgradeUrl, anchorRef }) {
+  const [isOpen, setIsOpen] = useState4(false);
+  useCanvasClickHandler(isOpen, () => setIsOpen(false));
+  const handleToggle = (e) => {
+    e.stopPropagation();
+    setIsOpen((prev) => !prev);
+  };
+  return /* @__PURE__ */ React16.createElement(
+    PromotionPopover,
+    {
+      open: isOpen,
+      title: __10("Interactions", "elementor"),
+      content,
+      ctaText: __10("Upgrade now", "elementor"),
+      ctaUrl: upgradeUrl,
+      anchorRef,
+      placement: anchorRef ? "right-start" : void 0,
+      onClose: handleToggle
+    },
+    /* @__PURE__ */ React16.createElement(Box3, { onClick: handleToggle, sx: { cursor: "pointer", display: "inline-flex", mr: 1 } }, /* @__PURE__ */ React16.createElement(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: __10("No", "elementor"),
-      renderContent: ({ size }) => /* @__PURE__ */ React15.createElement(MinusIcon, { fontSize: size })
+      label: __11("No", "elementor"),
+      renderContent: ({ size }) => /* @__PURE__ */ React17.createElement(MinusIcon, { fontSize: size }),
+      showTooltip: true
     },
     {
       value: true,
       disabled: true,
-      label: __10("Yes", "elementor"),
-      renderContent: ({ size }) => /* @__PURE__ */ React15.createElement(CheckIcon, { fontSize: size })
+      label: __11("Yes", "elementor"),
+      renderContent: ({ size }) => /* @__PURE__ */ React17.createElement(CheckIcon, { fontSize: size }),
+      showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React15.createElement(ToggleButtonGroupUi3, { items: options, exclusive: true, onChange, value: false });
+  return /* @__PURE__ */ React17.createElement(Box4, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React17.createElement(Box4, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React17.createElement(ToggleButtonGroupUi3, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React17.createElement(Box4, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React17.createElement(
+    InteractionsPromotionChip,
+    {
+      content: __11("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
-import * as React16 from "react";
+import * as React18 from "react";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
 import { Select as Select3 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 function Trigger({ value, onChange }) {
   const availableTriggers = Object.entries({
-    load: __11("Page load", "elementor"),
-    scrollIn: __11("Scroll into view", "elementor"),
-    scrollOn: __11("While Scrolling", "elementor")
+    load: __12("Page load", "elementor"),
+    scrollIn: __12("Scroll into view", "elementor"),
+    scrollOn: __12("While Scrolling", "elementor")
   }).map(([key, label]) => ({
     key,
     label
   }));
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React18.createElement(
     Select3,
     {
       fullWidth: true,
@@ -1155,7 +1223,7 @@ function Trigger({ value, onChange }) {
       value
     },
     availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React16.createElement(MenuListItem3, { key: trigger.key, value: trigger.key }, trigger.label);
+      return /* @__PURE__ */ React18.createElement(MenuListItem3, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   );
 }
@@ -1218,6 +1286,11 @@ function init() {
       component: Replay,
       options: ["true", "false"]
     });
+    registerInteractionsControl({
+      type: "effect",
+      component: Effect,
+      options: ["fade", "slide", "scale"]
+    });
   } catch (error) {
     throw error;
   }