@elementor/editor-variables 0.15.0 → 0.16.0

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 { PopoverScrollableContent } from '@elementor/editor-editing-panel';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { ArrowLeftIcon, TextIcon, TrashIcon } from '@elementor/icons';
+import { Button, CardActions, Divider, 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,10 @@ 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 variable = useVariable( editId );
 	if ( ! variable ) {
 		throw new Error( `Global font variable "${ editId }" not found` );
 	}
@@ -41,123 +34,105 @@ 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( () => {
+			maybeTriggerBoundPropChange();
 			onSubmit?.();
 		} );
 	};
 
 	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 }>
+		<>
+			<PopoverScrollableContent 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={ setLabel } />
+					<FontField value={ fontFamily } onChange={ setFontFamily } />
+				</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/ui/delete-confirmation-dialog.tsx

@@ -0,0 +1,55 @@
+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 Variable', 'elementor' ) }
+			</DialogTitle>
+			<DialogContent>
+				<DialogContentText variant="body2" color="textPrimary">
+					{ __( 'You are about to delete', 'elementor' ) }
+					<Typography variant="subtitle2" component="span">
+						&nbsp;{ label }&nbsp;
+					</Typography>
+					{ __(
+						'Variable. Note that its value is still being used anywhere on your site where it was connected to the variable.',
+						'elementor'
+					) }
+				</DialogContentText>
+			</DialogContent>
+			<DialogActions>
+				<Button color="secondary" onClick={ closeDialog }>
+					{ __( 'Cancel', 'elementor' ) }
+				</Button>
+				<Button variant="contained" color="error" onClick={ onConfirm }>
+					{ __( 'Delete', 'elementor' ) }
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};

