@elementor/editor-variables 3.33.0-98 → 3.34.2

package/src/components/ui/variable/mismatch-variable.tsx

@@ -2,18 +2,19 @@ import * as React from 'react';
 import { useId, useRef, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { Backdrop, bindPopover, Box, Infotip, Popover, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { type Variable } from '../../../types';
 import { VariableSelectionPopover } from '../../variable-selection-popover';
 import { MismatchVariableAlert } from '../mismatch-variable-alert';
-import { MismatchTag } from '../tags/mismatch-tag';
+import { WarningVariableTag } from '../tags/warning-variable-tag';
 
 type Props = {
 	variable: Variable;
 };
 
 export const MismatchVariable = ( { variable }: Props ) => {
-	const { setValue } = useBoundProp();
+	const { setValue, value } = useBoundProp();
 
 	const anchorRef = useRef< HTMLDivElement >( null );
 
@@ -40,6 +41,8 @@ export const MismatchVariable = ( { variable }: Props ) => {
 		setValue( null );
 	};
 
+	const showClearButton = !! value;
+
 	return (
 		<Box ref={ anchorRef }>
 			{ infotipVisible && <Backdrop open onClick={ closeInfotip } invisible /> }
@@ -52,7 +55,7 @@ export const MismatchVariable = ( { variable }: Props ) => {
 				content={
 					<MismatchVariableAlert
 						onClose={ closeInfotip }
-						onClear={ clearValue }
+						onClear={ showClearButton ? clearValue : undefined }
 						triggerSelect={ triggerSelect }
 					/>
 				}
@@ -67,7 +70,11 @@ export const MismatchVariable = ( { variable }: Props ) => {
 					},
 				} }
 			>
-				<MismatchTag label={ variable.label } onClick={ toggleInfotip } />
+				<WarningVariableTag
+					label={ variable.label }
+					onClick={ toggleInfotip }
+					suffix={ __( 'changed', 'elementor' ) }
+				/>
 			</Infotip>
 
 			<Popover

package/src/components/ui/variable/missing-variable.tsx

@@ -5,7 +5,7 @@ import { Backdrop, Infotip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { MissingVariableAlert } from '../missing-variable-alert';
-import { MissingTag } from '../tags/missing-tag';
+import { WarningVariableTag } from '../tags/warning-variable-tag';
 
 export const MissingVariable = () => {
 	const { setValue } = useBoundProp();
@@ -37,7 +37,7 @@ export const MissingVariable = () => {
 					},
 				} }
 			>
-				<MissingTag label={ __( 'Missing variable', 'elementor' ) } onClick={ toggleInfotip } />
+				<WarningVariableTag label={ __( 'Missing variable', 'elementor' ) } onClick={ toggleInfotip } />
 			</Infotip>
 		</>
 	);

package/src/components/variable-creation.tsx

@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { useVariableType } from '../context/variable-type-context';
 import { useInitialValue } from '../hooks/use-initial-value';
 import { createVariable } from '../hooks/use-prop-variables';
+import { useVariableBoundProp } from '../hooks/use-variable-bound-prop';
 import { trackVariableEvent } from '../utils/tracking';
 import { ERROR_MESSAGES, labelHint, mapServerError } from '../utils/validations';
 import { LabelField, useLabelError } from './fields/label-field';
@@ -25,7 +26,7 @@ type Props = {
 export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 	const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
 
-	const { setValue: setVariable, path } = useBoundProp( propTypeUtil );
+	const { setVariableValue: setVariable, path } = useVariableBoundProp();
 	const { propType } = useBoundProp();
 
 	const initialValue = useInitialValue();
@@ -141,7 +142,7 @@ export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 					/>
 				</FormField>
 				<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
-					<Typography variant="h5">
+					<Typography variant="h5" id="variable-value-wrapper">
 						<ValueField
 							value={ value }
 							onChange={ ( newValue ) => {
@@ -159,7 +160,13 @@ export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 			</PopoverContent>
 
 			<CardActions sx={ { pt: 0.5, pb: 1 } }>
-				<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleCreateAndTrack }>
+				<Button
+					id="create-variable-button"
+					size="small"
+					variant="contained"
+					disabled={ isSubmitDisabled }
+					onClick={ handleCreateAndTrack }
+				>
 					{ __( 'Create', 'elementor' ) }
 				</Button>
 			</CardActions>

package/src/components/variable-edit.tsx

@@ -5,12 +5,13 @@ import { useSuppressedMessage } from '@elementor/editor-current-user';
 import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { ArrowLeftIcon, TrashIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, FormHelperText, IconButton, Typography } from '@elementor/ui';
+import { Button, CardActions, Divider, FormHelperText, IconButton, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useVariableType } from '../context/variable-type-context';
 import { usePermissions } from '../hooks/use-permissions';
 import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
+import { useVariableBoundProp } from '../hooks/use-variable-bound-prop';
 import { styleVariablesRepository } from '../style-variables-repository';
 import { ERROR_MESSAGES, labelHint, mapServerError } from '../utils/validations';
 import { LabelField, useLabelError } from './fields/label-field';
@@ -19,6 +20,7 @@ import { EDIT_CONFIRMATION_DIALOG_ID, EditConfirmationDialog } from './ui/edit-c
 import { FormField } from './ui/form-field';
 
 const SIZE = 'tiny';
+const DELETE_LABEL = __( 'Delete variable', 'elementor' );
 
 type Props = {
 	editId: string;
@@ -28,9 +30,9 @@ type Props = {
 };
 
 export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
-	const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+	const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
 
-	const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp( propTypeUtil );
+	const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
 	const { propType } = useBoundProp();
 	const [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( EDIT_CONFIRMATION_DIALOG_ID );
 	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
@@ -105,7 +107,7 @@ export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) =
 	};
 
 	const maybeTriggerBoundPropChange = () => {
-		if ( editId === assignedValue ) {
+		if ( editId === variableId ) {
 			notifyBoundPropChange( editId );
 		}
 	};
@@ -126,14 +128,11 @@ export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) =
 
 	if ( userPermissions.canDelete() ) {
 		actions.push(
-			<IconButton
-				key="delete"
-				size={ SIZE }
-				aria-label={ __( 'Delete', 'elementor' ) }
-				onClick={ handleDeleteConfirmation }
-			>
-				<TrashIcon fontSize={ SIZE } />
-			</IconButton>
+			<Tooltip key="delete" placement="top" title={ DELETE_LABEL }>
+				<IconButton size={ SIZE } onClick={ handleDeleteConfirmation } aria-label={ DELETE_LABEL }>
+					<TrashIcon fontSize={ SIZE } />
+				</IconButton>
+			</Tooltip>
 		);
 	}
 

package/src/components/variable-restore.tsx

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { PopoverContentRefContextProvider } from '../context/variable-selection-popover.context';
 import { useVariableType } from '../context/variable-type-context';
 import { restoreVariable, useVariable } from '../hooks/use-prop-variables';
+import { useVariableBoundProp } from '../hooks/use-variable-bound-prop';
 import { ERROR_MESSAGES, labelHint, mapServerError } from '../utils/validations';
 import { LabelField, useLabelError } from './fields/label-field';
 import { FormField } from './ui/form-field';
@@ -22,9 +23,9 @@ type Props = {
 };
 
 export const VariableRestore = ( { variableId, onClose, onSubmit }: Props ) => {
-	const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+	const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
 
-	const { setValue: notifyBoundPropChange } = useBoundProp( propTypeUtil );
+	const { setVariableValue: notifyBoundPropChange } = useVariableBoundProp();
 	const { propType } = useBoundProp();
 
 	const variable = useVariable( variableId );

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-error-navigation.ts

@@ -0,0 +1,49 @@
+import { useCallback, useRef } from 'react';
+
+export interface UseErrorNavigationReturn {
+	createNavigationCallback: (
+		ids: string[],
+		onNavigate: ( id: string ) => void,
+		onComplete: () => void
+	) => () => void;
+	resetNavigation: () => void;
+}
+
+export const useErrorNavigation = (): UseErrorNavigationReturn => {
+	const currentIndexRef = useRef( 0 );
+
+	const createNavigationCallback = useCallback(
+		( ids: string[], onNavigate: ( id: string ) => void, onComplete: () => void ) => {
+			return () => {
+				if ( ! ids?.length ) {
+					return;
+				}
+
+				const currentIndex = currentIndexRef.current;
+				const currentId = ids[ currentIndex ];
+
+				if ( currentId ) {
+					onNavigate( currentId );
+
+					const nextIndex = currentIndex + 1;
+					if ( nextIndex >= ids.length ) {
+						onComplete();
+						currentIndexRef.current = 0;
+					} else {
+						currentIndexRef.current = nextIndex;
+					}
+				}
+			};
+		},
+		[]
+	);
+
+	const resetNavigation = useCallback( () => {
+		currentIndexRef.current = 0;
+	}, [] );
+
+	return {
+		createNavigationCallback,
+		resetNavigation,
+	};
+};

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

@@ -0,0 +1,89 @@
+import { useCallback, useState } from 'react';
+
+import { generateTempId } from '../../../batch-operations';
+import { getVariables } from '../../../hooks/use-prop-variables';
+import { service } from '../../../service';
+import { type TVariablesList } from '../../../storage';
+import { filterBySearch } from '../../../utils/filter-by-search';
+
+export const useVariablesManagerState = () => {
+	const [ variables, setVariables ] = useState( () => getVariables( false ) );
+	const [ deletedVariables, setDeletedVariables ] = useState< string[] >( [] );
+	const [ isSaveDisabled, setIsSaveDisabled ] = useState( false );
+	const [ isDirty, setIsDirty ] = useState( false );
+	const [ isSaving, setIsSaving ] = useState( false );
+	const [ searchValue, setSearchValue ] = useState( '' );
+
+	const handleOnChange = useCallback(
+		( newVariables: TVariablesList ) => {
+			setVariables( { ...variables, ...newVariables } );
+			setIsDirty( true );
+		},
+		[ variables ]
+	);
+
+	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 } ) );
+		setIsDirty( true );
+
+		return newId;
+	}, [] );
+
+	const handleDeleteVariable = useCallback( ( itemId: string ) => {
+		setDeletedVariables( ( prev ) => [ ...prev, itemId ] );
+		setVariables( ( prev ) => ( { ...prev, [ itemId ]: { ...prev[ itemId ], deleted: true } } ) );
+		setIsDirty( true );
+	}, [] );
+
+	const handleSearch = ( searchTerm: string ) => {
+		setSearchValue( searchTerm );
+	};
+
+	const handleSave = useCallback( async (): Promise< { success: boolean } > => {
+		const originalVariables = getVariables( false );
+		setIsSaving( true );
+		const result = await service.batchSave( originalVariables, variables );
+
+		if ( result.success ) {
+			await service.load();
+			const updatedVariables = service.variables();
+
+			setVariables( updatedVariables );
+			setDeletedVariables( [] );
+			setIsDirty( false );
+		}
+
+		return { success: result.success };
+	}, [ variables ] );
+
+	const filteredVariables = () => {
+		const list = Object.entries( variables ).map( ( [ id, value ] ) => ( { ...value, id } ) );
+		const filtered = filterBySearch( list, searchValue );
+
+		return Object.fromEntries( filtered.map( ( { id, ...rest } ) => [ id, rest ] ) );
+	};
+
+	return {
+		variables: filteredVariables(),
+		deletedVariables,
+		isDirty,
+		isSaveDisabled,
+		handleOnChange,
+		createVariable,
+		handleDeleteVariable,
+		handleSave,
+		isSaving,
+		handleSearch,
+		searchValue,
+		setIsSaving,
+		setIsSaveDisabled,
+	};
+};

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

