@elementor/editor-controls 1.5.0 → 3.32.0-21

package/src/controls/filter-repeater-control.tsx

@@ -1,127 +1,163 @@
 import * as React from 'react';
 import { useRef } from 'react';
 import {
-	blurFilterPropTypeUtil,
-	brightnessFilterPropTypeUtil,
-	contrastFilterPropTypeUtil,
-	dropShadowFilterPropTypeUtil,
+	type CreateOptions,
+	cssFilterFunctionPropUtil,
 	type FilterItemPropValue,
 	filterPropTypeUtil,
-	grayscaleFilterPropTypeUtil,
-	hueRotateFilterPropTypeUtil,
-	invertFilterPropTypeUtil,
 	type PropKey,
-	type PropTypeUtil,
-	saturateFilterPropTypeUtil,
-	sepiaFilterPropTypeUtil,
 	type SizePropValue,
 } from '@elementor/editor-props';
 import { backdropFilterPropTypeUtil } from '@elementor/editor-props';
-import { MenuListItem } from '@elementor/editor-ui';
-import { Box, Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { Box, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
-import { ControlLabel } from '../components/control-label';
+import { ControlFormLabel } from '../components/control-form-label';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
 import { type CollectionPropUtil, Repeater } from '../components/repeater';
 import { createControl } from '../create-control';
-import { defaultUnits, type Unit } from '../utils/size-control';
+import { type LengthUnit, lengthUnits, type Unit } from '../utils/size-control';
 import { DropShadowItemContent } from './filter-control/drop-shadow-item-content';
 import { DropShadowItemLabel } from './filter-control/drop-shadow-item-label';
-import { SizeControl } from './size-control';
+import { SelectControl } from './select-control';
+import { SizeControl, type SizeControlProps } from './size-control';
 
-type FilterType = FilterItemPropValue[ '$$type' ];
-type FilterValue = FilterItemPropValue[ 'value' ];
+type FilterType = FilterItemPropValue[ 'value' ][ 'func' ];
 
-const DEFAULT_FILTER_KEY: FilterType = 'blur';
+const DEFAULT_FILTER = 'blur';
 
 type FilterItemConfig = {
-	defaultValue: FilterValue;
+	defaultValue: FilterItemPropValue;
 	name: string;
 	valueName: string;
-	propType: PropTypeUtil< FilterValue, FilterValue >;
 	units?: Exclude< SizePropValue[ 'value' ][ 'unit' ], 'custom' | 'auto' >[];
+	sizeVariant?: SizeControlProps[ 'variant' ];
 };
 
-const filterConfig: Record< FilterType, FilterItemConfig > = {
+const filterConfig: Record< string, FilterItemConfig > = {
 	blur: {
-		defaultValue: { $$type: 'radius', radius: { $$type: 'size', value: { size: 0, unit: 'px' } } },
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'blur' },
+				args: { $$type: 'size', value: { size: 0, unit: 'px' } },
+			},
+		},
 		name: __( 'Blur', 'elementor' ),
 		valueName: __( 'Radius', 'elementor' ),
-		propType: blurFilterPropTypeUtil,
-		units: defaultUnits.filter( ( unit ) => unit !== '%' ),
+		units: lengthUnits.filter( ( unit ) => unit !== '%' ),
 	},
-	'drop-shadow': {
+	brightness: {
 		defaultValue: {
-			$$type: 'drop-shadow',
+			$$type: 'css-filter-func',
 			value: {
-				xAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
-				yAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
-				blur: { $$type: 'size', value: { size: 10, unit: 'px' } },
-				color: { $$type: 'color', value: 'rgba(0, 0, 0, 1)' },
+				func: { $$type: 'string', value: 'brightness' },
+				args: { $$type: 'size', value: { size: 100, unit: '%' } },
 			},
 		},
-		name: __( 'Drop shadow', 'elementor' ),
-		valueName: __( 'Drop-shadow', 'elementor' ),
-		propType: dropShadowFilterPropTypeUtil,
-		units: defaultUnits.filter( ( unit ) => unit !== '%' ),
-	},
-	brightness: {
-		defaultValue: { $$type: 'amount', amount: { $$type: 'size', value: { size: 100, unit: '%' } } },
 		name: __( 'Brightness', 'elementor' ),
 		valueName: __( 'Amount', 'elementor' ),
-		propType: brightnessFilterPropTypeUtil,
 		units: [ '%' ],
 	},
 	contrast: {
-		defaultValue: { $$type: 'contrast', contrast: { $$type: 'size', value: { size: 100, unit: '%' } } },
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'contrast' },
+				args: { $$type: 'size', value: { size: 100, unit: '%' } },
+			},
+		},
 		name: __( 'Contrast', 'elementor' ),
 		valueName: __( 'Amount', 'elementor' ),
