@elementor/editor-editing-panel 4.1.0-823 → 4.1.0-825

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.1.0-823",
+  "version": "4.1.0-825",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-823",
-    "@elementor/editor-canvas": "4.1.0-823",
-    "@elementor/editor-controls": "4.1.0-823",
-    "@elementor/editor-documents": "4.1.0-823",
-    "@elementor/editor-elements": "4.1.0-823",
-    "@elementor/editor-interactions": "4.1.0-823",
-    "@elementor/editor-panels": "4.1.0-823",
-    "@elementor/editor-props": "4.1.0-823",
-    "@elementor/editor-responsive": "4.1.0-823",
-    "@elementor/editor-styles": "4.1.0-823",
-    "@elementor/editor-styles-repository": "4.1.0-823",
-    "@elementor/editor-ui": "4.1.0-823",
-    "@elementor/editor-v1-adapters": "4.1.0-823",
+    "@elementor/editor": "4.1.0-825",
+    "@elementor/editor-canvas": "4.1.0-825",
+    "@elementor/editor-controls": "4.1.0-825",
+    "@elementor/editor-documents": "4.1.0-825",
+    "@elementor/editor-elements": "4.1.0-825",
+    "@elementor/editor-interactions": "4.1.0-825",
+    "@elementor/editor-notifications": "4.1.0-825",
+    "@elementor/editor-panels": "4.1.0-825",
+    "@elementor/editor-props": "4.1.0-825",
+    "@elementor/editor-responsive": "4.1.0-825",
+    "@elementor/editor-styles": "4.1.0-825",
+    "@elementor/editor-styles-repository": "4.1.0-825",
+    "@elementor/editor-ui": "4.1.0-825",
+    "@elementor/editor-v1-adapters": "4.1.0-825",
+    "@elementor/http-client": "4.1.0-825",
     "@elementor/icons": "^1.68.0",
-    "@elementor/editor-variables": "4.1.0-823",
-    "@elementor/locations": "4.1.0-823",
-    "@elementor/menus": "4.1.0-823",
-    "@elementor/schema": "4.1.0-823",
-    "@elementor/session": "4.1.0-823",
+    "@elementor/editor-variables": "4.1.0-825",
+    "@elementor/locations": "4.1.0-825",
+    "@elementor/menus": "4.1.0-825",
+    "@elementor/query": "4.1.0-825",
+    "@elementor/schema": "4.1.0-825",
+    "@elementor/session": "4.1.0-825",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-823",
-    "@elementor/wp-media": "4.1.0-823",
+    "@elementor/utils": "4.1.0-825",
+    "@elementor/wp-media": "4.1.0-825",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/design-system-import/components/conflict-options.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Card, CardActionArea, Radio, RadioGroup, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type ConflictStrategy } from '../types';
+
+type Option = {
+	value: ConflictStrategy;
+	title: string;
+	description: string;
+};
+
+const getOptions = (): Option[] => [
+	{
+		value: 'replace',
+		title: __( 'Replace existing values', 'elementor' ),
+		description: __( 'Imported design system values will overwrite existing variables and classes.', 'elementor' ),
+	},
+	{
+		value: 'keep',
+		title: __( 'Keep existing values', 'elementor' ),
+		description: __( 'Existing variables and classes will not change.', 'elementor' ),
+	},
+];
+
+type Props = {
+	value: ConflictStrategy | null;
+	onChange: ( value: ConflictStrategy ) => void;
+};
+
+export const ConflictOptions = ( { value, onChange }: Props ) => {
+	const options = getOptions();
+
+	return (
+		<Stack spacing={ 1 }>
+			<Typography variant="body1">
+				{ __( 'How to handle conflicts with existing variables or classes?', 'elementor' ) }
+			</Typography>
+			<RadioGroup
+				value={ value ?? '' }
+				onChange={ ( _: unknown, next: string ) => onChange( next as ConflictStrategy ) }
+			>
+				<Stack spacing={ 1 }>
+					{ options.map( ( option ) => (
+						<Card key={ option.value } variant="outlined">
+							<CardActionArea onClick={ () => onChange( option.value ) }>
+								<Stack direction="row" alignItems="center" spacing={ 2 } padding={ 2 }>
+									<Radio
+										value={ option.value }
+										checked={ value === option.value }
+										inputProps={ { 'aria-label': option.title } }
+									/>
+									<Stack direction="column" spacing={ 0.5 }>
+										<Typography variant="subtitle2">{ option.title }</Typography>
+										<Typography variant="caption" color="text.secondary">
+											{ option.description }
+										</Typography>
+									</Stack>
+								</Stack>
+							</CardActionArea>
+						</Card>
+					) ) }
+				</Stack>
+			</RadioGroup>
+		</Stack>
+	);
+};

