@elementor/editor-controls 4.4.0-1084 → 4.4.0-1086

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.4.0-1084",
+  "version": "4.4.0-1086",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-1084",
-    "@elementor/editor-elements": "4.4.0-1084",
-    "@elementor/editor-props": "4.4.0-1084",
-    "@elementor/editor-responsive": "4.4.0-1084",
-    "@elementor/editor-ui": "4.4.0-1084",
-    "@elementor/editor-v1-adapters": "4.4.0-1084",
-    "@elementor/env": "4.4.0-1084",
-    "@elementor/events": "4.4.0-1084",
-    "@elementor/http-client": "4.4.0-1084",
+    "@elementor/editor-current-user": "4.4.0-1086",
+    "@elementor/editor-elements": "4.4.0-1086",
+    "@elementor/editor-props": "4.4.0-1086",
+    "@elementor/editor-responsive": "4.4.0-1086",
+    "@elementor/editor-ui": "4.4.0-1086",
+    "@elementor/editor-v1-adapters": "4.4.0-1086",
+    "@elementor/env": "4.4.0-1086",
+    "@elementor/events": "4.4.0-1086",
+    "@elementor/http-client": "4.4.0-1086",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.4.0-1084",
-    "@elementor/query": "4.4.0-1084",
-    "@elementor/schema": "4.4.0-1084",
-    "@elementor/session": "4.4.0-1084",
+    "@elementor/locations": "4.4.0-1086",
+    "@elementor/query": "4.4.0-1086",
+    "@elementor/schema": "4.4.0-1086",
+    "@elementor/session": "4.4.0-1086",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1084",
-    "@elementor/wp-media": "4.4.0-1084",
+    "@elementor/utils": "4.4.0-1086",
+    "@elementor/wp-media": "4.4.0-1086",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/icon-library/font-awesome-7-catalog.ts

@@ -8,10 +8,13 @@ import {
 
 export { FONT_AWESOME_7_LIBRARIES, getFontAwesome7EditorConfig } from './font-awesome-7-data';
 
+export type FontAwesome7Library = ( typeof FONT_AWESOME_7_LIBRARIES )[ number ][ 'library' ];
+export type FontAwesome7LibraryFilter = FontAwesome7Library[];
+
 export type FontAwesome7Icon = FontAwesome7IconDefinition & {
 	id: string;
 	label: string;
-	library: string;
+	library: FontAwesome7Library;
 	value: string;
 };
 
@@ -37,14 +40,20 @@ export async function loadFontAwesome7Catalog( signal?: AbortSignal ): Promise<
 	return catalogs.flat();
 }
 
