@elementor/editor-controls 1.2.0 → 1.3.0

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": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,19 +40,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-elements": "0.8.7",
-    "@elementor/editor-props": "0.15.0",
+    "@elementor/editor-current-user": "0.6.0",
+    "@elementor/editor-elements": "0.9.0",
+    "@elementor/editor-props": "0.16.0",
     "@elementor/editor-responsive": "0.13.6",
-    "@elementor/editor-ui": "0.13.0",
+    "@elementor/editor-ui": "0.14.0",
     "@elementor/editor-v1-adapters": "0.12.1",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",
-    "@elementor/icons": "1.44.0",
+    "@elementor/icons": "1.46.0",
     "@elementor/locations": "0.8.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.35.5",
+    "@elementor/ui": "1.36.0",
     "@elementor/utils": "0.5.0",
     "@elementor/wp-media": "0.6.1",
     "@wordpress/i18n": "^5.13.0"

package/src/bound-prop-context/prop-context.tsx

@@ -15,7 +15,7 @@ type PropContext< T extends PropValue, P extends PropType > = {
 	value: T | null;
 	propType: P;
 	placeholder?: T;
-	disabled?: boolean;
+	isDisabled?: ( propType: PropType ) => boolean | undefined;
 };
 
 const PropContext = createContext< PropContext< PropValue, PropType > | null >( null );
@@ -30,7 +30,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 	setValue,
 	propType,
 	placeholder,
-	disabled,
+	isDisabled,
 }: PropProviderProps< T, P > ) => {
 	return (
 		<PropContext.Provider
@@ -39,7 +39,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 				propType,
 				setValue: setValue as SetValue< PropValue >,
 				placeholder,
-				disabled,
+				isDisabled,
 			} }
 		>
 			{ children }

package/src/bound-prop-context/prop-key-context.tsx

@@ -21,6 +21,7 @@ export type PropKeyContextValue< T, P > = {
 	propType: P;
 	placeholder?: T;
 	path: PropKey[];
+	isDisabled?: ( propType: PropType ) => boolean | undefined;
 	disabled?: boolean;
 };
 

package/src/bound-prop-context/use-bound-prop.ts

@@ -19,6 +19,7 @@ type UseBoundProp< TValue extends PropValue > = {
 	placeholder?: TValue;
 	path: PropKey[];
 	restoreValue: () => void;
+	isDisabled?: ( propType: PropType ) => boolean | undefined;
 	disabled?: boolean;
 };
 
@@ -38,9 +39,11 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 
 	const { isValid, validate, restoreValue } = useValidation( propKeyContext.propType );
 
+	const disabled = propKeyContext.isDisabled?.( propKeyContext.propType );
+
 	// allow using the hook without a propTypeUtil, with no modifications or validations.
 	if ( ! propTypeUtil ) {
-		return propKeyContext;
+		return { ...propKeyContext, disabled } as PropKeyContextValue< PropValue, PropType >;
 	}
 
 	function setValue( value: TValue | null, options: CreateOptions, meta: { bind?: PropKey } ) {
@@ -67,6 +70,7 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 		value: isValid ? value : null,
 		restoreValue,
 		placeholder,
+		disabled,
 	};
 }
 

