@elementor/editor-controls 0.4.1 → 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.4.1",
+  "version": "0.6.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,9 +40,11 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.5.1",
+    "@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",
     "@wordpress/i18n": "^5.13.0"
   },

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

@@ -0,0 +1,16 @@
+import { createError } from '@elementor/utils';
+
+export const MissingPropTypeError = createError( {
+	code: 'missing_prop_provider_prop_type',
+	message: 'Prop type is missing',
+} );
+
+export const UnsupportedParentError = createError( {
+	code: 'unsupported_prop_provider_prop_type',
+	message: 'Parent prop type is not supported',
+} );
+
+export const HookOutsideProviderError = createError( {
+	code: 'hook_outside_provider',
+	message: 'Hook used outside of provider',
+} );

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

@@ -0,0 +1,3 @@
+export * from './prop-context';
+export * from './prop-key-context';
+export * from './use-bound-prop';

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import { type CreateOptions, type PropKey, type PropType, type PropValue } from '@elementor/editor-props';
+
+import { HookOutsideProviderError } from './errors';
+
+type SetValueMeta = {
+	bind?: PropKey;
+};
+
+export type SetValue< T > = ( value: T, options?: CreateOptions, meta?: SetValueMeta ) => void;
+
+type PropContext< T extends PropValue, P extends PropType > = {
+	setValue: SetValue< T >;
+	value: T | null;
+	propType: P;
+};
+
+const PropContext = createContext< PropContext< PropValue, PropType > | null >( null );
+
+export type PropProviderProps< T extends PropValue, P extends PropType > = React.PropsWithChildren<
+	PropContext< T, P >
+>;
+
+export const PropProvider = < T extends PropValue, P extends PropType >( {
+	children,
+	value,
+	setValue,
+	propType,
+}: PropProviderProps< T, P > ) => {
+	return (
+		<PropContext.Provider
+			value={ {
+				value,
+				propType,
+				setValue: setValue as SetValue< PropValue >,
+			} }
+		>
+			{ children }
+		</PropContext.Provider>
+	);
+};
+
+export const usePropContext = < T extends PropValue, P extends PropType >() => {
+	const context = useContext( PropContext ) as PropContext< T, P > | null;
+
+	if ( ! context ) {
+		throw new HookOutsideProviderError( {
+			context: {
+				hook: 'usePropContext',
+				provider: 'PropProvider',
+			},
+		} );
+	}
+
+	return context;
+};

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

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import {
+	type ArrayPropType,
+	type ArrayPropValue,
+	type CreateOptions,
+	type ObjectPropType,
+	type ObjectPropValue,
+	type PropKey,
+	type PropType,
+	type PropValue,
+} from '@elementor/editor-props';
+
+import { HookOutsideProviderError, MissingPropTypeError, UnsupportedParentError } from './errors';
+import { type SetValue, usePropContext } from './prop-context';
+
+export type PropKeyContextValue< T, P > = {
+	bind: PropKey;
+	setValue: SetValue< T >;
+	value: T;
+	propType: P;
+	path: PropKey[];
+};
+
+export const PropKeyContext = createContext< PropKeyContextValue< PropValue, PropType > | null >( null );
+
+type PropKeyProviderProps = React.PropsWithChildren< {
+	bind: PropKey;
+} >;
+
+export const PropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
+	const { propType } = usePropContext();
+
+	if ( ! propType ) {
+		throw new MissingPropTypeError( { context: { bind } } );
+	}
+
+	if ( propType.kind === 'array' ) {
+		return <ArrayPropKeyProvider bind={ bind }>{ children }</ArrayPropKeyProvider>;
+	}
+
+	if ( propType.kind === 'object' ) {
+		return <ObjectPropKeyProvider bind={ bind }>{ children }</ObjectPropKeyProvider>;
+	}
+
+	throw new UnsupportedParentError( { context: { propType } } );
+};
+
+const ObjectPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
+	const context = usePropContext< ObjectPropValue[ 'value' ], ObjectPropType >();
+	const { path } = useContext( PropKeyContext ) ?? {};
+
+	const setValue: SetValue< PropValue > = ( value, options, meta ) => {
+		const newValue = {
+			...context.value,
+			[ bind ]: value,
+		};
+
+		return context?.setValue( newValue, options, { ...meta, bind } );
+	};
+
+	const value = context.value?.[ bind ];
+
+	const propType = context.propType.shape[ bind ];
+
+	return (
+		<PropKeyContext.Provider
+			value={ { ...context, value, setValue, bind, propType, path: [ ...( path ?? [] ), bind ] } }
+		>
+			{ children }
+		</PropKeyContext.Provider>
+	);
+};
+
+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 ?? [] ) ];
+
+		newValue[ Number( bind ) ] = value;
+
+		return context?.setValue( newValue, options, { bind } );
+	};
+
+	const value = context.value?.[ Number( bind ) ];
+
+	const propType = context.propType.item_prop_type;
+
+	return (
+		<PropKeyContext.Provider
+			value={ { ...context, value, setValue, bind, propType, path: [ ...( path ?? [] ), bind ] } }
+		>
+			{ children }
+		</PropKeyContext.Provider>
+	);
+};
+
+export const usePropKeyContext = () => {
+	const context = useContext( PropKeyContext );
+
+	if ( ! context ) {
+		throw new HookOutsideProviderError( {
+			context: { hook: 'usePropKeyContext', provider: 'PropKeyProvider' },
+		} );
+	}
+
+	return context;
+};

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

