@elementor/editor-controls 0.34.2 → 0.35.0

package/src/controls/font-family-control/font-family-control.tsx

@@ -1,36 +1,12 @@
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ChevronDownIcon, SearchIcon, TextIcon, XIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	Box,
-	Divider,
-	IconButton,
-	InputAdornment,
-	Link,
-	MenuList,
-	MenuSubheader,
-	Popover,
-	Stack,
-	styled,
-	TextField,
-	Typography,
-	UnstableTag,
-	usePopupState,
-} from '@elementor/ui';
-import { debounce } from '@elementor/utils';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { __ } from '@wordpress/i18n';
+import { ChevronDownIcon } from '@elementor/icons';
+import { bindPopover, bindTrigger, Popover, UnstableTag, usePopupState } from '@elementor/ui';
 
 import { useBoundProp } from '../../bound-prop-context';
+import { FontFamilySelector } from '../../components/font-family-selector';
 import ControlActions from '../../control-actions/control-actions';
 import { createControl } from '../../create-control';
-import { type FontListItem, useFilteredFontFamilies } from '../../hooks/use-filtered-font-families';
-import { enqueueFont } from './enqueue-font';
-
-const SIZE = 'tiny';
 
 export type FontCategory = {
 	label: string;
@@ -42,23 +18,10 @@ type FontFamilyControlProps = {
 };
 
 export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyControlProps ) => {
-	const [ searchValue, setSearchValue ] = useState( '' );
 	const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp( stringPropTypeUtil );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
 
-	const filteredFontFamilies = useFilteredFontFamilies( fontFamilies, searchValue );
-
-	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setSearchValue( event.target.value );
-	};
-
-	const handleClose = () => {
-		setSearchValue( '' );
-
-		popoverState.close();
-	};
-
 	return (
 		<>
 			<ControlActions>
@@ -76,240 +39,14 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 				disableScrollLock
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
 				{ ...bindPopover( popoverState ) }
-				onClose={ handleClose }
 			>
-				<Stack>
-					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-						<TextIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-						<Typography variant="subtitle2">{ __( 'Font Family', 'elementor' ) }</Typography>
-						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ handleClose }>
-							<XIcon fontSize={ SIZE } />
-						</IconButton>
-					</Stack>
-
-					<Box px={ 1.5 } pb={ 1 }>
-						<TextField
-							// eslint-disable-next-line jsx-a11y/no-autofocus
-							autoFocus
-							fullWidth
-							size={ SIZE }
-							value={ searchValue }
-							placeholder={ __( 'Search', 'elementor' ) }
-							onChange={ handleSearch }
-							InputProps={ {
-								startAdornment: (
-									<InputAdornment position="start">
-										<SearchIcon fontSize={ SIZE } />
-									</InputAdornment>
-								),
-							} }
-						/>
-					</Box>
-					<Divider />
-					{ filteredFontFamilies.length > 0 ? (
-						<FontList
-							fontListItems={ filteredFontFamilies }
-							setFontFamily={ setFontFamily }
-							handleClose={ handleClose }
-							fontFamily={ fontFamily }
-						/>
-					) : (
-						<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-							<Stack alignItems="center" p={ 2.5 } gap={ 1.5 } overflow={ 'hidden' }>
-								<TextIcon fontSize="large" />
-								<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
-									<Typography align="center" variant="subtitle2" color="text.secondary">
-										{ __( 'Sorry, nothing matched', 'elementor' ) }
-									</Typography>
-									<Typography
-										variant="subtitle2"
-										color="text.secondary"
-										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="text.secondary">
-									{ __( 'Try something else.', 'elementor' ) }
-									<Link
-										color="secondary"
-										variant="caption"
-										component="button"
-										onClick={ () => setSearchValue( '' ) }
-									>
-										{ __( 'Clear & try again', 'elementor' ) }
-									</Link>
-								</Typography>
-							</Stack>
-						</Box>
-					) }
-				</Stack>
+				<FontFamilySelector
+					fontFamilies={ fontFamilies }
+					fontFamily={ fontFamily }
+					onFontFamilyChange={ setFontFamily }
+					onClose={ popoverState.close }
+				/>
 			</Popover>
 		</>
 	);
 } );
