@elementor/editor-components 3.35.0-485 → 3.35.0-487

package/package.json

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

package/src/components/create-component-form/create-component-form.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { getElementLabel, type V1ElementData } from '@elementor/editor-elements';
-import { notify } from '@elementor/editor-notifications';
+import { type NotificationData, notify } from '@elementor/editor-notifications';
 import { Form as FormElement, ThemeProvider } from '@elementor/editor-ui';
 import { ComponentsIcon } from '@elementor/icons';
 import { __getState as getState } from '@elementor/store';
@@ -29,6 +29,8 @@ type SaveAsComponentEventData = {
 	options?: ContextMenuEventOptions;
 };
 
+const MAX_COMPONENTS = 100;
+
 export function CreateComponentForm() {
 	const [ element, setElement ] = useState< {
 		element: V1ElementData;
@@ -36,6 +38,7 @@ export function CreateComponentForm() {
 	} | null >( null );
 
 	const [ anchorPosition, setAnchorPosition ] = useState< { top: number; left: number } >();
+	const { components } = useComponents();
 
 	const eventData = useRef< ComponentEventData | null >( null );
 
@@ -43,17 +46,10 @@ export function CreateComponentForm() {
 		const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';
 
 		const openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {
-			const nonAtomicElements = findNonAtomicElementsInElement( event.detail.element );
-
-			if ( nonAtomicElements.length > 0 ) {
-				notify( {
-					type: 'default',
-					message: __(
-						'Components require atomic elements only. Remove widgets to create this component.',
-						'elementor'
-					),
-					id: 'non-atomic-element-save-blocked',
-				} );
+			const { shouldOpen, notification } = shouldOpenForm( event.detail.element, components?.length ?? 0 );
+
+			if ( ! shouldOpen ) {
+				notify( notification );
 				return;
 			}
 
@@ -73,7 +69,7 @@ export function CreateComponentForm() {
 		return () => {
 			window.removeEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );
 		};
-	}, [] );
+	}, [ components?.length ] );
 
 	const handleSave = async ( values: ComponentFormValues ) => {
 		try {
@@ -148,6 +144,45 @@ export function CreateComponentForm() {
 	);
 }
 
+type ShouldOpenFormResult =
+	| { shouldOpen: true; notification: null }
+	| { shouldOpen: false; notification: NotificationData };
+
+function shouldOpenForm( element: V1ElementData, componentsCount: number ): ShouldOpenFormResult {
+	const nonAtomicElements = findNonAtomicElementsInElement( element );
+
+	if ( nonAtomicElements.length > 0 ) {
+		return {
+			shouldOpen: false,
+			notification: {
+				type: 'default',
+				message: __(
+					'Components require atomic elements only. Remove widgets to create this component.',
+					'elementor'
+				),
+				id: 'non-atomic-element-save-blocked',
+			},
+		};
+	}
+
+	if ( componentsCount >= MAX_COMPONENTS ) {
+		return {
+			shouldOpen: false,
+			notification: {
+				type: 'default',
+				/* translators: %s is the maximum number of components */
+				message: __(
+					`You've reached the limit of %s components. Please remove an existing one to create a new component.`,
+					'elementor'
+				).replace( '%s', MAX_COMPONENTS.toString() ),
+				id: 'maximum-number-of-components-exceeded',
+			},
+		};
+	}
+
+	return { shouldOpen: true, notification: null };
+}
+
 const FONT_SIZE = 'tiny';
 
 const Form = ( {