@@ -0,0 +1,70 @@
+import {
+	type CreateOptions,
+	type PropKey,
+	type PropType,
+	type PropTypeUtil,
+	type PropValue,
+} from '@elementor/editor-props';
+
+import { MissingPropTypeError } from './errors';
+import { type SetValue } from './prop-context';
+import { type PropKeyContextValue, usePropKeyContext } from './prop-key-context';
+
+type UseBoundProp< TValue extends PropValue > = {
+	bind: PropKey;
+	setValue: SetValue< TValue | null >;
+	value: TValue;
+	propType: PropType;
+	path: PropKey[];
+};
+
+export function useBoundProp< T extends PropValue = PropValue >(): PropKeyContextValue< T, PropType >;
+
+export function useBoundProp< TKey extends string, TValue extends PropValue >(
+	propTypeUtil: PropTypeUtil< TKey, TValue >
+): UseBoundProp< TValue >;
+
+export function useBoundProp< TKey extends string, TValue extends PropValue >(
+	propTypeUtil?: PropTypeUtil< TKey, TValue >
+) {
+	const propKeyContext = usePropKeyContext();
+
+	// allow using the hook without a propTypeUtil, with no modifications or validations.
+	if ( ! propTypeUtil ) {
+		return propKeyContext;
+	}
+
+	function setValue( value: TValue | null, options: CreateOptions, meta: { bind?: PropKey } ) {
+		if ( value === null ) {
+			return propKeyContext?.setValue( null, options, meta );
+		}
+
+		return propKeyContext?.setValue( propTypeUtil?.create( value, options ), {}, meta );
+	}
+
+	const propType = resolveUnionPropType( propKeyContext.propType, propTypeUtil.key );
+
+	const value = propTypeUtil.extract( propKeyContext.value ?? propType.default ?? null );
+
+	return {
+		...propKeyContext,
+		setValue,
+		value,
+		propType,
+	};
+}
+
+// utils
+const resolveUnionPropType = ( propType: PropType, key: string ): PropType => {
+	let resolvedPropType = propType;
+
+	if ( propType.kind === 'union' ) {
+		resolvedPropType = propType.prop_types[ key ];
+	}
+
+	if ( ! resolvedPropType ) {
+		throw new MissingPropTypeError( { context: { key } } );
+	}
+
+	return resolvedPropType;
+};

package/src/components/repeater.tsx

@@ -1,5 +1,6 @@
 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 {
 	bindPopover,
@@ -32,9 +33,8 @@ export type RepeaterProps< T > = {
 		Label: React.ComponentType< { value: T } >;
 		Icon: React.ComponentType< { value: T } >;
 		Content: React.ComponentType< {
-			value: T;
-			setValue: ( newValue: T ) => void;
 			anchorEl: AnchorEl;
+			bind: PropKey;
 		} >;
 	};
 };
@@ -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 } /> }
@@ -99,17 +100,7 @@ export const Repeater = < T, >( {
 						duplicateItem={ () => duplicateRepeaterItem( index ) }
 						toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
 					>
-						{ ( props ) => (
-							<itemSettings.Content
-								{ ...props }
-								value={ value }
-								setValue={ ( newValue ) =>
-									setRepeaterValues(
-										repeaterValues.map( ( item, i ) => ( i === index ? newValue : item ) )
-									)
-								}
-							/>
-						) }
+						{ ( props ) => <itemSettings.Content { ...props } bind={ String( index ) } /> }
 					</RepeaterItem>
 				) ) }
 			</Stack>
@@ -119,6 +110,7 @@ export const Repeater = < T, >( {
 
 type RepeaterItemProps = {
 	label: React.ReactNode;
+	bind: string;
 	disabled?: boolean;
 	startIcon: UnstableTagProps[ 'startIcon' ];
 	removeItem: () => void;
@@ -129,6 +121,7 @@ type RepeaterItemProps = {
 
 const RepeaterItem = ( {
 	label,
+	bind,
 	disabled,
 	startIcon,
 	children,
@@ -136,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-control.tsx

@@ -1,57 +1,34 @@
 import * as React from 'react';
-import {
-	type BackgroundColorOverlayPropValue,
-	backgroundPropTypeUtil,
-	type ColorPropValue,
-	type PropValue,
-} from '@elementor/editor-props';
+import { backgroundPropTypeUtil } 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 { ColorControl } from '../color-control';
 import { BackgroundOverlayRepeaterControl } from './background-overlay/background-overlay-repeater-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
 export const BackgroundControl = createControl( () => {
-	const { value, setValue } = useBoundProp( backgroundPropTypeUtil );
-
-	const setColor = ( newValue: ColorPropValue ) => {
-		setValue( {
-			...value,
-			color: newValue,
-		} );
-	};
-
-	const setBackgroundColorOverlay = ( newValue: BackgroundColorOverlayPropValue ) => {
-		setValue( {
-			...value,
-			'background-overlay': newValue,
-		} );
-	};
+	const propContext = useBoundProp( backgroundPropTypeUtil );
 
 	return (
-		<Stack gap={ 1.5 }>
-			<BoundPropProvider
-				bind="background-overlay"
-				value={ value?.[ 'background-overlay' ] }
-				setValue={ setBackgroundColorOverlay as SetContextValue }
-			>
-				<BackgroundOverlayRepeaterControl />
-			</BoundPropProvider>
-			<BoundPropProvider bind="color" value={ value?.color } setValue={ setColor as SetContextValue }>
-				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-					<Grid item xs={ 6 }>
-						<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 6 }>
-						<ColorControl />
+		<PropProvider { ...propContext }>
+			<Stack gap={ 1.5 }>
+				<PropKeyProvider bind="background-overlay">
+					<BackgroundOverlayRepeaterControl />
+				</PropKeyProvider>
+				<PropKeyProvider bind="color">
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 }>
+							<ColorControl />
+						</Grid>
 					</Grid>
-				</Grid>
-			</BoundPropProvider>
-		</Stack>
+				</PropKeyProvider>
+			</Stack>
+		</PropProvider>
 	);
 } );