@elementor/editor-controls 0.9.0 → 0.11.0

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": "0.9.0",
+  "version": "0.11.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,7 +40,7 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.9.0",
+    "@elementor/editor-props": "0.9.2",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.3",
     "@elementor/icons": "1.31.0",

package/src/components/autocomplete.tsx

@@ -0,0 +1,181 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { XIcon } from '@elementor/icons';
+import {
+	Autocomplete as AutocompleteBase,
+	type AutocompleteRenderInputParams,
+	Box,
+	IconButton,
+	InputAdornment,
+	TextField,
+} from '@elementor/ui';
+
+export type FlatOption = {
+	id: string;
+	label: string;
+	groupLabel?: never;
+};
+
+export type CategorizedOption = {
+	id: string;
+	label: string;
+	groupLabel: string;
+};
+
+export type Props = {
+	options: FlatOption[] | CategorizedOption[];
+	value?: number | string | null;
+	onOptionChange: ( newValue: number | null ) => void;
+	onTextChange?: ( newValue: string | null ) => void;
+	allowCustomValues?: boolean;
+	placeholder?: string;
+	minInputLength?: number;
+};
+
+export const Autocomplete = forwardRef( ( props: Props, ref ) => {
+	const {
+		options,
+		onOptionChange,
+		onTextChange,
+		allowCustomValues = false,
+		placeholder = '',
+		minInputLength = 2,
+		value = '',
+		...restProps
+	} = props;
+
+	const optionKeys = _factoryFilter( value, options, minInputLength ).map( ( { id } ) => id );
+	const allowClear = !! value;
+
+	// Prevents MUI warning when freeSolo/allowCustomValues is false
+	const muiWarningPreventer = allowCustomValues || !! value?.toString()?.length;
+
+	const isOptionEqualToValue = muiWarningPreventer ? undefined : () => true;
+
+	const isValueFromOptions = typeof value === 'number' && !! findMatchingOption( options, value );
+
+	return (
+		<AutocompleteBase
+			{ ...restProps }
+			ref={ ref }
+			forcePopupIcon={ false }
+			disableClearable={ true } // Disabled component's auto clear icon to use our custom one instead
+			freeSolo={ allowCustomValues }
+			value={ value?.toString() || '' }
+			size={ 'tiny' }
+			onChange={ ( _, newValue ) => onOptionChange( Number( newValue ) ) }
+			readOnly={ isValueFromOptions }
+			options={ optionKeys }
+			getOptionKey={ ( optionId ) => findMatchingOption( options, optionId )?.id || optionId }
+			getOptionLabel={ ( optionId ) => findMatchingOption( options, optionId )?.label || optionId.toString() }
+			groupBy={
+				isCategorizedOptionPool( options )
+					? ( optionId: string ) => findMatchingOption( options, optionId )?.groupLabel || optionId
+					: undefined
+			}
+			isOptionEqualToValue={ isOptionEqualToValue }
+			filterOptions={ () => optionKeys }
+			renderOption={ ( optionProps, optionId ) => (
+				<Box component="li" { ...optionProps } key={ optionProps.id }>
+					{ findMatchingOption( options, optionId )?.label ?? optionId }
+				</Box>
+			) }
+			renderInput={ ( params ) => (
+				<TextInput
+					params={ params }
+					handleChange={ ( newValue ) => onTextChange?.( newValue ) }
+					allowClear={ allowClear }
+					placeholder={ placeholder }
+					hasSelectedValue={ isValueFromOptions }
+				/>
+			) }
+		/>
+	);
+} );
+
+const TextInput = ( {
+	params,
+	allowClear,
+	placeholder,
+	handleChange,
+	hasSelectedValue,
+}: {
+	params: AutocompleteRenderInputParams;
+	allowClear: boolean;
+	handleChange: ( newValue: string | null ) => void;
+	placeholder: string;
+	hasSelectedValue: boolean;
+} ) => {
+	const onChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		handleChange( event.target.value );
+	};
+
+	return (
+		<TextField
+			{ ...params }
+			placeholder={ placeholder }
+			onChange={ onChange }
+			sx={ {
+				'& .MuiInputBase-input': {
+					cursor: hasSelectedValue ? 'default' : undefined,
+				},
+			} }
+			InputProps={ {
+				...params.InputProps,
+				endAdornment: <ClearButton params={ params } allowClear={ allowClear } handleChange={ handleChange } />,
+			} }
+		/>
+	);
+};
+
+const ClearButton = ( {
+	allowClear,
+	handleChange,
+	params,
+}: {
+	params: AutocompleteRenderInputParams;
+	allowClear: boolean;
+	handleChange: ( newValue: string | null ) => void;
+} ) => (
+	<InputAdornment position="end">
+		{ allowClear && (
+			<IconButton size={ params.size } onClick={ () => handleChange( null ) } sx={ { cursor: 'pointer' } }>
+				<XIcon fontSize={ params.size } />
+			</IconButton>
+		) }
+	</InputAdornment>
+);
+
+export function findMatchingOption(
+	options: FlatOption[] | CategorizedOption[],
+	optionId: string | number | null = null
+) {
+	const formattedOption = ( optionId || '' ).toString();
+
+	return options.find( ( { id } ) => formattedOption === id.toString() );
+}
+
+export function isCategorizedOptionPool( options: FlatOption[] | CategorizedOption[] ): options is CategorizedOption[] {
+	return options.every( ( option ) => 'groupLabel' in option );
+}
+function _factoryFilter< T extends FlatOption[] | CategorizedOption[] >(
+	newValue: string | number | null,
+	options: T,
+	minInputLength: number
+): T {
+	if ( null === newValue ) {
+		return options;
+	}
+
+	const formattedValue = String( newValue || '' )?.toLowerCase();
+
+	if ( formattedValue.length < minInputLength ) {
+		return new Array( 0 ) as T;
+	}
+
+	return options.filter(
+		( option ) =>
+			String( option.id ).toLowerCase().includes( formattedValue ) ||
+			option.label.toLowerCase().includes( formattedValue )
+	) as T;
+}

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx

