@elementor/editor-controls 0.5.0 → 0.6.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.5.0",
+  "version": "0.6.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,8 +40,9 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.6.0",
+    "@elementor/editor-props": "0.7.0",
     "@elementor/icons": "^1.20.0",
+    "@elementor/session": "0.1.0",
     "@elementor/ui": "^1.22.0",
     "@elementor/utils": "0.3.0",
     "@elementor/wp-media": "0.2.3",

package/src/bound-prop-context/prop-context.tsx

@@ -28,8 +28,17 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 	setValue,
 	propType,
 }: PropProviderProps< T, P > ) => {
-	// @ts-expect-error - figure out how to fix this
-	return <PropContext.Provider value={ { value, setValue, propType } }>{ children }</PropContext.Provider>;
+	return (
+		<PropContext.Provider
+			value={ {
+				value,
+				propType,
+				setValue: setValue as SetValue< PropValue >,
+			} }
+		>
+			{ children }
+		</PropContext.Provider>
+	);
 };
 
 export const usePropContext = < T extends PropValue, P extends PropType >() => {

package/src/bound-prop-context/prop-key-context.tsx

@@ -19,6 +19,7 @@ export type PropKeyContextValue< T, P > = {
 	setValue: SetValue< T >;
 	value: T;
 	propType: P;
+	path: PropKey[];
 };
 
 export const PropKeyContext = createContext< PropKeyContextValue< PropValue, PropType > | null >( null );
@@ -47,6 +48,7 @@ export const PropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
 
 const ObjectPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
 	const context = usePropContext< ObjectPropValue[ 'value' ], ObjectPropType >();
+	const { path } = useContext( PropKeyContext ) ?? {};
 
 	const setValue: SetValue< PropValue > = ( value, options, meta ) => {
 		const newValue = {
@@ -62,7 +64,9 @@ const ObjectPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
 	const propType = context.propType.shape[ bind ];
 
 	return (
-		<PropKeyContext.Provider value={ { ...context, value, setValue, bind, propType } }>
+		<PropKeyContext.Provider
+			value={ { ...context, value, setValue, bind, propType, path: [ ...( path ?? [] ), bind ] } }
+		>
 			{ children }
 		</PropKeyContext.Provider>
 	);
@@ -70,6 +74,7 @@ const ObjectPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
 
 const ArrayPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
 	const context = usePropContext< ArrayPropValue[ 'value' ], ArrayPropType >();
+	const { path } = useContext( PropKeyContext ) ?? {};
 
 	const setValue = ( value: PropValue, options?: CreateOptions ) => {
 		const newValue = [ ...( context.value ?? [] ) ];
@@ -84,7 +89,9 @@ const ArrayPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
 	const propType = context.propType.item_prop_type;
 
 	return (
-		<PropKeyContext.Provider value={ { ...context, value, setValue, bind, propType } }>
+		<PropKeyContext.Provider
+			value={ { ...context, value, setValue, bind, propType, path: [ ...( path ?? [] ), bind ] } }
+		>
 			{ children }
 		</PropKeyContext.Provider>
 	);

package/src/bound-prop-context/use-bound-prop.ts

@@ -15,6 +15,7 @@ type UseBoundProp< TValue extends PropValue > = {
 	setValue: SetValue< TValue | null >;
 	value: TValue;
 	propType: PropType;
+	path: PropKey[];
 };
 
 export function useBoundProp< T extends PropValue = PropValue >(): PropKeyContextValue< T, PropType >;

package/src/components/repeater.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useId, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { type PropKey } from '@elementor/editor-props';
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from '@elementor/icons';
 import {
@@ -92,6 +92,7 @@ export const Repeater = < T, >( {
 				{ repeaterValues.map( ( value, index ) => (
 					<RepeaterItem
 						key={ index }
+						bind={ String( index ) }
 						disabled={ value.disabled }
 						label={ <itemSettings.Label value={ value } /> }
 						startIcon={ <itemSettings.Icon value={ value } /> }
@@ -109,6 +110,7 @@ export const Repeater = < T, >( {
 
 type RepeaterItemProps = {
 	label: React.ReactNode;
+	bind: string;
 	disabled?: boolean;
 	startIcon: UnstableTagProps[ 'startIcon' ];
 	removeItem: () => void;
@@ -119,6 +121,7 @@ type RepeaterItemProps = {
 
 const RepeaterItem = ( {
 	label,
+	bind,
 	disabled,
 	startIcon,
 	children,
@@ -126,7 +129,7 @@ const RepeaterItem = ( {
 	duplicateItem,
 	toggleDisableItem,
 }: RepeaterItemProps ) => {
-	const popupId = useId();
+	const popupId = `repeater-popup-${ bind }`;
 	const controlRef = useRef< HTMLElement >( null );
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
 

package/src/controls/autocomplete-control.tsx

@@ -0,0 +1,181 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { stringPropTypeUtil, type urlPropTypeUtil } from '@elementor/editor-props';
+import { XIcon } from '@elementor/icons';
+import {
+	Autocomplete,
+	type AutocompleteRenderInputParams,
+	Box,
+	IconButton,
+	InputAdornment,
+	TextField,
+} from '@elementor/ui';
+
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+export type Option = {
+	label: string;
+	groupLabel?: never;
+};
+
+export type GroupedOption = {
+	label: string;
+	groupLabel: string;
+};
+
+type Props = {
+	options: Record< string, Option > | Record< string, GroupedOption >;
+	allowCustomValues?: boolean;
+	placeholder?: string;
+	propType?: typeof urlPropTypeUtil | typeof stringPropTypeUtil;
+	minInputLength?: number;
+};
+
+export const AutocompleteControl = createControl(
+	( {
+		options,
+		placeholder = '',
+		allowCustomValues = false,
+		propType = stringPropTypeUtil,
+		minInputLength = 2,
+	}: Props ) => {
+		const { value = '', setValue } = useBoundProp( propType );
+		const [ inputValue, setInputValue ] = useState(
+			value && options[ value ]?.label ? options[ value ]?.label : value
+		);
+
+		const hasSelectedValue = !! (
+			inputValue &&
+			( options[ inputValue ] || Object.values( options ).find( ( { label } ) => label === inputValue ) )
+		);
+		const allowClear = !! inputValue;
+		const formattedOptions = Object.keys( options );
+
+		const handleChange = ( _?: React.SyntheticEvent | null, newValue: string | null = null ) => {
+			const formattedInputValue = newValue && options[ newValue ]?.label ? options[ newValue ]?.label : newValue;
+
+			setInputValue( formattedInputValue || '' );
+
+			if ( ! allowCustomValues && newValue && ! options[ newValue ] ) {
+				return;
+			}
+
+			setValue( newValue );
+		};
+
+		const filterOptions = () => {
+			const formattedValue = inputValue?.toLowerCase() || '';
+
+			if ( formattedValue.length < minInputLength ) {
+				return [];
+			}
+
+			return formattedOptions.filter(
+				( optionValue ) =>
+					optionValue.toLowerCase().indexOf( formattedValue ) !== -1 ||
+					options[ optionValue ].label.toLowerCase().indexOf( formattedValue ) !== -1
+			);
+		};
+
+		const isOptionEqualToValue = () => {
+			return muiWarningPreventer() ? undefined : () => true;
+		};
+
+		// Prevents MUI warning when freeSolo/allowCustomValues is false
+		const muiWarningPreventer = () => allowCustomValues || !! filterOptions().length;
+
+		return (
+			<ControlActions>
+				<Autocomplete
+					forcePopupIcon={ false }
+					disableClearable={ true } // Disabled component's auto clear icon to use our custom one instead
+					freeSolo={ muiWarningPreventer() }
+					value={ inputValue || '' }
+					size={ 'tiny' }
+					onChange={ handleChange }
+					onInputChange={ handleChange }
+					onBlur={ allowCustomValues ? undefined : () => handleChange( null, value ) }
+					readOnly={ hasSelectedValue }
+					options={ formattedOptions }
+					getOptionKey={ ( option ) => option }
+					getOptionLabel={ ( option ) => options[ option ]?.label ?? option }
+					groupBy={
+						shouldGroupOptions( options ) ? ( option: string ) => options[ option ]?.groupLabel : undefined
+					}
+					isOptionEqualToValue={ isOptionEqualToValue() }
+					filterOptions={ filterOptions }
+					renderOption={ ( optionProps, option ) => (
+						<Box component="li" { ...optionProps } key={ optionProps.id }>
+							{ options[ option ]?.label ?? option }
+						</Box>
+					) }
+					renderInput={ ( params ) => (
+						<TextInput
+							params={ params }
+							handleChange={ handleChange }
+							allowClear={ allowClear }
+							placeholder={ placeholder }
+							hasSelectedValue={ hasSelectedValue }
+						/>
+					) }
+				/>
+			</ControlActions>
+		);
+	}
+);
+
+const TextInput = ( {
+	params,
+	allowClear,
+	placeholder,
+	handleChange,
+	hasSelectedValue,
+}: {
+	params: AutocompleteRenderInputParams;
+	allowClear: boolean;
+	handleChange: ( _?: React.SyntheticEvent | null, newValue?: string | null ) => void;
+	placeholder: string;
+	hasSelectedValue: boolean;
+} ) => {
+	return (
+		<TextField
+			{ ...params }
+			placeholder={ placeholder }
+			sx={ {
+				'& .MuiInputBase-input': {
+					cursor: hasSelectedValue ? 'default' : undefined,
+				},
+			} }
+			InputProps={ {
+				...params.InputProps,
+				endAdornment: <ClearButton params={ params } allowClear={ allowClear } handleChange={ handleChange } />,
+			} }
+		/>
+	);
+};
+
+const ClearButton = ( {
+	allowClear,
+	handleChange,
+	params,
+}: {
+	params: AutocompleteRenderInputParams;
+	allowClear: boolean;
+	handleChange: ( _?: React.SyntheticEvent | null, newValue?: string | null ) => void;
+} ) => (
+	<InputAdornment position="end">
+		{ allowClear && (
+			<IconButton size={ params.size } onClick={ handleChange } sx={ { cursor: 'pointer' } }>
+				<XIcon fontSize={ params.size } />
+			</IconButton>
+		) }
+	</InputAdornment>
+);
+
+function shouldGroupOptions(
+	options: Record< string, Option | GroupedOption >
+): options is Record< string, GroupedOption > {
+	return Object.values( options ).every( ( option ) => 'groupLabel' in option );
+}

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

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import {
 	backgroundColorOverlayPropTypeUtil,
+	backgroundImageOverlayPropTypeUtil,
 	type BackgroundOverlayItemPropValue,
 	backgroundOverlayPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
 import { Grid, Stack, UnstableColorIndicator } from '@elementor/ui';
+import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
@@ -13,6 +15,7 @@ import { ControlLabel } from '../../../components/control-label';
 import { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
 import { ColorControl } from '../../color-control';
+import { ImageMediaControl } from '../../image-media-control';
 
 const initialBackgroundOverlay: BackgroundOverlayItemPropValue = {
 	$$type: 'background-color-overlay',
@@ -52,6 +55,8 @@ const ItemContent = ( { bind }: { bind: PropKey } ) => {
 };
 
 const Content = () => {
+	const propContext = useBoundProp( backgroundImageOverlayPropTypeUtil );
+
 	return (
 		<Stack gap={ 1.5 }>
 			<Grid container spacing={ 1 } alignItems="center">
@@ -62,12 +67,37 @@ const Content = () => {
 					<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
 				</Grid>
 			</Grid>
+			<PropProvider { ...propContext }>
+				<PropKeyProvider bind={ 'image-src' }>
+					<Grid container spacing={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ImageMediaControl />
+						</Grid>
+					</Grid>
+				</PropKeyProvider>
+			</PropProvider>
 		</Stack>
 	);
 };
 
 const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	const color = value.value;
+	const type = value.$$type;
+
+	if ( type === 'background-color-overlay' ) {
+		return <ItemLabelColor value={ value } />;
+	}
+	if ( type === 'background-image-overlay' ) {
+		return <ItemLabelImage value={ value } />;
+	}
+};
+
+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;
 
-	return <span>{ color }</span>;
+	return <span>{ imageTitle }</span>;
 };

package/src/controls/link-control.tsx

@@ -1,30 +1,52 @@
 import * as React from 'react';
-import { linkPropTypeUtil, type LinkPropValue } 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 { 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[ '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, ...propContext } = useBoundProp( linkPropTypeUtil );
+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 (
-		<PropProvider { ...propContext } value={ value }>
+		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
 			<Stack gap={ 1.5 }>
 				<Divider />
 				<Stack
@@ -35,14 +57,21 @@ export const LinkControl = createControl( () => {
 					} }
 				>
 					<ControlLabel>{ __( 'Link', 'elementor' ) }</ControlLabel>
-					<PropKeyProvider bind={ 'enabled' }>
-						<ToggleIconControl />
-					</PropKeyProvider>
+					<ToggleIconControl
+						enabled={ linkSessionValue?.meta?.isEnabled ?? false }
+						onIconClick={ onEnabledChange }
+						label={ __( 'Toggle Link', 'elementor' ) }
+					/>
 				</Stack>
-				<Collapse in={ value?.enabled } timeout="auto" unmountOnExit>
+				<Collapse in={ linkSessionValue?.meta?.isEnabled } timeout="auto" unmountOnExit>
 					<Stack gap={ 1.5 }>
 						<PropKeyProvider bind={ 'href' }>
-							<UrlControl placeholder={ __( 'Paste URL or type', 'elementor' ) } />
+							<AutocompleteControl
+								allowCustomValues={ Object.keys( options ).length ? allowCustomValues : true }
+								options={ options }
+								propType={ stringPropTypeUtil }
+								placeholder={ placeholder }
+							/>
 						</PropKeyProvider>
 
 						<PropKeyProvider bind={ 'isTargetBlank' }>
@@ -55,22 +84,23 @@ export const LinkControl = createControl( () => {
 	);
 } );
 
-// @TODO Should be refactored in EDS-1086
-const ToggleIconControl = () => {
-	const { value = false, setValue } = useBoundProp();
-
-	const handleOnChange = () => setValue( ! value );
+type ToggleIconControlProps = {
+	enabled: boolean;
+	onIconClick: () => void;
+	label?: string;
+};
 
+const ToggleIconControl = ( { enabled, onIconClick, label }: ToggleIconControlProps ) => {
 	return (
-		<IconButton size={ SIZE } onClick={ handleOnChange }>
-			{ value ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
+		<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 = () => {
-	const { value = false, setValue } = useBoundProp();
+	const { value = false, setValue } = useBoundProp( booleanPropTypeUtil );
 
 	const onChange = () => {
 		setValue( ! value );

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';