MenubarItem: add interface, update to named export, update submenu context

Author: clairep94

client/components/Menubar/Menubar.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen, fireEvent } from '../../test-utils';
 import { Menubar } from './Menubar';
 import MenubarSubmenu from './MenubarSubmenu';
-import MenubarItem from './MenubarItem';
+import { MenubarItem } from './MenubarItem';
 
 describe('Menubar', () => {
   const renderMenubar = () => {

client/components/Menubar/MenubarItem.tsx

@@ -1,7 +1,19 @@
-import PropTypes from 'prop-types';
 import React, { useEffect, useContext, useRef } from 'react';
 import { MenubarContext, SubmenuContext, ParentMenuContext } from './contexts';
-import { ButtonOrLink } from '../../common/ButtonOrLink';
+import { ButtonOrLink, ButtonOrLinkProps } from '../../common/ButtonOrLink';
+
+export enum MenubarItemRole {
+  MENU_ITEM = 'menuitem',
+  OPTION = 'option'
+}
+
+export interface MenubarItemProps extends Omit<ButtonOrLinkProps, 'role'> {
+  /**
+   * Provides a way to deal with optional items.
+   */
+  role?: MenubarItemRole;
+  selected?: boolean;
+}
 
 /**
  * MenubarItem wraps a button or link in an accessible list item that
@@ -36,14 +48,14 @@ import { ButtonOrLink } from '../../common/ButtonOrLink';
  * </MenubarItem>
  */
 
-function MenubarItem({
-  className,
+export function MenubarItem({
+  className = 'nav__dropdown-item',
   id,
-  role: customRole,
-  isDisabled,
-  selected,
+  role: customRole = MenubarItemRole.MENU_ITEM,
+  isDisabled = false,
+  selected = false,
   ...rest
-}) {
+}: MenubarItemProps) {
   const { createMenuItemHandlers, hasFocus } = useContext(MenubarContext);
   const {
     setSubmenuActiveIndex,
@@ -94,25 +106,3 @@ function MenubarItem({
     </li>
   );
 }
-
-MenubarItem.propTypes = {
-  ...ButtonOrLink.propTypes,
-  className: PropTypes.string,
-  id: PropTypes.string,
-  /**
-   * Provides a way to deal with optional items.
-   */
-  role: PropTypes.oneOf(['menuitem', 'option']),
-  isDisabled: PropTypes.bool,
-  selected: PropTypes.bool
-};
-
-MenubarItem.defaultProps = {
-  className: 'nav__dropdown-item',
-  id: undefined,
-  role: 'menuitem',
-  isDisabled: false,
-  selected: false
-};
-
-export default MenubarItem;

client/components/Menubar/contexts.tsx

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react';
+import React, { createContext, RefObject } from 'react';
 
 export const ParentMenuContext = createContext<string>('none');
 
@@ -21,6 +21,7 @@ interface MenubarContextType {
     onFocus: (e: React.FocusEvent) => void;
   };
   toggleMenuOpen: (id: string) => void;
+  hasFocus: boolean;
 }
 
 export const MenubarContext = createContext<MenubarContextType>({
@@ -35,7 +36,18 @@ export const MenubarContext = createContext<MenubarContextType>({
     onBlur: () => {},
     onFocus: () => {}
   }),
-  toggleMenuOpen: () => {}
+  toggleMenuOpen: () => {},
+  hasFocus: false
 });
 
-export const SubmenuContext = createContext({});
+export interface SubmenuContextType {
+  submenuItems: Set<RefObject<HTMLElement>>;
+  setSubmenuActiveIndex: (index: number) => void;
+  registerSubmenuItem: (ref: RefObject<HTMLElement>) => () => void;
+}
+
+export const SubmenuContext = createContext<SubmenuContextType>({
+  submenuItems: new Set(),
+  setSubmenuActiveIndex: () => {},
+  registerSubmenuItem: () => () => {}
+});

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

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import MenubarSubmenu from '../../../../components/Menubar/MenubarSubmenu';
-import MenubarItem from '../../../../components/Menubar/MenubarItem';
+import { MenubarItem } from '../../../../components/Menubar/MenubarItem';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
 import { getConfig } from '../../../../utils/getConfig';
 import { parseBoolean } from '../../../../utils/parseStringToType';

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

@@ -37,15 +37,12 @@ jest.mock('../../../../components/Menubar/MenubarSubmenu', () => {
 });
 
 // mock MenubarItem
-jest.mock(
-  '../../../../components/Menubar/MenubarItem',
-  () =>
-    function MenubarItem({ children, hideIf }) {
-      if (hideIf) return null;
-
-      return <li>{children}</li>;
-    }
-);
+jest.mock('../../../../components/Menubar/MenubarItem', () => ({
+  MenubarItem: ({ children, hideIf }) => {
+    if (hideIf) return null;
+    return <li>{children}</li>;
+  }
+}));
 
 describe('Nav', () => {
   it('renders editor version for desktop', () => {