@elementor/editor-variables 3.32.0-64 → 3.32.0-65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.32.0-64",
+  "version": "3.32.0-65",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.32.0-64",
-    "@elementor/editor-canvas": "3.32.0-64",
-    "@elementor/editor-controls": "3.32.0-64",
-    "@elementor/editor-current-user": "3.32.0-64",
-    "@elementor/editor-editing-panel": "3.32.0-64",
-    "@elementor/editor-panels": "3.32.0-64",
-    "@elementor/editor-props": "3.32.0-64",
-    "@elementor/editor-ui": "3.32.0-64",
-    "@elementor/editor-v1-adapters": "3.32.0-64",
-    "@elementor/http-client": "3.32.0-64",
+    "@elementor/editor": "3.32.0-65",
+    "@elementor/editor-canvas": "3.32.0-65",
+    "@elementor/editor-controls": "3.32.0-65",
+    "@elementor/editor-current-user": "3.32.0-65",
+    "@elementor/editor-editing-panel": "3.32.0-65",
+    "@elementor/editor-panels": "3.32.0-65",
+    "@elementor/editor-props": "3.32.0-65",
+    "@elementor/editor-ui": "3.32.0-65",
+    "@elementor/editor-v1-adapters": "3.32.0-65",
+    "@elementor/http-client": "3.32.0-65",
     "@elementor/icons": "1.46.0",
-    "@elementor/schema": "3.32.0-64",
+    "@elementor/schema": "3.32.0-65",
     "@elementor/ui": "1.36.8",
     "@wordpress/i18n": "^5.13.0"
   },

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

