@elementor/editor-interactions 4.0.0-538 → 4.0.0-540

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ComponentType } from 'react';
+import { Unit } from '@elementor/editor-controls';
 import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
 export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
 
@@ -54,6 +55,8 @@ type InteractionsProvider = {
     };
 };
 type InteractionItemValue = InteractionItemPropValue['value'];
+type TimeUnit = Extract<Unit, 'ms' | 's'>;
+type TimeValue = `${number}${TimeUnit}` | number;
 
 declare function getInteractionsConfig(): InteractionsConfig;
 
@@ -100,4 +103,4 @@ type ControlOptions<T extends InteractionsControlType> = {
 };
 declare function registerInteractionsControl<T extends InteractionsControlType>({ type, component, options, }: ControlOptions<T>): void;
 
-export { type AnimationOption, type CreateInteractionsProviderOptions, type DirectionFieldProps, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, type ElementInteractionData, EmptyState, type FieldProps, type InteractionConstants, type InteractionItemValue, type InteractionsCollection, type InteractionsConfig, type InteractionsProvider, InteractionsTab, type ReplayFieldProps, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };
+export { type AnimationOption, type CreateInteractionsProviderOptions, type DirectionFieldProps, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, type ElementInteractionData, EmptyState, type FieldProps, type InteractionConstants, type InteractionItemValue, type InteractionsCollection, type InteractionsConfig, type InteractionsProvider, InteractionsTab, type ReplayFieldProps, type TimeUnit, type TimeValue, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ComponentType } from 'react';
+import { Unit } from '@elementor/editor-controls';
 import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
 export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
 
@@ -54,6 +55,8 @@ type InteractionsProvider = {
     };
 };
 type InteractionItemValue = InteractionItemPropValue['value'];
+type TimeUnit = Extract<Unit, 'ms' | 's'>;
+type TimeValue = `${number}${TimeUnit}` | number;
 
 declare function getInteractionsConfig(): InteractionsConfig;
 
@@ -100,4 +103,4 @@ type ControlOptions<T extends InteractionsControlType> = {
 };
 declare function registerInteractionsControl<T extends InteractionsControlType>({ type, component, options, }: ControlOptions<T>): void;
 
-export { type AnimationOption, type CreateInteractionsProviderOptions, type DirectionFieldProps, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, type ElementInteractionData, EmptyState, type FieldProps, type InteractionConstants, type InteractionItemValue, type InteractionsCollection, type InteractionsConfig, type InteractionsProvider, InteractionsTab, type ReplayFieldProps, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };
+export { type AnimationOption, type CreateInteractionsProviderOptions, type DirectionFieldProps, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, type ElementInteractionData, EmptyState, type FieldProps, type InteractionConstants, type InteractionItemValue, type InteractionsCollection, type InteractionsConfig, type InteractionsProvider, InteractionsTab, type ReplayFieldProps, type TimeUnit, type TimeValue, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };

package/dist/index.js

@@ -155,6 +155,56 @@ function useInteractionItemContext() {
   return context;
 }
 
+// src/utils/prop-value-utils.ts
+var import_editor_props = require("@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() {
@@ -173,8 +223,8 @@ var createNumber = (value) => ({
 var createTimingConfig = (duration, delay) => ({
   $$type: "timing-config",
   value: {
-    duration: createNumber(duration),
-    delay: createNumber(delay)
+    duration: import_editor_props.sizePropTypeUtil.create(parseSizeValue(duration, TIME_UNITS, void 0, DEFAULT_TIME_UNIT)),
+    delay: import_editor_props.sizePropTypeUtil.create(parseSizeValue(delay, TIME_UNITS, void 0, DEFAULT_TIME_UNIT))
   }
 });
 var createBoolean = (value) => ({
@@ -291,6 +341,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;
 };
@@ -430,28 +483,45 @@ function EffectType({ value, onChange }) {
 var React8 = __toESM(require("react"));
 var import_react5 = require("react");
 var import_editor_controls3 = require("@elementor/editor-controls");
-var import_editor_props = require("@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 = (0, import_react5.useRef)(sizeValue.unit);
   const setValue = (0, import_react5.useCallback)(
     (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(
     import_editor_controls3.UnstableSizeField,
     {
-      units: [DEFAULT_UNIT],
+      units: TIME_UNITS,
       value: sizeValue,
       onChange: handleChange,
       onBlur: handleBlur,
@@ -463,12 +533,6 @@ function TimeFrameIndicator({ value, onChange, defaultValue }) {
     }
   );
 }
-var toSizeValue = (value) => {
-  return import_editor_props.sizePropTypeUtil.create({
-    size: Number(value),
-    unit: DEFAULT_UNIT
-  }).value;
-};
 
 // src/components/interaction-details.tsx
 var DEFAULT_VALUES = {
@@ -512,8 +576,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);
@@ -599,14 +663,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: (0, import_i18n5.__)("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(import_ui3.Divider, null), /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n5.__)("Relative To", "elementor") }, /* @__PURE__ */ React9.createElement(
@@ -946,6 +1010,51 @@ function createInteractionsProvider({
 // src/providers/document-elements-interactions-provider.ts
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+
+// src/providers/utils/normalize-interactions.ts
+var import_editor_props2 = require("@elementor/editor-props");
+var FIELD_NORMALIZERS = {
+  size: (value) => {
+    const sizeProp = value;
+    const { size, unit } = sizeProp.value;
+    const numberPropValue = convertTimeUnit(size, unit, "ms");
+    return import_editor_props2.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 ((0, import_editor_props2.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: () => {
@@ -973,10 +1082,11 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
       });
       return filtered.map((element) => {
         const interactions = (0, import_editor_elements3.getElementInteractions)(element.id);
+        const normalizedInteractions = normalizeInteractions(interactions);
         return {
           elementId: element.id,
           dataId: element.id,
-          interactions: interactions || { version: 1, items: [] }
+          interactions: normalizedInteractions || { version: 1, items: [] }
         };
       });
     }