WIP fix type errors on MenubarSubmenu --no-verify

Author: clairep94

client/components/Menubar/Menubar.tsx

@@ -12,18 +12,16 @@ import { usePrevious } from '../../common/usePrevious';
 import { KeydownHandlerMap } from '../../common/useKeyDownHandlers';
 
 export interface MenubarProps {
+  // Menu items that will be rendered in the menubar
   children?: React.ReactNode;
+  // CSS class name to apply to the menubar
   className?: string;
 }
 
 /**
  * Menubar manages a collection of menu items and their submenus. It provides keyboard navigation,
  * focus and state management, and other accessibility features for the menu items and submenus.
  *
- * @param {React.ReactNode} props.children - Menu items that will be rendered in the menubar
- * @param {string} [props.className='nav__menubar'] - CSS class name to apply to the menubar
- * @returns {JSX.Element}
- *
  * @example
  * <Menubar>
  *  <MenubarSubmenu id="file" title="File">

client/components/Menubar/MenubarSubmenu.tsx

@@ -84,7 +84,11 @@ const MenubarTrigger = React.forwardRef<HTMLButtonElement, MenubarTriggerProps>(
     const handleMouseEnter = () => {
       if (hasFocus) {
         const items = Array.from(menuItems);
-        const index = items.findIndex((item) => item === ref.current);
+        const index = items.findIndex(
+          (item) =>
+            item ===
+            (ref as React.MutableRefObject<HTMLButtonElement | null>).current
+        );
 
         if (index !== -1) {
           setActiveIndex(index);
@@ -228,7 +232,7 @@ export function MenubarSubmenu({
   const { isOpen, handlers } = useMenuProps(id);
   const [submenuActiveIndex, setSubmenuActiveIndex] = useState(0);
   const { setMenuOpen, toggleMenuOpen } = useContext(MenubarContext);
-  const submenuItems = useRef(new Set()).current;
+  const submenuItems = useRef<Set<HTMLElement>>(new Set()).current;
 
   const buttonRef = useRef(null);
   const listItemRef = useRef(null);

client/components/Menubar/contexts.tsx

@@ -12,12 +12,15 @@ interface MenubarContextType {
 
   // MenubarItem
   createMenuItemHandlers: (id: string) => Record<string, any>;
-  hasFocus?: boolean;
+  hasFocus: boolean;
 
   // MenubarSubmenu
   setActiveIndex: (index: number) => void;
-  menuItems: Set<HTMLElement>;
-  registerTopLevelItem: (ref: unknown, id: string) => void;
+  menuItems: Set<HTMLButtonElement>;
+  registerTopLevelItem: (
+    ref: React.Ref<HTMLButtonElement>,
+    id: string
+  ) => () => void; // returns unregister fn
 }
 
 export const MenubarContext = createContext<MenubarContextType>({
@@ -27,20 +30,18 @@ export const MenubarContext = createContext<MenubarContextType>({
   setMenuOpen: () => {},
   setActiveIndex: () => {},
   hasFocus: false,
-  menuItems: Set<HTMLElement>,
-  registerTopLevelItem(ref: unknown, id: string): void {
-    throw new Error('Function not implemented.');
-  }
+  menuItems: new Set<HTMLButtonElement>(),
+  registerTopLevelItem: () => () => {}
 });
 
 interface SubmenuContextType {
-  submenuItems: Set<HTMLElement>;
+  submenuItems: Set<HTMLLIElement>;
   setSubmenuActiveIndex: (index: number) => void;
-  registerSubmenuItem: (ref: React.RefObject<HTMLElement>) => () => void;
+  registerSubmenuItem: (ref: React.Ref<HTMLLIElement>) => () => void;
   id: string;
   title: string;
-  first: () => {};
-  last: () => {};
+  first: () => void;
+  last: () => void;
 }
 
 export const SubmenuContext = createContext<SubmenuContextType>({
@@ -49,10 +50,6 @@ export const SubmenuContext = createContext<SubmenuContextType>({
   registerSubmenuItem: () => () => {},
   id: '',
   title: '',
-  first(): {} {
-    throw new Error('Function not implemented.');
-  },
-  last(): {} {
-    throw new Error('Function not implemented.');
-  }
+  first: () => {},
+  last: () => {}
 });