@elementor/editor-interactions 4.0.0-621 → 4.0.0-manual

package/dist/index.d.mts

@@ -71,7 +71,7 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
 
 declare function init(): void;
 
-type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'offsetTop' | 'offsetBottom' | 'customEffects';
+type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'start' | 'end' | 'customEffects';
 type InteractionsControlPropsMap = {
     trigger: FieldProps;
     effect: FieldProps;
@@ -83,8 +83,8 @@ type InteractionsControlPropsMap = {
     replay: ReplayFieldProps;
     easing: FieldProps;
     relativeTo: FieldProps;
-    offsetTop: FieldProps;
-    offsetBottom: FieldProps;
+    start: FieldProps;
+    end: FieldProps;
 };
 type ControlOptions<T extends InteractionsControlType> = {
     type: T;

package/dist/index.d.ts

@@ -71,7 +71,7 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
 
 declare function init(): void;
 
-type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'offsetTop' | 'offsetBottom' | 'customEffects';
+type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'start' | 'end' | 'customEffects';
 type InteractionsControlPropsMap = {
     trigger: FieldProps;
     effect: FieldProps;
@@ -83,8 +83,8 @@ type InteractionsControlPropsMap = {
     replay: ReplayFieldProps;
     easing: FieldProps;
     relativeTo: FieldProps;
-    offsetTop: FieldProps;
-    offsetBottom: FieldProps;
+    start: FieldProps;
+    end: FieldProps;
 };
 type ControlOptions<T extends InteractionsControlType> = {
     type: T;

package/dist/index.js

@@ -245,16 +245,16 @@ var createConfig = ({
   replay,
   easing = "easeIn",
   relativeTo = "",
-  offsetTop = 0,
-  offsetBottom = 85
+  start = 85,
+  end = 15
 }) => ({
   $$type: "config",
   value: {
     replay: createBoolean(replay),
     easing: createString(easing),
     relativeTo: createString(relativeTo),
-    offsetTop: createSize(offsetTop, "%"),
-    offsetBottom: createSize(offsetBottom, "%")
+    start: createSize(start, "%"),
+    end: createSize(end, "%")
   }
 });
 var createSize = (value, defaultUnit, defaultValue) => {
@@ -288,8 +288,8 @@ var createAnimationPreset = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
-  offsetTop,
-  offsetBottom,
+  start,
+  end,
   customEffects
 }) => ({
   $$type: "animation-preset-props",
@@ -303,8 +303,8 @@ var createAnimationPreset = ({
       replay,
       easing,
       relativeTo,
-      offsetTop,
-      offsetBottom
+      start,
+      end
     })
   }
 });
@@ -319,8 +319,8 @@ var createInteractionItem = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
-  offsetTop,
-  offsetBottom,
+  start,
+  end,
   excludedBreakpoints,
   customEffects
 }) => ({
@@ -337,8 +337,8 @@ var createInteractionItem = ({
       replay,
       easing,
       relativeTo,
-      offsetTop,
-      offsetBottom,
+      start,
+      end,
       customEffects
     }),
     ...excludedBreakpoints && excludedBreakpoints.length > 0 && {
@@ -504,8 +504,8 @@ var DEFAULT_VALUES = {
   replay: false,
   easing: "easeIn",
   relativeTo: "viewport",
-  offsetTop: 15,
-  offsetBottom: 85
+  start: 85,
+  end: 15
 };
 var TRIGGERS_WITHOUT_REPLAY = ["load", "scrollOn", "hover", "click"];
 var controlVisibilityConfig = {
@@ -514,8 +514,8 @@ var controlVisibilityConfig = {
   effectType: (values) => values.effect !== "custom",
   direction: (values) => values.effect !== "custom",
   relativeTo: (values) => values.trigger === "scrollOn",
-  offsetTop: (values) => values.trigger === "scrollOn",
-  offsetBottom: (values) => values.trigger === "scrollOn",
+  start: (values) => values.trigger === "scrollOn",
+  end: (values) => values.trigger === "scrollOn",
   duration: (values) => {
     const isRelativeToVisible = values.trigger === "scrollOn";
     return !isRelativeToVisible;
@@ -544,11 +544,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   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);
-  const offsetTop = extractSize(interaction.animation.value.config?.value.offsetTop, DEFAULT_VALUES.offsetTop);
-  const offsetBottom = extractSize(
-    interaction.animation.value.config?.value.offsetBottom,
-    DEFAULT_VALUES.offsetBottom
-  );
+  const start = extractSize(interaction.animation.value.config?.value.start, DEFAULT_VALUES.start);
+  const end = extractSize(interaction.animation.value.config?.value.end, DEFAULT_VALUES.end);
   const interactionValues = {
     trigger,
     effect,
@@ -559,8 +556,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     easing,
     replay,
     relativeTo,
-    offsetTop,
-    offsetBottom,
+    start,
+    end,
     customEffects
   };
   const TriggerControl = useControlComponent("trigger", true);
@@ -570,11 +567,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     "relativeTo",
     controlVisibilityConfig.relativeTo(interactionValues)
   );
-  const OffsetTopControl = useControlComponent("offsetTop", controlVisibilityConfig.offsetTop(interactionValues));
-  const OffsetBottomControl = useControlComponent(
-    "offsetBottom",
-    controlVisibilityConfig.offsetBottom(interactionValues)
-  );
+  const StartControl = useControlComponent("start", controlVisibilityConfig.start(interactionValues));
+  const EndControl = useControlComponent("end", controlVisibilityConfig.end(interactionValues));
   const CustomEffectControl = useControlComponent(
     "customEffects",
     controlVisibilityConfig.custom(interactionValues)
@@ -607,8 +601,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         replay: updates.replay ?? replay,
         easing: updates.easing ?? easing,
         relativeTo: updates.relativeTo ?? relativeTo,
-        offsetTop: updates.offsetTop ?? offsetTop,
-        offsetBottom: updates.offsetBottom ?? offsetBottom,
+        start: updates.start ?? start,
+        end: updates.end ?? end,
         customEffects: updates.customEffects ?? customEffects
       })
     };
@@ -659,23 +653,23 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onChange: (v) => updateInteraction({ delay: v }),
       defaultValue: DEFAULT_VALUES.delay
     }
-  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui3.Divider, null), /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Relative To", "elementor") }, /* @__PURE__ */ React7.createElement(
-    RelativeToControl,
+  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui3.Divider, null), /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, StartControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Start", "elementor") }, /* @__PURE__ */ React7.createElement(
+    StartControl,
     {
-      value: relativeTo,
-      onChange: (v) => updateInteraction({ relativeTo: v })
+      value: parseSizeValue(start, ["%"]).size?.toString() ?? "",
+      onChange: (v) => updateInteraction({ start: v })
     }
-  )), OffsetTopControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Offset Top", "elementor") }, /* @__PURE__ */ React7.createElement(
-    OffsetTopControl,
+  )), EndControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("End", "elementor") }, /* @__PURE__ */ React7.createElement(
+    EndControl,
     {
-      value: String(parseSizeValue(offsetTop, ["%"]).size),
-      onChange: (v) => updateInteraction({ offsetTop: v })
+      value: parseSizeValue(end, ["%"]).size?.toString() ?? "",
+      onChange: (v) => updateInteraction({ end: v })
     }
-  )), OffsetBottomControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Offset Bottom", "elementor") }, /* @__PURE__ */ React7.createElement(
-    OffsetBottomControl,
+  )), /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Relative To", "elementor") }, /* @__PURE__ */ React7.createElement(
+    RelativeToControl,
     {
-      value: String(parseSizeValue(offsetBottom, ["%"]).size),
-      onChange: (v) => updateInteraction({ offsetBottom: v })
+      value: relativeTo,
+      onChange: (v) => updateInteraction({ relativeTo: v })
     }
   ))), /* @__PURE__ */ React7.createElement(import_ui3.Divider, null)), EasingControl && /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Easing", "elementor") }, /* @__PURE__ */ React7.createElement(
     EasingControl,