@elementor/editor-global-classes 0.22.2 → 3.32.0-20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "0.22.2",
+  "version": "3.32.0-20",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -18,11 +18,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "url": "git+https://github.com/elementor/elementor.git",
     "directory": "packages/core/editor-global-classes"
   },
   "bugs": {
-    "url": "https://github.com/elementor/elementor-packages/issues"
+    "url": "https://github.com/elementor/elementor/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.21.1",
-    "@elementor/editor-current-user": "0.6.1",
-    "@elementor/editor-documents": "0.13.10",
-    "@elementor/editor-editing-panel": "1.50.0",
-    "@elementor/editor-panels": "0.17.1",
-    "@elementor/editor-props": "0.18.0",
-    "@elementor/editor-styles": "0.6.14",
-    "@elementor/editor-styles-repository": "0.10.7",
-    "@elementor/editor-ui": "0.14.2",
-    "@elementor/editor-v1-adapters": "0.12.1",
-    "@elementor/http-client": "0.3.0",
+    "@elementor/editor": "3.32.0-20",
+    "@elementor/editor-current-user": "3.32.0-20",
+    "@elementor/editor-documents": "3.32.0-20",
+    "@elementor/editor-editing-panel": "3.32.0-20",
+    "@elementor/editor-panels": "3.32.0-20",
+    "@elementor/editor-props": "3.32.0-20",
+    "@elementor/editor-styles": "3.32.0-20",
+    "@elementor/editor-styles-repository": "3.32.0-20",
+    "@elementor/editor-ui": "3.32.0-20",
+    "@elementor/editor-v1-adapters": "3.32.0-20",
+    "@elementor/http-client": "3.32.0-20",
     "@elementor/icons": "1.46.0",
-    "@elementor/query": "0.2.4",
-    "@elementor/store": "0.9.0",
-    "@elementor/ui": "1.36.0",
-    "@elementor/utils": "0.5.0",
+    "@elementor/query": "3.32.0-20",
+    "@elementor/store": "3.32.0-20",
+    "@elementor/ui": "1.36.2",
+    "@elementor/utils": "3.32.0-20",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/api.ts

@@ -1,11 +1,21 @@
 import { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionsMap } from '@elementor/editor-styles';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 
+import { type CssClassUsage } from './components/css-class-usage/types';
 import { type GlobalClasses } from './store';
 
 const RESOURCE_URL = '/global-classes';
+const BASE_URL = 'elementor/v1';
+const RESOURCE_USAGE_URL = `${ RESOURCE_URL }/usage`;
 
-export type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;
+type GlobalClassesUsageResponse = HttpResponse< CssClassUsage >;
+
+export type GlobalClassesGetAllResponse = HttpResponse<
+	StyleDefinitionsMap,
+	{
+		order: StyleDefinition[ 'id' ][];
+	}
+>;
 
 type UpdatePayload = GlobalClasses & {
 	changes: {
@@ -18,8 +28,10 @@ type UpdatePayload = GlobalClasses & {
 export type ApiContext = 'preview' | 'frontend';
 
 export const apiClient = {
+	usage: () => httpService().get< GlobalClassesUsageResponse >( `${ BASE_URL }${ RESOURCE_USAGE_URL }` ),
+
 	all: ( context: ApiContext = 'preview' ) =>
-		httpService().get< GlobalClassesGetAllResponse >( 'elementor/v1' + RESOURCE_URL, {
+		httpService().get< GlobalClassesGetAllResponse >( `${ BASE_URL }${ RESOURCE_URL }`, {
 			params: { context },
 		} ),
 

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

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { useRef } from 'react';
-import { EXPERIMENTAL_FEATURES } from '@elementor/editor-editing-panel';
+import { useRef, useState } from 'react';
 import { validateStyleLabel } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { DotsVerticalIcon } from '@elementor/icons';
 import {
 	bindMenu,
@@ -22,11 +20,11 @@ import {
 } from '@elementor/ui';
 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';
 
-const isVersion311IsActive = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
-
 type ClassItemProps = React.PropsWithChildren< {
 	id: string;
 	label: string;
@@ -34,20 +32,13 @@ type ClassItemProps = React.PropsWithChildren< {
 	selected?: boolean;
 	disabled?: boolean;
 	sortableTriggerProps: SortableTriggerProps;
-	isSearchActive: boolean;
 } >;
 
-export const ClassItem = ( {
-	id,
-	label,
-	renameClass,
-	selected,
-	disabled,
-	sortableTriggerProps,
-	isSearchActive,
-}: ClassItemProps ) => {
+export const ClassItem = ( { id, label, renameClass, selected, disabled, sortableTriggerProps }: ClassItemProps ) => {
 	const itemRef = useRef< HTMLElement >( null );
-
+	const {
+		search: { inputValue },
+	} = useSearchAndFilters();
 	const {
 		ref: editableRef,
 		openEditMode,
@@ -59,7 +50,7 @@ export const ClassItem = ( {
 		onSubmit: renameClass,
 		validation: validateLabel,
 	} );
-
+	const [ selectedCssUsage, setSelectedCssUsage ] = useState( '' );
 	const { openDialog } = useDeleteConfirmation();
 
 	const popupState = usePopupState( {
@@ -67,7 +58,8 @@ export const ClassItem = ( {
 		disableAutoFocus: true,
 	} );
 
-	const isSelected = ( selected || popupState.isOpen ) && ! disabled;
+	const isSelected = ( selectedCssUsage === id || selected || popupState.isOpen ) && ! disabled;
+
 	return (
 		<>
 			<Stack p={ 0 }>
@@ -82,7 +74,7 @@ export const ClassItem = ( {
 						ref={ itemRef }
 						dense
 						disableGutters
-						showSortIndicator={ isSearchActive }
+						showSortIndicator={ inputValue.length >= 2 }
 						showActions={ isSelected || isEditing }
 						shape="rounded"
 						onDoubleClick={ openEditMode }
@@ -103,6 +95,9 @@ export const ClassItem = ( {
 								<EllipsisWithTooltip title={ label } as={ Typography } variant="caption" />
 							) }
 						</Indicator>
+						<Box className={ 'class-item-locator' }>
+							<CssClassUsageTrigger id={ id } onClick={ setSelectedCssUsage } />
+						</Box>
 						<Tooltip
 							placement="top"
 							className={ 'class-item-more-actions' }
@@ -152,55 +147,35 @@ export const ClassItem = ( {
 	);
 };
 
-// Custom styles for sortable list item, until the component is available in the UI package.
-
-//  Experimental start
-
-const StyledListItemButtonV2 = styled( ListItemButton, {
-	shouldForwardProp: ( prop: string ) => ! [ 'showActions', 'showSortIndicator' ].includes( prop ),
-} )< ListItemButtonProps & { showActions: boolean; showSortIndicator: boolean } >(
-	( { showActions, showSortIndicator } ) =>
-		`
-	min-height: 36px;
-
-	&.visible-class-item {
-		box-shadow: none !important;
-	}
-	.class-item-sortable-trigger {
-		visibility: ${ showSortIndicator && showActions ? 'visible' : 'hidden' };
-	}
-	&:hover&:not(:disabled) {
-		.class-item-sortable-trigger  {
-			visibility: ${ showSortIndicator ? 'visible' : 'hidden' };
-		}
-	}
-`
-);
-
-const StyledListItemButtonV1 = styled( ListItemButton, {
+const StyledListItemButton = styled( ListItemButton, {
 	shouldForwardProp: ( prop: string ) => ! [ 'showActions', 'showSortIndicator' ].includes( prop ),
 } )< ListItemButtonProps & { showActions: boolean; showSortIndicator: boolean } >(
-	( { showActions } ) => `
-	min-height: 36px;
-	&.visible-class-item {
-		box-shadow: none !important;
-	}
-	.class-item-more-actions, .class-item-sortable-trigger {
-		visibility: ${ showActions ? 'visible' : 'hidden' };
-	}
-	.class-item-sortable-trigger {
-		visibility: ${ showActions ? 'visible' : 'hidden' };
-	}
-	&:hover&:not(:disabled) {
-		.class-item-more-actions, .class-item-sortable-trigger  {
-			visibility: visible;
-		}
-	}
-`
+	( { showActions, showSortIndicator } ) => `
+    min-height: 36px;
+
+    &.visible-class-item {
+      box-shadow: none !important;
+    }
+
+    .class-item-locator {
+      visibility: hidden;
+    }
+
+    .class-item-sortable-trigger {
+      visibility: ${ showSortIndicator && showActions ? 'visible' : 'hidden' };
+    }
+
+    &:hover:not(:disabled) {
+      .class-item-locator {
+        visibility: visible;
+      }
+
+      .class-item-sortable-trigger {
+        visibility: ${ showSortIndicator ? 'visible' : 'hidden' };
+      }
+    }
+  `
 );
-//  Experimental start
-
-const StyledListItemButton = isVersion311IsActive ? StyledListItemButtonV2 : StyledListItemButtonV1;
 
 const Indicator = styled( Box, {
 	shouldForwardProp: ( prop: string ) => ! [ 'isActive', 'isError' ].includes( prop ),

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

@@ -8,6 +8,7 @@ import { IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
+import { usePrefetchCssClassUsage } from '../../hooks/use-prefetch-css-class-usage';
 import { usePanelActions } from './class-manager-panel';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { SaveChangesDialog, useDialog } from './save-changes-dialog';
@@ -17,6 +18,7 @@ export const ClassManagerButton = () => {
 	const { open: openPanel } = usePanelActions();
 	const { save: saveDocument } = useActiveDocumentActions();
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+	const { prefetchClassesUsage } = usePrefetchCssClassUsage();
 
 	const { userCan } = useUserStylesCapability();
 
@@ -33,6 +35,7 @@ export const ClassManagerButton = () => {
 		}
 
 		openPanel();
+		prefetchClassesUsage();
 	};
 
 	return (
@@ -65,6 +68,7 @@ export const ClassManagerButton = () => {
 									await saveDocument();
 									closeSaveChangesDialog();
 									openPanel();
+									prefetchClassesUsage();
 								},
 							},
 						} }

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

@@ -1,7 +1,6 @@
-import { useEffect } from 'react';
 import * as React from 'react';
+import { useEffect } from 'react';
 import { setDocumentModifiedStatus } from '@elementor/editor-documents';
-import { EXPERIMENTAL_FEATURES } from '@elementor/editor-editing-panel';
 import {
 	__createPanel as createPanel,
 	Panel,
@@ -11,7 +10,7 @@ import {
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
 import { ThemeProvider } from '@elementor/editor-ui';
-import { changeEditMode, isExperimentActive } 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';
@@ -19,6 +18,7 @@ import {
 	Alert,
 	Box,
 	Button,
+	Chip,
 	DialogHeader,
 	Divider,
 	ErrorBoundary,
@@ -26,22 +26,24 @@ import {
 	type IconButtonProps,
 	Stack,
 } from '@elementor/ui';
-import { useDebounceState } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
+import { useClassesOrder } from '../../hooks/use-classes-order';
 import { useDirtyState } from '../../hooks/use-dirty-state';
+import { useFilters } from '../../hooks/use-filters';
 import { saveGlobalClasses } from '../../save-global-classes';
 import { slice } from '../../store';
+import { ActiveFilters } from '../search-and-filter/components/filter/active-filters';
+import { CssClassFilter } from '../search-and-filter/components/filter/css-class-filter';
+import { ClassManagerSearch } from '../search-and-filter/components/search/class-manager-search';
+import { SearchAndFilterProvider } from '../search-and-filter/context';
 import { ClassManagerIntroduction } from './class-manager-introduction';
-import { ClassManagerSearch } from './class-manager-search';
 import { hasDeletedItems, onDelete } from './delete-class';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { GlobalClassesList } from './global-classes-list';
 import { blockPanelInteractions, unblockPanelInteractions } from './panel-interactions';
 import { SaveChangesDialog, useDialog } from './save-changes-dialog';
 
-const isVersion311IsActive = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
-
 const id = 'global-classes-manager';
 
 // We need to disable the app-bar buttons, and the elements overlays when opening the classes manager panel.
@@ -65,13 +67,7 @@ export const { panel, usePanelActions } = createPanel( {
 } );
 
 export function ClassManagerPanel() {
-	const { debouncedValue, inputValue, handleChange } = useDebounceState( {
-		delay: 300,
-		initialValue: '',
-	} );
-
 	const isDirty = useDirtyState();
-
 	const { close: closePanel } = usePanelActions();
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 
@@ -88,72 +84,72 @@ export function ClassManagerPanel() {
 		<ThemeProvider>
 			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
 				<Panel>
-					<PanelHeader>
-						<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
-							<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
-								<FlippedColorSwatchIcon fontSize="inherit" />
-								{ __( 'Class Manager', 'elementor' ) }
-							</PanelHeaderTitle>
-							<CloseButton
-								sx={ { marginLeft: 'auto' } }
-								disabled={ isPublishing }
-								onClose={ () => {
-									if ( isDirty ) {
-										openSaveChangesDialog();
-										return;
-									}
-
-									closePanel();
-								} }
-							/>
-						</Stack>
-					</PanelHeader>
-					<PanelBody
-						sx={ {
-							display: 'flex',
-							flexDirection: 'column',
-							height: '100%',
-						} }
-					>
-						{ isVersion311IsActive && (
-							<>
-								<ClassManagerSearch searchValue={ inputValue } onChange={ handleChange } />
-								<Divider
-									sx={ {
-										borderWidth: '1px 0 0 0',
+					<SearchAndFilterProvider>
+						<PanelHeader>
+							<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
+								<Stack width="100%" direction="row" gap={ 1 }>
+									<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
+										<FlippedColorSwatchIcon fontSize="inherit" />
+										{ __( 'Class Manager', 'elementor' ) }
+									</PanelHeaderTitle>
+									<TotalCssClassCounter />
+								</Stack>
+								<CloseButton
+									sx={ { marginLeft: 'auto' } }
+									disabled={ isPublishing }
+									onClose={ () => {
+										if ( isDirty ) {
+											openSaveChangesDialog();
+											return;
+										}
+
+										closePanel();
 									} }
 								/>
-							</>
-						) }
-
-						<Box
-							px={ 2 }
+							</Stack>
+						</PanelHeader>
+						<PanelBody
 							sx={ {
-								flexGrow: 1,
-								overflowY: 'auto',
+								display: 'flex',
+								flexDirection: 'column',
+								height: '100%',
 							} }
 						>
-							<GlobalClassesList
-								disabled={ isPublishing }
-								searchValue={ debouncedValue }
-								onSearch={ handleChange }
-							/>
-						</Box>
-					</PanelBody>
-
-					<PanelFooter>
-						<Button
-							fullWidth
-							size="small"
-							color="global"
-							variant="contained"
-							onClick={ publish }
-							disabled={ ! isDirty }
-							loading={ isPublishing }
-						>
-							{ __( 'Save changes', 'elementor' ) }
-						</Button>
-					</PanelFooter>
+							<Box px={ 2 } pb={ 1 }>
+								<Stack direction="row" justifyContent="spaceBetween" gap={ 0.5 } sx={ { pb: 0.5 } }>
+									<Box sx={ { flexGrow: 1 } }>
+										<ClassManagerSearch />
+									</Box>
+									<CssClassFilter />
+								</Stack>
+								<ActiveFilters />
+							</Box>
+							<Divider />
+							<Box
+								px={ 2 }
+								sx={ {
+									flexGrow: 1,
+									overflowY: 'auto',
+								} }
+							>
+								<GlobalClassesList disabled={ isPublishing } />
+							</Box>
+						</PanelBody>
+
+						<PanelFooter>
+							<Button
+								fullWidth
+								size="small"
+								color="global"
+								variant="contained"
+								onClick={ publish }
+								disabled={ ! isDirty }
+								loading={ isPublishing }
+							>
+								{ __( 'Save changes', 'elementor' ) }
+							</Button>
+						</PanelFooter>
+					</SearchAndFilterProvider>
 				</Panel>
 			</ErrorBoundary>
 			<ClassManagerIntroduction />
@@ -240,3 +236,15 @@ const usePublish = () => {
 		},
 	} );
 };
+
+const TotalCssClassCounter = () => {
+	const filters = useFilters();
+	const cssClasses = useClassesOrder();
+
+	return (
+		<Chip
+			size={ 'small' }
+			label={ filters ? `${ filters.length } / ${ cssClasses?.length }` : cssClasses?.length }
+		/>
+	);
+};

package/src/components/class-manager/delete-confirmation-dialog.tsx

@@ -13,6 +13,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useCssClassUsageByID } from '../../hooks/use-css-class-usage-by-id';
 import { deleteClass } from './delete-class';
 
 type DeleteConfirmationDialogProps = Pick< StyleDefinition, 'id' | 'label' >;
@@ -48,12 +49,27 @@ const TITLE_ID = 'delete-class-dialog';
 
 const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps ) => {
 	const { closeDialog } = useDeleteConfirmation();
-
+	const {
+		data: { total, content },
+	} = useCssClassUsageByID( id );
 	const onConfirm = () => {
 		deleteClass( id );
 
 		closeDialog();
 	};
+	// translators: %1: total usage count, %2: number of pages
+	const text =
+		total && content.length
+			? __(
+					'Will permanently remove it from your project and may affect the design across all elements using it. Used %1 times across %2 pages. This action cannot be undone.',
+					'elementor'
+			  )
+					.replace( '%1', total.toString() )
+					.replace( '%2', content.length.toString() )
+			: __(
+					'Will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.',
+					'elementor'
+			  );
 
 	return (
 		<Dialog open onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth="xs">
@@ -67,17 +83,21 @@ const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps
 					<Typography variant="subtitle2" component="span">
 						&nbsp;{ label }&nbsp;
 					</Typography>
-					{ __(
-						'will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.',
-						'elementor'
-					) }
+					{ text }
 				</DialogContentText>
 			</DialogContent>
 			<DialogActions>
 				<Button color="secondary" onClick={ closeDialog }>
 					{ __( 'Not now', 'elementor' ) }
 				</Button>
-				<Button variant="contained" color="error" onClick={ onConfirm }>
+
+				<Button
+					// eslint-disable-next-line jsx-a11y/no-autofocus
+					autoFocus
+					variant="contained"
+					color="error"
+					onClick={ onConfirm }
+				>
 					{ __( 'Delete', 'elementor' ) }
 				</Button>
 			</DialogActions>