@elementor/editor-controls 4.0.0-manual → 4.0.0

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/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 ) {

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

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { useBoundProp } from '../../bound-prop-context';
 import { ItemSelector } from '../../components/item-selector';
 import ControlActions from '../../control-actions/control-actions';
+import { trackUpgradePromotionClick } from '../../utils/tracking';
 import { transitionProperties, transitionsItemsList } from './data';
 
 const toTransitionSelectorValue = ( label: string ) => {
@@ -170,6 +171,12 @@ export const TransitionSelector = ( {
 									'elementor'
 								) }
 								upgradeUrl={ PRO_UPGRADE_URL }
+								onCtaClick={ () =>
+									trackUpgradePromotionClick( {
+										target_name: 'transition_property',
+										location_l2: 'style',
+									} )
+								}
 							/>
 						) : null
 					}

package/src/hooks/use-font-families.ts

@@ -1,52 +1,49 @@
 import { useMemo } from 'react';
-import { getElementorConfig, type SupportedFonts } from '@elementor/editor-v1-adapters';
-import { __ } from '@wordpress/i18n';
+import { getElementorConfig } from '@elementor/editor-v1-adapters';
 
 import { type FontCategory } from '../controls/font-family-control/font-family-control';
 
-const supportedCategories: Record< SupportedFonts, string > = {
-	system: __( 'System', 'elementor' ),
-	custom: __( 'Custom Fonts', 'elementor' ),
-	googlefonts: __( 'Google Fonts', 'elementor' ),
+type FontControlConfig = {
+	groups?: Record< string, string >;
+	options?: Record< string, string >;
 };
 
-const getFontFamilies = () => {
+const getFontControlConfig = (): FontControlConfig => {
 	const { controls } = getElementorConfig();
 
-	const options = controls?.font?.options;
-
-	if ( ! options ) {
-		return null;
-	}
-
-	return options;
+	return controls?.font ?? {};
 };
 
 export const useFontFamilies = () => {
-	const fontFamilies = getFontFamilies();
+	const { groups, options } = getFontControlConfig();
 
 	return useMemo( () => {
-		const categoriesOrder: SupportedFonts[] = [ 'system', 'custom', 'googlefonts' ];
+		if ( ! groups || ! options ) {
+			return [];
+		}
+
+		const groupKeys = Object.keys( groups );
+		const groupIndexMap = new Map( groupKeys.map( ( key, index ) => [ key, index ] ) );
 
-		return Object.entries( fontFamilies || {} )
+		return Object.entries( options )
 			.reduce< FontCategory[] >( ( acc, [ font, category ] ) => {
-				if ( ! supportedCategories[ category as SupportedFonts ] ) {
+				const groupIndex = groupIndexMap.get( category );
+
+				if ( groupIndex === undefined ) {
 					return acc;
 				}
 
-				const categoryIndex = categoriesOrder.indexOf( category );
-
-				if ( ! acc[ categoryIndex ] ) {
-					acc[ categoryIndex ] = {
-						label: supportedCategories[ category as SupportedFonts ],
+				if ( ! acc[ groupIndex ] ) {
+					acc[ groupIndex ] = {
+						label: groups[ category ],
 						fonts: [],
 					};
 				}
 
-				acc[ categoryIndex ].fonts.push( font );
+				acc[ groupIndex ].fonts.push( font );
 
 				return acc;
 			}, [] )
 			.filter( Boolean );
-	}, [ fontFamilies ] );
+	}, [ groups, options ] );
 };

package/src/index.ts

@@ -38,6 +38,7 @@ export { transitionProperties, transitionsItemsList } from './controls/transitio
 export { DateTimeControl } from './controls/date-time-control';
 export { InlineEditingControl } from './controls/inline-editing-control';
 export { EmailFormActionControl } from './controls/email-form-action-control';
+export { UnstableSizeControl } from './controls/size-control/unstable-size-control';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
@@ -58,6 +59,7 @@ export { InlineEditor } from './components/inline-editor';
 export { InlineEditorToolbar } from './components/inline-editor-toolbar';
 export { UnstableSizeField } from './components/size/unstable-size-field';
 export { NumberInput } from './components/number-input';
+export { SizeComponent } from './controls/size-control/size-component';
 
 // types
 export type { ControlComponent } from './create-control';
@@ -80,6 +82,8 @@ export type { FontCategory } from './controls/font-family-control/font-family-co
 export type { InlineEditorToolbarProps } from './components/inline-editor-toolbar';
 export type { V4PromotionData, V4PromotionKey } from './components/promotions/types';
 export type { PromotionTriggerRef } from './components/promotions/promotion-trigger';
+export { trackViewPromotion, trackUpgradePromotionClick } from './utils/tracking';
+export type { PromotionTrackingData } from './utils/tracking';
 
 // providers
 export {