better-mui-menu 0.1.0

package/README.md

@@ -0,0 +1,119 @@
+# better-mui-menu
+
+`better-mui-menu` is a tiny component library that supplies a keyboard- and mouse-friendly Material UI menu with unlimited nesting depth. It wraps `@mui/material/Menu` + `Popper` + `Fade` and exposes a simple data-driven API so that a single `items` array can render both leaves and nested submenus.
+
+## Installation
+
+```bash
+npm install better-mui-menu
+```
+
+Because the package delegates rendering to Material UI, make sure the runtime peers are installed as well:
+
+```bash
+npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
+```
+
+The icons dependency is only required when you pass `startIcon`/`endIcon`, but it is part of the peer dependency list so that consumers can supply Material icons without additional typings setup.
+
+## Usage
+
+```tsx
+import { useState } from 'react'
+import Button from '@mui/material/Button'
+import Cloud from '@mui/icons-material/Cloud'
+import Save from '@mui/icons-material/Save'
+import { MultiLevelMenu, type MultiLevelMenuItem } from 'better-mui-menu'
+
+const menuItems: MultiLevelMenuItem[] = [
+  {
+    id: 'save',
+    label: 'Save',
+    startIcon: Save,
+    onClick: () => {
+      console.log('Save action')
+    },
+  },
+  {
+    type: 'divider',
+  },
+  {
+    label: 'Cloud actions',
+    startIcon: Cloud,
+    items: [
+      {
+        label: 'Upload',
+        onClick: () => console.log('Upload'),
+      },
+      {
+        label: 'Download',
+        onClick: () => console.log('Download'),
+      },
+    ],
+  },
+]
+
+export function FileMenu() {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  return (
+    <>
+      <Button variant='contained' onClick={event => setAnchorEl(event.currentTarget)}>
+        Open file menu
+      </Button>
+      <MultiLevelMenu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+        items={menuItems}
+      />
+    </>
+  )
+}
+```
+
+## API
+
+### `MultiLevelMenu` props
+
+- `anchorEl: HTMLElement | null` – the anchor element that the root menu positions itself against.
+- `open: boolean` – controlled open state of the root menu.
+- `onClose: () => void` – invoked whenever the menu should close (overlay click, Escape, item selection).
+- `items: MultiLevelMenuItem[]` – the array that drives both leaf menu items and nested branches.
+
+### `MultiLevelMenuItem`
+
+`MultiLevelMenuItem` extends `@mui/material/MenuItemProps` (excluding `children`) so you can pass `disabled`, `dense`, `divider`, etc. The shape adds a few helpers:
+
+- `type?: 'item' | 'divider'` – set `'divider'` to render a `Divider` instead of a `MenuItem`.
+- `id?: string` – optional string used for ARIA attributes; a stable ID is generated automatically when omitted.
+- `label: ReactNode` – the text or custom node shown inside the menu entry.
+- `startIcon?: SvgIconComponent`, `endIcon?: SvgIconComponent` – render Material icons before/after the label using the shared `MenuItemContent` layout.
+- `items?: MultiLevelMenuItem[]` – nested descriptors that render as a submenu via `NestedMenuItem`.
+- `onClick?: MenuItemProps['onClick']` – clicking a leaf entry automatically propagates the handler and closes the entire menu stack.
+
+## Interactions & accessibility
+
+- Nested menus appear in a `Popper` placed `right-start` from the parent trigger and use a shared fade transition (`transitionConfig`).
+- Mouse hover keeps submenus open while the cursor travels between a trigger and its nested popper; moving away closes the submenu.
+- Keyboard navigation supports `ArrowRight`/`Enter`/`Space` to open children, `ArrowLeft` to close, `ArrowUp`/`ArrowDown` to move between entries, and `Escape` to dismiss everything. The component wires the necessary `aria-haspopup`, `aria-controls`, `aria-expanded`, and `aria-labelledby` attributes so that screen readers describe the menu hierarchy.
+
+## Development
+
+All development happens under `package/better-mui-menu`:
+
+- `npm run dev` – runs `tsup --watch` to rebuild `src` into `dist`.
+- `npm run build` – creates production bundles ready for publication.
+- `npm run test` – executes the Jest suite defined in `src/MultiLevelMenu/MultiLevelMenu.test.tsx`.
+
+The root workspace exposes `npm run dev:lib` and `npm run dev:demo` to simultaneously rebuild the library and power the demo app. When you change the menu source, keep `npm run dev` (or `npm run build`) running before refreshing the demo because the Vite app imports the library via its `file:` workspace link.
+
+## Demo
+
+`app/demo` is a Vite + React 19 application that consumes the built package. From the repository root run:
+
+```bash
+npm run dev:demo
+```
+
+Check `app/demo/README.md` for more Vite-specific guidance.

