@elementor/editor-editing-panel 0.14.2 → 0.16.0

package/src/controls/components/text-field-inner-selection.tsx

@@ -0,0 +1,79 @@
+import { PropValue } from '../../types';
+import * as React from 'react';
+import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
+import { useId } from 'react';
+
+export type TextFieldInnerSelectionProps = {
+	placeholder?: string;
+	type: string;
+	value: PropValue;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	endAdornment: React.ReactNode;
+	startAdornment?: React.ReactNode;
+};
+
+export const TextFieldInnerSelection = ( {
+	placeholder,
+	type,
+	value,
+	onChange,
+	endAdornment,
+	startAdornment,
+}: TextFieldInnerSelectionProps ) => {
+	return (
+		<TextField
+			size="tiny"
+			type={ type }
+			value={ value }
+			onChange={ onChange }
+			placeholder={ placeholder }
+			InputProps={ {
+				endAdornment,
+				startAdornment,
+			} }
+		/>
+	);
+};
+
+export type SelectionEndAdornmentProps< T extends string > = {
+	options: T[];
+	onClick: ( value: T ) => void;
+	value: T;
+};
+
+export const SelectionEndAdornment = < T extends string >( {
+	options,
+	onClick,
+	value,
+}: SelectionEndAdornmentProps< T > ) => {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: useId(),
+	} );
+
+	const handleMenuItemClick = ( index: number ) => {
+		onClick( options[ index ] );
+		popupState.close();
+	};
+
+	return (
+		<InputAdornment position="end">
+			<Button
+				size="small"
+				color="inherit"
+				sx={ { font: 'inherit', minWidth: 'initial' } }
+				{ ...bindTrigger( popupState ) }
+			>
+				{ value.toUpperCase() }
+			</Button>
+
+			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
+				{ options.map( ( option, index ) => (
+					<MenuItem key={ option } onClick={ () => handleMenuItemClick( index ) }>
+						{ option.toUpperCase() }
+					</MenuItem>
+				) ) }
+			</Menu>
+		</InputAdornment>
+	);
+};

package/src/controls/control-replacement.ts

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

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { UnstableColorPicker } from '@elementor/ui';
+import { useControl } from '../control-context';
+
+export const ColorControl = () => {
+	const { value, setValue } = useControl< string >();
+
+	const handleChange = debounce( ( selectedColor: string ) => {
+		setValue( selectedColor );
+	} );
+
+	return <UnstableColorPicker value={ value } onChange={ handleChange }></UnstableColorPicker>;
+};
+
+// 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 );
+	};
+};

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

@@ -18,25 +18,10 @@ type Image = {
 		  };
 };
 
