@elementor/editor-controls 3.35.0-349 → 3.35.0-350

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": "3.35.0-349",
+  "version": "3.35.0-350",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.35.0-349",
-    "@elementor/editor-elements": "3.35.0-349",
-    "@elementor/editor-props": "3.35.0-349",
-    "@elementor/editor-responsive": "3.35.0-349",
-    "@elementor/editor-ui": "3.35.0-349",
-    "@elementor/editor-v1-adapters": "3.35.0-349",
-    "@elementor/env": "3.35.0-349",
-    "@elementor/http-client": "3.35.0-349",
+    "@elementor/editor-current-user": "3.35.0-350",
+    "@elementor/editor-elements": "3.35.0-350",
+    "@elementor/editor-props": "3.35.0-350",
+    "@elementor/editor-responsive": "3.35.0-350",
+    "@elementor/editor-ui": "3.35.0-350",
+    "@elementor/editor-v1-adapters": "3.35.0-350",
+    "@elementor/env": "3.35.0-350",
+    "@elementor/http-client": "3.35.0-350",
     "@elementor/icons": "^1.62.0",
-    "@elementor/locations": "3.35.0-349",
-    "@elementor/mixpanel": "3.35.0-349",
-    "@elementor/query": "3.35.0-349",
-    "@elementor/session": "3.35.0-349",
+    "@elementor/locations": "3.35.0-350",
+    "@elementor/mixpanel": "3.35.0-350",
+    "@elementor/query": "3.35.0-350",
+    "@elementor/session": "3.35.0-350",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-349",
-    "@elementor/wp-media": "3.35.0-349",
+    "@elementor/utils": "3.35.0-350",
+    "@elementor/wp-media": "3.35.0-350",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { type RefObject, useRef } from 'react';
+import { type RefObject, useLayoutEffect, useRef, useState } from 'react';
 import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } 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';
 import { __ } from '@wordpress/i18n';
@@ -12,25 +13,18 @@ import { StyledToggleButton } from '../components/control-toggle-button-group';
 import { type ExtendedOption } from '../utils/size-control';
 import { SizeControl } from './size-control';
 
