@elementor/editor-variables 3.32.0-28 → 3.32.0-30

package/package.json

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

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { FormHelperText, FormLabel, Grid, UnstableColorField } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { UnstableColorField } from '@elementor/ui';
 
 import { usePopoverContentRef } from '../../context/variable-selection-popover.context';
 import { validateValue } from '../../utils/validations';
@@ -9,9 +8,10 @@ import { validateValue } from '../../utils/validations';
 type ColorFieldProps = {
 	value: string;
 	onChange: ( value: string ) => void;
+	onValidationChange?: ( errorMessage: string ) => void;
 };
 
-export const ColorField = ( { value, onChange }: ColorFieldProps ) => {
+export const ColorField = ( { value, onChange, onValidationChange }: ColorFieldProps ) => {
 	const [ color, setColor ] = useState( value );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
 
@@ -23,32 +23,25 @@ export const ColorField = ( { value, onChange }: ColorFieldProps ) => {
 
 		const errorMsg = validateValue( newValue );
 		setErrorMessage( errorMsg );
+		onValidationChange?.( errorMsg );
 
 		onChange( errorMsg ? '' : newValue );
 	};
 
 	return (
-		<Grid container gap={ 0.75 } alignItems="center">
-			<Grid item xs={ 12 }>
-				<FormLabel size="tiny">{ __( 'Value', 'elementor' ) }</FormLabel>
-			</Grid>
-			<Grid item xs={ 12 }>
-				<UnstableColorField
-					size="tiny"
-					fullWidth
-					value={ color }
-					onChange={ handleChange }
-					error={ errorMessage ?? undefined }
-					slotProps={ {
-						colorPicker: {
-							anchorEl: anchorRef,
-							anchorOrigin: { vertical: 'top', horizontal: 'right' },
-							transformOrigin: { vertical: 'top', horizontal: -10 },
-						},
-					} }
-				/>
-				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
-			</Grid>
-		</Grid>
+		<UnstableColorField
+			size="tiny"
+			fullWidth
+			value={ color }
+			onChange={ handleChange }
+			error={ errorMessage || undefined }
+			slotProps={ {
+				colorPicker: {
+					anchorEl: anchorRef,
+					anchorOrigin: { vertical: 'top', horizontal: 'right' },
+					transformOrigin: { vertical: 'top', horizontal: -10 },
+				},
+			} }
+		/>
 	);
 };

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

@@ -1,18 +1,9 @@
 import * as React from 'react';
-import { useRef, useState } from 'react';
+import { useId, useRef, useState } from 'react';
 import { enqueueFont, ItemSelector } from '@elementor/editor-controls';
 import { useFontFamilies, useSectionWidth } from '@elementor/editor-editing-panel';
 import { ChevronDownIcon, TextIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	FormHelperText,
-	FormLabel,
-	Grid,
-	Popover,
-	UnstableTag,
-	usePopupState,
-} from '@elementor/ui';
+import { bindPopover, bindTrigger, Popover, UnstableTag, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { usePopoverContentRef } from '../../context/variable-selection-popover.context';
@@ -21,11 +12,11 @@ import { validateValue } from '../../utils/validations';
 type FontFieldProps = {
 	value: string;
 	onChange: ( value: string ) => void;
+	onValidationChange?: ( errorMessage: string ) => void;
 };
 
-export const FontField = ( { value, onChange }: FontFieldProps ) => {
+export const FontField = ( { value, onChange, onValidationChange }: FontFieldProps ) => {
 	const [ fontFamily, setFontFamily ] = useState( value );
-	const [ errorMessage, setErrorMessage ] = useState( '' );
 
 	const defaultRef = useRef< HTMLDivElement >( null );
 	const anchorRef = usePopoverContentRef() ?? defaultRef.current;
@@ -46,7 +37,7 @@ export const FontField = ( { value, onChange }: FontFieldProps ) => {
 		setFontFamily( newValue );
 
 		const errorMsg = validateValue( newValue );
-		setErrorMessage( errorMsg );
+		onValidationChange?.( errorMsg );
 
 		onChange( errorMsg ? '' : newValue );
 	};
@@ -56,41 +47,38 @@ export const FontField = ( { value, onChange }: FontFieldProps ) => {
 		fontPopoverState.close();
 	};
 
+	const id = useId();
+
 	return (
-		<Grid container gap={ 0.75 } alignItems="center">
-			<Grid item xs={ 12 }>
-				<FormLabel size="tiny">{ __( 'Value', 'elementor' ) }</FormLabel>
-			</Grid>
-			<Grid item xs={ 12 }>
-				<UnstableTag
-					variant="outlined"
-					label={ fontFamily }
-					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
-					{ ...bindTrigger( fontPopoverState ) }
-					fullWidth
+		<>
+			<UnstableTag
+				id={ id }
+				variant="outlined"
+				label={ fontFamily }
+				endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+				{ ...bindTrigger( fontPopoverState ) }
+				fullWidth
+			/>
+			<Popover
+				disablePortal
+				disableScrollLock
+				anchorEl={ anchorRef }
+				anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: -28 } }
+				{ ...bindPopover( fontPopoverState ) }
+			>
+				<ItemSelector
+					itemsList={ mapFontSubs }
+					selectedItem={ fontFamily }
+					onItemChange={ handleFontFamilyChange }
+					onClose={ fontPopoverState.close }
+					sectionWidth={ sectionWidth }
+					title={ __( 'Font Family', 'elementor' ) }
+					itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
+					onDebounce={ enqueueFont }
+					icon={ TextIcon as React.ElementType< { fontSize: string } > }
 				/>
-				<Popover
-					disablePortal
-					disableScrollLock
-					anchorEl={ anchorRef }
-					anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
-					transformOrigin={ { vertical: 'top', horizontal: -28 } }
-					{ ...bindPopover( fontPopoverState ) }
-				>
-					<ItemSelector
-						itemsList={ mapFontSubs }
-						selectedItem={ fontFamily }
-						onItemChange={ handleFontFamilyChange }
-						onClose={ fontPopoverState.close }
-						sectionWidth={ sectionWidth }
-						title={ __( 'Font Family', 'elementor' ) }
-						itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
-						onDebounce={ enqueueFont }
-						icon={ TextIcon as React.ElementType< { fontSize: string } > }
-					/>
-				</Popover>
-				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
-			</Grid>
-		</Grid>
+			</Popover>
+		</>
 	);
 };

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { useId, useState } from 'react';
-import { FormHelperText, FormLabel, Grid, TextField } from '@elementor/ui';
+import { TextField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { labelHint, validateLabel, VARIABLE_LABEL_MAX_LENGTH } from '../../utils/validations';
+import { FormField } from '../ui/form-field';
 
 function isLabelEqual( a: string, b: string ) {
 	return a.trim().toLowerCase() === b.trim().toLowerCase();
@@ -56,25 +57,16 @@ export const LabelField = ( { value, error, onChange }: LabelFieldProps ) => {
 	const noticeMsg = errorMsg ? '' : noticeMessage;
 
 	return (
-		<Grid container gap={ 0.75 } alignItems="center">
-			<Grid item xs={ 12 }>
-				<FormLabel htmlFor={ id } size="tiny">
-					{ __( 'Name', 'elementor' ) }
-				</FormLabel>
-			</Grid>
-			<Grid item xs={ 12 }>
-				<TextField
-					id={ id }
-					size="tiny"
-					fullWidth
-					value={ label }
-					error={ !! errorMsg }
-					onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => handleChange( e.target.value ) }
-					inputProps={ { maxLength: VARIABLE_LABEL_MAX_LENGTH } }
-				/>
-				{ errorMsg && <FormHelperText error>{ errorMsg }</FormHelperText> }
-				{ noticeMsg && <FormHelperText>{ noticeMsg }</FormHelperText> }
-			</Grid>
-		</Grid>
+		<FormField id={ id } label={ __( 'Name', 'elementor' ) } errorMsg={ errorMsg } noticeMsg={ noticeMsg }>
+			<TextField
+				id={ id }
+				size="tiny"
+				fullWidth
+				value={ label }
+				error={ !! errorMsg }
+				onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => handleChange( e.target.value ) }
+				inputProps={ { maxLength: VARIABLE_LABEL_MAX_LENGTH } }
+			/>
+		</FormField>
 	);
 };

package/src/components/ui/form-field.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { PropsWithChildren } from 'react';
+import { FormHelperText, FormLabel, Grid } from '@elementor/ui';
+
+type Props = PropsWithChildren< {
+	id?: string;
+	label: string;
+	errorMsg?: string;
+	noticeMsg?: string;
+} >;
+
+export const FormField = ( { id, label, errorMsg, noticeMsg, children }: Props ) => {
+	return (
+		<Grid container gap={ 0.75 } alignItems="center">
+			<Grid item xs={ 12 }>
+				<FormLabel htmlFor={ id } size="tiny">
+					{ label }
+				</FormLabel>
+			</Grid>
+
+			<Grid item xs={ 12 }>
+				{ children }
+				{ errorMsg && <FormHelperText error>{ errorMsg }</FormHelperText> }
+				{ noticeMsg && <FormHelperText>{ noticeMsg }</FormHelperText> }
+			</Grid>
+		</Grid>
+	);
+};

package/src/components/variable-creation.tsx

@@ -13,6 +13,7 @@ import { createVariable } from '../hooks/use-prop-variables';
 import { trackVariableEvent } from '../utils/tracking';
 import { ERROR_MESSAGES, mapServerError } from '../utils/validations';
 import { LabelField, useLabelError } from './fields/label-field';
+import { FormField } from './ui/form-field';
 
 const SIZE = 'tiny';
 
@@ -31,6 +32,7 @@ export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 	const [ value, setValue ] = useState( initialValue );
 	const [ label, setLabel ] = useState( '' );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
+	const [ valueFieldError, setValueFieldError ] = useState( '' );
 
 	const { labelFieldError, setLabelFieldError } = useLabelError();
 
@@ -38,6 +40,7 @@ export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 		setValue( '' );
 		setLabel( '' );
 		setErrorMessage( '' );
+		setValueFieldError( '' );
 	};
 
 	const closePopover = () => {
@@ -114,13 +117,17 @@ export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 						setErrorMessage( '' );
 					} }
 				/>
