@elementor/editor-controls 4.2.0-beta2 → 4.2.4

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": "4.2.0-beta2",
+  "version": "4.2.4",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.2.0-beta2",
-    "@elementor/editor-elements": "4.2.0-beta2",
-    "@elementor/editor-props": "4.2.0-beta2",
-    "@elementor/editor-responsive": "4.2.0-beta2",
-    "@elementor/editor-ui": "4.2.0-beta2",
-    "@elementor/editor-v1-adapters": "4.2.0-beta2",
-    "@elementor/env": "4.2.0-beta2",
-    "@elementor/events": "4.2.0-beta2",
-    "@elementor/http-client": "4.2.0-beta2",
+    "@elementor/editor-current-user": "4.2.4",
+    "@elementor/editor-elements": "4.2.4",
+    "@elementor/editor-props": "4.2.4",
+    "@elementor/editor-responsive": "4.2.4",
+    "@elementor/editor-ui": "4.2.4",
+    "@elementor/editor-v1-adapters": "4.2.4",
+    "@elementor/env": "4.2.4",
+    "@elementor/events": "4.2.4",
+    "@elementor/http-client": "4.2.4",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.2.0-beta2",
-    "@elementor/query": "4.2.0-beta2",
-    "@elementor/schema": "4.2.0-beta2",
-    "@elementor/session": "4.2.0-beta2",
+    "@elementor/locations": "4.2.4",
+    "@elementor/query": "4.2.4",
+    "@elementor/schema": "4.2.4",
+    "@elementor/session": "4.2.4",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-beta2",
-    "@elementor/wp-media": "4.2.0-beta2",
+    "@elementor/utils": "4.2.4",
+    "@elementor/wp-media": "4.2.4",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/email-form-action-control/email-chips-field.tsx

@@ -1,21 +1,35 @@
 import * as React from 'react';
