@elementor/editor-interactions 4.0.0-521 → 4.0.0-523

package/dist/index.mjs

@@ -25,8 +25,8 @@ var EmptyState = ({ onCreateInteraction }) => {
 };
 
 // src/components/interactions-tab.tsx
-import * as React10 from "react";
-import { useCallback as useCallback4, useState as useState2 } from "react";
+import * as React12 from "react";
+import { useCallback as useCallback5, useState as useState2 } from "react";
 import { useElementInteractions as useElementInteractions2 } from "@elementor/editor-elements";
 import { SessionStorageProvider } from "@elementor/session";
 import { Stack as Stack2 } from "@elementor/ui";
@@ -91,13 +91,31 @@ var PopupStateProvider = ({ children }) => {
 };
 
 // src/components/interactions-list.tsx
-import * as React9 from "react";
-import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useEffect as useEffect2, useMemo as useMemo3, useRef } from "react";
+import * as React11 from "react";
+import { useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo3, useRef } 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 __6 } from "@wordpress/i18n";
 
+// src/contexts/interactions-item-context.tsx
+import * as React4 from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var InteractionItemContext = createContext3(null);
+function InteractionItemContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
+}
+function useInteractionItemContext() {
+  const context = useContext3(InteractionItemContext);
+  if (!context) {
+    throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
+  }
+  return context;
+}
+
 // src/utils/temp-id-utils.ts
 var TEMP_ID_PREFIX = "temp-";
 function generateTempInteractionId() {
@@ -239,8 +257,12 @@ var buildDisplayLabel = (item) => {
   return `${triggerLabel}: ${effectLabel} ${typeLabel}`;
 };
 
+// src/components/interactions-list-item.tsx
+import * as React10 from "react";
+import { useCallback as useCallback3 } from "react";
+
 // src/components/interaction-details.tsx
-import * as React8 from "react";
+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";
@@ -260,7 +282,7 @@ function getInteractionsControl(type) {
 }
 
 // src/components/controls/direction.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { useMemo } from "react";
 import { ToggleButtonGroupUi } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
@@ -272,34 +294,34 @@ function Direction({ value, onChange, interactionType }) {
       {
         value: "top",
         label: isIn ? __2("From top", "elementor") : __2("To top", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React4.createElement(ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React4.createElement(ArrowUpSmallIcon, { fontSize: size }),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(ArrowUpSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "bottom",
         label: interactionType === "in" ? __2("From bottom", "elementor") : __2("To bottom", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React4.createElement(ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React4.createElement(ArrowDownSmallIcon, { fontSize: size }),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(ArrowDownSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "left",
         label: interactionType === "in" ? __2("From left", "elementor") : __2("To left", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React4.createElement(ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React4.createElement(ArrowLeftIcon, { fontSize: size }),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(ArrowLeftIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "right",
         label: interactionType === "in" ? __2("From right", "elementor") : __2("To right", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React4.createElement(ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React4.createElement(ArrowRightIcon, { fontSize: size }),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(ArrowRightIcon, { fontSize: size }),
         showTooltip: true
       }
     ];
   }, [interactionType]);
-  return /* @__PURE__ */ React4.createElement(ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
+  return /* @__PURE__ */ React5.createElement(ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
 // src/components/controls/effect.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { MenuListItem } from "@elementor/editor-ui";
 import { Select } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
@@ -309,7 +331,7 @@ function Effect({ value, onChange }) {
     { key: "slide", label: __3("Slide", "elementor") },
     { key: "scale", label: __3("Scale", "elementor") }
   ];
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     Select,
     {
       fullWidth: true,
@@ -319,13 +341,13 @@ function Effect({ value, onChange }) {
       onChange: (event) => onChange(event.target.value)
     },
     availableEffects.map((effect) => {
-      return /* @__PURE__ */ React5.createElement(MenuListItem, { key: effect.key, value: effect.key }, effect.label);
+      return /* @__PURE__ */ React6.createElement(MenuListItem, { key: effect.key, value: effect.key }, effect.label);
     })
   );
 }
 
 // src/components/controls/effect-type.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi2 } from "@elementor/editor-controls";
 import { __ as __4 } from "@wordpress/i18n";
 function EffectType({ value, onChange }) {
@@ -343,11 +365,11 @@ function EffectType({ value, onChange }) {
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React6.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value });
+  return /* @__PURE__ */ React7.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value });
 }
 
 // src/components/controls/time-frame-indicator.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { useCallback as useCallback2 } from "react";
 import { UnstableSizeField } from "@elementor/editor-controls";
 import { sizePropTypeUtil } from "@elementor/editor-props";
@@ -368,7 +390,7 @@ function TimeFrameIndicator({ value, onChange, defaultValue }) {
       setValue(defaultValue);
     }
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     UnstableSizeField,
     {
       units: [DEFAULT_UNIT],
@@ -501,53 +523,53 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React8.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React8.createElement(Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React8.createElement(Field, { label: __5("Trigger", "elementor") }, /* @__PURE__ */ React8.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React8.createElement(Field, { label: __5("Replay", "elementor") }, /* @__PURE__ */ React8.createElement(
+  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(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
       disabled: true
     }
-  ))), /* @__PURE__ */ React8.createElement(Divider, null), /* @__PURE__ */ React8.createElement(Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Field, { label: __5("Effect", "elementor") }, /* @__PURE__ */ React8.createElement(Effect, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), /* @__PURE__ */ React8.createElement(Field, { label: __5("Type", "elementor") }, /* @__PURE__ */ React8.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) })), /* @__PURE__ */ React8.createElement(Field, { label: __5("Direction", "elementor") }, /* @__PURE__ */ React8.createElement(
+  ))), /* @__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(
     Direction,
     {
       value: direction,
       onChange: (v) => updateInteraction({ direction: v }),
       interactionType: type
     }
-  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React8.createElement(Field, { label: __5("Duration", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: __5("Duration", "elementor") }, /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
       value: String(duration),
       onChange: (v) => updateInteraction({ duration: parseInt(v, 10) }),
       defaultValue: DEFAULT_VALUES.duration
     }
-  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React8.createElement(Field, { label: __5("Delay", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: __5("Delay", "elementor") }, /* @__PURE__ */ React9.createElement(
     TimeFrameIndicator,
     {
       value: String(delay),
       onChange: (v) => updateInteraction({ delay: parseInt(v, 10) }),
       defaultValue: DEFAULT_VALUES.delay
     }
-  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Divider, null), /* @__PURE__ */ React8.createElement(Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Field, { label: __5("Relative To", "elementor") }, /* @__PURE__ */ React8.createElement(
+  ))), 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(
     RelativeToControl,
     {
       value: relativeTo,
       onChange: (v) => updateInteraction({ relativeTo: v })
     }
-  )), OffsetTopControl && /* @__PURE__ */ React8.createElement(Field, { label: __5("Offset Top", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), OffsetTopControl && /* @__PURE__ */ React9.createElement(Field, { label: __5("Offset Top", "elementor") }, /* @__PURE__ */ React9.createElement(
     OffsetTopControl,
     {
       value: String(offsetTop),
       onChange: (v) => updateInteraction({ offsetTop: parseInt(v, 10) })
     }
-  )), OffsetBottomControl && /* @__PURE__ */ React8.createElement(Field, { label: __5("Offset Bottom", "elementor") }, /* @__PURE__ */ React8.createElement(
+  )), OffsetBottomControl && /* @__PURE__ */ React9.createElement(Field, { label: __5("Offset Bottom", "elementor") }, /* @__PURE__ */ React9.createElement(
     OffsetBottomControl,
     {
       value: String(offsetBottom),
       onChange: (v) => updateInteraction({ offsetBottom: parseInt(v, 10) })
     }
-  ))), /* @__PURE__ */ React8.createElement(Divider, null)), EasingControl && /* @__PURE__ */ React8.createElement(Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Field, { label: __5("Easing", "elementor") }, /* @__PURE__ */ React8.createElement(
+  ))), /* @__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(
     EasingControl,
     {
       value: easing,
@@ -558,16 +580,41 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   ))));
 };
 function 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)));
+  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/interactions-list-item.tsx
+var InteractionsListItem = ({ index, value }) => {
+  const context = useInteractionItemContext();
+  const handleChange = useCallback3(
+    (newInteractionValue) => {
+      context?.onInteractionChange(index, newInteractionValue);
+    },
+    [context, index]
+  );
+  const handlePlayInteraction = useCallback3(
+    (interactionId) => {
+      context?.onPlayInteraction(interactionId);
+    },
+    [context]
+  );
+  return /* @__PURE__ */ React10.createElement(
+    InteractionDetails,
+    {
+      key: index,
+      interaction: value.value,
+      onChange: handleChange,
+      onPlayInteraction: handlePlayInteraction
+    }
+  );
+};
+
 // src/components/interactions-list.tsx
 var MAX_NUMBER_OF_INTERACTIONS = 5;
-var InteractionItemContext = createContext3(null);
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
   const hasInitializedRef = useRef(false);
-  const handleUpdateInteractions = useCallback3(
+  const handleUpdateInteractions = useCallback4(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
     },
@@ -586,11 +633,11 @@ function InteractionsList(props) {
   const isMaxNumberOfInteractionsReached = useMemo3(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React9.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React9.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React9.createElement(AlertTitle, null, __6("Interactions", "elementor")), /* @__PURE__ */ React9.createElement(Box, { component: "span" }, __6(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React11.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React11.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React11.createElement(AlertTitle, null, __6("Interactions", "elementor")), /* @__PURE__ */ React11.createElement(Box, { component: "span" }, __6(
     "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 = useCallback3(
+  const handleRepeaterChange = useCallback4(
     (newItems) => {
       handleUpdateInteractions({
         ...interactions,
@@ -599,7 +646,7 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const handleInteractionChange = useCallback3(
+  const handleInteractionChange = useCallback4(
     (index, newInteractionValue) => {
       const newItems = structuredClone(interactions.items);
       newItems[index] = {
@@ -620,7 +667,7 @@ function InteractionsList(props) {
     }),
     [handleInteractionChange, onPlayInteraction]
   );
-  return /* @__PURE__ */ React9.createElement(InteractionItemContext.Provider, { value: contextValue }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React11.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ React11.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -637,54 +684,30 @@ function InteractionsList(props) {
         initialValues: createDefaultInteractionItem(),
         Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
-        Content,
-        actions: (value) => /* @__PURE__ */ React9.createElement(Tooltip, { key: "preview", placement: "top", title: __6("Preview", "elementor") }, /* @__PURE__ */ React9.createElement(
+        Content: InteractionsListItem,
+        actions: (value) => /* @__PURE__ */ React11.createElement(Tooltip, { key: "preview", placement: "top", title: __6("Preview", "elementor") }, /* @__PURE__ */ React11.createElement(
           IconButton,
           {
             "aria-label": __6("Play interaction", "elementor"),
             size: "tiny",
             onClick: () => onPlayInteraction(extractString(value.value.interaction_id))
           },
-          /* @__PURE__ */ React9.createElement(PlayerPlayIcon, { fontSize: "tiny" })
+          /* @__PURE__ */ React11.createElement(PlayerPlayIcon, { fontSize: "tiny" })
         ))
       }
     }
   ));
 }
-var Content = ({ index, value }) => {
-  const context = useContext3(InteractionItemContext);
-  const handleChange = useCallback3(
-    (newInteractionValue) => {
-      context?.onInteractionChange(index, newInteractionValue);
-    },
-    [context, index]
-  );
-  const handlePlayInteraction = useCallback3(
-    (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 }) => {
-  return /* @__PURE__ */ React10.createElement(PopupStateProvider, null, /* @__PURE__ */ React10.createElement(InteractionsTabContent, { elementId }));
+  return /* @__PURE__ */ React12.createElement(PopupStateProvider, null, /* @__PURE__ */ React12.createElement(InteractionsTabContent, { elementId }));
 };
 function InteractionsTabContent({ elementId }) {
   const existingInteractions = useElementInteractions2(elementId);
   const firstInteractionState = useState2(false);
   const hasInteractions = existingInteractions?.items?.length || firstInteractionState[0];
-  return /* @__PURE__ */ React10.createElement(SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React10.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React10.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React12.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React12.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React12.createElement(
     EmptyState,
     {
       onCreateInteraction: () => {
@@ -697,7 +720,7 @@ function InteractionsContent({
   firstInteractionState
 }) {
   const { interactions, setInteractions, playInteractions } = useInteractionsContext();
-  const applyInteraction = useCallback4(
+  const applyInteraction = useCallback5(
     (newInteractions) => {
       firstInteractionState[1](false);
       if (!newInteractions) {
@@ -708,7 +731,7 @@ function InteractionsContent({
     },
     [setInteractions, firstInteractionState]
   );
-  return /* @__PURE__ */ React10.createElement(Stack2, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(Stack2, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React12.createElement(
     InteractionsList,
     {
       triggerCreateOnShowEmpty: firstInteractionState[0],
@@ -834,7 +857,7 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 });
 
 // src/components/controls/easing.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
 import { Select as Select2 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
@@ -853,15 +876,15 @@ function Easing({}) {
     key,
     label
   }));
-  return /* @__PURE__ */ React11.createElement(Select2, { value: DEFAULT_EASING, onChange: () => {
+  return /* @__PURE__ */ React13.createElement(Select2, { value: DEFAULT_EASING, onChange: () => {
   }, fullWidth: true, displayEmpty: true, size: "tiny" }, availableOptions.map((option) => {
     const isDisabled = DEFAULT_EASING !== option.key;
-    return /* @__PURE__ */ React11.createElement(MenuListItem2, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
+    return /* @__PURE__ */ React13.createElement(MenuListItem2, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
   }));
 }
 
 // src/components/controls/trigger.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
 import { Select as Select3 } from "@elementor/ui";
 import { __ as __8 } from "@wordpress/i18n";
@@ -873,7 +896,7 @@ function Trigger({ value, onChange }) {
     key,
     label
   }));
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Select3,
     {
       fullWidth: true,
@@ -883,7 +906,7 @@ function Trigger({ value, onChange }) {
       value
     },
     availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React12.createElement(MenuListItem3, { key: trigger.key, value: trigger.key }, trigger.label);
+      return /* @__PURE__ */ React14.createElement(MenuListItem3, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   );
 }