@elementor/editor-components 3.33.0-153 → 3.33.0-155

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 (14) hide show
  1. package/dist/index.js +207 -93
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +182 -68
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +11 -10
  6. package/src/components/components-tab/component-search.tsx +32 -0
  7. package/src/components/{components-item.tsx → components-tab/components-item.tsx} +3 -3
  8. package/src/components/components-tab/components-list.tsx +139 -0
  9. package/src/components/components-tab/components.tsx +17 -0
  10. package/src/components/components-tab/search-provider.tsx +38 -0
  11. package/src/init.ts +1 -1
  12. package/src/components/components-list.tsx +0 -66
  13. package/src/components/components.tsx +0 -12
  14. /package/src/components/{loading-components.tsx → components-tab/loading-components.tsx} +0 -0
package/dist/index.js CHANGED
@@ -37,17 +37,65 @@ module.exports = __toCommonJS(index_exports);
37
37
  // src/init.ts
38
38
  var import_editor = require("@elementor/editor");
39
39
  var import_editor_elements_panel = require("@elementor/editor-elements-panel");
40
- var import_i18n5 = require("@wordpress/i18n");
40
+ var import_i18n6 = require("@wordpress/i18n");
41
41
 
42
- // src/components/components.tsx
43
- var React4 = __toESM(require("react"));
42
+ // src/components/components-tab/components.tsx
43
+ var React6 = __toESM(require("react"));
44
44
  var import_editor_ui2 = require("@elementor/editor-ui");
45
45
 
46
- // src/components/components-list.tsx
47
- var React3 = __toESM(require("react"));
48
- var import_icons2 = require("@elementor/icons");
49
- var import_ui3 = require("@elementor/ui");
50
- var import_i18n2 = require("@wordpress/i18n");
46
+ // src/components/components-tab/component-search.tsx
47
+ var React2 = __toESM(require("react"));
48
+ var import_icons = require("@elementor/icons");
49
+ var import_ui = require("@elementor/ui");
50
+ var import_i18n = require("@wordpress/i18n");
51
+
52
+ // src/components/components-tab/search-provider.tsx
53
+ var React = __toESM(require("react"));
54
+ var import_react = require("react");
55
+ var import_utils = require("@elementor/utils");
56
+ var SearchContext = (0, import_react.createContext)(void 0);
57
+ var SearchProvider = ({
58
+ children,
59
+ localStorageKey
60
+ }) => {
61
+ const { debouncedValue, handleChange, inputValue } = (0, import_utils.useSearchState)({ localStorageKey });
62
+ const clearSearch = () => {
63
+ handleChange("");
64
+ };
65
+ return /* @__PURE__ */ React.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
66
+ };
67
+ var useSearch = () => {
68
+ const context = (0, import_react.useContext)(SearchContext);
69
+ if (!context) {
70
+ throw new Error("useSearch must be used within a SearchProvider");
71
+ }
72
+ return context;
73
+ };
74
+
75
+ // src/components/components-tab/component-search.tsx
76
+ var ComponentSearch = () => {
77
+ const { inputValue, handleChange } = useSearch();
78
+ return /* @__PURE__ */ React2.createElement(import_ui.Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React2.createElement(import_ui.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(
79
+ import_ui.TextField,
80
+ {
81
+ role: "search",
82
+ fullWidth: true,
83
+ size: "tiny",
84
+ value: inputValue,
85
+ placeholder: (0, import_i18n.__)("Search", "elementor"),
86
+ onChange: (e) => handleChange(e.target.value),
87
+ InputProps: {
88
+ startAdornment: /* @__PURE__ */ React2.createElement(import_ui.InputAdornment, { position: "start" }, /* @__PURE__ */ React2.createElement(import_icons.SearchIcon, { fontSize: "tiny" }))
89
+ }
90
+ }
91
+ )));
92
+ };
93
+
94
+ // src/components/components-tab/components-list.tsx
95
+ var React5 = __toESM(require("react"));
96
+ var import_icons3 = require("@elementor/icons");
97
+ var import_ui4 = require("@elementor/ui");
98
+ var import_i18n3 = require("@wordpress/i18n");
51
99
 
