@elementor/editor-controls 0.34.2 → 0.36.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;
@@ -41,31 +17,20 @@ type FontFamilyControlProps = {
 	fontFamilies: FontCategory[];
 };
 
+const SIZE = 'tiny';
+
 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>
 				<UnstableTag
 					variant="outlined"
 					label={ fontFamily }
-					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+					endIcon={ <ChevronDownIcon fontSize={ SIZE } /> }
 					{ ...bindTrigger( popoverState ) }
 					fullWidth
 					disabled={ disabled }
@@ -76,240 +41,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;
-};

package/src/controls/gap-control.tsx

@@ -44,6 +44,8 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 	// translators: %s: Tooltip title.
 	const unlinkedLabel = __( 'Unlink %s', 'elementor' ).replace( '%s', tooltipLabel );
 
+	const disabled = sizeDisabled || directionDisabled;
+
 	return (
 		<PropProvider propType={ propType } value={ directionValue } setValue={ setDirectionValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
@@ -56,7 +58,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						selected={ isLinked }
 						sx={ { marginLeft: 'auto' } }
 						onChange={ onLinkToggle }
-						disabled={ sizeDisabled || directionDisabled }
+						disabled={ disabled }
 					>
 						<LinkedIcon fontSize={ 'tiny' } />
 					</ToggleButton>

package/src/controls/image-control.tsx

@@ -29,7 +29,7 @@ export const ImageControl = createControl(
 				<Stack gap={ 1.5 }>
 					{ [ 'all', 'media' ].includes( showMode ) ? (
 						<PropKeyProvider bind={ 'src' }>
-							<ControlFormLabel> { __( 'Image', 'elementor' ) } </ControlFormLabel>
+							<ControlFormLabel>{ __( 'Image', 'elementor' ) }</ControlFormLabel>
 							<ImageMediaControl mediaTypes={ mediaTypes } />
 						</PropKeyProvider>
 					) : null }
@@ -37,7 +37,7 @@ export const ImageControl = createControl(
 						<PropKeyProvider bind={ 'size' }>
 							<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
 								<Grid item xs={ 6 }>
-									<ControlFormLabel> { resolutionLabel } </ControlFormLabel>
+									<ControlFormLabel>{ resolutionLabel }</ControlFormLabel>
 								</Grid>
 								<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 									<SelectControl options={ sizes } />

package/src/controls/link-control.tsx

@@ -189,7 +189,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 							</ControlActions>
 						</PropKeyProvider>
 						<PropKeyProvider bind={ 'isTargetBlank' }>
-							<SwitchControl disabled={ ! value } />
+							<SwitchControl disabled={ propContext.disabled || ! value } />
 						</PropKeyProvider>
 					</Stack>
 				</Collapse>

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

@@ -58,8 +58,15 @@ export const LinkedDimensionsControl = createControl(
 		// translators: %s: Tooltip title.
 		const unlinkedLabel = __( 'Unlink %s', 'elementor' ).replace( '%s', tooltipLabel );
 
+		const disabled = sizeDisabled || dimensionsDisabled;
+
 		return (
-			<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
+			<PropProvider
+				propType={ propType }
+				value={ dimensionsValue }
+				setValue={ setDimensionsValue }
+				disabled={ disabled }
+			>
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					{ isUsingNestedProps ? (
 						<ControlFormLabel>{ label }</ControlFormLabel>
@@ -74,7 +81,7 @@ export const LinkedDimensionsControl = createControl(
 							selected={ isLinked }
 							sx={ { marginLeft: 'auto' } }
 							onChange={ onLinkToggle }
-							disabled={ sizeDisabled || dimensionsDisabled }
+							disabled={ disabled }
 						>
 							<LinkedIcon fontSize={ 'tiny' } />
 						</ToggleButton>
@@ -141,6 +148,8 @@ export const LinkedDimensionsControl = createControl(
 						<Grid item xs={ 12 }>
 							<Control
 								bind={ 'inline-start' }
+								isLinked={ isLinked }
+								extendedValues={ extendedValues }
 								startIcon={
 									isSiteRtl ? (
 										<SideRightIcon fontSize={ 'tiny' } />
@@ -148,8 +157,6 @@ export const LinkedDimensionsControl = createControl(
 										<SideLeftIcon fontSize={ 'tiny' } />
 									)
 								}
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
 							/>
 						</Grid>
 					</Grid>

package/src/index.ts

@@ -23,6 +23,7 @@ export { SwitchControl } from './controls/switch-control';
 // components
 export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
+export { FontFamilySelector } from './components/font-family-selector';
 
 // types
 export type { ControlComponent } from './create-control';