@elementor/editor-variables 0.15.0 → 0.18.0

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useId, useState } from 'react';
+import { FormHelperText, FormLabel, Grid, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { labelHint, validateLabel, VARIABLE_LABEL_MAX_LENGTH } from '../../utils/validations';
+
+type LabelFieldProps = {
+	value: string;
+	onChange: ( value: string ) => void;
+};
+
+export const LabelField = ( { value, onChange }: LabelFieldProps ) => {
+	const [ label, setLabel ] = useState( value );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
+	const [ noticeMessage, setNoticeMessage ] = useState( () => labelHint( value ) );
+
+	const handleChange = ( newValue: string ) => {
+		setLabel( newValue );
+
+		const errorMsg = validateLabel( newValue );
+		const hintMsg = labelHint( newValue );
+
+		setErrorMessage( errorMsg );
+		setNoticeMessage( errorMsg ? '' : hintMsg );
+
+		onChange( errorMsg ? '' : newValue );
+	};
+
+	const id = useId();
+
+	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={ !! errorMessage }
+					onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => handleChange( e.target.value ) }
+					inputProps={ { maxLength: VARIABLE_LABEL_MAX_LENGTH } }
+				/>
+				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
+				{ noticeMessage && <FormHelperText>{ noticeMessage }</FormHelperText> }
+			</Grid>
+		</Grid>
+	);
+};

package/src/components/font-variable-creation.tsx

@@ -1,27 +1,16 @@
 import * as React from 'react';
-import { useRef, useState } from 'react';
-import { FontFamilySelector, PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent, useFontFamilies, useSectionWidth } from '@elementor/editor-editing-panel';
+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, ChevronDownIcon, TextIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	Button,
-	CardActions,
-	Divider,
-	FormLabel,
-	Grid,
-	IconButton,
-	Popover,
-	TextField,
-	UnstableTag,
-	usePopupState,
-} from '@elementor/ui';
+import { ArrowLeftIcon, TextIcon } from '@elementor/icons';
+import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { createVariable } from '../hooks/use-prop-variables';
 import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
+import { FontField } from './fields/font-field';
+import { LabelField } from './fields/label-field';
 
 const SIZE = 'tiny';
 
@@ -31,18 +20,16 @@ type Props = {
 };
 
 export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
-	const fontFamilies = useFontFamilies();
 	const { setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );
 
 	const [ fontFamily, setFontFamily ] = useState( '' );
 	const [ label, setLabel ] = useState( '' );
-
-	const anchorRef = useRef< HTMLDivElement >( null );
-	const fontPopoverState = usePopupState( { variant: 'popover' } );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
 
 	const resetFields = () => {
 		setFontFamily( '' );
 		setLabel( '' );
+		setErrorMessage( '' );
 	};
 
 	const closePopover = () => {
@@ -55,20 +42,24 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 			value: fontFamily,
 			label,
 			type: fontVariablePropTypeUtil.key,
-		} ).then( ( key ) => {
-			setVariable( key );
-			closePopover();
-		} );
+		} )
+			.then( ( key ) => {
+				setVariable( key );
+				closePopover();
+			} )
+			.catch( ( error ) => {
+				setErrorMessage( error.message );
+			} );
 	};
 
-	const isFormInvalid = () => {
-		return ! fontFamily?.trim() || ! label?.trim();
+	const hasEmptyValue = () => {
+		return '' === fontFamily.trim() || '' === label.trim();
 	};
 
-	const sectionWidth = useSectionWidth();
+	const isSubmitDisabled = hasEmptyValue();
 
 	return (
-		<PopoverScrollableContent height="auto">
+		<PopoverBody height="auto">
 			<PopoverHeader
 				icon={
 					<>
@@ -87,59 +78,29 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 			<Divider />
 
 			<PopoverContent p={ 2 }>
-				<Grid container gap={ 0.75 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<FormLabel size="tiny">{ __( 'Name', 'elementor' ) }</FormLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<TextField
-							size="tiny"
-							fullWidth
-							value={ label }
-							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }
-						/>
-					</Grid>
-				</Grid>
-
-				<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
-							/>
-							<Popover
-								disablePortal
-								disableScrollLock
-								anchorEl={ anchorRef.current }
-								anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
-								transformOrigin={ { vertical: 'top', horizontal: -20 } }
-								{ ...bindPopover( fontPopoverState ) }
-							>
-								<FontFamilySelector
-									fontFamilies={ fontFamilies }
-									fontFamily={ fontFamily }
-									onFontFamilyChange={ setFontFamily }
-									onClose={ fontPopoverState.close }
-									sectionWidth={ sectionWidth }
-								/>
-							</Popover>
-						</>
-					</Grid>
-				</Grid>
+				<LabelField
+					value={ label }
+					onChange={ ( value ) => {
+						setLabel( value );
+						setErrorMessage( '' );
+					} }
+				/>
+				<FontField
+					value={ fontFamily }
+					onChange={ ( value ) => {
+						setFontFamily( value );
+						setErrorMessage( '' );
+					} }
+				/>
+
+				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 			</PopoverContent>
 
 			<CardActions sx={ { pt: 0.5, pb: 1 } }>
-				<Button size="small" variant="contained" disabled={ isFormInvalid() } onClick={ handleCreate }>
+				<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleCreate }>
 					{ __( 'Create', 'elementor' ) }
 				</Button>
 			</CardActions>
-		</PopoverScrollableContent>
+		</PopoverBody>
 	);
 };

