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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.0.0-573",
+  "version": "4.0.0-591",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-573",
-    "@elementor/editor-canvas": "4.0.0-573",
-    "@elementor/editor-controls": "4.0.0-573",
-    "@elementor/editor-current-user": "4.0.0-573",
-    "@elementor/editor-mcp": "4.0.0-573",
-    "@elementor/editor-panels": "4.0.0-573",
-    "@elementor/editor-props": "4.0.0-573",
-    "@elementor/editor-ui": "4.0.0-573",
-    "@elementor/editor-v1-adapters": "4.0.0-573",
-    "@elementor/menus": "4.0.0-573",
-    "@elementor/http-client": "4.0.0-573",
+    "@elementor/editor": "4.0.0-591",
+    "@elementor/editor-canvas": "4.0.0-591",
+    "@elementor/editor-controls": "4.0.0-591",
+    "@elementor/editor-current-user": "4.0.0-591",
+    "@elementor/editor-mcp": "4.0.0-591",
+    "@elementor/editor-panels": "4.0.0-591",
+    "@elementor/editor-props": "4.0.0-591",
+    "@elementor/editor-ui": "4.0.0-591",
+    "@elementor/editor-v1-adapters": "4.0.0-591",
+    "@elementor/menus": "4.0.0-591",
+    "@elementor/http-client": "4.0.0-591",
     "@elementor/icons": "^1.63.0",
-    "@elementor/events": "4.0.0-573",
-    "@elementor/schema": "4.0.0-573",
+    "@elementor/events": "4.0.0-591",
+    "@elementor/schema": "4.0.0-591",
     "@elementor/ui": "1.37.2",
-    "@elementor/utils": "4.0.0-573",
+    "@elementor/utils": "4.0.0-591",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/variables-manager/variables-manager-panel.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
+import { useSuppressedMessage } from '@elementor/editor-current-user';
 import {
 	__createPanel as createPanel,
 	Panel,
@@ -37,6 +38,7 @@ import { SIZE, VariableManagerCreateMenu } from './variables-manager-create-menu
 import { VariablesManagerTable } from './variables-manager-table';
 
 const id = 'variables-manager';
+const STOP_SYNC_MESSAGE_KEY = 'stop-sync-variable';
 
 type StopSyncConfirmationDialogProps = {
 	open: boolean;
@@ -60,6 +62,7 @@ export const { panel, usePanelActions } = createPanel( {
 export function VariablesManagerPanel() {
 	const { close: closePanel } = usePanelActions();
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+	const [ isStopSyncSuppressed ] = useSuppressedMessage( STOP_SYNC_MESSAGE_KEY );
 
 	const createMenuState = usePopupState( {
 		variant: 'popover',
@@ -156,6 +159,17 @@ export function VariablesManagerPanel() {
 		[ handleStopSync ]
 	);
 
+	const handleShowStopSyncDialog = useCallback(
+		( itemId: string ) => {
+			if ( ! isStopSyncSuppressed ) {
+				setStopSyncConfirmation( itemId );
+			} else {
+				handleStopSync( itemId );
+			}
+		},
+		[ isStopSyncSuppressed, handleStopSync ]
+	);
+
 	const buildMenuActions = useCallback(
 		( variableId: string ) => {
 			const variable = variables[ variableId ];
@@ -168,7 +182,7 @@ export function VariablesManagerPanel() {
 				variableId,
 				handlers: {
 					onStartSync: handleStartSync,
-					onStopSync: ( itemId: string ) => setStopSyncConfirmation( itemId ),
+					onStopSync: handleShowStopSyncDialog,
 				},
 			} );
 
@@ -189,7 +203,7 @@ export function VariablesManagerPanel() {
 
 			return [ ...typeActions, deleteAction ];
 		},
-		[ variables, handleStartSync ]
+		[ variables, handleStartSync, handleShowStopSyncDialog ]
 	);
 
 	const hasVariables = Object.keys( variables ).length > 0;
@@ -411,25 +425,31 @@ const usePreventUnload = ( isDirty: boolean ) => {
 	}, [ isDirty ] );
 };
 
-const StopSyncConfirmationDialog = ( { open, onClose, onConfirm }: StopSyncConfirmationDialogProps ) => (
-	<ConfirmationDialog open={ open } onClose={ onClose }>
-		<ConfirmationDialog.Title icon={ ColorFilterIcon } iconColor="secondary">
-			{ __( 'Stop syncing variable color', 'elementor' ) }
-		</ConfirmationDialog.Title>
-		<ConfirmationDialog.Content>
-			<ConfirmationDialog.ContentText>
-				{ __(
-					'This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.',
-					'elementor'
-				) }
-			</ConfirmationDialog.ContentText>
-		</ConfirmationDialog.Content>
-		<ConfirmationDialog.Actions
-			onClose={ onClose }
-			onConfirm={ onConfirm }
-			cancelLabel={ __( 'Cancel', 'elementor' ) }
-			confirmLabel={ __( 'Got it', 'elementor' ) }
-			color="secondary"
-		/>
-	</ConfirmationDialog>
-);
+const StopSyncConfirmationDialog = ( { open, onClose, onConfirm }: StopSyncConfirmationDialogProps ) => {
+	const [ , suppressStopSyncMessage ] = useSuppressedMessage( STOP_SYNC_MESSAGE_KEY );
+
+	return (
+		<ConfirmationDialog open={ open } onClose={ onClose }>
+			<ConfirmationDialog.Title icon={ ColorFilterIcon } iconColor="primary">
+				{ __( 'Stop syncing variable color', 'elementor' ) }
+			</ConfirmationDialog.Title>
+			<ConfirmationDialog.Content>
+				<ConfirmationDialog.ContentText>
+					{ __(
+						'This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.',
+						'elementor'
+					) }
+				</ConfirmationDialog.ContentText>
+			</ConfirmationDialog.Content>
+			<ConfirmationDialog.Actions
+				onClose={ onClose }
+				onConfirm={ onConfirm }
+				cancelLabel={ __( 'Cancel', 'elementor' ) }
+				confirmLabel={ __( 'Got it', 'elementor' ) }
+				color="primary"
+				onSuppressMessage={ suppressStopSyncMessage }
+				suppressLabel={ __( "Don't show again", 'elementor' ) }
+			/>
+		</ConfirmationDialog>
+	);
+};