@elementor/editor-global-classes 4.1.0-822 → 4.1.0-824

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.1.0-822",
+  "version": "4.1.0-824",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,29 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-822",
-    "@elementor/editor-current-user": "4.1.0-822",
-    "@elementor/editor-documents": "4.1.0-822",
-    "@elementor/editor-editing-panel": "4.1.0-822",
-    "@elementor/editor-mcp": "4.1.0-822",
-    "@elementor/editor-panels": "4.1.0-822",
-    "@elementor/editor-props": "4.1.0-822",
-    "@elementor/editor-variables": "4.1.0-822",
-    "@elementor/editor-styles": "4.1.0-822",
-    "@elementor/editor-canvas": "4.1.0-822",
-    "@elementor/editor-styles-repository": "4.1.0-822",
-    "@elementor/editor-ui": "4.1.0-822",
-    "@elementor/editor-v1-adapters": "4.1.0-822",
-    "@elementor/http-client": "4.1.0-822",
+    "@elementor/editor": "4.1.0-824",
+    "@elementor/editor-current-user": "4.1.0-824",
+    "@elementor/editor-documents": "4.1.0-824",
+    "@elementor/editor-editing-panel": "4.1.0-824",
+    "@elementor/editor-mcp": "4.1.0-824",
+    "@elementor/editor-panels": "4.1.0-824",
+    "@elementor/editor-props": "4.1.0-824",
+    "@elementor/editor-variables": "4.1.0-824",
+    "@elementor/editor-styles": "4.1.0-824",
+    "@elementor/editor-canvas": "4.1.0-824",
+    "@elementor/editor-styles-repository": "4.1.0-824",
+    "@elementor/editor-ui": "4.1.0-824",
+    "@elementor/editor-v1-adapters": "4.1.0-824",
+    "@elementor/http-client": "4.1.0-824",
     "@elementor/icons": "^1.68.0",