package/dist/index.cjs

@@ -0,0 +1,323 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/MultiLevelMenu/index.tsx
+var import_Menu = __toESM(require("@mui/material/Menu"), 1);
+var import_Divider2 = __toESM(require("@mui/material/Divider"), 1);
+var import_MenuItem2 = __toESM(require("@mui/material/MenuItem"), 1);
+var import_react2 = require("react");
+var import_material3 = require("@mui/material");
+
+// src/MultiLevelMenu/NestedMenuItem.tsx
+var import_react = require("react");
+var import_Fade2 = __toESM(require("@mui/material/Fade"), 1);
+var import_MenuItem = __toESM(require("@mui/material/MenuItem"), 1);
+var import_Divider = __toESM(require("@mui/material/Divider"), 1);
+var import_ArrowRight = __toESM(require("@mui/icons-material/ArrowRight"), 1);
+var import_material2 = require("@mui/material");
+
+// src/MultiLevelMenu/common.ts
+var import_material = require("@mui/material");
+var import_Fade = __toESM(require("@mui/material/Fade"), 1);
+var transitionConfig = {
+  type: import_Fade.default,
+  timeout: { enter: 100, exit: 100 }
+};
+var MenuItemContent = (0, import_material.styled)(import_material.Stack)(({ theme }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  fontSize: theme.typography.body1.fontSize,
+  "& .MuiSvgIcon-root": {
+    fontSize: theme.typography.body2.fontSize
+  },
+  padding: 0
+}));
+
+// src/MultiLevelMenu/NestedMenuItem.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var isNodeInstance = (target) => target instanceof Node;
+var NestedMenuItem = (props) => {
+  const {
+    id: providedId,
+    label,
+    startIcon: StartIconComponent,
+    parentMenuClose,
+    children,
+    items,
+    endIcon: _,
+    ...menuItemProps
+  } = props;
+  const [subMenuAnchorEl, setSubMenuAnchorEl] = (0, import_react.useState)(null);
+  const open = Boolean(subMenuAnchorEl);
+  const menuItemRef = (0, import_react.useRef)(null);
+  const subMenuRef = (0, import_react.useRef)(null);
+  const generatedId = (0, import_react.useId)();
+  const menuItemId = providedId ?? `nested-menu-trigger-${generatedId}`;
+  const subMenuId = `${menuItemId}-submenu`;
+  const handleOpen = (event) => {
+    setSubMenuAnchorEl(event.currentTarget);
+  };
+  const handleClose = (0, import_react.useCallback)(() => {
+    setSubMenuAnchorEl(null);
+  }, []);
+  const renderChildren = import_react.Children.map(children, (child) => {
+    if (!(0, import_react.isValidElement)(child)) return child;
+    if (child.type === import_MenuItem.default) {
+      const childOnClick = child.props.onClick;
+      const clonedOnClick = (event) => {
+        childOnClick?.(event);
+        handleClose();
+        parentMenuClose();
+      };
+      return (0, import_react.cloneElement)(child, { onClick: clonedOnClick });
+    }
+    return child;
+  });
+  const renderItemsFromData = () => {
+    if (!items || items.length === 0) return null;
+    return items.map((item, index) => {
+      if (item.type === "divider") {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.default, {}, `divider-${index}`);
+      }
+      const {
+        type: __,
+        items: entryItems,
+        startIcon: NestedMenuItemStartIcon,
+        endIcon: NestedMenuItemEndIcon,
+        label: entryLabel,
+        onClick,
+        id
+      } = item;
+      const entryId = id ?? `${menuItemId}-entry-${index}`;
+      const entryKey = `nested-entry-${entryId}`;
+      const entryLabelValue = entryLabel ?? entryId;
+      if (entryItems && entryItems.length > 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          NestedMenuItem,
+          {
+            id: entryId,
+            label: entryLabelValue,
+            startIcon: NestedMenuItemStartIcon,
+            endIcon: NestedMenuItemEndIcon,
+            parentMenuClose,
+            items: entryItems
+          },
+          entryKey
+        );
+      }
+      const handleItemClick = (event) => {
+        onClick?.(event);
+        handleClose();
+        parentMenuClose();
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuItem.default, { onClick: handleItemClick, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenuItemContent, { children: [
+        NestedMenuItemStartIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NestedMenuItemStartIcon, {}) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material2.Typography, { sx: { flex: 1 }, children: entryLabelValue }),
+        NestedMenuItemEndIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NestedMenuItemEndIcon, {}) : null
+      ] }) }, entryKey);
+    });
+  };
+  const renderedSubMenuItems = items && items.length > 0 ? renderItemsFromData() : renderChildren;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_MenuItem.default,
+      {
+        "data-testid": `${menuItemId}-trigger`,
+        id: menuItemId,
+        ref: menuItemRef,
+        onMouseEnter: handleOpen,
+        onMouseLeave: (e) => {
+          if (isNodeInstance(e.relatedTarget) && subMenuRef.current?.contains(e.relatedTarget)) return;
+          handleClose();
+        },
+        onKeyDown: (e) => {
+          e.preventDefault();
+          if (e.key === "ArrowLeft") {
+            handleClose();
+          }
+          if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
+            handleOpen(e);
+          }
+        },
+        "aria-haspopup": "menu",
+        "aria-controls": subMenuId,
+        "aria-expanded": open ? "true" : void 0,
+        ...menuItemProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenuItemContent, { children: [
+          StartIconComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StartIconComponent, {}) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material2.Typography, { sx: { flex: 1 }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ArrowRight.default, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_material2.Popper,
+      {
+        "data-testid": `${menuItemId}-submenu`,
+        open,
+        ref: subMenuRef,
+        anchorEl: subMenuAnchorEl,
+        transition: true,
+        sx: { zIndex: (t) => t.zIndex.modal + 1 },
+        placement: "right-start",
+        onKeyDown: (e) => {
+          if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            handleClose();
+            menuItemRef.current?.focus();
+          }
+          if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        },
+        onMouseLeave: (e) => {
+          if (isNodeInstance(e.relatedTarget) && menuItemRef.current?.contains(e.relatedTarget)) return;
+          handleClose();
+        },
+        children: ({ TransitionProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Fade2.default, { ...TransitionProps, timeout: transitionConfig.timeout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material2.Paper,
+          {
+            elevation: 2,
+            sx: {
+              borderRadius: 1,
+              bgcolor: "background.default"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_material2.MenuList,
+              {
+                autoFocusItem: true,
+                id: subMenuId,
+                "aria-labelledby": menuItemId,
+                role: "menu",
+                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
+              }
+            )
+          }
+        ) })
+      }
+    )
+  ] });
+};
+
+// src/MultiLevelMenu/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MultiLevelMenu({ anchorEl, open, onClose, items }) {
+  const generatedMenuId = (0, import_react2.useId)();
+  const renderedMenuEntries = items.map((item, index) => {
+    if (item.type === "divider") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Divider2.default, {}, `divider-${index}`);
+    }
+    const {
+      type: _,
+      items: nestedItems,
+      startIcon: StartIconComponent,
+      endIcon: EndIconComponent,
+      label,
+      onClick,
+      id,
+      ...menuItemProps
+    } = item;
+    const entryId = id ?? `${generatedMenuId}-entry-${index}`;
+    const itemKey = `menu-item-id:${entryId}`;
+    const displayLabel = label ?? entryId;
+    if (nestedItems && nestedItems.length > 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        NestedMenuItem,
+        {
+          id: entryId,
+          label: displayLabel,
+          startIcon: StartIconComponent,
+          endIcon: EndIconComponent,
+          parentMenuClose: onClose,
+          items: nestedItems
+        },
+        itemKey
+      );
+    }
+    const handleItemClick = (event) => {
+      onClick?.(event);
+      onClose();
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_MenuItem2.default, { onClick: handleItemClick, ...menuItemProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(MenuItemContent, { children: [
+      StartIconComponent ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StartIconComponent, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { sx: { flex: 1 }, children: displayLabel }),
+      EndIconComponent ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EndIconComponent, {}) : null
+    ] }) }, itemKey);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_Menu.default,
+    {
+      "data-testid": "root-menu",
+      anchorEl,
+      open,
+      onClose,
+      onKeyDown: (e) => {
+        if (e.key === "Escape" && open) onClose();
+      },
+      transitionDuration: transitionConfig.timeout,
+      slots: { transition: transitionConfig.type },
+      slotProps: {
+        list: {
+          "aria-labelledby": "icon-menu-button"
+        }
+      },
+      children: renderedMenuEntries
+    }
+  );
+}
+
+// src/index.ts
+var index_default = MultiLevelMenu;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/MultiLevelMenu/index.tsx","../src/MultiLevelMenu/NestedMenuItem.tsx","../src/MultiLevelMenu/common.ts"],"sourcesContent":["import { MultiLevelMenu } from './MultiLevelMenu'\n\nexport type { MultiLevelMenuItem } from './MultiLevelMenu/types'\nexport default MultiLevelMenu","import Menu from '@mui/material/Menu';\nimport Divider from '@mui/material/Divider';\nimport MenuItem from '@mui/material/MenuItem';\nimport React, { useId } from 'react';\nimport { Typography } from '@mui/material';\nimport { NestedMenuItem } from './NestedMenuItem';\nimport type { MultiLevelMenuItem } from './types';\nimport { MenuItemContent, transitionConfig } from './common';\n\ntype Props = {\n  anchorEl: null | HTMLElement;\n  open: boolean;\n  onClose: () => void;\n  items: MultiLevelMenuItem[];\n};\n\nexport function MultiLevelMenu({ anchorEl, open, onClose, items }: Props) {\n  const generatedMenuId = useId();\n\n  const renderedMenuEntries = items.map((item, index) => {\n    if (item.type === 'divider') {\n      return <Divider key={`divider-${index}`} />;\n    }\n\n    const {\n      type: _,\n      items: nestedItems,\n      startIcon: StartIconComponent,\n      endIcon: EndIconComponent,\n      label,\n      onClick,\n      id,\n      ...menuItemProps\n    } = item;\n    const entryId = id ?? `${generatedMenuId}-entry-${index}`;\n    const itemKey = `menu-item-id:${entryId}`;\n    const displayLabel = label ?? entryId;\n\n    if (nestedItems && nestedItems.length > 0) {\n      return (\n        <NestedMenuItem\n          key={itemKey}\n          id={entryId}\n          label={displayLabel}\n          startIcon={StartIconComponent}\n          endIcon={EndIconComponent}\n          parentMenuClose={onClose}\n          items={nestedItems}\n        />\n      );\n    }\n\n    const handleItemClick = (event: React.MouseEvent<HTMLLIElement>) => {\n      onClick?.(event);\n      onClose();\n    };\n\n    return (\n      <MenuItem key={itemKey} onClick={handleItemClick} {...menuItemProps}>\n        <MenuItemContent>\n          {StartIconComponent ? <StartIconComponent /> : null}\n          <Typography sx={{ flex: 1 }}>{displayLabel}</Typography>\n          {EndIconComponent ? <EndIconComponent /> : null}\n        </MenuItemContent>\n      </MenuItem>\n    );\n  });\n\n  return (\n    <Menu\n      data-testid='root-menu'\n      anchorEl={anchorEl}\n      open={open}\n      onClose={onClose}\n      onKeyDown={e => {\n        if (e.key === 'Escape' && open) onClose();\n      }}\n      transitionDuration={transitionConfig.timeout}\n      slots={{ transition: transitionConfig.type }}\n      slotProps={{\n        list: {\n          'aria-labelledby': 'icon-menu-button',\n        },\n      }}\n    >\n      {renderedMenuEntries}\n    </Menu>\n  );\n}\n","import type { FC, ReactNode, MouseEvent, KeyboardEvent } from 'react';\nimport { Children, cloneElement, isValidElement, useCallback, useId, useRef, useState } from 'react';\nimport Fade from '@mui/material/Fade';\nimport type { MenuItemProps } from '@mui/material/MenuItem';\nimport MenuItem from '@mui/material/MenuItem';\nimport Divider from '@mui/material/Divider';\nimport ArrowRightIcon from '@mui/icons-material/ArrowRight';\nimport type { SvgIconComponent } from '@mui/icons-material';\nimport { MenuList, Paper, Popper, Typography } from '@mui/material';\nimport type { MultiLevelMenuItem } from './types';\nimport { MenuItemContent, transitionConfig } from './common';\n\ntype NestedMenuItemProps = MenuItemProps & {\n  label: ReactNode;\n  startIcon?: SvgIconComponent;\n  endIcon?: SvgIconComponent;\n  parentMenuClose: () => void;\n  children?: ReactNode;\n  items?: MultiLevelMenuItem[];\n};\n\nconst isNodeInstance = (target: EventTarget | null): target is Node => target instanceof Node;\n\nexport const NestedMenuItem: FC<NestedMenuItemProps> = props => {\n  const {\n    id: providedId,\n    label,\n    startIcon: StartIconComponent,\n    parentMenuClose,\n    children,\n    items,\n    endIcon: _,\n    ...menuItemProps\n  } = props;\n  const [subMenuAnchorEl, setSubMenuAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(subMenuAnchorEl);\n  const menuItemRef = useRef<HTMLLIElement>(null);\n  const subMenuRef = useRef<HTMLDivElement>(null);\n  const generatedId = useId();\n  const menuItemId = providedId ?? `nested-menu-trigger-${generatedId}`;\n  const subMenuId = `${menuItemId}-submenu`;\n\n  const handleOpen = (event: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {\n    setSubMenuAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = useCallback(() => {\n    setSubMenuAnchorEl(null);\n  }, []);\n\n  const renderChildren = Children.map(children, child => {\n    if (!isValidElement(child)) return child;\n\n    // Ensure we only process MUI MenuItem children\n    if (child.type === MenuItem) {\n      const childOnClick = (child.props as MenuItemProps).onClick;\n      // Merge any user-defined click logic with the submenu closing behavior.\n      const clonedOnClick = (event: MouseEvent<HTMLLIElement>) => {\n        childOnClick?.(event);\n        handleClose(); // Close the submenu\n        parentMenuClose();\n      };\n      return cloneElement(child, { onClick: clonedOnClick } as Partial<MenuItemProps>);\n    }\n    return child;\n  });\n\n  const renderItemsFromData = () => {\n    if (!items || items.length === 0) return null;\n\n    return items.map((item, index) => {\n      if (item.type === 'divider') {\n\n        return <Divider key={`divider-${index}`} />;\n      }\n\n      const {\n        type: __,\n        items: entryItems,\n        startIcon: NestedMenuItemStartIcon,\n        endIcon: NestedMenuItemEndIcon,\n        label: entryLabel,\n        onClick,\n        id,\n      } = item;\n      const entryId = id ?? `${menuItemId}-entry-${index}`;\n      const entryKey = `nested-entry-${entryId}`;\n      const entryLabelValue = entryLabel ?? entryId;\n\n      if (entryItems && entryItems.length > 0) {\n        return (\n          <NestedMenuItem\n            key={entryKey}\n            id={entryId}\n            label={entryLabelValue}\n            startIcon={NestedMenuItemStartIcon}\n            endIcon={NestedMenuItemEndIcon}\n            parentMenuClose={parentMenuClose}\n            items={entryItems}\n          />\n        );\n      }\n\n      const handleItemClick = (event: MouseEvent<HTMLLIElement>) => {\n        onClick?.(event);\n        handleClose();\n        parentMenuClose();\n      };\n\n      return (\n        <MenuItem key={entryKey} onClick={handleItemClick}>\n          <MenuItemContent>\n            {NestedMenuItemStartIcon ? <NestedMenuItemStartIcon /> : null}\n            <Typography sx={{ flex: 1 }}>{entryLabelValue}</Typography>\n            {NestedMenuItemEndIcon ? <NestedMenuItemEndIcon /> : null}\n          </MenuItemContent>\n        </MenuItem>\n      );\n    });\n  };\n\n  const renderedSubMenuItems = items && items.length > 0 ? renderItemsFromData() : renderChildren;\n\n  return (\n    <>\n      <MenuItem\n        data-testid={`${menuItemId}-trigger`}\n        id={menuItemId}\n        ref={menuItemRef}\n        onMouseEnter={handleOpen}\n        onMouseLeave={e => {\n          // CRITICAL FEATURE:\n          // Checking whether cursor left the menu item onto the related menu. If so, do not close.\n          // TODO(ege): There can be a timeout here before we execute closing to improve UX - in case user is not very precise with mouse.\n          if (isNodeInstance(e.relatedTarget) && subMenuRef.current?.contains(e.relatedTarget)) return;\n          // If the cursor leaves to anywhere else, close the submenu.\n          handleClose();\n        }}\n        onKeyDown={e => {\n          e.preventDefault();\n          if (e.key === 'ArrowLeft') {\n            handleClose();\n          }\n          if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {\n            handleOpen(e);\n          }\n        }}\n        aria-haspopup='menu'\n        aria-controls={subMenuId}\n        aria-expanded={open ? 'true' : undefined}\n        {...menuItemProps}\n      >\n        <MenuItemContent>\n          {StartIconComponent ? <StartIconComponent /> : null}\n          <Typography sx={{ flex: 1 }}>{label}</Typography>\n          <ArrowRightIcon />\n        </MenuItemContent>\n      </MenuItem>\n\n      <Popper\n        data-testid={`${menuItemId}-submenu`}\n        open={open}\n        ref={subMenuRef}\n        anchorEl={subMenuAnchorEl}\n        transition\n        sx={{ zIndex: t => t.zIndex.modal + 1 }}\n        placement='right-start'\n        onKeyDown={e => {\n          if (e.key === 'ArrowLeft') {\n            e.preventDefault();\n            handleClose();\n            menuItemRef.current?.focus();\n          }\n          if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        }}\n        onMouseLeave={e => {\n          // CRITICAL FEATURE:\n          // Checking whether cursor left the submenu onto the related trigger item. If so, do not close.\n          // TODO(ege): There can be a timeout here before we execute closing to improve UX - in case user is not very precise with mouse.\n          if (isNodeInstance(e.relatedTarget) && menuItemRef.current?.contains(e.relatedTarget)) return;\n          // If the cursor leaves to anywhere else, close the submenu.\n          handleClose();\n        }}\n      >\n        {({ TransitionProps }) => (\n          <Fade {...TransitionProps} timeout={transitionConfig.timeout}>\n            <Paper\n              elevation={2}\n              sx={{\n                borderRadius: 1,\n                bgcolor: 'background.default',\n              }}\n            >\n              <MenuList\n                autoFocusItem\n                id={subMenuId}\n                aria-labelledby={menuItemId}\n                role='menu'\n                onKeyDown={e => {\n                  if (e.key === 'ArrowLeft') {\n                    const { nativeEvent } = e as KeyboardEvent<HTMLUListElement> & {\n                      nativeEvent: KeyboardEvent & {\n                        // our custom flag to avoid duplicate handling in nested menus\n                        __nestedMenuArrowLeftHandled?: boolean;\n                      };\n                    };\n                    if (nativeEvent.__nestedMenuArrowLeftHandled) {\n                      // return early if we have already handled this event in a nested menu\n                      // prevents duplicate logic when the browser bubbles the same keypress through multiple nodes\n                      return;\n                    }\n                    if (!subMenuRef.current?.contains(e.target as Node)) {\n                      // confirm the event’s target is still inside this submenu;\n                      // if the keypress originated elsewhere, we don’t continue so other menus can handle it\n                      return;\n                    }\n                    // Mark this event as handled to prevent parent menus from also processing it\n                    nativeEvent.__nestedMenuArrowLeftHandled = true;\n                    e.preventDefault();\n                    e.stopPropagation();\n                    // immediately halt any other listeners so we have exclusive control now\n                    nativeEvent.stopImmediatePropagation();\n                    // close the sub menu\n                    handleClose();\n                    // move focus back to the parent MenuItem, letting the user continue navigation up the menu hierarchy\n                    menuItemRef.current?.focus();\n                  }\n                }}\n              >\n                {renderedSubMenuItems}\n              </MenuList>\n            </Paper>\n          </Fade>\n        )}\n      </Popper>\n    </>\n  );\n};\n","import { Stack, styled } from '@mui/material';\nimport Fade from '@mui/material/Fade';\n\nexport const transitionConfig = {\n  type: Fade,\n  timeout: { enter: 100, exit: 100 },\n};\n\nexport const MenuItemContent = styled(Stack)(({ theme }) => ({\n  flexDirection: 'row',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  fontSize: theme.typography.body1.fontSize,\n  '& .MuiSvgIcon-root': {\n    fontSize: theme.typography.body2.fontSize,\n  },\n  padding: 0,\n}));\n"],"mappings":"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","names":["import_Divider","import_MenuItem","import_react","import_material","import_Fade","import_material","Fade","MenuItem","Divider","ArrowRightIcon","Fade","import_jsx_runtime","Divider","MenuItem","Menu"]}

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { MenuItemProps } from '@mui/material/MenuItem';
+import { SvgIconComponent } from '@mui/icons-material';
+
+type MultiLevelMenuItemBase = {
+    type: 'divider';
+} | {
+    type?: 'item';
+    id?: string;
+    label: ReactNode;
+    startIcon?: SvgIconComponent;
+    endIcon?: SvgIconComponent;
+    items?: MultiLevelMenuItem[];
+};
+type MultiLevelMenuItem = MultiLevelMenuItemBase & Omit<MenuItemProps, 'children'>;
+
+type Props = {
+    anchorEl: null | HTMLElement;
+    open: boolean;
+    onClose: () => void;
+    items: MultiLevelMenuItem[];
+};
+declare function MultiLevelMenu({ anchorEl, open, onClose, items }: Props): react_jsx_runtime.JSX.Element;
+
+export { type MultiLevelMenuItem, MultiLevelMenu as default };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { MenuItemProps } from '@mui/material/MenuItem';
+import { SvgIconComponent } from '@mui/icons-material';
+
+type MultiLevelMenuItemBase = {
+    type: 'divider';
+} | {
+    type?: 'item';
+    id?: string;
+    label: ReactNode;
+    startIcon?: SvgIconComponent;
+    endIcon?: SvgIconComponent;
+    items?: MultiLevelMenuItem[];
+};
+type MultiLevelMenuItem = MultiLevelMenuItemBase & Omit<MenuItemProps, 'children'>;
+
+type Props = {
+    anchorEl: null | HTMLElement;
+    open: boolean;
+    onClose: () => void;
+    items: MultiLevelMenuItem[];
+};
+declare function MultiLevelMenu({ anchorEl, open, onClose, items }: Props): react_jsx_runtime.JSX.Element;
+
+export { type MultiLevelMenuItem, MultiLevelMenu as default };