@elementor/editor-editing-panel 1.21.0 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.21.0",
+  "version": "1.23.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.20.0",
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.6.5",
-    "@elementor/editor-panels": "0.13.0",
+    "@elementor/editor-elements": "0.7.0",
+    "@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.1",
+    "@elementor/editor-ui": "0.5.0",
     "@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-menu.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
-import { bindMenu, Divider, ListSubheader, Menu, MenuItem, type PopupState } from '@elementor/ui';
+import { MenuListItem } from '@elementor/editor-ui';
+import { bindMenu, Divider, Menu, MenuSubheader, type PopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
@@ -39,9 +40,9 @@ export function CssClassMenu( { styleId, provider, popupState, handleRename, anc
 		>
 			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
 			{ getMenuItemsByProvider( { provider, styleId, handleRename, closeMenu: popupState.close } ) }
-			<ListSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
+			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
 				{ __( 'Pseudo classes', 'elementor' ) }
-			</ListSubheader>
+			</MenuSubheader>
 			<StateMenuItem key="normal" state={ null } styleId={ styleId } closeMenu={ popupState.close } />
 			{ STATES.map( ( state ) => {
 				return (
@@ -79,12 +80,12 @@ function getMenuItemsByProvider( {
 
 	if ( actions.length ) {
 		actions.unshift(
-			<ListSubheader
+			<MenuSubheader
 				key="provider-label"
 				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }
 			>
 				{ providerInstance?.labels?.singular }
-			</ListSubheader>
+			</MenuSubheader>
 		);
 		actions.push( <Divider key="provider-actions-divider" /> );
 	}
@@ -106,7 +107,7 @@ function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemPr
 	const isSelected = state === activeState && isActive;
 
 	return (
-		<StyledMenuItem
+		<MenuListItem
 			{ ...props }
 			selected={ isSelected }
 			sx={ { textTransform: 'capitalize' } }
@@ -121,7 +122,7 @@ function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemPr
 			} }
 		>
 			{ state ? state : 'Normal' }
-		</StyledMenuItem>
+		</MenuListItem>
 	);
 }
 
@@ -129,7 +130,7 @@ function UnapplyClassMenuItem( { styleId, closeMenu, ...props }: { styleId: stri
 	const unapplyClass = useUnapplyClass( styleId );
 
 	return (
-		<StyledMenuItem
+		<MenuListItem
 			{ ...props }
 			onClick={ () => {
 				unapplyClass();
@@ -137,7 +138,7 @@ function UnapplyClassMenuItem( { styleId, closeMenu, ...props }: { styleId: stri
 			} }
 		>
 			{ __( 'Remove', 'elementor' ) }
-		</StyledMenuItem>
+		</MenuListItem>
 	);
 }
 
@@ -150,7 +151,7 @@ function RenameClassMenuItem( {
 	closeMenu: () => void;
 } ) {
 	return (
-		<StyledMenuItem
+		<MenuListItem
 			{ ...props }
 			onClick={ () => {
 				closeMenu();
@@ -158,10 +159,6 @@ function RenameClassMenuItem( {
 			} }
 		>
 			{ __( 'Rename', 'elementor' ) }
-		</StyledMenuItem>
+		</MenuListItem>
 	);
 }
-
-const StyledMenuItem = ( { ...props } ) => (
-	<MenuItem { ...props } sx={ { ...( props.sx ?? {} ), typography: 'caption', color: 'text.primary' } } />
-);

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 );
 					}
 				}

package/src/components/section.tsx

@@ -26,7 +26,7 @@ export function Section( { title, children, defaultExpanded = false }: Props ) {
 			>
 				<ListItemText
 					secondary={ title }
-					secondaryTypographyProps={ { sx: { typography: 'caption', fontWeight: 'bold' } } }
+					secondaryTypographyProps={ { color: 'text.primary', variant: 'caption', fontWeight: 'bold' } }
 				/>
 				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>

package/src/components/style-sections/layout-section/utils/rotated-icon.tsx

@@ -36,8 +36,10 @@ export const RotatedIcon = ( {
 	disableRotationForReversed = false,
 }: Props ) => {
 	const rotate = useRef( useGetTargetAngle( isClockwise, offset, disableRotationForReversed ) );
+	// eslint-disable-next-line react-compiler/react-compiler
 	rotate.current = useGetTargetAngle( isClockwise, offset, disableRotationForReversed, rotate );
 
+	// eslint-disable-next-line react-compiler/react-compiler
 	return <Icon fontSize={ size } sx={ { transition: '.3s', rotate: `${ rotate.current }deg` } } />;
 };
 

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -156,7 +156,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 			{ tabs.map( ( { value }, index ) => {
 				return (
 					<TabPanel key={ index } sx={ { flexGrow: 1, py: 0 } } { ...getTabPanelProps( index ) }>
-						<PopoverContent p={ 1.5 }>
+						<PopoverContent p={ 2 } gap={ 2 }>
 							{ value.items.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;

package/src/dynamics/components/dynamic-selection.tsx

@@ -7,9 +7,9 @@ import {
 	Divider,
 	InputAdornment,
 	Link,
-	ListSubheader,
 	MenuItem,
 	MenuList,
+	MenuSubheader,
 	Stack,
 	TextField,
 	Typography,
@@ -96,11 +96,11 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 							<MenuList role="listbox" tabIndex={ 0 }>
 								{ options.map( ( [ category, items ], index ) => (
 									<Fragment key={ index }>
-										<ListSubheader
+										<MenuSubheader
 											sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }
 										>
 											{ dynamicGroups?.[ category ]?.title || category }
-										</ListSubheader>
+										</MenuSubheader>
 										{ items.map( ( { value, label: tagLabel } ) => {
 											const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
 

package/src/dynamics/hooks/use-prop-dynamic-tags.ts

@@ -15,6 +15,7 @@ export const usePropDynamicTags = () => {
 		categories = propDynamicType?.settings.categories || [];
 	}
 
+	// eslint-disable-next-line react-compiler/react-compiler
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	return useMemo( () => getDynamicTagsByCategories( categories ), [ categories.join() ] );
 };