@elementor/editor-editing-panel 4.0.0-manual → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.0.0-manual",
+  "version": "4.0.0",
   "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-manual",
-    "@elementor/editor-canvas": "4.0.0-manual",
-    "@elementor/editor-controls": "4.0.0-manual",
-    "@elementor/editor-documents": "4.0.0-manual",
-    "@elementor/editor-elements": "4.0.0-manual",
-    "@elementor/editor-interactions": "4.0.0-manual",
-    "@elementor/editor-panels": "4.0.0-manual",
-    "@elementor/editor-props": "4.0.0-manual",
-    "@elementor/editor-responsive": "4.0.0-manual",
-    "@elementor/editor-styles": "4.0.0-manual",
-    "@elementor/editor-styles-repository": "4.0.0-manual",
-    "@elementor/editor-ui": "4.0.0-manual",
-    "@elementor/editor-v1-adapters": "4.0.0-manual",
+    "@elementor/editor": "4.0.0",
+    "@elementor/editor-canvas": "4.0.0",
+    "@elementor/editor-controls": "4.0.0",
+    "@elementor/editor-documents": "4.0.0",
+    "@elementor/editor-elements": "4.0.0",
+    "@elementor/editor-interactions": "4.0.0",
+    "@elementor/editor-panels": "4.0.0",
+    "@elementor/editor-props": "4.0.0",
+    "@elementor/editor-responsive": "4.0.0",
+    "@elementor/editor-styles": "4.0.0",
+    "@elementor/editor-styles-repository": "4.0.0",
+    "@elementor/editor-ui": "4.0.0",
+    "@elementor/editor-v1-adapters": "4.0.0",
     "@elementor/icons": "^1.68.0",
-    "@elementor/editor-variables": "4.0.0-manual",
-    "@elementor/locations": "4.0.0-manual",
-    "@elementor/menus": "4.0.0-manual",
-    "@elementor/schema": "4.0.0-manual",
-    "@elementor/session": "4.0.0-manual",
+    "@elementor/editor-variables": "4.0.0",
+    "@elementor/locations": "4.0.0",
+    "@elementor/menus": "4.0.0",
+    "@elementor/schema": "4.0.0",
+    "@elementor/session": "4.0.0",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-manual",
-    "@elementor/wp-media": "4.0.0-manual",
+    "@elementor/utils": "4.0.0",
+    "@elementor/wp-media": "4.0.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/promotions/custom-css.tsx

@@ -5,6 +5,8 @@ import { __ } from '@wordpress/i18n';
 
 import { StyleTabSection } from '../style-tab-section';
 
+const TRACKING_DATA = { target_name: 'custom_css', location_l2: 'style' } as const;
+
 export const CustomCssSection = () => {
 	const triggerRef = useRef< PromotionTriggerRef >( null );
 
@@ -14,7 +16,9 @@ export const CustomCssSection = () => {
 				name: 'Custom CSS',
 				title: __( 'Custom CSS', 'elementor' ),
 				action: {
-					component: <PromotionTrigger ref={ triggerRef } promotionKey="customCss" />,
+					component: (
+						<PromotionTrigger ref={ triggerRef } promotionKey="customCss" trackingData={ TRACKING_DATA } />
+					),
 					onClick: () => triggerRef.current?.toggle(),
 				},
 			} }

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/settings-field.tsx

