@elementor/editor-variables 3.33.0-104 → 3.33.0-106

package/dist/index.js

@@ -116,9 +116,66 @@ var apiClient = {
       payload.value = value;
     }
     return (0, import_http_client.httpService)().post(BASE_PATH + "/restore", payload);
+  },
+  batch: (payload) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/batch", payload);
   }
 };
 
+// src/batch-operations.ts
+var isTempId = (id2) => {
+  return id2.startsWith("tmp-");
+};
+var buildOperationsArray = (originalVariables, currentVariables) => {
+  const operations = [];
+  Object.entries(currentVariables).forEach(([id2, variable]) => {
+    if (isTempId(id2)) {
+      operations.push({
+        type: "create",
+        variable: {
+          ...variable,
+          id: id2
+        }
+      });
+    } else if (originalVariables[id2]) {
+      const original = originalVariables[id2];
+      if (original.deleted && !variable.deleted) {
+        operations.push({
+          type: "restore",
+          id: id2,
+          ...original.label !== variable.label && { label: variable.label },
+          ...original.value !== variable.value && { value: variable.value }
+        });
+      } else if (!variable.deleted && (original.label !== variable.label || original.value !== variable.value)) {
+        operations.push({
+          type: "update",
+          id: id2,
+          variable: {
+            ...original.label !== variable.label && { label: variable.label },
+            ...original.value !== variable.value && { value: variable.value }
+          }
+        });
+      }
+    }
+  });
+  Object.entries(originalVariables).forEach(([id2, variable]) => {
+    if (isTempId(id2) || variable.deleted) {
+      return;
+    }
+    const currentVariable = currentVariables[id2];
+    if (!currentVariable || currentVariable.deleted) {
+      operations.push({
+        type: "delete",
+        id: id2
+      });
+    }
+  });
+  return operations.filter((op) => {
+    const id2 = op.id || op.variable?.id;
+    return id2 && !(isTempId(id2) && currentVariables[id2]?.deleted);
+  });
+};
+
 // src/storage.ts
 var STORAGE_KEY = "elementor-global-variables";
 var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
@@ -259,6 +316,9 @@ var service = {
   variables: () => {
     return storage.load();
   },
+  getWatermark: () => {
+    return storage.state.watermark;
+  },
   init: () => {
     service.load();
   },
@@ -361,6 +421,40 @@ var service = {
         variable: restoredVariable
       };
     });
