@elementor/editor-components 3.35.0-479 → 3.35.0-481

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-479",
+  "version": "3.35.0-481",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-479",
-    "@elementor/editor-canvas": "3.35.0-479",
-    "@elementor/editor-controls": "3.35.0-479",
-    "@elementor/editor-documents": "3.35.0-479",
-    "@elementor/editor-editing-panel": "3.35.0-479",
-    "@elementor/editor-elements": "3.35.0-479",
-    "@elementor/editor-elements-panel": "3.35.0-479",
-    "@elementor/editor-mcp": "3.35.0-479",
-    "@elementor/editor-panels": "3.35.0-479",
-    "@elementor/editor-props": "3.35.0-479",
-    "@elementor/editor-styles-repository": "3.35.0-479",
-    "@elementor/editor-ui": "3.35.0-479",
-    "@elementor/editor-v1-adapters": "3.35.0-479",
-    "@elementor/http-client": "3.35.0-479",
+    "@elementor/editor": "3.35.0-481",
+    "@elementor/editor-canvas": "3.35.0-481",
+    "@elementor/editor-controls": "3.35.0-481",
+    "@elementor/editor-documents": "3.35.0-481",
+    "@elementor/editor-editing-panel": "3.35.0-481",
+    "@elementor/editor-elements": "3.35.0-481",
+    "@elementor/editor-elements-panel": "3.35.0-481",
+    "@elementor/editor-mcp": "3.35.0-481",
+    "@elementor/editor-panels": "3.35.0-481",
+    "@elementor/editor-props": "3.35.0-481",
+    "@elementor/editor-styles-repository": "3.35.0-481",
+    "@elementor/editor-ui": "3.35.0-481",
+    "@elementor/editor-v1-adapters": "3.35.0-481",
+    "@elementor/http-client": "3.35.0-481",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-479",
-    "@elementor/query": "3.35.0-479",
-    "@elementor/schema": "3.35.0-479",
-    "@elementor/store": "3.35.0-479",
+    "@elementor/mixpanel": "3.35.0-481",
+    "@elementor/query": "3.35.0-481",
+    "@elementor/schema": "3.35.0-481",
+    "@elementor/store": "3.35.0-481",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-479",
+    "@elementor/utils": "3.35.0-481",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-479",
-    "@elementor/editor-current-user": "3.35.0-479"
+    "@elementor/editor-notifications": "3.35.0-481",
+    "@elementor/editor-current-user": "3.35.0-481"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/api.ts

@@ -100,21 +100,23 @@ export const apiClient = {
 				},
 			} )
 			.then( ( res ) => res.data.data ),
-	updateArchivedComponents: async ( componentIds: number[] ) =>
+	updateArchivedComponents: async ( componentIds: number[], status: DocumentSaveStatus ) =>
 		await httpService()
 			.post< { data: { failedIds: number[]; successIds: number[]; success: boolean } } >(
 				`${ BASE_URL }/archive`,
 				{
 					componentIds,
+					status,
 				}
 			)
 			.then( ( res ) => res.data.data ),
-	updateComponentTitle: ( updatedComponentNames: UpdatedComponentName[] ) =>
+	updateComponentTitle: ( updatedComponentNames: UpdatedComponentName[], status: DocumentSaveStatus ) =>
 		httpService()
 			.post< { data: { failedIds: number[]; successIds: number[]; success: boolean } } >(
 				`${ BASE_URL }/update-titles`,
 				{
 					components: updatedComponentNames,
+					status,
 				}
 			)
 			.then( ( res ) => res.data.data ),

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

@@ -1,9 +1,11 @@
 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, Stack, Tooltip, Typography } from '@elementor/ui';
