@elementor/editor-editing-panel 4.2.0-871 → 4.2.0-872

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.2.0-871",
+  "version": "4.2.0-872",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-871",
-    "@elementor/editor-canvas": "4.2.0-871",
-    "@elementor/editor-controls": "4.2.0-871",
-    "@elementor/editor-documents": "4.2.0-871",
-    "@elementor/editor-elements": "4.2.0-871",
-    "@elementor/editor-interactions": "4.2.0-871",
-    "@elementor/editor-notifications": "4.2.0-871",
-    "@elementor/editor-panels": "4.2.0-871",
-    "@elementor/editor-props": "4.2.0-871",
-    "@elementor/editor-responsive": "4.2.0-871",
-    "@elementor/editor-styles": "4.2.0-871",
-    "@elementor/editor-styles-repository": "4.2.0-871",
-    "@elementor/editor-ui": "4.2.0-871",
-    "@elementor/editor-v1-adapters": "4.2.0-871",
-    "@elementor/http-client": "4.2.0-871",
+    "@elementor/editor": "4.2.0-872",
+    "@elementor/editor-canvas": "4.2.0-872",
+    "@elementor/editor-controls": "4.2.0-872",
+    "@elementor/editor-documents": "4.2.0-872",
+    "@elementor/editor-elements": "4.2.0-872",
+    "@elementor/editor-interactions": "4.2.0-872",
+    "@elementor/editor-notifications": "4.2.0-872",
+    "@elementor/editor-panels": "4.2.0-872",
+    "@elementor/editor-props": "4.2.0-872",
+    "@elementor/editor-responsive": "4.2.0-872",
+    "@elementor/editor-styles": "4.2.0-872",
+    "@elementor/editor-styles-repository": "4.2.0-872",
+    "@elementor/editor-ui": "4.2.0-872",
+    "@elementor/editor-v1-adapters": "4.2.0-872",
+    "@elementor/http-client": "4.2.0-872",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.2.0-871",
-    "@elementor/locations": "4.2.0-871",
-    "@elementor/menus": "4.2.0-871",
-    "@elementor/query": "4.2.0-871",
-    "@elementor/schema": "4.2.0-871",
-    "@elementor/session": "4.2.0-871",
+    "@elementor/editor-variables": "4.2.0-872",
+    "@elementor/locations": "4.2.0-872",
+    "@elementor/menus": "4.2.0-872",
+    "@elementor/query": "4.2.0-872",
+    "@elementor/schema": "4.2.0-872",
+    "@elementor/session": "4.2.0-872",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-871",
-    "@elementor/wp-media": "4.2.0-871",
+    "@elementor/utils": "4.2.0-872",
+    "@elementor/wp-media": "4.2.0-872",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/creatable-autocomplete/use-filter-options.ts

@@ -2,6 +2,12 @@ import { createFilterOptions } from '@elementor/ui';
 
 import { type InternalOption, type Option } from './types';
 