-    "@elementor/query": "4.1.0-822",
-    "@elementor/schema": "4.1.0-822",
-    "@elementor/store": "4.1.0-822",
+    "@elementor/query": "4.1.0-824",
+    "@elementor/schema": "4.1.0-824",
+    "@elementor/store": "4.1.0-824",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-822",
+    "@elementor/utils": "4.1.0-824",
+    "@tanstack/react-virtual": "^3.13.24",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.1.0-822"
+    "@elementor/events": "4.1.0-824"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { useSuppressedMessage } from '@elementor/editor-current-user';
-import { getCurrentDocument, getV1DocumentsManager, setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { reloadCurrentDocument, setDocumentModifiedStatus } from '@elementor/editor-documents';
 import {
 	__createPanel as createPanel,
 	Panel,
@@ -11,7 +11,7 @@ import {
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
 import { ConfirmationDialog, SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
-import { __privateRunCommand as runCommand, changeEditMode } from '@elementor/editor-v1-adapters';
+import { changeEditMode } from '@elementor/editor-v1-adapters';
 import { XIcon } from '@elementor/icons';
 import { useMutation } from '@elementor/query';
 import { __dispatch as dispatch } from '@elementor/store';
@@ -56,19 +56,6 @@ type StopSyncConfirmationDialogProps = {
 
 const id = 'global-classes-manager';
 
-const reloadDocument = () => {
-	const currentDocument = getCurrentDocument();
-	const documentsManager = getV1DocumentsManager();
-
-	documentsManager.invalidateCache();
-
-	return runCommand( 'editor/documents/switch', {
-		id: currentDocument?.id,
-		shouldScroll: false,
-		shouldNavigateToDefaultRoute: false,
-	} );
-};
-
 // We need to disable the app-bar buttons, and the elements overlays when opening the classes manager panel.
 // The buttons and overlays are enabled only in edit mode, so we're creating a custom new edit mode that
 // will force them to be disabled. We can't use the `preview` edit mode in this case since it'll force
@@ -84,7 +71,7 @@ export const { panel, usePanelActions } = createPanel( {
 	},
 	onClose: async () => {
 		changeEditMode( 'edit' );
-		await reloadDocument();
+		await reloadCurrentDocument();
 		unblockPanelInteractions();
 	},
 	isOpenPreviousElement: true,
@@ -97,6 +84,7 @@ export function ClassManagerPanel() {
 	const [ stopSyncConfirmation, setStopSyncConfirmation ] = useState< string | null >( null );
 	const [ startSyncConfirmation, setStartSyncConfirmation ] = useState< string | null >( null );
 	const [ isStopSyncSuppressed ] = useSuppressedMessage( STOP_SYNC_MESSAGE_KEY );
+	const [ scrollElement, setScrollElement ] = useState< HTMLElement | null >( null );
 
 	const { mutateAsync: publish, isPending: isPublishing } = usePublish();
 
@@ -190,6 +178,7 @@ export function ClassManagerPanel() {
 							</Box>
 							<Divider />
 							<Box
+								ref={ setScrollElement }
 								px={ 2 }
 								sx={ {
 									flexGrow: 1,
@@ -198,6 +187,7 @@ export function ClassManagerPanel() {
 							>
 								<GlobalClassesList
 									disabled={ isPublishing }
+									scrollElement={ scrollElement }
 									onStopSyncRequest={ handleStopSyncRequest }
 									onStartSyncRequest={ ( classId ) => setStartSyncConfirmation( classId ) }
 								/>

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

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
 import { __useDispatch as useDispatch } from '@elementor/store';
 import { List, Stack, styled, Typography, type TypographyProps } from '@elementor/ui';
+import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesOrder } from '../../hooks/use-classes-order';
@@ -17,13 +18,22 @@ import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { getNotFoundType, NotFound } from './not-found';
 import { SortableItem, SortableProvider } from './sortable';
 
+const ROW_HEIGHT = 40;
+const OVERSCAN = 6;
+
 type GlobalClassesListProps = {
 	disabled?: boolean;
+	scrollElement?: HTMLElement | null;
 	onStopSyncRequest?: ( id: string ) => void;
 	onStartSyncRequest?: ( id: string ) => void;
 };
 
-export const GlobalClassesList = ( { disabled, onStopSyncRequest, onStartSyncRequest }: GlobalClassesListProps ) => {
+export const GlobalClassesList = ( {
+	disabled,
+	scrollElement,
+	onStopSyncRequest,
+	onStartSyncRequest,
+}: GlobalClassesListProps ) => {
 	const {
 		search: { debouncedValue: searchValue },
 	} = useSearchAndFilters();
@@ -35,6 +45,27 @@ export const GlobalClassesList = ( { disabled, onStopSyncRequest, onStartSyncReq
 	const [ classesOrder, reorderClasses ] = useReorder( draggedItemId, setDraggedItemId, draggedItemLabel ?? '' );
 	const filteredCssClasses = useFilteredCssClasses();
 
+	const virtualizer = useVirtualizer( {
+		count: filteredCssClasses.length,
+		getScrollElement: () => scrollElement ?? null,
+		estimateSize: () => ROW_HEIGHT,
+		overscan: OVERSCAN,
+		getItemKey: ( index ) => filteredCssClasses[ index ].id,
+		// Keep the actively dragged row mounted even when scrolled out of view.
+		// SortableItem unregisters its render on unmount, which would make the
+		// DragOverlay clone disappear mid-drag.
+		rangeExtractor: ( range ) => {
+			const indices = new Set( defaultRangeExtractor( range ) );
+			if ( draggedItemId ) {
+				const draggedItemIndex = filteredCssClasses.findIndex( ( cssClass ) => cssClass.id === draggedItemId );
+				if ( draggedItemIndex >= 0 ) {
+					indices.add( draggedItemIndex );
+				}
+			}
+			return [ ...indices ].sort( ( a, b ) => a - b );
+		},
+	} );
+
 	useEffect( () => {
 		const handler = ( event: KeyboardEvent ) => {
 			if ( event.key === 'z' && ( event.ctrlKey || event.metaKey ) ) {
@@ -69,19 +100,36 @@ export const GlobalClassesList = ( { disabled, onStopSyncRequest, onStartSyncReq
 
 	return (
 		<DeleteConfirmationProvider>
-			<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
+			<List
+				sx={ {
+					position: 'relative',
+					display: 'block',
+					height: virtualizer.getTotalSize(),
+					padding: 0,
+				} }
+			>
 				<SortableProvider
 					value={ classesOrder }
 					onChange={ reorderClasses }
+					onDragStart={ ( event ) => setDraggedItemId( event.active.id as StyleDefinitionID ) }
+					onDragEnd={ () => setDraggedItemId( null ) }
+					onDragCancel={ () => setDraggedItemId( null ) }
 					disableDragOverlay={ ! allowSorting }
 				>
-					{ filteredCssClasses?.map( ( cssClass ) => (
-						<SortableItem key={ cssClass.id } id={ cssClass.id }>
-							{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => {
-								if ( isDragged && ! draggedItemId ) {
-									setDraggedItemId( cssClass.id );
-								}
-								return (
+					{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
+						const cssClass = filteredCssClasses[ virtualRow.index ];
+						return (
+							<SortableItem
+								key={ virtualRow.key }
+								id={ cssClass.id }
+								style={ {
+									position: 'absolute',
+									top: virtualRow.start,
+									left: 0,
+									width: '100%',
+								} }
+							>
+								{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (
 									<ClassItem
 										id={ cssClass.id }
 										label={ cssClass.label }
@@ -127,10 +175,10 @@ export const GlobalClassesList = ( { disabled, onStopSyncRequest, onStartSyncReq
 											}
 										} }
 									/>
-								);
-							} }
-						</SortableItem>
-					) ) }
+								) }
+							</SortableItem>
+						);
+					} ) }
 				</SortableProvider>
 			</List>
 		</DeleteConfirmationProvider>
@@ -176,7 +224,7 @@ const useReorder = (
 				classId: draggedItemId,
 				classTitle: draggedItemLabel,
 			} );
-			setDraggedItemId( null ); // Reset after tracking
+			setDraggedItemId( null );
 		}
 	};
 

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

@@ -11,7 +11,12 @@ import {
 } from '@elementor/ui';
 
 export const SortableProvider = < T extends string >( props: UnstableSortableProviderProps< T > ) => (
-	<UnstableSortableProvider restrictAxis variant="static" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />
+	<UnstableSortableProvider
+		restrictAxis
+		variant="static"
+		dragPlaceholderStyle={ { visibility: 'hidden' } }
+		{ ...props }
+	/>
 );
 
 export type SortableTriggerProps = React.HTMLAttributes< HTMLDivElement >;
@@ -24,10 +29,11 @@ export const SortableTrigger = ( props: SortableTriggerProps ) => (
 
 type SortableItemProps = {
 	id: UnstableSortableItemProps[ 'id' ];
+	style?: React.CSSProperties;
 	children: ( props: Partial< UnstableSortableItemRenderProps > ) => React.ReactNode;
 };
 
-export const SortableItem = ( { children, id, ...props }: SortableItemProps ) => {
+export const SortableItem = ( { children, id, style, ...props }: SortableItemProps ) => {
 	return (
 		<UnstableSortableItem
 			{ ...props }
@@ -46,7 +52,7 @@ export const SortableItem = ( { children, id, ...props }: SortableItemProps ) =>
 				return (
 					<Box
 						{ ...itemProps }
-						style={ itemStyle }
+						style={ { ...itemStyle, ...( ! isDragOverlay ? style : null ) } }
 						component={ 'li' }
 						role="listitem"
 						sx={ {

package/src/components/global-styles-import-listener.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { GLOBAL_STYLES_IMPORTED_EVENT } from '@elementor/editor-canvas';
 import { __useDispatch as useDispatch } from '@elementor/store';
 
 import { apiClient } from '../api';
@@ -47,13 +48,10 @@ export function GlobalStylesImportListener() {
 				.catch( () => {} );
 		};
 
-		window.addEventListener( 'elementor/global-styles/imported', handleGlobalStylesImported as EventListener );
+		window.addEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
 
 		return () => {
-			window.removeEventListener(
-				'elementor/global-styles/imported',
-				handleGlobalStylesImported as EventListener
-			);
+			window.removeEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
 		};
 	}, [ dispatch ] );