@elementor/editor-variables 0.14.0 → 0.16.0

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

@@ -1,23 +1,16 @@
 import * as React from 'react';
-import { useRef, useState } from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
+import { useState } from 'react';
+import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
+import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { ArrowLeftIcon, BrushIcon } from '@elementor/icons';
-import {
-	Button,
-	CardActions,
-	Divider,
-	FormLabel,
-	Grid,
-	IconButton,
-	Stack,
-	TextField,
-	UnstableColorField,
-} from '@elementor/ui';
+import { Button, CardActions, Divider, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 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';
 
 const SIZE = 'tiny';
 
@@ -32,8 +25,6 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 	const [ color, setColor ] = useState( '' );
 	const [ label, setLabel ] = useState( '' );
 
-	const anchorRef = useRef< HTMLDivElement >( null );
-
 	const resetFields = () => {
 		setColor( '' );
 		setLabel( '' );
@@ -55,12 +46,14 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 		} );
 	};
 
-	const isFormInvalid = () => {
-		return ! color?.trim() || ! label?.trim();
+	const hasEmptyValue = () => {
+		return '' === color.trim() || '' === label.trim();
 	};
 
+	const isSubmitDisabled = hasEmptyValue();
+
 	return (
-		<>
+		<PopoverScrollableContent height="auto">
 			<PopoverHeader
 				icon={
 					<>
@@ -78,48 +71,16 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 
 			<Divider />
 
-			<Stack p={ 1.5 } gap={ 1.5 }>
-				<Grid container gap={ 0.75 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( '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="small">{ __( 'Value', 'elementor' ) }</FormLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<UnstableColorField
-							size="tiny"
-							fullWidth
-							value={ color }
-							onChange={ setColor }
-							slotProps={ {
-								colorPicker: {
-									anchorEl: anchorRef.current,
-									anchorOrigin: { vertical: 'top', horizontal: 'right' },
-									transformOrigin: { vertical: 'top', horizontal: -10 },
-								},
-							} }
-						/>
-					</Grid>
-				</Grid>
-			</Stack>
+			<PopoverContent p={ 2 }>
+				<LabelField value={ label } onChange={ setLabel } />
+				<ColorField value={ color } onChange={ setColor } />
+			</PopoverContent>
 
-			<CardActions>
-				<Button size="small" variant="contained" disabled={ isFormInvalid() } onClick={ handleCreate }>
+			<CardActions sx={ { pt: 0.5, pb: 1 } }>
+				<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleCreate }>
 					{ __( 'Create', 'elementor' ) }
 				</Button>
 			</CardActions>
-		</>
+		</PopoverScrollableContent>
 	);
 };

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

@@ -1,21 +1,17 @@
 import * as React from 'react';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
+import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
+import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, BrushIcon } from '@elementor/icons';
-import {
-	Button,
-	CardActions,
-	Divider,
-	FormLabel,
-	Grid,
-	IconButton,
-	Stack,
-	TextField,
-	UnstableColorField,
-} from '@elementor/ui';
+import { ArrowLeftIcon, BrushIcon, TrashIcon } from '@elementor/icons';
+import { Button, CardActions, Divider, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { updateVariable, useVariable } from '../hooks/use-prop-variables';
+import { deleteVariable, updateVariable, useVariable } 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 { DeleteConfirmationDialog } from './ui/delete-confirmation-dialog';
 
 const SIZE = 'tiny';
 
@@ -27,14 +23,14 @@ type Props = {
 };
 
 export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
-	const variable = useVariable( editId );
+	const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp( colorVariablePropTypeUtil );
+	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
 
+	const variable = useVariable( editId );
 	if ( ! variable ) {
 		throw new Error( `Global color variable not found` );
 	}
 
-	const anchorRef = useRef< HTMLDivElement >( null );
-
 	const [ color, setColor ] = useState( variable.value );
 	const [ label, setLabel ] = useState( variable.label );
 
@@ -43,75 +39,100 @@ export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Prop
 			value: color,
 			label,
 		} ).then( () => {
+			maybeTriggerBoundPropChange();
+			onSubmit?.();
+		} );
+	};
+
+	const handleDelete = () => {
+		deleteVariable( editId ).then( () => {
+			maybeTriggerBoundPropChange();
 			onSubmit?.();
 		} );
 	};
 
