@elementor/editor-editing-panel 4.1.0-723 → 4.1.0-724

package/package.json

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

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