+  },
+  batchSave: (originalVariables, currentVariables) => {
+    const operations = buildOperationsArray(originalVariables, currentVariables);
+    const batchPayload = { operations, watermark: storage.state.watermark };
+    return apiClient.batch(batchPayload).then((response) => {
+      const { success, data: payload } = response.data;
+      if (!success) {
+        throw new Error("Unexpected response from server");
+      }
+      return payload;
+    }).then((data) => {
+      const { results, watermark } = data;
+      handleWatermark(OP_RW, watermark);
+      if (results) {
+        results.forEach((result) => {
+          if (result.variable) {
+            const { id: variableId, ...variableData } = result.variable;
+            if (result.type === "create") {
+              storage.add(variableId, variableData);
+            } else {
+              storage.update(variableId, variableData);
+            }
+            styleVariablesRepository.update({
+              [variableId]: variableData
+            });
+          }
+        });
+      }
+      return {
+        success: true,
+        watermark,
+        operations: operations.length
+      };
+    });
   }
 };
 var handleWatermark = (operation, newWatermark) => {
@@ -512,7 +606,8 @@ var useFilteredVariables = (searchValue, propTypeKey) => {
   return {
     list: searchFilteredVariables,
     hasMatches: searchFilteredVariables.length > 0,
-    isSourceNotEmpty: typeFilteredVariables.length > 0
+    isSourceNotEmpty: typeFilteredVariables.length > 0,
+    hasNoCompatibleVariables: baseVariables.length > 0 && typeFilteredVariables.length === 0
   };
 };
 var useVariableSelectionFilter = (variables) => {
@@ -998,7 +1093,21 @@ function VariablesManagerPanel() {
   const [isDirty, setIsDirty] = (0, import_react7.useState)(false);
   const [variables, setVariables] = (0, import_react7.useState)(getVariables(false));
   const [deletedVariables, setDeletedVariables] = (0, import_react7.useState)([]);
+  const [isSaving, setIsSaving] = (0, import_react7.useState)(false);
   usePreventUnload(isDirty);
+  const handleSave = (0, import_react7.useCallback)(async () => {
+    setIsSaving(true);
+    const originalVariables = getVariables(false);
+    const result = await service.batchSave(originalVariables, variables);
+    if (result.success) {
+      await service.load();
+      const updatedVariables = service.variables();
+      setVariables(updatedVariables);
+      setIsDirty(false);
+      setDeletedVariables([]);
+    }
+    setIsSaving(false);
+  }, [variables]);
   const menuActions = [
     {
       name: (0, import_i18n5.__)("Delete", "elementor"),
@@ -1040,7 +1149,18 @@ function VariablesManagerPanel() {
         onChange: handleOnChange
       }
     )
-  ), /* @__PURE__ */ React8.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React8.createElement(import_ui8.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n5.__)("Save changes", "elementor"))))));
+  ), /* @__PURE__ */ React8.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React8.createElement(
+    import_ui8.Button,
+    {
+      fullWidth: true,
+      size: "small",
+      color: "global",
+      variant: "contained",
+      disabled: !isDirty || isSaving,
+      onClick: handleSave
+    },
+    (0, import_i18n5.__)("Save changes", "elementor")
+  )))));
 }
 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" }));
 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"))));