@@ -16,7 +16,12 @@ import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
-import { extractOrderedDependencies, getUpdatedValues, type Values } from '../utils/prop-dependency-utils';
+import {
+	extractOrderedDependencies,
+	getElementSettingsWithDefaults,
+	getUpdatedValues,
+	type Values,
+} from '../utils/prop-dependency-utils';
 import { createTopLevelObjectType } from './create-top-level-object-type';
 
 type SettingsFieldProps = {
@@ -27,20 +32,8 @@ type SettingsFieldProps = {
 
 const HISTORY_DEBOUNCE_WAIT = 800;
 
-const getElementSettigsWithDefaults = ( propsSchema: PropsSchema, elementSettings?: Props ) => {
-	const elementSettingsWithDefaults = { ...elementSettings };
-	Object.keys( propsSchema ).forEach( ( key ) => {
-		if ( ! ( key in elementSettingsWithDefaults ) ) {
-			if ( propsSchema[ key ].default !== null ) {
-				elementSettingsWithDefaults[ key ] = propsSchema[ key ].default as Values[ keyof Values ];
-			}
-		}
-	} );
-	return elementSettingsWithDefaults;
-};
-
 const extractDependencyEffect = ( bind: string, propsSchema: PropsSchema, currentElementSettings: Props ) => {
-	const elementSettingsForDepCheck = getElementSettigsWithDefaults( propsSchema, currentElementSettings );
+	const elementSettingsForDepCheck = getElementSettingsWithDefaults( propsSchema, currentElementSettings );
 	const propType = propsSchema[ bind ];
 	const depCheck = isDependencyMet( propType?.dependencies, elementSettingsForDepCheck );
 	const isHidden =

package/src/dynamics/components/dynamic-selection.tsx

@@ -1,6 +1,6 @@
-import { Fragment, useState } from 'react';
 import * as React from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
+import { Fragment, useEffect, useState } from 'react';
+import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp } from '@elementor/editor-controls';
 import { CtaButton, PopoverHeader, PopoverMenuList, SearchField, SectionPopoverBody } from '@elementor/editor-ui';
 import { DatabaseIcon } from '@elementor/icons';
 import { Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
@@ -50,6 +50,14 @@ export const DynamicSelection = ( { close: closePopover, expired = false }: Dyna
 
 	const hasNoDynamicTags = ! options.length && ! searchValue.trim();
 
+	useEffect( () => {
+		if ( hasNoDynamicTags ) {
+			trackViewPromotion( { target_name: 'dynamic_tags' } );
+		} else if ( expired ) {
+			trackViewPromotion( { target_name: 'dynamic_tags' } );
+		}
+	}, [ hasNoDynamicTags, expired ] );
+
 	const handleSearch = ( value: string ) => {
 		setSearchValue( value );
 	};
@@ -170,7 +178,11 @@ const NoDynamicTags = () => (
 			<Typography align="center" variant="caption" width={ PROMO_TEXT_WIDTH }>
 				{ __( 'Upgrade now to display your content dynamically.', 'elementor' ) }
 			</Typography>
-			<CtaButton size="small" href={ PRO_DYNAMIC_TAGS_URL } />
+			<CtaButton
+				size="small"
+				href={ PRO_DYNAMIC_TAGS_URL }
+				onClick={ () => trackUpgradePromotionClick( { target_name: 'dynamic_tags' } ) }
+			/>
 		</Stack>
 	</>
 );
@@ -194,7 +206,12 @@ const ExpiredDynamicTags = () => (
 			<Typography align="center" variant="caption" width={ PROMO_TEXT_WIDTH }>
 				{ __( 'Dynamic tags need Elementor Pro. Renew now to keep them active.', 'elementor' ) }
 			</Typography>
-			<CtaButton size="small" href={ RENEW_DYNAMIC_TAGS_URL } children={ __( 'Renew Now', 'elementor' ) } />
+			<CtaButton
+				size="small"
+				href={ RENEW_DYNAMIC_TAGS_URL }
+				onClick={ () => trackUpgradePromotionClick( { target_name: 'dynamic_tags' } ) }
+				children={ __( 'Renew Now', 'elementor' ) }
+			/>
 		</Stack>
 	</>
 );

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

package/src/utils/prop-dependency-utils.ts

@@ -3,6 +3,7 @@ import {
 	type DependencyTerm,
 	extractValue,
 	isDependencyMet,
+	type Props,
 	type PropsSchema,
 	type PropType,
 	type TransformablePropValue,
@@ -13,6 +14,17 @@ type Value = TransformablePropValue< string > | null;
 
 export type Values = Record< string, Value >;
 
+export function getElementSettingsWithDefaults( propsSchema: PropsSchema, elementSettings?: Props ): Values {
+	const elementSettingsWithDefaults = { ...elementSettings };
+	Object.keys( propsSchema ).forEach( ( key ) => {
+		if ( elementSettingsWithDefaults[ key ] === null && propsSchema[ key ].default !== null ) {
+			elementSettingsWithDefaults[ key ] = propsSchema[ key ].default as Values[ keyof Values ];
+		}
+	} );
+
+	return elementSettingsWithDefaults as Values;
+}
+
 export function extractOrderedDependencies( dependenciesPerTargetMapping: Record< string, string[] > ): string[] {
 	return Object.values( dependenciesPerTargetMapping )
 		.flat()