@elementor/editor-components 4.0.0-manual → 4.0.1

package/src/utils/detach-component-instance/regenerate-local-style-ids.ts

@@ -0,0 +1,53 @@
+import { generateElementId, type V1ElementData, type V1ElementSettingsProps } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue, type PropValue } from '@elementor/editor-props';
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+
+// Ts version for atomic-widgets/assets/js/editor/utils/regenerate-local-style-ids.js
+export function regenerateLocalStyleIds( element: V1ElementData ): {
+	styles: Record< StyleDefinitionID, StyleDefinition > | undefined;
+	settings: V1ElementSettingsProps | undefined;
+} {
+	const originalStyles = element.styles;
+
+	if ( ! originalStyles || Object.keys( originalStyles ).length === 0 ) {
+		return { styles: undefined, settings: undefined };
+	}
+
+	const newStyles: Record< string, StyleDefinition > = {};
+	const styleIdMapping: Record< string, string > = {};
+
+	for ( const [ originalStyleId, style ] of Object.entries( originalStyles ) ) {
+		const newStyleId = generateLocalStyleId( element.id );
+
+		newStyles[ newStyleId ] = { ...style, id: newStyleId };
+		styleIdMapping[ originalStyleId ] = newStyleId;
+	}
+
+	const settings = element.settings;
+	if ( ! settings || Object.keys( settings ).length === 0 ) {
+		return { styles: newStyles, settings: undefined };
+	}
+
+	const updatedSettings = { ...settings };
+
+	for ( const [ propKey, propValue ] of Object.entries( updatedSettings ) ) {
+		if ( isClassesProp( propValue ) && propValue.value.length > 0 ) {
+			const updatedClasses = propValue.value.map( ( classId ) => styleIdMapping[ classId ] ?? classId );
+
+			updatedSettings[ propKey ] = classesPropTypeUtil.create( updatedClasses );
+		}
+	}
+
+	return {
+		styles: newStyles,
+		settings: updatedSettings,
+	};
+}
+
+function isClassesProp( prop: PropValue ): prop is ClassesPropValue {
+	return classesPropTypeUtil.isValid( prop );
+}
+
+function generateLocalStyleId( elementId: string ): string {
+	return `e-${ elementId }-${ generateElementId() }`;
+}

package/src/utils/detach-component-instance/resolve-detached-instance.ts

