From 5eaf493bc7d9e77b33e7afba703b8053b6b4ceac Mon Sep 17 00:00:00 2001
From: Jakub Jirutka <jakub@jirutka.cz>
Date: Sat, 12 Oct 2024 15:26:46 +0200
Subject: [PATCH] Allow to use any HTML Element as menu item

The code works with any HTML element, there's nothing that requires
specifically `HTMLAnchorElement` (`<a>`) except `e.currentTarget.href`
which is already conditional. Thus the current limitation is only a
typing issue introduced by unnecessarily specific `ref` type. We can
make it a generic parameter, but it wouldn't bring any real benefit,
just increase complexity and decrease flexibility.

Resolves #174
---
 src/use-dropdown-menu.ts             | 13 +++++++------
 website/docs/design/return-object.md |  6 +++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/use-dropdown-menu.ts b/src/use-dropdown-menu.ts
index 243986b..e2f7e3c 100644
--- a/src/use-dropdown-menu.ts
+++ b/src/use-dropdown-menu.ts
@@ -12,10 +12,11 @@ export interface ButtonProps<ButtonElement extends HTMLElement>
 
 // Create interface for item properties
 export interface ItemProps {
-	onKeyDown: (e: React.KeyboardEvent<HTMLAnchorElement>) => void;
+	onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
 	tabIndex: number;
 	role: string;
-	ref: React.RefObject<HTMLAnchorElement>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	ref: React.RefObject<any>;
 }
 
 // A custom Hook that abstracts away the listeners/controls for dropdown menus
@@ -43,8 +44,8 @@ export default function useDropdownMenu<ButtonElement extends HTMLElement = HTML
 
 	// Create refs
 	const buttonRef = useRef<ButtonElement>(null);
-	const itemRefs = useMemo<React.RefObject<HTMLAnchorElement>[]>(
-		() => Array.from({ length: itemCount }, () => createRef<HTMLAnchorElement>()),
+	const itemRefs = useMemo<React.RefObject<HTMLElement>[]>(
+		() => Array.from({ length: itemCount }, () => createRef<HTMLElement>()),
 		[itemCount]
 	);
 
@@ -171,7 +172,7 @@ export default function useDropdownMenu<ButtonElement extends HTMLElement = HTML
 	};
 
 	// Create a function that handles menu logic based on keyboard events that occur on menu items
-	const itemListener = (e: React.KeyboardEvent<HTMLAnchorElement>): void => {
+	const itemListener = (e: React.KeyboardEvent<HTMLElement | HTMLAnchorElement>): void => {
 		// Destructure the key property from the event object
 		const { key } = e;
 
@@ -189,7 +190,7 @@ export default function useDropdownMenu<ButtonElement extends HTMLElement = HTML
 				setIsOpen(false);
 				return;
 			} else if (key === 'Enter' || key === ' ') {
-				if (!e.currentTarget.href) {
+				if (!('href' in e.currentTarget && e.currentTarget.href)) {
 					e.currentTarget.click();
 				}
 
diff --git a/website/docs/design/return-object.md b/website/docs/design/return-object.md
index bb02479..eb3f809 100644
--- a/website/docs/design/return-object.md
+++ b/website/docs/design/return-object.md
@@ -17,10 +17,10 @@ This Hook returns an object of the following shape:
     };
     itemProps: [
         {
-            onKeyDown: (e: React.KeyboardEvent<HTMLAnchorElement>) => void;
+            onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
             tabIndex: -1;
             role: 'menuitem';
-            ref: React.RefObject<HTMLAnchorElement>;
+            ref: React.RefObject<any>;
         };
         ...
     ];
@@ -45,4 +45,4 @@ This Hook returns an object of the following shape:
     - **ref:** A React ref applied to each menu item, used to manage focus.
 - **isOpen:** A boolean value indicating if the menu is open or closed. The developer should use this value to make the menu visible or not.
 - **setIsOpen:** A function useful for allowing the developer to programmatically open/close the menu.
-- **moveFocus:** A function that moves the browser’s focus to the specified item index.
\ No newline at end of file
+- **moveFocus:** A function that moves the browser’s focus to the specified item index.