@elementor/editor-controls 4.4.0-beta1 → 4.4.0-beta3

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": "4.4.0-beta1",
+  "version": "4.4.0-beta3",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-beta1",
-    "@elementor/editor-elements": "4.4.0-beta1",
-    "@elementor/editor-props": "4.4.0-beta1",
-    "@elementor/editor-responsive": "4.4.0-beta1",
-    "@elementor/editor-ui": "4.4.0-beta1",
-    "@elementor/editor-v1-adapters": "4.4.0-beta1",
-    "@elementor/env": "4.4.0-beta1",
-    "@elementor/events": "4.4.0-beta1",
-    "@elementor/http-client": "4.4.0-beta1",
+    "@elementor/editor-current-user": "4.4.0-beta3",
+    "@elementor/editor-elements": "4.4.0-beta3",
+    "@elementor/editor-props": "4.4.0-beta3",
+    "@elementor/editor-responsive": "4.4.0-beta3",
+    "@elementor/editor-ui": "4.4.0-beta3",
+    "@elementor/editor-v1-adapters": "4.4.0-beta3",
+    "@elementor/env": "4.4.0-beta3",
+    "@elementor/events": "4.4.0-beta3",
+    "@elementor/http-client": "4.4.0-beta3",
     "@elementor/icons": "~1.78.1",
-    "@elementor/locations": "4.4.0-beta1",
-    "@elementor/query": "4.4.0-beta1",
-    "@elementor/schema": "4.4.0-beta1",
-    "@elementor/session": "4.4.0-beta1",
+    "@elementor/locations": "4.4.0-beta3",
+    "@elementor/query": "4.4.0-beta3",
+    "@elementor/schema": "4.4.0-beta3",
+    "@elementor/session": "4.4.0-beta3",
     "@elementor/ui": "1.41.4",
-    "@elementor/utils": "4.4.0-beta1",
-    "@elementor/wp-media": "4.4.0-beta1",
+    "@elementor/utils": "4.4.0-beta3",
+    "@elementor/wp-media": "4.4.0-beta3",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",

package/src/controls/icon-library/icon-library-grid.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
+import { useRovingFocus } from '@elementor/editor-ui';
 import { Box, Tooltip, useTheme } from '@elementor/ui';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import { __ } from '@wordpress/i18n';
 
 import { type FontAwesome7Icon } from './font-awesome-7-catalog';
