LG-5477: Updates Menu Props (#3129)

* updates Menu Props

* fix bug

* rm any

* update menu

* fix ts issues

* with updated changeset

Author: bruugey

.changeset/three-toys-count.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/menu': patch
+---
+
+Improves MenuProps types to extend `React.ComponentProps<'ul'>`

packages/menu/src/Menu.spec.tsx

@@ -105,7 +105,6 @@ describe('packages/menu', () => {
     test('respects custom testid', async () => {
       const customTestId = 'custom-menu-test-id';
       const { getByTestId } = renderMenu({
-        // @ts-expect-error - data-testid is not a valid prop for MenuProps FIXME: LG-5477
         'data-testid': customTestId,
         initialOpen: true,
       });
@@ -639,4 +638,16 @@ describe('packages/menu', () => {
       });
     });
   });
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  describe.skip('Types work as expected', () => {
+    test('Types work as expected', () => {
+      render(
+        <Menu data-testid="menu">
+          <MenuItem>Item</MenuItem>
+          <MenuItem>Item</MenuItem>
+        </Menu>,
+      );
+    });
+  });
 });

packages/menu/src/Menu/Menu.tsx

@@ -70,6 +70,7 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(
     darkMode: darkModeProp,
     renderDarkMenu = true,
     'data-lgid': dataLgId,
+    'data-testid': dataTestId,
     children,
     className,
     refEl,
@@ -81,6 +82,8 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(
     portalRef,
     scrollContainer,
     popoverZIndex,
+    // Extract only ul-appropriate props from rest
+    id,
     ...rest
   }: MenuProps,
   forwardRef,
@@ -264,12 +267,13 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(
             {/* Need to stop propagation, otherwise Menu will closed automatically when clicked */}
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events*/}
             <ul
-              data-testid={lgIds.root}
-              {...rest}
+              data-testid={dataTestId || lgIds.root}
+              id={id}
               data-lgid={lgIds.root}
               className={scrollContainerStyle}
               role="menu"
               onClick={e => e.stopPropagation()}
+              {...rest}
             >
               {children}
             </ul>

packages/menu/src/Menu/Menu.types.ts

@@ -20,14 +20,20 @@ export const MenuVariant = {
 export type MenuVariant = (typeof MenuVariant)[keyof typeof MenuVariant];
 
 export interface MenuProps
-  extends Omit<PopoverProps, 'active' | 'dismissMode' | 'onToggle'>,
+  extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick'>,
+    Omit<PopoverProps, 'active' | 'dismissMode' | 'onToggle'>,
     LgIdProps {
   /**
    * The menu items, or submenus
    * @type `<MenuItem />` | `<SubMenu />` | `<MenuGroup />` | `<MenuSeparator />`
    */
   children: ReactNode;
 
+  /**
+   * Test id for the menu element
+   */
+  'data-testid'?: string;
+
   /**
    * A slot for the element used to trigger the Menu. Passing a trigger allows
    * Menu to control opening and closing itself internally.