Format the code and fix ESLint complaints

Author: WesCossick

demo/tsconfig.json

@@ -1,26 +1,20 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": [
-    "src"
-  ]
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"]
 }

src/use-dropdown-menu.ts

@@ -11,6 +11,7 @@ interface ButtonProps
 }
 
 // A custom Hook that abstracts away the listeners/controls for dropdown menus
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export default function useDropdownMenu(itemCount: number) {
 	// Use state
 	const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -24,7 +25,7 @@ export default function useDropdownMenu(itemCount: number) {
 
 	// Initialize refs and update them when the item count changes
 	useEffect(() => {
-		itemRefs.current = [...Array(itemCount)].map(() => createRef<HTMLAnchorElement>());
+		itemRefs.current = [...Array<undefined>(itemCount)].map(() => createRef<HTMLAnchorElement>());
 	}, [itemCount]);
 
 	// Create type guard
@@ -187,7 +188,7 @@ export default function useDropdownMenu(itemCount: number) {
 		'aria-expanded': isOpen,
 	};
 
-	const itemProps = [...Array(itemCount)].map((ignore, index) => ({
+	const itemProps = [...Array<undefined>(itemCount)].map((_ignore, index) => ({
 		onKeyDown: itemListener,
 		tabIndex: -1,
 		role: 'menuitem',

test/use-dropdown-menu.test.tsx

@@ -56,11 +56,14 @@ it('Moves the focus to the first menu item after clicking the menu to open it, t
 
 	expect(screen.getByText('Primary')).toHaveFocus();
 
-	fireEvent(screen.getByText('Primary'), new KeyboardEvent('keydown', {
-		key: 'ArrowDown',
-		bubbles: true,
-		cancelable: true,
-	}));
+	fireEvent(
+		screen.getByText('Primary'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowDown',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
 
 	expect(screen.getByText('Item 1')).toHaveFocus();
 });
@@ -114,91 +117,109 @@ it('Moves the focus to the next element in the menu after pressing the down arro
 	userEvent.type(screen.getByText('Primary'), '{enter}', {
 		skipClick: true,
 	});
-	
+
 	expect(screen.getByText('Item 1')).toHaveFocus();
 
-	fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
-		key: 'ArrowDown',
-		bubbles: true,
-		cancelable: true,
-	}));
-	
+	fireEvent(
+		screen.getByText('Item 1'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowDown',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
 	expect(screen.getByText('Item 2')).toHaveFocus();
 });
 
 it('Moves the focus to the previous element in the menu after pressing the up arrow', () => {
 	render(<TestComponent />);
 
 	userEvent.tab();
-	
+
 	userEvent.type(screen.getByText('Primary'), '{enter}', {
 		skipClick: true,
 	});
-	
+
 	expect(screen.getByText('Item 1')).toHaveFocus();
 
-	fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
-		key: 'ArrowDown',
-		bubbles: true,
-		cancelable: true,
-	}));
-	
+	fireEvent(
+		screen.getByText('Item 1'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowDown',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
 	expect(screen.getByText('Item 2')).toHaveFocus();
 
-	fireEvent(screen.getByText('Item 2'), new KeyboardEvent('keydown', {
-		key: 'ArrowUp',
-		bubbles: true,
-		cancelable: true,
-	}));
-	
+	fireEvent(
+		screen.getByText('Item 2'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowUp',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
 	expect(screen.getByText('Item 1')).toHaveFocus();
 });
 
 it('Wraps the focus to the last element when pressing the up arrow at the beginning of the menu', () => {
 	render(<TestComponent />);
 
 	userEvent.tab();
-	
+
 	userEvent.type(screen.getByText('Primary'), '{enter}', {
 		skipClick: true,
 	});
-	
+
 	expect(screen.getByText('Item 1')).toHaveFocus();
 
-	fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
-		key: 'ArrowUp',
-		bubbles: true,
-		cancelable: true,
-	}));
-	
+	fireEvent(
+		screen.getByText('Item 1'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowUp',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
 	expect(screen.getByText('Item 3')).toHaveFocus();
 });
 
 it('Wraps the focus to the first element when pressing the down arrow at the end of the menu', () => {
 	render(<TestComponent />);
 
 	userEvent.tab();
-	
+
 	userEvent.type(screen.getByText('Primary'), '{enter}', {
 		skipClick: true,
 	});
-	
+
 	expect(screen.getByText('Item 1')).toHaveFocus();
 
-	fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
-		key: 'ArrowUp',
-		bubbles: true,
-		cancelable: true,
-	}));
-	
+	fireEvent(
+		screen.getByText('Item 1'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowUp',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
 	expect(screen.getByText('Item 3')).toHaveFocus();
 
-	fireEvent(screen.getByText('Item 3'), new KeyboardEvent('keydown', {
-		key: 'ArrowDown',
-		bubbles: true,
-		cancelable: true,
-	}));
-	
+	fireEvent(
+		screen.getByText('Item 3'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowDown',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
 	expect(screen.getByText('Item 1')).toHaveFocus();
 });
 
@@ -222,7 +243,7 @@ it('Sets isOpen to false after pressing tab while focused on a menu item', () =>
 	render(<TestComponent />);
 
 	userEvent.tab();
-	
+
 	userEvent.type(screen.getByText('Primary'), '{enter}', {
 		skipClick: true,
 	});
@@ -236,11 +257,11 @@ it('Moves the focus to the menu button after pressing escape while focused on a
 	render(<TestComponent />);
 
 	userEvent.tab();
-	
+
 	userEvent.type(screen.getByText('Primary'), '{enter}', {
 		skipClick: true,
 	});
-	
+
 	userEvent.type(screen.getByText('Item 1'), '{esc}', {
 		skipClick: true,
 	});
@@ -282,29 +303,41 @@ it('Can navigate to a dynamically-added item', () => {
 
 	userEvent.click(screen.getByText('Primary'));
 
-	fireEvent(screen.getByText('Primary'), new KeyboardEvent('keydown', {
-		key: 'ArrowDown',
-		bubbles: true,
-		cancelable: true,
-	}));
-
-	fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
-		key: 'ArrowDown',
-		bubbles: true,
-		cancelable: true,
-	}));
-
-	fireEvent(screen.getByText('Item 2'), new KeyboardEvent('keydown', {
-		key: 'ArrowDown',
-		bubbles: true,
-		cancelable: true,
-	}));
-
-	fireEvent(screen.getByText('Item 3'), new KeyboardEvent('keydown', {
-		key: 'ArrowDown',
-		bubbles: true,
-		cancelable: true,
-	}));
-	
+	fireEvent(
+		screen.getByText('Primary'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowDown',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
+	fireEvent(
+		screen.getByText('Item 1'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowDown',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
+	fireEvent(
+		screen.getByText('Item 2'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowDown',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
+	fireEvent(
+		screen.getByText('Item 3'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowDown',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
 	expect(screen.getByText('Item 4')).toHaveFocus();
 });