@elementor/editor-interactions 3.33.0-227 → 3.33.0-228
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.
- package/dist/index.d.mts +4 -17
- package/dist/index.d.ts +4 -17
- package/dist/index.js +144 -62
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +131 -47
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -3
- package/src/components/controls/direction.tsx +1 -1
- package/src/components/controls/effect-type.tsx +1 -1
- package/src/components/interactions-list.tsx +1 -1
- package/src/components/interactions-tab.tsx +81 -0
- package/src/contexts/interactions-context.tsx +36 -0
- package/src/index.ts +1 -2
- /package/src/contexts/{popup-state-contex.tsx → popup-state-context.tsx} +0 -0
package/dist/index.d.mts
CHANGED
|
@@ -4,12 +4,9 @@ declare const EmptyState: ({ onCreateInteraction }: {
|
|
|
4
4
|
onCreateInteraction: () => void;
|
|
5
5
|
}) => React.JSX.Element;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
onDelete?: () => void;
|
|
11
|
-
};
|
|
12
|
-
declare const PredefinedInteractionsList: ({ onSelectInteraction, selectedInteraction, onDelete, }: PredefinedInteractionsListProps) => React.JSX.Element;
|
|
7
|
+
declare const InteractionsTab: ({ elementId }: {
|
|
8
|
+
elementId: string;
|
|
9
|
+
}) => React.JSX.Element;
|
|
13
10
|
|
|
14
11
|
type AnimationOption = {
|
|
15
12
|
value: string;
|
|
@@ -34,14 +31,4 @@ type FieldProps = {
|
|
|
34
31
|
|
|
35
32
|
declare function getInteractionsConfig(): InteractionsConfig;
|
|
36
33
|
|
|
37
|
-
type
|
|
38
|
-
openByDefault: boolean;
|
|
39
|
-
triggerDefaultOpen: () => void;
|
|
40
|
-
resetDefaultOpen: () => void;
|
|
41
|
-
};
|
|
42
|
-
declare const PopupStateProvider: ({ children }: {
|
|
43
|
-
children: React.ReactNode;
|
|
44
|
-
}) => React.JSX.Element;
|
|
45
|
-
declare const usePopupStateContext: () => PopupStateContextType;
|
|
46
|
-
|
|
47
|
-
export { type AnimationOption, EmptyState, type FieldProps, type InteractionConstants, type InteractionsConfig, PopupStateProvider, PredefinedInteractionsList, getInteractionsConfig, usePopupStateContext };
|
|
34
|
+
export { type AnimationOption, EmptyState, type FieldProps, type InteractionConstants, type InteractionsConfig, InteractionsTab, getInteractionsConfig };
|
package/dist/index.d.ts
CHANGED
|
@@ -4,12 +4,9 @@ declare const EmptyState: ({ onCreateInteraction }: {
|
|
|
4
4
|
onCreateInteraction: () => void;
|
|
5
5
|
}) => React.JSX.Element;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
onDelete?: () => void;
|
|
11
|
-
};
|
|
12
|
-
declare const PredefinedInteractionsList: ({ onSelectInteraction, selectedInteraction, onDelete, }: PredefinedInteractionsListProps) => React.JSX.Element;
|
|
7
|
+
declare const InteractionsTab: ({ elementId }: {
|
|
8
|
+
elementId: string;
|
|
9
|
+
}) => React.JSX.Element;
|
|
13
10
|
|
|
14
11
|
type AnimationOption = {
|
|
15
12
|
value: string;
|
|
@@ -34,14 +31,4 @@ type FieldProps = {
|
|
|
34
31
|
|
|
35
32
|
declare function getInteractionsConfig(): InteractionsConfig;
|
|
36
33
|
|
|
37
|
-
type
|
|
38
|
-
openByDefault: boolean;
|
|
39
|
-
triggerDefaultOpen: () => void;
|
|
40
|
-
resetDefaultOpen: () => void;
|
|
41
|
-
};
|
|
42
|
-
declare const PopupStateProvider: ({ children }: {
|
|
43
|
-
children: React.ReactNode;
|
|
44
|
-
}) => React.JSX.Element;
|
|
45
|
-
declare const usePopupStateContext: () => PopupStateContextType;
|
|
46
|
-
|
|
47
|
-
export { type AnimationOption, EmptyState, type FieldProps, type InteractionConstants, type InteractionsConfig, PopupStateProvider, PredefinedInteractionsList, getInteractionsConfig, usePopupStateContext };
|
|
34
|
+
export { type AnimationOption, EmptyState, type FieldProps, type InteractionConstants, type InteractionsConfig, InteractionsTab, getInteractionsConfig };
|
package/dist/index.js
CHANGED
|
@@ -31,10 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
EmptyState: () => EmptyState,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
getInteractionsConfig: () => getInteractionsConfig,
|
|
37
|
-
usePopupStateContext: () => usePopupStateContext
|
|
34
|
+
InteractionsTab: () => InteractionsTab,
|
|
35
|
+
getInteractionsConfig: () => getInteractionsConfig
|
|
38
36
|
});
|
|
39
37
|
module.exports = __toCommonJS(index_exports);
|
|
40
38
|
|
|
@@ -64,35 +62,68 @@ var EmptyState = ({ onCreateInteraction }) => {
|
|
|
64
62
|
);
|
|
65
63
|
};
|
|
66
64
|
|
|
67
|
-
// src/components/interactions-
|
|
68
|
-
var
|
|
69
|
-
var
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var import_i18n8 = require("@wordpress/i18n");
|
|
65
|
+
// src/components/interactions-tab.tsx
|
|
66
|
+
var React12 = __toESM(require("react"));
|
|
67
|
+
var import_react5 = require("react");
|
|
68
|
+
var import_editor_elements2 = require("@elementor/editor-elements");
|
|
69
|
+
var import_session = require("@elementor/session");
|
|
73
70
|
|
|
74
|
-
// src/contexts/
|
|
71
|
+
// src/contexts/interactions-context.tsx
|
|
75
72
|
var React2 = __toESM(require("react"));
|
|
76
73
|
var import_react = require("react");
|
|
77
|
-
var
|
|
74
|
+
var import_editor_elements = require("@elementor/editor-elements");
|
|
75
|
+
var InteractionsContext = (0, import_react.createContext)(null);
|
|
76
|
+
var InteractionsProvider = ({ children, elementId }) => {
|
|
77
|
+
const interactions = (0, import_editor_elements.useElementInteractions)(elementId);
|
|
78
|
+
const setInteractions = (value) => {
|
|
79
|
+
(0, import_editor_elements.updateElementInteractions)({
|
|
80
|
+
elementId,
|
|
81
|
+
interactions: value
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
const contextValue = {
|
|
85
|
+
interactions: interactions || "",
|
|
86
|
+
setInteractions
|
|
87
|
+
};
|
|
88
|
+
return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
|
|
89
|
+
};
|
|
90
|
+
var useInteractionsContext = () => {
|
|
91
|
+
const context = (0, import_react.useContext)(InteractionsContext);
|
|
92
|
+
if (!context) {
|
|
93
|
+
throw new Error("useInteractionsContext must be used within InteractionsProvider");
|
|
94
|
+
}
|
|
95
|
+
return context;
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
// src/contexts/popup-state-context.tsx
|
|
99
|
+
var React3 = __toESM(require("react"));
|
|
100
|
+
var import_react2 = require("react");
|
|
101
|
+
var PopupStateContext = (0, import_react2.createContext)(void 0);
|
|
78
102
|
var PopupStateProvider = ({ children }) => {
|
|
79
|
-
const [openByDefault, setOpenByDefault] = (0,
|
|
80
|
-
const triggerDefaultOpen = (0,
|
|
103
|
+
const [openByDefault, setOpenByDefault] = (0, import_react2.useState)(false);
|
|
104
|
+
const triggerDefaultOpen = (0, import_react2.useCallback)(() => {
|
|
81
105
|
setOpenByDefault(true);
|
|
82
106
|
}, []);
|
|
83
|
-
const resetDefaultOpen = (0,
|
|
107
|
+
const resetDefaultOpen = (0, import_react2.useCallback)(() => {
|
|
84
108
|
setOpenByDefault(false);
|
|
85
109
|
}, []);
|
|
86
|
-
return /* @__PURE__ */
|
|
110
|
+
return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
|
|
87
111
|
};
|
|
88
112
|
var usePopupStateContext = () => {
|
|
89
|
-
const context = (0,
|
|
113
|
+
const context = (0, import_react2.useContext)(PopupStateContext);
|
|
90
114
|
if (!context) {
|
|
91
115
|
throw new Error("usePopupStateContext must be used within PopupStateProvider");
|
|
92
116
|
}
|
|
93
117
|
return context;
|
|
94
118
|
};
|
|
95
119
|
|
|
120
|
+
// src/components/interactions-list.tsx
|
|
121
|
+
var React11 = __toESM(require("react"));
|
|
122
|
+
var import_react4 = require("react");
|
|
123
|
+
var import_icons4 = require("@elementor/icons");
|
|
124
|
+
var import_ui9 = require("@elementor/ui");
|
|
125
|
+
var import_i18n8 = require("@wordpress/i18n");
|
|
126
|
+
|
|
96
127
|
// src/utils/get-interactions-config.ts
|
|
97
128
|
var DEFAULT_CONFIG = {
|
|
98
129
|
constants: {
|
|
@@ -132,11 +163,11 @@ function formatInteractionLabel(animationId) {
|
|
|
132
163
|
}
|
|
133
164
|
|
|
134
165
|
// src/components/header.tsx
|
|
135
|
-
var
|
|
166
|
+
var React4 = __toESM(require("react"));
|
|
136
167
|
var import_icons2 = require("@elementor/icons");
|
|
137
168
|
var import_ui2 = require("@elementor/ui");
|
|
138
169
|
var Header = ({ label }) => {
|
|
139
|
-
return /* @__PURE__ */
|
|
170
|
+
return /* @__PURE__ */ React4.createElement(
|
|
140
171
|
import_ui2.Stack,
|
|
141
172
|
{
|
|
142
173
|
direction: "row",
|
|
@@ -145,30 +176,30 @@ var Header = ({ label }) => {
|
|
|
145
176
|
gap: 1,
|
|
146
177
|
sx: { marginInlineEnd: -0.75, py: 0.25 }
|
|
147
178
|
},
|
|
148
|
-
/* @__PURE__ */
|
|
149
|
-
/* @__PURE__ */
|
|
179
|
+
/* @__PURE__ */ React4.createElement(import_ui2.Typography, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label),
|
|
180
|
+
/* @__PURE__ */ React4.createElement(import_ui2.IconButton, { size: "tiny", disabled: true }, /* @__PURE__ */ React4.createElement(import_icons2.PlusIcon, { fontSize: "tiny" }))
|
|
150
181
|
);
|
|
151
182
|
};
|
|
152
183
|
|
|
153
184
|
// src/components/interaction-details.tsx
|
|
154
|
-
var
|
|
155
|
-
var
|
|
185
|
+
var React10 = __toESM(require("react"));
|
|
186
|
+
var import_react3 = require("react");
|
|
156
187
|
var import_ui8 = require("@elementor/ui");
|
|
157
188
|
var import_i18n7 = require("@wordpress/i18n");
|
|
158
189
|
|
|
159
190
|
// src/components/controls/direction.tsx
|
|
160
|
-
var
|
|
191
|
+
var React5 = __toESM(require("react"));
|
|
161
192
|
var import_icons3 = require("@elementor/icons");
|
|
162
193
|
var import_ui3 = require("@elementor/ui");
|
|
163
194
|
var import_i18n2 = require("@wordpress/i18n");
|
|
164
195
|
function Direction({ value, onChange }) {
|
|
165
196
|
const availableDirections = [
|
|
166
|
-
{ key: "top", label: (0, import_i18n2.__)("Up", "elementor"), icon: /* @__PURE__ */
|
|
167
|
-
{ key: "bottom", label: (0, import_i18n2.__)("Down", "elementor"), icon: /* @__PURE__ */
|
|
168
|
-
{ key: "left", label: (0, import_i18n2.__)("Left", "elementor"), icon: /* @__PURE__ */
|
|
169
|
-
{ key: "right", label: (0, import_i18n2.__)("Right", "elementor"), icon: /* @__PURE__ */
|
|
197
|
+
{ key: "top", label: (0, import_i18n2.__)("Up", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: "tiny" }) },
|
|
198
|
+
{ key: "bottom", label: (0, import_i18n2.__)("Down", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: "tiny" }) },
|
|
199
|
+
{ key: "left", label: (0, import_i18n2.__)("Left", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowLeftIcon, { fontSize: "tiny" }) },
|
|
200
|
+
{ key: "right", label: (0, import_i18n2.__)("Right", "elementor"), icon: /* @__PURE__ */ React5.createElement(import_icons3.ArrowRightIcon, { fontSize: "tiny" }) }
|
|
170
201
|
];
|
|
171
|
-
return /* @__PURE__ */
|
|
202
|
+
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React5.createElement(import_ui3.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n2.__)("Direction", "elementor"))), /* @__PURE__ */ React5.createElement(import_ui3.Grid, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React5.createElement(
|
|
172
203
|
import_ui3.ToggleButtonGroup,
|
|
173
204
|
{
|
|
174
205
|
size: "tiny",
|
|
@@ -177,13 +208,13 @@ function Direction({ value, onChange }) {
|
|
|
177
208
|
value
|
|
178
209
|
},
|
|
179
210
|
availableDirections.map((direction) => {
|
|
180
|
-
return /* @__PURE__ */
|
|
211
|
+
return /* @__PURE__ */ React5.createElement(import_ui3.Tooltip, { key: direction.key, title: direction.label, placement: "top" }, /* @__PURE__ */ React5.createElement(import_ui3.ToggleButton, { key: direction.key, value: direction.key }, direction.icon));
|
|
181
212
|
})
|
|
182
213
|
)));
|
|
183
214
|
}
|
|
184
215
|
|
|
185
216
|
// src/components/controls/effect.tsx
|
|
186
|
-
var
|
|
217
|
+
var React6 = __toESM(require("react"));
|
|
187
218
|
var import_editor_ui = require("@elementor/editor-ui");
|
|
188
219
|
var import_ui4 = require("@elementor/ui");
|
|
189
220
|
var import_i18n3 = require("@wordpress/i18n");
|
|
@@ -193,7 +224,7 @@ function Effect({ value, onChange }) {
|
|
|
193
224
|
{ key: "slide", label: (0, import_i18n3.__)("Slide", "elementor") },
|
|
194
225
|
{ key: "scale", label: (0, import_i18n3.__)("Scale", "elementor") }
|
|
195
226
|
];
|
|
196
|
-
return /* @__PURE__ */
|
|
227
|
+
return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(import_ui4.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n3.__)("Effect", "elementor"))), /* @__PURE__ */ React6.createElement(import_ui4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(
|
|
197
228
|
import_ui4.Select,
|
|
198
229
|
{
|
|
199
230
|
fullWidth: true,
|
|
@@ -203,13 +234,13 @@ function Effect({ value, onChange }) {
|
|
|
203
234
|
onChange: (event) => onChange(event.target.value)
|
|
204
235
|
},
|
|
205
236
|
availableEffects.map((effect) => {
|
|
206
|
-
return /* @__PURE__ */
|
|
237
|
+
return /* @__PURE__ */ React6.createElement(import_editor_ui.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
|
|
207
238
|
})
|
|
208
239
|
)));
|
|
209
240
|
}
|
|
210
241
|
|
|
211
242
|
// src/components/controls/effect-type.tsx
|
|
212
|
-
var
|
|
243
|
+
var React7 = __toESM(require("react"));
|
|
213
244
|
var import_ui5 = require("@elementor/ui");
|
|
214
245
|
var import_i18n4 = require("@wordpress/i18n");
|
|
215
246
|
function EffectType({ value, onChange }) {
|
|
@@ -217,7 +248,7 @@ function EffectType({ value, onChange }) {
|
|
|
217
248
|
{ key: "in", label: (0, import_i18n4.__)("In", "elementor") },
|
|
218
249
|
{ key: "out", label: (0, import_i18n4.__)("Out", "elementor") }
|
|
219
250
|
];
|
|
220
|
-
return /* @__PURE__ */
|
|
251
|
+
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(import_ui5.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)("Type", "elementor"))), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12, md: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React7.createElement(
|
|
221
252
|
import_ui5.ToggleButtonGroup,
|
|
222
253
|
{
|
|
223
254
|
size: "tiny",
|
|
@@ -226,13 +257,13 @@ function EffectType({ value, onChange }) {
|
|
|
226
257
|
value
|
|
227
258
|
},
|
|
228
259
|
availableEffectTypes.map((effectType) => {
|
|
229
|
-
return /* @__PURE__ */
|
|
260
|
+
return /* @__PURE__ */ React7.createElement(import_ui5.Tooltip, { key: effectType.key, title: effectType.label, placement: "top" }, /* @__PURE__ */ React7.createElement(import_ui5.ToggleButton, { key: effectType.key, value: effectType.key }, effectType.label));
|
|
230
261
|
})
|
|
231
262
|
)));
|
|
232
263
|
}
|
|
233
264
|
|
|
234
265
|
// src/components/controls/time-frame-indicator.tsx
|
|
235
|
-
var
|
|
266
|
+
var React8 = __toESM(require("react"));
|
|
236
267
|
var import_editor_ui2 = require("@elementor/editor-ui");
|
|
237
268
|
var import_ui6 = require("@elementor/ui");
|
|
238
269
|
var import_i18n5 = require("@wordpress/i18n");
|
|
@@ -244,7 +275,7 @@ function TimeFrameIndicator({ value, onChange, label }) {
|
|
|
244
275
|
label: (0, import_i18n5.__)("%s MS", "elementor").replace("%s", key)
|
|
245
276
|
})
|
|
246
277
|
);
|
|
247
|
-
return /* @__PURE__ */
|
|
278
|
+
return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(import_ui6.Typography, { variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React8.createElement(import_ui6.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React8.createElement(
|
|
248
279
|
import_ui6.Select,
|
|
249
280
|
{
|
|
250
281
|
fullWidth: true,
|
|
@@ -254,13 +285,13 @@ function TimeFrameIndicator({ value, onChange, label }) {
|
|
|
254
285
|
onChange: (event) => onChange(event.target.value)
|
|
255
286
|
},
|
|
256
287
|
availableTimeFrames.map((timeFrame) => {
|
|
257
|
-
return /* @__PURE__ */
|
|
288
|
+
return /* @__PURE__ */ React8.createElement(import_editor_ui2.MenuListItem, { key: timeFrame.key, value: timeFrame.key }, timeFrame.label);
|
|
258
289
|
})
|
|
259
290
|
)));
|
|
260
291
|
}
|
|
261
292
|
|
|
262
293
|
// src/components/controls/trigger.tsx
|
|
263
|
-
var
|
|
294
|
+
var React9 = __toESM(require("react"));
|
|
264
295
|
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
265
296
|
var import_ui7 = require("@elementor/ui");
|
|
266
297
|
var import_i18n6 = require("@wordpress/i18n");
|
|
@@ -273,7 +304,7 @@ function Trigger({ value, onChange }) {
|
|
|
273
304
|
key,
|
|
274
305
|
label
|
|
275
306
|
}));
|
|
276
|
-
return /* @__PURE__ */
|
|
307
|
+
return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui7.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n6.__)("Trigger", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui7.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React9.createElement(
|
|
277
308
|
import_ui7.Select,
|
|
278
309
|
{
|
|
279
310
|
fullWidth: true,
|
|
@@ -283,7 +314,7 @@ function Trigger({ value, onChange }) {
|
|
|
283
314
|
value
|
|
284
315
|
},
|
|
285
316
|
availableTriggers.map((trigger) => {
|
|
286
|
-
return /* @__PURE__ */
|
|
317
|
+
return /* @__PURE__ */ React9.createElement(import_editor_ui3.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
|
|
287
318
|
})
|
|
288
319
|
)));
|
|
289
320
|
}
|
|
@@ -291,7 +322,7 @@ function Trigger({ value, onChange }) {
|
|
|
291
322
|
// src/components/interaction-details.tsx
|
|
292
323
|
var DELIMITER = "-";
|
|
293
324
|
var InteractionDetails = ({ interaction, onChange }) => {
|
|
294
|
-
const [interactionDetails, setInteractionDetails] = (0,
|
|
325
|
+
const [interactionDetails, setInteractionDetails] = (0, import_react3.useState)(() => {
|
|
295
326
|
const [trigger, effect, type, direction, duration, delay] = interaction.split(DELIMITER);
|
|
296
327
|
return {
|
|
297
328
|
trigger: trigger || "load",
|
|
@@ -302,27 +333,27 @@ var InteractionDetails = ({ interaction, onChange }) => {
|
|
|
302
333
|
delay: delay || "0"
|
|
303
334
|
};
|
|
304
335
|
});
|
|
305
|
-
(0,
|
|
336
|
+
(0, import_react3.useEffect)(() => {
|
|
306
337
|
const newValue = Object.values(interactionDetails).join(DELIMITER);
|
|
307
338
|
onChange(newValue);
|
|
308
339
|
}, [interactionDetails, onChange]);
|
|
309
340
|
const handleChange = (key, value) => {
|
|
310
341
|
setInteractionDetails((prev) => ({ ...prev, [key]: value }));
|
|
311
342
|
};
|
|
312
|
-
return /* @__PURE__ */
|
|
343
|
+
return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui8.Grid, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__PURE__ */ React10.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React10.createElement(import_ui8.Divider, null), /* @__PURE__ */ React10.createElement(import_ui8.Grid, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__PURE__ */ React10.createElement(Effect, { value: interactionDetails.effect, onChange: (v) => handleChange("effect", v) }), /* @__PURE__ */ React10.createElement(EffectType, { value: interactionDetails.type, onChange: (v) => handleChange("type", v) }), /* @__PURE__ */ React10.createElement(
|
|
313
344
|
Direction,
|
|
314
345
|
{
|
|
315
346
|
value: interactionDetails.direction ?? "",
|
|
316
347
|
onChange: (v) => handleChange("direction", v)
|
|
317
348
|
}
|
|
318
|
-
), /* @__PURE__ */
|
|
349
|
+
), /* @__PURE__ */ React10.createElement(
|
|
319
350
|
TimeFrameIndicator,
|
|
320
351
|
{
|
|
321
352
|
value: interactionDetails.duration,
|
|
322
353
|
onChange: (v) => handleChange("duration", v),
|
|
323
354
|
label: (0, import_i18n7.__)("Duration", "elementor")
|
|
324
355
|
}
|
|
325
|
-
), /* @__PURE__ */
|
|
356
|
+
), /* @__PURE__ */ React10.createElement(
|
|
326
357
|
TimeFrameIndicator,
|
|
327
358
|
{
|
|
328
359
|
value: interactionDetails.delay,
|
|
@@ -338,7 +369,7 @@ var PredefinedInteractionsList = ({
|
|
|
338
369
|
selectedInteraction,
|
|
339
370
|
onDelete
|
|
340
371
|
}) => {
|
|
341
|
-
return /* @__PURE__ */
|
|
372
|
+
return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React11.createElement(Header, { label: (0, import_i18n8.__)("Interactions", "elementor") }), /* @__PURE__ */ React11.createElement(
|
|
342
373
|
InteractionsList,
|
|
343
374
|
{
|
|
344
375
|
onDelete: () => onDelete?.(),
|
|
@@ -348,29 +379,29 @@ var PredefinedInteractionsList = ({
|
|
|
348
379
|
));
|
|
349
380
|
};
|
|
350
381
|
function InteractionsList({ onSelectInteraction, selectedInteraction, defaultStateRef }) {
|
|
351
|
-
const [interactionId, setInteractionId] = (0,
|
|
352
|
-
const anchorEl = (0,
|
|
353
|
-
const popupId = (0,
|
|
382
|
+
const [interactionId, setInteractionId] = (0, import_react4.useState)(selectedInteraction);
|
|
383
|
+
const anchorEl = (0, import_react4.useRef)(null);
|
|
384
|
+
const popupId = (0, import_react4.useId)();
|
|
354
385
|
const popupState = (0, import_ui9.usePopupState)({
|
|
355
386
|
variant: "popover",
|
|
356
387
|
popupId: `elementor-interactions-list-${popupId}`
|
|
357
388
|
});
|
|
358
389
|
const { openByDefault, resetDefaultOpen } = usePopupStateContext();
|
|
359
|
-
(0,
|
|
390
|
+
(0, import_react4.useEffect)(() => {
|
|
360
391
|
if (interactionId) {
|
|
361
392
|
onSelectInteraction(interactionId);
|
|
362
393
|
}
|
|
363
394
|
}, [interactionId, onSelectInteraction]);
|
|
364
|
-
(0,
|
|
395
|
+
(0, import_react4.useEffect)(() => {
|
|
365
396
|
if (openByDefault && anchorEl.current) {
|
|
366
397
|
popupState.open();
|
|
367
398
|
resetDefaultOpen();
|
|
368
399
|
}
|
|
369
400
|
}, [defaultStateRef, openByDefault, popupState, resetDefaultOpen]);
|
|
370
|
-
const displayLabel = (0,
|
|
401
|
+
const displayLabel = (0, import_react4.useMemo)(() => {
|
|
371
402
|
return formatInteractionLabel(interactionId);
|
|
372
403
|
}, [interactionId]);
|
|
373
|
-
return /* @__PURE__ */
|
|
404
|
+
return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { gap: 1.5, ref: anchorEl }, /* @__PURE__ */ React11.createElement(
|
|
374
405
|
import_ui9.UnstableTag,
|
|
375
406
|
{
|
|
376
407
|
...(0, import_ui9.bindTrigger)(popupState),
|
|
@@ -378,9 +409,9 @@ function InteractionsList({ onSelectInteraction, selectedInteraction, defaultSta
|
|
|
378
409
|
variant: "outlined",
|
|
379
410
|
label: displayLabel,
|
|
380
411
|
showActionsOnHover: true,
|
|
381
|
-
actions: /* @__PURE__ */
|
|
412
|
+
actions: /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(import_ui9.IconButton, { size: "tiny", disabled: true }, /* @__PURE__ */ React11.createElement(import_icons4.EyeIcon, { fontSize: "tiny" })), /* @__PURE__ */ React11.createElement(import_ui9.IconButton, { size: "tiny" }, /* @__PURE__ */ React11.createElement(import_icons4.XIcon, { fontSize: "tiny" })))
|
|
382
413
|
}
|
|
383
|
-
), /* @__PURE__ */
|
|
414
|
+
), /* @__PURE__ */ React11.createElement(
|
|
384
415
|
import_ui9.Popover,
|
|
385
416
|
{
|
|
386
417
|
...(0, import_ui9.bindPopover)(popupState),
|
|
@@ -395,7 +426,7 @@ function InteractionsList({ onSelectInteraction, selectedInteraction, defaultSta
|
|
|
395
426
|
popupState.close();
|
|
396
427
|
}
|
|
397
428
|
},
|
|
398
|
-
/* @__PURE__ */
|
|
429
|
+
/* @__PURE__ */ React11.createElement(
|
|
399
430
|
InteractionDetails,
|
|
400
431
|
{
|
|
401
432
|
interaction: selectedInteraction,
|
|
@@ -406,12 +437,63 @@ function InteractionsList({ onSelectInteraction, selectedInteraction, defaultSta
|
|
|
406
437
|
)
|
|
407
438
|
));
|
|
408
439
|
}
|
|
440
|
+
|
|
441
|
+
// src/components/interactions-tab.tsx
|
|
442
|
+
var InteractionsTab = ({ elementId }) => {
|
|
443
|
+
return /* @__PURE__ */ React12.createElement(PopupStateProvider, null, /* @__PURE__ */ React12.createElement(InteractionsTabContent, { elementId }));
|
|
444
|
+
};
|
|
445
|
+
function InteractionsTabContent({ elementId }) {
|
|
446
|
+
const existingInteractions = (0, import_editor_elements2.useElementInteractions)(elementId);
|
|
447
|
+
const { triggerDefaultOpen } = usePopupStateContext();
|
|
448
|
+
const [showInteractions, setShowInteractions] = (0, import_react5.useState)(() => {
|
|
449
|
+
return !!JSON.parse(existingInteractions || "[]").length;
|
|
450
|
+
});
|
|
451
|
+
return /* @__PURE__ */ React12.createElement(import_session.SessionStorageProvider, { prefix: elementId }, showInteractions ? /* @__PURE__ */ React12.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React12.createElement(InteractionsContent, null)) : /* @__PURE__ */ React12.createElement(
|
|
452
|
+
EmptyState,
|
|
453
|
+
{
|
|
454
|
+
onCreateInteraction: () => {
|
|
455
|
+
setShowInteractions(true);
|
|
456
|
+
triggerDefaultOpen();
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
));
|
|
460
|
+
}
|
|
461
|
+
function InteractionsContent() {
|
|
462
|
+
const { interactions, setInteractions } = useInteractionsContext();
|
|
463
|
+
const applyInteraction = (0, import_react5.useCallback)(
|
|
464
|
+
(interaction) => {
|
|
465
|
+
const newInteractions = [
|
|
466
|
+
{
|
|
467
|
+
animation: {
|
|
468
|
+
animation_type: "full-preset",
|
|
469
|
+
animation_id: interaction
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
];
|
|
473
|
+
setInteractions(JSON.stringify(newInteractions));
|
|
474
|
+
},
|
|
475
|
+
[setInteractions]
|
|
476
|
+
);
|
|
477
|
+
const selectedInteraction = (0, import_react5.useMemo)(() => {
|
|
478
|
+
try {
|
|
479
|
+
const parsed = JSON.parse(interactions || "[]");
|
|
480
|
+
return parsed[0]?.animation?.animation_id || "";
|
|
481
|
+
} catch {
|
|
482
|
+
return "";
|
|
483
|
+
}
|
|
484
|
+
}, [interactions]);
|
|
485
|
+
return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
|
|
486
|
+
PredefinedInteractionsList,
|
|
487
|
+
{
|
|
488
|
+
selectedInteraction,
|
|
489
|
+
onSelectInteraction: applyInteraction
|
|
490
|
+
}
|
|
491
|
+
));
|
|
492
|
+
}
|
|
409
493
|
// Annotate the CommonJS export names for ESM import in node:
|
|
410
494
|
0 && (module.exports = {
|
|
411
495
|
EmptyState,
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
getInteractionsConfig,
|
|
415
|
-
usePopupStateContext
|
|
496
|
+
InteractionsTab,
|
|
497
|
+
getInteractionsConfig
|
|
416
498
|
});
|
|
417
499
|
//# sourceMappingURL=index.js.map
|