Improve typecheck for MenuKeyboardNavigationProps (#2345)

src/sidebar/components/menu-keyboard-navigation.js

@@ -8,12 +8,22 @@ function isElementVisible(element) {
   return element.offsetParent !== null;
 }
 
+/**
+ * @typedef MenuKeyboardNavigationProps
+ * @prop {string} [className]
+ * @prop {(e: KeyboardEvent) => any} [closeMenu] - Callback when the menu is closed via keyboard input
+ * @prop {boolean} [visible] - When  true`, sets focus on the first item in the list
+ * @prop {Object} children - Array of nodes which may contain <MenuItems> or any nodes
+ */
+
 /**
  * Helper component used by Menu and MenuItem to facilitate keyboard navigation of a
  * list of <MenuItem> components. This component should not be used directly.
  *
  * Note that `ArrowRight` shall be handled by the parent <MenuItem> directly and
  * all other focus() related navigation is handled here.
+ *
+ * @param {MenuKeyboardNavigationProps} props
  */
 export default function MenuKeyboardNavigation({
   className,
@@ -21,7 +31,7 @@ export default function MenuKeyboardNavigation({
   children,
   visible,
 }) {
-  const menuRef = useRef(null);
+  const menuRef = useRef(/** @type {HTMLDivElement|null} */ (null));
 
   useEffect(() => {
     let focusTimer = null;
@@ -30,7 +40,7 @@ export default function MenuKeyboardNavigation({
         // The focus won't work without delaying rendering.
         const firstItem = menuRef.current.querySelector('[role^="menuitem"]');
         if (firstItem) {
-          firstItem.focus();
+          /** @type {HTMLElement} */ (firstItem).focus();
         }
       });
     }
@@ -42,7 +52,8 @@ export default function MenuKeyboardNavigation({
 
   const onKeyDown = event => {
     const menuItems = Array.from(
-      menuRef.current.querySelectorAll('[role^="menuitem"]')
+      /** @type {NodeListOf<HTMLElement>} */
+      (menuRef.current.querySelectorAll('[role^="menuitem"]'))
     ).filter(isElementVisible);
 
     let focusedIndex = menuItems.findIndex(el =>

src/tsconfig.json

@@ -57,7 +57,6 @@
     "sidebar/components/login-prompt-panel.js",
     "sidebar/components/markdown-editor.js",
     "sidebar/components/menu-item.js",
-    "sidebar/components/menu-keyboard-navigation.js",
     "sidebar/components/menu.js",
     "sidebar/components/moderation-banner.js",
     "sidebar/components/new-note-btn.js",