@elementor/editor-interactions 4.0.0-636 → 4.0.0-637

package/dist/index.d.mts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { RefObject, ComponentType } from 'react';
-import { ElementInteractions } from '@elementor/editor-elements';
+import { Unit } from '@elementor/editor-controls';
+import { ElementInteractions, InteractionItemPropValue, AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
 export { InteractionItemPropValue } from '@elementor/editor-elements';
-import { PropValue } from '@elementor/editor-props';
+import { PropValue, SizePropValue } from '@elementor/editor-props';
 
 declare const EmptyState: ({ onCreateInteraction }: {
     onCreateInteraction: () => void;
@@ -17,7 +18,10 @@ type InteractionConstants = {
     defaultDelay: number;
     slideDistance: number;
     scaleStart: number;
-    easing: string;
+    defaultEasing: string;
+    relativeTo: string;
+    start: number;
+    end: number;
 };
 type InteractionsConfig = {
     constants: InteractionConstants;
@@ -46,6 +50,8 @@ type InteractionsProvider = {
         all: () => ElementInteractionData[];
     };
 };
+type InteractionItemValue = InteractionItemPropValue['value'];
+type SizeStringValue = `${number}${Unit}` | number;
 
 declare function getInteractionsConfig(): InteractionsConfig;
 
@@ -127,4 +133,66 @@ declare const EFFECT_OPTIONS: {
 };
 declare const BASE_EFFECTS: string[];
 
-export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };
+declare const createString: (value: string) => StringPropValue;
+declare const createNumber: (value: number) => NumberPropValue;
+declare const createTimingConfig: (duration: SizeStringValue, delay: SizeStringValue) => TimingConfigPropValue;
+declare const createBoolean: (value: boolean) => BooleanPropValue;
+declare const createConfig: ({ replay, easing, relativeTo, start, end, }: {
+    replay: boolean;
+    easing?: string;
+    relativeTo?: string;
+    start?: SizeStringValue;
+    end?: SizeStringValue;
+}) => ConfigPropValue;
+declare const extractBoolean: (prop: BooleanPropValue | undefined, fallback?: boolean) => boolean;
+declare const createExcludedBreakpoints: (breakpoints: string[]) => ExcludedBreakpointsPropValue;
+declare const createInteractionBreakpoints: (excluded: string[]) => InteractionBreakpointsPropValue;
+declare const extractExcludedBreakpoints: (breakpoints: InteractionBreakpointsPropValue | undefined) => string[];
+declare const createAnimationPreset: ({ effect, type, direction, duration, delay, replay, easing, relativeTo, start, end, customEffects, }: {
+    effect: string;
+    type: string;
+    direction?: string;
+    duration: SizeStringValue;
+    delay: SizeStringValue;
+    replay: boolean;
+    easing?: string;
+    relativeTo?: string;
+    start?: SizeStringValue;
+    end?: SizeStringValue;
+    customEffects?: PropValue;
+}) => AnimationPresetPropValue;
+declare const createInteractionItem: ({ trigger, effect, type, direction, duration, delay, interactionId, replay, easing, relativeTo, start, end, excludedBreakpoints, customEffects, }: {
+    trigger?: string;
+    effect?: string;
+    type?: string;
+    direction?: string;
+    duration?: SizeStringValue;
+    delay?: SizeStringValue;
+    interactionId?: string;
+    replay?: boolean;
+    easing?: string;
+    relativeTo?: string;
+    start?: number;
+    end?: number;
+    excludedBreakpoints?: string[];
+    customEffects?: PropValue;
+}) => InteractionItemPropValue;
+declare const createDefaultInteractionItem: () => InteractionItemPropValue;
+declare const createDefaultInteractions: () => ElementInteractions;
+declare const extractString: (prop: StringPropValue | undefined, fallback?: string) => string;
+declare const extractSize: (prop?: SizePropValue, defaultValue?: SizeStringValue) => SizeStringValue;
+declare const buildDisplayLabel: (item: InteractionItemValue) => string;
+
+declare function generateTempInteractionId(): string;
+declare function isTempId(id: string | undefined): boolean;
+
+declare const resolveDirection: (hasDirection: boolean, newEffect?: string, newDirection?: string, currentDirection?: string, currentEffect?: string) => string | undefined;
+
+declare const convertTimeUnit: (value: number, from: Unit, to: Unit) => number;
+
+type SizeValue = SizePropValue['value'];
+type SizeUnit = SizeValue['unit'];
+declare const parseSizeValue: (value: SizeStringValue, allowedUnits: SizeUnit[], defaultValue?: SizeStringValue, defaultUnit?: Unit) => SizeValue;
+declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
+
+export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, extractBoolean, extractExcludedBreakpoints, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection };

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { RefObject, ComponentType } from 'react';
-import { ElementInteractions } from '@elementor/editor-elements';
+import { Unit } from '@elementor/editor-controls';
+import { ElementInteractions, InteractionItemPropValue, AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
 export { InteractionItemPropValue } from '@elementor/editor-elements';
-import { PropValue } from '@elementor/editor-props';
+import { PropValue, SizePropValue } from '@elementor/editor-props';
 
 declare const EmptyState: ({ onCreateInteraction }: {
     onCreateInteraction: () => void;
@@ -17,7 +18,10 @@ type InteractionConstants = {
     defaultDelay: number;
     slideDistance: number;
     scaleStart: number;
-    easing: string;
+    defaultEasing: string;
+    relativeTo: string;
+    start: number;
+    end: number;
 };
 type InteractionsConfig = {
     constants: InteractionConstants;
@@ -46,6 +50,8 @@ type InteractionsProvider = {
         all: () => ElementInteractionData[];
     };
 };
+type InteractionItemValue = InteractionItemPropValue['value'];
+type SizeStringValue = `${number}${Unit}` | number;
 
 declare function getInteractionsConfig(): InteractionsConfig;
 
@@ -127,4 +133,66 @@ declare const EFFECT_OPTIONS: {
 };
 declare const BASE_EFFECTS: string[];
 
-export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };
+declare const createString: (value: string) => StringPropValue;
+declare const createNumber: (value: number) => NumberPropValue;
+declare const createTimingConfig: (duration: SizeStringValue, delay: SizeStringValue) => TimingConfigPropValue;
+declare const createBoolean: (value: boolean) => BooleanPropValue;
+declare const createConfig: ({ replay, easing, relativeTo, start, end, }: {
+    replay: boolean;
+    easing?: string;
+    relativeTo?: string;
+    start?: SizeStringValue;
+    end?: SizeStringValue;
+}) => ConfigPropValue;
+declare const extractBoolean: (prop: BooleanPropValue | undefined, fallback?: boolean) => boolean;
+declare const createExcludedBreakpoints: (breakpoints: string[]) => ExcludedBreakpointsPropValue;
+declare const createInteractionBreakpoints: (excluded: string[]) => InteractionBreakpointsPropValue;
+declare const extractExcludedBreakpoints: (breakpoints: InteractionBreakpointsPropValue | undefined) => string[];
+declare const createAnimationPreset: ({ effect, type, direction, duration, delay, replay, easing, relativeTo, start, end, customEffects, }: {
+    effect: string;
+    type: string;
+    direction?: string;
+    duration: SizeStringValue;
+    delay: SizeStringValue;
+    replay: boolean;
+    easing?: string;
+    relativeTo?: string;
+    start?: SizeStringValue;
+    end?: SizeStringValue;
+    customEffects?: PropValue;
+}) => AnimationPresetPropValue;
+declare const createInteractionItem: ({ trigger, effect, type, direction, duration, delay, interactionId, replay, easing, relativeTo, start, end, excludedBreakpoints, customEffects, }: {
+    trigger?: string;
+    effect?: string;
+    type?: string;
+    direction?: string;
+    duration?: SizeStringValue;
+    delay?: SizeStringValue;
+    interactionId?: string;
+    replay?: boolean;
+    easing?: string;
+    relativeTo?: string;
+    start?: number;
+    end?: number;
+    excludedBreakpoints?: string[];
+    customEffects?: PropValue;
+}) => InteractionItemPropValue;
+declare const createDefaultInteractionItem: () => InteractionItemPropValue;
+declare const createDefaultInteractions: () => ElementInteractions;
+declare const extractString: (prop: StringPropValue | undefined, fallback?: string) => string;
+declare const extractSize: (prop?: SizePropValue, defaultValue?: SizeStringValue) => SizeStringValue;
+declare const buildDisplayLabel: (item: InteractionItemValue) => string;
+
+declare function generateTempInteractionId(): string;
+declare function isTempId(id: string | undefined): boolean;
+
+declare const resolveDirection: (hasDirection: boolean, newEffect?: string, newDirection?: string, currentDirection?: string, currentEffect?: string) => string | undefined;
+
+declare const convertTimeUnit: (value: number, from: Unit, to: Unit) => number;
+
+type SizeValue = SizePropValue['value'];
+type SizeUnit = SizeValue['unit'];
+declare const parseSizeValue: (value: SizeStringValue, allowedUnits: SizeUnit[], defaultValue?: SizeStringValue, defaultUnit?: Unit) => SizeValue;
+declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
+
+export { BASE_EASINGS, BASE_EFFECTS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, EFFECT_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, buildDisplayLabel, convertTimeUnit, createAnimationPreset, createBoolean, createConfig, createDefaultInteractionItem, createDefaultInteractions, createExcludedBreakpoints, createInteractionBreakpoints, createInteractionItem, createInteractionsProvider, createNumber, createString, createTimingConfig, extractBoolean, extractExcludedBreakpoints, extractSize, extractString, formatSizeValue, generateTempInteractionId, getInteractionsConfig, init, interactionsRepository, isTempId, parseSizeValue, registerInteractionsControl, resolveDirection };

package/dist/index.js

@@ -41,11 +41,33 @@ __export(index_exports, {
   InteractionsTab: () => InteractionsTab,
   REPLAY_OPTIONS: () => REPLAY_OPTIONS,
   TRIGGER_OPTIONS: () => TRIGGER_OPTIONS,
+  buildDisplayLabel: () => buildDisplayLabel,
+  convertTimeUnit: () => convertTimeUnit,
+  createAnimationPreset: () => createAnimationPreset,
+  createBoolean: () => createBoolean,
+  createConfig: () => createConfig,
+  createDefaultInteractionItem: () => createDefaultInteractionItem,
+  createDefaultInteractions: () => createDefaultInteractions,
+  createExcludedBreakpoints: () => createExcludedBreakpoints,
+  createInteractionBreakpoints: () => createInteractionBreakpoints,
+  createInteractionItem: () => createInteractionItem,
   createInteractionsProvider: () => createInteractionsProvider,
+  createNumber: () => createNumber,
+  createString: () => createString,
+  createTimingConfig: () => createTimingConfig,
+  extractBoolean: () => extractBoolean,
+  extractExcludedBreakpoints: () => extractExcludedBreakpoints,
+  extractSize: () => extractSize,
+  extractString: () => extractString,
+  formatSizeValue: () => formatSizeValue,
+  generateTempInteractionId: () => generateTempInteractionId,
   getInteractionsConfig: () => getInteractionsConfig,
   init: () => init,
   interactionsRepository: () => interactionsRepository,
-  registerInteractionsControl: () => registerInteractionsControl
+  isTempId: () => isTempId,
+  parseSizeValue: () => parseSizeValue,
+  registerInteractionsControl: () => registerInteractionsControl,
+  resolveDirection: () => resolveDirection
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -219,17 +241,42 @@ var createSizeValue = (size, unit) => {
   return { size, unit };
 };
 
+// src/utils/get-interactions-config.ts
+var DEFAULT_CONFIG = {
+  constants: {
+    defaultDuration: 600,
+    defaultDelay: 0,
+    slideDistance: 100,
+    scaleStart: 0,
+    defaultEasing: "easeIn",
+    relativeTo: "viewport",
+    end: 15,
+    start: 85
+  }
+};
+function getInteractionsConfig() {
+  return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
+}
+
 // src/utils/temp-id-utils.ts
 var TEMP_ID_PREFIX = "temp-";
+var TEMP_ID_REGEX = /^temp-[a-z0-9]+$/i;
 function generateTempInteractionId() {
   return `${TEMP_ID_PREFIX}${Math.random().toString(36).substring(2, 11)}`;
 }
+function isTempId(id) {
+  return !!id && TEMP_ID_REGEX.test(id);
+}
 
 // src/utils/prop-value-utils.ts
 var createString = (value) => ({
   $$type: "string",
   value
 });
+var createNumber = (value) => ({
+  $$type: "number",
+  value
+});
 var createTimingConfig = (duration, delay) => ({
   $$type: "timing-config",
   value: {
@@ -347,17 +394,22 @@ var createInteractionItem = ({
   }
 });
 var createDefaultInteractionItem = () => {
+  const { constants } = getInteractionsConfig();
   return createInteractionItem({
     trigger: "load",
     effect: "fade",
     type: "in",
-    duration: 600,
-    delay: 0,
+    duration: constants.defaultDuration,
+    delay: constants.defaultDelay,
     replay: false,
-    easing: "easeIn",
+    easing: constants.defaultEasing,
     interactionId: generateTempInteractionId()
   });
 };
+var createDefaultInteractions = () => ({
+  version: 1,
+  items: [createDefaultInteractionItem()]
+});
 var extractString = (prop, fallback = "") => {
   return prop?.value ?? fallback;
 };
@@ -922,20 +974,6 @@ function InteractionsContent({
   ));
 }
 
-// src/utils/get-interactions-config.ts
-var DEFAULT_CONFIG = {
-  constants: {
-    defaultDuration: 300,
-    defaultDelay: 0,
-    slideDistance: 100,
-    scaleStart: 0.5,
-    easing: "linear"
-  }
-};
-function getInteractionsConfig() {
-  return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
-}
-
 // src/utils/create-interactions-repository.ts
 var createInteractionsRepository = () => {
   const providers = [];
@@ -1499,12 +1537,29 @@ var initManageElementInteractionTool = (reg) => {
       const elementData = allInteractions.find((data) => data.elementId === elementId);
       const currentInteractions = elementData?.interactions ?? EMPTY_INTERACTIONS;
       if (action === "get") {
+        const summary = currentInteractions.items.map((item) => {
+          const { value } = item;
+          const animValue = value.animation.value;
+          const timingValue = animValue.timing_config.value;
+          const configValue = animValue.config.value;
+          return {
+            id: extractString(value.interaction_id),
+            trigger: extractString(value.trigger),
+            effect: extractString(animValue.effect),
+            effectType: extractString(animValue.type),
+            direction: extractString(animValue.direction),
+            duration: extractSize(timingValue.duration),
+            delay: extractSize(timingValue.delay),
+            easing: extractString(configValue.easing),
+            excludedBreakpoints: extractExcludedBreakpoints(value.breakpoints)
+          };
+        });
         return {
           success: true,
           elementId,
           action,
-          interactions: currentInteractions.items,
-          count: currentInteractions.items.length
+          interactions: summary,
+          count: summary.length
         };
       }
       let updatedItems = [...currentInteractions.items];
@@ -1709,10 +1764,32 @@ function init() {
   InteractionsTab,
   REPLAY_OPTIONS,
   TRIGGER_OPTIONS,
+  buildDisplayLabel,
+  convertTimeUnit,
+  createAnimationPreset,
+  createBoolean,
+  createConfig,
+  createDefaultInteractionItem,
+  createDefaultInteractions,
+  createExcludedBreakpoints,
+  createInteractionBreakpoints,
+  createInteractionItem,
   createInteractionsProvider,
+  createNumber,
+  createString,
+  createTimingConfig,
+  extractBoolean,
+  extractExcludedBreakpoints,
+  extractSize,
+  extractString,
+  formatSizeValue,
+  generateTempInteractionId,
   getInteractionsConfig,
   init,
   interactionsRepository,
-  registerInteractionsControl
+  isTempId,
+  parseSizeValue,
+  registerInteractionsControl,
+  resolveDirection
 });
 //# sourceMappingURL=index.js.map