@elementor/editor-variables 3.33.0-165 → 3.33.0-166

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.33.0-165",
+  "version": "3.33.0-166",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,20 +39,20 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-165",
-    "@elementor/editor-canvas": "3.33.0-165",
-    "@elementor/editor-controls": "3.33.0-165",
-    "@elementor/editor-current-user": "3.33.0-165",
-    "@elementor/editor-editing-panel": "3.33.0-165",
-    "@elementor/editor-mcp": "3.33.0-165",
-    "@elementor/editor-panels": "3.33.0-165",
-    "@elementor/editor-props": "3.33.0-165",
-    "@elementor/editor-ui": "3.33.0-165",
-    "@elementor/editor-v1-adapters": "3.33.0-165",
-    "@elementor/http-client": "3.33.0-165",
+    "@elementor/editor": "3.33.0-166",
+    "@elementor/editor-canvas": "3.33.0-166",
+    "@elementor/editor-controls": "3.33.0-166",
+    "@elementor/editor-current-user": "3.33.0-166",
+    "@elementor/editor-editing-panel": "3.33.0-166",
+    "@elementor/editor-mcp": "3.33.0-166",
+    "@elementor/editor-panels": "3.33.0-166",
+    "@elementor/editor-props": "3.33.0-166",
+    "@elementor/editor-ui": "3.33.0-166",
+    "@elementor/editor-v1-adapters": "3.33.0-166",
+    "@elementor/http-client": "3.33.0-166",
     "@elementor/icons": "1.53.0",
-    "@elementor/mixpanel": "3.33.0-165",
-    "@elementor/schema": "3.33.0-165",
+    "@elementor/mixpanel": "3.33.0-166",
+    "@elementor/schema": "3.33.0-166",
     "@elementor/ui": "1.36.14",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/fields/label-field.tsx

@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import { WarningInfotip } from '@elementor/editor-ui';
 import { TextField, type TextFieldProps } from '@elementor/ui';
 
+import { type TVariablesList } from '../../storage';
 import { labelHint, validateLabel, VARIABLE_LABEL_MAX_LENGTH } from '../../utils/validations';
 function isLabelEqual( a: string, b: string ) {
 	return a.trim().toLowerCase() === b.trim().toLowerCase();
@@ -32,6 +33,7 @@ export type LabelFieldProps = {
 	focusOnShow?: boolean;
 	selectOnShow?: boolean;
 	showWarningInfotip?: boolean;
+	variables?: TVariablesList;
 };
 
 export const LabelField = ( {
@@ -44,15 +46,17 @@ export const LabelField = ( {
 	focusOnShow = false,
 	selectOnShow = false,
 	showWarningInfotip = false,
+	variables,
 }: LabelFieldProps ) => {
 	const [ label, setLabel ] = useState( value );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
+
 	const fieldRef = useRef< HTMLElement >( null );
 
 	const handleChange = ( newValue: string ) => {
 		setLabel( newValue );
 
-		const errorMsg = validateLabel( newValue );
+		const errorMsg = validateLabel( newValue, variables );
 
 		setErrorMessage( errorMsg );
 		onErrorChange?.( errorMsg );

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

@@ -216,6 +216,7 @@ export const VariablesManagerTable = ( {
 															focusOnShow
 															selectOnShow={ autoEditVariableId === row.id }
 															showWarningInfotip={ true }
+															variables={ variables }
 														/>
 													) }
 													autoEdit={ autoEditVariableId === row.id }

package/src/utils/validations.ts

@@ -1,5 +1,7 @@
 import { __ } from '@wordpress/i18n';
 
+import { type TVariable, type TVariablesList } from '../storage';
+
 export const ERROR_MESSAGES = {
 	MISSING_VARIABLE_NAME: __( 'Give your variable a name.', 'elementor' ),
 	MISSING_VARIABLE_VALUE: __( 'Add a value to complete your variable.', 'elementor' ),
@@ -36,7 +38,7 @@ export const mapServerError = ( error: ErrorResponse ): MappedError | undefined
 	return undefined;
 };
 
-export const validateLabel = ( name: string ): string => {
+export const validateLabel = ( name: string, variables?: TVariablesList ): string => {
 	if ( ! name.trim() ) {
 		return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
 	}
@@ -55,6 +57,10 @@ export const validateLabel = ( name: string ): string => {
 		return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
 	}
 
+	if ( Object.values( variables ?? {} ).some( ( variable: TVariable ) => variable.label === name ) ) {
+		return ERROR_MESSAGES.DUPLICATED_LABEL;
+	}
+
 	return '';
 };