@elementor/editor-controls 0.35.0 → 1.0.0

package/src/controls/size-control.tsx

@@ -1,183 +1,213 @@
 import * as React from 'react';
-import { useRef } from 'react';
-import { sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
-import { Box, InputAdornment } from '@elementor/ui';
+import { type MutableRefObject, useEffect, useState } from 'react';
+import { sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
+import { useActiveBreakpoint } from '@elementor/editor-responsive';
+import { usePopupState } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
-import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
-import ControlActions from '../control-actions/control-actions';
+import { SizeInput } from '../components/size-control/size-input';
+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';
 
-export type ExtendedValue = 'auto';
-export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
+const DEFAULT_UNIT = 'px';
+const DEFAULT_SIZE = NaN;
 
-const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ];
-
-const defaultUnit = 'px';
-const defaultSize = NaN;
+type SizeValue = SizePropValue[ 'value' ];
 
 type SizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
 	units?: Unit[];
-	extendedValues?: ExtendedValue[];
+	extendedOptions?: ExtendedOption[];
+	disableCustom?: boolean;
+	anchorRef?: MutableRefObject< HTMLElement | undefined >;
 };
 
-export const SizeControl = createControl(
-	( { units = defaultUnits, extendedValues = [], placeholder, startIcon }: SizeControlProps ) => {
-		const { value: sizeValue, setValue: setSizeValue, restoreValue, disabled } = 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 Input = extendedValues?.length ? ExtendedSizeInput : SizeInput;
-
-		return (
-			<Input
-				disabled={ disabled }
-				size={ state.size }
-				unit={ state.unit }
-				placeholder={ placeholder }
-				startIcon={ startIcon }
-				units={ units }
-				extendedValues={ extendedValues }
-				handleSizeChange={ handleSizeChange }
-				handleUnitChange={ handleUnitChange }
-				onBlur={ restoreValue }
-			/>
-		);
-	}
-);
+type State = {
+	numeric: number;
+	custom: string;
+	unit: Unit | ExtendedOption;
+};
 
-const ExtendedSizeInput = ( props: SizeInputProps ) => {
-	const { value: stringValue, setValue: setStringValue } = useBoundProp( stringPropTypeUtil );
-	const { extendedValues = [] } = props;
+export const SizeControl = createControl( ( props: SizeControlProps ) => {
+	const { units = [ ...defaultUnits ], placeholder, startIcon, anchorRef } = props;
+	const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp( sizePropTypeUtil );
+	const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue ) );
+	const activeBreakpoint = useActiveBreakpoint();
+
+	const extendedOptions = useSizeExtendedOptions( props.extendedOptions || [], props.disableCustom ?? false );
+	const popupState = usePopupState( { variant: 'popover' } );
+
+	const [ state, setState ] = useSyncExternalState( {
+		external: internalState,
+		setExternal: ( newState: State | null ) => setSizeValue( extractValueFromState( newState ) ),
+		persistWhen: ( newState ) => {
+			if ( ! newState?.unit ) {
+				return false;
+			}
+
+			if ( isUnitExtendedOption( newState.unit ) ) {
+				return newState.unit === 'auto' ? true : !! newState.custom;
+			}
+
+			return !! newState?.numeric || newState?.numeric === 0;
+		},
+		fallback: ( newState ) => ( {
+			unit: newState?.unit ?? DEFAULT_UNIT,
+			numeric: newState?.numeric ?? DEFAULT_SIZE,
+			custom: newState?.custom ?? '',
+		} ),
+	} );
+
+	const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = DEFAULT_UNIT } = extractValueFromState( state ) || {};
+
+	const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
+		if ( newUnit === 'custom' ) {
+			popupState.open( anchorRef?.current );
+		}
 
-	const unit = ( stringValue ?? props.unit ) as Unit;
+		setState( ( prev ) => ( { ...prev, unit: newUnit } ) );
+	};
 
-	const handleUnitChange = ( newUnit: Unit ) => {
-		if ( extendedValues.includes( newUnit as ExtendedValue ) ) {
-			setStringValue( newUnit );
-		} else {
-			props.handleUnitChange( newUnit );
+	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const { value: size } = event.target;
+
+		if ( controlUnit === 'auto' ) {
+			setState( ( prev ) => ( { ...prev, unit: controlUnit } ) );
+
+			return;
 		}
+
+		setState( ( prev ) => ( {
+			...prev,
+			[ controlUnit === 'custom' ? 'custom' : 'numeric' ]: formatSize( size, controlUnit ),
+			unit: controlUnit,
+		} ) );
 	};
 
-	return (
-		<SizeInput
-			{ ...props }
-			units={ [ ...props.units, ...( extendedValues as unknown as Unit[] ) ] }
-			handleUnitChange={ handleUnitChange }
-			unit={ unit }
-		/>
-	);
-};
+	const onInputFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {
+		if ( isUnitExtendedOption( state.unit ) ) {
+			( event.target as HTMLElement )?.blur();
+		}
+	};
 