52
100
  // src/hooks/use-components.ts
53
101
  var import_query = require("@elementor/query");
@@ -70,14 +118,14 @@ var useComponents = () => {
70
118
  });
71
119
  };
72
120
 
73
- // src/components/components-item.tsx
74
- var React = __toESM(require("react"));
121
+ // src/components/components-tab/components-item.tsx
122
+ var React3 = __toESM(require("react"));
75
123
  var import_editor_canvas = require("@elementor/editor-canvas");
76
124
  var import_editor_elements3 = require("@elementor/editor-elements");
77
125
  var import_editor_ui = require("@elementor/editor-ui");
78
- var import_icons = require("@elementor/icons");
79
- var import_ui = require("@elementor/ui");
80
- var import_i18n = require("@wordpress/i18n");
126
+ var import_icons2 = require("@elementor/icons");
127
+ var import_ui2 = require("@elementor/ui");
128
+ var import_i18n2 = require("@wordpress/i18n");
81
129
 
82
130
  // src/utils/get-container-for-new-element.ts
83
131
  var import_editor_elements = require("@elementor/editor-elements");
@@ -138,18 +186,18 @@ var createComponentModel = (component) => {
138
186
  };
139
187
  };
140
188
 
141
- // src/components/components-item.tsx
189
+ // src/components/components-tab/components-item.tsx
142
190
  var ComponentItem = ({ component }) => {
143
191
  const componentModel = createComponentModel({ id: component.id, name: component.name });
144
- const popupState = (0, import_ui.usePopupState)({
192
+ const popupState = (0, import_ui2.usePopupState)({
145
193
  variant: "popover",
146
194
  disableAutoFocus: true
147
195
  });
148
196
  const handleClick = () => {
149
197
  addComponentToPage(componentModel);
150
198
  };
151
- return /* @__PURE__ */ React.createElement(
152
- import_ui.ListItemButton,
199
+ return /* @__PURE__ */ React3.createElement(
200
+ import_ui2.ListItemButton,
153
201
  {
154
202
  draggable: true,
155
203
  onDragStart: () => (0, import_editor_canvas.startDragElementFromPanel)(componentModel),
@@ -157,17 +205,17 @@ var ComponentItem = ({ component }) => {
157
205
  shape: "rounded",
158
206
  sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 }
159
207
  },
160
- /* @__PURE__ */ React.createElement(import_ui.Box, { sx: { display: "flex", width: "100%", alignItems: "center", gap: 1 }, onClick: handleClick }, /* @__PURE__ */ React.createElement(import_ui.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React.createElement(import_icons.EyeIcon, { fontSize: "tiny" })), /* @__PURE__ */ React.createElement(
161
- import_ui.ListItemText,
208
+ /* @__PURE__ */ React3.createElement(import_ui2.Box, { sx: { display: "flex", width: "100%", alignItems: "center", gap: 1 }, onClick: handleClick }, /* @__PURE__ */ React3.createElement(import_ui2.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React3.createElement(import_icons2.EyeIcon, { fontSize: "tiny" })), /* @__PURE__ */ React3.createElement(
209
+ import_ui2.ListItemText,
162
210
  {
163
- primary: /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "caption", sx: { color: "text.primary" } }, component.name)
211
+ primary: /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.primary" } }, component.name)
164
212
  }
165
213
  )),
166
- /* @__PURE__ */ React.createElement(import_ui.IconButton, { size: "tiny", "aria-label": "More actions", ...(0, import_ui.bindTrigger)(popupState) }, /* @__PURE__ */ React.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })),
167
- /* @__PURE__ */ React.createElement(
168
- import_ui.Menu,
214
+ /* @__PURE__ */ React3.createElement(import_ui2.IconButton, { size: "tiny", "aria-label": "More actions", ...(0, import_ui2.bindTrigger)(popupState) }, /* @__PURE__ */ React3.createElement(import_icons2.DotsVerticalIcon, { fontSize: "tiny" })),
215
+ /* @__PURE__ */ React3.createElement(
216
+ import_ui2.Menu,
169
217
  {
170
- ...(0, import_ui.bindMenu)(popupState),
218
+ ...(0, import_ui2.bindMenu)(popupState),
171
219
  anchorOrigin: {
172
220
  vertical: "bottom",
173
221
  horizontal: "right"
@@ -177,15 +225,15 @@ var ComponentItem = ({ component }) => {
177
225
  horizontal: "right"
178
226
  }
179
227
  },
180
- /* @__PURE__ */ React.createElement(import_editor_ui.MenuListItem, { sx: { minWidth: "160px" } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n.__)("Rename", "elementor"))),
181
- /* @__PURE__ */ React.createElement(
228
+ /* @__PURE__ */ React3.createElement(import_editor_ui.MenuListItem, { sx: { minWidth: "160px" } }, /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n2.__)("Rename", "elementor"))),
229
+ /* @__PURE__ */ React3.createElement(
182
230
  import_editor_ui.MenuListItem,
183
231
  {
184
232
  onClick: () => {
185
233
  popupState.close();
186
234
  }
187
235
  },
188
- /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n.__)("Delete", "elementor"))
236
+ /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n2.__)("Delete", "elementor"))
189
237
  )
