feat(menu): Provide props for Menu's List

mlaursen · Mar 12, 2022 · 2b5fb23 · 2b5fb23
1 parent 47ccc1d
commit 2b5fb23
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 13 deletions.
diff --git a/packages/menu/src/DropdownMenu.tsx b/packages/menu/src/DropdownMenu.tsx
@@ -100,6 +100,9 @@ export function DropdownMenu({
   renderAsSheet: propRenderAsSheet,
   sheetPosition: propSheetPosition,
   sheetVerticalSize: propSheetVerticalSize,
+  listStyle,
+  listClassName,
+  listProps,
   appear,
   enter,
   exit,
@@ -253,6 +256,9 @@ export function DropdownMenu({
         sheetFooter={sheetFooter}
         sheetPosition={sheetPosition}
         sheetVerticalSize={sheetVerticalSize}
+        listStyle={listStyle}
+        listClassName={listClassName}
+        listProps={listProps}
         onRequestClose={() => setVisible(false)}
         horizontal={horizontal}
         renderAsSheet={renderAsSheet}

diff --git a/packages/menu/src/Menu.tsx b/packages/menu/src/Menu.tsx
@@ -19,6 +19,9 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
   function Menu(
     {
       className,
+      listStyle,
+      listClassName,
+      listProps,
       visible,
       temporary = true,
       horizontal = false,
@@ -75,8 +78,13 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
               horizontal={horizontal}
             >
               <List
+                {...listProps}
+                style={listStyle ?? listProps?.style}
+                className={listClassName ?? listProps?.className}
                 horizontal={horizontal}
                 onClick={(event) => {
+                  listProps?.onClick?.(event);
+
                   // this makes it so you can click on the menu/list without
                   // closing the menu
                   if (event.target === event.currentTarget) {

diff --git a/packages/menu/src/MenuRenderer.tsx b/packages/menu/src/MenuRenderer.tsx
@@ -9,6 +9,7 @@ import {
 import { MenuSheet } from "./MenuSheet";
 import type {
   BaseMenuRendererProps,
+  MenuListProps,
   MenuTransitionProps,
   ProvidedMenuProps,
 } from "./types";
@@ -19,6 +20,7 @@ import type {
  */
 export type MenuRendererProps = ProvidedMenuProps &
   BaseMenuRendererProps &
+  MenuListProps &
   MenuTransitionProps & {
     menuRef: Ref<HTMLDivElement>;
     visible: boolean;

diff --git a/packages/menu/src/MenuSheet.tsx b/packages/menu/src/MenuSheet.tsx
@@ -12,13 +12,14 @@ import { useOnUnmount } from "@react-md/utils";
 
 import { MenuKeyboardFocusProvider } from "./MenuKeyboardFocusProvider";
 import { MenuWidget } from "./MenuWidget";
-import type { MenuOrientationProps } from "./types";
+import type { MenuListProps, MenuOrientationProps } from "./types";
 
 /** @remarks \@since 5.0.0 */
 export interface MenuSheetProps
   extends BaseSheetProps,
     KeyboardFocusHookOptions<HTMLDivElement>,
-    MenuOrientationProps {
+    MenuOrientationProps,
+    MenuListProps {
   /** {@inheritDoc MenuConfiguration.sheetHeader} */
   header?: ReactNode;
   /** {@inheritDoc MenuConfiguration.sheetFooter} */
@@ -56,6 +57,9 @@ export function MenuSheet({
   horizontal,
   menuRef,
   menuProps,
+  listStyle,
+  listClassName,
+  listProps,
   position = "bottom",
   verticalSize = "touch",
   onClick,
@@ -141,9 +145,14 @@ export function MenuSheet({
           disableElevation
         >
           <List
+            {...listProps}
+            style={listStyle ?? listProps?.style}
+            className={listClassName ?? listProps?.className}
             ref={listRef}
             horizontal={horizontal}
             onClick={(event) => {
+              listProps?.onClick?.(event);
+
               // this makes it so you can click on the menu/list without
               // closing the menu
               if (event.target === event.currentTarget) {

diff --git a/packages/menu/src/types.ts b/packages/menu/src/types.ts
@@ -1,6 +1,6 @@
 import type { ButtonProps } from "@react-md/button";
 import type { IconRotatorProps, TextIconSpacingProps } from "@react-md/icon";
-import type { ListItemProps } from "@react-md/list";
+import type { ListElement, ListItemProps, ListProps } from "@react-md/list";
 import type { RenderConditionalPortalProps } from "@react-md/portal";
 import type {
   SheetPosition,
@@ -17,6 +17,7 @@ import type {
   KeyboardFocusHookOptions,
   LabelA11y,
   PositionAnchor,
+  PropsWithRef,
   RequireAtLeastOne,
 } from "@react-md/utils";
 import type {
@@ -122,7 +123,8 @@ export interface MenuWidgetProps
 export interface MenuProps
   extends RenderConditionalPortalProps,
     MenuTransitionProps,
-    MenuWidgetProps {
+    MenuWidgetProps,
+    MenuListProps {
   /**
    * Boolean if the menu is currently visible.
    */
@@ -405,6 +407,29 @@ export interface BaseMenuButtonProps
   >;
 }
 
+/** @remarks \@since 5.1.0 */
+export interface MenuListProps {
+  /**
+   * An optional style to provide to the `List` component that surrounds the
+   * `MenuItem` within a `Menu`.
+   */
+  listStyle?: CSSProperties;
+
+  /**
+   * An optional className to provide to the `List` component that surrounds the
+   * `MenuItem` within a `Menu`.
+   */
+  listClassName?: string;
+
+  /**
+   * Any additional props to pass to the `List` component that surrounds the
+   * `Menu`'s `MenuItem`s.
+   */
+  listProps?: Readonly<
+    PropsWithRef<Omit<ListProps, "horizontal">, ListElement>
+  >;
+}
+
 /** @remarks \@since 5.0.0 */
 export interface BaseMenuRendererProps
   extends RenderConditionalPortalProps,
@@ -415,9 +440,7 @@ export interface BaseMenuRendererProps
    * Note: use the {@link menuStyle} and {@link menuClassName} props instead of
    * including `style` or `className` here.
    */
-  menuProps?: Readonly<
-    Omit<MenuWidgetProps, "id" | "style" | "className" | "children">
-  >;
+  menuProps?: Readonly<Omit<MenuWidgetProps, "id" | "children">>;
 
   /**
    * An optional style object that should be merged with the menu's fixed
@@ -437,10 +460,7 @@ export interface BaseMenuRendererProps
    * of including `style` or `className` here.
    */
   sheetProps?: Readonly<
-    Omit<
-      SheetProps,
-      "style" | "className" | "onRequestClose" | "children" | "id" | "visible"
-    >
+    Omit<SheetProps, "id" | "visible" | "onRequestClose" | "children">
   >;
 
   /**
@@ -470,7 +490,8 @@ export interface BaseDropdownMenuProps
 export interface DropdownMenuButtonProps
   extends BaseMenuButtonProps,
     BaseDropdownMenuProps,
-    MenuButtonTextIconSpacingProps {
+    MenuButtonTextIconSpacingProps,
+    MenuListProps {
   /**
    * The children to display in the button. This should normally be text or an
    * icon.
@@ -533,7 +554,8 @@ export interface BaseMenuItemButtonProps extends MenuItemProps {
 /** @remarks \@since 5.0.0 */
 export interface DropdownMenuItemProps
   extends BaseDropdownMenuProps,
-    BaseMenuItemButtonProps {
+    BaseMenuItemButtonProps,
+    MenuListProps {
   /**
    * The children to display in the menuitem acting as a button.
    */