@elementor/editor-controls 0.8.0 → 0.10.0

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

@@ -6,38 +6,59 @@ import {
 	backgroundOverlayPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Box, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator, useTabs } from '@elementor/ui';
+import { Box, CardMedia, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
 import { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
+import { env } from '../../../env';
 import { ColorControl } from '../../color-control';
-import { ImageMediaControl } from '../../image-media-control';
+import { ImageControl } from '../../image-control';
 import { BackgroundImageOverlayAttachment } from './background-image-overlay/background-image-overlay-attachment';
 import { BackgroundImageOverlayPosition } from './background-image-overlay/background-image-overlay-position';
 import { BackgroundImageOverlayRepeat } from './background-image-overlay/background-image-overlay-repeat';
-import { BackgroundImageOverlayResolution } from './background-image-overlay/background-image-overlay-resolution';
 import { BackgroundImageOverlaySize } from './background-image-overlay/background-image-overlay-size';
+import { type BackgroundImageOverlay } from './types';
+import { useBackgroundTabsHistory } from './use-background-tabs-history';
 
-const defaultImagePlaceholderId = 1;
-const initialBackgroundOverlay: BackgroundOverlayItemPropValue = {
+export const initialBackgroundColorOverlay: BackgroundOverlayItemPropValue = {
+	$$type: 'background-color-overlay',
+	value: '#00000033',
+};
+
+export const getInitialBackgroundOverlay = (): BackgroundOverlayItemPropValue => ( {
 	$$type: 'background-image-overlay',
 	value: {
-		'image-src': {
-			$$type: 'image-src',
+		image: {
+			$$type: 'image',
 			value: {
-				id: {
-					$$type: 'image-attachment-id',
-					value: defaultImagePlaceholderId,
+				src: {
+					$$type: 'image-src',
+					value: {
+						url: {
+							$$type: 'url',
+							value: env.background_placeholder_image,
+						},
+						id: null,
+					},
+				},
+				size: {
+					$$type: 'string',
+					value: 'large',
 				},
 			},
 		},
 	},
-};
+} );
 
-type OverlayType = 'image' | 'color';
+const backgroundResolutionOptions = [
+	{ label: __( 'Thumbnail - 150 x 150', 'elementor' ), value: 'thumbnail' },
+	{ label: __( 'Medium - 300 x 300', 'elementor' ), value: 'medium' },
+	{ label: __( 'Large 1024 x 1024', 'elementor' ), value: 'large' },
+	{ label: __( 'Full', 'elementor' ), value: 'full' },
+];
 
 export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
@@ -52,28 +73,26 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 					Icon: ItemIcon,
 					Label: ItemLabel,
 					Content: ItemContent,
-					initialValues: initialBackgroundOverlay,
+					initialValues: getInitialBackgroundOverlay(),
 				} }
 			/>
 		</PropProvider>
 	);
 } );
 
-const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => (
-	<UnstableColorIndicator size="inherit" component="span" value={ value.value } />
-);
-
-const ItemContent = ( { bind, value }: { bind: PropKey; value: BackgroundOverlayItemPropValue } ) => {
+export const ItemContent = ( { bind }: { bind: PropKey } ) => {
 	return (
 		<PropKeyProvider bind={ bind }>
-			<Content value={ value } />
+			<Content />
 		</PropKeyProvider>
 	);
 };
 
-const Content = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	const activeTab = deriveOverlayType( value.$$type );
-	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< OverlayType >( activeTab );
+const Content = () => {
+	const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory( {
+		image: getInitialBackgroundOverlay().value,
+		color: initialBackgroundColorOverlay.value,
+	} );
 
 	return (
 		<Box sx={ { width: '100%' } }>
@@ -83,12 +102,12 @@ const Content = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
 					<Tab label={ __( 'Color', 'elementor' ) } { ...getTabProps( 'color' ) } />
 				</Tabs>
 			</Box>
-			<TabPanel { ...getTabPanelProps( 'image' ) }>
+			<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'image' ) }>
 				<Stack gap={ 1.5 }>
 					<ImageOverlayContent />
 				</Stack>
 			</TabPanel>
-			<TabPanel { ...getTabPanelProps( 'color' ) }>
+			<TabPanel { ...getTabPanelProps( 'color' ) } sx={ { p: 1.5 } }>
 				<Grid container spacing={ 1 } alignItems="center">
 					<Grid item xs={ 12 }>
 						<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
@@ -99,14 +118,35 @@ const Content = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
 	);
 };
 
