better-mui-menu 0.1.0

package/src/MultiLevelMenu/index.tsx

@@ -0,0 +1,89 @@
+import Menu from '@mui/material/Menu';
+import Divider from '@mui/material/Divider';
+import MenuItem from '@mui/material/MenuItem';
+import React, { useId } from 'react';
+import { Typography } from '@mui/material';
+import { NestedMenuItem } from './NestedMenuItem';
+import type { MultiLevelMenuItem } from './types';
+import { MenuItemContent, transitionConfig } from './common';
+
+type Props = {
+  anchorEl: null | HTMLElement;
+  open: boolean;
+  onClose: () => void;
+  items: MultiLevelMenuItem[];
+};
+
+export function MultiLevelMenu({ anchorEl, open, onClose, items }: Props) {
+  const generatedMenuId = useId();
+
+  const renderedMenuEntries = items.map((item, index) => {
+    if (item.type === 'divider') {
+      return <Divider key={`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 (
+        <NestedMenuItem
+          key={itemKey}
+          id={entryId}
+          label={displayLabel}
+          startIcon={StartIconComponent}
+          endIcon={EndIconComponent}
+          parentMenuClose={onClose}
+          items={nestedItems}
+        />
+      );
+    }
+
+    const handleItemClick = (event: React.MouseEvent<HTMLLIElement>) => {
+      onClick?.(event);
+      onClose();
+    };
+
+    return (
+      <MenuItem key={itemKey} onClick={handleItemClick} {...menuItemProps}>
+        <MenuItemContent>
+          {StartIconComponent ? <StartIconComponent /> : null}
+          <Typography sx={{ flex: 1 }}>{displayLabel}</Typography>
+          {EndIconComponent ? <EndIconComponent /> : null}
+        </MenuItemContent>
+      </MenuItem>
+    );
+  });
+
+  return (
+    <Menu
+      data-testid='root-menu'
+      anchorEl={anchorEl}
+      open={open}
+      onClose={onClose}
+      onKeyDown={e => {
+        if (e.key === 'Escape' && open) onClose();
+      }}
+      transitionDuration={transitionConfig.timeout}
+      slots={{ transition: transitionConfig.type }}
+      slotProps={{
+        list: {
+          'aria-labelledby': 'icon-menu-button',
+        },
+      }}
+    >
+      {renderedMenuEntries}
+    </Menu>
+  );
+}

package/src/MultiLevelMenu/types.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { MenuItemProps } from '@mui/material/MenuItem';
+import type { SvgIconComponent } from '@mui/icons-material';
+
+export type MultiLevelMenuItemBase =
+  | { type: 'divider' }
+  | {
+      type?: 'item';
+      id?: string;
+      label: ReactNode;
+      startIcon?: SvgIconComponent;
+      endIcon?: SvgIconComponent;
+      items?: MultiLevelMenuItem[];
+    };
+
+export type MultiLevelMenuItem = MultiLevelMenuItemBase & Omit<MenuItemProps, 'children'>;

package/src/index.ts

@@ -0,0 +1,4 @@
+import { MultiLevelMenu } from './MultiLevelMenu'
+
+export type { MultiLevelMenuItem } from './MultiLevelMenu/types'
+export default MultiLevelMenu

package/tsconfig.jest.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["jest", "@testing-library/jest-dom"]
+  },
+  "include": [
+    "src",
+    "jest.setup.ts"
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs'],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  external: [
+    'react',
+    'react-dom',
+    '@mui/material',
+    '@emotion/react',
+    '@emotion/styled'
+  ]
+})