@elementor/editor-variables 3.33.0-256 → 3.33.0-258

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.33.0-256",
+  "version": "3.33.0-258",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,20 +39,20 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-256",
-    "@elementor/editor-canvas": "3.33.0-256",
-    "@elementor/editor-controls": "3.33.0-256",
-    "@elementor/editor-current-user": "3.33.0-256",
-    "@elementor/editor-editing-panel": "3.33.0-256",
-    "@elementor/editor-mcp": "3.33.0-256",
-    "@elementor/editor-panels": "3.33.0-256",
-    "@elementor/editor-props": "3.33.0-256",
-    "@elementor/editor-ui": "3.33.0-256",
-    "@elementor/editor-v1-adapters": "3.33.0-256",
-    "@elementor/http-client": "3.33.0-256",
+    "@elementor/editor": "3.33.0-258",
+    "@elementor/editor-canvas": "3.33.0-258",
+    "@elementor/editor-controls": "3.33.0-258",
+    "@elementor/editor-current-user": "3.33.0-258",
+    "@elementor/editor-editing-panel": "3.33.0-258",
+    "@elementor/editor-mcp": "3.33.0-258",
+    "@elementor/editor-panels": "3.33.0-258",
+    "@elementor/editor-props": "3.33.0-258",
+    "@elementor/editor-ui": "3.33.0-258",
+    "@elementor/editor-v1-adapters": "3.33.0-258",
+    "@elementor/http-client": "3.33.0-258",
     "@elementor/icons": "^1.61.0",
-    "@elementor/mixpanel": "3.33.0-256",
-    "@elementor/schema": "3.33.0-256",
+    "@elementor/mixpanel": "3.33.0-258",
+    "@elementor/schema": "3.33.0-258",
     "@elementor/ui": "1.36.17",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/variables-manager/variables-manager-create-menu.tsx

@@ -5,6 +5,7 @@ import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, type PopupState, Typ
 import { __ } from '@wordpress/i18n';
 
 import { type TVariablesList } from '../../storage';
+import { trackVariablesManagerEvent } from '../../utils/tracking';
 import { getVariableTypes } from '../../variables-registry/variable-type-registry';
 
 export const SIZE = 'tiny';
@@ -36,6 +37,7 @@ export const VariableManagerCreateMenu = ( {
 			onClick: () => {
 				const defaultName = getDefaultName( variables, key, variable.variableType );
 				onCreate( key, defaultName, variable.defaultValue || '' );
+				trackVariablesManagerEvent( { action: 'add', varType: variable.variableType } );
 			},
 		};
 	} );

package/src/components/variables-manager/variables-manager-panel.tsx

@@ -24,7 +24,9 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { trackVariablesManagerEvent } from '../../utils/tracking';
 import { type ErrorResponse, type MappedError, mapServerError } from '../../utils/validations';
+import { getVariableType } from '../../variables-registry/variable-type-registry';
 import { DeleteConfirmationDialog } from '../ui/delete-confirmation-dialog';
 import { EmptyState } from '../ui/empty-state';
 import { NoSearchResults } from '../ui/no-search-results';
@@ -104,7 +106,9 @@ export function VariablesManagerPanel() {
 			setServerError( null );
 			resetNavigation();
 
-			return await handleSave();
+			const result = await handleSave();
+			trackVariablesManagerEvent( { action: 'saveChanges' } );
+			return result;
 		} catch ( error ) {
 			const mappedError = mapServerError( error as ErrorResponse );
 			const duplicatedIds = mappedError?.action?.data?.duplicatedIds;
@@ -141,8 +145,12 @@ export function VariablesManagerPanel() {
 			icon: TrashIcon,
 			color: 'error.main',
 			onClick: ( itemId: string ) => {
-				if ( variables[ itemId ] ) {
-					setDeleteConfirmation( { id: itemId, label: variables[ itemId ].label } );
+				const variable = variables[ itemId ];
+				if ( variable ) {
+					setDeleteConfirmation( { id: itemId, label: variable.label } );
+
+					const variableTypeOptions = getVariableType( variable.type );
+					trackVariablesManagerEvent( { action: 'delete', varType: variableTypeOptions?.variableType } );
 				}
 			},
 		},

package/src/components/variables-selection.tsx

@@ -10,7 +10,7 @@ import { useVariableType } from '../context/variable-type-context';
 import { useFilteredVariables } from '../hooks/use-prop-variables';
 import { useVariableBoundProp } from '../hooks/use-variable-bound-prop';
 import { type ExtendedVirtualizedItem } from '../types';
-import { trackVariableEvent } from '../utils/tracking';
+import { trackVariableEvent, trackVariablesManagerEvent } from '../utils/tracking';
 import { EmptyState } from './ui/empty-state';
 import { MenuItemContent } from './ui/menu-item-content';
 import { NoSearchResults } from './ui/no-search-results';
@@ -77,12 +77,21 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }:
 	}
 
 	if ( onSettings ) {
+		const handleOpenManager = () => {
+			onSettings();
+			trackVariablesManagerEvent( {
+				action: 'openManager',
+				varType: variableType,
+				controlPath: path.join( '.' ),
+			} );
+		};
+
 		actions.push(
 			<Tooltip key="settings" placement="top" title={ MANAGER_LABEL }>
 				<IconButton
 					id="variables-manager-button"
 					size={ SIZE }
-					onClick={ onSettings }
+					onClick={ handleOpenManager }
 					aria-label={ MANAGER_LABEL }
 				>
 					<SettingsIcon fontSize={ SIZE } />

package/src/utils/tracking.ts

@@ -22,3 +22,33 @@ export const trackVariableEvent = ( { varType, controlPath, action }: VariableEv
 		action_type: name,
 	} );
 };
+
+type VariablesManagerEventData = {
+	action: 'openManager' | 'add' | 'saveChanges' | 'delete';
+	varType?: string;
+	controlPath?: string;
+};
+
+export const trackVariablesManagerEvent = ( { action, varType, controlPath }: VariablesManagerEventData ) => {
+	const { dispatchEvent, config } = getMixpanel();
+	if ( ! config?.names?.variables?.[ action ] ) {
+		return;
+	}
+
+	const name = config.names.variables[ action ];
+	const eventData: Record< string, string > = {
+		location: config?.locations?.variablesManager || '',
+		trigger: config?.triggers?.click || '',
+		action_type: name,
+	};
+
+	if ( varType ) {
+		eventData.var_type = varType;
+	}
+
+	if ( controlPath ) {
+		eventData.style_control_path = controlPath;
+	}
+
+	dispatchEvent?.( name, eventData );
+};