-export const LinkedDimensionsControl = ( {
-	label,
-	isSiteRtl = false,
-	extendedOptions,
-	min,
-}: {
+type Props = {
 	label: string;
 	isSiteRtl?: boolean;
 	extendedOptions?: ExtendedOption[];
 	min?: number;
-} ) => {
-	const {
-		value: sizeValue,
-		setValue: setSizeValue,
-		disabled: sizeDisabled,
-		placeholder: sizePlaceholder,
-	} = useBoundProp( sizePropTypeUtil );
+};
+
+export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOptions, min }: Props ) => {
 	const gridRowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
 
+	const { disabled: sizeDisabled, placeholder: sizePlaceholder } = useBoundProp( sizePropTypeUtil );
+
 	const {
 		value: dimensionsValue,
 		setValue: setDimensionsValue,
@@ -39,25 +33,67 @@ export const LinkedDimensionsControl = ( {
 		disabled: dimensionsDisabled,
 	} = useBoundProp( dimensionsPropTypeUtil );
 
-	const hasUserValues = !! ( dimensionsValue || sizeValue );
+	const { value: masterValue, placeholder: masterPlaceholder, setValue: setMasterValue } = useBoundProp();
+
 	const hasPlaceholders = !! ( sizePlaceholder || dimensionsPlaceholder );
 
-	const isLinked =
-		( ! hasUserValues && ! hasPlaceholders ) || ( hasPlaceholders ? !! sizePlaceholder : !! sizeValue );
+	const inferIsLinked = () => {
+		if ( dimensionsPropTypeUtil.isValid( masterValue ) ) {
+			return false;
+		}
+
+		if ( dimensionsPropTypeUtil.isValid( masterPlaceholder ) ) {
+			return false;
+		}
+
+		return true;
+	};
+
+	const [ isLinked, setIsLinked ] = useState( () => inferIsLinked() );
+
+	const activeBreakpoint = useActiveBreakpoint();
+
+	useLayoutEffect( () => {
+		setIsLinked( inferIsLinked );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ activeBreakpoint ] );
+
 	const onLinkToggle = () => {
-		if ( ! isLinked ) {
-			setSizeValue( dimensionsValue[ 'block-start' ]?.value ?? null );
+		setIsLinked( ( prev ) => ! prev );
+
+		if ( ! dimensionsPropTypeUtil.isValid( masterValue ) ) {
+			const value = masterValue ? masterValue : null;
+
+			if ( ! value ) {
+				setMasterValue( null );
+				return;
+			}
+
+			setMasterValue(
+				dimensionsPropTypeUtil.create( {
+					'block-start': value,
+					'block-end': value,
+					'inline-start': value,
+					'inline-end': value,
+				} )
+			);
+
 			return;
 		}
 
-		const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
+		const sizeValue =
+			dimensionsValue?.[ 'block-start' ] ??
+			dimensionsValue?.[ 'inline-end' ] ??
+			dimensionsValue?.[ 'block-end' ] ??
+			dimensionsValue?.[ 'inline-start' ] ??
+			null;
 
-		setDimensionsValue( {
-			'block-start': value,
-			'block-end': value,
-			'inline-start': value,
-			'inline-end': value,
-		} );
+		if ( ! sizeValue ) {
+			setMasterValue( null );
+			return;
+		}
+
+		setMasterValue( sizeValue );
 	};
 
 	const tooltipLabel = label.toLowerCase();
@@ -70,14 +106,16 @@ export const LinkedDimensionsControl = ( {
 
 	const disabled = sizeDisabled || dimensionsDisabled;
 
+	const propProviderProps = {
+		propType,
+		value: dimensionsValue,
+		placeholder: dimensionsPlaceholder,
+		setValue: setDimensionsValue,
+		isDisabled: () => dimensionsDisabled,
+	};
+
 	return (
-		<PropProvider
-			propType={ propType }
-			value={ dimensionsValue }
-			setValue={ setDimensionsValue }
-			placeholder={ dimensionsPlaceholder }
-			isDisabled={ () => disabled }
-		>
+		<PropProvider { ...propProviderProps }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlFormLabel>{ label }</ControlFormLabel>
 				<Tooltip title={ isLinked ? unlinkedLabel : linkedLabel } placement="top">

package/src/controls/size-control.tsx

@@ -97,7 +97,6 @@ export const SizeControl = createControl(
 		enablePropTypeUnits = false,
 		id,
 		ariaLabel,
-		isRepeaterControl = false,
 	}: Omit< SizeControlProps, 'variant' > & { variant?: SizeVariant } ) => {
 		const {
 			value: sizeValue,
@@ -107,6 +106,7 @@ export const SizeControl = createControl(
 			placeholder: externalPlaceholder,
 			propType,
 		} = useBoundProp( sizePropTypeUtil );
+
 		const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[ variant ];
 		const activeBreakpoint = useActiveBreakpoint();
 		const actualExtendedOptions = useSizeExtendedOptions( extendedOptions || [], disableCustom ?? false );
@@ -169,46 +169,14 @@ export const SizeControl = createControl(
 			}
 		};
 
-		const handleLinkedSizeControlChanges = () => {
-			const newState = createStateFromSizeProp(
-				sizeValue,
-				state.unit === 'custom' ? state.unit : actualDefaultUnit,
-				'',
-				state.custom
-			);
-			const currentUnitType = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
-			const mergedStates = {
-				...state,
-				unit: newState.unit ?? state.unit,
-				[ currentUnitType ]: newState[ currentUnitType ],
-			};
-
-			if ( mergedStates.unit !== 'auto' && areStatesEqual( state, mergedStates ) ) {
-				return;
+		const maybeClosePopup = React.useCallback( () => {
+			if ( popupState && popupState.isOpen ) {
+				popupState.close();
 			}
-
-			if ( state.unit === newState.unit ) {
-				setState( mergedStates );
-
-				return;
-			}
-
-			setState( newState );
-		};
+		}, [ popupState ] );
 
 		useEffect( () => {
-			if ( ! isRepeaterControl ) {
-				handleLinkedSizeControlChanges();
-			}
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [ sizeValue ] );
-
-		useEffect( () => {
-			const newState = createStateFromSizeProp( sizeValue, actualDefaultUnit, '', state.custom );
-
-			if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
-				setState( newState );
-			}
+			maybeClosePopup();
 			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [ activeBreakpoint ] );
 
@@ -317,15 +285,3 @@ function extractValueFromState( state: State | null, allowEmpty: boolean = false
 		unit,
 	};
 }
-
-function areStatesEqual( state1: State, state2: State ): boolean {
-	if ( state1.unit !== state2.unit || state1.custom !== state2.custom ) {
-		return false;
-	}
-
-	if ( isUnitExtendedOption( state1.unit ) ) {
-		return state1.custom === state2.custom;
-	}
-
-	return state1.numeric === state2.numeric || ( isNaN( state1.numeric ) && isNaN( state2.numeric ) );
-}