@elementor/editor-interactions 4.0.0-498 → 4.0.0-500

package/dist/index.d.mts

@@ -79,7 +79,7 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
 
 declare function init(): void;
 
-type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'relativeTo' | 'offsetTop' | 'offsetBottom';
+type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'offsetTop' | 'offsetBottom';
 type InteractionsControlPropsMap = {
     trigger: FieldProps;
     effect: FieldProps;
@@ -88,6 +88,7 @@ type InteractionsControlPropsMap = {
     duration: FieldProps;
     delay: FieldProps;
     replay: ReplayFieldProps;
+    easing: FieldProps;
     relativeTo: FieldProps;
     offsetTop: FieldProps;
     offsetBottom: FieldProps;

package/dist/index.d.ts

@@ -79,7 +79,7 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
 
 declare function init(): void;
 
-type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'relativeTo' | 'offsetTop' | 'offsetBottom';
+type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'offsetTop' | 'offsetBottom';
 type InteractionsControlPropsMap = {
     trigger: FieldProps;
     effect: FieldProps;
@@ -88,6 +88,7 @@ type InteractionsControlPropsMap = {
     duration: FieldProps;
     delay: FieldProps;
     replay: ReplayFieldProps;
+    easing: FieldProps;
     relativeTo: FieldProps;
     offsetTop: FieldProps;
     offsetBottom: FieldProps;

package/dist/index.js

@@ -69,10 +69,10 @@ var EmptyState = ({ onCreateInteraction }) => {
 
 // src/components/interactions-tab.tsx
 var React10 = __toESM(require("react"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_session = require("@elementor/session");
-var import_ui6 = require("@elementor/ui");
+var import_ui5 = require("@elementor/ui");
 
 // src/contexts/interactions-context.tsx
 var React2 = __toESM(require("react"));
@@ -131,11 +131,11 @@ var PopupStateProvider = ({ children }) => {
 
 // src/components/interactions-list.tsx
 var React9 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_editor_controls4 = require("@elementor/editor-controls");
+var import_react6 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
 var import_icons3 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_ui4 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
 
 // src/utils/temp-id-utils.ts
 var TEMP_ID_PREFIX = "temp-";
@@ -163,13 +163,20 @@ var createBoolean = (value) => ({
   $$type: "boolean",
   value
 });
-var createConfig = (replay, relativeTo, offsetTop, offsetBottom) => ({
+var createConfig = ({
+  replay,
+  easing = "easeIn",
+  relativeTo = "",
+  offsetTop = 0,
+  offsetBottom = 100
+}) => ({
   $$type: "config",
   value: {
     replay: createBoolean(replay),
-    relativeTo: createString(relativeTo ?? ""),
-    offsetTop: createNumber(offsetTop ?? 0),
-    offsetBottom: createNumber(offsetBottom ?? 100)
+    easing: createString(easing),
+    relativeTo: createString(relativeTo),
+    offsetTop: createNumber(offsetTop),
+    offsetBottom: createNumber(offsetBottom)
   }
 });
 var extractBoolean = (prop, fallback = false) => {
@@ -182,6 +189,7 @@ var createAnimationPreset = ({
   duration,
   delay,
   replay = false,
+  easing = "easeIn",
   relativeTo,
   offsetTop,
   offsetBottom
@@ -192,7 +200,13 @@ var createAnimationPreset = ({
     type: createString(type),
     direction: createString(direction ?? ""),
     timing_config: createTimingConfig(duration, delay),
-    config: createConfig(replay, relativeTo, offsetTop, offsetBottom)
+    config: createConfig({
+      replay,
+      easing,
+      relativeTo,
+      offsetTop,
+      offsetBottom
+    })
   }
 });
 var createInteractionItem = ({
@@ -204,6 +218,7 @@ var createInteractionItem = ({
   delay,
   interactionId,
   replay = false,
+  easing = "easeIn",
   relativeTo,
   offsetTop,
   offsetBottom
@@ -219,6 +234,7 @@ var createInteractionItem = ({
       duration,
       delay,
       replay,
+      easing,
       relativeTo,
       offsetTop,
       offsetBottom
@@ -230,9 +246,10 @@ var createDefaultInteractionItem = () => {
     trigger: "load",
     effect: "fade",
     type: "in",
-    duration: 300,
+    duration: 600,
     delay: 0,
     replay: false,
+    easing: "easeIn",
     interactionId: generateTempInteractionId()
   });
 };
@@ -263,10 +280,10 @@ var buildDisplayLabel = (item) => {
 
 // src/components/interaction-details.tsx
 var React8 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
-var import_ui4 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_react5 = require("react");
+var import_editor_controls4 = require("@elementor/editor-controls");
+var import_ui3 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/interactions-controls-registry.ts
 var controlsRegistry = /* @__PURE__ */ new Map();
@@ -370,31 +387,42 @@ function EffectType({ value, onChange }) {
 
 // src/components/controls/time-frame-indicator.tsx
 var React7 = __toESM(require("react"));
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_ui3 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
-function TimeFrameIndicator({ value, onChange }) {
-  const availableTimeFrames = ["0", "100", "200", "300", "400", "500", "750", "1000", "1250", "1500"].map(
-    (key) => ({
-      key,
-      // translators: %s: time in milliseconds
-      label: (0, import_i18n5.__)("%s MS", "elementor").replace("%s", key)
-    })
+var import_react4 = 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)(
+    (size) => {
+      onChange(String(size));
+    },
+    [onChange]
   );
+  const handleChange = (newValue) => {
+    setValue(newValue.size);
+  };
+  const handleBlur = () => {
+    if (!sizeValue.size) {
+      setValue(defaultValue);
+    }
+  };
   return /* @__PURE__ */ React7.createElement(
-    import_ui3.Select,
+    import_editor_controls3.UnstableSizeField,
     {
-      fullWidth: true,
-      displayEmpty: true,
-      size: "tiny",
-      value,
-      onChange: (event) => onChange(event.target.value)
-    },
-    availableTimeFrames.map((timeFrame) => {
-      return /* @__PURE__ */ React7.createElement(import_editor_ui2.MenuListItem, { key: timeFrame.key, value: timeFrame.key }, timeFrame.label);
-    })
+      units: [DEFAULT_UNIT],
+      value: sizeValue,
+      onChange: handleChange,
+      onBlur: handleBlur
+    }
   );
 }
+var toSizeValue = (value) => {
+  return import_editor_props.sizePropTypeUtil.create({
+    size: Number(value),
+    unit: DEFAULT_UNIT
+  }).value;
+};
 
 // src/components/interaction-details.tsx
 var DEFAULT_VALUES = {
@@ -402,9 +430,10 @@ var DEFAULT_VALUES = {
   effect: "fade",
   type: "in",
   direction: "",
-  duration: 300,
+  duration: 600,
   delay: 0,
   replay: false,
+  easing: "easeIn",
   relativeTo: "viewport",
   offsetTop: 15,
   offsetBottom: 85
@@ -425,7 +454,7 @@ var controlVisibilityConfig = {
   }
 };
 function useControlComponent(controlName, isVisible = true) {
-  return (0, import_react4.useMemo)(() => {
+  return (0, import_react5.useMemo)(() => {
     if (!isVisible) {
       return null;
     }
@@ -440,6 +469,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   const duration = extractNumber(interaction.animation.value.timing_config.value.duration, DEFAULT_VALUES.duration);
   const delay = extractNumber(interaction.animation.value.timing_config.value.delay, DEFAULT_VALUES.delay);
   const replay = extractBoolean(interaction.animation.value.config?.value.replay, DEFAULT_VALUES.replay);
+  const easing = extractString(interaction.animation.value.config?.value.easing, DEFAULT_VALUES.easing);
   const relativeTo = extractString(interaction.animation.value.config?.value.relativeTo, DEFAULT_VALUES.relativeTo);
   const offsetTop = extractNumber(interaction.animation.value.config?.value.offsetTop, DEFAULT_VALUES.offsetTop);
   const offsetBottom = extractNumber(
@@ -453,6 +483,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     direction,
     duration,
     delay,
+    easing,
     replay,
     relativeTo,
     offsetTop,
@@ -469,6 +500,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     "offsetBottom",
     controlVisibilityConfig.offsetBottom(interactionValues)
   );
+  const EasingControl = useControlComponent("easing");
   const resolveDirection = (hasDirection, newEffect, newDirection) => {
     if (newEffect === "slide" && !newDirection) {
       return "top";
@@ -480,7 +512,6 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   };
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection("direction" in updates, updates.effect, updates.direction);
-    const newReplay = updates.replay !== void 0 ? updates.replay : replay;
     const updatedInteraction = {
       ...interaction,
       interaction_id: interaction.interaction_id,
@@ -491,7 +522,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         direction: resolvedDirectionValue,
         duration: updates.duration ?? duration,
         delay: updates.delay ?? delay,
-        replay: newReplay,
+        replay: updates.replay ?? replay,
+        easing: updates.easing ?? easing,
         relativeTo: updates.relativeTo ?? relativeTo,
         offsetTop: updates.offsetTop ?? offsetTop,
         offsetBottom: updates.offsetBottom ?? offsetBottom
@@ -503,68 +535,79 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React8.createElement(import_editor_controls3.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React8.createElement(import_ui4.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Trigger", "elementor") }, /* @__PURE__ */ React8.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Replay", "elementor") }, /* @__PURE__ */ React8.createElement(
+  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(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
       disabled: true
     }
-  ))), /* @__PURE__ */ React8.createElement(import_ui4.Divider, null), /* @__PURE__ */ React8.createElement(import_ui4.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Effect", "elementor") }, /* @__PURE__ */ React8.createElement(Effect, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Type", "elementor") }, /* @__PURE__ */ React8.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) })), /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Direction", "elementor") }, /* @__PURE__ */ React8.createElement(
+  ))), /* @__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(
     Direction,
     {
       value: direction,
       onChange: (v) => updateInteraction({ direction: v }),
       interactionType: type
     }
-  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Duration", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Duration", "elementor") }, /* @__PURE__ */ React8.createElement(
     TimeFrameIndicator,
     {
       value: String(duration),
-      onChange: (v) => updateInteraction({ duration: parseInt(v, 10) })
+      onChange: (v) => updateInteraction({ duration: parseInt(v, 10) }),
+      defaultValue: DEFAULT_VALUES.duration
     }
-  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Delay", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Delay", "elementor") }, /* @__PURE__ */ React8.createElement(
     TimeFrameIndicator,
     {
       value: String(delay),
-      onChange: (v) => updateInteraction({ delay: parseInt(v, 10) })
+      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_ui4.Divider, null), /* @__PURE__ */ React8.createElement(import_ui4.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Relative To", "elementor") }, /* @__PURE__ */ React8.createElement(
+  ))), 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(
     RelativeToControl,
     {
       value: relativeTo,
       onChange: (v) => updateInteraction({ relativeTo: v })
     }
-  )), OffsetTopControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Offset Top", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), OffsetTopControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Offset Top", "elementor") }, /* @__PURE__ */ React8.createElement(
     OffsetTopControl,
     {
       value: String(offsetTop),
       onChange: (v) => updateInteraction({ offsetTop: parseInt(v, 10) })
     }
-  )), OffsetBottomControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n6.__)("Offset Bottom", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), OffsetBottomControl && /* @__PURE__ */ React8.createElement(Field, { label: (0, import_i18n5.__)("Offset Bottom", "elementor") }, /* @__PURE__ */ React8.createElement(
     OffsetBottomControl,
     {
       value: String(offsetBottom),
       onChange: (v) => updateInteraction({ offsetBottom: parseInt(v, 10) })
     }
-  ))), /* @__PURE__ */ React8.createElement(import_ui4.Divider, null)));
+  ))), /* @__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(
+    EasingControl,
+    {
+      value: easing,
+      onChange: (v) => {
+        updateInteraction({ easing: v });
+      }
+    }
+  ))));
 };
 function Field({ label, children }) {
-  return /* @__PURE__ */ React8.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_editor_controls3.PopoverGridContainer, null, /* @__PURE__ */ React8.createElement(import_ui4.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(import_editor_controls3.ControlFormLabel, null, label)), /* @__PURE__ */ React8.createElement(import_ui4.Grid, { item: true, xs: 6 }, 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)));
 }
 
 // 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_react5.useRef)(false);
