@elementor/editor-editing-panel 4.1.0-811 → 4.1.0-813

package/package.json

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

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,96 @@
+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 ) ) {
+			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 [];