-const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	const type = value.$$type;
-
-	if ( type === 'background-color-overlay' ) {
-		return <ItemLabelColor value={ value } />;
+const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	switch ( value.$$type ) {
+		case 'background-image-overlay':
+			return <ItemIconImage value={ value as BackgroundImageOverlay } />;
+		case 'background-color-overlay':
+			return <ItemIconColor value={ value } />;
+		default:
+			return null;
 	}
-	if ( type === 'background-image-overlay' ) {
-		return <ItemLabelImage value={ value } />;
+};
+
+const ItemIconColor = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	return <UnstableColorIndicator size="inherit" component="span" value={ value.value } />;
+};
+
+const ItemIconImage = ( { value }: { value: BackgroundImageOverlay } ) => {
+	const { imageUrl } = useImage( value );
+
+	return <CardMedia image={ imageUrl } sx={ { height: 13, width: 13, borderRadius: '4px' } } />;
+};
+
+const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	switch ( value.$$type ) {
+		case 'background-image-overlay':
+			return <ItemLabelImage value={ value as BackgroundImageOverlay } />;
+		case 'background-color-overlay':
+			return <ItemLabelColor value={ value } />;
+		default:
+			return null;
 	}
 };
 
@@ -114,9 +154,8 @@ const ItemLabelColor = ( { value }: { value: BackgroundOverlayItemPropValue } )
 	return <span>{ value.value }</span>;
 };
 
-const ItemLabelImage = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	const { data: attachment } = useWpMediaAttachment( value?.value[ 'image-src' ]?.value.id.value || null );
-	const imageTitle = attachment?.title || null;
+const ItemLabelImage = ( { value }: { value: BackgroundImageOverlay } ) => {
+	const { imageTitle } = useImage( value );
 
 	return <span>{ imageTitle }</span>;
 };
