@elementor/editor-variables 3.33.0-98 → 3.34.2

package/src/service.ts

@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
+import { buildOperationsArray, type OperationResult } from './batch-operations';
 import { OP_RW, Storage, type TVariablesList } from './storage';
 import { styleVariablesRepository } from './style-variables-repository';
 import { type Variable } from './types';
@@ -12,8 +13,12 @@ export const service = {
 		return storage.load();
 	},
 
+	getWatermark: (): number => {
+		return storage.state.watermark;
+	},
+
 	init: () => {
-		service.load();
+		return service.load();
 	},
 
 	load: () => {
@@ -168,6 +173,60 @@ export const service = {
 				};
 			} );
 	},
+
+	batchSave: ( originalVariables: TVariablesList, currentVariables: TVariablesList ) => {
+		const operations = buildOperationsArray( originalVariables, currentVariables );
+		const batchPayload = { operations, watermark: storage.state.watermark };
+
+		if ( operations.length === 0 ) {
+			return Promise.resolve( {
+				success: true,
+				watermark: storage.state.watermark,
+				operations: 0,
+			} );
+		}
+
+		return apiClient
+			.batch( batchPayload )
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { results, watermark } = data;
+
+				handleWatermark( OP_RW, watermark );
+
+				if ( results ) {
+					results.forEach( ( result: OperationResult ) => {
+						if ( result.variable ) {
+							const { id: variableId, ...variableData } = result.variable;
+
+							if ( result.type === 'create' ) {
+								storage.add( variableId, variableData );
+							} else {
+								storage.update( variableId, variableData );
+							}
+
+							styleVariablesRepository.update( {
+								[ variableId ]: variableData,
+							} );
+						}
+					} );
+				}
+
+				return {
+					success: true,
+					watermark,
+					operations: operations.length,
+				};
+			} );
+	},
 };
 
 const handleWatermark = ( operation: string, newWatermark: number ) => {

package/src/storage.ts

@@ -2,6 +2,7 @@ export type TVariable = {
 	type: string;
 	label: string;
 	value: string;
+	order?: number;
 	deleted?: boolean;
 	deleted_at?: string;
 };
@@ -20,6 +21,10 @@ export class Storage {
 		variables: TVariablesList;
 	};
 
+	notifyChange() {
+		window.dispatchEvent( new Event( 'variables:updated' ) );
+	}
+
 	constructor() {
 		this.state = {
 			watermark: -1,
@@ -43,18 +48,21 @@ export class Storage {
 
 		localStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );
 		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );
+		this.notifyChange();
 	}
 
 	add( id: string, variable: TVariable ) {
 		this.load();
 		this.state.variables[ id ] = variable;
 		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );
+		this.notifyChange();
 	}
 
 	update( id: string, variable: TVariable ) {
 		this.load();
 		this.state.variables[ id ] = variable;
 		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );
