@elementor/editor-editing-panel 4.0.0-682 → 4.0.0-beta5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.0.0-682",
+  "version": "4.0.0-beta5",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,28 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-682",
-    "@elementor/editor-canvas": "4.0.0-682",
-    "@elementor/editor-controls": "4.0.0-682",
-    "@elementor/editor-documents": "4.0.0-682",
-    "@elementor/editor-elements": "4.0.0-682",
-    "@elementor/editor-interactions": "4.0.0-682",
-    "@elementor/editor-panels": "4.0.0-682",
-    "@elementor/editor-props": "4.0.0-682",
-    "@elementor/editor-responsive": "4.0.0-682",
-    "@elementor/editor-styles": "4.0.0-682",
-    "@elementor/editor-styles-repository": "4.0.0-682",
-    "@elementor/editor-ui": "4.0.0-682",
-    "@elementor/editor-v1-adapters": "4.0.0-682",
+    "@elementor/editor": "4.0.0-beta5",
+    "@elementor/editor-canvas": "4.0.0-beta5",
+    "@elementor/editor-controls": "4.0.0-beta5",
+    "@elementor/editor-documents": "4.0.0-beta5",
+    "@elementor/editor-elements": "4.0.0-beta5",
+    "@elementor/editor-interactions": "4.0.0-beta5",
+    "@elementor/editor-panels": "4.0.0-beta5",
+    "@elementor/editor-props": "4.0.0-beta5",
+    "@elementor/editor-responsive": "4.0.0-beta5",
+    "@elementor/editor-styles": "4.0.0-beta5",
+    "@elementor/editor-styles-repository": "4.0.0-beta5",
+    "@elementor/editor-ui": "4.0.0-beta5",
+    "@elementor/editor-v1-adapters": "4.0.0-beta5",
     "@elementor/icons": "^1.68.0",
-    "@elementor/editor-variables": "4.0.0-682",
-    "@elementor/locations": "4.0.0-682",
-    "@elementor/menus": "4.0.0-682",
-    "@elementor/schema": "4.0.0-682",
-    "@elementor/session": "4.0.0-682",
+    "@elementor/editor-variables": "4.0.0-beta5",
+    "@elementor/locations": "4.0.0-beta5",
+    "@elementor/menus": "4.0.0-beta5",
+    "@elementor/schema": "4.0.0-beta5",
+    "@elementor/session": "4.0.0-beta5",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-682",
-    "@elementor/wp-media": "4.0.0-682",
+    "@elementor/utils": "4.0.0-beta5",
+    "@elementor/wp-media": "4.0.0-beta5",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { type StringPropValue } from '@elementor/editor-props';
 import { useSessionStorage } from '@elementor/session';
 import { __ } from '@wordpress/i18n';
@@ -28,47 +29,83 @@ type DimensionsValues = {
 	'inset-inline-end': DimensionValue;
 };
 
+type PositionDependentValues = DimensionsValues & {
+	'z-index': number | undefined | null;
+};
+
+const POSITION_STATIC = 'static' as const;
+
 const POSITION_LABEL = __( 'Position', 'elementor' );
 const DIMENSIONS_LABEL = __( 'Dimensions', 'elementor' );
 