package/src/components/ui/menu-item-content.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import { EllipsisWithTooltip, type VirtualizedItem } from '@elementor/editor-ui';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { EditIcon } from '@elementor/icons';
 import { Box, IconButton, ListItemIcon, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 const SIZE = 'tiny';
 
-const isVersion330Active = isExperimentActive( 'e_v_3_30' );
-
 export const MenuItemContent = < T, V extends string >( { item }: { item: VirtualizedItem< T, V > } ) => {
 	const onEdit = item.onEdit as ( ( value: V ) => void ) | undefined;
 
@@ -27,8 +24,8 @@ export const MenuItemContent = < T, V extends string >( { item }: { item: Virtua
 				<EllipsisWithTooltip
 					title={ item.label || item.value }
 					as={ Typography }
-					variant={ isVersion330Active ? 'caption' : 'body2' }
-					color={ isVersion330Active ? 'text.primary' : 'text.secondary' }
+					variant="caption"
+					color="text.primary"
 					sx={ { marginTop: '1px', lineHeight: '2' } }
 					maxWidth="50%"
 				/>

package/src/components/ui/{variable-tag.tsx → tags/assigned-tag.tsx}

@@ -9,7 +9,7 @@ interface VariableTagProps extends UnstableTagProps {
 	onUnlink?: () => void;
 }
 
-export const VariableTag = ( { startIcon, label, onUnlink, ...props }: VariableTagProps ) => {
+export const AssignedTag = ( { startIcon, label, onUnlink, ...props }: VariableTagProps ) => {
 	const actions = [];
 
 	if ( onUnlink ) {

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ColorFilterIcon } from '@elementor/icons';
+import { Box, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const DeletedTag = ( { label }: UnstableTagProps ) => {
+	return (
+		<Tag
+			showActionsOnHover
+			fullWidth
+			label={
+				<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
+					<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
+						{ label }
+					</Typography>
+				</Box>
+			}
+			startIcon={ <ColorFilterIcon fontSize="tiny" /> }
+			endAdornment={
+				<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
+					({ __( 'deleted', 'elementor' ) })
+				</Typography>
+			}
+		/>
+	);
+};

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

@@ -0,0 +1,70 @@
+import { useId, useRef } from 'react';
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { type PropTypeUtil } from '@elementor/editor-props';
+import { ColorFilterIcon } from '@elementor/icons';
+import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
+
+import { type Variable } from '../../../types';
+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;
+	variable: Variable;
+};
+
+export const AssignedVariable = ( {
+	variable,
+	variablePropTypeUtil,
+	fallbackPropTypeUtil,
+	additionalStartIcon,
+}: Props ) => {
+	const { setValue } = useBoundProp();
+	const anchorRef = useRef< HTMLDivElement >( null );
+
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-variables-list-${ popupId }`,
+	} );
+
+	const unlinkVariable = () => {
+		setValue( fallbackPropTypeUtil.create( variable.value ) );
+	};
+
+	return (
+		<Box ref={ anchorRef }>
+			<AssignedTag
+				label={ variable.label }
+				startIcon={
+					<>
+						<ColorFilterIcon fontSize={ SIZE } />
+
+						{ additionalStartIcon }
+					</>
+				}
+				onUnlink={ unlinkVariable }
+				{ ...bindTrigger( popupState ) }
+			/>
+			<Popover
+				disableScrollLock
+				anchorEl={ anchorRef.current }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				PaperProps={ {
+					sx: { my: 1 },
+				} }
+				{ ...bindPopover( popupState ) }
+			>
+				<VariableSelectionPopover
+					selectedVariable={ variable }
+					closePopover={ popupState.close }
+					propTypeKey={ variablePropTypeUtil.key }
+				/>
+			</Popover>
+		</Box>
+	);
+};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { Box } from '@elementor/ui';
+
+import { type Variable } from '../../../types';
+import { DeletedTag } from '../tags/deleted-tag';
+
+type Props = {
+	variable: Variable;
+};
+
+export const DeletedVariable = ( { variable }: Props ) => {
+	const anchorRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Box ref={ anchorRef }>
+			<DeletedTag label={ variable.label } />
+		</Box>
+	);
+};

package/src/controls/color-variable-control.tsx

@@ -1,66 +1,33 @@
 import * as React from 'react';
-import { useId, useRef } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { colorPropTypeUtil } from '@elementor/editor-props';
-import { ColorFilterIcon } from '@elementor/icons';
-import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
 
 import { ColorIndicator } from '../components/ui/color-indicator';
-import { SIZE, VariableTag } from '../components/ui/variable-tag';
-import { VariableSelectionPopover } from '../components/variable-selection-popover';
+import { AssignedVariable } from '../components/ui/variable/assigned-variable';
+import { DeletedVariable } from '../components/ui/variable/deleted-variable';
 import { useVariable } from '../hooks/use-prop-variables';
 import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
 
 export const ColorVariableControl = () => {
-	const { setValue: setColor } = useBoundProp();
 	const { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );
+	const assignedVariable = useVariable( variableValue );
 
-	const anchorRef = useRef< HTMLDivElement >( null );
-
-	const popupId = useId();
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: `elementor-variables-list-${ popupId }`,
-	} );
-
-	const selectedVariable = useVariable( variableValue );
-	if ( ! selectedVariable ) {
+	if ( ! assignedVariable ) {
 		throw new Error( `Global color variable ${ variableValue } not found` );
 	}
 
-	const unlinkVariable = () => {
-		setColor( colorPropTypeUtil.create( selectedVariable.value ) );
-	};
+	const isVariableDeleted = assignedVariable?.deleted;
+
+	if ( isVariableDeleted ) {
+		return <DeletedVariable variable={ assignedVariable } />;
+	}
 
 	return (
-		<Box ref={ anchorRef }>
-			<VariableTag
-				label={ selectedVariable.label }
-				startIcon={
-					<>
-						<ColorFilterIcon fontSize={ SIZE } />
-						<ColorIndicator size="inherit" value={ selectedVariable.value } component="span" />
-					</>
-				}
-				onUnlink={ unlinkVariable }
-				{ ...bindTrigger( popupState ) }
-			/>
-			<Popover
-				disableScrollLock
-				anchorEl={ anchorRef.current }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
-				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
-				PaperProps={ {
-					sx: { my: 1 },
-				} }
-				{ ...bindPopover( popupState ) }
-			>
-				<VariableSelectionPopover
-					selectedVariable={ selectedVariable }
-					closePopover={ popupState.close }
-					propTypeKey={ colorVariablePropTypeUtil.key }
-				/>
-			</Popover>
-		</Box>
+		<AssignedVariable
+			variable={ assignedVariable }
+			variablePropTypeUtil={ colorVariablePropTypeUtil }
+			fallbackPropTypeUtil={ colorPropTypeUtil }
+			additionalStartIcon={ <ColorIndicator size="inherit" value={ assignedVariable.value } component="span" /> }
+		/>
 	);
 };

package/src/controls/font-variable-control.tsx

@@ -1,60 +1,31 @@
 import * as React from 'react';
-import { useId, useRef } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ColorFilterIcon } from '@elementor/icons';
-import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
 
-import { SIZE, VariableTag } from '../components/ui/variable-tag';
-import { VariableSelectionPopover } from '../components/variable-selection-popover';
+import { AssignedVariable } from '../components/ui/variable/assigned-variable';
+import { DeletedVariable } from '../components/ui/variable/deleted-variable';
 import { useVariable } from '../hooks/use-prop-variables';
 import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
 
 export const FontVariableControl = () => {
-	const { setValue: setFontFamily } = useBoundProp();
 	const { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );
+	const assignedVariable = useVariable( variableValue );
 
-	const anchorRef = useRef< HTMLDivElement >( null );
-
-	const popupId = useId();
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: `elementor-variables-list-${ popupId }`,
-	} );
-
-	const selectedVariable = useVariable( variableValue );
-	if ( ! selectedVariable ) {
+	if ( ! assignedVariable ) {
 		throw new Error( `Global font variable ${ variableValue } not found` );
 	}
 
-	const unlinkVariable = () => {
-		setFontFamily( stringPropTypeUtil.create( selectedVariable.value ) );
-	};
+	const isVariableDeleted = assignedVariable?.deleted;
+
+	if ( isVariableDeleted ) {
+		return <DeletedVariable variable={ assignedVariable } />;
+	}
 
 	return (
-		<Box ref={ anchorRef }>
-			<VariableTag
-				label={ selectedVariable.label }
-				startIcon={ <ColorFilterIcon fontSize={ SIZE } /> }
-				onUnlink={ unlinkVariable }
-				{ ...bindTrigger( popupState ) }
-			/>
-			<Popover
-				disableScrollLock
-				anchorEl={ anchorRef.current }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
-				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
-				PaperProps={ {
-					sx: { my: 1 },
-				} }
-				{ ...bindPopover( popupState ) }
-			>
-				<VariableSelectionPopover
-					selectedVariable={ selectedVariable }
-					closePopover={ popupState.close }
-					propTypeKey={ fontVariablePropTypeUtil.key }
-				/>
-			</Popover>
-		</Box>
+		<AssignedVariable
+			variable={ assignedVariable }
+			variablePropTypeUtil={ fontVariablePropTypeUtil }
+			fallbackPropTypeUtil={ stringPropTypeUtil }
+		/>
 	);
 };