+import { Box, Divider, IconButton, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useNavigateBack } from '../../hooks/use-navigate-back';
@@ -51,31 +53,25 @@ export const ComponentPanelHeader = () => {
 
 	return (
 		<Box>
-			<Stack
-				direction="row"
-				alignItems="center"
-				justifyContent="space-between"
-				sx={ { height: 48, pl: 1.5, pr: 2, py: 1 } }
-			>
-				<Stack direction="row" alignItems="center">
-					<Tooltip title={ __( 'Back', 'elementor' ) }>
-						<IconButton size="tiny" onClick={ onBack } aria-label={ __( 'Back', 'elementor' ) }>
-							<ArrowLeftIcon fontSize="tiny" />
-						</IconButton>
-					</Tooltip>
-					<Stack direction="row" alignItems="center" gap={ 0.5 }>
-						<ComponentsFilledIcon fontSize="tiny" stroke="currentColor" />
-						<Typography variant="caption" sx={ { fontWeight: 500 } }>
-							{ componentName }
-						</Typography>
-					</Stack>
-				</Stack>
+			<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 }
 				/>
-			</Stack>
+			</PanelHeader>
 			<Divider />
 			<ComponentIntroduction
 				anchorRef={ anchorRef }

package/src/components/component-properties-panel/properties-group.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EditableField, MenuListItem } from '@elementor/editor-ui';
+import { EditableField, EllipsisWithTooltip, MenuListItem } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
 import {
 	bindMenu,
@@ -101,7 +101,6 @@ export function PropertiesGroup( {
 						{ isThisGroupEditing ? (
 							<Box
 								sx={ {
-									flex: 1,
 									height: 28,
 									display: 'flex',
 									alignItems: 'center',
@@ -109,6 +108,11 @@ export function PropertiesGroup( {
 									borderColor: 'text.secondary',
 									borderRadius: 1,
 									pl: 0.5,
+									flexGrow: 1,
+									overflow: 'hidden',
+									textOverflow: 'ellipsis',
+									whiteSpace: 'nowrap',
+									width: '100%',
 								} }
 							>
 								<EditableField
@@ -121,12 +125,12 @@ export function PropertiesGroup( {
 								/>
 							</Box>
 						) : (
-							<Typography
+							<EllipsisWithTooltip
+								title={ group.label }
+								as={ Typography }
 								variant="caption"
 								sx={ { color: 'text.primary', fontWeight: 400, lineHeight: 1.66 } }
-							>
-								{ group.label }
-							</Typography>
+							/>
 						) }
 						<IconButton
 							className="group-menu"

package/src/sync/before-save.ts

@@ -3,10 +3,10 @@ import { type V1Element, type V1ElementData } from '@elementor/editor-elements';
 
 import { type DocumentSaveStatus } from '../types';
 import { createComponentsBeforeSave } from './create-components-before-save';
+import { publishDraftComponentsInPageBeforeSave } from './publish-draft-components-in-page-before-save';
 import { setComponentOverridablePropsSettingsBeforeSave } from './set-component-overridable-props-settings-before-save';
 import { updateArchivedComponentBeforeSave } from './update-archived-component-before-save';
 import { updateComponentTitleBeforeSave } from './update-component-title-before-save';
-import { updateComponentsBeforeSave } from './update-components-before-save';
 
 type Options = {
 	container: V1Element & {
@@ -24,10 +24,29 @@ export const beforeSave = ( { container, status }: Options ) => {
 	const elements = container?.model.get( 'elements' ).toJSON?.() ?? [];
 
 	return Promise.all( [
-		updateArchivedComponentBeforeSave(),
-		createComponentsBeforeSave( { elements, status } ),
-		updateComponentsBeforeSave( { elements, status } ),
+		syncComponents( { elements, status } ),
 		setComponentOverridablePropsSettingsBeforeSave( { container } ),
-		updateComponentTitleBeforeSave(),
 	] );
 };
+
+// These operations run sequentially to prevent race conditions when multiple
+// edits occur on the same component simultaneously.
+// TODO: Consolidate these into a single PUT /components endpoint.
+const syncComponents = async ( { elements, status }: { elements: V1ElementData[]; status: DocumentSaveStatus } ) => {
+	// This order is important - first update existing components, then create new components,
+	// Since new component validation depends on the existing components (preventing duplicate names).
+	await updateExistingComponentsBeforeSave( { elements, status } );
+	await createComponentsBeforeSave( { elements, status } );
+};
+
+const updateExistingComponentsBeforeSave = async ( {
+	elements,
+	status,
+}: {
+	elements: V1ElementData[];
+	status: DocumentSaveStatus;
+} ) => {
+	await updateComponentTitleBeforeSave( status );
+	await updateArchivedComponentBeforeSave( status );
+	await publishDraftComponentsInPageBeforeSave( { elements, status } );
+};

package/src/sync/{update-components-before-save.ts → publish-draft-components-in-page-before-save.ts}

@@ -11,7 +11,7 @@ type Options = {
 	elements: V1ElementData[];
 };
 
-export async function updateComponentsBeforeSave( { status, elements }: Options ) {
+export async function publishDraftComponentsInPageBeforeSave( { status, elements }: Options ) {
 	if ( status !== 'publish' ) {
 		return;
 	}

package/src/sync/update-archived-component-before-save.ts

@@ -3,6 +3,7 @@ import { __getState as getState } from '@elementor/store';
 
 import { apiClient } from '../api';
 import { selectArchivedThisSession } from '../store/store';
+import { type DocumentSaveStatus } from '../types';
 
 const failedNotification = ( message: string ): NotificationData => ( {
 	type: 'error',
@@ -10,7 +11,7 @@ const failedNotification = ( message: string ): NotificationData => ( {
 	id: 'failed-archived-components-notification',
 } );
 
-export const updateArchivedComponentBeforeSave = async () => {
+export const updateArchivedComponentBeforeSave = async ( status: DocumentSaveStatus ) => {
 	try {
 		const archivedComponents = selectArchivedThisSession( getState() );
 
@@ -18,7 +19,7 @@ export const updateArchivedComponentBeforeSave = async () => {
 			return;
 		}
 
-		const result = await apiClient.updateArchivedComponents( archivedComponents );
+		const result = await apiClient.updateArchivedComponents( archivedComponents, status );
 
 		const failedIds = result.failedIds.join( ', ' );
 

package/src/sync/update-component-title-before-save.ts

@@ -2,15 +2,16 @@ import { __dispatch as dispatch, __getState as getState } from '@elementor/store
 
 import { apiClient } from '../api';
 import { selectUpdatedComponentNames, slice } from '../store/store';
+import { type DocumentSaveStatus } from '../types';
 
-export const updateComponentTitleBeforeSave = async () => {
+export const updateComponentTitleBeforeSave = async ( status: DocumentSaveStatus ) => {
 	const updatedComponentNames = selectUpdatedComponentNames( getState() );
 
 	if ( ! updatedComponentNames.length ) {
 		return;
 	}
 
-	const result = await apiClient.updateComponentTitle( updatedComponentNames );
+	const result = await apiClient.updateComponentTitle( updatedComponentNames, status );
 
 	if ( result.failedIds.length === 0 ) {
 		dispatch( slice.actions.cleanUpdatedComponentNames() );