@elementor/editor-global-classes 3.33.0-99 → 3.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "3.33.0-99",
+  "version": "3.34.2",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,23 +39,26 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-99",
-    "@elementor/editor-current-user": "3.33.0-99",
-    "@elementor/editor-documents": "3.33.0-99",
-    "@elementor/editor-editing-panel": "3.33.0-99",
-    "@elementor/editor-panels": "3.33.0-99",
-    "@elementor/editor-props": "3.33.0-99",
-    "@elementor/editor-styles": "3.33.0-99",
-    "@elementor/editor-styles-repository": "3.33.0-99",
-    "@elementor/editor-ui": "3.33.0-99",
-    "@elementor/editor-v1-adapters": "3.33.0-99",
-    "@elementor/http-client": "3.33.0-99",
-    "@elementor/icons": "1.46.0",
-    "@elementor/query": "3.33.0-99",
-    "@elementor/store": "3.33.0-99",
-    "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-99",
-    "@wordpress/i18n": "^5.13.0"
+    "@elementor/editor": "3.34.2",
+    "@elementor/editor-current-user": "3.34.2",
+    "@elementor/editor-documents": "3.34.2",
+    "@elementor/editor-editing-panel": "3.34.2",
+    "@elementor/editor-mcp": "3.34.2",
+    "@elementor/editor-panels": "3.34.2",
+    "@elementor/editor-props": "3.34.2",
+    "@elementor/editor-styles": "3.34.2",
+    "@elementor/editor-styles-repository": "3.34.2",
+    "@elementor/editor-ui": "3.34.2",
+    "@elementor/editor-v1-adapters": "3.34.2",
+    "@elementor/http-client": "3.34.2",
+    "@elementor/icons": "^1.61.0",
+    "@elementor/query": "3.34.2",
+    "@elementor/schema": "3.34.2",
+    "@elementor/store": "3.34.2",
+    "@elementor/ui": "1.36.17",
+    "@elementor/utils": "3.34.2",
+    "@wordpress/i18n": "^5.13.0",
+    "@elementor/mixpanel": "3.34.2"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/api.ts

@@ -49,3 +49,7 @@ export const apiClient = {
 			},
 		} ),
 };
+
+export const API_ERROR_CODES = {
+	DUPLICATED_LABEL: 'DUPLICATED_LABEL',
+};

package/src/components/class-manager/class-manager-button.tsx

@@ -4,14 +4,22 @@ import {
 	__useActiveDocumentActions as useActiveDocumentActions,
 } from '@elementor/editor-documents';
 import { useUserStylesCapability } from '@elementor/editor-styles-repository';
+import { SaveChangesDialog, useDialog } from '@elementor/editor-ui';
 import { IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
 import { usePrefetchCssClassUsage } from '../../hooks/use-prefetch-css-class-usage';
+import { trackGlobalClasses } from '../../utils/tracking';
 import { usePanelActions } from './class-manager-panel';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
-import { SaveChangesDialog, useDialog } from './save-changes-dialog';
+
+const trackGlobalClassesButton = () => {
+	trackGlobalClasses( {
+		event: 'classManagerOpened',
+		source: 'style-panel',
+	} );
+};
 
 export const ClassManagerButton = () => {
 	const document = useActiveDocument();
@@ -35,6 +43,11 @@ export const ClassManagerButton = () => {
 		}
 
 		openPanel();
+		trackGlobalClassesButton();
+		trackGlobalClasses( {
+			event: 'classManagerOpened',
+			source: 'style-panel',
+		} );
 		prefetchClassesUsage();
 	};
 
@@ -68,6 +81,7 @@ export const ClassManagerButton = () => {
 									await saveDocument();
 									closeSaveChangesDialog();
 									openPanel();
+									trackGlobalClassesButton();
 									prefetchClassesUsage();
 								},
 							},

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

