@elementor/editor-components 3.35.0-463 → 3.35.0-464

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-463",
+  "version": "3.35.0-464",
   "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-463",
-    "@elementor/editor-canvas": "3.35.0-463",
-    "@elementor/editor-controls": "3.35.0-463",
-    "@elementor/editor-documents": "3.35.0-463",
-    "@elementor/editor-editing-panel": "3.35.0-463",
-    "@elementor/editor-elements": "3.35.0-463",
-    "@elementor/editor-elements-panel": "3.35.0-463",
-    "@elementor/editor-mcp": "3.35.0-463",
-    "@elementor/editor-panels": "3.35.0-463",
-    "@elementor/editor-props": "3.35.0-463",
-    "@elementor/editor-styles-repository": "3.35.0-463",
-    "@elementor/editor-ui": "3.35.0-463",
-    "@elementor/editor-v1-adapters": "3.35.0-463",
-    "@elementor/http-client": "3.35.0-463",
+    "@elementor/editor": "3.35.0-464",
+    "@elementor/editor-canvas": "3.35.0-464",
+    "@elementor/editor-controls": "3.35.0-464",
+    "@elementor/editor-documents": "3.35.0-464",
+    "@elementor/editor-editing-panel": "3.35.0-464",
+    "@elementor/editor-elements": "3.35.0-464",
+    "@elementor/editor-elements-panel": "3.35.0-464",
+    "@elementor/editor-mcp": "3.35.0-464",
+    "@elementor/editor-panels": "3.35.0-464",
+    "@elementor/editor-props": "3.35.0-464",
+    "@elementor/editor-styles-repository": "3.35.0-464",
+    "@elementor/editor-ui": "3.35.0-464",
+    "@elementor/editor-v1-adapters": "3.35.0-464",
+    "@elementor/http-client": "3.35.0-464",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-463",
-    "@elementor/query": "3.35.0-463",
-    "@elementor/schema": "3.35.0-463",
-    "@elementor/store": "3.35.0-463",
+    "@elementor/mixpanel": "3.35.0-464",
+    "@elementor/query": "3.35.0-464",
+    "@elementor/schema": "3.35.0-464",
+    "@elementor/store": "3.35.0-464",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-463",
+    "@elementor/utils": "3.35.0-464",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-463",
-    "@elementor/editor-current-user": "3.35.0-463"
+    "@elementor/editor-notifications": "3.35.0-464",
+    "@elementor/editor-current-user": "3.35.0-464"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/component-panel-header/component-badge.tsx

