@elementor/editor-controls 0.4.1 → 0.6.0

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

@@ -1,21 +1,13 @@
 import * as React from 'react';
 import { type ReactNode, useId, useRef } from 'react';
-import {
-	type PropKey,
-	type PropTypeUtil,
-	type PropValue,
-	sizePropTypeUtil,
-	type SizePropValue,
-} from '@elementor/editor-props';
+import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { SizeControl } from './size-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
 type MultiSizePropValue = Record< PropKey, SizePropValue >;
 
 type Item = {
@@ -33,7 +25,9 @@ type Props< TMultiPropType extends string, TPropValue extends MultiSizePropValue
 	multiSizePropTypeUtil: PropTypeUtil< TMultiPropType, TPropValue >;
 };
 
-const isEqualSizes = ( values: SizePropValue[], items: EqualUnequalItems ) => {
+const isEqualSizes = ( propValue: MultiSizePropValue, items: EqualUnequalItems ) => {
+	const values = Object.values( propValue );
+
 	if ( values.length !== items.length ) {
 		return false;
 	}
@@ -41,7 +35,7 @@ const isEqualSizes = ( values: SizePropValue[], items: EqualUnequalItems ) => {
 	const [ firstValue, ...restValues ] = values;
 
 	return restValues.every(
-		( value ) => value.value?.size === firstValue.value?.size && value.value?.unit === firstValue.value?.unit
+		( value ) => value?.value?.size === firstValue?.value?.size && value?.value?.unit === firstValue?.value?.unit
 	);
 };
 
@@ -55,32 +49,48 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	const controlRef = useRef< HTMLElement >( null );
 	const popupState = usePopupState( { variant: 'popover', popupId } );
 
+	const {
+		propType: multiSizePropType,
+		value: multiSizeValue,
+		setValue: setMultiSizeValue,
+	} = useBoundProp( multiSizePropTypeUtil );
+
 	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
-	const { value: multiSizeValue, setValue: setMultiSizeValue } = useBoundProp( multiSizePropTypeUtil );
 
 	const splitEqualValue = () => {
 		if ( ! sizeValue ) {
-			return {};
+			return null;
 		}
 
-		return items.reduce( ( acc, { bind } ) => ( { ...acc, [ bind ]: sizePropTypeUtil.create( sizeValue ) } ), {} );
+		return items.reduce< TPropValue >(
+			( acc, { bind } ) => ( { ...acc, [ bind ]: sizePropTypeUtil.create( sizeValue ) } ),
+			{} as TPropValue
+		);
 	};
 
-	const setNestedProp = ( item: Item, newValue: SizePropValue ) => {
+	const setNestedProp = ( newValue: TPropValue ) => {
 		const newMappedValues = {
 			...( multiSizeValue ?? splitEqualValue() ),
-			[ item.bind ]: newValue,
+			...newValue,
 		};
 
-		const isEqual = isEqualSizes( Object.values( newMappedValues ), items );
+		const isEqual = isEqualSizes( newMappedValues, items );
 
 		if ( isEqual ) {
-			return setSizeValue( newValue?.value );
+			return setSizeValue( Object.values( newMappedValues )[ 0 ].value );
 		}
 
 		setMultiSizeValue( newMappedValues );
 	};
 
+	const getMultiSizeValues = () => {
+		if ( multiSizeValue ) {
+			return multiSizeValue;
+		}
+
+		return splitEqualValue() ?? null;
+	};
+
 	return (
 		<>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ controlRef }>
@@ -88,23 +98,18 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<EqualSizeControl
-						items={ items }
-						value={ sizeValue }
-						multiSizeValue={ multiSizeValue }
-						setValue={ setSizeValue }
-						iconButton={
-							<ToggleButton
-								size={ 'tiny' }
-								value={ 'check' }
-								sx={ { marginLeft: 'auto' } }
-								{ ...bindToggle( popupState ) }
-								selected={ popupState.isOpen }
-							>
-								{ icon }
-							</ToggleButton>
-						}
-					/>
+					<Stack direction="row" alignItems="center" gap={ 1 }>
+						<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
+						<ToggleButton
+							size={ 'tiny' }
+							value={ 'check' }
+							sx={ { marginLeft: 'auto' } }
+							{ ...bindToggle( popupState ) }
+							selected={ popupState.isOpen }
+						>
+							{ icon }
+						</ToggleButton>
+					</Stack>
 				</Grid>
 			</Grid>
 			<Popover
@@ -123,113 +128,34 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } },
 				} }
 			>
