@elementor/editor-controls 0.30.1 → 0.32.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": "0.30.1",
+  "version": "0.32.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,17 +40,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "0.3.2",
-    "@elementor/editor-elements": "0.8.3",
-    "@elementor/editor-props": "0.12.0",
-    "@elementor/editor-ui": "0.8.2",
+    "@elementor/editor-current-user": "0.5.0",
+    "@elementor/editor-elements": "0.8.4",
+    "@elementor/editor-props": "0.12.1",
+    "@elementor/editor-ui": "0.9.0",
+    "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",
     "@elementor/icons": "1.40.1",
     "@elementor/locations": "0.8.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.34.2",
+    "@elementor/ui": "1.34.5",
     "@elementor/utils": "0.4.0",
     "@elementor/wp-media": "0.6.0",
     "@tanstack/react-virtual": "3.13.3",

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

@@ -11,6 +11,7 @@ type TextFieldInnerSelectionProps = {
 	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
+	onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 	endAdornment: React.ReactNode;
 	startAdornment?: React.ReactNode;
 };
@@ -24,6 +25,7 @@ export const TextFieldInnerSelection = forwardRef(
 			onChange,
 			onBlur,
 			onKeyDown,
+			onKeyUp,
 			endAdornment,
 			startAdornment,
 		}: TextFieldInnerSelectionProps,
@@ -38,6 +40,7 @@ export const TextFieldInnerSelection = forwardRef(
 				value={ value }
 				onChange={ onChange }
 				onKeyDown={ onKeyDown }
+				onKeyUp={ onKeyUp }
 				onBlur={ onBlur }
 				placeholder={ placeholder }
 				InputProps={ {

package/src/controls/aspect-ratio-control.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { stringPropTypeUtil } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Grid, Select, type SelectChangeEvent, Stack, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import { ControlLabel } from '../components/control-label';
+import { createControl } from '../create-control';
+
+const RATIO_OPTIONS = [
+	{ label: __( 'Auto', 'elementor' ), value: 'auto' },
+	{ label: '1/1', value: '1/1' },
+	{ label: '4/3', value: '4/3' },
+	{ label: '3/4', value: '3/4' },
+	{ label: '16/9', value: '16/9' },
+	{ label: '9/16', value: '9/16' },
+	{ label: '3/2', value: '3/2' },
+	{ label: '2/3', value: '2/3' },
+];
+
+const CUSTOM_RATIO = 'custom';
+
+export const AspectRatioControl = createControl( ( { label }: { label: string } ) => {
+	const { value: aspectRatioValue, setValue: setAspectRatioValue } = useBoundProp( stringPropTypeUtil );
+
+	const isCustomSelected =
+		aspectRatioValue && ! RATIO_OPTIONS.some( ( option ) => option.value === aspectRatioValue );
+	const [ initialWidth, initialHeight ] = isCustomSelected ? aspectRatioValue.split( '/' ) : [ '', '' ];
+
+	const [ isCustom, setIsCustom ] = useState( isCustomSelected );
+	const [ customWidth, setCustomWidth ] = useState< string >( initialWidth );
+	const [ customHeight, setCustomHeight ] = useState< string >( initialHeight );
+	const [ selectedValue, setSelectedValue ] = useState< string >(
+		isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ''
+	);
+
+	const handleSelectChange = ( event: SelectChangeEvent< string > ) => {
+		const newValue = event.target.value;
+		const isCustomRatio = newValue === CUSTOM_RATIO;
+
+		setIsCustom( isCustomRatio );
+		setSelectedValue( newValue );
+
+		if ( isCustomRatio ) {
+			return;
+		}
+
+		setAspectRatioValue( newValue );
+	};
+	const handleCustomWidthChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const newWidth = event.target.value;
+		setCustomWidth( newWidth );
+
+		if ( newWidth && customHeight ) {
+			setAspectRatioValue( `${ newWidth }/${ customHeight }` );
+		}
+	};
+
+	const handleCustomHeightChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const newHeight = event.target.value;
+		setCustomHeight( newHeight );
+
+		if ( customWidth && newHeight ) {
+			setAspectRatioValue( `${ customWidth }/${ newHeight }` );
+		}
+	};
+
+	return (
+		<Stack direction="column" gap={ 2 }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<Select
+						sx={ { overflow: 'hidden' } }
+						displayEmpty
+						size="tiny"
+						value={ selectedValue }
+						onChange={ handleSelectChange }
+						fullWidth
+					>
+						{ [ ...RATIO_OPTIONS, { label: __( 'Custom', 'elementor' ), value: CUSTOM_RATIO } ].map(
+							( { label: optionLabel, ...props } ) => (
+								<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
+									{ optionLabel }
+								</MenuListItem>
+							)
+						) }
+					</Select>
+				</Grid>
+			</Grid>
+			{ isCustom && (
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<TextField
+							size="tiny"
+							type="number"
+							fullWidth
+							value={ customWidth }
+							onChange={ handleCustomWidthChange }
+							placeholder={ __( 'Width', 'elementor' ) }
+						/>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<TextField
+							size="tiny"
+							type="number"
+							fullWidth
+							value={ customHeight }
+							onChange={ handleCustomHeightChange }
+							placeholder={ __( 'Height', 'elementor' ) }
+						/>
+					</Grid>
+				</Grid>
+			) }
+		</Stack>
+	);
+} );

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { backgroundPropTypeUtil } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Grid } from '@elementor/ui';
 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 { SectionContent } from '../../components/section-content';
 import { createControl } from '../../create-control';
 import { ColorControl } from '../color-control';
