@elementor/editor-editing-panel 1.35.0 → 1.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.35.0",
+  "version": "1.37.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.19.2",
-    "@elementor/editor-canvas": "0.21.2",
-    "@elementor/editor-controls": "0.30.0",
+    "@elementor/editor": "0.19.3",
+    "@elementor/editor-canvas": "0.21.3",
+    "@elementor/editor-controls": "0.30.1",
     "@elementor/editor-current-user": "0.3.2",
-    "@elementor/editor-elements": "0.8.2",
-    "@elementor/editor-panels": "0.15.2",
+    "@elementor/editor-elements": "0.8.3",
+    "@elementor/editor-panels": "0.15.3",
     "@elementor/editor-props": "0.12.0",
-    "@elementor/editor-responsive": "0.13.4",
-    "@elementor/editor-styles": "0.6.6",
-    "@elementor/editor-styles-repository": "0.8.7",
-    "@elementor/editor-ui": "0.8.1",
-    "@elementor/editor-v1-adapters": "0.11.0",
+    "@elementor/editor-responsive": "0.13.5",
+    "@elementor/editor-styles": "0.6.7",
+    "@elementor/editor-styles-repository": "0.8.8",
+    "@elementor/editor-ui": "0.8.2",
+    "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/icons": "1.40.1",
     "@elementor/locations": "0.8.0",
     "@elementor/menus": "0.1.5",

package/src/components/creatable-autocomplete/creatable-autocomplete.tsx

@@ -19,17 +19,28 @@ import { useInputState, useOpenState } from './use-autocomplete-states';
 import { useCreateOption } from './use-create-option';
 import { useFilterOptions } from './use-filter-options';
 
-export function CreatableAutocomplete< TOption extends SafeOptionConstraint >( {
-	selected,
-	options,
-	entityName,
-	onSelect,
-	placeholder,
-	onCreate,
-	validate,
-	...props
-}: CreatableAutocompleteProps< TOption > ) {
-	const { inputValue, setInputValue, error, setError, handleInputChange } = useInputState( validate );
+export const CreatableAutocomplete = React.forwardRef( CreatableAutocompleteInner ) as <
+	TOption extends SafeOptionConstraint,
+>(
+	props: CreatableAutocompleteProps< TOption > & {
+		ref?: React.ForwardedRef< HTMLElement >;
+	}
+) => ReturnType< typeof CreatableAutocompleteInner >;
+
+function CreatableAutocompleteInner< TOption extends SafeOptionConstraint >(
+	{
+		selected,
+		options,
+		entityName,
+		onSelect,
+		placeholder,
+		onCreate,
+		validate,
+		...props
+	}: CreatableAutocompleteProps< TOption >,
+	ref: React.ForwardedRef< HTMLElement >
+) {
+	const { inputValue, setInputValue, error, setError, inputHandlers } = useInputState( validate );
 	const { open, openDropdown, closeDropdown } = useOpenState( props.open );
 	const { createOption, loading } = useCreateOption( { onCreate, validate, setInputValue, setError, closeDropdown } );
 
@@ -60,6 +71,7 @@ export function CreatableAutocomplete< TOption extends SafeOptionConstraint >( {
 				) );
 			} }
 			{ ...( props as AutocompleteProps< InternalOption< TOption >, true, true, true > ) }
+			ref={ ref }
 			freeSolo
 			multiple
 			clearOnBlur