+		this.notifyChange();
 	}
 
 	watermark( watermark: number ) {

package/src/types.ts

@@ -22,4 +22,5 @@ export type NormalizedVariable = {
 	key: string;
 	label: string;
 	value: string;
+	order?: number;
 };

package/src/utils/filter-by-search.ts

@@ -0,0 +1,5 @@
+export function filterBySearch< T extends { label: string } >( variables: T[], searchValue: string ): T[] {
+	const lowerSearchValue = searchValue.toLowerCase();
+
+	return variables.filter( ( variable ) => variable.label.toLowerCase().includes( lowerSearchValue ) );
+}

package/src/utils/tracking.ts

@@ -1,3 +1,5 @@
+import { getMixpanel } from '@elementor/mixpanel';
+
 type VariableEventData = {
 	varType: string;
 	controlPath: string;
@@ -5,35 +7,48 @@ type VariableEventData = {
 };
 
 export const trackVariableEvent = ( { varType, controlPath, action }: VariableEventData ) => {
-	const extendedWindow = window as unknown as Window & {
-		elementorCommon?: {
-			eventsManager?: {
-				dispatchEvent: ( name: string, data: Record< string, string > ) => void;
-				config?: {
-					locations: Record< string, string >;
-					secondaryLocations: Record< string, string >;
-					names: {
-						variables?: Record< string, string >;
-					};
-					triggers: Record< string, string >;
-					elements?: Record< string, string >;
-				};
-			};
-		};
-	};
-
-	const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+	const { dispatchEvent, config } = getMixpanel();
 	if ( ! config?.names?.variables?.[ action ] ) {
 		return;
 	}
 
 	const name = config.names.variables[ action ];
-	extendedWindow.elementorCommon?.eventsManager?.dispatchEvent( name, {
-		location: config.locations.variables,
-		secondaryLocation: config.secondaryLocations.variablesPopover,
-		trigger: config.triggers.click,
+	dispatchEvent?.( name, {
+		location: config?.locations?.variables || '',
+		secondaryLocation: config?.secondaryLocations?.variablesPopover || '',
+		trigger: config?.triggers?.click || '',
 		var_type: varType,
 		control_path: controlPath,
 		action_type: name,
 	} );
 };
+
+type VariablesManagerEventData = {
+	action: 'openManager' | 'add' | 'saveChanges' | 'delete';
+	varType?: string;
+	controlPath?: string;
+};
+
+export const trackVariablesManagerEvent = ( { action, varType, controlPath }: VariablesManagerEventData ) => {
+	const { dispatchEvent, config } = getMixpanel();
+	if ( ! config?.names?.variables?.[ action ] ) {
+		return;
+	}
+
+	const name = config.names.variables[ action ];
+	const eventData: Record< string, string > = {
+		location: config?.locations?.variablesManager || '',
+		trigger: config?.triggers?.click || '',
+		action_type: name,
+	};
+
+	if ( varType ) {
+		eventData.var_type = varType;
+	}
+
+	if ( controlPath ) {
+		eventData.style_control_path = controlPath;
+	}
+
+	dispatchEvent?.( name, eventData );
+};

package/src/utils/validations.ts

@@ -1,4 +1,8 @@
-import { __ } from '@wordpress/i18n';
+import type * as React from 'react';
+import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+import { type TVariable, type TVariablesList } from '../storage';
 
 export const ERROR_MESSAGES = {
 	MISSING_VARIABLE_NAME: __( 'Give your variable a name.', 'elementor' ),
@@ -8,21 +12,49 @@ export const ERROR_MESSAGES = {
 	VARIABLE_LABEL_MAX_LENGTH: __( 'Keep names up to 50 characters.', 'elementor' ),
 	DUPLICATED_LABEL: __( 'This variable name already exists. Please choose a unique name.', 'elementor' ),
 	UNEXPECTED_ERROR: __( 'There was a glitch. Try saving your variable again.', 'elementor' ),
+	BATCH: {
+		DUPLICATED_LABELS: ( count: number, name: string ) =>
+			// eslint-disable-next-line @wordpress/i18n-translator-comments
+			sprintf( __( 'We found %1$d duplicated %2$s.', 'elementor' ), count, name ),
+		UNEXPECTED_ERROR: __( 'There was a glitch.', 'elementor' ),
+		DUPLICATED_LABEL_ACTION: __( 'Take me there', 'elementor' ),
+		DUPLICATED_LABEL_ACTION_MESSAGE: __( 'Please rename the variables.', 'elementor' ),
+		UNEXPECTED_ERROR_ACTION_MESSAGE: __( 'Try saving your variables again.', 'elementor' ),
+	},
 } as const;
 
 export const VARIABLE_LABEL_MAX_LENGTH = 50;
 
-type ErrorResponse = {
+type BatchErrorData = {
+	[ id: string ]: {
+		status?: number;
+		message?: string;
+	};
+};
+export type ErrorResponse = {
 	response?: {
 		data?: {
 			code?: string;
+			data?: BatchErrorData;
 		};
 	};
 };
 
+export type ErrorAction = {
+	label?: string;
+	message?: string;
+	callback?: () => void;
+	data?: {
+		duplicatedIds?: string[];
+	};
+};
+
 export type MappedError = {
 	field: string;
 	message: string;
+	action?: ErrorAction;
+	severity?: 'error' | 'secondary';
+	IconComponent?: React.ElementType;
 };
 
 export const mapServerError = ( error: ErrorResponse ): MappedError | undefined => {
@@ -33,10 +65,43 @@ export const mapServerError = ( error: ErrorResponse ): MappedError | undefined
 		};
 	}
 
+	if ( error?.response?.data?.code === 'batch_duplicated_label' ) {
+		const errorData = error?.response?.data?.data ?? {};
+		const count = Object.keys( errorData ).length;
+		const name = count === 1 ? 'name' : 'names';
+		const duplicatedIds = Object.keys( errorData );
+
+		return {
+			field: 'label',
+			message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS( count, name ),
+			severity: 'error',
+			IconComponent: AlertTriangleFilledIcon,
+			action: {
+				label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
+				message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
+				data: {
+					duplicatedIds,
+				},
+			},
+		};
+	}
+
+	if ( error?.response?.data?.code === 'batch_operation_failed' ) {
+		return {
+			field: 'label',
+			message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
+			severity: 'secondary',
+			IconComponent: InfoCircleFilledIcon,
+			action: {
+				message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE,
+			},
+		};
+	}
+
 	return undefined;
 };
 
-export const validateLabel = ( name: string ): string => {
+export const validateLabel = ( name: string, variables?: TVariablesList ): string => {
 	if ( ! name.trim() ) {
 		return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
 	}
@@ -55,6 +120,10 @@ export const validateLabel = ( name: string ): string => {
 		return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
 	}
 
+	if ( Object.values( variables ?? {} ).some( ( variable: TVariable ) => variable.label === name ) ) {
+		return ERROR_MESSAGES.DUPLICATED_LABEL;
+	}
+
 	return '';
 };
 

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

@@ -19,6 +19,7 @@ export type ValueFieldProps = {
 	onChange: ( value: string ) => void;
 	onValidationChange?: ( value: string ) => void;
 	propType?: PropType;
+	error?: { value: string; message: string };
 };
 
 type FallbackPropTypeUtil = ReturnType< typeof createPropUtils >;
@@ -26,8 +27,9 @@ type FallbackPropTypeUtil = ReturnType< typeof createPropUtils >;
 type VariableTypeOptions = {
 	icon: ForwardRefExoticComponent< Omit< SvgIconProps, 'ref' > & RefAttributes< SVGSVGElement > >;
 	startIcon?: ( { value }: { value: string } ) => JSX.Element;
-	valueField: ( { value, onChange, onValidationChange, propType }: ValueFieldProps ) => JSX.Element;
+	valueField: ( { value, onChange, onValidationChange, propType, error }: ValueFieldProps ) => JSX.Element;
 	variableType: string;
+	defaultValue?: string;
 	fallbackPropTypeUtil: FallbackPropTypeUtil;
 	propTypeUtil: PropTypeUtil< string, string >;
 	selectionFilter?: ( variables: NormalizedVariable[], propType: PropType ) => NormalizedVariable[];
@@ -46,6 +48,7 @@ export function createVariableTypeRegistry() {
 		valueField,
 		propTypeUtil,
 		variableType,
+		defaultValue,
 		selectionFilter,
 		valueTransformer,
 		fallbackPropTypeUtil,
@@ -72,6 +75,7 @@ export function createVariableTypeRegistry() {
 			valueField,
 			propTypeUtil,
 			variableType,
+			defaultValue,
 			selectionFilter,
 			valueTransformer,
 			fallbackPropTypeUtil,
@@ -94,6 +98,10 @@ export function createVariableTypeRegistry() {
 		return variableTypes[ key ];
 	};
 
+	const getVariableTypes = () => {
+		return variableTypes;
+	};
+
 	const hasVariableType = ( key: string ) => {
 		return key in variableTypes;
 	};
@@ -101,6 +109,7 @@ export function createVariableTypeRegistry() {
 	return {
 		registerVariableType,
 		getVariableType,
+		getVariableTypes,
 		hasVariableType,
 	};
 }

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

@@ -1,3 +1,4 @@
 import { createVariableTypeRegistry } from './create-variable-type-registry';
 
-export const { registerVariableType, getVariableType, hasVariableType } = createVariableTypeRegistry();
+export const { registerVariableType, getVariableType, getVariableTypes, hasVariableType } =
+	createVariableTypeRegistry();

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

@@ -1,37 +0,0 @@
-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 DeletedTag = 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' } }>
-							({ __( '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 }
-		/>
-	);
-} );

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

@@ -1,37 +0,0 @@
-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/tags/missing-tag.tsx

@@ -1,25 +0,0 @@
-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 }
-		/>
-	);
-} );