@elementor/editor-components 4.0.0-513 → 4.0.0-514

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.0.0-513",
+  "version": "4.0.0-514",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-513",
-    "@elementor/editor-canvas": "4.0.0-513",
-    "@elementor/editor-controls": "4.0.0-513",
-    "@elementor/editor-documents": "4.0.0-513",
-    "@elementor/editor-editing-panel": "4.0.0-513",
-    "@elementor/editor-elements": "4.0.0-513",
-    "@elementor/editor-elements-panel": "4.0.0-513",
-    "@elementor/editor-mcp": "4.0.0-513",
-    "@elementor/editor-panels": "4.0.0-513",
-    "@elementor/editor-props": "4.0.0-513",
-    "@elementor/editor-styles-repository": "4.0.0-513",
-    "@elementor/editor-ui": "4.0.0-513",
-    "@elementor/editor-v1-adapters": "4.0.0-513",
-    "@elementor/http-client": "4.0.0-513",
+    "@elementor/editor": "4.0.0-514",
+    "@elementor/editor-canvas": "4.0.0-514",
+    "@elementor/editor-controls": "4.0.0-514",
+    "@elementor/editor-documents": "4.0.0-514",
+    "@elementor/editor-editing-panel": "4.0.0-514",
+    "@elementor/editor-elements": "4.0.0-514",
+    "@elementor/editor-elements-panel": "4.0.0-514",
+    "@elementor/editor-mcp": "4.0.0-514",
+    "@elementor/editor-panels": "4.0.0-514",
+    "@elementor/editor-props": "4.0.0-514",
+    "@elementor/editor-styles-repository": "4.0.0-514",
+    "@elementor/editor-ui": "4.0.0-514",
+    "@elementor/editor-v1-adapters": "4.0.0-514",
+    "@elementor/http-client": "4.0.0-514",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "4.0.0-513",
-    "@elementor/query": "4.0.0-513",
-    "@elementor/schema": "4.0.0-513",
-    "@elementor/store": "4.0.0-513",
+    "@elementor/mixpanel": "4.0.0-514",
+    "@elementor/query": "4.0.0-514",
+    "@elementor/schema": "4.0.0-514",
+    "@elementor/store": "4.0.0-514",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-513",
+    "@elementor/utils": "4.0.0-514",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.0.0-513",
-    "@elementor/editor-current-user": "4.0.0-513"
+    "@elementor/editor-notifications": "4.0.0-514",
+    "@elementor/editor-current-user": "4.0.0-514"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/instance-editing-panel/override-prop-control.tsx

@@ -12,10 +12,12 @@ import {
 	type ControlType,
 	createTopLevelObjectType,
 	ElementProvider,
+	isDynamicPropValue,
 	SettingsField,
 	useElement,
 } from '@elementor/editor-editing-panel';
 import { type Control, getContainer, getElementType } from '@elementor/editor-elements';
+import { type PropType, type PropValue } from '@elementor/editor-props';
 import { Stack } from '@elementor/ui';
 
 import { useControlsByWidgetType } from '../../hooks/use-controls-by-widget-type';
@@ -77,12 +79,6 @@ function OverrideControl( { overridableProp, overrides }: Props ) {
 		return null;
 	}
 
-	const propTypeSchema = createTopLevelObjectType( {
-		schema: {
-			[ overridableProp.overrideKey ]: propType,
-		},
-	} );
-
 	const componentInstanceId = instanceValue.component_id?.value;
 
 	if ( ! componentInstanceId ) {
@@ -97,9 +93,11 @@ function OverrideControl( { overridableProp, overrides }: Props ) {
 	} as OverridesSchema;
 
 	const setValue = ( newValue: OverridesSchema ) => {
-		const newPropValue = newValue[ overridableProp.overrideKey ] as
-			| ComponentInstanceOverrideProp
-			| ComponentOverridableProp;
+		const newPropValue = getTempNewValueForDynamicProp(
+			propType,
+			propValue,
+			newValue[ overridableProp.overrideKey ]
+		);
 
 		const newOverrideValue = createOverrideValue( {
 			matchingOverride,
@@ -155,6 +153,12 @@ function OverrideControl( { overridableProp, overrides }: Props ) {
 		return null;
 	}
 
+	const propTypeSchema = createTopLevelObjectType( {
+		schema: {
+			[ overridableProp.overrideKey ]: propType,
+		},
+	} );
+
 	return (
 		<OverridablePropProvider
 			value={ componentOverridablePropTypeUtil.extract( matchingOverride ) ?? undefined }
@@ -185,6 +189,17 @@ function OverrideControl( { overridableProp, overrides }: Props ) {
 	);
 }
 
+// temp solution to allow dynamic values to be overridden, will be removed once placeholder is implemented
+function getTempNewValueForDynamicProp( propType: PropType, propValue: PropValue, newPropValue: PropValue ) {
+	const isRemovingOverride = newPropValue === null;
+
+	if ( isRemovingOverride && isDynamicPropValue( propValue ) ) {
+		return ( propType.default ?? null ) as ComponentInstanceOverrideProp | ComponentOverridableProp;
+	}
+
+	return newPropValue as ComponentInstanceOverrideProp | ComponentOverridableProp;
+}
+
 function getMatchingOverride(
 	overrides: ComponentInstanceOverridesPropValue,
 	overrideKey: string

package/src/utils/get-prop-type-for-component-override.ts

@@ -7,17 +7,15 @@ export const getPropTypeForComponentOverride = ( overridableProp: OverridablePro
 		return getPropType( overridableProp.originPropFields );
 	}
 
-	const { elType, widgetType, propKey, elementId } = overridableProp;
+	const { widgetType, propKey } = overridableProp;
 
 	return getPropType( {
-		elType,
 		widgetType,
 		propKey,
-		elementId,
 	} );
 };
 
-function getPropType( { widgetType, propKey }: OriginPropFields ) {
+function getPropType( { widgetType, propKey }: Pick< OriginPropFields, 'widgetType' | 'propKey' > ) {
 	const widgetPropsSchema = getWidgetsCache()?.[ widgetType ]?.atomic_props_schema;
 
 	return widgetPropsSchema?.[ propKey ];