-export function filterFontAwesome7Icons( icons: FontAwesome7Icon[], searchValue?: string | null ): FontAwesome7Icon[] {
+export function filterFontAwesome7Icons(
+	icons: FontAwesome7Icon[],
+	searchValue?: string | null,
+	libraries: FontAwesome7LibraryFilter = []
+): FontAwesome7Icon[] {
 	const query = searchValue?.trim().toLowerCase() ?? '';
+	const libraryIcons =
+		libraries.length === 0 ? icons : icons.filter( ( icon ) => libraries.includes( icon.library ) );
 
 	if ( query === '' ) {
-		return icons;
+		return libraryIcons;
 	}
 
-	return icons.filter( ( icon ) => {
+	return libraryIcons.filter( ( icon ) => {
 		if ( icon.name.includes( query ) || icon.label.toLowerCase().includes( query ) ) {
 			return true;
 		}
@@ -93,7 +102,7 @@ export function findFontAwesome7Icon(
 	} );
 }
 
-function toCatalogIcon( icon: FontAwesome7IconDefinition, library: string ): FontAwesome7Icon {
+function toCatalogIcon( icon: FontAwesome7IconDefinition, library: FontAwesome7Library ): FontAwesome7Icon {
 	return {
 		...icon,
 		id: `${ library }:${ icon.name }`,

package/src/controls/icon-library/icon-library-filter.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { CheckIcon, FilterIcon, LibraryIcon, ListIcon, StarFilledIcon, StarIcon } from '@elementor/icons';
+import {
+	bindMenu,
+	bindToggle,
+	Box,
+	Menu,
+	MenuItem,
+	Stack,
+	ToggleButton,
+	Tooltip,
+	Typography,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import {
+	FONT_AWESOME_7_LIBRARIES,
+	type FontAwesome7Library,
+	type FontAwesome7LibraryFilter,
+} from './font-awesome-7-catalog';
+
+const FILTER_MENU_WIDTH = 280;
+const FILTER_INDICATOR_SIZE = 6;
+const FILTER_INDICATOR_OFFSET = 4;
+const LIBRARY_FILTER_ORDER = {
+	regular: 0,
+	solid: 1,
+	brands: 2,
+} as const;
+
+const LIBRARY_FILTER_CONFIG: Record<
+	FontAwesome7Library,
+	{ getLabel: () => string; Icon: typeof StarIcon; order: number }
+> = {
+	'fa-regular': {
+		getLabel: () => __( 'Font Awesome - Regular', 'elementor' ),
+		Icon: StarIcon,
+		order: LIBRARY_FILTER_ORDER.regular,
+	},
+	'fa-solid': {
+		getLabel: () => __( 'Font Awesome - Solid', 'elementor' ),
+		Icon: StarFilledIcon,
+		order: LIBRARY_FILTER_ORDER.solid,
+	},
+	'fa-brands': {
+		getLabel: () => __( 'Font Awesome - Brands', 'elementor' ),
+		Icon: LibraryIcon,
+		order: LIBRARY_FILTER_ORDER.brands,
+	},
+};
+
+type IconLibraryFilterProps = {
+	value: FontAwesome7LibraryFilter;
+	onChange: ( value: FontAwesome7LibraryFilter ) => void;
+};
+
+export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps ) => {
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId,
+	} );
+	const options = FONT_AWESOME_7_LIBRARIES.map( ( { library } ) => ( {
+		value: library,
+		label: LIBRARY_FILTER_CONFIG[ library ].getLabel(),
+		Icon: LIBRARY_FILTER_CONFIG[ library ].Icon,
+		order: LIBRARY_FILTER_CONFIG[ library ].order,
+	} ) ).sort( ( firstOption, secondOption ) => firstOption.order - secondOption.order );
+	const isFiltered = value.length > 0;
+	const filterButtonLabel = isFiltered
+		? __( 'Filter by library, active', 'elementor' )
+		: __( 'Filter by library', 'elementor' );
+
+	const handleAllIconsClick = () => {
+		onChange( [] );
+	};
+
+	const handleLibraryClick = ( library: FontAwesome7Library ) => {
+		const nextValue = value.includes( library )
+			? value.filter( ( selectedLibrary ) => selectedLibrary !== library )
+			: [ ...value, library ];
+
+		onChange( nextValue.length === FONT_AWESOME_7_LIBRARIES.length ? [] : nextValue );
+	};
+
+	return (
+		<>
+			<Tooltip title={ __( 'Filter by library', 'elementor' ) } placement="top">
+				<ToggleButton
+					aria-label={ filterButtonLabel }
+					value="filter"
+					size="tiny"
+					selected={ popupState.isOpen }
+					sx={ { position: 'relative', flexShrink: 0 } }
+					{ ...bindToggle( popupState ) }
+					aria-expanded={ popupState.isOpen }
+				>
+					<FilterIcon fontSize="tiny" />
+					{ isFiltered ? (
+						<Box
+							component="span"
+							aria-hidden="true"
+							sx={ {
+								position: 'absolute',
+								insetBlockStart: FILTER_INDICATOR_OFFSET,
+								insetInlineEnd: FILTER_INDICATOR_OFFSET,
+								width: FILTER_INDICATOR_SIZE,
+								height: FILTER_INDICATOR_SIZE,
+								borderRadius: '50%',
+								bgcolor: 'secondary.main',
+							} }
+						/>
+					) : null }
+				</ToggleButton>
+			</Tooltip>
+			<Menu
+				{ ...bindMenu( popupState ) }
+				MenuListProps={ {
+					dense: true,
+					autoFocusItem: true,
+					'aria-label': __( 'Filter by library', 'elementor' ),
+				} }
+				sx={ { '& .MuiPaper-root': { minWidth: FILTER_MENU_WIDTH } } }
+			>
+				<MenuItem
+					role="menuitemcheckbox"
+					aria-checked={ ! isFiltered }
+					selected={ ! isFiltered }
+					onClick={ handleAllIconsClick }
+				>
+					{ renderFilterMenuItemContent( __( 'All icons', 'elementor' ), ListIcon, ! isFiltered ) }
+				</MenuItem>
+				{ options.map( ( { value: library, label, Icon } ) => (
+					<MenuItem
+						key={ library }
+						role="menuitemcheckbox"
+						aria-checked={ value.includes( library ) }
+						selected={ value.includes( library ) }
+						onClick={ () => handleLibraryClick( library ) }
+					>
+						{ renderFilterMenuItemContent( label, Icon, value.includes( library ) ) }
+					</MenuItem>
+				) ) }
+			</Menu>
+		</>
+	);
+};
+
+const renderFilterMenuItemContent = ( label: string, Icon: typeof ListIcon, selected: boolean ) => (
+	<Stack direction="row" alignItems="center" gap={ 1 } width="100%">
+		<Icon fontSize="tiny" />
+		<Typography variant="caption" sx={ { flex: 1 } }>
+			{ label }
+		</Typography>
+		{ selected ? <CheckIcon fontSize="tiny" /> : null }
+	</Stack>
+);

package/src/controls/icon-library/icon-library-popover.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
 	PopoverBody,
 	PopoverHeader,
@@ -18,8 +18,10 @@ import {
 	filterFontAwesome7Icons,
 	findFontAwesome7Icon,
 	type FontAwesome7Icon,
+	type FontAwesome7LibraryFilter,
 } from './font-awesome-7-catalog';
 import { FontAwesomeGlyph } from './font-awesome-glyph';
+import { IconLibraryFilter } from './icon-library-filter';
 import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
 
 export const ICON_LIBRARY_POPOVER_WIDTH = 300;
@@ -60,9 +62,13 @@ export const IconLibraryPopover = ( {
 		handleChange: handleSearchChange,
 		setImmediateValue: setSearchValue,
 	} = useDebounceState( { delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY } );
+	const [ activeLibraries, setActiveLibraries ] = useState< FontAwesome7LibraryFilter >( [] );
 	const { data: icons = [], isLoading } = useFontAwesome7Catalog( open );
 
-	const items = useMemo( () => createIconLibraryItems( icons, searchValue ), [ icons, searchValue ] );
+	const items = useMemo(
+		() => createIconLibraryItems( icons, searchValue, activeLibraries ),
+		[ activeLibraries, icons, searchValue ]
+	);
 	const selectedValue = useMemo(
 		() => findFontAwesome7Icon( icons, selectedIconClass, selectedIconLibrary )?.id,
 		[ icons, selectedIconClass, selectedIconLibrary ]
@@ -70,6 +76,7 @@ export const IconLibraryPopover = ( {
 
 	const handleClose = () => {
 		setSearchValue( '' );
+		setActiveLibraries( [] );
 		onClose();
 	};
 
@@ -98,13 +105,16 @@ export const IconLibraryPopover = ( {
 				icon={ <ComponentsIcon fontSize="tiny" /> }
 				sx={ { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 } }
 			/>
-			<SearchField
-				value={ searchInputValue }
-				onSearch={ handleSearchChange }
-				placeholder={ __( 'Search', 'elementor' ) }
-				id="icon-library-search"
-				sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }
-			/>
+			<Stack direction="row" alignItems="center" gap={ 1 } sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }>
+				<SearchField
+					value={ searchInputValue }
+					onSearch={ handleSearchChange }
+					placeholder={ __( 'Search', 'elementor' ) }
+					id="icon-library-search"
+					sx={ { flex: 1, px: 0, pb: 0 } }
+				/>
+				<IconLibraryFilter value={ activeLibraries } onChange={ setActiveLibraries } />
+			</Stack>
 			<Divider />
 			<Box sx={ { flex: 1, overflow: 'auto', minHeight: 0 } }>
 				<IconLibraryContent
@@ -112,6 +122,7 @@ export const IconLibraryPopover = ( {
 					items={ items }
 					selectedValue={ selectedValue }
 					searchValue={ searchValue }
+					isCatalogAvailable={ icons.length > 0 }
 					onSelect={ handleSelect }
 					onClose={ handleClose }
 					onClearSearch={ handleClearSearch }
@@ -126,6 +137,7 @@ type IconLibraryContentProps = {
 	items: IconLibraryItem[];
 	selectedValue: string | undefined;
 	searchValue: string;
+	isCatalogAvailable: boolean;
 	onSelect: ( id: string ) => void;
 	onClose: () => void;
 	onClearSearch: () => void;
@@ -136,6 +148,7 @@ const IconLibraryContent = ( {
 	items,
 	selectedValue,
 	searchValue,
+	isCatalogAvailable,
 	onSelect,
 	onClose,
 	onClearSearch,
@@ -153,7 +166,13 @@ const IconLibraryContent = ( {
 			onClose={ onClose }
 			itemHeight={ ICON_LIBRARY_ROW_HEIGHT }
 			menuItemContentTemplate={ IconLibraryRow }
-			noResultsComponent={ <IconLibraryEmptyState searchValue={ searchValue } onClear={ onClearSearch } /> }
+			noResultsComponent={
+				<IconLibraryEmptyState
+					searchValue={ searchValue }
+					isCatalogAvailable={ isCatalogAvailable }
+					onClear={ onClearSearch }
+				/>
+			}
 			data-testid="icon-library-list"
 		/>
 	);
@@ -165,8 +184,16 @@ const IconLibraryLoadingState = () => (
 	</Stack>
 );
 
-const IconLibraryEmptyState = ( { searchValue, onClear }: { searchValue: string; onClear: () => void } ) => {
-	if ( searchValue.trim() === '' ) {
+const IconLibraryEmptyState = ( {
+	searchValue,
+	isCatalogAvailable,
+	onClear,
+}: {
+	searchValue: string;
+	isCatalogAvailable: boolean;
+	onClear: () => void;
+} ) => {
+	if ( ! isCatalogAvailable ) {
 		return <CatalogUnavailable />;
 	}
 
@@ -218,17 +245,25 @@ const NoResults = ( { searchValue, onClear }: { searchValue: string; onClear: ()
 		<Typography align="center" variant="subtitle2" color="text.secondary">
 			{ __( 'Sorry, nothing matched', 'elementor' ) }
 		</Typography>
-		<Typography align="center" variant="subtitle2" color="text.secondary" noWrap sx={ { maxWidth: '80%' } }>
-			&ldquo;{ searchValue }&rdquo;.
-		</Typography>
-		<Link color="secondary" variant="caption" component="button" type="button" onClick={ onClear }>
-			{ __( 'Clear & try again', 'elementor' ) }
-		</Link>
+		{ searchValue ? (
+			<>
+				<Typography align="center" variant="subtitle2" color="text.secondary" noWrap sx={ { maxWidth: '80%' } }>
+					&ldquo;{ searchValue }&rdquo;.
+				</Typography>
+				<Link color="secondary" variant="caption" component="button" type="button" onClick={ onClear }>
+					{ __( 'Clear & try again', 'elementor' ) }
+				</Link>
+			</>
+		) : null }
 	</Stack>
 );
 
-const createIconLibraryItems = ( icons: FontAwesome7Icon[], searchValue: string ): IconLibraryItem[] =>
-	filterFontAwesome7Icons( icons, searchValue ).map( ( icon ) => ( {
+const createIconLibraryItems = (
+	icons: FontAwesome7Icon[],
+	searchValue: string,
+	libraries: FontAwesome7LibraryFilter
+): IconLibraryItem[] =>
+	filterFontAwesome7Icons( icons, searchValue, libraries ).map( ( icon ) => ( {
 		...icon,
 		type: 'item',
 		value: icon.id,