package/src/components/design-system-import/components/trigger-button.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { closeDialog, openDialog } from '@elementor/editor-ui';
+import { UploadIcon } from '@elementor/icons';
+import { useIsMutating } from '@elementor/query';
+import { IconButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { IMPORT_DESIGN_SYSTEM_MUTATION_KEY } from '../hooks/use-import-request';
+import { ImportDesignSystemDialog } from '../import-design-system-dialog';
+
+export const TriggerButton = () => {
+	const isImporting = useIsMutating( { mutationKey: [ ...IMPORT_DESIGN_SYSTEM_MUTATION_KEY ] } ) > 0;
+
+	const label = isImporting
+		? __( 'Importing design system…', 'elementor' )
+		: __( 'Import Design System', 'elementor' );
+
+	const handleClick = () => {
+		openDialog( {
+			component: <ImportDesignSystemDialog onClose={ closeDialog } />,
+		} );
+	};
+
+	return (
+		<Tooltip title={ label } placement="top">
+			<span>
+				<IconButton size="tiny" disabled={ isImporting } aria-label={ label } onClick={ handleClick }>
+					<UploadIcon fontSize="tiny" />
+				</IconButton>
+			</span>
+		</Tooltip>
+	);
+};

package/src/components/design-system-import/hooks/use-dialog-state.ts

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+import { type ConflictStrategy } from '../types';
+
+export type DialogState = {
+	file: File | null;
+	conflictStrategy: ConflictStrategy | null;
+};
+
+const initialState: DialogState = {
+	file: null,
+	conflictStrategy: null,
+};
+
+export const useDialogState = () => {
+	const [ state, setState ] = useState< DialogState >( initialState );
+
+	const setFile = ( file: File | null ) => setState( ( prev ) => ( { ...prev, file } ) );
+
+	const setConflictStrategy = ( conflictStrategy: ConflictStrategy ) =>
+		setState( ( prev ) => ( { ...prev, conflictStrategy } ) );
+
+	return { ...state, setFile, setConflictStrategy };
+};

package/src/components/design-system-import/hooks/use-import-request.ts

@@ -0,0 +1,38 @@
+import { GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload } from '@elementor/editor-canvas';
+import { reloadCurrentDocument } from '@elementor/editor-documents';
+import { httpService } from '@elementor/http-client';
+import { useMutation } from '@elementor/query';
+
+import { type ConflictStrategy } from '../types';
+
+const IMPORT_ENDPOINT = '/design-system/import';
+
+export const IMPORT_DESIGN_SYSTEM_MUTATION_KEY = [ 'design-system-import' ] as const;
+
+type ImportRequestArgs = {
+	file: File;
+	conflictStrategy: ConflictStrategy;
+};
+
+export const useImportRequest = () => {
+	return useMutation( {
+		mutationKey: [ ...IMPORT_DESIGN_SYSTEM_MUTATION_KEY ],
+		mutationFn: async ( { file, conflictStrategy }: ImportRequestArgs ): Promise< void > => {
+			const formData = new FormData();
+			formData.append( 'file', file );
+			formData.append( 'conflict_strategy', conflictStrategy );
+
+			const response = await httpService().post< ImportedGlobalStylesPayload >( IMPORT_ENDPOINT, formData, {
+				headers: { 'Content-Type': 'multipart/form-data' },
+			} );
+
+			window.dispatchEvent(
+				new CustomEvent< ImportedGlobalStylesPayload >( GLOBAL_STYLES_IMPORTED_EVENT, {
+					detail: response?.data,
+				} )
+			);
+
+			await reloadCurrentDocument();
+		},
+	} );
+};

package/src/components/design-system-import/import-design-system-dialog.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { closeDialog, FileUploadDropzone, FileUploadRow, openDialog } from '@elementor/editor-ui';
+import { Button, DialogActions, DialogContent, DialogHeader, DialogTitle, Stack } from '@elementor/ui';
+import { __, sprintf } from '@wordpress/i18n';
+
+import { ConflictOptions } from './components/conflict-options';
+import { useDialogState } from './hooks/use-dialog-state';
+import { useImportRequest } from './hooks/use-import-request';
+import { notifyImportFailure, notifyImportInProgress, notifyImportSuccess } from './import-notifications';
+
+const ALLOWED_FILE_TYPES: `${ string }/${ string }`[] = [ 'application/zip' ];
+const FILE_INPUT_ACCEPT = 'application/zip,.zip';
+// TODO: Replace with the actual server-enforced limit once finalized.
+const MAX_FILE_SIZE_MB = 3;
+
+type Props = {
+	onClose: () => void;
+};
+
+const reopenSelf = () => {
+	openDialog( {
+		component: <ImportDesignSystemDialog onClose={ closeDialog } />,
+	} );
+};
+
+export const ImportDesignSystemDialog = ( { onClose }: Props ) => {
+	const { file, conflictStrategy, setFile, setConflictStrategy } = useDialogState();
+	const importMutation = useImportRequest();
+
+	const isImportEnabled = Boolean( file && conflictStrategy );
+
+	const handleImport = async () => {
+		if ( ! file || ! conflictStrategy ) {
+			return;
+		}
+
+		notifyImportInProgress();
+		onClose();
+
+		try {
+			await importMutation.mutateAsync( { file, conflictStrategy } );
+			notifyImportSuccess();
+		} catch {
+			notifyImportFailure( reopenSelf );
+		}
+	};
+
+	return (
+		<>
+			<DialogHeader logo={ false }>
+				<DialogTitle>{ __( 'Import Design System', 'elementor' ) }</DialogTitle>
+			</DialogHeader>
+			<DialogContent>
+				<Stack spacing={ 3 }>
+					{ file ? (
+						<FileUploadRow file={ file } onRemove={ () => setFile( null ) } />
+					) : (
+						<FileUploadDropzone
+							onFileSelected={ setFile }
+							allowedFileTypes={ ALLOWED_FILE_TYPES }
+							accept={ FILE_INPUT_ACCEPT }
+							regionLabel={ __( 'Design system file dropzone', 'elementor' ) }
+							helperText={ sprintf(
+								// translators: %d is the maximum file size in megabytes.
+								__( 'zip (max. %dMB)', 'elementor' ),
+								MAX_FILE_SIZE_MB
+							) }
+						/>
+					) }
+					<ConflictOptions value={ conflictStrategy } onChange={ setConflictStrategy } />
+				</Stack>
+			</DialogContent>
+			<DialogActions>
+				<Button size="medium" color="secondary" onClick={ onClose }>
+					{ __( 'Cancel', 'elementor' ) }
+				</Button>
+				<Button
+					size="medium"
+					variant="contained"
+					color="primary"
+					disabled={ ! isImportEnabled }
+					onClick={ handleImport }
+				>
+					{ __( 'Import', 'elementor' ) }
+				</Button>
+			</DialogActions>
+		</>
+	);
+};

package/src/components/design-system-import/import-notifications.tsx

@@ -0,0 +1,57 @@
+import { dismissNotification, notify } from '@elementor/editor-notifications';
+import { getQueryClient } from '@elementor/query';
+import { __ } from '@wordpress/i18n';
+
+import { IMPORT_DESIGN_SYSTEM_MUTATION_KEY } from './hooks/use-import-request';
+
+const IMPORT_STARTED_NOTIFICATION_ID = 'design-system-import-started';
+const SUCCESS_NOTIFICATION_ID = 'design-system-import-succeeded';
+const FAILURE_NOTIFICATION_ID = 'design-system-import-failed';
+
+export const notifyImportInProgress = () => {
+	notify( {
+		id: IMPORT_STARTED_NOTIFICATION_ID,
+		type: 'info',
+		message: __( 'Import in Progress. You will be notified when the import is complete.', 'elementor' ),
+	} );
+};
+
+export const notifyImportSuccess = () => {
+	dismissNotification( IMPORT_STARTED_NOTIFICATION_ID );
+
+	notify( {
+		id: SUCCESS_NOTIFICATION_ID,
+		type: 'success',
+		message: __( 'Design system imported', 'elementor' ),
+	} );
+};
+
+export const notifyImportFailure = ( onRetry: () => void ) => {
+	dismissNotification( IMPORT_STARTED_NOTIFICATION_ID );
+
+	notify( {
+		id: FAILURE_NOTIFICATION_ID,
+		type: 'error',
+		message: __( 'Your design system import failed', 'elementor' ),
+		additionalActionProps: [
+			{
+				size: 'small',
+				variant: 'outlined',
+				color: 'error',
+				children: __( 'Try again', 'elementor' ),
+				onClick: () => {
+					dismissNotification( FAILURE_NOTIFICATION_ID );
+
+					const isImporting =
+						getQueryClient().isMutating( { mutationKey: [ ...IMPORT_DESIGN_SYSTEM_MUTATION_KEY ] } ) > 0;
+
+					if ( isImporting ) {
+						return;
+					}
+
+					onRetry();
+				},
+			},
+		],
+	} );
+};

package/src/components/design-system-import/types.ts

@@ -0,0 +1 @@
+export type ConflictStrategy = 'replace' | 'keep';

package/src/utils/prop-dependency-utils.ts

@@ -4,9 +4,12 @@ import {
 	extractValue,
 	isDependency,
 	isDependencyMet,
+	isOverridable,
+	isTransformable,
 	type Props,
 	type PropsSchema,
 	type PropType,
+	rewrapOverridableValue,
 	type TransformablePropValue,
 } from '@elementor/editor-props';
 import { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from '@elementor/session';
@@ -94,12 +97,19 @@ export function getUpdatedValues(
 
 			if ( ! testDependencies.previousValues.isMet ) {
 				const savedValue = retrievePreviousValueFromStorage< Value >( { path: dependency, elementId } );
+				const currentValue = extractValue( path, combinedValues, [], {
+					unwrapOverridableLeaf: false,
+				} ) as Value;
 
 				removePreviousValueFromStorage( { path: dependency, elementId } );
 
+				const restored = isCompatibleSavedValue( savedValue, currentValue )
+					? savedValue
+					: ( propType.default as Value );
+
 				return {
 					...newValues,
-					...updateValue( path, savedValue ?? ( propType.default as Value ), combinedValues ),
+					...updateValue( path, restored, combinedValues ),
 				};
 			}
 
@@ -165,23 +175,88 @@ function evaluatePropType( props: {
 
 function updateValue( path: string[], value: Value, values: Values ) {
 	const topPropKey = path[ 0 ];
-	const newValue: Values = { ...values };
+	const root: Values = { ...values };
 
-	path.reduce( ( carry: Values | null, key, index ) => {
-		if ( ! carry ) {
-			return null;
+	let carry: Values = root;
+
+	for ( let index = 0; index < path.length; index++ ) {
+		const key = path[ index ];
+		const isLeaf = index === path.length - 1;
+
+		if ( isLeaf ) {
+			carry[ key ] = mergeLeafValue( carry[ key ], value );
+			break;
 		}
 
-		if ( index === path.length - 1 ) {
-			carry[ key ] = value ?? null;
+		const next = cloneDescent( carry[ key ] );
 
-			return ( carry[ key ]?.value as Values ) ?? carry.value;
+		if ( ! next ) {
+			break;
 		}
 
-		return ( carry[ key ]?.value as Values ) ?? carry.value;
-	}, newValue );
+		carry[ key ] = next.replacement;
+		carry = next.descended;
+	}
+
+	return { [ topPropKey ]: root[ topPropKey ] ?? null };
+}
+
+function cloneDescent( child: Value ): { replacement: Value; descended: Values } | null {
+	if ( ! child ) {
+		return null;
+	}
+
+	if ( isOverridable( child ) ) {
+		const origin = child.value.origin_value;
+
+		if ( ! origin || ! isTransformable( origin ) ) {
+			return null;
+		}
+
+		const descended: Values = { ...( origin.value as Values ) };
+		const replacement: Value = {
+			...child,
+			value: {
+				...child.value,
+				origin_value: { ...origin, value: descended },
+			},
+		};
+
+		return { replacement, descended };
+	}
+
+	if ( isTransformable( child ) ) {
+		const descended: Values = { ...( child.value as Values ) };
+		const replacement: Value = { ...child, value: descended };
+
+		return { replacement, descended };
+	}
+
+	return null;
+}
+
+function isCompatibleSavedValue( saved: Value | null, current: Value ): saved is Value {
+	if ( ! saved ) {
+		return false;
+	}
+
+	return isOverridable( saved ) === isOverridable( current );
+}
+
+function mergeLeafValue( existing: Value, incoming: Value ) {
+	if ( incoming === null ) {
+		return null;
+	}
+
+	if ( incoming && isOverridable( incoming ) ) {
+		return incoming;
+	}
+
+	if ( existing && isOverridable( existing ) && incoming ) {
+		return rewrapOverridableValue( existing, incoming );
+	}
 
-	return { [ topPropKey ]: newValue[ topPropKey ] ?? null };
+	return incoming;
 }
 
 function handleUnmetCondition( props: {
@@ -196,7 +271,8 @@ function handleUnmetCondition( props: {
 		( term ): term is Dependency => 'newValue' in term && !! term.newValue
 	) as Dependency | undefined;
 	const newValue = termWithNewValue?.newValue ?? null;
-	const currentValue = extractValue( dependency.split( '.' ), elementValues ) ?? defaultValue;
+	const currentValue =
+		extractValue( dependency.split( '.' ), elementValues, [], { unwrapOverridableLeaf: false } ) ?? defaultValue;
 
 	savePreviousValueToStorage( {
 		path: dependency,