Menubar: add interface, fix type errors, update context types and update to named export

Author: clairep94

client/components/Menubar/Menubar.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '../../test-utils';
-import Menubar from './Menubar';
+import { Menubar } from './Menubar';
 import MenubarSubmenu from './MenubarSubmenu';
 import MenubarItem from './MenubarItem';
 

client/components/Menubar/Menubar.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, {
   useCallback,
   useMemo,
@@ -14,10 +13,6 @@ import { usePrevious } from '../../common/usePrevious';
  * 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">
@@ -26,16 +21,26 @@ import { usePrevious } from '../../common/usePrevious';
  * </Menubar>
  */
 
-function Menubar({ children, className }) {
-  const [menuOpen, setMenuOpen] = useState('none');
-  const [activeIndex, setActiveIndex] = useState(0);
-  const prevIndex = usePrevious(activeIndex);
-  const [hasFocus, setHasFocus] = useState(false);
+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;
+}
+
+export function Menubar({
+  children,
+  className = 'nav__menubar'
+}: MenubarProps) {
+  const [menuOpen, setMenuOpen] = useState<string>('none');
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+  const prevIndex = usePrevious<number>(activeIndex);
+  const [hasFocus, setHasFocus] = useState<boolean>(false);
 
-  const menuItems = useRef(new Set()).current;
+  const menuItems = useRef<Set<HTMLUListElement>>(new Set()).current;
   const menuItemToId = useRef(new Map()).current;
 
-  const timerRef = useRef(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const getMenuId = useCallback(
     (index) => {
@@ -85,7 +90,7 @@ function Menubar({ children, className }) {
 
   const toggleMenuOpen = useCallback((id) => {
     setMenuOpen((prevState) => (prevState === id ? 'none' : id));
-  });
+  }, []);
 
   const registerTopLevelItem = useCallback(
     (ref, submenuId) => {
@@ -105,7 +110,7 @@ function Menubar({ children, className }) {
   );
 
   const clearHideTimeout = useCallback(() => {
-    if (timerRef.current) {
+    if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
@@ -116,7 +121,7 @@ function Menubar({ children, className }) {
     setMenuOpen('none');
   }, [setMenuOpen]);
 
-  const nodeRef = useModalClose(handleClose);
+  const nodeRef = useModalClose<HTMLUListElement>(handleClose);
 
   const handleFocus = useCallback(() => {
     setHasFocus(true);
@@ -138,7 +143,7 @@ function Menubar({ children, className }) {
     [nodeRef]
   );
 
-  const keyHandlers = {
+  const keyHandlers: Record<string, (e: React.KeyboardEvent) => void> = {
     ArrowLeft: (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -173,8 +178,11 @@ function Menubar({ children, className }) {
   useEffect(() => {
     if (activeIndex !== prevIndex) {
       const items = Array.from(menuItems);
+      const prevNode =
+        prevIndex != null /** check against undefined or null */
+          ? items[prevIndex]
+          : undefined;
       const activeNode = items[activeIndex];
-      const prevNode = items[prevIndex];
 
       prevNode?.setAttribute('tabindex', '-1');
       activeNode?.setAttribute('tabindex', '0');
@@ -191,7 +199,7 @@ function Menubar({ children, className }) {
 
   const contextValue = useMemo(
     () => ({
-      createMenuHandlers: (menu) => ({
+      createMenuHandlers: (menu: string) => ({
         onMouseOver: () => {
           setMenuOpen((prevState) => (prevState === 'none' ? 'none' : menu));
         },
@@ -210,8 +218,8 @@ function Menubar({ children, className }) {
         onBlur: handleBlur,
         onFocus: clearHideTimeout
       }),
-      createMenuItemHandlers: (menu) => ({
-        onMouseUp: (e) => {
+      createMenuItemHandlers: (menu: string) => ({
+        onMouseUp: (e: React.MouseEvent) => {
           if (e.button === 2) {
             return;
           }
@@ -278,15 +286,3 @@ function Menubar({ children, className }) {
     </MenubarContext.Provider>
   );
 }
-
-Menubar.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-Menubar.defaultProps = {
-  children: null,
-  className: 'nav__menubar'
-};
-
-export default Menubar;

client/components/Menubar/contexts.tsx

@@ -1,12 +1,40 @@
-import { createContext } from 'react';
+import React, { createContext } from 'react';
 
-export const ParentMenuContext = createContext('none');
+export const ParentMenuContext = createContext<string>('none');
 
-export const MenuOpenContext = createContext('none');
+export const MenuOpenContext = createContext<string>('none');
 
-export const MenubarContext = createContext({
-  createMenuHandlers: () => ({}),
-  createMenuItemHandlers: () => ({}),
+interface MenubarContextType {
+  createMenuHandlers: (
+    id: string
+  ) => {
+    onMouseOver: (e: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
+    onBlur: (e: React.FocusEvent) => void;
+    onFocus: (e: React.FocusEvent) => void;
+  };
+  createMenuItemHandlers: (
+    id: string
+  ) => {
+    onMouseUp: (e: React.MouseEvent) => void;
+    onBlur: (e: React.FocusEvent) => void;
+    onFocus: (e: React.FocusEvent) => void;
+  };
+  toggleMenuOpen: (id: string) => void;
+}
+
+export const MenubarContext = createContext<MenubarContextType>({
+  createMenuHandlers: () => ({
+    onMouseOver: () => {},
+    onClick: () => {},
+    onBlur: () => {},
+    onFocus: () => {}
+  }),
+  createMenuItemHandlers: () => ({
+    onMouseUp: () => {},
+    onBlur: () => {},
+    onFocus: () => {}
+  }),
   toggleMenuOpen: () => {}
 });
 

client/modules/IDE/components/Header/MobileNav.jsx

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import { sortBy } from 'lodash';
 import classNames from 'classnames';
 import { ParentMenuContext } from '../../../../components/Menubar/contexts';
-import Menubar from '../../../../components/Menubar/Menubar';
+import { Menubar } from '../../../../components/Menubar/Menubar';
 import { useMenuProps } from '../../../../components/Menubar/MenubarSubmenu';
 import { ButtonOrLink } from '../../../../common/ButtonOrLink';
 import { prop, remSize } from '../../../../theme';

client/modules/IDE/components/Header/Nav.jsx

@@ -11,7 +11,7 @@ import { getConfig } from '../../../../utils/getConfig';
 import { parseBoolean } from '../../../../utils/parseStringToType';
 import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
-import Menubar from '../../../../components/Menubar/Menubar';
+import { Menubar } from '../../../../components/Menubar/Menubar';
 import CaretLeftIcon from '../../../../images/left-arrow.svg';
 import LogoIcon from '../../../../images/p5js-logo-small.svg';
 import { selectRootFile } from '../../selectors/files';

client/modules/IDE/components/Header/Nav.unit.test.jsx

@@ -7,17 +7,13 @@ import Nav from './Nav';
 jest.mock('../../../../utils/generateRandomName');
 
 // mock Menubar
-jest.mock(
-  '../../../../components/Menubar/Menubar',
-  () =>
-    function Menubar({ children, className = 'nav__menubar' }) {
-      return (
-        <ul className={className} role="menubar">
-          {children}
-        </ul>
-      );
-    }
-);
+jest.mock('../../../../components/Menubar/Menubar', () => ({
+  Menubar: ({ children, className = 'nav__menubar' }) => (
+    <ul className={className} role="menubar">
+      {children}
+    </ul>
+  )
+}));
 
 // mock MenubarSubmenu
 jest.mock('../../../../components/Menubar/MenubarSubmenu', () => {