@elementor/editor-components 3.35.0-431 → 3.35.0-432

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-431",
+  "version": "3.35.0-432",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-431",
-    "@elementor/editor-canvas": "3.35.0-431",
-    "@elementor/editor-controls": "3.35.0-431",
-    "@elementor/editor-documents": "3.35.0-431",
-    "@elementor/editor-editing-panel": "3.35.0-431",
-    "@elementor/editor-elements": "3.35.0-431",
-    "@elementor/editor-elements-panel": "3.35.0-431",
-    "@elementor/editor-mcp": "3.35.0-431",
-    "@elementor/editor-panels": "3.35.0-431",
-    "@elementor/editor-props": "3.35.0-431",
-    "@elementor/editor-styles-repository": "3.35.0-431",
-    "@elementor/editor-ui": "3.35.0-431",
-    "@elementor/editor-v1-adapters": "3.35.0-431",
-    "@elementor/http-client": "3.35.0-431",
+    "@elementor/editor": "3.35.0-432",
+    "@elementor/editor-canvas": "3.35.0-432",
+    "@elementor/editor-controls": "3.35.0-432",
+    "@elementor/editor-documents": "3.35.0-432",
+    "@elementor/editor-editing-panel": "3.35.0-432",
+    "@elementor/editor-elements": "3.35.0-432",
+    "@elementor/editor-elements-panel": "3.35.0-432",
+    "@elementor/editor-mcp": "3.35.0-432",
+    "@elementor/editor-panels": "3.35.0-432",
+    "@elementor/editor-props": "3.35.0-432",
+    "@elementor/editor-styles-repository": "3.35.0-432",
+    "@elementor/editor-ui": "3.35.0-432",
+    "@elementor/editor-v1-adapters": "3.35.0-432",
+    "@elementor/http-client": "3.35.0-432",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-431",
-    "@elementor/query": "3.35.0-431",
-    "@elementor/schema": "3.35.0-431",
-    "@elementor/store": "3.35.0-431",
+    "@elementor/mixpanel": "3.35.0-432",
+    "@elementor/query": "3.35.0-432",
+    "@elementor/schema": "3.35.0-432",
+    "@elementor/store": "3.35.0-432",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-431",
+    "@elementor/utils": "3.35.0-432",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-431",
-    "@elementor/editor-current-user": "3.35.0-431"
+    "@elementor/editor-notifications": "3.35.0-432",
+    "@elementor/editor-current-user": "3.35.0-432"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/component-properties-panel/properties-group.tsx

