@elementor/editor-editing-panel 1.48.0 → 3.32.0-20

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

@@ -7,7 +7,7 @@ export type Color = {
 };
 
 export const backgroundColorOverlayTransformer = createTransformer( ( value: Color ) => (
-	<Stack direction="row" gap={ 10 }>
+	<Stack direction="row" gap={ 1 } alignItems="center">
 		<ItemIconColor value={ value } />
 		<ItemLabelColor value={ value } />
 	</Stack>
@@ -23,5 +23,9 @@ const ItemLabelColor = ( { value: { color } }: { value: Color } ) => {
 };
 
 export const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	width: '1em',
+	height: '1em',
 	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+	outline: `1px solid ${ theme.palette.action.disabled }`,
+	flexShrink: 0,
 } ) );

package/src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx

@@ -17,7 +17,7 @@ type Gradient = {
 };
 
 export const backgroundGradientOverlayTransformer = createTransformer( ( value: Gradient ) => (
-	<Stack direction="row" gap={ 10 }>
+	<Stack direction="row" gap={ 1 } alignItems="center">
 		<ItemIconGradient value={ value } />
 		<ItemLabelGradient value={ value } />
 	</Stack>
@@ -31,10 +31,10 @@ const ItemIconGradient = ( { value }: { value: Gradient } ) => {
 
 const ItemLabelGradient = ( { value }: { value: Gradient } ) => {
 	if ( value.type === 'linear' ) {
-		return <span>{ __( 'Linear Gradient', 'elementor' ) }</span>;
+		return <span>{ __( 'Linear gradient', 'elementor' ) }</span>;
 	}
 
-	return <span>{ __( 'Radial Gradient', 'elementor' ) }</span>;
+	return <span>{ __( 'Radial gradient', 'elementor' ) }</span>;
 };
 
 const getGradientValue = ( gradient: Gradient ) => {

package/src/styles-inheritance/transformers/background-image-overlay-transformer.tsx

@@ -16,7 +16,7 @@ type Image = {
 };
 
 export const backgroundImageOverlayTransformer = createTransformer( ( value: Image ) => (
-	<Stack direction="row" gap={ 10 }>
+	<Stack direction="row" gap={ 1 } alignItems="center">
 		<ItemIconImage value={ value } />
 		<ItemLabelImage value={ value } />
 	</Stack>
@@ -33,6 +33,7 @@ const ItemIconImage = ( { value }: { value: Image } ) => {
 				width: '1em',
 				borderRadius: `${ theme.shape.borderRadius / 2 }px`,
 				outline: `1px solid ${ theme.palette.action.disabled }`,
+				flexShrink: 0,
 			} ) }
 		/>
 	);

package/src/utils/get-styles-provider-color.ts

@@ -26,3 +26,11 @@ export const getStylesProviderThemeColor = ( provider: string ): ( ( theme: Them
 
 	return getStyleProviderColors( provider ).getThemeColor;
 };
+
+export function getTempStylesProviderThemeColor( provider: string ): ( ( theme: Theme ) => string ) | null {
+	if ( isElementsStylesProvider( provider ) ) {
+		return ( theme: Theme ) => theme.palette.primary.main;
+	}
+
+	return getStylesProviderThemeColor( provider );
+}

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

@@ -0,0 +1,156 @@
+import {
+	extractValue,
+	isDependencyMet,
+	type PropsSchema,
+	type PropType,
+	type TransformablePropValue,
+} from '@elementor/editor-props';
+
+type Value = TransformablePropValue< string > | null;
+
+export type Values = Record< string, Value >;
+
+export function extractOrderedDependencies(
+	bind: string,
+	propsSchema: PropsSchema,
+	elementValues: Values,
+	dependenciesPerTargetMapping: Record< string, string[] >
+): string[] {
+	const prop = getPropType( propsSchema, elementValues, bind.split( '.' ) );
+
+	if ( ! prop ) {
+		return [];
+	}
+
+	const dependencies: string[] = [];
+
+	if ( 'object' === prop.kind ) {
+		dependencies.push( ...Object.keys( prop.shape ).map( ( key ) => bind + '.' + key ) );
+	}
+
+	const directDependencies = extractPropOrderedDependencies( bind, dependenciesPerTargetMapping );
+
+	if ( ! dependencies.length ) {
+		return directDependencies;
+	}
+
+	return dependencies.reduce(
+		( carry, dependency ) => [
+			...carry,
+			...extractOrderedDependencies( dependency, propsSchema, elementValues, dependenciesPerTargetMapping ),
+		],
+		directDependencies
+	);
+}
+
+function extractPropOrderedDependencies(
+	bind: string,
+	dependenciesPerTargetMapping: Record< string, string[] >
+): string[] {
+	if ( ! dependenciesPerTargetMapping?.[ bind ]?.length ) {
+		return [];
+	}
+
+	return dependenciesPerTargetMapping[ bind ].reduce< string[] >(
+		( dependencies, dependency ) => [
+			...dependencies,
+			dependency,
+			...extractPropOrderedDependencies( dependency, dependenciesPerTargetMapping ),
+		],
+		[]
+	);
+}
+
+export function updateValues(
+	values: Values,
+	dependencies: string[],
+	propsSchema: PropsSchema,
+	elementValues: Values
+): Values {
+	if ( ! dependencies.length ) {
+		return values;
+	}
+
+	return dependencies.reduce(
+		( newValues, dependency ) => {
+			const path = dependency.split( '.' );
+			const propType = getPropType( propsSchema, elementValues, path );
+			const combinedValues = { ...elementValues, ...newValues };
+
+			if ( ! propType ) {
+				return newValues;
+			}
+
+			if ( ! isDependencyMet( propType?.dependencies, combinedValues ) ) {
+				return {
+					...newValues,
+					...updateValue( path, null, combinedValues ),
+				};
+			}
+
+			return newValues;
+		},
+		{ ...values }
+	);
+}
+
+function getPropType( schema: PropsSchema, elementValues: Values, path: string[] ): PropType | null {
+	if ( ! path.length ) {
+		return null;
+	}
+
+	const [ basePropKey, ...keys ] = path;
+	const baseProp = schema[ basePropKey ];
+
+	if ( ! baseProp ) {
+		return null;
+	}
+
+	return keys.reduce( ( prop: PropType | null, key, index ) => {
+		if ( ! prop?.kind ) {
+			return null;
+		}
+
+		if ( 'union' === prop.kind ) {
+			const value = extractValue( path.slice( 0, index + 1 ), elementValues );
+			const type = ( value?.$$type as string ) ?? null;
+
+			return getPropType(
+				{ [ basePropKey ]: prop.prop_types?.[ type ] },
+				elementValues,
+				path.slice( 0, index + 2 )
+			);
+		}
+
+		if ( 'array' === prop.kind ) {
+			return prop.item_prop_type;
+		}
+
+		if ( 'object' === prop.kind ) {
+			return prop.shape[ key ];
+		}
+
+		return prop[ key as keyof typeof prop ] as PropType;
+	}, baseProp );
+}
+
+function updateValue( path: string[], value: Value, values: Values ) {
+	const topPropKey = path[ 0 ];
+	const newValue: Values = { ...values };
+
+	path.reduce( ( carry: Values | null, key, index ) => {
+		if ( ! carry ) {
+			return null;
+		}
+
+		if ( index === path.length - 1 ) {
+			carry[ key ] = value !== null ? ( { ...( carry[ key ] ?? {} ), value } as Value ) : null;
+
+			return ( carry[ key ]?.value as Values ) ?? carry.value;
+		}
+
+		return ( carry[ key ]?.value as Values ) ?? carry.value;
+	}, newValue );
+
+	return { [ topPropKey ]: newValue[ topPropKey ] ?? null };
+}

package/src/components/popover-scrollable-content.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { PopoverScrollableContent as BasePopoverScrollableContent } from '@elementor/editor-ui';
-
-import { useSectionWidth } from '../contexts/section-context';
-
-type Props = React.ComponentProps< typeof BasePopoverScrollableContent >;
-
-export const PopoverScrollableContent = ( props: Props ) => {
-	const sectionWidth = useSectionWidth();
-
-	return <BasePopoverScrollableContent { ...props } width={ sectionWidth } />;
-};

package/src/components/style-sections/size-section/object-position-field.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { PositionControl } from '@elementor/editor-controls';
-import { __ } from '@wordpress/i18n';
-
-import { StylesField } from '../../../controls-registry/styles-field';
-
-const OBJECT_POSITION_LABEL = __( 'Object position', 'elementor' );
-
-export const ObjectPositionField = () => {
-	return (
-		<StylesField bind="object-position" propDisplayName={ OBJECT_POSITION_LABEL }>
-			<PositionControl />
-		</StylesField>
-	);
-};

package/src/sync/experiments-flags.ts

@@ -1,5 +0,0 @@
-// Experimental features flags
-export const EXPERIMENTAL_FEATURES = {
-	V_3_30: 'e_v_3_30',
-	V_3_31: 'e_v_3_31',
-};