@elementor/editor-interactions 4.1.0-714 → 4.1.0-715

package/dist/index.d.mts

@@ -137,6 +137,15 @@ declare const EFFECT_OPTIONS: {
 };
 declare const BASE_EFFECTS: string[];
 
+declare const REPEAT_OPTIONS: {
+    times: string;
+    loop: string;
+};
+declare const REPEAT_TOOLTIPS: {
+    times: string;
+    loop: string;
+};
+
 type PlainKeyframeValue = {
     opacity?: number;
     scale?: {
@@ -236,4 +245,4 @@ declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
 
 declare const useElementInteractions: (elementId: ElementID) => ElementInteractions;
 
-export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, extractBoolean, extractExcludedBreakpoints, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection, useElementInteractions };
+export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPEAT_OPTIONS, REPEAT_TOOLTIPS, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, extractBoolean, extractExcludedBreakpoints, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection, useElementInteractions };

package/dist/index.d.ts

@@ -137,6 +137,15 @@ declare const EFFECT_OPTIONS: {
 };
 declare const BASE_EFFECTS: string[];
 
+declare const REPEAT_OPTIONS: {
+    times: string;
+    loop: string;
+};
+declare const REPEAT_TOOLTIPS: {
+    times: string;
+    loop: string;
+};
+
 type PlainKeyframeValue = {
     opacity?: number;
     scale?: {
@@ -236,4 +245,4 @@ declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
 
 declare const useElementInteractions: (elementId: ElementID) => ElementInteractions;
 
-export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, extractBoolean, extractExcludedBreakpoints, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection, useElementInteractions };
+export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPEAT_OPTIONS, REPEAT_TOOLTIPS, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, extractBoolean, extractExcludedBreakpoints, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection, useElementInteractions };

package/dist/index.js

@@ -39,6 +39,8 @@ __export(index_exports, {
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX: () => ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState: () => EmptyState,
   InteractionsTab: () => InteractionsTab,
+  REPEAT_OPTIONS: () => REPEAT_OPTIONS,
+  REPEAT_TOOLTIPS: () => REPEAT_TOOLTIPS,
   REPLAY_OPTIONS: () => REPLAY_OPTIONS,
   TRIGGER_OPTIONS: () => TRIGGER_OPTIONS,
   buildDisplayLabel: () => buildDisplayLabel,
@@ -864,7 +866,6 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     controlVisibilityConfig.times(interactionValues)
   );
   const EasingControl = useControlComponent("easing");
-  const containerRef = (0, import_react6.useRef)(null);
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection(
       "direction" in updates,
@@ -899,19 +900,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React7.createElement(import_ui3.Box, { ref: containerRef }, /* @__PURE__ */ React7.createElement(import_editor_controls3.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(
-    TriggerControl,
-    {
-      value: trigger,
-      onChange: (v) => updateInteraction({ trigger: v })
-    }
-  )), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_editor_controls3.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
-      disabled: true,
-      anchorRef: containerRef
+      disabled: true
     }
   ))), /* @__PURE__ */ React7.createElement(import_ui3.Divider, null), /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Effect", "elementor") }, /* @__PURE__ */ React7.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), CustomEffectControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Custom Effect", "elementor") }, /* @__PURE__ */ React7.createElement(
     CustomEffectControl,
@@ -974,7 +968,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         updateInteraction({ easing: v });
       }
     }
-  )))));
+  ))));
 };
 
 // src/components/interaction-settings.tsx
@@ -1573,7 +1567,6 @@ var InteractionsPromotionChip = (0, import_react12.forwardRef)(
     );
   }
 );
-InteractionsPromotionChip.displayName = "InteractionsPromotionChip";
 
 // src/ui/promotion-select.tsx
 function PromotionSelect({
@@ -1721,58 +1714,128 @@ function EffectType({ value, onChange }) {
   return /* @__PURE__ */ React17.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
-// src/components/controls/replay.tsx
-var React18 = __toESM(require("react"));
+// src/components/controls/repeat.tsx
+var React19 = __toESM(require("react"));
+var import_react15 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_icons4 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
-var TRACKING_DATA3 = { target_name: "interactions_replay", location_l2: "interactions" };
+
+// src/ui/promotion-overlay-layout.tsx
+var React18 = __toESM(require("react"));
+var import_react14 = require("react");
+var import_ui11 = require("@elementor/ui");
+var OVERLAY_GRID = "1 / 1";
+var CHIP_OFFSET = "50%";
+var PromotionOverlayLayout = (0, import_react14.forwardRef)(
+  ({ children, promotionChip }, ref) => /* @__PURE__ */ React18.createElement(import_ui11.Box, { ref, sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID } }, children), /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, promotionChip))
+);
+
+// src/components/controls/repeat.tsx
+var TRACKING_DATA3 = { target_name: "interactions_repeat", location_l2: "interactions" };
+var REPEAT_OPTIONS = {
+  times: (0, import_i18n13.__)("times", "elementor"),
+  loop: (0, import_i18n13.__)("loop", "elementor")
+};
+var REPEAT_TOOLTIPS = {
+  times: (0, import_i18n13.__)("Enable number", "elementor"),
+  loop: (0, import_i18n13.__)("Infinite repeat", "elementor")
+};
+function Repeat() {
+  const repeatContainerRef = (0, import_react15.useRef)(null);
+  const options = [
+    {
+      value: REPEAT_OPTIONS.times,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.times,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(import_icons4.Number123Icon, { fontSize: size }),
+      showTooltip: true
+    },
+    {
+      value: REPEAT_OPTIONS.loop,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.loop,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(import_icons4.RepeatIcon, { fontSize: size }),
+      showTooltip: true
+    }
+  ];
+  return /* @__PURE__ */ React19.createElement(
+    PromotionOverlayLayout,
+    {
+      ref: repeatContainerRef,
+      promotionChip: /* @__PURE__ */ React19.createElement(
+        InteractionsPromotionChip,
+        {
+          content: (0, import_i18n13.__)("Upgrade to control how many times the animation repeats.", "elementor"),
+          upgradeUrl: "https://go.elementor.com/go-pro-interactions-repeat-modal/",
+          anchorRef: repeatContainerRef,
+          trackingData: TRACKING_DATA3
+        }
+      )
+    },
+    /* @__PURE__ */ React19.createElement(import_editor_controls9.ToggleButtonGroupUi, { items: options, exclusive: true, onChange: () => {
+    }, value: "" })
+  );
+}
+
+// src/components/controls/replay.tsx
+var React20 = __toESM(require("react"));
+var import_react16 = require("react");
+var import_editor_controls10 = require("@elementor/editor-controls");
+var import_icons5 = require("@elementor/icons");
+var import_i18n14 = require("@wordpress/i18n");
+var TRACKING_DATA4 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
-  no: (0, import_i18n13.__)("No", "elementor"),
-  yes: (0, import_i18n13.__)("Yes", "elementor")
+  no: (0, import_i18n14.__)("No", "elementor"),
+  yes: (0, import_i18n14.__)("Yes", "elementor")
 };
 var BASE_REPLAY = ["no"];
