Merge pull request #5963 from liferay/LPD-47056

 feat(@clayui/core): LPD-47056 Add Keyboard Interactions to the Icon Selector

Author: matuzalemsteles

packages/clay-core/docs/icon-selector.mdx

@@ -16,13 +16,16 @@ Icon Selector is a field type that allows users to choose an icon from a predefi
 
 ```jsx preview
 import {IconSelector} from '@clayui/core';
+import React from 'react';
 
 import '@clayui/css/lib/css/atlas.css';
 
+const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
+
 export default function App() {
 	return (
 		<div className="p-4">
-			<IconSelector />
+			<IconSelector spritemap={spritemap} />
 		</div>
 	);
 }

packages/clay-core/src/drop-down/Menu.tsx

@@ -8,21 +8,17 @@ import {
 	InternalDispatch,
 	Keys,
 	Overlay,
-	getFocusableList,
 	useControlledState,
 	useId,
+	useInteractionFocus,
 	useNavigation,
 	useOverlayPosition,
 } from '@clayui/shared';
 import classNames from 'classnames';
-import React, {
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useRef,
-} from 'react';
+import React, {useCallback, useImperativeHandle, useRef} from 'react';
 
 import {Collection, useCollection, useVirtual} from '../collection';
+import {FocusMenu} from '../focus-trap';
 
 import type {ICollectionProps} from '../collection';
 
@@ -126,6 +122,9 @@ function MenuInner<T extends Record<string, unknown> | string | number>(
 	const menuRef = useRef<HTMLDivElement>(null);
 	const triggerRef = useRef<HTMLButtonElement | null>(null);
 
+	// Pre-initializes events for the Focus Menu.
+	useInteractionFocus();
+
 	useImperativeHandle(ref, () => menuRef.current, []);
 
 	const [active, setActive] = useControlledState({
@@ -287,23 +286,8 @@ function MenuInner<T extends Record<string, unknown> | string | number>(
 							style={style}
 						>
 							<FocusMenu
-								onRender={() => {
-									// After a few milliseconds querying the elements in the DOM
-									// inside the menu. This especially when the menu is not
-									// rendered yet only after the menu is opened, React needs
-									// to commit the changes to the DOM so that the elements are
-									// visible and we can move the focus.
-									setTimeout(() => {
-										const list = getFocusableList(
-											menuRef,
-											UNSAFE_focusableElements
-										);
-
-										if (list.length) {
-											list[0]!.focus();
-										}
-									}, 10);
-								}}
+								focusableElements={UNSAFE_focusableElements}
+								menuRef={menuRef}
 							>
 								<Collection<T>
 									{...otherProps}
@@ -357,19 +341,6 @@ function MenuInner<T extends Record<string, unknown> | string | number>(
 	);
 }
 
-type FocusMenuProps<T> = {
-	children: T;
-	onRender: () => void;
-};
-
-export function FocusMenu<T>({children, onRender}: FocusMenuProps<T>) {
-	useEffect(() => {
-		onRender();
-	}, []);
-
-	return children;
-}
-
 type ForwardRef = {
 	displayName: string;
 	<T>(props: Props<T> & {ref?: React.Ref<HTMLDivElement>}): JSX.Element;

packages/clay-core/src/focus-trap/FocusMenu.tsx

@@ -0,0 +1,50 @@
+/**
+ * SPDX-FileCopyrightText: © 2025 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {
+	FOCUSABLE_ELEMENTS,
+	getFocusableList,
+	useInteractionFocus,
+} from '@clayui/shared';
+import React, {useEffect} from 'react';
+
+type FocusMenuProps<T, E extends HTMLElement> = {
+	children: T;
+	menuRef: React.MutableRefObject<E> | React.RefObject<E>;
+	focusableElements?: Array<string>;
+};
+
+/**
+ * TODO: Move the implementation to be part of the useNavigation hook so that
+ * it is an internal function that can be called to focus on the first item.
+ */
+export function FocusMenu<T, E extends HTMLElement>({
+	children,
+	menuRef,
+	focusableElements = FOCUSABLE_ELEMENTS,
+}: FocusMenuProps<T, E>): JSX.Element {
+	const {isFocusVisible} = useInteractionFocus();
+
+	useEffect(() => {
+		if (!isFocusVisible()) {
+			return;
+		}
+
+		// After a few milliseconds querying the elements in the DOM
+		// inside the menu. This especially when the menu is not
+		// rendered yet only after the menu is opened, React needs
+		// to commit the changes to the DOM so that the elements are
+		// visible and we can move the focus.
+		setTimeout(() => {
+			const list = getFocusableList(menuRef, focusableElements);
+
+			if (list.length) {
+				list[0]!.focus();
+			}
+		}, 10);
+	}, []);
+
+	return <>{children}</>;
+}

packages/clay-core/src/focus-trap/index.ts

@@ -4,3 +4,4 @@
  */
 
 export {FocusTrap} from './FocusTrap';
+export {FocusMenu} from './FocusMenu';