@@ -149,6 +149,7 @@ export function PropertiesGroup( {
 										sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
 										isDragPlaceholder={ isItemDragPlaceholder }
 										groups={ allGroups }
+										existingLabels={ Object.values( props ).map( ( p ) => p.label ) }
 										onDelete={ onPropertyDelete }
 										onUpdate={ ( data ) => onPropertyUpdate( prop.overrideKey, data ) }
 									/>

package/src/components/component-properties-panel/property-item.tsx

@@ -12,6 +12,7 @@ type PropertyItemProps = {
 	sortableTriggerProps: SortableTriggerProps;
 	isDragPlaceholder?: boolean;
 	groups: { value: string; label: string }[];
+	existingLabels: string[];
 	onDelete: ( propKey: string ) => void;
 	onUpdate: ( data: { label: string; group: string | null } ) => void;
 };
@@ -21,6 +22,7 @@ export function PropertyItem( {
 	sortableTriggerProps,
 	isDragPlaceholder,
 	groups,
+	existingLabels,
 	onDelete,
 	onUpdate,
 }: PropertyItemProps ) {
@@ -99,6 +101,7 @@ export function PropertyItem( {
 					onSubmit={ handleSubmit }
 					currentValue={ prop }
 					groups={ groups }
+					existingLabels={ existingLabels }
 					sx={ { width: '100%' } }
 				/>
 			</Popover>

package/src/components/overridable-props/overridable-prop-form.tsx

@@ -5,6 +5,7 @@ import { Button, FormLabel, Grid, Select, Stack, type SxProps, TextField, Typogr
 import { __ } from '@wordpress/i18n';
 
 import { type OverridableProp } from '../../types';
+import { validatePropLabel } from './utils/validate-prop-label';
 
 const SIZE = 'tiny';
 
@@ -14,12 +15,14 @@ type Props = {
 	onSubmit: ( data: { label: string; group: string | null } ) => void;
 	currentValue?: OverridableProp;
 	groups?: { value: string; label: string }[];
+	existingLabels?: string[];
 	sx?: SxProps;
 };
 
-export function OverridablePropForm( { onSubmit, groups, currentValue, sx }: Props ) {
+export function OverridablePropForm( { onSubmit, groups, currentValue, existingLabels = [], sx }: Props ) {
 	const [ propLabel, setPropLabel ] = useState< string | null >( currentValue?.label ?? null );
 	const [ group, setGroup ] = useState< string | null >( currentValue?.groupId ?? groups?.[ 0 ]?.value ?? null );
+	const [ error, setError ] = useState< string | null >( null );
 
 	const name = __( 'Name', 'elementor' );
 	const groupName = __( 'Group Name', 'elementor' );
@@ -29,8 +32,19 @@ export function OverridablePropForm( { onSubmit, groups, currentValue, sx }: Pro
 	const title = isCreate ? __( 'Create new property', 'elementor' ) : __( 'Update property', 'elementor' );
 	const ctaLabel = isCreate ? __( 'Create', 'elementor' ) : __( 'Update', 'elementor' );
 
+	const handleSubmit = () => {
+		const validationResult = validatePropLabel( propLabel ?? '', existingLabels, currentValue?.label );
+
+		if ( ! validationResult.isValid ) {
+			setError( validationResult.errorMessage );
+			return;
+		}
+
+		onSubmit( { label: propLabel ?? '', group } );
+	};
+
 	return (
-		<Form onSubmit={ () => onSubmit( { label: propLabel ?? '', group } ) }>
+		<Form onSubmit={ handleSubmit }>
 			<Stack alignItems="start" sx={ { width: '268px', ...sx } }>
 				<Stack
 					direction="row"
@@ -54,7 +68,18 @@ export function OverridablePropForm( { onSubmit, groups, currentValue, sx }: Pro
 							fullWidth
 							placeholder={ __( 'Enter value', 'elementor' ) }
 							value={ propLabel ?? '' }
-							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setPropLabel( e.target.value ) }
+							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => {
+								const newValue = e.target.value;
+								setPropLabel( newValue );
+								const validationResult = validatePropLabel(
+									newValue,
+									existingLabels,
+									currentValue?.label
+								);
+								setError( validationResult.errorMessage );
+							} }
+							error={ Boolean( error ) }
+							helperText={ error }
 						/>
 					</Grid>
 				</Grid>
@@ -91,7 +116,13 @@ export function OverridablePropForm( { onSubmit, groups, currentValue, sx }: Pro
 					</Grid>
 				</Grid>
 				<Stack direction="row" justifyContent="flex-end" alignSelf="end" mt={ 1.5 } py={ 1 } px={ 1.5 }>
-					<Button type="submit" disabled={ ! propLabel } variant="contained" color="primary" size="small">
+					<Button
+						type="submit"
+						disabled={ ! propLabel || Boolean( error ) }
+						variant="contained"
+						color="primary"
+						size="small"
+					>
 						{ ctaLabel }
 					</Button>
 				</Stack>

package/src/components/overridable-props/overridable-prop-indicator.tsx

@@ -121,6 +121,7 @@ export function Content( { componentId, overridableProps }: Props ) {
 						value: groupId,
 						label: overridableProps.groups.items[ groupId ].label,
 					} ) ) }
+					existingLabels={ Object.values( overridableProps?.props ?? {} ).map( ( prop ) => prop.label ) }
 					currentValue={ overridableConfig }
 				/>
 			</Popover>

package/src/components/overridable-props/utils/validate-prop-label.ts

@@ -0,0 +1,38 @@
+import { __ } from '@wordpress/i18n';
+
+export const ERROR_MESSAGES = {
+	EMPTY_NAME: __( 'Property name is required', 'elementor' ),
+	DUPLICATE_NAME: __( 'Property name already exists', 'elementor' ),
+} as const;
+
+type ValidationResult = {
+	isValid: boolean;
+	errorMessage: string | null;
+};
+
+export function validatePropLabel( label: string, existingLabels: string[], currentLabel?: string ): ValidationResult {
+	const trimmedLabel = label.trim();
+
+	if ( ! trimmedLabel ) {
+		return { isValid: false, errorMessage: ERROR_MESSAGES.EMPTY_NAME };
+	}
+
+	const normalizedLabel = trimmedLabel.toLowerCase();
+	const normalizedCurrentLabel = currentLabel?.trim().toLowerCase();
+
+	const isDuplicate = existingLabels.some( ( existingLabel ) => {
+		const normalizedExisting = existingLabel.trim().toLowerCase();
+
+		if ( normalizedCurrentLabel && normalizedExisting === normalizedCurrentLabel ) {
+			return false;
+		}
+
+		return normalizedExisting === normalizedLabel;
+	} );
+
+	if ( isDuplicate ) {
+		return { isValid: false, errorMessage: ERROR_MESSAGES.DUPLICATE_NAME };
+	}
+
+	return { isValid: true, errorMessage: null };
+}