@elementor/editor-controls 0.34.2 → 0.36.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.36.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -43,7 +43,7 @@
     "@elementor/editor-current-user": "0.5.0",
     "@elementor/editor-elements": "0.8.4",
     "@elementor/editor-props": "0.12.1",
-    "@elementor/editor-ui": "0.10.1",
+    "@elementor/editor-ui": "0.11.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",

package/src/components/control-form-label.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormLabel } from '@elementor/ui';
+import { FormLabel, type FormLabelProps } from '@elementor/ui';
 
-export const ControlFormLabel = ( { children }: { children: React.ReactNode } ) => {
-	return <FormLabel size="tiny">{ children }</FormLabel>;
+export const ControlFormLabel = ( props: FormLabelProps ) => {
+	return <FormLabel size="tiny" { ...props } />;
 };

package/src/components/control-label.tsx

@@ -7,7 +7,7 @@ import { ControlFormLabel } from './control-form-label';
 
 export const ControlLabel = ( { children }: PropsWithChildren< object > ) => {
 	return (
-		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
+		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 0.25 }>
 			<ControlFormLabel>{ children }</ControlFormLabel>
 			<ControlAdornments />
 		</Stack>

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

@@ -0,0 +1,282 @@
+import { useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { SearchIcon, TextIcon } from '@elementor/icons';
+import {
+	Box,
+	Divider,
+	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 FontCategory } from '../controls/font-family-control/font-family-control';
+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>
+			<PopoverHeader
+				title={ __( 'Font Family', 'elementor' ) }
+				onClose={ handleClose }
+				icon={ <TextIcon fontSize={ SIZE } /> }
+			/>
+
+			<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/components/repeater.tsx

@@ -143,8 +143,6 @@ export const Repeater = < T, >( {
 		} );
 	};
 
-	const ItemWrapper = disabled ? React.Fragment : SortableItem;
-
 	return (
 		<SectionContent>
 			<Stack
@@ -178,7 +176,7 @@ export const Repeater = < T, >( {
 						}
 
 						return (
-							<ItemWrapper id={ key } key={ `sortable-${ key }` }>
+							<SortableItem id={ key } key={ `sortable-${ key }` } disabled={ disabled }>
 								<RepeaterItem
 									disabled={ disabled }
 									propDisabled={ value?.disabled }
@@ -202,7 +200,7 @@ export const Repeater = < T, >( {
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
 									) }
 								</RepeaterItem>
-							</ItemWrapper>
+							</SortableItem>
 						);
 					} ) }
 				</SortableProvider>

package/src/components/sortable.tsx

@@ -23,12 +23,14 @@ export const SortableProvider = < T extends number >( props: UnstableSortablePro
 type SortableItemProps = {
 	id: UnstableSortableItemProps[ 'id' ];
 	children: React.ReactNode;
+	disabled?: boolean;
 };
 
-export const SortableItem = ( { id, children }: SortableItemProps ): React.ReactNode => {
+export const SortableItem = ( { id, children, disabled }: SortableItemProps ): React.ReactNode => {
 	return (
 		<UnstableSortableItem
 			id={ id }
+			disabled={ disabled }
 			render={ ( {
 				itemProps,
 				triggerProps,
@@ -39,7 +41,7 @@ export const SortableItem = ( { id, children }: SortableItemProps ): React.React
 			}: UnstableSortableItemRenderProps ) => {
 				return (
 					<StyledListItem { ...itemProps } style={ itemStyle }>
-						<SortableTrigger { ...triggerProps } style={ triggerStyle } />
+						{ ! disabled && <SortableTrigger { ...triggerProps } style={ triggerStyle } /> }
 						{ children }
 						{ showDropIndication && <StyledDivider style={ dropIndicationStyle } /> }
 					</StyledListItem>

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>
 	);
 } );

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx

@@ -60,10 +60,11 @@ export const BackgroundImageOverlayPosition = () => {
 					</Grid>
 					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
 						<Select
+							fullWidth
 							size="tiny"
-							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }
 							onChange={ handlePositionChange }
-							fullWidth
+							disabled={ stringPropContext.disabled }
+							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }
 						>
 							{ backgroundPositionOptions.map( ( { label, value } ) => (
 								<MenuListItem key={ value } value={ value ?? '' }>

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx

@@ -74,10 +74,11 @@ export const BackgroundImageOverlaySize = () => {
 						<ControlToggleButtonGroup
 							exclusive
 							items={ sizeControlOptions }
+							onChange={ handleSizeChange }
+							disabled={ stringPropContext.disabled }
 							value={
 								( backgroundImageScaleContext.value ? 'custom' : stringPropContext.value ) as Sizes
 							}
-							onChange={ handleSizeChange }
 						/>
 					</Grid>
 				</PopoverGridContainer>

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -74,7 +74,7 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue, disabled } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue }>
+		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } disabled={ disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }

package/src/controls/box-shadow-repeater-control.tsx

@@ -16,7 +16,7 @@ export const BoxShadowRepeaterControl = createControl( () => {
 	const { propType, value, setValue, disabled } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue } disabled={ disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }
@@ -47,10 +47,10 @@ const ItemContent = ( { anchorEl, bind }: { anchorEl: HTMLElement | null; bind:
 };
 
 const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
-	const { propType, value, setValue } = useBoundProp( shadowPropTypeUtil );
+	const context = useBoundProp( shadowPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+		<PropProvider { ...context }>
 			<PopoverContent p={ 1.5 }>
 				<PopoverGridContainer>
 					<Control bind="color" label={ __( 'Color', 'elementor' ) }>

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

@@ -62,7 +62,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 		disabled: multiSizeDisabled,
 	} = useBoundProp( multiSizePropTypeUtil );
 
-	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
+	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
 
 	const splitEqualValue = () => {
 		if ( ! sizeValue ) {
@@ -98,13 +98,19 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 		return splitEqualValue() ?? null;
 	};
 
+	const isShowingGeneralIndicator = ! isExperimentActive( 'e_v_3_30' ) || ! popupState.isOpen;
+
 	const isMixed = !! multiSizeValue;
 
 	return (
 		<>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ controlRef }>
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ label }</ControlLabel>
+					{ ! isShowingGeneralIndicator ? (
+						<ControlFormLabel>{ label }</ControlFormLabel>
+					) : (
+						<ControlLabel>{ label }</ControlLabel>
+					) }
 				</Grid>
 				<Grid item xs={ 6 }>
 					<Stack direction="row" alignItems="center" gap={ 1 }>
@@ -117,7 +123,6 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 								{ ...bindToggle( popupState ) }
 								selected={ popupState.isOpen }
 								aria-label={ tooltipLabel }
-								disabled={ multiSizeDisabled || sizeDisabled }
 							>
 								{ icon }
 							</ToggleButton>
@@ -141,7 +146,12 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } },
 				} }
 			>
-				<PropProvider propType={ multiSizePropType } value={ getMultiSizeValues() } setValue={ setNestedProp }>
+				<PropProvider
+					propType={ multiSizePropType }
+					value={ getMultiSizeValues() }
+					setValue={ setNestedProp }
+					disabled={ multiSizeDisabled }
+				>
 					<PopoverContent p={ 1.5 } pt={ 2.5 } pb={ 3 }>
 						<PopoverGridContainer>
 							<MultiSizeValueControl item={ items[ 0 ] } />