@elementor/editor-variables 0.16.0 → 3.32.0-20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "0.16.0",
+  "version": "3.32.0-20",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -18,11 +18,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "url": "git+https://github.com/elementor/elementor.git",
     "directory": "packages/core/editor-variables"
   },
   "bugs": {
-    "url": "https://github.com/elementor/elementor-packages/issues"
+    "url": "https://github.com/elementor/elementor/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -39,18 +39,20 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.21.0",
-    "@elementor/editor-editing-panel": "1.48.0",
-    "@elementor/editor-canvas": "0.26.0",
-    "@elementor/editor-props": "0.16.0",
-    "@elementor/schema": "0.1.2",
-    "@elementor/editor-controls": "1.3.0",
+    "@elementor/editor": "3.32.0-20",
+    "@elementor/editor-canvas": "3.32.0-20",
+    "@elementor/editor-controls": "3.32.0-20",
+    "@elementor/editor-current-user": "3.32.0-20",
+    "@elementor/editor-editing-panel": "3.32.0-20",
+    "@elementor/editor-panels": "3.32.0-20",
+    "@elementor/editor-props": "3.32.0-20",
+    "@elementor/editor-ui": "3.32.0-20",
+    "@elementor/editor-v1-adapters": "3.32.0-20",
+    "@elementor/http-client": "3.32.0-20",
     "@elementor/icons": "1.46.0",
-    "@wordpress/i18n": "^5.13.0",
-    "@elementor/ui": "1.36.0",
-    "@elementor/editor-v1-adapters": "0.12.1",
-    "@elementor/http-client": "0.3.0",
-    "@elementor/editor-ui": "0.14.0"
+    "@elementor/schema": "3.32.0-20",
+    "@elementor/ui": "1.36.2",
+    "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/api.ts

@@ -2,6 +2,12 @@ import { httpService } from '@elementor/http-client';
 
 const BASE_PATH = 'elementor/v1/variables';
 
+type RestoreVariablePayload = {
+	id: string;
+	label?: string;
+	value?: string;
+};
+
 export const apiClient = {
 	list: () => {
 		return httpService().get( BASE_PATH + '/list' );
@@ -27,7 +33,17 @@ export const apiClient = {
 		return httpService().post( BASE_PATH + '/delete', { id } );
 	},
 
-	restore: ( id: string ) => {
-		return httpService().post( BASE_PATH + '/restore', { id } );
+	restore: ( id: string, label?: string, value?: string ) => {
+		const payload: RestoreVariablePayload = { id };
+
+		if ( label ) {
+			payload.label = label;
+		}
+
+		if ( value ) {
+			payload.value = value;
+		}
+
+		return httpService().post( BASE_PATH + '/restore', payload );
 	},
 };

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

@@ -3,8 +3,8 @@ import { useRef, useState } from 'react';
 import { FormHelperText, FormLabel, Grid, UnstableColorField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { usePopoverContentRef } from '../../context/variable-selection-popover.context';
 import { validateValue } from '../../utils/validations';
-import { usePopoverContentRef } from '../variable-selection-popover.context';
 
 type ColorFieldProps = {
 	value: string;
@@ -16,7 +16,7 @@ export const ColorField = ( { value, onChange }: ColorFieldProps ) => {
 	const [ errorMessage, setErrorMessage ] = useState( '' );
 
 	const defaultRef = useRef< HTMLDivElement >( null );
-	const anchorRef = usePopoverContentRef() ?? defaultRef;
+	const anchorRef = usePopoverContentRef() ?? defaultRef.current;
 
 	const handleChange = ( newValue: string ) => {
 		setColor( newValue );
@@ -41,7 +41,7 @@ export const ColorField = ( { value, onChange }: ColorFieldProps ) => {
 					error={ errorMessage ?? undefined }
 					slotProps={ {
 						colorPicker: {
-							anchorEl: anchorRef.current,
+							anchorEl: anchorRef,
 							anchorOrigin: { vertical: 'top', horizontal: 'right' },
 							transformOrigin: { vertical: 'top', horizontal: -10 },
 						},

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { FontFamilySelector } from '@elementor/editor-controls';
+import { enqueueFont, ItemSelector } from '@elementor/editor-controls';
 import { useFontFamilies, useSectionWidth } from '@elementor/editor-editing-panel';
-import { ChevronDownIcon } from '@elementor/icons';
+import { ChevronDownIcon, TextIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
@@ -15,8 +15,8 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { usePopoverContentRef } from '../../context/variable-selection-popover.context';
 import { validateValue } from '../../utils/validations';
-import { usePopoverContentRef } from '../variable-selection-popover.context';
 
 type FontFieldProps = {
 	value: string;
@@ -28,13 +28,20 @@ export const FontField = ( { value, onChange }: FontFieldProps ) => {
 	const [ errorMessage, setErrorMessage ] = useState( '' );
 
 	const defaultRef = useRef< HTMLDivElement >( null );
-	const anchorRef = usePopoverContentRef() ?? defaultRef;
+	const anchorRef = usePopoverContentRef() ?? defaultRef.current;
 
 	const fontPopoverState = usePopupState( { variant: 'popover' } );
 
 	const fontFamilies = useFontFamilies();
 	const sectionWidth = useSectionWidth();
 
+	const mapFontSubs = React.useMemo( () => {
+		return fontFamilies.map( ( { label, fonts } ) => ( {
+			label,
+			items: fonts,
+		} ) );
+	}, [ fontFamilies ] );
+
 	const handleChange = ( newValue: string ) => {
 		setFontFamily( newValue );
 
@@ -65,17 +72,21 @@ export const FontField = ( { value, onChange }: FontFieldProps ) => {
 				<Popover
 					disablePortal
 					disableScrollLock
-					anchorEl={ anchorRef.current }
+					anchorEl={ anchorRef }
 					anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
-					transformOrigin={ { vertical: 'top', horizontal: -20 } }
+					transformOrigin={ { vertical: 'top', horizontal: -28 } }
 					{ ...bindPopover( fontPopoverState ) }
 				>
-					<FontFamilySelector
-						fontFamilies={ fontFamilies }
-						fontFamily={ fontFamily }
-						onFontFamilyChange={ handleFontFamilyChange }
+					<ItemSelector
+						itemsList={ mapFontSubs }
+						selectedItem={ fontFamily }
+						onItemChange={ handleFontFamilyChange }
 						onClose={ fontPopoverState.close }
 						sectionWidth={ sectionWidth }
+						title={ __( 'Font Family', 'elementor' ) }
+						itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
+						onDebounce={ enqueueFont }
+						icon={ TextIcon as React.ElementType< { fontSize: string } > }
 					/>
 				</Popover>
 				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }

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

@@ -5,12 +5,31 @@ import { __ } from '@wordpress/i18n';
 
 import { labelHint, validateLabel, VARIABLE_LABEL_MAX_LENGTH } from '../../utils/validations';
 
+function isLabelEqual( a: string, b: string ) {
+	return a.trim().toLowerCase() === b.trim().toLowerCase();
+}
+
+type LabelErrorProps = {
+	value: string;
+	message: string;
+};
+
+export const useLabelError = ( initialError?: LabelErrorProps ) => {
+	const [ error, setError ] = useState< LabelErrorProps >( initialError ?? { value: '', message: '' } );
+
+	return {
+		labelFieldError: error,
+		setLabelFieldError: setError,
+	};
+};
+
 type LabelFieldProps = {
 	value: string;
+	error?: LabelErrorProps;
 	onChange: ( value: string ) => void;
 };
 
-export const LabelField = ( { value, onChange }: LabelFieldProps ) => {
+export const LabelField = ( { value, error, onChange }: LabelFieldProps ) => {
 	const [ label, setLabel ] = useState( value );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
 	const [ noticeMessage, setNoticeMessage ] = useState( () => labelHint( value ) );
@@ -24,11 +43,18 @@ export const LabelField = ( { value, onChange }: LabelFieldProps ) => {
 		setErrorMessage( errorMsg );
 		setNoticeMessage( errorMsg ? '' : hintMsg );
 
-		onChange( errorMsg ? '' : newValue );
+		onChange( isLabelEqual( newValue, error?.value ?? '' ) || errorMsg ? '' : newValue );
 	};
 
 	const id = useId();
 
+	let errorMsg = errorMessage;
+	if ( isLabelEqual( label, error?.value ?? '' ) && error?.message ) {
+		errorMsg = error.message;
+	}
+
+	const noticeMsg = errorMsg ? '' : noticeMessage;
+
 	return (
 		<Grid container gap={ 0.75 } alignItems="center">
 			<Grid item xs={ 12 }>
@@ -42,12 +68,12 @@ export const LabelField = ( { value, onChange }: LabelFieldProps ) => {
 					size="tiny"
 					fullWidth
 					value={ label }
-					error={ !! errorMessage }
+					error={ !! errorMsg }
 					onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => handleChange( e.target.value ) }
 					inputProps={ { maxLength: VARIABLE_LABEL_MAX_LENGTH } }
 				/>
-				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
-				{ noticeMessage && <FormHelperText>{ noticeMessage }</FormHelperText> }
+				{ errorMsg && <FormHelperText error>{ errorMsg }</FormHelperText> }
+				{ noticeMsg && <FormHelperText>{ noticeMsg }</FormHelperText> }
 			</Grid>
 		</Grid>
 	);

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

@@ -28,23 +28,20 @@ export const DeleteConfirmationDialog = ( {
 		<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' ) }
+				{ __( 'Delete this variable?', 'elementor' ) }
 			</DialogTitle>
 			<DialogContent>
 				<DialogContentText variant="body2" color="textPrimary">
-					{ __( 'You are about to delete', 'elementor' ) }
+					{ __( 'All elements using', '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'
-					) }
+					{ __( 'will keep their current values, but the variable itself will be removed.', 'elementor' ) }
 				</DialogContentText>
 			</DialogContent>
 			<DialogActions>
 				<Button color="secondary" onClick={ closeDialog }>
-					{ __( 'Cancel', 'elementor' ) }
+					{ __( 'Not now', 'elementor' ) }
 				</Button>
 				<Button variant="contained" color="error" onClick={ onConfirm }>
 					{ __( 'Delete', 'elementor' ) }

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

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import {
+	Button,
+	Checkbox,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	FormControlLabel,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const EDIT_CONFIRMATION_DIALOG_ID = 'edit-confirmation-dialog';
+
+export const EditConfirmationDialog = ( {
+	closeDialog,
+	onConfirm,
+	onSuppressMessage,
+}: {
+	closeDialog: () => void;
+	onConfirm?: () => void;
+	onSuppressMessage?: () => void;
+} ) => {
+	const [ dontShowAgain, setDontShowAgain ] = useState( false );
+
+	const handleSave = () => {
+		if ( dontShowAgain ) {
+			onSuppressMessage?.();
+		}
+		onConfirm?.();
+	};
+
+	return (
+		<Dialog open onClose={ closeDialog } maxWidth="xs">
+			<DialogTitle display="flex" alignItems="center" gap={ 1 }>
+				<AlertTriangleFilledIcon color="secondary" />
+				{ __( 'Changes to variables go live right away.', 'elementor' ) }
+			</DialogTitle>
+			<DialogContent>
+				<DialogContentText variant="body2" color="textPrimary">
+					{ __(
+						"Don't worry - all other changes you make will wait until you publish your site.",
+						'elementor'
+					) }
+				</DialogContentText>
+			</DialogContent>
+			<DialogActions sx={ { justifyContent: 'space-between', alignItems: 'center' } }>
+				<FormControlLabel
+					control={
+						<Checkbox
+							checked={ dontShowAgain }
+							onChange={ ( event: React.ChangeEvent< HTMLInputElement > ) =>
+								setDontShowAgain( event.target.checked )
+							}
+							size="small"
+						/>
+					}
+					label={ <Typography variant="body2">{ __( "Don't show me again", 'elementor' ) }</Typography> }
+				/>
+				<div>
+					<Button color="secondary" onClick={ closeDialog }>
+						{ __( 'Keep editing', 'elementor' ) }
+					</Button>
+					<Button variant="contained" color="secondary" onClick={ handleSave } sx={ { ml: 1 } }>
+						{ __( 'Save', 'elementor' ) }
+					</Button>
+				</div>
+			</DialogActions>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,39 @@
+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 MissingVariableAlertProps = {
+	onClose: () => void;
+	onClear?: () => void;
+};
+
+export const MissingVariableAlert = ( { onClose, onClear }: MissingVariableAlertProps ) => {
+	const sectionWidth = useSectionWidth();
+
+	return (
+		<ClickAwayListener onClickAway={ onClose }>
+			<Alert
+				variant="standard"
+				severity="warning"
+				onClose={ onClose }
+				action={
+					<>
+						{ onClear && (
+							<AlertAction variant="contained" onClick={ onClear }>
+								{ __( 'Clear', 'elementor' ) }
+							</AlertAction>
+						) }
+					</>
+				}
+				sx={ { width: sectionWidth } }
+			>
+				<AlertTitle>{ __( 'This variable is missing', 'elementor' ) }</AlertTitle>
+				{ __(
+					'It may have been deleted. Try clearing this field and select a different value or variable.',
+					'elementor'
+				) }
+			</Alert>
+		</ClickAwayListener>
+	);
+};

package/src/components/ui/no-variables.tsx

@@ -2,35 +2,68 @@ import * as React from 'react';
 import { Button, Stack, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { usePermissions } from '../../hooks/use-permissions';
+
 type Props = {
 	icon?: React.ReactNode;
 	title?: string;
 	onAdd?: () => void;
 };
 
-export const NoVariables = ( { icon, title, onAdd }: Props ) => (
-	<Stack
-		gap={ 1 }
-		alignItems="center"
-		justifyContent="center"
-		height="100%"
-		color="text.secondary"
-		sx={ { p: 2.5, pb: 5.5 } }
-	>
-		{ icon }
-
-		<Typography align="center" variant="subtitle2">
-			{ title }
-		</Typography>
-
-		<Typography align="center" variant="caption" maxWidth="180px">
-			{ __( 'Variables are saved attributes that you can apply anywhere on your site.', 'elementor' ) }
-		</Typography>
-
-		{ onAdd && (
-			<Button variant="outlined" color="secondary" size="small" onClick={ onAdd }>
-				{ __( 'Create a variable', 'elementor' ) }
-			</Button>
-		) }
-	</Stack>
-);
+export const NoVariables = ( { icon, title, onAdd }: Props ) => {
+	const canAdd = usePermissions().canAdd();
+
+	return (
+		<Stack
+			gap={ 1 }
+			alignItems="center"
+			justifyContent="center"
+			height="100%"
+			color="text.secondary"
+			sx={ { p: 2.5, pb: 5.5 } }
+		>
+			{ icon }
+
+			{ canAdd ? (
+				<>
+					<NoVariablesContent
+						title={ title || __( 'Create your first variable', 'elementor' ) }
+						message={ __(
+							'Variables are saved attributes that you can apply anywhere on your site.',
+							'elementor'
+						) }
+					/>
+					{ onAdd && (
+						<Button variant="outlined" color="secondary" size="small" onClick={ onAdd }>
+							{ __( 'Create a variable', 'elementor' ) }
+						</Button>
+					) }
+				</>
+			) : (
+				<NoVariablesContent
+					title={ __( 'There are no variables', 'elementor' ) }
+					message={ __( 'With your current role, you can only connect and detach variables.', 'elementor' ) }
+				/>
+			) }
+		</Stack>
+	);
+};
+
+type NoVariablesContentProps = {
+	title: string;
+	message: string;
+};
+
+function NoVariablesContent( { title, message }: NoVariablesContentProps ) {
+	return (
+		<>
+			<Typography align="center" variant="subtitle2">
+				{ title }
+			</Typography>
+
+			<Typography align="center" variant="caption" maxWidth="180px">
+				{ message }
+			</Typography>
+		</>
+	);
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DetachIcon } from '@elementor/icons';
-import { Box, IconButton, Stack, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
+import { Box, IconButton, Stack, Tooltip, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 export const SIZE = 'tiny';
@@ -21,23 +21,25 @@ export const AssignedTag = ( { startIcon, label, onUnlink, ...props }: VariableT
 	}
 
 	return (
-		<Tag
-			fullWidth
-			showActionsOnHover
-			startIcon={
-				<Stack gap={ 0.5 } direction="row" alignItems="center">
-					{ startIcon }
-				</Stack>
-			}
-			label={
-				<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
-					<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
-						{ label }
-					</Typography>
-				</Box>
-			}
-			actions={ actions }
-			{ ...props }
-		/>
+		<Tooltip title={ label } placement="top">
+			<Tag
+				fullWidth
+				showActionsOnHover
+				startIcon={
+					<Stack gap={ 0.5 } direction="row" alignItems="center">
+						{ startIcon }
+					</Stack>
+				}
+				label={
+					<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
+						<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
+							{ label }
+						</Typography>
+					</Box>
+				}
+				actions={ actions }
+				{ ...props }
+			/>
+		</Tooltip>
 	);
 };

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

@@ -1,26 +1,37 @@
 import * as React from 'react';
-import { ColorFilterIcon } from '@elementor/icons';
-import { Box, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import { Box, Chip, type ChipProps, type Theme, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-export const DeletedTag = ( { label }: UnstableTagProps ) => {
+export const DeletedTag = React.forwardRef< HTMLDivElement, ChipProps >( ( { label, onClick, ...props }, ref ) => {
 	return (
-		<Tag
-			showActionsOnHover
-			fullWidth
+		<Chip
+			ref={ ref }
+			size="tiny"
+			color="warning"
+			shape="rounded"
+			variant="standard"
+			onClick={ onClick }
+			icon={ <AlertTriangleFilledIcon /> }
 			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>
+				<Tooltip title={ label } placement="top">
+					<Box sx={ { display: 'flex', gap: 0.5, alignItems: 'center' } }>
+						<Typography variant="caption" noWrap>
+							{ label }
+						</Typography>
+						<Typography variant="caption" noWrap sx={ { textOverflow: 'initial', overflow: 'visible' } }>
+							({ __( 'deleted', 'elementor' ) })
+						</Typography>
+					</Box>
+				</Tooltip>
 			}
+			sx={ {
+				height: ( theme: Theme ) => theme.spacing( 3.5 ),
+				borderRadius: ( theme: Theme ) => theme.spacing( 1 ),
+				justifyContent: 'flex-start',
+				width: '100%',
+			} }
+			{ ...props }
 		/>
 	);
-};
+} );