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

package/dist/index.mjs

@@ -565,10 +565,10 @@ var trackInteractionCreated = (elementId, item) => {
 
 // src/components/interactions-list.tsx
 import * as React10 from "react";
-import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
 import { Repeater } from "@elementor/editor-controls";
 import { InfoCircleFilledIcon, PlayerPlayIcon } from "@elementor/icons";
-import { Alert, AlertTitle, Box as Box2, IconButton, Tooltip } from "@elementor/ui";
+import { Alert, AlertTitle, Box, IconButton, Tooltip } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 
 // src/contexts/interactions-item-context.tsx
@@ -597,9 +597,9 @@ import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/interaction-details.tsx
 import * as React7 from "react";
-import { useMemo, useRef as useRef2 } from "react";
+import { useMemo } from "react";
 import { PopoverContent } from "@elementor/editor-controls";
-import { Box, Divider, Grid as Grid2 } from "@elementor/ui";
+import { Divider, Grid as Grid2 } from "@elementor/ui";
 import { __ as __2 } from "@wordpress/i18n";
 
 // src/utils/resolve-direction.ts
@@ -793,7 +793,6 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     controlVisibilityConfig.times(interactionValues)
   );
   const EasingControl = useControlComponent("easing");
-  const containerRef = useRef2(null);
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection(
       "direction" in updates,
@@ -828,19 +827,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React7.createElement(Box, { ref: containerRef }, /* @__PURE__ */ React7.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(
-    TriggerControl,
-    {
-      value: trigger,
-      onChange: (v) => updateInteraction({ trigger: v })
-    }
-  )), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
-      disabled: true,
-      anchorRef: containerRef
+      disabled: true
     }
   ))), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Effect", "elementor") }, /* @__PURE__ */ React7.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), CustomEffectControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Custom Effect", "elementor") }, /* @__PURE__ */ React7.createElement(
     CustomEffectControl,
@@ -903,7 +895,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         updateInteraction({ easing: v });
       }
     }
-  )))));
+  ))));
 };
 
 // src/components/interaction-settings.tsx
@@ -1018,7 +1010,7 @@ var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
   const { elementId } = useInteractionsContext();
