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

package/src/components/search-and-filter/components/filter/active-filters.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Chip, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import type { FilterKey } from '../../../../hooks/use-filtered-css-class-usage';
+import { useSearchAndFilters } from '../../context';
+import { ClearIconButton } from './clear-icon-button';
+import { filterConfig } from './filter-list';
+
+export const ActiveFilters = () => {
+	const {
+		filters: { filters, setFilters },
+	} = useSearchAndFilters();
+
+	const handleRemove = ( key: FilterKey ) => {
+		setFilters( ( prev ) => ( { ...prev, [ key ]: false } ) );
+	};
+
+	const activeKeys = Object.keys( filters ).filter( ( key ): key is FilterKey => filters[ key as FilterKey ] );
+
+	const showClearIcon = activeKeys.length > 0;
+
+	return (
+		<Stack direction="row" alignItems="center" justifyContent="space-between">
+			<Stack direction="row" gap={ 0.5 } alignItems="center" flexWrap="wrap">
+				{ activeKeys.map( ( key ) => (
+					<Chip
+						key={ key }
+						label={ filterConfig[ key ] }
+						onDelete={ () => handleRemove( key ) }
+						sx={ chipSx }
+						size="tiny"
+					/>
+				) ) }
+			</Stack>
+			{ showClearIcon && (
+				<ClearIconButton
+					tooltipText={ __( 'Clear Filters', 'elementor' ) }
+					sx={ { margin: '0 0 auto auto' } }
+				/>
+			) }
+		</Stack>
+	);
+};
+
+const chipSx = {
+	'& .MuiChip-deleteIcon': {
+		display: 'none',
+		transition: 'opacity 0.2s',
+	},
+	'&:hover .MuiChip-deleteIcon': {
+		display: 'block',
+	},
+};

package/src/components/search-and-filter/components/filter/clear-icon-button.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { BrushBigIcon } from '@elementor/icons';
+import { Box, IconButton, styled, type SxProps, type Theme, Tooltip } from '@elementor/ui';
+
+import { useSearchAndFilters } from '../../context';
+
+type ClearIconButtonProps = { tooltipText: React.ReactNode; sx?: SxProps< Theme > };
+
+export const ClearIconButton = ( { tooltipText, sx }: ClearIconButtonProps ) => {
+	const {
+		filters: { onClearFilter },
+	} = useSearchAndFilters();
+
+	return (
+		<Tooltip title={ tooltipText } placement="top" disableInteractive>
+			<Box>
+				<CustomIconButton aria-label={ tooltipText } size="tiny" onClick={ onClearFilter } sx={ sx }>
+					<BrushBigIcon fontSize="tiny" />
+				</CustomIconButton>
+			</Box>
+		</Tooltip>
+	);
+};
+const CustomIconButton = styled( IconButton )( ( { theme } ) => ( {
+	'&.Mui-disabled': {
+		pointerEvents: 'auto',
+		'&:hover': {
+			color: theme.palette.action.disabled,
+		},
+	},
+} ) );

package/src/components/search-and-filter/components/filter/css-class-filter.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { PopoverBody, PopoverHeader } from '@elementor/editor-ui';
+import { FilterIcon } from '@elementor/icons';
+import { bindPopover, bindToggle, Divider, Popover, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useSearchAndFilters } from '../../context';
+import { ClearIconButton } from './clear-icon-button';
+import { FilterList } from './filter-list';
+
+export const CssClassFilter = () => {
+	const {
+		filters: { filters },
+	} = useSearchAndFilters();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		disableAutoFocus: true,
+	} );
+
+	const showCleanIcon = Object.values( filters ).some( ( value ) => value );
+
+	return (
+		<>
+			<Tooltip title={ __( 'Filters', 'elementor' ) } placement="top">
+				<ToggleButton
+					value="filter"
+					size={ 'tiny' }
+					selected={ popupState.isOpen }
+					{ ...bindToggle( popupState ) }
+				>
+					<FilterIcon fontSize="tiny" />
+				</ToggleButton>
+			</Tooltip>
+			<Popover
+				sx={ {
+					maxWidth: '344px',
+				} }
+				anchorOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: -21,
+				} }
+				{ ...bindPopover( popupState ) }
+			>
+				<PopoverHeader
+					actions={
+						showCleanIcon
+							? [
+									<ClearIconButton
+										key="clear-all-button"
+										tooltipText={ __( 'Clear all', 'elementor' ) }
+									/>,
+							  ]
+							: []
+					}
+					onClose={ popupState.close }
+					title={ __( 'Filters', 'elementor' ) }
+					icon={ <FilterIcon fontSize={ 'tiny' } /> }
+				/>
+				<Divider
+					sx={ {
+						borderWidth: '1px 0 0 0',
+					} }
+				/>
+				<PopoverBody width={ 344 } height={ 125 }>
+					<FilterList />
+				</PopoverBody>
+			</Popover>
+		</>
+	);
+};