190
238
  )
191
239
  );
@@ -202,14 +250,14 @@ var addComponentToPage = (model) => {
202
250
  });
203
251
  };
204
252
 
205
- // src/components/loading-components.tsx
206
- var React2 = __toESM(require("react"));
207
- var import_ui2 = require("@elementor/ui");
253
+ // src/components/components-tab/loading-components.tsx
254
+ var React4 = __toESM(require("react"));
255
+ var import_ui3 = require("@elementor/ui");
208
256
  var ROWS_COUNT = 6;
209
257
  var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
210
258
  var LoadingComponents = () => {
211
- return /* @__PURE__ */ React2.createElement(
212
- import_ui2.Stack,
259
+ return /* @__PURE__ */ React4.createElement(
260
+ import_ui3.Stack,
213
261
  {
214
262
  "aria-label": "Loading components",
215
263
  gap: 1,
@@ -230,32 +278,36 @@ var LoadingComponents = () => {
230
278
  }
231
279
  }
232
280
  },
233
- rows.map((row) => /* @__PURE__ */ React2.createElement(
234
- import_ui2.ListItemButton,
281
+ rows.map((row) => /* @__PURE__ */ React4.createElement(
282
+ import_ui3.ListItemButton,
235
283
  {
236
284
  key: row,
237
285
  sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
238
286
  shape: "rounded"
239
287
  },
240
- /* @__PURE__ */ React2.createElement(import_ui2.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React2.createElement(import_ui2.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React2.createElement(import_ui2.Skeleton, { variant: "text", width: "100%", height: "36px" }))
288
+ /* @__PURE__ */ React4.createElement(import_ui3.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(import_ui3.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React4.createElement(import_ui3.Skeleton, { variant: "text", width: "100%", height: "36px" }))
241
289
  ))
242
290
  );
243
291
  };
244
292
 
245
- // src/components/components-list.tsx
293
+ // src/components/components-tab/components-list.tsx
246
294
  function ComponentsList() {
247
- const { data: components, isLoading } = useComponents();
295
+ const { components, isLoading, searchValue } = useFilteredComponents();
248
296
  if (isLoading) {
249
- return /* @__PURE__ */ React3.createElement(LoadingComponents, null);
297
+ return /* @__PURE__ */ React5.createElement(LoadingComponents, null);
250
298
  }
251
- if (!components || components.length === 0) {
252
- return /* @__PURE__ */ React3.createElement(EmptyState, null);
299
+ const isEmpty = !components || components.length === 0;
300
+ if (isEmpty) {
301
+ if (searchValue.length > 0) {
302
+ return /* @__PURE__ */ React5.createElement(EmptySearchResult, null);
303
+ }
304
+ return /* @__PURE__ */ React5.createElement(EmptyState, null);
253
305
  }
254
- return /* @__PURE__ */ React3.createElement(import_ui3.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5, px: 2 } }, components?.map((component) => /* @__PURE__ */ React3.createElement(ComponentItem, { key: component.id, component })));
306
+ return /* @__PURE__ */ React5.createElement(import_ui4.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components?.map((component) => /* @__PURE__ */ React5.createElement(ComponentItem, { key: component.id, component })));
255
307
  }
256
308
  var EmptyState = () => {
257
- return /* @__PURE__ */ React3.createElement(
258
- import_ui3.Stack,
309
+ return /* @__PURE__ */ React5.createElement(
310
+ import_ui4.Stack,
259
311
  {
260
312
  alignItems: "center",
261
313
  justifyContent: "center",
@@ -264,42 +316,104 @@ var EmptyState = () => {
264
316
  gap: 1.75,
265
317
  overflow: "hidden"
266
318
  },
267
- /* @__PURE__ */ React3.createElement(import_ui3.Icon, { fontSize: "large" }, /* @__PURE__ */ React3.createElement(import_icons2.EyeIcon, { fontSize: "large" })),
268
- /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n2.__)("Text that explains that there are no Components yet.", "elementor")),
269
- /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n2.__)(
319
+ /* @__PURE__ */ React5.createElement(import_ui4.Icon, { fontSize: "large" }, /* @__PURE__ */ React5.createElement(import_icons3.EyeIcon, { fontSize: "large" })),
320
+ /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n3.__)("Text that explains that there are no Components yet.", "elementor")),
321
+ /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n3.__)(
270
322
  "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
271
323
  "elementor"
272
324
  )),
273
- /* @__PURE__ */ React3.createElement(import_ui3.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
274
- /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n2.__)("To create a component, first design it, then choose one of three options:", "elementor")),
275
- /* @__PURE__ */ React3.createElement(
276
- import_ui3.Typography,
325
+ /* @__PURE__ */ React5.createElement(import_ui4.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
326
+ /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n3.__)("To create a component, first design it, then choose one of three options:", "elementor")),
327
+ /* @__PURE__ */ React5.createElement(
328
+ import_ui4.Typography,
277
329
  {
278
330
  align: "left",
279
331
  variant: "caption",
280
332
  color: "text.secondary",
281
333
  sx: { display: "flex", flexDirection: "column" }
282
334
  },
283
- /* @__PURE__ */ React3.createElement("span", null, (0, import_i18n2.__)("1. Right-click and select Create Component", "elementor")),
284
- /* @__PURE__ */ React3.createElement("span", null, (0, import_i18n2.__)("2. Use the component icon in the Structure panel", "elementor")),
285
- /* @__PURE__ */ React3.createElement("span", null, (0, import_i18n2.__)("3. Use the component icon in the Edit panel header", "elementor"))
335
+ /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n3.__)("1. Right-click and select Create Component", "elementor")),
336
+ /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n3.__)("2. Use the component icon in the Structure panel", "elementor")),
337
+ /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n3.__)("3. Use the component icon in the Edit panel header", "elementor"))
286
338
  )
