@elementor/editor-editing-panel 1.28.0 → 1.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.28.0",
+  "version": "1.29.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,8 +40,8 @@
   },
   "dependencies": {
     "@elementor/editor": "0.18.6",
-    "@elementor/editor-canvas": "0.18.0",
-    "@elementor/editor-controls": "0.25.0",
+    "@elementor/editor-canvas": "0.18.1",
+    "@elementor/editor-controls": "0.26.0",
     "@elementor/editor-current-user": "0.3.0",
     "@elementor/editor-elements": "0.8.1",
     "@elementor/editor-panels": "0.14.1",

package/src/components/add-or-remove-content.tsx

@@ -23,6 +23,7 @@ export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children
 				sx={ {
 					justifyContent: 'space-between',
 					alignItems: 'center',
+					marginInlineEnd: -0.75,
 				} }
 			>
 				<ControlLabel>{ label }</ControlLabel>

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

@@ -76,7 +76,7 @@ export function CssClassSelector() {
 			<MultiCombobox
 				id={ ID }
 				size="tiny"
-				placeholder={ showPlaceholder ? __( 'Type to search/add global classes', 'elementor' ) : undefined }
+				placeholder={ showPlaceholder ? __( 'Type class name', 'elementor' ) : undefined }
 				options={ options }
 				selected={ applied }
 				onSelect={ handleApply }

package/src/components/multi-combobox.tsx

@@ -1,15 +1,6 @@
 import * as React from 'react';
-import { useId, useState } from 'react';
-import {
-	Autocomplete,
-	type AutocompleteProps,
-	type AutocompleteRenderGroupParams,
-	Box,
-	createFilterOptions,
-	styled,
-	TextField,
-	type Theme,
-} from '@elementor/ui';
+import { useState } from 'react';
+import { Autocomplete, type AutocompleteProps, createFilterOptions, TextField, type Theme } from '@elementor/ui';
 
 export type Option = {
 	label: string;
@@ -65,7 +56,6 @@ export function MultiCombobox< TOption extends Option >( {
 			disabled={ loading }
 			value={ selected }
 			options={ options }
-			renderGroup={ ( params ) => <Group { ...params } /> }
 			renderInput={ ( params ) => (
 				<TextField
 					{ ...params }
@@ -123,8 +113,8 @@ export function MultiCombobox< TOption extends Option >( {
 				];
 			} }
 			groupBy={ ( option ) => option.group ?? '' }
-			renderOption={ ( optionProps, { label } ) => (
-				<li { ...optionProps } style={ { display: 'block', textOverflow: 'ellipsis' } }>
+			renderOption={ ( optionProps, { label, group } ) => (
+				<li { ...optionProps } style={ { display: 'block', textOverflow: 'ellipsis' } } data-group={ group }>
 					{ label }
 				</li>
 			) }
@@ -132,34 +122,6 @@ export function MultiCombobox< TOption extends Option >( {
 	);
 }
 
-const Group = ( params: Omit< AutocompleteRenderGroupParams, 'key' > ) => {
-	const id = `combobox-group-${ useId().replace( /:/g, '_' ) }`;
-
-	return (
-		<StyledGroup role="group" aria-labelledby={ id }>
-			<StyledGroupHeader id={ id }> { params.group }</StyledGroupHeader>
-			<StyledGroupItems role="listbox">{ params.children }</StyledGroupItems>
-		</StyledGroup>
-	);
-};
-
-const StyledGroup = styled( 'li' )`
-	&:not( :last-of-type ) {
-		border-bottom: 1px solid ${ ( { theme } ) => theme.palette.divider };
-	}
-`;
-
-const StyledGroupHeader = styled( Box )( ( { theme } ) => ( {
-	position: 'sticky',
-	top: '-8px',
-	padding: theme.spacing( 1, 2 ),
-	color: theme.palette.text.tertiary,
-} ) );
-
-const StyledGroupItems = styled( 'ul' )`
-	padding: 0;
-`;
-
 function useFilterOptions< TOption extends Option >() {
 	return useState( () => createFilterOptions< TOption >() )[ 0 ];
 }