@elementor/editor-interactions 4.0.0-564 → 4.0.0-591

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 (20) hide show
  1. package/dist/index.d.mts +39 -17
  2. package/dist/index.d.ts +39 -17
  3. package/dist/index.js +377 -187
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +350 -166
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +9 -9
  8. package/src/components/controls/easing.tsx +19 -18
  9. package/src/components/controls/effect.tsx +3 -1
  10. package/src/components/controls/replay.tsx +31 -4
  11. package/src/components/controls/trigger.tsx +28 -25
  12. package/src/components/field.tsx +1 -1
  13. package/src/components/interaction-details.tsx +143 -106
  14. package/src/index.ts +4 -2
  15. package/src/init.ts +15 -0
  16. package/src/interactions-controls-registry.ts +4 -1
  17. package/src/types.ts +8 -9
  18. package/src/ui/interactions-promotion-chip.tsx +58 -0
  19. package/src/ui/promotion-select.tsx +75 -0
  20. package/src/utils/prop-value-utils.ts +7 -1
package/dist/index.d.mts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
- import { ComponentType } from 'react';
3
- import { Unit } from '@elementor/editor-controls';
4
- import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
5
- export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
2
+ import { RefObject, ComponentType } from 'react';
3
+ import { ElementInteractions } from '@elementor/editor-elements';
4
+ export { InteractionItemPropValue } from '@elementor/editor-elements';
5
+ import { PropValue } from '@elementor/editor-props';
6
6
 
