@elementor/editor-controls 0.14.0 → 0.16.0

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

@@ -0,0 +1,302 @@
+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,
+	ListSubheader,
+	MenuList,
+	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 { useBoundProp } from '../../bound-prop-context';
+import { createControl } from '../../create-control';
+import { type FontListItem, useFilteredFontFamilies } from '../../hooks/use-filtered-font-families';
+import { enqueueFont } from './enqueue-font';
+
+const SIZE = 'tiny';
+
+type FontFamilyControlProps = {
+	fontFamilies: Record< string, string[] >;
+};
+
+export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyControlProps ) => {
+	const [ searchValue, setSearchValue ] = useState( '' );
+	const { value: fontFamily, setValue: setFontFamily } = 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 (
+		<>
+			<UnstableTag
+				variant="outlined"
+				label={ fontFamily }
+				endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+				{ ...bindTrigger( popoverState ) }
+				fullWidth
+			/>
+
+			<Popover
+				disablePortal
+				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
+							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>
+			</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-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 (
+							<ListSubheader
+								key={ virtualRow.key }
+								style={ {
+									transform: `translateY(${ virtualRow.start }px)`,
+								} }
+							>
+								{ item.value }
+							</ListSubheader>
+						);
+					}
+
+					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%',
+	},
+	'& > [role="option"]': {
+		...theme.typography.caption,
+		lineHeight: 'inherit',
+		padding: theme.spacing( 0.75, 2 ),
+		'&: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;
+};

package/src/controls/gap-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { layoutDirectionPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
-import { Grid, Stack, ToggleButton } from '@elementor/ui';
+import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
@@ -33,22 +33,30 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 		} );
 	};
 
