@elementor/editor-global-classes 3.32.0-71 → 3.32.0-73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "3.32.0-71",
+  "version": "3.32.0-73",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.32.0-71",
-    "@elementor/editor-current-user": "3.32.0-71",
-    "@elementor/editor-documents": "3.32.0-71",
-    "@elementor/editor-editing-panel": "3.32.0-71",
-    "@elementor/editor-panels": "3.32.0-71",
-    "@elementor/editor-props": "3.32.0-71",
-    "@elementor/editor-styles": "3.32.0-71",
-    "@elementor/editor-styles-repository": "3.32.0-71",
-    "@elementor/editor-ui": "3.32.0-71",
-    "@elementor/editor-v1-adapters": "3.32.0-71",
-    "@elementor/http-client": "3.32.0-71",
+    "@elementor/editor": "3.32.0-73",
+    "@elementor/editor-current-user": "3.32.0-73",
+    "@elementor/editor-documents": "3.32.0-73",
+    "@elementor/editor-editing-panel": "3.32.0-73",
+    "@elementor/editor-panels": "3.32.0-73",
+    "@elementor/editor-props": "3.32.0-73",
+    "@elementor/editor-styles": "3.32.0-73",
+    "@elementor/editor-styles-repository": "3.32.0-73",
+    "@elementor/editor-ui": "3.32.0-73",
+    "@elementor/editor-v1-adapters": "3.32.0-73",
+    "@elementor/http-client": "3.32.0-73",
     "@elementor/icons": "1.46.0",
-    "@elementor/query": "3.32.0-71",
-    "@elementor/store": "3.32.0-71",
+    "@elementor/query": "3.32.0-73",
+    "@elementor/store": "3.32.0-73",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-71",
+    "@elementor/utils": "3.32.0-73",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/class-manager/class-item.tsx

@@ -21,7 +21,6 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { CssClassUsageTrigger } from '../css-class-usage/components';
-import { useSearchAndFilters } from '../search-and-filter/context';
 import { useDeleteConfirmation } from './delete-confirmation-dialog';
 import { SortableTrigger, type SortableTriggerProps } from './sortable';
 
@@ -32,13 +31,19 @@ type ClassItemProps = React.PropsWithChildren< {
 	selected?: boolean;
 	disabled?: boolean;
 	sortableTriggerProps: SortableTriggerProps;
+	showSortIndicator?: boolean;
 } >;
 
-export const ClassItem = ( { id, label, renameClass, selected, disabled, sortableTriggerProps }: ClassItemProps ) => {
+export const ClassItem = ( {
+	id,
+	label,
+	renameClass,
+	selected,
+	disabled,
+	sortableTriggerProps,
+	showSortIndicator,
+}: ClassItemProps ) => {
 	const itemRef = useRef< HTMLElement >( null );
-	const {
-		search: { inputValue },
-	} = useSearchAndFilters();
 	const {
 		ref: editableRef,
 		openEditMode,
@@ -74,7 +79,7 @@ export const ClassItem = ( { id, label, renameClass, selected, disabled, sortabl
 						ref={ itemRef }
 						dense
 						disableGutters
-						showSortIndicator={ inputValue.length >= 2 }
+						showSortIndicator={ showSortIndicator }
 						showActions={ isSelected || isEditing }
 						shape="rounded"
 						onDoubleClick={ openEditMode }

package/src/components/class-manager/global-classes-list.tsx

@@ -62,31 +62,30 @@ export const GlobalClassesList = ( { disabled }: GlobalClassesListProps ) => {
 		<DeleteConfirmationProvider>
 			<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
 				<SortableProvider value={ classesOrder } onChange={ reorderClasses }>
-					{ filteredCssClasses?.map( ( { id, label } ) => {
-						return (
-							<SortableItem key={ id } id={ id }>
-								{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (
-									<ClassItem
-										id={ id }
-										label={ label }
-										renameClass={ ( newLabel: string ) => {
-											dispatch(
-												slice.actions.update( {
-													style: {
-														id,
-														label: newLabel,
-													},
-												} )
-											);
-										} }
-										selected={ isDragged }
-										disabled={ disabled || isDragPlaceholder }
-										sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
-									/>
-								) }
-							</SortableItem>
-						);
-					} ) }
+					{ filteredCssClasses?.map( ( { id, label } ) => (
+						<SortableItem key={ id } id={ id }>
+							{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (
+								<ClassItem
+									id={ id }
+									label={ label }
+									renameClass={ ( newLabel: string ) => {
+										dispatch(
+											slice.actions.update( {
+												style: {
+													id,
+													label: newLabel,
+												},
+											} )
+										);
+									} }
+									selected={ isDragged }
+									disabled={ disabled || isDragPlaceholder }
+									sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
+									showSortIndicator={ filteredCssClasses.length > 1 }
+								/>
+							) }
+						</SortableItem>
+					) ) }
 				</SortableProvider>
 			</List>
 		</DeleteConfirmationProvider>

package/src/components/class-manager/sortable.tsx

@@ -17,7 +17,7 @@ export const SortableProvider = < T extends string >( props: UnstableSortablePro
 export type SortableTriggerProps = React.HTMLAttributes< HTMLDivElement >;
 
 export const SortableTrigger = ( props: SortableTriggerProps ) => (
-	<StyledSortableTrigger { ...props } role="button" className="class-item-sortable-trigger">
+	<StyledSortableTrigger { ...props } role="button" className="class-item-sortable-trigger" aria-label="sort">
 		<GripVerticalIcon fontSize="tiny" />
 	</StyledSortableTrigger>
 );