@elementor/editor-interactions 4.0.0-manual → 4.1.0-684

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/index.d.mts +85 -5
  2. package/dist/index.d.ts +85 -5
  3. package/dist/index.js +563 -217
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +515 -183
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +12 -11
  8. package/src/commands/get-clipboard-elements.ts +11 -0
  9. package/src/commands/paste-interactions.ts +136 -0
  10. package/src/components/controls/easing.tsx +3 -0
  11. package/src/components/controls/effect.tsx +3 -0
  12. package/src/components/controls/replay.tsx +3 -0
  13. package/src/components/controls/trigger.tsx +3 -0
  14. package/src/components/interaction-details.tsx +53 -1
  15. package/src/components/interactions-list.tsx +16 -3
  16. package/src/components/interactions-tab.tsx +4 -1
  17. package/src/contexts/interactions-context.tsx +4 -1
  18. package/src/hooks/use-element-interactions.ts +26 -0
  19. package/src/index.ts +25 -0
  20. package/src/init.ts +3 -1
  21. package/src/interactions-controls-registry.ts +15 -3
  22. package/src/mcp/tools/manage-element-interaction-tool.ts +40 -5
  23. package/src/types.ts +6 -1
  24. package/src/ui/interactions-promotion-chip.tsx +14 -4
  25. package/src/ui/promotion-select.tsx +4 -0
  26. package/src/utils/filter-interactions.ts +9 -0
  27. package/src/utils/get-interactions-config.ts +1 -11
  28. package/src/utils/is-supported-interaction-item.ts +39 -0
  29. package/src/utils/prop-value-utils.ts +35 -14
  30. package/src/utils/tracking.ts +42 -0
package/dist/index.d.mts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { RefObject, ComponentType } from 'react';
3
- import { ElementInteractions } from '@elementor/editor-elements';
3
+ import { Unit } from '@elementor/editor-controls';
4
+ import { ElementInteractions, InteractionItemPropValue, AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue, ElementID } from '@elementor/editor-elements';
4
5
  export { InteractionItemPropValue } from '@elementor/editor-elements';
5
- import { PropValue } from '@elementor/editor-props';
6
+ import { PropValue, SizePropValue } from '@elementor/editor-props';
6
7
 
