fix(menu): fixed DropdownMenu not being able to provide style and className to Menu

Closes #989

Author: mlaursen

packages/menu/src/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { CSSProperties, forwardRef } from "react";
 import { useIcon } from "@react-md/icon";
 import { RenderConditionalPortalProps } from "@react-md/portal";
 
@@ -38,6 +38,16 @@ export interface BaseDropdownMenuProps
    */
   menuLabelledBy?: string;
 
+  /**
+   * An optional style object to pass to the `menuRenderer`/`Menu` component.
+   */
+  menuStyle?: CSSProperties;
+
+  /**
+   * An optional className to pass to the `menuRenderer`/`Menu` component.
+   */
+  menuClassName?: string;
+
   /**
    * A custom menu renderer to use. This defaults to just rendering the `Menu`
    * component with the base required props and a generated id from the button
@@ -82,6 +92,8 @@ export const DropdownMenu = forwardRef<HTMLButtonElement, DropdownMenuProps>(
       anchor,
       menuLabel,
       menuLabelledBy,
+      menuStyle,
+      menuClassName,
       menuRenderer = defaultMenuRenderer,
       items,
       itemRenderer = defaultMenuItemRenderer,
@@ -143,6 +155,8 @@ export const DropdownMenu = forwardRef<HTMLButtonElement, DropdownMenuProps>(
             "aria-labelledby": labelledBy as string,
             id: `${id}-menu`,
             controlId: id,
+            style: menuStyle,
+            className: menuClassName,
             anchor,
             positionOptions,
             closeOnScroll,

packages/menu/src/Menu.tsx

@@ -150,6 +150,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
     role = "menu",
     tabIndex = -1,
     controlId,
+    style: propStyle,
     className,
     visible,
     onRequestClose,
@@ -263,7 +264,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
           ref={ref}
           role={role}
           tabIndex={tabIndex}
-          style={style}
+          style={{ ...propStyle, ...style }}
           className={cn(block({ horizontal }), className)}
           onClick={onClick}
           onKeyDown={onKeyDown}

packages/menu/src/__tests__/DropdownMenu.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import React from "react";
+import React, { CSSProperties } from "react";
 import { fireEvent, render } from "@testing-library/react";
 
 import { DropdownMenu } from "../DropdownMenu";
@@ -56,4 +56,24 @@ describe("DropdownMenu", () => {
     rerender(<DropdownMenu {...PROPS} items={items4} />);
     expect(container).toMatchSnapshot();
   });
+
+  it("should pass the menuStyle and menuClassName props to the menu correctly", () => {
+    const menuStyle: CSSProperties = { color: "red" };
+    const menuClassName = "my-custom-class-name";
+    const { getByRole } = render(
+      <DropdownMenu
+        {...PROPS}
+        menuStyle={menuStyle}
+        menuClassName={menuClassName}
+        items={["Item 1", "Item 2", "Item 3"]}
+      />
+    );
+
+    const button = getByRole("button");
+    fireEvent.click(button);
+
+    const menu = getByRole("menu");
+    expect(menu.style.color).toBe(menuStyle.color);
+    expect(menu.className).toContain(menuClassName);
+  });
 });

packages/menu/src/defaultMenuRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from "react";
+import React, { CSSProperties, ReactElement, ReactNode } from "react";
 import { List } from "@react-md/list";
 import { RenderConditionalPortalProps } from "@react-md/portal";
 import { LabelRequiredForA11y } from "@react-md/utils";
@@ -33,6 +33,8 @@ export interface AllInjectedMenuProps
     RenderConditionalPortalProps {
   "aria-label"?: string;
   "aria-labelledby"?: string;
+  style?: CSSProperties;
+  className?: string;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 }