@@ -1530,17 +1650,47 @@ var import_icons9 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 
-// src/components/ui/menu-item-content.tsx
+// src/components/ui/empty-state.tsx
 var React15 = __toESM(require("react"));
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons8 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
+var EmptyState = ({ icon, title, message, onAdd }) => {
+  const canAdd = usePermissions().canAdd();
+  return /* @__PURE__ */ React15.createElement(
+    import_ui15.Stack,
+    {
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pb: 5.5 }
+    },
+    icon,
+    canAdd ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React15.createElement(import_ui15.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n10.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React15.createElement(
+      Content,
+      {
+        title: (0, import_i18n10.__)("There are no variables", "elementor"),
+        message: (0, import_i18n10.__)("With your current role, you can only connect and detach variables.", "elementor")
+      }
+    )
+  );
+};
+function Content({ title, message }) {
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React15.createElement(import_ui15.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
+}
+
+// src/components/ui/menu-item-content.tsx
+var React16 = __toESM(require("react"));
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons8 = require("@elementor/icons");
+var import_ui16 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_ui15.ListItemIcon, null, item.icon), /* @__PURE__ */ React15.createElement(
-    import_ui15.Box,
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui16.ListItemIcon, null, item.icon), /* @__PURE__ */ React16.createElement(
+    import_ui16.Box,
     {
       sx: {
         flex: 1,
@@ -1550,70 +1700,47 @@ var MenuItemContent = ({ item }) => {
         gap: 1
       }
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       import_editor_ui5.EllipsisWithTooltip,
       {
         title: item.label || item.value,
-        as: import_ui15.Typography,
+        as: import_ui16.Typography,
         variant: "caption",
         color: "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
     ),
-    item.secondaryText && /* @__PURE__ */ React15.createElement(
+    item.secondaryText && /* @__PURE__ */ React16.createElement(
       import_editor_ui5.EllipsisWithTooltip,
       {
         title: item.secondaryText,
-        as: import_ui15.Typography,
+        as: import_ui16.Typography,
         variant: "caption",
         color: "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React15.createElement(
-    import_ui15.IconButton,
+  ), !!onEdit && /* @__PURE__ */ React16.createElement(
+    import_ui16.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
       onClick: (e) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": (0, import_i18n10.__)("Edit", "elementor")
+      "aria-label": (0, import_i18n11.__)("Edit", "elementor")
     },
-    /* @__PURE__ */ React15.createElement(import_icons8.EditIcon, { color: "action", fontSize: SIZE3 })
+    /* @__PURE__ */ React16.createElement(import_icons8.EditIcon, { color: "action", fontSize: SIZE3 })
   ));
 };
 
 // src/components/ui/no-search-results.tsx
-var React16 = __toESM(require("react"));
-var import_ui16 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
-var NoSearchResults = ({ searchValue, onClear, icon }) => {
-  return /* @__PURE__ */ React16.createElement(
-    import_ui16.Stack,
-    {
-      gap: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      p: 2.5,
-      color: "text.secondary",
-      sx: { pb: 3.5 }
-    },
-    icon,
-    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
-    /* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n11.__)("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(import_ui16.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
-  );
-};
-
-// src/components/ui/no-variables.tsx
 var React17 = __toESM(require("react"));
 var import_ui17 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
-var NoVariables = ({ icon, title, onAdd }) => {
-  const canAdd = usePermissions().canAdd();
+var NoSearchResults = ({ searchValue, onClear, icon }) => {
   return /* @__PURE__ */ React17.createElement(
     import_ui17.Stack,
     {
@@ -1621,31 +1748,15 @@ var NoVariables = ({ icon, title, onAdd }) => {
       alignItems: "center",
       justifyContent: "center",
       height: "100%",
+      p: 2.5,
       color: "text.secondary",
-      sx: { p: 2.5, pb: 5.5 }
+      sx: { pb: 3.5 }
     },
     icon,
-    canAdd ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
-      NoVariablesContent,
-      {
-        title: title || (0, import_i18n12.__)("Create your first variable", "elementor"),
-        message: (0, import_i18n12.__)(
-          "Variables are saved attributes that you can apply anywhere on your site.",
-          "elementor"
-        )
-      }
-    ), onAdd && /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n12.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
-      NoVariablesContent,
-      {
-        title: (0, import_i18n12.__)("There are no variables", "elementor"),
-        message: (0, import_i18n12.__)("With your current role, you can only connect and detach variables.", "elementor")
-      }
-    )
+    /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n12.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React17.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n12.__)("Try something else.", "elementor"), /* @__PURE__ */ React17.createElement(import_ui17.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n12.__)("Clear & try again", "elementor")))
   );
 };
-function NoVariablesContent({ title, message }) {
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
-}
 
 // src/components/ui/styled-menu-list.tsx
 var import_ui18 = require("@elementor/ui");
@@ -1688,7 +1799,8 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const {
     list: variables,
     hasMatches: hasSearchResults,
-    isSourceNotEmpty: hasVariables
+    isSourceNotEmpty: hasVariables,
+    hasNoCompatibleVariables
   } = useFilteredVariables(searchValue, propTypeUtil.key);
   const handleSetVariable = (key) => {
     setVariable(key);
@@ -1772,7 +1884,29 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
       onClear: handleClearSearch,
       icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" })
     }
-  ), !hasVariables && /* @__PURE__ */ React18.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
+  ), !hasVariables && !hasNoCompatibleVariables && /* @__PURE__ */ React18.createElement(
+    EmptyState,
+    {
+      title: noVariableTitle,
+      message: (0, import_i18n13.__)(
+        "Variables are saved attributes that you can apply anywhere on your site.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }),
+      onAdd
+    }
+  ), hasNoCompatibleVariables && /* @__PURE__ */ React18.createElement(
+    EmptyState,
+    {
+      title: (0, import_i18n13.__)("No compatible variables", "elementor"),
+      message: (0, import_i18n13.__)(
+        "Looks like none of your variables work with this control. Create a new variable to use it here.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }),
+      onAdd
+    }
+  ));
 };
 
 // src/components/variable-selection-popover.tsx