@elementor/editor-controls 1.2.0 → 1.5.0

package/src/controls/repeatable-control.tsx

@@ -3,7 +3,6 @@ import { useMemo } from 'react';
 import { createArrayPropUtils, type PropKey } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 
-/* eslint-disable */
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
@@ -26,6 +25,8 @@ type RepeatableControlProps = {
 	placeholder?: string;
 };
 
+const PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
+
 export const RepeatableControl = createControl(
 	( {
 		repeaterLabel,
@@ -47,25 +48,20 @@ export const RepeatableControl = createControl(
 			[ childPropTypeUtil.key, childPropTypeUtil.schema ]
 		);
 
-		const { propType, value, setValue } = useBoundProp( childArrayPropTypeUtil );
-		const ItemLabel = ( { value: itemValue }: { value: any } ) => {
-			const pattern = patternLabel || '';
-			const finalLabel = interpolate( pattern, itemValue.value );
-
-			if ( finalLabel ) {
-				return <span>{ finalLabel }</span>;
-			}
+		const contextValue = useMemo(
+			() => ( {
+				...childControlConfig,
+				placeholder: placeholder || '',
+				patternLabel: patternLabel || '',
+			} ),
+			[ childControlConfig, placeholder, patternLabel ]
+		);
 
-			return (
-				<Box component="span" color="text.tertiary">
-					{ placeholder }
-				</Box>
-			);
-		};
+		const { propType, value, setValue } = useBoundProp( childArrayPropTypeUtil );
 
 		return (
 			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
-				<RepeatableControlContext.Provider value={ childControlConfig }>
+				<RepeatableControlContext.Provider value={ contextValue }>
 					<Repeater
 						openOnAdd
 						values={ value ?? [] }
@@ -110,10 +106,93 @@ const Content = () => {
 	);
 };
 
-const interpolate = ( template: string, data: object ) => {
-	//remove it to be generic
-	if ( Object.values( data ).some( ( value ) => value.value === '' || value === '' ) ) {
-		return null;
+const interpolate = ( template: string, data: Record< string, unknown > ) => {
+	if ( ! data ) {
+		return template;
+	}
+
+	return template.replace( PLACEHOLDER_REGEX, ( _, path ): string => {
+		const value = getNestedValue( data, path );
+
+		if ( typeof value === 'object' && value !== null && ! Array.isArray( value ) ) {
+			if ( value.name ) {
+				return value.name as string;
+			}
+
+			return JSON.stringify( value );
+		}
+
+		if ( Array.isArray( value ) ) {
+			return value.join( ', ' );
+		}
+
+		return String( value ?? '' );
+	} );
+};
+
+const getNestedValue = ( obj: Record< string, unknown >, path: string ) => {
+	return path.split( '.' ).reduce( ( current: Record< string, unknown >, key ) => {
+		if ( current && typeof current === 'object' ) {
+			return current[ key ] as Record< string, unknown >;
+		}
+		return {};
+	}, obj );
+};
+
+const isEmptyValue = ( val: unknown ) => {
+	if ( typeof val === 'string' ) {
+		return val.trim() === '';
+	}
+
+	if ( Number.isNaN( val ) ) {
+		return true;
+	}
+
+	if ( Array.isArray( val ) ) {
+		return val.length === 0;
+	}
+
+	if ( typeof val === 'object' && val !== null ) {
+		return Object.keys( val ).length === 0;
+	}
+
+	return false;
+};
+
+const shouldShowPlaceholder = ( pattern: string, data: Record< string, unknown > ): boolean => {
+	const propertyPaths = getAllProperties( pattern );
+
+	const values = propertyPaths.map( ( path ) => getNestedValue( data, path ) );
+
+	if ( values.length === 0 ) {
+		return false;
 	}
-	return new Function( ...Object.keys( data ), `return \`${ template }\`;` )( ...Object.values( data ) );
+
+	if ( values.some( ( value ) => value === null || value === undefined ) ) {
+		return true;
+	}
+
+	if ( values.every( isEmptyValue ) ) {
+		return true;
+	}
+
+	return false;
+};
+
+const ItemLabel = ( { value }: { value: Record< string, unknown > } ) => {
+	const { placeholder, patternLabel } = useRepeatableControlContext();
+
+	const label = shouldShowPlaceholder( patternLabel, value ) ? placeholder : interpolate( patternLabel, value );
+
+	return (
+		<Box component="span" color="text.tertiary">
+			{ label }
+		</Box>
+	);
+};
+
+const getAllProperties = ( pattern: string ) => {
+	const properties = pattern.match( PLACEHOLDER_REGEX )?.map( ( match ) => match.slice( 2, -1 ) ) || [];
+
+	return properties;
 };

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 } from '@elementor/ui';
+import { Select, type SelectChangeEvent, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -13,7 +13,7 @@ type Props = {
 };
 
 export const SelectControl = createControl( ( { options, onChange }: Props ) => {
-	const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+	const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 		const newValue = event.target.value || null;
@@ -28,6 +28,26 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 				sx={ { overflow: 'hidden' } }
 				displayEmpty
 				size="tiny"
+				renderValue={ ( selectedValue: string | null ) => {
+					const findOptionByValue = ( searchValue: string | null ) =>
+						options.find( ( opt ) => opt.value === searchValue );
+
+					if ( ! selectedValue || selectedValue === '' ) {
+						if ( placeholder ) {
+							const placeholderOption = findOptionByValue( placeholder );
+							const displayText = placeholderOption?.label || placeholder;
+
+							return (
+								<Typography component="span" variant="caption" color="text.tertiary">
+									{ displayText }
+								</Typography>
+							);
+						}
+						return '';
+					}
+					const option = findOptionByValue( selectedValue );
+					return option?.label || selectedValue;
+				} }
 				value={ value ?? '' }
 				onChange={ handleChange }
 				disabled={ disabled }

package/src/controls/size-control.tsx

@@ -10,7 +10,13 @@ import { TextFieldPopover } from '../components/text-field-popover';
 import { createControl } from '../create-control';
 import { useSizeExtendedOptions } from '../hooks/use-size-extended-options';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
-import { defaultUnits, type ExtendedOption, isUnitExtendedOption, type Unit } from '../utils/size-control';
+import {
+	defaultUnits,
+	type DegreeUnit,
+	type ExtendedOption,
+	isUnitExtendedOption,
+	type Unit,
+} from '../utils/size-control';
 
 const DEFAULT_UNIT = 'px';
 const DEFAULT_SIZE = NaN;
@@ -20,17 +26,17 @@ type SizeValue = SizePropValue[ 'value' ];
 type SizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
-	units?: Unit[];
+	units?: ( Unit | DegreeUnit )[];
 	extendedOptions?: ExtendedOption[];
 	disableCustom?: boolean;
 	anchorRef?: RefObject< HTMLDivElement | null >;
-	defaultUnit?: Unit;
+	defaultUnit?: Unit | DegreeUnit;
 };
 
 type State = {
 	numeric: number;
 	custom: string;
-	unit: Unit | ExtendedOption;
+	unit: Unit | DegreeUnit | ExtendedOption;
 };
 
 export const SizeControl = createControl( ( props: SizeControlProps ) => {
@@ -58,15 +64,15 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 			return !! newState?.numeric || newState?.numeric === 0;
 		},
 		fallback: ( newState ) => ( {
-			unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
+			unit: newState?.unit ?? defaultUnit,
 			numeric: newState?.numeric ?? DEFAULT_SIZE,
 			custom: newState?.custom ?? '',
 		} ),
 	} );
 
-	const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = DEFAULT_UNIT } = extractValueFromState( state ) || {};
+	const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = defaultUnit } = extractValueFromState( state ) || {};
 
-	const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
+	const handleUnitChange = ( newUnit: Unit | DegreeUnit | ExtendedOption ) => {
 		if ( newUnit === 'custom' ) {
 			popupState.open( anchorRef?.current );
 		}
@@ -103,9 +109,13 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 	};
 
 	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
-		const currentUnit = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
-		const mergedStates = { ...state, [ currentUnit ]: newState[ currentUnit ] };
+		const newState = createStateFromSizeProp( sizeValue, state.unit === 'custom' ? state.unit : defaultUnit );
+		const currentUnitType = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
+		const mergedStates = {
+			...state,
+			unit: newState.unit ?? state.unit,
+			[ currentUnitType ]: newState[ currentUnitType ],
+		};
 
 		if ( mergedStates.unit !== 'auto' && areStatesEqual( state, mergedStates ) ) {
 			return;
@@ -159,7 +169,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 	);
 } );
 
-function formatSize< TSize extends string | number >( size: TSize, unit: Unit | ExtendedOption ): TSize {
+function formatSize< TSize extends string | number >( size: TSize, unit: Unit | DegreeUnit | ExtendedOption ): TSize {
 	if ( isUnitExtendedOption( unit ) ) {
 		return unit === 'auto' ? ( '' as TSize ) : ( String( size ?? '' ) as TSize );
 	}
@@ -167,7 +177,10 @@ function formatSize< TSize extends string | number >( size: TSize, unit: Unit |
 	return size || size === 0 ? ( Number( size ) as TSize ) : ( NaN as TSize );
 }
 
-function createStateFromSizeProp( sizeValue: SizeValue | null, defaultUnit: Unit ): State {
+function createStateFromSizeProp(
+	sizeValue: SizeValue | null,
+	defaultUnit: Unit | DegreeUnit | ExtendedOption
+): State {
 	const unit = sizeValue?.unit ?? defaultUnit;
 	const size = sizeValue?.size ?? '';
 

package/src/controls/switch-control.tsx

@@ -14,7 +14,15 @@ export const SwitchControl = createControl( () => {
 
 	return (
 		<div style={ { display: 'flex', justifyContent: 'flex-end' } }>
-			<Switch checked={ !! value } onChange={ handleChange } size="small" disabled={ disabled } />
+			<Switch
+				checked={ !! value }
+				onChange={ handleChange }
+				size="small"
+				disabled={ disabled }
+				inputProps={ {
+					...( disabled ? { style: { opacity: 0 } } : {} ),
+				} }
+			/>
 		</div>
 	);
 } );

package/src/controls/text-control.tsx

@@ -1,26 +1,41 @@
 import * as React from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { TextField } from '@elementor/ui';
+import { type SxProps, TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export const TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+export const TextControl = createControl(
+	( {
+		placeholder,
+		error,
+		inputValue,
+		inputDisabled,
+		sx,
+	}: {
+		placeholder?: string;
+		error?: boolean;
+		inputValue?: string;
+		inputDisabled?: boolean;
+		sx?: SxProps;
+	} ) => {
+		const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
-
-	return (
-		<ControlActions>
-			<TextField
-				size="tiny"
-				fullWidth
-				disabled={ disabled }
-				value={ value ?? '' }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );
+		return (
+			<ControlActions>
+				<TextField
+					size="tiny"
+					fullWidth
+					disabled={ inputDisabled ?? disabled }
+					value={ inputValue ?? value ?? '' }
+					onChange={ handleChange }
+					placeholder={ placeholder }
+					error={ error }
+					sx={ sx }
+				/>
+			</ControlActions>
+		);
+	}
+);

package/src/controls/transform-control/functions/axis-row.tsx

@@ -0,0 +1,32 @@
+import { type RefObject } from 'react';
+import * as React from 'react';
+import { Grid } from '@elementor/ui';
+
+import { PropKeyProvider } from '../../../bound-prop-context';
+import { ControlLabel } from '../../../components/control-label';
+import { PopoverGridContainer } from '../../../components/popover-grid-container';
+import { SizeControl } from '../../size-control';
+
+type TransformAxisRowProps = {
+	label: string;
+	bindValue: 'x' | 'y' | 'z';
+	startIcon: React.ReactNode;
+	anchorRef?: RefObject< HTMLDivElement | null >;
+};
+
+export const AxisRow = ( { label, bindValue, startIcon, anchorRef }: TransformAxisRowProps ) => {
+	return (
+		<Grid item xs={ 12 }>
+			<PopoverGridContainer ref={ anchorRef }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<PropKeyProvider bind={ bindValue }>
+						<SizeControl anchorRef={ anchorRef } startIcon={ startIcon } />
+					</PropKeyProvider>
+				</Grid>
+			</PopoverGridContainer>
+		</Grid>
+	);
+};

package/src/controls/transform-control/functions/move.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { moveTransformPropTypeUtil } from '@elementor/editor-props';
+import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { AxisRow } from './axis-row';
+
+const moveAxisControls: { label: string; bindValue: 'x' | 'y' | 'z'; startIcon: React.ReactNode }[] = [
+	{
+		label: __( 'Move X', 'elementor' ),
+		bindValue: 'x',
+		startIcon: <ArrowRightIcon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Move Y', 'elementor' ),
+		bindValue: 'y',
+		startIcon: <ArrowDownSmallIcon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Move Z', 'elementor' ),
+		bindValue: 'z',
+		startIcon: <ArrowDownLeftIcon fontSize={ 'tiny' } />,
+	},
+];
+
+export const Move = () => {
+	const context = useBoundProp( moveTransformPropTypeUtil );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<PropProvider { ...context }>
+				<PropKeyProvider bind={ 'transform-move' }>
+					{ moveAxisControls.map( ( control ) => (
+						<AxisRow key={ control.bindValue } { ...control } anchorRef={ rowRef } />
+					) ) }
+				</PropKeyProvider>
+			</PropProvider>
+		</Grid>
+	);
+};

package/src/controls/transform-control/transform-content.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { PropKey } from '@elementor/editor-props';
+import { Box, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider } from '../../bound-prop-context';
+import { PopoverContent } from '../../components/popover-content';
+import { Move } from './functions/move';
+
+type TransformTabValue = 'transform-move';
+
+export const TransformContent = ( { bind }: { anchorEl?: HTMLElement | null; bind: PropKey } ) => {
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< TransformTabValue >( 'transform-move' );
+
+	return (
+		<PropKeyProvider bind={ bind }>
+			<PopoverContent>
+				<Box sx={ { width: '100%' } }>
+					<Box sx={ { borderBottom: 1, borderColor: 'divider' } }>
+						<Tabs
+							size="small"
+							variant="fullWidth"
+							{ ...getTabsProps() }
+							aria-label={ __( 'Transform', 'elementor' ) }
+						>
+							<Tab label={ __( 'Move', 'elementor' ) } { ...getTabProps( 'transform-move' ) } />
+						</Tabs>
+					</Box>
+					<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'transform-move' ) }>
+						<Move />
+					</TabPanel>
+				</Box>
+			</PopoverContent>
+		</PropKeyProvider>
+	);
+};

package/src/controls/transform-control/transform-icon.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { type TransformItemPropValue } from '@elementor/editor-props';
+import { ArrowsMaximizeIcon } from '@elementor/icons';
+
+export const TransformIcon = ( { value }: { value: TransformItemPropValue } ) => {
+	switch ( value.$$type ) {
+		case 'transform-move':
+			return <ArrowsMaximizeIcon fontSize="tiny" />;
+		default:
+			return null;
+	}
+};

package/src/controls/transform-control/transform-label.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { TransformItemPropValue } from '@elementor/editor-props';
+import { Box } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const transformMoveValue = ( value: TransformItemPropValue[ 'value' ] ) =>
+	Object.values( value )
+		.map( ( axis ) => `${ axis?.value.size }${ axis?.value.unit }` )
+		.join( ', ' );
+
+export const TransformLabel = ( props: { value: TransformItemPropValue } ) => {
+	const { $$type, value } = props.value;
+	switch ( $$type ) {
+		case 'transform-move':
+			return <Label label={ __( 'Move', 'elementor' ) } value={ transformMoveValue( value ) } />;
+		default:
+			return '';
+	}
+};
+
+const Label = ( { label, value }: { label: string; value: string } ) => {
+	return (
+		<Box component="span">
+			{ label }: { value }
+		</Box>
+	);
+};

package/src/controls/transform-control/transform-repeater-control.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { type TransformItemPropValue, transformPropTypeUtil } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+import { PropProvider, useBoundProp } from '../../bound-prop-context';
+import { Repeater } from '../../components/repeater';
+import { createControl } from '../../create-control';
+import { TransformContent } from './transform-content';
+import { TransformIcon } from './transform-icon';
+import { TransformLabel } from './transform-label';
+
+const initialTransformValue: TransformItemPropValue = {
+	$$type: 'transform-move',
+	value: {
+		x: { $$type: 'size', value: { size: 0, unit: 'px' } },
+		y: { $$type: 'size', value: { size: 0, unit: 'px' } },
+		z: { $$type: 'size', value: { size: 0, unit: 'px' } },
+	},
+};
+
+export const TransformRepeaterControl = createControl( () => {
+	const { propType, value: transformValues, setValue, disabled } = useBoundProp( transformPropTypeUtil );
+
+	return (
+		<PropProvider propType={ propType } value={ transformValues } setValue={ setValue }>
+			<Repeater
+				openOnAdd
+				disabled={ disabled }
+				values={ transformValues ?? [] }
+				setValues={ setValue }
+				label={ __( 'Transform', 'elementor' ) }
+				showDuplicate={ false }
+				itemSettings={ {
+					Icon: TransformIcon,
+					Label: TransformLabel,
+					Content: TransformContent,
+					initialValues: initialTransformValue,
+				} }
+			/>
+		</PropProvider>
+	);
+} );

package/src/hooks/use-repeatable-control-context.ts

@@ -9,7 +9,12 @@ export type ChildControlConfig = {
 	label?: string;
 };
 
-const RepeatableControlContext = createContext< ChildControlConfig | undefined >( undefined );
+type RepeatableControlContextType = ChildControlConfig & {
+	placeholder: string;
+	patternLabel: string;
+};
+
+const RepeatableControlContext = createContext< RepeatableControlContextType | undefined >( undefined );
 
 const useRepeatableControlContext = () => {
 	const context = useContext( RepeatableControlContext );

package/src/index.ts

@@ -23,6 +23,7 @@ export { SwitchControl } from './controls/switch-control';
 export { RepeatableControl } from './controls/repeatable-control';
 export { KeyValueControl } from './controls/key-value-control';
 export { PositionControl } from './controls/position-control';
+export { TransformRepeaterControl } from './controls/transform-control/transform-repeater-control';
 export { PopoverContent } from './components/popover-content';
 
 // components

package/src/utils/size-control.ts

@@ -1,10 +1,12 @@
 export const defaultUnits = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ] as const;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const degreeUnits = [ 'deg', 'rad', 'grad', 'turn' ] as const;
 const defaultExtendedOptions = [ 'auto', 'custom' ] as const;
 
 export type Unit = ( typeof defaultUnits )[ number ];
-
+export type DegreeUnit = ( typeof degreeUnits )[ number ];
 export type ExtendedOption = ( typeof defaultExtendedOptions )[ number ];
 
-export function isUnitExtendedOption( unit: Unit | ExtendedOption ): unit is ExtendedOption {
+export function isUnitExtendedOption( unit: Unit | DegreeUnit | ExtendedOption ): unit is ExtendedOption {
 	return defaultExtendedOptions.includes( unit as ExtendedOption );
 }