-		propType: contrastFilterPropTypeUtil,
 		units: [ '%' ],
 	},
 	'hue-rotate': {
-		defaultValue: { $$type: 'hue-rotate', 'hue-rotate': { $$type: 'size', value: { size: 0, unit: 'deg' } } },
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'hue-rotate' },
+				args: { $$type: 'size', value: { size: 0, unit: 'deg' } },
+			},
+		},
 		name: __( 'Hue Rotate', 'elementor' ),
 		valueName: __( 'Angle', 'elementor' ),
-		propType: hueRotateFilterPropTypeUtil,
 		units: [ 'deg', 'rad', 'grad', 'turn' ],
 	},
 	saturate: {
-		defaultValue: { $$type: 'saturate', saturate: { $$type: 'size', value: { size: 100, unit: '%' } } },
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'saturate' },
+				args: { $$type: 'size', value: { size: 100, unit: '%' } },
+			},
+		},
 		name: __( 'Saturate', 'elementor' ),
 		valueName: __( 'Amount', 'elementor' ),
-		propType: saturateFilterPropTypeUtil,
 		units: [ '%' ],
 	},
 	grayscale: {
-		defaultValue: { $$type: 'grayscale', grayscale: { $$type: 'size', value: { size: 0, unit: '%' } } },
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'grayscale' },
+				args: { $$type: 'size', value: { size: 0, unit: '%' } },
+			},
+		},
 		name: __( 'Grayscale', 'elementor' ),
 		valueName: __( 'Amount', 'elementor' ),
-		propType: grayscaleFilterPropTypeUtil,
 		units: [ '%' ],
 	},
 	invert: {
-		defaultValue: { $$type: 'invert', invert: { $$type: 'size', value: { size: 0, unit: '%' } } },
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'invert' },
+				args: { $$type: 'size', value: { size: 0, unit: '%' } },
+			},
+		},
 		name: __( 'Invert', 'elementor' ),
 		valueName: __( 'Amount', 'elementor' ),
-		propType: invertFilterPropTypeUtil,
 		units: [ '%' ],
 	},
 	sepia: {
-		defaultValue: { $$type: 'sepia', sepia: { $$type: 'size', value: { size: 0, unit: '%' } } },
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'sepia' },
+				args: { $$type: 'size', value: { size: 0, unit: '%' } },
+			},
+		},
 		name: __( 'Sepia', 'elementor' ),
 		valueName: __( 'Amount', 'elementor' ),
-		propType: sepiaFilterPropTypeUtil,
 		units: [ '%' ],
 	},
+	'drop-shadow': {
+		defaultValue: {
+			$$type: 'css-filter-func',
+			value: {
+				func: { $$type: 'string', value: 'drop-shadow' },
+				args: {
+					$$type: 'drop-shadow',
+					value: {
+						xAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
+						yAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
+						blur: { $$type: 'size', value: { size: 10, unit: 'px' } },
+						color: { $$type: 'color', value: 'rgba(0, 0, 0, 1)' },
+					},
+				},
+			},
+		},
+		name: __( 'Drop shadow', 'elementor' ),
+		valueName: __( 'Drop-shadow', 'elementor' ),
+		units: lengthUnits.filter( ( unit ) => unit !== '%' ),
+	},
 };
 
-const filterKeys = Object.keys( filterConfig ) as FilterType[];
+const filterKeys = Object.keys( filterConfig );
 
