@elementor/editor-controls 4.1.0-772 → 4.1.0-774

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.1.0-772",
+  "version": "4.1.0-774",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.1.0-772",
-    "@elementor/editor-elements": "4.1.0-772",
-    "@elementor/editor-props": "4.1.0-772",
-    "@elementor/editor-responsive": "4.1.0-772",
-    "@elementor/editor-ui": "4.1.0-772",
-    "@elementor/editor-v1-adapters": "4.1.0-772",
-    "@elementor/env": "4.1.0-772",
-    "@elementor/events": "4.1.0-772",
-    "@elementor/http-client": "4.1.0-772",
+    "@elementor/editor-current-user": "4.1.0-774",
+    "@elementor/editor-elements": "4.1.0-774",
+    "@elementor/editor-props": "4.1.0-774",
+    "@elementor/editor-responsive": "4.1.0-774",
+    "@elementor/editor-ui": "4.1.0-774",
+    "@elementor/editor-v1-adapters": "4.1.0-774",
+    "@elementor/env": "4.1.0-774",
+    "@elementor/events": "4.1.0-774",
+    "@elementor/http-client": "4.1.0-774",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-772",
-    "@elementor/query": "4.1.0-772",
-    "@elementor/session": "4.1.0-772",
+    "@elementor/locations": "4.1.0-774",
+    "@elementor/query": "4.1.0-774",
+    "@elementor/session": "4.1.0-774",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-772",
-    "@elementor/wp-media": "4.1.0-772",
+    "@elementor/utils": "4.1.0-774",
+    "@elementor/wp-media": "4.1.0-774",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/linked-dimensions-control.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { type RefObject, useLayoutEffect, useRef, useState } from 'react';
-import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
+import {
+	dimensionsPropTypeUtil,
+	type DimensionsPropValue,
+	type PropKey,
+	type PropValue,
+	sizePropTypeUtil,
+	type SizePropValue,
+} from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, Tooltip } from '@elementor/ui';
@@ -11,7 +18,7 @@ import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { StyledToggleButton } from '../components/control-toggle-button-group';
 import { type ExtendedOption } from '../utils/size-control';
