@elementor/editor-controls 4.2.0-868 → 4.2.0-870

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

package/src/controls/chips-control.tsx

@@ -15,24 +15,29 @@ export type ChipsOption = {
 
 type ChipsControlProps = {
 	options: ChipsOption[];
+	freeChips?: boolean;
 };
 
 const SIZE = 'tiny';
 
-export const ChipsControl = createControl( ( { options }: ChipsControlProps ) => {
+const toChipsOption = ( val: string, options: ChipsOption[] ): ChipsOption =>
+	options.find( ( opt ) => opt.value === val ) ?? { label: val, value: val };
+
+export const ChipsControl = createControl( ( { options, freeChips }: ChipsControlProps ) => {
 	const { value, setValue, disabled } = useBoundProp( stringArrayPropTypeUtil );
 
 	const selectedValues: string[] = ( value || [] )
 		.map( ( item ) => stringPropTypeUtil.extract( item ) )
 		.filter( ( val ): val is string => val !== null );
 
-	const selectedOptions = selectedValues
-		.map( ( val ) => options.find( ( opt ) => opt.value === val ) )
-		.filter( ( opt ): opt is ChipsOption => opt !== undefined );
+	const selectedOptions = selectedValues.map( ( val ) => toChipsOption( val, options ) );
 
-	const handleChange = ( _: SyntheticEvent, newValue: ChipsOption[] ) => {
-		const values = newValue.map( ( option ) => stringPropTypeUtil.create( option.value ) );
-		setValue( values );
+	const handleChange = ( _: SyntheticEvent, newValue: ( ChipsOption | string )[] ) => {
+		setValue(
+			newValue.map( ( option ) =>
+				stringPropTypeUtil.create( typeof option === 'string' ? option : option.value )
+			)
+		);
 	};
 
 	return (
@@ -40,17 +45,19 @@ export const ChipsControl = createControl( ( { options }: ChipsControlProps ) =>
 			<Autocomplete
 				fullWidth
 				multiple
+				freeSolo={ freeChips }
 				size={ SIZE }
 				disabled={ disabled }
 				value={ selectedOptions }
+				filterSelectedOptions
 				onChange={ handleChange }
 				options={ options }
-				getOptionLabel={ ( option ) => option.label }
+				getOptionLabel={ ( option ) => ( typeof option === 'string' ? option : option.label ) }
 				isOptionEqualToValue={ ( option, val ) => option.value === val.value }
 				renderInput={ ( params ) => <TextField { ...params } /> }
 				renderTags={ ( tagValues, getTagProps ) => (
 					<ChipsList
-						getLabel={ ( option ) => option.label }
+						getLabel={ ( option ) => ( typeof option === 'string' ? option : option.label ) }
 						getTagProps={ getTagProps }
 						values={ tagValues }
 					/>

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

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { type KeyboardEvent, type SyntheticEvent, 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';
+
+// type EmailChip = { label: string; value: string };
+
+type EmailChipsFieldProps = {
+	fieldLabel: string;
+	placeholder?: string;
+};
+
+export const EmailChipsField = ( { fieldLabel, placeholder }: EmailChipsFieldProps ) => {
+	const { value, setValue, disabled } = useBoundProp( stringArrayPropTypeUtil );
+	const [ inputValue, setInputValue ] = useState( '' );
+
+	const items = value || [];
+
+	const selectedValues: string[] = items
+		.map( ( item ) => stringPropTypeUtil.extract( item ) )
+		.filter( ( val ): val is string => val !== null );
+
+	const tryAddChip = ( raw: string ) => {
+		const address = raw.trim();
+
+		if ( ! address || selectedValues.includes( address ) || ! isValidEmail( address ) ) {
+			return;
+		}
+
+		setValue( [ ...items, stringPropTypeUtil.create( address ) ] );
+		setInputValue( '' );
+	};
+
+	const handleChange = ( _: SyntheticEvent, newValue: string[] ) => {
+		const updated = [];
+
+		for ( const entry of newValue ) {
+			const address = entry.trim();
+
+			if ( ! address || ! isValidEmail( address ) ) {
+				continue;
+			}
+
+			updated.push( stringPropTypeUtil.create( address ) );
+		}
+
+		setValue( updated );
+		setInputValue( '' );
+	};
+
+	const handleBlur = ( event: SyntheticEvent ) => {
+		const target = event.target as HTMLInputElement;
+
+		tryAddChip( target.value );
+		setInputValue( '' );
+	};
+
+	const handleKeyDown = ( event: KeyboardEvent< HTMLDivElement > ) => {
+		if ( CHIP_TRIGGER_KEYS.has( event.key ) && inputValue.trim() ) {
+			event.preventDefault();
+			tryAddChip( inputValue );
+		}
+	};
+
+	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>
+	);
+};

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Grid } from '@elementor/ui';
+
+import { PropKeyProvider } from '../../bound-prop-context';
+import { ControlFormLabel } from '../../components/control-form-label';
+import { TextControl } from '../text-control';
+
+type EmailFieldProps = {
+	bind: string;
+	label: string;
+	placeholder?: string;
+};
+
+export const EmailField = ( { bind, label, placeholder }: EmailFieldProps ) => (
+	<PropKeyProvider bind={ bind }>
+		<Grid container direction="column" gap={ 0.5 }>
+			<Grid item>
+				<ControlFormLabel>{ label }</ControlFormLabel>
+			</Grid>
+			<Grid item>
+				<TextControl placeholder={ placeholder } />
+			</Grid>
+		</Grid>
+	</PropKeyProvider>
+);

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

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { InfoAlert } from '@elementor/editor-ui';
+import { Grid, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider } from '../../bound-prop-context';
+import { ControlFormLabel } from '../../components/control-form-label';
+import { useFormFieldSuggestions } from '../../hooks/use-form-field-suggestions';
+import { ChipsControl } from '../chips-control';
+import { MentionTextAreaControl } from '../mention-text-area-control';
+import { SelectControl } from '../select-control';
+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 SubjectField = () => (
+	<EmailField
+		bind="subject"
+		label={ __( 'Email subject', 'elementor' ) }
+		placeholder={ __( 'New form submission', 'elementor' ) }
+	/>
+);
+
+export const MessageField = () => {
+	const suggestions = useFormFieldSuggestions();
+
+	return (
+		<PropKeyProvider bind="message">
+			<Grid container direction="column" gap={ 0.5 }>
+				<Grid item>
+					<ControlFormLabel>{ __( 'Message', 'elementor' ) }</ControlFormLabel>
+				</Grid>
+				<Grid item>
+					<MentionTextAreaControl suggestions={ suggestions } />
+				</Grid>
+				<Grid item>
+					<InfoAlert>
+						{ shouldShowMentionsInfo()
+							? __(
+									'[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.',
+									'elementor'
+							  )
+							: __( '[all-fields] shortcode sends all fields.', 'elementor' ) }
+					</InfoAlert>
+				</Grid>
+			</Grid>
+		</PropKeyProvider>
+	);
+};
+
+export const FromEmailField = () => (
+	<EmailField
+		bind="from"
+		label={ __( 'From email', 'elementor' ) }
+		placeholder={ __( 'What email should appear as the sender?', 'elementor' ) }
+	/>
+);
+
+export const FromNameField = () => (
+	<EmailField
+		bind="from-name"
+		label={ __( 'From name', 'elementor' ) }
+		placeholder={ __( 'What name should appear as the sender?', 'elementor' ) }
+	/>
+);
+
+export const ReplyToField = () => {
+	const emailSuggestions = useFormFieldSuggestions( { inputType: 'email' } );
+
+	return (
+		<PropKeyProvider bind="reply-to">
+			<Grid container direction="column" gap={ 0.5 }>
+				<Grid item>
+					<ControlFormLabel>{ __( 'Reply-to', 'elementor' ) }</ControlFormLabel>
+				</Grid>
+				<Grid item>
+					<MentionTextAreaControl
+						suggestions={ emailSuggestions }
+						rows={ 1 }
+						triggerPosition="start"
+						placeholder={ __( 'You can type @ to insert an email field', 'elementor' ) }
+					/>
+				</Grid>
+			</Grid>
+		</PropKeyProvider>
+	);
+};
+
+export const CcField = () => (
+	<PropKeyProvider bind="cc">
+		<EmailChipsField fieldLabel={ __( 'Cc', 'elementor' ) } />
+	</PropKeyProvider>
+);
+
+export const BccField = () => (
+	<PropKeyProvider bind="bcc">
+		<EmailChipsField fieldLabel={ __( 'Bcc', 'elementor' ) } />
+	</PropKeyProvider>
+);
+
+export const MetaDataField = () => (
+	<PropKeyProvider bind="meta-data">
+		<Stack gap={ 0.5 }>
+			<ControlFormLabel>{ __( 'Metadata', 'elementor' ) }</ControlFormLabel>
+			<ChipsControl
+				options={ [
+					{ label: __( 'Date', 'elementor' ), value: 'date' },
+					{ label: __( 'Time', 'elementor' ), value: 'time' },
+					{ label: __( 'Page URL', 'elementor' ), value: 'page-url' },
+					{ label: __( 'User agent', 'elementor' ), value: 'user-agent' },
+					{ label: __( 'Credit', 'elementor' ), value: 'credit' },
+				] }
+			/>
+		</Stack>
+	</PropKeyProvider>
+);
+
+export const SendAsField = () => (
+	<PropKeyProvider bind="send-as">
+		<Grid container direction="column" gap={ 0.5 }>
+			<Grid item>
+				<ControlFormLabel>{ __( 'Send as', 'elementor' ) }</ControlFormLabel>
+			</Grid>
+			<Grid item>
+				<SelectControl
+					options={ [
+						{ label: __( 'HTML', 'elementor' ), value: 'html' },
+						{ label: __( 'Plain Text', 'elementor' ), value: 'plain' },
+					] }
+				/>
+			</Grid>
+		</Grid>
+	</PropKeyProvider>
+);

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { emailsPropTypeUtil } from '@elementor/editor-props';
+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 { ControlLabel } from '../../components/control-label';
+import { createControl } from '../../create-control';
+import {
+	BccField,
+	CcField,
+	FromEmailField,
+	FromNameField,
+	MessageField,
+	MetaDataField,
+	ReplyToField,
+	SendAsField,
+	SendToField,
+	SubjectField,
+} from './fields';
+
+export const EmailFormActionControl = createControl(
+	( { toPlaceholder, label }: { toPlaceholder?: string; label?: string } ) => {
+		const { value, setValue, ...propContext } = useBoundProp( emailsPropTypeUtil );
+
+		return (
+			<PropProvider { ...propContext } value={ value } setValue={ setValue }>
+				<Stack gap={ 2 }>
+					<ControlLabel>
+						{ label ? label + ' ' + __( 'settings', 'elementor' ) : __( 'Email settings', 'elementor' ) }
+					</ControlLabel>
+					<PropKeyProvider bind="to">
+						<SendToField placeholder={ toPlaceholder } />
+					</PropKeyProvider>
+					<SubjectField />
+					<MessageField />
+					<FromEmailField />
+					<AdvancedSettings />
+				</Stack>
+			</PropProvider>
+		);
+	}
+);
+
+const AdvancedSettings = () => (
+	<CollapsibleContent defaultOpen={ false }>
+		<Box sx={ { pt: 2 } }>
+			<Stack gap={ 2 }>
+				<FromNameField />
+				<ReplyToField />
+				<CcField />
+				<BccField />
+				<Divider />
+				<MetaDataField />
+				<SendAsField />
+			</Stack>
+		</Box>
+	</CollapsibleContent>
+);

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

@@ -0,0 +1,24 @@
+import { z } from '@elementor/schema';
+import { hasProInstalled, isVersionGreaterOrEqual } from '@elementor/utils';
+
+const MIN_PRO_VERSION_FOR_MENTIONS = '4.1.0';
+
+export const CHIP_TRIGGER_KEYS = new Set( [ ' ', ',' ] );
+
+export function isValidEmail( email: string ): boolean {
+	return z.string().email().safeParse( email ).success;
+}
+
+export const shouldShowMentionsInfo = (): boolean => {
+	if ( ! hasProInstalled() ) {
+		return true;
+	}
+
+	const proVersion = window.elementorPro?.config?.version;
+
+	if ( ! proVersion ) {
+		return false;
+	}
+
+	return isVersionGreaterOrEqual( proVersion, MIN_PRO_VERSION_FOR_MENTIONS );
+};

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

@@ -1,194 +0,0 @@
-import * as React from 'react';
-import { emailPropTypeUtil } from '@elementor/editor-props';
-import { CollapsibleContent, InfoAlert } from '@elementor/editor-ui';
-import { Box, Divider, Grid, Stack } from '@elementor/ui';
-import { hasProInstalled, isVersionGreaterOrEqual } from '@elementor/utils';
-import { __ } from '@wordpress/i18n';
-
-import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
-import { ControlFormLabel } from '../components/control-form-label';
-import { ControlLabel } from '../components/control-label';
-import { createControl } from '../create-control';
-import { useFormFieldSuggestions } from '../hooks/use-form-field-suggestions';
-import { ChipsControl } from './chips-control';
-import { MentionTextAreaControl } from './mention-text-area-control';
-import { SelectControl } from './select-control';
-import { TextControl } from './text-control';
-
-const EmailField = ( { bind, label, placeholder }: { bind: string; label: string; placeholder?: string } ) => (
-	<PropKeyProvider bind={ bind }>
-		<Grid container direction="column" gap={ 0.5 }>
-			<Grid item>
-				<ControlFormLabel>{ label }</ControlFormLabel>
-			</Grid>
-			<Grid item>
-				<TextControl placeholder={ placeholder } />
-			</Grid>
-		</Grid>
-	</PropKeyProvider>
-);
-
-const SendToField = ( { placeholder }: { placeholder?: string } ) => (
-	<EmailField bind="to" label={ __( 'Send to', 'elementor' ) } placeholder={ placeholder } />
-);
-
-const SubjectField = () => (
-	<EmailField
-		bind="subject"
-		label={ __( 'Email subject', 'elementor' ) }
-		placeholder={ __( 'New form submission', 'elementor' ) }
-	/>
-);
-
-const MIN_PRO_VERSION_FOR_MENTIONS = '4.1.0';
-
-const shouldShowMentionsInfo = (): boolean => {
-	if ( ! hasProInstalled() ) {
-		return true;
-	}
-
-	const proVersion = window.elementorPro?.config?.version;
-
-	if ( ! proVersion ) {
-		return false;
-	}
-
-	return isVersionGreaterOrEqual( proVersion, MIN_PRO_VERSION_FOR_MENTIONS );
-};
-
-const MessageField = () => {
-	const suggestions = useFormFieldSuggestions();
-
-	return (
-		<PropKeyProvider bind="message">
-			<Grid container direction="column" gap={ 0.5 }>
-				<Grid item>
-					<ControlFormLabel>{ __( 'Message', 'elementor' ) }</ControlFormLabel>
-				</Grid>
-				<Grid item>
-					<MentionTextAreaControl suggestions={ suggestions } />
-				</Grid>
-				<Grid item>
-					<InfoAlert>
-						{ shouldShowMentionsInfo()
-							? __(
-									'[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.',
-									'elementor'
-							  )
-							: __( '[all-fields] shortcode sends all fields.', 'elementor' ) }
-					</InfoAlert>
-				</Grid>
-			</Grid>
-		</PropKeyProvider>
-	);
-};
-
-const FromEmailField = () => (
-	<EmailField
-		bind="from"
-		label={ __( 'From email', 'elementor' ) }
-		placeholder={ __( 'What email should appear as the sender?', 'elementor' ) }
-	/>
-);
-
-const FromNameField = () => (
-	<EmailField
-		bind="from-name"
-		label={ __( 'From name', 'elementor' ) }
-		placeholder={ __( 'What name should appear as the sender?', 'elementor' ) }
-	/>
-);
-
-const ReplyToField = () => {
-	const emailSuggestions = useFormFieldSuggestions( { inputType: 'email' } );
-
-	return (
-		<PropKeyProvider bind="reply-to">
-			<Grid container direction="column" gap={ 0.5 }>
-				<Grid item>
-					<ControlFormLabel>{ __( 'Reply-to', 'elementor' ) }</ControlFormLabel>
-				</Grid>
-				<Grid item>
-					<MentionTextAreaControl
-						suggestions={ emailSuggestions }
-						rows={ 1 }
-						triggerPosition="start"
-						placeholder={ __( 'You can type @ to insert an email field', 'elementor' ) }
-					/>
-				</Grid>
-			</Grid>
-		</PropKeyProvider>
-	);
-};
-
-const CcField = () => <EmailField bind="cc" label={ __( 'Cc', 'elementor' ) } />;
-
-const BccField = () => <EmailField bind="bcc" label={ __( 'Bcc', 'elementor' ) } />;
-
-const MetaDataField = () => (
-	<PropKeyProvider bind="meta-data">
-		<Stack gap={ 0.5 }>
-			<ControlFormLabel>{ __( 'Metadata', 'elementor' ) }</ControlFormLabel>
-			<ChipsControl
-				options={ [
-					{ label: __( 'Date', 'elementor' ), value: 'date' },
-					{ label: __( 'Time', 'elementor' ), value: 'time' },
-					{ label: __( 'Page URL', 'elementor' ), value: 'page-url' },
-					{ label: __( 'User agent', 'elementor' ), value: 'user-agent' },
-					{ label: __( 'Credit', 'elementor' ), value: 'credit' },
-				] }
-			/>
-		</Stack>
-	</PropKeyProvider>
-);
-
-const SendAsField = () => (
-	<PropKeyProvider bind="send-as">
-		<Grid container direction="column" gap={ 0.5 }>
-			<Grid item>
-				<ControlFormLabel>{ __( 'Send as', 'elementor' ) }</ControlFormLabel>
-			</Grid>
-			<Grid item>
-				<SelectControl
-					options={ [
-						{ label: __( 'HTML', 'elementor' ), value: 'html' },
-						{ label: __( 'Plain Text', 'elementor' ), value: 'plain' },
-					] }
-				/>
-			</Grid>
-		</Grid>
-	</PropKeyProvider>
-);
-
-const AdvancedSettings = () => (
-	<CollapsibleContent defaultOpen={ false }>
-		<Box sx={ { pt: 2 } }>
-			<Stack gap={ 2 }>
-				<FromNameField />
-				<ReplyToField />
-				<CcField />
-				<BccField />
-				<Divider />
-				<MetaDataField />
-				<SendAsField />
-			</Stack>
-		</Box>
-	</CollapsibleContent>
-);
-
-export const EmailFormActionControl = createControl( ( { toPlaceholder }: { toPlaceholder?: string } ) => {
-	const { value, setValue, ...propContext } = useBoundProp( emailPropTypeUtil );
-
-	return (
-		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
-			<Stack gap={ 2 }>
-				<ControlLabel>{ __( 'Email settings', 'elementor' ) }</ControlLabel>
-				<SendToField placeholder={ toPlaceholder } />
-				<SubjectField />
-				<MessageField />
-				<FromEmailField />
-				<AdvancedSettings />
-			</Stack>
-		</PropProvider>
-	);
-} );