@@ -0,0 +1,94 @@
+import { generateElementId, type V1ElementData } from '@elementor/editor-elements';
+import { type PropValue } from '@elementor/editor-props';
+
+import {
+	type ComponentInstanceOverrideProp,
+	componentInstanceOverridePropTypeUtil,
+} from '../../prop-types/component-instance-override-prop-type';
+import { type ComponentInstanceOverride } from '../../prop-types/component-instance-overrides-prop-type';
+import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { regenerateLocalStyleIds } from './regenerate-local-style-ids';
+import { resolveOverridableSettings } from './resolve-overridable-settings';
+
+/**
+ * Creates detached element from component instance
+ * by applying overrides, reverting overridables, and regenerating IDs.
+ * This is used when detaching a component instance from its origin component.
+ *
+ * The function goes through all nested elements recursively and:
+ * - Regenerates element IDs and local style IDs
+ * - Resolves overridable settings - applies all instance overrides to element settings,
+ * or replaces overridable with origin_value when no matching override exists.
+ *
+ * @param element   - The component's root element
+ * @param overrides - Array of overrides from the component instance
+ * @return A new element data with all overrides applied and new IDs
+ */
+export function resolveDetachedInstance(
+	element: V1ElementData,
+	overrides: ComponentInstanceOverride[]
+): V1ElementData {
+	const overrideMap = createOverrideMap( overrides );
+
+	return resolveElementRecursive( structuredClone( element ), overrideMap );
+}
+
+function resolveElementRecursive(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementData {
+	element.id = generateElementId();
+
+	if ( element.styles ) {
+		const { styles, settings } = regenerateLocalStyleIds( element );
+
+		element.styles = styles;
+		if ( settings ) {
+			element.settings = { ...element.settings, ...settings };
+		}
+	}
+
+	if ( element.settings ) {
+		element.settings = resolveOverridableSettings( element, overrideMap );
+	}
+
+	if ( element.elements?.length ) {
+		element.elements = element.elements.map( ( child ) => resolveElementRecursive( child, overrideMap ) );
+	}
+
+	return element;
+}
+
+function createOverrideMap( overrides: ComponentInstanceOverride[] ): Map< string, ComponentInstanceOverrideProp > {
+	const map = new Map< string, ComponentInstanceOverrideProp >();
+
+	overrides.forEach( ( item ) => {
+		let override: ComponentInstanceOverrideProp | null = null;
+
+		if ( componentInstanceOverridePropTypeUtil.isValid( item ) ) {
+			override = item;
+		} else if ( componentOverridablePropTypeUtil.isValid( item ) ) {
+			override = getOverridableOverride( item );
+		}
+
+		if ( override ) {
+			const overrideKey = override.value.override_key;
+			map.set( overrideKey, override );
+		}
+	} );
+
+	return map;
+}
+
+export function getOverridableOverride( propValue: PropValue ): ComponentInstanceOverrideProp | null {
+	if ( ! componentOverridablePropTypeUtil.isValid( propValue ) ) {
+		return null;
+	}
+
+	const originValue = componentOverridablePropTypeUtil.extract( propValue )?.origin_value;
+	if ( ! componentInstanceOverridePropTypeUtil.isValid( originValue ) ) {
+		return null;
+	}
+
+	return originValue;
+}

package/src/utils/detach-component-instance/resolve-overridable-settings.ts

@@ -0,0 +1,121 @@
+import { type V1ElementData, type V1ElementSettingsProps } from '@elementor/editor-elements';
+import { type PropValue } from '@elementor/editor-props';
+
+import {
+	type ComponentInstanceOverrideProp,
+	componentInstanceOverridePropTypeUtil,
+} from '../../prop-types/component-instance-override-prop-type';
+import {
+	type ComponentInstanceProp,
+	componentInstancePropTypeUtil,
+} from '../../prop-types/component-instance-prop-type';
+import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { isComponentInstance } from '../is-component-instance';
+
+export function resolveOverridableSettings(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementSettingsProps {
+	if ( isComponentInstance( { widgetType: element.widgetType, elType: element.elType } ) ) {
+		return resolveOverridableSettingsForComponentInstance( element, overrideMap );
+	}
+
+	return resolveOverridableSettingsForElement( element, overrideMap );
+}
+
+function resolveOverridableSettingsForElement(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementSettingsProps {
+	const updatedSettings = element.settings ? { ...element.settings } : {};
+
+	for ( const [ settingKey, settingValue ] of Object.entries( element.settings ?? {} ) ) {
+		updatedSettings[ settingKey ] = resolvePropValue( settingValue, overrideMap );
+	}
+
+	return updatedSettings;
+}
+
+function resolveOverridableSettingsForComponentInstance(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementSettingsProps {
+	const componentInstance = element.settings?.component_instance as ComponentInstanceProp | undefined;
+
+	if ( ! componentInstancePropTypeUtil.isValid( componentInstance ) ) {
+		return element.settings ?? {};
+	}
+
+	const instanceOverrides = componentInstance.value.overrides?.value;
+
+	if ( ! instanceOverrides?.length ) {
+		return element.settings ?? {};
+	}
+
+	const updatedOverrides = instanceOverrides.map( ( item ) =>
+		resolvePropValue( item, overrideMap, { isOverridableOverride: true } )
+	);
+
+	return {
+		...element.settings,
+		component_instance: {
+			...componentInstance,
+			value: {
+				...componentInstance.value,
+				overrides: {
+					...componentInstance.value.overrides,
+					value: updatedOverrides,
+				},
+			},
+		},
+	};
+}
+
+function resolvePropValue(
+	propValue: PropValue,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >,
+	options?: { isOverridableOverride?: boolean }
+): PropValue | null {
+	const { isOverridableOverride = false } = options ?? {};
+
+	// if it's not an overridable, return the prop value as is
+	if ( ! componentOverridablePropTypeUtil.isValid( propValue ) ) {
+		return propValue;
+	}
+
+	const overridableKey = propValue.value.override_key;
+	const matchingOverride = overrideMap.get( overridableKey );
+
+	const originValue = componentOverridablePropTypeUtil.extract( propValue )?.origin_value;
+
+	// if no matching override, return the overridable's origin value
+	if ( ! matchingOverride ) {
+		return originValue;
+	}
+
+	if ( isOverridableOverride ) {
+		return resolveOverridableOverride( matchingOverride, originValue );
+	}
+
+	// for regular props, when there's a matching override, return the matching override value
+	const matchingOverrideValue = componentInstanceOverridePropTypeUtil.extract( matchingOverride )
+		?.override_value as PropValue | null;
+	return matchingOverrideValue;
+}
+
+function resolveOverridableOverride(
+	matchingOverride: ComponentInstanceOverrideProp,
+	originValue: PropValue
+): ComponentInstanceOverrideProp | null {
+	if ( ! originValue || ! componentInstanceOverridePropTypeUtil.isValid( originValue ) ) {
+		return null;
+	}
+
+	// for overridable overrides, we should create a new override with the matching override value
+	// but keep the origin value's override key and schema source, so they'll match the inner component.
+	return componentInstanceOverridePropTypeUtil.create( {
+		override_value: matchingOverride.value.override_value,
+		override_key: originValue.value.override_key,
+		schema_source: originValue.value.schema_source,
+	} );
+}

package/src/utils/is-component-instance.ts

@@ -1,6 +1,6 @@
 import { type V1ElementModelProps } from '@elementor/editor-elements';
 
-import { COMPONENT_WIDGET_TYPE } from '../create-component-type';
+import { COMPONENT_WIDGET_TYPE } from '../consts';
 
 export function isComponentInstance( elementModel: Partial< V1ElementModelProps > ) {
 	return [ elementModel.widgetType, elementModel.elType ].includes( COMPONENT_WIDGET_TYPE );

package/src/utils/is-pro-components-supported.ts

@@ -0,0 +1,11 @@
+import { hasProInstalled, isProAtLeast } from '@elementor/utils';
+
+const MIN_PRO_VERSION_FOR_COMPONENTS = '4.0';
+
+export function isProComponentsSupported(): boolean {
+	return hasProInstalled() && isProAtLeast( MIN_PRO_VERSION_FOR_COMPONENTS );
+}
+
+export function isProOutdatedForComponents(): boolean {
+	return hasProInstalled() && ! isProAtLeast( MIN_PRO_VERSION_FOR_COMPONENTS );
+}

package/src/utils/tracking.ts

@@ -17,7 +17,8 @@ type ComponentEventData = Record< string, unknown > & {
 		| 'propertyExposed'
 		| 'propertyRemoved'
 		| 'propertiesPanelOpened'
-		| 'propertiesGroupCreated';
+		| 'propertiesGroupCreated'
+		| 'detached';
 	source: Source;
 };
 

package/src/extended/components/component-introduction.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import { PopoverContent } from '@elementor/editor-controls';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { Box, Button, Image, Link, Popover, Stack, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-export const ComponentIntroduction = ( {
-	anchorRef,
-	shouldShowIntroduction,
-	onClose,
-}: {
-	anchorRef: React.RefObject< HTMLElement >;
-	shouldShowIntroduction: boolean;
-	onClose: () => void;
-} ) => {
-	if ( ! anchorRef.current || ! shouldShowIntroduction ) {
-		return null;
-	}
-
-	return (
-		<Popover
-			anchorEl={ anchorRef.current }
-			open={ shouldShowIntroduction }
-			anchorOrigin={ {
-				vertical: 'top',
-				horizontal: 'right',
-			} }
-			transformOrigin={ {
-				vertical: 'top',
-				horizontal: -30,
-			} }
-			onClose={ onClose }
-		>
-			<Box sx={ { width: '296px' } }>
-				<PopoverHeader title={ __( 'Add your first property', 'elementor' ) } onClose={ onClose } />
-				<Image
-					sx={ { width: '296px', height: '160px' } }
-					src={ 'https://assets.elementor.com/packages/v1/images/components-properties-intro.png' }
-					alt={ '' }
-				/>
-				<PopoverContent>
-					<Stack sx={ { p: 2 } }>
-						<Typography variant={ 'body2' }>
-							{ __( 'Properties make instances flexible.', 'elementor' ) }
-						</Typography>
-						<Typography variant={ 'body2' }>
-							{ __(
-								'Select any Element, then in the General tab, click next to any setting you want users to customize - like text, images, or links.',
-								'elementor'
-							) }
-						</Typography>
-						<Typography variant={ 'body2' } sx={ { mt: 2 } }>
-							{ __(
-								'Your properties will appear in the Properties panel, where you can organize and manage them anytime.',
-								'elementor'
-							) }
-						</Typography>
-						<Link
-							href="http://go.elementor.com/components-guide"
-							target="_blank"
-							sx={ { mt: 2 } }
-							color="info.main"
-							variant="body2"
-						>
-							{ __( 'Learn more', 'elementor' ) }
-						</Link>
-						<Stack direction="row" alignItems="center" justifyContent="flex-end" sx={ { pt: 1 } }>
-							<Button size="medium" variant="contained" onClick={ onClose }>
-								{ __( 'Got it', 'elementor' ) }
-							</Button>
-						</Stack>
-					</Stack>
-				</PopoverContent>
-			</Box>
-		</Popover>
-	);
-};

package/src/extended/components/component-panel-header/component-badge.tsx

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { useEffect, useRef } from 'react';
-import { ComponentPropListIcon } from '@elementor/icons';
-import { Badge, Box, keyframes, styled, ToggleButton, Tooltip } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-export const ComponentsBadge = React.forwardRef<
-	HTMLDivElement,
-	{ overridablePropsCount: number; onClick: () => void }
->( ( { overridablePropsCount, onClick }, ref ) => {
-	const prevCount = usePrevious( overridablePropsCount );
-
-	const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
-
-	return (
-		<StyledBadge
-			ref={ ref }
-			color="primary"
-			key={ overridablePropsCount }
-			invisible={ overridablePropsCount === 0 }
-			animate={ isFirstExposedProperty }
-			anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
-			badgeContent={
-				<Box sx={ { animation: ! isFirstExposedProperty ? `${ slideUp } 300ms ease-out` : 'none' } }>
-					{ overridablePropsCount }
-				</Box>
-			}
-		>
-			<Tooltip title={ __( 'Component properties', 'elementor' ) }>
-				<ToggleButton
-					value="exposed properties"
-					size="tiny"
-					onClick={ onClick }
-					aria-label={ __( 'Component properties', 'elementor' ) }
-				>
-					<ComponentPropListIcon fontSize="tiny" />
-				</ToggleButton>
-			</Tooltip>
-		</StyledBadge>
-	);
-} );
-
-const StyledBadge = styled( Badge, { shouldForwardProp: ( prop ) => prop !== 'animate' } )(
-	( { theme, animate } ) => ( {
-		'& .MuiBadge-badge': {
-			minWidth: theme.spacing( 2 ),
-			height: theme.spacing( 2 ),
-			minHeight: theme.spacing( 2 ),
-			maxWidth: theme.spacing( 2 ),
-			fontSize: theme.typography.caption.fontSize as string,
-			animation: animate ? `${ bounceIn } 300ms ease-out` : 'none',
-		},
-	} )
-);
-
-function usePrevious< T >( value: T ) {
-	const ref = useRef< T >( value );
-	useEffect( () => {
-		ref.current = value;
-	}, [ value ] );
-	return ref.current;
-}
-
-const bounceIn = keyframes`
-	0% { transform: scale(0) translate(50%, 50%); opacity: 0; }
-	70% { transform: scale(1.1) translate(50%, -50%); opacity: 1; }
-	100% { transform: scale(1) translate(50%, -50%); opacity: 1; }
-`;
-
-const slideUp = keyframes`
-	from { transform: translateY(100%); opacity: 0; }
-	to { transform: translateY(0); opacity: 1; }
-`;

package/src/extended/components/component-panel-header/component-panel-header.tsx

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { useSuppressedMessage } from '@elementor/editor-current-user';
-import { getV1DocumentsManager } from '@elementor/editor-documents';
-import { PanelHeader } from '@elementor/editor-panels';
-import { EllipsisWithTooltip } from '@elementor/editor-ui';
-import { ArrowLeftIcon, ComponentsFilledIcon } from '@elementor/icons';
-import { __getState as getState } from '@elementor/store';
-import { Box, Divider, IconButton, Tooltip, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useSanitizeOverridableProps } from '../../../hooks/use-sanitize-overridable-props';
-import { type ComponentsSlice, SLICE_NAME, useCurrentComponent } from '../../../store/store';
-import { trackComponentEvent } from '../../../utils/tracking';
-import { useNavigateBack } from '../../hooks/use-navigate-back';
-import { ComponentIntroduction } from '../component-introduction';
-import { usePanelActions } from '../component-properties-panel/component-properties-panel';
-import { ComponentsBadge } from './component-badge';
-
-const MESSAGE_KEY = 'components-properties-introduction';
-
-export const ComponentPanelHeader = () => {
-	const { id: currentComponentId, uid: componentUid } = useCurrentComponent() ?? { id: null, uid: null };
-	const overridableProps = useSanitizeOverridableProps( currentComponentId );
-	const onBack = useNavigateBack();
-	const componentName = getComponentName();
-	const [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( MESSAGE_KEY );
-	const [ shouldShowIntroduction, setShouldShowIntroduction ] = React.useState( ! isMessageSuppressed );
-
-	const { open: openPropertiesPanel } = usePanelActions();
-
-	const overridablePropsCount = overridableProps ? Object.keys( overridableProps.props ).length : 0;
-	const anchorRef = React.useRef< HTMLDivElement >( null );
-
-	if ( ! currentComponentId ) {
-		return null;
-	}
-
-	const handleCloseIntroduction = () => {
-		suppressMessage();
-		setShouldShowIntroduction( false );
-	};
-
-	const handleOpenPropertiesPanel = () => {
-		openPropertiesPanel();
-
-		trackComponentEvent( {
-			action: 'propertiesPanelOpened',
-			source: 'user',
-			component_uid: componentUid,
-			properties_count: overridablePropsCount,
-		} );
-	};
-
-	return (
-		<Box data-testid="component-panel-header">
-			<PanelHeader sx={ { justifyContent: 'start', px: 2 } }>
-				<Tooltip title={ __( 'Back', 'elementor' ) }>
-					<IconButton size="tiny" onClick={ onBack } aria-label={ __( 'Back', 'elementor' ) }>
-						<ArrowLeftIcon fontSize="tiny" />
-					</IconButton>
-				</Tooltip>
-				<ComponentsFilledIcon fontSize="tiny" stroke="currentColor" />
-				<EllipsisWithTooltip
-					title={ componentName }
-					as={ Typography }
-					variant="caption"
-					sx={ { fontWeight: 500, flexGrow: 1 } }
-				/>
-				<ComponentsBadge
-					overridablePropsCount={ overridablePropsCount }
-					ref={ anchorRef }
-					onClick={ handleOpenPropertiesPanel }
-				/>
-			</PanelHeader>
-			<Divider />
-			<ComponentIntroduction
-				anchorRef={ anchorRef }
-				shouldShowIntroduction={ shouldShowIntroduction }
-				onClose={ handleCloseIntroduction }
-			/>
-		</Box>
-	);
-};
-
-function getComponentName(): string {
-	const state = getState() as ComponentsSlice;
-	const path = state[ SLICE_NAME ].path;
-	const { instanceTitle } = path.at( -1 ) ?? {};
-
-	if ( instanceTitle ) {
-		return instanceTitle;
-	}
-
-	const documentsManager = getV1DocumentsManager();
-	const currentDocument = documentsManager.getCurrent();
-
-	return currentDocument?.container?.settings?.get( 'post_title' ) ?? '';
-}