@elementor/editor-controls 0.14.0 → 0.15.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.14.0",
+  "version": "0.15.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,15 +40,17 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.9.3",
+    "@elementor/editor-props": "0.9.4",
     "@elementor/env": "0.3.5",
-    "@elementor/http": "0.1.3",
-    "@elementor/icons": "1.31.0",
+    "@elementor/http": "0.1.4",
+    "@elementor/icons": "1.35.0",
+    "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.26.0",
     "@elementor/utils": "0.4.0",
-    "@elementor/wp-media": "0.4.2",
-    "@wordpress/i18n": "^5.13.0"
+    "@elementor/wp-media": "0.5.0",
+    "@wordpress/i18n": "^5.13.0",
+    "@tanstack/react-virtual": "3.13.3"
   },
   "devDependencies": {
     "tsup": "^8.3.5"

package/src/api.ts

@@ -0,0 +1,16 @@
+import { httpService } from '@elementor/http';
+
+const ELEMENTOR_SETTING_URL = 'elementor/v1/settings';
+
+type Response< T > = { data: { value: T }; success: boolean };
+
+export const apiClient = {
+	getElementorSetting: < T >( key: string ) =>
+		httpService()
+			.get< Response< T > >( `${ ELEMENTOR_SETTING_URL }/${ key }` )
+			.then( ( res ) => formatSettingResponse( res.data ) ),
+	updateElementorSetting: < T >( key: string, value: T ) =>
+		httpService().put( `${ ELEMENTOR_SETTING_URL }/${ key }`, { value } ),
+};
+
+const formatSettingResponse = < T >( response: Response< T > ) => response.data.value;

package/src/components/repeater.tsx

@@ -9,6 +9,7 @@ import {
 	IconButton,
 	Popover,
 	Stack,
+	Tooltip,
 	Typography,
 	UnstableTag,
 	type UnstableTagProps,
@@ -200,6 +201,10 @@ const RepeaterItem = ( {
 
 	const popoverProps = bindPopover( popoverState );
 
+	const duplicateLabel = __( 'Duplicate', 'elementor' );
+	const toggleLabel = disabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
+	const removeLabel = __( 'Remove', 'elementor' );
+
 	return (
 		<>
 			<UnstableTag
@@ -213,29 +218,21 @@ const RepeaterItem = ( {
 				startIcon={ startIcon }
 				actions={
 					<>
-						<IconButton
-							size={ SIZE }
-							onClick={ duplicateItem }
-							aria-label={ __( 'Duplicate item', 'elementor' ) }
-						>
-							<CopyIcon fontSize={ SIZE } />
-						</IconButton>
-						<IconButton
-							size={ SIZE }
-							onClick={ toggleDisableItem }
-							aria-label={
-								disabled ? __( 'Enable item', 'elementor' ) : __( 'Disable item', 'elementor' )
-							}
-						>
-							{ disabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
-						</IconButton>
-						<IconButton
-							size={ SIZE }
-							onClick={ removeItem }
-							aria-label={ __( 'Remove item', 'elementor' ) }
-						>
-							<XIcon fontSize={ SIZE } />
-						</IconButton>
+						<Tooltip title={ duplicateLabel } placement="top">
+							<IconButton size={ SIZE } onClick={ duplicateItem } aria-label={ duplicateLabel }>
+								<CopyIcon fontSize={ SIZE } />
+							</IconButton>
+						</Tooltip>
+						<Tooltip title={ toggleLabel } placement="top">
+							<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
+								{ disabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
+							</IconButton>
+						</Tooltip>
+						<Tooltip title={ removeLabel } placement="top">
+							<IconButton size={ SIZE } onClick={ removeItem } aria-label={ removeLabel }>
+								<XIcon fontSize={ SIZE } />
+							</IconButton>
+						</Tooltip>
 					</>
 				}
 				sx={ { backgroundColor: 'background.paper' } }

package/src/controls/equal-unequal-sizes-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ReactNode, useId, useRef } from 'react';
 import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
-import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, usePopupState } from '@elementor/ui';
+import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
@@ -23,6 +23,7 @@ export type EqualUnequalItems = [ Item, Item, Item, Item ];
 type Props< TMultiPropType extends string, TPropValue extends MultiSizePropValue > = {
 	label: string;
 	icon: ReactNode;
+	tooltipLabel: string;
 	items: EqualUnequalItems;
 	multiSizePropTypeUtil: PropTypeUtil< TMultiPropType, TPropValue >;
 };
@@ -44,6 +45,7 @@ const isEqualSizes = ( propValue: MultiSizePropValue, items: EqualUnequalItems )
 export function EqualUnequalSizesControl< TMultiPropType extends string, TPropValue extends MultiSizePropValue >( {
 	label,
 	icon,
+	tooltipLabel,
 	items,
 	multiSizePropTypeUtil,
 }: Props< TMultiPropType, TPropValue > ) {
@@ -104,15 +106,18 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				<Grid item xs={ 6 }>
 					<Stack direction="row" alignItems="center" gap={ 1 }>
 						<SizeControl placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined } />
-						<ToggleButton
-							size={ 'tiny' }
-							value={ 'check' }
-							sx={ { marginLeft: 'auto' } }
-							{ ...bindToggle( popupState ) }
-							selected={ popupState.isOpen }
-						>
-							{ icon }
-						</ToggleButton>
+						<Tooltip title={ tooltipLabel } placement="top">
+							<ToggleButton
+								size={ 'tiny' }
+								value={ 'check' }
+								sx={ { marginLeft: 'auto' } }
+								{ ...bindToggle( popupState ) }
+								selected={ popupState.isOpen }
+								aria-label={ tooltipLabel }
+							>
+								{ icon }
+							</ToggleButton>
+						</Tooltip>
 					</Stack>
 				</Grid>
 			</Grid>

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

@@ -0,0 +1,15 @@
+type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
+
+type ExtendedWindow = Window & {
+	elementor?: {
+		helpers?: {
+			enqueueFont?: EnqueueFont;
+		};
+	};
+};
+
+export const enqueueFont: EnqueueFont = ( fontFamily, context = 'editor' ) => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.helpers?.enqueueFont?.( fontFamily, context ) ?? null;
+};

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

@@ -0,0 +1,286 @@
+import * as React from 'react';
+import { useEffect, useRef, useState } 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,
+	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 }>
+						<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 />
+					{ 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 }>
+								<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>
+		</>
+	);
+} );
+
+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 ) => {