@elementor/editor-controls 4.0.0-manual → 4.1.0-684

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

package/src/components/promotions/attributes-control.tsx

@@ -8,6 +8,7 @@ import { createControl } from '../../create-control';
 import { PromotionTrigger, type PromotionTriggerRef } from './promotion-trigger';
 
 const ARIA_LABEL = __( 'Attributes', 'elementor' );
+const TRACKING_DATA = { target_name: 'attributes', location_l2: 'general' } as const;
 
 export const AttributesControl = createControl( () => {
 	const triggerRef = useRef< PromotionTriggerRef >( null );
@@ -21,7 +22,7 @@ export const AttributesControl = createControl( () => {
 				alignItems: 'center',
 			} }
 		>
-			<PromotionTrigger ref={ triggerRef } promotionKey="attributes" />
+			<PromotionTrigger ref={ triggerRef } promotionKey="attributes" trackingData={ TRACKING_DATA } />
 			<Tooltip title={ ARIA_LABEL } placement="top">
 				<PlusIcon
 					aria-label={ ARIA_LABEL }

package/src/components/promotions/display-conditions-control.tsx

@@ -8,6 +8,7 @@ import { createControl } from '../../create-control';
 import { PromotionTrigger, type PromotionTriggerRef } from './promotion-trigger';
 
 const ARIA_LABEL = __( 'Display Conditions', 'elementor' );
+const TRACKING_DATA = { target_name: 'display_conditions', location_l2: 'general' } as const;
 
 export const DisplayConditionsControl = createControl( () => {
 	const triggerRef = useRef< PromotionTriggerRef >( null );
@@ -21,7 +22,7 @@ export const DisplayConditionsControl = createControl( () => {
 				alignItems: 'center',
 			} }
 		>
-			<PromotionTrigger ref={ triggerRef } promotionKey="displayConditions" />
+			<PromotionTrigger ref={ triggerRef } promotionKey="displayConditions" trackingData={ TRACKING_DATA } />
 			<Tooltip title={ ARIA_LABEL } placement="top">
 				<IconButton
 					size="tiny"

package/src/components/promotions/promotion-trigger.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { forwardRef, type ReactNode, useImperativeHandle, useState } from 'react';
+import { forwardRef, type ReactNode, useCallback, useImperativeHandle, useState } from 'react';
 import { PromotionChip, PromotionInfotip } from '@elementor/editor-ui';
 import { Box } from '@elementor/ui';
 
+import { type PromotionTrackingData, trackUpgradePromotionClick, trackViewPromotion } from '../../utils/tracking';
 import type { V4PromotionData, V4PromotionKey } from './types';
 
 function getV4Promotion( key: V4PromotionKey ): V4PromotionData | undefined {
@@ -12,6 +13,7 @@ function getV4Promotion( key: V4PromotionKey ): V4PromotionData | undefined {
 type PromotionTriggerProps = {
 	promotionKey: V4PromotionKey;
 	children?: ReactNode;
+	trackingData: PromotionTrackingData;
 };
 
 export type PromotionTriggerRef = {
@@ -19,13 +21,20 @@ export type PromotionTriggerRef = {
 };
 
 export const PromotionTrigger = forwardRef< PromotionTriggerRef, PromotionTriggerProps >(
-	( { promotionKey, children }, ref ) => {
+	( { promotionKey, children, trackingData }, ref ) => {
 		const [ isOpen, setIsOpen ] = useState( false );
 		const promotion = getV4Promotion( promotionKey );
 
-		const toggle = () => setIsOpen( ( prev ) => ! prev );
+		const toggle = useCallback( () => {
+			setIsOpen( ( prev ) => {
+				if ( ! prev ) {
+					trackViewPromotion( trackingData );
+				}
+				return ! prev;
+			} );
+		}, [ trackingData ] );
 
-		useImperativeHandle( ref, () => ( { toggle } ), [] );
+		useImperativeHandle( ref, () => ( { toggle } ), [ toggle ] );
 
 		return (
 			<>
@@ -40,6 +49,7 @@ export const PromotionTrigger = forwardRef< PromotionTriggerRef, PromotionTrigge
 							e.stopPropagation();
 							setIsOpen( false );
 						} }
+						onCtaClick={ () => trackUpgradePromotionClick( trackingData ) }
 					>
 						<Box
 							onClick={ ( e: MouseEvent ) => {

package/src/controls/chips-control.tsx

@@ -31,7 +31,7 @@ export const ChipsControl = createControl( ( { options }: ChipsControlProps ) =>
 
 	const handleChange = ( _: SyntheticEvent, newValue: ChipsOption[] ) => {
 		const values = newValue.map( ( option ) => stringPropTypeUtil.create( option.value ) );
-		setValue( values.length > 0 ? values : null );
+		setValue( values );
 	};
 
 	return (

package/src/controls/number-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { numberPropTypeUtil, type PropType } from '@elementor/editor-props';
-import { InputAdornment } from '@elementor/ui';
+import { InputAdornment, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import { NumberInput } from '../components/number-input';
@@ -12,7 +12,13 @@ const isEmptyOrNaN = ( value?: string | number | null ) =>
 
 const renderSuffix = ( propType: PropType ) => {
 	if ( propType.meta?.suffix ) {
-		return <InputAdornment position="end">{ propType.meta.suffix }</InputAdornment>;
+		return (
+			<InputAdornment position="end">
+				<Typography variant="caption" color="text.secondary">
+					{ propType.meta.suffix as string }
+				</Typography>
+			</InputAdornment>
+		);
 	}
 	return <></>;
 };

package/src/controls/size-control/hooks/use-size-unit-keyboard.tsx

@@ -0,0 +1,55 @@
+import type * as React from 'react';
+
+import { useTypingBuffer } from '../../../hooks/use-typing-buffer';
+import { type SizeUnit } from '../types';
+import { isExtendedUnit } from '../utils/is-extended-unit';
+import { isNumericValue } from '../utils/is-numeric-value';
+
+const UNIT_KEY_PATTERN = /^[a-zA-Z%]$/;
+
+type Props = {
+	unit: SizeUnit;
+	units: SizeUnit[];
+	onUnitChange: ( unit: SizeUnit ) => void;
+};
+
+export const useSizeUnitKeyboard = ( { unit, units, onUnitChange }: Props ) => {
+	const { appendKey, startsWith } = useTypingBuffer();
+
+	const onUnitKeyDown = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		if ( units.length === 0 ) {
+			return;
+		}
+
+		const { key, altKey, ctrlKey, metaKey } = event;
+
+		if ( altKey || ctrlKey || metaKey ) {
+			return;
+		}
+
+		if ( isExtendedUnit( unit ) && isNumericValue( key ) ) {
+			const [ defaultUnit ] = units;
+
+			if ( defaultUnit ) {
+				onUnitChange( defaultUnit );
+			}
+
+			return;
+		}
+
+		if ( ! UNIT_KEY_PATTERN.test( key ) ) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const updatedBuffer = appendKey( key.toLowerCase() );
+		const matchedUnit = units.find( ( u ) => startsWith( u, updatedBuffer ) );
+
+		if ( matchedUnit ) {
+			onUnitChange( matchedUnit );
+		}
+	};
+
+	return { onUnitKeyDown };
+};

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

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { type SizePropValue } from '@elementor/editor-props';
+
+import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
+import { type SizeUnit } from '../types';
+import { isExtendedUnit } from '../utils/is-extended-unit';
+import { createDefaultSizeValue, resolveSizeOnUnitChange, resolveSizeValue } from '../utils/resolve-size-value';
+
+type SizeValue = SizePropValue[ 'value' ];
+
+type UseSizeValueProps< T, U > = {
+	value: T | null;
+	onChange: ( value: T ) => void;
+	units: U[];
+	defaultUnit?: U;
+};
+
+export const useSizeValue = < T extends SizeValue, U extends SizeUnit >( {
+	value,
+	onChange,
+	units,
+	defaultUnit,
+}: UseSizeValueProps< T, U > ) => {
+	const resolvedValue = useMemo(
+		() => resolveSizeValue( value, { units, defaultUnit } ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ value?.size, value?.unit, defaultUnit ]
+	);
+
+	const [ sizeValue, setSizeValue ] = useSyncExternalState< T >( {
+		external: resolvedValue as T,
+		setExternal: ( newState ) => {
+			// TODO we need to check behaviour that low level doesn't set to null only the high level components size component
+			// This will fix the issue of if size is empty string '' it gets sends to the model
+			// but on blur the size component set to null.
+			// But we need to test this behaviour
+			if ( newState !== null ) {
+				onChange( newState );
+			}
+		}, // TODO we will need to handle options, meta if context need them
+		persistWhen: ( next ) => hasChanged( next, resolvedValue as T ),
+		fallback: () => createDefaultSizeValue< T >( units, defaultUnit ),
+	} );
+
+	const setSize = ( newSize: string ) => {
+		if ( isExtendedUnit( sizeValue.unit ) ) {
+			return;
+		}
+
+		const trimmed = newSize.trim();
+		const parsed = Number( trimmed );
+
+		const newState = {
+			...sizeValue,
+			size: trimmed && ! isNaN( parsed ) ? parsed : '',
+		};
+
+		setSizeValue( newState );
+	};
+
+	const setUnit = ( unit: SizeValue[ 'unit' ] ) => {
+		setSizeValue( { unit, size: resolveSizeOnUnitChange( sizeValue.size, unit ) } as T );
+	};
+
+	return {
+		size: sizeValue.size,
+		unit: sizeValue.unit,
+		setSize,
+		setUnit,
+	};
+};
+
+const hasChanged = ( next?: SizeValue | null, current?: SizeValue | null ): boolean => {
+	return next?.size !== current?.size || next?.unit !== current?.unit;
+};

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { type RefObject, useEffect } from 'react';
+import type { SizePropValue } from '@elementor/editor-props';
+import { usePopupState } from '@elementor/ui';
+
+import { SizeField, type SizeFieldProps } from './size-field';
+import { TextFieldPopover } from './ui/text-field-popover';
+import { EXTENDED_UNITS } from './utils/resolve-size-value';
+
+type SizeValue = SizePropValue[ 'value' ];
+
+type SizeUnit = SizePropValue[ 'value' ][ 'unit' ];
+
+type Props = SizeFieldProps< SizeValue, SizeUnit > & {
+	anchorRef?: RefObject< HTMLDivElement | null >;
+};
+
+export const SizeComponent = ( { anchorRef, ...sizeFieldProps }: Props ) => {
+	const popupState = usePopupState( { variant: 'popover' } );
+
+	const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
+	const hasCustomUnitOption = sizeFieldProps.units.includes( EXTENDED_UNITS.custom );
+
+	useEffect( () => {
+		if ( isCustomUnit && anchorRef?.current && ! popupState.isOpen ) {
+			popupState.open( anchorRef?.current );
+		}
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ anchorRef, isCustomUnit ] );
+
+	const handleCustomSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		sizeFieldProps.onChange( {
+			size: event.target.value,
+			unit: EXTENDED_UNITS.custom,
+		} );
+	};
+
+	const handleSizeFieldClick = ( event: React.MouseEvent ) => {
+		if ( ( event.target as HTMLElement ).closest( 'input' ) && isCustomUnit ) {
+			popupState.open( anchorRef?.current );
+		}
+	};
+
+	const popupAttributes = {
+		'aria-controls': popupState.isOpen ? popupState.popupId : undefined,
+		'aria-haspopup': true,
+	};
+
+	return (
+		<>
+			<SizeField
+				{ ...sizeFieldProps }
+				InputProps={ {
+					...popupAttributes,
+					onClick: handleSizeFieldClick,
+				} }
+				unitSelectorProps={ {
+					menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : undefined,
+				} }
+			/>
+			{ popupState.isOpen && anchorRef?.current && (
+				<TextFieldPopover
+					popupState={ popupState }
+					anchorRef={ anchorRef as RefObject< HTMLDivElement > }
+					value={ String( sizeFieldProps?.value?.size ?? '' ) }
+					onChange={ handleCustomSizeChange }
+					onClose={ () => {} }
+				/>
+			) }
+		</>
+	);
+};

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

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import type { PropValue, SizePropValue } from '@elementor/editor-props';
+import { MathFunctionIcon } from '@elementor/icons';
+import { InputAdornment, type TextFieldProps } from '@elementor/ui';
+
+import { useSizeUnitKeyboard } from './hooks/use-size-unit-keyboard';
+import { useSizeValue } from './hooks/use-size-value';
+import { type SizeUnit } from './types';
+import { SizeInput } from './ui/size-input';
+import { UnitSelector, type UnitSelectorProps } from './ui/unit-selector';
+import { isExtendedUnit } from './utils/is-extended-unit';
+
+export type SizeFieldProps< TValue extends SizePropValue[ 'value' ], TUnit extends SizeUnit > = {
+	units: TUnit[];
+	value: TValue | null;
+	placeholder?: string;
+	defaultUnit?: SizeUnit;
+	startIcon?: React.ReactNode;
+	onChange: ( value: TValue ) => void;
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
+	disabled?: boolean;
+	InputProps?: TextFieldProps[ 'InputProps' ];
+	unitSelectorProps?: Partial< UnitSelectorProps< TUnit > >;
+};
+
+const UNIT_DISPLAY_LABELS_OVERRIDES: Partial< Record< SizeUnit, React.ReactNode > > = {
+	custom: <MathFunctionIcon fontSize="tiny" />,
+};
+
+export const SizeField = < T extends SizePropValue[ 'value' ], U extends SizeUnit >( {
+	value,
+	disabled,
+	InputProps,
+	defaultUnit,
+	startIcon,
+	onKeyDown,
+	onChange,
+	onBlur,
+	units,
+	unitSelectorProps,
+}: SizeFieldProps< T, U > ) => {
+	const { size, unit, setSize, setUnit } = useSizeValue( { value, onChange, units, defaultUnit } );
+	const { onUnitKeyDown } = useSizeUnitKeyboard( { unit, onUnitChange: setUnit, units } );
+
+	const handleKeyDown = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		onUnitKeyDown( event );
+
+		onKeyDown?.( event );
+	};
+
+	const inputType = isExtendedUnit( unit ) ? 'text' : 'number';
+
+	return (
+		<SizeInput
+			type={ inputType }
+			value={ size }
+			onBlur={ onBlur }
+			onKeyDown={ handleKeyDown }
+			onChange={ ( event ) => setSize( event.target.value ) }
+			InputProps={ {
+				...InputProps,
+				autoComplete: 'off',
+				readOnly: isExtendedUnit( unit ),
+				startAdornment: startIcon && (
+					<InputAdornment position="start" disabled={ disabled }>
+						{ startIcon }
+					</InputAdornment>
+				),
+				endAdornment: (
+					<InputAdornment position="end">
+						<UnitSelector< U >
+							options={ units }
+							value={ unit as U }
+							onSelect={ ( newUnit ) => setUnit( newUnit ) }
+							isActive={ hasValue( size ) }
+							{ ...unitSelectorProps }
+							optionLabelOverrides={ UNIT_DISPLAY_LABELS_OVERRIDES }
+						/>
+					</InputAdornment>
+				),
+			} }
+		/>
+	);
+};
+
+const hasValue = ( value: PropValue ): boolean => {
+	return Boolean( value ) || value === 0;
+};

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

@@ -0,0 +1,3 @@
+export const getExtendedUnits = () => {
+	return window.elementor?.config?.size_units?.extended_units ?? [];
+};

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

@@ -0,0 +1,9 @@
+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 SizeUnit = Unit | ExtendedSizeOption;

package/src/controls/size-control/ui/size-input.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import type { PropValue } from '@elementor/editor-props';
+import type { TextFieldProps } from '@elementor/ui';
+
+import { NumberInput } from '../../../components/number-input';
+
+type Props = {
+	type: 'number' | 'text';
+	value: PropValue;
+	placeholder?: string;
+	focused?: boolean;
+	disabled?: boolean;
+	id?: string;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
+	onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+	InputProps: TextFieldProps[ 'InputProps' ] & {
+		endAdornment: React.JSX.Element;
+	};
+	inputProps?: TextFieldProps[ 'inputProps' ];
+};
+
+export const SizeInput = forwardRef(
+	(
+		{
+			id,
+			type,
+			value,
+			onBlur,
+			onKeyUp,
+			focused,
+			disabled,
+			onChange,
+			onKeyDown,
+			InputProps,
+			inputProps,
+			placeholder,
+		}: Props,
+		ref
+	) => {
+		return (
+			<NumberInput
+				id={ id }
+				ref={ ref }
+				size="tiny"
+				fullWidth
+				type={ type }
+				value={ value }
+				placeholder={ placeholder }
+				onKeyUp={ onKeyUp }
+				focused={ focused }
+				disabled={ disabled }
+				onKeyDown={ onKeyDown }
+				onInput={ onChange }
+				onBlur={ onBlur }
+				InputProps={ InputProps }
+				inputProps={ inputProps }
+				sx={ getCursorStyle( InputProps?.readOnly ?? false ) }
+			/>
+		);
+	}
+);
+
+const getCursorStyle = ( readOnly: boolean ) => ( {
+	input: { cursor: readOnly ? 'default !important' : undefined },
+} );

package/src/controls/size-control/ui/text-field-popover.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { type RefObject, useEffect, useRef } from 'react';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { MathFunctionIcon } from '@elementor/icons';
+import { bindPopover, Popover, type PopupState, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	popupState: PopupState;
+	anchorRef: RefObject< HTMLDivElement | null >;
+	onClose?: () => void;
+	value: string;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+};
+
+const SIZE = 'tiny';
+
+export const TextFieldPopover = ( { popupState, anchorRef, value, onChange, onClose }: Props ) => {
+	const inputRef = useRef< HTMLInputElement >( null );
+
+	useEffect( () => {
+		if ( popupState.isOpen ) {
+			requestAnimationFrame( () => {
+				if ( inputRef.current ) {
+					inputRef.current.focus();
+				}
+			} );
+		}
+	}, [ popupState.isOpen ] );
+
+	const handleKeyDown = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		if ( event.key.toLowerCase() === 'enter' ) {
+			handleClose();
+		}
+	};
+
+	const handleClose = () => {
+		onClose?.();
+
+		popupState.close();
+	};
+
+	return (
+		<Popover
+			disablePortal
+			slotProps={ {
+				paper: {
+					sx: {
+						borderRadius: 2,
+						width: anchorRef.current?.offsetWidth + 'px',
+					},
+				},
+			} }
+			{ ...bindPopover( popupState ) }
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+			transformOrigin={ { vertical: 'top', horizontal: 'center' } }
+			onClose={ handleClose }
+		>
+			<PopoverHeader
+				title={ __( 'CSS function', 'elementor' ) }
+				onClose={ handleClose }
+				icon={ <MathFunctionIcon fontSize={ SIZE } /> }
+			/>
+			<TextField
+				value={ value }
+				onChange={ onChange }
+				onKeyDown={ handleKeyDown }
+				size="tiny"
+				type="text"
+				fullWidth
+				inputProps={ {
+					ref: inputRef,
+				} }
+				sx={ { pt: 0, pr: 1.5, pb: 1.5, pl: 1.5 } }
+			/>
+		</Popover>
+	);
+};