@elementor/editor-editing-panel 3.33.0-99 → 3.34.2

package/src/styles-inheritance/transformers/box-shadow-transformer.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { Stack } from '@elementor/ui';
+
+type Shadow = {
+	hOffset?: string;
+	vOffset?: string;
+	blur?: string;
+	spread?: string;
+	color?: string;
+	position?: string | null;
+};
+
+export const boxShadowTransformer = createTransformer( ( value: Shadow ) => {
+	if ( ! value ) {
+		return null;
+	}
+
+	const { color, hOffset, vOffset, blur, spread, position } = value;
+
+	const colorValue = color || '#000000';
+	const sizes = [ hOffset || '0px', vOffset || '0px', blur || '10px', spread || '0px' ].join( ' ' );
+	const positionValue = position || 'outset';
+
+	return (
+		<Stack direction="column" gap={ 0.5 } pb={ 1 }>
+			<span>
+				{ colorValue } { positionValue }, { sizes }
+			</span>
+		</Stack>
+	);
+} );

package/src/styles-inheritance/transformers/color-transformer.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { Stack, styled, UnstableColorIndicator } from '@elementor/ui';
+
+function isValidCSSColor( value: string ): boolean {
+	if ( ! value.trim() ) {
+		return false;
+	}
+
+	return CSS.supports( 'color', value.trim() );
+}
+
+const StyledColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	width: '1em',
+	height: '1em',
+	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+	outline: `1px solid ${ theme.palette.action.disabled }`,
+	flexShrink: 0,
+} ) );
+
+export const colorTransformer = createTransformer( ( value: string ) => {
+	if ( ! isValidCSSColor( value ) ) {
+		return value;
+	}
+
+	return (
+		<Stack direction="row" gap={ 1 } alignItems="center">
+			<StyledColorIndicator size="inherit" component="span" value={ value } />
+			<span>{ value }</span>
+		</Stack>
+	);
+} );

package/src/styles-inheritance/transformers/repeater-to-items-transformer.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { type AnyTransformer, createTransformer } from '@elementor/editor-canvas';
+import { Stack } from '@elementor/ui';
+
+export const createRepeaterToItemsTransformer = ( originalTransformer: AnyTransformer, separator: string = ' ' ) => {
+	return createTransformer( ( value: string, options: { key: string; signal?: AbortSignal } ) => {
+		const stringResult = originalTransformer( value, options );
+
+		if ( ! stringResult || typeof stringResult !== 'string' ) {
+			return stringResult;
+		}
+
+		const parts = stringResult.split( separator ).filter( Boolean );
+
+		if ( parts.length <= 1 ) {
+			return stringResult;
+		}
+
+		return (
+			<Stack direction="column" gap={ 0.5 }>
+				{ parts.map( ( part, index ) => (
+					<Stack key={ index }>{ part.trim() }</Stack>
+				) ) }
+			</Stack>
+		);
+	} );
+};

package/src/utils/is-equal.ts

