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

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-";
@@ -230,7 +230,7 @@ var createDefaultInteractionItem = () => {
     trigger: "load",
     effect: "fade",
     type: "in",
-    duration: 300,
+    duration: 600,
     delay: 0,
     replay: false,
     interactionId: generateTempInteractionId()
@@ -263,10 +263,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 +370,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,7 +413,7 @@ var DEFAULT_VALUES = {
   effect: "fade",
   type: "in",
   direction: "",
-  duration: 300,
+  duration: 600,
   delay: 0,
   replay: false,
   relativeTo: "viewport",
@@ -425,7 +436,7 @@ var controlVisibilityConfig = {
   }
 };
 function useControlComponent(controlName, isVisible = true) {
-  return (0, import_react4.useMemo)(() => {
+  return (0, import_react5.useMemo)(() => {
     if (!isVisible) {
       return null;
     }
@@ -503,68 +514,71 @@ 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)));
 };
 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 +588,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 +604,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 +618,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 +642,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 +654,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 +687,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 +702,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 +713,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],
@@ -805,19 +840,19 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
 
 // src/components/controls/trigger.tsx
 var React11 = __toESM(require("react"));
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_ui7 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_ui6 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
 function Trigger({ value, onChange }) {
   const availableTriggers = Object.entries({
-    load: (0, import_i18n8.__)("Page load", "elementor"),
-    scrollIn: (0, import_i18n8.__)("Scroll into view", "elementor")
+    load: (0, import_i18n7.__)("Page load", "elementor"),
+    scrollIn: (0, import_i18n7.__)("Scroll into view", "elementor")
   }).map(([key, label]) => ({
     key,
     label
   }));
   return /* @__PURE__ */ React11.createElement(
-    import_ui7.Select,
+    import_ui6.Select,
     {
       fullWidth: true,
       displayEmpty: true,
@@ -826,7 +861,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__ */ React11.createElement(import_editor_ui2.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
     })
   );
 }