package/src/components/font-variable-edit.tsx

@@ -1,26 +1,17 @@
 import * as React from 'react';
-import { useId, useRef, useState } from 'react';
-import { FontFamilySelector, PopoverContent } from '@elementor/editor-controls';
-import { useFontFamilies, useSectionWidth } from '@elementor/editor-editing-panel';
-import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
-import { ArrowLeftIcon, ChevronDownIcon, TextIcon, TrashIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	Button,
-	CardActions,
-	Divider,
-	FormLabel,
-	Grid,
-	IconButton,
-	Popover,
-	TextField,
-	UnstableTag,
-	usePopupState,
-} from '@elementor/ui';
+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, TextIcon, TrashIcon } from '@elementor/icons';
+import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
+import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
+import { FontField } from './fields/font-field';
+import { LabelField } from './fields/label-field';
+import { DeleteConfirmationDialog } from './ui/delete-confirmation-dialog';
 
 const SIZE = 'tiny';
 
@@ -32,8 +23,11 @@ type Props = {
 };
 
 export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
-	const variable = useVariable( editId );
+	const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp( fontVariablePropTypeUtil );
+	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
 
+	const variable = useVariable( editId );
 	if ( ! variable ) {
 		throw new Error( `Global font variable "${ editId }" not found` );
 	}
@@ -41,123 +35,123 @@ export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props
 	const [ fontFamily, setFontFamily ] = useState( variable.value );
 	const [ label, setLabel ] = useState( variable.label );
 
-	const variableNameId = useId();
-	const variableValueId = useId();
-
-	const anchorRef = useRef< HTMLDivElement >( null );
-	const fontPopoverState = usePopupState( { variant: 'popover' } );
-
-	const fontFamilies = useFontFamilies();
-
 	const handleUpdate = () => {
 		updateVariable( editId, {
 			value: fontFamily,
 			label,
-		} ).then( () => {
-			onSubmit?.();
-		} );
+		} )
+			.then( () => {
+				maybeTriggerBoundPropChange();
+				onSubmit?.();
+			} )
+			.catch( ( error ) => {
+				setErrorMessage( error.message );
+			} );
 	};
 
 	const handleDelete = () => {
 		deleteVariable( editId ).then( () => {
+			maybeTriggerBoundPropChange();
 			onSubmit?.();
 		} );
 	};
 
-	const noValueChanged = () => fontFamily === variable.value && label === variable.label;
-	const hasEmptyValue = () => '' === fontFamily.trim() || '' === label.trim();
-	const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
+	const maybeTriggerBoundPropChange = () => {
+		if ( editId === assignedValue ) {
+			notifyBoundPropChange( editId );
+		}
+	};
+
+	const handleDeleteConfirmation = () => {
+		setDeleteConfirmation( true );
+	};
+
+	const closeDeleteDialog = () => () => {
+		setDeleteConfirmation( false );
+	};
+
+	const hasEmptyValue = () => {
+		return ! fontFamily.trim() || ! label.trim();
+	};
+
+	const noValueChanged = () => {
+		return fontFamily === variable.value && label === variable.label;
+	};
 
