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

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

@@ -1,47 +1,34 @@
 import * as React from 'react';
 import { useEffect, useMemo } from 'react';
-import { type StyleDefinitionID } from '@elementor/editor-styles';
+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 { __ } from '@wordpress/i18n';
 
 import { useClassesOrder } from '../../hooks/use-classes-order';
+import { useFilters } from '../../hooks/use-filters';
 import { useOrderedClasses } from '../../hooks/use-ordered-classes';
 import { slice } from '../../store';
+import { useSearchAndFilters } from '../search-and-filter/context';
 import { ClassItem } from './class-item';
-import { CssClassNotFound } from './class-manager-class-not-found';
 import { DeleteConfirmationProvider } from './delete-confirmation-dialog';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
+import { getNotFoundType, NotFound } from './not-found';
 import { SortableItem, SortableProvider } from './sortable';
 
 type GlobalClassesListProps = {
 	disabled?: boolean;
-	searchValue: string;
-	onSearch: ( searchValue: string ) => void;
 };
 
-export const GlobalClassesList = ( { disabled, searchValue, onSearch }: GlobalClassesListProps ) => {
+export const GlobalClassesList = ( { disabled }: GlobalClassesListProps ) => {
+	const {
+		search: { debouncedValue: searchValue },
+	} = useSearchAndFilters();
 	const cssClasses = useOrderedClasses();
 	const dispatch = useDispatch();
-
+	const filters = useFilters();
 	const [ classesOrder, reorderClasses ] = useReorder();
-
-	const lowercaseLabels = useMemo(
-		() =>
-			cssClasses.map( ( cssClass ) => ( {
-				...cssClass,
-				lowerLabel: cssClass.label.toLowerCase(),
-			} ) ),
-		[ cssClasses ]
-	);
-
-	const filteredClasses = useMemo( () => {
-		return searchValue.length > 1
-			? lowercaseLabels.filter( ( cssClass ) =>
-					cssClass.lowerLabel.toLowerCase().includes( searchValue.toLowerCase() )
-			  )
-			: cssClasses;
-	}, [ searchValue, cssClasses, lowercaseLabels ] );
+	const filteredCssClasses = useFilteredCssClasses();
 
 	useEffect( () => {
 		const handler = ( event: KeyboardEvent ) => {
@@ -65,42 +52,43 @@ export const GlobalClassesList = ( { disabled, searchValue, onSearch }: GlobalCl
 		return <EmptyState />;
 	}
 
+	const notFoundType = getNotFoundType( searchValue, filters, filteredCssClasses );
+
+	if ( notFoundType ) {
+		return <NotFound notFoundType={ notFoundType } />;
+	}
+
 	return (
 		<DeleteConfirmationProvider>
-			{ filteredClasses.length <= 0 && searchValue.length > 1 ? (
-				<CssClassNotFound onClear={ () => onSearch( '' ) } searchValue={ searchValue } />
-			) : (
-				<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
-					<SortableProvider value={ classesOrder } onChange={ reorderClasses }>
-						{ filteredClasses?.map( ( { id, label } ) => {
-							return (
-								<SortableItem key={ id } id={ id }>
-									{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (
-										<ClassItem
-											isSearchActive={ searchValue.length < 2 }
-											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>
-							);
-						} ) }
-					</SortableProvider>
-				</List>
-			) }
+			<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>
+						);
+					} ) }
+				</SortableProvider>
+			</List>
 		</DeleteConfirmationProvider>
 	);
 };
@@ -137,3 +125,34 @@ const useReorder = () => {
 
 	return [ order, reorder ] as const;
 };
+
+const useFilteredCssClasses = (): StyleDefinition[] => {
+	const cssClasses = useOrderedClasses();
+	const {
+		search: { debouncedValue: searchValue },
+	} = useSearchAndFilters();
+	const filters = useFilters();
+
+	const lowercaseLabels = useMemo(
+		() =>
+			cssClasses.map( ( cssClass ) => ( {
+				...cssClass,
+				lowerLabel: cssClass.label.toLowerCase(),
+			} ) ),
+		[ cssClasses ]
+	);
+
+	const filteredClasses = useMemo( () => {
+		if ( searchValue.length > 1 ) {
+			return lowercaseLabels.filter( ( cssClass ) => cssClass.lowerLabel.includes( searchValue.toLowerCase() ) );
+		}
+		return cssClasses;
+	}, [ searchValue, cssClasses, lowercaseLabels ] );
+
+	return useMemo( () => {
+		if ( filters && filters.length > 0 ) {
+			return filteredClasses.filter( ( cssClass ) => filters.includes( cssClass.id ) );
+		}
+		return filteredClasses;
+	}, [ filteredClasses, filters ] );
+};

package/src/components/class-manager/not-found.tsx

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { type FC } from 'react';
+import type { StyleDefinition } from '@elementor/editor-styles';
+import { ColorSwatchIcon, PhotoIcon } from '@elementor/icons';
+import { Box, Link, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useSearchAndFilters } from '../search-and-filter/context';
+
+export const getNotFoundType = (
+	searchValue: string,
+	filters: string[] | null | undefined,
+	filteredClasses: StyleDefinition[]
+): NotFoundType | undefined => {
+	const searchNotFound = filteredClasses.length <= 0 && searchValue.length > 1;
+	const filterNotFound = filters && filters.length === 0;
+	const filterAndSearchNotFound = searchNotFound && filterNotFound;
+
+	if ( filterAndSearchNotFound ) {
+		return 'filterAndSearch';
+	}
+	if ( searchNotFound ) {
+		return 'search';
+	}
+	if ( filterNotFound ) {
+		return 'filter';
+	}
+	return undefined;
+};
+
+export type NotFoundType = 'filter' | 'search' | 'filterAndSearch';
+
+const notFound = {
+	filterAndSearch: {
+		mainText: __( 'Sorry, nothing matched.', 'elementor' ),
+		sceneryText: __( 'Try something else.', 'elementor' ),
+		icon: <PhotoIcon color="inherit" fontSize="large" />,
+	},
+	search: {
+		mainText: __( 'Sorry, nothing matched', 'elementor' ),
+		sceneryText: __( 'Clear your input and try something else.', 'elementor' ),
+		icon: <PhotoIcon color="inherit" fontSize="large" />,
+	},
+	filter: {
+		mainText: __( 'Sorry, nothing matched that search.', 'elementor' ),
+		sceneryText: __( 'Clear the filters and try something else.', 'elementor' ),
+		icon: <ColorSwatchIcon color="inherit" fontSize="large" />,
+	},
+};
+
+type GetNotFoundConfigProps = {
+	notFoundType: NotFoundType;
+};
+
+export const NotFound = ( { notFoundType }: GetNotFoundConfigProps ): React.ReactElement => {
+	const {
+		search: { onClearSearch, inputValue },
+		filters: { onClearFilter },
+	} = useSearchAndFilters();
+
+	switch ( notFoundType ) {
+		case 'filter':
+			return <NotFoundLayout { ...notFound.filter } onClear={ onClearFilter } />;
+		case 'search':
+			return <NotFoundLayout { ...notFound.search } searchValue={ inputValue } onClear={ onClearSearch } />;
+		case 'filterAndSearch':
+			return (
+				<NotFoundLayout
+					{ ...notFound.filterAndSearch }
+					onClear={ () => {
+						onClearFilter();
+						onClearSearch();
+					} }
+				/>
+			);
+	}
+};
+
+type NotFoundLayoutProps = {
+	searchValue?: string;
+	onClear: () => void;
+	mainText: string;
+	sceneryText: string;
+	icon: React.ReactElement;
+};
+
+export const NotFoundLayout: FC< NotFoundLayoutProps > = ( { onClear, searchValue, mainText, sceneryText, icon } ) => (
+	<Stack
+		color={ 'text.secondary' }
+		pt={ 5 }
+		alignItems="center"
+		gap={ 1 }
+		overflow={ 'hidden' }
+		justifySelf={ 'center' }
+	>
+		{ icon }
+		<Box
+			sx={ {
+				width: '100%',
+			} }
+		>
+			<Typography align="center" variant="subtitle2" color="inherit">
+				{ mainText }
+			</Typography>
+			{ searchValue && (
+				<Typography
+					variant="subtitle2"
+					color="inherit"
+					sx={ {
+						display: 'flex',
+						width: '100%',
+						justifyContent: 'center',
+					} }
+				>
+					<span>&ldquo;</span>
+					<span
+						style={ {
+							maxWidth: '80%',
+							overflow: 'hidden',
+							textOverflow: 'ellipsis',
+						} }
+					>
+						{ searchValue }
+					</span>
+					<span>&rdquo;.</span>
+				</Typography>
+			) }
+		</Box>
+		<Typography align="center" variant="caption" color="inherit">
+			{ sceneryText }
+		</Typography>
+		<Typography align="center" variant="caption" color="inherit">
+			<Link color="secondary" variant="caption" component="button" onClick={ onClear }>
+				{ __( 'Clear & try again', 'elementor' ) }
+			</Link>
+		</Typography>
+	</Stack>
+);

package/src/components/convert-local-class-to-global-class.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { validateStyleLabel } from '@elementor/editor-styles-repository';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Divider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { globalClassesStylesProvider } from '../global-classes-styles-provider';
+
+type OwnProps = {
+	successCallback: ( _: string ) => void;
+	styleDef: StyleDefinition | null;
+	canConvert: boolean;
+};
+
+export const ConvertLocalClassToGlobalClass = ( props: OwnProps ) => {
+	const localStyleData = props.styleDef;
+
+	const handleConversion = () => {
+		const newClassName = createClassName( `converted-class-` );
+
+		if ( ! localStyleData ) {
+			throw new Error( 'Style definition is required for converting local class to global class.' );
+		}
+
+		const newId = globalClassesStylesProvider.actions.create?.( newClassName, localStyleData.variants );
+		if ( newId ) {
+			props.successCallback( newId );
+		}
+	};
+
+	return (
+		<>
+			<MenuListItem
+				disabled={ ! props.canConvert }
+				onClick={ handleConversion }
+				dense
+				sx={ {
+					'&.Mui-focusVisible': {
+						border: 'none',
+						boxShadow: 'none !important',
+						backgroundColor: 'transparent',
+					},
+				} }
+			>
+				{ __( 'Convert to global class', 'elementor' ) }
+			</MenuListItem>
+			<Divider />
+		</>
+	);
+};
+
+function createClassName( prefix: string ): string {
+	let i = 1;
+	let newClassName = `${ prefix }${ i }`;
+
+	while ( ! validateStyleLabel( newClassName, 'create' ).isValid ) {
+		newClassName = `${ prefix }${ ++i }`;
+	}
+
+	return newClassName;
+}

package/src/components/css-class-usage/components/css-class-usage-popover.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { __useOpenDocumentInNewTab as useOpenDocumentInNewTab } from '@elementor/editor-documents';
+import {
+	EllipsisWithTooltip,
+	PopoverBody,
+	PopoverHeader,
+	PopoverMenuList,
+	type VirtualizedItem,
+} from '@elementor/editor-ui';
+import {
+	CurrentLocationIcon,
+	ExternalLinkIcon,
+	FooterTemplateIcon,
+	HeaderTemplateIcon,
+	PagesIcon,
+	PopupTemplateIcon,
+	PostTypeIcon,
+} from '@elementor/icons';
+import { Box, Chip, Divider, Icon, MenuList, Stack, styled, Tooltip, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useCssClassUsageByID } from '../../../hooks/use-css-class-usage-by-id';
+import { type ContentType } from '../types';
+
+type CssClassUsageRecord = VirtualizedItem< 'item', string > & { docType: ContentType };
+
+const iconMapper: Record< ContentType, { label: string; icon: React.ReactElement } > = {
+	'wp-post': {
+		label: __( 'Post', 'elementor' ),
+		icon: <PostTypeIcon fontSize={ 'inherit' } />,
+	},
+	'wp-page': {
+		label: __( 'Page', 'elementor' ),
+		icon: <PagesIcon fontSize={ 'inherit' } />,
+	},
+	popup: {
+		label: __( 'Popup', 'elementor' ),
+		icon: <PopupTemplateIcon fontSize={ 'inherit' } />,
+	},
+	header: {
+		label: __( 'Header', 'elementor' ),
+		icon: <HeaderTemplateIcon fontSize={ 'inherit' } />,
+	},
+	footer: {
+		label: __( 'Footer', 'elementor' ),
+		icon: <FooterTemplateIcon fontSize={ 'inherit' } />,
+	},
+};
+
+export const CssClassUsagePopover = ( {
+	cssClassID,
+	onClose,
+}: {
+	onClose: React.ComponentProps< typeof PopoverHeader >[ 'onClose' ];
+	cssClassID: string;
+} ) => {
+	const { data: classUsage } = useCssClassUsageByID( cssClassID );
+	const onNavigate = useOpenDocumentInNewTab();
+
+	const cssClassUsageRecords: CssClassUsageRecord[] =
+		classUsage?.content.map(
+			( { title, elements, pageId, type } ) =>
+				( {
+					type: 'item',
+					value: pageId,
+					label: title,
+					secondaryText: elements.length.toString(),
+					docType: type,
+				} ) as CssClassUsageRecord
+		) ?? [];
+
+	return (
+		<>
+			<PopoverHeader
+				icon={ <CurrentLocationIcon fontSize={ 'tiny' } /> }
+				title={
+					<Stack flexDirection={ 'row' } gap={ 1 } alignItems={ 'center' }>
+						<Box aria-label={ 'header-title' }>{ __( 'Locator', 'elementor' ) }</Box>
+						<Box>
+							<Chip sx={ { lineHeight: 1 } } size={ 'tiny' } label={ classUsage.total } />
+						</Box>
+					</Stack>
+				}
+				onClose={ onClose }
+			/>
+			<Divider />
+			<PopoverBody width={ 300 }>
+				<PopoverMenuList
+					onSelect={ ( value ) => onNavigate( +value ) }
+					items={ cssClassUsageRecords }
+					onClose={ () => {} }
+					menuListTemplate={ StyledCssClassUsageItem }
+					menuItemContentTemplate={ ( cssClassUsageRecord ) => (
+						<Stack flexDirection={ 'row' } flex={ 1 } alignItems={ 'center' }>
+							<Box display={ 'flex' } sx={ { pr: 1 } }>
+								<Tooltip
+									disableInteractive
+									title={
+										iconMapper?.[ cssClassUsageRecord.docType as ContentType ]?.label ??
+										cssClassUsageRecord.docType
+									}
+									placement="top"
+								>
+									<Icon fontSize={ 'small' }>
+										{ iconMapper?.[ cssClassUsageRecord.docType as ContentType ]?.icon || (
+											<PagesIcon fontSize={ 'inherit' } />
+										) }
+									</Icon>
+								</Tooltip>
+							</Box>
+							<Box sx={ { pr: 0.5, maxWidth: '173px' } } display={ 'flex' }>
+								<EllipsisWithTooltip
+									title={ cssClassUsageRecord.label }
+									as={ Typography }
+									variant="caption"
+									maxWidth="173px"
+									sx={ {
+										lineHeight: 1,
+									} }
+								/>
+							</Box>
+							<ExternalLinkIcon className={ 'hover-only-icon' } fontSize={ 'tiny' } />
+							<Chip
+								sx={ {
+									ml: 'auto',
+								} }
+								size={ 'tiny' }
+								label={ cssClassUsageRecord.secondaryText }
+							/>
+						</Stack>
+					) }
+				/>
+			</PopoverBody>
+		</>
+	);
+};
+
+const StyledCssClassUsageItem = styled( MenuList )( ( { theme } ) => ( {
+	'& > li': {
+		display: 'flex',
+		cursor: 'pointer',
+		height: 32,
+		width: '100%',
+	},
+	'& > [role="option"]': {
+		...theme.typography.caption,
+		lineHeight: 'inherit',
+		padding: theme.spacing( 0.5, 1, 0.5, 2 ),
+		textOverflow: 'ellipsis',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		opacity: 1,
+		'.hover-only-icon': {
+			color: theme.palette.text.disabled,
+			opacity: 0,
+		},
+		'&:hover': {
+			borderRadius: theme.spacing( 0.5 ),
+			backgroundColor: theme.palette.action.hover,
+			'.hover-only-icon': {
+				color: theme.palette.text.disabled,
+				opacity: 1,
+			},
+		},
+	},
+	width: '100%',
+	position: 'relative',
+} ) );

package/src/components/css-class-usage/components/css-class-usage-trigger.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { type MouseEvent, type PropsWithChildren } from 'react';
+import { InfoAlert } from '@elementor/editor-ui';
+import { CurrentLocationIcon } from '@elementor/icons';
+import {
+	bindPopover,
+	bindTrigger,
+	Box,
+	IconButton,
+	Infotip,
+	Popover,
+	styled,
+	Tooltip,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useCssClassUsageByID } from '../../../hooks/use-css-class-usage-by-id';
+import { type CssClassID } from '../types';
+import { CssClassUsagePopover } from './css-class-usage-popover';
+
+export const CssClassUsageTrigger = ( { id, onClick }: { id: CssClassID; onClick: ( id: CssClassID ) => void } ) => {
+	const {
+		data: { total },
+		isLoading,
+	} = useCssClassUsageByID( id );
+	const cssClassUsagePopover = usePopupState( { variant: 'popover', popupId: 'css-class-usage-popover' } );
+
+	if ( isLoading ) {
+		return null;
+	}
+
+	const WrapperComponent = total !== 0 ? TooltipWrapper : InfoAlertMessage;
+
+	return (
+		<>
+			<Box position={ 'relative' }>
+				<WrapperComponent total={ total }>
+					<CustomIconButton
+						disabled={ total === 0 }
+						size={ 'tiny' }
+						{ ...bindTrigger( cssClassUsagePopover ) }
+						onClick={ ( e: MouseEvent ) => {
+							if ( total !== 0 ) {
+								bindTrigger( cssClassUsagePopover ).onClick( e );
+								onClick( id );
+							}
+						} }
+					>
+						<CurrentLocationIcon fontSize={ 'tiny' } />
+					</CustomIconButton>
+				</WrapperComponent>
+			</Box>
+			<Box>
+				<Popover
+					anchorOrigin={ {
+						vertical: 'center',
+						horizontal: 'right',
+					} }
+					transformOrigin={ {
+						vertical: 15,
+						horizontal: -50,
+					} }
+					{ ...bindPopover( cssClassUsagePopover ) }
+					onClose={ () => {
+						bindPopover( cssClassUsagePopover ).onClose();
+						onClick( '' );
+					} }
+				>
+					<CssClassUsagePopover
+						onClose={ cssClassUsagePopover.close }
+						aria-label="css-class-usage-popover"
+						cssClassID={ id }
+					/>
+				</Popover>
+			</Box>
+		</>
+	);
+};
+
+const CustomIconButton = styled( IconButton )( ( { theme } ) => ( {
+	'&.Mui-disabled': {
+		pointerEvents: 'auto', // Enable hover
+		'&:hover': {
+			color: theme.palette.action.disabled, // optional
+		},
+	},
+	height: '22px',
+	width: '22px',
+} ) );
+
+const TooltipWrapper = ( { children, total }: PropsWithChildren< { total: number } > ) => (
+	<Tooltip
+		disableInteractive
+		placement={ 'top' }
+		title={ `${ __( 'Show {{number}} {{locations}}', 'elementor' )
+			.replace( '{{number}}', total.toString() )
+			.replace(
+				'{{locations}}',
+				total === 1 ? __( 'location', 'elementor' ) : __( 'locations', 'elementor' )
+			) }` }
+	>
+		<span>{ children }</span>
+	</Tooltip>
+);
+
+const InfoAlertMessage = ( { children }: PropsWithChildren ) => (
+	<Infotip
+		disableInteractive
+		placement={ 'top' }
+		color={ 'secondary' }
+		content={ <InfoAlert sx={ { mt: 1 } }>{ __( 'This class isn’t being used yet.', 'elementor' ) }</InfoAlert> }
+	>
+		<span>{ children }</span>
+	</Infotip>
+);

package/src/components/css-class-usage/components/index.ts

@@ -0,0 +1,2 @@
+export { CssClassUsagePopover } from './css-class-usage-popover';
+export { CssClassUsageTrigger } from './css-class-usage-trigger';

package/src/components/css-class-usage/types.ts

@@ -0,0 +1,19 @@
+export const QUERY_KEY = 'css-classes-usage';
+
+export type CssClassID = string;
+
+export type ContentType = 'header' | 'footer' | 'wp-page' | 'wp-post' | 'popup';
+
+export type CssClassUsageContent = {
+	elements: string[];
+	pageId: string;
+	total: number;
+	title: string;
+	type: ContentType;
+};
+
+export type CssClassUsage = Record< CssClassID, Array< CssClassUsageContent > >;
+
+export type EnhancedCssClassUsageContent = { content: Array< CssClassUsageContent >; total: number };
+
+export type EnhancedCssClassUsage = Record< CssClassID, EnhancedCssClassUsageContent >;

package/src/components/css-class-usage/utils.ts

@@ -0,0 +1,10 @@
+import type { CssClassUsage, EnhancedCssClassUsage } from './types';
+
+export const transformData = ( data: CssClassUsage ): EnhancedCssClassUsage =>
+	Object.entries( data ).reduce< EnhancedCssClassUsage >( ( acc, [ key, value ] ) => {
+		acc[ key ] = {
+			content: value || [],
+			total: value.reduce( ( total, val ) => total + ( val?.total || 0 ), 0 ),
+		};
+		return acc;
+	}, {} );