+const POSITION_DEPENDENT_PROP_NAMES = [
+	'inset-block-start',
+	'inset-block-end',
+	'inset-inline-start',
+	'inset-inline-end',
+	'z-index',
+] as const;
+
+const CLEARED_POSITION_DEPENDENT_VALUES: Record< ( typeof POSITION_DEPENDENT_PROP_NAMES )[ number ], undefined > = {
+	'inset-block-start': undefined,
+	'inset-block-end': undefined,
+	'inset-inline-start': undefined,
+	'inset-inline-end': undefined,
+	'z-index': undefined,
+};
+
 export const PositionSection = () => {
 	const { value: positionValue } = useStylesField< StringPropValue >( 'position', {
 		history: { propDisplayName: POSITION_LABEL },
 	} );
-	const { values: dimensions, setValues: setDimensions } = useStylesFields< DimensionsValues >( [
-		'inset-block-start',
-		'inset-block-end',
-		'inset-inline-start',
-		'inset-inline-end',
-	] );
+	const { values: positionDependentValues, setValues: setPositionDependentValues } =
+		useStylesFields< PositionDependentValues >( [ ...POSITION_DEPENDENT_PROP_NAMES ] );
 
 	const [ dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory ] = usePersistDimensions();
 
+	const clearPositionDependentProps = useCallback( () => {
+		const dimensions: DimensionsValues = {
+			'inset-block-start': positionDependentValues?.[ 'inset-block-start' ],
+			'inset-block-end': positionDependentValues?.[ 'inset-block-end' ],
+			'inset-inline-start': positionDependentValues?.[ 'inset-inline-start' ],
+			'inset-inline-end': positionDependentValues?.[ 'inset-inline-end' ],
+		};
+		const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
+		const hasValuesToClear =
+			Object.values( dimensions ).some( ( v ) => v !== null ) || positionDependentValues?.[ 'z-index' ] !== null;
+
+		if ( hasValuesToClear ) {
+			updateDimensionsHistory( dimensions );
+			setPositionDependentValues( CLEARED_POSITION_DEPENDENT_VALUES, meta );
+		}
+	}, [ positionDependentValues, updateDimensionsHistory, setPositionDependentValues ] );
+
+	const clearPositionDependentPropsRef = useRef( clearPositionDependentProps );
+	clearPositionDependentPropsRef.current = clearPositionDependentProps;
+
+	useEffect( () => {
+		if ( positionValue?.value === POSITION_STATIC || positionValue === null ) {
+			clearPositionDependentPropsRef.current();
+		}
+	}, [ positionValue ] );
+
 	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
 		const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
 
-		if ( newPosition === 'static' ) {
-			if ( dimensions ) {
-				updateDimensionsHistory( dimensions );
-				setDimensions(
-					{
-						'inset-block-start': undefined,
-						'inset-block-end': undefined,
-						'inset-inline-start': undefined,
-						'inset-inline-end': undefined,
-					},
+		if ( newPosition === POSITION_STATIC ) {
+			clearPositionDependentProps();
+		} else if ( previousPosition === POSITION_STATIC ) {
+			if ( dimensionsValuesFromHistory ) {
+				setPositionDependentValues(
+					{ ...dimensionsValuesFromHistory, 'z-index': undefined } as PositionDependentValues,
 					meta
 				);
-			}
-		} else if ( previousPosition === 'static' ) {
-			if ( dimensionsValuesFromHistory ) {
-				setDimensions( dimensionsValuesFromHistory, meta );
 				clearDimensionsHistory();
 			}
 		}
 	};
 
-	const isNotStatic = positionValue && positionValue?.value !== 'static';
+	const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
 
 	return (
 		<SectionContent>

package/src/controls-registry/controls-registry.tsx

@@ -28,7 +28,6 @@ import {
 	emailPropTypeUtil,
 	htmlV3PropTypeUtil,
 	imagePropTypeUtil,
-	imageSrcPropTypeUtil,
 	keyValuePropTypeUtil,
 	linkPropTypeUtil,
 	numberPropTypeUtil,
@@ -37,6 +36,7 @@ import {
 	sizePropTypeUtil,
 	stringArrayPropTypeUtil,
 	stringPropTypeUtil,
+	svgSrcPropTypeUtil,
 	videoSrcPropTypeUtil,
 } from '@elementor/editor-props';
 
@@ -50,7 +50,7 @@ export type ControlRegistry = Record<
 
 const controlTypes = {
 	image: { component: ImageControl, layout: 'custom', propTypeUtil: imagePropTypeUtil },
-	'svg-media': { component: SvgMediaControl, layout: 'full', propTypeUtil: imageSrcPropTypeUtil },
+	'svg-media': { component: SvgMediaControl, layout: 'full', propTypeUtil: svgSrcPropTypeUtil },
 	text: { component: TextControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	textarea: { component: TextAreaControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	size: { component: SizeControl, layout: 'two-columns', propTypeUtil: sizePropTypeUtil },

package/src/index.ts

@@ -13,6 +13,7 @@ export { useClassesProp } from './contexts/classes-prop-context';
 export { ElementProvider, useElement } from './contexts/element-context';
 export { useStyle } from './contexts/style-context';
 export { Control as BaseControl } from './controls-registry/control';
+export { ControlTypeContainer } from './controls-registry/control-type-container';
 export { controlsRegistry, type ControlType } from './controls-registry/controls-registry';
 export { StylesProviderCannotUpdatePropsError } from './errors';
 export { createTopLevelObjectType } from './controls-registry/create-top-level-object-type';

package/src/styles-inheritance/components/infotip/value-component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Typography } from '@elementor/ui';
+import { Tooltip, Typography } from '@elementor/ui';
 
 type Props = {
 	index: number;
@@ -8,21 +8,24 @@ type Props = {
 
 export const ValueComponent = ( { index, value }: Props ) => {
 	return (
-		<Typography
-			variant="caption"
-			color="text.tertiary"
-			sx={ {
-				mt: '1px',
-				textDecoration: index === 0 ? 'none' : 'line-through',
-				overflow: 'hidden',
-				textOverflow: 'ellipsis',
-				whiteSpace: 'nowrap',
-				pl: 2.5,
-				minWidth: 0,
-				maxWidth: '100%',
-			} }
-		>
-			{ value }
-		</Typography>
+		<Tooltip title={ value } placement="top">
+			<Typography
+				variant="caption"
+				color="text.tertiary"
+				sx={ {
+					mt: '1px',
+					textDecoration: index === 0 ? 'none' : 'line-through',
+					overflow: 'hidden',
+					display: '-webkit-box',
+					WebkitLineClamp: 1,
+					WebkitBoxOrient: 'vertical',
+					pl: 2.5,
+					minWidth: 0,
+					maxWidth: '100%',
+				} }
+			>
+				{ value }
+			</Typography>
+		</Tooltip>
 	);
 };

package/src/styles-inheritance/components/styles-inheritance-infotip.tsx

@@ -125,7 +125,7 @@ export const StylesInheritanceInfotip = ( {
 						},
 					} }
 				>
-					<Stack gap={ 1.5 } sx={ { pl: 3, pr: 1, pb: 2 } } role="list">
+					<Stack gap={ 1.5 } sx={ { pl: 2, pr: 1, pt: 1.5, pb: 1.5 } } role="list">
 						{ items.map( ( item, index ) => {
 							return (
 								<Box
@@ -235,15 +235,13 @@ function TooltipOrInfotip( {
 							sx: { mx: 2 },
 						},
 					} }
-					slotProps={ {
-						popper: {
-							modifiers: [
-								{
-									name: 'offset',
-									options: { offset: [ offsetX, 0 ] },
-								},
-							],
-						},
+					PopperProps={ {
+						modifiers: [
+							{
+								name: 'offset',
+								options: { offset: [ offsetX, 0 ] },
+							},
+						],
 					} }
 				>
 					{ children }

package/src/styles-inheritance/init-styles-inheritance-transformers.ts

@@ -53,7 +53,7 @@ function registerCustomTransformers( originalStyleTransformers: ReturnType< type
 	);
 	stylesInheritanceTransformersRegistry.register(
 		'transition',
-		createRepeaterToItemsTransformer( originalStyleTransformers.transition, ', ' )
+		createRepeaterToItemsTransformer( originalStyleTransformers.transition )
 	);
 
 	[ 'background-overlay', 'box-shadow', 'transform-functions' ].forEach( ( propType ) =>

package/src/styles-inheritance/transformers/array-transformer.tsx

@@ -1,20 +1,28 @@
 import * as React from 'react';
 import { type ReactNode } from 'react';
 import { createTransformer } from '@elementor/editor-canvas';
-import { Stack } from '@elementor/ui';
 
-type ArrayValues = ReactNode[];
+type ArrayValues = ReactNode | ReactNode[];
 
 export const arrayTransformer = createTransformer( ( values: ArrayValues[] ) => {
 	if ( ! values || values.length === 0 ) {
 		return null;
 	}
 
+	const allStrings = values.every( ( item ) => typeof item === 'string' || typeof item === 'number' );
+
+	if ( allStrings ) {
+		return ( values as ( string | number )[] ).join( ' ' );
+	}
+
 	return (
-		<Stack direction="column">
+		<>
 			{ values.map( ( item, index ) => (
-				<Stack key={ index }>{ item }</Stack>
+				<React.Fragment key={ index }>
+					{ index > 0 && ' ' }
+					{ item }
+				</React.Fragment>
 			) ) }
-		</Stack>
+		</>
 	);
 } );

package/src/styles-inheritance/transformers/box-shadow-transformer.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
+import { type ReactNode } from 'react';
 import { createTransformer } from '@elementor/editor-canvas';
-import { Stack } from '@elementor/ui';
 
 type Shadow = {
 	hOffset?: string;
 	vOffset?: string;
 	blur?: string;
 	spread?: string;
-	color?: string;
+	color?: ReactNode;
 	position?: string | null;
 };
 
@@ -23,10 +23,8 @@ export const boxShadowTransformer = createTransformer( ( value: Shadow ) => {
 	const positionValue = position || 'outset';
 
 	return (
-		<Stack direction="column" gap={ 0.5 } pb={ 1 }>
-			<span>
-				{ colorValue } { positionValue }, { sizes }
-			</span>
-		</Stack>
+		<>
+			{ colorValue } { positionValue }, { sizes }
+		</>
 	);
 } );

package/src/styles-inheritance/transformers/repeater-to-items-transformer.tsx

@@ -1,8 +1,6 @@
-import * as React from 'react';
 import { type AnyTransformer, createTransformer } from '@elementor/editor-canvas';
-import { Stack } from '@elementor/ui';
 
-export const createRepeaterToItemsTransformer = ( originalTransformer: AnyTransformer, separator: string = ' ' ) => {
+export const createRepeaterToItemsTransformer = ( originalTransformer: AnyTransformer ) => {
 	return createTransformer( ( value: string, options: { key: string; signal?: AbortSignal } ) => {
 		const stringResult = originalTransformer( value, options );
 
@@ -10,18 +8,6 @@ export const createRepeaterToItemsTransformer = ( originalTransformer: AnyTransf
 			return stringResult;
 		}
 
-		const parts = stringResult.split( separator ).filter( Boolean );
-
-		if ( parts.length <= 1 ) {
-			return stringResult;
-		}
-
-		return (
-			<Stack direction="column" gap={ 0.5 }>
-				{ parts.map( ( part, index ) => (
-					<Stack key={ index }>{ part.trim() }</Stack>
-				) ) }
-			</Stack>
-		);
+		return stringResult;
 	} );
 };