-	const sectionWidth = useSectionWidth();
+	const isSubmitDisabled = noValueChanged() || hasEmptyValue();
 
 	const actions = [];
 
 	actions.push(
-		<IconButton key="delete" size={ SIZE } aria-label={ __( 'Delete', 'elementor' ) } onClick={ handleDelete }>
+		<IconButton
+			key="delete"
+			size={ SIZE }
+			aria-label={ __( 'Delete', 'elementor' ) }
+			onClick={ handleDeleteConfirmation }
+		>
 			<TrashIcon fontSize={ SIZE } />
 		</IconButton>
 	);
 
 	return (
-		<PopoverScrollableContent height="auto">
-			<PopoverHeader
-				icon={
-					<>
-						{ onGoBack && (
-							<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>
-								<ArrowLeftIcon fontSize={ SIZE } />
-							</IconButton>
-						) }
-						<TextIcon fontSize={ SIZE } />
-					</>
-				}
-				title={ __( 'Edit variable', 'elementor' ) }
-				onClose={ onClose }
-				actions={ actions }
-			/>
-
-			<Divider />
-
-			<PopoverContent p={ 2 }>
-				<Grid container gap={ 0.75 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<FormLabel htmlFor={ variableNameId } size="tiny">
-							{ __( 'Name', 'elementor' ) }
-						</FormLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<TextField
-							id={ variableNameId }
-							size="tiny"
-							fullWidth
-							value={ label }
-							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }
-						/>
-					</Grid>
-				</Grid>
-
-				<Grid container gap={ 0.75 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<FormLabel htmlFor={ variableValueId } size="tiny">
-							{ __( 'Value', 'elementor' ) }
-						</FormLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
+		<>
+			<PopoverBody height="auto">
+				<PopoverHeader
+					icon={
 						<>
-							<UnstableTag
-								id={ variableValueId }
-								variant="outlined"
-								label={ fontFamily }
-								endIcon={ <ChevronDownIcon fontSize="tiny" /> }
-								{ ...bindTrigger( fontPopoverState ) }
-								fullWidth
-							/>
-							<Popover
-								disablePortal
-								disableScrollLock
-								anchorEl={ anchorRef.current }
-								anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
-								transformOrigin={ { vertical: 'top', horizontal: -20 } }
-								{ ...bindPopover( fontPopoverState ) }
-							>
-								<FontFamilySelector
-									fontFamilies={ fontFamilies }
-									fontFamily={ fontFamily }
-									onFontFamilyChange={ setFontFamily }
-									onClose={ fontPopoverState.close }
-									sectionWidth={ sectionWidth }
-								/>
-							</Popover>
+							{ onGoBack && (
+								<IconButton
+									size={ SIZE }
+									aria-label={ __( 'Go Back', 'elementor' ) }
+									onClick={ onGoBack }
+								>
+									<ArrowLeftIcon fontSize={ SIZE } />
+								</IconButton>
+							) }
+							<TextIcon fontSize={ SIZE } />
 						</>
-					</Grid>
-				</Grid>
-			</PopoverContent>
-
-			<CardActions sx={ { pt: 0.5, pb: 1 } }>
-				<Button size="small" variant="contained" disabled={ isSaveDisabled() } onClick={ handleUpdate }>
-					{ __( 'Save', 'elementor' ) }
-				</Button>
-			</CardActions>
-		</PopoverScrollableContent>
+					}
+					title={ __( 'Edit variable', 'elementor' ) }
+					onClose={ onClose }
+					actions={ actions }
+				/>
+
+				<Divider />
+
+				<PopoverContent p={ 2 }>
+					<LabelField
+						value={ label }
+						onChange={ ( value ) => {
+							setLabel( value );
+							setErrorMessage( '' );
+						} }
+					/>
+					<FontField
+						value={ fontFamily }
+						onChange={ ( value ) => {
+							setFontFamily( value );
+							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() }
+				/>
+			) }
+		</>
 	);
 };

package/src/components/font-variables-selection.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
+import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
 import { ColorFilterIcon, PlusIcon, SettingsIcon, TextIcon } from '@elementor/icons';
 import { Divider, IconButton } from '@elementor/ui';
