chore: Enable recommended React eslint rules (#5600)

app/components/ContextMenu/MenuItem.tsx

@@ -22,6 +22,7 @@ type Props = {
   level?: number;
   icon?: React.ReactElement;
   children?: React.ReactNode;
+  ref?: React.LegacyRef<HTMLButtonElement> | undefined;
 };
 
 const MenuItem = (
@@ -80,7 +81,7 @@ const MenuItem = (
         </MenuAnchor>
       );
     },
-    [active, as, hide, icon, onClick, ref, selected]
+    [active, as, hide, icon, onClick, ref, children, selected]
   );
 
   return (

app/components/ContextMenu/Template.tsx

@@ -44,37 +44,35 @@ type SubMenuProps = MenuStateReturn & {
   title: React.ReactNode;
 };
 
-const SubMenu = React.forwardRef(
-  (
-    { templateItems, title, parentMenuState, ...rest }: SubMenuProps,
-    ref: React.LegacyRef<HTMLButtonElement>
-  ) => {
-    const { t } = useTranslation();
-    const theme = useTheme();
-    const menu = useMenuState();
+const SubMenu = React.forwardRef(function _Template(
+  { templateItems, title, parentMenuState, ...rest }: SubMenuProps,
+  ref: React.LegacyRef<HTMLButtonElement>
+) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const menu = useMenuState();
 
-    return (
-      <>
-        <MenuButton ref={ref} {...menu} {...rest}>
-          {(props) => (
-            <MenuAnchor disclosure {...props}>
-              {title} <Disclosure color={theme.textTertiary} />
-            </MenuAnchor>
-          )}
-        </MenuButton>
-        <ContextMenu
-          {...menu}
-          aria-label={t("Submenu")}
-          onClick={parentMenuState.hide}
-          parentMenuState={parentMenuState}
-        >
-          <MouseSafeArea parentRef={menu.unstable_popoverRef} />
-          <Template {...menu} items={templateItems} />
-        </ContextMenu>
-      </>
-    );
-  }
-);
+  return (
+    <>
+      <MenuButton ref={ref} {...menu} {...rest}>
+        {(props) => (
+          <MenuAnchor disclosure {...props}>
+            {title} <Disclosure color={theme.textTertiary} />
+          </MenuAnchor>
+        )}
+      </MenuButton>
+      <ContextMenu
+        {...menu}
+        aria-label={t("Submenu")}
+        onClick={parentMenuState.hide}
+        parentMenuState={parentMenuState}
+      >
+        <MouseSafeArea parentRef={menu.unstable_popoverRef} />
+        <Template {...menu} items={templateItems} />
+      </ContextMenu>
+    </>
+  );
+});
 
 export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
   return items

app/components/ContextMenu/index.tsx

@@ -46,6 +46,7 @@ type Props = MenuStateReturn & {
   onClose?: () => void;
   /** Called when the context menu is clicked. */
   onClick?: (ev: React.MouseEvent) => void;
+  children?: React.ReactNode;
 };
 
 const ContextMenu: React.FC<Props> = ({
@@ -54,7 +55,7 @@ const ContextMenu: React.FC<Props> = ({
   onClose,
   parentMenuState,
   ...rest
-}) => {
+}: Props) => {
   const previousVisible = usePrevious(rest.visible);
   const maxHeight = useMenuHeight({
     visible: rest.visible,