+const STRIP_NON_CLASS_CHARS = /[^a-zA-Z0-9_-]/g;
+
+function normalizeClassSearch( value: string ) {
+	return value.replace( STRIP_NON_CLASS_CHARS, '' ).toLowerCase();
+}
+
 export function useFilterOptions< TOption extends Option >( parameters: {
 	options: TOption[];
 	selected: TOption[];
@@ -10,7 +16,9 @@ export function useFilterOptions< TOption extends Option >( parameters: {
 } ) {
 	const { options, selected, onCreate, entityName } = parameters;
 
-	const filter = createFilterOptions< InternalOption< TOption > >();
+	const filter = createFilterOptions< InternalOption< TOption > >( {
+		matchFrom: 'any',
+	} );
 
 	const filterOptions = (
 		optionList: InternalOption< TOption >[],
@@ -23,7 +31,7 @@ export function useFilterOptions< TOption extends Option >( parameters: {
 
 		const filteredOptions = filter(
 			optionList.filter( ( option ) => ! selectedValues.includes( option.value ) ),
-			params
+			{ ...params, inputValue: normalizeClassSearch( params.inputValue ) }
 		);
 
 		const isExisting = options.some( ( option ) => params.inputValue === option.label );

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

@@ -11,11 +11,13 @@ import {
 	validateStyleLabel,
 } from '@elementor/editor-styles-repository';
 import { InfoAlert, WarningInfotip } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { ColorSwatchIcon, MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
 import {
 	type AutocompleteChangeReason,
 	Box,
+	Button,
 	Chip,
 	type ChipOwnProps,
 	FormLabel,
@@ -43,6 +45,22 @@ import { useApplyClass, useCreateAndApplyClass, useUnapplyClass } from './use-ap
 const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 50;
 
+const EVENT_OPEN_GLOBAL_CLASSES_MANAGER = 'elementor/open-global-classes-manager';
+const EVENT_TOGGLE_DESIGN_SYSTEM = 'elementor/toggle-design-system';
+
+function openClassManagerPanel() {
+	if ( isExperimentActive( 'e_editor_design_system_panel' ) ) {
+		window.dispatchEvent(
+			new CustomEvent( EVENT_TOGGLE_DESIGN_SYSTEM, {
+				detail: { tab: 'classes' as const },
+			} )
+		);
+		return;
+	}
+
+	window.dispatchEvent( new CustomEvent( EVENT_OPEN_GLOBAL_CLASSES_MANAGER ) );
+}
+
 type StyleDefOption = Option & {
 	color: ChipOwnProps[ 'color' ];
 	icon: ReactElement | null;
@@ -74,7 +92,7 @@ export function CssClassSelector() {
 	const [ renameError, setRenameError ] = useState< string | null >( null );
 
 	const handleSelect = useHandleSelect();
-	const { create, validate, entityName } = useCreateAction();
+	const { create, validate, entityName, isAtLimit, limitCount } = useCreateAction();
 
 	const appliedOptions = useAppliedOptions( options );
 	const active = appliedOptions.find( ( option ) => option.value === activeId ) ?? EMPTY_OPTION;
@@ -114,7 +132,13 @@ export function CssClassSelector() {
 					onCreate={ create ?? undefined }
 					validate={ validate ?? undefined }
 					limitTags={ TAGS_LIMIT }
-					renderEmptyState={ EmptyState }
+					renderEmptyState={
+						isAtLimit && typeof limitCount === 'number'
+							? ( props ) => (
+									<LimitReachedEmptyState limitCount={ limitCount } onClear={ props.onClear } />
+							  )
+							: EmptyState
+					}
 					getLimitTagsText={ ( more ) => (
 						<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
 					) }
@@ -166,7 +190,9 @@ export function CssClassSelector() {
 	);
 }
 
-const EmptyState = ( { searchValue, onClear }: { searchValue: string; onClear: () => void } ) => (
+type EmptyStateProps = { searchValue: string; onClear: () => void };
+
+const EmptyStateLayout = ( { searchValue, onClear, children }: EmptyStateProps & { children: React.ReactNode } ) => (
 	<Box sx={ { py: 4 } }>
 		<Stack
 			gap={ 1 }
@@ -181,11 +207,7 @@ const EmptyState = ( { searchValue, onClear }: { searchValue: string; onClear: (
 				<br />
 				&ldquo;{ searchValue }&rdquo;.
 			</Typography>
-			<Typography align="center" variant="caption" sx={ { mb: 2 } }>
-				{ __( 'With your current role,', 'elementor' ) }
-				<br />
-				{ __( 'you can only use existing classes.', 'elementor' ) }
-			</Typography>
+			{ children }
 			<Link color="text.secondary" variant="caption" component="button" onClick={ onClear }>
 				{ __( 'Clear & try again', 'elementor' ) }
 			</Link>
@@ -193,6 +215,62 @@ const EmptyState = ( { searchValue, onClear }: { searchValue: string; onClear: (
 	</Box>
 );
 
+const EmptyState = ( props: EmptyStateProps ) => (
+	<EmptyStateLayout { ...props }>
+		<Typography align="center" variant="caption" sx={ { mb: 2 } }>
+			{ __( 'With your current role,', 'elementor' ) }
+			<br />
+			{ __( 'you can only use existing classes.', 'elementor' ) }
+		</Typography>
+	</EmptyStateLayout>
+);
+
+const LimitReachedEmptyState = ( {
+	limitCount,
+	onClear,
+}: Pick< EmptyStateProps, 'onClear' > & { limitCount: number } ) => (
+	<Box sx={ { py: 4 } }>
+		<Stack
+			gap={ 1 }
+			alignItems="center"
+			color="text.secondary"
+			justifyContent="center"
+			sx={ { px: 1, m: 'auto', maxWidth: '260px' } }
+		>
+			<ColorSwatchIcon sx={ { transform: 'rotate(90deg)' } } fontSize="large" />
+			<Typography align="center" variant="subtitle2">
+				{
+					/* translators: %s is the maximum number of classes */
+					__( 'Limit of %s classes reached', 'elementor' ).replace( '%s', String( limitCount ) )
+				}
+			</Typography>
+			<Typography align="center" variant="caption" component="div">
+				{ __( 'Remove a class to create a new one.', 'elementor' ) }{ ' ' }
+				<Link
+					color="inherit"
+					variant="caption"
+					component="button"
+					onClick={ onClear }
+					sx={ { verticalAlign: 'baseline' } }
+				>
+					{ __( 'Clear', 'elementor' ) }
+				</Link>
+			</Typography>
+			<Button
+				variant="outlined"
+				color="secondary"
+				size="small"
+				onClick={ () => {
+					openClassManagerPanel();
+					onClear();
+				} }
+			>
+				{ __( 'Class Manager', 'elementor' ) }
+			</Button>
+		</Stack>
+	</Box>
+);
+
 const updateClassByProvider = ( provider: string | null, data: UpdateActionPayload ) => {
 	if ( ! provider ) {
 		return;
@@ -250,6 +328,18 @@ function useCreateAction() {
 		return {};
 	}
 
+	const entityName =
+		provider.labels.singular && provider.labels.plural
+			? ( provider.labels as CreatableAutocompleteProps< StyleDefOption >[ 'entityName' ] )
+			: undefined;
+
+	const validate = ( newClassLabel: string, event: ValidationEvent ): ValidationResult =>
+		validateStyleLabel( newClassLabel, event );
+
+	if ( hasReachedLimit( provider ) ) {
+		return { entityName, isAtLimit: true as const, limitCount: provider.limit, validate };
+	}
+
 	const create = ( classLabel: string ) => {
 		const { createdId } = createAction( { classLabel } );
 		trackStyles( provider.getKey() ?? '', 'classCreated', {
@@ -259,26 +349,7 @@ function useCreateAction() {
 		} );
 	};
 
-	const validate = ( newClassLabel: string, event: ValidationEvent ): ValidationResult => {
-		if ( hasReachedLimit( provider ) ) {
-			return {
-				isValid: false,
-				/* translators: %s is the maximum number of classes */
-				errorMessage: __(
-					'You’ve reached the limit of %s classes. Please remove an existing one to create a new class.',
-					'elementor'
-				).replace( '%s', provider.limit.toString() ),
-			};
-		}
-		return validateStyleLabel( newClassLabel, event );
-	};
-
-	const entityName =
-		provider.labels.singular && provider.labels.plural
-			? ( provider.labels as CreatableAutocompleteProps< StyleDefOption >[ 'entityName' ] )
-			: undefined;
-
-	return { create, validate, entityName };
+	return { create, validate, entityName, isAtLimit: false as const };
 }
 
 function hasReachedLimit( provider: StylesProvider ) {