@elementor/editor-variables 0.11.0 → 0.13.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 (9) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/index.js +225 -127
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +222 -126
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +7 -6
  7. package/src/components/color-variable-creation.tsx +56 -79
  8. package/src/components/font-variable-creation.tsx +131 -0
  9. package/src/components/variables-selection-popover.tsx +34 -20
package/CHANGELOG.md CHANGED
@@ -1,5 +1,41 @@
1
1
  # @elementor/editor-variables
2
2
 
3
+ ## 0.13.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 5799919: Add font variable creation ui
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [ab6320c]
12
+ - Updated dependencies [199c99a]
13
+ - Updated dependencies [dac8026]
14
+ - Updated dependencies [2c11540]
15
+ - @elementor/editor-editing-panel@1.45.0
16
+ - @elementor/editor-props@0.13.0
17
+ - @elementor/editor-controls@1.0.0
18
+ - @elementor/editor-canvas@0.23.0
19
+
20
+ ## 0.12.0
21
+
22
+ ### Minor Changes
23
+
24
+ - 80dbf43: Extract popover headers to a standalone component inside the Editor UI package.
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies [56b4348]
29
+ - Updated dependencies [ea5d3df]
30
+ - Updated dependencies [80dbf43]
31
+ - Updated dependencies [6eeb59e]
32
+ - Updated dependencies [af4e938]
33
+ - Updated dependencies [a0af69a]
34
+ - @elementor/editor-canvas@0.22.3
35
+ - @elementor/editor-editing-panel@1.44.0
36
+ - @elementor/editor-controls@0.36.0
37
+ - @elementor/editor-ui@0.11.0
38
+
3
39
  ## 0.11.0
4
40
 
5
41
  ### Minor Changes
package/dist/index.js CHANGED
@@ -39,12 +39,12 @@ var import_editor = require("@elementor/editor");
39
39
 
40
40
  // src/init-color-variables.ts
41
41
  var import_editor_canvas2 = require("@elementor/editor-canvas");
42
- var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
42
+ var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
43
43
 
44
44
  // src/controls/color-variables-selection-control.tsx
45
- var React4 = __toESM(require("react"));
46
- var import_editor_controls3 = require("@elementor/editor-controls");
47
- var import_editor_props2 = require("@elementor/editor-props");
45
+ var React5 = __toESM(require("react"));
46
+ var import_editor_controls4 = require("@elementor/editor-controls");
47
+ var import_editor_props3 = require("@elementor/editor-props");
48
48
 
49
49
  // src/components/color-indicator.tsx
50
50
  var import_ui = require("@elementor/ui");
@@ -380,20 +380,28 @@ var ColorVariablesSelection = ({ onSelect }) => {
380
380
  };
381
381
 
382
382
  // src/components/variables-selection-popover.tsx
383
- var React3 = __toESM(require("react"));
384
- var import_react4 = require("react");
385
- var import_icons3 = require("@elementor/icons");
386
- var import_ui5 = require("@elementor/ui");
387
- var import_i18n2 = require("@wordpress/i18n");
383
+ var React4 = __toESM(require("react"));
384
+ var import_react5 = require("react");
385
+ var import_editor_ui3 = require("@elementor/editor-ui");
386
+ var import_icons4 = require("@elementor/icons");
387
+ var import_ui6 = require("@elementor/ui");
388
+ var import_i18n3 = require("@wordpress/i18n");
389
+
390
+ // src/prop-types/font-variable-prop-type.ts
391
+ var import_editor_props2 = require("@elementor/editor-props");
392
+ var import_schema2 = require("@elementor/schema");
393
+ var fontVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-font-variable", import_schema2.z.string());
388
394
 
389
395
  // src/components/color-variable-creation.tsx
390
396
  var React2 = __toESM(require("react"));
391
397
  var import_react3 = require("react");
392
398
  var import_editor_controls2 = require("@elementor/editor-controls");
399
+ var import_editor_ui = require("@elementor/editor-ui");
393
400
  var import_icons2 = require("@elementor/icons");
