@elementor/editor-interactions 3.35.0-361 → 3.35.0-362

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ElementInteractions } from '@elementor/editor-elements';
+import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
+export { AnimationPresetPropValue, ElementInteractions, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
 
 declare const EmptyState: ({ onCreateInteraction }: {
     onCreateInteraction: () => void;
@@ -32,25 +33,26 @@ type FieldProps = {
 type DirectionFieldProps = FieldProps & {
     interactionType: string;
 };
-type InteractionItem = {
+type ElementInteractionData = {
     elementId: string;
     dataId: string;
     interactions: ElementInteractions;
 };
-type InteractionsCollection = InteractionItem[];
+type InteractionsCollection = ElementInteractionData[];
 type InteractionsProvider = {
     getKey: () => string;
     priority: number;
     subscribe: (callback: () => void) => () => void;
     actions: {
-        all: () => InteractionItem[];
+        all: () => ElementInteractionData[];
     };
 };
+type InteractionItemValue = InteractionItemPropValue['value'];
 
 declare function getInteractionsConfig(): InteractionsConfig;
 
 declare const interactionsRepository: {
-    all: () => InteractionItem[];
+    all: () => ElementInteractionData[];
     register: (provider: InteractionsProvider) => void;
     subscribe: (cb: () => void) => () => void;
     getProviders: () => InteractionsProvider[];
@@ -71,4 +73,4 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
 
 declare function init(): void;
 
-export { type AnimationOption, type CreateInteractionsProviderOptions, type DirectionFieldProps, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, type InteractionConstants, type InteractionItem, type InteractionsCollection, type InteractionsConfig, type InteractionsProvider, InteractionsTab, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository };
+export { type AnimationOption, type CreateInteractionsProviderOptions, type DirectionFieldProps, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, type ElementInteractionData, EmptyState, type FieldProps, type InteractionConstants, type InteractionItemValue, type InteractionsCollection, type InteractionsConfig, type InteractionsProvider, InteractionsTab, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ElementInteractions } from '@elementor/editor-elements';
+import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
+export { AnimationPresetPropValue, ElementInteractions, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
 
 declare const EmptyState: ({ onCreateInteraction }: {
     onCreateInteraction: () => void;
@@ -32,25 +33,26 @@ type FieldProps = {
 type DirectionFieldProps = FieldProps & {
     interactionType: string;
 };
-type InteractionItem = {
+type ElementInteractionData = {
     elementId: string;
     dataId: string;
     interactions: ElementInteractions;
 };
-type InteractionsCollection = InteractionItem[];
+type InteractionsCollection = ElementInteractionData[];
 type InteractionsProvider = {
     getKey: () => string;
     priority: number;
     subscribe: (callback: () => void) => () => void;
     actions: {
-        all: () => InteractionItem[];
+        all: () => ElementInteractionData[];
     };
 };
+type InteractionItemValue = InteractionItemPropValue['value'];
 
 declare function getInteractionsConfig(): InteractionsConfig;
 
 declare const interactionsRepository: {
-    all: () => InteractionItem[];
+    all: () => ElementInteractionData[];
     register: (provider: InteractionsProvider) => void;
     subscribe: (cb: () => void) => () => void;
     getProviders: () => InteractionsProvider[];
@@ -71,4 +73,4 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
 
 declare function init(): void;
 
-export { type AnimationOption, type CreateInteractionsProviderOptions, type DirectionFieldProps, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, type InteractionConstants, type InteractionItem, type InteractionsCollection, type InteractionsConfig, type InteractionsProvider, InteractionsTab, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository };
+export { type AnimationOption, type CreateInteractionsProviderOptions, type DirectionFieldProps, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, type ElementInteractionData, EmptyState, type FieldProps, type InteractionConstants, type InteractionItemValue, type InteractionsCollection, type InteractionsConfig, type InteractionsProvider, InteractionsTab, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository };

package/dist/index.js

@@ -78,11 +78,16 @@ var React2 = __toESM(require("react"));
 var import_react = require("react");
 var import_editor_elements = require("@elementor/editor-elements");
 var InteractionsContext = (0, import_react.createContext)(null);
+var DEFAULT_INTERACTIONS = {
+  version: 1,
+  items: []
+};
 var InteractionsProvider = ({ children, elementId }) => {
-  const interactions = (0, import_editor_elements.useElementInteractions)(elementId);
+  const rawInteractions = (0, import_editor_elements.useElementInteractions)(elementId);
   (0, import_react.useEffect)(() => {
     window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"));
   }, []);
+  const interactions = rawInteractions ?? DEFAULT_INTERACTIONS;
   const setInteractions = (value) => {
     (0, import_editor_elements.updateElementInteractions)({
       elementId,
@@ -130,20 +135,74 @@ var import_icons3 = require("@elementor/icons");
 var import_ui8 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 
-// src/utils/get-interactions-config.ts
-var DEFAULT_CONFIG = {
-  constants: {
-    defaultDuration: 300,
-    defaultDelay: 0,
-    slideDistance: 100,
-    scaleStart: 0.5,
-    easing: "linear"
-  },
-  animationOptions: []
+// src/utils/prop-value-utils.ts
+var createString = (value) => ({
+  $$type: "string",
+  value
+});
+var createNumber = (value) => ({
+  $$type: "number",
+  value
+});
+var createTimingConfig = (duration, delay) => ({
+  $$type: "timing-config",
+  value: {
+    duration: createNumber(duration),
+    delay: createNumber(delay)
+  }
+});
+var createAnimationPreset = (effect, type, direction, duration, delay) => ({
+  $$type: "animation-preset-props",
+  value: {
+    effect: createString(effect),
+    type: createString(type),
+    direction: createString(direction),
+    timing_config: createTimingConfig(duration, delay)
+  }
+});
+var createInteractionItem = (trigger, effect, type, direction, duration, delay, interactionId) => ({
+  $$type: "interaction-item",
+  value: {
+    ...interactionId && { interaction_id: createString(interactionId) },
+    trigger: createString(trigger),
+    animation: createAnimationPreset(effect, type, direction, duration, delay)
+  }
+});
+var createDefaultInteractionItem = () => {
+  return createInteractionItem("load", "fade", "in", "", 300, 0);
+};
+var extractString = (prop, fallback = "") => {
+  return prop?.value ?? fallback;
+};
+var extractNumber = (prop, fallback = 0) => {
+  return prop?.value ?? fallback;
+};
+var buildAnimationIdString = (item) => {
+  const trigger = extractString(item.trigger);
+  const effect = extractString(item.animation.value.effect);
+  const type = extractString(item.animation.value.type);
+  const direction = extractString(item.animation.value.direction);
+  const duration = extractNumber(item.animation.value.timing_config.value.duration);
+  const delay = extractNumber(item.animation.value.timing_config.value.delay);
+  return [trigger, effect, type, direction, duration, delay].join("-");
+};
+var TRIGGER_LABELS = {
+  load: "On page load",
+  scrollIn: "Scroll into view",
+  scrollOut: "Scroll out of view"
+};
+var capitalize = (str) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+var buildDisplayLabel = (item) => {
+  const trigger = extractString(item.trigger);
+  const effect = extractString(item.animation.value.effect);
+  const type = extractString(item.animation.value.type);
+  const triggerLabel = TRIGGER_LABELS[trigger] || capitalize(trigger);
+  const effectLabel = capitalize(effect);
+  const typeLabel = capitalize(type);
+  return `${triggerLabel}: ${effectLabel} ${typeLabel}`;
 };
-function getInteractionsConfig() {
-  return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
-}
 
 // src/components/interaction-details.tsx
 var React9 = __toESM(require("react"));
@@ -300,72 +359,57 @@ function Trigger({ value, onChange }) {
 }
 
 // src/components/interaction-details.tsx
-var DELIMITER = "-";
-var DEFAULT_INTERACTION = "load-fade-in--300-0";
-var getDefaultInteractionDetails = () => {
-  const [trigger, effect, type, direction, duration, delay] = DEFAULT_INTERACTION.split(DELIMITER);
-  return {
-    trigger,
-    effect,
-    type,
-    direction,
-    duration,
-    delay
-  };
-};
-var buildInteractionDetails = (interaction) => {
-  const [trigger, effect, type, direction, duration, delay] = interaction.split(DELIMITER);
-  const defaultInteractionDetails = getDefaultInteractionDetails();
-  const parsedDirection = direction || defaultInteractionDetails.direction;
-  const shouldAutoSelectDirection = effect === "slide" && !parsedDirection;
-  return {
-    trigger: trigger || defaultInteractionDetails.trigger,
-    effect: effect || defaultInteractionDetails.effect,
-    type: type || defaultInteractionDetails.type,
-    direction: shouldAutoSelectDirection ? "top" : parsedDirection,
-    duration: duration || defaultInteractionDetails.duration,
-    delay: delay || defaultInteractionDetails.delay
-  };
+var DEFAULT_VALUES = {
+  trigger: "load",
+  effect: "fade",
+  type: "in",
+  direction: "",
+  duration: 300,
+  delay: 0
 };
 var InteractionDetails = ({ interaction, onChange }) => {
-  const interactionDetails = React9.useMemo(() => {
-    return buildInteractionDetails(interaction);
-  }, [interaction]);
-  const handleChange = (key, value) => {
-    if (value === null) {
-      value = getDefaultInteractionDetails()[key];
-    }
-    const newInteractionDetails = { ...interactionDetails, [key]: value };
-    if (key === "effect" && value === "slide") {
-      const currentDirection = newInteractionDetails.direction;
-      if (!currentDirection || currentDirection === "") {
-        newInteractionDetails.direction = "top";
-      }
-    }
-    onChange(Object.values(newInteractionDetails).join(DELIMITER));
+  const trigger = extractString(interaction.trigger, DEFAULT_VALUES.trigger);
+  const effect = extractString(interaction.animation.value.effect, DEFAULT_VALUES.effect);
+  const type = extractString(interaction.animation.value.type, DEFAULT_VALUES.type);
+  const direction = extractString(interaction.animation.value.direction, DEFAULT_VALUES.direction);
+  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 effectiveDirection = effect === "slide" && !direction ? "top" : direction;
+  const updateInteraction = (updates) => {
+    const newEffect = updates.effect ?? effect;
+    const newDirection = updates.direction ?? direction;
+    const resolvedDirection = newEffect === "slide" && !newDirection ? "top" : newDirection;
+    onChange({
+      ...interaction,
+      trigger: createString(updates.trigger ?? trigger),
+      animation: createAnimationPreset(
+        newEffect,
+        updates.type ?? type,
+        resolvedDirection,
+        updates.duration ?? duration,
+        updates.delay ?? delay
+      )
+    });
   };
-  return /* @__PURE__ */ React9.createElement(import_editor_controls6.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui7.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React9.createElement(import_ui7.Divider, { sx: { mx: 1.5 } }), /* @__PURE__ */ React9.createElement(import_ui7.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Effect, { value: interactionDetails.effect, onChange: (v) => handleChange("effect", v) }), /* @__PURE__ */ React9.createElement(EffectType, { value: interactionDetails.type, onChange: (v) => handleChange("type", v) }), /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement(import_editor_controls6.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui7.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Trigger, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), /* @__PURE__ */ React9.createElement(import_ui7.Divider, { sx: { mx: 1.5 } }), /* @__PURE__ */ React9.createElement(import_ui7.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Effect, { value: effect, onChange: (v) => updateInteraction({ effect: v }) }), /* @__PURE__ */ React9.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) }), /* @__PURE__ */ React9.createElement(
     Direction,
     {
-      value: interactionDetails.effect === "slide" && !interactionDetails.direction ? "top" : interactionDetails.direction,
-      onChange: (v) => {
-        const directionValue = interactionDetails.effect === "slide" && (!v || v === "") ? "top" : v;
-        handleChange("direction", directionValue);
-      },
-      interactionType: interactionDetails.type
+      value: effectiveDirection,
+      onChange: (v) => updateInteraction({ direction: v }),
+      interactionType: type
     }
   ), /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
-      value: interactionDetails.duration,
-      onChange: (v) => handleChange("duration", v),
+      value: String(duration),
+      onChange: (v) => updateInteraction({ duration: parseInt(v, 10) }),
       label: (0, import_i18n7.__)("Duration", "elementor")
     }
   ), /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
-      value: interactionDetails.delay,
-      onChange: (v) => handleChange("delay", v),
+      value: String(delay),
+      onChange: (v) => updateInteraction({ delay: parseInt(v, 10) }),
       label: (0, import_i18n7.__)("Delay", "elementor")
     }
   )));
@@ -387,24 +431,9 @@ function InteractionsList(props) {
   if (triggerCreateOnShowEmpty && (!interactionsState.items || interactionsState.items?.length === 0)) {
     setInteractionsState({
       version: 1,
-      items: [
-        {
-          animation: {
-            animation_id: DEFAULT_INTERACTION,
-            animation_type: "full-preset"
-          }
-        }
-      ]
+      items: [createDefaultInteractionItem()]
     });
   }
-  const displayLabel = (interactionForDisplay) => {
-    if (!interactionForDisplay) {
-      return "";
-    }
-    const animationOptions = getInteractionsConfig()?.animationOptions;
-    const option = animationOptions.find((opt) => opt.value === interactionForDisplay);
-    return option?.label || interactionForDisplay;
-  };
   const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(import_ui8.Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(import_icons3.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(import_ui8.AlertTitle, null, (0, import_i18n8.__)("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(import_ui8.Box, { component: "span" }, (0, import_i18n8.__)(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
@@ -428,32 +457,21 @@ function InteractionsList(props) {
       disableAddItemButton: isMaxNumberOfInteractionsReached,
       addButtonInfotipContent: infotipContent,
       itemSettings: {
-        initialValues: {
-          animation: {
-            animation_id: DEFAULT_INTERACTION,
-            animation_type: "full-preset"
-          }
-        },
-        Label: ({ value }) => displayLabel(value.animation.animation_id),
+        initialValues: createDefaultInteractionItem(),
+        Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
         Content: ({ index, value }) => /* @__PURE__ */ React10.createElement(
           InteractionDetails,
           {
             key: index,
-            interaction: value.animation.animation_id,
-            onChange: (newValue) => {
-              const newInteractions = {
-                ...interactionsState,
-                items: structuredClone(interactionsState.items)
-              };
-              newInteractions.items[index] = {
-                ...newInteractions.items[index],
-                animation: {
-                  ...newInteractions.items[index].animation,
-                  animation_id: newValue
-                }
+            interaction: value.value,
+            onChange: (newInteractionValue) => {
+              const newItems = structuredClone(interactionsState.items);
+              newItems[index] = {
+                $$type: "interaction-item",
+                value: newInteractionValue
               };
-              setInteractionsState({ ...interactionsState, items: newInteractions.items });
+              setInteractionsState({ ...interactionsState, items: newItems });
             }
           }
         ),
@@ -462,7 +480,7 @@ function InteractionsList(props) {
           {
             "aria-label": (0, import_i18n8.__)("Play interaction", "elementor"),
             size: "tiny",
-            onClick: () => onPlayInteraction(value.animation.animation_id)
+            onClick: () => onPlayInteraction(buildAnimationIdString(value.value))
           },
           /* @__PURE__ */ React10.createElement(import_icons3.PlayerPlayIcon, { fontSize: "tiny" })
         ))
@@ -514,6 +532,21 @@ function InteractionsContent({
   ));
 }
 
+// src/utils/get-interactions-config.ts
+var DEFAULT_CONFIG = {
+  constants: {
+    defaultDuration: 300,
+    defaultDelay: 0,
+    slideDistance: 100,
+    scaleStart: 0.5,
+    easing: "linear"
+  },
+  animationOptions: []
+};
+function getInteractionsConfig() {
+  return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
+}
+
 // src/utils/create-interactions-repository.ts
 var createInteractionsRepository = () => {
   const providers = [];
@@ -648,8 +681,8 @@ function cleanInteractionIds(elementId) {
   }
   const updatedInteractions = structuredClone(interactions);
   updatedInteractions?.items?.forEach((interaction) => {
-    if (interaction.interaction_id) {
-      delete interaction.interaction_id;
+    if (interaction.$$type === "interaction-item" && interaction.value?.interaction_id) {
+      delete interaction.value.interaction_id;
     }
   });
   container.model.set("interactions", updatedInteractions);