@elementor/editor-controls 4.0.0-498 → 4.0.0-499

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

package/src/components/size/unit-select.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { type SizePropValue } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { bindMenu, bindTrigger, Button, Menu, styled, usePopupState } from '@elementor/ui';
+
+type Props< T = SizePropValue[ 'value' ][ 'unit' ] > = {
+	options: T[];
+	value: T;
+	onClick: ( value: T ) => void;
+	showPrimaryColor: boolean;
+};
+
+const menuItemContentStyles = {
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'center',
+};
+
+export const UnitSelect = ( { value, showPrimaryColor, onClick, options }: Props ) => {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: useId(),
+	} );
+
+	const handleMenuItemClick = ( index: number ) => {
+		onClick( options[ index ] );
+
+		popupState.close();
+	};
+
+	return (
+		<>
+			<StyledButton isPrimaryColor={ showPrimaryColor } size="small" { ...bindTrigger( popupState ) }>
+				{ value }
+			</StyledButton>
+
+			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
+				{ options.map( ( option, index ) => (
+					<MenuListItem
+						key={ option }
+						onClick={ () => handleMenuItemClick( index ) }
+						primaryTypographyProps={ {
+							variant: 'caption',
+							sx: {
+								...menuItemContentStyles,
+								lineHeight: '1',
+							},
+						} }
+						menuItemTextProps={ {
+							sx: menuItemContentStyles,
+						} }
+					>
+						{ option.toUpperCase() }
+					</MenuListItem>
+				) ) }
+			</Menu>
+		</>
+	);
+};
+
+const StyledButton = styled( Button, {
+	shouldForwardProp: ( prop ) => prop !== 'isPrimaryColor',
+} )( ( { isPrimaryColor, theme } ) => ( {
+	color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
+	font: 'inherit',
+	minWidth: 'initial',
+	textTransform: 'uppercase',
+} ) );

package/src/components/size/unstable-size-field.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { PropValue, SizePropValue } from '@elementor/editor-props';
+import { InputAdornment } from '@elementor/ui';
+
+import { useSizeValue } from '../../hooks/use-size-value';
+import { type Unit } from '../../utils/size-control';
+import { UnitSelect } from './unit-select';
+import { UnstableSizeInput } from './unstable-size-input';
+
+type Props< TValue > = {
+	units: Unit[];
+	value: TValue;
+	defaultValue?: Partial< TValue >;
+	onChange: ( value: TValue ) => void;
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+};
+
+const DEFAULT_VALUE: SizePropValue[ 'value' ] = {
+	unit: 'px',
+	size: 0,
+};
+
+export const UnstableSizeField = < T extends SizePropValue[ 'value' ] >( {
+	value,
+	defaultValue,
+	onChange,
+	onBlur,
+	units,
+}: Props< T > ) => {
+	const { size, unit, setSize, setUnit } = useSizeValue< T >( value, onChange, {
+		...DEFAULT_VALUE,
+		...defaultValue,
+	} as T );
+
+	const shouldHighlightUnit = () => {
+		return hasValue( size );
+	};
+
+	return (
+		<UnstableSizeInput
+			type="number"
+			value={ size ?? '' }
+			onBlur={ onBlur }
+			onChange={ ( event ) => setSize( event.target.value ) }
+			InputProps={ {
+				endAdornment: (
+					<InputAdornment position="end">
+						<UnitSelect
+							options={ units }
+							value={ unit }
+							onClick={ setUnit }
+							showPrimaryColor={ shouldHighlightUnit() }
+						/>
+					</InputAdornment>
+				),
+			} }
+		/>
+	);
+};
+
+const hasValue = ( value: PropValue ): boolean => {
+	return value !== null && value !== '';
+};

package/src/components/size/unstable-size-input.tsx

@@ -0,0 +1,46 @@
+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 '../number-input';
+
+type Props = {
+	type: 'number' | 'text';
+	value: PropValue;
+	focused?: boolean;
+	disabled?: boolean;
+	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;
+	};
+};
+
+export const UnstableSizeInput = forwardRef(
+	( { type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }: Props, ref ) => {
+		return (
+			<NumberInput
+				ref={ ref }
+				size="tiny"
+				fullWidth
+				type={ type }
+				value={ value }
+				onKeyUp={ onKeyUp }
+				focused={ focused }
+				disabled={ disabled }
+				onKeyDown={ onKeyDown }
+				onInput={ onChange }
+				onBlur={ onBlur }
+				InputProps={ InputProps }
+				sx={ getCursorStyle( InputProps?.readOnly ?? false ) }
+			/>
+		);
+	}
+);
+
+const getCursorStyle = ( readOnly: boolean ) => ( {
+	input: { cursor: readOnly ? 'default !important' : undefined },
+} );

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

@@ -0,0 +1,49 @@
+import { type SizePropValue } from '@elementor/editor-props';
+
+import { useSyncExternalState } from '../hooks/use-sync-external-state';
+
+export const useSizeValue = < T extends SizePropValue[ 'value' ] >(
+	externalValue: T,
+	onChange: ( value: T ) => void,
+	defaultValue: T
+) => {
+	const [ sizeValue, setSizeValue ] = useSyncExternalState< T >( {
+		external: externalValue,
+		setExternal: ( newState ) => {
+			if ( newState !== null ) {
+				onChange( newState as T );
+			}
+		},
+		persistWhen: ( newState ) => differsFromExternal( newState as T, externalValue ),
+		fallback: () => defaultValue,
+	} );
+
+	const setSize = ( value: string ) => {
+		const newState = {
+			...sizeValue,
+			size: value.trim() === '' ? null : Number( value ),
+		};
+
+		setSizeValue( newState );
+	};
+
+	const setUnit = ( unit: SizePropValue[ 'value' ][ 'unit' ] ) => {
+		const newState = {
+			...sizeValue,
+			unit,
+		};
+
+		setSizeValue( newState );
+	};
+
+	return {
+		size: sizeValue.size,
+		unit: sizeValue.unit,
+		setSize,
+		setUnit,
+	};
+};
+
+const differsFromExternal = ( newState: SizePropValue[ 'value' ], externalState: SizePropValue[ 'value' ] ) => {
+	return newState.size !== externalState.size || newState.unit !== externalState.unit;
+};

package/src/index.ts

@@ -51,6 +51,7 @@ export { FloatingActionsBar } from './components/floating-bar';
 export { PopoverGridContainer } from './components/popover-grid-container';
 export { InlineEditor } from './components/inline-editor';
 export { InlineEditorToolbar } from './components/inline-editor-toolbar';
+export { UnstableSizeField } from './components/size/unstable-size-field';
 
 // types
 export type { ControlComponent } from './create-control';