287
339
  );
288
340
  };
341
+ var EmptySearchResult = () => {
342
+ const { searchValue, clearSearch } = useSearch();
343
+ return /* @__PURE__ */ React5.createElement(
344
+ import_ui4.Stack,
345
+ {
346
+ color: "text.secondary",
347
+ pt: 5,
348
+ alignItems: "center",
349
+ gap: 1,
350
+ overflow: "hidden",
351
+ justifySelf: "center"
352
+ },
353
+ /* @__PURE__ */ React5.createElement(import_icons3.EyeIcon, null),
354
+ /* @__PURE__ */ React5.createElement(
355
+ import_ui4.Box,
356
+ {
357
+ sx: {
358
+ width: "100%"
359
+ }
360
+ },
361
+ /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n3.__)("Sorry, nothing matched", "elementor")),
362
+ searchValue && /* @__PURE__ */ React5.createElement(
363
+ import_ui4.Typography,
364
+ {
365
+ variant: "subtitle2",
366
+ color: "inherit",
367
+ sx: {
368
+ display: "flex",
369
+ width: "100%",
370
+ justifyContent: "center"
371
+ }
372
+ },
373
+ /* @__PURE__ */ React5.createElement("span", null, "\u201C"),
374
+ /* @__PURE__ */ React5.createElement(
375
+ "span",
376
+ {
377
+ style: {
378
+ maxWidth: "80%",
379
+ overflow: "hidden",
380
+ textOverflow: "ellipsis"
381
+ }
382
+ },
383
+ searchValue
384
+ ),
385
+ /* @__PURE__ */ React5.createElement("span", null, "\u201D.")
386
+ )
387
+ ),
388
+ /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n3.__)("Try something else.", "elementor")),
389
+ /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React5.createElement(import_ui4.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n3.__)("Clear & try again", "elementor")))
390
+ );
391
+ };
392
+ var useFilteredComponents = () => {
393
+ const { data: components, isLoading } = useComponents();
394
+ const { searchValue } = useSearch();
395
+ return {
396
+ components: components?.filter(
397
+ (component) => component.name.toLowerCase().includes(searchValue.toLowerCase())
398
+ ),
399
+ isLoading,
400
+ searchValue
401
+ };
402
+ };
289
403
 
