@elementor/editor-variables 0.18.0 → 3.32.0-21

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

@@ -1,76 +1,128 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useId, useRef, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { type PropTypeUtil } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
-import { Backdrop, Infotip } from '@elementor/ui';
+import { type PropTypeKey } from '@elementor/editor-props';
+import { Backdrop, bindPopover, Box, Infotip, Popover, usePopupState } from '@elementor/ui';
 
+import { VariableTypeProvider } from '../../../context/variable-type-context';
+import { usePermissions } from '../../../hooks/use-permissions';
 import { restoreVariable } from '../../../hooks/use-prop-variables';
 import { type Variable } from '../../../types';
+import { getVariableType } from '../../../variables-registry/variable-type-registry';
+import { VariableRestore } from '../../variable-restore';
 import { DeletedVariableAlert } from '../deleted-variable-alert';
 import { DeletedTag } from '../tags/deleted-tag';
 
-const isV331Active = isExperimentActive( 'e_v_3_31' );
-
 type Props = {
 	variable: Variable;
-	variablePropTypeUtil: PropTypeUtil< string, string >;
-	fallbackPropTypeUtil: PropTypeUtil< string, string | null > | PropTypeUtil< string, string >;
+	propTypeKey: PropTypeKey;
+};
+
+type Handlers = {
+	onUnlink?: () => void;
+	onRestore?: () => void;
 };
 