-type SizeInputProps = {
-	unit: Unit;
-	size: number;
-	placeholder?: string;
-	startIcon?: React.ReactNode;
-	units: Unit[];
-	extendedValues?: ExtendedValue[];
-	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
-	handleUnitChange: ( unit: Unit ) => void;
-	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
-	disabled?: boolean;
-};
+	const onInputClick = ( event: React.MouseEvent ) => {
+		if ( ( event.target as HTMLElement ).closest( 'input' ) && 'custom' === state.unit ) {
+			popupState.open( anchorRef?.current );
+		}
+	};
 
-const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
-
-const SizeInput = ( {
-	units,
-	handleUnitChange,
-	handleSizeChange,
-	placeholder,
-	startIcon,
-	onBlur,
-	size,
-	unit,
-	disabled,
-}: SizeInputProps ) => {
-	const unitInputBufferRef = useRef( '' );
-
-	const handleKeyUp = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
-		const { key } = event;
-
-		if ( ! /^[a-zA-Z%]$/.test( key ) ) {
+	useEffect( () => {
+		const newState = createStateFromSizeProp( sizeValue );
+		const currentUnit = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
+		const mergedStates = { ...state, [ currentUnit ]: newState[ currentUnit ] };
+
+		if ( mergedStates.unit !== 'auto' && areStatesEqual( state, mergedStates ) ) {
 			return;
 		}
 
-		event.preventDefault();
+		if ( state.unit === newState.unit ) {
+			setInternalState( mergedStates );
+
+			return;
+		}
 
-		const newChar = key.toLowerCase();
-		const updatedBuffer = ( unitInputBufferRef.current + newChar ).slice( -3 );
-		unitInputBufferRef.current = updatedBuffer;
+		setState( newState );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ sizeValue ] );
 
-		const matchedUnit =
-			units.find( ( u ) => u.includes( updatedBuffer ) ) ||
-			units.find( ( u ) => u.startsWith( newChar ) ) ||
-			units.find( ( u ) => u.includes( newChar ) );
+	useEffect( () => {
+		const newState = createStateFromSizeProp( sizeValue );
 
-		if ( matchedUnit ) {
-			handleUnitChange( matchedUnit );
+		if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
+			setState( newState );
 		}
-	};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ activeBreakpoint ] );
 
 	return (
-		<ControlActions>
-			<Box>
-				<TextFieldInnerSelection
-					disabled={ disabled }
-					endAdornment={
-						<SelectionEndAdornment
-							disabled={ disabled }
-							options={ units }
-							onClick={ handleUnitChange }
-							value={ unit ?? defaultUnit }
-						/>
-					}
-					placeholder={ placeholder }
-					startAdornment={
-						startIcon ? (
-							<InputAdornment position="start" disabled={ disabled }>
-								{ startIcon }
-							</InputAdornment>
-						) : undefined
-					}
-					type="number"
-					value={ Number.isNaN( size ) ? '' : size }
+		<>
+			<SizeInput
+				disabled={ disabled }
+				size={ controlSize }
+				unit={ controlUnit }
+				units={ [ ...units, ...( extendedOptions || [] ) ] }
+				placeholder={ placeholder }
+				startIcon={ startIcon }
+				handleSizeChange={ handleSizeChange }
+				handleUnitChange={ handleUnitChange }
+				onBlur={ restoreValue }
+				onFocus={ onInputFocus }
+				onClick={ onInputClick }
+				popupState={ popupState }
+			/>
+			{ anchorRef?.current && (
+				<TextFieldPopover
+					popupState={ popupState }
+					anchorRef={ anchorRef as MutableRefObject< HTMLElement > }
+					restoreValue={ restoreValue }
+					value={ controlSize as string }
 					onChange={ handleSizeChange }
-					onBlur={ onBlur }
-					onKeyDown={ ( event ) => {
-						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
-							event.preventDefault();
-						}
-					} }
-					onKeyUp={ handleKeyUp }
 				/>
-			</Box>
-		</ControlActions>
+			) }
+		</>
 	);