@@ -12,6 +14,9 @@ import { BackgroundOverlayRepeaterControl } from './background-overlay/backgroun
 
 export const BackgroundControl = createControl( () => {
 	const propContext = useBoundProp( backgroundPropTypeUtil );
+	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
+
+	const colorLabel = __( 'Color', 'elementor' );
 
 	return (
 		<PropProvider { ...propContext }>
@@ -22,7 +27,11 @@ export const BackgroundControl = createControl( () => {
 				<PropKeyProvider bind="color">
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
-							<ControlFormLabel>{ __( 'Color', 'elementor' ) }</ControlFormLabel>
+							{ isUsingNestedProps ? (
+								<ControlLabel>{ colorLabel }</ControlLabel>
+							) : (
+								<ControlFormLabel>{ colorLabel }</ControlFormLabel>
+							) }
 						</Grid>
 						<Grid item xs={ 6 }>
 							<ColorControl />

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

@@ -91,15 +91,15 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 	);
 } );
 
-export const ItemContent = ( { bind }: { bind: PropKey } ) => {
+export const ItemContent = ( { anchorEl = null, bind }: { anchorEl?: HTMLElement | null; bind: PropKey } ) => {
 	return (
 		<PropKeyProvider bind={ bind }>
-			<Content />
+			<Content anchorEl={ anchorEl } />
 		</PropKeyProvider>
 	);
 };
 
-const Content = () => {
+const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 	const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory( {
 		image: getInitialBackgroundOverlay().value,
 		color: initialBackgroundColorOverlay.value,
@@ -130,7 +130,7 @@ const Content = () => {
 			</TabPanel>
 			<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'color' ) }>
 				<PopoverContent>
-					<ColorOverlayContent />
+					<ColorOverlayContent anchorEl={ anchorEl } />
 				</PopoverContent>
 			</TabPanel>
 		</Box>
@@ -217,12 +217,12 @@ const ItemLabelGradient = ( { value }: { value: BackgroundOverlayItemPropValue }
 	return <span>{ __( 'Radial Gradient', 'elementor' ) }</span>;
 };
 
-const ColorOverlayContent = () => {
+const ColorOverlayContent = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 	const propContext = useBoundProp( backgroundColorOverlayPropTypeUtil );
 	return (
 		<PropProvider { ...propContext }>
 			<PropKeyProvider bind={ 'color' }>
-				<ColorControl />
+				<ColorControl anchorEl={ anchorEl } />
 			</PropKeyProvider>
 		</PropProvider>
 	);

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

@@ -53,21 +53,7 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 			<PopoverContent p={ 1.5 }>
 				<PopoverGridContainer>
 					<Control bind="color" label={ __( 'Color', 'elementor' ) }>
-						<ColorControl
-							slotProps={ {
-								colorPicker: {
-									anchorEl,
-									anchorOrigin: {
-										vertical: 'top',
-										horizontal: 'right',
-									},
-									transformOrigin: {
-										vertical: 'top',
-										horizontal: -10,
-									},
-								},
-							} }
-						/>
+						<ColorControl anchorEl={ anchorEl } />
 					</Control>
 					<Control bind="position" label={ __( 'Position', 'elementor' ) } sx={ { overflow: 'hidden' } }>
 						<SelectControl

package/src/controls/color-control.tsx

@@ -8,18 +8,41 @@ import { createControl } from '../create-control';
 
 type Props = Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > & {
 	propTypeUtil?: PropTypeUtil< string, string >;
+	anchorEl?: HTMLElement | null;
 };
 
-export const ColorControl = createControl( ( { propTypeUtil = colorPropTypeUtil, ...props }: Props ) => {
-	const { value, setValue } = useBoundProp( propTypeUtil );
+export const ColorControl = createControl(
+	( { propTypeUtil = colorPropTypeUtil, anchorEl, slotProps = {}, ...props }: Props ) => {
+		const { value, setValue } = useBoundProp( propTypeUtil );
 
-	const handleChange = ( selectedColor: string ) => {
-		setValue( selectedColor || null );
-	};
+		const handleChange = ( selectedColor: string ) => {
+			setValue( selectedColor || null );
+		};
 
-	return (
-		<ControlActions>
-			<UnstableColorField size="tiny" { ...props } value={ value ?? '' } onChange={ handleChange } fullWidth />
-		</ControlActions>
-	);
-} );
+		return (
+			<ControlActions>
+				<UnstableColorField
+					size="tiny"
+					fullWidth
+					value={ value ?? '' }
+					onChange={ handleChange }
+					{ ...props }
+					slotProps={ {
+						...slotProps,
+						colorPicker: {
+							anchorEl,
+							anchorOrigin: {
+								vertical: 'top',
+								horizontal: 'right',
+							},
+							transformOrigin: {
+								vertical: 'top',
+								horizontal: -10,
+							},
+						},
+					} }
+				/>
+			</ControlActions>
+		);
+	}
+);

package/src/controls/link-control.tsx

@@ -93,7 +93,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 		}
 
 		setLinkSessionValue( {
-			value: newState ? value : linkSessionValue?.value,
+			value: linkSessionValue?.value,
 			meta: { isEnabled: newState },
 		} );
 	};

package/src/controls/size-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import { sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { InputAdornment } from '@elementor/ui';
 
@@ -116,6 +117,31 @@ const SizeInput = ( {
 	size,
 	unit,
 }: SizeInputProps ) => {
+	const unitInputBufferRef = useRef( '' );
+
+	const handleKeyUp = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		const { key } = event;
+
+		if ( ! /^[a-zA-Z%]$/.test( key ) ) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const newChar = key.toLowerCase();
+		const updatedBuffer = ( unitInputBufferRef.current + newChar ).slice( -3 );
+		unitInputBufferRef.current = updatedBuffer;
+
+		const matchedUnit =
+			units.find( ( u ) => u.includes( updatedBuffer ) ) ||
+			units.find( ( u ) => u.startsWith( newChar ) ) ||
+			units.find( ( u ) => u.includes( newChar ) );
+
+		if ( matchedUnit ) {
+			handleUnitChange( matchedUnit );
+		}
+	};
+
 	return (
 		<ControlActions>
 			<TextFieldInnerSelection
@@ -133,12 +159,16 @@ const SizeInput = ( {
 				type="number"
 				value={ Number.isNaN( size ) ? '' : size }
 				onChange={ handleSizeChange }
-				onBlur={ onBlur }
+				onBlur={ ( event ) => {
+					unitInputBufferRef.current = '';
+					onBlur?.( event );
+				} }
 				onKeyDown={ ( event ) => {
 					if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
 						event.preventDefault();
 					}
 				} }
+				onKeyUp={ handleKeyUp }
 			/>
 		</ControlActions>
 	);

package/src/controls/switch-control.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { booleanPropTypeUtil } from '@elementor/editor-props';
+import { Switch } from '@elementor/ui';
+
+import { useBoundProp } from '../bound-prop-context/use-bound-prop';
+import { createControl } from '../create-control';
+
+export const SwitchControl = createControl( () => {
+	const { value, setValue } = useBoundProp( booleanPropTypeUtil );
+
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setValue( event.target.checked );
+	};
+
+	return (
+		<div style={ { display: 'flex', justifyContent: 'flex-end' } }>
+			<Switch checked={ !! value } onChange={ handleChange } size="small" />
+		</div>
+	);
+} );

package/src/index.ts

@@ -15,8 +15,10 @@ export { FontFamilyControl } from './controls/font-family-control/font-family-co
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
 export { GapControl } from './controls/gap-control';
+export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
+export { SwitchControl } from './controls/switch-control';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';