@@ -63,8 +64,6 @@ export const IconLibraryGrid = ( {
 }: IconLibraryGridProps ) => {
 	const theme = useTheme();
 	const containerRef = useRef< HTMLDivElement >( null );
-	const cellRefs = useRef( new Map< string, HTMLButtonElement >() );
-	const shouldRestoreFocusRef = useRef( false );
 	const selectedIndex = items.findIndex( ( item ) => item.id === selectedValue );
 	const [ focusedIndex, setFocusedIndex ] = useState( selectedIndex >= 0 ? selectedIndex : 0 );
 	const [ { columnCount, cellSize }, setGridMetrics ] = useState( () => getGridMetrics( 0, 0, 0 ) );
@@ -79,6 +78,16 @@ export const IconLibraryGrid = ( {
 		paddingStart: verticalPadding,
 		paddingEnd: verticalPadding,
 		overscan: GRID_OVERSCAN,
+		rangeExtractor: ( range ) => {
+			const rowIndexes = defaultRangeExtractor( range );
+			const focusedRow = Math.floor( focusedIndex / columnCount );
+
+			if ( items.length === 0 || rowIndexes.includes( focusedRow ) ) {
+				return rowIndexes;
+			}
+
+			return [ ...rowIndexes, focusedRow ].sort( ( a, b ) => a - b );
+		},
 	} );
 	const focusedItem = items[ focusedIndex ];
 	const visibleRowIndexes = virtualizer.getVirtualIndexes().join( ',' );
@@ -103,20 +112,10 @@ export const IconLibraryGrid = ( {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ cellSize, columnCount, items, selectedIndex, selectedValue ] );
 
-	useLayoutEffect( () => {
-		if ( ! shouldRestoreFocusRef.current || ! focusedItem ) {
-			return;
-		}
-
-		const cell = cellRefs.current.get( focusedItem.id );
-
-		if ( ! cell ) {
-			return;
-		}
-
-		cell.focus();
-		shouldRestoreFocusRef.current = false;
-	}, [ focusedItem, visibleRowIndexes ] );
+	const { registerRef, requestFocus } = useRovingFocus< HTMLButtonElement >( {
+		tabbableKey: focusedItem?.id,
+		mountedSignature: visibleRowIndexes,
+	} );
 
 	useLayoutEffect( () => {
 		const container = containerRef.current;
@@ -152,7 +151,7 @@ export const IconLibraryGrid = ( {
 			return;
 		}
 
-		shouldRestoreFocusRef.current = true;
+		requestFocus();
 		setFocusedIndex( nextIndex );
 		virtualizer.scrollToIndex( Math.floor( nextIndex / columnCount ) );
 	};
@@ -281,13 +280,7 @@ export const IconLibraryGrid = ( {
 													aria-label={ item.label }
 													aria-selected={ isSelected }
 													tabIndex={ tabIndex }
-													ref={ ( node: HTMLButtonElement | null ) => {
-														if ( node ) {
-															cellRefs.current.set( item.id, node );
-														} else {
-															cellRefs.current.delete( item.id );
-														}
-													} }
+													ref={ registerRef( item.id ) }
 													onClick={ () => {
 														onSelect( item.id );
 														onClose();

package/src/controls/icon-library/icon-library-popover.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import {
 	PopoverBody,
 	PopoverHeader,
@@ -103,6 +103,8 @@ export const IconLibraryPopover = ( {
 		[ icons, selectedIconClass, selectedIconLibrary ]
 	);
 
+	const contentRef = useRef< HTMLDivElement >( null );
+
 	const handleClose = () => {
 		setSearchValue( '' );
 		setActiveLibraries( [] );
@@ -122,6 +124,19 @@ export const IconLibraryPopover = ( {
 		} );
 	};
 
+	const handleSearchKeyDown = ( event: React.KeyboardEvent ) => {
+		if ( event.key !== 'ArrowDown' || view !== 'list' ) {
+			return;
+		}
+
+		const option = contentRef.current?.querySelector< HTMLElement >( '[role="option"][tabindex="0"]' );
+
+		if ( option ) {
+			event.preventDefault();
+			option.focus();
+		}
+	};
+
 	const handleClearSearch = () => {
 		setSearchValue( '' );
 	};
@@ -150,17 +165,19 @@ export const IconLibraryPopover = ( {
 				gap={ 1 }
 				sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM } }
 			>
-				<SearchField
-					value={ searchInputValue }
-					onSearch={ handleSearchChange }
-					placeholder={ __( 'Search', 'elementor' ) }
-					id="icon-library-search"
-					sx={ { flex: 1, px: 0, pb: 0 } }
-				/>
+				<Box onKeyDown={ handleSearchKeyDown } sx={ { flex: 1, minWidth: 0 } }>
+					<SearchField
+						value={ searchInputValue }
+						onSearch={ handleSearchChange }
+						placeholder={ __( 'Search', 'elementor' ) }
+						id="icon-library-search"
+						sx={ { width: '100%', px: 0, pb: 0 } }
+					/>
+				</Box>
 				<IconLibraryFilter value={ activeLibraries } onChange={ setActiveLibraries } />
 			</Stack>
 			<Divider />
-			<Box sx={ { flex: 1, overflow: 'hidden', minHeight: 0, minWidth: 0 } }>
+			<Box ref={ contentRef } sx={ { flex: 1, overflow: 'hidden', minHeight: 0, minWidth: 0 } }>
 				<IconLibraryContent
 					isLoading={ isLoading }
 					items={ items }
@@ -235,6 +252,7 @@ const IconLibraryContent = ( {
 			onClose={ onClose }
 			itemHeight={ ICON_LIBRARY_ROW_HEIGHT }
 			menuItemContentTemplate={ IconLibraryRow }
+			rovingFocus
 			noResultsComponent={ emptyState }
 			data-testid="icon-library-list"
 		/>

package/src/controls/query-select-control.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { type SyntheticEvent, useMemo } from 'react';
+import { numberPropTypeUtil, queryPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { Autocomplete, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import { type FlatOption } from '../components/autocomplete';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { extractFlatOptionFromQueryValue, useQueryAutocomplete } from '../hooks/use-query-autocomplete';
+
+type QuerySelectControlProps = {
+	queryOptions: {
+		params: Record< string, unknown >;
+		url: string;
+	};
+	placeholder?: string;
+	minInputLength?: number;
+	ariaLabel?: string;
+};
+
+const SIZE = 'tiny';
+
+export const QuerySelectControl = createControl( ( props: QuerySelectControlProps ) => {
+	const { queryOptions, placeholder, minInputLength = 0, ariaLabel } = props;
+	const { value, setValue, disabled } = useBoundProp( queryPropTypeUtil );
+
+	const selectedOption = useMemo( () => extractFlatOptionFromQueryValue( value ), [ value ] );
+
+	const { options, updateOptions } = useQueryAutocomplete( {
+		url: queryOptions.url,
+		params: queryOptions.params,
+		minInputLength,
+		initialQueryValue: value,
+	} );
+
+	const optionsWithSelected = useMemo(
+		() => withSelectedOption( options as FlatOption[], selectedOption ),
+		[ options, selectedOption ]
+	);
+
+	const handleChange = ( _: SyntheticEvent, newValue: FlatOption | null ) => {
+		if ( ! newValue ) {
+			setValue( null );
+
+			return;
+		}
+
+		setValue( {
+			id: numberPropTypeUtil.create( Number( newValue.id ) ),
+			label: stringPropTypeUtil.create( newValue.label ),
+		} );
+	};
+
+	const handleInputChange = ( _: SyntheticEvent, term: string, reason: string ) => {
+		if ( 'reset' === reason || 'clear' === reason ) {
+			updateOptions( null );
+			return;
+		}
+
+		if ( 'input' !== reason ) {
+			return;
+		}
+
+		updateOptions( term || null );
+	};
+
+	return (
+		<ControlActions>
+			<Autocomplete
+				fullWidth
+				openOnFocus
+				disabled={ disabled }
+				size={ SIZE }
+				value={ selectedOption }
+				options={ optionsWithSelected }
+				onChange={ handleChange }
+				onInputChange={ handleInputChange }
+				getOptionLabel={ ( option ) => option.label }
+				isOptionEqualToValue={ ( option, val ) => option.id === val.id }
+				filterOptions={ ( opts ) => opts }
+				renderInput={ ( params ) => (
+					<TextField
+						{ ...params }
+						placeholder={ placeholder ?? __( 'Search', 'elementor' ) }
+						inputProps={ {
+							...params.inputProps,
+							...( ariaLabel ? { 'aria-label': ariaLabel } : {} ),
+						} }
+					/>
+				) }
+			/>
+		</ControlActions>
+	);
+} );
+
+function withSelectedOption( options: FlatOption[], selectedOption: FlatOption | null ): FlatOption[] {
+	if ( ! selectedOption || options.some( ( option ) => option.id === selectedOption.id ) ) {
+		return options;
+	}
+
+	return [ selectedOption, ...options ];
+}

package/src/controls/size-control/hooks/use-size-value.ts

@@ -4,7 +4,7 @@ import { type SizePropValue } from '@elementor/editor-props';
 import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
 import { type SetSizeValue } from '../types';
 import { isExtendedUnit } from '../utils/is-extended-unit';
-import { createDefaultSizeValue, resolveSizeOnUnitChange, resolveSizeValue } from '../utils/resolve-size-value';
+import { createEmptySizeValue, resolveSizeOnUnitChange, resolveSizeValue } from '../utils/resolve-size-value';
 import { useUnitSync } from './use-unit-sync';
 
 type SizeValue = SizePropValue[ 'value' ];
@@ -36,7 +36,7 @@ export const useSizeValue = < T extends SizeValue, U extends SizeValue[ 'unit' ]
 			}
 		},
 		persistWhen: ( next ) => hasChanged( next, resolvedValue ),
-		fallback: () => createDefaultSizeValue( units, defaultUnit ),
+		fallback: ( previousValue ) => createEmptySizeValue( previousValue, units, defaultUnit ),
 	} );
 
 	const [ unit, setUnit ] = useUnitSync( {

package/src/controls/size-control/unstable-size-control.tsx

@@ -33,13 +33,16 @@ export const UnstableSizeControl = createControl(
 			restoreValue,
 		} = useBoundProp( sizePropTypeUtil );
 		const lastNonAutoValue = useRef< SizePropValue[ 'value' ] | null >( null );
+		const clearedUnit = useRef< SizePropValue[ 'value' ][ 'unit' ] | null >( null );
 
-		const { sizeValue, placeholder } = resolveBoundPropValue(
+		const { sizeValue: resolvedSizeValue, placeholder } = resolveBoundPropValue(
 			value ?? lastNonAutoValue.current,
 			boundPropPlaceholder,
 			propPlaceholder
 		);
 
+		const sizeValue = applyClearedUnit( resolvedSizeValue, value, clearedUnit.current );
+
 		const units = getSizeUnits( propType, variant );
 		const defaultUnit = getDefaultUnit( propType );
 
@@ -47,6 +50,7 @@ export const UnstableSizeControl = createControl(
 			const isRequired = propType.settings.required;
 
 			if ( shouldNullifyValue( value ) && ! isRequired ) {
+				clearedUnit.current = value?.unit ?? null;
 				setValue( null );
 			}
 
@@ -56,6 +60,8 @@ export const UnstableSizeControl = createControl(
 		};
 
 		const handleChange = ( newValue: SizePropValue[ 'value' ], options?: CreateOptions, meta?: SetValueMeta ) => {
+			clearedUnit.current = null;
+
 			if ( isTransitioningFromExtendedUnit( newValue, value ) ) {
 				lastNonAutoValue.current = newValue;
 
@@ -93,6 +99,18 @@ export const UnstableSizeControl = createControl(
 	}
 );
 
+const applyClearedUnit = (
+	resolvedValue: SizePropValue[ 'value' ] | null,
+	boundValue: SizePropValue[ 'value' ] | null,
+	clearedUnit: SizePropValue[ 'value' ][ 'unit' ] | null
+): SizePropValue[ 'value' ] | null => {
+	if ( boundValue || ! resolvedValue || ! clearedUnit ) {
+		return resolvedValue;
+	}
+
+	return { ...resolvedValue, unit: clearedUnit } as SizePropValue[ 'value' ];
+};
+
 const isTransitioningFromExtendedUnit = (
 	nextValue: SizePropValue[ 'value' ],
 	previousValue: SizePropValue[ 'value' ]

package/src/controls/size-control/utils/resolve-size-value.ts

@@ -60,6 +60,20 @@ export const createDefaultSizeValue = < T extends SizeValue >( units: SizeUnit[]
 	return { size: DEFAULT_SIZE, unit } as T;
 };
 
+export const createEmptySizeValue = < T extends SizeValue >(
+	previousValue: T | null,
+	units: SizeUnit[],
+	defaultUnit?: SizeUnit
+): T => {
+	const previousUnit = previousValue?.unit;
+
+	if ( ! previousUnit || isExtendedUnit( previousUnit ) || ! units.includes( previousUnit ) ) {
+		return createDefaultSizeValue< T >( units, defaultUnit );
+	}
+
+	return { size: DEFAULT_SIZE, unit: previousUnit } as T;
+};
+
 const resolveFallbackUnit = < TUnit extends SizeUnit >(
 	unit: TUnit,
 	units: readonly TUnit[],

package/src/controls/size-control.tsx

@@ -116,7 +116,7 @@ export const SizeControl = createControl(
 		const popupState = usePopupState( { variant: 'popover' } );
 
 		const memorizedExternalState = useMemo(
-			() => createStateFromSizeProp( sizeValue, actualDefaultUnit ),
+			() => ( sizeValue ? createStateFromSizeProp( sizeValue, actualDefaultUnit ) : null ),
 			[ sizeValue, actualDefaultUnit ]
 		);
 
@@ -125,10 +125,10 @@ export const SizeControl = createControl(
 			setExternal: ( newState: State | null, options, meta ) =>
 				setSizeValue( extractValueFromState( newState ), options, meta ),
 			persistWhen: ( newState ) => !! extractValueFromState( newState ),
-			fallback: ( newState ) => ( {
-				unit: newState?.unit ?? actualDefaultUnit,
-				numeric: newState?.numeric ?? DEFAULT_SIZE,
-				custom: newState?.custom ?? '',
+			fallback: ( prevState ) => ( {
+				unit: prevState?.unit && ! isUnitExtendedOption( prevState.unit ) ? prevState.unit : actualDefaultUnit,
+				numeric: DEFAULT_SIZE,
+				custom: '',
 			} ),
 		} );
 

package/src/hooks/use-query-autocomplete.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { numberPropTypeUtil, type QueryPropValue, stringPropTypeUtil } from '@elementor/editor-props';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 import { debounce } from '@elementor/utils';
@@ -47,13 +47,17 @@ export function useQueryAutocomplete( {
 		[ url, excludeIdSet ]
 	);
 
+	const paramsKey = useMemo( () => JSON.stringify( params ), [ params ] );
+	const paramsRef = useRef( params );
+	paramsRef.current = params;
+
 	useEffect( () => {
 		if ( minInputLength === 0 && url ) {
-			fetchOptions( url, { ...params, term: '' } ).then( ( newOptions ) => {
+			fetchOptions( url, { ...paramsRef.current, term: '' } ).then( ( newOptions ) => {
 				setOptions( formatOptions( filterExcludedOptions( newOptions, excludeIdSet ) ) );
 			} );
 		}
-	}, [ url, minInputLength, excludeIdSet, params ] );
+	}, [ url, minInputLength, excludeIdSet, paramsKey ] );
 
 	const updateOptions = ( term: string | null ) => {
 		const termStr = term ?? '';

package/src/index.ts

@@ -23,6 +23,7 @@ export { HtmlTagControl } from './controls/html-tag-control';
 export { QueryChipsControl } from './controls/query-chips-control';
 export { QueryControl } from './controls/query-control';
 export { QueryFilterRepeaterControl } from './controls/query-filter-repeater-control';
+export { QuerySelectControl } from './controls/query-select-control';
 export { GapControl } from './controls/gap-control';
 export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';