@@ -1,85 +1,149 @@
 import * as React from 'react';
-import { 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';
 
-export const VariableEditableCell = ( {
-	initialValue,
-	children,
-	editableElement,
-	onChange,
-	prefixElement,
-}: {
+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;
-} ) => {
-	const [ value, setValue ] = useState( initialValue );
-	const [ isEditing, setIsEditing ] = useState( false );
-
-	const handleDoubleClick = () => {
-		setIsEditing( true );
-	};
-
-	const handleSave = () => {
-		onChange( value );
-		setIsEditing( false );
-	};
-
-	const handleKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {
-		if ( event.key === 'Enter' ) {
-			handleSave();
-		} else if ( event.key === 'Escape' ) {
+	autoEdit?: boolean;
+	onRowRef?: ( ref: HTMLTableRowElement | null ) => void;
+	onAutoEditComplete?: () => void;
+	gap?: number;
+	fieldType?: 'label' | 'value';
+};
+
+export const VariableEditableCell = React.memo(
+	( {
+		initialValue,
+		children,
+		editableElement,
+		onChange,
+		prefixElement,
+		autoEdit = false,
+		onRowRef,
+		onAutoEditComplete,
+		gap = 1,
+		fieldType,
+	}: VariableEditableCellProps ) => {
+		const [ value, setValue ] = useState( initialValue );
+		const [ isEditing, setIsEditing ] = useState( false );
+
+		const { labelFieldError, setLabelFieldError } = useLabelError();
+		const [ valueFieldError, setValueFieldError ] = useState( '' );
+
+		const rowRef = useRef< HTMLTableRowElement >( null );
+
+		const handleSave = useCallback( () => {
+			const hasError =
+				( fieldType === 'label' && labelFieldError?.message ) || ( fieldType === 'value' && valueFieldError );
+
+			if ( ! hasError ) {
+				onChange( value );
+			}
 			setIsEditing( false );
-		}
-		if ( event.key === ' ' && ! isEditing ) {
-			event.preventDefault();
+		}, [ value, onChange, fieldType, labelFieldError, valueFieldError ] );
+
+		useEffect( () => {
+			onRowRef?.( rowRef?.current );
+		}, [ onRowRef ] );
+
+		useEffect( () => {
+			if ( autoEdit && ! isEditing ) {
+				setIsEditing( true );
+				onAutoEditComplete?.();
+			}
+		}, [ autoEdit, isEditing, onAutoEditComplete ] );
+
+		const handleDoubleClick = () => {
 			setIsEditing( true );
+		};
+
+		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 handleChange = useCallback( ( newValue: string ) => {
+			setValue( newValue );
+		}, [] );
+
+		const handleValidationChange = useCallback(
+			( errorMsg: string ) => {
+				if ( fieldType === 'label' ) {
+					setLabelFieldError( {
+						value,
+						message: errorMsg,
+					} );
+				} else {
+					setValueFieldError( errorMsg );
+				}
+			},
+			[ fieldType, value, setLabelFieldError, setValueFieldError ]
+		);
+
+		let currentError;
+		if ( fieldType === 'label' ) {
+			currentError = labelFieldError;
+		} else if ( fieldType === 'value' ) {
+			currentError = { value, message: valueFieldError };
 		}
-	};
 
-	const handleChange = ( newValue: string ) => {
-		setValue( newValue );
-	};
+		const editableContent = editableElement( {
+			value,
+			onChange: handleChange,
+			onValidationChange: handleValidationChange,
+			error: currentError,
+		} );
 
-	const editableContent = editableElement( { value, onChange: handleChange } );
+		if ( isEditing ) {
+			return (
+				<ClickAwayListener onClickAway={ handleSave }>
+					<Stack
+						ref={ rowRef }
+						direction="row"
+						alignItems="center"
+						gap={ gap }
+						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
-					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={ gap }
+				onDoubleClick={ handleDoubleClick }
+				onKeyDown={ handleKeyDown }
+				tabIndex={ 0 }
+				role="button"
+				aria-label="Double click or press Space to edit"
+			>
+				{ prefixElement }
+				{ children }
+			</Stack>
 		);
 	}
-
-	return (
-		<Stack
-			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-create-menu.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { createElement, useRef } from 'react';
+import { PlusIcon } from '@elementor/icons';
+import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, type PopupState, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type TVariablesList } from '../../storage';
+import { trackVariablesManagerEvent } from '../../utils/tracking';
+import { getVariableTypes } from '../../variables-registry/variable-type-registry';
+
+export const SIZE = 'tiny';
+
+type VariableManagerCreateMenuProps = {
+	variables: TVariablesList;
+	onCreate: ( type: string, defaultName: string, defaultValue: string ) => void;
+	disabled?: boolean;
+	menuState: PopupState;
+};
+
+export const VariableManagerCreateMenu = ( {
+	variables,
+	onCreate,
+	disabled,
+	menuState,
+}: VariableManagerCreateMenuProps ) => {
+	const buttonRef = useRef< HTMLButtonElement >( null );
+
+	const variableTypes = getVariableTypes();
+
+	const menuOptions = Object.entries( variableTypes ).map( ( [ key, variable ] ) => {
+		const displayName = variable.variableType.charAt( 0 ).toUpperCase() + variable.variableType.slice( 1 );
+
+		return {
+			key,
+			name: displayName,
+			icon: variable.icon,
+			onClick: () => {
+				const defaultName = getDefaultName( variables, key, variable.variableType );
+				onCreate( key, defaultName, variable.defaultValue || '' );
+				trackVariablesManagerEvent( { action: 'add', varType: variable.variableType } );
+			},
+		};
+	} );
+
+	return (
+		<>
+			<IconButton
+				{ ...bindTrigger( menuState ) }
+				ref={ buttonRef }
+				disabled={ disabled }
+				size={ SIZE }
+				aria-label={ __( 'Add variable', 'elementor' ) }
+			>
+				<PlusIcon fontSize={ SIZE } />
+			</IconButton>
+
+			<Menu
+				disablePortal
+				MenuListProps={ {
+					dense: true,
+				} }
+				PaperProps={ {
+					elevation: 6,
+				} }
+				{ ...bindMenu( menuState ) }
+				anchorEl={ buttonRef.current }
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				data-testid="variable-manager-create-menu"
+			>
+				{ menuOptions.map( ( option ) => (
+					<MenuItem
+						key={ option.key }
+						onClick={ () => {
+							option.onClick?.();
+							menuState.close();
+						} }
+						sx={ {
+							gap: 1.5,
+						} }
+					>
+						{ createElement( option.icon, {
+							fontSize: SIZE,
+							color: 'action',
+						} ) }
+						<Typography variant="caption" color="text.primary">
+							{ option.name }
+						</Typography>
+					</MenuItem>
+				) ) }
+			</Menu>
+		</>
+	);
+};
+
+const getDefaultName = ( variables: TVariablesList, type: string, baseName: string ) => {
+	const existingNames = Object.values( variables )
+		.filter( ( variable ) => variable.type === type )
+		.map( ( variable ) => variable.label );
+
+	let counter = 1;
+	let name = `${ baseName }-${ counter }`;
+
+	while ( existingNames.includes( name ) ) {
+		counter++;
+		name = `${ baseName }-${ counter }`;
+	}
+
+	return name;
+};