@elementor/editor-editing-panel 0.9.0 → 0.10.0

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 (25) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/index.js +134 -64
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +125 -55
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +8 -6
  7. package/src/components/{editing-panel/editing-panel-hooks.tsx → editing-panel-hooks.tsx} +1 -1
  8. package/src/components/{editing-panel/editing-panel-tabs.tsx → editing-panel-tabs.tsx} +1 -1
  9. package/src/components/{editing-panel/editing-panel.tsx → editing-panel.tsx} +3 -3
  10. package/src/components/{editing-panel/settings-tab.tsx → settings-tab.tsx} +5 -5
  11. package/src/components/{editing-panel/style-tab/sections/size.tsx → style-sections/size-section.tsx} +3 -3
  12. package/src/components/{editing-panel/style-tab/style-tab.tsx → style-tab.tsx} +4 -4
  13. package/src/controls/control-types/attachment-control.tsx +101 -0
  14. package/src/{components/controls → controls}/control-types/select-control.tsx +2 -2
  15. package/src/{components/controls → controls}/control-types/size-control.tsx +2 -2
  16. package/src/{components/controls → controls}/control-types/text-area-control.tsx +1 -1
  17. package/src/{components/controls → controls}/control-types/text-control.tsx +1 -1
  18. package/src/{components/controls → controls}/get-control-by-type.ts +2 -0
  19. package/src/{components/controls → controls}/settings-control.tsx +5 -5
  20. package/src/{components/controls → controls}/style-control.tsx +6 -6
  21. package/src/init.ts +1 -1
  22. package/src/panel.ts +1 -1
  23. package/src/types.ts +1 -1
  24. /package/src/components/{controls/collapsible-section.tsx → collapsible-section.tsx} +0 -0
  25. /package/src/{contexts → controls}/control-context.tsx +0 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.10.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.9.1...@elementor/editor-editing-panel@0.10.0) (2024-08-14)
7
+
8
+ ### Features
9
+
10
+ - **editor-editing-panel:** init attachment control [EDS-320] ([#239](https://github.com/elementor/elementor-packages/issues/239)) ([9871e10](https://github.com/elementor/elementor-packages/commit/9871e105c98b8c4502289cf8cf99d75b4074e0a9))
11
+
12
+ ## [0.9.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.9.0...@elementor/editor-editing-panel@0.9.1) (2024-08-06)
13
+
14
+ **Note:** Version bump only for package @elementor/editor-editing-panel
15
+
6
16
  # [0.9.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.8.0...@elementor/editor-editing-panel@0.9.0) (2024-08-06)
7
17
 
8
18
  ### Features
package/dist/index.js CHANGED
@@ -25,9 +25,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
25
25
  // src/panel.ts
26
26
  var import_editor_panels2 = require("@elementor/editor-panels");
27
27
 
28
- // src/components/editing-panel/editing-panel.tsx
29
- var React14 = __toESM(require("react"));
30
- var import_i18n3 = require("@wordpress/i18n");
28
+ // src/components/editing-panel.tsx
29
+ var React15 = __toESM(require("react"));
30
+ var import_i18n4 = require("@wordpress/i18n");
31
31
 
32
32
  // src/hooks/use-selected-elements.ts
33
33
  var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
@@ -88,7 +88,7 @@ function useElementType(type) {
88
88
  );
89
89
  }
90
90
 
91
- // src/components/editing-panel/editing-panel.tsx
91
+ // src/components/editing-panel.tsx
92
92
  var import_editor_panels = require("@elementor/editor-panels");
93
93
 
94
94
  // src/contexts/element-context.tsx
@@ -106,19 +106,19 @@ function useElementContext() {
106
106
  return context;
107
107
  }
108
108
 
109
- // src/components/editing-panel/editing-panel-tabs.tsx
110
- var import_ui11 = require("@elementor/ui");
111
- var React13 = __toESM(require("react"));
112
- var import_i18n2 = require("@wordpress/i18n");
109
+ // src/components/editing-panel-tabs.tsx
110
+ var import_ui12 = require("@elementor/ui");
111
+ var React14 = __toESM(require("react"));
112
+ var import_i18n3 = require("@wordpress/i18n");
113
113
 
114
- // src/components/editing-panel/settings-tab.tsx
115
- var React7 = __toESM(require("react"));
116
- var import_ui6 = require("@elementor/ui");
114
+ // src/components/settings-tab.tsx
115
+ var React8 = __toESM(require("react"));
116
+ var import_ui7 = require("@elementor/ui");
117
117
 
118
- // src/components/controls/settings-control.tsx
118
+ // src/controls/settings-control.tsx
119
119
  var React2 = __toESM(require("react"));
120
120
 
121
- // src/contexts/control-context.tsx
121
+ // src/controls/control-context.tsx
122
122
  var import_react2 = require("react");
123
123
  var ControlContext = (0, import_react2.createContext)(null);
124
124
  function useControl(defaultValue) {
@@ -129,7 +129,7 @@ function useControl(defaultValue) {
129
129
  return { ...controlContext, value: controlContext.value ?? defaultValue };
130
130
  }
131
131
 
132
- // src/components/controls/settings-control.tsx
132
+ // src/controls/settings-control.tsx
133
133
  var import_ui = require("@elementor/ui");
134
134
 
135
135
  // src/hooks/use-widget-settings.ts
@@ -167,7 +167,7 @@ var updateSettings = ({ id, props }) => {
167
167
  });
168
168
  };
