@elementor/editor-variables 3.33.0-110 → 3.33.0-111

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 (6) hide show
  1. package/dist/index.js +118 -103
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +107 -92
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +12 -12
  6. package/src/components/variables-manager/variables-manager-panel.tsx +22 -4
package/dist/index.js CHANGED
@@ -41,14 +41,14 @@ var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
41
41
  var import_editor_panels2 = require("@elementor/editor-panels");
42
42
 
43
43
  // src/components/variables-manager/variables-manager-panel.tsx
44
- var React8 = __toESM(require("react"));
44
+ var React9 = __toESM(require("react"));
45
45
  var import_react7 = require("react");
46
46
  var import_editor_panels = require("@elementor/editor-panels");
47
47
  var import_editor_ui2 = require("@elementor/editor-ui");
48
48
  var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
49
- var import_icons3 = require("@elementor/icons");
50
- var import_ui8 = require("@elementor/ui");
51
- var import_i18n5 = require("@wordpress/i18n");
49
+ var import_icons4 = require("@elementor/icons");
50
+ var import_ui9 = require("@elementor/ui");
51
+ var import_i18n6 = require("@wordpress/i18n");
52
52
 
53
53
  // src/hooks/use-prop-variables.ts
54
54
  var import_react2 = require("react");
@@ -644,29 +644,44 @@ var restoreVariable = (restoreId, label, value) => {
644
644
  return service.restore(restoreId, label, value).then(extractId);
645
645
  };
646
646
 
