@elementor/editor-controls 4.1.0-758 → 4.1.0-760

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-758",
+  "version": "4.1.0-760",
   "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-758",
-    "@elementor/editor-elements": "4.1.0-758",
-    "@elementor/editor-props": "4.1.0-758",
-    "@elementor/editor-responsive": "4.1.0-758",
-    "@elementor/editor-ui": "4.1.0-758",
-    "@elementor/editor-v1-adapters": "4.1.0-758",
-    "@elementor/env": "4.1.0-758",
-    "@elementor/http-client": "4.1.0-758",
+    "@elementor/editor-current-user": "4.1.0-760",
+    "@elementor/editor-elements": "4.1.0-760",
+    "@elementor/editor-props": "4.1.0-760",
+    "@elementor/editor-responsive": "4.1.0-760",
+    "@elementor/editor-ui": "4.1.0-760",
+    "@elementor/editor-v1-adapters": "4.1.0-760",
+    "@elementor/env": "4.1.0-760",
+    "@elementor/http-client": "4.1.0-760",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-758",
-    "@elementor/events": "4.1.0-758",
-    "@elementor/query": "4.1.0-758",
-    "@elementor/session": "4.1.0-758",
+    "@elementor/locations": "4.1.0-760",
+    "@elementor/events": "4.1.0-760",
+    "@elementor/query": "4.1.0-760",
+    "@elementor/session": "4.1.0-760",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-758",
-    "@elementor/wp-media": "4.1.0-758",
+    "@elementor/utils": "4.1.0-760",
+    "@elementor/wp-media": "4.1.0-760",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/repeater/repeater.tsx

@@ -6,6 +6,7 @@ import {
 	bindPopover,
 	bindTrigger,
 	Box,
+	ClickAwayListener,
 	IconButton,
 	Infotip,
 	Tooltip,
@@ -340,10 +341,14 @@ const RepeaterItem = < T, >( {
 	actions,
 	value,
 }: RepeaterItemProps< T > ) => {
-	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, () => {
-		onOpen();
-		onPopoverOpen?.( value );
-	} );
+	const { popoverState, popoverProps, ref, setRef } = usePopover(
+		openOnMount,
+		() => {
+			onOpen();
+			onPopoverOpen?.( value );
+		},
+		onPopoverClose
+	);
 	const triggerProps = bindTrigger( popoverState );
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
@@ -392,22 +397,20 @@ const RepeaterItem = < T, >( {
 					</>
 				}
 			/>
-			<RepeaterPopover
-				width={ ref?.getBoundingClientRect().width }
-				{ ...popoverProps }
-				onClose={ () => {
-					popoverProps.onClose?.();
-					onPopoverClose?.();
-				} }
-				anchorEl={ ref }
-			>
-				<Box>{ children( { anchorEl: ref } ) }</Box>
+			<RepeaterPopover width={ ref?.getBoundingClientRect().width } { ...popoverProps } anchorEl={ ref }>
+				<ClickAwayListener
+					mouseEvent="onMouseDown"
+					touchEvent="onTouchStart"
+					onClickAway={ popoverProps.onClose }
+				>
+					<Box>{ children( { anchorEl: ref } ) }</Box>
+				</ClickAwayListener>
 			</RepeaterPopover>
 		</>
 	);
 };
 
-const usePopover = ( openOnMount: boolean, onOpen: () => void ) => {
+const usePopover = ( openOnMount: boolean, onOpen: () => void, onPopoverClose?: () => void ) => {
 	const [ ref, setRef ] = useState< HTMLElement | null >( null );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
@@ -422,10 +425,15 @@ const usePopover = ( openOnMount: boolean, onOpen: () => void ) => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ ref ] );
 
+	const onClose = () => {
+		popoverProps.onClose?.();
+		onPopoverClose?.();
+	};
+
 	return {
 		popoverState,
 		ref,
 		setRef,
-		popoverProps,
+		popoverProps: { ...popoverProps, onClose },
 	};
 };

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

@@ -5,6 +5,7 @@ import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
 import { type SetSizeValue, type SizeUnit } from '../types';
 import { isExtendedUnit } from '../utils/is-extended-unit';
 import { createDefaultSizeValue, resolveSizeOnUnitChange, resolveSizeValue } from '../utils/resolve-size-value';
+import { useUnitSync } from './use-unit-sync';
 
 type SizeValue = SizePropValue[ 'value' ];
 
@@ -38,8 +39,21 @@ export const useSizeValue = < T extends SizeValue, U extends SizeUnit >( {
 		fallback: () => createDefaultSizeValue( units, defaultUnit ),
 	} );
 