@@ -75,8 +87,8 @@ export function CreatableAutocomplete< TOption extends SafeOptionConstraint >( {
 			options={ internalOptions }
 			ListboxComponent={
 				error
-					? React.forwardRef< HTMLElement, ErrorTextProps >( ( _, ref ) => (
-							<ErrorText ref={ ref } error={ error } />
+					? React.forwardRef< HTMLElement, ErrorTextProps >( ( _, errorTextRef ) => (
+							<ErrorText ref={ errorTextRef } error={ error } />
 					  ) )
 					: undefined
 			}
@@ -88,7 +100,7 @@ export function CreatableAutocomplete< TOption extends SafeOptionConstraint >( {
 						{ ...params }
 						placeholder={ placeholder }
 						error={ Boolean( error ) }
-						onChange={ handleInputChange }
+						{ ...inputHandlers }
 						sx={ ( theme: Theme ) => ( {
 							'.MuiAutocomplete-inputRoot.MuiInputBase-adornedStart': {
 								paddingLeft: theme.spacing( 0.25 ),
@@ -149,7 +161,7 @@ const ErrorText = React.forwardRef< HTMLElement, ErrorTextProps >( ( { error = '
 				padding: theme.spacing( 2 ),
 			} ) }
 		>
-			<Typography variant="caption" sx={ { color: 'error.main' } }>
+			<Typography variant="caption" sx={ { color: 'error.main', display: 'inline-block' } }>
 				{ error }
 			</Typography>
 		</Box>

package/src/components/creatable-autocomplete/use-autocomplete-states.ts

@@ -29,7 +29,21 @@ export function useInputState( validate?: ( value: string, event: ValidationEven
 		}
 	};
 
-	return { inputValue, setInputValue, error, setError, handleInputChange };
+	const handleInputBlur = () => {
+		setInputValue( '' );
+		setError( null );
+	};
+
+	return {
+		inputValue,
+		setInputValue,
+		error,
+		setError,
+		inputHandlers: {
+			onChange: handleInputChange,
+			onBlur: handleInputBlur,
+		},
+	};
 }
 
 export function useOpenState( initialOpen: boolean = false ) {

package/src/components/css-classes/css-class-item.tsx

@@ -30,6 +30,7 @@ type CssClassItemProps = {
 	onClickActive: ( id: string | null ) => void;
 	renameLabel: ( newLabel: string ) => void;
 	validateLabel?: ( newLabel: string ) => string | undefined | null;
+	setError?: ( error: string | null ) => void;
 };
 
 const CHIP_SIZE = 'tiny';
@@ -44,6 +45,7 @@ export function CssClassItem( {
 	chipProps,
 	onClickActive,
 	renameLabel,
+	setError,
 }: CssClassItemProps ) {
 	const { meta, setMetaState } = useStyle();
 	const popupState = usePopupState( { variant: 'popover' } );
@@ -60,6 +62,7 @@ export function CssClassItem( {
 		value: label,
 		onSubmit: renameLabel,
 		validation: validateLabel,
+		onError: setError,
 	} );
 
 	const color = error ? 'error' : colorProp;
@@ -84,7 +87,7 @@ export function CssClassItem( {
 					size={ CHIP_SIZE }
 					label={
 						isEditing ? (
-							<EditableField ref={ ref } error={ error } { ...getEditableProps() } />
+							<EditableField ref={ ref } { ...getEditableProps() } />
 						) : (
 							<EllipsisWithTooltip maxWidth="10ch" title={ label } as="div" />
 						)

package/src/components/css-classes/css-class-selector.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ReactElement } from 'react';
+import { type ReactElement, useRef, useState } from 'react';
 import { getElementSetting, updateElementSettings, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
@@ -12,6 +12,7 @@ import {
 	useProviders,
 	validateStyleLabel,
 } from '@elementor/editor-styles-repository';
+import { WarningInfotip } from '@elementor/editor-ui';
 import { MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
 import { Chip, FormLabel, Stack } from '@elementor/ui';
@@ -60,6 +61,9 @@ export function CssClassSelector() {
 	const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
 	const { id: activeId, setId: setActiveId } = useStyle();
 
+	const autocompleteRef = useRef< HTMLElement | null >( null );
+	const [ renameError, setRenameError ] = useState< string | null >( null );
+
 	const handleApply = useHandleApply( appliedIds, setAppliedIds );
 	const { create, validate, entityName } = useCreateAction( { pushAppliedId, setActiveId } );
 
@@ -78,49 +82,59 @@ export function CssClassSelector() {
 					<ClassSelectorActionsSlot />
 				</Stack>
 			</Stack>
-			<CreatableAutocomplete
-				id={ ID }
-				size="tiny"
-				placeholder={ showPlaceholder ? __( 'Type class name', 'elementor' ) : undefined }
-				options={ options }
-				selected={ applied }
-				entityName={ entityName }
-				onSelect={ handleApply }
-				onCreate={ create ?? undefined }
-				validate={ validate ?? undefined }
-				limitTags={ TAGS_LIMIT }
-				getLimitTagsText={ ( more ) => (
-					<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
-				) }
-				renderTags={ ( values, getTagProps ) =>
-					values.map( ( value, index ) => {
-						const chipProps = getTagProps( { index } );
-						const isActive = value.value === active?.value;
-
-						const renameLabel = ( newLabel: string ) => {
-							if ( ! value.value ) {
-								throw new Error( `Cannot rename a class without style id` );
-							}
-							return updateClassByProvider( value.provider, { label: newLabel, id: value.value } );
-						};
-
-						return (
-							<CssClassItem
-								key={ chipProps.key }
-								label={ value.label }
-								provider={ value.provider }
-								id={ value.value }
-								isActive={ isActive }
-								color={ isActive && value.color ? value.color : 'default' }
-								icon={ value.icon }
-								chipProps={ chipProps }
-								onClickActive={ () => setActiveId( value.value ) }
-								renameLabel={ renameLabel }
-							/>
-						);
-					} )
-				}
-			/>
+			<WarningInfotip
+				open={ Boolean( renameError ) }
+				text={ renameError ?? '' }
+				placement="bottom"
+				width={ autocompleteRef.current?.getBoundingClientRect().width }
+				offset={ [ 0, -15 ] }
+			>
+				<CreatableAutocomplete< StyleDefOption >
+					id={ ID }
+					ref={ autocompleteRef }
+					size="tiny"
+					placeholder={ showPlaceholder ? __( 'Type class name', 'elementor' ) : undefined }
+					options={ options }
+					selected={ applied }
+					entityName={ entityName }
+					onSelect={ handleApply }
+					onCreate={ create ?? undefined }
+					validate={ validate ?? undefined }
+					limitTags={ TAGS_LIMIT }
+					getLimitTagsText={ ( more ) => (
+						<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
+					) }
+					renderTags={ ( values, getTagProps ) =>
+						values.map( ( value, index ) => {
+							const chipProps = getTagProps( { index } );
+							const isActive = value.value === active?.value;
+
+							const renameLabel = ( newLabel: string ) => {
+								if ( ! value.value ) {
+									throw new Error( `Cannot rename a class without style id` );
+								}
+								return updateClassByProvider( value.provider, { label: newLabel, id: value.value } );
+							};
+
+							return (
+								<CssClassItem
+									key={ chipProps.key }
+									label={ value.label }
+									provider={ value.provider }
+									id={ value.value }
+									isActive={ isActive }
+									color={ isActive && value.color ? value.color : 'default' }
+									icon={ value.icon }
+									chipProps={ chipProps }
+									onClickActive={ () => setActiveId( value.value ) }
+									renameLabel={ renameLabel }
+									setError={ setRenameError }
+								/>
+							);
+						} )
+					}
+				/>
+			</WarningInfotip>
 		</Stack>
 	);
 }

package/src/components/style-sections/layout-section/display-field.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStylesInheritanceField } from '../../../contexts/styles-inheritance-context';
 import { StylesField } from '../../../controls-registry/styles-field';
-import { isExperimentActive } from '../../../sync/is-experiment-active';
 import { ControlLabel } from '../../control-label';
 
 type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex' | 'none';

package/src/components/style-sections/position-section/position-section.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type StringPropValue } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { useSessionStorage } from '@elementor/session';
 
 import { useStyle } from '../../../contexts/style-context';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
-import { isExperimentActive } from '../../../sync/is-experiment-active';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { DimensionsField } from './dimensions-field';

package/src/components/style-sections/size-section/object-fit-field.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { SelectControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+const positionOptions = [
+	{ label: __( 'Fill', 'elementor' ), value: 'fill' },
+	{ label: __( 'Cover', 'elementor' ), value: 'cover' },
+	{ label: __( 'Contain', 'elementor' ), value: 'contain' },
+	{ label: __( 'None', 'elementor' ), value: 'none' },
+	{ label: __( 'Scale down', 'elementor' ), value: 'scale-down' },
+];
+
+type Props = {
+	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
+};
+
+export const ObjectFitField = ( { onChange }: Props ) => {
+	return (
+		<StylesField bind="object-fit">
+			<Grid container pt={ 2 } gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Object fit', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+					<SelectControl options={ positionOptions } onChange={ onChange } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/size-section/object-position-field.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SelectControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+const positionOptions = [
+	{ 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' },
+];
+
+type Props = {
+	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
+};
+
+export const ObjectPositionField = ( { onChange }: Props ) => {
+	return (
+		<StylesField bind="object-position">
+			<Grid container pt={ 2 } gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Object position', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+					<SelectControl options={ positionOptions } onChange={ onChange } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/size-section/size-section.tsx

@@ -1,15 +1,33 @@
 import * as React from 'react';
 import { type ExtendedValue, SizeControl } from '@elementor/editor-controls';
+import type { StringPropValue } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { CollapsibleContent } from '../../collapsible-content';
 import { ControlLabel } from '../../control-label';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
+import { ObjectFitField } from './object-fit-field';
+import { ObjectPositionField } from './object-position-field';
 import { OverflowField } from './overflow-field';
 
 export const SizeSection = () => {
+	const [ fitValue, setFitValue ] = useStylesField< StringPropValue >( 'object-fit' );
+	const isNotFill = fitValue && fitValue?.value !== 'fill';
+
+	const onFitChange = ( newFit: string | null, previousValue: string | null | undefined ) => {
+		if ( newFit && newFit !== previousValue ) {
+			setFitValue( {
+				value: newFit,
+				$$type: 'string',
+			} );
+		}
+	};
+	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
 	return (
 		<SectionContent>
 			<Grid container gap={ 2 } flexWrap="nowrap">
@@ -48,6 +66,14 @@ export const SizeSection = () => {
 			<Stack>
 				<OverflowField />
 			</Stack>
+			{ isVersion330Active && (
+				<CollapsibleContent>
+					<ObjectFitField onChange={ onFitChange } />
+					<Grid item xs={ 6 }>
+						{ isNotFill && <ObjectPositionField /> }
+					</Grid>
+				</CollapsibleContent>
+			) }
 		</SectionContent>
 	);
 };

package/src/hooks/use-state-by-element.ts

@@ -1,12 +1,14 @@
 import { useState } from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { getSessionStorageItem, setSessionStorageItem } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
 
 export const useStateByElement = < T >( key: string, initialValue: T ) => {
 	const { element } = useElement();
+	const isFeatureActive = isExperimentActive( 'e_v_3_30' );
 	const lookup = `elementor/editor-state/${ element.id }/${ key }`;
-	const storedValue = getSessionStorageItem< T >( lookup );
+	const storedValue = isFeatureActive ? getSessionStorageItem< T >( lookup ) : initialValue;
 	const [ value, setValue ] = useState( storedValue ?? initialValue );
 
 	const doUpdate = ( newValue: T ) => {

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { IconButton, Infotip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StyleIndicator } from '../components/style-indicator';
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
-import { isExperimentActive } from '../sync/is-experiment-active';
 import { StyleIndicatorInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {

package/src/sync/get-elementor-globals.ts

@@ -11,9 +11,3 @@ export const getElementorFrontendConfig = () => {
 
 	return extendedWindow.elementorFrontend?.config ?? {};
 };
-
-export const getElementorCommonConfig = () => {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	return extendedWindow.elementorCommon?.config ?? {};
-};

package/src/sync/is-experiment-active.ts

@@ -1,7 +0,0 @@
-import { getElementorCommonConfig } from './get-elementor-globals';
-
-export const isExperimentActive = ( experiment: string ) => {
-	const allFeatures = getElementorCommonConfig()?.experimentalFeatures ?? {};
-
-	return !! allFeatures?.[ experiment ];
-};