package/src/components/search-and-filter/components/filter/filter-list.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Checkbox, Chip, MenuItem, MenuList, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type FilterKey, useFilteredCssClassUsage } from '../../../../hooks/use-filtered-css-class-usage';
+import { useSearchAndFilters } from '../../context';
+
+export const filterConfig: Record< FilterKey, string > = {
+	unused: __( 'Unused', 'elementor' ),
+	empty: __( 'Empty', 'elementor' ),
+	onThisPage: __( 'On this page', 'elementor' ),
+};
+
+export const FilterList = () => {
+	const {
+		filters: { filters, setFilters },
+	} = useSearchAndFilters();
+	const filteredCssClass = useFilteredCssClassUsage();
+
+	const handleOnClick = ( value: FilterKey ) => {
+		setFilters( ( prev ) => ( { ...prev, [ value ]: ! prev[ value ] } ) );
+	};
+
+	return (
+		<MenuList>
+			<MenuItem onClick={ () => handleOnClick( 'unused' ) }>
+				<LabeledCheckbox
+					label={ filterConfig.unused }
+					checked={ filters.unused }
+					suffix={ <Chip size={ 'tiny' } sx={ { ml: 'auto' } } label={ filteredCssClass.unused.length } /> }
+				/>
+			</MenuItem>
+			<MenuItem onClick={ () => handleOnClick( 'empty' ) }>
+				<LabeledCheckbox
+					label={ filterConfig.empty }
+					checked={ filters.empty }
+					suffix={ <Chip size={ 'tiny' } sx={ { ml: 'auto' } } label={ filteredCssClass.empty.length } /> }
+				/>
+			</MenuItem>
+			<MenuItem onClick={ () => handleOnClick( 'onThisPage' ) }>
+				<LabeledCheckbox
+					label={ filterConfig.onThisPage }
+					checked={ filters.onThisPage }
+					suffix={
+						<Chip size={ 'tiny' } sx={ { ml: 'auto' } } label={ filteredCssClass.onThisPage.length } />
+					}
+				/>
+			</MenuItem>
+		</MenuList>
+	);
+};
+
+type LabeledCheckboxProps = {
+	label: string;
+	suffix?: React.ReactNode;
+	checked: boolean;
+};
+
+const LabeledCheckbox = ( { label, suffix, checked }: LabeledCheckboxProps ) => (
+	<Stack direction="row" alignItems="center" gap={ 0.5 } flex={ 1 }>
+		<Checkbox
+			size={ 'small' }
+			checked={ checked }
+			sx={ {
+				padding: 0,
+				color: 'text.tertiary',
+				'&.Mui-checked': {
+					color: 'text.tertiary',
+				},
+			} }
+		/>
+		<Typography variant="caption" sx={ { color: 'text.secondary' } }>
+			{ label }
+		</Typography>
+		{ suffix }
+	</Stack>
+);

package/src/components/{class-manager → search-and-filter/components/search}/class-manager-search.tsx

@@ -1,24 +1,25 @@
 import * as React from 'react';
 import { SearchIcon } from '@elementor/icons';
