@elementor/editor-controls 4.0.0-manual → 4.0.1

package/src/controls/size-control/sync/get-units.ts

@@ -0,0 +1,17 @@
+import { type SizeUnit } from '../types';
+
+export const getLengthUnits = () => {
+	return ( window.elementor?.config?.size_units?.length ?? [] ) as SizeUnit[];
+};
+
+export const getAngleUnits = () => {
+	return ( window.elementor?.config?.size_units?.angle ?? [] ) as SizeUnit[];
+};
+
+export const getTimeUnits = () => {
+	return ( window.elementor?.config?.size_units?.time ?? [] ) as SizeUnit[];
+};
+
+export const getExtendedUnits = () => {
+	return ( window.elementor?.config?.size_units?.extended_units ?? [] ) as SizeUnit[];
+};

package/src/controls/size-control/types.ts

@@ -0,0 +1,17 @@
+import type { CreateOptions } from '@elementor/editor-props';
+
+import { type SetValueMeta } from '../../bound-prop-context';
+
+type LengthUnit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh' | 'ch';
+type AngleUnit = 'deg' | 'rad' | 'grad' | 'turn';
+type TimeUnit = 's' | 'ms';
+
+type ExtendedSizeOption = 'auto' | 'custom';
+
+type Unit = LengthUnit | AngleUnit | TimeUnit;
+
+export type SizeUnit = Unit | ExtendedSizeOption;
+
+export type SizeVariant = 'length' | 'angle' | 'time';
+
+export type SetSizeValue< T > = ( value: T, options?: CreateOptions, meta?: SetValueMeta ) => void;

package/src/controls/size-control/ui/size-input.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import type { PropValue } from '@elementor/editor-props';
+import type { TextFieldProps } from '@elementor/ui';
+
+import { NumberInput } from '../../../components/number-input';
+
+type Props = {
+	type: 'number' | 'text';
+	value: PropValue;
+	placeholder?: string;
+	focused?: boolean;
+	disabled?: boolean;
+	id?: string;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
+	onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+	InputProps: TextFieldProps[ 'InputProps' ] & {
+		endAdornment: React.JSX.Element;
+	};
+	inputProps?: TextFieldProps[ 'inputProps' ];
+};
+
+export const SizeInput = forwardRef(
+	(
+		{
+			id,
+			type,
+			value,
+			onBlur,
+			onKeyUp,
+			focused,
+			disabled,
+			onChange,
+			onKeyDown,
+			InputProps,
+			inputProps,
+			placeholder,
+		}: Props,
+		ref
+	) => {
+		return (
+			<NumberInput
+				id={ id }
+				ref={ ref }
+				size="tiny"
+				fullWidth
+				type={ type }
+				value={ value }
+				placeholder={ placeholder }
+				onKeyUp={ onKeyUp }
+				focused={ focused }
+				disabled={ disabled }
+				onKeyDown={ onKeyDown }
+				onInput={ onChange }
+				onBlur={ onBlur }
+				InputProps={ InputProps }
+				inputProps={ inputProps }
+				sx={ getCursorStyle( InputProps?.readOnly ?? false ) }
+			/>
+		);
+	}
+);
+
+const getCursorStyle = ( readOnly: boolean ) => ( {
+	input: { cursor: readOnly ? 'default !important' : undefined },
+} );

package/src/controls/size-control/ui/text-field-popover.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { type RefObject, useEffect, useRef } from 'react';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { MathFunctionIcon } from '@elementor/icons';
+import { bindPopover, Popover, type PopupState, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	popupState: PopupState;
+	anchorRef: RefObject< HTMLDivElement | null >;
+	onClose?: () => void;
+	value: string;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+};
+
+const SIZE = 'tiny';
+
+export const TextFieldPopover = ( { popupState, anchorRef, value, onChange, onClose }: Props ) => {
+	const inputRef = useRef< HTMLInputElement >( null );
+
+	useEffect( () => {
+		if ( popupState.isOpen ) {
+			requestAnimationFrame( () => {
+				if ( inputRef.current ) {
+					inputRef.current.focus();
+				}
+			} );
+		}
+	}, [ popupState.isOpen ] );
+
+	const handleKeyDown = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		if ( event.key.toLowerCase() === 'enter' ) {
+			handleClose();
+		}
+	};
+
+	const handleClose = () => {
+		onClose?.();
+
+		popupState.close();
+	};
+
+	return (
+		<Popover
+			disablePortal
+			slotProps={ {
+				paper: {
+					sx: {
+						borderRadius: 2,
+						width: anchorRef.current?.offsetWidth + 'px',
+					},
+				},
+			} }
+			{ ...bindPopover( popupState ) }
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+			transformOrigin={ { vertical: 'top', horizontal: 'center' } }
+			onClose={ handleClose }
+		>
+			<PopoverHeader
+				title={ __( 'CSS function', 'elementor' ) }
+				onClose={ handleClose }
+				icon={ <MathFunctionIcon fontSize={ SIZE } /> }
+			/>
+			<TextField
+				value={ value }
+				onChange={ onChange }
+				onKeyDown={ handleKeyDown }
+				size="tiny"
+				type="text"
+				fullWidth
+				inputProps={ {
+					ref: inputRef,
+				} }
+				sx={ { pt: 0, pr: 1.5, pb: 1.5, pl: 1.5 } }
+			/>
+		</Popover>
+	);
+};

