@elementor/editor-controls 0.13.0 → 0.15.0

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

@@ -1,157 +0,0 @@
-import { Fragment, useId, useState } from 'react';
-import * as React from 'react';
-import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	Box,
-	Divider,
-	IconButton,
-	InputAdornment,
-	Link,
-	ListSubheader,
-	MenuItem,
-	MenuList,
-	Popover,
-	Stack,
-	TextField,
-	Typography,
-	UnstableTag,
-	usePopupState,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useBoundProp } from '../bound-prop-context';
-import { createControl } from '../create-control';
-import { useFilteredFontFamilies } from '../hooks/use-filtered-font-families';
-
-const SIZE = 'tiny';
-
-export const FontFamilyControl = createControl( ( { fontFamilies } ) => {
-	const [ searchValue, setSearchValue ] = useState( '' );
-	const { value: fontFamily, setValue: setFontFamily } = useBoundProp( stringPropTypeUtil );
-
-	const popupId = useId();
-	const popoverState = usePopupState( { variant: 'popover', popupId } );
-
-	const filteredFontFamilies = useFilteredFontFamilies( fontFamilies, searchValue );
-
-	if ( ! filteredFontFamilies ) {
-		return null;
-	}
-
-	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 }>
-						<EditIcon 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 />
-					<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-						{ filteredFontFamilies.length > 0 ? (
-							<MenuList role="listbox" tabIndex={ 0 }>
-								{ filteredFontFamilies.map( ( [ category, items ], index ) => (
-									<Fragment key={ index }>
-										<ListSubheader
-											sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }
-										>
-											{ category }
-										</ListSubheader>
-										{ items.map( ( item ) => {
-											const isSelected = item === fontFamily;
-
-											return (
-												<MenuItem
-													key={ item }
-													selected={ isSelected }
-													// eslint-disable-next-line jsx-a11y/no-autofocus
-													autoFocus={ isSelected }
-													onClick={ () => {
-														setFontFamily( item );
-														handleClose();
-													} }
-													sx={ { px: 1.5, typography: 'caption' } }
-													style={ { fontFamily: item } }
-												>
-													{ item }
-												</MenuItem>
-											);
-										} ) }
-									</Fragment>
-								) ) }
-							</MenuList>
-						) : (
-							<Stack alignItems="center" p={ 2.5 } gap={ 1.5 }>
-								<PhotoIcon fontSize="large" />
-								<Typography align="center" variant="caption" color="text.secondary">
-									{ __( 'Sorry, nothing matched', 'elementor' ) }
-									<br />
-									&ldquo;{ searchValue }&rdquo;.
-								</Typography>
-								<Typography align="center" variant="caption" color="text.secondary">
-									<Link
-										color="secondary"
-										variant="caption"
-										component="button"
-										onClick={ () => setSearchValue( '' ) }
-									>
-										{ __( 'Clear the filters', 'elementor' ) }
-									</Link>
-									&nbsp;
-									{ __( 'and try again.', 'elementor' ) }
-								</Typography>
-							</Stack>
-						) }
-					</Box>
-				</Stack>
-			</Popover>
-		</>
-	);
-} );