-  const handleUpdateInteractions = (0, import_react5.useCallback)(
+  const hasInitializedRef = (0, import_react6.useRef)(false);
+  const handleUpdateInteractions = (0, import_react6.useCallback)(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
     },
     [onSelectInteractions]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (triggerCreateOnShowEmpty && !hasInitializedRef.current && (!interactions.items || interactions.items?.length === 0)) {
       hasInitializedRef.current = true;
       const newState = {
@@ -574,14 +617,14 @@ function InteractionsList(props) {
       handleUpdateInteractions(newState);
     }
   }, [triggerCreateOnShowEmpty, interactions.items, handleUpdateInteractions]);
-  const isMaxNumberOfInteractionsReached = (0, import_react5.useMemo)(() => {
+  const isMaxNumberOfInteractionsReached = (0, import_react6.useMemo)(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React9.createElement(import_ui5.Alert, { color: "secondary", icon: /* @__PURE__ */ React9.createElement(import_icons3.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React9.createElement(import_ui5.AlertTitle, null, (0, import_i18n7.__)("Interactions", "elementor")), /* @__PURE__ */ React9.createElement(import_ui5.Box, { component: "span" }, (0, import_i18n7.__)(
+  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.__)(
     "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_react5.useCallback)(
+  const handleRepeaterChange = (0, import_react6.useCallback)(
     (newItems) => {
       handleUpdateInteractions({
         ...interactions,
@@ -590,7 +633,7 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const handleInteractionChange = (0, import_react5.useCallback)(
+  const handleInteractionChange = (0, import_react6.useCallback)(
     (index, newInteractionValue) => {
       const newItems = structuredClone(interactions.items);
       newItems[index] = {
@@ -604,12 +647,19 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  return /* @__PURE__ */ React9.createElement(
-    import_editor_controls4.Repeater,
+  const contextValue = (0, import_react6.useMemo)(
+    () => ({
+      onInteractionChange: handleInteractionChange,
+      onPlayInteraction
+    }),
+    [handleInteractionChange, onPlayInteraction]
+  );
+  return /* @__PURE__ */ React9.createElement(InteractionItemContext.Provider, { value: contextValue }, /* @__PURE__ */ React9.createElement(
+    import_editor_controls5.Repeater,
     {
       openOnAdd: true,
       openItem: triggerCreateOnShowEmpty ? 0 : void 0,
-      label: (0, import_i18n7.__)("Interactions", "elementor"),
+      label: (0, import_i18n6.__)("Interactions", "elementor"),
       values: interactions.items,
       setValues: handleRepeaterChange,
       showDuplicate: false,
@@ -621,21 +671,11 @@ function InteractionsList(props) {
         initialValues: createDefaultInteractionItem(),
         Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
-        Content: ({ index, value }) => /* @__PURE__ */ React9.createElement(
-          InteractionDetails,
-          {
-            key: index,
-            interaction: value.value,
-            onChange: (newInteractionValue) => {
-              handleInteractionChange(index, newInteractionValue);
-            },
-            onPlayInteraction
-          }
-        ),
-        actions: (value) => /* @__PURE__ */ React9.createElement(import_ui5.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n7.__)("Preview", "elementor") }, /* @__PURE__ */ React9.createElement(
-          import_ui5.IconButton,
+        Content,
+        actions: (value) => /* @__PURE__ */ React9.createElement(import_ui4.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n6.__)("Preview", "elementor") }, /* @__PURE__ */ React9.createElement(
+          import_ui4.IconButton,
           {
-            "aria-label": (0, import_i18n7.__)("Play interaction", "elementor"),
+            "aria-label": (0, import_i18n6.__)("Play interaction", "elementor"),
             size: "tiny",
             onClick: () => onPlayInteraction(extractString(value.value.interaction_id))
           },
@@ -643,8 +683,32 @@ function InteractionsList(props) {
         ))
       }
     }
-  );
+  ));
 }
+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 }) => {
@@ -652,7 +716,7 @@ var InteractionsTab = ({ elementId }) => {
 };
 function InteractionsTabContent({ elementId }) {
   const existingInteractions = (0, import_editor_elements2.useElementInteractions)(elementId);
-  const firstInteractionState = (0, import_react6.useState)(false);
+  const firstInteractionState = (0, import_react7.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(
     EmptyState,
@@ -667,7 +731,7 @@ function InteractionsContent({
   firstInteractionState
 }) {
   const { interactions, setInteractions, playInteractions } = useInteractionsContext();
-  const applyInteraction = (0, import_react6.useCallback)(
+  const applyInteraction = (0, import_react7.useCallback)(
     (newInteractions) => {
       firstInteractionState[1](false);
       if (!newInteractions) {
@@ -678,7 +742,7 @@ function InteractionsContent({
     },
     [setInteractions, firstInteractionState]
   );
-  return /* @__PURE__ */ React10.createElement(import_ui6.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(import_ui5.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React10.createElement(
     InteractionsList,
     {
       triggerCreateOnShowEmpty: firstInteractionState[0],
@@ -803,8 +867,35 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   }
 });
 
-// src/components/controls/trigger.tsx
+// src/components/controls/easing.tsx
 var React11 = __toESM(require("react"));
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_ui6 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+var EASING_OPTIONS = {
+  easeIn: (0, import_i18n7.__)("Ease In", "elementor"),
+  easeInOut: (0, import_i18n7.__)("Ease In Out", "elementor"),
+  easeOut: (0, import_i18n7.__)("Ease Out", "elementor"),
+  backIn: (0, import_i18n7.__)("Back In", "elementor"),
+  backInOut: (0, import_i18n7.__)("Back In Out", "elementor"),
+  backOut: (0, import_i18n7.__)("Back Out", "elementor"),
+  linear: (0, import_i18n7.__)("Linear", "elementor")
+};
+var DEFAULT_EASING = "easeIn";
+function Easing({}) {
+  const availableOptions = Object.entries(EASING_OPTIONS).map(([key, label]) => ({
+    key,
+    label
+  }));
+  return /* @__PURE__ */ React11.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);
+  }));
+}
+
+// src/components/controls/trigger.tsx
+var React12 = __toESM(require("react"));
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_ui7 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
@@ -816,7 +907,7 @@ function Trigger({ value, onChange }) {
     key,
     label
   }));
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     import_ui7.Select,
     {
       fullWidth: true,
@@ -826,7 +917,7 @@ function Trigger({ value, onChange }) {
       value
     },
     availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React11.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
+      return /* @__PURE__ */ React12.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   );
 }
@@ -879,6 +970,11 @@ function init() {
       component: Trigger,
       options: ["load", "scrollIn"]
     });
+    registerInteractionsControl({
+      type: "easing",
+      component: Easing,
+      options: ["easeIn"]
+    });
   } catch (error) {
     throw error;
   }