@elementor/editor-variables 4.0.0-manual → 4.1.0-684

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.0.0-manual",
+  "version": "4.1.0-684",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-manual",
-    "@elementor/editor-canvas": "4.0.0-manual",
-    "@elementor/editor-controls": "4.0.0-manual",
-    "@elementor/editor-current-user": "4.0.0-manual",
-    "@elementor/editor-mcp": "4.0.0-manual",
-    "@elementor/editor-panels": "4.0.0-manual",
-    "@elementor/editor-props": "4.0.0-manual",
-    "@elementor/editor-ui": "4.0.0-manual",
-    "@elementor/editor-v1-adapters": "4.0.0-manual",
-    "@elementor/menus": "4.0.0-manual",
-    "@elementor/http-client": "4.0.0-manual",
+    "@elementor/editor": "4.1.0-684",
+    "@elementor/editor-canvas": "4.1.0-684",
+    "@elementor/editor-controls": "4.1.0-684",
+    "@elementor/editor-current-user": "4.1.0-684",
+    "@elementor/editor-mcp": "4.1.0-684",
+    "@elementor/editor-panels": "4.1.0-684",
+    "@elementor/editor-props": "4.1.0-684",
+    "@elementor/editor-ui": "4.1.0-684",
+    "@elementor/editor-v1-adapters": "4.1.0-684",
+    "@elementor/menus": "4.1.0-684",
+    "@elementor/http-client": "4.1.0-684",
     "@elementor/icons": "^1.68.0",
-    "@elementor/events": "4.0.0-manual",
-    "@elementor/schema": "4.0.0-manual",
+    "@elementor/events": "4.1.0-684",
+    "@elementor/schema": "4.1.0-684",
     "@elementor/ui": "1.37.2",
-    "@elementor/utils": "4.0.0-manual",
+    "@elementor/utils": "4.1.0-684",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/open-panel-from-event.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+	__privateListenTo as listenTo,
+	__privateOpenRoute as openRoute,
+	routeOpenEvent,
+} from '@elementor/editor-v1-adapters';
+
+import { usePanelActions } from './variables-manager/variables-manager-panel';
+
+const EVENT_NAME = 'elementor/open-variables-manager';
+const DEFAULT_PANEL_ROUTE = 'panel/elements/categories';
+
+export function OpenPanelFromEvent() {
+	const { open } = usePanelActions();
+	const pendingRef = useRef( false );
+	const [ readyToOpen, setReadyToOpen ] = useState( false );
+
+	useEffect( () => {
+		if ( readyToOpen ) {
+			setReadyToOpen( false );
+			open();
+		}
+	}, [ readyToOpen, open ] );
+
+	useEffect( () => {
+		return listenTo( routeOpenEvent( DEFAULT_PANEL_ROUTE ), () => {
+			if ( pendingRef.current ) {
+				pendingRef.current = false;
+				setReadyToOpen( true );
+			}
+		} );
+	}, [] );
+
+	useEffect( () => {
+		const handler = () => {
+			pendingRef.current = true;
+			openRoute( DEFAULT_PANEL_ROUTE );
+		};
+
+		window.addEventListener( EVENT_NAME, handler );
+
+		return () => window.removeEventListener( EVENT_NAME, handler );
+	}, [] );
+
+	return null;
+}

package/src/components/ui/variable-promotion-chip.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { forwardRef, type MouseEvent, useImperativeHandle, useState } from 'react';
+import { forwardRef, type MouseEvent, useCallback, useImperativeHandle, useState } from 'react';
+import { type PromotionTrackingData, trackUpgradePromotionClick, trackViewPromotion } from '@elementor/editor-controls';
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from '@elementor/editor-ui';
 import { Box } from '@elementor/ui';
 import { capitalize } from '@elementor/utils';
