@elementor/editor-editing-panel 1.21.0 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,23 +39,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.3",
-    "@elementor/editor-controls": "0.19.0",
+    "@elementor/editor": "0.18.4",
+    "@elementor/editor-controls": "0.19.1",
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.6.5",
-    "@elementor/editor-panels": "0.13.0",
+    "@elementor/editor-elements": "0.6.6",
+    "@elementor/editor-panels": "0.13.1",
     "@elementor/editor-props": "0.11.1",
     "@elementor/editor-responsive": "0.13.3",
     "@elementor/editor-styles": "0.6.4",
-    "@elementor/editor-styles-repository": "0.7.8",
-    "@elementor/editor-ui": "0.4.2",
+    "@elementor/editor-styles-repository": "0.8.0",
+    "@elementor/editor-ui": "0.4.3",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.37.0",
-    "@elementor/locations": "0.7.6",
-    "@elementor/menus": "0.1.3",
+    "@elementor/locations": "0.7.7",
+    "@elementor/menus": "0.1.4",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.26.0",
+    "@elementor/ui": "1.32.1",
     "@elementor/utils": "0.4.0",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/css-classes/css-class-selector.tsx

@@ -165,6 +165,9 @@ function useCreateActions( {
 		return {
 			// translators: %s is the label of the new class.
 			label: ( value ) => __( 'Create new "%s"', 'elementor' ).replace( '%s', value ),
+			// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
+			group: __( 'Create New %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
+			condition: ( _, inputValue ) => isLabelValid( inputValue ) && ! hasReachedLimit( provider ),
 			apply: ( label ) => {
 				const createdId = create( label );
 
@@ -175,14 +178,22 @@ function useCreateActions( {
 				pushAppliedId( createdId );
 				setActiveId( createdId );
 			},
-			condition: ( _, inputValue ) =>
-				stylesRepository.isLabelValid( inputValue ) && ! stylesRepository.isLabelExist( inputValue ),
-			// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
-			group: __( 'Create New %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
 		};
 	} );
 }
 
+function hasReachedLimit( provider: StylesProvider ) {
+	if ( provider.limit === undefined ) {
+		return false;
+	}
+
+	return provider.actions.get().length >= provider.limit;
+}
+
+function isLabelValid( newLabel: string ) {
+	return stylesRepository.isLabelValid( newLabel ) && ! stylesRepository.isLabelExist( newLabel );
+}
+
 function useAppliedOptions( options: StyleDefOption[], appliedIds: StyleDefinitionID[] ) {
 	const applied = options.filter( ( option ) => option.value && appliedIds.includes( option.value ) );
 

package/src/components/multi-combobox.tsx

@@ -72,7 +72,7 @@ export function MultiCombobox< TOption extends Option >( {
 				if ( reason === 'createOption' ) {
 					const [ firstAction ] = filterActions( actions, { options, inputValue: inputValue ?? '' } );
 
-					if ( firstAction.value ) {
+					if ( firstAction?.value ) {
 						return run( firstAction.apply, firstAction.value );
 					}
 				}