-				<Stack gap={ 1.5 }>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<MultiSizeValueControl
-							item={ items[ 0 ] }
-							value={ multiSizeValue }
-							setNestedProp={ setNestedProp }
-							splitEqualValue={ splitEqualValue }
-						/>
-						<MultiSizeValueControl
-							item={ items[ 1 ] }
-							value={ multiSizeValue }
-							setNestedProp={ setNestedProp }
-							splitEqualValue={ splitEqualValue }
-						/>
-					</Grid>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<MultiSizeValueControl
-							item={ items[ 3 ] }
-							value={ multiSizeValue }
-							setNestedProp={ setNestedProp }
-							splitEqualValue={ splitEqualValue }
-						/>
-						<MultiSizeValueControl
-							item={ items[ 2 ] }
-							value={ multiSizeValue }
-							setNestedProp={ setNestedProp }
-							splitEqualValue={ splitEqualValue }
-						/>
-					</Grid>
-				</Stack>
+				<PropProvider propType={ multiSizePropType } value={ getMultiSizeValues() } setValue={ setNestedProp }>
+					<Stack gap={ 1.5 }>
+						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+							<MultiSizeValueControl item={ items[ 0 ] } />
+							<MultiSizeValueControl item={ items[ 1 ] } />
+						</Grid>
+						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+							<MultiSizeValueControl item={ items[ 3 ] } />
+							<MultiSizeValueControl item={ items[ 2 ] } />
+						</Grid>
+					</Stack>
+				</PropProvider>
 			</Popover>
 		</>
 	);
 }
 
-const MultiSizeValueControl = < TPropValue extends MultiSizePropValue >( {
-	item,
-	value,
-	setNestedProp,
-	splitEqualValue,
-}: {
-	item: Item;
-	value: TPropValue | undefined;
-	setNestedProp: ( item: Item, newValue: SizePropValue ) => void;
-	splitEqualValue: () => TPropValue;
-} ) => {
-	const handleChange = ( val: SizePropValue ) => setNestedProp( item, val );
-
-	const getMultiSizeValues = () => {
-		if ( value ) {
-			return value?.[ item.bind ] ?? null;
-		}
-
-		return splitEqualValue()?.[ item.bind ] ?? null;
-	};
-
-	return (
-		<BoundPropProvider bind={ '' } setValue={ handleChange as SetContextValue } value={ getMultiSizeValues() }>
-			<Grid item xs={ 6 }>
-				<Grid container gap={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ item.label }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<SizeControl startIcon={ item.icon } />
-					</Grid>
+const MultiSizeValueControl = ( { item }: { item: Item } ) => (
+	<PropKeyProvider bind={ item.bind }>
+		<Grid item xs={ 6 }>
+			<Grid container gap={ 1 } alignItems="center">
+				<Grid item xs={ 12 }>
+					<ControlLabel>{ item.label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 12 }>
+					<SizeControl startIcon={ item.icon } />
 				</Grid>
 			</Grid>
-		</BoundPropProvider>
-	);
-};
-
-const EqualSizeControl = ( {
-	value,
-	items,
-	setValue,
-	iconButton,
-	multiSizeValue,
-}: {
-	value: SizePropValue[ 'value' ] | null;
-	items: EqualUnequalItems;
-	setValue: ( newValue: SizePropValue[ 'value' ] ) => void;
-	iconButton: ReactNode;
-	multiSizeValue: PropValue;
-} ) => {
-	const handleChange = ( newValue: SizePropValue ) => {
-		setValue( newValue.value );
-	};
-
-	const getDisplayValue = () => {
-		if ( value ) {
-			return sizePropTypeUtil.create( value );
-		}
-
-		const multiValues = Object.values( multiSizeValue ?? {} ) as SizePropValue[];
-
-		if ( isEqualSizes( multiValues, items ) ) {
-			return sizePropTypeUtil.create( multiValues[ 0 ].value );
-		}
-	};
-
-	return (
-		<BoundPropProvider bind={ '' } setValue={ handleChange as SetContextValue } value={ getDisplayValue() ?? null }>
-			<Stack direction="row" alignItems="center" gap={ 1 }>
-				<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
-				{ iconButton }
-			</Stack>
-		</BoundPropProvider>
-	);
-};
+		</Grid>
+	</PropKeyProvider>
+);

