@elementor/editor-controls 4.0.0-682 → 4.0.0-beta5

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

@@ -51,10 +51,10 @@ export const resolveSizeOnUnitChange = (
 };
 
 export const createDefaultSizeValue = < T extends SizeValue >( units: SizeUnit[], defaultUnit?: SizeUnit ): T => {
-	let unit = units[ 0 ];
+	let [ unit ] = units;
 
 	if ( defaultUnit !== undefined ) {
-		unit = resolveFallbackUnit( defaultUnit, units ) as SizeUnit;
+		unit = resolveFallbackUnit( defaultUnit, units );
 	}
 
 	return { size: DEFAULT_SIZE, unit } as T;
@@ -64,7 +64,7 @@ const resolveFallbackUnit = < TUnit extends SizeUnit >(
 	unit: TUnit,
 	units: readonly TUnit[],
 	defaultUnit?: TUnit
-): TUnit | string => {
+): TUnit => {
 	if ( units.includes( unit ) ) {
 		return unit;
 	}
@@ -80,5 +80,6 @@ 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 ) {

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';

package/src/controls/size-control/utils/is-numeric-value.ts

@@ -1,11 +0,0 @@
-export const isNumericValue = ( value: unknown ): boolean => {
-	if ( typeof value === 'number' ) {
-		return ! isNaN( value );
-	}
-
-	if ( typeof value === 'string' ) {
-		return value.trim() !== '' && ! isNaN( Number( value ) );
-	}
-
-	return false;
-};