Merge pull request #285 from sparksuite/polishing-touches

Bump minor version + polishing touches

Author: WesCossick

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-accessible-dropdown-menu-hook",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "A simple Hook for creating fully accessible dropdown menus in React",
 	"main": "dist/use-dropdown-menu.js",
 	"types": "dist/use-dropdown-menu.d.ts",

src/use-dropdown-menu.test.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 const TestComponent: React.FC<Props> = ({ options }) => {
 	const [itemCount, setItemCount] = useState(4);
-	const { buttonProps, itemProps, isOpen, moveFocus, setIsOpen } = useDropdownMenu(itemCount, options);
+	const { buttonProps, itemProps, isOpen, setIsOpen, moveFocus } = useDropdownMenu(itemCount, options);
 
 	const clickHandlers: (() => void)[] = [(): void => console.log('Item one clicked'), (): void => setIsOpen(false)];
 
@@ -28,7 +28,6 @@ const TestComponent: React.FC<Props> = ({ options }) => {
 						key={i}
 						id={`menu-item-${i + 1}`}
 						onClick={clickHandlers[i]}
-						onMouseEnter={(): void => moveFocus(i)}
 						href={i > 1 ? 'https://example.com' : undefined}
 					>
 						{i + 1} Item
@@ -46,6 +45,10 @@ const TestComponent: React.FC<Props> = ({ options }) => {
 				Add Item
 			</button>
 
+			<button data-testid='focus-third-item' onClick={(): void => moveFocus(2)}>
+				Focus third item
+			</button>
+
 			<span data-testid='is-open-indicator'>{isOpen ? 'true' : 'false'}</span>
 		</React.Fragment>
 	);
@@ -542,7 +545,7 @@ it('Moves the focus to the menu item with a label that starts with the correspon
 	expect(screen.getByText('3 Item')).toHaveFocus();
 });
 
-it('Moves the focus to the menu item currently hovered over by mouse', () => {
+it('Moves the focus to the provided menu item when `moveFocus` is called', () => {
 	render(<TestComponent />);
 
 	userEvent.tab();
@@ -551,13 +554,7 @@ it('Moves the focus to the menu item currently hovered over by mouse', () => {
 		skipClick: true,
 	});
 
-	fireEvent(
-		screen.getByText('3 Item'),
-		new MouseEvent('mouseover', {
-			bubbles: true,
-			cancelable: true,
-		})
-	);
+	userEvent.click(screen.getByTestId('focus-third-item'));
 
 	expect(screen.getByText('3 Item')).toHaveFocus();
 });

website/docs/design/return-object.md

@@ -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 changes internal pointer of currently focused element. This is useful when you want to allow seamless switching between keyboard and mouse use.
+- **moveFocus:** A function that moves the browser’s focus to the specified item index.