@elementor/editor-components 4.1.0-748 → 4.1.0-749

package/package.json

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

package/src/components/errors.ts

@@ -1,6 +1,13 @@
 import { createError } from '@elementor/utils';
 
+import { type OverridableProp } from '../types';
+
 export const OverrideControlInnerElementNotFoundError = createError< { componentId: number; elementId: string } >( {
 	code: 'override_control_inner_element_not_found',
 	message: `Component inner element not found for override control. The element may have been deleted without updating the overridable props, or the component has not finished rendering yet.`,
 } );
+
+export const OverrideControlPropTypeNotFoundError = createError< { overridableProp: OverridableProp } >( {
+	code: 'override_control_prop_type_not_found',
+	message: 'Prop type not found for override control.',
+} );

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useMemo } from 'react';
 import {
 	ControlReplacementsProvider,
 	getControlReplacements,
@@ -18,7 +17,7 @@ import {
 	SettingsField,
 	useElement,
 } from '@elementor/editor-editing-panel';
-import { type Control, getElementSettings, getElementType } from '@elementor/editor-elements';
+import { type Control } from '@elementor/editor-elements';
 import { type AnyTransformable, type PropType, type PropValue } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 
@@ -30,7 +29,6 @@ import {
 import {
 	type ComponentInstanceOverride,
 	componentInstanceOverridesPropTypeUtil,
-	type ComponentInstanceOverridesPropValue,
 } from '../../prop-types/component-instance-overrides-prop-type';
 import { componentInstancePropTypeUtil } from '../../prop-types/component-instance-prop-type';
 import {
@@ -49,15 +47,12 @@ import { type OriginPropFields, type OverridableProp, type OverridableProps } fr
 import { getPropTypeForComponentOverride } from '../../utils/get-prop-type-for-component-override';
 import { getMatchingOverride } from '../../utils/overridable-props-utils';
 import { resolveOverridePropValue } from '../../utils/resolve-override-prop-value';
-import { resolveOverridesChain } from '../../utils/resolve-overrides-chain';
 import { ControlLabel } from '../control-label';
-import { OverrideControlInnerElementNotFoundError } from '../errors';
+import { OverrideControlPropTypeNotFoundError } from '../errors';
 import { correctExposedEmptyOverride } from './utils/correct-exposed-empty-override';
-import {
-	applyOverridesToSettings,
-	type OverridesMapping,
-	unwrapOverridableSettings,
-} from './utils/resolve-element-settings';
+import { unwrapOverridableSettings } from './utils/resolve-element-settings';
+import { useOverrideControlDependencies } from './utils/use-override-dependencies';
+import { useResolvedInnerElement } from './utils/use-resolved-inner-element';
 
 type Props = {
 	overrideKey: string;
@@ -65,7 +60,7 @@ type Props = {
 
 export function OverridePropControl( { overrideKey }: Props ) {
 	const overridableProps = useComponentOverridableProps();
-	const overridableProp = overridableProps?.props[ overrideKey ];
+	const overridableProp = overridableProps.props[ overrideKey ];
 
 	if ( ! overridableProp ) {
 		return null;
@@ -92,75 +87,38 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 	const overrides = useComponentInstanceOverrides();
 
 	const controls = useControlsByWidgetType(
-		overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
+		overridableProp.originPropFields?.widgetType ?? overridableProp.widgetType
 	);
 	const controlReplacements = getControlReplacements();
 
 	const matchingOverride = getMatchingOverride( overrides, overridableProp.overrideKey );
 
-	if ( ! componentId ) {
-		throw new Error( 'Component ID is required' );
-	}
+	const { propKey } = overridableProp.originPropFields ?? overridableProp;
+	const propType = getPropTypeForComponentOverride( overridableProp );
 
-	if ( ! overridableProps ) {
-		throw new Error( 'Component has no overridable props' );
+	if ( ! propType ) {
+		throw new OverrideControlPropTypeNotFoundError( { context: { overridableProp } } );
 	}
 
-	const {
-		elementId: originElementId,
-		widgetType,
-		elType,
-		propKey,
-	} = overridableProp.originPropFields ?? overridableProp;
-	const type = elType === 'widget' ? widgetType : elType;
-	const elementType = getElementType( type );
-
-	const { elementId, overridesMapping } = useMemo( () => {
-		const overridesChainResult = resolveOverridesChain( {
-			outerOverridableProp: overridableProp,
-			outerInstanceId: componentInstanceElement.element.id,
-		} );
-
-		if ( overridesChainResult.isChainBroken ) {
-			throw new OverrideControlInnerElementNotFoundError( {
-				context: { componentId, elementId: originElementId },
-			} );
-		}
-
-		return {
-			elementId: overridesChainResult.innerElement.id,
-			overridesMapping: overridesChainResult.overridesMapping,
-		};
-	}, [ overridableProp, componentInstanceElement.element.id, componentId, originElementId ] );
-
-	// Not reactive to inner element store changes — intentional.
-	// Inner element settings can only change in component edit mode, which unmounts this component.
-	const settingsWithInnerOverrides = useMemo( () => {
-		const settings = getElementSettings< AnyTransformable >(
-			elementId,
-			Object.keys( elementType?.propsSchema ?? {} )
-		);
-
-		return applyOverridesToSettings( settings, overridesMapping );
-	}, [ elementId, elementType?.propsSchema, overridesMapping ] );
-
-	const resolvedElementSettings = useMemo( () => {
-		const withAllOverrides = applyOverridesToSettings(
-			settingsWithInnerOverrides,
-			formatOverridesToApply( overrides )
-		);
-		return unwrapOverridableSettings( withAllOverrides );
-	}, [ settingsWithInnerOverrides, overrides ] );
+	const { elementId, elementType, resolvedElementSettings, resolvedOriginValues } =
+		useResolvedInnerElement( overridableProp );
 
-	const propType = getPropTypeForComponentOverride( overridableProp );
+	const { overrideValue, isDisabled, isHidden } = useOverrideControlDependencies( {
+		existingOverride: matchingOverride,
+		resolvedElementSettings,
+		elementType,
+		elementId,
+		propKey,
+	} );
 
-	if ( ! propType || ! elementType ) {
+	if ( isHidden ) {
 		return null;
 	}
 
 	const { propValue, placeholderValue } = resolveValueAndPlaceholder(
 		matchingOverride,
-		settingsWithInnerOverrides,
+		overrideValue,
+		resolvedOriginValues,
 		propKey
 	);
 
@@ -172,16 +130,17 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 		[ overridableProp.overrideKey ]: placeholderValue,
 	} as OverridesSchema;
 
-	const setValue = ( newValue: OverridesSchema ) => {
-		if ( ! overridableProps ) {
-			setInstanceValue( {
-				...instanceValue,
-				overrides: undefined,
-			} );
+	const { control, controlProps, layout } = getControlParams(
+		controls,
+		overridableProp.originPropFields ?? overridableProp,
+		overridableProp.label
+	);
 
-			return;
-		}
+	const propTypeSchema = createTopLevelObjectType( {
+		schema: { [ overridableProp.overrideKey ]: propType },
+	} );
 
+	const setValue = ( newValue: OverridesSchema ) => {
 		let newPropValue = getTempNewValueForDynamicProp(
 			propType,
 			propValue,
@@ -228,52 +187,34 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 		}
 	};
 
-	const { control, controlProps, layout } = getControlParams(
-		controls,
-		overridableProp?.originPropFields ?? overridableProp,
-		overridableProp.label
-	);
-
-	const propTypeSchema = createTopLevelObjectType( {
-		schema: {
-			[ overridableProp.overrideKey ]: propType,
-		},
-	} );
-
 	return (
 		<OverridablePropProvider
 			value={ componentOverridablePropTypeUtil.extract( matchingOverride ) ?? undefined }
 			componentInstanceElement={ componentInstanceElement }
 		>
 			<ElementProvider
-				element={ { id: elementId, type } }
+				element={ { id: elementId, type: elementType.key } }
 				elementType={ elementType }
 				settings={ resolvedElementSettings }
 			>
-				<SettingsField bind={ propKey } propDisplayName={ overridableProp.label }>
-					<PropProvider
-						propType={ propTypeSchema }
-						value={ value }
-						setValue={ setValue }
-						placeholder={ placeholder }
-						isDisabled={ () => {
-							return false;
-						} }
-					>
-						<PropKeyProvider bind={ overridableProp.overrideKey }>
-							<ControlReplacementsProvider replacements={ controlReplacements }>
-								<Box mb={ 1.5 }>
-									<ControlTypeContainer layout={ layout }>
-										{ layout !== 'custom' && (
-											<ControlLabel>{ overridableProp.label }</ControlLabel>
-										) }
-										<OriginalControl control={ control } controlProps={ controlProps } />
-									</ControlTypeContainer>
-								</Box>
-							</ControlReplacementsProvider>
-						</PropKeyProvider>
-					</PropProvider>
-				</SettingsField>
+				<PropProvider
+					propType={ propTypeSchema }
+					value={ value }
+					setValue={ setValue }
+					placeholder={ placeholder }
+					isDisabled={ isDisabled }
+				>
+					<PropKeyProvider bind={ overridableProp.overrideKey }>
+						<ControlReplacementsProvider replacements={ controlReplacements }>
+							<Box mb={ 1.5 }>
+								<ControlTypeContainer layout={ layout }>
+									{ layout !== 'custom' && <ControlLabel>{ overridableProp.label }</ControlLabel> }
+									<OriginalControl control={ control } controlProps={ controlProps } />
+								</ControlTypeContainer>
+							</Box>
+						</ControlReplacementsProvider>
+					</PropKeyProvider>
+				</PropProvider>
 			</ElementProvider>
 		</OverridablePropProvider>
 	);
@@ -283,16 +224,17 @@ type ElementSettings = Record< string, AnyTransformable | null >;
 
 function resolveValueAndPlaceholder(
 	matchingOverride: ComponentInstanceOverride | null,
-	settingsWithInnerOverrides: ElementSettings,
+	overrideValue: AnyTransformable | null,
+	resolvedOriginValues: ElementSettings,
 	propKey: string
 ) {
-	const overrideValue = matchingOverride ? resolveOverridePropValue( matchingOverride ) : null;
-
-	const placeholderSettings = unwrapOverridableSettings( settingsWithInnerOverrides );
+	const placeholderSettings = unwrapOverridableSettings( resolvedOriginValues );
 	const inheritedValue = placeholderSettings[ propKey ] ?? null;
 	const isInheritedDynamic = isDynamicPropValue( inheritedValue );
 
-	const propValue = isInheritedDynamic && ! matchingOverride ? inheritedValue : overrideValue;
+	const shouldUseInheritedAsValue = isInheritedDynamic && ! matchingOverride;
+
+	const propValue = shouldUseInheritedAsValue ? inheritedValue : overrideValue;
 	const placeholderValue = matchingOverride || isInheritedDynamic ? null : inheritedValue;
 
 	return { propValue, placeholderValue };
@@ -408,31 +350,3 @@ function isValidOverride( overridableProps: OverridableProps, override: Componen
 
 	return !! overridableProps.props[ overridableKey ];
 }
-
-function formatOverridesToApply( overrides: ComponentInstanceOverridesPropValue ): OverridesMapping {
-	if ( ! overrides ) {
-		return {};
-	}
-
-	const result: OverridesMapping = {};
-
-	for ( const item of overrides ) {
-		const overridable = componentOverridablePropTypeUtil.extract( item );
-		let override: PropValue = item;
-
-		if ( overridable ) {
-			override = overridable.origin_value;
-		}
-
-		const extractedOverride = componentInstanceOverridePropTypeUtil.extract( override );
-		if ( ! extractedOverride ) {
-			continue;
-		}
-
-		result[ extractedOverride.override_key ] = {
-			value: extractedOverride.override_value as AnyTransformable | null,
-		};
-	}
-
-	return result;
-}

package/src/components/instance-editing-panel/utils/resolve-element-settings.ts

@@ -2,7 +2,7 @@ import { type AnyTransformable } from '@elementor/editor-props';
 
 import { componentOverridablePropTypeUtil } from '../../../prop-types/component-overridable-prop-type';
 
-type ElementSettings = Record< string, AnyTransformable | null >;
+export type ElementSettings = Record< string, AnyTransformable | null >;
 
 export type OverridesMapping = {
 	[ key: string ]: {

package/src/components/instance-editing-panel/utils/use-override-dependencies.ts

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import {
+	type DependencyEffect,
+	extractDependencyEffect,
+	extractOrderedDependencies,
+	getElementSettingsWithDefaults,
+	getUpdatedValues,
+} from '@elementor/editor-editing-panel';
+import { type ElementType } from '@elementor/editor-elements';
+import { type AnyTransformable } from '@elementor/editor-props';
+
+import { type ComponentInstanceOverride } from '../../../prop-types/component-instance-overrides-prop-type';
+import { resolveOverridePropValue } from '../../../utils/resolve-override-prop-value';
+import { type ElementSettings } from './resolve-element-settings';
+
+type OverrideDependenciesResult = DependencyEffect & {
+	overrideValue: AnyTransformable | null;
+};
+
+export function useOverrideControlDependencies( {
+	existingOverride,
+	resolvedElementSettings,
+	elementId,
+	elementType,
+	propKey,
+}: {
+	existingOverride: ComponentInstanceOverride | null;
+	resolvedElementSettings: ElementSettings;
+	elementType: ElementType;
+	elementId: string;
+	propKey: string;
+} ): OverrideDependenciesResult {
+	return useMemo( () => {
+		const { isDisabled, isHidden } = extractDependencyEffect(
+			propKey,
+			elementType.propsSchema,
+			resolvedElementSettings
+		);
+
+		const existingOverrideValue = existingOverride ? resolveOverridePropValue( existingOverride ) : null;
+		const settingsForDepsNewValuesCalculation = { ...resolvedElementSettings, [ propKey ]: existingOverrideValue };
+
+		const resolvedSettingsWithDefaults = getElementSettingsWithDefaults(
+			elementType.propsSchema,
+			settingsForDepsNewValuesCalculation
+		);
+
+		const dependents = extractOrderedDependencies( elementType.dependenciesPerTargetMapping ?? {} );
+
+		const settingsWithDepsNewValues = getUpdatedValues(
+			settingsForDepsNewValuesCalculation,
+			dependents,
+			elementType.propsSchema,
+			resolvedSettingsWithDefaults,
+			elementId
+		);
+
+		const overrideValue = settingsWithDepsNewValues[ propKey ];
+
+		return {
+			overrideValue,
+			isDisabled,
+			isHidden,
+		};
+	}, [
+		existingOverride,
+		resolvedElementSettings,
+		propKey,
+		elementType.propsSchema,
+		elementType.dependenciesPerTargetMapping,
+		elementId,
+	] );
+}

package/src/components/instance-editing-panel/utils/use-resolved-inner-element.ts

@@ -0,0 +1,111 @@
+import { useMemo } from 'react';
+import { useElement } from '@elementor/editor-editing-panel';
+import { type ElementType, getElementSettings, getElementType } from '@elementor/editor-elements';
+import { type AnyTransformable, type PropValue } from '@elementor/editor-props';
+
+import { componentInstanceOverridePropTypeUtil } from '../../../prop-types/component-instance-override-prop-type';
+import { type ComponentInstanceOverridesPropValue } from '../../../prop-types/component-instance-overrides-prop-type';
+import { componentOverridablePropTypeUtil } from '../../../prop-types/component-overridable-prop-type';
+import { useComponentId, useComponentInstanceOverrides } from '../../../provider/component-instance-context';
+import { type OverridableProp } from '../../../types';
+import { resolveOverridesChain } from '../../../utils/resolve-overrides-chain';
+import { OverrideControlInnerElementNotFoundError } from '../../errors';
+import {
+	applyOverridesToSettings,
+	type ElementSettings,
+	type OverridesMapping,
+	unwrapOverridableSettings,
+} from './resolve-element-settings';
+
+type ResolvedInnerElement = {
+	elementId: string;
+	elementType: ElementType;
+	resolvedOriginValues: ElementSettings;
+	resolvedElementSettings: ElementSettings;
+};
+
+export function useResolvedInnerElement( overridableProp: OverridableProp ): ResolvedInnerElement {
+	const componentInstanceElement = useElement();
+	const componentId = useComponentId();
+	const overrides = useComponentInstanceOverrides();
+
+	const { elementId: originElementId, widgetType, elType } = overridableProp.originPropFields ?? overridableProp;
+	const type = elType === 'widget' ? widgetType : elType;
+	const elementType = getElementType( type );
+
+	if ( ! elementType ) {
+		throw new Error( `Element type not found for ${ type }` );
+	}
+
+	const { elementId, overridesMapping } = useMemo( () => {
+		const overridesChainResult = resolveOverridesChain( {
+			outerOverridableProp: overridableProp,
+			outerInstanceId: componentInstanceElement.element.id,
+		} );
+
+		if ( overridesChainResult.isChainBroken ) {
+			throw new OverrideControlInnerElementNotFoundError( {
+				context: { componentId, elementId: originElementId },
+			} );
+		}
+
+		return {
+			elementId: overridesChainResult.innerElement.id,
+			overridesMapping: overridesChainResult.overridesMapping,
+		};
+	}, [ overridableProp, componentInstanceElement.element.id, componentId, originElementId ] );
+
+	// Not reactive to inner element store changes — intentional.
+	// Inner element settings can only change in component edit mode, which unmounts this component.
+	const settingsWithInnerOverrides = useMemo( () => {
+		const settings = getElementSettings< AnyTransformable >(
+			elementId,
+			Object.keys( elementType?.propsSchema ?? {} )
+		);
+
+		return applyOverridesToSettings( settings, overridesMapping );
+	}, [ elementId, elementType?.propsSchema, overridesMapping ] );
+
+	const resolvedElementSettings = useMemo( () => {
+		const withAllOverrides = applyOverridesToSettings(
+			settingsWithInnerOverrides,
+			formatOverridesToApply( overrides )
+		);
+		return unwrapOverridableSettings( withAllOverrides );
+	}, [ settingsWithInnerOverrides, overrides ] );
+
+	return {
+		elementId,
+		elementType,
+		resolvedOriginValues: settingsWithInnerOverrides,
+		resolvedElementSettings,
+	};
+}
+
+function formatOverridesToApply( overrides: ComponentInstanceOverridesPropValue ): OverridesMapping {
+	if ( ! overrides ) {
+		return {};
+	}
+
+	const result: OverridesMapping = {};
+
+	for ( const item of overrides ) {
+		const overridable = componentOverridablePropTypeUtil.extract( item );
+		let override: PropValue = item;
+
+		if ( overridable ) {
+			override = overridable.origin_value;
+		}
+
+		const extractedOverride = componentInstanceOverridePropTypeUtil.extract( override );
+		if ( ! extractedOverride ) {
+			continue;
+		}
+
+		result[ extractedOverride.override_key ] = {
+			value: extractedOverride.override_value as AnyTransformable | null,
+		};
+	}
+
+	return result;
+}

package/src/provider/component-instance-context.tsx

@@ -16,6 +16,16 @@ export function ComponentInstanceProvider( { children, ...props }: PropsWithChil
 	return <ComponentInstanceContext.Provider value={ props }>{ children }</ComponentInstanceContext.Provider>;
 }
 
-export const useComponentId = () => useContext( ComponentInstanceContext )?.componentId;
-export const useComponentInstanceOverrides = () => useContext( ComponentInstanceContext )?.overrides;
-export const useComponentOverridableProps = () => useContext( ComponentInstanceContext )?.overridableProps;
+function useComponentInstanceContext() {
+	const context = useContext( ComponentInstanceContext );
+
+	if ( ! context ) {
+		throw new Error( 'useComponentInstanceContext must be used within a ComponentInstanceProvider' );
+	}
+
+	return context;
+}
+
+export const useComponentId = () => useComponentInstanceContext().componentId;
+export const useComponentInstanceOverrides = () => useComponentInstanceContext().overrides;
+export const useComponentOverridableProps = () => useComponentInstanceContext().overridableProps;

package/src/utils/resolve-override-prop-value.ts

@@ -1,4 +1,4 @@
-import { type PropValue } from '@elementor/editor-props';
+import { type AnyTransformable, type PropValue } from '@elementor/editor-props';
 
 import {
 	type ComponentInstanceOverrideProp,
@@ -10,7 +10,9 @@ import {
 	componentOverridablePropTypeUtil,
 } from '../prop-types/component-overridable-prop-type';
 
-export const resolveOverridePropValue = ( originalPropValue: ComponentInstanceOverride | PropValue ): PropValue => {
+export const resolveOverridePropValue = (
+	originalPropValue: ComponentInstanceOverride | PropValue
+): AnyTransformable | null => {
 	const isOverridable = componentOverridablePropTypeUtil.isValid( originalPropValue );
 	if ( isOverridable ) {
 		return getOverridableValue( originalPropValue as ComponentOverridableProp );
@@ -21,10 +23,10 @@ export const resolveOverridePropValue = ( originalPropValue: ComponentInstanceOv
 		return getOverrideValue( originalPropValue );
 	}
 
-	return originalPropValue;
+	return originalPropValue as AnyTransformable | null;
 };
 
-function getOverridableValue( overridableProp: ComponentOverridableProp | null ): PropValue {
+function getOverridableValue( overridableProp: ComponentOverridableProp | null ): AnyTransformable | null {
 	const overridableValue = componentOverridablePropTypeUtil.extract( overridableProp );
 
 	if ( ! overridableValue ) {
@@ -37,15 +39,15 @@ function getOverridableValue( overridableProp: ComponentOverridableProp | null )
 		return getOverrideValue( overridableValue.origin_value as ComponentInstanceOverrideProp );
 	}
 
-	return overridableValue.origin_value;
+	return overridableValue.origin_value as AnyTransformable | null;
 }
 
-function getOverrideValue( overrideProp: ComponentInstanceOverrideProp | null ): PropValue {
+function getOverrideValue( overrideProp: ComponentInstanceOverrideProp | null ): AnyTransformable | null {
 	const overrideValue = componentInstanceOverridePropTypeUtil.extract( overrideProp );
 
 	if ( ! overrideValue ) {
 		return null;
 	}
 
-	return overrideValue.override_value as PropValue;
+	return overrideValue.override_value as AnyTransformable | null;
 }