@elementor/editor-controls 4.3.0-beta1 → 4.3.0-beta3

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

@@ -0,0 +1,344 @@
+import * as React from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { Box, Tooltip, useTheme } from '@elementor/ui';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { __ } from '@wordpress/i18n';
+
+import { type FontAwesome7Icon } from './font-awesome-7-catalog';
+import { FontAwesomeGlyph } from './font-awesome-glyph';
+
+export const ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT = 4;
+export const ICON_LIBRARY_GRID_MIN_CELL_SIZE = 52;
+export const ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1000;
+
+const ICON_GLYPH_SIZE = 20;
+const GRID_OVERSCAN = 6;
+const GRID_COLUMN_GAP = 1;
+const GRID_HORIZONTAL_PADDING = 1;
+const HOME_END_KEYS = new Set( [ 'Home', 'End' ] );
+
+const getGridMetrics = ( containerWidth: number, columnGap: number, inlinePadding: number ) => {
+	const availableWidth = containerWidth - inlinePadding;
+
+	if ( availableWidth <= 0 ) {
+		return {
+			columnCount: ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT,
+			cellSize: ICON_LIBRARY_GRID_MIN_CELL_SIZE,
+		};
+	}
+
+	const columnCount = Math.max(
+		1,
+		Math.floor( ( availableWidth + columnGap ) / ( ICON_LIBRARY_GRID_MIN_CELL_SIZE + columnGap ) )
+	);
+	const cellSize = Math.floor( ( availableWidth - columnGap * ( columnCount - 1 ) ) / columnCount );
+
+	return {
+		columnCount,
+		cellSize: Math.max( cellSize, 1 ),
+	};
+};
+
+type IconLibraryGridItem = FontAwesome7Icon & {
+	id: string;
+	value: string;
+};
+
+type IconLibraryGridProps = {
+	items: IconLibraryGridItem[];
+	selectedValue?: string;
+	onSelect: ( id: string ) => void;
+	onClose: () => void;
+	noResultsComponent?: React.ReactNode;
+};
+
+export const IconLibraryGrid = ( {
+	items,
+	selectedValue,
+	onSelect,
+	onClose,
+	noResultsComponent,
+}: IconLibraryGridProps ) => {
+	const theme = useTheme();
+	const containerRef = useRef< HTMLDivElement >( null );
+	const cellRefs = useRef( new Map< string, HTMLButtonElement >() );
+	const shouldRestoreFocusRef = useRef( false );
+	const selectedIndex = items.findIndex( ( item ) => item.id === selectedValue );
+	const [ focusedIndex, setFocusedIndex ] = useState( selectedIndex >= 0 ? selectedIndex : 0 );
+	const [ { columnCount, cellSize }, setGridMetrics ] = useState( () => getGridMetrics( 0, 0, 0 ) );
+	const rowCount = Math.ceil( items.length / columnCount );
+	const virtualizer = useVirtualizer( {
+		count: rowCount,
+		getScrollElement: () => containerRef.current,
+		estimateSize: () => cellSize,
+		overscan: GRID_OVERSCAN,
+	} );
+	const focusedItem = items[ focusedIndex ];
+	const visibleRowIndexes = virtualizer.getVirtualIndexes().join( ',' );
+
+	useLayoutEffect( () => {
+		setFocusedIndex( ( current ) => {
+			if ( items.length === 0 ) {
+				return 0;
+			}
+
+			if ( selectedIndex >= 0 ) {
+				return selectedIndex;
+			}
+
+			return Math.min( current, items.length - 1 );
+		} );
+
+		if ( selectedIndex >= 0 ) {
+			virtualizer.scrollToIndex( Math.floor( selectedIndex / columnCount ) );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ columnCount, items, selectedIndex, selectedValue ] );
+
+	useLayoutEffect( () => {
+		if ( ! shouldRestoreFocusRef.current || ! focusedItem ) {
+			return;
+		}
+
+		const cell = cellRefs.current.get( focusedItem.id );
+
+		if ( ! cell ) {
+			return;
+		}
+
+		cell.focus();
+		shouldRestoreFocusRef.current = false;
+	}, [ focusedItem, visibleRowIndexes ] );
+
+	useLayoutEffect( () => {
+		const container = containerRef.current;
+
+		if ( ! container ) {
+			return;
+		}
+
+		const measureGrid = () => {
+			const columnGap = Number.parseFloat( theme.spacing( GRID_COLUMN_GAP ) );
+			const inlinePadding = Number.parseFloat( theme.spacing( GRID_HORIZONTAL_PADDING ) ) * 2;
+			setGridMetrics( getGridMetrics( container.clientWidth, columnGap, inlinePadding ) );
+		};
+
+		measureGrid();
+		const resizeObserver = new ResizeObserver( measureGrid );
+		resizeObserver.observe( container );
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [ theme, items.length ] );
+
+	useLayoutEffect( () => {
+		virtualizer.measure();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cellSize, columnCount ] );
+
+	const isRtl = theme.direction === 'rtl' || document.documentElement.dir === 'rtl';
+	const horizontalOffset = isRtl ? -1 : 1;
+
+	const moveFocus = ( nextIndex: number ) => {
+		if ( nextIndex < 0 || nextIndex >= items.length ) {
+			return;
+		}
+
+		shouldRestoreFocusRef.current = true;
+		setFocusedIndex( nextIndex );
+		virtualizer.scrollToIndex( Math.floor( nextIndex / columnCount ) );
+	};
+
+	const handleKeyDown = ( event: React.KeyboardEvent< HTMLButtonElement >, index: number ) => {
+		if ( event.key === 'Enter' || event.key === ' ' ) {
+			event.preventDefault();
+			onSelect( items[ index ].id );
+			onClose();
+			return;
+		}
+
+		if ( event.key === 'ArrowRight' ) {
+			event.preventDefault();
+			moveFocus( index + horizontalOffset );
+			return;
+		}
+
+		if ( event.key === 'ArrowLeft' ) {
+			event.preventDefault();
+			moveFocus( index - horizontalOffset );
+			return;
+		}
+
+		if ( event.key === 'ArrowDown' ) {
+			event.preventDefault();
+			moveFocus( index + columnCount );
+			return;
+		}
+
+		if ( event.key === 'ArrowUp' ) {
+			event.preventDefault();
+			moveFocus( index - columnCount );
+			return;
+		}
+
+		if ( HOME_END_KEYS.has( event.key ) ) {
+			event.preventDefault();
+
+			if ( event.ctrlKey ) {
+				moveFocus( event.key === 'Home' ? 0 : items.length - 1 );
+				return;
+			}
+
+			const rowStart = Math.floor( index / columnCount ) * columnCount;
+			const rowEnd = Math.min( rowStart + columnCount - 1, items.length - 1 );
+
+			moveFocus( event.key === 'Home' ? rowStart : rowEnd );
+		}
+	};
+
+	return (
+		<Box
+			ref={ containerRef }
+			sx={ {
+				width: '100%',
+				height: '100%',
+				minWidth: 0,
+				overflowX: 'hidden',
+				overflowY: 'auto',
+			} }
+		>
+			{ items.length === 0 && noResultsComponent ? (
+				noResultsComponent
+			) : (
+				<Box
+					role="grid"
+					aria-label={ __( 'Icons', 'elementor' ) }
+					aria-rowcount={ rowCount }
+					aria-colcount={ columnCount }
+					data-testid="icon-library-grid"
+					sx={ {
+						width: '100%',
+						minWidth: 0,
+						height: virtualizer.getTotalSize(),
+						position: 'relative',
+					} }
+				>
+					{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
+						const startIndex = virtualRow.index * columnCount;
+						const rowItems = items.slice( startIndex, startIndex + columnCount );
+
+						return (
+							<Box
+								key={ virtualRow.key }
+								role="row"
+								aria-rowindex={ virtualRow.index + 1 }
+								sx={ {
+									position: 'absolute',
+									top: 0,
+									left: 0,
+									width: '100%',
+									height: virtualRow.size,
+									transform: `translateY(${ virtualRow.start }px)`,
+									display: 'grid',
+									gridTemplateColumns: `repeat(${ columnCount }, minmax(0, 1fr))`,
+									gap: GRID_COLUMN_GAP,
+									px: GRID_HORIZONTAL_PADDING,
+									boxSizing: 'border-box',
+								} }
+							>
+								{ rowItems.map( ( item, columnIndex ) => {
+									const index = startIndex + columnIndex;
+									const isSelected = selectedValue === item.id;
+									const tabIndex = focusedIndex === index ? 0 : -1;
+
+									return (
+										<Box
+											key={ item.id }
+											role="presentation"
+											sx={ { minWidth: 0, minHeight: 0, width: '100%', height: '100%' } }
+										>
+											<Tooltip
+												title={ item.label }
+												placement="top"
+												enterDelay={ ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY }
+												enterNextDelay={ ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY }
+												disableInteractive
+												disableFocusListener
+											>
+												<Box
+													component="button"
+													type="button"
+													role="gridcell"
+													aria-colindex={ columnIndex + 1 }
+													aria-label={ item.label }
+													aria-selected={ isSelected }
+													tabIndex={ tabIndex }
+													ref={ ( node: HTMLButtonElement | null ) => {
+														if ( node ) {
+															cellRefs.current.set( item.id, node );
+														} else {
+															cellRefs.current.delete( item.id );
+														}
+													} }
+													onClick={ () => {
+														onSelect( item.id );
+														onClose();
+													} }
+													onFocus={ () => setFocusedIndex( index ) }
+													onKeyDown={ ( event: React.KeyboardEvent< HTMLButtonElement > ) =>
+														handleKeyDown( event, index )
+													}
+													sx={ {
+														boxSizing: 'border-box',
+														appearance: 'none',
+														m: 0,
+														width: '100%',
+														height: '100%',
+														minWidth: 0,
+														minHeight: 0,
+														display: 'flex',
+														alignItems: 'center',
+														justifyContent: 'center',
+														border: '1px solid',
+														borderColor: 'divider',
+														borderRadius: 1,
+														color: 'text.tertiary',
+														bgcolor: 'transparent',
+														p: 0,
+														cursor: 'pointer',
+														font: 'inherit',
+														lineHeight: 0,
+														overflow: 'hidden',
+														'&:hover, &:focus': {
+															bgcolor: 'action.hover',
+														},
+														'&[aria-selected="true"]': {
+															bgcolor: 'action.selected',
+														},
+														'&[aria-selected="true"]:hover, &[aria-selected="true"]:focus':
+															{
+																bgcolor: 'action.selected',
+															},
+													} }
+												>
+													{ item.paths.length > 0 ? (
+														<FontAwesomeGlyph
+															icon={ item }
+															size={ ICON_GLYPH_SIZE }
+															color="currentColor"
+														/>
+													) : null }
+												</Box>
+											</Tooltip>
+										</Box>
+									);
+								} ) }
+							</Box>
+						);
+					} ) }
+				</Box>
+			) }
+		</Box>
+	);
+};

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