@@ -8,6 +9,7 @@ import { __, sprintf } from '@wordpress/i18n';
 type VariablePromotionChipProps = {
 	variableType: string;
 	upgradeUrl: string;
+	trackingData: PromotionTrackingData;
 };
 
 export type VariablePromotionChipRef = {
@@ -15,14 +17,21 @@ export type VariablePromotionChipRef = {
 };
 
 export const VariablePromotionChip = forwardRef< VariablePromotionChipRef, VariablePromotionChipProps >(
-	( { variableType, upgradeUrl }, ref ) => {
+	( { variableType, upgradeUrl, trackingData }, ref ) => {
 		const [ isOpen, setIsOpen ] = useState( false );
 
 		useCanvasClickHandler( isOpen, () => setIsOpen( false ) );
 
-		const toggle = () => setIsOpen( ( prev ) => ! prev );
+		const toggle = useCallback( () => {
+			setIsOpen( ( prev ) => {
+				if ( ! prev ) {
+					trackViewPromotion( trackingData );
+				}
+				return ! prev;
+			} );
+		}, [ trackingData ] );
 
-		useImperativeHandle( ref, () => ( { toggle } ), [] );
+		useImperativeHandle( ref, () => ( { toggle } ), [ toggle ] );
 
 		const title = sprintf(
 			/* translators: %s: Variable Type. */
@@ -47,6 +56,7 @@ export const VariablePromotionChip = forwardRef< VariablePromotionChipRef, Varia
 					e.stopPropagation();
 					setIsOpen( false );
 				} }
+				onCtaClick={ () => trackUpgradePromotionClick( trackingData ) }
 			>
 				<Box
 					onClick={ ( e: MouseEvent ) => {

package/src/components/variables-manager/ui/variable-table-row.tsx

@@ -13,6 +13,8 @@ import { VariableEditableCell } from '../variable-editable-cell';
 import { VariableEditMenu, type VariableManagerMenuAction } from './variable-edit-menu';
 import { VariableTableCell } from './variable-table-cell';
 
+const TRACKING_DATA = { target_name: 'variables_manager', target_location: 'variables_manager' } as const;
+
 export type Row = ReturnType< typeof getVariableType > & {
 	id: string;
 	type: string;
@@ -200,6 +202,7 @@ export const VariableRow = (
 							variableType={ row.variableType }
 							upgradeUrl={ `https://go.elementor.com/renew-license-manager-${ row.variableType }-variable` }
 							ref={ promotionRef }
+							trackingData={ TRACKING_DATA }
 						/>
 					) }
 					<VariableEditMenu menuActions={ menuActions( row.id ) } disabled={ isSorting } itemId={ row.id } />

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

@@ -11,6 +11,12 @@ import { trackVariablesManagerEvent } from '../../utils/tracking';
 import { getVariableTypes } from '../../variables-registry/variable-type-registry';
 import { VariablePromotionChip, type VariablePromotionChipRef } from '../ui/variable-promotion-chip';
 
+const TRACKING_DATA = {
+	target_name: 'variables_manager',
+	target_location: 'variables_manager',
+	location_l1: 'create variable menu',
+} as const;
+
 export const SIZE = 'tiny';
 
 type MenuOptionConfig = {
@@ -133,6 +139,7 @@ const MenuOption = ( {
 					variableType={ config.variableType }
 					upgradeUrl={ `https://go.elementor.com/go-pro-manager-${ config.variableType }-variable/` }
 					ref={ promotionRef }
+					trackingData={ TRACKING_DATA }
 				/>
 			) }
 		</MenuItem>
@@ -142,13 +149,19 @@ const MenuOption = ( {
 export const getDefaultName = ( variables: TVariablesList, baseName: string ) => {
 	const pattern = new RegExp( `^${ baseName }-(\\d+)$`, 'i' );
 
-	let counter = 1;
+	const takenNumbers = new Set< number >();
 
 	Object.values( variables ).forEach( ( variable ) => {
-		if ( pattern.test( variable.label ) ) {
-			counter = Math.max( counter, parseInt( variable.label.match( pattern )?.[ 1 ] ?? '0', 10 ) + 1 );
+		const match = variable.label.match( pattern );
+		if ( match ) {
+			takenNumbers.add( parseInt( match[ 1 ], 10 ) );
 		}
 	} );
 
+	let counter = 1;
+	while ( takenNumbers.has( counter ) ) {
+		counter++;
+	}
+
 	return `${ baseName }-${ counter }`;
 };

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

@@ -436,7 +436,7 @@ const StopSyncConfirmationDialog = ( { open, onClose, onConfirm }: StopSyncConfi
 			<ConfirmationDialog.Content>
 				<ConfirmationDialog.ContentText>
 					{ __(
-						'This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.',
+						'This will disconnect the variable color from Global Colors. Existing uses on your site will automatically switch to a default color.',
 						'elementor'
 					) }
 				</ConfirmationDialog.ContentText>

package/src/components/variables-selection.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import * as React from 'react';
+import { trackUpgradePromotionClick, trackViewPromotion } from '@elementor/editor-controls';
 import {
 	PopoverHeader,
 	PopoverMenuList,
@@ -132,6 +133,16 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings, d
 		setSearchValue( '' );
 	};
 
+	useEffect( () => {
+		if ( disabled ) {
+			trackViewPromotion( {
+				target_name: 'variables_popover',
+				target_location: 'widget_panel',
+				location_l1: 'variables_list',
+			} );
+		}
+	}, [ disabled ] );
+
 	return (
 		<SectionPopoverBody>
 			<PopoverHeader
@@ -172,6 +183,12 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings, d
 								variableType
 							) }
 							upgradeUrl={ getProUpgradeUrl( variableType ) }
+							onCtaClick={ () =>
+								trackUpgradePromotionClick( {
+									target_name: 'variables_popover',
+									location_l1: 'variables_list',
+								} )
+							}
 						/>
 					) }
 				</>

package/src/init.ts

@@ -4,6 +4,7 @@ import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { isTransformable, type PropValue } from '@elementor/editor-props';
 import { controlActionsMenu } from '@elementor/menus';
 
+import { OpenPanelFromEvent } from './components/open-panel-from-event';
 import { OpenPanelFromUrl } from './components/open-panel-from-url';
 import { panel } from './components/variables-manager/variables-manager-panel';
 import { VariableControl } from './controls/variable-control';
@@ -56,6 +57,11 @@ export function init() {
 		component: OpenPanelFromUrl,
 	} );
 
+	injectIntoLogic( {
+		id: 'variables-open-panel-from-event',
+		component: OpenPanelFromEvent,
+	} );
+
 	registerPanel( panel );
 }
 

package/src/register-variable-types.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { trackUpgradePromotionClick } from '@elementor/editor-controls';
 import { colorPropTypeUtil, sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { CtaButton } from '@elementor/editor-ui';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
@@ -33,14 +34,14 @@ export function registerVariableTypes() {
 
 			if ( variable.sync_to_v3 ) {
 				actions.push( {
-					name: __( 'Stop syncing to Version 3', 'elementor' ),
+					name: __( 'Stop syncing to Global Colors', 'elementor' ),
 					icon: ResetIcon,
 					color: 'text.primary',
 					onClick: () => handlers.onStopSync( variableId ),
 				} );
 			} else {
 				actions.push( {
-					name: __( 'Sync to Version 3', 'elementor' ),
+					name: __( 'Sync to Global Colors', 'elementor' ),
 					icon: ResetIcon,
 					color: 'text.primary',
 					onClick: () => handlers.onStartSync( variableId ),
@@ -69,7 +70,15 @@ export function registerVariableTypes() {
 		styleTransformer: EmptyTransformer,
 		variableType: 'size',
 		selectionFilter: () => [],
-		emptyState: <CtaButton size="small" href={ 'https://go.elementor.com/go-pro-panel-size-variable/' } />,
+		emptyState: (
+			<CtaButton
+				size="small"
+				href={ 'https://go.elementor.com/go-pro-panel-size-variable/' }
+				onClick={ () =>
+					trackUpgradePromotionClick( { target_name: 'variables_popover', location_l1: 'variables_list' } )
+				}
+			/>
+		),
 	};
 
 	registerVariableType( {

package/src/renderers/style-variables-renderer.tsx

@@ -10,7 +10,7 @@ import { Portal } from '@elementor/ui';
 import { styleVariablesRepository } from '../style-variables-repository';
 import { type StyleVariables, type Variable } from '../types';
 
-const VARIABLES_WRAPPER = 'body';
+const VARIABLES_WRAPPER = ':root';
 
 export function StyleVariablesRenderer() {
 	const container = usePortalContainer();