package/src/controls/size-control/ui/unit-selector.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { MenuListItem } from '@elementor/editor-ui';
+import { bindMenu, bindTrigger, Button, Menu, styled, usePopupState } from '@elementor/ui';
+
+export type UnitSelectorProps< T extends string > = {
+	options: T[];
+	value: T;
+	onSelect: ( value: T ) => void;
+	isActive: boolean;
+	menuItemsAttributes?: { [ key in T ]?: Record< string, unknown > };
+	optionLabelOverrides?: { [ key in T ]?: React.ReactNode };
+	disabled?: boolean;
+};
+
+const menuItemContentStyles = {
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'center',
+};
+
+export const UnitSelector = < T extends string >( {
+	value,
+	isActive,
+	onSelect,
+	options,
+	disabled,
+	menuItemsAttributes = {},
+	optionLabelOverrides = {},
+}: UnitSelectorProps< T > ) => {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: useId(),
+	} );
+
+	const handleMenuItemClick = ( option: T ) => {
+		onSelect( option );
+
+		popupState.close();
+	};
+
+	return (
+		<>
+			<StyledButton isActive={ isActive } disabled={ disabled } size="small" { ...bindTrigger( popupState ) }>
+				{ optionLabelOverrides[ value ] ?? value }
+			</StyledButton>
+
+			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
+				{ options.map( ( option ) => (
+					<MenuListItem
+						key={ option }
+						onClick={ () => handleMenuItemClick( option ) }
+						{ ...menuItemsAttributes?.[ option ] }
+						primaryTypographyProps={ {
+							variant: 'caption',
+							sx: {
+								...menuItemContentStyles,
+								lineHeight: '1',
+							},
+						} }
+						menuItemTextProps={ {
+							sx: menuItemContentStyles,
+						} }
+					>
+						{ optionLabelOverrides[ option ] ?? option.toUpperCase() }
+					</MenuListItem>
+				) ) }
+			</Menu>
+		</>
+	);
+};
+
+const StyledButton = styled( Button, {
+	shouldForwardProp: ( prop ) => prop !== 'isActive',
+} )( ( { isActive, theme } ) => ( {
+	color: isActive ? theme.palette.text.primary : theme.palette.text.tertiary,
+	font: 'inherit',
+	minWidth: 'initial',
+	textTransform: 'uppercase',
+} ) );