-import { type KeyboardEvent, type SyntheticEvent, useState } from 'react';
+import { type KeyboardEvent, type SyntheticEvent, useMemo, useState } from 'react';
 import { stringArrayPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { Autocomplete, Grid, TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../../bound-prop-context';
 import { ChipsList } from '../../components/chips-list';
 import { ControlFormLabel } from '../../components/control-form-label';
-import { CHIP_TRIGGER_KEYS, isValidEmail } from './utils';
+import ControlActions from '../../control-actions/control-actions';
+import { createControl } from '../../create-control';
+import { type Suggestion } from '../../hooks/use-form-field-suggestions';
+import { createMentionPattern } from '../mention-text-area-control';
+import { CHIP_TRIGGER_KEYS, isFormFieldShortcode, isValidEmail } from './utils';
 
-// type EmailChip = { label: string; value: string };
+const isValidRecipient = ( address: string ) => isValidEmail( address ) || isFormFieldShortcode( address );
 
-type EmailChipsFieldProps = {
-	fieldLabel: string;
+function resolveMention( raw: string, suggestions: Suggestion[] ): string {
+	if ( ! raw.startsWith( '@' ) ) {
+		return raw;
+	}
+
+	const match = suggestions.find( ( suggestion ) => createMentionPattern( suggestion.value, 'start' ).test( raw ) );
+
+	return match ? `[${ match.value }]` : raw;
+}
+
+type EmailChipsControlProps = {
 	placeholder?: string;
+	suggestions?: Suggestion[];
 };
 
-export const EmailChipsField = ( { fieldLabel, placeholder }: EmailChipsFieldProps ) => {
+export const EmailChipsControl = createControl( ( { placeholder, suggestions = [] }: EmailChipsControlProps ) => {
 	const { value, setValue, disabled } = useBoundProp( stringArrayPropTypeUtil );
 	const [ inputValue, setInputValue ] = useState( '' );
 
@@ -25,10 +39,15 @@ export const EmailChipsField = ( { fieldLabel, placeholder }: EmailChipsFieldPro
 		.map( ( item ) => stringPropTypeUtil.extract( item ) )
 		.filter( ( val ): val is string => val !== null );
 
+	const suggestionOptions = useMemo(
+		() => suggestions.map( ( suggestion ) => `[${ suggestion.value }]` ),
+		[ suggestions ]
+	);
+
 	const tryAddChip = ( raw: string ) => {
-		const address = raw.trim();
+		const address = resolveMention( raw.trim(), suggestions );
 
-		if ( ! address || selectedValues.includes( address ) || ! isValidEmail( address ) ) {
+		if ( ! address || selectedValues.includes( address ) || ! isValidRecipient( address ) ) {
 			return;
 		}
 
@@ -40,9 +59,9 @@ export const EmailChipsField = ( { fieldLabel, placeholder }: EmailChipsFieldPro
 		const updated = [];
 
 		for ( const entry of newValue ) {
-			const address = entry.trim();
+			const address = resolveMention( entry.trim(), suggestions );
 
-			if ( ! address || ! isValidEmail( address ) ) {
+			if ( ! address || ! isValidRecipient( address ) ) {
 				continue;
 			}
 
@@ -68,37 +87,55 @@ export const EmailChipsField = ( { fieldLabel, placeholder }: EmailChipsFieldPro
 	};
 
 	return (
-		<Grid container direction="column" gap={ 0.5 }>
-			<Grid item>
-				<ControlFormLabel>{ fieldLabel }</ControlFormLabel>
-			</Grid>
-			<Grid item>
-				<Autocomplete
-					fullWidth
-					multiple
-					freeSolo
-					size="tiny"
-					disabled={ disabled }
-					inputValue={ inputValue }
-					onInputChange={ ( _, val, reason ) => {
-						if ( reason !== 'reset' ) {
-							setInputValue( val );
-						}
-					} }
-					value={ selectedValues }
-					onChange={ handleChange }
-					options={ [] }
-					onBlur={ handleBlur }
-					getOptionLabel={ ( option ) => option }
-					isOptionEqualToValue={ ( option, val ) => option === val }
-					renderInput={ ( params ) => (
-						<TextField { ...params } placeholder={ placeholder } onKeyDown={ handleKeyDown } />
-					) }
-					renderTags={ ( tagValues, getTagProps ) => (
-						<ChipsList getLabel={ ( option ) => option } getTagProps={ getTagProps } values={ tagValues } />
-					) }
-				/>
-			</Grid>
-		</Grid>
+		<ControlActions>
+			<Autocomplete
+				fullWidth
+				multiple
+				freeSolo
+				size="tiny"
+				disabled={ disabled }
+				inputValue={ inputValue }
+				onInputChange={ ( _, val, reason ) => {
+					if ( reason !== 'reset' ) {
+						setInputValue( val );
+					}
+				} }
+				value={ selectedValues }
+				onChange={ handleChange }
+				options={ suggestionOptions }
+				filterOptions={ ( options, state ) => {
+					const query = state.inputValue.trim().replace( /^@/, '' ).toLowerCase();
+
+					return query ? options.filter( ( option ) => option.toLowerCase().includes( query ) ) : options;
+				} }
+				filterSelectedOptions
+				onBlur={ handleBlur }
+				getOptionLabel={ ( option ) => option }
+				isOptionEqualToValue={ ( option, val ) => option === val }
+				renderInput={ ( params ) => (
+					<TextField { ...params } placeholder={ placeholder } onKeyDown={ handleKeyDown } />
+				) }
+				renderTags={ ( tagValues, getTagProps ) => (
+					<ChipsList getLabel={ ( option ) => option } getTagProps={ getTagProps } values={ tagValues } />
+				) }
+			/>
+		</ControlActions>
 	);
+} );
+
+type EmailChipsFieldProps = {
+	fieldLabel: string;
+	placeholder?: string;
+	suggestions?: Suggestion[];
 };
+
+export const EmailChipsField = ( { fieldLabel, placeholder, suggestions }: EmailChipsFieldProps ) => (
+	<Grid container direction="column" gap={ 0.5 }>
+		<Grid item>
+			<ControlFormLabel>{ fieldLabel }</ControlFormLabel>
+		</Grid>
+		<Grid item>
+			<EmailChipsControl placeholder={ placeholder } suggestions={ suggestions } />
+		</Grid>
+	</Grid>
+);

package/src/controls/email-form-action-control/fields.tsx

@@ -13,9 +13,26 @@ import { EmailChipsField } from './email-chips-field';
 import { EmailField } from './email-field';
 import { shouldShowMentionsInfo } from './utils';
 
-export const SendToField = ( { placeholder }: { placeholder?: string } ) => (
-	<EmailChipsField fieldLabel={ __( 'Send to', 'elementor' ) } placeholder={ placeholder } />
-);
+export const SendToField = ( { placeholder }: { placeholder?: string } ) => {
+	const suggestions = useFormFieldSuggestions( { inputType: 'email' } );
+
+	return (
+		<PropKeyProvider bind="to">
+			<Stack gap={ 0.5 }>
+				<EmailChipsField
+					fieldLabel={ __( 'Send to', 'elementor' ) }
+					placeholder={ placeholder }
+					suggestions={ suggestions }
+				/>
+				{ shouldShowMentionsInfo() && (
+					<InfoAlert>
+						{ __( 'Type @ or an email field name to insert its submitted value.', 'elementor' ) }
+					</InfoAlert>
+				) }
+			</Stack>
+		</PropKeyProvider>
+	);
+};
 
 export const SubjectField = () => (
 	<EmailField
@@ -90,17 +107,25 @@ export const ReplyToField = () => {
 	);
 };
 
-export const CcField = () => (
-	<PropKeyProvider bind="cc">
-		<EmailChipsField fieldLabel={ __( 'Cc', 'elementor' ) } />
-	</PropKeyProvider>
-);
+export const CcField = () => {
+	const suggestions = useFormFieldSuggestions( { inputType: 'email' } );
 
-export const BccField = () => (
-	<PropKeyProvider bind="bcc">
-		<EmailChipsField fieldLabel={ __( 'Bcc', 'elementor' ) } />
-	</PropKeyProvider>
-);
+	return (
+		<PropKeyProvider bind="cc">
+			<EmailChipsField fieldLabel={ __( 'Cc', 'elementor' ) } suggestions={ suggestions } />
+		</PropKeyProvider>
+	);
+};
+
+export const BccField = () => {
+	const suggestions = useFormFieldSuggestions( { inputType: 'email' } );
+
+	return (
+		<PropKeyProvider bind="bcc">
+			<EmailChipsField fieldLabel={ __( 'Bcc', 'elementor' ) } suggestions={ suggestions } />
+		</PropKeyProvider>
+	);
+};
 
 export const MetaDataField = () => (
 	<PropKeyProvider bind="meta-data">

package/src/controls/email-form-action-control/index.tsx

@@ -4,7 +4,7 @@ import { CollapsibleContent } from '@elementor/editor-ui';
 import { Box, Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
+import { PropProvider, useBoundProp } from '../../bound-prop-context';
 import { ControlLabel } from '../../components/control-label';
 import { createControl } from '../../create-control';
 import {
@@ -30,9 +30,7 @@ export const EmailFormActionControl = createControl(
 					<ControlLabel>
 						{ label ? label + ' ' + __( 'settings', 'elementor' ) : __( 'Email settings', 'elementor' ) }
 					</ControlLabel>
-					<PropKeyProvider bind="to">
-						<SendToField placeholder={ toPlaceholder } />
-					</PropKeyProvider>
+					<SendToField placeholder={ toPlaceholder } />
 					<SubjectField />
 					<MessageField />
 					<FromEmailField />

package/src/controls/email-form-action-control/utils.ts

@@ -9,6 +9,12 @@ export function isValidEmail( email: string ): boolean {
 	return z.string().email().safeParse( email ).success;
 }
 
+const FORM_FIELD_SHORTCODE_PATTERN = /^\[[^[\]]+]$/;
+
+export function isFormFieldShortcode( value: string ): boolean {
+	return FORM_FIELD_SHORTCODE_PATTERN.test( value );
+}
+
 export const shouldShowMentionsInfo = (): boolean => {
 	if ( ! hasProInstalled() ) {
 		return true;

package/src/controls/mention-text-area-control.tsx

@@ -81,9 +81,9 @@ const MentionWrapper = styled( 'div' )( ( { theme } ) => ( {
 	},
 } ) );
 
-type TriggerPosition = 'start' | 'auto';
+export type TriggerPosition = 'start' | 'auto';
 
-function createMentionPattern( value: string, triggerPosition: TriggerPosition ): RegExp {
+export function createMentionPattern( value: string, triggerPosition: TriggerPosition ): RegExp {
 	const escaped = value.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
 	const prefix = 'start' === triggerPosition ? '^' : '';
 

package/src/controls/select-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Select, type SelectChangeEvent, type SelectProps, Typography } from '@elementor/ui';
+import { MenuSubheader, Select, type SelectChangeEvent, type SelectProps, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -13,8 +13,14 @@ export type SelectOption = {
 	disabled?: boolean;
 };
 
-type SelectControlProps = {
+export type SelectOptionGroup = {
+	label: string;
 	options: SelectOption[];
+};
+
+type SelectControlProps = {
+	options?: SelectOption[];
+	groups?: SelectOptionGroup[];
 	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
 	MenuProps?: SelectProps[ 'MenuProps' ];
 	ariaLabel?: string;
@@ -29,7 +35,7 @@ const DEFAULT_MENU_PROPS = {
 };
 
 export const SelectControl = createControl(
-	( { options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }: SelectControlProps ) => {
+	( { options = [], groups = [], onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }: SelectControlProps ) => {
 		const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 		const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 			const newValue = event.target.value || null;
@@ -37,7 +43,8 @@ export const SelectControl = createControl(
 			onChange?.( newValue, value );
 			setValue( newValue );
 		};
-		const isDisabled = disabled || options.length === 0;
+		const flatOptions = flattenGroupedOptions( options, groups );
+		const isDisabled = disabled || flatOptions.length === 0;
 
 		return (
 			<ControlActions>
@@ -48,24 +55,54 @@ export const SelectControl = createControl(
 					MenuProps={ MenuProps }
 					aria-label={ ariaLabel || placeholder }
 					renderValue={ ( selectedValue: string | null ) =>
-						getSelectRenderValue( options, placeholder, selectedValue )
+						getSelectRenderValue( flatOptions, placeholder, selectedValue )
 					}
 					value={ value ?? '' }
 					onChange={ handleChange }
 					disabled={ isDisabled }
 					fullWidth
 				>
-					{ options.map( ( { label, ...props } ) => (
-						<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
-							{ label }
-						</MenuListItem>
-					) ) }
+					{ groups.length
+						? groups.flatMap( ( group ) => renderGroup( group ) )
+						: options.map( ( option ) => renderOption( option ) ) }
 				</Select>
 			</ControlActions>
 		);
 	}
 );
 
+const GROUPED_OPTION_INDENT = 3.5;
+
+function renderGroup( group: SelectOptionGroup ): React.ReactNode[] {
+	return [
+		<MenuSubheader key={ `group-${ group.label }` } sx={ { fontWeight: 400, color: 'text.tertiary' } }>
+			{ group.label }
+		</MenuSubheader>,
+		...group.options.map( ( option ) => renderOption( option, true ) ),
+	];
+}
+
+function renderOption( { label, ...props }: SelectOption, isGrouped = false ): React.ReactNode {
+	return (
+		<MenuListItem
+			key={ props.value }
+			{ ...props }
+			value={ props.value ?? '' }
+			sx={ isGrouped ? { pl: GROUPED_OPTION_INDENT } : undefined }
+		>
+			{ label }
+		</MenuListItem>
+	);
+}
+
+function flattenGroupedOptions( options: SelectOption[], groups: SelectOptionGroup[] ): SelectOption[] {
+	if ( ! groups.length ) {
+		return options;
+	}
+
+	return groups.flatMap( ( group ) => group.options );
+}
+
 export function getSelectRenderValue(
 	options: SelectOption[],
 	placeholder: string | null | undefined,