-export const DeletedVariable = ( { variable, variablePropTypeUtil, fallbackPropTypeUtil }: Props ) => {
+export const DeletedVariable = ( { variable, propTypeKey }: Props ) => {
+	const { fallbackPropTypeUtil, propTypeUtil } = getVariableType( propTypeKey );
+
 	const { setValue } = useBoundProp();
-	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
 
-	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
+	const userPermissions = usePermissions();
 
+	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
+	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
 	const closeInfotip = () => setShowInfotip( false );
 
-	const unlinkVariable = () => {
-		setValue( fallbackPropTypeUtil.create( variable.value ) );
-	};
+	const deletedChipAnchorRef = useRef< HTMLDivElement >( null );
+
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-variables-restore-${ popupId }`,
+	} );
+
+	const handlers: Handlers = {};
 
-	const handleRestore = () => {
-		if ( ! variable.key ) {
-			return;
-		}
+	if ( userPermissions.canUnlink() ) {
+		handlers.onUnlink = () => {
+			setValue( fallbackPropTypeUtil.create( variable.value ) );
+		};
+	}
 
-		restoreVariable( variable.key ).then( ( key ) => {
-			setValue( variablePropTypeUtil.create( key ) );
-			closeInfotip();
-		} );
+	if ( userPermissions.canRestore() ) {
+		handlers.onRestore = () => {
+			if ( ! variable.key ) {
+				return;
+			}
+
+			restoreVariable( variable.key )
+				.then( ( key ) => {
+					setValue( propTypeUtil.create( key ) );
+					closeInfotip();
+				} )
+				.catch( () => {
+					closeInfotip();
+					popupState.setAnchorEl( deletedChipAnchorRef.current );
+					popupState.open();
+				} );
+		};
+	}
+
+	const handleRestoreWithOverrides = () => {
+		popupState.close();
 	};
 
 	return (
 		<>
-			{ showInfotip && <Backdrop open onClick={ closeInfotip } invisible /> }
-			<Infotip
-				color="warning"
-				placement="right-start"
-				open={ showInfotip }
-				disableHoverListener
-				onClose={ closeInfotip }
-				content={
-					<DeletedVariableAlert
-						onClose={ closeInfotip }
-						onUnlink={ unlinkVariable }
-						onRestore={ isV331Active ? handleRestore : undefined }
-						label={ variable.label }
-					/>
-				}
-				slotProps={ {
-					popper: {
-						modifiers: [
-							{
-								name: 'offset',
-								options: { offset: [ 0, 24 ] },
-							},
-						],
-					},
-				} }
-			>
-				<DeletedTag label={ variable.label } onClick={ toggleInfotip } />
-			</Infotip>
+			<Box ref={ deletedChipAnchorRef }>
+				{ showInfotip && <Backdrop open onClick={ closeInfotip } invisible /> }
+				<Infotip
+					color="warning"
+					placement="right-start"
+					open={ showInfotip }
+					disableHoverListener
+					onClose={ closeInfotip }
+					content={
+						<DeletedVariableAlert
+							onClose={ closeInfotip }
+							onUnlink={ handlers.onUnlink }
+							onRestore={ handlers.onRestore }
+							label={ variable.label }
+						/>
+					}
+					slotProps={ {
+						popper: {
+							modifiers: [
+								{
+									name: 'offset',
+									options: { offset: [ 0, 24 ] },
+								},
+							],
+						},
+					} }
+				>
+					<DeletedTag label={ variable.label } onClick={ toggleInfotip } />
+				</Infotip>
+
+				<Popover
+					disableScrollLock
+					anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+					transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+					PaperProps={ {
+						sx: { my: 1 },
+					} }
+					{ ...bindPopover( popupState ) }
+				>
+					<VariableTypeProvider propTypeKey={ propTypeKey }>
+						<VariableRestore
+							variableId={ variable.key ?? '' }
+							onClose={ popupState.close }
+							onSubmit={ handleRestoreWithOverrides }
+						/>
+					</VariableTypeProvider>
+				</Popover>
+			</Box>
 		</>
 	);
 };

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { Backdrop, Infotip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { MissingVariableAlert } from '../missing-variable-alert';
+import { MissingTag } from '../tags/missing-tag';
+
+export const MissingVariable = () => {
+	const { setValue } = useBoundProp();
+
+	const [ infotipVisible, setInfotipVisible ] = useState< boolean >( false );
+	const toggleInfotip = () => setInfotipVisible( ( prev ) => ! prev );
+	const closeInfotip = () => setInfotipVisible( false );
+
+	const clearValue = () => setValue( null );
+
+	return (
+		<>
+			{ infotipVisible && <Backdrop open onClick={ closeInfotip } invisible /> }
+			<Infotip
+				color="warning"
+				placement="right-start"
+				open={ infotipVisible }
+				disableHoverListener
+				onClose={ closeInfotip }
+				content={ <MissingVariableAlert onClose={ closeInfotip } onClear={ clearValue } /> }
+				slotProps={ {
+					popper: {
+						modifiers: [
+							{
+								name: 'offset',
+								options: { offset: [ 0, 24 ] },
+							},
+						],
+					},
+				} }
+			>
+				<MissingTag label={ __( 'Missing variable', 'elementor' ) } onClick={ toggleInfotip } />
+			</Infotip>
+		</>
+	);
+};

package/src/components/{color-variable-creation.tsx → variable-creation.tsx}

@@ -3,14 +3,16 @@ import { useState } from 'react';
 import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
 import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, BrushIcon } from '@elementor/icons';
+import { ArrowLeftIcon } from '@elementor/icons';
 import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
 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 { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
-import { ColorField } from './fields/color-field';
-import { LabelField } from './fields/label-field';
+import { trackVariableEvent } from '../utils/tracking';
+import { ERROR_MESSAGES, mapServerError } from '../utils/validations';
+import { LabelField, useLabelError } from './fields/label-field';
 
 const SIZE = 'tiny';
 
@@ -19,15 +21,21 @@ type Props = {
 	onClose: () => void;
 };
 
-export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
-	const { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
+export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
+	const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
 
-	const [ color, setColor ] = useState( '' );
+	const { setValue: setVariable, path } = useBoundProp( propTypeUtil );
+
+	const initialValue = useInitialValue();
+
+	const [ value, setValue ] = useState( initialValue );
 	const [ label, setLabel ] = useState( '' );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
 
+	const { labelFieldError, setLabelFieldError } = useLabelError();
+
 	const resetFields = () => {
-		setColor( '' );
+		setValue( '' );
 		setLabel( '' );
 		setErrorMessage( '' );
 	};
@@ -37,26 +45,46 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 		onClose();
 	};
 
-	const handleCreate = () => {
+	const handleCreateAndTrack = () => {
 		createVariable( {
-			value: color,
+			value,
 			label,
-			type: colorVariablePropTypeUtil.key,
+			type: propTypeUtil.key,
 		} )
 			.then( ( key ) => {
 				setVariable( key );
 				closePopover();
 			} )
 			.catch( ( error ) => {
-				setErrorMessage( error.message );
+				const mappedError = mapServerError( error );
+				if ( mappedError && 'label' === mappedError.field ) {
+					setLabel( '' );
+					setLabelFieldError( {
+						value: label,
+						message: mappedError.message,
+					} );
+					return;
+				}
+
+				setErrorMessage( ERROR_MESSAGES.UNEXPECTED_ERROR );
 			} );
+
+		trackVariableEvent( {
+			varType: variableType,
+			controlPath: path.join( '.' ),
+			action: 'save',
+		} );
 	};
 
 	const hasEmptyValue = () => {
-		return '' === color.trim() || '' === label.trim();
+		return '' === value.trim() || '' === label.trim();
+	};
+
+	const hasErrors = () => {
+		return !! errorMessage;
 	};
 
-	const isSubmitDisabled = hasEmptyValue();
+	const isSubmitDisabled = hasEmptyValue() || hasErrors();
 
 	return (
 		<PopoverBody height="auto">
@@ -68,7 +96,7 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 								<ArrowLeftIcon fontSize={ SIZE } />
 							</IconButton>
 						) }
-						<BrushIcon fontSize={ SIZE } />
+						<VariableIcon fontSize={ SIZE } />
 					</>
 				}
 				title={ __( 'Create variable', 'elementor' ) }
@@ -80,15 +108,16 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 			<PopoverContent p={ 2 }>
 				<LabelField
 					value={ label }
-					onChange={ ( value ) => {
-						setLabel( value );
+					error={ labelFieldError }
+					onChange={ ( newValue ) => {
+						setLabel( newValue );
 						setErrorMessage( '' );
 					} }
 				/>
-				<ColorField
-					value={ color }
-					onChange={ ( value ) => {
-						setColor( value );
+				<ValueField
+					value={ value }
+					onChange={ ( newValue ) => {
+						setValue( newValue );
 						setErrorMessage( '' );
 					} }
 				/>
@@ -97,7 +126,7 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 			</PopoverContent>
 
 			<CardActions sx={ { pt: 0.5, pb: 1 } }>
-				<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleCreate }>
+				<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleCreateAndTrack }>
 					{ __( 'Create', 'elementor' ) }
 				</Button>
 			</CardActions>

package/src/components/variable-edit.tsx

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
+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 } 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 { styleVariablesRepository } from '../style-variables-repository';
+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';
+
+const SIZE = 'tiny';
+
+type Props = {
+	editId: string;
+	onClose: () => void;
+	onGoBack?: () => void;
+	onSubmit?: () => void;
+};
+
+export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
+	const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+
+	const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp( propTypeUtil );
+	const [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( EDIT_CONFIRMATION_DIALOG_ID );
+	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
+	const [ editConfirmation, setEditConfirmation ] = useState( false );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
+
+	const { labelFieldError, setLabelFieldError } = useLabelError();
+	const variable = useVariable( editId );
+
+	if ( ! variable ) {
+		throw new Error( `Global ${ variableType } variable not found` );
+	}
+
+	const userPermissions = usePermissions();
+
+	const [ value, setValue ] = useState( variable.value );
+	const [ label, setLabel ] = useState( variable.label );
+
+	useEffect( () => {
+		styleVariablesRepository.update( {
+			[ editId ]: {
+				...variable,
+				value,
+			},
+		} );
+
+		return () => {
+			styleVariablesRepository.update( {
+				[ editId ]: { ...variable },
+			} );
+		};
+	}, [ editId, value, variable ] );
+
+	const handleUpdate = () => {
+		if ( isMessageSuppressed ) {
+			handleSaveVariable();
+		} else {
+			setEditConfirmation( true );
+		}
+	};
+
+	const handleSaveVariable = () => {
+		updateVariable( editId, {
+			value,
+			label,
+		} )
+			.then( () => {
+				maybeTriggerBoundPropChange();
+				onSubmit?.();
+			} )
+			.catch( ( error ) => {
+				const mappedError = mapServerError( error );
+				if ( mappedError && 'label' === mappedError.field ) {
+					setLabel( '' );
+					setLabelFieldError( {
+						value: label,
+						message: mappedError.message,
+					} );
+					return;
+				}
+
+				setErrorMessage( ERROR_MESSAGES.UNEXPECTED_ERROR );
+			} );
+	};
+
+	const handleDelete = () => {
+		deleteVariable( editId ).then( () => {
+			maybeTriggerBoundPropChange();
+			onSubmit?.();
+		} );
+	};
+
+	const maybeTriggerBoundPropChange = () => {
+		if ( editId === assignedValue ) {
+			notifyBoundPropChange( editId );
+		}
+	};
+
+	const handleDeleteConfirmation = () => {
+		setDeleteConfirmation( true );
+	};
+
+	const closeDeleteDialog = () => () => {
+		setDeleteConfirmation( false );
+	};
+
+	const closeEditDialog = () => () => {
+		setEditConfirmation( false );
+	};
+
+	const actions = [];
+
+	if ( userPermissions.canDelete() ) {
+		actions.push(
+			<IconButton
+				key="delete"
+				size={ SIZE }
+				aria-label={ __( 'Delete', 'elementor' ) }
+				onClick={ handleDeleteConfirmation }
+			>
+				<TrashIcon fontSize={ SIZE } />
+			</IconButton>
+		);
+	}
+
+	const hasEmptyValues = () => {
+		return ! value.trim() || ! label.trim();
+	};
+
+	const noValueChanged = () => {
+		return value === variable.value && label === variable.label;
+	};
+
+	const hasErrors = () => {
+		return !! errorMessage;
+	};
+
+	const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
+
+	return (
+		<>
+			<PopoverBody height="auto">
+				<PopoverHeader
+					title={ __( 'Edit variable', 'elementor' ) }
+					onClose={ onClose }
+					icon={
+						<>
+							{ onGoBack && (
+								<IconButton
+									size={ SIZE }
+									aria-label={ __( 'Go Back', 'elementor' ) }
+									onClick={ onGoBack }
+								>
+									<ArrowLeftIcon fontSize={ SIZE } />
+								</IconButton>
+							) }
+							<VariableIcon fontSize={ SIZE } />
+						</>
+					}
+					actions={ actions }
+				/>
+
+				<Divider />
+
+				<PopoverContent p={ 2 }>
+					<LabelField
+						value={ label }
+						error={ labelFieldError }
+						onChange={ ( newValue ) => {
+							setLabel( newValue );
+							setErrorMessage( '' );
+						} }
+					/>
+					<ValueField
+						value={ value }
+						onChange={ ( newValue ) => {
+							setValue( newValue );
+							setErrorMessage( '' );
+						} }
+					/>
+
+					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
+				</PopoverContent>
+
+				<CardActions sx={ { pt: 0.5, pb: 1 } }>
+					<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleUpdate }>
+						{ __( 'Save', 'elementor' ) }
+					</Button>
+				</CardActions>
+			</PopoverBody>
+
+			{ deleteConfirmation && (
+				<DeleteConfirmationDialog
+					open
+					label={ label }
+					onConfirm={ handleDelete }
+					closeDialog={ closeDeleteDialog() }
+				/>
+			) }
+
+			{ editConfirmation && ! isMessageSuppressed && (
+				<EditConfirmationDialog
+					closeDialog={ closeEditDialog() }
+					onConfirm={ handleSaveVariable }
+					onSuppressMessage={ suppressMessage }
+				/>
+			) }
+		</>
+	);
+};