+	const [ unit, setUnit ] = useUnitSync( {
+		unit: sizeValue?.unit,
+		setUnit: ( newUnit ) => {
+			setSizeValue( {
+				unit: newUnit,
+				size: resolveSizeOnUnitChange( sizeValue.size, newUnit ),
+			} as T );
+		},
+		persistWhen: () => {
+			return Boolean( sizeValue.size ) || sizeValue.size !== '';
+		},
+	} );
+
 	const setSize = ( newSize: string, isInputValid = true ) => {
-		if ( isExtendedUnit( sizeValue.unit ) ) {
+		if ( isExtendedUnit( unit ) ) {
 			return;
 		}
 
@@ -47,21 +61,17 @@ export const useSizeValue = < T extends SizeValue, U extends SizeUnit >( {
 		const parsed = Number( trimmed );
 
 		const newState = {
-			...sizeValue,
+			unit,
 			size: trimmed && ! isNaN( parsed ) ? parsed : '',
-		};
+		} as T;
 
 		setSizeValue( newState, undefined, { validation: () => isInputValid } );
 	};
 
-	const setUnit = ( unit: SizeValue[ 'unit' ] ) => {
-		setSizeValue( { unit, size: resolveSizeOnUnitChange( sizeValue.size, unit ) } as T );
-	};
-
 	return {
 		size: sizeValue.size,
-		unit: sizeValue.unit,
 		setSize,
+		unit,
 		setUnit,
 	};
 };

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

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+type UseUnitSyncProps< U > = {
+	unit: U;
+	setUnit: ( unit: U ) => void;
+	persistWhen: () => boolean;
+};
+
+export const useUnitSync = < U >( { unit, setUnit, persistWhen }: UseUnitSyncProps< U > ) => {
+	const [ state, setState ] = useState( unit );
+
+	useEffect( () => {
+		if ( unit !== state ) {
+			setState( unit );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ unit ] );
+
+	const setInternalValue = ( newUnit: U ) => {
+		setState( newUnit );
+
+		if ( persistWhen() ) {
+			setUnit( newUnit );
+		}
+	};
+
+	return [ state, setInternalValue ] as const;
+};

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

@@ -13,7 +13,7 @@ import { getSizeUnits } from './utils/settings/get-size-units';
 import { shouldNullifyValue } from './utils/should-nullify-value';
 
 type Props = {
-	placeholder?: string;
+	placeholder?: string | SizePropValue[ 'value' ];
 	variant?: SizeVariant;
 	anchorRef?: RefObject< HTMLDivElement | null >;
 	startIcon?: React.ReactNode;

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

@@ -1,55 +1,59 @@
-import { sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
+import { type PropValue, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 
-type SizeValue = SizePropValue[ 'value' ] | null;
+type SizeValue = SizePropValue[ 'value' ];
 
-export type ResolvedBoundProp = {
-	sizeValue: SizeValue;
-	placeholder: string | undefined;
+type SizeValueResolver< T extends SizeValue > = {
+	candidate: PropValue;
+	resolve: ( v: T ) => T;
 };
 
 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;
-	}
+	propPlaceholder?: string | SizeValue
+) => {
+	const sizeValue = pickFirstValid< T >( [
+		{ candidate: value, resolve: ( v ) => v },
+		{ candidate: propPlaceholder, resolve: toUnitPlaceholder },
+		{ candidate: boundPropPlaceholder, resolve: toUnitPlaceholder },
+	] );
+
+	const placeholderSource = propPlaceholder ?? boundPropPlaceholder;
 
 	return {
 		sizeValue,
-		placeholder: resolvePlaceholder( propPlaceholder, boundPropPlaceholder ),
+		placeholder: resolvePlaceholder( placeholderSource ),
 	};
 };
 
-const validateSizeValue = ( value?: SizeValue | null ): value is SizeValue => {
-	if ( ! value ) {
+const toUnitPlaceholder = < T extends SizeValue >( v: T ): T => ( { ...v, size: '' } );
+
+const pickFirstValid = < T extends SizeValue >( candidates: SizeValueResolver< T >[] ): T | null => {
+	const found = candidates.find( ( { candidate } ) => validateSizeValue( candidate ) );
+
+	return found ? found.resolve( found.candidate as T ) : null;
+};
+
+const validateSizeValue = ( value: PropValue ): value is SizeValue => {
+	if ( ! value || typeof value !== 'object' ) {
 		return false;
 	}
 
-	const sizePropValue = sizePropTypeUtil.create( value );
+	const sizePropValue = sizePropTypeUtil.create( value as SizeValue );
 
 	return sizePropTypeUtil.isValid( sizePropValue );
 };
 
-const resolvePlaceholder = ( propPlaceholder?: string, boundPropPlaceholder?: SizeValue ): string | undefined => {
-	if ( propPlaceholder ) {
-		return propPlaceholder;
+const resolvePlaceholder = ( placeholder?: string | null | SizeValue ): string | undefined => {
+	if ( typeof placeholder === 'string' ) {
+		return placeholder;
 	}
 
-	const size = boundPropPlaceholder?.size;
+	const size = placeholder?.size;
 
 	if ( size === undefined ) {
 		return undefined;
 	}
 
-	if ( typeof size === 'number' ) {
-		return size.toString();
-	}
-
-	return size;
+	return typeof size === 'number' ? size.toString() : size;
 };