-				<ValueField
-					value={ value }
-					onChange={ ( newValue ) => {
-						setValue( newValue );
-						setErrorMessage( '' );
-					} }
-				/>
+				<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
+					<ValueField
+						value={ value }
+						onChange={ ( newValue ) => {
+							setValue( newValue );
+							setErrorMessage( '' );
+							setValueFieldError( '' );
+						} }
+						onValidationChange={ setValueFieldError }
+					/>
+				</FormField>
 
 				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 			</PopoverContent>

package/src/components/variable-edit.tsx

@@ -16,6 +16,7 @@ import { ERROR_MESSAGES, mapServerError } from '../utils/validations';
 import { LabelField, useLabelError } from './fields/label-field';
 import { DeleteConfirmationDialog } from './ui/delete-confirmation-dialog';
 import { EDIT_CONFIRMATION_DIALOG_ID, EditConfirmationDialog } from './ui/edit-confirmation-dialog';
+import { FormField } from './ui/form-field';
 
 const SIZE = 'tiny';
 
@@ -34,6 +35,7 @@ export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) =
 	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
 	const [ editConfirmation, setEditConfirmation ] = useState( false );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
+	const [ valueFieldError, setValueFieldError ] = useState( '' );
 
 	const { labelFieldError, setLabelFieldError } = useLabelError();
 	const variable = useVariable( editId );