@@ -75,7 +75,7 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 	};
 
 	return (
-		<>
+		<PopoverBody>
 			<PopoverHeader
 				title={ __( 'Variables', 'elementor' ) }
 				onClose={ closePopover }
@@ -93,37 +93,35 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 
 			<Divider />
 
-			<PopoverScrollableContent>
-				{ hasVariables && hasSearchResults && (
-					<PopoverMenuList
-						items={ items }
-						onSelect={ handleSetVariable }
-						onClose={ () => {} }
-						selectedValue={ variable }
-						data-testid="font-variables-list"
-						menuListTemplate={ VariablesStyledMenuList }
-						menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
-							<MenuItemContent item={ item } />
-						) }
-					/>
-				) }
-
-				{ ! hasSearchResults && hasVariables && (
-					<NoSearchResults
-						searchValue={ searchValue }
-						onClear={ handleClearSearch }
-						icon={ <TextIcon fontSize="large" /> }
-					/>
-				) }
-
-				{ ! hasVariables && (
-					<NoVariables
-						title={ __( 'Create your first font variable', 'elementor' ) }
-						icon={ <TextIcon fontSize="large" /> }
-						onAdd={ onAdd }
-					/>
-				) }
-			</PopoverScrollableContent>
-		</>
+			{ hasVariables && hasSearchResults && (
+				<PopoverMenuList
+					items={ items }
+					onSelect={ handleSetVariable }
+					onClose={ () => {} }
+					selectedValue={ variable }
+					data-testid="font-variables-list"
+					menuListTemplate={ VariablesStyledMenuList }
+					menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
+						<MenuItemContent item={ item } />
+					) }
+				/>
+			) }
+
+			{ ! hasSearchResults && hasVariables && (
+				<NoSearchResults
+					searchValue={ searchValue }
+					onClear={ handleClearSearch }
+					icon={ <TextIcon fontSize="large" /> }
+				/>
+			) }
+
+			{ ! hasVariables && (
+				<NoVariables
+					title={ __( 'Create your first font variable', 'elementor' ) }
+					icon={ <TextIcon fontSize="large" /> }
+					onAdd={ onAdd }
+				/>
+			) }
+		</PopoverBody>
 	);
 };

package/src/components/ui/delete-confirmation-dialog.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { AlertOctagonFilledIcon } from '@elementor/icons';
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const TITLE_ID = 'delete-variable-dialog';
+
+export const DeleteConfirmationDialog = ( {
+	open,
+	label,
+	closeDialog,
+	onConfirm,
+}: {
+	open: boolean;
+	label: string;
+	closeDialog: () => void;
+	onConfirm: () => void;
+} ) => {
+	return (
+		<Dialog open={ open } onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth="xs">
+			<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
+				<AlertOctagonFilledIcon color="error" />
+				{ __( 'Delete this variable?', 'elementor' ) }
+			</DialogTitle>
+			<DialogContent>
+				<DialogContentText variant="body2" color="textPrimary">
+					{ __( 'All elements using', 'elementor' ) }
+					<Typography variant="subtitle2" component="span">
+						&nbsp;{ label }&nbsp;
+					</Typography>
+					{ __( 'will keep their current values, but the variable itself will be removed.', 'elementor' ) }
+				</DialogContentText>
+			</DialogContent>
+			<DialogActions>
+				<Button color="secondary" onClick={ closeDialog }>
+					{ __( 'Not now', 'elementor' ) }
+				</Button>
+				<Button variant="contained" color="error" onClick={ onConfirm }>
+					{ __( 'Delete', 'elementor' ) }
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useSectionWidth } from '@elementor/editor-editing-panel';
+import { Alert, AlertAction, AlertTitle, ClickAwayListener } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type DeletedVariableAlertProps = {
+	onClose: () => void;
+	onUnlink?: () => void;
+	onRestore?: () => void;
+	label: string;
+};
+
+export const DeletedVariableAlert = ( { onClose, onUnlink, onRestore, label }: DeletedVariableAlertProps ) => {
+	const sectionWidth = useSectionWidth();
+
+	return (
+		<ClickAwayListener onClickAway={ onClose }>
+			<Alert
+				variant="standard"
+				severity="warning"
+				onClose={ onClose }
+				action={
+					<>
+						{ onUnlink && (
+							<AlertAction variant="contained" onClick={ onUnlink }>
+								{ __( 'Unlink', 'elementor' ) }
+							</AlertAction>
+						) }
+						{ onRestore && (
+							<AlertAction variant="outlined" onClick={ onRestore }>
+								{ __( 'Restore', 'elementor' ) }
+							</AlertAction>
+						) }
+					</>
+				}
+				sx={ { width: sectionWidth } }
+			>
+				<AlertTitle>{ __( 'Deleted variable', 'elementor' ) }</AlertTitle>
+				{ __( 'The variable', 'elementor' ) } &apos;{ label }&apos;{ ' ' }
+				{ __(
+					'has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.',
+					'elementor'
+				) }
+			</Alert>
+		</ClickAwayListener>
+	);
+};