@elementor/editor-variables 0.16.0 → 3.32.0-20

package/src/components/ui/tags/missing-tag.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import { Chip, type ChipProps, type Theme } from '@elementor/ui';
+
+export const MissingTag = React.forwardRef< HTMLDivElement, ChipProps >( ( { label, onClick, ...props }, ref ) => {
+	return (
+		<Chip
+			ref={ ref }
+			size="tiny"
+			color="warning"
+			shape="rounded"
+			variant="standard"
+			onClick={ onClick }
+			icon={ <AlertTriangleFilledIcon /> }
+			label={ label }
+			sx={ {
+				height: ( theme: Theme ) => theme.spacing( 3.5 ),
+				borderRadius: ( theme: Theme ) => theme.spacing( 1 ),
+				justifyContent: 'flex-start',
+				width: '100%',
+			} }
+			{ ...props }
+		/>
+	);
+} );

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

@@ -1,27 +1,22 @@
 import { useId, useRef } from 'react';
 import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { type PropTypeUtil } from '@elementor/editor-props';
+import { type PropTypeKey } from '@elementor/editor-props';
 import { ColorFilterIcon } from '@elementor/icons';
 import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
 
 import { type Variable } from '../../../types';
+import { getVariableType } from '../../../variables-registry/variable-type-registry';
 import { VariableSelectionPopover } from '../../variable-selection-popover';
 import { AssignedTag, SIZE } from '../tags/assigned-tag';
 
 type Props = {
-	variablePropTypeUtil: PropTypeUtil< string, string >;
-	fallbackPropTypeUtil: PropTypeUtil< string, string | null > | PropTypeUtil< string, string >;
-	additionalStartIcon?: React.ReactNode;
+	propTypeKey: PropTypeKey;
 	variable: Variable;
 };
 
-export const AssignedVariable = ( {
-	variable,
-	variablePropTypeUtil,
-	fallbackPropTypeUtil,
-	additionalStartIcon,
-}: Props ) => {
+export const AssignedVariable = ( { variable, propTypeKey }: Props ) => {
+	const { fallbackPropTypeUtil, startIcon, propTypeUtil } = getVariableType( propTypeKey );
 	const { setValue } = useBoundProp();
 	const anchorRef = useRef< HTMLDivElement >( null );
 
@@ -32,9 +27,12 @@ export const AssignedVariable = ( {
 	} );
 
 	const unlinkVariable = () => {
-		setValue( fallbackPropTypeUtil.create( variable.value ) );
+		const fallbackValue = fallbackPropTypeUtil.create( variable.value );
+		setValue( fallbackValue );
 	};
 
+	const StartIcon = startIcon || ( () => null );
+
 	return (
 		<Box ref={ anchorRef }>
 			<AssignedTag
@@ -42,8 +40,7 @@ export const AssignedVariable = ( {
 				startIcon={
 					<>
 						<ColorFilterIcon fontSize={ SIZE } />
-
-						{ additionalStartIcon }
+						<StartIcon value={ variable.value } />
 					</>
 				}
 				onUnlink={ unlinkVariable }
@@ -62,7 +59,7 @@ export const AssignedVariable = ( {
 				<VariableSelectionPopover
 					selectedVariable={ variable }
 					closePopover={ popupState.close }
-					propTypeKey={ variablePropTypeUtil.key }
+					propTypeKey={ propTypeUtil.key }
 				/>
 			</Popover>
 		</Box>

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

@@ -1,20 +1,128 @@
 import * as React from 'react';
-import { useRef } from 'react';
-import { Box } from '@elementor/ui';
+import { useId, useRef, useState } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+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';
 
 type Props = {
 	variable: Variable;
+	propTypeKey: PropTypeKey;
 };
 
-export const DeletedVariable = ( { variable }: Props ) => {
-	const anchorRef = useRef< HTMLDivElement >( null );
+type Handlers = {
+	onUnlink?: () => void;
+	onRestore?: () => void;
+};
+
+export const DeletedVariable = ( { variable, propTypeKey }: Props ) => {
+	const { fallbackPropTypeUtil, propTypeUtil } = getVariableType( propTypeKey );
+
+	const { setValue } = useBoundProp();
+
+	const userPermissions = usePermissions();
+
+	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
+	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
+	const closeInfotip = () => setShowInfotip( false );
+
+	const deletedChipAnchorRef = useRef< HTMLDivElement >( null );
+
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-variables-restore-${ popupId }`,
+	} );
+
+	const handlers: Handlers = {};
+
+	if ( userPermissions.canUnlink() ) {
+		handlers.onUnlink = () => {
+			setValue( fallbackPropTypeUtil.create( variable.value ) );
+		};
+	}
+
+	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 (
-		<Box ref={ anchorRef }>
-			<DeletedTag label={ variable.label } />
-		</Box>
+		<>
+			<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/variable-creation.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+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 } 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 { trackVariableEvent } from '../utils/tracking';
+import { ERROR_MESSAGES, mapServerError } from '../utils/validations';
+import { LabelField, useLabelError } from './fields/label-field';
+
+const SIZE = 'tiny';
+
+type Props = {
+	onGoBack?: () => void;
+	onClose: () => void;
+};
+
+export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
+	const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+
+	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 = () => {
+		setValue( '' );
+		setLabel( '' );
+		setErrorMessage( '' );
+	};
+
+	const closePopover = () => {
+		resetFields();
+		onClose();
+	};
+
+	const handleCreateAndTrack = () => {
+		createVariable( {
+			value,
+			label,
+			type: propTypeUtil.key,
+		} )
+			.then( ( key ) => {
+				setVariable( key );
+				closePopover();
+			} )
+			.catch( ( error ) => {
+				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 '' === value.trim() || '' === label.trim();
+	};
+
+	const hasErrors = () => {
+		return !! errorMessage;
+	};
+
+	const isSubmitDisabled = hasEmptyValue() || hasErrors();
+
+	return (
+		<PopoverBody height="auto">
+			<PopoverHeader
+				icon={
+					<>
+						{ onGoBack && (
+							<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>
+								<ArrowLeftIcon fontSize={ SIZE } />
+							</IconButton>
+						) }
+						<VariableIcon fontSize={ SIZE } />
+					</>
+				}
+				title={ __( 'Create variable', 'elementor' ) }
+				onClose={ closePopover }
+			/>
+
+			<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={ handleCreateAndTrack }>
+					{ __( 'Create', 'elementor' ) }
+				</Button>
+			</CardActions>
+		</PopoverBody>
+	);
+};

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 }
+				/>
+			) }
+		</>
+	);
+};