@elementor/editor-controls 3.35.0-386 → 3.35.0-388

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

package/src/controls/equal-unequal-sizes-control.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { type ReactNode, type RefObject, useId, useRef } from 'react';
-import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
-import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
+import { type PropKey, type PropTypeUtil, type PropValue } from '@elementor/editor-props';
+import { bindPopover, bindToggle, Box, Grid, Popover, Stack, Tooltip, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
+import { StyledToggleButton } from '../components/control-toggle-button-group';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
 import { SizeControl } from './size-control';
 
-type MultiSizePropValue = Record< PropKey, SizePropValue >;
+type MultiSizePropValue = Record< PropKey, PropValue >;
 
 type Item = {
 	icon: ReactNode;
@@ -29,20 +30,6 @@ type Props< TMultiPropType extends string, TPropValue extends MultiSizePropValue
 	multiSizePropTypeUtil: PropTypeUtil< TMultiPropType, TPropValue >;
 };
 
-const isEqualSizes = ( propValue: MultiSizePropValue, items: EqualUnequalItems ) => {
-	const values = Object.values( propValue );
-
-	if ( values.length !== items.length ) {
-		return false;
-	}
-
-	const [ firstValue, ...restValues ] = values;
-
-	return restValues.every(
-		( value ) => value?.value?.size === firstValue?.value?.size && value?.value?.unit === firstValue?.value?.unit
-	);
-};
-
 export function EqualUnequalSizesControl< TMultiPropType extends string, TPropValue extends MultiSizePropValue >( {
 	label,
 	icon,
@@ -53,54 +40,59 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	const popupId = useId();
 	const popupState = usePopupState( { variant: 'popover', popupId } );
 
-	const {
-		propType: multiSizePropType,
-		value: multiSizeValue,
-		setValue: setMultiSizeValue,
-		disabled: multiSizeDisabled,
-	} = useBoundProp( multiSizePropTypeUtil );
-
-	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
-
 	const rowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
 
-	const splitEqualValue = () => {
-		if ( ! sizeValue ) {
-			return null;
+	const { propType: multiSizePropType, disabled: multiSizeDisabled } = useBoundProp( multiSizePropTypeUtil );
+	const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
+
+	const getMultiSizeValues = ( sourceValue: PropValue ) => {
+		if ( multiSizePropTypeUtil.isValid( sourceValue ) ) {
+			return sourceValue.value;
 		}
 
-		return items.reduce< TPropValue >(
-			( acc, { bind } ) => ( { ...acc, [ bind ]: sizePropTypeUtil.create( sizeValue ) } ),
-			{} as TPropValue
-		);
+		const propValue: MultiSizePropValue = {};
+
+		items.forEach( ( item ) => {
+			propValue[ item.bind ] = sourceValue;
+		} );
+
+		const derived = multiSizePropTypeUtil.create( propValue as unknown as TPropValue );
+		return derived?.value;
 	};
 
-	const setNestedProp = ( newValue: TPropValue ) => {
-		const newMappedValues = {
-			...( multiSizeValue ?? splitEqualValue() ),
-			...newValue,
-		};
+	const isShowingGeneralIndicator = ! popupState.isOpen;
 
-		const isEqual = isEqualSizes( newMappedValues, items );
+	const derivedValue = getMultiSizeValues( masterValue ) as unknown as TPropValue;
+	const derivedPlaceholder = getMultiSizeValues( masterPlaceholder ) as unknown as TPropValue;
 
-		if ( isEqual ) {
-			return setSizeValue( Object.values( newMappedValues )[ 0 ]?.value );
+	const isEqualValues = ( values: ReturnType< typeof multiSizePropTypeUtil.create > ) => {
+		if ( ! values ) {
+			return true;
 		}
 
-		setMultiSizeValue( newMappedValues );
-	};
+		const propValue: MultiSizePropValue = {};
 
-	const getMultiSizeValues = () => {
-		if ( multiSizeValue ) {
-			return multiSizeValue;
-		}
+		items.forEach( ( item ) => {
+			propValue[ item.bind ] = values?.value?.[ item.bind ] ?? null;
+		} );
 
-		return splitEqualValue() ?? null;
+		const allValues = Object.values( propValue ).map( ( value ) => JSON.stringify( value ) );
+		return allValues.every( ( value ) => value === allValues[ 0 ] );
 	};
 
-	const isShowingGeneralIndicator = ! popupState.isOpen;
+	const isMixedPlaceholder = ! masterValue && ! isEqualValues( multiSizePropTypeUtil.create( derivedPlaceholder ) );
+	const isMixed = isMixedPlaceholder || ! isEqualValues( multiSizePropTypeUtil.create( derivedValue ) );
+
+	const applyMultiSizeValue = ( newValue: TPropValue ) => {
+		const newPropValue = multiSizePropTypeUtil.create( newValue );
 
-	const isMixed = !! multiSizeValue;
+		if ( isEqualValues( newPropValue ) ) {
+			setMasterValue( Object.values( newValue )?.pop() ?? null );
+			return;
+		}
+
+		setMasterValue( newPropValue );
+	};
 
 	return (
 		<>
@@ -112,27 +104,33 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 						<ControlLabel>{ label }</ControlLabel>
 					) }
 				</Grid>
+
 				<Grid item xs={ 6 }>
 					<Stack direction="row" alignItems="center" gap={ 1 }>
-						<SizeControl
-							placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined }
-							anchorRef={ rowRefs[ 0 ] }
-						/>
+						<Box flexGrow={ 1 }>
+							<SizeControl
+								placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined }
+								enablePropTypeUnits={ ! isMixed || ! isMixedPlaceholder }
+								anchorRef={ rowRefs[ 0 ] }
+							/>
+						</Box>
 						<Tooltip title={ tooltipLabel } placement="top">
-							<ToggleButton
+							<StyledToggleButton
 								size={ 'tiny' }
 								value={ 'check' }
 								sx={ { marginLeft: 'auto' } }
 								{ ...bindToggle( popupState ) }
 								selected={ popupState.isOpen }
+								isPlaceholder={ isMixedPlaceholder }
 								aria-label={ tooltipLabel }
 							>
 								{ icon }
-							</ToggleButton>
+							</StyledToggleButton>
 						</Tooltip>
 					</Stack>
 				</Grid>
 			</Grid>
+
 			<Popover
 				disablePortal
 				disableScrollLock
@@ -151,8 +149,9 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 			>
 				<PropProvider
 					propType={ multiSizePropType }
-					value={ getMultiSizeValues() }
-					setValue={ setNestedProp }
+					value={ derivedValue }
+					placeholder={ derivedPlaceholder }
+					setValue={ applyMultiSizeValue }
 					isDisabled={ () => multiSizeDisabled }
 				>
 					<PopoverContent p={ 1.5 }>