@elementor/editor-controls 4.4.0-beta2 → 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-beta2",
+  "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-beta2",
-    "@elementor/editor-elements": "4.4.0-beta2",
-    "@elementor/editor-props": "4.4.0-beta2",
-    "@elementor/editor-responsive": "4.4.0-beta2",
-    "@elementor/editor-ui": "4.4.0-beta2",
-    "@elementor/editor-v1-adapters": "4.4.0-beta2",
-    "@elementor/env": "4.4.0-beta2",
-    "@elementor/events": "4.4.0-beta2",
-    "@elementor/http-client": "4.4.0-beta2",
+    "@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-beta2",
-    "@elementor/query": "4.4.0-beta2",
-    "@elementor/schema": "4.4.0-beta2",
-    "@elementor/session": "4.4.0-beta2",
+    "@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-beta2",
-    "@elementor/wp-media": "4.4.0-beta2",
+    "@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"
 		/>