@elementor/editor-controls 0.34.2 → 0.35.0

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": "0.34.2",
+  "version": "0.35.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",

package/src/components/font-family-selector.tsx

@@ -0,0 +1,284 @@
+import { useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { type FontCategory } from '@elementor/editor-controls';
+import { SearchIcon, TextIcon, XIcon } from '@elementor/icons';
+import {
+	Box,
+	Divider,
+	IconButton,
+	InputAdornment,
+	Link,
+	MenuList,
+	MenuSubheader,
+	Stack,
+	styled,
+	TextField,
+	Typography,
+} from '@elementor/ui';
+import { debounce } from '@elementor/utils';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { __ } from '@wordpress/i18n';
+
+import { enqueueFont } from '../controls/font-family-control/enqueue-font';
+import { type FontListItem, useFilteredFontFamilies } from '../hooks/use-filtered-font-families';
+
+const SIZE = 'tiny';
+
+type FontFamilySelectorProps = {
+	fontFamilies: FontCategory[];
+	fontFamily: string | null;
+	onFontFamilyChange: ( fontFamily: string ) => void;
+	onClose: () => void;
+};
+
+export const FontFamilySelector = ( {
+	fontFamilies,
+	fontFamily,
+	onFontFamilyChange,
+	onClose,
+}: FontFamilySelectorProps ) => {
+	const [ searchValue, setSearchValue ] = useState( '' );
+
+	const filteredFontFamilies = useFilteredFontFamilies( fontFamilies, searchValue );
+
+	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setSearchValue( event.target.value );
+	};
+
+	const handleClose = () => {
+		setSearchValue( '' );
+		onClose();
+	};
+
+	return (
+		<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={ onFontFamilyChange }
+					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>
+	);
+};
+
+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;
+};

package/src/controls/aspect-ratio-control.tsx

@@ -8,6 +8,7 @@ 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';
 
 const RATIO_OPTIONS = [
@@ -69,61 +70,63 @@ export const AspectRatioControl = createControl( ( { label }: { label: string }
 	};
 
 	return (
-		<Stack direction="column" pt={ 2 } gap={ 2 }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ label }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<Select
-						size="tiny"
-						displayEmpty
-						sx={ { overflow: 'hidden' } }
-						disabled={ disabled }
-						value={ selectedValue }
-						onChange={ handleSelectChange }
-						fullWidth
-					>
-						{ [ ...RATIO_OPTIONS, { label: __( 'Custom', 'elementor' ), value: CUSTOM_RATIO } ].map(
-							( { label: optionLabel, ...props } ) => (
-								<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
-									{ optionLabel }
-								</MenuListItem>
-							)
-						) }
-					</Select>
-				</Grid>
-			</Grid>
-			{ isCustom && (
+		<ControlActions>
+			<Stack direction="column" pt={ 2 } gap={ 2 }>
 				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 					<Grid item xs={ 6 }>
-						<TextField
-							size="tiny"
-							type="number"
-							fullWidth
-							disabled={ disabled }
-							value={ customWidth }
-							onChange={ handleCustomWidthChange }
-							InputProps={ {
-								startAdornment: <ArrowsMoveHorizontalIcon fontSize="tiny" />,
-							} }
-						/>
+						<ControlLabel>{ label }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 6 }>
-						<TextField
+						<Select
 							size="tiny"
-							type="number"
-							fullWidth
+							displayEmpty
+							sx={ { overflow: 'hidden' } }
 							disabled={ disabled }
-							value={ customHeight }
-							onChange={ handleCustomHeightChange }
-							InputProps={ {
-								startAdornment: <ArrowsMoveVerticalIcon fontSize="tiny" />,
-							} }
-						/>
+							value={ selectedValue }
+							onChange={ handleSelectChange }
+							fullWidth
+						>
+							{ [ ...RATIO_OPTIONS, { label: __( 'Custom', 'elementor' ), value: CUSTOM_RATIO } ].map(
+								( { label: optionLabel, ...props } ) => (
+									<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
+										{ optionLabel }
+									</MenuListItem>
+								)
+							) }
+						</Select>
 					</Grid>
 				</Grid>
-			) }
-		</Stack>
+				{ isCustom && (
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<TextField
+								size="tiny"
+								type="number"
+								fullWidth
+								disabled={ disabled }
+								value={ customWidth }
+								onChange={ handleCustomWidthChange }
+								InputProps={ {
+									startAdornment: <ArrowsMoveHorizontalIcon fontSize="tiny" />,
+								} }
+							/>
+						</Grid>
+						<Grid item xs={ 6 }>
+							<TextField
+								size="tiny"
+								type="number"
+								fullWidth
+								disabled={ disabled }
+								value={ customHeight }
+								onChange={ handleCustomHeightChange }
+								InputProps={ {
+									startAdornment: <ArrowsMoveVerticalIcon fontSize="tiny" />,
+								} }
+							/>
+						</Grid>
+					</Grid>
+				) }
+			</Stack>
+		</ControlActions>
 	);
 } );