@elementor/editor-editing-panel 4.1.0 → 4.2.0-840

package/src/components/style-sections/position-section/z-index-field.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { NumberControl } from '@elementor/editor-controls';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import { Alert, AlertTitle, Box, Infotip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
@@ -7,12 +9,36 @@ import { StylesFieldLayout } from '../../styles-field-layout';
 
 const Z_INDEX_LABEL = __( 'Z-index', 'elementor' );
 
-export const ZIndexField = () => {
-	return (
+export const ZIndexField = ( { disabled }: { disabled?: boolean } ) => {
+	const StyleField = (
 		<StylesField bind="z-index" propDisplayName={ Z_INDEX_LABEL }>
 			<StylesFieldLayout label={ Z_INDEX_LABEL }>
-				<NumberControl />
+				<NumberControl disabled={ disabled } />
 			</StylesFieldLayout>
 		</StylesField>
 	);
+
+	const content = (
+		<Alert color="secondary" icon={ <InfoCircleFilledIcon /> } size="small">
+			<AlertTitle>{ __( 'Z-index', 'elementor' ) }</AlertTitle>
+			<Box component="span">
+				{ __(
+					'z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.',
+					'elementor'
+				) }
+			</Box>
+		</Alert>
+	);
+	return disabled ? (
+		<Infotip
+			placement="right"
+			content={ content }
+			color="secondary"
+			slotProps={ { popper: { sx: { width: 300 } } } }
+		>
+			<Box>{ StyleField }</Box>
+		</Infotip>
+	) : (
+		<>{ StyleField }</>
+	);
 };

package/src/components/style-tab.tsx

@@ -81,6 +81,9 @@ export const StyleTab = () => {
 									'align-content',
 									'align-self',
 									'gap',
+									'order',
+									'grid-column',
+									'grid-row',
 								] }
 							/>
 							<StyleTabSection

package/src/contexts/styles-inheritance-context.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { createContext, type PropsWithChildren, useContext } from 'react';
+import { createContext, type PropsWithChildren, useContext, useMemo } from 'react';
 import { getWidgetsCache } from '@elementor/editor-elements';
-import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { classesPropTypeUtil, type ClassesPropValue, type PropValue } from '@elementor/editor-props';
 import { getBreakpointsTree } from '@elementor/editor-responsive';
 import { getStylesSchema } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
@@ -64,6 +64,20 @@ export function useStylesInheritanceChain( path: string[] ): SnapshotPropValue[]
 	return context.getInheritanceChain( snapshot, path, topLevelPropType );
 }
 
+const EMPTY_INHERITED_VALUES: Record< string, PropValue > = {};
+
+export function useInheritedValues( propKeys: string[] ): Record< string, PropValue > {
+	const snapshot = useStylesInheritanceSnapshot();
+
+	return useMemo( () => {
+		if ( ! snapshot || propKeys.length === 0 ) {
+			return EMPTY_INHERITED_VALUES;
+		}
+
+		return Object.fromEntries( propKeys.map( ( key ) => [ key, snapshot[ key ]?.[ 0 ]?.value ?? null ] ) );
+	}, [ snapshot, propKeys ] );
+}
+
 const useAppliedStyles = () => {
 	const currentClassesProp = useClassesProp();
 	const baseStyles = useBaseStyles();

package/src/controls-registry/conditional-field.tsx

@@ -1,22 +1,99 @@
+import { type FC, type ReactNode, useEffect, useRef } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { isDependency, isDependencyMet, type PropKey, type PropType } from '@elementor/editor-props';
+import { isDependency, isDependencyMet, type PropKey, type PropType, type PropValue } from '@elementor/editor-props';
 
+import { useInheritedValues } from '../contexts/styles-inheritance-context';
 import { useStylesFields } from '../hooks/use-styles-fields';
 
-export const ConditionalField: React.FC< {
-	children: React.ReactNode;
-} > = ( { children } ) => {
-	const { propType } = useBoundProp();
+type DepValues = Record< string, PropValue > | null;
+
+export const ConditionalField: FC< { children: ReactNode } > = ( { children } ) => {
+	const { propType, value, resetValue } = useBoundProp();
 
 	const depList = getDependencies( propType );
 
-	const { values: depValues } = useStylesFields( depList );
+	const { values: depValues, setValues: setDepValues } = useStylesFields( depList );
+	const inheritedValues = useInheritedValues( depList );
+
+	const resolvedValues = resolveWithInherited( depValues, inheritedValues );
+	const isHidden = ! isDependencyMet( propType?.dependencies, resolvedValues ).isMet;
 
-	const isHidden = ! isDependencyMet( propType?.dependencies, depValues ).isMet;
+	useSyncDepsWithInherited( { isHidden, depValues, value, inheritedValues, setDepValues, resetValue } );
 
 	return isHidden ? null : children;
 };
 
+function wasDepsCleared( prevDepValues: DepValues, depValues: DepValues ): boolean {
+	if ( ! prevDepValues ) {
+		return false;
+	}
+
+	return Object.keys( prevDepValues ).some(
+		( key ) => prevDepValues[ key ] && ( ! depValues || ! depValues[ key ] )
+	);
+}
+
+function useSyncDepsWithInherited( {
+	isHidden,
+	depValues,
+	value,
+	inheritedValues,
+	setDepValues,
+	resetValue,
+}: {
+	isHidden: boolean;
+	depValues: DepValues;
+	value: PropValue;
+	inheritedValues: Record< string, PropValue >;
+	setDepValues: ( props: Record< string, PropValue >, options: { history: { propDisplayName: string } } ) => void;
+	resetValue: () => void;
+} ) {
+	const syncRef = useRef( { hasSynced: false, prevDepValues: depValues } );
+
+	useEffect( () => {
+		const { hasSynced, prevDepValues } = syncRef.current;
+
+		if (
+			( hasSynced && value && wasDepsCleared( prevDepValues, depValues ) ) ||
+			( isHidden && depValues && value )
+		) {
+			resetValue();
+		}
+
+		if ( isHidden || ! value || ! depValues ) {
+			syncRef.current = { hasSynced: false, prevDepValues: depValues };
+			return;
+		}
+
+		if ( hasSynced ) {
+			syncRef.current.prevDepValues = depValues;
+			return;
+		}
+
+		syncRef.current = { hasSynced: true, prevDepValues: depValues };
+
+		Object.entries( depValues ).forEach( ( [ key, depValue ] ) => {
+			const inherited = inheritedValues[ key ];
+
+			if ( ! depValue && inherited ) {
+				setDepValues( { [ key ]: inherited }, { history: { propDisplayName: key } } );
+			}
+		} );
+	}, [ isHidden, depValues, value, inheritedValues, setDepValues, resetValue ] );
+}
+
+function resolveWithInherited( localValues: DepValues, inheritedValues: Record< string, PropValue > ): DepValues {
+	if ( ! localValues ) {
+		const hasInherited = Object.keys( inheritedValues ).length > 0;
+
+		return hasInherited ? { ...inheritedValues } : null;
+	}
+
+	return Object.fromEntries(
+		Object.entries( localValues ).map( ( [ key, val ] ) => [ key, val ?? inheritedValues[ key ] ?? null ] )
+	);
+}
+
 export function getDependencies( propType?: PropType ): PropKey[] {
 	if ( ! propType?.dependencies?.terms.length ) {
 		return [];

package/src/controls-registry/controls-registry.tsx

@@ -1,6 +1,8 @@
 import {
+	AttachmentTypeControl,
 	ChipsControl,
 	type ControlComponent,
+	DateRangeControl,
 	DateTimeControl,
 	EmailFormActionControl,
 	HtmlTagControl,
@@ -17,6 +19,7 @@ import {
 	SwitchControl,
 	TextAreaControl,
 	TextControl,
+	TimeRangeControl,
 	ToggleControl,
 	UrlControl,
 	VideoMediaControl,
@@ -24,6 +27,7 @@ import {
 import { type ControlLayout } from '@elementor/editor-elements';
 import {
 	booleanPropTypeUtil,
+	dateRangePropTypeUtil,
 	DateTimePropTypeUtil,
 	emailPropTypeUtil,
 	htmlV3PropTypeUtil,
@@ -37,6 +41,7 @@ import {
 	stringArrayPropTypeUtil,
 	stringPropTypeUtil,
 	svgSrcPropTypeUtil,
+	timeRangePropTypeUtil,
 	videoSrcPropTypeUtil,
 } from '@elementor/editor-props';
 
@@ -69,6 +74,17 @@ const controlTypes = {
 	video: { component: VideoMediaControl, layout: 'full', propTypeUtil: videoSrcPropTypeUtil },
 	'inline-editing': { component: InlineEditingControl, layout: 'full', propTypeUtil: htmlV3PropTypeUtil },
 	email: { component: EmailFormActionControl, layout: 'custom', propTypeUtil: emailPropTypeUtil },
+	'date-range': {
+		component: DateRangeControl,
+		layout: 'custom',
+		propTypeUtil: dateRangePropTypeUtil,
+	},
+	'time-range': {
+		component: TimeRangeControl,
+		layout: 'custom',
+		propTypeUtil: timeRangePropTypeUtil,
+	},
+	'attachment-type': { component: AttachmentTypeControl, layout: 'custom', propTypeUtil: stringPropTypeUtil },
 } as const satisfies ControlRegistry;
 
 export type ControlType = keyof typeof controlTypes;

package/src/hooks/use-styles-fields.ts

@@ -174,7 +174,7 @@ function useUndoableActions( {
 		}
 
 		function undo( _: UndoableUpdateStylePayload, { styleId, provider, prevProps }: UpdateStyleReturn ) {
-			provider.actions.updateProps?.( { id: styleId, meta, props: prevProps }, { elementId } );
+			provider.actions.updateProps?.( { id: styleId, meta, props: prevProps, mode: 'replace' }, { elementId } );
 		}
 	}, [ elementId, breakpoint, state, classesProp ] );
 }

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,