package/src/controls/gap-control.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { gapPropTypeUtil, type PropValue } from '@elementor/editor-props';
+import { gapPropTypeUtil, type GapPropValue } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, type SetValue, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { SizeControl } from './size-control';
@@ -12,18 +12,21 @@ import { SizeControl } from './size-control';
 export type Gap = 'row' | 'column';
 
 export const GapControl = createControl( ( { label }: { label: string } ) => {
-	const { value, setValue } = useBoundProp( gapPropTypeUtil );
+	const { propType, value, setValue } = useBoundProp( gapPropTypeUtil );
 	const { column, row, isLinked = true } = value || {};
 
-	const setLinkedValue = ( gap: Gap, newValue: PropValue ) => {
-		const updatedValue = {
-			isLinked,
-			column: isLinked ? newValue : column,
-			row: isLinked ? newValue : row,
-			[ gap ]: newValue,
-		};
+	const setLinkedValue: SetValue< GapPropValue[ 'value' ] > = ( newValue, _, meta ) => {
+		if ( ! isLinked ) {
+			return setValue( newValue );
+		}
 
-		setValue( updatedValue );
+		const newDimension = newValue[ meta?.bind as Gap ];
+
+		setValue( {
+			isLinked,
+			column: newDimension,
+			row: newDimension,
+		} );
 	};
 
 	const toggleLinked = () => {
@@ -39,7 +42,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
 
 	return (
-		<>
+		<PropProvider propType={ propType } value={ value } setValue={ setLinkedValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton
@@ -59,13 +62,9 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						<ControlLabel>{ __( 'Column', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<BoundPropProvider
-							setValue={ ( newValue ) => setLinkedValue( 'column', newValue ) }
-							value={ column }
-							bind="column"
-						>
+						<PropKeyProvider bind="column">
 							<SizeControl />
-						</BoundPropProvider>
+						</PropKeyProvider>
 					</Grid>
 				</Grid>
 				<Grid container gap={ 1 } alignItems="center">
@@ -73,16 +72,12 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						<ControlLabel>{ __( 'Row', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<BoundPropProvider
-							setValue={ ( newValue ) => setLinkedValue( 'row', newValue ) }
-							value={ row }
-							bind="row"
-						>
+						<PropKeyProvider bind="row">
 							<SizeControl />
-						</BoundPropProvider>
+						</PropKeyProvider>
 					</Grid>
 				</Grid>
 			</Stack>
-		</>
+		</PropProvider>
 	);
 } );

package/src/controls/image-control.tsx

@@ -1,53 +1,38 @@
 import * as React from 'react';
-import { imagePropTypeUtil, type ImageSrcPropValue, type PropValue, type SizePropValue } from '@elementor/editor-props';
+import { imagePropTypeUtil } from '@elementor/editor-props';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { ImageMediaControl } from './image-media-control';
 import { SelectControl } from './select-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
 export type ImageControlProps = {
 	sizes: { label: string; value: string }[];
 };
 
 export const ImageControl = createControl( ( props: ImageControlProps ) => {
-	const { value, setValue } = useBoundProp( imagePropTypeUtil );
-	const { src, size } = value || {};
-
-	const setImageSrc = ( newValue: ImageSrcPropValue ) => {
-		setValue( {
-			src: newValue,
-			size: size as SizePropValue,
-		} );
-	};
-
-	const setImageSize = ( newValue: SizePropValue ) => {
-		setValue( {
-			src: src as ImageSrcPropValue,
-			size: newValue,
-		} );
-	};
+	const propContext = useBoundProp( imagePropTypeUtil );
 
 	return (
-		<Stack gap={ 1.5 }>
-			<BoundPropProvider value={ src } setValue={ setImageSrc as SetContextValue } bind={ 'src' }>
-				<ImageMediaControl />
-			</BoundPropProvider>
-			<BoundPropProvider value={ size } setValue={ setImageSize as SetContextValue } bind={ 'size' }>
-				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-					<Grid item xs={ 6 }>
-						<ControlLabel> { __( 'Image Resolution', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 6 }>
-						<SelectControl options={ props.sizes } />
+		<PropProvider { ...propContext }>
+			<Stack gap={ 1.5 }>
+				<PropKeyProvider bind={ 'src' }>
+					<ImageMediaControl />
+				</PropKeyProvider>
+				<PropKeyProvider bind={ 'size' }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel> { __( 'Image Resolution', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 }>
+							<SelectControl options={ props.sizes } />
+						</Grid>
 					</Grid>
-				</Grid>
-			</BoundPropProvider>
-		</Stack>
+				</PropKeyProvider>
+			</Stack>
+		</PropProvider>
 	);
 } );

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

@@ -14,7 +14,7 @@ export const ImageMediaControl = createControl( () => {
 	const { id, url } = value ?? {};
 
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
-	const src = attachment?.url ?? url;
+	const src = attachment?.url ?? url?.value ?? null;
 
 	const { open } = useWpMediaFrame( {
 		types: [ 'image' ],

package/src/controls/link-control.tsx

@@ -1,89 +1,118 @@
 import * as React from 'react';
-import { type LinkPropValue, type UrlPropValue } from '@elementor/editor-props';
+import { booleanPropTypeUtil, linkPropTypeUtil, type LinkPropValue, stringPropTypeUtil } from '@elementor/editor-props';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
+import { useSessionStorage } from '@elementor/session';
 import { Collapse, Divider, Grid, IconButton, Stack, Switch } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
-import { UrlControl } from './url-control';
+import { AutocompleteControl, type GroupedOption, type Option } from './autocomplete-control';
 
-const SIZE = 'tiny';
+type Props = {
+	options?: Record< string, Option > | Record< string, GroupedOption >;
+	allowCustomValues?: boolean;
+	placeholder?: string;
+};
 
-const DEFAULT_LINK_CONTROL_VALUE: LinkPropValue = {
-	$$type: 'link',
-	value: {
-		enabled: false,
-		href: {
-			$$type: 'url',
-			value: '',
-		},
-		isTargetBlank: false,
-	},
+type LinkSessionValue = {
+	value?: LinkPropValue[ 'value' ];
+	meta?: {
+		isEnabled?: boolean;
+	};
 };
 
-export const LinkControl = createControl( () => {
-	const { value = DEFAULT_LINK_CONTROL_VALUE, setValue } = useBoundProp< LinkPropValue >();
-	const { enabled, href, isTargetBlank } = value?.value || {};
-
-	const handleOnChange = < T extends keyof LinkPropValue[ 'value' ] >(
-		key: T,
-		newValue: LinkPropValue[ 'value' ][ T ]
-	) => {
-		setValue( {
-			$$type: 'link',
-			value: {
-				...( value?.value ?? DEFAULT_LINK_CONTROL_VALUE.value ),
-				[ key ]: newValue,
-			},
-		} );
+const SIZE = 'tiny';
+
+export const LinkControl = createControl( ( props?: Props ) => {
+	const { value, path, setValue, ...propContext } = useBoundProp( linkPropTypeUtil );
+
+	const [ linkSessionValue, setLinkSessionValue ] = useSessionStorage< LinkSessionValue >( path.join( '/' ) );
+
+	const { allowCustomValues = false, options = {}, placeholder } = props || {};
+
+	const onEnabledChange = () => {
+		const { meta } = linkSessionValue ?? {};
+		const { isEnabled } = meta ?? {};
+
+		if ( isEnabled && value ) {
+			setValue( null );
+		} else if ( linkSessionValue?.value ) {
+			setValue( linkSessionValue?.value ?? null );
+		}
+
+		setLinkSessionValue( { value, meta: { isEnabled: ! isEnabled } } );
 	};
 
 	return (
-		<Stack gap={ 1.5 }>
-			<Divider />
-			<Stack
-				direction="row"
-				sx={ {
-					justifyContent: 'space-between',
-					alignItems: 'center',
-				} }
-			>
-				<ControlLabel>{ __( 'Link', 'elementor' ) }</ControlLabel>
-				<IconButton size={ SIZE } onClick={ () => handleOnChange( 'enabled', ! enabled ) }>
-					{ enabled ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
-				</IconButton>
-			</Stack>
-			<Collapse in={ enabled } timeout="auto" unmountOnExit>
-				<Stack gap={ 1.5 }>
-					<BoundPropProvider
-						value={ href }
-						setValue={ ( newHref ) => handleOnChange( 'href', newHref as UrlPropValue ) }
-						bind={ 'href' }
-					>
-						<UrlControl placeholder={ __( 'Paste URL or type', 'elementor' ) } />
-					</BoundPropProvider>
-
-					<SwitchControl
-						value={ isTargetBlank }
-						onSwitch={ () => handleOnChange( 'isTargetBlank', ! isTargetBlank ) }
+		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
+			<Stack gap={ 1.5 }>
+				<Divider />
+				<Stack
+					direction="row"
+					sx={ {
+						justifyContent: 'space-between',
+						alignItems: 'center',
+					} }
+				>
+					<ControlLabel>{ __( 'Link', 'elementor' ) }</ControlLabel>
+					<ToggleIconControl
+						enabled={ linkSessionValue?.meta?.isEnabled ?? false }
+						onIconClick={ onEnabledChange }
+						label={ __( 'Toggle Link', 'elementor' ) }
 					/>
 				</Stack>
-			</Collapse>
-		</Stack>
+				<Collapse in={ linkSessionValue?.meta?.isEnabled } timeout="auto" unmountOnExit>
+					<Stack gap={ 1.5 }>
+						<PropKeyProvider bind={ 'href' }>
+							<AutocompleteControl
+								allowCustomValues={ Object.keys( options ).length ? allowCustomValues : true }
+								options={ options }
+								propType={ stringPropTypeUtil }
+								placeholder={ placeholder }
+							/>
+						</PropKeyProvider>
+
+						<PropKeyProvider bind={ 'isTargetBlank' }>
+							<SwitchControl />
+						</PropKeyProvider>
+					</Stack>
+				</Collapse>
+			</Stack>
+		</PropProvider>
 	);
 } );
 
+type ToggleIconControlProps = {
+	enabled: boolean;
+	onIconClick: () => void;
+	label?: string;
+};
+
+const ToggleIconControl = ( { enabled, onIconClick, label }: ToggleIconControlProps ) => {
+	return (
+		<IconButton size={ SIZE } onClick={ onIconClick } aria-label={ label }>
+			{ enabled ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
+		</IconButton>
+	);
+};
+
 // @TODO Should be refactored in ED-16323
-const SwitchControl = ( { value, onSwitch }: { value: boolean; onSwitch: () => void } ) => {
+const SwitchControl = () => {
+	const { value = false, setValue } = useBoundProp( booleanPropTypeUtil );
+
+	const onChange = () => {
+		setValue( ! value );
+	};
+
 	return (
 		<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
 			<Grid item>
 				<ControlLabel>{ __( 'Open in new tab', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item>
-				<Switch checked={ value } onChange={ onSwitch } />
+				<Switch checked={ value } onChange={ onChange } />
 			</Grid>
 		</Grid>
 	);