290
- // src/components/components.tsx
404
+ // src/components/components-tab/components.tsx
291
405
  var Components = () => {
292
- return /* @__PURE__ */ React4.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React4.createElement(ComponentsList, null));
406
+ return /* @__PURE__ */ React6.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React6.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React6.createElement(ComponentSearch, null), /* @__PURE__ */ React6.createElement(ComponentsList, null)));
293
407
  };
294
408
 
295
409
  // src/components/create-component-form/create-component-form.tsx
296
- var React5 = __toESM(require("react"));
297
- var import_react2 = require("react");
410
+ var React7 = __toESM(require("react"));
411
+ var import_react3 = require("react");
298
412
  var import_editor_elements4 = require("@elementor/editor-elements");
299
413
  var import_editor_ui3 = require("@elementor/editor-ui");
300
- var import_icons3 = require("@elementor/icons");
301
- var import_ui4 = require("@elementor/ui");
302
- var import_i18n4 = require("@wordpress/i18n");
414
+ var import_icons4 = require("@elementor/icons");
415
+ var import_ui5 = require("@elementor/ui");
416
+ var import_i18n5 = require("@wordpress/i18n");
303
417
 
304
418
  // src/hooks/use-create-component.ts
305
419
  var import_query2 = require("@elementor/query");
@@ -312,11 +426,11 @@ var useCreateComponentMutation = () => {
312
426
  };
313
427
 
314
428
  // src/components/create-component-form/hooks/use-form.ts