@@ -182,13 +184,17 @@ export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) =
 							setErrorMessage( '' );
 						} }
 					/>
-					<ValueField
-						value={ value }
-						onChange={ ( newValue ) => {
-							setValue( newValue );
-							setErrorMessage( '' );
-						} }
-					/>
+					<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
+						<ValueField
+							value={ value }
+							onChange={ ( newValue ) => {
+								setValue( newValue );
+								setErrorMessage( '' );
+								setValueFieldError( '' );
+							} }
+							onValidationChange={ setValueFieldError }
+						/>
+					</FormField>
 
 					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 				</PopoverContent>

package/src/components/variable-restore.tsx

@@ -11,6 +11,7 @@ import { useVariableType } from '../context/variable-type-context';
 import { restoreVariable, useVariable } from '../hooks/use-prop-variables';
 import { ERROR_MESSAGES, mapServerError } from '../utils/validations';
 import { LabelField, useLabelError } from './fields/label-field';
+import { FormField } from './ui/form-field';
 
 const SIZE = 'tiny';
 
@@ -32,6 +33,7 @@ export const VariableRestore = ( { variableId, onClose, onSubmit }: Props ) => {
 	}
 
 	const [ errorMessage, setErrorMessage ] = useState( '' );
+	const [ valueFieldError, setValueFieldError ] = useState( '' );
 	const [ label, setLabel ] = useState( variable.label );
 	const [ value, setValue ] = useState( variable.value );
 
@@ -95,13 +97,17 @@ export const VariableRestore = ( { variableId, onClose, onSubmit }: Props ) => {
 							setErrorMessage( '' );
 						} }
 					/>
-					<ValueField
-						value={ value }
-						onChange={ ( newValue ) => {
-							setValue( newValue );
-							setErrorMessage( '' );
-						} }
-					/>
+					<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
+						<ValueField
+							value={ value }
+							onChange={ ( newValue ) => {
+								setValue( newValue );
+								setErrorMessage( '' );
+								setValueFieldError( '' );
+							} }
+							onValidationChange={ setValueFieldError }
+						/>
+					</FormField>
 
 					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 				</PopoverContent>

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

@@ -11,6 +11,7 @@ import { type NormalizedVariable } from '../types';
 type ValueFieldProps = {
 	value: string;
 	onChange: ( value: string ) => void;
+	onValidationChange?: ( value: string ) => void;
 };
 
 type FallbackPropTypeUtil = ReturnType< typeof createPropUtils >;
@@ -18,7 +19,7 @@ type FallbackPropTypeUtil = ReturnType< typeof createPropUtils >;
 type VariableTypeOptions = {
 	icon: ForwardRefExoticComponent< Omit< SvgIconProps, 'ref' > & RefAttributes< SVGSVGElement > >;
 	startIcon?: ( { value }: { value: string } ) => JSX.Element;
-	valueField: ( { value, onChange }: ValueFieldProps ) => JSX.Element;
+	valueField: ( { value, onChange, onValidationChange }: ValueFieldProps ) => JSX.Element;
 	variableType: string;
 	fallbackPropTypeUtil: FallbackPropTypeUtil;
 	propTypeUtil: PropTypeUtil< string, string >;