@@ -126,16 +165,16 @@ const ImageOverlayContent = () => {
 
 	return (
 		<PropProvider { ...propContext }>
-			<PropKeyProvider bind={ 'image-src' }>
+			<PropKeyProvider bind={ 'image' }>
 				<Grid container spacing={ 1 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<ImageMediaControl />
+						<ImageControl
+							resolutionLabel={ __( 'Resolution', 'elementor' ) }
+							sizes={ backgroundResolutionOptions }
+						/>
 					</Grid>
 				</Grid>
 			</PropKeyProvider>
-			<PropKeyProvider bind={ 'resolution' }>
-				<BackgroundImageOverlayResolution />
-			</PropKeyProvider>
 			<PropKeyProvider bind={ 'position' }>
 				<BackgroundImageOverlayPosition />
 			</PropKeyProvider>
@@ -152,14 +191,21 @@ const ImageOverlayContent = () => {
 	);
 };
 
-const deriveOverlayType = ( type: string ): OverlayType => {
-	if ( type === 'background-color-overlay' ) {
-		return 'color';
-	}
+const useImage = ( image: BackgroundImageOverlay ) => {
+	let imageTitle,
+		imageUrl: string | null = null;
+
+	const imageSrc = image?.value.image.value?.src.value;
+	const { data: attachment } = useWpMediaAttachment( imageSrc.id?.value || null );
 
-	if ( type === 'background-image-overlay' ) {
-		return 'image';
+	if ( imageSrc.id ) {
+		const imageFileTypeExtension = attachment?.subtype ? `.${ attachment.subtype }` : '';
+		imageTitle = `${ attachment?.title }${ imageFileTypeExtension }` || null;
+		imageUrl = attachment?.url || null;
+	} else if ( imageSrc.url ) {
+		imageUrl = imageSrc.url.value;
+		imageTitle = imageUrl?.substring( imageUrl.lastIndexOf( '/' ) + 1 ) || null;
 	}
 
-	throw new Error( `Invalid overlay type: ${ type }` );
+	return { imageTitle, imageUrl };
 };

package/src/controls/background-control/background-overlay/types.ts

@@ -0,0 +1,22 @@
+type ImageSrcAttachment = { id: { $$type: 'image-attachment-id'; value: number }; url: null };
+
+type ImageSrcUrl = { url: { $$type: 'url'; value: string }; id: null };
+
+export type BackgroundImageOverlay = {
+	$$type: 'background-image-overlay';
+	value: {
+		image: {
+			$$type: 'image';
+			value: {
+				src: {
+					$$type: 'image-src';
+					value: ImageSrcAttachment | ImageSrcUrl;
+				};
+				size: {
+					$$type: 'string';
+					value: 'thumbnail' | 'medium' | 'large' | 'full';
+				};
+			};
+		};
+	};
+};

package/src/controls/background-control/background-overlay/use-background-tabs-history.ts

@@ -0,0 +1,62 @@
+import { useRef } from 'react';
+import {
+	backgroundColorOverlayPropTypeUtil,
+	backgroundImageOverlayPropTypeUtil,
+	type BackgroundOverlayItemPropValue,
+} from '@elementor/editor-props';
+import { useTabs } from '@elementor/ui';
+
+import { useBoundProp } from '../../../bound-prop-context';
+import { type BackgroundImageOverlay } from './types';
+
+type OverlayType = 'image' | 'color';
+
+type InitialBackgroundValues = {
+	color: BackgroundOverlayItemPropValue[ 'value' ];
+	image: BackgroundImageOverlay[ 'value' ];
+};
+
+export const useBackgroundTabsHistory = ( {
+	color: initialBackgroundColorOverlay,
+	image: initialBackgroundImageOverlay,
+}: InitialBackgroundValues ) => {
+	const { value: imageValue, setValue: setImageValue } = useBoundProp( backgroundImageOverlayPropTypeUtil );
+	const { value: colorValue, setValue: setColorValue } = useBoundProp( backgroundColorOverlayPropTypeUtil );
+
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< OverlayType >( colorValue ? 'color' : 'image' );
+
+	const valuesHistory = useRef< InitialBackgroundValues >( {
+		image: initialBackgroundImageOverlay,
+		color: initialBackgroundColorOverlay,
+	} );
+
+	const saveToHistory = ( key: keyof InitialBackgroundValues, value: BackgroundOverlayItemPropValue[ 'value' ] ) => {
+		if ( value ) {
+			valuesHistory.current[ key ] = value;
+		}
+	};
+
+	const onTabChange = ( e: React.SyntheticEvent, tabName: OverlayType ) => {
+		switch ( tabName ) {
+			case 'image':
+				setImageValue( valuesHistory.current.image );
+
+				saveToHistory( 'color', colorValue );
+
+				break;
+
+			case 'color':
+				setColorValue( valuesHistory.current.color );
+
+				saveToHistory( 'image', imageValue );
+		}
+
+		return getTabsProps().onChange( e, tabName );
+	};
+
+	return {
+		getTabProps,
+		getTabPanelProps,
+		getTabsProps: () => ( { ...getTabsProps(), onChange: onTabChange } ),
+	};
+};

package/src/controls/box-shadow-repeater-control.tsx

@@ -47,7 +47,7 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
-			<Stack gap={ 1.5 }>
+			<Stack gap={ 1.5 } sx={ { p: 1.5 } }>
 				<Grid container gap={ 2 } flexWrap="nowrap">
 					<Control bind="color" label={ __( 'Color', 'elementor' ) }>
 						<ColorControl

package/src/controls/image-control.tsx

@@ -9,30 +9,34 @@ import { createControl } from '../create-control';
 import { ImageMediaControl } from './image-media-control';
 import { SelectControl } from './select-control';
 
-export type ImageControlProps = {
+type ImageControlProps = {
 	sizes: { label: string; value: string }[];
+	resolutionLabel?: string;
 };
 
-export const ImageControl = createControl( ( props: ImageControlProps ) => {
-	const propContext = useBoundProp( imagePropTypeUtil );
+export const ImageControl = createControl(
+	( { sizes, resolutionLabel = __( 'Image resolution', 'elementor' ) }: ImageControlProps ) => {
+		const propContext = useBoundProp( imagePropTypeUtil );
 
-	return (
-		<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>
+		return (
+			<PropProvider { ...propContext }>
+				<Stack gap={ 1.5 }>
+					<PropKeyProvider bind={ 'src' }>
+						<ControlLabel> { __( 'Choose image', 'elementor' ) } </ControlLabel>
+						<ImageMediaControl />
+					</PropKeyProvider>
+					<PropKeyProvider bind={ 'size' }>
+						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+							<Grid item xs={ 6 }>
+								<ControlLabel> { resolutionLabel } </ControlLabel>
+							</Grid>
+							<Grid item xs={ 6 }>
+								<SelectControl options={ sizes } />
+							</Grid>
 						</Grid>
-						<Grid item xs={ 6 }>
-							<SelectControl options={ props.sizes } />
-						</Grid>
-					</Grid>
-				</PropKeyProvider>
-			</Stack>
-		</PropProvider>
-	);
-} );
+					</PropKeyProvider>
+				</Stack>
+			</PropProvider>
+		);
+	}
+);

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

@@ -10,7 +10,7 @@ import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export type ImageMediaControlProps = {
+type ImageMediaControlProps = {
 	allowedExtensions?: ImageExtension[];
 };
 

package/src/controls/link-control.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { booleanPropTypeUtil, linkPropTypeUtil, type LinkPropValue, urlPropTypeUtil } from '@elementor/editor-props';
+import { useState } from 'react';
+import { booleanPropTypeUtil, linkPropTypeUtil, type LinkPropValue, numberPropTypeUtil } from '@elementor/editor-props';
+import { type HttpResponse, httpService } from '@elementor/http';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
 import { Collapse, Divider, Grid, IconButton, Stack, Switch } from '@elementor/ui';
@@ -8,11 +10,21 @@ import { __ } from '@wordpress/i18n';
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
-import { AutocompleteControl, type GroupedOption, type Option } from './autocomplete-control';
+import {
+	AutocompleteControl,
+	type CategorizedOption,
+	findMatchingOption,
+	type FlatOption,
+	isCategorizedOptionPool,
+} from './autocomplete-control';
 
 type Props = {
-	options?: Record< string, Option > | Record< string, GroupedOption >;
+	queryOptions: {
+		requestParams: object;
+		endpoint: string;
+	};
 	allowCustomValues?: boolean;
+	minInputLength?: number;
 	placeholder?: string;
 };
 
@@ -23,28 +35,81 @@ type LinkSessionValue = {
 	};
 };
 
+type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
+
 const SIZE = 'tiny';
 
-export const LinkControl = createControl( ( props?: Props ) => {
+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 {
+		allowCustomValues,
+		queryOptions: { endpoint = '', requestParams = {} },
+		placeholder,
+		minInputLength = 2,
+	} = props || {};
+
+	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
+		generateFirstLoadedOption( value )
+	);
 
 	const onEnabledChange = () => {
 		const { meta } = linkSessionValue ?? {};
 		const { isEnabled } = meta ?? {};
 
-		if ( isEnabled && value ) {
-			setValue( null );
-		} else if ( linkSessionValue?.value ) {
-			setValue( linkSessionValue?.value ?? null );
+		setValue( isEnabled ? null : linkSessionValue?.value ?? { destination: null } );
+		setLinkSessionValue( { value, meta: { isEnabled: ! isEnabled } } );
+	};
+
+	const onOptionChange = ( newValue: number | null ) => {
+		const valueToSave = {
+			...value,
+			destination: { $$type: 'number', value: newValue },
+			label: {
+				$$type: 'string',
+				value: findMatchingOption( options, newValue?.toString() )?.label || '',
+			},
+		};
+
+		onSaveNewValue( valueToSave );
+	};
+
+	const onTextChange = ( newValue: string | null ) => {
+		const valueToSave = {
+			...value,
+			destination: { $$type: 'url', value: newValue },
+			label: null,
+		};
+
+		onSaveNewValue( valueToSave );
+		updateOptions( newValue );
+	};
+
+	const onSaveNewValue = ( newValue: typeof value ) => {
+		setValue( newValue );
+		setLinkSessionValue( { ...linkSessionValue, value: newValue } );
+	};
+
+	const updateOptions = ( newValue: string | null ) => {
+		setOptions( [] );
+
+		if ( ! newValue || ! endpoint || newValue.length < minInputLength ) {
+			return;
 		}
 
-		setLinkSessionValue( { value, meta: { isEnabled: ! isEnabled } } );
+		debounceFetch( newValue )();
 	};
 
+	const debounceFetch = ( newValue: string ) =>
+		debounce(
+			() =>
+				fetchOptions( endpoint, { ...requestParams, term: newValue } ).then( ( newOptions ) => {
+					setOptions( formatOptions( newOptions ) );
+				} ),
+			400
+		);
+
 	return (
 		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
 			<Stack gap={ 1.5 }>
@@ -65,15 +130,18 @@ export const LinkControl = createControl( ( props?: Props ) => {
 				</Stack>
 				<Collapse in={ linkSessionValue?.meta?.isEnabled } timeout="auto" unmountOnExit>
 					<Stack gap={ 1.5 }>
-						<PropKeyProvider bind={ 'href' }>
+						<PropKeyProvider bind={ 'destination' }>
 							<AutocompleteControl
-								allowCustomValues={ Object.keys( options ).length ? allowCustomValues : true }
 								options={ options }
-								propType={ urlPropTypeUtil }
+								allowCustomValues={ allowCustomValues }
 								placeholder={ placeholder }
+								optionRestrictedPropTypeUtil={ numberPropTypeUtil }
+								onOptionChangeCallback={ onOptionChange }
+								onTextChangeCallback={ onTextChange }
+								minInputLength={ minInputLength }
+								customValue={ value?.destination?.value?.toString() }
 							/>
 						</PropKeyProvider>
-
 						<PropKeyProvider bind={ 'isTargetBlank' }>
 							<SwitchControl />
 						</PropKeyProvider>
@@ -102,7 +170,7 @@ const ToggleIconControl = ( { enabled, onIconClick, label }: ToggleIconControlPr
 const SwitchControl = () => {
 	const { value = false, setValue } = useBoundProp( booleanPropTypeUtil );
 
-	const onChange = () => {
+	const onClick = () => {
 		setValue( ! value );
 	};
 
@@ -112,8 +180,57 @@ const SwitchControl = () => {
 				<ControlLabel>{ __( 'Open in new tab', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item>
-				<Switch checked={ value } onChange={ onChange } />
+				<Switch checked={ value } onClick={ onClick } />
 			</Grid>
 		</Grid>
 	);
 };
+
+async function fetchOptions( ajaxUrl: string, params: object ) {
+	if ( ! params || ! ajaxUrl ) {
+		return [];
+	}
+
+	try {
+		const { data: response } = await httpService().get< Response >( ajaxUrl, { params } );
+
+		return response.data.value;
+	} catch {
+		return [];
+	}
+}
+
+function formatOptions( options: FlatOption[] | CategorizedOption[] ): FlatOption[] | CategorizedOption[] {
+	const compareKey = isCategorizedOptionPool( options ) ? 'groupLabel' : 'label';
+
+	return options.sort( ( a, b ) =>
+		a[ compareKey ] && b[ compareKey ] ? a[ compareKey ].localeCompare( b[ compareKey ] ) : 0
+	);
+}
+
+function generateFirstLoadedOption( unionValue: LinkPropValue[ 'value' ] | null ): FlatOption[] {
+	const value = unionValue?.destination?.value;
+	const label = unionValue?.label?.value;
+	const type = unionValue?.destination?.$$type || 'url';
+
+	return value && label && type === 'number'
+		? [
+				{
+					id: value.toString(),
+					label,
+				},
+		  ]
+		: [];
+}
+
+function debounce< TArgs extends unknown[] >( fn: ( ...args: TArgs ) => unknown, timeout: number ) {
+	let timer: ReturnType< typeof setTimeout >;
+
+	return ( ...args: TArgs ) => {
+		clearTimeout( timer );
+
+		timer = setTimeout( () => {
+			fn( ...args );
+		}, timeout );
+	};
+}

package/src/controls/size-control.tsx

@@ -15,7 +15,7 @@ const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ];
 const defaultUnit = 'px';
 const defaultSize = NaN;
 
-export type SizeControlProps = {
+type SizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
 	units?: Unit[];

package/src/controls/stroke-control.tsx

@@ -9,7 +9,7 @@ import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
 import { SizeControl, type Unit } from './size-control';
 
-export type StrokeProps = {
+type StrokeProps = {
 	bind: string;
 	label: string;
 	children: React.ReactNode;