better-mui-menu 1.5.0 → 1.5.2

package/README.md

@@ -80,14 +80,17 @@ export function FileMenu() {
 }
 ```
 
-## Items shape
-
-`MenuItem` extends `@mui/material/MenuItemProps` (excluding `children`) so you can still pass `dense`, `disabled`, `aria-selected`, etc.
-The `better-mui-menu` adds:
-
-- `type?: 'item' | 'divider'` – render a `Divider` when `'divider'` is supplied.
-- `id?: string` – optional stable ID for ARIA attributes; one is generated automatically otherwise.
-- `label: ReactNode` – the label shown in the menu row.
-- `startIcon` / `endIcon` – pass either a `SvgIconComponent` (for example `Save`) or a JSX element (for example `<Save fontSize='large' sx={{ ml: 0.5 }} />`).
-- `items?: MenuItem[]` – nested entries that render as submenus.
-- `onClick?: MenuItemProps['onClick']` – callback function when the menu item is clicked.
+## MenuItem Reference
+
+`MenuItem` extends `@mui/material/MenuItemProps` (excluding `children`) so you can still pass `disabled`, `sx`, `aria-*`, `data-*`, etc.
+
+| Field | Applies to | Type / values | Required | Default | Notes |
+| --- | --- | --- | --- | --- | --- |
+| `type` | all entries | `'item' \| 'divider' \| 'header'` | no | `'item'` | Use `'divider'` for separators, `'header'` for section labels. |
+| `id` | `'item'` | string | no | auto-generated | Used for stable ARIA/menu item IDs. |
+| `label` | `'item'`, `'header'` | text or JSX | yes (`'item'`, `'header'`) | none | Not used for `'divider'`. |
+| `startIcon` | `'item'` | MUI Icon or JSX | no | none | Example: `Save` or `<Save fontSize='small' />`. |
+| `endIcon` | `'item'` | MUI Icon or JSX | no | none | For submenu triggers, a right-arrow icon is shown when omitted. |
+| `items` | `'item'` | `MenuItem[]` | no | none | If present and non-empty, renders a nested submenu. |
+| `onClick` | `'item'` | function | no | none | Runs on leaf item click; menu stack closes afterward. |
+| `...MenuItemProps` | `'item'` | MUI `MenuItem` props (except `children`, `type`) | no | MUI defaults | Example: `disabled`, `dense`, `selected`, `data-*`. |

package/dist/index.cjs

@@ -42,6 +42,8 @@ var ArrowRight_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, imp
 
 // src/Menu/NestedMenuItem.tsx
 var import_material3 = require("@mui/material");
+var import_Menu = require("@mui/material/Menu");
+var import_styles = require("@mui/material/styles");
 
 // src/Menu/MenuEntry.tsx
 var import_react = require("react");
@@ -83,6 +85,16 @@ var MenuEntry = (0, import_react.forwardRef)(function MenuEntry2({ label, startI
 // src/Menu/NestedMenuItem.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var isNodeInstance = (target) => target instanceof Node;
+var SubMenuPaper = (0, import_styles.styled)(import_material3.Paper, {
+  name: "MuiMenu",
+  slot: "Paper",
+  overridesResolver: (_, styles) => styles.paper
+})({});
+var SubMenuList = (0, import_styles.styled)(import_material3.MenuList, {
+  name: "MuiMenu",
+  slot: "List",
+  overridesResolver: (_, styles) => styles.list
+})({});
 var NestedMenuItem = (props) => {
   const {
     id: providedId,
@@ -206,6 +218,10 @@ var NestedMenuItem = (props) => {
     });
   };
   const renderedSubMenuItems = items && items.length > 0 ? renderItemsFromData() : renderChildren;
+  const subMenuPaperProps = menuProps?.slotProps?.paper || {};
+  const { className: subMenuPaperClassName, ...subMenuPaperRestProps } = subMenuPaperProps;
+  const subMenuListProps = menuProps?.slotProps?.list || {};
+  const { className: subMenuListClassName, ...subMenuListRestProps } = subMenuListProps;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       MenuEntry,
@@ -223,9 +239,12 @@ var NestedMenuItem = (props) => {
           if (e.key === "ArrowLeft") {
             handleClose();
           }
-          if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
+          if (e.key === "ArrowRight" || e.key === "Enter") {
             handleOpen(e);
           }
+          if ((e.key === "ArrowUp" || e.key === "ArrowDown") && open && document.activeElement === menuItemRef.current) {
+            handleClose();
+          }
         },
         "aria-haspopup": "menu",
         "aria-controls": subMenuId,
@@ -262,34 +281,44 @@ var NestedMenuItem = (props) => {
           if (isNodeInstance(e.relatedTarget) && menuItemRef.current?.contains(e.relatedTarget)) return;
           scheduleClose();
         },
-        children: ({ TransitionProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Fade, { ...TransitionProps, timeout: transitionConfig.timeout, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Paper, { elevation: menuProps.elevation, sx: { overflow: "auto" }, ...menuProps?.slotProps?.paper || {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_material3.MenuList,
+        children: ({ TransitionProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Fade, { ...TransitionProps, timeout: transitionConfig.timeout, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          SubMenuPaper,
           {
-            id: subMenuId,
-            "aria-labelledby": menuItemId,
-            role: "menu",
-            ...menuProps?.slotProps?.list || {},
-            autoFocusItem: true,
-            onKeyDown: (e) => {
-              if (e.key === "ArrowLeft") {
-                const { nativeEvent } = e;
-                if (nativeEvent.__nestedMenuArrowLeftHandled) {
-                  return;
-                }
-                if (!subMenuRef.current?.contains(e.target)) {
-                  return;
-                }
-                nativeEvent.__nestedMenuArrowLeftHandled = true;
-                e.preventDefault();
-                e.stopPropagation();
-                nativeEvent.stopImmediatePropagation();
-                handleClose();
-                menuItemRef.current?.focus();
+            elevation: menuProps.elevation,
+            className: [import_Menu.menuClasses.paper, subMenuPaperClassName].filter(Boolean).join(" "),
+            sx: { overflow: "auto" },
+            ...subMenuPaperRestProps,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              SubMenuList,
+              {
+                id: subMenuId,
+                "aria-labelledby": menuItemId,
+                role: "menu",
+                className: [import_Menu.menuClasses.list, subMenuListClassName].filter(Boolean).join(" "),
+                ...subMenuListRestProps,
+                autoFocusItem: true,
+                onKeyDown: (e) => {
+                  if (e.key === "ArrowLeft") {
+                    const { nativeEvent } = e;
+                    if (nativeEvent.__nestedMenuArrowLeftHandled) {
+                      return;
+                    }
+                    if (!subMenuRef.current?.contains(e.target)) {
+                      return;
+                    }
+                    nativeEvent.__nestedMenuArrowLeftHandled = true;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    nativeEvent.stopImmediatePropagation();
+                    handleClose();
+                    menuItemRef.current?.focus();
+                  }
+                },
+                children: renderedSubMenuItems
               }
-            },
-            children: renderedSubMenuItems
+            )
           }
-        ) }) })
+        ) })
       }
     )
   ] });

package/dist/index.js

@@ -16,6 +16,8 @@ var ArrowRight_default = createSvgIcon(/* @__PURE__ */ _jsx("path", {
 
 // src/Menu/NestedMenuItem.tsx
 import { Divider, Fade as Fade2, ListSubheader, MenuItem as MuiMenuItem2, MenuList, Paper, Popper } from "@mui/material";
+import { menuClasses } from "@mui/material/Menu";
+import { styled as styled2 } from "@mui/material/styles";
 
 // src/Menu/MenuEntry.tsx
 import { forwardRef, isValidElement } from "react";
@@ -57,6 +59,16 @@ var MenuEntry = forwardRef(function MenuEntry2({ label, startIcon, endIcon, onCl
 // src/Menu/NestedMenuItem.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var isNodeInstance = (target) => target instanceof Node;
+var SubMenuPaper = styled2(Paper, {
+  name: "MuiMenu",
+  slot: "Paper",
+  overridesResolver: (_, styles) => styles.paper
+})({});
+var SubMenuList = styled2(MenuList, {
+  name: "MuiMenu",
+  slot: "List",
+  overridesResolver: (_, styles) => styles.list
+})({});
 var NestedMenuItem = (props) => {
   const {
     id: providedId,
@@ -180,6 +192,10 @@ var NestedMenuItem = (props) => {
     });
   };
   const renderedSubMenuItems = items && items.length > 0 ? renderItemsFromData() : renderChildren;
+  const subMenuPaperProps = menuProps?.slotProps?.paper || {};
+  const { className: subMenuPaperClassName, ...subMenuPaperRestProps } = subMenuPaperProps;
+  const subMenuListProps = menuProps?.slotProps?.list || {};
+  const { className: subMenuListClassName, ...subMenuListRestProps } = subMenuListProps;
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(
       MenuEntry,
@@ -197,9 +213,12 @@ var NestedMenuItem = (props) => {
           if (e.key === "ArrowLeft") {
             handleClose();
           }
-          if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
+          if (e.key === "ArrowRight" || e.key === "Enter") {
             handleOpen(e);
           }
+          if ((e.key === "ArrowUp" || e.key === "ArrowDown") && open && document.activeElement === menuItemRef.current) {
+            handleClose();
+          }
         },
         "aria-haspopup": "menu",
         "aria-controls": subMenuId,
@@ -236,34 +255,44 @@ var NestedMenuItem = (props) => {
           if (isNodeInstance(e.relatedTarget) && menuItemRef.current?.contains(e.relatedTarget)) return;
           scheduleClose();
         },
-        children: ({ TransitionProps }) => /* @__PURE__ */ jsx2(Fade2, { ...TransitionProps, timeout: transitionConfig.timeout, children: /* @__PURE__ */ jsx2(Paper, { elevation: menuProps.elevation, sx: { overflow: "auto" }, ...menuProps?.slotProps?.paper || {}, children: /* @__PURE__ */ jsx2(
-          MenuList,
+        children: ({ TransitionProps }) => /* @__PURE__ */ jsx2(Fade2, { ...TransitionProps, timeout: transitionConfig.timeout, children: /* @__PURE__ */ jsx2(
+          SubMenuPaper,
           {
-            id: subMenuId,
-            "aria-labelledby": menuItemId,
-            role: "menu",
-            ...menuProps?.slotProps?.list || {},
-            autoFocusItem: true,
-            onKeyDown: (e) => {
-              if (e.key === "ArrowLeft") {
-                const { nativeEvent } = e;
-                if (nativeEvent.__nestedMenuArrowLeftHandled) {
-                  return;
-                }
-                if (!subMenuRef.current?.contains(e.target)) {
-                  return;
-                }
-                nativeEvent.__nestedMenuArrowLeftHandled = true;
-                e.preventDefault();
-                e.stopPropagation();
-                nativeEvent.stopImmediatePropagation();
-                handleClose();
-                menuItemRef.current?.focus();
+            elevation: menuProps.elevation,
+            className: [menuClasses.paper, subMenuPaperClassName].filter(Boolean).join(" "),
+            sx: { overflow: "auto" },
+            ...subMenuPaperRestProps,
+            children: /* @__PURE__ */ jsx2(
+              SubMenuList,
+              {
+                id: subMenuId,
+                "aria-labelledby": menuItemId,
+                role: "menu",
+                className: [menuClasses.list, subMenuListClassName].filter(Boolean).join(" "),
+                ...subMenuListRestProps,
+                autoFocusItem: true,
+                onKeyDown: (e) => {
+                  if (e.key === "ArrowLeft") {
+                    const { nativeEvent } = e;
+                    if (nativeEvent.__nestedMenuArrowLeftHandled) {
+                      return;
+                    }
+                    if (!subMenuRef.current?.contains(e.target)) {
+                      return;
+                    }
+                    nativeEvent.__nestedMenuArrowLeftHandled = true;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    nativeEvent.stopImmediatePropagation();
+                    handleClose();
+                    menuItemRef.current?.focus();
+                  }
+                },
+                children: renderedSubMenuItems
               }
-            },
-            children: renderedSubMenuItems
+            )
           }
-        ) }) })
+        ) })
       }
     )
   ] });

package/package.json

@@ -9,7 +9,7 @@
   "bugs": {
     "url": "https://github.com/eggei/better-mui-menu/issues"
   },
-  "version": "1.5.0",
+  "version": "1.5.2",
   "type": "module",
   "sideEffects": false,
   "files": [