@elementor/editor-interactions 4.0.0-537 → 4.0.0-539

package/dist/index.mjs

@@ -92,7 +92,7 @@ var PopupStateProvider = ({ children }) => {
 
 // src/components/interactions-list.tsx
 import * as React12 from "react";
-import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo4, useRef } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2 } from "react";
 import { Repeater } from "@elementor/editor-controls";
 import { InfoCircleFilledIcon, PlayerPlayIcon } from "@elementor/icons";
 import { Alert, AlertTitle, Box, IconButton, Tooltip } from "@elementor/ui";
@@ -116,6 +116,56 @@ function useInteractionItemContext() {
   return context;
 }
 
+// src/utils/prop-value-utils.ts
+import { sizePropTypeUtil } from "@elementor/editor-props";
+
+// src/configs/time-constants.ts
+var TIME_UNITS = ["s", "ms"];
+var DEFAULT_TIME_UNIT = "ms";
+
+// src/utils/size-transform-utils.ts
+var SIZE_REGEX = /^(?:(-?\d*\.?\d+)([a-z%]+)|([a-z%]+))$/i;
+var parseSizeValue = (value, allowedUnits, defaultValue, defaultUnit) => {
+  if (typeof value === "number") {
+    return {
+      size: value,
+      unit: defaultUnit
+    };
+  }
+  const sizeValue = tryParse(value, allowedUnits, defaultUnit);
+  if (sizeValue) {
+    return sizeValue;
+  }
+  if (defaultValue) {
+    const fallbackSize = tryParse(defaultValue, allowedUnits, defaultUnit);
+    if (fallbackSize) {
+      return fallbackSize;
+    }
+  }
+  return createSizeValue(null, defaultUnit);
+};
+var tryParse = (value, allowedUnits, defaultUnit) => {
+  if (typeof value === "number") {
+    return createSizeValue(value, defaultUnit);
+  }
+  const match = value && value.match(SIZE_REGEX);
+  if (!match) {
+    return null;
+  }
+  const size = match[1] ? parseFloat(match[1]) : null;
+  const unit = match[2] || match[3];
+  if (!allowedUnits.includes(unit)) {
+    return null;
+  }
+  return createSizeValue(size, unit);
+};
+var formatSizeValue = ({ size, unit }) => {
+  return `${size ?? ""}${unit}`;
+};
+var createSizeValue = (size, unit) => {
+  return { size, unit };
+};
+
 // src/utils/temp-id-utils.ts
 var TEMP_ID_PREFIX = "temp-";
 function generateTempInteractionId() {
@@ -134,8 +184,8 @@ var createNumber = (value) => ({
 var createTimingConfig = (duration, delay) => ({
   $$type: "timing-config",
   value: {
-    duration: createNumber(duration),
-    delay: createNumber(delay)
+    duration: sizePropTypeUtil.create(parseSizeValue(duration, TIME_UNITS, void 0, DEFAULT_TIME_UNIT)),
+    delay: sizePropTypeUtil.create(parseSizeValue(delay, TIME_UNITS, void 0, DEFAULT_TIME_UNIT))
   }
 });
 var createBoolean = (value) => ({
@@ -252,6 +302,9 @@ var createDefaultInteractionItem = () => {
 var extractString = (prop, fallback = "") => {
   return prop?.value ?? fallback;
 };
+var extractSize = (prop) => {
+  return formatSizeValue(prop?.value);
+};
 var extractNumber = (prop, fallback = 0) => {
   return prop?.value ?? fallback;
 };
@@ -389,30 +442,47 @@ function EffectType({ value, onChange }) {
 
 // src/components/controls/time-frame-indicator.tsx
 import * as React8 from "react";
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback2, useRef } from "react";
 import { UnstableSizeField } from "@elementor/editor-controls";
-import { sizePropTypeUtil } from "@elementor/editor-props";
-var DEFAULT_UNIT = "ms";
+
+// src/utils/time-conversion.ts
+var UNIT_TO_MS = {
+  ms: 1,
+  s: 1e3
+};
+var convertTimeUnit = (value, from, to) => {
+  return value * UNIT_TO_MS[from] / UNIT_TO_MS[to];
+};
+
+// src/components/controls/time-frame-indicator.tsx
 function TimeFrameIndicator({ value, onChange, defaultValue }) {
-  const sizeValue = toSizeValue(value ?? defaultValue);
+  const sizeValue = parseSizeValue(value, TIME_UNITS, defaultValue, DEFAULT_TIME_UNIT);
+  const prevUnitRef = useRef(sizeValue.unit);
   const setValue = useCallback2(
     (size) => {
-      onChange(String(size));
+      const unitChanged = prevUnitRef.current !== size.unit;
+      if (unitChanged) {
+        const fromUnit = prevUnitRef.current;
+        const toUnit = size.unit;
+        size.size = convertTimeUnit(Number(size.size), fromUnit, toUnit);
+        prevUnitRef.current = toUnit;
+      }
+      onChange(formatSizeValue(size));
     },
     [onChange]
   );
   const handleChange = (newValue) => {
-    setValue(newValue.size);
+    setValue(newValue);
   };
   const handleBlur = () => {
     if (!sizeValue.size) {
-      setValue(defaultValue);
+      setValue(parseSizeValue(defaultValue, TIME_UNITS, void 0, DEFAULT_TIME_UNIT));
     }
   };
   return /* @__PURE__ */ React8.createElement(
     UnstableSizeField,
     {
-      units: [DEFAULT_UNIT],
+      units: TIME_UNITS,
       value: sizeValue,
       onChange: handleChange,
       onBlur: handleBlur,
@@ -424,12 +494,6 @@ function TimeFrameIndicator({ value, onChange, defaultValue }) {
     }
   );
 }
-var toSizeValue = (value) => {
-  return sizePropTypeUtil.create({
-    size: Number(value),
-    unit: DEFAULT_UNIT
-  }).value;
-};
 
 // src/components/interaction-details.tsx
 var DEFAULT_VALUES = {
@@ -473,8 +537,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   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 duration = extractSize(interaction.animation.value.timing_config.value.duration);
+  const delay = extractSize(interaction.animation.value.timing_config.value.delay);
   const replay = extractBoolean(interaction.animation.value.config?.value.replay, DEFAULT_VALUES.replay);
   const easing = extractString(interaction.animation.value.config?.value.easing, DEFAULT_VALUES.easing);
   const relativeTo = extractString(interaction.animation.value.config?.value.relativeTo, DEFAULT_VALUES.relativeTo);
@@ -560,14 +624,14 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     TimeFrameIndicator,
     {
       value: String(duration),
-      onChange: (v) => updateInteraction({ duration: parseInt(v, 10) }),
+      onChange: (v) => updateInteraction({ duration: v }),
       defaultValue: DEFAULT_VALUES.duration
     }
   )), 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) }),
+      onChange: (v) => updateInteraction({ delay: v }),
       defaultValue: DEFAULT_VALUES.delay
     }
   ))), 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(
@@ -701,7 +765,7 @@ var InteractionsListItem = ({ index, value }) => {
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
-  const hasInitializedRef = useRef(false);
+  const hasInitializedRef = useRef2(false);
   const handleUpdateInteractions = useCallback5(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
@@ -907,6 +971,54 @@ function createInteractionsProvider({
 // src/providers/document-elements-interactions-provider.ts
 import { getCurrentDocumentId, getElementInteractions, getElements } from "@elementor/editor-elements";
 import { __privateListenTo as listenTo, windowEvent } from "@elementor/editor-v1-adapters";
+
+// src/providers/utils/normalize-interactions.ts
+import {
+  isTransformable,
+  numberPropTypeUtil
+} from "@elementor/editor-props";
+var FIELD_NORMALIZERS = {
+  size: (value) => {
+    const sizeProp = value;
+    const { size, unit } = sizeProp.value;
+    const numberPropValue = convertTimeUnit(size, unit, "ms");
+    return numberPropTypeUtil.create(numberPropValue);
+  }
+};
+var normalizeInteractions = (interactions) => {
+  if (!interactions) {
+    return;
+  }
+  if (interactions.items.length === 0) {
+    return interactions;
+  }
+  return {
+    ...interactions,
+    items: interactions.items.map(normalizeNode)
+  };
+};
+var normalizeNode = (node) => {
+  if (Array.isArray(node)) {
+    return node.map(normalizeNode);
+  }
+  if (node !== null && typeof node === "object") {
+    if (isTransformable(node) && node.value !== void 0) {
+      const normalizer = FIELD_NORMALIZERS[node.$$type];
+      if (normalizer) {
+        return normalizer(node);
+      }
+    }
+    const typedNode = node;
+    const out = {};
+    for (const k in typedNode) {
+      out[k] = normalizeNode(typedNode[k]);
+    }
+    return out;
+  }
+  return node;
+};
+
+// src/providers/document-elements-interactions-provider.ts
 var ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-interactions-";
 var documentElementsInteractionsProvider = createInteractionsProvider({
   key: () => {
@@ -934,10 +1046,11 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
       });
       return filtered.map((element) => {
         const interactions = getElementInteractions(element.id);
+        const normalizedInteractions = normalizeInteractions(interactions);
         return {
           elementId: element.id,
           dataId: element.id,
-          interactions: interactions || { version: 1, items: [] }
+          interactions: normalizedInteractions || { version: 1, items: [] }
         };
       });
     }