@@ -0,0 +1,53 @@
+export function isEqual( a: unknown, b: unknown ): boolean {
+	if ( a === b ) {
+		return true;
+	}
+
+	if ( a === null || b === null ) {
+		return false;
+	}
+
+	if ( typeof a !== typeof b ) {
+		return false;
+	}
+
+	if ( Array.isArray( a ) && Array.isArray( b ) ) {
+		if ( a.length !== b.length ) {
+			return false;
+		}
+
+		for ( let i = 0; i < a.length; i++ ) {
+			if ( ! isEqual( a[ i ], b[ i ] ) ) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	if ( typeof a === 'object' && typeof b === 'object' ) {
+		const objA = a as Record< string, unknown >;
+		const objB = b as Record< string, unknown >;
+
+		const keysA = Object.keys( objA );
+		const keysB = Object.keys( objB );
+
+		if ( keysA.length !== keysB.length ) {
+			return false;
+		}
+
+		for ( const key of keysA ) {
+			if ( ! ( key in objB ) ) {
+				return false;
+			}
+
+			if ( ! isEqual( objA[ key ], objB[ key ] ) ) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	return false;
+}

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

@@ -1,10 +1,12 @@
 import {
+	type DependencyTerm,
 	extractValue,
 	isDependencyMet,
 	type PropsSchema,
 	type PropType,
 	type TransformablePropValue,
 } from '@elementor/editor-props';
+import { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from '@elementor/session';
 
 type Value = TransformablePropValue< string > | null;
 
@@ -61,11 +63,12 @@ function extractPropOrderedDependencies(
 	);
 }
 
-export function updateValues(
+export function getUpdatedValues(
 	values: Values,
 	dependencies: string[],
 	propsSchema: PropsSchema,
-	elementValues: Values
+	elementValues: Values,
+	elementId: string
 ): Values {
 	if ( ! dependencies.length ) {
 		return values;
@@ -81,10 +84,34 @@ export function updateValues(
 				return newValues;
 			}
 
-			if ( ! isDependencyMet( propType?.dependencies, combinedValues ) ) {
+			const testDependencies = {
+				previousValues: isDependencyMet( propType.dependencies, elementValues ),
+				newValues: isDependencyMet( propType.dependencies, combinedValues ),
+			};
+
+			if ( ! testDependencies.newValues.isMet ) {
+				const newValue = handleUnmetCondition( {
+					failingDependencies: testDependencies.newValues.failingDependencies,
+					dependency,
+					elementValues: combinedValues,
+					defaultValue: propType.default as Value,
+					elementId,
+				} );
+
+				return {
+					...newValues,
+					...updateValue( path, newValue, combinedValues ),
+				};
+			}
+
+			if ( ! testDependencies.previousValues.isMet ) {
+				const savedValue = retrievePreviousValueFromStorage< Value >( { path: dependency, elementId } );
+
+				removePreviousValueFromStorage( { path: dependency, elementId } );
+
 				return {
 					...newValues,
-					...updateValue( path, null, combinedValues ),
+					...updateValue( path, savedValue ?? ( propType.default as Value ), combinedValues ),
 				};
 			}
 
@@ -106,12 +133,31 @@ function getPropType( schema: PropsSchema, elementValues: Values, path: string[]
 		return null;
 	}
 
-	return keys.reduce( ( prop: PropType | null, key, index ) => {
-		if ( ! prop?.kind ) {
-			return null;
-		}
+	return keys.reduce(
+		( prop: PropType | null, key, index ) =>
+			evaluatePropType( { prop, key, index, path, elementValues, basePropKey } ),
+		baseProp
+	);
+}
 
-		if ( 'union' === prop.kind ) {
+function evaluatePropType( props: {
+	prop: PropType | null;
+	key: string;
+	index: number;
+	path: string[];
+	elementValues: Values;
+	basePropKey: string;
+} ) {
+	const { prop } = props;
+
+	if ( ! prop?.kind ) {
+		return null;
+	}
+
+	const { key, index, path, elementValues, basePropKey } = props;
+
+	switch ( prop.kind ) {
+		case 'union':
 			const value = extractValue( path.slice( 0, index + 1 ), elementValues );
 			const type = ( value?.$$type as string ) ?? null;
 
@@ -120,18 +166,13 @@ function getPropType( schema: PropsSchema, elementValues: Values, path: string[]
 				elementValues,
 				path.slice( 0, index + 2 )
 			);
-		}
-
-		if ( 'array' === prop.kind ) {
+		case 'array':
 			return prop.item_prop_type;
-		}
-
-		if ( 'object' === prop.kind ) {
+		case 'object':
 			return prop.shape[ key ];
-		}
+	}
 
-		return prop[ key as keyof typeof prop ] as PropType;
-	}, baseProp );
+	return prop[ key as keyof typeof prop ] as PropType;
 }
 
 function updateValue( path: string[], value: Value, values: Values ) {
@@ -144,7 +185,7 @@ function updateValue( path: string[], value: Value, values: Values ) {
 		}
 
 		if ( index === path.length - 1 ) {
-			carry[ key ] = value !== null ? ( { ...( carry[ key ] ?? {} ), value } as Value ) : null;
+			carry[ key ] = value ?? null;
 
 			return ( carry[ key ]?.value as Values ) ?? carry.value;
 		}
@@ -154,3 +195,50 @@ function updateValue( path: string[], value: Value, values: Values ) {
 
 	return { [ topPropKey ]: newValue[ topPropKey ] ?? null };
 }
+
+function handleUnmetCondition( props: {
+	failingDependencies: DependencyTerm[];
+	dependency: string;
+	elementValues: Values;
+	defaultValue: Value;
+	elementId: string;
+} ) {
+	const { failingDependencies, dependency, elementValues, defaultValue, elementId } = props;
+	const newValue = failingDependencies.find( ( term ) => term.newValue )?.newValue ?? null;
+	const currentValue = extractValue( dependency.split( '.' ), elementValues ) ?? defaultValue;
+
+	savePreviousValueToStorage( {
+		path: dependency,
+		elementId,
+		value: currentValue,
+	} );
+
+	return newValue;
+}
+
+function savePreviousValueToStorage( { path, elementId, value }: { path: string; elementId: string; value: unknown } ) {
+	const prefix = `elementor/${ elementId }`;
+	const savedValue = retrievePreviousValueFromStorage( { path, elementId } );
+
+	if ( savedValue ) {
+		return;
+	}
+
+	const key = `${ prefix }:${ path }`;
+
+	setSessionStorageItem( key, value );
+}
+
+function retrievePreviousValueFromStorage< T >( { path, elementId }: { path: string; elementId: string } ) {
+	const prefix = `elementor/${ elementId }`;
+	const key = `${ prefix }:${ path }`;
+
+	return getSessionStorageItem< T >( key ) ?? null;
+}
+
+function removePreviousValueFromStorage( { path, elementId }: { path: string; elementId: string } ) {
+	const prefix = `elementor/${ elementId }`;
+	const key = `${ prefix }:${ path }`;
+
+	removeSessionStorageItem( key );
+}

package/src/utils/tracking/subscribe.ts

@@ -0,0 +1,7 @@
+import { stylesRepository } from '@elementor/editor-styles-repository';
+
+export const trackStyles = ( provider: string, event: string, data: Record< string, unknown > ) => {
+	const providerInstance = stylesRepository.getProviderByKey( provider );
+
+	providerInstance?.actions.tracking?.( { event, ...data } );
+};

package/src/components/custom-css-field.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { type PropsWithChildren } from 'react';
-import { ControlAdornmentsProvider } from '@elementor/editor-controls';
-
-import { CustomCssIndicator } from './custom-css-indicator';
-
-export const CustomCssField = ( { children }: PropsWithChildren< object > ) => {
-	return (
-		<ControlAdornmentsProvider
-			items={ [
-				{
-					id: 'custom-css-indicator',
-					Adornment: CustomCssIndicator,
-				},
-			] }
-		>
-			{ children }
-		</ControlAdornmentsProvider>
-	);
-};

package/src/components/custom-css.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { ControlAdornments, ControlFormLabel, CssEditor } from '@elementor/editor-controls';
-import { Stack } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useCustomCss } from '../hooks/use-custom-css';
-import { CustomCssField } from './custom-css-field';
-import { SectionContent } from './section-content';
-
-export const CustomCss = () => {
-	const { customCss, setCustomCss } = useCustomCss();
-	const [ localState, setLocalState ] = React.useState( {
-		value: customCss?.raw || '',
-		isValid: true,
-	} );
-
-	const handleChange = ( value: string, isValid: boolean ) => {
-		setLocalState( { value, isValid } );
-
-		if ( isValid ) {
-			setCustomCss( value, { history: { propDisplayName: 'Custom CSS' } } );
-		}
-	};
-
-	return (
-		<SectionContent>
-			<CustomCssField>
-				<Stack direction="row" alignItems="center" gap={ 1 }>
-					<ControlFormLabel>{ __( 'CSS code', 'elementor' ) }</ControlFormLabel>
-					<ControlAdornments />
-				</Stack>
-			</CustomCssField>
-			<CssEditor value={ localState.value } onChange={ handleChange } />
-		</SectionContent>
-	);
-};

package/src/components/style-sections/border-section/border-field.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { ControlFormLabel } from '@elementor/editor-controls';
-import { __ } from '@wordpress/i18n';
-
-import { useStylesFields } from '../../../hooks/use-styles-fields';
-import { AddOrRemoveContent } from '../../add-or-remove-content';
-import { BorderColorField } from './border-color-field';
-import { BorderStyleField } from './border-style-field';
-import { BorderWidthField } from './border-width-field';
-
-const BORDER_LABEL = __( 'Border', 'elementor' );
-
-const initialBorder = {
-	'border-width': { $$type: 'size', value: { size: 1, unit: 'px' } },
-	'border-color': { $$type: 'color', value: '#000000' },
-	'border-style': { $$type: 'string', value: 'solid' },
-};
-
-export const BorderField = () => {
-	const { values, setValues, canEdit } = useStylesFields( Object.keys( initialBorder ) );
-
-	const meta = { history: { propDisplayName: BORDER_LABEL } };
-
-	const addBorder = () => {
-		setValues( initialBorder, meta );
-	};
-
-	const removeBorder = () => {
-		setValues(
-			{
-				'border-width': null,
-				'border-color': null,
-				'border-style': null,
-			},
-			meta
-		);
-	};
-
-	const hasBorder = Object.values( values ?? {} ).some( Boolean );
-
-	return (
-		<AddOrRemoveContent
-			isAdded={ hasBorder }
-			onAdd={ addBorder }
-			onRemove={ removeBorder }
-			disabled={ ! canEdit }
-			renderLabel={ () => <ControlFormLabel>{ BORDER_LABEL }</ControlFormLabel> }
-		>
-			<BorderWidthField />
-			<BorderColorField />
-			<BorderStyleField />
-		</AddOrRemoveContent>
-	);
-};