-};
+} );
+
+function formatSize< TSize extends string | number >( size: TSize, unit: Unit | ExtendedOption ): TSize {
+	if ( isUnitExtendedOption( unit ) ) {
+		return unit === 'auto' ? ( '' as TSize ) : ( String( size ?? '' ) as TSize );
+	}
+
+	return size || size === 0 ? ( Number( size ) as TSize ) : ( NaN as TSize );
+}
+
+function createStateFromSizeProp( sizeValue: SizeValue | null ): State {
+	const unit = sizeValue?.unit ?? DEFAULT_UNIT;
+	const size = sizeValue?.size ?? '';
+
+	return {
+		numeric:
+			! isUnitExtendedOption( unit ) && ! isNaN( Number( size ) ) && ( size || size === 0 )
+				? Number( size )
+				: DEFAULT_SIZE,
+		custom: unit === 'custom' ? String( size ) : '',
+		unit,
+	};
+}
+
+function extractValueFromState( state: State | null ): SizeValue | null {
+	if ( ! state ) {
+		return null;
+	}
+
+	if ( ! state?.unit ) {
+		return { size: DEFAULT_SIZE, unit: DEFAULT_UNIT };
+	}
+
+	const { unit } = state;
+
+	if ( unit === 'auto' ) {
+		return { size: '', unit };
+	}
+
+	return {
+		size: state[ unit === 'custom' ? 'custom' : 'numeric' ],
+		unit,
+	} as SizeValue;
+}
+
+function areStatesEqual( state1: State, state2: State ): boolean {
+	if ( state1.unit !== state2.unit || state1.custom !== state2.custom ) {
+		return false;
+	}
+
+	if ( isUnitExtendedOption( state1.unit ) ) {
+		return state1.custom === state2.custom;
+	}
+
+	return state1.numeric === state2.numeric || ( isNaN( state1.numeric ) && isNaN( state2.numeric ) );
+}

package/src/controls/stroke-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { forwardRef, type MutableRefObject, useRef } from 'react';
 import { strokePropTypeUtil } from '@elementor/editor-props';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,8 +8,9 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 import { ControlFormLabel } from '../components/control-form-label';
 import { SectionContent } from '../components/section-content';
 import { createControl } from '../create-control';
+import { type Unit } from '../utils/size-control';
 import { ColorControl } from './color-control';
-import { SizeControl, type Unit } from './size-control';
+import { SizeControl } from './size-control';
 
 type StrokeProps = {
 	bind: string;
@@ -20,12 +22,13 @@ const units: Unit[] = [ 'px', 'em', 'rem' ];
 
 export const StrokeControl = createControl( () => {
 	const propContext = useBoundProp( strokePropTypeUtil );
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
 
 	return (
 		<PropProvider { ...propContext }>
 			<SectionContent>
-				<Control bind="width" label={ __( 'Stroke width', 'elementor' ) }>
-					<SizeControl units={ units } />
+				<Control bind="width" label={ __( 'Stroke width', 'elementor' ) } ref={ rowRef }>
+					<SizeControl units={ units } anchorRef={ rowRef } />
 				</Control>
 				<Control bind="color" label={ __( 'Stroke color', 'elementor' ) }>
 					<ColorControl />
@@ -35,9 +38,9 @@ export const StrokeControl = createControl( () => {
 	);
 } );
 
-const Control = ( { bind, label, children }: StrokeProps ) => (
+const Control = forwardRef( ( { bind, label, children }: StrokeProps, ref ) => (
 	<PropKeyProvider bind={ bind }>
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ ref }>
 			<Grid item xs={ 6 }>
 				<ControlFormLabel>{ label }</ControlFormLabel>
 			</Grid>
@@ -46,4 +49,4 @@ const Control = ( { bind, label, children }: StrokeProps ) => (
 			</Grid>
 		</Grid>
 	</PropKeyProvider>
-);
+) );

package/src/hooks/use-size-extended-options.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { type ExtendedOption } from '@elementor/editor-controls';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+
+const EXPERIMENT_ID = 'e_v_3_30';
+
+export function useSizeExtendedOptions( options: ExtendedOption[], disableCustom: boolean ) {
+	return useMemo( () => {
+		const isVersion330Active = isExperimentActive( EXPERIMENT_ID );
+		const shouldDisableCustom = ! isVersion330Active || disableCustom;
+		const extendedOptions = [ ...options ];
+
+		if ( ! shouldDisableCustom && ! extendedOptions.includes( 'custom' ) ) {
+			extendedOptions.push( 'custom' );
+		} else if ( options.includes( 'custom' ) ) {
+			extendedOptions.splice( extendedOptions.indexOf( 'custom' ), 1 );
+		}
+
+		return extendedOptions;
+	}, [ options, disableCustom ] );
+}

package/src/index.ts

@@ -23,6 +23,7 @@ export { SwitchControl } from './controls/switch-control';
 // components
 export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
+export { FontFamilySelector } from './components/font-family-selector';
 
 // types
 export type { ControlComponent } from './create-control';
@@ -31,7 +32,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';
+export type { ExtendedOption } from './utils/size-control';
 export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';
 

package/src/utils/size-control.ts

@@ -0,0 +1,10 @@
+export const defaultUnits = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ] as const;
+const defaultExtendedOptions = [ 'auto', 'custom' ] as const;
+
+export type Unit = ( typeof defaultUnits )[ number ];
+
+export type ExtendedOption = ( typeof defaultExtendedOptions )[ number ];
+
+export function isUnitExtendedOption( unit: Unit | ExtendedOption ): unit is ExtendedOption {
+	return defaultExtendedOptions.includes( unit as ExtendedOption );
+}