169
169
 
170
- // src/components/controls/settings-control.tsx
170
+ // src/controls/settings-control.tsx
171
171
  var SettingsControlProvider = ({ bind, children }) => {
172
172
  const { element } = useElementContext();
173
173
  const value = useWidgetSettings({ id: element.id, bind });
@@ -196,7 +196,7 @@ var Label = ({ children }) => {
196
196
  };
197
197
  SettingsControl.Label = Label;
198
198
 
199
- // src/components/controls/collapsible-section.tsx
199
+ // src/components/collapsible-section.tsx
200
200
  var React3 = __toESM(require("react"));
201
201
  var import_react3 = require("react");
202
202
  var import_ui2 = require("@elementor/ui");
@@ -207,7 +207,7 @@ var CollapsibleSection = ({ title, children }) => {
207
207
  return /* @__PURE__ */ React3.createElement(import_ui2.Accordion, { disableGutters: true, defaultExpanded: true }, /* @__PURE__ */ React3.createElement(import_ui2.AccordionSummary, { "aria-controls": contentId, id: labelId }, /* @__PURE__ */ React3.createElement(import_ui2.AccordionSummaryText, { primaryTypographyProps: { variant: "caption" } }, title)), /* @__PURE__ */ React3.createElement(import_ui2.AccordionDetails, { id: contentId, "aria-labelledby": labelId }, /* @__PURE__ */ React3.createElement(import_ui2.Stack, { gap: 2.5 }, children)));
208
208
  };
209
209
 
210
- // src/components/controls/control-types/select-control.tsx
210
+ // src/controls/control-types/select-control.tsx
211
211
  var React4 = __toESM(require("react"));
212
212
  var import_ui3 = require("@elementor/ui");
213
213
  var SelectControl = ({ options }) => {
@@ -218,7 +218,7 @@ var SelectControl = ({ options }) => {
218
218
  return /* @__PURE__ */ React4.createElement(import_ui3.Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map(({ label, ...props }) => /* @__PURE__ */ React4.createElement(import_ui3.MenuItem, { key: props.value, ...props }, label)));
219
219
  };
220
220
 
221
- // src/components/controls/control-types/text-area-control.tsx
221
+ // src/controls/control-types/text-area-control.tsx
222
222
  var React5 = __toESM(require("react"));
223
223
  var import_ui4 = require("@elementor/ui");
224
224
  var TextAreaControl = ({ placeholder }) => {
@@ -240,7 +240,7 @@ var TextAreaControl = ({ placeholder }) => {
240
240
  );
241
241
  };
242
242
 
243
- // src/components/controls/control-types/text-control.tsx
243
+ // src/controls/control-types/text-control.tsx
244
244
  var React6 = __toESM(require("react"));
245
245
  var import_ui5 = require("@elementor/ui");
246
246
  var TextControl = ({ placeholder }) => {
@@ -249,8 +249,78 @@ var TextControl = ({ placeholder }) => {
249
249
  return /* @__PURE__ */ React6.createElement(import_ui5.TextField, { type: "text", size: "tiny", value, onChange: handleChange, placeholder });
250
250
  };
251
251
 
252
- // src/components/controls/get-control-by-type.ts
252
+ // src/controls/control-types/attachment-control.tsx
253
+ var React7 = __toESM(require("react"));
254
+ var import_ui6 = require("@elementor/ui");
255
+ var import_icons = require("@elementor/icons");
256
+ var import_i18n = require("@wordpress/i18n");
257
+ var import_wp_media = require("@elementor/wp-media");
258
+ var isImageAttachment = (value) => {
259
+ return value.$$type === "image-attachment";
260
+ };
261
+ var isImageUrl = (value) => {
262
+ return value.$$type === "image-url";
263
+ };
264
+ var defaultState = {
265
+ $$type: "image-url",
266
+ value: {
267
+ url: "/wp-content/plugins/elementor/assets/images/placeholder.png"
268
+ }
269
+ };
270
+ var AttachmentControl = (props) => {
271
+ const { value, setValue } = useControl(defaultState);
272
+ const { data: attachment } = (0, import_wp_media.useWpMediaAttachment)(isImageAttachment(value) ? value.value.id : void 0);
273
+ const getImageSrc = () => {
274
+ if (attachment?.url) {
275
+ return attachment.url;
276
+ }
277
+ if (isImageUrl(value)) {
278
+ return value.value.url;
279
+ }
280
+ return defaultState.value.url;
281
+ };
282
+ const { open } = (0, import_wp_media.useWpMediaFrame)({
283
+ types: props.mediaTypes,
284
+ multiple: false,
285
+ selected: isImageAttachment(value) ? value.value?.id : void 0,
286
+ onSelect: (val) => {
287
+ setValue({
288
+ $$type: "image-attachment",
289
+ value: {
290
+ id: val.id
291
+ }
292
+ });
293
+ }
294
+ });
295
+ return /* @__PURE__ */ React7.createElement(import_ui6.Card, { variant: "outlined" }, /* @__PURE__ */ React7.createElement(import_ui6.CardMedia, { image: getImageSrc(), sx: { height: 150 } }), /* @__PURE__ */ React7.createElement(import_ui6.CardOverlay, null, /* @__PURE__ */ React7.createElement(
296
+ import_ui6.Button,
297
+ {
298
+ color: "inherit",
299
+ size: "small",
300
+ variant: "outlined",
301
+ onClick: () => {
302
+ open({ mode: "browse" });
303
+ }
304
+ },
305
+ (0, import_i18n.__)("Select Image", "elementor")
306
+ ), /* @__PURE__ */ React7.createElement(
307
+ import_ui6.Button,
308
+ {
309
+ color: "inherit",
310
+ size: "small",
311
+ variant: "text",
312
+ startIcon: /* @__PURE__ */ React7.createElement(import_icons.UploadIcon, null),
313
+ onClick: () => {
314
+ open({ mode: "upload" });
315
+ }
316
+ },
317
+ (0, import_i18n.__)("Upload Image", "elementor")
318
+ )));
319
+ };
320
+
321
+ // src/controls/get-control-by-type.ts
253
322
  var controlTypes = {
323
+ attachment: AttachmentControl,
254
324
  select: SelectControl,
255
325
  text: TextControl,
256
326
  textarea: TextAreaControl
@@ -259,21 +329,21 @@ var getControlByType = (type) => {
259
329
  return controlTypes[type] ?? null;
260
330
  };
261
331
 
262
- // src/components/editing-panel/settings-tab.tsx
332
+ // src/components/settings-tab.tsx
263
333
  var SettingsTab = () => {
264
334
  const { element } = useElementContext();
265
335
  const elementType = useElementType(element?.type);
266
336
  if (!elementType) {
267
337
  return null;
268
338
  }
269
- return /* @__PURE__ */ React7.createElement(import_ui6.Stack, null, elementType.controls.map(({ type, value }, index) => {
339
+ return /* @__PURE__ */ React8.createElement(import_ui7.Stack, null, elementType.controls.map(({ type, value }, index) => {
270
340
  if (type === "control") {
271
- return /* @__PURE__ */ React7.createElement(Control, { key: value.bind, control: value });
341
+ return /* @__PURE__ */ React8.createElement(Control, { key: value.bind, control: value });
272
342
  }
273
343
  if (type === "section") {
274
- return /* @__PURE__ */ React7.createElement(CollapsibleSection, { key: type + "." + index, title: value.label }, value.items?.map((item) => {
344
+ return /* @__PURE__ */ React8.createElement(CollapsibleSection, { key: type + "." + index, title: value.label }, value.items?.map((item) => {
275
345
  if (item.type === "control") {
276
- return /* @__PURE__ */ React7.createElement(Control, { key: item.value.bind, control: item.value });
346
+ return /* @__PURE__ */ React8.createElement(Control, { key: item.value.bind, control: item.value });
277
347
  }
278
348
  return null;
279
349
  }));
@@ -286,7 +356,7 @@ var Control = ({ control }) => {
286
356
  if (!ControlComponent) {
287
357
  return null;
288
358
  }
289
- return /* @__PURE__ */ React7.createElement(SettingsControl, { bind: control.bind }, /* @__PURE__ */ React7.createElement(SettingsControl.Label, null, control.label), /* @__PURE__ */ React7.createElement(
359
+ return /* @__PURE__ */ React8.createElement(SettingsControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React8.createElement(SettingsControl.Label, null, control.label) : null, /* @__PURE__ */ React8.createElement(
290
360
  ControlComponent,
291
361
  {
292
362
  ...control.props
@@ -294,18 +364,18 @@ var Control = ({ control }) => {
294
364
  ));
295
365
  };
296
366
 
297
- // src/components/editing-panel/style-tab/style-tab.tsx
298
- var React12 = __toESM(require("react"));
367
+ // src/components/style-tab.tsx
368
+ var React13 = __toESM(require("react"));
299
369
 
300
370
  // src/contexts/style-context.tsx
301
- var React8 = __toESM(require("react"));
371
+ var React9 = __toESM(require("react"));
302
372
  var import_react4 = require("react");
303
373
  var import_editor_responsive = require("@elementor/editor-responsive");
304
374
  var Context2 = (0, import_react4.createContext)(null);
305
375
  function StyleContext({ children, selectedStyleDef }) {
306
376
  const breakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
307
377
  const selectedMeta = { breakpoint, state: null };
308
- return /* @__PURE__ */ React8.createElement(Context2.Provider, { value: { selectedStyleDef, selectedMeta } }, children);
378
+ return /* @__PURE__ */ React9.createElement(Context2.Provider, { value: { selectedStyleDef, selectedMeta } }, children);
309
379
  }
310
380
  function useStyleContext() {
311
381
  const context = (0, import_react4.useContext)(Context2);
@@ -335,14 +405,14 @@ var useElementStyles = (elementID) => {
335
405
  );
336
406
  };
337
407
 
338
- // src/components/editing-panel/style-tab/style-tab.tsx
339
- var import_ui10 = require("@elementor/ui");
408
+ // src/components/style-tab.tsx
409
+ var import_ui11 = require("@elementor/ui");
340
410
 
341
- // src/components/editing-panel/style-tab/sections/size.tsx
342
- var React11 = __toESM(require("react"));
411
+ // src/components/style-sections/size-section.tsx
412
+ var React12 = __toESM(require("react"));
343
413
 
344
- // src/components/controls/style-control.tsx
345
- var React9 = __toESM(require("react"));
414
+ // src/controls/style-control.tsx
415
+ var React10 = __toESM(require("react"));
346
416
 
347
417
  // src/sync/update-style.ts
348
418
  var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
@@ -387,8 +457,8 @@ function getVariantByMeta(styleDef, meta) {
387
457
  });
388
458
  }
389
459
 
390
- // src/components/controls/style-control.tsx
391
- var import_ui7 = require("@elementor/ui");
460
+ // src/controls/style-control.tsx
461
+ var import_ui8 = require("@elementor/ui");
392
462
  var StyleControl = ({ bind, children }) => {
393
463
  const { element } = useElementContext();
394
464
  const { selectedStyleDef, selectedMeta } = useStyleContext();
@@ -406,18 +476,18 @@ var StyleControl = ({ bind, children }) => {
406
476
  meta: selectedMeta,
407
477
  propName: bind
408
478
  });
409
- return /* @__PURE__ */ React9.createElement(ControlContext.Provider, { value: { bind, value, setValue } }, children);
479
+ return /* @__PURE__ */ React10.createElement(ControlContext.Provider, { value: { bind, value, setValue } }, children);
410
480
  };
411
481
  var Label2 = ({ children }) => {
412
- return /* @__PURE__ */ React9.createElement(import_ui7.Typography, { component: "label", variant: "caption", color: "text.secondary" }, children);
482
+ return /* @__PURE__ */ React10.createElement(import_ui8.Typography, { component: "label", variant: "caption", color: "text.secondary" }, children);
413
483
  };
414
484
  StyleControl.Label = Label2;
415
485
 
416
- // src/components/controls/control-types/size-control.tsx
417
- var React10 = __toESM(require("react"));
418
- var import_ui8 = require("@elementor/ui");
486
+ // src/controls/control-types/size-control.tsx
487
+ var React11 = __toESM(require("react"));
488
+ var import_ui9 = require("@elementor/ui");
419
489
  var SizeControl = ({ units: units2, placeholder }) => {
420
- const { value, setValue } = useControl(defaultState);
490
+ const { value, setValue } = useControl(defaultState2);
421
491
  const propValue = value.value;
422
492
  const handleUnitChange = (event) => {
423
493
  const unit = event.target.value;
@@ -430,8 +500,8 @@ var SizeControl = ({ units: units2, placeholder }) => {
430
500
  }
431
501
  setValue({ $$type: "size", value: { ...propValue, size } });
432
502
  };
433
- return /* @__PURE__ */ React10.createElement(import_ui8.Stack, { direction: "row" }, /* @__PURE__ */ React10.createElement(
434
- import_ui8.TextField,
503
+ return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { direction: "row" }, /* @__PURE__ */ React11.createElement(
504
+ import_ui9.TextField,
435
505
  {
436
506
  size: "tiny",
437
507
  type: "number",
@@ -439,8 +509,8 @@ var SizeControl = ({ units: units2, placeholder }) => {
439
509
  onChange: handleSizeChange,
440
510
  placeholder
441
511
  }
442
- ), /* @__PURE__ */ React10.createElement(
443
- import_ui8.Select,
512
+ ), /* @__PURE__ */ React11.createElement(
513
+ import_ui9.Select,
444
514
  {
445
515
  size: "tiny",
446
516
  value: propValue.unit,
@@ -450,40 +520,40 @@ var SizeControl = ({ units: units2, placeholder }) => {
450
520
  transformOrigin: { vertical: "top", horizontal: "right" }
451
521
  }
452
522
  },
453
- units2.map((unit) => /* @__PURE__ */ React10.createElement(import_ui8.MenuItem, { key: unit, value: unit }, unit.toUpperCase()))
523
+ units2.map((unit) => /* @__PURE__ */ React11.createElement(import_ui9.MenuItem, { key: unit, value: unit }, unit.toUpperCase()))
454
524
  ));
455
525
  };
456
- var defaultState = {
526
+ var defaultState2 = {
457
527
  $$type: "size",
458
528
  value: { unit: "px", size: 0 }
459
529
  };
460
530
 
461
- // src/components/editing-panel/style-tab/sections/size.tsx
462
- var import_ui9 = require("@elementor/ui");
463
- var import_i18n = require("@wordpress/i18n");
531
+ // src/components/style-sections/size-section.tsx
532
+ var import_ui10 = require("@elementor/ui");
533
+ var import_i18n2 = require("@wordpress/i18n");
464
534
  var SizeSection = () => {
465
- return /* @__PURE__ */ React11.createElement(CollapsibleSection, { title: (0, import_i18n.__)("Size", "elementor") }, /* @__PURE__ */ React11.createElement(import_ui9.Stack, { gap: 1.5 }, /* @__PURE__ */ React11.createElement(import_ui9.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React11.createElement(Control2, { bind: "width", label: (0, import_i18n.__)("Width", "elementor") }), /* @__PURE__ */ React11.createElement(Control2, { bind: "height", label: (0, import_i18n.__)("Height", "elementor") })), /* @__PURE__ */ React11.createElement(import_ui9.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React11.createElement(Control2, { bind: "min-width", label: (0, import_i18n.__)("Min. Width", "elementor") }), /* @__PURE__ */ React11.createElement(Control2, { bind: "min-height", label: (0, import_i18n.__)("Min. Height", "elementor") })), /* @__PURE__ */ React11.createElement(import_ui9.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React11.createElement(Control2, { bind: "max-width", label: (0, import_i18n.__)("Max. Width", "elementor") }), /* @__PURE__ */ React11.createElement(Control2, { bind: "max-height", label: (0, import_i18n.__)("Max. Height", "elementor") }))));
535
+ return /* @__PURE__ */ React12.createElement(CollapsibleSection, { title: (0, import_i18n2.__)("Size", "elementor") }, /* @__PURE__ */ React12.createElement(import_ui10.Stack, { gap: 1.5 }, /* @__PURE__ */ React12.createElement(import_ui10.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React12.createElement(Control2, { bind: "width", label: (0, import_i18n2.__)("Width", "elementor") }), /* @__PURE__ */ React12.createElement(Control2, { bind: "height", label: (0, import_i18n2.__)("Height", "elementor") })), /* @__PURE__ */ React12.createElement(import_ui10.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React12.createElement(Control2, { bind: "min-width", label: (0, import_i18n2.__)("Min. Width", "elementor") }), /* @__PURE__ */ React12.createElement(Control2, { bind: "min-height", label: (0, import_i18n2.__)("Min. Height", "elementor") })), /* @__PURE__ */ React12.createElement(import_ui10.Stack, { direction: "row", gap: 2 }, /* @__PURE__ */ React12.createElement(Control2, { bind: "max-width", label: (0, import_i18n2.__)("Max. Width", "elementor") }), /* @__PURE__ */ React12.createElement(Control2, { bind: "max-height", label: (0, import_i18n2.__)("Max. Height", "elementor") }))));
466
536
  };
467
537
  var units = ["px", "%", "em", "rem", "vw"];
468
538
  var Control2 = ({ label, bind }) => {
469
- return /* @__PURE__ */ React11.createElement(StyleControl, { bind }, /* @__PURE__ */ React11.createElement(import_ui9.Stack, { gap: 1, sx: { flex: "0 1 50%" } }, /* @__PURE__ */ React11.createElement(StyleControl.Label, null, label), /* @__PURE__ */ React11.createElement(SizeControl, { units })));
539
+ return /* @__PURE__ */ React12.createElement(StyleControl, { bind }, /* @__PURE__ */ React12.createElement(import_ui10.Stack, { gap: 1, sx: { flex: "0 1 50%" } }, /* @__PURE__ */ React12.createElement(StyleControl.Label, null, label), /* @__PURE__ */ React12.createElement(SizeControl, { units })));
470
540
  };
471
541
 
472
- // src/components/editing-panel/style-tab/style-tab.tsx
542
+ // src/components/style-tab.tsx
473
543
  var StyleTab = () => {
474
544
  const { element } = useElementContext();
475
545
  const elementStyles = useElementStyles(element.id);
476
546
  const [selectedStyleDef = null] = Object.values(elementStyles || {});
477
- return /* @__PURE__ */ React12.createElement(StyleContext, { selectedStyleDef }, /* @__PURE__ */ React12.createElement(import_ui10.Stack, null, /* @__PURE__ */ React12.createElement(SizeSection, null)));
547
+ return /* @__PURE__ */ React13.createElement(StyleContext, { selectedStyleDef }, /* @__PURE__ */ React13.createElement(import_ui11.Stack, null, /* @__PURE__ */ React13.createElement(SizeSection, null)));
478
548
  };
479
549
 
480
- // src/components/editing-panel/editing-panel-tabs.tsx
550
+ // src/components/editing-panel-tabs.tsx
481
551
  var EditingPanelTabs = () => {
482
- const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui11.useTabs)("settings");
483
- return /* @__PURE__ */ React13.createElement(import_ui11.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React13.createElement(import_ui11.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React13.createElement(import_ui11.Tab, { label: (0, import_i18n2.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React13.createElement(import_ui11.Tab, { label: (0, import_i18n2.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React13.createElement(import_ui11.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React13.createElement(SettingsTab, null)), /* @__PURE__ */ React13.createElement(import_ui11.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React13.createElement(StyleTab, null)));
552
+ const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui12.useTabs)("settings");
553
+ return /* @__PURE__ */ React14.createElement(import_ui12.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React14.createElement(import_ui12.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React14.createElement(import_ui12.Tab, { label: (0, import_i18n3.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React14.createElement(import_ui12.Tab, { label: (0, import_i18n3.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React14.createElement(import_ui12.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React14.createElement(SettingsTab, null)), /* @__PURE__ */ React14.createElement(import_ui12.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React14.createElement(StyleTab, null)));
484
554
  };
485
555
 
486
- // src/components/editing-panel/editing-panel.tsx
556
+ // src/components/editing-panel.tsx
487
557
  var EditingPanel = () => {
488
558
  const elements = useSelectedElements();
489
559
  const [selectedElement] = elements;
@@ -491,8 +561,8 @@ var EditingPanel = () => {
491
561
  if (elements.length !== 1 || !elementType) {
492
562
  return null;
493
563
  }
494
- const panelTitle = (0, import_i18n3.__)("Edit %s", "elementor").replace("%s", elementType.title);
495
- return /* @__PURE__ */ React14.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React14.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React14.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React14.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React14.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React14.createElement(EditingPanelTabs, null))));
564
+ const panelTitle = (0, import_i18n4.__)("Edit %s", "elementor").replace("%s", elementType.title);
565
+ return /* @__PURE__ */ React15.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React15.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React15.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React15.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React15.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React15.createElement(EditingPanelTabs, null))));
496
566
  };
497
567
 
498
568
  // src/panel.ts
@@ -528,7 +598,7 @@ var useOpenEditorPanel = () => {
528
598
  }, []);
529
599
  };
530
600
 
531
- // src/components/editing-panel/editing-panel-hooks.tsx
601
+ // src/components/editing-panel-hooks.tsx
532
602
  var EditingPanelHooks = () => {
533
603
  useOpenEditorPanel();
534
604
  return null;