647
+ // src/components/ui/delete-confirmation-dialog.tsx
648
+ var React3 = __toESM(require("react"));
649
+ var import_icons = require("@elementor/icons");
650
+ var import_ui3 = require("@elementor/ui");
651
+ var import_i18n3 = require("@wordpress/i18n");
652
+ var TITLE_ID = "delete-variable-dialog";
653
+ var DeleteConfirmationDialog = ({
654
+ open,
655
+ label,
656
+ closeDialog,
657
+ onConfirm
658
+ }) => {
659
+ return /* @__PURE__ */ React3.createElement(import_ui3.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui3.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React3.createElement(import_ui3.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui3.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n3.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React3.createElement(import_ui3.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui3.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Not now", "elementor")), /* @__PURE__ */ React3.createElement(import_ui3.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
660
+ };
661
+
647
662
  // src/components/variables-manager/variables-manager-table.tsx
648
- var React7 = __toESM(require("react"));
663
+ var React8 = __toESM(require("react"));
649
664
  var import_react6 = require("react");
650
665
  var import_editor_ui = require("@elementor/editor-ui");
651
- var import_icons2 = require("@elementor/icons");
652
- var import_ui7 = require("@elementor/ui");
653
- var import_i18n4 = require("@wordpress/i18n");
666
+ var import_icons3 = require("@elementor/icons");
667
+ var import_ui8 = require("@elementor/ui");
668
+ var import_i18n5 = require("@wordpress/i18n");
654
669
 
655
670
  // src/components/fields/label-field.tsx
656
- var React3 = __toESM(require("react"));
671
+ var React4 = __toESM(require("react"));
657
672
  var import_react3 = require("react");
658
- var import_ui3 = require("@elementor/ui");
673
+ var import_ui4 = require("@elementor/ui");
659
674
 
660
675
  // src/utils/validations.ts
661
- var import_i18n3 = require("@wordpress/i18n");
676
+ var import_i18n4 = require("@wordpress/i18n");
662
677
  var ERROR_MESSAGES = {
663
- MISSING_VARIABLE_NAME: (0, import_i18n3.__)("Give your variable a name.", "elementor"),
664
- MISSING_VARIABLE_VALUE: (0, import_i18n3.__)("Add a value to complete your variable.", "elementor"),
665
- INVALID_CHARACTERS: (0, import_i18n3.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
666
- NO_NON_SPECIAL_CHARACTER: (0, import_i18n3.__)("Names have to include at least one non-special character.", "elementor"),
667
- VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n3.__)("Keep names up to 50 characters.", "elementor"),
668
- DUPLICATED_LABEL: (0, import_i18n3.__)("This variable name already exists. Please choose a unique name.", "elementor"),
669
- UNEXPECTED_ERROR: (0, import_i18n3.__)("There was a glitch. Try saving your variable again.", "elementor")
678
+ MISSING_VARIABLE_NAME: (0, import_i18n4.__)("Give your variable a name.", "elementor"),
679
+ MISSING_VARIABLE_VALUE: (0, import_i18n4.__)("Add a value to complete your variable.", "elementor"),
680
+ INVALID_CHARACTERS: (0, import_i18n4.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
681
+ NO_NON_SPECIAL_CHARACTER: (0, import_i18n4.__)("Names have to include at least one non-special character.", "elementor"),
682
+ VARIABLE_LABEL_MAX_LENGTH: (0, import_i18n4.__)("Keep names up to 50 characters.", "elementor"),
683
+ DUPLICATED_LABEL: (0, import_i18n4.__)("This variable name already exists. Please choose a unique name.", "elementor"),
684
+ UNEXPECTED_ERROR: (0, import_i18n4.__)("There was a glitch. Try saving your variable again.", "elementor")
670
685
  };
671
686
  var VARIABLE_LABEL_MAX_LENGTH = 50;
672
687
  var mapServerError = (error) => {
@@ -742,8 +757,8 @@ var LabelField = ({
742
757
  if (isLabelEqual(label, error?.value ?? "") && error?.message) {
743
758
  errorMsg = error.message;
744
759
  }
745
- return /* @__PURE__ */ React3.createElement(
746
- import_ui3.TextField,
760
+ return /* @__PURE__ */ React4.createElement(
761
+ import_ui4.TextField,
747
762
  {
748
763
  id: id2,
749
764
  size,
@@ -758,16 +773,16 @@ var LabelField = ({
758
773
  };
759
774
 
760
775
  // src/components/variables-manager/variable-edit-menu.tsx
761
- var React4 = __toESM(require("react"));
776
+ var React5 = __toESM(require("react"));
762
777
  var import_react4 = require("react");
763
- var import_icons = require("@elementor/icons");
764
- var import_ui4 = require("@elementor/ui");
778
+ var import_icons2 = require("@elementor/icons");
779
+ var import_ui5 = require("@elementor/ui");
765
780
  var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
766
- const menuState = (0, import_ui4.usePopupState)({
781
+ const menuState = (0, import_ui5.usePopupState)({
767
782
  variant: "popover"
768
783
  });
769
- return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(import_ui4.IconButton, { ...(0, import_ui4.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React4.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React4.createElement(
770
- import_ui4.Menu,
784
+ return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { ...(0, import_ui5.bindTrigger)(menuState), disabled, size: "tiny" }, /* @__PURE__ */ React5.createElement(import_icons2.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React5.createElement(
785
+ import_ui5.Menu,
771
786
  {
772
787
  disablePortal: true,
773
788
  MenuListProps: {
@@ -776,7 +791,7 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
776
791
  PaperProps: {
777
792
  elevation: 6
778
793
  },
779
- ...(0, import_ui4.bindMenu)(menuState),
794
+ ...(0, import_ui5.bindMenu)(menuState),
780
795
  anchorEl: menuState.anchorEl,
781
796
  anchorOrigin: {
782
797
  vertical: "bottom",
@@ -789,8 +804,8 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
789
804
  open: menuState.isOpen,
790
805
  onClose: menuState.close
791
806
  },
792
- menuActions.map((action) => /* @__PURE__ */ React4.createElement(
793
- import_ui4.MenuItem,
807
+ menuActions.map((action) => /* @__PURE__ */ React5.createElement(
808
+ import_ui5.MenuItem,
794
809
  {
795
810
  key: action.name,
796
811
  onClick: () => {
@@ -812,9 +827,9 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
812
827
  };
813
828
 
814
829
  // src/components/variables-manager/variable-editable-cell.tsx
815
- var React5 = __toESM(require("react"));
830
+ var React6 = __toESM(require("react"));
816
831
  var import_react5 = require("react");
817
- var import_ui5 = require("@elementor/ui");
832
+ var import_ui6 = require("@elementor/ui");
818
833
  var VariableEditableCell = ({
819
834
  initialValue,
820
835
  children,
@@ -847,8 +862,8 @@ var VariableEditableCell = ({
847
862
  };
848
863
  const editableContent = editableElement({ value, onChange: handleChange });
849
864
  if (isEditing) {
850
- return /* @__PURE__ */ React5.createElement(import_ui5.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React5.createElement(
851
- import_ui5.Stack,
865
+ return /* @__PURE__ */ React6.createElement(import_ui6.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React6.createElement(
866
+ import_ui6.Stack,
852
867
  {
853
868
  direction: "row",
854
869
  alignItems: "center",
@@ -863,8 +878,8 @@ var VariableEditableCell = ({
863
878
  editableContent
864
879
  ));
865
880
  }
866
- return /* @__PURE__ */ React5.createElement(
867
- import_ui5.Stack,
881
+ return /* @__PURE__ */ React6.createElement(
882
+ import_ui6.Stack,
868
883
  {
869
884
  direction: "row",
870
885
  alignItems: "center",
@@ -881,8 +896,8 @@ var VariableEditableCell = ({
881
896
  };
882
897
 
883
898
  // src/components/variables-manager/variable-table-cell.tsx
884
- var React6 = __toESM(require("react"));
885
- var import_ui6 = require("@elementor/ui");
899
+ var React7 = __toESM(require("react"));
900
+ var import_ui7 = require("@elementor/ui");
886
901
  var VariableTableCell = ({
887
902
  children,
888
903
  isHeader,
@@ -901,7 +916,7 @@ var VariableTableCell = ({
901
916
  ...width && { width },
902
917
  ...sx
903
918
  };
904
- return /* @__PURE__ */ React6.createElement(import_ui6.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
919
+ return /* @__PURE__ */ React7.createElement(import_ui7.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
905
920
  };
906
921
 
907
922
  // src/components/variables-manager/variables-manager-table.tsx
@@ -922,17 +937,17 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
922
937
  minWidth: 250,
923
938
  tableLayout: "fixed"
924
939
  };
925
- return /* @__PURE__ */ React7.createElement(import_ui7.TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React7.createElement(import_ui7.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React7.createElement(import_ui7.TableHead, null, /* @__PURE__ */ React7.createElement(import_ui7.TableRow, null, /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n4.__)("Name", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n4.__)("Value", "elementor")), /* @__PURE__ */ React7.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React7.createElement(import_ui7.TableBody, null, /* @__PURE__ */ React7.createElement(
926
- import_ui7.UnstableSortableProvider,
940
+ return /* @__PURE__ */ React8.createElement(import_ui8.TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React8.createElement(import_ui8.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering", stickyHeader: true }, /* @__PURE__ */ React8.createElement(import_ui8.TableHead, null, /* @__PURE__ */ React8.createElement(import_ui8.TableRow, null, /* @__PURE__ */ React8.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React8.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n5.__)("Name", "elementor")), /* @__PURE__ */ React8.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n5.__)("Value", "elementor")), /* @__PURE__ */ React8.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React8.createElement(import_ui8.TableBody, null, /* @__PURE__ */ React8.createElement(
941
+ import_ui8.UnstableSortableProvider,
927
942
  {
928
943
  value: ids,
929
944
  onChange: setIds,
930
945
  variant: "static",
931
946
  restrictAxis: true,
932
- dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React7.createElement(import_ui7.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React7.createElement(import_ui7.TableBody, null, dragOverlayChildren))
947
+ dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React8.createElement(import_ui8.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React8.createElement(import_ui8.TableBody, null, dragOverlayChildren))
933
948
  },
934
- rows.map((row) => /* @__PURE__ */ React7.createElement(
935
- import_ui7.UnstableSortableItem,
949
+ rows.map((row) => /* @__PURE__ */ React8.createElement(
950
+ import_ui8.UnstableSortableItem,
936
951
  {
937
952
  key: row.id,
938
953
  id: row.id,
@@ -951,8 +966,8 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
951
966
  }) => {
952
967
  const showIndicationBefore = showDropIndication && dropPosition === "before";
953
968
  const showIndicationAfter = showDropIndication && dropPosition === "after";
954
- return /* @__PURE__ */ React7.createElement(
955
- import_ui7.TableRow,
969
+ return /* @__PURE__ */ React8.createElement(
970
+ import_ui8.TableRow,
956
971
  {
957
972
  ...itemProps,
958
973
  selected: isDragged,
@@ -982,8 +997,8 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
982
997
  style: { ...itemStyle, ...triggerStyle },
983
998
  disableDivider: isDragOverlay || index === rows.length - 1
984
999
  },
985
- /* @__PURE__ */ React7.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React7.createElement(
986
- import_ui7.IconButton,
1000
+ /* @__PURE__ */ React8.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React8.createElement(
1001
+ import_ui8.IconButton,
987
1002
  {
988
1003
  size: "small",
989
1004
  ref: setTriggerRef,
@@ -991,9 +1006,9 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
991
1006
  disabled: isSorting,
992
1007
  draggable: true
993
1008
  },
994
- /* @__PURE__ */ React7.createElement(import_icons2.GripVerticalIcon, { fontSize: "inherit" })
1009
+ /* @__PURE__ */ React8.createElement(import_icons3.GripVerticalIcon, { fontSize: "inherit" })
995
1010
  )),
996
- /* @__PURE__ */ React7.createElement(VariableTableCell, null, /* @__PURE__ */ React7.createElement(
1011
+ /* @__PURE__ */ React8.createElement(VariableTableCell, null, /* @__PURE__ */ React8.createElement(
997
1012
  VariableEditableCell,
998
1013
  {
999
1014
  initialValue: row.name,
@@ -1006,7 +1021,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
1006
1021
  }
1007
1022
  },
1008
1023
  prefixElement: (0, import_react6.createElement)(row.icon, { fontSize: "inherit" }),
1009
- editableElement: ({ value, onChange }) => /* @__PURE__ */ React7.createElement(
1024
+ editableElement: ({ value, onChange }) => /* @__PURE__ */ React8.createElement(
1010
1025
  LabelField,
1011
1026
  {
1012
1027
  id: "variable-label-" + row.id,
@@ -1017,7 +1032,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
1017
1032
  }
1018
1033
  )
1019
1034
  },
1020
- /* @__PURE__ */ React7.createElement(
1035
+ /* @__PURE__ */ React8.createElement(
1021
1036
  import_editor_ui.EllipsisWithTooltip,
1022
1037
  {
1023
1038
  title: row.name,
@@ -1026,7 +1041,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
1026
1041
  row.name
1027
1042
  )
1028
1043
  )),
1029
- /* @__PURE__ */ React7.createElement(VariableTableCell, null, /* @__PURE__ */ React7.createElement(
1044
+ /* @__PURE__ */ React8.createElement(VariableTableCell, null, /* @__PURE__ */ React8.createElement(
1030
1045
  VariableEditableCell,
1031
1046
  {
1032
1047
  initialValue: row.value,
@@ -1041,7 +1056,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
1041
1056
  editableElement: row.valueField
1042
1057
  },
1043
1058
  row.startIcon && row.startIcon({ value: row.value }),
1044
- /* @__PURE__ */ React7.createElement(
1059
+ /* @__PURE__ */ React8.createElement(
1045
1060
  import_editor_ui.EllipsisWithTooltip,
1046
1061
  {
1047
1062
  title: row.value,
@@ -1050,7 +1065,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
1050
1065
  row.value
1051
1066
  )
1052
1067
  )),
1053
- /* @__PURE__ */ React7.createElement(
1068
+ /* @__PURE__ */ React8.createElement(
1054
1069
  VariableTableCell,
1055
1070
  {
1056
1071
  align: "right",
@@ -1059,7 +1074,7 @@ var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange
1059
1074
  maxWidth: 16,
1060
1075
  sx: { paddingInlineEnd: 1 }
1061
1076
  },
1062
- /* @__PURE__ */ React7.createElement(import_ui7.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React7.createElement(
1077
+ /* @__PURE__ */ React8.createElement(import_ui8.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React8.createElement(
1063
1078
  VariableEditMenu,
1064
1079
  {
1065
1080
  menuActions,
@@ -1090,9 +1105,10 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
1090
1105
  });
1091
1106
  function VariablesManagerPanel() {
1092
1107
  const { close: closePanel } = usePanelActions();
1093
- const [isDirty, setIsDirty] = (0, import_react7.useState)(false);
1094
1108
  const [variables, setVariables] = (0, import_react7.useState)(getVariables(false));
1095
1109
  const [deletedVariables, setDeletedVariables] = (0, import_react7.useState)([]);
1110
+ const [deleteConfirmation, setDeleteConfirmation] = (0, import_react7.useState)(null);
1111
+ const [isDirty, setIsDirty] = (0, import_react7.useState)(false);
1096
1112
  const [isSaving, setIsSaving] = (0, import_react7.useState)(false);
1097
1113
  usePreventUnload(isDirty);
1098
1114
  const handleSave = (0, import_react7.useCallback)(async () => {
@@ -1110,21 +1126,27 @@ function VariablesManagerPanel() {
1110
1126
  }, [variables]);
1111
1127
  const menuActions = [
1112
1128
  {
1113
- name: (0, import_i18n5.__)("Delete", "elementor"),
1114
- icon: import_icons3.TrashIcon,
1129
+ name: (0, import_i18n6.__)("Delete", "elementor"),
1130
+ icon: import_icons4.TrashIcon,
1115
1131
  color: "error.main",
1116
1132
  onClick: (itemId) => {
1117
- setDeletedVariables([...deletedVariables, itemId]);
1118
- setVariables({ ...variables, [itemId]: { ...variables[itemId], deleted: true } });
1119
- setIsDirty(true);
1133
+ if (variables[itemId]) {
1134
+ setDeleteConfirmation({ id: itemId, label: variables[itemId].label });
1135
+ }
1120
1136
  }
1121
1137
  }
1122
1138
  ];
1139
+ const handleDeleteVariable = (itemId) => {
1140
+ setDeletedVariables([...deletedVariables, itemId]);
1141
+ setVariables({ ...variables, [itemId]: { ...variables[itemId], deleted: true } });
1142
+ setIsDirty(true);
1143
+ setDeleteConfirmation(null);
1144
+ };
1123
1145
  const handleOnChange = (newVariables) => {
1124
1146
  setVariables(newVariables);
1125
1147
  setIsDirty(true);
1126
1148
  };
1127
- return /* @__PURE__ */ React8.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React8.createElement(import_ui8.ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React8.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React8.createElement(
1149
+ return /* @__PURE__ */ React9.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React9.createElement(import_ui9.ErrorBoundary, { fallback: /* @__PURE__ */ React9.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React9.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React9.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React9.createElement(import_ui9.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui9.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui9.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React9.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React9.createElement(import_icons4.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n6.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React9.createElement(
1128
1150
  CloseButton,
1129
1151
  {
1130
1152
  sx: { marginLeft: "auto" },
@@ -1132,7 +1154,7 @@ function VariablesManagerPanel() {
1132
1154
  closePanel();
1133
1155
  }
1134
1156
  }
1135
- )), /* @__PURE__ */ React8.createElement(import_ui8.Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React8.createElement(
1157
+ )), /* @__PURE__ */ React9.createElement(import_ui9.Divider, { sx: { width: "100%" } }))), /* @__PURE__ */ React9.createElement(
1136
1158
  import_editor_panels.PanelBody,
1137
1159
  {
1138
1160
  sx: {
@@ -1141,7 +1163,7 @@ function VariablesManagerPanel() {
1141
1163
  height: "100%"
1142
1164
  }
1143
1165
  },
1144
- /* @__PURE__ */ React8.createElement(
1166
+ /* @__PURE__ */ React9.createElement(
1145
1167
  VariablesManagerTable,
1146
1168
  {
1147
1169
  menuActions,
@@ -1149,8 +1171,8 @@ function VariablesManagerPanel() {
1149
1171
  onChange: handleOnChange
1150
1172
  }
1151
1173
  )
1152
- ), /* @__PURE__ */ React8.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React8.createElement(
1153
- import_ui8.Button,
1174
+ ), /* @__PURE__ */ React9.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React9.createElement(
1175
+ import_ui9.Button,
1154
1176
  {
1155
1177
  fullWidth: true,
1156
1178
  size: "small",
@@ -1159,11 +1181,19 @@ function VariablesManagerPanel() {
1159
1181
  disabled: !isDirty || isSaving,
1160
1182
  onClick: handleSave
1161
1183
  },
1162
- (0, import_i18n5.__)("Save changes", "elementor")
1163
- )))));
1184
+ (0, import_i18n6.__)("Save changes", "elementor")
1185
+ ))), deleteConfirmation && /* @__PURE__ */ React9.createElement(
1186
+ DeleteConfirmationDialog,
1187
+ {
1188
+ open: true,
1189
+ label: deleteConfirmation.label,
1190
+ onConfirm: () => handleDeleteVariable(deleteConfirmation.id),
1191
+ closeDialog: () => setDeleteConfirmation(null)
1192
+ }
1193
+ )));
1164
1194
  }
1165
- var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React8.createElement(import_ui8.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React8.createElement(import_icons3.XIcon, { fontSize: "small" }));
1166
- var ErrorBoundaryFallback = () => /* @__PURE__ */ React8.createElement(import_ui8.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React8.createElement(import_ui8.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React8.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
1195
+ var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React9.createElement(import_ui9.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React9.createElement(import_icons4.XIcon, { fontSize: "small" }));
1196
+ var ErrorBoundaryFallback = () => /* @__PURE__ */ React9.createElement(import_ui9.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React9.createElement(import_ui9.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React9.createElement("strong", null, (0, import_i18n6.__)("Something went wrong", "elementor"))));
1167
1197
  var usePreventUnload = (isDirty) => {
1168
1198
  (0, import_react7.useEffect)(() => {
1169
1199
  const handleBeforeUnload = (event) => {
@@ -1211,13 +1241,13 @@ var import_react13 = require("react");
1211
1241
  var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
1212
1242
 
1213
1243
  // src/context/variable-selection-popover.context.tsx
1214
- var React9 = __toESM(require("react"));
1244
+ var React10 = __toESM(require("react"));
1215
1245
  var import_react8 = require("react");
1216
- var import_ui9 = require("@elementor/ui");
1246
+ var import_ui10 = require("@elementor/ui");
1217
1247
  var PopoverContentRefContext = (0, import_react8.createContext)(null);
1218
1248
  var PopoverContentRefContextProvider = ({ children }) => {
1219
1249
  const [anchorRef, setAnchorRef] = (0, import_react8.useState)(null);
1220
- return /* @__PURE__ */ React9.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React9.createElement(import_ui9.Box, { ref: setAnchorRef }, children));
1250
+ return /* @__PURE__ */ React10.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React10.createElement(import_ui10.Box, { ref: setAnchorRef }, children));
1221
1251
  };
1222
1252
  var usePopoverContentRef = () => {
1223
1253
  return (0, import_react8.useContext)(PopoverContentRefContext);
@@ -1239,14 +1269,14 @@ var usePermissions = () => {
1239
1269
  };
1240
1270
 
1241
1271
  // src/components/variable-creation.tsx
1242
- var React11 = __toESM(require("react"));
1272
+ var React12 = __toESM(require("react"));
1243
1273
  var import_react9 = require("react");
1244
1274
  var import_editor_controls3 = require("@elementor/editor-controls");
1245
1275
  var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
1246
1276
  var import_editor_ui3 = require("@elementor/editor-ui");
1247
- var import_icons4 = require("@elementor/icons");
1248
- var import_ui11 = require("@elementor/ui");
1249
- var import_i18n6 = require("@wordpress/i18n");
1277
+ var import_icons5 = require("@elementor/icons");
1278
+ var import_ui12 = require("@elementor/ui");
1279
+ var import_i18n7 = require("@wordpress/i18n");
1250
1280
 
1251
1281
  // src/hooks/use-initial-value.ts
1252
1282
  var import_editor_controls2 = require("@elementor/editor-controls");
@@ -1279,10 +1309,10 @@ var trackVariableEvent = ({ varType, controlPath, action }) => {
1279
1309
  };
1280
1310
 
1281
1311
  // src/components/ui/form-field.tsx
1282
- var React10 = __toESM(require("react"));
1283
- var import_ui10 = require("@elementor/ui");
1312
+ var React11 = __toESM(require("react"));
1313
+ var import_ui11 = require("@elementor/ui");
1284
1314
  var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
1285
- return /* @__PURE__ */ React10.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui10.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React10.createElement(import_ui10.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React10.createElement(import_ui10.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React10.createElement(import_ui10.FormHelperText, null, noticeMsg)));
1315
+ return /* @__PURE__ */ React11.createElement(import_ui11.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui11.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React11.createElement(import_ui11.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React11.createElement(import_ui11.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React11.createElement(import_ui11.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React11.createElement(import_ui11.FormHelperText, null, noticeMsg)));
1286
1316
  };
1287
1317
 
1288
1318
  // src/components/variable-creation.tsx
@@ -1346,22 +1376,22 @@ var VariableCreation = ({ onGoBack, onClose }) => {
1346
1376
  return !!errorMessage;
1347
1377
  };
1348
1378
  const isSubmitDisabled = hasEmptyFields() || hasErrors();
1349
- return /* @__PURE__ */ React11.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React11.createElement(
1379
+ return /* @__PURE__ */ React12.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React12.createElement(
1350
1380
  import_editor_ui3.PopoverHeader,
1351
1381
  {
1352
- icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(import_ui11.IconButton, { size: SIZE, "aria-label": (0, import_i18n6.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(import_icons4.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React11.createElement(VariableIcon, { fontSize: SIZE })),
1353
- title: (0, import_i18n6.__)("Create variable", "elementor"),
1382
+ icon: /* @__PURE__ */ React12.createElement(React12.Fragment, null, onGoBack && /* @__PURE__ */ React12.createElement(import_ui12.IconButton, { size: SIZE, "aria-label": (0, import_i18n7.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React12.createElement(import_icons5.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React12.createElement(VariableIcon, { fontSize: SIZE })),
1383
+ title: (0, import_i18n7.__)("Create variable", "elementor"),
1354
1384
  onClose: closePopover
1355
1385
  }
1356
- ), /* @__PURE__ */ React11.createElement(import_ui11.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React11.createElement(
1386
+ ), /* @__PURE__ */ React12.createElement(import_ui12.Divider, null), /* @__PURE__ */ React12.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React12.createElement(
1357
1387
  FormField,
1358
1388
  {
1359
1389
  id: "variable-label",
1360
- label: (0, import_i18n6.__)("Name", "elementor"),
1390
+ label: (0, import_i18n7.__)("Name", "elementor"),
1361
1391
  errorMsg: labelFieldError?.message,
1362
1392
  noticeMsg: labelHint(label)
1363
1393
  },
1364
- /* @__PURE__ */ React11.createElement(
1394
+ /* @__PURE__ */ React12.createElement(
1365
1395
  LabelField,
1366
1396
  {
1367
1397
  id: "variable-label",
@@ -1379,7 +1409,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
1379
1409
  }
1380
1410
  }
1381
1411
  )
1382
- ), /* @__PURE__ */ React11.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n6.__)("Value", "elementor") }, /* @__PURE__ */ React11.createElement(import_ui11.Typography, { variant: "h5" }, /* @__PURE__ */ React11.createElement(
1412
+ ), /* @__PURE__ */ React12.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n7.__)("Value", "elementor") }, /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "h5" }, /* @__PURE__ */ React12.createElement(
1383
1413
  ValueField,
1384
1414
  {
1385
1415
  value,
@@ -1391,7 +1421,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
1391
1421
  onValidationChange: setValueFieldError,
1392
1422
  propType
1393
1423
  }
1394
- ))), errorMessage && /* @__PURE__ */ React11.createElement(import_ui11.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(import_ui11.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(import_ui11.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n6.__)("Create", "elementor"))));
1424
+ ))), errorMessage && /* @__PURE__ */ React12.createElement(import_ui12.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React12.createElement(import_ui12.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(import_ui12.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n7.__)("Create", "elementor"))));
1395
1425
  };
1396
1426
 
1397
1427
  // src/components/variable-edit.tsx
@@ -1405,21 +1435,6 @@ var import_icons7 = require("@elementor/icons");
1405
1435
  var import_ui14 = require("@elementor/ui");
1406
1436
  var import_i18n9 = require("@wordpress/i18n");
1407
1437
 
1408
- // src/components/ui/delete-confirmation-dialog.tsx
1409
- var React12 = __toESM(require("react"));
1410
- var import_icons5 = require("@elementor/icons");
1411
- var import_ui12 = require("@elementor/ui");
1412
- var import_i18n7 = require("@wordpress/i18n");
1413
- var TITLE_ID = "delete-variable-dialog";
1414
- var DeleteConfirmationDialog = ({
1415
- open,
1416
- label,
1417
- closeDialog,
1418
- onConfirm
1419
- }) => {
1420
- return /* @__PURE__ */ React12.createElement(import_ui12.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(import_ui12.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React12.createElement(import_icons5.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n7.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.DialogContent, null, /* @__PURE__ */ React12.createElement(import_ui12.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n7.__)("All elements using", "elementor"), "\xA0", /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "subtitle2", component: "span", sx: { lineBreak: "anywhere" } }, label), "\xA0", (0, import_i18n7.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.DialogActions, null, /* @__PURE__ */ React12.createElement(import_ui12.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n7.__)("Not now", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n7.__)("Delete", "elementor"))));
1421
- };
1422
-
1423
1438
  // src/components/ui/edit-confirmation-dialog.tsx
1424
1439
  var React13 = __toESM(require("react"));
1425
1440
  var import_react10 = require("react");