better-mui-menu 1.4.1 → 1.5.1

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

@@ -155,6 +155,9 @@ var NestedMenuItem = (props) => {
       if (item.type === "divider") {
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Divider, {}, `divider-${index}`);
       }
+      if (item.type === "header") {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.ListSubheader, { children: item.label }, `header-${index}`);
+      }
       const {
         type: __,
         items: entryItems,
@@ -301,6 +304,9 @@ function Menu({ items, elevation = DEFAULT_ELEVATION, ...rest }) {
     if (item.type === "divider") {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Divider, {}, `divider-${index}`);
     }
+    if (item.type === "header") {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.ListSubheader, { children: item.label }, `header-${index}`);
+    }
     const {
       type: _,
       id,

package/dist/index.d.cts

@@ -4,20 +4,25 @@ import React, { ReactNode, ReactElement } from 'react';
 import { SvgIconComponent } from '@mui/icons-material';
 
 type MenuIcon = SvgIconComponent | ReactElement;
-type MenuItemBase = {
+type DataAttributes = {
+    [K in `data-${string}`]?: string | number | boolean | undefined;
+};
+type MenuDividerItem = {
     type: 'divider';
-} | {
+} & DataAttributes;
+type MenuHeaderItem = {
+    type: 'header';
+    label: ReactNode;
+} & DataAttributes;
+type MenuActionItem = {
     type?: 'item';
     id?: string;
     label: ReactNode;
     startIcon?: MenuIcon;
     endIcon?: MenuIcon;
     items?: MenuItem[];
-};
-type DataAttributes = {
-    [K in `data-${string}`]?: string | number | boolean | undefined;
-};
-type MenuItem = MenuItemBase & Omit<MenuItemProps, 'children'> & DataAttributes;
+} & Omit<MenuItemProps, 'children' | 'type'> & DataAttributes;
+type MenuItem = MenuDividerItem | MenuHeaderItem | MenuActionItem;
 
 type Props = {
     items: MenuItem[];

package/dist/index.d.ts

@@ -4,20 +4,25 @@ import React, { ReactNode, ReactElement } from 'react';
 import { SvgIconComponent } from '@mui/icons-material';
 
 type MenuIcon = SvgIconComponent | ReactElement;
-type MenuItemBase = {
+type DataAttributes = {
+    [K in `data-${string}`]?: string | number | boolean | undefined;
+};
+type MenuDividerItem = {
     type: 'divider';
-} | {
+} & DataAttributes;
+type MenuHeaderItem = {
+    type: 'header';
+    label: ReactNode;
+} & DataAttributes;
+type MenuActionItem = {
     type?: 'item';
     id?: string;
     label: ReactNode;
     startIcon?: MenuIcon;
     endIcon?: MenuIcon;
     items?: MenuItem[];
-};
-type DataAttributes = {
-    [K in `data-${string}`]?: string | number | boolean | undefined;
-};
-type MenuItem = MenuItemBase & Omit<MenuItemProps, 'children'> & DataAttributes;
+} & Omit<MenuItemProps, 'children' | 'type'> & DataAttributes;
+type MenuItem = MenuDividerItem | MenuHeaderItem | MenuActionItem;
 
 type Props = {
     items: MenuItem[];

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/Menu/index.tsx
-import { Divider as Divider2, Menu as MuiMenu } from "@mui/material";
+import { Divider as Divider2, ListSubheader as ListSubheader2, Menu as MuiMenu } from "@mui/material";
 import { useId as useId2 } from "react";
 
 // src/Menu/NestedMenuItem.tsx
@@ -15,7 +15,7 @@ var ArrowRight_default = createSvgIcon(/* @__PURE__ */ _jsx("path", {
 }), "ArrowRight");
 
 // src/Menu/NestedMenuItem.tsx
-import { Divider, Fade as Fade2, MenuItem as MuiMenuItem2, MenuList, Paper, Popper } from "@mui/material";
+import { Divider, Fade as Fade2, ListSubheader, MenuItem as MuiMenuItem2, MenuList, Paper, Popper } from "@mui/material";
 
 // src/Menu/MenuEntry.tsx
 import { forwardRef, isValidElement } from "react";
@@ -129,6 +129,9 @@ var NestedMenuItem = (props) => {
       if (item.type === "divider") {
         return /* @__PURE__ */ jsx2(Divider, {}, `divider-${index}`);
       }
+      if (item.type === "header") {
+        return /* @__PURE__ */ jsx2(ListSubheader, { children: item.label }, `header-${index}`);
+      }
       const {
         type: __,
         items: entryItems,
@@ -275,6 +278,9 @@ function Menu({ items, elevation = DEFAULT_ELEVATION, ...rest }) {
     if (item.type === "divider") {
       return /* @__PURE__ */ jsx3(Divider2, {}, `divider-${index}`);
     }
+    if (item.type === "header") {
+      return /* @__PURE__ */ jsx3(ListSubheader2, { children: item.label }, `header-${index}`);
+    }
     const {
       type: _,
       id,

package/package.json

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