7
7
  declare const EmptyState: ({ onCreateInteraction }: {
8
8
  onCreateInteraction: () => void;
@@ -27,17 +27,15 @@ type InteractionsConfig = {
27
27
  constants: InteractionConstants;
28
28
  animationOptions: AnimationOption[];
29
29
  };
30
- type FieldProps = {
31
- value: string;
32
- onChange: (value: string) => void;
30
+ type FieldProps<T = string> = {
31
+ value: T;
32
+ onChange: (value: T) => void;
33
33
  label?: string;
34
- };
35
- type ReplayFieldProps = {
36
- value: boolean;
37
- onChange: (value: boolean) => void;
38
34
  disabled?: boolean;
35
+ anchorRef?: RefObject<HTMLElement | null>;
39
36
  };
40
- type DirectionFieldProps = FieldProps & {
37
+ type ReplayFieldProps = FieldProps<boolean>;
38
+ type DirectionFieldProps = FieldProps<string> & {
41
39
  interactionType: string;
42
40
  };
43
41
  type ElementInteractionData = {
@@ -45,7 +43,6 @@ type ElementInteractionData = {
45
43
  dataId: string;
46
44
  interactions: ElementInteractions;
47
45
  };
48
- type InteractionsCollection = ElementInteractionData[];
49
46
  type InteractionsProvider = {
50
47
  getKey: () => string;
51
48
  priority: number;
@@ -54,8 +51,6 @@ type InteractionsProvider = {
54
51
  all: () => ElementInteractionData[];
55
52
  };
56
53
  };
57
- type InteractionItemValue = InteractionItemPropValue['value'];
58
- type SizeStringValue = `${number}${Unit}` | number;
59
54
 
60
55
  declare function getInteractionsConfig(): InteractionsConfig;
61
56
 
@@ -81,10 +76,11 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
81
76
 
82
77
  declare function init(): void;
83
78
 
84
- type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'offsetTop' | 'offsetBottom';
79
+ type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'offsetTop' | 'offsetBottom' | 'customEffects';
85
80
  type InteractionsControlPropsMap = {
86
81
  trigger: FieldProps;
87
82
  effect: FieldProps;
83
+ customEffects?: FieldProps<PropValue>;
88
84
  effectType: FieldProps;
89
85
  direction: DirectionFieldProps;
90
86
  duration: FieldProps;
@@ -102,4 +98,30 @@ type ControlOptions<T extends InteractionsControlType> = {
102
98
  };
103
99
  declare function registerInteractionsControl<T extends InteractionsControlType>({ type, component, options, }: ControlOptions<T>): void;
104
100
 
105
- 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 SizeStringValue, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };
101
+ declare const TRIGGER_OPTIONS: {
102
+ load: string;
103
+ scrollIn: string;
104
+ scrollOn: string;
105
+ hover: string;
106
+ click: string;
107
+ };
108
+ declare const BASE_TRIGGERS: string[];
109
+
110
+ declare const EASING_OPTIONS: {
111
+ easeIn: string;
112
+ easeInOut: string;
113
+ easeOut: string;
114
+ backIn: string;
115
+ backInOut: string;
116
+ backOut: string;
117
+ linear: string;
118
+ };
119
+ declare const BASE_EASINGS: string[];
120
+
121
+ declare const REPLAY_OPTIONS: {
122
+ no: string;
123
+ yes: string;
124
+ };
125
+ declare const BASE_REPLAY: string[];
126
+
127
+ export { BASE_EASINGS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };
package/dist/index.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
- import { ComponentType } from 'react';
3
- import { Unit } from '@elementor/editor-controls';
4
- import { ElementInteractions, InteractionItemPropValue } from '@elementor/editor-elements';
5
- export { AnimationPresetPropValue, BooleanPropValue, ConfigPropValue, ElementInteractions, ExcludedBreakpointsPropValue, InteractionBreakpointsPropValue, InteractionItemPropValue, NumberPropValue, StringPropValue, TimingConfigPropValue } from '@elementor/editor-elements';
2
+ import { RefObject, ComponentType } from 'react';
3
+ import { ElementInteractions } from '@elementor/editor-elements';
4
+ export { InteractionItemPropValue } from '@elementor/editor-elements';
5
+ import { PropValue } from '@elementor/editor-props';
6
6
 
7
7
  declare const EmptyState: ({ onCreateInteraction }: {
8
8
  onCreateInteraction: () => void;
@@ -27,17 +27,15 @@ type InteractionsConfig = {
27
27
  constants: InteractionConstants;
28
28
  animationOptions: AnimationOption[];
29
29
  };
30
- type FieldProps = {
31
- value: string;
32
- onChange: (value: string) => void;
30
+ type FieldProps<T = string> = {
31
+ value: T;
32
+ onChange: (value: T) => void;
33
33
  label?: string;
34
- };
35
- type ReplayFieldProps = {
36
- value: boolean;
37
- onChange: (value: boolean) => void;
38
34
  disabled?: boolean;
35
+ anchorRef?: RefObject<HTMLElement | null>;
39
36
  };
40
- type DirectionFieldProps = FieldProps & {
37
+ type ReplayFieldProps = FieldProps<boolean>;
38
+ type DirectionFieldProps = FieldProps<string> & {
41
39
  interactionType: string;
42
40
  };
43
41
  type ElementInteractionData = {
@@ -45,7 +43,6 @@ type ElementInteractionData = {
45
43
  dataId: string;
46
44
  interactions: ElementInteractions;
47
45
  };
48
- type InteractionsCollection = ElementInteractionData[];
49
46
  type InteractionsProvider = {
50
47
  getKey: () => string;
51
48
  priority: number;
@@ -54,8 +51,6 @@ type InteractionsProvider = {
54
51
  all: () => ElementInteractionData[];
55
52
  };
56
53
  };
57
- type InteractionItemValue = InteractionItemPropValue['value'];
58
- type SizeStringValue = `${number}${Unit}` | number;
59
54
 
60
55
  declare function getInteractionsConfig(): InteractionsConfig;
61
56
 
@@ -81,10 +76,11 @@ declare const ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-int
81
76
 
82
77
  declare function init(): void;
83
78
 
84
- type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'offsetTop' | 'offsetBottom';
79
+ type InteractionsControlType = 'trigger' | 'effect' | 'effectType' | 'direction' | 'duration' | 'delay' | 'replay' | 'easing' | 'relativeTo' | 'offsetTop' | 'offsetBottom' | 'customEffects';
85
80
  type InteractionsControlPropsMap = {
86
81
  trigger: FieldProps;
87
82
  effect: FieldProps;
83
+ customEffects?: FieldProps<PropValue>;
88
84
  effectType: FieldProps;
89
85
  direction: DirectionFieldProps;
90
86
  duration: FieldProps;
@@ -102,4 +98,30 @@ type ControlOptions<T extends InteractionsControlType> = {
102
98
  };
103
99
  declare function registerInteractionsControl<T extends InteractionsControlType>({ type, component, options, }: ControlOptions<T>): void;
104
100
 
105
- 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 SizeStringValue, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };
101
+ declare const TRIGGER_OPTIONS: {
102
+ load: string;
103
+ scrollIn: string;
104
+ scrollOn: string;
105
+ hover: string;
106
+ click: string;
107
+ };
108
+ declare const BASE_TRIGGERS: string[];
109
+
110
+ declare const EASING_OPTIONS: {
111
+ easeIn: string;
112
+ easeInOut: string;
113
+ easeOut: string;
114
+ backIn: string;
115
+ backInOut: string;
116
+ backOut: string;
117
+ linear: string;
118
+ };
119
+ declare const BASE_EASINGS: string[];
120
+
121
+ declare const REPLAY_OPTIONS: {
122
+ no: string;
123
+ yes: string;
124
+ };
125
+ declare const BASE_REPLAY: string[];
126
+
127
+ export { BASE_EASINGS, BASE_REPLAY, BASE_TRIGGERS, type CreateInteractionsProviderOptions, EASING_OPTIONS, ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX, EmptyState, type FieldProps, InteractionsTab, REPLAY_OPTIONS, type ReplayFieldProps, TRIGGER_OPTIONS, createInteractionsProvider, getInteractionsConfig, init, interactionsRepository, registerInteractionsControl };