@elementor/editor-controls 0.5.0 → 0.6.1

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { linkedDimensionsPropTypeUtil, type LinkedDimensionsPropValue, type PropKey } from '@elementor/editor-props';
+import {
+	dimensionsPropTypeUtil,
+	type DimensionsPropValue,
+	type PropKey,
+	sizePropTypeUtil,
+} from '@elementor/editor-props';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -10,41 +15,40 @@ import { createControl } from '../create-control';
 import { SizeControl } from './size-control';
 
 export const LinkedDimensionsControl = createControl( ( { label }: { label: string } ) => {
-	const { value, setValue, propType } = useBoundProp( linkedDimensionsPropTypeUtil );
-	const { top, right, bottom, left, isLinked = true } = value || {};
+	const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp( dimensionsPropTypeUtil );
+	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
 
-	const setLinkedValue: SetValue< LinkedDimensionsPropValue[ 'value' ] > = ( newValue, _, meta ) => {
+	const isLinked = ! dimensionsValue && ! sizeValue ? true : !! sizeValue;
+
+	const setValue: SetValue< DimensionsPropValue[ 'value' ] > = ( newValue ) => {
 		if ( ! isLinked ) {
-			return setValue( newValue );
+			setDimensionsValue( newValue );
+			return;
 		}
 
-		const newDimension = newValue[ meta?.bind as keyof LinkedDimensionsPropValue[ 'value' ] ];
-
-		setValue( {
-			isLinked,
-			top: newDimension,
-			right: newDimension,
-			bottom: newDimension,
-			left: newDimension,
-		} );
+		setSizeValue( newValue.top );
 	};
 
-	const toggleLinked = () => {
-		const updatedValue = {
-			isLinked: ! isLinked,
-			top,
-			right: ! isLinked ? top : right,
-			bottom: ! isLinked ? top : bottom,
-			left: ! isLinked ? top : left,
-		};
+	const onLinkToggle = () => {
+		if ( ! isLinked ) {
+			setSizeValue( dimensionsValue?.top.value );
+			return;
+		}
+
+		const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
 
-		setValue( updatedValue );
+		setDimensionsValue( {
+			top: value,
+			right: value,
+			bottom: value,
+			left: value,
+		} );
 	};
 
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setLinkedValue }>
+		<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton
@@ -53,7 +57,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 					value={ 'check' }
 					selected={ isLinked }
 					sx={ { marginLeft: 'auto' } }
-					onChange={ toggleLinked }
+					onChange={ onLinkToggle }
 				>
 					<LinkedIcon fontSize={ 'tiny' } />
 				</ToggleButton>
@@ -64,7 +68,11 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'top' } startIcon={ <SideTopIcon fontSize={ 'tiny' } /> } />
+						<Control
+							bind={ 'top' }
+							startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
+							isLinked={ isLinked }
+						/>
 					</Grid>
 				</Grid>
 				<Grid container gap={ 1 } alignItems="center">
@@ -72,7 +80,11 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'right' } startIcon={ <SideRightIcon fontSize={ 'tiny' } /> } />
+						<Control
+							bind={ 'right' }
+							startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
+							isLinked={ isLinked }
+						/>
 					</Grid>
 				</Grid>
 			</Stack>
@@ -82,7 +94,11 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'bottom' } startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> } />
+						<Control
+							bind={ 'bottom' }
+							startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
+							isLinked={ isLinked }
+						/>
 					</Grid>
 				</Grid>
 				<Grid container gap={ 1 } alignItems="center">
@@ -90,7 +106,11 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'left' } startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> } />
+						<Control
+							bind={ 'left' }
+							startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
+							isLinked={ isLinked }
+						/>
 					</Grid>
 				</Grid>
 			</Stack>
@@ -98,8 +118,14 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 	);
 } );
 
-const Control = ( { bind, startIcon }: { bind: PropKey; startIcon: React.ReactNode } ) => (
-	<PropKeyProvider bind={ bind }>
-		<SizeControl startIcon={ startIcon } />
-	</PropKeyProvider>
-);
+const Control = ( { bind, startIcon, isLinked }: { bind: PropKey; startIcon: React.ReactNode; isLinked: boolean } ) => {
+	if ( isLinked ) {
+		return <SizeControl startIcon={ startIcon } />;
+	}
+
+	return (
+		<PropKeyProvider bind={ bind }>
+			<SizeControl startIcon={ startIcon } />
+		</PropKeyProvider>
+	);
+};

package/src/controls/url-control.tsx

@@ -8,12 +8,17 @@ import { createControl } from '../create-control';
 
 export const UrlControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
 	const { value, setValue } = useBoundProp( urlPropTypeUtil );
-
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
 	return (
 		<ControlActions>
-			<TextField size="tiny" fullWidth value={ value } onChange={ handleChange } placeholder={ placeholder } />
+			<TextField
+				size="tiny"
+				fullWidth
+				value={ value ?? '' }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+			/>
 		</ControlActions>
 	);
 } );

package/src/index.ts

@@ -1,5 +1,6 @@
 // control types
 export { ImageControl } from './controls/image-control';
+export { AutocompleteControl } from './controls/autocomplete-control';
 export { TextControl } from './controls/text-control';
 export { TextAreaControl } from './controls/text-area-control';
 export { SizeControl } from './controls/size-control';