@@ -0,0 +1,305 @@
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+import {
+	PopoverBody,
+	PopoverHeader,
+	PopoverMenuList,
+	SearchField,
+	StyledMenuList,
+	type VirtualizedItem,
+} from '@elementor/editor-ui';
+import { ComponentsIcon } from '@elementor/icons';
+import { useSessionStorage } from '@elementor/session';
+import { Box, CircularProgress, Divider, Link, Stack, styled, Typography } from '@elementor/ui';
+import { useDebounceState } from '@elementor/utils';
+import { __ } from '@wordpress/i18n';
+
+import {
+	createIconSelectionValue,
+	filterFontAwesome7Icons,
+	findFontAwesome7Icon,
+	type FontAwesome7Icon,
+	type FontAwesome7LibraryFilter,
+} from './font-awesome-7-catalog';
+import { FontAwesomeGlyph } from './font-awesome-glyph';
+import { IconLibraryFilter } from './icon-library-filter';
+import { IconLibraryGrid } from './icon-library-grid';
+import { type IconLibraryView, IconLibraryViewToggle } from './icon-library-view-toggle';
+import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
+
+export const ICON_LIBRARY_POPOVER_WIDTH = 300;
+export const ICON_LIBRARY_ROW_HEIGHT = 48;
+export const ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
+export const ICON_LIBRARY_VIEW_STORAGE_KEY = 'icon-library-view';
+export const ICON_LIBRARY_VIEW_STORAGE_PREFIX = 'editor-controls';
+const DEFAULT_ICON_LIBRARY_VIEW: IconLibraryView = 'list';
+
+const isIconLibraryView = ( value: unknown ): value is IconLibraryView => {
+	return value === 'grid' || value === 'list';
+};
+const ICON_TILE_SIZE = 40;
+const ICON_GLYPH_SIZE = 20;
+const ICON_LIBRARY_INLINE_SPACING = 1;
+
+const CompactIconLibraryMenuList = styled( StyledMenuList )( ( { theme } ) => ( {
+	'& > [role="option"]': {
+		padding: theme.spacing( 0.75, ICON_LIBRARY_INLINE_SPACING ),
+	},
+} ) );
+
+type IconLibraryItem = VirtualizedItem< 'item', string > & Omit< FontAwesome7Icon, 'value' >;
+
+type IconLibraryPopoverProps = {
+	open: boolean;
+	selectedIconClass: string | null;
+	selectedIconLibrary: string | null;
+	onSelect: ( icon: { value: string; library: string } ) => void;
+	onClose: () => void;
+	width?: number;
+};
+
+export const IconLibraryPopover = ( {
+	open,
+	selectedIconClass,
+	selectedIconLibrary,
+	onSelect,
+	onClose,
+	width = ICON_LIBRARY_POPOVER_WIDTH,
+}: IconLibraryPopoverProps ) => {
+	const {
+		debouncedValue: searchValue,
+		inputValue: searchInputValue,
+		handleChange: handleSearchChange,
+		setImmediateValue: setSearchValue,
+	} = useDebounceState( { delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY } );
+	const [ activeLibraries, setActiveLibraries ] = useState< FontAwesome7LibraryFilter >( [] );
+	const [ storedView, setStoredView ] = useSessionStorage< IconLibraryView >(
+		ICON_LIBRARY_VIEW_STORAGE_KEY,
+		ICON_LIBRARY_VIEW_STORAGE_PREFIX
+	);
+	const view = isIconLibraryView( storedView ) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
+	const { data: icons = [], isLoading } = useFontAwesome7Catalog( open );
+
+	const items = useMemo(
+		() => createIconLibraryItems( icons, searchValue, activeLibraries ),
+		[ activeLibraries, icons, searchValue ]
+	);
+	const selectedValue = useMemo(
+		() => findFontAwesome7Icon( icons, selectedIconClass, selectedIconLibrary )?.id,
+		[ icons, selectedIconClass, selectedIconLibrary ]
+	);
+
+	const handleClose = () => {
+		setSearchValue( '' );
+		setActiveLibraries( [] );
+		onClose();
+	};
+
+	const handleSelect = ( id: string ) => {
+		const icon = items.find( ( item ) => item.id === id );
+
+		if ( ! icon ) {
+			return;
+		}
+
+		onSelect( {
+			value: createIconSelectionValue( icon.library, icon.name ),
+			library: icon.library,
+		} );
+	};
+
+	const handleClearSearch = () => {
+		setSearchValue( '' );
+	};
+
+	return (
+		<PopoverBody width={ width } fillWidth id="icon-library">
+			<PopoverHeader
+				title={ __( 'Icon library', 'elementor' ) }
+				onClose={ handleClose }
+				icon={ <ComponentsIcon fontSize="tiny" /> }
+				actions={ [ <IconLibraryViewToggle key="view" value={ view } onChange={ setStoredView } /> ] }
+				sx={ { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 } }
+			/>
+			<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: 'hidden', minHeight: 0, minWidth: 0 } }>
+				<IconLibraryContent
+					isLoading={ isLoading }
+					items={ items }
+					selectedValue={ selectedValue }
+					searchValue={ searchValue }
+					isCatalogAvailable={ icons.length > 0 }
+					view={ view }
+					onSelect={ handleSelect }
+					onClose={ handleClose }
+					onClearSearch={ handleClearSearch }
+				/>
+			</Box>
+		</PopoverBody>
+	);
+};
+
+type IconLibraryContentProps = {
+	isLoading: boolean;
+	items: IconLibraryItem[];
+	selectedValue: string | undefined;
+	searchValue: string;
+	isCatalogAvailable: boolean;
+	view: IconLibraryView;
+	onSelect: ( id: string ) => void;
+	onClose: () => void;
+	onClearSearch: () => void;
+};
+
+const IconLibraryContent = ( {
+	isLoading,
+	items,
+	selectedValue,
+	searchValue,
+	isCatalogAvailable,
+	view,
+	onSelect,
+	onClose,
+	onClearSearch,
+}: IconLibraryContentProps ) => {
+	if ( isLoading ) {
+		return <IconLibraryLoadingState />;
+	}
+
+	const emptyState = (
+		<IconLibraryEmptyState
+			searchValue={ searchValue }
+			isCatalogAvailable={ isCatalogAvailable }
+			onClear={ onClearSearch }
+		/>
+	);
+
+	if ( view === 'grid' ) {
+		return (
+			<Box sx={ { width: '100%', height: '100%', minWidth: 0, minHeight: 0 } }>
+				<IconLibraryGrid
+					items={ items }
+					selectedValue={ selectedValue }
+					onSelect={ onSelect }
+					onClose={ onClose }
+					noResultsComponent={ emptyState }
+				/>
+			</Box>
+		);
+	}
+
+	return (
+		<PopoverMenuList
+			items={ items }
+			selectedValue={ selectedValue }
+			menuListTemplate={ CompactIconLibraryMenuList }
+			onSelect={ onSelect }
+			onClose={ onClose }
+			itemHeight={ ICON_LIBRARY_ROW_HEIGHT }
+			menuItemContentTemplate={ IconLibraryRow }
+			noResultsComponent={ emptyState }
+			data-testid="icon-library-list"
+		/>
+	);
+};
+
+const IconLibraryLoadingState = () => (
+	<Stack alignItems="center" justifyContent="center" height="100%">
+		<CircularProgress role="progressbar" size={ 24 } />
+	</Stack>
+);
+
+const IconLibraryEmptyState = ( {
+	searchValue,
+	isCatalogAvailable,
+	onClear,
+}: {
+	searchValue: string;
+	isCatalogAvailable: boolean;
+	onClear: () => void;
+} ) => {
+	if ( ! isCatalogAvailable ) {
+		return <CatalogUnavailable />;
+	}
+
+	return <NoResults searchValue={ searchValue } onClear={ onClear } />;
+};
+
+const IconLibraryRow = ( item: VirtualizedItem< string, string > ) => {
+	const icon = item as IconLibraryItem;
+
+	return (
+		<Stack direction="row" alignItems="center" gap={ 1 } sx={ { width: '100%' } }>
+			<Box
+				sx={ {
+					width: ICON_TILE_SIZE,
+					height: ICON_TILE_SIZE,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					border: 1,
+					borderColor: 'divider',
+					borderRadius: 1,
+					color: 'text.tertiary',
+					flexShrink: 0,
+				} }
+			>
+				{ icon.paths.length > 0 ? (
+					<FontAwesomeGlyph icon={ icon } size={ ICON_GLYPH_SIZE } color="currentColor" />
+				) : null }
+			</Box>
+			<Typography variant="caption" color="text.primary" noWrap>
+				{ icon.label }
+			</Typography>
+		</Stack>
+	);
+};
+
+const CatalogUnavailable = () => (
+	<Stack alignItems="center" justifyContent="center" height="100%" p={ 2.5 } gap={ 1.5 }>
+		<ComponentsIcon fontSize="large" />
+		<Typography align="center" variant="subtitle2" color="text.secondary">
+			{ __( "Icons couldn't be loaded.", 'elementor' ) }
+		</Typography>
+	</Stack>
+);
+
+const NoResults = ( { searchValue, onClear }: { searchValue: string; onClear: () => void } ) => (
+	<Stack alignItems="center" justifyContent="center" height="100%" p={ 2.5 } gap={ 1.5 }>
+		<ComponentsIcon fontSize="large" />
+		<Typography align="center" variant="subtitle2" color="text.secondary">
+			{ __( 'Sorry, nothing matched', 'elementor' ) }
+		</Typography>
+		{ 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,
+	libraries: FontAwesome7LibraryFilter
+): IconLibraryItem[] =>
+	filterFontAwesome7Icons( icons, searchValue, libraries ).map( ( icon ) => ( {
+		...icon,
+		type: 'item',
+		value: icon.id,
+	} ) );

package/src/controls/icon-library/icon-library-tooltip.ts

@@ -0,0 +1 @@
+export const ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY = 0;