-	const noValueChanged = () => color === variable.value && label === variable.label;
-	const hasEmptyValue = () => '' === color.trim() || '' === label.trim();
-	const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
+	const maybeTriggerBoundPropChange = () => {
+		if ( editId === assignedValue ) {
+			notifyBoundPropChange( editId );
+		}
+	};
+
+	const handleDeleteConfirmation = () => {
+		setDeleteConfirmation( true );
+	};
+
+	const closeDeleteDialog = () => () => {
+		setDeleteConfirmation( false );
+	};
+
+	const actions = [];
+
+	actions.push(
+		<IconButton
+			key="delete"
+			size={ SIZE }
+			aria-label={ __( 'Delete', 'elementor' ) }
+			onClick={ handleDeleteConfirmation }
+		>
+			<TrashIcon fontSize={ SIZE } />
+		</IconButton>
+	);
+
+	const hasEmptyValues = () => {
+		return ! color.trim() || ! label.trim();
+	};
+
+	const noValueChanged = () => {
+		return color === variable.value && label === variable.label;
+	};
+
+	const isSubmitDisabled = noValueChanged() || hasEmptyValues();
 
 	return (
 		<>
-			<PopoverHeader
-				title={ __( 'Edit variable', 'elementor' ) }
-				onClose={ onClose }
-				icon={
-					<>
-						{ onGoBack && (
-							<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>
-								<ArrowLeftIcon fontSize={ SIZE } />
-							</IconButton>
-						) }
-						<BrushIcon fontSize={ SIZE } />
-					</>
-				}
-			/>
-
-			<Divider />
-
-			<Stack p={ 1.5 } gap={ 1.5 }>
-				<Grid container gap={ 0.75 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( '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="small">{ __( 'Value', 'elementor' ) }</FormLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<UnstableColorField
-							size="tiny"
-							fullWidth
-							value={ color }
-							onChange={ setColor }
-							slotProps={ {
-								colorPicker: {
-									anchorEl: anchorRef.current,
-									anchorOrigin: { vertical: 'top', horizontal: 'right' },
-									transformOrigin: { vertical: 'top', horizontal: -10 },
-								},
-							} }
-						/>
-					</Grid>
-				</Grid>
-			</Stack>
-
-			<CardActions>
-				<Button size="small" variant="contained" disabled={ isSaveDisabled() } onClick={ handleUpdate }>
-					{ __( 'Save', 'elementor' ) }
-				</Button>
-			</CardActions>
+			<PopoverScrollableContent 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>
+							) }
+							<BrushIcon fontSize={ SIZE } />
+						</>
+					}
+					actions={ actions }
+				/>
+
+				<Divider />
+
+				<PopoverContent p={ 2 }>
+					<LabelField value={ label } onChange={ setLabel } />
+					<ColorField value={ color } onChange={ setColor } />
+				</PopoverContent>
+
+				<CardActions sx={ { pt: 0.5, pb: 1 } }>
+					<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleUpdate }>
+						{ __( 'Save', 'elementor' ) }
+					</Button>
+				</CardActions>
+			</PopoverScrollableContent>
+
+			{ deleteConfirmation && (
+				<DeleteConfirmationDialog
+					open
+					label={ label }
+					onConfirm={ handleDelete }
+					closeDialog={ closeDeleteDialog() }
+				/>
+			) }
 		</>
 	);
 };

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
+import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
 import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