-import { SizeControl } from './size-control';
+import { UnstableSizeControl } from './size-control/unstable-size-control';
 
 type Props = {
 	label: string;
@@ -20,7 +27,7 @@ type Props = {
 	min?: number;
 };
 
-export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOptions, min }: Props ) => {
+export const LinkedDimensionsControl = ( { label, isSiteRtl = false, min }: Props ) => {
 	const gridRowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
 
 	const { disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
@@ -51,10 +58,12 @@ export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOpt
 
 	const activeBreakpoint = useActiveBreakpoint();
 
+	const isCurrentlyDimensions = dimensionsPropTypeUtil.isValid( masterValue ?? masterPlaceholder );
+
 	useLayoutEffect( () => {
 		setIsLinked( inferIsLinked );
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ activeBreakpoint ] );
+	}, [ activeBreakpoint, isCurrentlyDimensions ] );
 
 	const onLinkToggle = () => {
 		setIsLinked( ( prev ) => ! prev );
@@ -79,12 +88,7 @@ export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOpt
 			return;
 		}
 
-		const sizeValue =
-			dimensionsValue?.[ 'block-start' ] ??
-			dimensionsValue?.[ 'inline-end' ] ??
-			dimensionsValue?.[ 'block-end' ] ??
-			dimensionsValue?.[ 'inline-start' ] ??
-			null;
+		const sizeValue = getFirstDefined( dimensionsValue ) ?? null;
 
 		if ( ! sizeValue ) {
 			setMasterValue( null );
@@ -119,12 +123,27 @@ export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOpt
 		propType,
 		value: dimensionsValue,
 		placeholder: effectiveDimensionsPlaceholder,
-		setValue: setDimensionsValue,
+		setValue: ( dimensions: PropValue ) => {
+			const entries = Object.entries( dimensions as DimensionsPropValue );
+			const filtered = entries.filter( ( [ , value ] ) => Boolean( value ) );
+
+			setDimensionsValue( filtered.length === 0 ? null : Object.fromEntries( filtered ) );
+		},
 		isDisabled: () => dimensionsDisabled,
 	};
 
 	const hasPlaceholders = ! masterValue && ( dimensionsPlaceholder || masterPlaceholder );
 
+	const getEffectivePlaceholder = ( bind: string ) => {
+		if ( isLinked ) {
+			const linkedPlaceholder = getFirstDefined( dimensionsPlaceholder );
+
+			return sizePropTypeUtil.extract( linkedPlaceholder );
+		}
+
+		return sizePropTypeUtil.extract( dimensionsPlaceholder?.[ bind as keyof DimensionsPropValue[ 'value' ] ] );
+	};
+
 	return (
 		<PropProvider { ...propProviderProps }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
@@ -158,7 +177,7 @@ export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOpt
 									ariaLabel={ props.ariaLabel }
 									startIcon={ icon }
 									isLinked={ isLinked }
-									extendedOptions={ extendedOptions }
+									placeholder={ getEffectivePlaceholder( props.bind ) ?? undefined }
 									anchorRef={ gridRowRefs[ index ] }
 									min={ min }
 								/>
@@ -176,7 +195,7 @@ const Control = ( {
 	ariaLabel,
 	startIcon,
 	isLinked,
-	extendedOptions,
+	placeholder,
 	anchorRef,
 	min,
 }: {
@@ -184,17 +203,17 @@ const Control = ( {
 	ariaLabel: string;
 	startIcon: React.ReactNode;
 	isLinked: boolean;
-	extendedOptions?: ExtendedOption[];
+	placeholder?: SizePropValue[ 'value' ];
 	anchorRef: RefObject< HTMLDivElement >;
 	min?: number;
 } ) => {
 	if ( isLinked ) {
 		return (
-			<SizeControl
+			<UnstableSizeControl
 				ariaLabel={ ariaLabel }
 				startIcon={ startIcon }
-				extendedOptions={ extendedOptions }
 				anchorRef={ anchorRef }
+				placeholder={ placeholder }
 				min={ min }
 			/>
 		);
@@ -202,12 +221,12 @@ const Control = ( {
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl
+			<UnstableSizeControl
 				ariaLabel={ ariaLabel }
 				startIcon={ startIcon }
-				extendedOptions={ extendedOptions }
 				anchorRef={ anchorRef }
 				min={ min }
+				placeholder={ placeholder }
 			/>
 		</PropKeyProvider>
 	);
@@ -221,6 +240,15 @@ const Label = ( { label, bind }: { label: string; bind: PropKey } ) => {
 	);
 };
 
+const getFirstDefined = ( dimensions: DimensionsPropValue[ 'value' ] | null | undefined ) => {
+	return (
+		dimensions?.[ 'block-start' ] ??
+		dimensions?.[ 'inline-end' ] ??
+		dimensions?.[ 'block-end' ] ??
+		dimensions?.[ 'inline-start' ]
+	);
+};
+
 function getCssDimensionProps( label: string, isSiteRtl: boolean ) {
 	return [
 		[

package/src/controls/size-control/hooks/use-size-value.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { type SizePropValue } from '@elementor/editor-props';
 
 import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
-import { type SetSizeValue, type SizeUnit } from '../types';
+import { type SetSizeValue } from '../types';
 import { isExtendedUnit } from '../utils/is-extended-unit';
 import { createDefaultSizeValue, resolveSizeOnUnitChange, resolveSizeValue } from '../utils/resolve-size-value';
 import { useUnitSync } from './use-unit-sync';
@@ -16,7 +16,7 @@ type UseSizeValueProps< T, U > = {
 	defaultUnit?: U;
 };
 
-export const useSizeValue = < T extends SizeValue, U extends SizeUnit >( {
+export const useSizeValue = < T extends SizeValue, U extends SizeValue[ 'unit' ] >( {
 	value,
 	setValue,
 	units,
@@ -40,7 +40,7 @@ export const useSizeValue = < T extends SizeValue, U extends SizeUnit >( {
 	} );
 
 	const [ unit, setUnit ] = useUnitSync( {
-		unit: sizeValue?.unit,
+		sizeValue,
 		setUnit: ( newUnit ) => {
 			setSizeValue( {
 				unit: newUnit,
@@ -48,7 +48,7 @@ export const useSizeValue = < T extends SizeValue, U extends SizeUnit >( {
 			} as T );
 		},
 		persistWhen: () => {
-			return Boolean( sizeValue.size ) || sizeValue.size !== '';
+			return Boolean( sizeValue.size ) || sizeValue.size !== '' || isExtendedUnit( sizeValue.unit );
 		},
 	} );
 

package/src/controls/size-control/hooks/use-unit-sync.ts

@@ -1,30 +1,27 @@
 import { useEffect, useState } from 'react';
+import { type SizePropValue } from '@elementor/editor-props';
 
-import { EXTENDED_UNITS } from '../utils/resolve-size-value';
+import { isExtendedUnit } from '../utils/is-extended-unit';
 
-type UseUnitSyncProps< U > = {
-	unit: U;
-	setUnit: ( unit: U ) => void;
+type SizeValue = SizePropValue[ 'value' ];
+
+type UseUnitSyncProps = {
+	sizeValue: SizeValue;
+	setUnit: ( unit: SizeValue[ 'unit' ] ) => void;
 	persistWhen: () => boolean;
 };
 
-type ExtendedUnit = ( typeof EXTENDED_UNITS )[ keyof typeof EXTENDED_UNITS ];
-
-export const useUnitSync = < U >( { unit, setUnit, persistWhen }: UseUnitSyncProps< U > ) => {
-	const [ state, setState ] = useState( unit );
+export const useUnitSync = ( { sizeValue, setUnit, persistWhen }: UseUnitSyncProps ) => {
+	const [ state, setState ] = useState( sizeValue.unit );
 
 	useEffect( () => {
-		if ( unit !== state ) {
-			setState( unit );
+		if ( sizeValue.unit !== state ) {
+			setState( sizeValue.unit );
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ unit ] );
-
-	const isExtendedUnit = ( value: U ): value is ExtendedUnit & U => {
-		return Object.values( EXTENDED_UNITS ).includes( value as ExtendedUnit );
-	};
+	}, [ sizeValue.unit, sizeValue.size ] );
 
-	const setInternalValue = ( newUnit: U ) => {
+	const setInternalValue = ( newUnit: SizeValue[ 'unit' ] ) => {
 		setState( newUnit );
 
 		if ( isExtendedUnit( newUnit ) || persistWhen() ) {

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

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

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

@@ -6,10 +6,10 @@ 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 ExtendedSizeOption = 'auto' | 'custom';
+
 export type SizeUnit = Unit | ExtendedSizeOption;
 
 export type SizeVariant = 'length' | 'angle' | 'time';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { RefObject } from 'react';
+import { type RefObject, useRef } from 'react';
 import { type CreateOptions, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 
 import { type SetValueMeta, useBoundProp } from '../../bound-prop-context';
@@ -7,6 +7,7 @@ import ControlActions from '../../control-actions/control-actions';
 import { createControl } from '../../create-control';
 import { SizeComponent } from './size-component';
 import { type SizeVariant } from './types';
+import { isExtendedUnit } from './utils/is-extended-unit';
 import { resolveBoundPropValue } from './utils/resolve-bound-prop-value';
 import { getDefaultUnit } from './utils/settings/get-default-unit';
 import { getSizeUnits } from './utils/settings/get-size-units';
@@ -31,8 +32,13 @@ export const UnstableSizeControl = createControl(
 			placeholder: boundPropPlaceholder,
 			restoreValue,
 		} = useBoundProp( sizePropTypeUtil );
+		const lastNonAutoValue = useRef< SizePropValue[ 'value' ] | null >( null );
 
-		const { sizeValue, placeholder } = resolveBoundPropValue( value, boundPropPlaceholder, propPlaceholder );
+		const { sizeValue, placeholder } = resolveBoundPropValue(
+			value ?? lastNonAutoValue.current,
+			boundPropPlaceholder,
+			propPlaceholder
+		);
 
 		const units = getSizeUnits( propType, variant );
 		const defaultUnit = getDefaultUnit( propType );
@@ -50,6 +56,13 @@ export const UnstableSizeControl = createControl(
 		};
 
 		const handleChange = ( newValue: SizePropValue[ 'value' ], options?: CreateOptions, meta?: SetValueMeta ) => {
+			if ( isTransitioningFromExtendedUnit( newValue, value ) ) {
+				lastNonAutoValue.current = newValue;
+
+				setValue( null );
+				return;
+			}
+
 			setValue( newValue, options, {
 				...meta,
 				validation: () => {
@@ -79,3 +92,10 @@ export const UnstableSizeControl = createControl(
 		);
 	}
 );
+
+const isTransitioningFromExtendedUnit = (
+	nextValue: SizePropValue[ 'value' ],
+	previousValue: SizePropValue[ 'value' ]
+): boolean => {
+	return ! isExtendedUnit( nextValue.unit ) && isExtendedUnit( previousValue?.unit ) && nextValue.size === '';
+};

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

@@ -1,8 +1,8 @@
-import { getExtendedUnits } from '../sync/get-units';
-import { type SizeUnit } from '../types';
+import { type SizePropValue } from '@elementor/editor-props';
 
-export const isExtendedUnit = ( unit: SizeUnit ) => {
-	const extendedUnits = getExtendedUnits();
+import { getExtendedUnits } from '../sync/get-units';
+import { type ExtendedSizeOption } from '../types';
 
-	return extendedUnits.includes( unit );
+export const isExtendedUnit = ( unit: SizePropValue[ 'value' ][ 'unit' ] ): unit is ExtendedSizeOption => {
+	return getExtendedUnits().includes( unit as ExtendedSizeOption );
 };

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

@@ -3,7 +3,7 @@ import { type PropType } from '@elementor/editor-props';
 import { type SizeUnit } from '../../types';
 
 type Settings = {
-	units?: SizeUnit[];
+	available_units?: SizeUnit[];
 	default_unit?: SizeUnit;
 };
 

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

@@ -15,7 +15,7 @@ const getVariantUnits = ( variant: SizeVariant ): SizeUnit[] => {
 };
 
 const getSettingsUnits = ( propType: PropType ) => {
-	return getPropTypeSettings( propType )?.units;
+	return getPropTypeSettings( propType )?.available_units;
 };
 
 export const getSizeUnits = ( propType: PropType, variant: SizeVariant ): SizeUnit[] => {

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

@@ -5,6 +5,7 @@ import { EXTENDED_UNITS } from './resolve-size-value';
 type SizeValue = SizePropValue[ 'value' ] | null;
 
 const conditions: Array< ( value: SizeValue ) => boolean > = [
+	( value ) => Boolean( value ),
 	( value ) => value?.size === null || value?.size === undefined || value?.size === '',
 	( value ) => value?.unit !== EXTENDED_UNITS.auto,
 	( value ) => value?.unit !== EXTENDED_UNITS.custom,