@@ -30,7 +30,7 @@ export const BackgroundImageOverlayAttachment = () => {
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Attachment', 'elementor' ) }</ControlLabel>
 			</Grid>
-			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
 				<ToggleControl options={ attachmentControlOptions } />
 			</Grid>
 		</Grid>

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx

@@ -21,15 +21,15 @@ type Positions =
 	| 'custom';
 
 const backgroundPositionOptions = [
-	{ label: __( 'Center Center', 'elementor' ), value: 'center center' },
-	{ label: __( 'Center Left', 'elementor' ), value: 'center left' },
-	{ label: __( 'Center Right', 'elementor' ), value: 'center right' },
-	{ label: __( 'Top Center', 'elementor' ), value: 'top center' },
-	{ label: __( 'Top Left', 'elementor' ), value: 'top left' },
-	{ label: __( 'Top Right', 'elementor' ), value: 'top right' },
-	{ label: __( 'Bottom Center', 'elementor' ), value: 'bottom center' },
-	{ label: __( 'Bottom Left', 'elementor' ), value: 'bottom left' },
-	{ label: __( 'Bottom Right', 'elementor' ), value: 'bottom right' },
+	{ label: __( 'Center center', 'elementor' ), value: 'center center' },
+	{ label: __( 'Center left', 'elementor' ), value: 'center left' },
+	{ label: __( 'Center right', 'elementor' ), value: 'center right' },
+	{ label: __( 'Top center', 'elementor' ), value: 'top center' },
+	{ label: __( 'Top left', 'elementor' ), value: 'top left' },
+	{ label: __( 'Top right', 'elementor' ), value: 'top right' },
+	{ label: __( 'Bottom center', 'elementor' ), value: 'bottom center' },
+	{ label: __( 'Bottom left', 'elementor' ), value: 'bottom left' },
+	{ label: __( 'Bottom right', 'elementor' ), value: 'bottom right' },
 	{ label: __( 'Custom', 'elementor' ), value: 'custom' },
 ];
 
@@ -56,7 +56,7 @@ export const BackgroundImageOverlayPosition = () => {
 					<Grid item xs={ 6 }>
 						<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
 					</Grid>
-					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
 						<Select
 							size="tiny"
 							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -6,7 +6,7 @@ import {
 	backgroundOverlayPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Box, CardMedia, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator, useTabs } from '@elementor/ui';
+import { Box, CardMedia, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
@@ -20,8 +20,15 @@ import { BackgroundImageOverlayAttachment } from './background-image-overlay/bac
 import { BackgroundImageOverlayPosition } from './background-image-overlay/background-image-overlay-position';
 import { BackgroundImageOverlayRepeat } from './background-image-overlay/background-image-overlay-repeat';
 import { BackgroundImageOverlaySize } from './background-image-overlay/background-image-overlay-size';
+import { type BackgroundImageOverlay } from './types';
+import { useBackgroundTabsHistory } from './use-background-tabs-history';
 
-const initialBackgroundOverlay = ( backgroundPlaceholderImage: string ): BackgroundOverlayItemPropValue => ( {
+export const initialBackgroundColorOverlay: BackgroundOverlayItemPropValue = {
+	$$type: 'background-color-overlay',
+	value: '#00000033',
+};
+
+export const getInitialBackgroundOverlay = (): BackgroundOverlayItemPropValue => ( {
 	$$type: 'background-image-overlay',
 	value: {
 		image: {
@@ -32,7 +39,7 @@ const initialBackgroundOverlay = ( backgroundPlaceholderImage: string ): Backgro
 					value: {
 						url: {
 							$$type: 'url',
-							value: backgroundPlaceholderImage,
+							value: env.background_placeholder_image,
 						},
 						id: null,
 					},
@@ -53,31 +60,6 @@ const backgroundResolutionOptions = [
 	{ label: __( 'Full', 'elementor' ), value: 'full' },
 ];
 
-type OverlayType = 'image' | 'color';
-
-type ImageSrcAttachment = { id: { $$type: 'image-attachment-id'; value: number }; url: null };
-
-type ImageSrcUrl = { url: { $$type: 'url'; value: string }; id: null };
-
-type BackgroundImageOverlay = {
-	$$type: 'background-image-overlay';
-	value: {
-		image: {
-			$$type: 'image';
-			value: {
-				src: {
-					$$type: 'image-src';
-					value: ImageSrcAttachment | ImageSrcUrl;
-				};
-				size: {
-					$$type: 'string';
-					value: 'thumbnail' | 'medium' | 'large' | 'full';
-				};
-			};
-		};
-	};
-};
-
 export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
 
@@ -91,24 +73,26 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 					Icon: ItemIcon,
 					Label: ItemLabel,
 					Content: ItemContent,
-					initialValues: initialBackgroundOverlay( env.background_placeholder_image ),
+					initialValues: getInitialBackgroundOverlay(),
 				} }
 			/>
 		</PropProvider>
 	);
 } );
 
-const ItemContent = ( { bind, value }: { bind: PropKey; value: BackgroundOverlayItemPropValue } ) => {
+export const ItemContent = ( { bind }: { bind: PropKey } ) => {
 	return (
 		<PropKeyProvider bind={ bind }>
-			<Content value={ value } />
+			<Content />
 		</PropKeyProvider>
 	);
 };
 
-const Content = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	const activeTab = deriveOverlayType( value.$$type );
-	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< OverlayType >( activeTab );
+const Content = () => {
+	const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory( {
+		image: getInitialBackgroundOverlay().value,
+		color: initialBackgroundColorOverlay.value,
+	} );
 
 	return (
 		<Box sx={ { width: '100%' } }>
@@ -207,18 +191,6 @@ const ImageOverlayContent = () => {
 	);
 };
 
-const deriveOverlayType = ( type: string ): OverlayType => {
-	if ( type === 'background-color-overlay' ) {
-		return 'color';
-	}
-
-	if ( type === 'background-image-overlay' ) {
-		return 'image';
-	}
-
-	throw new Error( `Invalid overlay type: ${ type }` );
-};
-
 const useImage = ( image: BackgroundImageOverlay ) => {
 	let imageTitle,
 		imageUrl: string | null = null;

package/src/controls/background-control/background-overlay/types.ts

@@ -0,0 +1,22 @@
+type ImageSrcAttachment = { id: { $$type: 'image-attachment-id'; value: number }; url: null };
+
+type ImageSrcUrl = { url: { $$type: 'url'; value: string }; id: null };
+
+export type BackgroundImageOverlay = {
+	$$type: 'background-image-overlay';
+	value: {
+		image: {
+			$$type: 'image';
+			value: {
+				src: {
+					$$type: 'image-src';
+					value: ImageSrcAttachment | ImageSrcUrl;
+				};
+				size: {
+					$$type: 'string';
+					value: 'thumbnail' | 'medium' | 'large' | 'full';
+				};
+			};
+		};
+	};
+};

package/src/controls/background-control/background-overlay/use-background-tabs-history.ts

@@ -0,0 +1,62 @@
+import { useRef } from 'react';
+import {
+	backgroundColorOverlayPropTypeUtil,
+	backgroundImageOverlayPropTypeUtil,
+	type BackgroundOverlayItemPropValue,
+} from '@elementor/editor-props';
+import { useTabs } from '@elementor/ui';
+
+import { useBoundProp } from '../../../bound-prop-context';
+import { type BackgroundImageOverlay } from './types';
+
+type OverlayType = 'image' | 'color';
+
+type InitialBackgroundValues = {
+	color: BackgroundOverlayItemPropValue[ 'value' ];
+	image: BackgroundImageOverlay[ 'value' ];
+};
+
+export const useBackgroundTabsHistory = ( {
+	color: initialBackgroundColorOverlay,
+	image: initialBackgroundImageOverlay,
+}: InitialBackgroundValues ) => {
+	const { value: imageValue, setValue: setImageValue } = useBoundProp( backgroundImageOverlayPropTypeUtil );
+	const { value: colorValue, setValue: setColorValue } = useBoundProp( backgroundColorOverlayPropTypeUtil );
+
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< OverlayType >( colorValue ? 'color' : 'image' );
+
+	const valuesHistory = useRef< InitialBackgroundValues >( {
+		image: initialBackgroundImageOverlay,
+		color: initialBackgroundColorOverlay,
+	} );
+
+	const saveToHistory = ( key: keyof InitialBackgroundValues, value: BackgroundOverlayItemPropValue[ 'value' ] ) => {
+		if ( value ) {
+			valuesHistory.current[ key ] = value;
+		}
+	};
+
+	const onTabChange = ( e: React.SyntheticEvent, tabName: OverlayType ) => {
+		switch ( tabName ) {
+			case 'image':
+				setImageValue( valuesHistory.current.image );
+
+				saveToHistory( 'color', colorValue );
+
+				break;
+
+			case 'color':
+				setColorValue( valuesHistory.current.color );
+
+				saveToHistory( 'image', imageValue );
+		}
+
+		return getTabsProps().onChange( e, tabName );
+	};
+
+	return {
+		getTabProps,
+		getTabPanelProps,
+		getTabsProps: () => ( { ...getTabsProps(), onChange: onTabChange } ),
+	};
+};

package/src/controls/box-shadow-repeater-control.tsx

@@ -98,7 +98,7 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 
 const Control = ( { label, bind, children }: { bind: string; label: string; children: React.ReactNode } ) => (
 	<PropKeyProvider bind={ bind }>
-		<Grid item xs={ 6 }>
+		<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 			<Grid container gap={ 1 } alignItems="center">
 				<Grid item xs={ 12 }>
 					<Typography component="label" variant="caption" color="text.secondary">

package/src/controls/gap-control.tsx

@@ -40,7 +40,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton
-					aria-label={ __( 'Link Inputs', 'elementor' ) }
+					aria-label={ __( 'Link inputs', 'elementor' ) }
 					size={ 'tiny' }
 					value={ 'check' }
 					selected={ isLinked }

package/src/controls/image-control.tsx

@@ -30,7 +30,7 @@ export const ImageControl = createControl(
 							<Grid item xs={ 6 }>
 								<ControlLabel> { resolutionLabel } </ControlLabel>
 							</Grid>
-							<Grid item xs={ 6 }>
+							<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 								<SelectControl options={ sizes } />
 							</Grid>
 						</Grid>

package/src/controls/image-media-control.tsx

@@ -57,7 +57,7 @@ export const ImageMediaControl = createControl( ( props: ImageMediaControlProps
 							variant="outlined"
 							onClick={ () => open( { mode: 'browse' } ) }
 						>
-							{ __( 'Select Image', 'elementor' ) }
+							{ __( 'Select image', 'elementor' ) }
 						</Button>
 						<Button
 							size="tiny"
@@ -66,7 +66,7 @@ export const ImageMediaControl = createControl( ( props: ImageMediaControlProps
 							startIcon={ <UploadIcon /> }
 							onClick={ () => open( { mode: 'upload' } ) }
 						>
-							{ __( 'Upload Image', 'elementor' ) }
+							{ __( 'Upload image', 'elementor' ) }
 						</Button>
 					</Stack>
 				</CardOverlay>