@elementor/editor-controls 4.1.0-725 → 4.1.0-727

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

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

@@ -14,16 +14,10 @@ type SizeUnit = SizePropValue[ 'value' ][ 'unit' ];
 
 type Props = SizeFieldProps< SizeValue, SizeUnit > & {
 	anchorRef?: RefObject< HTMLDivElement | null >;
-	isUnitActive?: boolean;
 	SizeFieldWrapper?: React.ComponentType< { children: React.ReactNode } >;
 };
 
-export const SizeComponent = ( {
-	anchorRef,
-	isUnitActive,
-	SizeFieldWrapper = React.Fragment,
-	...sizeFieldProps
-}: Props ) => {
+export const SizeComponent = ( { anchorRef, SizeFieldWrapper = React.Fragment, ...sizeFieldProps }: Props ) => {
 	const popupState = usePopupState( { variant: 'popover' } );
 	const activeBreakpoint = useActiveBreakpoint();
 
@@ -74,7 +68,6 @@ export const SizeComponent = ( {
 						} }
 						unitSelectorProps={ {
 							menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : undefined,
-							isActive: isUnitActive,
 						} }
 						{ ...sizeFieldProps }
 					/>

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

@@ -8,8 +8,8 @@ import { useSizeValue } from './hooks/use-size-value';
 import { type SetSizeValue, type SizeUnit } from './types';
 import { SizeInput } from './ui/size-input';
 import { UnitSelector, type UnitSelectorProps } from './ui/unit-selector';
-import { hasSizeValue } from './utils/has-size-value';
 import { isExtendedUnit } from './utils/is-extended-unit';
+import { EXTENDED_UNITS } from './utils/resolve-size-value';
 
 export type SizeFieldProps< TValue extends SizePropValue[ 'value' ], TUnit extends SizeUnit > = {
 	units: TUnit[];
@@ -100,7 +100,7 @@ export const SizeField = < T extends SizePropValue[ 'value' ], U extends SizeUni
 							options={ units }
 							value={ unit as U }
 							onSelect={ handleUnitChange }
-							isActive={ unitSelectorProps?.isActive ?? hasSizeValue( size ) }
+							isUnitHighlighted={ shouldHighlightUnit( { size, unit } as SizePropValue[ 'value' ] ) }
 							{ ...unitSelectorProps }
 							optionLabelOverrides={ UNIT_DISPLAY_LABELS_OVERRIDES }
 						/>
@@ -111,3 +111,15 @@ export const SizeField = < T extends SizePropValue[ 'value' ], U extends SizeUni
 		/>
 	);
 };
+
+export const shouldHighlightUnit = ( value?: SizePropValue[ 'value' ] | null ) => {
+	if ( ! value ) {
+		return false;
+	}
+
+	if ( value.unit === EXTENDED_UNITS.auto ) {
+		return true;
+	}
+
+	return Boolean( value.size ) || value.size === 0;
+};

package/src/controls/size-control/ui/unit-selector.tsx

@@ -7,7 +7,7 @@ export type UnitSelectorProps< T extends string > = {
 	options: T[];
 	value: T;
 	onSelect: ( value: T ) => void;
-	isActive: boolean;
+	isUnitHighlighted: boolean;
 	menuItemsAttributes?: { [ key in T ]?: Record< string, unknown > };
 	optionLabelOverrides?: { [ key in T ]?: React.ReactNode };
 	disabled?: boolean;
@@ -21,7 +21,7 @@ const menuItemContentStyles = {
 
 export const UnitSelector = < T extends string >( {
 	value,
-	isActive,
+	isUnitHighlighted,
 	onSelect,
 	options,
 	disabled,
@@ -41,7 +41,12 @@ export const UnitSelector = < T extends string >( {
 
 	return (
 		<>
-			<StyledButton isActive={ isActive } disabled={ disabled } size="small" { ...bindTrigger( popupState ) }>
+			<StyledButton
+				isHighlighted={ isUnitHighlighted }
+				disabled={ disabled }
+				size="small"
+				{ ...bindTrigger( popupState ) }
+			>
 				{ optionLabelOverrides[ value ] ?? value }
 			</StyledButton>
 
@@ -71,9 +76,9 @@ export const UnitSelector = < T extends string >( {
 };
 
 const StyledButton = styled( Button, {
-	shouldForwardProp: ( prop ) => prop !== 'isActive',
-} )( ( { isActive, theme } ) => ( {
-	color: isActive ? theme.palette.text.primary : theme.palette.text.tertiary,
+	shouldForwardProp: ( prop ) => prop !== 'isHighlighted',
+} )( ( { isHighlighted, theme } ) => ( {
+	color: isHighlighted ? theme.palette.text.primary : theme.palette.text.tertiary,
 	font: 'inherit',
 	minWidth: 'initial',
 	textTransform: 'uppercase',

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

@@ -32,11 +32,7 @@ export const UnstableSizeControl = createControl(
 			restoreValue,
 		} = useBoundProp( sizePropTypeUtil );
 
-		const { sizeValue, isUnitHighlighted, placeholder } = resolveBoundPropValue(
-			value,
-			boundPropPlaceholder,
-			propPlaceholder
-		);
+		const { sizeValue, placeholder } = resolveBoundPropValue( value, boundPropPlaceholder, propPlaceholder );
 
 		const units = getSizeUnits( propType, variant );
 		const defaultUnit = getDefaultUnit( propType );
@@ -73,7 +69,6 @@ export const UnstableSizeControl = createControl(
 				anchorRef={ anchorRef }
 				placeholder={ placeholder }
 				defaultUnit={ defaultUnit }
-				isUnitActive={ isUnitHighlighted }
 				onBlur={ handleBlur }
 				setValue={ handleChange }
 				SizeFieldWrapper={ ControlActions }

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

@@ -1,13 +1,9 @@
 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;
 };
 
@@ -26,7 +22,6 @@ export const resolveBoundPropValue = < T extends SizeValue >(
 
 	return {
 		sizeValue,
-		isUnitHighlighted: shouldHighlightUnit( value ),
 		placeholder: resolvePlaceholder( propPlaceholder, boundPropPlaceholder ),
 	};
 };
@@ -58,15 +53,3 @@ const resolvePlaceholder = ( propPlaceholder?: string, boundPropPlaceholder?: Si
 
 	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/has-size-value.ts

@@ -1,5 +0,0 @@
-import { type SizePropValue } from '@elementor/editor-props';
-
-export const hasSizeValue = ( size: SizePropValue[ 'value' ][ 'size' ] ): boolean => {
-	return Boolean( size ) || size === 0;
-};