+	const tooltipLabel = label.toLowerCase();
+
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+	// translators: %s: Tooltip title.
+	const linkedLabel = __( 'Link %s', 'elementor' ).replace( '%s', tooltipLabel );
+	// translators: %s: Tooltip title.
+	const unlinkedLabel = __( 'Unlink %s', 'elementor' ).replace( '%s', tooltipLabel );
 
 	return (
 		<PropProvider propType={ propType } value={ directionValue } setValue={ setDirectionValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
-				<ToggleButton
-					aria-label={ __( 'Link inputs', 'elementor' ) }
-					size={ 'tiny' }
-					value={ 'check' }
-					selected={ isLinked }
-					sx={ { marginLeft: 'auto' } }
-					onChange={ onLinkToggle }
-				>
-					<LinkedIcon fontSize={ 'tiny' } />
-				</ToggleButton>
+				<Tooltip title={ isLinked ? unlinkedLabel : linkedLabel } placement="top">
+					<ToggleButton
+						aria-label={ isLinked ? unlinkedLabel : linkedLabel }
+						size={ 'tiny' }
+						value={ 'check' }
+						selected={ isLinked }
+						sx={ { marginLeft: 'auto' } }
+						onChange={ onLinkToggle }
+					>
+						<LinkedIcon fontSize={ 'tiny' } />
+					</ToggleButton>
+				</Tooltip>
 			</Stack>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<Grid container gap={ 1 } alignItems="center">

package/src/controls/image-control.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { imagePropTypeUtil } from '@elementor/editor-props';
 import { Grid, Stack } from '@elementor/ui';
+import { type MediaType } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
+import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 import { ImageMediaControl } from './image-media-control';
 import { SelectControl } from './select-control';
 
@@ -18,12 +20,15 @@ export const ImageControl = createControl(
 	( { sizes, resolutionLabel = __( 'Image resolution', 'elementor' ) }: ImageControlProps ) => {
 		const propContext = useBoundProp( imagePropTypeUtil );
 
+		const { data: allowSvgUpload } = useUnfilteredFilesUpload();
+		const mediaTypes: MediaType[] = allowSvgUpload ? [ 'image', 'svg' ] : [ 'image' ];
+
 		return (
 			<PropProvider { ...propContext }>
 				<Stack gap={ 1.5 }>
 					<PropKeyProvider bind={ 'src' }>
 						<ControlLabel> { __( 'Image', 'elementor' ) } </ControlLabel>
-						<ImageMediaControl />
+						<ImageMediaControl mediaTypes={ mediaTypes } />
 					</PropKeyProvider>
 					<PropKeyProvider bind={ 'size' }>
 						<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">

package/src/controls/image-media-control.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { imageSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from '@elementor/ui';
-import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
-import { type ImageExtension } from '@elementor/wp-media';
+import { type MediaType, useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -11,10 +10,10 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
 type ImageMediaControlProps = {
-	allowedExtensions?: ImageExtension[];
+	mediaTypes?: MediaType[];
 };
 
-export const ImageMediaControl = createControl( ( props: ImageMediaControlProps ) => {
+export const ImageMediaControl = createControl( ( { mediaTypes = [ 'image' ] }: ImageMediaControlProps ) => {
 	const { value, setValue } = useBoundProp( imageSrcPropTypeUtil );
 	const { id, url } = value ?? {};
 
@@ -22,8 +21,7 @@ export const ImageMediaControl = createControl( ( props: ImageMediaControlProps
 	const src = attachment?.url ?? url?.value ?? null;
 
 	const { open } = useWpMediaFrame( {
-		types: [ 'image', 'image/svg+xml' ],
-		allowedExtensions: props.allowedExtensions,
+		mediaTypes,
 		multiple: false,
 		selected: id?.value || null,
 		onSelect: ( selectedAttachment ) => {

package/src/controls/linked-dimensions-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
-import { Grid, Stack, ToggleButton } from '@elementor/ui';
+import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
@@ -10,7 +10,15 @@ import { createControl } from '../create-control';
 import { type ExtendedValue, SizeControl } from './size-control';
 
 export const LinkedDimensionsControl = createControl(
-	( { label, extendedValues }: { label: string; extendedValues?: ExtendedValue[] } ) => {
+	( {
+		label,
+		isSiteRtl = false,
+		extendedValues,
+	}: {
+		label: string;
+		isSiteRtl?: boolean;
+		extendedValues?: ExtendedValue[];
+	} ) => {
 		const {
 			value: dimensionsValue,
 			setValue: setDimensionsValue,
@@ -22,36 +30,44 @@ export const LinkedDimensionsControl = createControl(
 
 		const onLinkToggle = () => {
 			if ( ! isLinked ) {
-				setSizeValue( dimensionsValue?.top?.value );
+				setSizeValue( dimensionsValue[ 'block-start' ]?.value );
 				return;
 			}
 
 			const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
 
 			setDimensionsValue( {
-				top: value,
-				right: value,
-				bottom: value,
-				left: value,
+				'block-start': value,
+				'block-end': value,
+				'inline-start': value,
+				'inline-end': value,
 			} );
 		};
 
+		const tooltipLabel = label.toLowerCase();
+
 		const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+		// translators: %s: Tooltip title.
+		const linkedLabel = __( 'Link %s', 'elementor' ).replace( '%s', tooltipLabel );
+		// translators: %s: Tooltip title.
+		const unlinkedLabel = __( 'Unlink %s', 'elementor' ).replace( '%s', tooltipLabel );
 
 		return (
 			<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					<ControlLabel>{ label }</ControlLabel>
-					<ToggleButton
-						aria-label={ __( 'Link Inputs', 'elementor' ) }
-						size={ 'tiny' }
-						value={ 'check' }
-						selected={ isLinked }
-						sx={ { marginLeft: 'auto' } }
-						onChange={ onLinkToggle }
-					>
-						<LinkedIcon fontSize={ 'tiny' } />
-					</ToggleButton>
+					<Tooltip title={ isLinked ? unlinkedLabel : linkedLabel } placement="top">
+						<ToggleButton
+							aria-label={ isLinked ? unlinkedLabel : linkedLabel }
+							size={ 'tiny' }
+							value={ 'check' }
+							selected={ isLinked }
+							sx={ { marginLeft: 'auto' } }
+							onChange={ onLinkToggle }
+						>
+							<LinkedIcon fontSize={ 'tiny' } />
+						</ToggleButton>
+					</Tooltip>
 				</Stack>
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					<Grid container gap={ 1 } alignItems="center">
@@ -60,7 +76,7 @@ export const LinkedDimensionsControl = createControl(
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
-								bind={ 'top' }
+								bind={ 'block-start' }
 								startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
 								isLinked={ isLinked }
 								extendedValues={ extendedValues }
@@ -69,12 +85,20 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 1 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
+							<ControlLabel>
+								{ isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
+							</ControlLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
-								bind={ 'right' }
-								startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
+								bind={ 'inline-end' }
+								startIcon={
+									isSiteRtl ? (
+										<SideLeftIcon fontSize={ 'tiny' } />
+									) : (
+										<SideRightIcon fontSize={ 'tiny' } />
+									)
+								}
 								isLinked={ isLinked }
 								extendedValues={ extendedValues }
 							/>
@@ -88,7 +112,7 @@ export const LinkedDimensionsControl = createControl(
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
-								bind={ 'bottom' }
+								bind={ 'block-end' }
 								startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
 								isLinked={ isLinked }
 								extendedValues={ extendedValues }
@@ -97,12 +121,20 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 1 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
+							<ControlLabel>
+								{ isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }
+							</ControlLabel>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
-								bind={ 'left' }
-								startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
+								bind={ 'inline-start' }
+								startIcon={
+									isSiteRtl ? (
+										<SideRightIcon fontSize={ 'tiny' } />
+									) : (
+										<SideLeftIcon fontSize={ 'tiny' } />
+									)
+								}
 								isLinked={ isLinked }
 								extendedValues={ extendedValues }
 							/>

package/src/controls/svg-media-control.tsx

@@ -2,13 +2,14 @@ import * as React from 'react';
 import { imageSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled } from '@elementor/ui';
-import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 
 const TILE_SIZE = 8;
 const TILE_WHITE = 'transparent';
@@ -40,9 +41,10 @@ export const SvgMediaControl = createControl( () => {
 	const { id, url } = value ?? {};
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
 	const src = attachment?.url ?? url?.value ?? null;
+	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
+
 	const { open } = useWpMediaFrame( {
-		types: [ 'image/svg+xml' ],
-		allowedExtensions: [ 'svg' ],
+		mediaTypes: [ 'svg' ],
 		multiple: false,
 		selected: id?.value || null,
 		onSelect: ( selectedAttachment ) => {
@@ -56,6 +58,14 @@ export const SvgMediaControl = createControl( () => {
 		},
 	} );
 
+	const handleClick = ( openOptions?: OpenOptions ) => {
+		if ( allowSvgUpload ) {
+			open( openOptions );
+		} else {
+			// TODO open upload SVG confirmation modal
+		}
+	};
+
 	return (
 		<Stack gap={ 1 }>
 			<ControlLabel> { __( 'SVG', 'elementor' ) } </ControlLabel>
@@ -85,7 +95,7 @@ export const SvgMediaControl = createControl( () => {
 								size="tiny"
 								color="inherit"
 								variant="outlined"
-								onClick={ () => open( { mode: 'browse' } ) }
+								onClick={ () => handleClick( { mode: 'browse' } ) }
 							>
 								{ __( 'Select SVG', 'elementor' ) }
 							</Button>
@@ -94,7 +104,7 @@ export const SvgMediaControl = createControl( () => {
 								variant="text"
 								color="inherit"
 								startIcon={ <UploadIcon /> }
-								onClick={ () => open( { mode: 'upload' } ) }
+								onClick={ () => handleClick( { mode: 'upload' } ) }
 							>
 								{ __( 'Upload', 'elementor' ) }
 							</Button>

package/src/hooks/use-filtered-font-families.ts

@@ -1,37 +1,24 @@
-import { __ } from '@wordpress/i18n';
-
-export type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
-
-const supportedCategories: Record< SupportedFonts, string > = {
-	system: __( 'System', 'elementor' ),
-	googlefonts: __( 'Google Fonts', 'elementor' ),
-	customfonts: __( 'Custom Fonts', 'elementor' ),
+export type FontListItem = {
+	type: 'font' | 'category';
+	value: string;
 };
 
-export const useFilteredFontFamilies = ( fontFamilies: Record< string, SupportedFonts >, searchValue: string ) => {
-	const filteredFontFamilies = Object.entries( fontFamilies ).reduce< Map< string, string[] > >(
-		( acc, [ font, category ] ) => {
-			const isMatch = font.toLowerCase().includes( searchValue.trim().toLowerCase() );
-
-			if ( ! isMatch ) {
-				return acc;
-			}
-
-			const categoryLabel = supportedCategories[ category as SupportedFonts ];
+export const useFilteredFontFamilies = ( fontFamilies: Record< string, string[] >, searchValue: string ) => {
+	const filteredFontFamilies = Object.entries( fontFamilies ).reduce< FontListItem[] >(
+		( acc, [ category, fonts ] ) => {
+			const filteredFonts = fonts.filter( ( font ) => font.toLowerCase().includes( searchValue.toLowerCase() ) );
 
-			if ( categoryLabel ) {
-				const existingCategory = acc.get( categoryLabel );
+			if ( filteredFonts.length ) {
+				acc.push( { type: 'category', value: category } );
 
-				if ( existingCategory ) {
-					existingCategory.push( font );
-				} else {
-					acc.set( categoryLabel, [ font ] );
-				}
+				filteredFonts.forEach( ( font ) => {
+					acc.push( { type: 'font', value: font } );
+				} );
 			}
 
 			return acc;
 		},
-		new Map()
+		[]
 	);
 
 	return [ ...filteredFontFamilies ];