@elementor/editor-variables 0.18.0 → 3.32.0-21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "0.18.0",
+  "version": "3.32.0-21",
   "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.1",
-    "@elementor/editor-editing-panel": "1.50.0",
-    "@elementor/editor-canvas": "0.28.0",
-    "@elementor/editor-props": "0.18.0",
-    "@elementor/schema": "0.1.2",
-    "@elementor/editor-controls": "1.5.0",
+    "@elementor/editor": "3.32.0-21",
+    "@elementor/editor-canvas": "3.32.0-21",
+    "@elementor/editor-controls": "3.32.0-21",
+    "@elementor/editor-current-user": "3.32.0-21",
+    "@elementor/editor-editing-panel": "3.32.0-21",
+    "@elementor/editor-panels": "3.32.0-21",
+    "@elementor/editor-props": "3.32.0-21",
+    "@elementor/editor-ui": "3.32.0-21",
+    "@elementor/editor-v1-adapters": "3.32.0-21",
+    "@elementor/http-client": "3.32.0-21",
     "@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.2"
+    "@elementor/schema": "3.32.0-21",
+    "@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/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/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>