package/src/controls/size-control/unstable-size-control.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import type { RefObject } from 'react';
+import { type CreateOptions, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
+
+import { type SetValueMeta, useBoundProp } from '../../bound-prop-context';
+import ControlActions from '../../control-actions/control-actions';
+import { createControl } from '../../create-control';
+import { SizeComponent } from './size-component';
+import { type SizeVariant } from './types';
+import { resolveBoundPropValue } from './utils/resolve-bound-prop-value';
+import { getDefaultUnit } from './utils/settings/get-default-unit';
+import { getSizeUnits } from './utils/settings/get-size-units';
+import { shouldNullifyValue } from './utils/should-nullify-value';
+
+type Props = {
+	placeholder?: string;
+	variant?: SizeVariant;
+	anchorRef?: RefObject< HTMLDivElement | null >;
+	startIcon?: React.ReactNode;
+	ariaLabel?: string;
+	min?: number;
+	id?: string;
+};
+
+export const UnstableSizeControl = createControl(
+	( { variant = 'length', placeholder: propPlaceholder, anchorRef, startIcon, ariaLabel, min }: Props ) => {
+		const {
+			value,
+			setValue,
+			propType,
+			placeholder: boundPropPlaceholder,
+			restoreValue,
+		} = useBoundProp( sizePropTypeUtil );
+
+		const { sizeValue, isUnitHighlighted, placeholder } = resolveBoundPropValue(
+			value,
+			boundPropPlaceholder,
+			propPlaceholder
+		);
+
+		const units = getSizeUnits( propType, variant );
+		const defaultUnit = getDefaultUnit( propType );
+
+		const handleBlur = () => {
+			const isRequired = propType.settings.required;
+
+			if ( shouldNullifyValue( value ) && ! isRequired ) {
+				setValue( null );
+			}
+
+			if ( isRequired ) {
+				restoreValue();
+			}
+		};
+
+		const handleChange = ( newValue: SizePropValue[ 'value' ], options?: CreateOptions, meta?: SetValueMeta ) => {
+			setValue( newValue, options, {
+				...meta,
+				validation: () => {
+					if ( propType.settings.required ) {
+						return newValue.size !== '';
+					}
+
+					return meta?.validation ? meta.validation( newValue ) : true;
+				},
+			} );
+		};
+
+		return (
+			<SizeComponent
+				units={ units }
+				value={ sizeValue }
+				anchorRef={ anchorRef }
+				placeholder={ placeholder }
+				defaultUnit={ defaultUnit }
+				isUnitActive={ isUnitHighlighted }
+				onBlur={ handleBlur }
+				setValue={ handleChange }
+				SizeFieldWrapper={ ControlActions }
+				startIcon={ startIcon }
+				ariaLabel={ ariaLabel }
+				min={ min }
+			/>
+		);
+	}
+);

package/src/controls/size-control/utils/has-size-value.ts

@@ -0,0 +1,5 @@
+import { type SizePropValue } from '@elementor/editor-props';
+
+export const hasSizeValue = ( size: SizePropValue[ 'value' ][ 'size' ] ): boolean => {
+	return Boolean( size ) || size === 0;
+};

package/src/controls/size-control/utils/is-extended-unit.ts

@@ -0,0 +1,8 @@
+import { getExtendedUnits } from '../sync/get-units';
+import { type SizeUnit } from '../types';
+
+export const isExtendedUnit = ( unit: SizeUnit ) => {
+	const extendedUnits = getExtendedUnits();
+
+	return extendedUnits.includes( unit );
+};

package/src/controls/size-control/utils/resolve-bound-prop-value.ts

@@ -0,0 +1,72 @@
+import { sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
+
+import { hasSizeValue } from './has-size-value';
+import { EXTENDED_UNITS } from './resolve-size-value';
+
+type SizeValue = SizePropValue[ 'value' ] | null;
+
+export type ResolvedBoundProp = {
+	sizeValue: SizeValue;
+	isUnitHighlighted: boolean;
+	placeholder: string | undefined;
+};
+
+export const resolveBoundPropValue = < T extends SizeValue >(
+	value?: T | null,
+	boundPropPlaceholder?: T | null,
+	propPlaceholder?: string
+): ResolvedBoundProp => {
+	let sizeValue: T | null = null;
+
+	if ( validateSizeValue( value ) ) {
+		sizeValue = value;
+	} else if ( validateSizeValue( boundPropPlaceholder ) ) {
+		sizeValue = { size: '', unit: boundPropPlaceholder?.unit } as T;
+	}
+
+	return {
+		sizeValue,
+		isUnitHighlighted: shouldHighlightUnit( value ),
+		placeholder: resolvePlaceholder( propPlaceholder, boundPropPlaceholder ),
+	};
+};
+
+const validateSizeValue = ( value?: SizeValue | null ): value is SizeValue => {
+	if ( ! value ) {
+		return false;
+	}
+
+	const sizePropValue = sizePropTypeUtil.create( value );
+
+	return sizePropTypeUtil.isValid( sizePropValue );
+};
+
+const resolvePlaceholder = ( propPlaceholder?: string, boundPropPlaceholder?: SizeValue ): string | undefined => {
+	if ( propPlaceholder ) {
+		return propPlaceholder;
+	}
+
+	const size = boundPropPlaceholder?.size;
+
+	if ( size === undefined ) {
+		return undefined;
+	}
+
+	if ( typeof size === 'number' ) {
+		return size.toString();
+	}
+
+	return size;
+};
+
+const shouldHighlightUnit = ( value?: SizePropValue[ 'value' ] | null ) => {
+	if ( ! value ) {
+		return false;
+	}
+
+	if ( value.unit === EXTENDED_UNITS.auto ) {
+		return true;
+	}
+
+	return hasSizeValue( value.size );
+};

package/src/controls/size-control/utils/resolve-size-value.ts

@@ -0,0 +1,85 @@
+import { type SizePropValue } from '@elementor/editor-props';
+
+import { type SizeUnit } from '../types';
+import { isExtendedUnit } from './is-extended-unit';
+
+type SizeValue = SizePropValue[ 'value' ];
+
+type ResolverContext< U > = {
+	units: U[];
+	defaultUnit?: U;
+};
+
+const DEFAULT_SIZE = '';
+
+export const EXTENDED_UNITS = {
+	auto: 'auto',
+	custom: 'custom',
+} as const;
+
+export const resolveSizeValue = < TValue extends SizeValue | null, TUnit extends SizeValue[ 'unit' ] >(
+	value: TValue,
+	context: ResolverContext< TUnit >
+) => {
+	if ( ! value ) {
+		return value;
+	}
+
+	const { units, defaultUnit } = context;
+
+	const unit = resolveFallbackUnit( value.unit as TUnit, units, defaultUnit );
+
+	if ( unit === EXTENDED_UNITS.auto ) {
+		return { size: DEFAULT_SIZE, unit };
+	}
+
+	if ( unit === EXTENDED_UNITS.custom ) {
+		return { size: String( value.size ?? DEFAULT_SIZE ), unit };
+	}
+
+	return {
+		size: sanitizeSize( value.size ) ?? DEFAULT_SIZE,
+		unit,
+	};
+};
+
+export const resolveSizeOnUnitChange = (
+	size: SizeValue[ 'size' ],
+	unit: SizeValue[ 'unit' ]
+): SizeValue[ 'size' ] => {
+	return isExtendedUnit( unit ) ? DEFAULT_SIZE : size;
+};
+
+export const createDefaultSizeValue = < T extends SizeValue >( units: SizeUnit[], defaultUnit?: SizeUnit ): T => {
+	let [ unit ] = units;
+
+	if ( defaultUnit !== undefined ) {
+		unit = resolveFallbackUnit( defaultUnit, units );
+	}
+
+	return { size: DEFAULT_SIZE, unit } as T;
+};
+
+const resolveFallbackUnit = < TUnit extends SizeUnit >(
+	unit: TUnit,
+	units: readonly TUnit[],
+	defaultUnit?: TUnit
+): TUnit => {
+	if ( units.includes( unit ) ) {
+		return unit;
+	}
+
+	if ( defaultUnit && units.includes( defaultUnit ) ) {
+		return defaultUnit;
+	}
+
+	return units[ 0 ] ?? '';
+};
+
+const sanitizeSize = ( size: SizeValue[ 'size' ] ): SizeValue[ 'size' ] => {
+	if ( typeof size === 'number' && isNaN( size ) ) {
+		return DEFAULT_SIZE;
+	}
+
+	return size;
+};

package/src/controls/size-control/utils/settings/get-default-unit.ts

@@ -0,0 +1,7 @@
+import type { PropType } from '@elementor/editor-props';
+
+import { getPropTypeSettings } from './get-prop-type-settings';
+
+export const getDefaultUnit = ( propType: PropType ) => {
+	return getPropTypeSettings( propType )?.default_unit;
+};

package/src/controls/size-control/utils/settings/get-prop-type-settings.ts

@@ -0,0 +1,12 @@
+import { type PropType } from '@elementor/editor-props';
+
+import { type SizeUnit } from '../../types';
+
+type Settings = {
+	units?: SizeUnit[];
+	default_unit?: SizeUnit;
+};
+
+export const getPropTypeSettings = ( propType: PropType ) => {
+	return propType.settings as Settings;
+};

package/src/controls/size-control/utils/settings/get-size-units.ts

@@ -0,0 +1,23 @@
+import { type PropType } from '@elementor/editor-props';
+
+import { getAngleUnits, getLengthUnits, getTimeUnits } from '../../sync/get-units';
+import { type SizeUnit, type SizeVariant } from '../../types';
+import { getPropTypeSettings } from './get-prop-type-settings';
+
+const getVariantUnits = ( variant: SizeVariant ): SizeUnit[] => {
+	const map: Record< SizeVariant, () => SizeUnit[] > = {
+		length: getLengthUnits,
+		angle: getAngleUnits,
+		time: getTimeUnits,
+	};
+
+	return map[ variant ]();
+};
+
+const getSettingsUnits = ( propType: PropType ) => {
+	return getPropTypeSettings( propType )?.units;
+};
+
+export const getSizeUnits = ( propType: PropType, variant: SizeVariant ): SizeUnit[] => {
+	return getSettingsUnits( propType ) ?? getVariantUnits( variant );
+};

package/src/controls/size-control/utils/should-nullify-value.ts

@@ -0,0 +1,15 @@
+import { type SizePropValue } from '@elementor/editor-props';
+
+import { EXTENDED_UNITS } from './resolve-size-value';
+
+type SizeValue = SizePropValue[ 'value' ] | null;
+
+const conditions: Array< ( value: SizeValue ) => boolean > = [
+	( value ) => value?.size === null || value?.size === undefined || value?.size === '',
+	( value ) => value?.unit !== EXTENDED_UNITS.auto,
+	( value ) => value?.unit !== EXTENDED_UNITS.custom,
+];
+
+export const shouldNullifyValue = ( value: SizeValue ): boolean => {
+	return conditions.every( ( condition ) => condition( value ) );
+};

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
-import { imageSrcPropTypeUtil } from '@elementor/editor-props';
+import { svgSrcPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled, ThemeProvider } from '@elementor/ui';
 import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
@@ -43,8 +43,9 @@ const MODE_BROWSE: OpenOptions = { mode: 'browse' };
 const MODE_UPLOAD: OpenOptions = { mode: 'upload' };
 
 export const SvgMediaControl = createControl( () => {
-	const { value, setValue } = useBoundProp( imageSrcPropTypeUtil );
-	const { id, url } = value ?? {};
+	const { value, setValue } = useBoundProp( svgSrcPropTypeUtil );
+	const id = value?.id;
+	const url = value?.url;
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
 	const src = attachment?.url ?? url?.value ?? null;
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
@@ -61,7 +62,7 @@ export const SvgMediaControl = createControl( () => {
 					$$type: 'image-attachment-id',
 					value: selectedAttachment.id,
 				},
-				url: null,
+				url: urlPropTypeUtil.create( selectedAttachment.url ),
 			} );
 		},
 	} );