@@ -0,0 +1,57 @@
+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 AlertProps = {
+	onClose: () => void;
+	onClear?: () => void;
+	triggerSelect?: () => void;
+};
+
+const i18n = {
+	title: __( 'Variable has changed', 'elementor' ),
+	message: __(
+		`This variable is no longer compatible with this property. You can clear it or select a different one.`,
+		'elementor'
+	),
+	buttons: {
+		clear: __( 'Clear', 'elementor' ),
+		select: __( 'Select variable', 'elementor' ),
+	},
+};
+
+export const MismatchVariableAlert = ( { onClose, onClear, triggerSelect }: AlertProps ) => {
+	const sectionWidth = useSectionWidth();
+
+	return (
+		<ClickAwayListener onClickAway={ onClose }>
+			<Alert
+				variant="standard"
+				severity="warning"
+				onClose={ onClose }
+				action={
+					<>
+						{ onClear && (
+							<AlertAction variant="contained" onClick={ onClear }>
+								{ i18n.buttons.clear }
+							</AlertAction>
+						) }
+						{ triggerSelect && (
+							<AlertAction variant="outlined" onClick={ triggerSelect }>
+								{ i18n.buttons.select }
+							</AlertAction>
+						) }
+					</>
+				}
+				sx={ {
+					width: sectionWidth,
+					minWidth: 300,
+				} }
+			>
+				<AlertTitle>{ i18n.title }</AlertTitle>
+				{ i18n.message }
+			</Alert>
+		</ClickAwayListener>
+	);
+};

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import { Box, Chip, type ChipProps, type Theme, Tooltip, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const MismatchTag = 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={
+				<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' } }>
+							({ __( 'changed', 'elementor' ) })
+						</Typography>
+					</Box>
+				</Tooltip>
+			}
+			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/mismatch-variable.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { useId, useRef, useState } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { Backdrop, bindPopover, Box, Infotip, Popover, usePopupState } from '@elementor/ui';
+
+import { type Variable } from '../../../types';
+import { VariableSelectionPopover } from '../../variable-selection-popover';
+import { MismatchVariableAlert } from '../mismatch-variable-alert';
+import { MismatchTag } from '../tags/mismatch-tag';
+
+type Props = {
+	variable: Variable;
+};
+
+export const MismatchVariable = ( { variable }: Props ) => {
+	const { setValue } = useBoundProp();
+
+	const anchorRef = useRef< HTMLDivElement >( null );
+
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-variables-list-${ popupId }`,
+	} );
+
+	const [ infotipVisible, setInfotipVisible ] = useState( false );
+
+	const toggleInfotip = () => setInfotipVisible( ( prev ) => ! prev );
+	const closeInfotip = () => setInfotipVisible( false );
+
+	const triggerSelect = () => {
+		closeInfotip();
+
+		popupState.setAnchorEl( anchorRef.current );
+		popupState.open();
+	};
+
+	const clearValue = () => {
+		closeInfotip();
+		setValue( null );
+	};
+
+	return (
+		<Box ref={ anchorRef }>
+			{ infotipVisible && <Backdrop open onClick={ closeInfotip } invisible /> }
+			<Infotip
+				color="warning"
+				placement="right-start"
+				open={ infotipVisible }
+				disableHoverListener
+				onClose={ closeInfotip }
+				content={
+					<MismatchVariableAlert
+						onClose={ closeInfotip }
+						onClear={ clearValue }
+						triggerSelect={ triggerSelect }
+					/>
+				}
+				slotProps={ {
+					popper: {
+						modifiers: [
+							{
+								name: 'offset',
+								options: { offset: [ 0, 24 ] },
+							},
+						],
+					},
+				} }
+			>
+				<MismatchTag label={ variable.label } onClick={ toggleInfotip } />
+			</Infotip>
+
+			<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={ variable.type }
+				/>
+			</Popover>
+		</Box>
+	);
+};

package/src/controls/variable-control.tsx

@@ -4,23 +4,33 @@ import { type TransformablePropValue } from '@elementor/editor-props';
 
 import { AssignedVariable } from '../components/ui/variable/assigned-variable';
 import { DeletedVariable } from '../components/ui/variable/deleted-variable';
+import { MismatchVariable } from '../components/ui/variable/mismatch-variable';
 import { MissingVariable } from '../components/ui/variable/missing-variable';
 import { useVariable } from '../hooks/use-prop-variables';
+import { getVariableType } from '../variables-registry/variable-type-registry';
 
 export const VariableControl = () => {
-	const boundProp = useBoundProp().value as TransformablePropValue< string, string >;
+	const boundProp = useBoundProp();
 
-	const assignedVariable = useVariable( boundProp?.value );
+	const boundPropValue = boundProp.value as TransformablePropValue< string, string >;
+
+	const assignedVariable = useVariable( boundPropValue?.value );
 
 	if ( ! assignedVariable ) {
 		return <MissingVariable />;
 	}
 
-	const { $$type: propTypeKey } = boundProp;
+	const { $$type: propTypeKey } = boundPropValue;
 
 	if ( assignedVariable?.deleted ) {
 		return <DeletedVariable variable={ assignedVariable } propTypeKey={ propTypeKey } />;
 	}
 
+	const { isCompatible } = getVariableType( assignedVariable.type );
+
+	if ( isCompatible && ! isCompatible( boundProp?.propType, assignedVariable ) ) {
+		return <MismatchVariable variable={ assignedVariable } />;
+	}
+
 	return <AssignedVariable variable={ assignedVariable } propTypeKey={ propTypeKey } />;
 };

package/src/variables-registry/create-variable-type-registry.ts

@@ -12,7 +12,7 @@ import { type SvgIconProps } from '@elementor/ui';
 
 import { inheritanceTransformer } from '../transformers/inheritance-transformer';
 import { variableTransformer } from '../transformers/variable-transformer';
-import { type NormalizedVariable } from '../types';
+import { type NormalizedVariable, type Variable } from '../types';
 
 export type ValueFieldProps = {
 	value: string;
@@ -32,6 +32,7 @@ type VariableTypeOptions = {
 	propTypeUtil: PropTypeUtil< string, string >;
 	selectionFilter?: ( variables: NormalizedVariable[], propType: PropType ) => NormalizedVariable[];
 	valueTransformer?: ( value: string ) => PropValue;
+	isCompatible?: ( propType: PropType, variable: Variable ) => boolean;
 };
 
 export type VariableTypesMap = Record< string, VariableTypeOptions >;
@@ -48,11 +49,23 @@ export function createVariableTypeRegistry() {
 		selectionFilter,
 		valueTransformer,
 		fallbackPropTypeUtil,
+		isCompatible,
 	}: VariableTypeOptions ) => {
 		if ( variableTypes[ propTypeUtil.key ] ) {
 			throw new Error( `Variable with key "${ propTypeUtil.key }" is already registered.` );
 		}
 
+		if ( ! isCompatible ) {
+			isCompatible = ( propType, variable: Variable ) => {
+				if ( 'union' === propType.kind ) {
+					if ( variable.type in propType.prop_types ) {
+						return true;
+					}
+				}
+				return false;
+			};
+		}
+
 		variableTypes[ propTypeUtil.key ] = {
 			icon,
 			startIcon,
@@ -62,6 +75,7 @@ export function createVariableTypeRegistry() {
 			selectionFilter,
 			valueTransformer,
 			fallbackPropTypeUtil,
+			isCompatible,
 		};
 
 		registerTransformer( propTypeUtil.key );