-import { Box, Grid, InputAdornment, Stack, TextField } from '@elementor/ui';
+import { Box, InputAdornment, Stack, TextField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-type ClassMangerSearchProps = {
-	searchValue: string;
-	onChange: ( value: string ) => void;
-};
+import { useSearchAndFilters } from '../../context';
+
+export const ClassManagerSearch = () => {
+	const {
+		search: { inputValue, handleChange },
+	} = useSearchAndFilters();
 
-export const ClassManagerSearch = ( { searchValue, onChange }: ClassMangerSearchProps ) => (
-	<Grid item xs={ 6 } px={ 2 } pb={ 1 }>
+	return (
 		<Stack direction="row" gap={ 0.5 } sx={ { width: '100%' } }>
 			<Box sx={ { flexGrow: 1 } }>
 				<TextField
 					role={ 'search' }
 					fullWidth
 					size={ 'tiny' }
-					value={ searchValue }
+					value={ inputValue }
 					placeholder={ __( 'Search', 'elementor' ) }
-					onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => onChange( e.target.value ) }
+					onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => handleChange( e.target.value ) }
 					InputProps={ {
 						startAdornment: (
 							<InputAdornment position="start">
@@ -29,5 +30,5 @@ export const ClassManagerSearch = ( { searchValue, onChange }: ClassMangerSearch
 				/>
 			</Box>
 		</Stack>
-	</Grid>
-);
+	);
+};

package/src/components/search-and-filter/context.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import { useDebounceState } from '@elementor/utils';
+
+export type CheckedFilters = {
+	empty: boolean;
+	onThisPage: boolean;
+	unused: boolean;
+};
+
+type SearchContextType = {
+	debouncedValue: string;
+	inputValue: string;
+	handleChange: ( value: string ) => void;
+	onClearSearch: () => void;
+};
+type FilterAndSortContextType = {
+	filters: CheckedFilters;
+	setFilters: React.Dispatch< React.SetStateAction< CheckedFilters > >;
+	onClearFilter: () => void;
+};
+
+export type SearchAndFilterContextType = {
+	search: SearchContextType;
+	filters: FilterAndSortContextType;
+};
+
+const SearchAndFilterContext = createContext< SearchAndFilterContextType | undefined >( undefined );
+
+const INIT_CHECKED_FILTERS: CheckedFilters = {
+	empty: false,
+	onThisPage: false,
+	unused: false,
+};
+
+export const SearchAndFilterProvider = ( { children }: React.PropsWithChildren ) => {
+	const [ filters, setFilters ] = React.useState< CheckedFilters >( INIT_CHECKED_FILTERS );
+	const { debouncedValue, inputValue, handleChange } = useDebounceState( {
+		delay: 300,
+		initialValue: '',
+	} );
+
+	const onClearSearch = () => {
+		handleChange( '' );
+	};
+
+	const onClearFilter = () => {
+		setFilters( INIT_CHECKED_FILTERS );
+	};
+
+	return (
+		<SearchAndFilterContext.Provider
+			value={ {
+				search: {
+					debouncedValue,
+					inputValue,
+					handleChange,
+					onClearSearch,
+				},
+				filters: {
+					filters,
+					setFilters,
+					onClearFilter,
+				},
+			} }
+		>
+			{ children }
+		</SearchAndFilterContext.Provider>
+	);
+};
+
+export const useSearchAndFilters = () => {
+	const context = useContext( SearchAndFilterContext );
+	if ( ! context ) {
+		throw new Error( 'useSearchContext must be used within a SearchContextProvider' );
+	}
+	return context;
+};

package/src/global-classes-styles-provider.ts

@@ -1,6 +1,5 @@
-import { generateId } from '@elementor/editor-styles';
+import { generateId, type StyleDefinitionVariant } from '@elementor/editor-styles';
 import { createStylesProvider } from '@elementor/editor-styles-repository';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import {
 	__dispatch as dispatch,
 	__getState as getState,
@@ -30,13 +29,9 @@ export const globalClassesStylesProvider = createStylesProvider( {
 		all: () => selectOrderedClasses( getState() ),
 		get: ( id ) => selectClass( getState(), id ),
 		resolveCssName: ( id: string ) => {
-			if ( ! isExperimentActive( 'e_v_3_30' ) ) {
-				return id;
-			}
-
 			return selectClass( getState(), id )?.label ?? id;
 		},
-		create: ( label ) => {
+		create: ( label, variants: StyleDefinitionVariant[] = [] ) => {
 			const classes = selectGlobalClasses( getState() );
 
 			const existingLabels = Object.values( classes ).map( ( style ) => style.label );
@@ -53,7 +48,7 @@ export const globalClassesStylesProvider = createStylesProvider( {
 					id,
 					type: 'class',
 					label,
-					variants: [],
+					variants,
 				} )
 			);
 
@@ -78,5 +73,15 @@ export const globalClassesStylesProvider = createStylesProvider( {
 				} )
 			);
 		},
+		updateCustomCss: ( args ) => {
+			dispatch(
+				slice.actions.updateProps( {
+					id: args.id,
+					meta: args.meta,
+					custom_css: args.custom_css,
+					props: {},
+				} )
+			);
+		},
 	},
 } );

package/src/hooks/use-css-class-usage-by-id.ts

@@ -0,0 +1,15 @@
+import { type EnhancedCssClassUsageContent } from '../components/css-class-usage/types';
+import { useCssClassUsage } from './use-css-class-usage';
+
+const EMPTY_CLASS_USAGE: EnhancedCssClassUsageContent = {
+	total: 0,
+	content: [],
+};
+
+export const useCssClassUsageByID = (
+	id: string
+): { data: EnhancedCssClassUsageContent; isLoading: boolean; isSuccess?: boolean } => {
+	const { data, ...rest } = useCssClassUsage();
+	const classData = data?.[ id ] ?? EMPTY_CLASS_USAGE;
+	return { ...rest, data: classData };
+};

package/src/hooks/use-css-class-usage.ts

@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from '@elementor/query';
+
+import { fetchCssClassUsage } from '../../service/css-class-usage-service';
+import { type EnhancedCssClassUsage, QUERY_KEY } from '../components/css-class-usage/types';
+
+export const useCssClassUsage = (): UseQueryResult< EnhancedCssClassUsage > => {
+	return useQuery( {
+		queryKey: [ QUERY_KEY ],
+		queryFn: fetchCssClassUsage,
+		refetchOnMount: false,
+		refetchOnWindowFocus: true,
+	} );
+};

package/src/hooks/use-empty-css-class.ts

@@ -0,0 +1,12 @@
+import { __useSelector } from '@elementor/store';
+
+import { selectEmptyCssClass, selectGlobalClasses } from '../store';
+
+export const useEmptyCssClass = () => {
+	return __useSelector( selectEmptyCssClass );
+};
+
+export const useAllCssClassesIDs = () => {
+	const cssClasses = __useSelector( selectGlobalClasses );
+	return Object.keys( cssClasses );
+};

package/src/hooks/use-filtered-css-class-usage.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { __useActiveDocument as useActiveDocument } from '@elementor/editor-documents';
+
+import { type CssClassUsageContent, type EnhancedCssClassUsage } from '../components/css-class-usage/types';
+import { useCssClassUsage } from './use-css-class-usage';
+import { useAllCssClassesIDs, useEmptyCssClass } from './use-empty-css-class';
+
+export type FilterKey = 'empty' | 'onThisPage' | 'unused';
+
+type FilteredCssClassUsage = Record< FilterKey, string[] >;
+
+const findCssClassKeysByPageID = ( data: EnhancedCssClassUsage, pageId: number ) => {
+	const result: string[] = [];
+	for ( const key in data ) {
+		data[ key ].content.forEach( ( content: CssClassUsageContent ) => {
+			if ( +content.pageId === pageId ) {
+				result.push( key );
+			}
+		} );
+	}
+	return result;
+};
+
+const getUnusedClasses = ( usedCssClass: string[], potentialUnused: string[] ): string[] => {
+	const set = new Set( usedCssClass );
+	return potentialUnused.filter( ( cssClass: string ) => ! set.has( cssClass ) );
+};
+
+const EMPTY_FILTERED_CSS_CLASS_RESPONSE: FilteredCssClassUsage = {
+	empty: [],
+	onThisPage: [],
+	unused: [],
+};
+
+export const useFilteredCssClassUsage = (): FilteredCssClassUsage => {
+	const document = useActiveDocument();
+	const emptyCssClasses = useEmptyCssClass();
+	const { data, isLoading } = useCssClassUsage();
+	const listOfCssClasses = useAllCssClassesIDs();
+
+	const emptyCssClassesIDs = useMemo( () => emptyCssClasses.map( ( { id } ) => id ), [ emptyCssClasses ] );
+
+	const onThisPage = useMemo( () => {
+		if ( ! data || ! document ) {
+			return [];
+		}
+		return findCssClassKeysByPageID( data, document.id );
+	}, [ data, document ] );
+
+	const unused = useMemo( () => {
+		if ( ! data ) {
+			return [];
+		}
+
+		return getUnusedClasses( Object.keys( data ), listOfCssClasses );
+	}, [ data, listOfCssClasses ] );
+
+	if ( isLoading || ! data || ! document ) {
+		return EMPTY_FILTERED_CSS_CLASS_RESPONSE;
+	}
+
+	return {
+		onThisPage,
+		unused,
+		empty: emptyCssClassesIDs,
+	};
+};

package/src/hooks/use-filters.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+
+import { useSearchAndFilters } from '../components/search-and-filter/context';
+import { type FilterKey, useFilteredCssClassUsage } from './use-filtered-css-class-usage';
+
+export const useFilters = () => {
+	const {
+		filters: { filters },
+	} = useSearchAndFilters();
+	const allFilters = useFilteredCssClassUsage();
+
+	return useMemo( () => {
+		const activeEntries = Object.entries( filters ).filter( ( [ , isActive ] ) => isActive ) as [
+			FilterKey,
+			true,
+		][];
+
+		if ( activeEntries.length === 0 ) {
+			return null;
+		}
+
+		return activeEntries.reduce< string[] >( ( acc, [ key ], index ) => {
+			const current = allFilters[ key ] || [];
+			if ( index === 0 ) {
+				return current;
+			}
+			return acc.filter( ( val ) => current.includes( val ) );
+		}, [] );
+	}, [ filters, allFilters ] );
+};

package/src/hooks/use-prefetch-css-class-usage.ts

@@ -0,0 +1,16 @@
+import { useQueryClient } from '@elementor/query';
+
+import { fetchCssClassUsage } from '../../service/css-class-usage-service';
+import { QUERY_KEY } from '../components/css-class-usage/types';
+
+export function usePrefetchCssClassUsage() {
+	const queryClient = useQueryClient();
+
+	const prefetchClassesUsage = () =>
+		queryClient.prefetchQuery( {
+			queryKey: [ QUERY_KEY ],
+			queryFn: fetchCssClassUsage,
+		} );
+
+	return { prefetchClassesUsage };
+}

package/src/init.ts

@@ -1,5 +1,9 @@
 import { injectIntoLogic } from '@elementor/editor';
-import { injectIntoClassSelectorActions, registerStyleProviderToColors } from '@elementor/editor-editing-panel';
+import {
+	injectIntoClassSelectorActions,
+	injectIntoCssClassConvert,
+	registerStyleProviderToColors,
+} from '@elementor/editor-editing-panel';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
@@ -7,6 +11,7 @@ import { __registerSlice as registerSlice } from '@elementor/store';
 
 import { ClassManagerButton } from './components/class-manager/class-manager-button';
 import { panel } from './components/class-manager/class-manager-panel';
+import { ConvertLocalClassToGlobalClass } from './components/convert-local-class-to-global-class';
 import { PopulateStore } from './components/populate-store';
 import { GLOBAL_CLASSES_PROVIDER_KEY, globalClassesStylesProvider } from './global-classes-styles-provider';
 import { slice } from './store';
@@ -23,6 +28,11 @@ export function init() {
 		component: PopulateStore,
 	} );
 
+	injectIntoCssClassConvert( {
+		id: 'global-classes-convert-from-local-class',
+		component: ConvertLocalClassToGlobalClass,
+	} );
+
 	injectIntoClassSelectorActions( {
 		id: 'global-classes-manager-button',
 		component: ClassManagerButton,

package/src/store.ts

@@ -1,5 +1,6 @@
 import { mergeProps, type Props } from '@elementor/editor-props';
 import {
+	type CustomCss,
 	getVariantByMeta,
 	type StyleDefinition,
 	type StyleDefinitionID,
@@ -111,26 +112,32 @@ export const slice = createSlice( {
 			state,
 			{
 				payload,
-			}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >
+			}: PayloadAction< {
+				id: StyleDefinitionID;
+				meta: StyleDefinitionVariant[ 'meta' ];
+				props: Props;
+				custom_css?: CustomCss | null;
+			} >
 		) {
 			const style = state.data.items[ payload.id ];
 
 			if ( ! style ) {
 				throw new GlobalClassNotFoundError( { context: { styleId: payload.id } } );
 			}
+
 			localHistory.next( state.data );
 
 			const variant = getVariantByMeta( style, payload.meta );
+			let customCss = ( 'custom_css' in payload ? payload.custom_css : variant?.custom_css ) ?? null;
+			customCss = customCss?.raw ? customCss : null;
 
 			if ( variant ) {
 				variant.props = mergeProps( variant.props, payload.props );
+				variant.custom_css = customCss;
 
-				if ( Object.keys( variant.props ).length === 0 ) {
-					// If the props object is empty after merging, we remove the variant.
-					style.variants = style.variants.filter( ( v ) => v !== variant );
-				}
+				style.variants = getNonEmptyVariants( style );
 			} else {
-				style.variants.push( { meta: payload.meta, props: payload.props } );
+				style.variants.push( { meta: payload.meta, props: payload.props, custom_css: customCss } );
 			}
 
 			state.isDirty = true;
@@ -179,6 +186,12 @@ export const slice = createSlice( {
 	},
 } );
 
+const getNonEmptyVariants = ( style: StyleDefinition ) => {
+	return style.variants.filter(
+		( { props, custom_css: customCss }: StyleDefinitionVariant ) => Object.keys( props ).length || customCss?.raw
+	);
+};
+
 // Selectors
 export const selectData = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].data;
 
@@ -200,3 +213,7 @@ export const selectOrderedClasses = createSelector( selectGlobalClasses, selectO
 
 export const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>
 	state[ SLICE_NAME ].data.items[ id ] ?? null;
+
+export const selectEmptyCssClass = createSelector( selectData, ( { items } ) =>
+	Object.values( items ).filter( ( cssClass ) => cssClass.variants.length === 0 )
+);