package/src/controls/transition-control/data.ts

@@ -46,9 +46,9 @@ const getIsSiteRtl = () => {
 };
 
 // TODO: Remove this after version 4.01 is released
-const shouldExtendTransitionProperties = (): boolean => {
+const shouldShowAllTransitionProperties = (): boolean => {
 	if ( ! hasProInstalled() ) {
-		return false;
+		return true;
 	}
 
 	const proVersion = window.elementorPro?.config?.version;
@@ -191,7 +191,7 @@ const createTransitionPropertiesList = (): TransitionCategory[] => {
 		},
 	];
 
-	return shouldExtendTransitionProperties() ? baseProperties : [ baseProperties[ 0 ] ];
+	return shouldShowAllTransitionProperties() ? baseProperties : [ baseProperties[ 0 ] ];
 };
 
 export const transitionProperties: TransitionCategory[] = createTransitionPropertiesList();

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

@@ -9,6 +9,7 @@ import {
 import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { InfoCircleFilledIcon } from '@elementor/icons';
 import { Alert, AlertTitle, Box, Typography } from '@elementor/ui';
+import { hasProInstalled } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../../bound-prop-context';
@@ -181,6 +182,7 @@ export const TransitionRepeaterControl = createControl(
 	} ) => {
 		const currentStyleIsNormal = currentStyleState === null;
 		const [ recentlyUsedList, setRecentlyUsedList ] = useState< string[] >( [] );
+		const proInstalled = hasProInstalled();
 
 		const { value, setValue } = useBoundProp( childArrayPropTypeUtil );
 		const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo(
@@ -191,10 +193,14 @@ export const TransitionRepeaterControl = createControl(
 		const allowedTransitionSet = useMemo( () => {
 			const set = new Set< string >();
 			transitionProperties.forEach( ( category ) => {
-				category.properties.forEach( ( prop ) => set.add( prop.value ) );
+				category.properties.forEach( ( prop ) => {
+					if ( ! prop.isDisabled || proInstalled ) {
+						set.add( prop.value );
+					}
+				} );
 			} );
 			return set;
-		}, [] );
+		}, [ proInstalled ] );
 
 		useEffect( () => {
 			if ( ! value || value.length === 0 ) {