@elementor/editor-editing-panel 1.38.1 → 1.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.38.1",
+  "version": "1.40.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,24 +39,25 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.19.3",
-    "@elementor/editor-canvas": "0.22.0",
-    "@elementor/editor-controls": "0.31.0",
-    "@elementor/editor-current-user": "0.4.0",
+    "@elementor/editor": "0.19.4",
+    "@elementor/editor-canvas": "0.22.1",
+    "@elementor/editor-controls": "0.33.0",
+    "@elementor/editor-current-user": "0.5.0",
+    "@elementor/editor-documents": "0.13.6",
     "@elementor/editor-elements": "0.8.4",
-    "@elementor/editor-panels": "0.15.3",
+    "@elementor/editor-panels": "0.15.4",
     "@elementor/editor-props": "0.12.1",
     "@elementor/editor-responsive": "0.13.5",
     "@elementor/editor-styles": "0.6.8",
-    "@elementor/editor-styles-repository": "0.9.0",
-    "@elementor/editor-ui": "0.8.2",
+    "@elementor/editor-styles-repository": "0.10.0",
+    "@elementor/editor-ui": "0.9.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/icons": "1.40.1",
     "@elementor/locations": "0.8.0",
     "@elementor/menus": "0.1.5",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.34.2",
+    "@elementor/ui": "1.34.5",
     "@elementor/utils": "0.4.0",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/creatable-autocomplete/autocomplete-option-internal-properties.ts

@@ -12,10 +12,7 @@ export function addGroupToOptions< TOption extends Option >(
 	} );
 }
 
