@elementor/editor-components 3.35.0-389 → 3.35.0-390

package/package.json

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

package/src/component-instance-transformer.ts

@@ -1,8 +1,8 @@
 import { createTransformer, RenderContext } from '@elementor/editor-canvas';
 import { __getState as getState } from '@elementor/store';
 
+import { type ComponentInstanceOverrideProp } from './prop-types/component-instance-override-prop-type';
 import { selectUnpublishedComponents } from './store/store';
-import { type ComponentOverridePropValue } from './types';
 import { getComponentDocumentData } from './utils/component-document-data';
 
 type ComponentInstanceContext = {
@@ -19,7 +19,7 @@ export const componentInstanceTransformer = createTransformer(
 		overrides: overridesValue,
 	}: {
 		component_id: number | string;
-		overrides?: ComponentOverridePropValue[];
+		overrides?: ComponentInstanceOverrideProp[];
 	} ) => {
 		const unpublishedComponents = selectUnpublishedComponents( getState() );
 

package/src/component-override-transformer.ts

@@ -1,8 +1,8 @@
 import { createTransformer } from '@elementor/editor-canvas';
 
-import { type ComponentOverridePropValue } from './types';
+import { type ComponentInstanceOverridePropValue } from './prop-types/component-instance-override-prop-type';
 
-export const componentOverrideTransformer = createTransformer( ( override: ComponentOverridePropValue ) => {
+export const componentOverrideTransformer = createTransformer( ( override: ComponentInstanceOverridePropValue ) => {
 	const { override_key: key, override_value: overrideValue } = override;
 
 	return { [ key ]: overrideValue };

package/src/components/component-properties-panel/component-properties-panel-content.tsx

@@ -12,7 +12,7 @@ import { deleteOverridableGroup } from '../../store/actions/delete-overridable-g
 import { deleteOverridableProp } from '../../store/actions/delete-overridable-prop';
 import { reorderGroupProps } from '../../store/actions/reorder-group-props';
 import { reorderOverridableGroups } from '../../store/actions/reorder-overridable-groups';
-import { updateOverridableProp } from '../../store/actions/update-overridable-prop';
+import { updateOverridablePropParams } from '../../store/actions/update-overridable-prop-params';
 import { useCurrentComponentId } from '../../store/store';
 import { useOverridableProps } from '../component-panel-header/use-overridable-props';
 import { PropertiesEmptyState } from './properties-empty-state';
@@ -85,10 +85,10 @@ export function ComponentPropertiesPanelContent( { onClose }: Props ) {
 		setDocumentModifiedStatus( true );
 	};
 
-	const handlePropertyUpdate = ( propKey: string, data: { label: string; group: string | null } ) => {
-		updateOverridableProp( {
+	const handlePropertyUpdate = ( overrideKey: string, data: { label: string; group: string | null } ) => {
+		updateOverridablePropParams( {
 			componentId: currentComponentId,
-			propKey,
+			overrideKey,
 			label: data.label,
 			groupId: data.group,
 		} );

package/src/components/control-label.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type PropsWithChildren } from 'react';
+import { ControlAdornments, ControlFormLabel } from '@elementor/editor-controls';
+import { type FormLabelProps, Stack } from '@elementor/ui';
+
+type ControlLabelProps = FormLabelProps & PropsWithChildren< object >;
+
+export const ControlLabel = ( { children, ...props }: ControlLabelProps ) => {
+	return (
+		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 0.25 }>
+			<ControlFormLabel { ...props }>{ children }</ControlFormLabel>
+			<ControlAdornments />
+		</Stack>
+	);
+};

package/src/components/instance-editing-panel/instance-editing-panel.tsx

@@ -1,27 +1,27 @@
 import * as React from 'react';
-import { useElement } from '@elementor/editor-editing-panel';
-import { useElementSetting, useSelectedElement } from '@elementor/editor-elements';
+import { ControlAdornmentsProvider } from '@elementor/editor-controls';
+import { getFieldIndicators } from '@elementor/editor-editing-panel';
+import { useSelectedElement } from '@elementor/editor-elements';
 import { PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { type NumberPropValue } from '@elementor/editor-props';
 import { ComponentsIcon, PencilIcon } from '@elementor/icons';
-import { __getState as getState } from '@elementor/store';
 import { IconButton, Stack, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { componentInstancePropTypeUtil } from '../../prop-types/component-instance-prop-type';
-import { selectComponent, selectOverridableProps } from '../../store/store';
+import { useComponentInstanceSettings } from '../../hooks/use-component-instance-settings';
+import { useComponent, useOverridableProps } from '../../store/store';
 import { type OverridablePropsGroup } from '../../types';
 import { switchToComponent } from '../../utils/switch-to-component';
 import { EmptyState } from './empty-state';
 import { OverridePropsGroup } from './override-props-group';
 
 export function InstanceEditingPanel() {
-	const { element } = useElement();
-	const settings = useElementSetting( element.id, 'component_instance' );
-	const componentId = ( componentInstancePropTypeUtil.extract( settings )?.component_id as NumberPropValue )?.value;
+	const settings = useComponentInstanceSettings();
+	const componentId = settings?.component_id?.value;
 
-	const component = componentId ? selectComponent( getState(), componentId ) : null;
-	const overridableProps = componentId ? selectOverridableProps( getState(), componentId ) : null;
+	const overrides = settings?.overrides?.value;
+
+	const component = useComponent( componentId ?? null );
+	const overridableProps = useOverridableProps( componentId ?? null );
 
 	const componentInstanceId = useSelectedElement()?.element?.id ?? null;
 
@@ -58,15 +58,22 @@ export function InstanceEditingPanel() {
 				</Stack>
 			</PanelHeader>
 			<PanelBody>
-				{ isEmpty ? (
-					<EmptyState onEditComponent={ handleEditComponent } />
-				) : (
-					<Stack direction="column" alignItems="stretch">
-						{ groups.map( ( group ) => (
-							<OverridePropsGroup key={ group.id } group={ group } props={ overridableProps.props } />
-						) ) }
-					</Stack>
-				) }
+				<ControlAdornmentsProvider items={ getFieldIndicators( 'settings' ) }>
+					{ isEmpty ? (
+						<EmptyState onEditComponent={ handleEditComponent } />
+					) : (
+						<Stack direction="column" alignItems="stretch">
+							{ groups.map( ( group ) => (
+								<OverridePropsGroup
+									key={ group.id }
+									group={ group }
+									props={ overridableProps.props }
+									overrides={ overrides }
+								/>
+							) ) }
+						</Stack>
+					) }
+				</ControlAdornmentsProvider>
 			</PanelBody>
 		</>
 	);

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

@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { PropKeyProvider, PropProvider, useBoundProp } from '@elementor/editor-controls';
+import {
+	controlsRegistry,
+	type ControlType,
+	createTopLevelObjectType,
+	SettingsField,
+} from '@elementor/editor-editing-panel';
+import { type Control } from '@elementor/editor-elements';
+import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
+import { Stack } from '@elementor/ui';
+
+import { useControlsByWidgetType } from '../../hooks/use-controls-by-widget-type';
+import {
+	type ComponentInstanceOverrideProp,
+	componentInstanceOverridePropTypeUtil,
+} from '../../prop-types/component-instance-override-prop-type';
+import {
+	componentInstanceOverridesPropTypeUtil,
+	type ComponentInstanceOverridesPropValue,
+} from '../../prop-types/component-instance-overrides-prop-type';
+import { componentInstancePropTypeUtil } from '../../prop-types/component-instance-prop-type';
+import {
+	componentOverridablePropTypeUtil,
+	type ComponentOverridablePropValue,
+} from '../../prop-types/component-overridable-prop-type';
+import { updateOverridableProp } from '../../store/actions/update-overridable-prop';
+import { useCurrentComponentId } from '../../store/store';
+import { type OriginPropFields, type OverridableProp } from '../../types';
+import { getPropTypeForComponentOverride } from '../../utils/get-prop-type-for-component-override';
+import { ControlLabel } from '../control-label';
+
+type Props = {
+	overridableProp: OverridableProp;
+	overrides?: ComponentInstanceOverridesPropValue;
+};
+
+type OverridesSchema = Record< string, NonNullable< ComponentInstanceOverridesPropValue >[ number ] >;
+
+export function OverridePropControl( { overridableProp, overrides }: Props ) {
+	return (
+		<SettingsField bind="component_instance" propDisplayName={ overridableProp.label }>
+			<OverrideControl overridableProp={ overridableProp } overrides={ overrides } />
+		</SettingsField>
+	);
+}
+
+function OverrideControl( { overridableProp, overrides }: Props ) {
+	const componentId = useCurrentComponentId();
+	const { value: instanceValue, setValue: setInstanceValue } = useBoundProp( componentInstancePropTypeUtil );
+	const controls = useControlsByWidgetType(
+		overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
+	);
+
+	const propType = getPropTypeForComponentOverride( overridableProp );
+
+	if ( ! propType ) {
+		return null;
+	}
+
+	const propTypeSchema = createTopLevelObjectType( {
+		schema: {
+			[ overridableProp.overrideKey ]: propType,
+		},
+	} );
+
+	const componentInstanceId = instanceValue.component_id?.value;
+
+	if ( ! componentInstanceId ) {
+		throw new Error( 'Component ID is required' );
+	}
+
+	const matchingOverride = getMatchingOverride( overrides, overridableProp.overrideKey );
+
+	const propValue = matchingOverride ? getPropValue( matchingOverride ) : overridableProp.originValue;
+
+	const value = {
+		[ overridableProp.overrideKey ]: propValue,
+	} as OverridesSchema;
+
+	const setValue = ( newValue: OverridesSchema ) => {
+		const newPropValue = newValue[ overridableProp.overrideKey ] as
+			| ComponentInstanceOverrideProp
+			| ComponentOverridablePropValue;
+
+		const newOverrideValue = createOverrideValue( overridableProp.overrideKey, newPropValue, componentInstanceId );
+
+		let newOverrides =
+			overrides?.map( ( override ) => ( override === matchingOverride ? newOverrideValue : override ) ) ?? [];
+
+		if ( ! matchingOverride ) {
+			newOverrides = [ ...newOverrides, newOverrideValue ];
+		}
+
+		setInstanceValue( {
+			...instanceValue,
+			overrides: componentInstanceOverridesPropTypeUtil.create( newOverrides ),
+		} );
+
+		const overridableValue = componentOverridablePropTypeUtil.extract( newOverrideValue );
+		if ( overridableValue && componentId ) {
+			if ( overridableProp.originPropFields ) {
+				updateOverridableProp( componentId, overridableValue, overridableProp.originPropFields );
+
+				return;
+			}
+
+			const { elType, widgetType, propKey } = overridableProp;
+			updateOverridableProp( componentId, overridableValue, { elType, widgetType, propKey } );
+		}
+	};
+
+	return (
+		<PropProvider
+			propType={ propTypeSchema }
+			value={ value }
+			setValue={ setValue }
+			isDisabled={ () => {
+				return false;
+			} }
+		>
+			<PropKeyProvider bind={ overridableProp.overrideKey }>
+				<Stack direction="column" gap={ 1 } mb={ 1.5 }>
+					<ControlLabel>{ overridableProp.label }</ControlLabel>
+					{ getControl( controls, overridableProp?.originPropFields ?? overridableProp ) }
+				</Stack>
+			</PropKeyProvider>
+		</PropProvider>
+	);
+}
+
+function getPropValue( value: PropValue ): TransformablePropValue< string, unknown > | null {
+	const overridableValue = componentOverridablePropTypeUtil.extract( value );
+
+	if ( overridableValue ) {
+		// if overridable - return as is and let the control replacement handle the overridable value
+		return value as TransformablePropValue< string, unknown >;
+	}
+
+	if ( componentInstanceOverridePropTypeUtil.isValid( value ) ) {
+		return value.value.override_value as TransformablePropValue< string, unknown >;
+	}
+
+	return null;
+}
+
+function getMatchingOverride(
+	overrides: ComponentInstanceOverridesPropValue,
+	overrideKey: string
+): NonNullable< ComponentInstanceOverridesPropValue >[ number ] | null {
+	return (
+		overrides?.find( ( override ) => {
+			const overridableValue = componentOverridablePropTypeUtil.extract( override );
+			let comparedOverrideKey = null;
+
+			if ( overridableValue ) {
+				comparedOverrideKey = ( overridableValue.origin_value as ComponentInstanceOverrideProp )?.value
+					?.override_key;
+			} else {
+				comparedOverrideKey = override.value.override_key;
+			}
+
+			return comparedOverrideKey === overrideKey;
+		} ) ?? null
+	);
+}
+
+function createOverrideValue(
+	overrideKey: string,
+	overrideValue: ComponentInstanceOverrideProp | ComponentOverridablePropValue,
+	componentId: number
+): NonNullable< ComponentInstanceOverridesPropValue >[ number ] {
+	const overridableValue = componentOverridablePropTypeUtil.extract( overrideValue );
+
+	if ( overridableValue ) {
+		const innerOverride = componentInstanceOverridePropTypeUtil.create( {
+			override_key: overrideKey,
+			override_value: overridableValue.origin_value,
+			schema_source: {
+				type: 'component',
+				id: componentId,
+			},
+		} );
+
+		return componentOverridablePropTypeUtil.create( {
+			override_key: overridableValue.override_key,
+			origin_value: innerOverride,
+		} );
+	}
+
+	return componentInstanceOverridePropTypeUtil.create( {
+		override_key: overrideKey,
+		override_value: overrideValue,
+		schema_source: {
+			type: 'component',
+			id: componentId,
+		},
+	} );
+}
+
+function getControl( controls: Record< string, Control >, originPropFields: OriginPropFields ) {
+	const ControlComponent = controlsRegistry.get( controls[ originPropFields.propKey ].value.type as ControlType );
+
+	const controlProps = controls[ originPropFields.propKey ].value.props;
+
+	return <ControlComponent { ...controlProps } />;
+}

package/src/components/instance-editing-panel/override-props-group.tsx

@@ -2,16 +2,19 @@ import * as React from 'react';
 import { useId } from 'react';
 import { useStateByElement } from '@elementor/editor-editing-panel';
 import { CollapseIcon } from '@elementor/editor-ui';
-import { Collapse, ListItemButton, ListItemText, Stack } from '@elementor/ui';
+import { Box, Collapse, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
+import { type ComponentInstanceOverridesPropValue } from '../../prop-types/component-instance-overrides-prop-type';
 import { type OverridableProp, type OverridablePropsGroup } from '../../types';
+import { OverridePropControl } from './override-prop-control';
 
 type Props = {
 	group: OverridablePropsGroup;
 	props: Record< string, OverridableProp >;
+	overrides: ComponentInstanceOverridesPropValue;
 };
 
-export function OverridePropsGroup( { group, props }: Props ) {
+export function OverridePropsGroup( { group, props, overrides }: Props ) {
 	const [ isOpen, setIsOpen ] = useStateByElement( group.id, true );
 
 	const handleClick = () => {
@@ -25,7 +28,7 @@ export function OverridePropsGroup( { group, props }: Props ) {
 	const title = group.label;
 
 	return (
-		<>
+		<Box aria-label={ `${ title } section` }>
 			<ListItemButton
 				id={ labelId }
 				aria-controls={ contentId }
@@ -45,12 +48,15 @@ export function OverridePropsGroup( { group, props }: Props ) {
 			</ListItemButton>
 			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto">
 				<Stack direction="column" gap={ 1 } p={ 2 }>
-					{ group.props.map( ( propId ) => (
-						// TODO: Render actual controls
-						<pre key={ propId }>{ JSON.stringify( props[ propId ], null, 2 ) }</pre>
+					{ group.props.map( ( overrideKey ) => (
+						<OverridePropControl
+							key={ overrideKey }
+							overridableProp={ props[ overrideKey ] }
+							overrides={ overrides }
+						/>
 					) ) }
 				</Stack>
 			</Collapse>
-		</>
+		</Box>
 	);
 }

package/src/components/overridable-props/overridable-prop-control.tsx

@@ -4,13 +4,15 @@ import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundPro
 import { createTopLevelObjectType, useElement } from '@elementor/editor-editing-panel';
 import { type PropValue } from '@elementor/editor-props';
 
+import { type ComponentInstanceOverridePropValue } from '../../prop-types/component-instance-override-prop-type';
 import {
 	componentOverridablePropTypeUtil,
 	type ComponentOverridablePropValue,
 } from '../../prop-types/component-overridable-prop-type';
 import { OverridablePropProvider } from '../../provider/overridable-prop-context';
-import { updateOverridablePropOriginValue } from '../../store/actions/update-overridable-prop-origin-value';
-import { useCurrentComponentId } from '../../store/store';
+import { updateOverridableProp } from '../../store/actions/update-overridable-prop';
+import { useCurrentComponentId, useOverridableProps } from '../../store/store';
+import { getPropTypeForComponentOverride } from '../../utils/get-prop-type-for-component-override';
 
 export function OverridablePropControl< T extends object >( {
 	OriginalControl,
@@ -20,6 +22,7 @@ export function OverridablePropControl< T extends object >( {
 
 	const { value, bind, setValue, placeholder, ...propContext } = useBoundProp( componentOverridablePropTypeUtil );
 	const componentId = useCurrentComponentId();
+	const overridableProps = useOverridableProps( componentId );
 
 	if ( ! componentId ) {
 		return null;
@@ -29,6 +32,8 @@ export function OverridablePropControl< T extends object >( {
 		throw new Error( 'Override key is required' );
 	}
 
+	const isComponentInstance = elementType.key === 'e-component';
+
 	const setOverridableValue = ( newValue: Record< typeof bind, PropValue | null > ) => {
 		const propValue = {
 			...value,
@@ -36,15 +41,26 @@ export function OverridablePropControl< T extends object >( {
 		} as ComponentOverridablePropValue;
 
 		setValue( propValue );
-		updateOverridablePropOriginValue( componentId, propValue );
+		updateOverridableProp( componentId, propValue );
 	};
 
+	const defaultPropType = elementType.propsSchema[ bind ];
+
 	const propType = createTopLevelObjectType( {
 		schema: {
-			[ bind ]: elementType.propsSchema[ bind ],
+			[ bind ]:
+				isComponentInstance && overridableProps
+					? getPropTypeForComponentOverride( overridableProps.props[ value.override_key ] ) ?? defaultPropType
+					: defaultPropType,
 		},
 	} );
 
+	const propValue = (
+		isComponentInstance
+			? ( value.origin_value?.value as ComponentInstanceOverridePropValue ).override_value
+			: value.origin_value
+	) as PropValue;
+
 	const objectPlaceholder: Record< string, PropValue > | undefined = placeholder
 		? { [ bind ]: placeholder }
 		: undefined;
@@ -55,7 +71,9 @@ export function OverridablePropControl< T extends object >( {
 				{ ...propContext }
 				propType={ propType }
 				setValue={ setOverridableValue }
-				value={ { [ bind ]: value.origin_value } }
+				value={ {
+					[ bind ]: propValue,
+				} }
 				placeholder={ objectPlaceholder }
 			>
 				<PropKeyProvider bind={ bind }>

package/src/components/overridable-props/overridable-prop-indicator.tsx

@@ -3,14 +3,13 @@ import { useBoundProp } from '@elementor/editor-controls';
 import { useElement } from '@elementor/editor-editing-panel';
 import { getWidgetsCache } from '@elementor/editor-elements';
 import { type TransformablePropValue } from '@elementor/editor-props';
-import { __getState as getState } from '@elementor/store';
 import { bindPopover, bindTrigger, Popover, Tooltip, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
 import { useOverridablePropValue } from '../../provider/overridable-prop-context';
 import { setOverridableProp } from '../../store/actions/set-overridable-prop';
-import { selectOverridableProps, useCurrentComponentId } from '../../store/store';
+import { useCurrentComponentId, useOverridableProps } from '../../store/store';
 import { type OverridableProps } from '../../types';
 import { Indicator } from './indicator';
 import { OverridablePropForm } from './overridable-prop-form';
@@ -21,13 +20,12 @@ const FORBIDDEN_KEYS = [ '_cssid', 'attributes' ];
 export function OverridablePropIndicator() {
 	const { bind } = useBoundProp();
 	const componentId = useCurrentComponentId();
+	const overridableProps = useOverridableProps( componentId );
 
-	if ( ! isPropAllowed( bind ) || ! componentId ) {
+	if ( ! isPropAllowed( bind ) || ! componentId || ! overridableProps ) {
 		return null;
 	}
 
-	const overridableProps = selectOverridableProps( getState(), componentId );
-
 	return <Content componentId={ componentId } overridableProps={ overridableProps } />;
 }
 
@@ -63,7 +61,12 @@ export function Content( { componentId, overridableProps }: Props ) {
 	const { elType } = getWidgetsCache()?.[ elementType.key ] ?? { elType: 'widget' };
 
 	const handleSubmit = ( { label, group }: { label: string; group: string | null } ) => {
-		const originValue = ! overridableValue ? value ?? propType.default : overridableValue?.origin_value ?? {};
+		const propTypeDefault = propType.default ?? {};
+		const originValue = ( ! overridableValue ? value : overridableValue?.origin_value ) ?? propTypeDefault;
+
+		const matchingOverridableProp = overridableValue
+			? overridableProps?.props?.[ overridableValue.override_key ]
+			: undefined;
 
 		const overridablePropConfig = setOverridableProp( {
 			componentId,
@@ -75,6 +78,7 @@ export function Content( { componentId, overridableProps }: Props ) {
 			elType: elType ?? 'widget',
 			widgetType: elementType.key,
 			originValue,
+			originPropFields: matchingOverridableProp?.originPropFields,
 		} );
 
 		if ( ! overridableValue && overridablePropConfig ) {

package/src/create-component-type.ts

@@ -11,7 +11,8 @@ import { getCurrentDocument } from '@elementor/editor-documents';
 import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
-import { type ComponentInstancePropValue, type ExtendedWindow } from './types';
+import { type ComponentInstanceProp } from './prop-types/component-instance-prop-type';
+import { type ExtendedWindow } from './types';
 import { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
 
@@ -130,7 +131,7 @@ function createComponentView(
 
 		getComponentId() {
 			const componentInstance = (
-				this.options?.model?.get( 'settings' )?.get( 'component_instance' ) as ComponentInstancePropValue
+				this.options?.model?.get( 'settings' )?.get( 'component_instance' ) as ComponentInstanceProp
 			 )?.value;
 
 			return componentInstance.component_id.value;
@@ -186,7 +187,7 @@ function createComponentView(
 			if ( ! isAllowedToSwitchDocument ) {
 				options.showLockedByModal?.( lockedBy || '' );
 			} else {
-				switchToComponent( this.getComponentId(), this.model.get( 'id' ) );
+				switchToComponent( this.getComponentId() as number, this.model.get( 'id' ) );
 			}
 		}
 

package/src/hooks/regenerate-override-keys.ts

@@ -3,12 +3,14 @@ import { registerDataHook } from '@elementor/editor-v1-adapters';
 import { generateUniqueId } from '@elementor/utils';
 
 import { componentInstanceOverridePropTypeUtil } from '../prop-types/component-instance-override-prop-type';
-import { componentInstanceOverridesPropTypeUtil } from '../prop-types/component-instance-overrides-prop-type';
+import {
+	componentInstanceOverridesPropTypeUtil,
+	type ComponentInstanceOverridesPropValue,
+} from '../prop-types/component-instance-overrides-prop-type';
 import {
 	componentInstancePropTypeUtil,
 	type ComponentInstancePropValue,
 } from '../prop-types/component-instance-prop-type';
-import { type ComponentOverride } from '../types';
 import { isComponentInstance } from '../utils/is-component-instance';
 
 export function initRegenerateOverrideKeys() {
@@ -63,7 +65,7 @@ function regenerateOverrideKeys( element: V1Element ) {
 	const componentInstance = settings.component_instance;
 	const overrides = componentInstance.value.overrides;
 
-	const newOverrides = overrides.value.map( ( override: ComponentOverride ) => {
+	const newOverrides = overrides.value.map( ( override ) => {
 		if ( ! componentInstanceOverridePropTypeUtil.isValid( override ) ) {
 			return override;
 		}
@@ -97,7 +99,7 @@ function regenerateOverrideKeys( element: V1Element ) {
 
 function hasOverrides( settings: Record< string, unknown > ): settings is {
 	component_instance: NonNullable< ComponentInstancePropValue > & {
-		value: { overrides: { $$type: string; value: ComponentOverride[] } };
+		value: { overrides: { $$type: string; value: NonNullable< ComponentInstanceOverridesPropValue >[] } };
 	};
 } {
 	if ( ! componentInstancePropTypeUtil.isValid( settings?.component_instance ) ) {