-// TODO: Use schema to get default image.
-const defaultState: Image = {
-	$$type: 'image',
-	value: {
-		url: '/wp-content/plugins/elementor/assets/images/placeholder.png',
-	},
-};
-
 export const ImageControl = () => {
-	const { value, setValue } = useControl< Image >( defaultState );
+	const { value, setValue } = useControl< Image >();
 	const { data: attachment } = useWpMediaAttachment( value?.value?.attachmentId );
-
-	const getImageSrc = () => {
-		if ( attachment?.url ) {
-			return attachment.url;
-		}
-
-		return value?.value?.url ?? defaultState.value.url;
-	};
+	const src = attachment?.url ?? value?.value?.url;
 
 	const { open } = useWpMediaFrame( {
 		types: [ 'image' ],
@@ -54,7 +39,7 @@ export const ImageControl = () => {
 
 	return (
 		<Card variant="outlined">
-			<CardMedia image={ getImageSrc() } sx={ { height: 150 } } />
+			<CardMedia image={ src } sx={ { height: 150 } } />
 			<CardOverlay>
 				<Button
 					color="inherit"

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

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

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

@@ -1,19 +1,23 @@
 import * as React from 'react';
-import { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';
+import { InputAdornment } from '@elementor/ui';
 import { TransformablePropValue } from '../../types';
 import { useControl } from '../control-context';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
-
-export type SizeControlProps = {
-	units: Unit[];
-	placeholder?: string;
-};
+import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
 
 export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';
 
+const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];
+
 export type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;
 
-export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
+export type SizeControlProps = {
+	placeholder?: string;
+	startIcon?: React.ReactNode;
+	units?: Unit[];
+};
+
+export const SizeControl = ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
 	const { value, setValue } = useControl< SizeControlValue >();
 
 	const [ state, setState ] = useSyncExternalState< SizeControlValue >( {
@@ -26,9 +30,7 @@ export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
 		} ),
 	} );
 
-	const handleUnitChange = ( event: SelectChangeEvent< Unit > ) => {
-		const unit = event.target.value as Unit;
-
+	const handleUnitChange = ( unit: Unit ) => {
 		setState( ( prev ) => ( {
 			...prev,
 			value: {
@@ -51,29 +53,15 @@ export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
 	};
 
 	return (
-		<Stack direction="row">
-			<TextField
-				size="tiny"
-				type="number"
-				value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
-				onChange={ handleSizeChange }
-				placeholder={ placeholder }
-			/>
-			<Select
-				size="tiny"
-				value={ state.value.unit }
-				onChange={ handleUnitChange }
-				MenuProps={ {
-					anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-					transformOrigin: { vertical: 'top', horizontal: 'right' },
-				} }
-			>
-				{ units.map( ( unit ) => (
-					<MenuItem key={ unit } value={ unit }>
-						{ unit.toUpperCase() }
-					</MenuItem>
-				) ) }
-			</Select>
-		</Stack>
+		<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 }
+		/>
 	);
 };

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

@@ -7,7 +7,7 @@ type Props = {
 };
 
 export const TextAreaControl = ( { placeholder }: Props ) => {
-	const { value, setValue } = useControl< string >( '' );
+	const { value, setValue } = useControl< string >();
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.value );

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useControl } from '../control-context';
+import { ControlToggleButtonGroup, ToggleButtonGroupItem } from '../components/control-toggle-button-group';
+import { PropValue } from '../../types';
+
+type ToggleControlProps< T extends PropValue > = {
+	options: ToggleButtonGroupItem< T >[];
+};
+
+export const ToggleControl = < T extends PropValue >( { options }: ToggleControlProps< T > ) => {
+	const { value, setValue } = useControl< T >();
+
+	const handleToggle = ( option: T | null ) => {
+		setValue( option || undefined );
+	};
+
+	return (
+		<ControlToggleButtonGroup
+			items={ options }
+			value={ value || null }
+			onChange={ handleToggle }
+			exclusive={ true }
+		/>
+	);
+};

package/src/controls/control.tsx

@@ -0,0 +1,50 @@
+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';
+
+export type ControlTypeErrorContext = {
+	type: string;
+};
+
+const ControlTypeError = createError< ControlTypeErrorContext >( {
+	code: 'CONTROL_TYPE_NOT_FOUND',
+	message: `Control type not found.`,
+} );
+
+type IsRequired< T, K extends keyof T > = object extends Pick< T, K > ? false : true;
+
+type AnyPropertyRequired< T > = {
+	[ K in keyof T ]: IsRequired< T, K >;
+}[ keyof T ] extends true
+	? true
+	: false;
+
+type ControlProps< T extends ControlType > = AnyPropertyRequired< ComponentProps< ControlTypes[ T ] > > extends true
+	? {
+			props: ComponentProps< ControlTypes[ T ] >;
+			type: T;
+	  }
+	: {
+			props?: ComponentProps< ControlTypes[ T ] >;
+			type: T;
+	  };
+
+export const Control = < T extends ControlType >( { props, type }: ControlProps< T > ) => {
+	const { value } = useControl();
+
+	const ControlByType = getControlByType( type );
+
+	if ( ! ControlByType ) {
+		throw new ControlTypeError( {
+			context: { type },
+		} );
+	}
+
+	const ControlComponent = getControlReplacement( { value } ) || ControlByType;
+
+	// @ts-expect-error ControlComponent props are inferred from the type (T).
+	return <ControlComponent { ...props } />;
+};

package/src/controls/{get-control-by-type.ts → controls-registry.tsx}

@@ -1,15 +1,19 @@
-import { SelectControl } from './control-types/select-control';
-import { TextAreaControl } from './control-types/text-area-control';
-import { TextControl } from './control-types/text-control';
 import { ImageControl } from './control-types/image-control';
+import { TextControl } from './control-types/text-control';
+import { TextAreaControl } from './control-types/text-area-control';
+import { SizeControl } from './control-types/size-control';
+import { SelectControl } from './control-types/select-control';
 
-const controlTypes = {
+export const controlTypes = {
 	image: ImageControl,
-	select: SelectControl,
 	text: TextControl,
 	textarea: TextAreaControl,
-};
+	size: SizeControl,
+	select: SelectControl,
+} as const;
+
+export type ControlTypes = typeof controlTypes;
+
+export type ControlType = keyof ControlTypes;
 
-export const getControlByType = ( type: string ) => {
-	return controlTypes[ type as keyof typeof controlTypes ] ?? null;
-};
+export const getControlByType = ( type: ControlType ) => controlTypes[ type ];

package/src/controls/hooks/use-style-control.ts

@@ -6,7 +6,7 @@ import { PropKey, PropValue } from '../../types';
 
 export const useStyleControl = < T extends PropValue >( propName: PropKey ) => {
 	const { element } = useElementContext();
-	const { selectedStyleDef, selectedMeta } = useStyleContext();
+	const { selectedStyleDef, selectedMeta, selectedClassesProp } = useStyleContext();
 
 	const value = useElementStyleProp< T >( {
 		elementID: element.id,
@@ -21,6 +21,7 @@ export const useStyleControl = < T extends PropValue >( propName: PropKey ) => {
 			styleDefID: selectedStyleDef?.id,
 			props: { [ propName ]: newValue },
 			meta: selectedMeta,
+			bind: selectedClassesProp,
 		} );
 	};
 

package/src/controls/settings-control.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { ControlContext } from '../controls/control-context';
-import { Stack, styled } from '@elementor/ui';
+import { ControlContext } from './control-context';
 import { PropKey, PropValue } from '../types';
 import { useElementContext } from '../contexts/element-context';
 import { useWidgetSettings } from '../hooks/use-widget-settings';
 import { updateSettings } from '../sync/update-settings';
 import { ControlLabel } from '../components/control-label';
+import { ControlContainer } from './components/control-container';
 
 type Props = {
 	bind: PropKey;
@@ -13,8 +13,11 @@ type Props = {
 };
 
 export const SettingsControlProvider = ( { bind, children }: Props ) => {
-	const { element } = useElementContext();
-	const value = useWidgetSettings( { id: element.id, bind } );
+	const { element, elementType } = useElementContext();
+
+	const defaultValue = elementType.propsSchema[ bind ]?.type.default;
+	const settingsValue = useWidgetSettings( { id: element.id, bind } );
+	const value = settingsValue ?? defaultValue ?? null;
 
 	const setValue = ( newValue: PropValue ) => {
 		updateSettings( {
@@ -30,26 +33,10 @@ export const SettingsControlProvider = ( { bind, children }: Props ) => {
 
 const SettingsControl = ( { children, bind }: Props ) => (
 	<SettingsControlProvider bind={ bind }>
-		<StyledStack direction="row" alignItems="center" justifyContent="space-between" flexWrap="wrap">
-			{ children }
-		</StyledStack>
+		<ControlContainer flexWrap="wrap">{ children }</ControlContainer>
 	</SettingsControlProvider>
 );
 
-const StyledStack = styled( Stack )( ( { theme } ) => {
-	const gap = theme.spacing( 1 );
-
-	return {
-		gap,
-		'& > *': {
-			width: `calc(50% - ${ gap } / 2)`,
-		},
-		'& > label': {
-			flexShrink: 0,
-		},
-	};
-} );
-
 // TODO: When we start using useControl inside the label component, we should create a new component for it,
 // and keep ControlLabel as a simple label component without context.
 SettingsControl.Label = ControlLabel;

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { useControl } from '../../controls/control-context';
+import { DynamicPropValue, DynamicTag } from '../types';
+import { DynamicControl } from '../dynamic-control';
+import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
+import type { Control, ControlsSection } from '../../types';
+import { DynamicSelection } from './dynamic-selection';
+import { ControlType, getControlByType } from '../../controls/controls-registry';
+import { ControlLabel } from '../../components/control-label';
+import { Control as BaseControl } from '../../controls/control';
+import { useDynamicTag } from '../hooks/use-dynamic-tag';
+import {
+	bindPopover,
+	bindTrigger,
+	Box,
+	IconButton,
+	Paper,
+	Popover,
+	Stack,
+	Typography,
+	UnstableTag as Tag,
+	usePopupState,
+	Tabs,
+	Divider,
+	useTabs,
+	Tab,
+	TabPanel,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const SIZE = 'tiny';
+
+export const DynamicSelectionControl = () => {
+	const { bind, value, setValue } = useControl< DynamicPropValue | null >();
+	const { name: tagName = '' } = value?.value || {};
+
+	const selectionPopoverId = useId();
+	const selectionPopoverState = usePopupState( { variant: 'popover', popupId: selectionPopoverId } );
+
+	const dynamicTag = useDynamicTag( bind, tagName );
+
+	const removeDynamicTag = () => {
+		// TODO: Implement static value restoration.
+		setValue( null );
+	};
+
+	if ( ! dynamicTag ) {
+		throw new Error( `Dynamic tag ${ tagName } not found` );
+	}
+
+	return (
+		<Box sx={ { width: '100%' } }>
+			<Tag
+				fullWidth
+				showActionsOnHover
+				label={ dynamicTag.label }
+				startIcon={ <DatabaseIcon fontSize={ SIZE } /> }
+				{ ...bindTrigger( selectionPopoverState ) }
+				actions={
+					<>
+						<DynamicSettingsPopover dynamicTag={ dynamicTag } />
+						<IconButton
+							size={ SIZE }
+							onClick={ removeDynamicTag }
+							aria-label={ __( 'Remove dynamic value', 'elementor' ) }
+						>
+							<XIcon fontSize={ SIZE } />
+						</IconButton>
+					</>
+				}
+			/>
+			<Popover
+				disablePortal
+				disableScrollLock
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				{ ...bindPopover( selectionPopoverState ) }
+			>
+				<Stack>
+					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
+						<DatabaseIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
+						<Typography variant="subtitle2">{ __( 'Dynamic Tags', 'elementor' ) }</Typography>
+						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ selectionPopoverState.close }>
+							<XIcon fontSize={ SIZE } />
+						</IconButton>
+					</Stack>
+					<DynamicSelection onSelect={ selectionPopoverState.close } />
+				</Stack>
+			</Popover>
+		</Box>
+	);
+};
+
+export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag } ) => {
+	const popupId = useId();
+	const settingsPopupState = usePopupState( { variant: 'popover', popupId } );
+
+	const hasDynamicSettings = !! dynamicTag.atomic_controls.length;
+
+	if ( ! hasDynamicSettings ) {
+		return null;
+	}
+
+	return (
+		<>
+			<IconButton
+				size={ SIZE }
+				{ ...bindTrigger( settingsPopupState ) }
+				aria-label={ __( 'Settings', 'elementor' ) }
+			>
+				<SettingsIcon fontSize={ SIZE } />
+			</IconButton>
+			<Popover
+				disableScrollLock
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+				{ ...bindPopover( settingsPopupState ) }
+			>
+				<Paper component={ Stack } sx={ { minHeight: '300px', width: '220px' } }>
+					<Stack direction="row" alignItems="center" px={ 1.5 } pt={ 2 } pb={ 1 }>
+						<DatabaseIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
+						<Typography variant="subtitle2">{ dynamicTag.label }</Typography>
+						<IconButton sx={ { ml: 'auto' } } size={ SIZE } onClick={ settingsPopupState.close }>
+							<XIcon fontSize={ SIZE } />
+						</IconButton>
+					</Stack>
+					<DynamicSettings controls={ dynamicTag.atomic_controls } />
+				</Paper>
+			</Popover>
+		</>
+	);
+};
+
+const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls' ] } ) => {
+	const tabs = controls.filter( ( { type } ) => type === 'section' ) as ControlsSection[];
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< number >( 0 );
+
+	if ( ! tabs.length ) {
+		// Dynamic must have hierarchical controls.
+		return null;
+	}
+
+	return (
+		<>
+			<Tabs indicatorColor="secondary" textColor="secondary" { ...getTabsProps() }>
+				{ tabs.map( ( { value }, index ) => (
+					<Tab key={ index } label={ value.label } sx={ { px: 1, py: 0.5 } } { ...getTabProps( index ) } />
+				) ) }
+			</Tabs>
+			<Divider />
+
+			{ tabs.map( ( { value }, index ) => {
+				return (
+					<TabPanel key={ index } sx={ { flexGrow: 1 } } { ...getTabPanelProps( index ) }>
+						<Stack gap={ 1 } px={ 2 }>
+							{ value.items.map( ( item ) => {
+								if ( item.type === 'control' ) {
+									return <Control key={ item.value.bind } control={ item.value } />;
+								}
+								return null;
+							} ) }
+						</Stack>
+					</TabPanel>
+				);
+			} ) }
+		</>
+	);
+};
+
+const Control = ( { control }: { control: Control[ 'value' ] } ) => {
+	if ( ! getControlByType( control.type as ControlType ) ) {
+		return null;
+	}
+
+	return (
+		<DynamicControl bind={ control.bind }>
+			{ control.label ? <ControlLabel>{ control.label }</ControlLabel> : null }
+			<BaseControl type={ control.type as ControlType } props={ control.props } />
+		</DynamicControl>
+	);
+};