@elementor/editor-controls 0.19.1 → 0.21.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.19.1",
+  "version": "0.21.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,8 +41,9 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.6.6",
+    "@elementor/editor-elements": "0.7.0",
     "@elementor/editor-props": "0.11.1",
+    "@elementor/editor-ui": "0.5.1",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",
     "@elementor/icons": "1.37.0",

package/src/components/control-form-label.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { FormLabel } from '@elementor/ui';
+
+export const ControlFormLabel = ( { children }: { children: React.ReactNode } ) => {
+	return <FormLabel size="tiny">{ children }</FormLabel>;
+};

package/src/components/control-label.tsx

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { FormLabel } from '@elementor/ui';
+import { type PropsWithChildren } from 'react';
+import { Stack } from '@elementor/ui';
 
-export const ControlLabel = ( { children }: { children: React.ReactNode } ) => {
-	return <FormLabel size="tiny">{ children }</FormLabel>;
+import { ControlAdornments } from '../control-adornments/control-adornments';
+import { ControlFormLabel } from './control-form-label';
+
+export const ControlLabel = ( { children }: PropsWithChildren< object > ) => {
+	return (
+		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
+			<ControlFormLabel>{ children }</ControlFormLabel>
+			<ControlAdornments />
+		</Stack>
+	);
 };

package/src/components/repeater.tsx

@@ -17,6 +17,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { ControlAdornments } from '../control-adornments/control-adornments';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 import { SectionContent } from './section-content';
 import { SortableItem, SortableProvider } from './sortable';
@@ -139,11 +140,17 @@ export const Repeater = < T, >( {
 
 	return (
 		<SectionContent>
-			<Stack direction="row" justifyContent="space-between" alignItems="center">
+			<Stack direction="row" justifyContent="start" alignItems="center" gap={ 1 }>
 				<Typography component="label" variant="caption" color="text.secondary">
 					{ label }
 				</Typography>
-				<IconButton size={ SIZE } onClick={ addRepeaterItem } aria-label={ __( 'Add item', 'elementor' ) }>
+				<ControlAdornments />
+				<IconButton
+					sx={ { ml: 'auto' } }
+					size={ SIZE }
+					onClick={ addRepeaterItem }
+					aria-label={ __( 'Add item', 'elementor' ) }
+				>
 					<PlusIcon fontSize={ SIZE } />
 				</IconButton>
 			</Stack>

package/src/components/text-field-inner-selection.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { forwardRef, useId } from 'react';
 import { type PropValue } from '@elementor/editor-props';
-import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
+import { MenuListItem } from '@elementor/editor-ui';
+import { bindMenu, bindTrigger, Button, InputAdornment, Menu, TextField, usePopupState } from '@elementor/ui';
 
 type TextFieldInnerSelectionProps = {
 	placeholder?: string;
@@ -66,9 +67,9 @@ export const SelectionEndAdornment = < T extends string >( {
 
 			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
 				{ options.map( ( option, index ) => (
-					<MenuItem key={ option } onClick={ () => handleMenuItemClick( index ) }>
+					<MenuListItem key={ option } onClick={ () => handleMenuItemClick( index ) }>
 						{ option.toUpperCase() }
-					</MenuItem>
+					</MenuListItem>
 				) ) }
 			</Menu>
 		</InputAdornment>

package/src/controls/background-control/background-control.tsx

@@ -4,7 +4,7 @@ import { 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 { SectionContent } from '../../components/section-content';
 import { createControl } from '../../create-control';
 import { ColorControl } from '../color-control';
@@ -22,7 +22,7 @@ export const BackgroundControl = createControl( () => {
 				<PropKeyProvider bind="color">
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
+							<ControlFormLabel>{ __( 'Color', 'elementor' ) }</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 6 }>
 							<ColorControl />

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx

@@ -3,7 +3,7 @@ import { PinIcon, PinnedOffIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { ControlLabel } from '../../../../components/control-label';
+import { ControlFormLabel } from '../../../../components/control-form-label';
 import { type ToggleButtonGroupItem } from '../../../../components/control-toggle-button-group';
 import { PopoverGridContainer } from '../../../../components/popover-grid-container';
 import { ToggleControl } from '../../../toggle-control';
@@ -29,7 +29,7 @@ export const BackgroundImageOverlayAttachment = () => {
 	return (
 		<PopoverGridContainer>
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Attachment', 'elementor' ) }</ControlLabel>
+				<ControlFormLabel>{ __( 'Attachment', 'elementor' ) }</ControlFormLabel>
 			</Grid>
 			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
 				<ToggleControl options={ attachmentControlOptions } />

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
 import { LetterXIcon, LetterYIcon } from '@elementor/icons';
-import { Grid, MenuItem, Select, type SelectChangeEvent } from '@elementor/ui';
+import { Grid, Select, type SelectChangeEvent } 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 { PopoverGridContainer } from '../../../../components/popover-grid-container';
 import { SizeControl } from '../../../size-control';
 
@@ -55,7 +56,7 @@ export const BackgroundImageOverlayPosition = () => {
 			<Grid item xs={ 12 }>
 				<PopoverGridContainer>
 					<Grid item xs={ 6 }>
-						<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
+						<ControlFormLabel>{ __( 'Position', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
 						<Select
@@ -65,9 +66,9 @@ export const BackgroundImageOverlayPosition = () => {
 							fullWidth
 						>
 							{ backgroundPositionOptions.map( ( { label, value } ) => (
-								<MenuItem key={ value } value={ value ?? '' }>
+								<MenuListItem key={ value } value={ value ?? '' }>
 									{ label }
-								</MenuItem>
+								</MenuListItem>
 							) ) }
 						</Select>
 					</Grid>

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx

@@ -3,7 +3,7 @@ import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon } from '@elem
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { ControlLabel } from '../../../../components/control-label';
+import { ControlFormLabel } from '../../../../components/control-form-label';
 import { type ToggleButtonGroupItem } from '../../../../components/control-toggle-button-group';
 import { PopoverGridContainer } from '../../../../components/popover-grid-container';
 import { ToggleControl } from '../../../toggle-control';
@@ -41,7 +41,7 @@ export const BackgroundImageOverlayRepeat = () => {
 	return (
 		<PopoverGridContainer>
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Repeat', 'elementor' ) }</ControlLabel>
+				<ControlFormLabel>{ __( 'Repeat', 'elementor' ) }</ControlFormLabel>
 			</Grid>
 			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
 				<ToggleControl options={ repeatControlOptions } />

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx

@@ -12,7 +12,7 @@ import { 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 {
 	ControlToggleButtonGroup,
 	type ToggleButtonGroupItem,
@@ -68,7 +68,7 @@ export const BackgroundImageOverlaySize = () => {
 			<Grid item xs={ 12 }>
 				<PopoverGridContainer>
 					<Grid item xs={ 6 }>
-						<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+						<ControlFormLabel>{ __( 'Size', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
 						<ControlToggleButtonGroup

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -7,7 +7,7 @@ import {
 	colorPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Box, CardMedia, Grid, Tab, TabPanel, Tabs, UnstableColorIndicator } from '@elementor/ui';
+import { Box, CardMedia, Grid, styled, Tab, TabPanel, Tabs, type Theme, UnstableColorIndicator } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
@@ -160,19 +160,29 @@ const extractColorFrom = ( prop: BackgroundOverlayItemPropValue ) => {
 
 const ItemIconColor = ( { value: prop }: { value: BackgroundOverlayItemPropValue } ) => {
 	const color = extractColorFrom( prop );
-	return <UnstableColorIndicator size="inherit" component="span" value={ color } />;
+	return <StyledUnstableColorIndicator size="inherit" component="span" value={ color } />;
 };
 
 const ItemIconImage = ( { value }: { value: BackgroundImageOverlay } ) => {
 	const { imageUrl } = useImage( value );
 
-	return <CardMedia image={ imageUrl } sx={ { height: 13, width: 13, borderRadius: '4px' } } />;
+	return (
+		<CardMedia
+			image={ imageUrl }
+			sx={ ( theme: Theme ) => ( {
+				height: '1em',
+				width: '1em',
+				borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+				outline: `1px solid ${ theme.palette.action.disabled }`,
+			} ) }
+		/>
+	);
 };
 
 const ItemIconGradient = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
 	const gradient = getGradientValue( value );
 
-	return <UnstableColorIndicator size="inherit" component="span" value={ gradient } />;
+	return <StyledUnstableColorIndicator size="inherit" component="span" value={ gradient } />;
 };
 
 const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
@@ -249,6 +259,10 @@ const ImageOverlayContent = () => {
 	);
 };
 
+const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+} ) );
+
 const useImage = ( image: BackgroundImageOverlay ) => {
 	let imageTitle,
 		imageUrl: string | null = null;

package/src/controls/color-control.tsx

@@ -14,7 +14,7 @@ export const ColorControl = createControl( ( { propTypeUtil = colorPropTypeUtil,
 	const { value, setValue } = useBoundProp( propTypeUtil );
 
 	const handleChange = ( selectedColor: string ) => {
-		setValue( selectedColor );
+		setValue( selectedColor || null );
 	};
 
 	return (

package/src/controls/equal-unequal-sizes-control.tsx

@@ -5,6 +5,7 @@ import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, Tooltip, u
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
@@ -134,6 +135,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				} }
 				{ ...bindPopover( popupState ) }
 				slotProps={ {
+					// eslint-disable-next-line react-compiler/react-compiler
 					paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } },
 				} }
 			>
@@ -159,7 +161,7 @@ const MultiSizeValueControl = ( { item }: { item: Item } ) => (
 		<Grid item xs={ 6 }>
 			<Grid container gap={ 0.75 } alignItems="center">
 				<Grid item xs={ 12 }>
-					<ControlLabel>{ item.label }</ControlLabel>
+					<ControlFormLabel>{ item.label }</ControlFormLabel>
 				</Grid>
 				<Grid item xs={ 12 }>
 					<SizeControl startIcon={ item.icon } />

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

@@ -10,8 +10,8 @@ import {
 	IconButton,
 	InputAdornment,
 	Link,
-	ListSubheader,
 	MenuList,
+	MenuSubheader,
 	Popover,
 	Stack,
 	styled,
@@ -189,6 +189,7 @@ const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: Fo
 		() => {
 			virtualizer.scrollToIndex( fontListItems.findIndex( ( item ) => item.value === fontFamily ) );
 		},
+		// eslint-disable-next-line react-compiler/react-compiler
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ fontFamily ]
 	);
@@ -221,14 +222,14 @@ const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: Fo
 
 					if ( item.type === 'category' ) {
 						return (
-							<ListSubheader
+							<MenuSubheader
 								key={ virtualRow.key }
 								style={ {
 									transform: `translateY(${ virtualRow.start }px)`,
 								} }
 							>
 								{ item.value }
-							</ListSubheader>
+							</MenuSubheader>
 						);
 					}
 

package/src/controls/gap-control.tsx

@@ -5,6 +5,7 @@ import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { SizeControl } from './size-control';
@@ -61,7 +62,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Column', 'elementor' ) }</ControlLabel>
+						<ControlFormLabel>{ __( 'Column', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<Control bind={ 'column' } isLinked={ isLinked } />
@@ -69,7 +70,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 				</Grid>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Row', 'elementor' ) }</ControlLabel>
+						<ControlFormLabel>{ __( 'Row', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<Control bind={ 'row' } isLinked={ isLinked } />

package/src/controls/image-control.tsx

@@ -5,7 +5,7 @@ import { type MediaType } from '@elementor/wp-media';
 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 { createControl } from '../create-control';
 import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 import { ImageMediaControl } from './image-media-control';
@@ -27,13 +27,13 @@ export const ImageControl = createControl(
 			<PropProvider { ...propContext }>
 				<Stack gap={ 1.5 }>
 					<PropKeyProvider bind={ 'src' }>
-						<ControlLabel> { __( 'Image', 'elementor' ) } </ControlLabel>
+						<ControlFormLabel> { __( 'Image', 'elementor' ) } </ControlFormLabel>
 						<ImageMediaControl mediaTypes={ mediaTypes } />
 					</PropKeyProvider>
 					<PropKeyProvider bind={ 'size' }>
 						<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
 							<Grid item xs={ 6 }>
-								<ControlLabel> { resolutionLabel } </ControlLabel>
+								<ControlFormLabel> { resolutionLabel } </ControlFormLabel>
 							</Grid>
 							<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 								<SelectControl options={ sizes } />

package/src/controls/link-control.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useMemo, useState } from 'react';
+import { getAncestorWithAnchorTag, getDescendantWithAnchorTag } from '@elementor/editor-elements';
 import {
 	booleanPropTypeUtil,
 	linkPropTypeUtil,
@@ -23,10 +24,9 @@ import {
 	type FlatOption,
 	isCategorizedOptionPool,
 } from '../components/autocomplete';
-import { ControlLabel } from '../components/control-label';
+import { ControlFormLabel } from '../components/control-form-label';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
-import { getLinkRestriction } from '../utils/link-restriction';
 import { type ControlProps } from '../utils/types';
 
 type Props = ControlProps< {
@@ -68,7 +68,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 	);
 
 	const onEnabledChange = () => {
-		const { shouldRestrict } = getLinkRestriction( elementId );
+		const shouldRestrict = getAncestorWithAnchorTag( elementId ) || getDescendantWithAnchorTag( elementId );
 
 		if ( shouldRestrict && ! isEnabled ) {
 			return;
@@ -144,7 +144,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 						alignItems: 'center',
 					} }
 				>
-					<ControlLabel>{ __( 'Link', 'elementor' ) }</ControlLabel>
+					<ControlFormLabel>{ __( 'Link', 'elementor' ) }</ControlFormLabel>
 					<ToggleIconControl
 						enabled={ isEnabled }
 						onIconClick={ onEnabledChange }
@@ -159,7 +159,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 									options={ options }
 									allowCustomValues={ allowCustomValues }
 									placeholder={ placeholder }
-									value={ value?.destination?.value }
+									value={ value?.destination?.value?.settings?.label || value?.destination?.value }
 									onOptionChange={ onOptionChange }
 									onTextChange={ onTextChange }
 									minInputLength={ minInputLength }
@@ -201,7 +201,7 @@ const SwitchControl = () => {
 	return (
 		<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
 			<Grid item>
-				<ControlLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlLabel>
+				<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
 			</Grid>
 			<Grid item>
 				<Switch checked={ value } onClick={ onClick } />

package/src/controls/linked-dimensions-control.tsx

@@ -5,6 +5,7 @@ import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { type ExtendedValue, SizeControl } from './size-control';
@@ -72,7 +73,7 @@ export const LinkedDimensionsControl = createControl(
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
+							<ControlFormLabel>{ __( 'Top', 'elementor' ) }</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -85,9 +86,9 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>
+							<ControlFormLabel>
 								{ isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
-							</ControlLabel>
+							</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -108,7 +109,7 @@ export const LinkedDimensionsControl = createControl(
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+							<ControlFormLabel>{ __( 'Bottom', 'elementor' ) }</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -121,9 +122,9 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>
+							<ControlFormLabel>
 								{ isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }
-							</ControlLabel>
+							</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control

package/src/controls/select-control.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
-import { MenuItem, Select, type SelectChangeEvent } from '@elementor/ui';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Select, type SelectChangeEvent } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -32,9 +33,9 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 				fullWidth
 			>
 				{ options.map( ( { label, ...props } ) => (
-					<MenuItem key={ props.value } { ...props } value={ props.value ?? '' }>
+					<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
 						{ label }
-					</MenuItem>
+					</MenuListItem>
 				) ) }
 			</Select>
 		</ControlActions>

package/src/controls/stroke-control.tsx

@@ -4,7 +4,7 @@ import { 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 { SectionContent } from '../components/section-content';
 import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
@@ -39,7 +39,7 @@ const Control = ( { bind, label, children }: StrokeProps ) => (
 	<PropKeyProvider bind={ bind }>
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ label }</ControlLabel>
+				<ControlFormLabel>{ label }</ControlFormLabel>
 			</Grid>
 			<Grid item xs={ 6 }>
 				{ children }

package/src/controls/svg-media-control.tsx

@@ -7,7 +7,7 @@ import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elemen
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
-import { ControlLabel } from '../components/control-label';
+import { ControlFormLabel } from '../components/control-form-label';
 import { EnableUnfilteredModal } from '../components/enable-unfiltered-modal';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
@@ -83,7 +83,7 @@ export const SvgMediaControl = createControl( () => {
 	return (
 		<Stack gap={ 1 }>
 			<EnableUnfilteredModal open={ unfilteredModalOpenState } onClose={ onCloseUnfilteredModal } />
-			<ControlLabel> { __( 'SVG', 'elementor' ) } </ControlLabel>
+			<ControlFormLabel> { __( 'SVG', 'elementor' ) } </ControlFormLabel>
 			<ControlActions>
 				<StyledCard variant="outlined">
 					<StyledCardMediaContainer>

package/src/hooks/use-sync-external-state.tsx

@@ -34,6 +34,7 @@ export const useSyncExternalState = < TValue, >( {
 	useEffect( () => {
 		setInternal( ( prevInternal ) => toInternal( external, prevInternal ) );
 
+		// eslint-disable-next-line react-compiler/react-compiler
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ external ] );
 

package/src/index.ts

@@ -19,7 +19,7 @@ export { SvgMediaControl } from './controls/svg-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
 
 // components
-export { ControlLabel } from './components/control-label';
+export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
 
 // types
@@ -39,5 +39,6 @@ export { ControlActionsProvider, useControlActions } from './control-actions/con
 export { useBoundProp, PropProvider, PropKeyProvider } from './bound-prop-context';
 export { ControlAdornmentsProvider } from './control-adornments/control-adornments-context';
 export { ControlAdornments } from './control-adornments/control-adornments';
+
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';

package/src/control-adornments/control-label-with-adornments.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { type PropsWithChildren } from 'react';
-import { Stack } from '@elementor/ui';
-
-import { ControlLabel } from '../components/control-label';
-import { ControlAdornments } from './control-adornments';
-
-export const ControlLabelWithAdornments = ( { children }: PropsWithChildren< object > ) => {
-	return (
-		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
-			<ControlLabel>{ children }</ControlLabel>
-			<ControlAdornments />
-		</Stack>
-	);
-};

package/src/utils/link-restriction.ts

@@ -1,47 +0,0 @@
-import { getContainer } from '@elementor/editor-elements';
-
-type LinkRestriction =
-	| {
-			shouldRestrict: true;
-			restrictReason: 'ancestor' | 'descendant';
-	  }
-	| {
-			shouldRestrict: false;
-			restrictReason?: never;
-	  };
-
-export function getLinkRestriction( elementId: string ): LinkRestriction {
-	if ( getAncestorAnchor( elementId ) ) {
-		return {
-			shouldRestrict: true,
-			restrictReason: 'ancestor',
-		};
-	}
-
-	if ( getDescendantAnchor( elementId ) ) {
-		return {
-			shouldRestrict: true,
-			restrictReason: 'descendant',
-		};
-	}
-
-	return { shouldRestrict: false };
-}
-
-function getAncestorAnchor( elementId: string ) {
-	const element = getElementView( elementId );
-
-	return element?.closest( 'a' ) || null;
-}
-
-function getDescendantAnchor( elementId: string ) {
-	const element = getElementView( elementId );
-
-	return element?.querySelector( 'a' ) || null;
-}
-
-function getElementView( id: string ) {
-	const elementContainer = getContainer( id );
-
-	return elementContainer?.view?.el || null;
-}