315
- var import_react = require("react");
429
+ var import_react2 = require("react");
316
430
  var useForm = (initialValues) => {
317
- const [values, setValues] = (0, import_react.useState)(initialValues);
318
- const [errors, setErrors] = (0, import_react.useState)({});
319
- const isValid = (0, import_react.useMemo)(() => {
431
+ const [values, setValues] = (0, import_react2.useState)(initialValues);
432
+ const [errors, setErrors] = (0, import_react2.useState)({});
433
+ const isValid = (0, import_react2.useMemo)(() => {
320
434
  return !Object.values(errors).some((error) => error);
321
435
  }, [errors]);
322
436
  const handleChange = (e, field, validationSchema) => {
@@ -362,16 +476,16 @@ var validateForm = (values, schema) => {
362
476
 
363
477
  // src/components/create-component-form/utils/component-form-schema.ts
364
478
  var import_schema = require("@elementor/schema");
365
- var import_i18n3 = require("@wordpress/i18n");
479
+ var import_i18n4 = require("@wordpress/i18n");
366
480
  var MIN_NAME_LENGTH = 2;
367
481
  var MAX_NAME_LENGTH = 50;
368
482
  var createBaseComponentSchema = (existingNames) => {
369
483
  return import_schema.z.object({
370
484
  componentName: import_schema.z.string().trim().max(
371
485
  MAX_NAME_LENGTH,
372
- (0, import_i18n3.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
486
+ (0, import_i18n4.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
373
487
  ).refine((value) => !existingNames.includes(value), {
374
- message: (0, import_i18n3.__)("Component name already exists", "elementor")
488
+ message: (0, import_i18n4.__)("Component name already exists", "elementor")
375
489
  })
376
490
  });
377
491
  };
@@ -379,20 +493,20 @@ var createSubmitComponentSchema = (existingNames) => {
379
493
  const baseSchema = createBaseComponentSchema(existingNames);
380
494
  return baseSchema.extend({
381
495
  componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
382
- message: (0, import_i18n3.__)("Component name is required.", "elementor")
496
+ message: (0, import_i18n4.__)("Component name is required.", "elementor")
383
497
  }).refine((value) => value.length >= MIN_NAME_LENGTH, {
384
- message: (0, import_i18n3.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
498
+ message: (0, import_i18n4.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
385
499
  })
386
500
  });
387
501
  };
388
502
 
389
503
  // src/components/create-component-form/create-component-form.tsx
390
504
  function CreateComponentForm() {
391
- const [element, setElement] = (0, import_react2.useState)(null);
392
- const [anchorPosition, setAnchorPosition] = (0, import_react2.useState)();
393
- const [resultNotification, setResultNotification] = (0, import_react2.useState)(null);
505
+ const [element, setElement] = (0, import_react3.useState)(null);
506
+ const [anchorPosition, setAnchorPosition] = (0, import_react3.useState)();
507
+ const [resultNotification, setResultNotification] = (0, import_react3.useState)(null);
394
508
  const { mutate: createComponent, isPending } = useCreateComponentMutation();
395
- (0, import_react2.useEffect)(() => {
509
+ (0, import_react3.useEffect)(() => {
396
510
  const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
397
511
  const openPopup = (event) => {
398
512
  setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements4.getElementLabel)(event.detail.element.id) });
@@ -424,13 +538,13 @@ function CreateComponentForm() {
424
538
  setResultNotification({
425
539
  show: true,
426
540
  // Translators: %1$s: Component name, %2$s: Component ID
427
- message: (0, import_i18n4.__)("Component saved successfully as: %1$s (ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", result.component_id.toString()),
541
+ message: (0, import_i18n5.__)("Component saved successfully as: %1$s (ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", result.component_id.toString()),
428
542
  type: "success"
429
543
  });
430
544
  resetAndClosePopup();
431
545
  },
432
546
  onError: () => {
433
- const errorMessage = (0, import_i18n4.__)("Failed to save component. Please try again.", "elementor");
547
+ const errorMessage = (0, import_i18n5.__)("Failed to save component. Please try again.", "elementor");
434
548
  setResultNotification({
435
549
  show: true,
436
550
  message: errorMessage,
@@ -444,15 +558,15 @@ function CreateComponentForm() {
444
558
  setElement(null);
445
559
  setAnchorPosition(void 0);
446
560
  };
447
- return /* @__PURE__ */ React5.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React5.createElement(
448
- import_ui4.Popover,
561
+ return /* @__PURE__ */ React7.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(
562
+ import_ui5.Popover,
449
563
  {
450
564
  open: element !== null,
451
565
  onClose: resetAndClosePopup,
452
566
  anchorReference: "anchorPosition",
453
567
  anchorPosition
454
568
  },
455
- element !== null && /* @__PURE__ */ React5.createElement(
569
+ element !== null && /* @__PURE__ */ React7.createElement(
456
570
  Form,
457
571
  {
458
572
  initialValues: { componentName: element.elementLabel },
@@ -461,8 +575,8 @@ function CreateComponentForm() {
461
575
  closePopup: resetAndClosePopup
462
576
  }
463
577
  )
464
- ), /* @__PURE__ */ React5.createElement(import_ui4.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React5.createElement(
465
- import_ui4.Alert,
578
+ ), /* @__PURE__ */ React7.createElement(import_ui5.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React7.createElement(
579
+ import_ui5.Alert,
466
580
  {
467
581
  onClose: () => setResultNotification(null),
468
582
  severity: resultNotification?.type,
@@ -480,14 +594,14 @@ var Form = ({
480
594
  }) => {
481
595
  const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
482
596
  const { data: components } = useComponents();
483
- const existingComponentNames = (0, import_react2.useMemo)(() => {
597
+ const existingComponentNames = (0, import_react3.useMemo)(() => {
484
598
  return components?.map((component) => component.name) ?? [];
485
599
  }, [components]);
486
- const changeValidationSchema = (0, import_react2.useMemo)(
600
+ const changeValidationSchema = (0, import_react3.useMemo)(
487
601
  () => createBaseComponentSchema(existingComponentNames),
488
602
  [existingComponentNames]
489
603
  );
490
- const submitValidationSchema = (0, import_react2.useMemo)(
604
+ const submitValidationSchema = (0, import_react3.useMemo)(
491
605
  () => createSubmitComponentSchema(existingComponentNames),
492
606
  [existingComponentNames]
493
607
  );
@@ -497,8 +611,8 @@ var Form = ({
497
611
  handleSave(parsedValues);
498
612
  }
499
613
  };
500
- return /* @__PURE__ */ React5.createElement(import_ui4.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React5.createElement(
501
- import_ui4.Stack,
614
+ return /* @__PURE__ */ React7.createElement(import_ui5.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React7.createElement(
615
+ import_ui5.Stack,
502
616
  {
503
617
  direction: "row",
504
618
  alignItems: "center",
@@ -506,10 +620,10 @@ var Form = ({
506
620
  px: 1.5,
507
621
  sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
508
622
  },
509
- /* @__PURE__ */ React5.createElement(import_icons3.StarIcon, { fontSize: FONT_SIZE }),
510
- /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, (0, import_i18n4.__)("Save as a component", "elementor"))
511
- ), /* @__PURE__ */ React5.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React5.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(import_ui4.FormLabel, { htmlFor: "component-name", size: "tiny" }, (0, import_i18n4.__)("Name", "elementor"))), /* @__PURE__ */ React5.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(
512
- import_ui4.TextField,
623
+ /* @__PURE__ */ React7.createElement(import_icons4.StarIcon, { fontSize: FONT_SIZE }),
624
+ /* @__PURE__ */ React7.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, (0, import_i18n5.__)("Save as a component", "elementor"))
625
+ ), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(import_ui5.FormLabel, { htmlFor: "component-name", size: "tiny" }, (0, import_i18n5.__)("Name", "elementor"))), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(
626
+ import_ui5.TextField,
513
627
  {
514
628
  id: "component-name",
515
629
  size: FONT_SIZE,
@@ -520,8 +634,8 @@ var Form = ({
520
634
  error: Boolean(errors.componentName),
521
635
  helperText: errors.componentName
522
636
  }
523
- ))), /* @__PURE__ */ React5.createElement(import_ui4.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React5.createElement(import_ui4.Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, (0, import_i18n4.__)("Cancel", "elementor")), /* @__PURE__ */ React5.createElement(
524
- import_ui4.Button,
637
+ ))), /* @__PURE__ */ React7.createElement(import_ui5.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, (0, import_i18n5.__)("Cancel", "elementor")), /* @__PURE__ */ React7.createElement(
638
+ import_ui5.Button,
525
639
  {
526
640
  onClick: handleSubmit,
527
641
  disabled: isSubmitting || !isValid,
@@ -529,7 +643,7 @@ var Form = ({
529
643
  color: "primary",
530
644
  size: "small"
531
645
  },
532
- isSubmitting ? (0, import_i18n4.__)("Creating\u2026", "elementor") : (0, import_i18n4.__)("Create", "elementor")
646
+ isSubmitting ? (0, import_i18n5.__)("Creating\u2026", "elementor") : (0, import_i18n5.__)("Create", "elementor")
533
647
  )));
534
648
  };
535
649
 
@@ -537,7 +651,7 @@ var Form = ({
537
651
  function init() {
538
652
  (0, import_editor_elements_panel.injectTab)({
539
653
  id: "components",
540
- label: (0, import_i18n5.__)("Components", "elementor"),
654
+ label: (0, import_i18n6.__)("Components", "elementor"),
541
655
  component: Components
542
656
  });
543
657
  (0, import_editor.injectIntoTop)({