@elementor/editor-controls 0.27.0 → 0.28.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.27.0",
+  "version": "0.28.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -43,13 +43,13 @@
     "@elementor/editor-current-user": "0.3.0",
     "@elementor/editor-elements": "0.8.1",
     "@elementor/editor-props": "0.12.0",
-    "@elementor/editor-ui": "0.8.0",
+    "@elementor/editor-ui": "0.8.1",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",
-    "@elementor/icons": "1.37.0",
+    "@elementor/icons": "1.40.1",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.33.2",
+    "@elementor/ui": "1.34.2",
     "@elementor/utils": "0.4.0",
     "@elementor/wp-media": "0.6.0",
     "@tanstack/react-virtual": "3.13.3",

package/src/controls/image-control.tsx

@@ -14,10 +14,11 @@ import { SelectControl } from './select-control';
 type ImageControlProps = {
 	sizes: { label: string; value: string }[];
 	resolutionLabel?: string;
+	showMode?: 'all' | 'media' | 'sizes';
 };
 
 export const ImageControl = createControl(
-	( { sizes, resolutionLabel = __( 'Image resolution', 'elementor' ) }: ImageControlProps ) => {
+	( { sizes, resolutionLabel = __( 'Image resolution', 'elementor' ), showMode = 'all' }: ImageControlProps ) => {
 		const propContext = useBoundProp( imagePropTypeUtil );
 
 		const { data: allowSvgUpload } = useUnfilteredFilesUpload();
@@ -26,20 +27,24 @@ export const ImageControl = createControl(
 		return (
 			<PropProvider { ...propContext }>
 				<Stack gap={ 1.5 }>
-					<PropKeyProvider bind={ 'src' }>
-						<ControlFormLabel> { __( 'Image', 'elementor' ) } </ControlFormLabel>
-						<ImageMediaControl mediaTypes={ mediaTypes } />
-					</PropKeyProvider>
-					<PropKeyProvider bind={ 'size' }>
-						<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
-							<Grid item xs={ 6 }>
-								<ControlFormLabel> { resolutionLabel } </ControlFormLabel>
+					{ [ 'all', 'media' ].includes( showMode ) ? (
+						<PropKeyProvider bind={ 'src' }>
+							<ControlFormLabel> { __( 'Image', 'elementor' ) } </ControlFormLabel>
+							<ImageMediaControl mediaTypes={ mediaTypes } />
+						</PropKeyProvider>
+					) : null }
+					{ [ 'all', 'sizes' ].includes( showMode ) ? (
+						<PropKeyProvider bind={ 'size' }>
+							<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
+								<Grid item xs={ 6 }>
+									<ControlFormLabel> { resolutionLabel } </ControlFormLabel>
+								</Grid>
+								<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+									<SelectControl options={ sizes } />
+								</Grid>
 							</Grid>
-							<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-								<SelectControl options={ sizes } />
-							</Grid>
-						</Grid>
-					</PropKeyProvider>
+						</PropKeyProvider>
+					) : null }
 				</Stack>
 			</PropProvider>
 		);

package/src/controls/link-control.tsx

@@ -13,7 +13,7 @@ import { InfoTipCard } from '@elementor/editor-ui';
 import { type HttpResponse, httpService } from '@elementor/http';
 import { AlertTriangleIcon, MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
-import { Box, Collapse, Divider, Grid, IconButton, Infotip, Stack, Switch } from '@elementor/ui';
+import { Box, Collapse, Grid, IconButton, Infotip, Stack, Switch } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
@@ -81,9 +81,21 @@ export const LinkControl = createControl( ( props: Props ) => {
 			return;
 		}
 
-		setIsActive( ( prevState ) => ! prevState );
-		setValue( isActive ? null : linkSessionValue?.value ?? null );
-		setLinkSessionValue( { value, meta: { isEnabled: ! isActive } } );
+		const newState = ! isActive;
+		setIsActive( newState );
+
+		if ( ! newState && value !== null ) {
+			setValue( null );
+		}
+
+		if ( newState && linkSessionValue?.value ) {
+			setValue( linkSessionValue.value );
+		}
+
+		setLinkSessionValue( {
+			value: newState ? value : linkSessionValue?.value,
+			meta: { isEnabled: newState },
+		} );
 	};
 
 	const onOptionChange = ( newValue: number | null ) => {
@@ -105,7 +117,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 			? {
 					...value,
 					destination: urlPropTypeUtil.create( newValue ),
-					label: null,
+					label: stringPropTypeUtil.create( '' ),
 			  }
 			: null;
 
@@ -143,7 +155,6 @@ export const LinkControl = createControl( ( props: Props ) => {
 	return (
 		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
 			<Stack gap={ 1.5 }>
-				<Divider />
 				<Stack
 					direction="row"
 					sx={ {