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

package/src/hooks/use-controls-by-widget-type.ts

@@ -0,0 +1,40 @@
+import { type Control, type ControlItem, getElementType } from '@elementor/editor-elements';
+
+export function useControlsByWidgetType( type: string ): Record< string, Control > {
+	const elementType = getElementType( type );
+
+	if ( ! elementType ) {
+		return {};
+	}
+
+	const controls = iterateControls( elementType.controls );
+
+	return getControlsByBind( controls );
+}
+
+function iterateControls( controls: ControlItem[] ): Control[] {
+	return controls
+		.map( ( control ) => {
+			if ( control.type === 'control' && 'bind' in control.value ) {
+				return control;
+			}
+
+			if ( control.type === 'section' ) {
+				return iterateControls( control.value.items );
+			}
+
+			return null;
+		} )
+		.filter( Boolean )
+		.flat() as Control[];
+}
+
+function getControlsByBind( controls: Control[] ): Record< string, Control > {
+	return controls.reduce(
+		( controlsByBind: Record< string, Control >, control ) => ( {
+			...controlsByBind,
+			[ control.value.bind ]: control,
+		} ),
+		{}
+	);
+}

package/src/prop-types/component-instance-override-prop-type.ts

@@ -14,5 +14,4 @@ export const componentInstanceOverridePropTypeUtil = createPropUtils(
 );
 
 export type ComponentInstanceOverrideProp = z.infer< typeof componentInstanceOverridePropTypeUtil.schema >;
-
 export type ComponentInstanceOverridePropValue = ComponentInstanceOverrideProp[ 'value' ];

package/src/prop-types/component-instance-overrides-prop-type.ts

@@ -2,10 +2,14 @@ import { createPropUtils } from '@elementor/editor-props';
 import { z } from '@elementor/schema';
 
 import { componentInstanceOverridePropTypeUtil } from './component-instance-override-prop-type';
+import { componentOverridablePropTypeUtil } from './component-overridable-prop-type';
 
 export const componentInstanceOverridesPropTypeUtil = createPropUtils(
 	'overrides',
-	z.array( componentInstanceOverridePropTypeUtil.schema ).optional().default( [] )
+	z
+		.array( z.union( [ componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema ] ) )
+		.optional()
+		.default( [] )
 );
 
 export type ComponentInstanceOverridesPropValue = z.infer<

package/src/prop-types/component-instance-prop-type.ts

@@ -11,4 +11,5 @@ export const componentInstancePropTypeUtil = createPropUtils(
 	} )
 );
 
-export type ComponentInstancePropValue = z.infer< typeof componentInstancePropTypeUtil.schema >[ 'value' ];
+export type ComponentInstanceProp = z.infer< typeof componentInstancePropTypeUtil.schema >;
+export type ComponentInstancePropValue = ComponentInstanceProp[ 'value' ];

package/src/store/actions/set-overridable-prop.ts

@@ -2,7 +2,7 @@ import { type PropValue } from '@elementor/editor-props';
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 import { generateUniqueId } from '@elementor/utils';
 