-export function removeOptionsInternalKeys< TOption extends Option >( options: InternalOption< TOption >[] ): TOption[] {
-	return options.map( ( option ) => {
-		const { _group, _action, ...rest } = option;
-
-		return rest as unknown as TOption;
-	} );
+export function removeInternalKeys< TOption extends Option >( option: InternalOption< TOption > ): TOption {
+	const { _group, _action, ...rest } = option;
+	return rest as unknown as TOption;
 }

package/src/components/creatable-autocomplete/creatable-autocomplete.tsx

@@ -19,6 +19,8 @@ import { useInputState, useOpenState } from './use-autocomplete-states';
 import { useCreateOption } from './use-create-option';
 import { useFilterOptions } from './use-filter-options';
 
+const MIN_INPUT_LENGTH = 2;
+
 export const CreatableAutocomplete = React.forwardRef( CreatableAutocompleteInner ) as <
 	TOption extends SafeOptionConstraint,
 >(
@@ -36,6 +38,7 @@ function CreatableAutocompleteInner< TOption extends SafeOptionConstraint >(
 		placeholder,
 		onCreate,
 		validate,
+		renderEmptyState,
 		...props
 	}: CreatableAutocompleteProps< TOption >,
 	ref: React.ForwardedRef< HTMLElement >
@@ -56,8 +59,13 @@ function CreatableAutocompleteInner< TOption extends SafeOptionConstraint >(
 		setInputValue,
 		closeDropdown,
 	} );
+
 	const filterOptions = useFilterOptions( { options, selected, onCreate, entityName } );
 
+	const isCreatable = Boolean( onCreate );
+
+	const freeSolo = isCreatable || inputValue.length < MIN_INPUT_LENGTH || undefined;
+
 	return (
 		<Autocomplete< InternalOption< TOption >, true, true, true >
 			renderTags={ ( tagValue, getTagProps ) => {
@@ -72,7 +80,8 @@ function CreatableAutocompleteInner< TOption extends SafeOptionConstraint >(
 			} }
 			{ ...( props as AutocompleteProps< InternalOption< TOption >, true, true, true > ) }
 			ref={ ref }
-			freeSolo
+			freeSolo={ freeSolo }
+			forcePopupIcon={ false }
 			multiple
 			clearOnBlur
 			selectOnFocus
@@ -98,8 +107,8 @@ function CreatableAutocompleteInner< TOption extends SafeOptionConstraint >(
 				return (
 					<TextField
 						{ ...params }
-						placeholder={ placeholder }
 						error={ Boolean( error ) }
+						placeholder={ placeholder }
 						{ ...inputHandlers }
 						sx={ ( theme: Theme ) => ( {
 							'.MuiAutocomplete-inputRoot.MuiInputBase-adornedStart': {
@@ -134,6 +143,20 @@ function CreatableAutocompleteInner< TOption extends SafeOptionConstraint >(
 					</li>
 				);
 			} }
+			noOptionsText={ renderEmptyState?.( {
+				searchValue: inputValue,
+				onClear: () => {
+					setInputValue( '' );
+					closeDropdown();
+				},
+			} ) }
+			isOptionEqualToValue={ ( option, value ) => {
+				if ( typeof option === 'string' ) {
+					return option === value;
+				}
+
+				return option.value === value.value;
+			} }
 		/>
 	);
 }

package/src/components/creatable-autocomplete/types.ts

@@ -1,4 +1,4 @@
-import { type AutocompleteProps } from '@elementor/ui';
+import { type AutocompleteChangeReason, type AutocompleteProps } from '@elementor/ui';
 
 export type Option = {
 	label: string;
@@ -21,6 +21,14 @@ export type SafeOptionConstraint = Option & {
 export type ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };
 export type ValidationEvent = 'inputChange' | 'create';
 
+export type OnSelect< TOption extends Option > = (
+	value: TOption[],
+	reason: AutocompleteChangeReason,
+	option: TOption
+) => void;
+type OnCreate = ( value: string ) => unknown;
+type Validate = ( value: string, event: ValidationEvent ) => ValidationResult;
+
 export type CreatableAutocompleteProps< TOption extends SafeOptionConstraint > = Omit<
 	AutocompleteProps< TOption, true, true, true >,
 	'renderInput' | 'onSelect' | 'options'
@@ -32,7 +40,8 @@ export type CreatableAutocompleteProps< TOption extends SafeOptionConstraint > =
 		singular: string;
 		plural: string;
 	};
-	onSelect?: ( value: TOption[] ) => void;
-	onCreate?: ( value: string ) => unknown;
-	validate?: ( value: string, event: ValidationEvent ) => ValidationResult;
+	renderEmptyState?: ( props: { searchValue: string; onClear: () => void } ) => React.ReactNode;
+	onSelect?: OnSelect< TOption >;
+	onCreate?: OnCreate;
+	validate?: Validate;
 };

package/src/components/creatable-autocomplete/use-autocomplete-change.ts

@@ -1,75 +1,88 @@
-import { removeOptionsInternalKeys } from './autocomplete-option-internal-properties';
-import { type InternalOption, type Option } from './types';
+import { type AutocompleteChangeDetails, type AutocompleteChangeReason } from '@elementor/ui';
+
+import { removeInternalKeys } from './autocomplete-option-internal-properties';
+import { type InternalOption, type OnSelect, type Option } from './types';
 
 export function useAutocompleteChange< TOption extends Option >( params: {
 	options: InternalOption< TOption >[];
-	onSelect?: ( value: TOption[] ) => void;
-	createOption: ( value: string ) => Promise< unknown >;
+	onSelect?: OnSelect< TOption >;
+	createOption: ( ( value: string ) => Promise< unknown > ) | null;
 	setInputValue: ( value: string ) => void;
 	closeDropdown: () => void;
 } ) {
 	const { options, onSelect, createOption, setInputValue, closeDropdown } = params;
 
+	if ( ! onSelect && ! createOption ) {
+		return;
+	}
+
 	const handleChange = async (
 		_: React.SyntheticEvent,
 		selectedOrInputValue: Array< InternalOption< TOption > | string >,
-		reason: string
+		reason: AutocompleteChangeReason,
+		details?: AutocompleteChangeDetails< InternalOption< TOption > | string >
 	) => {
-		// Separate options and new input value
+		const changedOption = details?.option;
+		if ( ! changedOption || ( typeof changedOption === 'object' && changedOption.fixed ) ) {
+			// If `changedOption` is nullish it means no option was selected, created or removed.
+			// The reason is either "blur" which we don't support (can't be "clear" since we disabled it).
+			// If the option is fixed, it can't be selected, created or removed.
+			return;
+		}
+
 		const selectedOptions = selectedOrInputValue.filter( ( option ) => typeof option !== 'string' );
 
-		const newInputValue = selectedOrInputValue.reduce( ( acc: string | null, option ): string | null => {
-			if ( typeof option === 'string' ) {
-				return option;
-			} else if ( option._action === 'create' ) {
-				return option.value;
-			}
-			return acc;
-		}, null );
+		switch ( reason ) {
+			case 'removeOption':
+				const removedOption = changedOption as InternalOption< TOption >;
+				updateSelectedOptions( selectedOptions, 'removeOption', removedOption );
+				break;
 
-		const inputValueMatchesExistingOption =
-			newInputValue && options.find( ( option ) => option.label === newInputValue );
+			// User clicked an option. It's either an existing option, or "Create <new option>".
+			case 'selectOption': {
+				const selectedOption = changedOption as InternalOption< TOption >;
 
-		// Handle creation of new option
-		if (
-			newInputValue &&
-			shouldCreateNewOption( reason, selectedOptions, newInputValue, Boolean( inputValueMatchesExistingOption ) )
-		) {
-			return createOption( newInputValue );
-		}
+				if ( selectedOption._action === 'create' ) {
+					const newOption = selectedOption.value as string;
+					return createOption?.( newOption );
+				}
+
+				updateSelectedOptions( selectedOptions, 'selectOption', selectedOption );
+				break;
+			}
+
+			// User pressed "Enter" after typing input. The input is either matching existing option or a new option to create.
+			case 'createOption': {
+				const inputValue = changedOption as string;
 
-		// Handle selection of existing option
-		if ( reason === 'createOption' && inputValueMatchesExistingOption ) {
-			selectedOptions.push( inputValueMatchesExistingOption );
+				const matchingOption = options.find(
+					( option ) => option.label.toLocaleLowerCase() === inputValue.toLocaleLowerCase()
+				);
+				if ( matchingOption ) {
+					selectedOptions.push( matchingOption );
+					updateSelectedOptions( selectedOptions, 'selectOption', matchingOption );
+				} else {
+					return createOption?.( inputValue );
+				}
+				break;
+			}
 		}
 
-		updateSelectedOptions( selectedOptions );
 		setInputValue( '' );
 		closeDropdown();
 	};
 
 	return handleChange;
 
-	function shouldCreateNewOption(
-		reason: string,
+	function updateSelectedOptions(
 		selectedOptions: InternalOption< TOption >[],
-		newInputValue: string | undefined,
-		inputValueMatchesExistingOption: boolean
+		reason: AutocompleteChangeReason,
+		changedOption: InternalOption< TOption >
 	) {
-		const createOptionWasClicked =
-			reason === 'selectOption' && selectedOptions.some( ( option ) => option._action === 'create' );
-
-		const enterWasPressed =
-			reason === 'createOption' && ! options.some( ( option ) => option.label === newInputValue );
-		const createOptionWasDisplayed = ! inputValueMatchesExistingOption;
-
-		return createOptionWasClicked || ( enterWasPressed && createOptionWasDisplayed );
-	}
-
-	function updateSelectedOptions( selectedOptions: InternalOption< TOption >[] ) {
-		const fixedOptions = options.filter( ( option ) => !! option.fixed );
-		const updatedOptions = [ ...fixedOptions, ...selectedOptions.filter( ( option ) => ! option.fixed ) ];
-
-		onSelect?.( removeOptionsInternalKeys( updatedOptions ) );
+		onSelect?.(
+			selectedOptions.map( ( option ) => removeInternalKeys( option ) ),
+			reason,
+			removeInternalKeys( changedOption )
+		);
 	}
 }

package/src/components/creatable-autocomplete/use-create-option.ts

@@ -13,11 +13,11 @@ export function useCreateOption( params: {
 
 	const [ loading, setLoading ] = useState( false );
 
-	const createOption = async ( value: string ) => {
-		if ( ! onCreate ) {
-			return;
-		}
+	if ( ! onCreate ) {
+		return { createOption: null, loading: false };
+	}
 
+	const createOption = async ( value: string ) => {
 		setLoading( true );
 
 		if ( validate ) {

package/src/components/css-classes/css-class-context.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+
+type CssClassContextType = {
+	id: string | null;
+	provider: string | null;
+	label: string;
+	isActive: boolean;
+	onClickActive: ( id: string | null ) => void;
+	handleRename: () => void;
+	setError?: ( error: string | null ) => void;
+};
+
+const CssClassContext = createContext< CssClassContextType | null >( null );
+
+export const useCssClass = () => {
+	const context = useContext( CssClassContext );
+	if ( ! context ) {
+		throw new Error( 'useCssClass must be used within a CssClassProvider' );
+	}
+	return context;
+};
+
+type CssClassProviderProps = CssClassContextType & {
+	children: React.ReactNode;
+};
+
+export function CssClassProvider( { children, ...contextValue }: CssClassProviderProps ) {
+	return <CssClassContext.Provider value={ contextValue }>{ children }</CssClassContext.Provider>;
+}

package/src/components/css-classes/css-class-item.tsx

@@ -17,6 +17,7 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
+import { CssClassProvider } from './css-class-context';
 import { CssClassMenu } from './css-class-menu';
 
 type CssClassItemProps = {
@@ -35,18 +36,10 @@ type CssClassItemProps = {
 
 const CHIP_SIZE = 'tiny';
 
-export function CssClassItem( {
-	id,
-	provider,
-	label,
-	isActive,
-	color: colorProp,
-	icon,
-	chipProps,
-	onClickActive,
-	renameLabel,
-	setError,
-}: CssClassItemProps ) {
+export function CssClassItem( props: CssClassItemProps ) {
+	const { chipProps, icon, color: colorProp, ...classProps } = props;
+	const { id, provider, label, isActive, onClickActive, renameLabel, setError } = classProps;
+
 	const { meta, setMetaState } = useStyle();
 	const popupState = usePopupState( { variant: 'popover' } );
 	const [ chipRef, setChipRef ] = useState< HTMLElement | null >( null );
@@ -145,13 +138,9 @@ export function CssClassItem( {
 					/>
 				) }
 			</UnstableChipGroup>
-			<CssClassMenu
-				styleId={ id }
-				popupState={ popupState }
-				provider={ provider }
-				handleRename={ openEditMode }
-				anchorEl={ chipRef }
-			/>
+			<CssClassProvider { ...classProps } handleRename={ openEditMode }>
+				<CssClassMenu popupState={ popupState } anchorEl={ chipRef } />
+			</CssClassProvider>
 		</>
 	);
 }

package/src/components/css-classes/css-class-menu.tsx

@@ -1,29 +1,39 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
-import { isElementsStylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
-import { MenuListItem } from '@elementor/editor-ui';
+import {
+	isElementsStylesProvider,
+	stylesRepository,
+	useUserStylesCapability,
+} from '@elementor/editor-styles-repository';
+import { MenuItemInfotip, MenuListItem } from '@elementor/editor-ui';
 import { bindMenu, Divider, Menu, MenuSubheader, type PopupState, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
-import { useUnapplyClass } from '../../hooks/use-unapply-class';
 import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
-import { StyleIndicator, type StyleIndicatorVariant } from '../style-indicator';
+import { StyleIndicator } from '../style-indicator';
+import { useCssClass } from './css-class-context';
+import { useUnapplyClass } from './use-apply-and-unapply-class';
 
-const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
+type State = {
+	key: StyleDefinitionStateWithNormal;
+	value: StyleDefinitionState | null;
+};
+
+const STATES: State[] = [
+	{ key: 'normal', value: null },
+	{ key: 'hover', value: 'hover' },
+	{ key: 'focus', value: 'focus' },
+	{ key: 'active', value: 'active' },
+];
 
 type CssClassMenuProps = {
-	styleId: string | null;
-	provider: string | null;
 	popupState: PopupState;
-	handleRename: () => void;
 	anchorEl: HTMLElement | null;
 };
 
-export function CssClassMenu( { styleId, provider, popupState, handleRename, anchorEl }: CssClassMenuProps ) {
-	const styledStates = useStyledStates( styleId );
-
-	const indicatorVariant = ! provider || isElementsStylesProvider( provider ) ? 'local' : 'global';
+export function CssClassMenu( { popupState, anchorEl }: CssClassMenuProps ) {
+	const { provider } = useCssClass();
 
 	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
 		e.stopPropagation();
@@ -47,35 +57,18 @@ export function CssClassMenu( { styleId, provider, popupState, handleRename, anc
 			disableAutoFocusItem
 		>
 			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
-			{ getMenuItemsByProvider( { provider, styleId, handleRename, closeMenu: popupState.close } ) }
+			{ getMenuItemsByProvider( { provider, closeMenu: popupState.close } ) }
 			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
 				{ __( 'States', 'elementor' ) }
 			</MenuSubheader>
-			<StateMenuItem
-				key="normal"
-				state={ null }
-				styleId={ styleId }
-				closeMenu={ popupState.close }
-				isStyled={ styledStates.normal }
-				indicatorVariant={ indicatorVariant }
-			/>
 			{ STATES.map( ( state ) => {
-				return (
-					<StateMenuItem
-						key={ state }
-						state={ state }
-						styleId={ styleId }
-						closeMenu={ popupState.close }
-						isStyled={ styledStates[ state ] }
-						indicatorVariant={ indicatorVariant }
-					/>
-				);
+				return <StateMenuItem key={ state.key } state={ state.value } closeMenu={ popupState.close } />;
 			} ) }
 		</Menu>
 	);
 }
 
-function useStyledStates( styleId: string | null ): Partial< Record< StyleDefinitionStateWithNormal, true > > {
+function useModifiedStates( styleId: string | null ): Partial< Record< StyleDefinitionStateWithNormal, true > > {
 	const { meta } = useStyle();
 
 	const styleDef = stylesRepository.all().find( ( style ) => style.id === styleId );
@@ -87,18 +80,8 @@ function useStyledStates( styleId: string | null ): Partial< Record< StyleDefini
 	);
 }
 
-function getMenuItemsByProvider( {
-	provider,
-	styleId,
-	handleRename,
-	closeMenu,
-}: {
-	provider: string | null;
-	styleId: string | null;
-	handleRename: () => void;
-	closeMenu: () => void;
-} ) {
-	if ( ! styleId || ! provider ) {
+function getMenuItemsByProvider( { provider, closeMenu }: { provider: string | null; closeMenu: () => void } ) {
+	if ( ! provider ) {
 		return [];
 	}
 
@@ -108,8 +91,8 @@ function getMenuItemsByProvider( {
 	const [ canUpdate, canDelete ] = [ providerActions?.update, providerActions?.delete ];
 
 	const actions = [
-		canUpdate && <RenameClassMenuItem key="rename-class" handleRename={ handleRename } closeMenu={ closeMenu } />,
-		canDelete && <UnapplyClassMenuItem key="unapply-class" styleId={ styleId } closeMenu={ closeMenu } />,
+		canUpdate && <RenameClassMenuItem key="rename-class" closeMenu={ closeMenu } />,
+		canDelete && <UnapplyClassMenuItem key="unapply-class" closeMenu={ closeMenu } />,
 	].filter( Boolean );
 
 	if ( actions.length ) {
@@ -129,23 +112,23 @@ function getMenuItemsByProvider( {
 
 type StateMenuItemProps = {
 	state: StyleDefinitionState;
-	styleId: string | null;
 	closeMenu: () => void;
-	isStyled?: boolean;
-	indicatorVariant: StyleIndicatorVariant;
 };
 
-function StateMenuItem( {
-	state,
-	styleId,
-	closeMenu,
-	isStyled = false,
-	indicatorVariant,
-	...props
-}: StateMenuItemProps ) {
+function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
+	const { id: styleId, provider } = useCssClass();
 	const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
 	const { state: activeState } = meta;
+	const { userCan } = useUserStylesCapability();
+
+	const modifiedStates = useModifiedStates( styleId );
 
+	const isUpdateAllowed = userCan( provider ?? '' ).updateProps;
+
+	const indicatorVariant = ! provider || isElementsStylesProvider( provider ) ? 'local' : 'global';
+
+	const isStyled = modifiedStates[ state ?? 'normal' ] ?? false;
+	const disabled = isUpdateAllowed ? false : ! isStyled;
 	const isActive = styleId === activeId;
 	const isSelected = state === activeState && isActive;
 
@@ -153,6 +136,7 @@ function StateMenuItem( {
 		<MenuListItem
 			{ ...props }
 			selected={ isSelected }
+			disabled={ disabled }
 			sx={ { textTransform: 'capitalize' } }
 			onClick={ () => {
 				if ( ! isActive ) {
@@ -164,49 +148,65 @@ function StateMenuItem( {
 				closeMenu();
 			} }
 		>
-			<Stack gap={ 0.75 } direction="row" alignItems="center">
-				{ isStyled && (
-					<StyleIndicator aria-label={ __( 'Has style', 'elementor' ) } variant={ indicatorVariant } />
-				) }
-				{ state ?? 'normal' }
-			</Stack>
+			<MenuItemInfotip
+				showInfoTip={ disabled }
+				content={ __( 'With your role as an editor, you can only use existing states.', 'elementor' ) }
+			>
+				<Stack gap={ 0.75 } direction="row" alignItems="center">
+					{ isStyled && (
+						<StyleIndicator aria-label={ __( 'Has style', 'elementor' ) } variant={ indicatorVariant } />
+					) }
+					{ state ?? 'normal' }
+				</Stack>
+			</MenuItemInfotip>
 		</MenuListItem>
 	);
 }
 
-function UnapplyClassMenuItem( { styleId, closeMenu, ...props }: { styleId: string; closeMenu: () => void } ) {
-	const unapplyClass = useUnapplyClass( styleId );
+function UnapplyClassMenuItem( { closeMenu, ...props }: { closeMenu: () => void } ) {
+	const { id: classId, label: classLabel } = useCssClass();
+	const unapplyClass = useUnapplyClass();
 
-	return (
+	return classId ? (
 		<MenuListItem
 			{ ...props }
 			onClick={ () => {
-				unapplyClass();
+				unapplyClass( { classId, classLabel } );
 				closeMenu();
 			} }
 		>
 			{ __( 'Remove', 'elementor' ) }
 		</MenuListItem>
-	);
+	) : null;
 }
 
-function RenameClassMenuItem( {
-	handleRename,
-	closeMenu,
-	...props
-}: {
-	handleRename: () => void;
-	closeMenu: () => void;
-} ) {
+function RenameClassMenuItem( { closeMenu }: { closeMenu: () => void } ) {
+	const { handleRename, provider } = useCssClass();
+	const { userCan } = useUserStylesCapability();
+
+	if ( ! provider ) {
+		return null;
+	}
+
+	const isAllowed = userCan( provider ).update;
+
 	return (
 		<MenuListItem
-			{ ...props }
+			disabled={ ! isAllowed }
 			onClick={ () => {
 				closeMenu();
 				handleRename();
 			} }
 		>
-			{ __( 'Rename', 'elementor' ) }
+			<MenuItemInfotip
+				showInfoTip={ ! isAllowed }
+				content={ __(
+					'With your role as an editor, you can use existing classes but can’t modify them.',
+					'elementor'
+				) }
+			>
+				{ __( 'Rename', 'elementor' ) }
+			</MenuItemInfotip>
 		</MenuListItem>
 	);
 }