-  const hasInitializedRef = useRef3(false);
+  const hasInitializedRef = useRef2(false);
   const handleUpdateInteractions = useCallback5(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
@@ -1038,7 +1030,7 @@ function InteractionsList(props) {
   const isMaxNumberOfInteractionsReached = useMemo3(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(AlertTitle, null, __5("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(Box2, { component: "span" }, __5(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(AlertTitle, null, __5("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(Box, { component: "span" }, __5(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
@@ -1455,7 +1447,7 @@ import { __ as __10 } from "@wordpress/i18n";
 
 // src/ui/promotion-select.tsx
 import * as React14 from "react";
-import { useRef as useRef4 } from "react";
+import { useRef as useRef3 } from "react";
 import { MenuListItem } from "@elementor/editor-ui";
 import { MenuSubheader, Select } from "@elementor/ui";
 import { __ as __9 } from "@wordpress/i18n";
@@ -1465,7 +1457,7 @@ import * as React13 from "react";
 import { forwardRef, useCallback as useCallback7, useImperativeHandle, useState as useState5 } from "react";
 import { trackUpgradePromotionClick, trackViewPromotion } from "@elementor/editor-controls";
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
-import { Box as Box3 } from "@elementor/ui";
+import { Box as Box2 } from "@elementor/ui";
 import { __ as __8 } from "@wordpress/i18n";
 var InteractionsPromotionChip = forwardRef(
   ({ content, upgradeUrl, anchorRef, trackingData }, ref) => {
@@ -1501,7 +1493,7 @@ var InteractionsPromotionChip = forwardRef(
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React13.createElement(
-        Box3,
+        Box2,
         {
           onMouseDown: (e) => e.stopPropagation(),
           onClick: handleToggle,
@@ -1512,7 +1504,6 @@ var InteractionsPromotionChip = forwardRef(
     );
   }
 );
-InteractionsPromotionChip.displayName = "InteractionsPromotionChip";
 
 // src/ui/promotion-select.tsx
 function PromotionSelect({
@@ -1525,8 +1516,8 @@ function PromotionSelect({
   upgradeUrl,
   trackingData
 }) {
-  const promotionRef = useRef4(null);
-  const anchorRef = useRef4(null);
+  const promotionRef = useRef3(null);
+  const anchorRef = useRef3(null);
   return /* @__PURE__ */ React14.createElement(
     Select,
     {
@@ -1660,58 +1651,128 @@ function EffectType({ value, onChange }) {
   return /* @__PURE__ */ React17.createElement(ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
-// src/components/controls/replay.tsx
-import * as React18 from "react";
+// src/components/controls/repeat.tsx
+import * as React19 from "react";
+import { useRef as useRef4 } from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi2 } from "@elementor/editor-controls";
-import { CheckIcon, MinusIcon } from "@elementor/icons";
-import { Box as Box4 } from "@elementor/ui";
+import { Number123Icon, RepeatIcon } from "@elementor/icons";
 import { __ as __13 } from "@wordpress/i18n";
-var TRACKING_DATA3 = { target_name: "interactions_replay", location_l2: "interactions" };
+
+// src/ui/promotion-overlay-layout.tsx
+import * as React18 from "react";
+import { forwardRef as forwardRef2 } from "react";
+import { Box as Box3 } from "@elementor/ui";
+var OVERLAY_GRID = "1 / 1";
+var CHIP_OFFSET = "50%";
+var PromotionOverlayLayout = forwardRef2(
+  ({ children, promotionChip }, ref) => /* @__PURE__ */ React18.createElement(Box3, { ref, sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(Box3, { sx: { gridArea: OVERLAY_GRID } }, children), /* @__PURE__ */ React18.createElement(Box3, { 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: __13("times", "elementor"),
+  loop: __13("loop", "elementor")
+};
+var REPEAT_TOOLTIPS = {
+  times: __13("Enable number", "elementor"),
+  loop: __13("Infinite repeat", "elementor")
+};
+function Repeat() {
+  const repeatContainerRef = useRef4(null);
+  const options = [
+    {
+      value: REPEAT_OPTIONS.times,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.times,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(Number123Icon, { fontSize: size }),
+      showTooltip: true
+    },
+    {
+      value: REPEAT_OPTIONS.loop,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.loop,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(RepeatIcon, { fontSize: size }),
+      showTooltip: true
+    }
+  ];
+  return /* @__PURE__ */ React19.createElement(
+    PromotionOverlayLayout,
+    {
+      ref: repeatContainerRef,
+      promotionChip: /* @__PURE__ */ React19.createElement(
+        InteractionsPromotionChip,
+        {
+          content: __13("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(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange: () => {
+    }, value: "" })
+  );
+}
+
+// src/components/controls/replay.tsx
+import * as React20 from "react";
+import { useRef as useRef5 } from "react";
+import { ToggleButtonGroupUi as ToggleButtonGroupUi3 } from "@elementor/editor-controls";
+import { CheckIcon, MinusIcon } from "@elementor/icons";
+import { __ as __14 } from "@wordpress/i18n";
+var TRACKING_DATA4 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
-  no: __13("No", "elementor"),
-  yes: __13("Yes", "elementor")
+  no: __14("No", "elementor"),
+  yes: __14("Yes", "elementor")
 };
 var BASE_REPLAY = ["no"];
-var OVERLAY_GRID = "1 / 1";
-var CHIP_OFFSET = "50%";
-function Replay({ onChange, anchorRef }) {
+function Replay({ onChange }) {
+  const replayContainerRef = useRef5(null);
   const options = [
     {
       value: false,
       disabled: false,
       label: REPLAY_OPTIONS.no,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(MinusIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(MinusIcon, { fontSize: size }),
       showTooltip: true
     },
     {
       value: true,
       disabled: true,
       label: REPLAY_OPTIONS.yes,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(CheckIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(CheckIcon, { fontSize: size }),
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React18.createElement(Box4, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
-    InteractionsPromotionChip,
+  return /* @__PURE__ */ React20.createElement(
+    PromotionOverlayLayout,
     {
-      content: __13("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: __14("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(ToggleButtonGroupUi3, { items: options, exclusive: true, onChange, value: false })
+  );
 }
 
 // src/components/controls/trigger.tsx
-import * as React19 from "react";
-import { __ as __14 } from "@wordpress/i18n";
-var TRACKING_DATA4 = { target_name: "interactions_trigger", location_l2: "interactions" };
+import * as React21 from "react";
+import { __ as __15 } from "@wordpress/i18n";
+var TRACKING_DATA5 = { target_name: "interactions_trigger", location_l2: "interactions" };
 var TRIGGER_OPTIONS = {
-  load: __14("Page load", "elementor"),
-  scrollIn: __14("Scroll into view", "elementor"),
-  scrollOn: __14("While scrolling", "elementor"),
-  hover: __14("On hover", "elementor"),
-  click: __14("On click", "elementor")
+  load: __15("Page load", "elementor"),
+  scrollIn: __15("Scroll into view", "elementor"),
+  scrollOn: __15("While scrolling", "elementor"),
+  hover: __15("On hover", "elementor"),
+  click: __15("On click", "elementor")
 };
 var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
@@ -1721,17 +1782,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: __14("PRO triggers", "elementor"),
-      promotionContent: __14("Upgrade to unlock more interactions triggers.", "elementor"),
+      promotionLabel: __15("PRO triggers", "elementor"),
+      promotionContent: __15("Upgrade to unlock more interactions triggers.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/",
-      trackingData: TRACKING_DATA4
+      trackingData: TRACKING_DATA5
     }
   );
 }
@@ -2111,6 +2172,10 @@ function init() {
       component: Effect,
       options: ["fade", "slide", "scale"]
     });
+    registerInteractionsControl({
+      type: "repeat",
+      component: Repeat
+    });
     initMcpInteractions();
   } catch (error) {
     throw error;
@@ -2126,6 +2191,8 @@ export {
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState,
   InteractionsTab,
+  REPEAT_OPTIONS,
+  REPEAT_TOOLTIPS,
   REPLAY_OPTIONS,
   TRIGGER_OPTIONS,
   buildDisplayLabel,