@@ -9,7 +9,7 @@ import {
 	PanelHeader,
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
-import { ThemeProvider } from '@elementor/editor-ui';
+import { SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
 import { XIcon } from '@elementor/icons';
 import { useMutation } from '@elementor/query';
@@ -42,7 +42,6 @@ import { hasDeletedItems, onDelete } from './delete-class';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { GlobalClassesList } from './global-classes-list';
 import { blockPanelInteractions, unblockPanelInteractions } from './panel-interactions';
-import { SaveChangesDialog, useDialog } from './save-changes-dialog';
 
 const id = 'global-classes-manager';
 
@@ -64,6 +63,7 @@ export const { panel, usePanelActions } = createPanel( {
 
 		unblockPanelInteractions();
 	},
+	isOpenPreviousElement: true,
 } );
 
 export function ClassManagerPanel() {

package/src/components/class-manager/delete-class.ts

@@ -3,13 +3,19 @@ import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters
 import { __dispatch as dispatch } from '@elementor/store';
 
 import { slice } from '../../store';
+import { trackGlobalClasses } from '../../utils/tracking';
 
 let isDeleted = false;
 
 export const deleteClass = ( id: string ) => {
-	dispatch( slice.actions.delete( id ) );
-
-	isDeleted = true;
+	trackGlobalClasses( {
+		event: 'classDeleted',
+		classId: id,
+		runAction: () => {
+			dispatch( slice.actions.delete( id ) );
+			isDeleted = true;
+		},
+	} );
 };
 
 export const onDelete = async () => {

package/src/components/class-manager/delete-confirmation-dialog.tsx

@@ -53,9 +53,9 @@ const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps
 		data: { total, content },
 	} = useCssClassUsageByID( id );
 	const onConfirm = () => {
-		deleteClass( id );
-
+		//
 		closeDialog();
+		deleteClass( id );
 	};
 	// translators: %1: total usage count, %2: number of pages
 	const text =

package/src/components/class-manager/duplicate-label-dialog.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { closeDialog, EllipsisWithTooltip } from '@elementor/editor-ui';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import {
+	Alert,
+	Box,
+	Button,
+	DialogActions,
+	DialogContent,
+	DialogHeader,
+	Divider,
+	Icon,
+	Stack,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type ModifiedLabels } from '../../store';
+
+const DUP_PREFIX = 'DUP_';
+
+export const DuplicateLabelDialog = ( {
+	modifiedLabels,
+	onApprove,
+}: {
+	modifiedLabels: ModifiedLabels;
+	onApprove?: () => void;
+} ) => {
+	const handleButtonClick = () => {
+		localStorage.setItem( 'elementor-global-classes-search', DUP_PREFIX );
+		onApprove?.();
+		closeDialog();
+	};
+
+	return (
+		<>
+			<DialogHeader logo={ false }>
+				<Box display="flex" alignItems="center" gap={ 1 }>
+					<Icon color="secondary">
+						<InfoCircleFilledIcon fontSize="medium" />
+					</Icon>
+					<Typography variant="subtitle1">
+						{ __( "We've published your page and updated class names.", 'elementor' ) }
+					</Typography>
+				</Box>
+			</DialogHeader>
+			<DialogContent>
+				<Stack spacing={ 2 } direction="column">
+					<Typography variant="body2">
+						{ __(
+							'Some new classes used the same names as existing ones. To prevent conflicts, we added the prefix',
+							'elementor'
+						) }
+						<strong> { DUP_PREFIX }</strong>
+					</Typography>
+
+					<Box>
+						<Box
+							sx={ {
+								width: '100%',
+								display: 'flex',
+								gap: 2,
+								alignItems: 'flex-start',
+							} }
+						>
+							<Typography
+								variant="subtitle2"
+								sx={ {
+									fontWeight: 'bold',
+									flex: 1,
+									flexShrink: 1,
+									flexGrow: 1,
+									minWidth: 0,
+								} }
+							>
+								{ __( 'Before', 'elementor' ) }
+							</Typography>
+							<Typography
+								variant="subtitle2"
+								sx={ {
+									minWidth: '200px',
+									fontWeight: 'bold',
+									flexShrink: 0,
+									flexGrow: 0,
+									width: '200px',
+									maxWidth: '200px',
+								} }
+							>
+								{ __( 'After', 'elementor' ) }
+							</Typography>
+						</Box>
+						<Divider sx={ { mt: 0.5, mb: 0.5 } } />
+						<Stack direction="column" gap={ 0.5 } sx={ { pb: 2 } }>
+							{ Object.values( modifiedLabels ).map( ( { original, modified }, index ) => (
+								<Box
+									key={ index }
+									sx={ {
+										width: '100%',
+										display: 'flex',
+										gap: 2,
+										alignItems: 'flex-start',
+									} }
+								>
+									<Box
+										sx={ {
+											flex: 1,
+											flexShrink: 1,
+											flexGrow: 1,
+											minWidth: 0,
+										} }
+									>
+										<EllipsisWithTooltip title={ original }>
+											<Typography variant="body2" sx={ { color: 'text.secondary' } }>
+												{ original }
+											</Typography>
+										</EllipsisWithTooltip>
+									</Box>
+									<Box
+										sx={ {
+											minWidth: '200px',
+											flexShrink: 0,
+											flexGrow: 0,
+											width: '200px',
+											maxWidth: '200px',
+										} }
+									>
+										<EllipsisWithTooltip title={ modified }>
+											<Typography variant="body2" sx={ { color: 'text.primary' } }>
+												{ modified }
+											</Typography>
+										</EllipsisWithTooltip>
+									</Box>
+								</Box>
+							) ) }
+						</Stack>
+						<Box>
+							<Alert severity="info" size="small" color="secondary">
+								<strong>{ __( 'Your designs and classes are safe.', 'elementor' ) }</strong>
+								{ __(
+									'Only the prefixes were added. Find them in Class Manager by searching',
+									'elementor'
+								) }
+								<strong>{ DUP_PREFIX }</strong>
+							</Alert>
+						</Box>
+					</Box>
+				</Stack>
+			</DialogContent>
+			<DialogActions>
+				<Button color="secondary" variant="text" onClick={ handleButtonClick }>
+					{ __( 'Go to Class Manager', 'elementor' ) }
+				</Button>
+				<Button color="secondary" variant="contained" onClick={ closeDialog }>
+					{ __( 'Done', 'elementor' ) }
+				</Button>
+			</DialogActions>
+		</>
+	);
+};

package/src/components/class-manager/global-classes-list.tsx

@@ -9,6 +9,7 @@ import { useClassesOrder } from '../../hooks/use-classes-order';
 import { useFilters } from '../../hooks/use-filters';
 import { useOrderedClasses } from '../../hooks/use-ordered-classes';
 import { slice } from '../../store';
+import { trackGlobalClasses } from '../../utils/tracking';
 import { useSearchAndFilters } from '../search-and-filter/context';
 import { ClassItem } from './class-item';
 import { DeleteConfirmationProvider } from './delete-confirmation-dialog';
@@ -27,7 +28,9 @@ export const GlobalClassesList = ( { disabled }: GlobalClassesListProps ) => {
 	const cssClasses = useOrderedClasses();
 	const dispatch = useDispatch();
 	const filters = useFilters();
-	const [ classesOrder, reorderClasses ] = useReorder();
+	const [ draggedItemId, setDraggedItemId ] = React.useState< StyleDefinitionID | null >( null );
+	const draggedItemLabel = cssClasses.find( ( cssClass ) => cssClass.id === draggedItemId )?.label ?? '';
+	const [ classesOrder, reorderClasses ] = useReorder( draggedItemId, setDraggedItemId, draggedItemLabel ?? '' );
 	const filteredCssClasses = useFilteredCssClasses();
 
 	useEffect( () => {
@@ -72,26 +75,41 @@ export const GlobalClassesList = ( { disabled }: GlobalClassesListProps ) => {
 				>
 					{ filteredCssClasses?.map( ( { id, label } ) => (
 						<SortableItem key={ id } id={ id }>
-							{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (
-								<ClassItem
-									id={ id }
-									label={ label }
-									renameClass={ ( newLabel: string ) => {
-										dispatch(
-											slice.actions.update( {
-												style: {
-													id,
-													label: newLabel,
-												},
-											} )
-										);
-									} }
-									selected={ isDragged }
-									disabled={ disabled || isDragPlaceholder }
-									sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
-									showSortIndicator={ allowSorting }
-								/>
-							) }
+							{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => {
+								if ( isDragged && ! draggedItemId ) {
+									setDraggedItemId( id );
+								}
+								return (
+									<ClassItem
+										id={ id }
+										label={ label }
+										renameClass={ ( newLabel: string ) => {
+											trackGlobalClasses( {
+												event: 'classRenamed',
+												classId: id,
+												oldValue: label,
+												newValue: newLabel,
+												source: 'class-manager',
+											} );
+											dispatch(
+												slice.actions.update( {
+													style: {
+														id,
+														label: newLabel,
+													},
+												} )
+											);
+										} }
+										selected={ isDragged }
+										disabled={ disabled || isDragPlaceholder }
+										sortableTriggerProps={ {
+											...triggerProps,
+											style: triggerStyle,
+										} }
+										showSortIndicator={ allowSorting }
+									/>
+								);
+							} }
 						</SortableItem>
 					) ) }
 				</SortableProvider>
@@ -122,12 +140,25 @@ const StyledHeader = styled( Typography )< TypographyProps >( ( { theme, variant
 	},
 } ) );
 
-const useReorder = () => {
+const useReorder = (
+	draggedItemId: StyleDefinitionID | null,
+	setDraggedItemId: React.Dispatch< React.SetStateAction< StyleDefinitionID | null > >,
+	draggedItemLabel: string
+) => {
 	const dispatch = useDispatch();
 	const order = useClassesOrder();
 
 	const reorder = ( newIds: StyleDefinitionID[] ) => {
 		dispatch( slice.actions.setOrder( newIds ) );
+
+		if ( draggedItemId ) {
+			trackGlobalClasses( {
+				event: 'classManagerReorder',
+				classId: draggedItemId,
+				classTitle: draggedItemLabel,
+			} );
+			setDraggedItemId( null ); // Reset after tracking
+		}
 	};
 
 	return [ order, reorder ] as const;

package/src/components/convert-local-class-to-global-class.tsx

@@ -6,6 +6,7 @@ import { Divider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { globalClassesStylesProvider } from '../global-classes-styles-provider';
+import { trackGlobalClasses } from '../utils/tracking';
 
 type OwnProps = {
 	successCallback: ( _: string ) => void;
@@ -26,6 +27,12 @@ export const ConvertLocalClassToGlobalClass = ( props: OwnProps ) => {
 		const newId = globalClassesStylesProvider.actions.create?.( newClassName, localStyleData.variants );
 		if ( newId ) {
 			props.successCallback( newId );
+			trackGlobalClasses( {
+				classId: newId,
+				event: 'classCreated',
+				source: 'converted',
+				classTitle: newClassName,
+			} );
 		}
 	};
 

package/src/components/css-class-usage/components/css-class-usage-popover.tsx

@@ -20,6 +20,7 @@ import { Box, Chip, Divider, Icon, MenuList, Stack, styled, Tooltip, Typography
 import { __ } from '@wordpress/i18n';
 
 import { useCssClassUsageByID } from '../../../hooks/use-css-class-usage-by-id';
+import { trackGlobalClasses } from '../../../utils/tracking';
 import { type ContentType } from '../types';
 
 type CssClassUsageRecord = VirtualizedItem< 'item', string > & { docType: ContentType };
@@ -69,6 +70,14 @@ export const CssClassUsagePopover = ( {
 				} ) as CssClassUsageRecord
 		) ?? [];
 
+	const handleSelect = ( value: string ) => {
+		onNavigate( +value );
+		trackGlobalClasses( {
+			event: 'classUsageLocate',
+			classId: cssClassID,
+		} );
+	};
+
 	return (
 		<>
 			<PopoverHeader
@@ -86,7 +95,7 @@ export const CssClassUsagePopover = ( {
 			<Divider />
 			<PopoverBody width={ 300 }>
 				<PopoverMenuList
-					onSelect={ ( value ) => onNavigate( +value ) }
+					onSelect={ handleSelect }
 					items={ cssClassUsageRecords }
 					onClose={ () => {} }
 					menuListTemplate={ StyledCssClassUsageItem }

package/src/components/css-class-usage/components/css-class-usage-trigger.tsx

@@ -16,6 +16,7 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { useCssClassUsageByID } from '../../../hooks/use-css-class-usage-by-id';
+import { trackGlobalClasses } from '../../../utils/tracking';
 import { type CssClassID } from '../types';
 import { CssClassUsagePopover } from './css-class-usage-popover';
 
@@ -32,20 +33,34 @@ export const CssClassUsageTrigger = ( { id, onClick }: { id: CssClassID; onClick
 
 	const WrapperComponent = total !== 0 ? TooltipWrapper : InfoAlertMessage;
 
+	const handleMouseEnter = () => {
+		trackGlobalClasses( {
+			event: 'classUsageHovered',
+			classId: id,
+			usage: total,
+		} );
+	};
+
+	const handleClick = ( e: MouseEvent ) => {
+		if ( total !== 0 ) {
+			bindTrigger( cssClassUsagePopover ).onClick( e );
+			onClick( id );
+			trackGlobalClasses( {
+				event: 'classUsageClicked',
+				classId: id,
+			} );
+		}
+	};
+
 	return (
 		<>
-			<Box position={ 'relative' }>
+			<Box position={ 'relative' } onMouseEnter={ handleMouseEnter }>
 				<WrapperComponent total={ total }>
 					<CustomIconButton
 						disabled={ total === 0 }
 						size={ 'tiny' }
 						{ ...bindTrigger( cssClassUsagePopover ) }
-						onClick={ ( e: MouseEvent ) => {
-							if ( total !== 0 ) {
-								bindTrigger( cssClassUsagePopover ).onClick( e );
-								onClick( id );
-							}
-						} }
+						onClick={ handleClick }
 					>
 						<CurrentLocationIcon fontSize={ 'tiny' } />
 					</CustomIconButton>

package/src/components/search-and-filter/components/filter/active-filters.tsx

@@ -3,6 +3,7 @@ import { Chip, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import type { FilterKey } from '../../../../hooks/use-filtered-css-class-usage';
+import { trackGlobalClasses } from '../../../../utils/tracking';
 import { useSearchAndFilters } from '../../context';
 import { ClearIconButton } from './clear-icon-button';
 import { filterConfig } from './filter-list';
@@ -14,6 +15,12 @@ export const ActiveFilters = () => {
 
 	const handleRemove = ( key: FilterKey ) => {
 		setFilters( ( prev ) => ( { ...prev, [ key ]: false } ) );
+		trackGlobalClasses( {
+			event: 'classManagerFilterUsed',
+			action: 'remove',
+			type: key,
+			trigger: 'header',
+		} );
 	};
 
 	const activeKeys = Object.keys( filters ).filter( ( key ): key is FilterKey => filters[ key as FilterKey ] );
@@ -35,6 +42,7 @@ export const ActiveFilters = () => {
 			</Stack>
 			{ showClearIcon && (
 				<ClearIconButton
+					trigger="header"
 					tooltipText={ __( 'Clear Filters', 'elementor' ) }
 					sx={ { margin: '0 0 auto auto' } }
 				/>

package/src/components/search-and-filter/components/filter/clear-icon-button.tsx

@@ -2,19 +2,28 @@ import * as React from 'react';
 import { BrushBigIcon } from '@elementor/icons';
 import { Box, IconButton, styled, type SxProps, type Theme, Tooltip } from '@elementor/ui';
 
+import { trackGlobalClasses } from '../../../../utils/tracking';
 import { useSearchAndFilters } from '../../context';
 
-type ClearIconButtonProps = { tooltipText: React.ReactNode; sx?: SxProps< Theme > };
+type ClearIconButtonProps = { tooltipText: React.ReactNode; sx?: SxProps< Theme >; trigger: 'menu' | 'header' };
 
-export const ClearIconButton = ( { tooltipText, sx }: ClearIconButtonProps ) => {
+export const ClearIconButton = ( { tooltipText, sx, trigger }: ClearIconButtonProps ) => {
 	const {
 		filters: { onClearFilter },
 	} = useSearchAndFilters();
 
+	const handleClearFilters = () => {
+		onClearFilter( trigger );
+		trackGlobalClasses( {
+			event: 'classManagerFilterCleared',
+			trigger,
+		} );
+	};
+
 	return (
 		<Tooltip title={ tooltipText } placement="top" disableInteractive>
 			<Box>
-				<CustomIconButton aria-label={ tooltipText } size="tiny" onClick={ onClearFilter } sx={ sx }>
+				<CustomIconButton aria-label={ tooltipText } size="tiny" onClick={ handleClearFilters } sx={ sx }>
 					<BrushBigIcon fontSize="tiny" />
 				</CustomIconButton>
 			</Box>

package/src/components/search-and-filter/components/filter/css-class-filter.tsx

@@ -4,6 +4,7 @@ import { FilterIcon } from '@elementor/icons';
 import { bindPopover, bindToggle, Divider, Popover, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { trackGlobalClasses, type TrackingEvent } from '../../../../utils/tracking';
 import { useSearchAndFilters } from '../../context';
 import { ClearIconButton } from './clear-icon-button';
 import { FilterList } from './filter-list';
@@ -17,6 +18,14 @@ export const CssClassFilter = () => {
 		disableAutoFocus: true,
 	} );
 
+	React.useEffect( () => {
+		if ( popupState.isOpen ) {
+			trackGlobalClasses( {
+				event: 'classManagerFiltersOpened',
+			} as TrackingEvent );
+		}
+	}, [ popupState.isOpen ] );
+
 	const showCleanIcon = Object.values( filters ).some( ( value ) => value );
 
 	return (
@@ -50,6 +59,7 @@ export const CssClassFilter = () => {
 						showCleanIcon
 							? [
 									<ClearIconButton
+										trigger="menu"
 										key="clear-all-button"
 										tooltipText={ __( 'Clear all', 'elementor' ) }
 									/>,

package/src/components/search-and-filter/components/filter/filter-list.tsx

@@ -3,6 +3,7 @@ import { Checkbox, Chip, MenuItem, MenuList, Stack, Typography } from '@elemento
 import { __ } from '@wordpress/i18n';
 
 import { type FilterKey, useFilteredCssClassUsage } from '../../../../hooks/use-filtered-css-class-usage';
+import { trackGlobalClasses } from '../../../../utils/tracking';
 import { useSearchAndFilters } from '../../context';
 
 export const filterConfig: Record< FilterKey, string > = {
@@ -19,6 +20,12 @@ export const FilterList = () => {
 
 	const handleOnClick = ( value: FilterKey ) => {
 		setFilters( ( prev ) => ( { ...prev, [ value ]: ! prev[ value ] } ) );
+		trackGlobalClasses( {
+			event: 'classManagerFilterUsed',
+			action: filters[ value ] ? 'remove' : 'apply',
+			type: value,
+			trigger: 'menu',
+		} );
 	};
 
 	return (

package/src/components/search-and-filter/components/search/class-manager-search.tsx

@@ -3,6 +3,7 @@ import { SearchIcon } from '@elementor/icons';
 import { Box, InputAdornment, Stack, TextField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { trackGlobalClasses, type TrackingEvent } from '../../../../utils/tracking';
 import { useSearchAndFilters } from '../../context';
 
 export const ClassManagerSearch = () => {
@@ -18,6 +19,11 @@ export const ClassManagerSearch = () => {
 					fullWidth
 					size={ 'tiny' }
 					value={ inputValue }
+					onFocus={ () => {
+						trackGlobalClasses( {
+							event: 'classManagerSearched',
+						} as TrackingEvent );
+					} }
 					placeholder={ __( 'Search', 'elementor' ) }
 					onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => handleChange( e.target.value ) }
 					InputProps={ {