-const isSingleSize = ( key: FilterType ): boolean => {
+const isSingleSize = ( key: string ): boolean => {
 	return ! [ 'drop-shadow' ].includes( key );
 };
 
@@ -145,10 +181,7 @@ export const FilterRepeaterControl = createControl( ( { filterPropName = 'filter
 					Icon: ItemIcon,
 					Label: ItemLabel,
 					Content: ItemContent,
-					initialValues: {
-						$$type: DEFAULT_FILTER_KEY,
-						value: filterConfig[ DEFAULT_FILTER_KEY ].defaultValue,
-					} as FilterItemPropValue,
+					initialValues: filterConfig[ DEFAULT_FILTER ].defaultValue,
 				} }
 			/>
 		</PropProvider>
@@ -158,7 +191,7 @@ export const FilterRepeaterControl = createControl( ( { filterPropName = 'filter
 const ItemIcon = () => <></>;
 
 const ItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
-	return isSingleSize( value.$$type ) ? (
+	return isSingleSize( value.value.func.value ?? '' ) ? (
 		<SingleSizeItemLabel value={ value } />
 	) : (
 		<DropShadowItemLabel value={ value } />
@@ -166,14 +199,14 @@ const ItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
 };
 
 const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
-	const { $$type, value: sizeValue } = value;
-	const { $$type: key } = filterConfig[ $$type ].defaultValue;
-	const defaultUnit = filterConfig[ $$type ].defaultValue[ key ].value.unit;
-	const { unit, size } = sizeValue[ key ]?.value ?? { unit: defaultUnit, size: 0 };
+	const { func, args } = value.value;
+	const defaultUnit =
+		( filterConfig[ func.value ?? '' ].defaultValue.value.args as SizePropValue ).value.unit ?? lengthUnits[ 0 ];
+	const { unit, size } = ( args as SizePropValue ).value ?? { unit: defaultUnit, size: 0 };
 
 	const label = (
 		<Box component="span" style={ { textTransform: 'capitalize' } }>
-			{ value.$$type }:
+			{ func.value ?? '' }:
 		</Box>
 	);
 
@@ -194,80 +227,86 @@ const ItemContent = ( {
 	collectionPropUtil?: CollectionPropUtil< FilterItemPropValue >;
 	anchorEl?: HTMLElement | null;
 } ) => {
-	const { value: filterValues, setValue } = useBoundProp( collectionPropUtil ?? filterPropTypeUtil );
+	const { value: filterValues = [] } = useBoundProp( collectionPropUtil ?? filterPropTypeUtil );
 	const itemIndex = parseInt( bind, 10 );
 	const item = filterValues?.[ itemIndex ];
+	return item ? (
+		<PropKeyProvider bind={ bind }>
+			<PropContent item={ item } anchorEl={ anchorEl } />
+		</PropKeyProvider>
+	) : null;
+};
 
-	const handleChange = ( e: SelectChangeEvent< string > ) => {
-		const newFilterValues = [ ...filterValues ];
-		const filterType = e.target.value as FilterType;
+const PropContent = ( { item, anchorEl }: { item: FilterItemPropValue; anchorEl?: HTMLElement | null } ) => {
+	const propContext = useBoundProp( cssFilterFunctionPropUtil );
 
-		newFilterValues[ itemIndex ] = {
-			$$type: filterType,
-			value: { ...filterConfig[ filterType ].defaultValue },
-		} as FilterItemPropValue;
+	const handleValueChange = (
+		changedValue: FilterItemPropValue[ 'value' ],
+		options?: CreateOptions,
+		meta?: { bind?: PropKey }
+	) => {
+		let newValue = structuredClone( changedValue );
+		const newFuncName = newValue?.func.value ?? '';
+		if ( meta?.bind === 'func' ) {
+			newValue = structuredClone( filterConfig[ newFuncName ].defaultValue.value );
+		}
 
-		setValue( newFilterValues );
+		if ( ! newValue.args ) {
+			return;
+		}
+		propContext.setValue( newValue );
 	};
 
 	return (
-		<PropKeyProvider bind={ bind }>
+		<PropProvider { ...propContext } setValue={ handleValueChange }>
 			<PopoverContent p={ 1.5 }>
 				<PopoverGridContainer>
 					<Grid item xs={ 6 }>
-						<ControlLabel>{ __( 'Filter', 'elementor' ) }</ControlLabel>
+						<ControlFormLabel>{ __( 'Filter', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 6 }>
-						<Select
-							sx={ { overflow: 'hidden' } }
-							size="tiny"
-							value={ item?.$$type ?? DEFAULT_FILTER_KEY }
-							onChange={ handleChange }
-							fullWidth
-						>
-							{ filterKeys.map( ( filterKey ) => (
-								<MenuListItem key={ filterKey } value={ filterKey }>
-									{ filterConfig[ filterKey ].name }
-								</MenuListItem>
-							) ) }
-						</Select>
+						<PropKeyProvider bind="func">
+							<SelectControl
+								options={ filterKeys.map( ( filterKey ) => ( {
+									label: filterConfig[ filterKey ].name,
+									value: filterKey,
+								} ) ) }
+							/>
+						</PropKeyProvider>
 					</Grid>
 				</PopoverGridContainer>
-				<Content filterType={ item?.$$type } anchorEl={ anchorEl } />
+				<PropKeyProvider bind="args">
+					<Content filterType={ item?.value.func } anchorEl={ anchorEl } />
+				</PropKeyProvider>
 			</PopoverContent>
-		</PropKeyProvider>
+		</PropProvider>
 	);
 };
 
 const Content = ( { filterType, anchorEl }: { filterType: FilterType; anchorEl?: HTMLElement | null } ) => {
-	const { propType, units = [] } = filterConfig[ filterType ];
+	const filterName = filterType?.value || DEFAULT_FILTER;
+	const filterItemConfig = filterConfig[ filterName ];
+	const { units = [] } = filterItemConfig;
 
-	return isSingleSize( filterType ) ? (
-		<SingleSizeItemContent filterType={ filterType } />
+	return isSingleSize( filterName ) ? (
+		<SingleSizeItemContent filterType={ filterName } />
 	) : (
-		<DropShadowItemContent propType={ propType } units={ units as Unit[] } anchorEl={ anchorEl } />
+		<DropShadowItemContent units={ units as LengthUnit[] } anchorEl={ anchorEl } />
 	);
 };
 
-const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) => {
-	const { propType, valueName, defaultValue, units } = filterConfig[ filterType ];
-	const { $$type } = defaultValue;
-	const context = useBoundProp( propType );
+const SingleSizeItemContent = ( { filterType }: { filterType: string } ) => {
+	const { valueName, defaultValue, units } = filterConfig[ filterType ];
 	const rowRef = useRef< HTMLDivElement >( null );
-	const defaultUnit = defaultValue[ $$type ].value.unit;
-
+	const defaultUnit = ( defaultValue.value.args as SizePropValue ).value.unit;
 	return (
-		<PropProvider { ...context }>
-			<PropKeyProvider bind={ $$type }>
-				<PopoverGridContainer ref={ rowRef }>
-					<Grid item xs={ 6 }>
-						<ControlLabel>{ valueName }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 6 }>
-						<SizeControl anchorRef={ rowRef } units={ units } defaultUnit={ defaultUnit } />
-					</Grid>
-				</PopoverGridContainer>
-			</PropKeyProvider>
-		</PropProvider>
+		<PopoverGridContainer ref={ rowRef }>
+			<Grid item xs={ 6 }>
+				<ControlFormLabel>{ valueName }</ControlFormLabel>
+			</Grid>
+			<Grid item xs={ 6 }>
+				<SizeControl anchorRef={ rowRef } units={ units as LengthUnit[] } defaultUnit={ defaultUnit as Unit } />
+			</Grid>
+		</PopoverGridContainer>
 	);
 };

package/src/controls/font-family-control/font-family-control.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ChevronDownIcon } from '@elementor/icons';
+import { ChevronDownIcon, TextIcon } from '@elementor/icons';
 import { bindPopover, bindTrigger, Popover, UnstableTag, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../../bound-prop-context';
-import { FontFamilySelector } from '../../components/font-family-selector';
+import { ItemSelector } from '../../components/item-selector';
+import { type Category } from '../../components/item-selector';
 import ControlActions from '../../control-actions/control-actions';
 import { createControl } from '../../create-control';
+import { enqueueFont } from './enqueue-font';
 
 export type FontCategory = {
 	label: string;
@@ -18,22 +21,26 @@ type FontFamilyControlProps = {
 	sectionWidth: number;
 };
 
-const SIZE = 'tiny';
-
 export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }: FontFamilyControlProps ) => {
 	const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
-
 	const isShowingPlaceholder = ! fontFamily && placeholder;
 
+	const mapFontSubs = React.useMemo< Category[] >( () => {
+		return fontFamilies.map( ( { label, fonts } ) => ( {
+			label,
+			items: fonts,
+		} ) );
+	}, [ fontFamilies ] );
+
 	return (
 		<>
 			<ControlActions>
 				<UnstableTag
 					variant="outlined"
 					label={ fontFamily || placeholder }
-					endIcon={ <ChevronDownIcon fontSize={ SIZE } /> }
+					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
 					{ ...bindTrigger( popoverState ) }
 					fullWidth
 					disabled={ disabled }
@@ -49,6 +56,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }
 					}
 				/>
 			</ControlActions>
+
 			<Popover
 				disablePortal
 				disableScrollLock
@@ -57,12 +65,16 @@ export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }
 				sx={ { my: 1.5 } }
 				{ ...bindPopover( popoverState ) }
 			>
-				<FontFamilySelector
-					fontFamilies={ fontFamilies }
-					fontFamily={ fontFamily }
-					onFontFamilyChange={ setFontFamily }
+				<ItemSelector
+					itemsList={ mapFontSubs }
+					selectedItem={ fontFamily }
+					onItemChange={ setFontFamily }
 					onClose={ popoverState.close }
 					sectionWidth={ sectionWidth }
+					title={ __( 'Font Family', 'elementor' ) }
+					itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
+					onDebounce={ enqueueFont }
+					icon={ TextIcon as React.ElementType< { fontSize: string } > }
 				/>
 			</Popover>
 		</>

package/src/controls/key-value-control.tsx

@@ -105,21 +105,24 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 	return (
 		<PropProvider { ...propContext } value={ value } setValue={ handleChange }>
 			<Grid container gap={ 1.5 }>
-				<Grid item xs={ 12 }>
-					<FormLabel size="tiny">{ keyLabel }</FormLabel>
+				<Grid item xs={ 12 } display="flex" flexDirection="column">
+					<FormLabel size="tiny" sx={ { pb: 1 } }>
+						{ keyLabel }
+					</FormLabel>
 					<PropKeyProvider bind={ 'key' }>
-						<TextControl inputValue={ sessionState.key } error={ !! keyError } sx={ { pt: 1 } } />
+						<TextControl inputValue={ sessionState.key } error={ !! keyError } />
 					</PropKeyProvider>
 					{ !! keyError && <FormHelperText error>{ keyError }</FormHelperText> }
 				</Grid>
-				<Grid item xs={ 12 }>
-					<FormLabel size="tiny">{ valueLabel }</FormLabel>
+				<Grid item xs={ 12 } display="flex" flexDirection="column">
+					<FormLabel size="tiny" sx={ { pb: 1 } }>
+						{ valueLabel }
+					</FormLabel>
 					<PropKeyProvider bind={ 'value' }>
 						<TextControl
 							inputValue={ sessionState.value }
 							error={ !! valueError }
 							inputDisabled={ !! keyError }
-							sx={ { pt: 1 } }
 						/>
 					</PropKeyProvider>
 					{ !! valueError && <FormHelperText error>{ valueError }</FormHelperText> }

package/src/controls/link-control.tsx

@@ -1,20 +1,17 @@
 import * as React from 'react';
-import { type PropsWithChildren, useMemo, useState } from 'react';
-import { getLinkInLinkRestriction, type LinkInLinkRestriction, selectElement } from '@elementor/editor-elements';
+import { useMemo, useState } from 'react';
+import { getLinkInLinkRestriction } from '@elementor/editor-elements';
 import {
-	booleanPropTypeUtil,
 	linkPropTypeUtil,
 	type LinkPropValue,
 	numberPropTypeUtil,
 	stringPropTypeUtil,
 	urlPropTypeUtil,
 } from '@elementor/editor-props';
-import { InfoTipCard } from '@elementor/editor-ui';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { type HttpResponse, httpService } from '@elementor/http-client';
-import { AlertTriangleIcon, MinusIcon, PlusIcon } from '@elementor/icons';
+import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
-import { Box, Collapse, Grid, IconButton, Infotip, Stack, Switch } from '@elementor/ui';
+import { Collapse, Grid, IconButton, Stack } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
@@ -27,6 +24,7 @@ import {
 	isCategorizedOptionPool,
 } from '../components/autocomplete';
 import { ControlFormLabel } from '../components/control-form-label';
+import { RestrictedLinkInfotip } from '../components/restricted-link-infotip';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { type ControlProps } from '../utils/types';
@@ -53,10 +51,6 @@ type LinkSessionValue = {
 type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
 
 const SIZE = 'tiny';
-const learnMoreButton = {
-	label: __( 'Learn More', 'elementor' ),
-	href: 'https://go.elementor.com/element-link-inside-link-infotip',
-};
 
 export const LinkControl = createControl( ( props: Props ) => {
 	const { value, path, setValue, ...propContext } = useBoundProp( linkPropTypeUtil );
@@ -168,14 +162,14 @@ export const LinkControl = createControl( ( props: Props ) => {
 					} }
 				>
 					<ControlFormLabel>{ label }</ControlFormLabel>
-					<ConditionalInfoTip isVisible={ ! isActive } linkInLinkRestriction={ linkInLinkRestriction }>
+					<RestrictedLinkInfotip isVisible={ ! isActive } linkInLinkRestriction={ linkInLinkRestriction }>
 						<ToggleIconControl
 							disabled={ shouldDisableAddingLink }
 							active={ isActive }
 							onIconClick={ onEnabledChange }
 							label={ __( 'Toggle link', 'elementor' ) }
 						/>
-					</ConditionalInfoTip>
+					</RestrictedLinkInfotip>
 				</Stack>
 				<Collapse in={ isActive } timeout="auto" unmountOnExit>
 					<Stack gap={ 1.5 }>
@@ -198,7 +192,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 									<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
 								</Grid>
 								<Grid item sx={ { marginInlineEnd: -1 } }>
-									<SwitchControlComponent disabled={ propContext.disabled || ! value } />
+									<SwitchControl />
 								</Grid>
 							</Grid>
 						</PropKeyProvider>
@@ -224,30 +218,6 @@ const ToggleIconControl = ( { disabled, active, onIconClick, label }: ToggleIcon
 	);
 };
 
-const SwitchControlComponent = ( { disabled }: { disabled: boolean } ) => {
-	const { value, setValue } = useBoundProp( booleanPropTypeUtil );
-	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
-
-	if ( isVersion331Active ) {
-		return <SwitchControl />;
-	}
-
-	const onClick = () => {
-		setValue( ! value );
-	};
-
-	return (
-		<Switch
-			checked={ value ?? false }
-			onClick={ onClick }
-			disabled={ disabled }
-			inputProps={ {
-				...( disabled ? { style: { opacity: 0 } } : {} ),
-			} }
-		/>
-	);
-};
-
 type FetchOptionsParams = Record< string, unknown > & { term: string };
 
 async function fetchOptions( ajaxUrl: string, params: FetchOptionsParams ) {
@@ -286,56 +256,3 @@ function generateFirstLoadedOption( unionValue: LinkPropValue[ 'value' ] | null
 		  ]
 		: [];
 }
-
-interface ConditionalInfoTipType extends PropsWithChildren {
-	linkInLinkRestriction: LinkInLinkRestriction;
-	isVisible: boolean;
-}
-
-const ConditionalInfoTip: React.FC< ConditionalInfoTipType > = ( { linkInLinkRestriction, isVisible, children } ) => {
-	const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
-
-	const handleTakeMeClick = () => {
-		if ( elementId ) {
-			selectElement( elementId );
-		}
-	};
-
-	return shouldRestrict && isVisible ? (
-		<Infotip
-			placement="right"
-			content={
-				<InfoTipCard
-					content={ INFOTIP_CONTENT[ reason ] }
-					svgIcon={ <AlertTriangleIcon /> }
-					learnMoreButton={ learnMoreButton }
-					ctaButton={ {
-						label: __( 'Take me there', 'elementor' ),
-						onClick: handleTakeMeClick,
-					} }
-				/>
-			}
-		>
-			<Box>{ children }</Box>
-		</Infotip>
-	) : (
-		<>{ children }</>
-	);
-};
-
-const INFOTIP_CONTENT = {
-	descendant: (
-		<>
-			{ __( 'To add a link to this container,', 'elementor' ) }
-			<br />
-			{ __( 'first remove the link from the elements inside of it.', 'elementor' ) }
-		</>
-	),
-	ancestor: (
-		<>
-			{ __( 'To add a link to this element,', 'elementor' ) }
-			<br />
-			{ __( 'first remove the link from its parent container.', 'elementor' ) }
-		</>
-	),
-};