package/src/components/text-field-popover.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type RefObject } from 'react';
-import { bindPopover, Paper, Popover, type PopupState, TextField } from '@elementor/ui';
+import { bindPopover, Popover, type PopupState, TextField } from '@elementor/ui';
 
 type Props = {
 	popupState: PopupState;
@@ -16,6 +16,15 @@ export const TextFieldPopover = ( props: Props ) => {
 	return (
 		<Popover
 			disablePortal
+			slotProps={ {
+				paper: {
+					sx: {
+						borderRadius: 2,
+						width: anchorRef.current?.offsetWidth + 'px',
+						p: 1.5,
+					},
+				},
+			} }
 			{ ...bindPopover( popupState ) }
 			anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
 			transformOrigin={ { vertical: 'top', horizontal: 'center' } }
@@ -24,24 +33,16 @@ export const TextFieldPopover = ( props: Props ) => {
 				popupState.close();
 			} }
 		>
-			<Paper
-				sx={ {
-					width: anchorRef.current?.offsetWidth + 'px',
-					borderRadius: 2,
-					p: 1.5,
+			<TextField
+				value={ value }
+				onChange={ onChange }
+				size="tiny"
+				type="text"
+				fullWidth
+				inputProps={ {
+					autoFocus: true,
 				} }
-			>
-				<TextField
-					value={ value }
-					onChange={ onChange }
-					size="tiny"
-					type="text"
-					fullWidth
-					inputProps={ {
-						autoFocus: true,
-					} }
-				/>
-			</Paper>
+			/>
 		</Popover>
 	);
 };

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -7,12 +7,11 @@ import {
 	colorPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Box, CardMedia, Grid, styled, Tab, TabPanel, Tabs, type Theme, UnstableColorIndicator } from '@elementor/ui';
+import { Box, CardMedia, styled, Tab, TabPanel, Tabs, type Theme, UnstableColorIndicator } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
-import { ControlFormLabel } from '../../../components/control-form-label';
 import { PopoverContent } from '../../../components/popover-content';
 import { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
@@ -75,7 +74,7 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue, disabled } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } disabled={ disabled }>
+		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } isDisabled={ () => disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }
@@ -236,18 +235,7 @@ const ImageOverlayContent = () => {
 	return (
 		<PropProvider { ...propContext }>
 			<PropKeyProvider bind={ 'image' }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-							<Grid item xs={ 6 }>
-								<ControlFormLabel>{ __( 'Resolution', 'elementor' ) }</ControlFormLabel>
-							</Grid>
-							<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-								<ImageControl sizes={ backgroundResolutionOptions } />
-							</Grid>
-						</Grid>
-					</Grid>
-				</Grid>
+				<ImageControl sizes={ backgroundResolutionOptions } />
 			</PropKeyProvider>
 			<PropKeyProvider bind={ 'position' }>
 				<BackgroundImageOverlayPosition />

package/src/controls/box-shadow-repeater-control.tsx

@@ -17,7 +17,7 @@ export const BoxShadowRepeaterControl = createControl( () => {
 	const { propType, value, setValue, disabled } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue } disabled={ disabled }>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ () => disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }

package/src/controls/equal-unequal-sizes-control.tsx

@@ -154,7 +154,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					propType={ multiSizePropType }
 					value={ getMultiSizeValues() }
 					setValue={ setNestedProp }
-					disabled={ multiSizeDisabled }
+					isDisabled={ () => multiSizeDisabled }
 				>
 					<PopoverContent p={ 1.5 }>
 						<PopoverGridContainer ref={ rowRefs[ 1 ] }>

package/src/controls/font-family-control/font-family-control.tsx

@@ -21,20 +21,32 @@ type FontFamilyControlProps = {
 const SIZE = 'tiny';
 
 export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }: FontFamilyControlProps ) => {
-	const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp( stringPropTypeUtil );
+	const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
 
+	const isShowingPlaceholder = ! fontFamily && placeholder;
+
 	return (
 		<>
 			<ControlActions>
 				<UnstableTag
 					variant="outlined"
-					label={ fontFamily }
+					label={ fontFamily || placeholder }
 					endIcon={ <ChevronDownIcon fontSize={ SIZE } /> }
 					{ ...bindTrigger( popoverState ) }
 					fullWidth
 					disabled={ disabled }
+					sx={
+						isShowingPlaceholder
+							? {
+									'& .MuiTag-label': {
+										color: ( theme ) => theme.palette.text.tertiary,
+									},
+									textTransform: 'capitalize',
+							  }
+							: undefined
+					}
 				/>
 			</ControlActions>
 			<Popover

package/src/controls/image-control.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { imagePropTypeUtil } from '@elementor/editor-props';
-import { Stack } from '@elementor/ui';
+import { Grid, Stack } from '@elementor/ui';
 import { type MediaType } from '@elementor/wp-media';
+import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
 import { createControl } from '../create-control';
 import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 import { ImageMediaControl } from './image-media-control';
@@ -17,23 +19,50 @@ type ImageControlProps = {
 export const ImageControl = createControl( ( { sizes, showMode = 'all' }: ImageControlProps ) => {
 	const propContext = useBoundProp( imagePropTypeUtil );
 
+	let componentToRender;
+	switch ( showMode ) {
+		case 'media':
+			componentToRender = <ImageSrcControl />;
+			break;
+		case 'sizes':
+			componentToRender = <ImageSizeControl sizes={ sizes } />;
+			break;
+		case 'all':
+		default:
+			componentToRender = (
+				<Stack gap={ 1.5 }>
+					<ControlFormLabel>{ __( 'Image', 'elementor' ) }</ControlFormLabel>
+					<ImageSrcControl />
+					<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlFormLabel>{ __( 'Resolution', 'elementor' ) }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+							<ImageSizeControl sizes={ sizes } />
+						</Grid>
+					</Grid>
+				</Stack>
+			);
+	}
+
+	return <PropProvider { ...propContext }>{ componentToRender }</PropProvider>;
+} );
+
+const ImageSrcControl = () => {
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
 	const mediaTypes: MediaType[] = allowSvgUpload ? [ 'image', 'svg' ] : [ 'image' ];
 
 	return (
-		<PropProvider { ...propContext }>
-			<Stack gap={ 1.5 }>
-				{ [ 'all', 'media' ].includes( showMode ) ? (
-					<PropKeyProvider bind={ 'src' }>
-						<ImageMediaControl mediaTypes={ mediaTypes } />
-					</PropKeyProvider>
-				) : null }
-				{ [ 'all', 'sizes' ].includes( showMode ) ? (
-					<PropKeyProvider bind={ 'size' }>
-						<SelectControl options={ sizes } />
-					</PropKeyProvider>
-				) : null }
-			</Stack>
-		</PropProvider>
+		<PropKeyProvider bind={ 'src' }>
+			<ImageMediaControl mediaTypes={ mediaTypes } />
+		</PropKeyProvider>
 	);
-} );
+};
+
+const ImageSizeControl = ( { sizes }: { sizes: ImageControlProps[ 'sizes' ] } ) => {
+	return (
+		<PropKeyProvider bind={ 'size' }>
+			<SelectControl options={ sizes } />
+		</PropKeyProvider>
+	);
+};

package/src/controls/link-control.tsx

@@ -10,6 +10,7 @@ import {
 	urlPropTypeUtil,
 } from '@elementor/editor-props';
 import { InfoTipCard } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 import { AlertTriangleIcon, MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
@@ -29,6 +30,7 @@ import { ControlFormLabel } from '../components/control-form-label';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { type ControlProps } from '../utils/types';
+import { SwitchControl } from './switch-control';
 
 type Props = ControlProps< {
 	queryOptions: {
@@ -191,7 +193,14 @@ export const LinkControl = createControl( ( props: Props ) => {
 							</ControlActions>
 						</PropKeyProvider>
 						<PropKeyProvider bind={ 'isTargetBlank' }>
-							<SwitchControl disabled={ propContext.disabled || ! value } />
+							<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
+								<Grid item>
+									<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
+								</Grid>
+								<Grid item sx={ { marginInlineEnd: -1 } }>
+									<SwitchControlComponent disabled={ propContext.disabled || ! value } />
+								</Grid>
+							</Grid>
 						</PropKeyProvider>
 					</Stack>
 				</Collapse>
@@ -215,31 +224,27 @@ const ToggleIconControl = ( { disabled, active, onIconClick, label }: ToggleIcon
 	);
 };
 
-// @TODO Should be refactored in ED-16323
-const SwitchControl = ( { disabled }: { disabled: boolean } ) => {
-	const { value = false, setValue } = useBoundProp( booleanPropTypeUtil );
+const SwitchControlComponent = ( { disabled }: { disabled: boolean } ) => {
+	const { value, setValue } = useBoundProp( booleanPropTypeUtil );
+	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
+
+	if ( isVersion331Active ) {
+		return <SwitchControl />;
+	}
 
 	const onClick = () => {
 		setValue( ! value );
 	};
 
-	const inputProps = disabled
-		? {
-				style: {
-					opacity: 0,
-				},
-		  }
-		: {};
-
 	return (
-		<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
-			<Grid item>
-				<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
-			</Grid>
-			<Grid item sx={ { marginInlineEnd: -1 } }>
-				<Switch checked={ value } onClick={ onClick } disabled={ disabled } inputProps={ inputProps } />
-			</Grid>
-		</Grid>
+		<Switch
+			checked={ value ?? false }
+			onClick={ onClick }
+			disabled={ disabled }
+			inputProps={ {
+				...( disabled ? { style: { opacity: 0 } } : {} ),
+			} }
+		/>
 	);
 };
 

package/src/controls/linked-dimensions-control.tsx

@@ -68,7 +68,7 @@ export const LinkedDimensionsControl = createControl(
 				propType={ propType }
 				value={ dimensionsValue }
 				setValue={ setDimensionsValue }
-				disabled={ disabled }
+				isDisabled={ () => disabled }
 			>
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					{ isUsingNestedProps ? (

package/src/controls/repeatable-control.tsx

@@ -47,25 +47,21 @@ 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 );
+		const contextValue = useMemo(
+			() => ({
+				...childControlConfig,
+				placeholder: placeholder || '',
+				patternLabel: patternLabel || '',
+			}),
+			[ childControlConfig, placeholder, patternLabel ]
+		);
 
-			if ( finalLabel ) {
-				return <span>{ finalLabel }</span>;
-			}
+		const { propType, value, setValue } = useBoundProp( childArrayPropTypeUtil );
 
-			return (
-				<Box component="span" color="text.tertiary">
-					{ placeholder }
-				</Box>
-			);
-		};
 
 		return (
 			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
-				<RepeatableControlContext.Provider value={ childControlConfig }>
+				<RepeatableControlContext.Provider value={ contextValue }>
 					<Repeater
 						openOnAdd
 						values={ value ?? [] }
@@ -111,9 +107,73 @@ const Content = () => {
 };
 
 const interpolate = ( template: string, data: object ) => {
-	//remove it to be generic
-	if ( Object.values( data ).some( ( value ) => value.value === '' || value === '' ) ) {
-		return null;
+	if ( ! data ) {
+		return template;
 	}
+
 	return new Function( ...Object.keys( data ), `return \`${ template }\`;` )( ...Object.values( data ) );
 };
+
+const getNestedValue = ( obj: any, path: string ) => {
+    return path.split( '.' ).reduce( ( current, key ) => current?.[key], 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 && Object.keys( val ).length === 0 ) {
+        return true;
+    }
+
+    return false;
+};
+
+const shouldShowPlaceholder = ( pattern: string, data: unknown ): boolean => {
+	const propertyPaths = getAllProperties( pattern );
+
+	const values = propertyPaths.map( path => getNestedValue( data, path ) );
+
+	if ( values.length === 0 ) {
+		return false;
+	}
+
+	if ( values.some( ( value ) => value === null || value === undefined ) ) {
+		return true;
+	}
+
+	if ( values.every( isEmptyValue ) ) {
+		return true;
+	}
+
+	return false;
+};
+
+const ItemLabel = ( { value }: { value: any } ) => {
+	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(/\$\{([^}]+)\}/g)?.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/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/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>
+	);
+};