-var OVERLAY_GRID = "1 / 1";
-var CHIP_OFFSET = "50%";
-function Replay({ onChange, anchorRef }) {
+function Replay({ onChange }) {
+  const replayContainerRef = (0, import_react16.useRef)(null);
   const options = [
     {
       value: false,
       disabled: false,
       label: REPLAY_OPTIONS.no,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(import_icons4.MinusIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(import_icons5.MinusIcon, { fontSize: size }),
       showTooltip: true
     },
     {
       value: true,
       disabled: true,
       label: REPLAY_OPTIONS.yes,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(import_icons4.CheckIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(import_icons5.CheckIcon, { fontSize: size }),
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(import_editor_controls9.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
-    InteractionsPromotionChip,
+  return /* @__PURE__ */ React20.createElement(
+    PromotionOverlayLayout,
     {
-      content: (0, import_i18n13.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
-      anchorRef,
-      trackingData: TRACKING_DATA3
-    }
-  )));
+      ref: replayContainerRef,
+      promotionChip: /* @__PURE__ */ React20.createElement(
+        InteractionsPromotionChip,
+        {
+          content: (0, import_i18n14.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
+          upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
+          anchorRef: replayContainerRef,
+          trackingData: TRACKING_DATA4
+        }
+      )
+    },
+    /* @__PURE__ */ React20.createElement(import_editor_controls10.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })
+  );
 }
 
 // src/components/controls/trigger.tsx
-var React19 = __toESM(require("react"));
-var import_i18n14 = require("@wordpress/i18n");
-var TRACKING_DATA4 = { target_name: "interactions_trigger", location_l2: "interactions" };
+var React21 = __toESM(require("react"));
+var import_i18n15 = require("@wordpress/i18n");
+var TRACKING_DATA5 = { target_name: "interactions_trigger", location_l2: "interactions" };
 var TRIGGER_OPTIONS = {
-  load: (0, import_i18n14.__)("Page load", "elementor"),
-  scrollIn: (0, import_i18n14.__)("Scroll into view", "elementor"),
-  scrollOn: (0, import_i18n14.__)("While scrolling", "elementor"),
-  hover: (0, import_i18n14.__)("On hover", "elementor"),
-  click: (0, import_i18n14.__)("On click", "elementor")
+  load: (0, import_i18n15.__)("Page load", "elementor"),
+  scrollIn: (0, import_i18n15.__)("Scroll into view", "elementor"),
+  scrollOn: (0, import_i18n15.__)("While scrolling", "elementor"),
+  hover: (0, import_i18n15.__)("On hover", "elementor"),
+  click: (0, import_i18n15.__)("On click", "elementor")
 };
 var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
@@ -1782,17 +1845,17 @@ function Trigger({ value, onChange }) {
   const disabledOptions = Object.fromEntries(
     Object.entries(TRIGGER_OPTIONS).filter(([key]) => !BASE_TRIGGERS.includes(key))
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React21.createElement(
     PromotionSelect,
     {
       value: value in baseOptions ? value : DEFAULT_VALUES.trigger,
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: (0, import_i18n14.__)("PRO triggers", "elementor"),
-      promotionContent: (0, import_i18n14.__)("Upgrade to unlock more interactions triggers.", "elementor"),
+      promotionLabel: (0, import_i18n15.__)("PRO triggers", "elementor"),
+      promotionContent: (0, import_i18n15.__)("Upgrade to unlock more interactions triggers.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/",
-      trackingData: TRACKING_DATA4
+      trackingData: TRACKING_DATA5
     }
   );
 }
@@ -2172,6 +2235,10 @@ function init() {
       component: Effect,
       options: ["fade", "slide", "scale"]
     });
+    registerInteractionsControl({
+      type: "repeat",
+      component: Repeat
+    });
     initMcpInteractions();
   } catch (error) {
     throw error;
@@ -2188,6 +2255,8 @@ function init() {
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState,
   InteractionsTab,
+  REPEAT_OPTIONS,
+  REPEAT_TOOLTIPS,
   REPLAY_OPTIONS,
   TRIGGER_OPTIONS,
   buildDisplayLabel,