@elementor/editor-components 3.35.0-426 → 3.35.0-428

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-426",
+  "version": "3.35.0-428",
   "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-426",
-    "@elementor/editor-canvas": "3.35.0-426",
-    "@elementor/editor-controls": "3.35.0-426",
-    "@elementor/editor-documents": "3.35.0-426",
-    "@elementor/editor-editing-panel": "3.35.0-426",
-    "@elementor/editor-elements": "3.35.0-426",
-    "@elementor/editor-elements-panel": "3.35.0-426",
-    "@elementor/editor-mcp": "3.35.0-426",
-    "@elementor/editor-panels": "3.35.0-426",
-    "@elementor/editor-props": "3.35.0-426",
-    "@elementor/editor-styles-repository": "3.35.0-426",
-    "@elementor/editor-ui": "3.35.0-426",
-    "@elementor/editor-v1-adapters": "3.35.0-426",
-    "@elementor/http-client": "3.35.0-426",
+    "@elementor/editor": "3.35.0-428",
+    "@elementor/editor-canvas": "3.35.0-428",
+    "@elementor/editor-controls": "3.35.0-428",
+    "@elementor/editor-documents": "3.35.0-428",
+    "@elementor/editor-editing-panel": "3.35.0-428",
+    "@elementor/editor-elements": "3.35.0-428",
+    "@elementor/editor-elements-panel": "3.35.0-428",
+    "@elementor/editor-mcp": "3.35.0-428",
+    "@elementor/editor-panels": "3.35.0-428",
+    "@elementor/editor-props": "3.35.0-428",
+    "@elementor/editor-styles-repository": "3.35.0-428",
+    "@elementor/editor-ui": "3.35.0-428",
+    "@elementor/editor-v1-adapters": "3.35.0-428",
+    "@elementor/http-client": "3.35.0-428",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-426",
-    "@elementor/query": "3.35.0-426",
-    "@elementor/schema": "3.35.0-426",
-    "@elementor/store": "3.35.0-426",
+    "@elementor/mixpanel": "3.35.0-428",
+    "@elementor/query": "3.35.0-428",
+    "@elementor/schema": "3.35.0-428",
+    "@elementor/store": "3.35.0-428",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-426",
+    "@elementor/utils": "3.35.0-428",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-426",
-    "@elementor/editor-current-user": "3.35.0-426"
+    "@elementor/editor-notifications": "3.35.0-428",
+    "@elementor/editor-current-user": "3.35.0-428"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/components-tab/components-item.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';
 import { dropElement, type DropElementParams, type V1ElementData } from '@elementor/editor-elements';
 import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
@@ -26,6 +26,7 @@ import { type Component } from '../../types';
 import { validateComponentName } from '../../utils/component-name-validation';
 import { getContainerForNewElement } from '../../utils/get-container-for-new-element';
 import { createComponentModel } from '../create-component-form/utils/replace-element-with-component';
+import { DeleteConfirmationDialog } from './delete-confirmation-dialog';
 
 type ComponentItemProps = {
 	component: Omit< Component, 'id' > & { id?: number };
@@ -34,6 +35,7 @@ type ComponentItemProps = {
 
 export const ComponentItem = ( { component, renameComponent }: ComponentItemProps ) => {
 	const itemRef = useRef< HTMLElement >( null );
+	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
 
 	const {
 		ref: editableRef,
@@ -63,16 +65,24 @@ export const ComponentItem = ( { component, renameComponent }: ComponentItemProp
 		endDragElementFromPanel();
 	};
 
-	const handleArchiveClick = () => {
+	const handleDeleteClick = () => {
 		popupState.close();
+		setIsDeleteDialogOpen( true );
+	};
 
+	const handleDeleteConfirm = () => {
 		if ( ! component.id ) {
 			throw new Error( 'Component ID is required' );
 		}
 
+		setIsDeleteDialogOpen( false );
 		archiveComponent( component.id, component.name );
 	};
 
+	const handleDeleteDialogClose = () => {
+		setIsDeleteDialogOpen( false );
+	};
+
 	return (
 		<Stack>
 			<WarningInfotip
@@ -155,12 +165,17 @@ export const ComponentItem = ( { component, renameComponent }: ComponentItemProp
 				>
 					{ __( 'Rename', 'elementor' ) }
 				</MenuListItem>
-				<MenuListItem sx={ { minWidth: '160px' } } onClick={ handleArchiveClick }>
+				<MenuListItem sx={ { minWidth: '160px' } } onClick={ handleDeleteClick }>
 					<Typography variant="caption" sx={ { color: 'error.light' } }>
 						{ __( 'Delete', 'elementor' ) }
 					</Typography>
 				</MenuListItem>
 			</Menu>
+			<DeleteConfirmationDialog
+				open={ isDeleteDialogOpen }
+				onClose={ handleDeleteDialogClose }
+				onConfirm={ handleDeleteConfirm }
+			/>
 		</Stack>
 	);
 };

package/src/components/components-tab/delete-confirmation-dialog.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ConfirmationDialog } from '@elementor/editor-ui';
+import { __ } from '@wordpress/i18n';
+
+type DeleteConfirmationDialogProps = {
+	open: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+};
+
+export function DeleteConfirmationDialog( { open, onClose, onConfirm }: DeleteConfirmationDialogProps ) {
+	return (
+		<ConfirmationDialog open={ open } onClose={ onClose }>
+			<ConfirmationDialog.Title>{ __( 'Delete this component?', 'elementor' ) }</ConfirmationDialog.Title>
+			<ConfirmationDialog.Content>
+				<ConfirmationDialog.ContentText>
+					{ __(
+						'Existing instances on your pages will remain functional. You will no longer find this component in your list.',
+						'elementor'
+					) }
+				</ConfirmationDialog.ContentText>
+			</ConfirmationDialog.Content>
+			<ConfirmationDialog.Actions onClose={ onClose } onConfirm={ onConfirm } />
+		</ConfirmationDialog>
+	);
+}