@elementor/editor-editing-panel 0.17.0 → 0.19.0

package/src/controls/control-actions/actions/popover-action.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
+import { ComponentType, ElementType as ReactElementType, useId } from 'react';
+import { XIcon } from '@elementor/icons';
+
+const SIZE = 'tiny';
+
+export type PopoverActionProps = {
+	title: string;
+	visible?: boolean;
+	icon: ReactElementType;
+	popoverContent: ComponentType< { closePopover: () => void } >;
+};
+
+export default function PopoverAction( {
+	title,
+	visible = true,
+	icon: Icon,
+	popoverContent: PopoverContent,
+}: PopoverActionProps ) {
+	const id = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-popover-action-${ id }`,
+	} );
+
+	if ( ! visible ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Tooltip placement="top" title={ title }>
+				<IconButton aria-label={ title } key={ id } size={ SIZE } { ...bindToggle( popupState ) }>
+					<Icon fontSize={ SIZE } />
+				</IconButton>
+			</Tooltip>
+			<Popover
+				disablePortal
+				disableScrollLock
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'center',
+				} }
+				{ ...bindPopover( popupState ) }
+			>
+				<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
+					<Icon fontSize={ SIZE } sx={ { mr: 0.5 } } />
+					<Typography variant="subtitle2">{ title }</Typography>
+					<IconButton sx={ { ml: 'auto' } } size={ SIZE } onClick={ popupState.close }>
+						<XIcon fontSize={ SIZE } />
+					</IconButton>
+				</Stack>
+				<PopoverContent closePopover={ popupState.close } />
+			</Popover>
+		</>
+	);
+}

package/src/controls/control-actions/control-actions-menu.ts

@@ -0,0 +1,8 @@
+import PopoverAction from './actions/popover-action';
+import { createMenu } from '@elementor/menus';
+
+export const controlActionsMenu = createMenu( {
+	components: {
+		PopoverAction,
+	},
+} );

package/src/controls/control-actions/control-actions.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { styled, UnstableFloatingActionBar } from '@elementor/ui';
+import { PropsWithChildren } from 'react';
+import { controlActionsMenu } from './control-actions-menu';
+
+const { useMenuItems } = controlActionsMenu;
+
+// CSS hack to hide empty floating bars.
+const FloatingBar = styled( UnstableFloatingActionBar )`
+	& .MuiPaper-root:empty {
+		display: none;
+	}
+
+	// this is for a fix which would be added later on - to force the width externally
+	width: 100%;
+	& > :first-of-type {
+		width: 100%;
+	}
+`;
+
+export type ControlActionsProps = PropsWithChildren< {
+	fullWidth?: boolean;
+} >;
+
+export default function ControlActions( { fullWidth = false, children }: ControlActionsProps ) {
+	const items = useMenuItems().default;
+
+	if ( items.length === 0 ) {
+		return children;
+	}
+
+	return (
+		<FloatingBar
+			actions={ items.map( ( { MenuItem, id } ) => (
+				<MenuItem key={ id } />
+			) ) }
+			// TODO - work on a general layouting solution instead
+			sx={ fullWidth ? { width: '100%' } : undefined }
+		>
+			{ children }
+		</FloatingBar>
+	);
+}

package/src/controls/control-context.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { PropKey, PropValue } from '../types';
+import { PropKey, PropValue } from './props/types';
 
 export type ControlContext< T extends PropValue > = {
 	bind: PropKey;

package/src/controls/control-replacement.ts

@@ -1,26 +1,34 @@
-import { PropValue } from '../types';
+import { ComponentType } from 'react';
+import { PropValue } from './props/types';
+import { useControl } from './control-context';
 
 type ReplaceWhenParams = {
 	value: PropValue;
 };
 
 type ControlReplacement = {
-	component: React.ComponentType;
+	component: ComponentType;
 	condition: ( { value }: ReplaceWhenParams ) => boolean;
 };
 
 let controlReplacement: ControlReplacement | undefined;
 
-export const replaceControl = ( { component, condition }: ControlReplacement ) => {
-	controlReplacement = { component, condition };
-};
-
-export const getControlReplacement = ( { value }: ReplaceWhenParams ) => {
+const getControlReplacement = ( { value }: ReplaceWhenParams ) => {
 	let shouldReplace = false;
 
 	try {
-		shouldReplace = !! controlReplacement?.condition( { value } );
+		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement?.component;
 	} catch {}
 
 	return shouldReplace ? controlReplacement?.component : undefined;
 };
+
+export function replaceControl( { component, condition }: ControlReplacement ) {
+	controlReplacement = { component, condition };
+}
+
+export function useControlReplacement() {
+	const { value } = useControl();
+
+	return getControlReplacement( { value } );
+}

package/src/controls/control-types/color-control.tsx

@@ -1,24 +1,27 @@
 import * as React from 'react';
-import { UnstableColorPicker } from '@elementor/ui';
+import { UnstableColorPicker, UnstableColorPickerProps } from '@elementor/ui';
 import { useControl } from '../control-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { TransformablePropValue } from '../props/types';
 
-export const ColorControl = () => {
-	const { value, setValue } = useControl< string >();
+export type ColorPropValue = TransformablePropValue< 'color', string >;
 
-	const handleChange = debounce( ( selectedColor: string ) => {
-		setValue( selectedColor );
-	} );
+export const ColorControl = createControl(
+	( props: Partial< Omit< UnstableColorPickerProps, 'value' | 'onChange' > > ) => {
+		const { value, setValue } = useControl< ColorPropValue >();
 
-	return <UnstableColorPicker value={ value } onChange={ handleChange }></UnstableColorPicker>;
-};
+		const handleChange = ( selectedColor: string ) => {
+			setValue( {
+				$$type: 'color',
+				value: selectedColor,
+			} );
+		};
 
-// TODO: Remove this when the color picker component sends one event per color change [DES-422].
-const debounce = < TArgs extends unknown[], TReturn >( func: ( ...args: TArgs ) => TReturn, wait = 300 ) => {
-	let timer: ReturnType< typeof setTimeout >;
-
-	return ( ...args: TArgs ) => {
-		clearTimeout( timer );
-
-		timer = setTimeout( () => func( ...args ), wait );
-	};
-};
+		return (
+			<ControlActions>
+				<UnstableColorPicker size="tiny" { ...props } value={ value?.value } onChange={ handleChange } />
+			</ControlActions>
+		);
+	}
+);

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

@@ -1,69 +1,66 @@
 import * as React from 'react';
-import { Button, Card, CardMedia, CardOverlay } from '@elementor/ui';
-import { useControl } from '../control-context';
-import { UploadIcon } from '@elementor/icons';
+import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+import { ControlContext, useControl } from '../control-context';
+import { type ImageSrc, ImageMediaControl } from './image-media-control';
+import { PropValue, TransformablePropValue } from '../props/types';
+import { SettingsControl } from '../settings-control';
+import { SelectControl } from './select-control';
+import { createControl } from '../create-control';
 
-type Image = {
-	$$type: 'image';
-	value:
-		| {
-				attachmentId: number;
-				url?: never;
-		  }
-		| {
-				attachmentId?: never;
-				url: string;
-		  };
+type Image = TransformablePropValue<
+	'image',
+	{
+		src?: ImageSrc;
+		size?: string;
+	}
+>;
+
+type SetContextValue = ( v: PropValue ) => void;
+
+export type ImageControlProps = {
+	sizes: { label: string; value: string }[];
 };
 
-export const ImageControl = () => {
+export const ImageControl = createControl( ( props: ImageControlProps ) => {
 	const { value, setValue } = useControl< Image >();
-	const { data: attachment } = useWpMediaAttachment( value?.value?.attachmentId );
-	const src = attachment?.url ?? value?.value?.url;
+	const { src, size } = value?.value || {};
 
-	const { open } = useWpMediaFrame( {
-		types: [ 'image' ],
-		multiple: false,
-		selected: value?.value?.attachmentId,
-		onSelect: ( selectedAttachment ) => {
-			setValue( {
-				$$type: 'image',
-				value: {
-					attachmentId: selectedAttachment.id,
-				},
-			} );
-		},
-	} );
+	const setImageSrc = ( newValue: ImageSrc ) => {
+		setValue( {
+			$$type: 'image',
+			value: {
+				src: newValue,
+				size,
+			},
+		} );
+	};
 
-	return (
-		<Card variant="outlined">
-			<CardMedia image={ src } sx={ { height: 150 } } />
-			<CardOverlay>
-				<Button
-					color="inherit"
-					size="small"
-					variant="outlined"
-					onClick={ () => {
-						open( { mode: 'browse' } );
-					} }
-				>
-					{ __( 'Select Image', 'elementor' ) }
-				</Button>
+	const setImageSize = ( newValue: string ) => {
+		setValue( {
+			$$type: 'image',
+			value: {
+				src,
+				size: newValue,
+			},
+		} );
+	};
 
-				<Button
-					color="inherit"
-					size="small"
-					variant="text"
-					startIcon={ <UploadIcon /> }
-					onClick={ () => {
-						open( { mode: 'upload' } );
-					} }
-				>
-					{ __( 'Upload Image', 'elementor' ) }
-				</Button>
-			</CardOverlay>
-		</Card>
+	return (
+		<Stack gap={ 2 }>
+			<ControlContext.Provider value={ { setValue: setImageSrc as SetContextValue, value: src, bind: 'src' } }>
+				<ImageMediaControl />
+			</ControlContext.Provider>
+			<ControlContext.Provider value={ { setValue: setImageSize as SetContextValue, value: size, bind: 'size' } }>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 6 }>
+						<SettingsControl.Label> { __( 'Image Resolution', 'elementor' ) }</SettingsControl.Label>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<SelectControl options={ props.sizes } />
+					</Grid>
+				</Grid>
+			</ControlContext.Provider>
+		</Stack>
 	);
-};
+} );

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Button, Card, CardMedia, CardOverlay, Stack } from '@elementor/ui';
+import { UploadIcon } from '@elementor/icons';
+import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+import { __ } from '@wordpress/i18n';
+import { useControl } from '../control-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { TransformablePropValue } from '../props/types';
+
+type ImageAttachmentID = TransformablePropValue< 'image-attachment-id', number >;
+
+type Url = TransformablePropValue< 'url', string >;
+
+export type ImageSrc = TransformablePropValue<
+	'image-src',
+	{ id: ImageAttachmentID; url: null } | { url: Url; id: null }
+>;
+
+export const ImageMediaControl = createControl( () => {
+	const { value, setValue } = useControl< ImageSrc >();
+	const { id, url } = value?.value ?? {};
+
+	const { data: attachment } = useWpMediaAttachment( id?.value || null );
+	const src = attachment?.url ?? url;
+
+	const { open } = useWpMediaFrame( {
+		types: [ 'image' ],
+		multiple: false,
+		selected: id?.value || null,
+		onSelect: ( selectedAttachment ) => {
+			setValue( {
+				$$type: 'image-src',
+				value: {
+					id: {
+						$$type: 'image-attachment-id',
+						value: selectedAttachment.id,
+					},
+					url: null,
+				},
+			} );
+		},
+	} );
+
+	return (
+		<Card variant="outlined">
+			<CardMedia image={ src } sx={ { height: 150 } } />
+			<CardOverlay>
+				<ControlActions>
+					<Stack gap={ 0.5 }>
+						<Button
+							size="tiny"
+							color="inherit"
+							variant="outlined"
+							onClick={ () => open( { mode: 'browse' } ) }
+						>
+							{ __( 'Select Image', 'elementor' ) }
+						</Button>
+						<Button
+							size="tiny"
+							variant="text"
+							color="inherit"
+							startIcon={ <UploadIcon /> }
+							onClick={ () => open( { mode: 'upload' } ) }
+						>
+							{ __( 'Upload Image', 'elementor' ) }
+						</Button>
+					</Stack>
+				</ControlActions>
+			</CardOverlay>
+		</Card>
+	);
+} );

package/src/controls/control-types/number-control.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { TextField } from '@elementor/ui';
 import { useControl } from '../control-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
 const isEmptyOrNaN = ( value?: string | number ) =>
 	value === undefined || value === '' || Number.isNaN( Number( value ) );
 
-export const NumberControl = ( { placeholder }: { placeholder?: string } ) => {
+export const NumberControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
 	const { value, setValue } = useControl< number | undefined >();
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
@@ -14,12 +16,14 @@ export const NumberControl = ( { placeholder }: { placeholder?: string } ) => {
 	};
 
 	return (
-		<TextField
-			size="tiny"
-			type="number"
-			value={ isEmptyOrNaN( value ) ? '' : value }
-			onChange={ handleChange }
-			placeholder={ placeholder }
-		/>
+		<ControlActions>
+			<TextField
+				size="tiny"
+				type="number"
+				value={ isEmptyOrNaN( value ) ? '' : value }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+			/>
+		</ControlActions>
 	);
-};
+} );

package/src/controls/control-types/select-control.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';
 import { useControl } from '../control-context';
-import { PropValue } from '../../types';
+import { PropValue } from '../props/types';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
 type Props< T > = {
 	options: Array< { label: string; value: T; disabled?: boolean } >;
 };
 
-export const SelectControl = < T extends PropValue >( { options }: Props< T > ) => {
+export const SelectControl = createControl( < T extends PropValue >( { options }: Props< T > ) => {
 	const { value, setValue } = useControl< T >();
 
 	const handleChange = ( event: SelectChangeEvent< T > ) => {
@@ -15,12 +17,14 @@ export const SelectControl = < T extends PropValue >( { options }: Props< T > )
 	};
 
 	return (
-		<Select size="tiny" value={ value ?? '' } onChange={ handleChange }>
-			{ options.map( ( { label, ...props } ) => (
-				<MenuItem key={ props.value } { ...props }>
-					{ label }
-				</MenuItem>
-			) ) }
-		</Select>
+		<ControlActions>
+			<Select size="tiny" value={ value ?? '' } onChange={ handleChange }>
+				{ options.map( ( { label, ...props } ) => (
+					<MenuItem key={ props.value } { ...props }>
+						{ label }
+					</MenuItem>
+				) ) }
+			</Select>
+		</ControlActions>
 	);
-};
+} );

package/src/controls/control-types/size-control.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { InputAdornment } from '@elementor/ui';
-import { TransformablePropValue } from '../../types';
+import { TransformablePropValue } from '../props/types';
 import { useControl } from '../control-context';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
 export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';
 
 const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];
 
-export type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;
+export type SizeControlValue = TransformablePropValue< 'size', { unit: Unit; size: number } >;
 
 export type SizeControlProps = {
 	placeholder?: string;
@@ -17,7 +19,7 @@ export type SizeControlProps = {
 	units?: Unit[];
 };
 
-export const SizeControl = ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
+export const SizeControl = createControl( ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
 	const { value, setValue } = useControl< SizeControlValue >();
 
 	const [ state, setState ] = useSyncExternalState< SizeControlValue >( {
@@ -53,15 +55,17 @@ export const SizeControl = ( { units = defaultUnits, placeholder, startIcon }: S
 	};
 
 	return (
-		<TextFieldInnerSelection
-			endAdornment={
-				<SelectionEndAdornment options={ units } onClick={ handleUnitChange } value={ state.value.unit } />
-			}
-			placeholder={ placeholder }
-			startAdornment={ startIcon ?? <InputAdornment position="start">{ startIcon }</InputAdornment> }
-			type="number"
-			value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
-			onChange={ handleSizeChange }
-		/>
+		<ControlActions>
+			<TextFieldInnerSelection
+				endAdornment={
+					<SelectionEndAdornment options={ units } onClick={ handleUnitChange } value={ state.value.unit } />
+				}
+				placeholder={ placeholder }
+				startAdornment={ startIcon ?? <InputAdornment position="start">{ startIcon }</InputAdornment> }
+				type="number"
+				value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
+				onChange={ handleSizeChange }
+			/>
+		</ControlActions>
 	);
-};
+} );

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

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { TextField } from '@elementor/ui';
 import { useControl } from '../control-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
 type Props = {
 	placeholder?: string;
 };
 
-export const TextAreaControl = ( { placeholder }: Props ) => {
+export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
 	const { value, setValue } = useControl< string >();
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
@@ -14,14 +16,16 @@ export const TextAreaControl = ( { placeholder }: Props ) => {
 	};
 
 	return (
-		<TextField
-			size="tiny"
-			multiline
-			fullWidth
-			rows={ 5 }
-			value={ value }
-			onChange={ handleChange }
-			placeholder={ placeholder }
-		/>
+		<ControlActions fullWidth>
+			<TextField
+				size="tiny"
+				multiline
+				fullWidth
+				rows={ 5 }
+				value={ value }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+			/>
+		</ControlActions>
 	);
-};
+} );

package/src/controls/control-types/text-control.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { TextField } from '@elementor/ui';
 import { useControl } from '../control-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
-export const TextControl = ( { placeholder }: { placeholder?: string } ) => {
+export const TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
 	const { value, setValue } = useControl< string >( '' );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
-	return <TextField type="text" size="tiny" value={ value } onChange={ handleChange } placeholder={ placeholder } />;
-};
+	return (
+		<ControlActions fullWidth>
+			<TextField type="text" size="tiny" value={ value } onChange={ handleChange } placeholder={ placeholder } />
+		</ControlActions>
+	);
+} );

package/src/controls/control-types/toggle-control.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { useControl } from '../control-context';
 import { ControlToggleButtonGroup, ToggleButtonGroupItem } from '../components/control-toggle-button-group';
-import { PropValue } from '../../types';
+import { PropValue } from '../props/types';
+import { createControl } from '../create-control';
 
 type ToggleControlProps< T extends PropValue > = {
 	options: ToggleButtonGroupItem< T >[];
 };
 
-export const ToggleControl = < T extends PropValue >( { options }: ToggleControlProps< T > ) => {
+export const ToggleControl = createControl( < T extends PropValue >( { options }: ToggleControlProps< T > ) => {
 	const { value, setValue } = useControl< T >();
 
 	const handleToggle = ( option: T | null ) => {
@@ -22,4 +23,4 @@ export const ToggleControl = < T extends PropValue >( { options }: ToggleControl
 			exclusive={ true }
 		/>
 	);
-};
+} );

package/src/controls/control.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
-import { getControlReplacement } from './control-replacement';
-import { useControl } from './control-context';
 import { createError } from '@elementor/utils';
 import { ControlType, ControlTypes, getControlByType } from './controls-registry';
 
@@ -33,8 +31,6 @@ type ControlProps< T extends ControlType > = AnyPropertyRequired< ComponentProps
 	  };
 
 export const Control = < T extends ControlType >( { props, type }: ControlProps< T > ) => {
-	const { value } = useControl();
-
 	const ControlByType = getControlByType( type );
 
 	if ( ! ControlByType ) {
@@ -43,8 +39,6 @@ export const Control = < T extends ControlType >( { props, type }: ControlProps<
 		} );
 	}
 
-	const ControlComponent = getControlReplacement( { value } ) || ControlByType;
-
 	// @ts-expect-error ControlComponent props are inferred from the type (T).
-	return <ControlComponent { ...props } />;
+	return <ControlByType { ...props } />;
 };