-
-type FontListProps = {
-	fontListItems: FontListItem[];
-	setFontFamily: ( fontFamily: string ) => void;
-	handleClose: () => void;
-	fontFamily: string | null;
-};
-
-const LIST_ITEM_HEIGHT = 36;
-const LIST_ITEMS_BUFFER = 6;
-
-const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: FontListProps ) => {
-	const containerRef = useRef< HTMLDivElement >( null );
-	const selectedItem = fontListItems.find( ( item ) => item.value === fontFamily );
-
-	const debouncedVirtualizeChange = useDebounce( ( { getVirtualIndexes }: { getVirtualIndexes: () => number[] } ) => {
-		getVirtualIndexes().forEach( ( index ) => {
-			const item = fontListItems[ index ];
-			if ( item && item.type === 'font' ) {
-				enqueueFont( item.value );
-			}
-		} );
-	}, 100 );
-
-	const virtualizer = useVirtualizer( {
-		count: fontListItems.length,
-		getScrollElement: () => containerRef.current,
-		estimateSize: () => LIST_ITEM_HEIGHT,
-		overscan: LIST_ITEMS_BUFFER,
-		onChange: debouncedVirtualizeChange,
-	} );
-
-	useEffect(
-		() => {
-			virtualizer.scrollToIndex( fontListItems.findIndex( ( item ) => item.value === fontFamily ) );
-		},
-		// eslint-disable-next-line react-compiler/react-compiler
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ fontFamily ]
-	);
-
-	return (
-		<Box
-			ref={ containerRef }
-			sx={ {
-				overflowY: 'auto',
-				height: 260,
-				width: 220,
-			} }
-		>
-			<StyledMenuList
-				role="listbox"
-				style={ {
-					height: `${ virtualizer.getTotalSize() }px`,
-				} }
-				data-testid="font-list"
-			>
-				{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
-					const item = fontListItems[ virtualRow.index ];
-					const isLast = virtualRow.index === fontListItems.length - 1;
-					// Ignore the first item, which is a category, and use the second item instead.
-					const isFirst = virtualRow.index === 1;
-					const isSelected = selectedItem?.value === item.value;
-
-					// If no item is selected, the first item should be focused.
-					const tabIndexFallback = ! selectedItem ? 0 : -1;
-
-					if ( item.type === 'category' ) {
-						return (
-							<MenuSubheader
-								key={ virtualRow.key }
-								style={ {
-									transform: `translateY(${ virtualRow.start }px)`,
-								} }
-							>
-								{ item.value }
-							</MenuSubheader>
-						);
-					}
-
-					return (
-						<li
-							key={ virtualRow.key }
-							role="option"
-							aria-selected={ isSelected }
-							onClick={ () => {
-								setFontFamily( item.value );
-								handleClose();
-							} }
-							onKeyDown={ ( event ) => {
-								if ( event.key === 'Enter' ) {
-									setFontFamily( item.value );
-									handleClose();
-								}
-
-								if ( event.key === 'ArrowDown' && isLast ) {
-									event.preventDefault();
-									event.stopPropagation();
-								}
-
-								if ( event.key === 'ArrowUp' && isFirst ) {
-									event.preventDefault();
-									event.stopPropagation();
-								}
-							} }
-							tabIndex={ isSelected ? 0 : tabIndexFallback }
-							style={ {
-								transform: `translateY(${ virtualRow.start }px)`,
-								fontFamily: item.value,
-							} }
-						>
-							{ item.value }
-						</li>
-					);
-				} ) }
-			</StyledMenuList>
-		</Box>
-	);
-};
-
-const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {
-	'& > li': {
-		height: LIST_ITEM_HEIGHT,
-		position: 'absolute',
-		top: 0,
-		left: 0,
-		width: '100%',
-		display: 'flex',
-		alignItems: 'center',
-	},
-	'& > [role="option"]': {
-		...theme.typography.caption,
-		lineHeight: 'inherit',
-		padding: theme.spacing( 0.75, 2, 0.75, 4 ),
-		'&:hover, &:focus': {
-			backgroundColor: theme.palette.action.hover,
-		},
-		'&[aria-selected="true"]': {
-			backgroundColor: theme.palette.action.selected,
-		},
-		cursor: 'pointer',
-		textOverflow: 'ellipsis',
-	},
-	width: '100%',
-	position: 'relative',
-} ) );
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const useDebounce = < TArgs extends any[] >( fn: ( ...args: TArgs ) => void, delay: number ) => {
-	const [ debouncedFn ] = useState( () => debounce( fn, delay ) );
-
-	useEffect( () => () => debouncedFn.cancel(), [ debouncedFn ] );
-
-	return debouncedFn;
-};