@elementor/editor-variables 3.33.0-141 → 3.33.0-143

package/package.json

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

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import { WarningInfotip } from '@elementor/editor-ui';
 import { TextField, type TextFieldProps } from '@elementor/ui';
 
-import { validateLabel, VARIABLE_LABEL_MAX_LENGTH } from '../../utils/validations';
+import { labelHint, validateLabel, VARIABLE_LABEL_MAX_LENGTH } from '../../utils/validations';
 function isLabelEqual( a: string, b: string ) {
 	return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
@@ -30,6 +31,7 @@ type LabelFieldProps = {
 	size?: TextFieldProps[ 'size' ];
 	focusOnShow?: boolean;
 	selectOnShow?: boolean;
+	showWarningInfotip?: boolean;
 };
 
 export const LabelField = ( {
@@ -41,9 +43,11 @@ export const LabelField = ( {
 	size = 'tiny',
 	focusOnShow = false,
 	selectOnShow = false,
+	showWarningInfotip = false,
 }: LabelFieldProps ) => {
 	const [ label, setLabel ] = useState( value );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
+	const fieldRef = useRef< HTMLElement >( null );
 
 	const handleChange = ( newValue: string ) => {
 		setLabel( newValue );
@@ -61,8 +65,11 @@ export const LabelField = ( {
 		errorMsg = error.message;
 	}
 
-	return (
+	const hintMsg = ! errorMsg ? labelHint( label ) : '';
+
+	const textField = (
 		<TextField
+			ref={ fieldRef }
 			id={ id }
 			size={ size }
 			fullWidth
@@ -77,4 +84,23 @@ export const LabelField = ( {
 			autoFocus={ focusOnShow }
 		/>
 	);
+
+	if ( showWarningInfotip ) {
+		const tooltipWidth = Math.max( 240, fieldRef.current?.getBoundingClientRect().width ?? 240 );
+
+		return (
+			<WarningInfotip
+				open={ Boolean( errorMsg || hintMsg ) }
+				text={ errorMsg || hintMsg }
+				placement="bottom-start"
+				width={ tooltipWidth }
+				offset={ [ 0, -15 ] }
+				{ ...( hintMsg && { hasError: false } ) }
+			>
+				{ textField }
+			</WarningInfotip>
+		);
+	}
+
+	return textField;
 };

package/src/components/variables-manager/hooks/use-auto-edit.ts

@@ -0,0 +1,21 @@
+import { useCallback, useState } from 'react';
+
+export const useAutoEdit = () => {
+	const [ autoEditVariableId, setAutoEditVariableId ] = useState< string | undefined >( undefined );
+
+	const startAutoEdit = useCallback( ( variableId: string ) => {
+		setAutoEditVariableId( variableId );
+	}, [] );
+
+	const handleAutoEditComplete = useCallback( () => {
+		setTimeout( () => {
+			setAutoEditVariableId( undefined );
+		}, 100 );
+	}, [] );
+
+	return {
+		autoEditVariableId,
+		startAutoEdit,
+		handleAutoEditComplete,
+	};
+};

package/src/components/variables-manager/hooks/use-variables-manager-state.ts

@@ -0,0 +1,79 @@
+import { useCallback, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+
+import { generateTempId } from '../../../batch-operations';
+import { getVariables } from '../../../hooks/use-prop-variables';
+import { service } from '../../../service';
+import { type TVariablesList } from '../../../storage';
+import { ERROR_MESSAGES } from '../../../utils/validations';
+
+export const useVariablesManagerState = () => {
+	const [ variables, setVariables ] = useState( () => getVariables( false ) );
+	const [ deletedVariables, setDeletedVariables ] = useState< string[] >( [] );
+	const [ ids, setIds ] = useState< string[] >( () => Object.keys( getVariables( false ) ) );
+	const [ isDirty, setIsDirty ] = useState( false );
+	const [ hasValidationErrors, setHasValidationErrors ] = useState( false );
+
+	const handleOnChange = useCallback( ( newVariables: TVariablesList ) => {
+		setVariables( newVariables );
+		setIsDirty( true );
+	}, [] );
+
+	const createVariable = useCallback( ( type: string, defaultName: string, defaultValue: string ) => {
+		const newId = generateTempId();
+		const newVariable = {
+			id: newId,
+			label: defaultName.trim(),
+			value: defaultValue.trim(),
+			type,
+		};
+
+		setVariables( ( prev ) => ( { ...prev, [ newId ]: newVariable } ) );
+		setIds( ( prev ) => [ ...prev, newId ] );
+		setIsDirty( true );
+
+		return newId;
+	}, [] );
+
+	const handleDeleteVariable = useCallback( ( itemId: string ) => {
+		setDeletedVariables( ( prev ) => [ ...prev, itemId ] );
+		setVariables( ( prev ) => ( { ...prev, [ itemId ]: { ...prev[ itemId ], deleted: true } } ) );
+		setIsDirty( true );
+	}, [] );
+
+	const handleSave = useCallback( async (): Promise< { success: boolean; error?: string } > => {
+		try {
+			const originalVariables = getVariables( false );
+			const result = await service.batchSave( originalVariables, variables );
+
+			if ( result.success ) {
+				await service.load();
+				const updatedVariables = service.variables();
+
+				setVariables( updatedVariables );
+				setIds( Object.keys( updatedVariables ) );
+				setDeletedVariables( [] );
+				setIsDirty( false );
+				return { success: true };
+			}
+			throw new Error( __( 'Failed to save variables. Please try again.', 'elementor' ) );
+		} catch ( error ) {
+			const errorMessage = error instanceof Error ? error.message : ERROR_MESSAGES.UNEXPECTED_ERROR;
+			return { success: false, error: errorMessage };
+		}
+	}, [ variables ] );
+
+	return {
+		variables,
+		deletedVariables,
+		ids,
+		isDirty,
+		hasValidationErrors,
+		setIds,
+		handleOnChange,
+		createVariable,
+		handleDeleteVariable,
+		handleSave,
+		setHasValidationErrors,
+	};
+};

package/src/components/variables-manager/variable-editable-cell.tsx

@@ -1,108 +1,134 @@
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { ClickAwayListener, Stack } from '@elementor/ui';
 
 import { type ValueFieldProps } from '../../variables-registry/create-variable-type-registry';
+import { useLabelError } from '../fields/label-field';
 
 type VariableEditableCellProps = {
 	initialValue: string;
 	children: React.ReactNode;
-	editableElement: ( { value, onChange, onValidationChange }: ValueFieldProps ) => JSX.Element;
+	editableElement: ( { value, onChange, onValidationChange, error }: ValueFieldProps ) => JSX.Element;
 	onChange: ( newValue: string ) => void;
 	prefixElement?: React.ReactNode;
 	autoEdit?: boolean;
 	onRowRef?: ( ref: HTMLTableRowElement | null ) => void;
 	onAutoEditComplete?: () => void;
+	fieldType?: 'label' | 'value';
 };
 
-export const VariableEditableCell = ( {
-	initialValue,
-	children,
-	editableElement,
-	onChange,
-	prefixElement,
-	autoEdit = false,
-	onRowRef,
-	onAutoEditComplete,
-}: VariableEditableCellProps ) => {
-	const [ value, setValue ] = useState( initialValue );
-	const [ isEditing, setIsEditing ] = useState( false );
-
-	const rowRef = useRef< HTMLTableRowElement >( null );
-
-	useEffect( () => {
-		onRowRef?.( rowRef?.current );
-	}, [ onRowRef ] );
-
-	useEffect( () => {
-		if ( autoEdit && ! isEditing ) {
-			setIsEditing( true );
-			onAutoEditComplete?.();
-		}
-	}, [ autoEdit, isEditing, onAutoEditComplete ] );
+export const VariableEditableCell = React.memo(
+	( {
+		initialValue,
+		children,
+		editableElement,
+		onChange,
+		prefixElement,
+		autoEdit = false,
+		onRowRef,
+		onAutoEditComplete,
+		fieldType,
+	}: VariableEditableCellProps ) => {
+		const [ value, setValue ] = useState( initialValue );
+		const [ isEditing, setIsEditing ] = useState( false );
 
-	const handleDoubleClick = () => {
-		setIsEditing( true );
-	};
+		const { labelFieldError, setLabelFieldError } = useLabelError();
 
-	const handleSave = () => {
-		onChange( value );
-		setIsEditing( false );
-	};
+		const rowRef = useRef< HTMLTableRowElement >( null );
 
-	const handleKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {
-		if ( event.key === 'Enter' ) {
-			handleSave();
-		} else if ( event.key === 'Escape' ) {
+		const handleSave = useCallback( () => {
+			onChange( value );
 			setIsEditing( false );
-		}
-		if ( event.key === ' ' && ! isEditing ) {
-			event.preventDefault();
+		}, [ value, onChange ] );
+
+		useEffect( () => {
+			onRowRef?.( rowRef?.current );
+		}, [ onRowRef ] );
+
+		useEffect( () => {
+			if ( autoEdit && ! isEditing ) {
+				setIsEditing( true );
+				onAutoEditComplete?.();
+			}
+		}, [ autoEdit, isEditing, onAutoEditComplete ] );
+
+		const handleDoubleClick = () => {
 			setIsEditing( true );
-		}
-	};
+		};
 
-	const handleChange = ( newValue: string ) => {
-		setValue( newValue );
-	};
+		const handleKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {
+			if ( event.key === 'Enter' ) {
+				handleSave();
+			} else if ( event.key === 'Escape' ) {
+				setIsEditing( false );
+			}
+			if ( event.key === ' ' && ! isEditing ) {
+				event.preventDefault();
+				setIsEditing( true );
+			}
+		};
 
-	const editableContent = editableElement( { value, onChange: handleChange } );
+		const handleChange = useCallback( ( newValue: string ) => {
+			setValue( newValue );
+		}, [] );
+
+		const handleValidationChange = useCallback(
+			( errorMsg: string ) => {
+				if ( fieldType === 'label' ) {
+					setLabelFieldError( {
+						value,
+						message: errorMsg,
+					} );
+				}
+			},
+			[ fieldType, value, setLabelFieldError ]
+		);
+
+		const currentError = fieldType === 'label' ? labelFieldError : undefined;
+
+		const editableContent = editableElement( {
+			value,
+			onChange: handleChange,
+			onValidationChange: handleValidationChange,
+			error: currentError,
+		} );
+
+		if ( isEditing ) {
+			return (
+				<ClickAwayListener onClickAway={ handleSave }>
+					<Stack
+						ref={ rowRef }
+						direction="row"
+						alignItems="center"
+						gap={ 1 }
+						onDoubleClick={ handleDoubleClick }
+						onKeyDown={ handleKeyDown }
+						tabIndex={ 0 }
+						role="button"
+						aria-label="Double click or press Space to edit"
+					>
+						{ prefixElement }
+						{ editableContent }
+					</Stack>
+				</ClickAwayListener>
+			);
+		}
 
-	if ( isEditing ) {
 		return (
-			<ClickAwayListener onClickAway={ handleSave }>
-				<Stack
-					ref={ rowRef }
-					direction="row"
-					alignItems="center"
-					gap={ 1 }
-					onDoubleClick={ handleDoubleClick }
-					onKeyDown={ handleKeyDown }
-					tabIndex={ 0 }
-					role="button"
-					aria-label="Double click or press Space to edit"
-				>
-					{ prefixElement }
-					{ editableContent }
-				</Stack>
-			</ClickAwayListener>
+			<Stack
+				ref={ rowRef }
+				direction="row"
+				alignItems="center"
+				gap={ 1 }
+				onDoubleClick={ handleDoubleClick }
+				onKeyDown={ handleKeyDown }
+				tabIndex={ 0 }
+				role="button"
+				aria-label="Double click or press Space to edit"
+			>
+				{ prefixElement }
+				{ children }
+			</Stack>
 		);
 	}
-
-	return (
-		<Stack
-			ref={ rowRef }
-			direction="row"
-			alignItems="center"
-			gap={ 1 }
-			onDoubleClick={ handleDoubleClick }
-			onKeyDown={ handleKeyDown }
-			tabIndex={ 0 }
-			role="button"
-			aria-label="Double click or press Space to edit"
-		>
-			{ prefixElement }
-			{ children }
-		</Stack>
-	);
-};
+);

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

@@ -14,11 +14,9 @@ import { ColorFilterIcon, TrashIcon } from '@elementor/icons';
 import { Alert, Box, Button, CloseButton, Divider, ErrorBoundary, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { generateTempId } from '../../batch-operations';
-import { getVariables } from '../../hooks/use-prop-variables';
-import { service } from '../../service';
-import { type TVariablesList } from '../../storage';
 import { DeleteConfirmationDialog } from '../ui/delete-confirmation-dialog';
+import { useAutoEdit } from './hooks/use-auto-edit';
+import { useVariablesManagerState } from './hooks/use-variables-manager-state';
 import { SIZE, VariableManagerCreateMenu } from './variables-manager-create-menu';
 import { VariablesManagerTable } from './variables-manager-table';
 
@@ -40,13 +38,22 @@ export function VariablesManagerPanel() {
 	const { close: closePanel } = usePanelActions();
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 
-	const [ variables, setVariables ] = useState( getVariables( false ) );
-	const [ deletedVariables, setDeletedVariables ] = useState< string[] >( [] );
-	const [ ids, setIds ] = useState< string[] >( Object.keys( variables ) );
+	const {
+		variables,
+		ids,
+		isDirty,
+		hasValidationErrors,
+		setIds,
+		handleOnChange,
+		createVariable,
+		handleDeleteVariable,
+		handleSave,
+		setHasValidationErrors,
+	} = useVariablesManagerState();
+
+	const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
 
 	const [ deleteConfirmation, setDeleteConfirmation ] = useState< { id: string; label: string } | null >( null );
-	const [ autoEditVariableId, setAutoEditVariableId ] = useState< string | undefined >( undefined );
-	const [ isDirty, setIsDirty ] = useState( false );
 
 	usePreventUnload( isDirty );
 
@@ -59,57 +66,23 @@ export function VariablesManagerPanel() {
 		closePanel();
 	};
 
-	const handleSave = useCallback( async () => {
-		const originalVariables = getVariables( false );
-		const result = await service.batchSave( originalVariables, variables );
-
-		setIsDirty( false );
-
-		if ( result.success ) {
-			await service.load();
-			const updatedVariables = service.variables();
-
-			setVariables( updatedVariables );
-			setIds( Object.keys( updatedVariables ) );
-			setDeletedVariables( [] );
-		} else {
-			setIsDirty( true );
-		}
-	}, [ variables ] );
-
-	const handleOnChange = ( newVariables: TVariablesList ) => {
-		setVariables( newVariables );
-		setIsDirty( true );
-	};
-
-	const createVariable = useCallback( ( type: string, defaultName: string, defaultValue: string ) => {
-		const newId = generateTempId();
-		const newVariable = {
-			id: newId,
-			label: defaultName,
-			value: defaultValue,
-			type,
-		};
-
-		setVariables( ( prev ) => ( { ...prev, [ newId ]: newVariable } ) );
-		setIds( ( prev ) => [ ...prev, newId ] );
-		setIsDirty( true );
-
-		setAutoEditVariableId( newId );
-	}, [] );
-
-	const handleDeleteVariable = ( itemId: string ) => {
-		setDeletedVariables( [ ...deletedVariables, itemId ] );
-		setVariables( { ...variables, [ itemId ]: { ...variables[ itemId ], deleted: true } } );
-		setIsDirty( true );
-		setDeleteConfirmation( null );
-	};
+	const handleCreateVariable = useCallback(
+		( type: string, defaultName: string, defaultValue: string ) => {
+			const newId = createVariable( type, defaultName, defaultValue );
+			if ( newId ) {
+				startAutoEdit( newId );
+			}
+		},
+		[ createVariable, startAutoEdit ]
+	);
 
-	const handleAutoEditComplete = useCallback( () => {
-		setTimeout( () => {
-			setAutoEditVariableId( undefined );
-		}, 100 );
-	}, [] );
+	const handleDeleteVariableWithConfirmation = useCallback(
+		( itemId: string ) => {
+			handleDeleteVariable( itemId );
+			setDeleteConfirmation( null );
+		},
+		[ handleDeleteVariable ]
+	);
 
 	const menuActions = [
 		{
@@ -138,7 +111,10 @@ export function VariablesManagerPanel() {
 									</PanelHeaderTitle>
 								</Stack>
 								<Stack direction="row" gap={ 0.5 } alignItems="center">
-									<VariableManagerCreateMenu onCreate={ createVariable } variables={ variables } />
+									<VariableManagerCreateMenu
+										onCreate={ handleCreateVariable }
+										variables={ variables }
+									/>
 									<CloseButton
 										aria-label="Close"
 										slotProps={ { icon: { fontSize: SIZE } } }
@@ -166,6 +142,7 @@ export function VariablesManagerPanel() {
 							onIdsChange={ setIds }
 							autoEditVariableId={ autoEditVariableId }
 							onAutoEditComplete={ handleAutoEditComplete }
+							onFieldError={ setHasValidationErrors }
 						/>
 					</PanelBody>
 
@@ -175,7 +152,7 @@ export function VariablesManagerPanel() {
 							size="small"
 							color="global"
 							variant="contained"
-							disabled={ ! isDirty }
+							disabled={ ! isDirty || hasValidationErrors }
 							onClick={ handleSave }
 						>
 							{ __( 'Save changes', 'elementor' ) }
@@ -187,7 +164,7 @@ export function VariablesManagerPanel() {
 					<DeleteConfirmationDialog
 						open
 						label={ deleteConfirmation.label }
-						onConfirm={ () => handleDeleteVariable( deleteConfirmation.id ) }
+						onConfirm={ () => handleDeleteVariableWithConfirmation( deleteConfirmation.id ) }
 						closeDialog={ () => setDeleteConfirmation( null ) }
 					/>
 				) }

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

@@ -32,6 +32,7 @@ type Props = {
 	onIdsChange: ( ids: string[] ) => void;
 	autoEditVariableId?: string;
 	onAutoEditComplete?: () => void;
+	onFieldError?: ( hasError: boolean ) => void;
 };
 
 export const VariablesManagerTable = ( {
@@ -42,6 +43,7 @@ export const VariablesManagerTable = ( {
 	onIdsChange: setIds,
 	autoEditVariableId,
 	onAutoEditComplete,
+	onFieldError,
 }: Props ) => {
 	const tableContainerRef = useRef< HTMLDivElement >( null );
 	const variableRowRefs = useRef< Map< string, HTMLTableRowElement > >( new Map() );
@@ -203,14 +205,25 @@ export const VariablesManagerTable = ( {
 														}
 													} }
 													prefixElement={ createElement( row.icon, { fontSize: 'inherit' } ) }
-													editableElement={ ( { value, onChange } ) => (
+													editableElement={ ( {
+														value,
+														onChange,
+														onValidationChange,
+														error,
+													} ) => (
 														<LabelField
 															id={ 'variable-label-' + row.id }
 															size="tiny"
 															value={ value }
 															onChange={ onChange }
+															onErrorChange={ ( errorMsg ) => {
+																onValidationChange?.( errorMsg );
+																onFieldError?.( !! errorMsg );
+															} }
+															error={ error }
 															focusOnShow
 															selectOnShow={ autoEditVariableId === row.id }
+															showWarningInfotip={ true }
 														/>
 													) }
 													autoEdit={ autoEditVariableId === row.id }
@@ -218,6 +231,7 @@ export const VariablesManagerTable = ( {
 													onAutoEditComplete={
 														autoEditVariableId === row.id ? onAutoEditComplete : undefined
 													}
+													fieldType="label"
 												>
 													<EllipsisWithTooltip
 														title={ row.name }

package/src/variables-registry/create-variable-type-registry.ts

@@ -19,6 +19,7 @@ export type ValueFieldProps = {
 	onChange: ( value: string ) => void;
 	onValidationChange?: ( value: string ) => void;
 	propType?: PropType;
+	error?: { value: string; message: string };
 };
 
 type FallbackPropTypeUtil = ReturnType< typeof createPropUtils >;
@@ -26,7 +27,7 @@ type FallbackPropTypeUtil = ReturnType< typeof createPropUtils >;
 type VariableTypeOptions = {
 	icon: ForwardRefExoticComponent< Omit< SvgIconProps, 'ref' > & RefAttributes< SVGSVGElement > >;
 	startIcon?: ( { value }: { value: string } ) => JSX.Element;
-	valueField: ( { value, onChange, onValidationChange, propType }: ValueFieldProps ) => JSX.Element;
+	valueField: ( { value, onChange, onValidationChange, propType, error }: ValueFieldProps ) => JSX.Element;
 	variableType: string;
 	defaultValue?: string;
 	fallbackPropTypeUtil: FallbackPropTypeUtil;