@elementor/editor-controls 4.0.0-649 → 4.0.0-659

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

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/utils/is-extended-unit.ts

@@ -0,0 +1,8 @@
+import { getExtendedUnits } from '../sync/get-units';
+import { type SizeUnit } from '../types';
+
+export const isExtendedUnit = ( unit: SizeUnit ) => {
+	const extendedUnits = getExtendedUnits();
+
+	return extendedUnits.includes( unit );
+};

package/src/controls/size-control/utils/is-numeric-value.ts

@@ -0,0 +1,11 @@
+export const isNumericValue = ( value: unknown ): boolean => {
+	if ( typeof value === 'number' ) {
+		return ! isNaN( value );
+	}
+
+	if ( typeof value === 'string' ) {
+		return value.trim() !== '' && ! isNaN( Number( value ) );
+	}
+
+	return false;
+};

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

@@ -0,0 +1,84 @@
+import { type SizePropValue } from '@elementor/editor-props';
+
+import { type SizeUnit } from '../types';
+import { isExtendedUnit } from './is-extended-unit';
+
+type SizeValue = SizePropValue[ 'value' ];
+
+type ResolverContext< U > = {
+	units: U[];
+	defaultUnit?: U;
+};
+
+const DEFAULT_SIZE = '';
+
+export const EXTENDED_UNITS = {
+	auto: 'auto',
+	custom: 'custom',
+} as const;
+
+export const resolveSizeValue = < TValue extends SizeValue | null, TUnit extends SizeValue[ 'unit' ] >(
+	value: TValue,
+	context: ResolverContext< TUnit >
+) => {
+	if ( ! value ) {
+		return value;
+	}
+
+	const { units, defaultUnit } = context;
+
+	const unit = resolveFallbackUnit( value.unit as TUnit, units, defaultUnit );
+
+	if ( unit === EXTENDED_UNITS.auto ) {
+		return { size: DEFAULT_SIZE, unit };
+	}
+
+	if ( unit === EXTENDED_UNITS.custom ) {
+		return { size: String( value.size ?? DEFAULT_SIZE ), unit };
+	}
+
+	return {
+		size: sanitizeSize( value.size ) ?? DEFAULT_SIZE,
+		unit,
+	};
+};
+
+export const resolveSizeOnUnitChange = (
+	size: SizeValue[ 'size' ],
+	unit: SizeValue[ 'unit' ]
+): SizeValue[ 'size' ] => {
+	return isExtendedUnit( unit ) ? DEFAULT_SIZE : size;
+};
+
+export const createDefaultSizeValue = < T extends SizeValue >( units: SizeUnit[], defaultUnit?: SizeUnit ): T => {
+	let unit = units[ 0 ];
+
+	if ( defaultUnit !== undefined ) {
+		unit = resolveFallbackUnit( defaultUnit, units ) as SizeUnit;
+	}
+
+	return { size: DEFAULT_SIZE, unit } as T;
+};
+
+const resolveFallbackUnit = < TUnit extends SizeUnit >(
+	unit: TUnit,
+	units: readonly TUnit[],
+	defaultUnit?: TUnit
+): TUnit | string => {
+	if ( units.includes( unit ) ) {
+		return unit;
+	}
+
+	if ( defaultUnit && units.includes( defaultUnit ) ) {
+		return defaultUnit;
+	}
+
+	return units[ 0 ] ?? '';
+};
+
+const sanitizeSize = ( size: SizeValue[ 'size' ] ): SizeValue[ 'size' ] => {
+	if ( typeof size === 'number' && isNaN( size ) ) {
+		return DEFAULT_SIZE;
+	}
+	return size;
+};