@elementor/editor-variables 4.0.0-573 → 4.0.0-591

package/dist/index.js

@@ -56,6 +56,7 @@ var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 // src/components/variables-manager/variables-manager-panel.tsx
 var React14 = __toESM(require("react"));
 var import_react13 = require("react");
+var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
@@ -1854,6 +1855,7 @@ function sortVariablesOrder(variables) {
 
 // src/components/variables-manager/variables-manager-panel.tsx
 var id = "variables-manager";
+var STOP_SYNC_MESSAGE_KEY = "stop-sync-variable";
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id,
   component: VariablesManagerPanel,
@@ -1869,6 +1871,7 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
 function VariablesManagerPanel() {
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui5.useDialog)();
+  const [isStopSyncSuppressed] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
   const createMenuState = (0, import_ui14.usePopupState)({
     variant: "popover"
   });
@@ -1949,6 +1952,16 @@ function VariablesManagerPanel() {
     },
     [handleStopSync]
   );
+  const handleShowStopSyncDialog = (0, import_react13.useCallback)(
+    (itemId) => {
+      if (!isStopSyncSuppressed) {
+        setStopSyncConfirmation(itemId);
+      } else {
+        handleStopSync(itemId);
+      }
+    },
+    [isStopSyncSuppressed, handleStopSync]
+  );
   const buildMenuActions = (0, import_react13.useCallback)(
     (variableId) => {
       const variable = variables[variableId];
@@ -1960,7 +1973,7 @@ function VariablesManagerPanel() {
         variableId,
         handlers: {
           onStartSync: handleStartSync,
-          onStopSync: (itemId) => setStopSyncConfirmation(itemId)
+          onStopSync: handleShowStopSyncDialog
         }
       });
       const deleteAction = {
@@ -1978,7 +1991,7 @@ function VariablesManagerPanel() {
       };
       return [...typeActions, deleteAction];
     },
-    [variables, handleStartSync]
+    [variables, handleStartSync, handleShowStopSyncDialog]
   );
   const hasVariables = Object.keys(variables).length > 0;
   return /* @__PURE__ */ React14.createElement(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React14.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React14.createElement(
@@ -2153,19 +2166,24 @@ var usePreventUnload = (isDirty) => {
     };
   }, [isDirty]);
 };
-var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog.Title, { icon: import_icons5.ColorFilterIcon, iconColor: "secondary" }, (0, import_i18n10.__)("Stop syncing variable color", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog.ContentText, null, (0, import_i18n10.__)(
-  "This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.",
-  "elementor"
-))), /* @__PURE__ */ React14.createElement(
-  import_editor_ui5.ConfirmationDialog.Actions,
-  {
-    onClose,
-    onConfirm,
-    cancelLabel: (0, import_i18n10.__)("Cancel", "elementor"),
-    confirmLabel: (0, import_i18n10.__)("Got it", "elementor"),
-    color: "secondary"
-  }
-));
+var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
+  const [, suppressStopSyncMessage] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
+  return /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog.Title, { icon: import_icons5.ColorFilterIcon, iconColor: "primary" }, (0, import_i18n10.__)("Stop syncing variable color", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui5.ConfirmationDialog.ContentText, null, (0, import_i18n10.__)(
+    "This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.",
+    "elementor"
+  ))), /* @__PURE__ */ React14.createElement(
+    import_editor_ui5.ConfirmationDialog.Actions,
+    {
+      onClose,
+      onConfirm,
+      cancelLabel: (0, import_i18n10.__)("Cancel", "elementor"),
+      confirmLabel: (0, import_i18n10.__)("Got it", "elementor"),
+      color: "primary",
+      onSuppressMessage: suppressStopSyncMessage,
+      suppressLabel: (0, import_i18n10.__)("Don't show again", "elementor")
+    }
+  ));
+};
 
 // src/components/open-panel-from-url.tsx
 var ACTIVE_PANEL_PARAM = "active-panel";
@@ -2428,7 +2446,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 var React19 = __toESM(require("react"));
 var import_react18 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
-var import_editor_current_user2 = require("@elementor/editor-current-user");
+var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons8 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
@@ -2479,7 +2497,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls5.useBoundProp)();
-  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user2.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
+  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user3.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
   const [deleteConfirmation, setDeleteConfirmation] = (0, import_react18.useState)(false);
   const [editConfirmation, setEditConfirmation] = (0, import_react18.useState)(false);
   const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");