-import { type OverridableProp } from '../../types';
+import { type OriginPropFields, type OverridableProp } from '../../types';
 import { selectOverridableProps, slice } from '../store';
 import {
 	addPropToGroup,
@@ -22,6 +22,7 @@ type Props = {
 	elType: string;
 	widgetType: string;
 	originValue: PropValue;
+	originPropFields?: OriginPropFields;
 };
 
 export function setOverridableProp( {
@@ -34,6 +35,7 @@ export function setOverridableProp( {
 	elType,
 	widgetType,
 	originValue,
+	originPropFields,
 }: Props ): OverridableProp | undefined {
 	const overridableProps = selectOverridableProps( getState(), componentId );
 
@@ -60,6 +62,7 @@ export function setOverridableProp( {
 		elType,
 		originValue,
 		groupId: currentGroupId,
+		originPropFields,
 	};
 
 	const stateAfterRemovingDuplicates = removePropsFromState(

package/src/store/actions/update-overridable-prop-params.ts

@@ -0,0 +1,58 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentId, type OverridableProp } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+import { movePropBetweenGroups } from '../utils/groups-transformers';
+
+type UpdatePropParams = {
+	componentId: ComponentId;
+	overrideKey: string;
+	label: string;
+	groupId: string | null;
+};
+
+export function updateOverridablePropParams( {
+	componentId,
+	overrideKey,
+	label,
+	groupId,
+}: UpdatePropParams ): OverridableProp | undefined {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	const prop = overridableProps.props[ overrideKey ];
+
+	if ( ! prop ) {
+		return;
+	}
+
+	const oldGroupId = prop.groupId;
+	const newGroupId = groupId ?? oldGroupId;
+
+	const updatedProp: OverridableProp = {
+		...prop,
+		label,
+		groupId: newGroupId,
+	};
+
+	const updatedGroups = movePropBetweenGroups( overridableProps.groups, overrideKey, oldGroupId, newGroupId );
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				props: {
+					...overridableProps.props,
+					[ overrideKey ]: updatedProp,
+				},
+				groups: updatedGroups,
+			},
+		} )
+	);
+
+	return updatedProp;
+}

package/src/store/actions/update-overridable-prop.ts

@@ -1,58 +1,50 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { type ComponentId, type OverridableProp } from '../../types';
+import { type ComponentOverridablePropValue } from '../../prop-types/component-overridable-prop-type';
+import { type OriginPropFields, type OverridableProps } from '../../types';
 import { selectOverridableProps, slice } from '../store';
-import { movePropBetweenGroups } from '../utils/groups-transformers';
-
-type UpdatePropParams = {
-	componentId: ComponentId;
-	propKey: string;
-	label: string;
-	groupId: string | null;
-};
-
-export function updateOverridableProp( {
-	componentId,
-	propKey,
-	label,
-	groupId,
-}: UpdatePropParams ): OverridableProp | undefined {
+
+export function updateOverridableProp(
+	componentId: number,
+	propValue: ComponentOverridablePropValue,
+	originPropFields?: OriginPropFields
+) {
 	const overridableProps = selectOverridableProps( getState(), componentId );
 
 	if ( ! overridableProps ) {
 		return;
 	}
 
-	const prop = overridableProps.props[ propKey ];
+	const existingOverridableProp = overridableProps.props[ propValue.override_key ];
 
-	if ( ! prop ) {
+	if ( ! existingOverridableProp ) {
 		return;
 	}
 
-	const oldGroupId = prop.groupId;
-	const newGroupId = groupId ?? oldGroupId;
-
-	const updatedProp: OverridableProp = {
-		...prop,
-		label,
-		groupId: newGroupId,
-	};
-
-	const updatedGroups = movePropBetweenGroups( overridableProps.groups, propKey, oldGroupId, newGroupId );
+	const newOverridableProp = originPropFields
+		? {
+				originValue: propValue.origin_value,
+				originPropFields,
+		  }
+		: {
+				originValue: propValue.origin_value,
+		  };
+
+	const newOverridableProps = {
+		...overridableProps,
+		props: {
+			...overridableProps.props,
+			[ existingOverridableProp.overrideKey ]: {
+				...existingOverridableProp,
+				...newOverridableProp,
+			},
+		},
+	} satisfies OverridableProps;
 
 	dispatch(
 		slice.actions.setOverridableProps( {
 			componentId,
-			overridableProps: {
-				...overridableProps,
-				props: {
-					...overridableProps.props,
-					[ propKey ]: updatedProp,
-				},
-				groups: updatedGroups,
-			},
+			overridableProps: newOverridableProps,
 		} )
 	);
-
-	return updatedProp;
 }

package/src/store/store.ts

@@ -136,6 +136,9 @@ const getPath = ( state: ComponentsSlice ) => state[ SLICE_NAME ].path;
 const getCurrentComponentId = ( state: ComponentsSlice ) => state[ SLICE_NAME ].currentComponentId;
 export const selectComponent = ( state: ComponentsSlice, componentId: ComponentId ) =>
 	state[ SLICE_NAME ].data.find( ( component ) => component.id === componentId );
+export const useComponent = ( componentId: ComponentId | null ) => {
+	return useSelector( ( state: ComponentsSlice ) => ( componentId ? selectComponent( state, componentId ) : null ) );
+};
 
 export const selectComponents = createSelector(
 	selectData,
@@ -180,6 +183,11 @@ export const selectOverridableProps = createSelector(
 		return component.overridableProps ?? DEFAULT_OVERRIDABLE_PROPS;
 	}
 );
+export const useOverridableProps = ( componentId: ComponentId | null ) => {
+	return useSelector( ( state: ComponentsSlice ) =>
+		componentId ? selectOverridableProps( state, componentId ) : null
+	);
+};
 export const selectIsOverridablePropsLoaded = createSelector(
 	selectComponent,
 	( component: PublishedComponent | undefined ) => {

package/src/sync/create-components-before-save.ts

@@ -2,8 +2,9 @@ import { updateElementSettings, type V1ElementData } from '@elementor/editor-ele
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
 import { apiClient } from '../api';
+import { type ComponentInstanceProp } from '../prop-types/component-instance-prop-type';
 import { selectUnpublishedComponents, slice } from '../store/store';
-import { type ComponentInstancePropValue, type DocumentSaveStatus, type UnpublishedComponent } from '../types';
+import { type DocumentSaveStatus, type UnpublishedComponent } from '../types';
 
 export async function createComponentsBeforeSave( {
 	elements,
@@ -80,11 +81,14 @@ function shouldUpdateElement(
 	uidToComponentId: Map< string, number >
 ): { shouldUpdate: true; newComponentId: number } | { shouldUpdate: false; newComponentId: null } {
 	if ( element.widgetType === 'e-component' ) {
-		const currentComponentId = ( element.settings?.component_instance as ComponentInstancePropValue< string > )
-			?.value?.component_id.value;
+		const currentComponentId = ( element.settings?.component_instance as ComponentInstanceProp )?.value
+			?.component_id.value;
 
-		if ( currentComponentId && uidToComponentId.has( currentComponentId ) ) {
-			return { shouldUpdate: true, newComponentId: uidToComponentId.get( currentComponentId ) as number };
+		if ( currentComponentId && uidToComponentId.has( currentComponentId.toString() ) ) {
+			return {
+				shouldUpdate: true,
+				newComponentId: uidToComponentId.get( currentComponentId.toString() ) as number,
+			};
 		}
 	}
 	return { shouldUpdate: false, newComponentId: null };

package/src/types.ts

@@ -2,11 +2,6 @@ import { type V1ElementData } from '@elementor/editor-elements';
 import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
 import type { StyleDefinition } from '@elementor/editor-styles';
 
-import {
-	type ComponentInstanceOverrideProp,
-	type ComponentInstanceOverridePropValue,
-} from './prop-types/component-instance-override-prop-type';
-
 export type ComponentFormValues = {
 	componentName: string;
 };
@@ -25,6 +20,8 @@ export type UnpublishedComponent = BaseComponent & {
 	elements: V1ElementData[];
 };
 
+export type OriginPropFields = Pick< OverridableProp, 'propKey' | 'widgetType' | 'elType' >;
+
 export type OverridableProp = {
 	overrideKey: string;
 	label: string;
@@ -34,6 +31,7 @@ export type OverridableProp = {
 	widgetType: string;
 	originValue: PropValue;
 	groupId: string;
+	originPropFields?: OriginPropFields;
 };
 
 export type OverridablePropsGroup = {
@@ -71,21 +69,6 @@ export type ExtendedWindow = Window & {
 	};
 };
 
-export type ComponentInstancePropValue< TComponentId extends number | string = number | string > =
-	TransformablePropValue<
-		'component-instance',
-		{
-			component_id: TransformablePropValue< 'number', TComponentId >;
-			overrides?: TransformablePropValue< 'overrides', ComponentOverrides >;
-		}
-	>;
-
-type ComponentOverrides = TransformablePropValue< 'overrides', ComponentOverride[] >;
-
-export type ComponentOverride = ComponentInstanceOverrideProp;
-
-export type ComponentOverridePropValue = ComponentInstanceOverridePropValue;
-
 export type ComponentOverridable = {
 	override_key: string;
 	origin_value: TransformablePropValue< string >;

package/src/utils/get-component-ids.ts

@@ -1,18 +1,21 @@
 import { type V1ElementData } from '@elementor/editor-elements';
 
-import { type ComponentInstancePropValue } from '../types';
+import { type ComponentInstanceProp } from '../prop-types/component-instance-prop-type';
 import { getComponentDocumentData } from './component-document-data';
 import { isComponentInstance } from './is-component-instance';
 
-export const getComponentIds = async ( elements: V1ElementData[] ) => {
+export const getComponentIds = async ( elements: V1ElementData[] ): Promise< number[] > => {
 	const components = elements.map( async ( { widgetType, elType, elements: childElements, settings } ) => {
 		const ids: number[] = [];
 
 		const isComponent = isComponentInstance( { widgetType, elType } );
 
 		if ( isComponent ) {
-			const componentId = ( settings?.component_instance as ComponentInstancePropValue< number > )?.value
-				?.component_id.value;
+			const componentId = ( settings?.component_instance as ComponentInstanceProp )?.value?.component_id.value;
+
+			if ( ! componentId ) {
+				return;
+			}
 
 			const document = await getComponentDocumentData( componentId );
 
@@ -24,7 +27,9 @@ export const getComponentIds = async ( elements: V1ElementData[] ) => {
 		}
 
 		if ( !! childElements?.length ) {
-			ids.push( ...( await getComponentIds( childElements ) ) );
+			const newIds = await getComponentIds( childElements );
+
+			ids.push( ...Array.from( new Set( newIds ) ) );
 		}
 
 		return ids;
@@ -32,5 +37,5 @@ export const getComponentIds = async ( elements: V1ElementData[] ) => {
 
 	const result = ( await Promise.all( components ) ).flat();
 
-	return Array.from( new Set( result ) );
+	return Array.from( new Set( result ) ).filter( ( value ) => value !== undefined );
 };

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

@@ -0,0 +1,23 @@
+import { getWidgetsCache } from '@elementor/editor-elements';
+
+import { type OriginPropFields, type OverridableProp } from '../types';
+
+export const getPropTypeForComponentOverride = ( overridableProp: OverridableProp ) => {
+	if ( overridableProp.originPropFields ) {
+		return getPropType( overridableProp.originPropFields );
+	}
+
+	const { elType, widgetType, propKey } = overridableProp;
+
+	return getPropType( {
+		elType,
+		widgetType,
+		propKey,
+	} );
+};
+
+function getPropType( { widgetType, propKey }: OriginPropFields ) {
+	const widgetPropsSchema = getWidgetsCache()?.[ widgetType ]?.atomic_props_schema;
+
+	return widgetPropsSchema?.[ propKey ];
+}

package/src/store/actions/update-overridable-prop-origin-value.ts

@@ -1,37 +0,0 @@
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
-
-import { type ComponentOverridablePropValue } from '../../prop-types/component-overridable-prop-type';
-import { type OverridableProps } from '../../types';
-import { selectOverridableProps, slice } from '../store';
-
-export function updateOverridablePropOriginValue( componentId: number, propValue: ComponentOverridablePropValue ) {
-	const overridableProps = selectOverridableProps( getState(), componentId );
-
-	if ( ! overridableProps ) {
-		return;
-	}
-
-	const existingOverridableProp = overridableProps.props[ propValue.override_key ];
-
-	if ( ! existingOverridableProp ) {
-		return;
-	}
-
-	const newOverridableProps = {
-		...overridableProps,
-		props: {
-			...overridableProps.props,
-			[ existingOverridableProp.overrideKey ]: {
-				...existingOverridableProp,
-				originValue: propValue.origin_value,
-			},
-		},
-	} satisfies OverridableProps;
-
-	dispatch(
-		slice.actions.setOverridableProps( {
-			componentId,
-			overridableProps: newOverridableProps,
-		} )
-	);
-}