-import { ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';
+import { BrushIcon, ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';
 import { Divider, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -93,25 +94,37 @@ export const ColorVariablesSelection = ( { closePopover, onAdd, onEdit, onSettin
 
 			<Divider />
 
-			{ hasVariables && hasSearchResults && (
-				<PopoverMenuList< 'item', string >
-					items={ items }
-					onSelect={ handleSetColorVariable }
-					onClose={ () => {} }
-					selectedValue={ variable }
-					data-testid="color-variables-list"
-					menuListTemplate={ VariablesStyledMenuList }
-					menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
-						<MenuItemContent item={ item } />
-					) }
-				/>
-			) }
-
-			{ ! hasSearchResults && hasVariables && (
-				<NoSearchResults searchValue={ searchValue } onClear={ handleClearSearch } />
-			) }
-
-			{ ! hasVariables && <NoVariables icon={ <ColorFilterIcon fontSize="large" /> } onAdd={ onAdd } /> }
+			<PopoverScrollableContent>
+				{ hasVariables && hasSearchResults && (
+					<PopoverMenuList
+						items={ items }
+						onSelect={ handleSetColorVariable }
+						onClose={ () => {} }
+						selectedValue={ variable }
+						data-testid="color-variables-list"
+						menuListTemplate={ VariablesStyledMenuList }
+						menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
+							<MenuItemContent item={ item } />
+						) }
+					/>
+				) }
+
+				{ ! hasSearchResults && hasVariables && (
+					<NoSearchResults
+						searchValue={ searchValue }
+						onClear={ handleClearSearch }
+						icon={ <BrushIcon fontSize="large" /> }
+					/>
+				) }
+
+				{ ! hasVariables && (
+					<NoVariables
+						title={ __( 'Create your first color variable', 'elementor' ) }
+						icon={ <BrushIcon fontSize="large" /> }
+						onAdd={ onAdd }
+					/>
+				) }
+			</PopoverScrollableContent>
 		</>
 	);
 };

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { FormHelperText, FormLabel, Grid, UnstableColorField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { validateValue } from '../../utils/validations';
+import { usePopoverContentRef } from '../variable-selection-popover.context';
+
+type ColorFieldProps = {
+	value: string;
+	onChange: ( value: string ) => void;
+};
+
+export const ColorField = ( { value, onChange }: ColorFieldProps ) => {
+	const [ color, setColor ] = useState( value );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
+
+	const defaultRef = useRef< HTMLDivElement >( null );
+	const anchorRef = usePopoverContentRef() ?? defaultRef;
+
+	const handleChange = ( newValue: string ) => {
+		setColor( newValue );
+
+		const errorMsg = validateValue( newValue );
+		setErrorMessage( 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.current,
+							anchorOrigin: { vertical: 'top', horizontal: 'right' },
+							transformOrigin: { vertical: 'top', horizontal: -10 },
+						},
+					} }
+				/>
+				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
+			</Grid>
+		</Grid>
+	);
+};

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

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { FontFamilySelector } from '@elementor/editor-controls';
+import { useFontFamilies, useSectionWidth } from '@elementor/editor-editing-panel';
+import { ChevronDownIcon } from '@elementor/icons';
+import {
+	bindPopover,
+	bindTrigger,
+	FormHelperText,
+	FormLabel,
+	Grid,
+	Popover,
+	UnstableTag,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { validateValue } from '../../utils/validations';
+import { usePopoverContentRef } from '../variable-selection-popover.context';
+
+type FontFieldProps = {
+	value: string;
+	onChange: ( value: string ) => void;
+};
+
+export const FontField = ( { value, onChange }: FontFieldProps ) => {
+	const [ fontFamily, setFontFamily ] = useState( value );
+	const [ errorMessage, setErrorMessage ] = useState( '' );
+
+	const defaultRef = useRef< HTMLDivElement >( null );
+	const anchorRef = usePopoverContentRef() ?? defaultRef;
+
+	const fontPopoverState = usePopupState( { variant: 'popover' } );
+
+	const fontFamilies = useFontFamilies();
+	const sectionWidth = useSectionWidth();
+
+	const handleChange = ( newValue: string ) => {
+		setFontFamily( newValue );
+
+		const errorMsg = validateValue( newValue );
+		setErrorMessage( errorMsg );
+
+		onChange( errorMsg ? '' : newValue );
+	};
+
+	const handleFontFamilyChange = ( newFontFamily: string ) => {
+		handleChange( newFontFamily );
+		fontPopoverState.close();
+	};
+
+	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
+				/>
+				<Popover
+					disablePortal
+					disableScrollLock
+					anchorEl={ anchorRef.current }
+					anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
+					transformOrigin={ { vertical: 'top', horizontal: -20 } }
+					{ ...bindPopover( fontPopoverState ) }
+				>
+					<FontFamilySelector
+						fontFamilies={ fontFamilies }
+						fontFamily={ fontFamily }
+						onFontFamilyChange={ handleFontFamilyChange }
+						onClose={ fontPopoverState.close }
+						sectionWidth={ sectionWidth }
+					/>
+				</Popover>
+				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
+			</Grid>
+		</Grid>
+	);
+};

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