@elementor/editor-controls 4.0.0-633 → 4.0.0-635

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

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>
+	);
+};

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

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { MenuListItem } from '@elementor/editor-ui';
+import { bindMenu, bindTrigger, Button, Menu, styled, usePopupState } from '@elementor/ui';
+
+export type UnitSelectorProps< T extends string > = {
+	options: T[];
+	value: T;
+	onSelect: ( value: T ) => void;
+	isActive: boolean;
+	menuItemsAttributes?: { [ key in T ]?: Record< string, unknown > };
+	optionLabelOverrides?: { [ key in T ]?: React.ReactNode };
+	disabled?: boolean;
+};
+
+const menuItemContentStyles = {
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'center',
+};
+
+export const UnitSelector = < T extends string >( {
+	value,
+	isActive,
+	onSelect,
+	options,
+	disabled,
+	menuItemsAttributes = {},
+	optionLabelOverrides = {},
+}: UnitSelectorProps< T > ) => {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: useId(),
+	} );
+
+	const handleMenuItemClick = ( option: T ) => {
+		onSelect( option );
+
+		popupState.close();
+	};
+
+	return (
+		<>
+			<StyledButton isActive={ isActive } disabled={ disabled } size="small" { ...bindTrigger( popupState ) }>
+				{ optionLabelOverrides[ value ] ?? value }
+			</StyledButton>
+
+			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
+				{ options.map( ( option ) => (
+					<MenuListItem
+						key={ option }
+						onClick={ () => handleMenuItemClick( option ) }
+						{ ...menuItemsAttributes?.[ option ] }
+						primaryTypographyProps={ {
+							variant: 'caption',
+							sx: {
+								...menuItemContentStyles,
+								lineHeight: '1',
+							},
+						} }
+						menuItemTextProps={ {
+							sx: menuItemContentStyles,
+						} }
+					>
+						{ optionLabelOverrides[ option ] ?? option.toUpperCase() }
+					</MenuListItem>
+				) ) }
+			</Menu>
+		</>
+	);
+};
+
+const StyledButton = styled( Button, {
+	shouldForwardProp: ( prop ) => prop !== 'isActive',
+} )( ( { isActive, theme } ) => ( {
+	color: isActive ? theme.palette.text.primary : theme.palette.text.tertiary,
+	font: 'inherit',
+	minWidth: 'initial',
+	textTransform: 'uppercase',
+} ) );