@@ -4,38 +4,39 @@ import { ComponentPropListIcon } from '@elementor/icons';
 import { Badge, Box, keyframes, styled, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-export const ComponentsBadge = React.forwardRef< HTMLDivElement, { overridesCount: number; onClick: () => void } >(
-	( { overridesCount, onClick }, ref ) => {
-		const prevCount = usePrevious( overridesCount );
+export const ComponentsBadge = React.forwardRef<
+	HTMLDivElement,
+	{ overridablePropsCount: number; onClick: () => void }
+>( ( { overridablePropsCount, onClick }, ref ) => {
+	const prevCount = usePrevious( overridablePropsCount );
 
-		const isFirstOverride = prevCount === 0 && overridesCount === 1;
+	const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
 
-		return (
-			<StyledBadge
-				ref={ ref }
-				color="primary"
-				key={ overridesCount }
-				invisible={ overridesCount === 0 }
-				animate={ isFirstOverride }
-				anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
-				badgeContent={
-					<Box sx={ { animation: ! isFirstOverride ? `${ slideUp } 300ms ease-out` : 'none' } }>
-						{ overridesCount }
-					</Box>
-				}
+	return (
+		<StyledBadge
+			ref={ ref }
+			color="primary"
+			key={ overridablePropsCount }
+			invisible={ overridablePropsCount === 0 }
+			animate={ isFirstExposedProperty }
+			anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
+			badgeContent={
+				<Box sx={ { animation: ! isFirstExposedProperty ? `${ slideUp } 300ms ease-out` : 'none' } }>
+					{ overridablePropsCount }
+				</Box>
+			}
+		>
+			<ToggleButton
+				value="exposed properties"
+				size="tiny"
+				onClick={ onClick }
+				aria-label={ __( 'View exposed properties', 'elementor' ) }
 			>
-				<ToggleButton
-					value="overrides"
-					size="tiny"
-					onClick={ onClick }
-					aria-label={ __( 'View overrides', 'elementor' ) }
-				>
-					<ComponentPropListIcon fontSize="tiny" />
-				</ToggleButton>
-			</StyledBadge>
-		);
-	}
-);
+				<ComponentPropListIcon fontSize="tiny" />
+			</ToggleButton>
+		</StyledBadge>
+	);
+} );
 
 const StyledBadge = styled( Badge, { shouldForwardProp: ( prop ) => prop !== 'animate' } )(
 	( { theme, animate } ) => ( {

package/src/components/component-panel-header/component-panel-header.tsx

@@ -7,7 +7,8 @@ import { Box, Divider, IconButton, Stack, Tooltip, Typography } from '@elementor
 import { __ } from '@wordpress/i18n';
 
 import { useNavigateBack } from '../../hooks/use-navigate-back';
-import { type ComponentsSlice, SLICE_NAME, useCurrentComponentId } from '../../store/store';
+import { type ComponentsSlice, SLICE_NAME, useCurrentComponent } from '../../store/store';
+import { trackComponentEvent } from '../../utils/tracking';
 import { usePanelActions } from '../component-properties-panel/component-properties-panel';
 import { ComponentIntroduction } from '../components-tab/component-introduction';
 import { ComponentsBadge } from './component-badge';
@@ -16,7 +17,7 @@ import { useOverridableProps } from './use-overridable-props';
 const MESSAGE_KEY = 'components-properties-introduction';
 
 export const ComponentPanelHeader = () => {
-	const currentComponentId = useCurrentComponentId();
+	const { id: currentComponentId, uid: componentUid } = useCurrentComponent() ?? { id: null, uid: null };
 	const overridableProps = useOverridableProps( currentComponentId );
 	const onBack = useNavigateBack();
 	const componentName = getComponentName();
@@ -25,7 +26,7 @@ export const ComponentPanelHeader = () => {
 
 	const { open: openPropertiesPanel } = usePanelActions();
 
-	const overridesCount = overridableProps ? Object.keys( overridableProps.props ).length : 0;
+	const overridablePropsCount = overridableProps ? Object.keys( overridableProps.props ).length : 0;
 	const anchorRef = React.useRef< HTMLDivElement >( null );
 
 	if ( ! currentComponentId ) {
@@ -37,6 +38,17 @@ export const ComponentPanelHeader = () => {
 		setShouldShowIntroduction( false );
 	};
 
+	const handleOpenPropertiesPanel = () => {
+		openPropertiesPanel();
+
+		trackComponentEvent( {
+			action: 'propertiesPanelOpened',
+			source: 'user',
+			component_uid: componentUid,
+			properties_count: overridablePropsCount,
+		} );
+	};
+
 	return (
 		<Box>
 			<Stack
@@ -58,7 +70,11 @@ export const ComponentPanelHeader = () => {
 						</Typography>
 					</Stack>
 				</Stack>
-				<ComponentsBadge overridesCount={ overridesCount } ref={ anchorRef } onClick={ openPropertiesPanel } />
+				<ComponentsBadge
+					overridablePropsCount={ overridablePropsCount }
+					ref={ anchorRef }
+					onClick={ handleOpenPropertiesPanel }
+				/>
 			</Stack>
 			<Divider />
 			<ComponentIntroduction

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

@@ -63,7 +63,12 @@ export function ComponentPropertiesPanelContent( { onClose }: Props ) {
 		const newGroupId = generateUniqueId( 'group' );
 		const newLabel = generateUniqueLabel( groups );
 
-		addOverridableGroup( { componentId: currentComponentId, groupId: newGroupId, label: newLabel } );
+		addOverridableGroup( {
+			componentId: currentComponentId,
+			groupId: newGroupId,
+			label: newLabel,
+			source: 'user',
+		} );
 		setDocumentModifiedStatus( true );
 		setIsAddingGroup( false );
 
@@ -81,7 +86,7 @@ export function ComponentPropertiesPanelContent( { onClose }: Props ) {
 	};
 
 	const handlePropertyDelete = ( propKey: string ) => {
-		deleteOverridableProp( { componentId: currentComponentId, propKey } );
+		deleteOverridableProp( { componentId: currentComponentId, propKey, source: 'user' } );
 		setDocumentModifiedStatus( true );
 	};
 

package/src/components/create-component-form/create-component-form.tsx

@@ -63,6 +63,7 @@ export function CreateComponentForm() {
 			eventData.current = getComponentEventData( event.detail.element, event.detail.options );
 			trackComponentEvent( {
 				action: 'createClicked',
+				source: 'user',
 				...eventData.current,
 			} );
 		};
@@ -80,11 +81,12 @@ export function CreateComponentForm() {
 				throw new Error( `Can't save element as component: element not found` );
 			}
 
-			const { uid, instanceId } = await createUnpublishedComponent(
-				values.componentName,
-				element.element,
-				eventData.current
-			);
+			const { uid, instanceId } = await createUnpublishedComponent( {
+				name: values.componentName,
+				element: element.element,
+				eventData: eventData.current,
+				source: 'user',
+			} );
 
 			const publishedComponentId = ( selectComponentByUid( getState(), uid ) as PublishedComponent )?.id;
 
@@ -121,6 +123,7 @@ export function CreateComponentForm() {
 
 		trackComponentEvent( {
 			action: 'createCancelled',
+			source: 'user',
 			...eventData.current,
 		} );
 	};

package/src/components/create-component-form/utils/replace-element-with-component.ts

@@ -1,12 +1,9 @@
 import { replaceElement, type V1ElementData, type V1ElementModelProps } from '@elementor/editor-elements';
 
-import { type OverridableProps } from '../../../types';
-
 type ComponentInstanceParams = {
 	id?: number;
 	name: string;
 	uid: string;
-	overridableProps?: OverridableProps;
 };
 
 export const replaceElementWithComponent = async ( element: V1ElementData, component: ComponentInstanceParams ) => {
@@ -31,7 +28,6 @@ export const createComponentModel = ( component: ComponentInstanceParams ): Omit
 					},
 				},
 			},
-			overridable_props: component.overridableProps,
 		},
 		editor_settings: {
 			component_uid: component.uid,

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

@@ -81,6 +81,7 @@ export function Content( { componentId, overridableProps }: Props ) {
 			widgetType: componentInstanceElement?.elementType.key ?? elementType.key,
 			originValue,
 			originPropFields: matchingOverridableProp?.originPropFields,
+			source: 'user',
 		} );
 
 		if ( ! overridableValue && overridablePropConfig ) {

package/src/create-component-type.ts

@@ -257,6 +257,7 @@ function createComponentView(
 
 			trackComponentEvent( {
 				action: 'edited',
+				source: 'user',
 				component_uid: editorSettings?.component_uid,
 				component_name: editorSettings?.title,
 				location,

package/src/mcp/save-as-component-tool.ts

@@ -106,7 +106,14 @@ export const handleSaveAsComponent = async ( params: z.infer< z.ZodObject< typeo
 		throw new Error( 'Unknown error' );
 	}
 
-	createUnpublishedComponent( componentName, element, null, overridableProps, uid );
+	await createUnpublishedComponent( {
+		name: componentName,
+		element,
+		eventData: null,
+		uid,
+		overridableProps,
+		source: 'mcp_tool',
+	} );
 
 	return {
 		status: 'ok' as const,

package/src/store/actions/add-overridable-group.ts

@@ -1,19 +1,24 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
 import { type ComponentId, type OverridablePropsGroup } from '../../types';
-import { selectOverridableProps, slice } from '../store';
+import { type Source, trackComponentEvent } from '../../utils/tracking';
+import { selectCurrentComponent, selectOverridableProps, slice } from '../store';
 
 type AddGroupParams = {
 	componentId: ComponentId;
 	groupId: string;
 	label: string;
+	source: Source;
 };
 
 export function addOverridableGroup( {
 	componentId,
 	groupId,
 	label,
+	source,
 }: AddGroupParams ): OverridablePropsGroup | undefined {
+	const currentComponent = selectCurrentComponent( getState() );
+
 	const overridableProps = selectOverridableProps( getState(), componentId );
 
 	if ( ! overridableProps ) {
@@ -43,5 +48,12 @@ export function addOverridableGroup( {
 		} )
 	);
 
+	trackComponentEvent( {
+		action: 'propertiesGroupCreated',
+		source,
+		component_uid: currentComponent?.uid,
+		group_name: label,
+	} );
+
 	return newGroup;
 }

package/src/store/actions/create-unpublished-component.ts

@@ -6,23 +6,34 @@ import { generateUniqueId } from '@elementor/utils';
 import { type ComponentEventData } from '../../components/create-component-form/utils/get-component-event-data';
 import { replaceElementWithComponent } from '../../components/create-component-form/utils/replace-element-with-component';
 import { type OverridableProps } from '../../types';
-import { trackComponentEvent } from '../../utils/tracking';
+import { type Source, trackComponentEvent } from '../../utils/tracking';
 import { slice } from '../store';
 
-export async function createUnpublishedComponent(
-	name: string,
-	element: V1ElementData,
-	eventData: ComponentEventData | null,
-	overridableProps?: OverridableProps,
-	uid?: string | null
-) {
+type CreateUnpublishedComponentParams = {
+	name: string;
+	element: V1ElementData;
+	eventData: ComponentEventData | null;
+	uid?: string | null;
+	overridableProps?: OverridableProps;
+	source: Source;
+};
+
+export async function createUnpublishedComponent( {
+	name,
+	element,
+	eventData,
+	uid,
+	overridableProps,
+	source,
+}: CreateUnpublishedComponentParams ): Promise< { uid: string; instanceId: string } > {
 	const generatedUid = uid ?? generateUniqueId( 'component' );
-	const componentBase = { uid: generatedUid, name, overridableProps };
+	const componentBase = { uid: generatedUid, name };
 
 	dispatch(
 		slice.actions.addUnpublished( {
 			...componentBase,
 			elements: [ element ],
+			overridableProps,
 		} )
 	);
 
@@ -32,6 +43,7 @@ export async function createUnpublishedComponent(
 
 	trackComponentEvent( {
 		action: 'created',
+		source,
 		component_uid: generatedUid,
 		component_name: name,
 		...eventData,

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

@@ -2,15 +2,17 @@ import { getContainer, updateElementSettings } from '@elementor/editor-elements'
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
 import { type ComponentId } from '../../types';
-import { selectOverridableProps, slice } from '../store';
+import { type Source, trackComponentEvent } from '../../utils/tracking';
+import { selectCurrentComponent, selectOverridableProps, slice } from '../store';
 import { removePropFromAllGroups } from '../utils/groups-transformers';
 
 type DeletePropParams = {
 	componentId: ComponentId;
 	propKey: string;
+	source: Source;
 };
 
-export function deleteOverridableProp( { componentId, propKey }: DeletePropParams ): void {
+export function deleteOverridableProp( { componentId, propKey, source }: DeletePropParams ): void {
 	const overridableProps = selectOverridableProps( getState(), componentId );
 
 	if ( ! overridableProps ) {
@@ -39,6 +41,18 @@ export function deleteOverridableProp( { componentId, propKey }: DeletePropParam
 			},
 		} )
 	);
+
+	const currentComponent = selectCurrentComponent( getState() );
+
+	trackComponentEvent( {
+		action: 'propertyRemoved',
+		source,
+		component_uid: currentComponent?.uid,
+		property_id: removedProp.overrideKey,
+		property_path: removedProp.propKey,
+		property_name: removedProp.label,
+		element_type: removedProp.widgetType ?? removedProp.elType,
+	} );
 }
 
 function revertElementSetting( elementId: string, settingKey: string, originValue: unknown ): void {

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

@@ -3,7 +3,8 @@ import { __dispatch as dispatch, __getState as getState } from '@elementor/store
 import { generateUniqueId } from '@elementor/utils';
 
 import { type OriginPropFields, type OverridableProp } from '../../types';
-import { selectOverridableProps, slice } from '../store';
+import { type Source, trackComponentEvent } from '../../utils/tracking';
+import { selectCurrentComponent, selectOverridableProps, slice } from '../store';
 import {
 	addPropToGroup,
 	ensureGroupInOrder,
@@ -23,6 +24,7 @@ type Props = {
 	widgetType: string;
 	originValue: PropValue;
 	originPropFields?: OriginPropFields;
+	source: Source;
 };
 
 export function setOverridableProp( {
@@ -36,6 +38,7 @@ export function setOverridableProp( {
 	widgetType,
 	originValue,
 	originPropFields,
+	source,
 }: Props ): OverridableProp | undefined {
 	const overridableProps = selectOverridableProps( getState(), componentId );
 
@@ -94,5 +97,21 @@ export function setOverridableProp( {
 		} )
 	);
 
+	const isNewProperty = ! existingOverridableProp;
+
+	if ( isNewProperty ) {
+		const currentComponent = selectCurrentComponent( getState() );
+
+		trackComponentEvent( {
+			action: 'propertyExposed',
+			source,
+			component_uid: currentComponent?.uid,
+			property_id: overridableProp.overrideKey,
+			property_path: propKey,
+			property_name: label,
+			element_type: widgetType ?? elType,
+		} );
+	}
+
 	return overridableProp;
 }

package/src/store/store.ts

@@ -220,9 +220,16 @@ export const selectCurrentComponentId = createSelector(
 	( currentComponentId ) => currentComponentId
 );
 
+export const selectCurrentComponent = createSelector( selectData, getCurrentComponentId, ( data, currentComponentId ) =>
+	data.find( ( component ) => component.id === currentComponentId )
+);
+
 export const useCurrentComponentId = () => {
 	return useSelector( selectCurrentComponentId );
 };
+export const useCurrentComponent = () => {
+	return useSelector( selectCurrentComponent );
+};
 
 export const selectUpdatedComponentNames = createSelector(
 	( state: ComponentsSlice ) => state[ SLICE_NAME ].updatedComponentNames,

package/src/utils/tracking.ts

@@ -5,18 +5,32 @@ import { __getState as getState } from '@elementor/store';
 import { selectCreatedThisSession } from '../store/store';
 import { type ExtendedWindow } from '../types';
 
+export type Source = 'user' | 'mcp_tool';
+
 type ComponentEventData = Record< string, unknown > & {
-	action: 'createClicked' | 'created' | 'createCancelled' | 'instanceAdded' | 'edited';
+	action:
+		| 'createClicked'
+		| 'created'
+		| 'createCancelled'
+		| 'instanceAdded'
+		| 'edited'
+		| 'propertyExposed'
+		| 'propertyRemoved'
+		| 'propertiesPanelOpened'
+		| 'propertiesGroupCreated';
+	source: Source;
 };
 
-export const trackComponentEvent = ( { action, ...data }: ComponentEventData ) => {
+const FEATURE_NAME = 'Components';
+
+export const trackComponentEvent = ( { action, source, ...data }: ComponentEventData ) => {
 	const { dispatchEvent, config } = getMixpanel();
 	if ( ! config?.names?.components?.[ action ] ) {
 		return;
 	}
 
 	const name = config.names.components[ action ];
-	dispatchEvent?.( name, data );
+	dispatchEvent?.( name, { ...data, source, 'Feature name': FEATURE_NAME } );
 };
 
 export const onElementDrop = ( _args: unknown, element: V1Element ) => {
@@ -37,6 +51,7 @@ export const onElementDrop = ( _args: unknown, element: V1Element ) => {
 
 	trackComponentEvent( {
 		action: 'instanceAdded',
+		source: 'user',
 		instance_id: instanceId,
 		component_uid: componentUID,
 		component_name: componentName,