7
8
  declare const EmptyState: ({ onCreateInteraction }: {
8
9
  onCreateInteraction: () => void;
@@ -17,7 +18,10 @@ type InteractionConstants = {
17
18
  defaultDelay: number;
18
19
  slideDistance: number;
19
20
  scaleStart: number;
20
- easing: string;
21
+ defaultEasing: string;
22
+ relativeTo: string;
23
+ start: number;
24
+ end: number;
21
25
  };
22
26
  type InteractionsConfig = {
23
27
  constants: InteractionConstants;
@@ -30,6 +34,8 @@ type FieldProps<T = string> = {
30
34
  anchorRef?: RefObject<HTMLElement | null>;
31
35
  };
32
36
  type ReplayFieldProps = FieldProps<boolean>;
37
+ type RepeatFieldProps = FieldProps<string>;
38
+ type TimesFieldProps = FieldProps<number>;
33
39
  type DirectionFieldProps = FieldProps<string> & {
34
40
  interactionType: string;
35
41
  };
@@ -46,6 +52,8 @@ type InteractionsProvider = {
46
52
  all: () => ElementInteractionData[];
47
53
  };
48
54
  };
55
+ type InteractionItemValue = InteractionItemPropValue['value'];
56
+ type SizeStringValue = `${number}${Unit}` | number;
49
57
 
50
58
  declare function getInteractionsConfig(): InteractionsConfig;
51
59
 
@@ -71,7 +79,7 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
71
79
 
72
80
  declare function init(): void;
73
81
 
74
- type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'start' | 'end' | 'customEffects';
82
+ type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'repeat' | 'times' | 'easing' | 'relativeTo' | 'start' | 'end' | 'customEffects';
75
83
  type InteractionsControlPropsMap = {
76
84
  trigger: FieldProps;
77
85
  effect: FieldProps;
@@ -81,6 +89,8 @@ type InteractionsControlPropsMap = {
81
89
  duration: FieldProps;
82
90
  delay: FieldProps;
83
91
  replay: ReplayFieldProps;
92
+ repeat: RepeatFieldProps;
93
+ times: TimesFieldProps;
84
94
  easing: FieldProps;
85
95
  relativeTo: FieldProps;
86
96
  start: FieldProps;
@@ -127,4 +137,74 @@ declare const EFFECT_OPTIONS: {
127
137
  };
128
138
  declare const BASE_EFFECTS: string[];
129
139
 
130
- 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 };
140
+ declare const createString: (value: string) => StringPropValue;
141
+ declare const createNumber: (value: number) => NumberPropValue;
142
+ declare const createTimingConfig: (duration: SizeStringValue, delay: SizeStringValue) => TimingConfigPropValue;
143
+ declare const createBoolean: (value: boolean) => BooleanPropValue;
144
+ declare const createConfig: ({ replay, easing, relativeTo, repeat, times, start, end, }: {
145
+ replay: boolean;
146
+ easing?: string;
147
+ relativeTo?: string;
148
+ repeat?: string;
149
+ times?: number;
150
+ start?: SizeStringValue;
151
+ end?: SizeStringValue;
152
+ }) => ConfigPropValue;
153
+ declare const extractBoolean: (prop: BooleanPropValue | undefined, fallback?: boolean) => boolean;
154
+ declare const createExcludedBreakpoints: (breakpoints: string[]) => ExcludedBreakpointsPropValue;
155
+ declare const createInteractionBreakpoints: (excluded: string[]) => InteractionBreakpointsPropValue;
156
+ declare const extractExcludedBreakpoints: (breakpoints: InteractionBreakpointsPropValue | undefined) => string[];
157
+ declare const createAnimationPreset: ({ effect, type, direction, duration, delay, replay, easing, relativeTo, repeat, times, start, end, customEffects, }: {
158
+ effect: string;
159
+ type: string;
160
+ direction?: string;
161
+ duration: SizeStringValue;
162
+ delay: SizeStringValue;
163
+ replay: boolean;
164
+ easing?: string;
165
+ relativeTo?: string;
166
+ repeat?: string;
167
+ times?: number;
168
+ start?: SizeStringValue;
169
+ end?: SizeStringValue;
170
+ customEffects?: PropValue;
171
+ }) => AnimationPresetPropValue;
172
+ declare const createInteractionItem: ({ trigger, effect, type, direction, duration, delay, interactionId, replay, easing, relativeTo, repeat, times, start, end, excludedBreakpoints, customEffects, }: {
173
+ trigger?: string;
174
+ effect?: string;
175
+ type?: string;
176
+ direction?: string;
177
+ duration?: SizeStringValue;
178
+ delay?: SizeStringValue;
179
+ interactionId?: string;
180
+ replay?: boolean;
181
+ easing?: string;
182
+ relativeTo?: string;
183
+ repeat?: string;
184
+ times?: number;
185
+ start?: number;
186
+ end?: number;
187
+ excludedBreakpoints?: string[];
188
+ customEffects?: PropValue;
189
+ }) => InteractionItemPropValue;
190
+ declare const createDefaultInteractionItem: () => InteractionItemPropValue;
191
+ declare const createDefaultInteractions: () => ElementInteractions;
192
+ declare const extractString: (prop: StringPropValue | undefined, fallback?: string) => string;
193
+ declare const extractSize: (prop?: SizePropValue, defaultValue?: SizeStringValue) => SizeStringValue;
194
+ declare const buildDisplayLabel: (item: InteractionItemValue) => string;
195
+
196
+ declare function generateTempInteractionId(): string;
197
+ declare function isTempId(id: string | undefined): boolean;
198
+
199
+ declare const resolveDirection: (hasDirection: boolean, newEffect?: string, newDirection?: string, currentDirection?: string, currentEffect?: string) => string | undefined;
200
+
201
+ declare const convertTimeUnit: (value: number, from: Unit, to: Unit) => number;
202
+
203
+ type SizeValue = SizePropValue['value'];
204
+ type SizeUnit = SizeValue['unit'];
205
+ declare const parseSizeValue: (value: SizeStringValue, allowedUnits: SizeUnit[], defaultValue?: SizeStringValue, defaultUnit?: Unit) => SizeValue;
206
+ declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
207
+
208
+ declare const useElementInteractions: (elementId: ElementID) => ElementInteractions;
209
+
210
+ 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, useElementInteractions };
package/dist/index.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { RefObject, ComponentType } from 'react';
3
- import { ElementInteractions } from '@elementor/editor-elements';
3
+ import { Unit } from '@elementor/editor-controls';
4
+ import { ElementInteractions, InteractionItemPropValue, AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue, ElementID } from '@elementor/editor-elements';
4
5
  export { InteractionItemPropValue } from '@elementor/editor-elements';
5
- import { PropValue } from '@elementor/editor-props';
6
+ import { PropValue, SizePropValue } from '@elementor/editor-props';
6
7
 
7
8
  declare const EmptyState: ({ onCreateInteraction }: {
8
9
  onCreateInteraction: () => void;
@@ -17,7 +18,10 @@ type InteractionConstants = {
17
18
  defaultDelay: number;
18
19
  slideDistance: number;
19
20
  scaleStart: number;
20
- easing: string;
21
+ defaultEasing: string;
22
+ relativeTo: string;
23
+ start: number;
24
+ end: number;
21
25
  };
22
26
  type InteractionsConfig = {
23
27
  constants: InteractionConstants;
@@ -30,6 +34,8 @@ type FieldProps<T = string> = {
30
34
  anchorRef?: RefObject<HTMLElement | null>;
31
35
  };
32
36
  type ReplayFieldProps = FieldProps<boolean>;
37
+ type RepeatFieldProps = FieldProps<string>;
38
+ type TimesFieldProps = FieldProps<number>;
33
39
  type DirectionFieldProps = FieldProps<string> & {
34
40
  interactionType: string;
35
41
  };
@@ -46,6 +52,8 @@ type InteractionsProvider = {
46
52
  all: () => ElementInteractionData[];
47
53
  };
48
54
  };
55
+ type InteractionItemValue = InteractionItemPropValue['value'];
56
+ type SizeStringValue = `${number}${Unit}` | number;
49
57
 
50
58
  declare function getInteractionsConfig(): InteractionsConfig;
51
59
 
@@ -71,7 +79,7 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
71
79
 
72
80
  declare function init(): void;
73
81
 
74
- type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'start' | 'end' | 'customEffects';
82
+ type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'repeat' | 'times' | 'easing' | 'relativeTo' | 'start' | 'end' | 'customEffects';
75
83
  type InteractionsControlPropsMap = {
76
84
  trigger: FieldProps;
77
85
  effect: FieldProps;
@@ -81,6 +89,8 @@ type InteractionsControlPropsMap = {
81
89
  duration: FieldProps;
82
90
  delay: FieldProps;
83
91
  replay: ReplayFieldProps;
92
+ repeat: RepeatFieldProps;
93
+ times: TimesFieldProps;
84
94
  easing: FieldProps;
85
95
  relativeTo: FieldProps;
86
96
  start: FieldProps;
@@ -127,4 +137,74 @@ declare const EFFECT_OPTIONS: {
127
137
  };
128
138
  declare const BASE_EFFECTS: string[];
129
139
 
130
- 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 };
140
+ declare const createString: (value: string) => StringPropValue;
141
+ declare const createNumber: (value: number) => NumberPropValue;
142
+ declare const createTimingConfig: (duration: SizeStringValue, delay: SizeStringValue) => TimingConfigPropValue;
143
+ declare const createBoolean: (value: boolean) => BooleanPropValue;
144
+ declare const createConfig: ({ replay, easing, relativeTo, repeat, times, start, end, }: {
145
+ replay: boolean;
146
+ easing?: string;
147
+ relativeTo?: string;
148
+ repeat?: string;
149
+ times?: number;
150
+ start?: SizeStringValue;
151
+ end?: SizeStringValue;
152
+ }) => ConfigPropValue;
153
+ declare const extractBoolean: (prop: BooleanPropValue | undefined, fallback?: boolean) => boolean;
154
+ declare const createExcludedBreakpoints: (breakpoints: string[]) => ExcludedBreakpointsPropValue;
155
+ declare const createInteractionBreakpoints: (excluded: string[]) => InteractionBreakpointsPropValue;
156
+ declare const extractExcludedBreakpoints: (breakpoints: InteractionBreakpointsPropValue | undefined) => string[];
157
+ declare const createAnimationPreset: ({ effect, type, direction, duration, delay, replay, easing, relativeTo, repeat, times, start, end, customEffects, }: {
158
+ effect: string;
159
+ type: string;
160
+ direction?: string;
161
+ duration: SizeStringValue;
162
+ delay: SizeStringValue;
163
+ replay: boolean;
164
+ easing?: string;
165
+ relativeTo?: string;
166
+ repeat?: string;
167
+ times?: number;
168
+ start?: SizeStringValue;
169
+ end?: SizeStringValue;
170
+ customEffects?: PropValue;
171
+ }) => AnimationPresetPropValue;
172
+ declare const createInteractionItem: ({ trigger, effect, type, direction, duration, delay, interactionId, replay, easing, relativeTo, repeat, times, start, end, excludedBreakpoints, customEffects, }: {
173
+ trigger?: string;
174
+ effect?: string;
175
+ type?: string;
176
+ direction?: string;
177
+ duration?: SizeStringValue;
178
+ delay?: SizeStringValue;
179
+ interactionId?: string;
180
+ replay?: boolean;
181
+ easing?: string;
182
+ relativeTo?: string;
183
+ repeat?: string;
184
+ times?: number;
185
+ start?: number;
186
+ end?: number;
187
+ excludedBreakpoints?: string[];
188
+ customEffects?: PropValue;
189
+ }) => InteractionItemPropValue;
190
+ declare const createDefaultInteractionItem: () => InteractionItemPropValue;
191
+ declare const createDefaultInteractions: () => ElementInteractions;
192
+ declare const extractString: (prop: StringPropValue | undefined, fallback?: string) => string;
193
+ declare const extractSize: (prop?: SizePropValue, defaultValue?: SizeStringValue) => SizeStringValue;
194
+ declare const buildDisplayLabel: (item: InteractionItemValue) => string;
195
+
196
+ declare function generateTempInteractionId(): string;
197
+ declare function isTempId(id: string | undefined): boolean;
198
+
199
+ declare const resolveDirection: (hasDirection: boolean, newEffect?: string, newDirection?: string, currentDirection?: string, currentEffect?: string) => string | undefined;
200
+
201
+ declare const convertTimeUnit: (value: number, from: Unit, to: Unit) => number;
202
+
203
+ type SizeValue = SizePropValue['value'];
204
+ type SizeUnit = SizeValue['unit'];
205
+ declare const parseSizeValue: (value: SizeStringValue, allowedUnits: SizeUnit[], defaultValue?: SizeStringValue, defaultUnit?: Unit) => SizeValue;
206
+ declare const formatSizeValue: ({ size, unit }: SizeValue) => SizeStringValue;
207
+
208
+ declare const useElementInteractions: (elementId: ElementID) => ElementInteractions;
209
+
210
+ 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, useElementInteractions };