@elementor/editor-controls 0.12.1 → 0.14.0

package/src/controls/size-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { sizePropTypeUtil } from '@elementor/editor-props';
+import { sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { InputAdornment } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -8,6 +8,7 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 
+export type ExtendedValue = 'auto';
 export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
 
 const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ];
@@ -19,34 +20,98 @@ type SizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
 	units?: Unit[];
+	extendedValues?: ExtendedValue[];
 };
 
-export const SizeControl = createControl( ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
-	const { value, setValue } = useBoundProp( sizePropTypeUtil );
-
-	const [ state, setState ] = useSyncExternalState( {
-		external: value,
-		setExternal: setValue,
-		persistWhen: ( controlValue ) => !! controlValue?.size || controlValue?.size === 0,
-		fallback: ( controlValue ) => ( { unit: controlValue?.unit || defaultUnit, size: defaultSize } ),
-	} );
-
-	const handleUnitChange = ( unit: Unit ) => {
-		setState( ( prev ) => ( {
-			size: prev?.size ?? defaultSize,
-			unit,
-		} ) );
-	};
+export const SizeControl = createControl(
+	( { units = defaultUnits, extendedValues = [], placeholder, startIcon }: SizeControlProps ) => {
+		const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+
+		const [ state, setState ] = useSyncExternalState( {
+			external: sizeValue,
+			setExternal: setSizeValue,
+			persistWhen: ( controlValue ) => !! controlValue?.size || controlValue?.size === 0,
+			fallback: ( controlValue ) => ( { unit: controlValue?.unit || defaultUnit, size: defaultSize } ),
+		} );
+
+		const handleUnitChange = ( unit: Unit ) => {
+			setState( ( prev ) => ( {
+				size: prev?.size ?? defaultSize,
+				unit,
+			} ) );
+		};
+
+		const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+			const { value: size } = event.target;
+
+			setState( ( prev ) => ( {
+				...prev,
+				size: size || size === '0' ? parseFloat( size ) : defaultSize,
+			} ) );
+		};
 
-	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const { value: size } = event.target;
+		const inputProps = {
+			size: state.size,
+			unit: state.unit,
+			placeholder,
+			startIcon,
+			units,
+			extendedValues,
+			handleSizeChange,
+			handleUnitChange,
+		};
 
-		setState( ( prev ) => ( {
-			...prev,
-			size: size || size === '0' ? parseFloat( size ) : defaultSize,
-		} ) );
+		if ( extendedValues?.length ) {
+			return <ExtendedSizeInput { ...inputProps } />;
+		}
+		return <SizeInput { ...inputProps } />;
+	}
+);
+
+const ExtendedSizeInput = ( props: SizeInputProps ) => {
+	const { value: stringValue, setValue: setStringValue } = useBoundProp( stringPropTypeUtil );
+	const { extendedValues = [] } = props;
+
+	const unit = ( stringValue ?? props.unit ) as Unit;
+
+	const handleUnitChange = ( newUnit: Unit ) => {
+		if ( extendedValues.includes( newUnit as ExtendedValue ) ) {
+			setStringValue( newUnit );
+		} else {
+			props.handleUnitChange( newUnit );
+		}
 	};
 
+	return (
+		<SizeInput
+			{ ...props }
+			units={ [ ...props.units, ...( extendedValues as unknown as Unit[] ) ] }
+			handleUnitChange={ handleUnitChange }
+			unit={ unit }
+		/>
+	);
+};
+
+type SizeInputProps = {
+	unit: Unit;
+	size: number;
+	placeholder?: string;
+	startIcon?: React.ReactNode;
+	units: Unit[];
+	extendedValues?: ExtendedValue[];
+	handleUnitChange: ( unit: Unit ) => void;
+	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+};
+
+const SizeInput = ( {
+	units,
+	handleUnitChange,
+	handleSizeChange,
+	placeholder,
+	startIcon,
+	size,
+	unit,
+}: SizeInputProps ) => {
 	return (
 		<ControlActions>
 			<TextFieldInnerSelection
@@ -54,7 +119,7 @@ export const SizeControl = createControl( ( { units = defaultUnits, placeholder,
 					<SelectionEndAdornment
 						options={ units }
 						onClick={ handleUnitChange }
-						value={ state?.unit ?? defaultUnit }
+						value={ unit ?? defaultUnit }
 					/>
 				}
 				placeholder={ placeholder }
@@ -62,9 +127,9 @@ export const SizeControl = createControl( ( { units = defaultUnits, placeholder,
 					startIcon ? <InputAdornment position="start">{ startIcon }</InputAdornment> : undefined
 				}
 				type="number"
-				value={ Number.isNaN( state?.size ) ? '' : state?.size }
+				value={ Number.isNaN( size ) ? '' : size }
 				onChange={ handleSizeChange }
 			/>
 		</ControlActions>
 	);
-} );
+};

package/src/controls/svg-media-control.tsx

@@ -58,7 +58,7 @@ export const SvgMediaControl = createControl( () => {
 
 	return (
 		<Stack gap={ 1 }>
-			<ControlLabel> { __( 'Choose SVG', 'elementor' ) } </ControlLabel>
+			<ControlLabel> { __( 'SVG', 'elementor' ) } </ControlLabel>
 			<ControlActions>
 				<StyledCard variant="outlined">
 					<StyledCardMediaContainer>
@@ -96,7 +96,7 @@ export const SvgMediaControl = createControl( () => {
 								startIcon={ <UploadIcon /> }
 								onClick={ () => open( { mode: 'upload' } ) }
 							>
-								{ __( 'Upload SVG', 'elementor' ) }
+								{ __( 'Upload', 'elementor' ) }
 							</Button>
 						</Stack>
 					</CardOverlay>

package/src/index.ts

@@ -29,6 +29,7 @@ export type { EqualUnequalItems } from './controls/equal-unequal-sizes-control';
 export type { ControlActionsItems } from './control-actions/control-actions-context';
 export type { PropProviderProps } from './bound-prop-context';
 export type { SetValue } from './bound-prop-context/prop-context';
+export type { ExtendedValue } from './controls/size-control';
 
 // providers
 export { createControlReplacement, ControlReplacementProvider } from './create-control-replacement';