394
401
  var import_ui4 = require("@elementor/ui");
395
402
  var import_i18n = require("@wordpress/i18n");
396
- var ColorVariableCreation = ({ popupState }) => {
403
+ var SIZE = "tiny";
404
+ var ColorVariableCreation = ({ onClose }) => {
397
405
  const { setValue: setVariable } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
398
406
  const [color, setColor] = (0, import_react3.useState)("");
399
407
  const [label, setLabel] = (0, import_react3.useState)("");
@@ -404,7 +412,7 @@ var ColorVariableCreation = ({ popupState }) => {
404
412
  };
405
413
  const closePopover = () => {
406
414
  resetFields();
407
- popupState.close();
415
+ onClose();
408
416
  };
409
417
  const handleCreate = () => {
410
418
  createVariable({
@@ -416,136 +424,226 @@ var ColorVariableCreation = ({ popupState }) => {
416
424
  closePopover();
417
425
  });
418
426
  };
419
- const isInValidForm = () => {
427
+ const isFormInvalid = () => {
420
428
  return !color?.trim() || !label?.trim();
421
429
  };
422
- return /* @__PURE__ */ React2.createElement(import_ui4.Box, { ref: anchorRef }, /* @__PURE__ */ React2.createElement(
423
- import_ui4.Popover,
430
+ return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
431
+ import_editor_ui.PopoverHeader,
432
+ {
433
+ title: (0, import_i18n.__)("Create variable", "elementor"),
434
+ onClose: closePopover,
435
+ icon: /* @__PURE__ */ React2.createElement(import_icons2.BrushIcon, { fontSize: SIZE })
436
+ }
437
+ ), /* @__PURE__ */ React2.createElement(import_ui4.Divider, null), /* @__PURE__ */ React2.createElement(import_ui4.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
438
+ import_ui4.TextField,
424
439
  {
425
- ...(0, import_ui4.bindPopover)(popupState),
440
+ size: "tiny",
441
+ fullWidth: true,
442
+ value: label,
443
+ onChange: (e) => setLabel(e.target.value)
444
+ }
445
+ ))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Value", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
446
+ import_ui4.UnstableColorField,
447
+ {
448
+ size: "tiny",
449
+ fullWidth: true,
450
+ value: color,
451
+ onChange: setColor,
452
+ slotProps: {
453
+ colorPicker: {
454
+ anchorEl: anchorRef.current,
455
+ anchorOrigin: { vertical: "top", horizontal: "right" },
456
+ transformOrigin: { vertical: "top", horizontal: -10 }
457
+ }
458
+ }
459
+ }
460
+ )))), /* @__PURE__ */ React2.createElement(import_ui4.CardActions, null, /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, (0, import_i18n.__)("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n.__)("Create", "elementor"))));
461
+ };
462
+
463
+ // src/components/font-variable-creation.tsx
464
+ var React3 = __toESM(require("react"));
465
+ var import_react4 = require("react");
466
+ var import_editor_controls3 = require("@elementor/editor-controls");
467
+ var import_editor_editing_panel = require("@elementor/editor-editing-panel");
468
+ var import_editor_ui2 = require("@elementor/editor-ui");
469
+ var import_icons3 = require("@elementor/icons");
470
+ var import_ui5 = require("@elementor/ui");
471
+ var import_i18n2 = require("@wordpress/i18n");
472
+ var SIZE2 = "tiny";
473
+ var FontVariableCreation = ({ onClose }) => {
474
+ const fontFamilies = (0, import_editor_editing_panel.useFontFamilies)();
475
+ const { setValue: setVariable } = (0, import_editor_controls3.useBoundProp)(fontVariablePropTypeUtil);
476
+ const [fontFamily, setFontFamily] = (0, import_react4.useState)("");
477
+ const [label, setLabel] = (0, import_react4.useState)("");
478
+ const anchorRef = (0, import_react4.useRef)(null);
479
+ const fontPopoverState = (0, import_ui5.usePopupState)({ variant: "popover" });
480
+ const resetFields = () => {
481
+ setFontFamily("");
482
+ setLabel("");
483
+ };
484
+ const closePopover = () => {
485
+ resetFields();
486
+ onClose();
487
+ };
488
+ const handleCreate = () => {
489
+ createVariable({
490
+ value: fontFamily,
491
+ label,
492
+ type: fontVariablePropTypeUtil.key
493
+ }).then((key) => {
494
+ setVariable(key);
495
+ closePopover();
496
+ });
497
+ };
498
+ const isFormInvalid = () => {
499
+ return !fontFamily?.trim() || !label?.trim();
500
+ };
501
+ return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
502
+ import_editor_ui2.PopoverHeader,
503
+ {
504
+ title: (0, import_i18n2.__)("Create variable", "elementor"),
505
+ onClose: closePopover,
506
+ icon: /* @__PURE__ */ React3.createElement(import_icons3.TextIcon, { fontSize: SIZE2 })
507
+ }
508
+ ), /* @__PURE__ */ React3.createElement(import_ui5.Divider, null), /* @__PURE__ */ React3.createElement(import_ui5.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React3.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui5.FormLabel, { size: "small" }, (0, import_i18n2.__)("Name", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(
509
+ import_ui5.TextField,
510
+ {
511
+ size: "tiny",
512
+ fullWidth: true,
513
+ value: label,
514
+ onChange: (e) => setLabel(e.target.value)
515
+ }
516
+ ))), /* @__PURE__ */ React3.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(import_ui5.FormLabel, { size: "small" }, (0, import_i18n2.__)("Value", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
517
+ import_ui5.UnstableTag,
518
+ {
519
+ variant: "outlined",
520
+ label: fontFamily,
521
+ endIcon: /* @__PURE__ */ React3.createElement(import_icons3.ChevronDownIcon, { fontSize: "tiny" }),
522
+ ...(0, import_ui5.bindTrigger)(fontPopoverState),
523
+ fullWidth: true
524
+ }
525
+ ), /* @__PURE__ */ React3.createElement(
526
+ import_ui5.Popover,
527
+ {
528
+ disablePortal: true,
529
+ disableScrollLock: true,
426
530
  anchorEl: anchorRef.current,
427
- anchorOrigin: { vertical: "bottom", horizontal: "right" },
428
- transformOrigin: { vertical: "top", horizontal: "right" }
531
+ anchorOrigin: { vertical: "top", horizontal: "right" },
532
+ transformOrigin: { vertical: "top", horizontal: -20 },
533
+ ...(0, import_ui5.bindPopover)(fontPopoverState)
429
534
  },
430
- /* @__PURE__ */ React2.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(import_icons2.BrushIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui4.Typography, { variant: "subtitle2" }, (0, import_i18n.__)("Create variable", "elementor")), /* @__PURE__ */ React2.createElement(
431
- import_ui4.CloseButton,
535
+ /* @__PURE__ */ React3.createElement(
536
+ import_editor_controls3.FontFamilySelector,
432
537
  {
433
- slotProps: { icon: { fontSize: "small" } },
434
- sx: { ml: "auto" },
435
- onClick: closePopover
538
+ fontFamilies,
539
+ fontFamily,
540
+ onFontFamilyChange: setFontFamily,
541
+ onClose: fontPopoverState.close
436
542
  }
437
- )),
438
- /* @__PURE__ */ React2.createElement(import_ui4.Divider, null),
439
- /* @__PURE__ */ React2.createElement(import_ui4.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
440
- import_ui4.TextField,
441
- {
442
- size: "tiny",
443
- fullWidth: true,
444
- value: label,
445
- onChange: (e) => setLabel(e.target.value)
446
- }
447
- ))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Value", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
448
- import_ui4.UnstableColorField,
449
- {
450
- size: "tiny",
451
- fullWidth: true,
452
- value: color,
453
- onChange: setColor,
454
- slotProps: {
455
- colorPicker: {
456
- anchorEl: anchorRef.current,
457
- anchorOrigin: { vertical: "top", horizontal: "right" },
458
- transformOrigin: { vertical: "top", horizontal: -10 }
459
- }
460
- }
461
- }
462
- )))),
463
- /* @__PURE__ */ React2.createElement(import_ui4.CardActions, null, /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, (0, import_i18n.__)("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", variant: "contained", disabled: isInValidForm(), onClick: handleCreate }, (0, import_i18n.__)("Create", "elementor")))
464
- ));
543
+ )
544
+ ))))), /* @__PURE__ */ React3.createElement(import_ui5.CardActions, null, /* @__PURE__ */ React3.createElement(import_ui5.Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, (0, import_i18n2.__)("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(import_ui5.Button, { size: "small", variant: "contained", disabled: isFormInvalid(), onClick: handleCreate }, (0, import_i18n2.__)("Create", "elementor"))));
465
545
  };
466
546
 
467
547
  // src/components/variables-selection-popover.tsx
548
+ var SIZE3 = "tiny";
468
549
  var VariablesSelectionPopover = ({
469
550
  selectedVariable,
470
551
  unlinkVariable,
471
552
  startTagAdornment,
472
553
  children
473
554
  }) => {
474
- const id = (0, import_react4.useId)();
475
- const popupState = (0, import_ui5.usePopupState)({ variant: "popover", popupId: `elementor-variables-action-${id}` });
476
- const creationPopupState = (0, import_ui5.usePopupState)({ variant: "popover", popupId: `elementor-variables-creation-${id}` });
555
+ const id = (0, import_react5.useId)();
556
+ const popupState = (0, import_ui6.usePopupState)({ variant: "popover", popupId: `elementor-variables-action-${id}` });
557
+ const creationPopupState = (0, import_ui6.usePopupState)({ variant: "popover", popupId: `elementor-variables-creation-${id}` });
477
558
  const closePopover = () => popupState.close();
478
559
  const handleCreateButtonClick = (event) => {
479
560
  closePopover();
480
- (0, import_ui5.bindTrigger)(creationPopupState).onClick(event);
561
+ (0, import_ui6.bindTrigger)(creationPopupState).onClick(event);
481
562
  };
482
- const anchorRef = (0, import_react4.useRef)(null);
563
+ const anchorRef = (0, import_react5.useRef)(null);
483
564
  const { label } = selectedVariable;
484
565
  const colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;
485
- return /* @__PURE__ */ React3.createElement(import_ui5.Box, { ref: anchorRef }, /* @__PURE__ */ React3.createElement(
486
- import_ui5.UnstableTag,
566
+ const fontCreationEnabled = fontVariablePropTypeUtil.key === selectedVariable.type;
567
+ return /* @__PURE__ */ React4.createElement(import_ui6.Box, { ref: anchorRef }, /* @__PURE__ */ React4.createElement(
568
+ import_ui6.UnstableTag,
487
569
  {
488
570
  fullWidth: true,
489
571
  showActionsOnHover: true,
490
- ...(0, import_ui5.bindTrigger)(popupState),
491
- startIcon: /* @__PURE__ */ React3.createElement(import_ui5.Stack, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
492
- label: /* @__PURE__ */ React3.createElement(import_ui5.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React3.createElement(import_ui5.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
493
- actions: /* @__PURE__ */ React3.createElement(import_ui5.IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": (0, import_i18n2.__)("Unlink", "elementor") }, /* @__PURE__ */ React3.createElement(import_icons3.DetachIcon, { fontSize: "tiny" }))
572
+ ...(0, import_ui6.bindTrigger)(popupState),
573
+ startIcon: /* @__PURE__ */ React4.createElement(import_ui6.Stack, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React4.createElement(import_icons4.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
574
+ label: /* @__PURE__ */ React4.createElement(import_ui6.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React4.createElement(import_ui6.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
575
+ actions: /* @__PURE__ */ React4.createElement(import_ui6.IconButton, { size: SIZE3, onClick: unlinkVariable, "aria-label": (0, import_i18n3.__)("Unlink", "elementor") }, /* @__PURE__ */ React4.createElement(import_icons4.DetachIcon, { fontSize: SIZE3 }))
494
576
  }
495
- ), /* @__PURE__ */ React3.createElement(
496
- import_ui5.Popover,
577
+ ), /* @__PURE__ */ React4.createElement(
578
+ import_ui6.Popover,
497
579
  {
498
- ...(0, import_ui5.bindPopover)(popupState),
580
+ ...(0, import_ui6.bindPopover)(popupState),
499
581
  disableScrollLock: true,
500
582
  anchorEl: anchorRef.current,
501
583
  anchorOrigin: { vertical: "bottom", horizontal: "right" },
502
584
  transformOrigin: { vertical: "top", horizontal: "right" }
503
585
  },
504
- /* @__PURE__ */ React3.createElement(import_ui5.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React3.createElement(import_ui5.Typography, { variant: "subtitle2" }, (0, import_i18n2.__)("Variables", "elementor")), /* @__PURE__ */ React3.createElement(import_ui5.Stack, { direction: "row", sx: { ml: "auto" } }, colorCreationEnabled && /* @__PURE__ */ React3.createElement(
505
- import_ui5.IconButton,
586
+ /* @__PURE__ */ React4.createElement(
587
+ import_editor_ui3.PopoverHeader,
506
588
  {
507
- ...(0, import_ui5.bindTrigger)(creationPopupState),
508
- size: "tiny",
509
- onClick: handleCreateButtonClick
510
- },
511
- /* @__PURE__ */ React3.createElement(import_icons3.PlusIcon, { fontSize: "tiny" })
512
- ), /* @__PURE__ */ React3.createElement(import_ui5.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: closePopover }))),
589
+ title: (0, import_i18n3.__)("Variables", "elementor"),
590
+ onClose: closePopover,
591
+ icon: /* @__PURE__ */ React4.createElement(import_icons4.ColorFilterIcon, { fontSize: SIZE3 }),
592
+ actions: [
593
+ /* @__PURE__ */ React4.createElement(
594
+ import_ui6.IconButton,
595
+ {
596
+ key: "createVariable",
597
+ ...(0, import_ui6.bindTrigger)(creationPopupState),
598
+ size: SIZE3,
599
+ onClick: handleCreateButtonClick
600
+ },
601
+ /* @__PURE__ */ React4.createElement(import_icons4.PlusIcon, { fontSize: SIZE3 })
602
+ )
603
+ ]
604
+ }
605
+ ),
513
606
  children?.({ closePopover })
514
- ), colorCreationEnabled && /* @__PURE__ */ React3.createElement(ColorVariableCreation, { popupState: creationPopupState }));
607
+ ), /* @__PURE__ */ React4.createElement(import_ui6.Box, { ref: anchorRef }, /* @__PURE__ */ React4.createElement(
608
+ import_ui6.Popover,
609
+ {
610
+ ...(0, import_ui6.bindPopover)(creationPopupState),
611
+ anchorEl: anchorRef.current,
612
+ anchorOrigin: { vertical: "bottom", horizontal: "right" },
613
+ transformOrigin: { vertical: "top", horizontal: "right" }
614
+ },
615
+ colorCreationEnabled && /* @__PURE__ */ React4.createElement(ColorVariableCreation, { onClose: creationPopupState.close }),
616
+ fontCreationEnabled && /* @__PURE__ */ React4.createElement(FontVariableCreation, { onClose: creationPopupState.close })
617
+ )));
515
618
  };
516
619
 
517
620
  // src/controls/color-variables-selection-control.tsx
518
621
  var ColorVariablesSelectionControl = () => {
519
- const { setValue } = (0, import_editor_controls3.useBoundProp)();
520
- const { value: variableValue } = (0, import_editor_controls3.useBoundProp)(colorVariablePropTypeUtil);
622
+ const { setValue } = (0, import_editor_controls4.useBoundProp)();
623
+ const { value: variableValue } = (0, import_editor_controls4.useBoundProp)(colorVariablePropTypeUtil);
521
624
  const selectedVariable = useVariable(variableValue);
522
625
  if (!selectedVariable) {
523
626
  throw new Error(`Global color variable ${variableValue} not found`);
524
627
  }
525
628
  const unlinkVariable = () => {
526
- setValue(import_editor_props2.colorPropTypeUtil.create(selectedVariable.value));
629
+ setValue(import_editor_props3.colorPropTypeUtil.create(selectedVariable.value));
527
630
  };
528
- return /* @__PURE__ */ React4.createElement(
631
+ return /* @__PURE__ */ React5.createElement(
529
632
  VariablesSelectionPopover,
530
633
  {
531
634
  selectedVariable,
532
635
  unlinkVariable,
533
- startTagAdornment: /* @__PURE__ */ React4.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
636
+ startTagAdornment: /* @__PURE__ */ React5.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
534
637
  },
535
- ({ closePopover }) => /* @__PURE__ */ React4.createElement(ColorVariablesSelection, { onSelect: closePopover })
638
+ ({ closePopover }) => /* @__PURE__ */ React5.createElement(ColorVariablesSelection, { onSelect: closePopover })
536
639
  );
537
640
  };
538
641
 
539
642
  // src/hooks/use-prop-color-variable-action.tsx
540
- var React5 = __toESM(require("react"));
541
- var import_editor_editing_panel = require("@elementor/editor-editing-panel");
542
- var import_icons4 = require("@elementor/icons");
543
- var import_i18n3 = require("@wordpress/i18n");
544
-
545
- // src/prop-types/font-variable-prop-type.ts
546
- var import_editor_props3 = require("@elementor/editor-props");
547
- var import_schema2 = require("@elementor/schema");
548
- var fontVariablePropTypeUtil = (0, import_editor_props3.createPropUtils)("global-font-variable", import_schema2.z.string());
643
+ var React6 = __toESM(require("react"));
644
+ var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
645
+ var import_icons5 = require("@elementor/icons");
646
+ var import_i18n4 = require("@wordpress/i18n");
549
647
 
550
648
  // src/utils.ts
551
649
  var hasAssignedColorVariable = (propValue) => {
@@ -563,13 +661,13 @@ var supportsFontVariables = (propType) => {
563
661
 
564
662
  // src/hooks/use-prop-color-variable-action.tsx
565
663
  var usePropColorVariableAction = () => {
566
- const { propType } = (0, import_editor_editing_panel.useBoundProp)();
664
+ const { propType } = (0, import_editor_editing_panel2.useBoundProp)();
567
665
  const visible = !!propType && supportsColorVariables(propType);
568
666
  return {
569
667
  visible,
570
- icon: import_icons4.ColorFilterIcon,
571
- title: (0, import_i18n3.__)("Variables", "elementor"),
572
- popoverContent: ({ closePopover }) => /* @__PURE__ */ React5.createElement(ColorVariablesSelection, { onSelect: closePopover })
668
+ icon: import_icons5.ColorFilterIcon,
669
+ title: (0, import_i18n4.__)("Variables", "elementor"),
670
+ popoverContent: ({ closePopover }) => /* @__PURE__ */ React6.createElement(ColorVariablesSelection, { onSelect: closePopover })
573
671
  };
574
672
  };
575
673
 
@@ -583,9 +681,9 @@ var variableTransformer = (0, import_editor_canvas.createTransformer)((value) =>
583
681
  });
584
682
 
585
683
  // src/init-color-variables.ts
586
- var { registerPopoverAction } = import_editor_editing_panel2.controlActionsMenu;
684
+ var { registerPopoverAction } = import_editor_editing_panel3.controlActionsMenu;
587
685
  function initColorVariables() {
588
- (0, import_editor_editing_panel2.registerControlReplacement)({
686
+ (0, import_editor_editing_panel3.registerControlReplacement)({
589
687
  component: ColorVariablesSelectionControl,
590
688
  condition: ({ value }) => hasAssignedColorVariable(value)
591
689
  });
@@ -598,36 +696,36 @@ function initColorVariables() {
598
696
 
599
697
  // src/init-font-variables.ts
600
698
  var import_editor_canvas3 = require("@elementor/editor-canvas");
601
- var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
699
+ var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
602
700
 
603
701
  // src/controls/font-variables-selection-control.tsx
604
- var React7 = __toESM(require("react"));
605
- var import_editor_controls5 = require("@elementor/editor-controls");
702
+ var React8 = __toESM(require("react"));
703
+ var import_editor_controls6 = require("@elementor/editor-controls");
606
704
  var import_editor_props4 = require("@elementor/editor-props");
607
705
 
608
706
  // src/components/font-variables-selection.tsx
609
- var React6 = __toESM(require("react"));
610
- var import_react5 = require("react");
611
- var import_editor_controls4 = require("@elementor/editor-controls");
612
- var import_icons5 = require("@elementor/icons");
613
- var import_ui6 = require("@elementor/ui");
707
+ var React7 = __toESM(require("react"));
708
+ var import_react6 = require("react");
709
+ var import_editor_controls5 = require("@elementor/editor-controls");
710
+ var import_icons6 = require("@elementor/icons");
711
+ var import_ui7 = require("@elementor/ui");
614
712
  var FontVariablesSelection = ({ onSelect }) => {
615
- const { value: variable, setValue: setVariable } = (0, import_editor_controls4.useBoundProp)(fontVariablePropTypeUtil);
713
+ const { value: variable, setValue: setVariable } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
616
714
  const variables = usePropVariables(fontVariablePropTypeUtil.key);
617
715
  const handleSetVariable = (key) => {
618
716
  setVariable(key);
619
717
  onSelect?.();
620
718
  };
621
- return /* @__PURE__ */ React6.createElement(import_react5.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_ui6.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React6.createElement(import_ui6.MenuList, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React6.createElement(
719
+ return /* @__PURE__ */ React7.createElement(import_react6.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui7.Divider, null), /* @__PURE__ */ React7.createElement(import_ui7.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React7.createElement(import_ui7.MenuList, { role: "listbox", tabIndex: 0 }, variables.map(({ value, label, key }) => /* @__PURE__ */ React7.createElement(
622
720
  StyledMenuItem,
623
721
  {
624
722
  key,
625
723
  onClick: () => handleSetVariable(key),
626
724
  selected: key === variable
627
725
  },
628
- /* @__PURE__ */ React6.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React6.createElement(import_icons5.TextIcon, null)),
629
- /* @__PURE__ */ React6.createElement(
630
- import_ui6.ListItemText,
726
+ /* @__PURE__ */ React7.createElement(import_ui7.ListItemIcon, null, /* @__PURE__ */ React7.createElement(import_icons6.TextIcon, null)),
727
+ /* @__PURE__ */ React7.createElement(
728
+ import_ui7.ListItemText,
631
729
  {
632
730
  primary: label,
633
731
  secondary: value,
@@ -651,14 +749,14 @@ var FontVariablesSelection = ({ onSelect }) => {
651
749
  sx: { display: "flex", alignItems: "center", gap: 1 }
652
750
  }
653
751
  ),
654
- /* @__PURE__ */ React6.createElement(import_icons5.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
752
+ /* @__PURE__ */ React7.createElement(import_icons6.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
655
753
  )))));
656
754
  };
657
755
 
658
756
  // src/controls/font-variables-selection-control.tsx
659
757
  var FontVariablesSelectionControl = () => {
660
- const { setValue: setFontFamily } = (0, import_editor_controls5.useBoundProp)();
661
- const { value: variableValue } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
758
+ const { setValue: setFontFamily } = (0, import_editor_controls6.useBoundProp)();
759
+ const { value: variableValue } = (0, import_editor_controls6.useBoundProp)(fontVariablePropTypeUtil);
662
760
  const selectedVariable = useVariable(variableValue);
663
761
  if (!selectedVariable) {
664
762
  throw new Error(`Global font variable ${variableValue} not found`);
@@ -666,29 +764,29 @@ var FontVariablesSelectionControl = () => {
666
764
  const unlinkVariable = () => {
667
765
  setFontFamily(import_editor_props4.stringPropTypeUtil.create(selectedVariable.value));
668
766
  };
669
- return /* @__PURE__ */ React7.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React7.createElement(FontVariablesSelection, { onSelect: closePopover }));
767
+ return /* @__PURE__ */ React8.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React8.createElement(FontVariablesSelection, { onSelect: closePopover }));
670
768
  };
671
769
 
672
770
  // src/hooks/use-prop-font-variable-action.tsx
673
- var React8 = __toESM(require("react"));
674
- var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
675
- var import_icons6 = require("@elementor/icons");
676
- var import_i18n4 = require("@wordpress/i18n");
771
+ var React9 = __toESM(require("react"));
772
+ var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
773
+ var import_icons7 = require("@elementor/icons");
774
+ var import_i18n5 = require("@wordpress/i18n");
677
775
  var usePropFontVariableAction = () => {
678
- const { propType } = (0, import_editor_editing_panel3.useBoundProp)();
776
+ const { propType } = (0, import_editor_editing_panel4.useBoundProp)();
679
777
  const visible = !!propType && supportsFontVariables(propType);
680
778
  return {
681
779
  visible,
682
- icon: import_icons6.ColorFilterIcon,
683
- title: (0, import_i18n4.__)("Variables", "elementor"),
684
- popoverContent: ({ closePopover }) => /* @__PURE__ */ React8.createElement(FontVariablesSelection, { onSelect: closePopover })
780
+ icon: import_icons7.ColorFilterIcon,
781
+ title: (0, import_i18n5.__)("Variables", "elementor"),
782
+ popoverContent: ({ closePopover }) => /* @__PURE__ */ React9.createElement(FontVariablesSelection, { onSelect: closePopover })
685
783
  };
686
784
  };
687
785
 
688
786
  // src/init-font-variables.ts
689
- var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel4.controlActionsMenu;
787
+ var { registerPopoverAction: registerPopoverAction2 } = import_editor_editing_panel5.controlActionsMenu;
690
788
  function initFontVariables() {
691
- (0, import_editor_editing_panel4.registerControlReplacement)({
789
+ (0, import_editor_editing_panel5.registerControlReplacement)({
692
790
  component: FontVariablesSelectionControl,
693
791
  condition: ({ value }) => hasAssignedFontVariable(value)
694
792
  });
@@ -700,10 +798,10 @@ function initFontVariables() {
700
798
  }
701
799
 
702
800
  // src/renderers/style-variables-renderer.tsx
703
- var React9 = __toESM(require("react"));
704
- var import_react6 = require("react");
801
+ var React10 = __toESM(require("react"));
802
+ var import_react7 = require("react");
705
803
  var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
706
- var import_ui7 = require("@elementor/ui");
804
+ var import_ui8 = require("@elementor/ui");
707
805
 
708
806
  // src/sync/get-canvas-iframe-document.ts
709
807
  function getCanvasIframeDocument() {
@@ -722,14 +820,14 @@ function StyleVariablesRenderer() {
722
820
  }
723
821
  const cssVariables = convertToCssVariables(styleVariables);
724
822
  const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
725
- return /* @__PURE__ */ React9.createElement(import_ui7.Portal, { container }, /* @__PURE__ */ React9.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
823
+ return /* @__PURE__ */ React10.createElement(import_ui8.Portal, { container }, /* @__PURE__ */ React10.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
726
824
  }
727
825
  function usePortalContainer() {
728
826
  return (0, import_editor_v1_adapters.__privateUseListenTo)((0, import_editor_v1_adapters.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
729
827
  }
730
828
  function useStyleVariables() {
731
- const [variables, setVariables] = (0, import_react6.useState)({});
732
- (0, import_react6.useEffect)(() => {
829
+ const [variables, setVariables] = (0, import_react7.useState)({});
830
+ (0, import_react7.useEffect)(() => {
733
831
  const unsubscribe = styleVariablesRepository.subscribe(setVariables);
734
832
  return () => {
735
833
  unsubscribe();