better-mui-menu 1.0.2 → 1.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 eggei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -46,7 +46,17 @@ 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);
+
+// ../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
+var import_utils = require("@mui/material/utils");
+
+// ../../node_modules/@mui/icons-material/esm/ArrowRight.js
+var import_jsx_runtime = require("react/jsx-runtime");
+var ArrowRight_default = (0, import_utils.createSvgIcon)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+  d: "m10 17 5-5-5-5z"
+}), "ArrowRight");
+
+// src/Menu/NestedMenuItem.tsx
 var import_material2 = require("@mui/material");
 
 // src/Menu/common.ts
@@ -68,7 +78,7 @@ var MenuItemContent = (0, import_material.styled)(import_material.Stack)(({ them
 }));
 
 // src/Menu/NestedMenuItem.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var isNodeInstance = (target) => target instanceof Node;
 var NestedMenuItem = (props) => {
   const {
@@ -111,7 +121,7 @@ var NestedMenuItem = (props) => {
     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}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Divider.default, {}, `divider-${index}`);
       }
       const {
         type: __,
@@ -126,7 +136,7 @@ var NestedMenuItem = (props) => {
       const entryKey = `nested-entry-${entryId}`;
       const entryLabelValue = entryLabel ?? entryId;
       if (entryItems && entryItems.length > 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           NestedMenuItem,
           {
             id: entryId,
@@ -144,16 +154,16 @@ var NestedMenuItem = (props) => {
         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
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_MenuItem.default, { onClick: handleItemClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(MenuItemContent, { children: [
+        NestedMenuItemStartIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NestedMenuItemStartIcon, {}) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { sx: { flex: 1 }, children: entryLabelValue }),
+        NestedMenuItemEndIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_MenuItem.default,
       {
         "data-testid": `${menuItemId}-trigger`,
@@ -177,14 +187,14 @@ var NestedMenuItem = (props) => {
         "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, {})
+        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_material2.Typography, { sx: { flex: 1 }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrowRight_default, {})
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_material2.Popper,
       {
         "data-testid": `${menuItemId}-submenu`,
@@ -209,7 +219,7 @@ var NestedMenuItem = (props) => {
           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)(
+        children: ({ TransitionProps }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Fade2.default, { ...TransitionProps, timeout: transitionConfig.timeout, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_material2.Paper,
           {
             elevation: 2,
@@ -217,7 +227,7 @@ var NestedMenuItem = (props) => {
               borderRadius: 1,
               bgcolor: "background.default"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_material2.MenuList,
               {
                 autoFocusItem: true,
@@ -252,12 +262,12 @@ var NestedMenuItem = (props) => {
 };
 
 // src/Menu/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Menu({ 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}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Divider2.default, {}, `divider-${index}`);
     }
     const {
       type: _,
@@ -273,7 +283,7 @@ function Menu({ anchorEl, open, onClose, items }) {
     const itemKey = `menu-item-id:${entryId}`;
     const displayLabel = label ?? entryId;
     if (nestedItems && nestedItems.length > 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         NestedMenuItem,
         {
           id: entryId,
@@ -290,13 +300,13 @@ function Menu({ anchorEl, open, onClose, items }) {
       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
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_MenuItem2.default, { onClick: handleItemClick, ...menuItemProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItemContent, { children: [
+      StartIconComponent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StartIconComponent, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Typography, { sx: { flex: 1 }, children: displayLabel }),
+      EndIconComponent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EndIconComponent, {}) : null
     ] }) }, itemKey);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_Menu.default,
     {
       "data-testid": "root-menu",

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Menu/index.tsx","../src/Menu/NestedMenuItem.tsx","../src/Menu/common.ts"],"sourcesContent":["import { Menu } from './Menu'\n\nexport type { MenuItem } from './Menu/types'\nexport default Menu\n","import MuiMenu from '@mui/material/Menu';\nimport Divider from '@mui/material/Divider';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport React, { useId } from 'react';\nimport { Typography } from '@mui/material';\nimport { NestedMenuItem } from './NestedMenuItem';\nimport type { MenuItem } from './types';\nimport { MenuItemContent, transitionConfig } from './common';\n\ntype Props = {\n  anchorEl: null | HTMLElement;\n  open: boolean;\n  onClose: () => void;\n  items: MenuItem[];\n};\n\nexport function Menu({ 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      <MuiMenuItem 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      </MuiMenuItem>\n    );\n  });\n\n  return (\n    <MuiMenu\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    </MuiMenu>\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 MuiMenuItem 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 { MenuItem } 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?: MenuItem[];\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 === MuiMenuItem) {\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        <MuiMenuItem key={entryKey} onClick={handleItemClick}>\n          <MenuItemContent>\n            {NestedMenuItemStartIcon ? <NestedMenuItemStartIcon /> : null}\n            <Typography sx={{ flex: 1 }}>{entryLabelValue}</Typography>\n            {NestedMenuItemEndIcon ? <NestedMenuItemEndIcon /> : null}\n          </MenuItemContent>\n        </MuiMenuItem>\n      );\n    });\n  };\n\n  const renderedSubMenuItems = items && items.length > 0 ? renderItemsFromData() : renderChildren;\n\n  return (\n    <>\n      <MuiMenuItem\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      </MuiMenuItem>\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","MuiMenuItem","Divider","ArrowRightIcon","Fade","import_jsx_runtime","Divider","MuiMenuItem","MuiMenu"]}
+{"version":3,"sources":["../src/index.ts","../src/Menu/index.tsx","../src/Menu/NestedMenuItem.tsx","../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js","../../../node_modules/@mui/icons-material/esm/ArrowRight.js","../src/Menu/common.ts"],"sourcesContent":["import { Menu } from './Menu'\n\nexport type { MenuItem } from './Menu/types'\nexport default Menu\n","import MuiMenu from '@mui/material/Menu';\nimport Divider from '@mui/material/Divider';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport React, { useId } from 'react';\nimport { Typography } from '@mui/material';\nimport { NestedMenuItem } from './NestedMenuItem';\nimport type { MenuItem } from './types';\nimport { MenuItemContent, transitionConfig } from './common';\n\ntype Props = {\n  anchorEl: null | HTMLElement;\n  open: boolean;\n  onClose: () => void;\n  items: MenuItem[];\n};\n\nexport function Menu({ 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      <MuiMenuItem 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      </MuiMenuItem>\n    );\n  });\n\n  return (\n    <MuiMenu\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    </MuiMenu>\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 MuiMenuItem 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 { MenuItem } 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?: MenuItem[];\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 === MuiMenuItem) {\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        <MuiMenuItem key={entryKey} onClick={handleItemClick}>\n          <MenuItemContent>\n            {NestedMenuItemStartIcon ? <NestedMenuItemStartIcon /> : null}\n            <Typography sx={{ flex: 1 }}>{entryLabelValue}</Typography>\n            {NestedMenuItemEndIcon ? <NestedMenuItemEndIcon /> : null}\n          </MenuItemContent>\n        </MuiMenuItem>\n      );\n    });\n  };\n\n  const renderedSubMenuItems = items && items.length > 0 ? renderItemsFromData() : renderChildren;\n\n  return (\n    <>\n      <MuiMenuItem\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      </MuiMenuItem>\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","'use client';\n\nexport { createSvgIcon as default } from '@mui/material/utils';","\"use client\";\n\nimport createSvgIcon from \"./utils/createSvgIcon.js\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon(/*#__PURE__*/_jsx(\"path\", {\n  d: \"m10 17 5-5-5-5z\"\n}), 'ArrowRight');","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","_jsx","import_material","Fade","import_jsx_runtime","MuiMenuItem","Divider","Fade","import_jsx_runtime","Divider","MuiMenuItem","MuiMenu"]}

package/dist/index.js

@@ -10,7 +10,17 @@ import { Children, cloneElement, isValidElement, useCallback, useId, useRef, use
 import Fade2 from "@mui/material/Fade";
 import MuiMenuItem from "@mui/material/MenuItem";
 import Divider from "@mui/material/Divider";
-import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+
+// ../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
+import { createSvgIcon } from "@mui/material/utils";
+
+// ../../node_modules/@mui/icons-material/esm/ArrowRight.js
+import { jsx as _jsx } from "react/jsx-runtime";
+var ArrowRight_default = createSvgIcon(/* @__PURE__ */ _jsx("path", {
+  d: "m10 17 5-5-5-5z"
+}), "ArrowRight");
+
+// src/Menu/NestedMenuItem.tsx
 import { MenuList, Paper, Popper, Typography } from "@mui/material";
 
 // src/Menu/common.ts
@@ -144,7 +154,7 @@ var NestedMenuItem = (props) => {
         children: /* @__PURE__ */ jsxs(MenuItemContent, { children: [
           StartIconComponent ? /* @__PURE__ */ jsx(StartIconComponent, {}) : null,
           /* @__PURE__ */ jsx(Typography, { sx: { flex: 1 }, children: label }),
-          /* @__PURE__ */ jsx(ArrowRightIcon, {})
+          /* @__PURE__ */ jsx(ArrowRight_default, {})
         ] })
       }
     ),

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Menu/index.tsx","../src/Menu/NestedMenuItem.tsx","../src/Menu/common.ts","../src/index.ts"],"sourcesContent":["import MuiMenu from '@mui/material/Menu';\nimport Divider from '@mui/material/Divider';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport React, { useId } from 'react';\nimport { Typography } from '@mui/material';\nimport { NestedMenuItem } from './NestedMenuItem';\nimport type { MenuItem } from './types';\nimport { MenuItemContent, transitionConfig } from './common';\n\ntype Props = {\n  anchorEl: null | HTMLElement;\n  open: boolean;\n  onClose: () => void;\n  items: MenuItem[];\n};\n\nexport function Menu({ 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      <MuiMenuItem 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      </MuiMenuItem>\n    );\n  });\n\n  return (\n    <MuiMenu\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    </MuiMenu>\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 MuiMenuItem 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 { MenuItem } 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?: MenuItem[];\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 === MuiMenuItem) {\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        <MuiMenuItem key={entryKey} onClick={handleItemClick}>\n          <MenuItemContent>\n            {NestedMenuItemStartIcon ? <NestedMenuItemStartIcon /> : null}\n            <Typography sx={{ flex: 1 }}>{entryLabelValue}</Typography>\n            {NestedMenuItemEndIcon ? <NestedMenuItemEndIcon /> : null}\n          </MenuItemContent>\n        </MuiMenuItem>\n      );\n    });\n  };\n\n  const renderedSubMenuItems = items && items.length > 0 ? renderItemsFromData() : renderChildren;\n\n  return (\n    <>\n      <MuiMenuItem\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      </MuiMenuItem>\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","import { Menu } from './Menu'\n\nexport type { MenuItem } from './Menu/types'\nexport default Menu\n"],"mappings":"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","names":["Divider","MuiMenuItem","useId","Typography","Fade","Fade","jsx","jsxs","useId","Divider","MuiMenuItem","Typography"]}
+{"version":3,"sources":["../src/Menu/index.tsx","../src/Menu/NestedMenuItem.tsx","../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js","../../../node_modules/@mui/icons-material/esm/ArrowRight.js","../src/Menu/common.ts","../src/index.ts"],"sourcesContent":["import MuiMenu from '@mui/material/Menu';\nimport Divider from '@mui/material/Divider';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport React, { useId } from 'react';\nimport { Typography } from '@mui/material';\nimport { NestedMenuItem } from './NestedMenuItem';\nimport type { MenuItem } from './types';\nimport { MenuItemContent, transitionConfig } from './common';\n\ntype Props = {\n  anchorEl: null | HTMLElement;\n  open: boolean;\n  onClose: () => void;\n  items: MenuItem[];\n};\n\nexport function Menu({ 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      <MuiMenuItem 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      </MuiMenuItem>\n    );\n  });\n\n  return (\n    <MuiMenu\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    </MuiMenu>\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 MuiMenuItem 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 { MenuItem } 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?: MenuItem[];\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 === MuiMenuItem) {\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        <MuiMenuItem key={entryKey} onClick={handleItemClick}>\n          <MenuItemContent>\n            {NestedMenuItemStartIcon ? <NestedMenuItemStartIcon /> : null}\n            <Typography sx={{ flex: 1 }}>{entryLabelValue}</Typography>\n            {NestedMenuItemEndIcon ? <NestedMenuItemEndIcon /> : null}\n          </MenuItemContent>\n        </MuiMenuItem>\n      );\n    });\n  };\n\n  const renderedSubMenuItems = items && items.length > 0 ? renderItemsFromData() : renderChildren;\n\n  return (\n    <>\n      <MuiMenuItem\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      </MuiMenuItem>\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","'use client';\n\nexport { createSvgIcon as default } from '@mui/material/utils';","\"use client\";\n\nimport createSvgIcon from \"./utils/createSvgIcon.js\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon(/*#__PURE__*/_jsx(\"path\", {\n  d: \"m10 17 5-5-5-5z\"\n}), 'ArrowRight');","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","import { Menu } from './Menu'\n\nexport type { MenuItem } from './Menu/types'\nexport default Menu\n"],"mappings":"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","names":["Divider","MuiMenuItem","useId","Typography","Fade","Fade","jsx","jsxs","useId","Divider","MuiMenuItem","Typography"]}

package/package.json

@@ -8,9 +8,12 @@
   "bugs": {
     "url": "https://github.com/eggei/better-mui-menu/issues"
   },
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "sideEffects": false,
+  "files": [
+    "dist"
+  ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -43,7 +46,7 @@
     "accessibility"
   ],
   "author": "eggei",
-  "license": "ISC",
+  "license": "MIT",
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
@@ -72,11 +75,11 @@
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.7",
-    "@mui/material": "^7.3.7",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1"
+    "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   }
 }

package/jest.config.cjs

@@ -1,15 +0,0 @@
-module.exports = {
-  preset: 'ts-jest/presets/default-esm',
-  testEnvironment: 'jsdom',
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
-  testMatch: ['<rootDir>/src/**/*.test.{ts,tsx}'],
-  moduleNameMapper: {
-    '\\.(css|less|sass|scss)$': 'identity-obj-proxy'
-  },
-  watchman: false,
-  transform: {
-    '^.+\\.(ts|tsx)$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.jest.json' }]
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  extensionsToTreatAsEsm: ['.ts', '.tsx']
-};

package/jest.setup.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/src/Menu/Menu.test.tsx

@@ -1,369 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-/// <reference types="@testing-library/jest-dom" />
-import type { MouseEvent } from 'react';
-import { useState } from 'react';
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Cloud from '@mui/icons-material/Cloud';
-import ContentCopy from '@mui/icons-material/ContentCopy';
-import ContentCut from '@mui/icons-material/ContentCut';
-import ContentPaste from '@mui/icons-material/ContentPaste';
-import type { MenuItem } from './types';
-import { Menu } from './index';
-
-const buildMenuItems = () => {
-  const spies = {
-    cut: jest.fn(),
-    google: jest.fn(),
-    deep: jest.fn(),
-  };
-
-  const items: MenuItem[] = [
-    {
-      id: 'cut',
-      label: 'Cut',
-      startIcon: ContentCut,
-      onClick: spies.cut,
-    },
-    {
-      id: 'web-clipboard',
-      label: 'Web Clipboard',
-      startIcon: Cloud,
-      items: [
-        {
-          id: 'google-cloud',
-          label: 'Google Cloud',
-          startIcon: ContentCopy,
-          onClick: spies.google,
-        },
-        {
-          id: 'deep-options',
-          label: 'Deep Options',
-          startIcon: ContentPaste,
-          items: [
-            {
-              id: 'deep-item',
-              label: 'Deep Item',
-              startIcon: Cloud,
-              onClick: spies.deep,
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  return { items, spies };
-};
-
-function MenuWithTrigger({ items }: { items: MenuItem[] }) {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-  const handleOpen = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <>
-      <button
-        type='button'
-        aria-controls={anchorEl ? 'icon-menu' : undefined}
-        aria-haspopup='true'
-        aria-expanded={anchorEl ? 'true' : undefined}
-        onClick={handleOpen}
-      >
-        Menu Actions
-      </button>
-      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose} items={items} />
-    </>
-  );
-}
-
-const setupMenu = () => {
-  const user = userEvent.setup();
-  const { items, spies } = buildMenuItems();
-  render(<MenuWithTrigger items={items} />);
-  const toggleButton = screen.getByRole('button', { name: /menu actions/i });
-  return { user, toggleButton, spies };
-};
-
-describe('Menu', () => {
-  it('closes the root menu after selecting a leaf action', async () => {
-    const { user, toggleButton, spies } = setupMenu();
-    await user.click(toggleButton);
-    await waitFor(() => {
-      expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    const cutItem = await screen.findByRole('menuitem', { name: 'Cut' });
-    await user.click(cutItem);
-
-    expect(spies.cut).toHaveBeenCalledTimes(1);
-    await waitFor(() => {
-      expect(toggleButton).not.toHaveAttribute('aria-expanded');
-    });
-  });
-
-  it('handles actions when callers omit explicit ids', async () => {
-    const user = userEvent.setup();
-    const spies = {
-      copy: jest.fn(),
-      nested: jest.fn(),
-    };
-    const items: MenuItem[] = [
-      {
-        label: 'Copy',
-        startIcon: ContentCopy,
-        onClick: spies.copy,
-      },
-      {
-        label: 'More options',
-        startIcon: Cloud,
-        items: [
-          {
-            label: 'Nested action',
-            startIcon: ContentCopy,
-            onClick: spies.nested,
-          },
-        ],
-      },
-    ];
-
-    render(<MenuWithTrigger items={items} />);
-    const toggleButton = screen.getByRole('button', { name: /menu actions/i });
-    await user.click(toggleButton);
-
-    const copyItem = await screen.findByRole('menuitem', { name: 'Copy' });
-    await user.click(copyItem);
-
-    expect(spies.copy).toHaveBeenCalledTimes(1);
-    await waitFor(() => {
-      expect(toggleButton).not.toHaveAttribute('aria-expanded');
-    });
-
-    await user.click(toggleButton);
-    const nestedTrigger = await screen.findByRole('menuitem', { name: 'More options' });
-    await user.hover(nestedTrigger);
-    const nestedAction = await screen.findByRole('menuitem', { name: 'Nested action' });
-    await user.click(nestedAction);
-
-    expect(spies.nested).toHaveBeenCalledTimes(1);
-    await waitFor(() => {
-      expect(toggleButton).not.toHaveAttribute('aria-expanded');
-    });
-  });
-
-  it('invokes a nested menu action and closes both menus', async () => {
-    const { user, toggleButton, spies } = setupMenu();
-    await user.click(toggleButton);
-
-    const nestedTrigger = await screen.findByRole('menuitem', { name: 'Web Clipboard' });
-    await user.hover(nestedTrigger);
-
-    const googleItem = await screen.findByRole('menuitem', { name: 'Google Cloud' });
-    await user.click(googleItem);
-
-    expect(spies.google).toHaveBeenCalledTimes(1);
-    await waitFor(() => {
-      expect(screen.queryByRole('menu', { name: 'Web Clipboard' })).not.toBeInTheDocument();
-    });
-    expect(toggleButton).not.toHaveAttribute('aria-expanded');
-  });
-
-  it('fires deep-nested actions and closes the root menu', async () => {
-    const { user, toggleButton, spies } = setupMenu();
-    await user.click(toggleButton);
-
-    const nestedTrigger = await screen.findByRole('menuitem', { name: 'Web Clipboard' });
-    await user.hover(nestedTrigger);
-
-    const deepTrigger = await screen.findByRole('menuitem', { name: 'Deep Options' });
-    await user.hover(deepTrigger);
-
-    const deepItem = await screen.findByRole('menuitem', { name: 'Deep Item' });
-    await user.click(deepItem);
-
-    expect(spies.deep).toHaveBeenCalledTimes(1);
-    await waitFor(() => {
-      expect(screen.queryByRole('menu', { name: 'Web Clipboard' })).not.toBeInTheDocument();
-    });
-    expect(toggleButton).not.toHaveAttribute('aria-expanded');
-  });
-
-  it('keeps the submenu open when the mouse leaves the trigger toward the submenu (critical feature)', async () => {
-    const { user, toggleButton } = setupMenu();
-    await user.click(toggleButton);
-
-    const nestedTrigger = await screen.findByRole('menuitem', { name: 'Web Clipboard' });
-    await user.hover(nestedTrigger);
-
-    const nestedMenu = await screen.findByRole('menu', { name: 'Web Clipboard' });
-    fireEvent.mouseLeave(nestedTrigger, { relatedTarget: nestedMenu });
-    fireEvent.mouseLeave(nestedMenu, { relatedTarget: nestedTrigger });
-
-    expect(nestedMenu).toBeVisible();
-  });
-
-  it('closes the submenu when the mouse leaves away from the trigger (critical Popper behavior)', async () => {
-    const { user, toggleButton } = setupMenu();
-    await user.click(toggleButton);
-
-    const nestedTrigger = await screen.findByRole('menuitem', { name: 'Web Clipboard' });
-    await user.hover(nestedTrigger);
-
-    const nestedMenu = await screen.findByRole('menu', { name: 'Web Clipboard' });
-    fireEvent.mouseLeave(nestedMenu, { relatedTarget: document.body });
-
-    await waitFor(() => {
-      expect(screen.queryByRole('menu', { name: 'Web Clipboard' })).not.toBeInTheDocument();
-    });
-    expect(nestedTrigger).not.toHaveAttribute('aria-expanded');
-  });
-
-  describe('Accessibility features', () => {
-    it('exposes ARIA relationships so screen readers can describe nested menus', async () => {
-      const { user, toggleButton } = setupMenu();
-      await user.click(toggleButton);
-
-      const nestedTrigger = await screen.findByRole('menuitem', { name: 'Web Clipboard' });
-      expect(nestedTrigger).toHaveAttribute('aria-haspopup', 'menu');
-      expect(nestedTrigger).toHaveAttribute('aria-controls', 'web-clipboard-submenu');
-      expect(nestedTrigger.id).toBe('web-clipboard');
-      expect(nestedTrigger).not.toHaveAttribute('aria-expanded');
-
-      await user.hover(nestedTrigger);
-      const nestedMenu = await screen.findByRole('menu', { name: 'Web Clipboard' });
-      expect(nestedMenu).toHaveAttribute('id', 'web-clipboard-submenu');
-      expect(nestedMenu).toHaveAttribute('aria-labelledby', nestedTrigger.id);
-      expect(nestedMenu).toHaveAttribute('role', 'menu');
-      expect(nestedTrigger).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('supports keyboard navigation so focus stays with the active branch', async () => {
-      const { user, toggleButton } = setupMenu();
-      await user.click(toggleButton);
-
-      const nestedTrigger = await screen.findByRole('menuitem', { name: 'Web Clipboard' });
-      await act(() => {
-        nestedTrigger.focus();
-      });
-
-      await user.keyboard('{ArrowRight}');
-      const firstNestedItem = await screen.findByRole('menuitem', { name: 'Google Cloud' });
-      await waitFor(() => {
-        expect(firstNestedItem).toHaveFocus();
-      });
-
-      await user.keyboard('{ArrowLeft}');
-      await waitFor(() => {
-        expect(screen.queryByRole('menu', { name: 'Web Clipboard' })).not.toBeInTheDocument();
-        expect(nestedTrigger).toHaveFocus();
-      });
-
-      await user.keyboard('{Enter}');
-      const reopenedItem = await screen.findByRole('menuitem', { name: 'Google Cloud' });
-      await waitFor(() => {
-        expect(reopenedItem).toHaveFocus();
-      });
-    });
-
-    describe('Keyboard actions & Focus management', () => {
-      it('traversing down to deepest level and back with keyboard', async () => {
-        const { user, toggleButton } = setupMenu();
-        await user.click(toggleButton);
-        await waitFor(async () => {
-          expect(screen.getByTestId('root-menu')).toBeVisible();
-          // jump in the menu
-          await user.keyboard('{ArrowDown}');
-        });
-
-        // Step 1: Open Web Clipboard submenu
-        await user.keyboard('{ArrowDown}{ArrowDown}{ArrowRight}');
-        await waitFor(() => {
-          expect(screen.getByTestId('web-clipboard-submenu')).toBeVisible();
-        });
-        expect(screen.getByRole('menuitem', { name: 'Google Cloud' })).toHaveFocus();
-
-        // Step 2: Open Deep Options submenu
-        await user.keyboard('{ArrowDown}{ArrowRight}');
-        await waitFor(() => {
-          expect(screen.getByRole('menu', { name: 'Deep Options' })).toBeVisible();
-        });
-        expect(screen.getByRole('menuitem', { name: 'Deep Item' })).toHaveFocus();
-
-        // Step 3: Close Deep Options submenu
-        await user.keyboard('{ArrowLeft}');
-        const deepOptionsTrigger = screen.getByRole('menuitem', { name: 'Deep Options' });
-        await waitFor(() => {
-          expect(screen.queryByRole('menu', { name: 'Deep Options' })).not.toBeInTheDocument();
-          expect(deepOptionsTrigger).toHaveFocus();
-        });
-
-        // Step 4: Close Web Clipboard submenu
-        await user.keyboard('{ArrowLeft}');
-        const webClipboardTrigger = screen.getByRole('menuitem', { name: 'Web Clipboard' });
-        await waitFor(() => {
-          expect(screen.queryByRole('menu', { name: 'Web Clipboard' })).not.toBeInTheDocument();
-          expect(webClipboardTrigger).toHaveFocus();
-        });
-      });
-
-      it('traversing down to deepest level and back using mouse', async () => {
-        const { user, toggleButton } = setupMenu();
-        await user.click(toggleButton);
-        await waitFor(() => {
-          expect(screen.getByTestId('root-menu')).toBeVisible();
-        });
-        // Step 1: Open Web Clipboard submenu
-        const webClipboardTrigger = screen.getByRole('menuitem', { name: 'Web Clipboard' });
-        await user.hover(webClipboardTrigger);
-        await waitFor(() => {
-          expect(screen.getByTestId('web-clipboard-submenu')).toBeVisible();
-        });
-
-        // Step 2: Open Deep Options submenu
-        const deepOptionsTrigger = screen.getByRole('menuitem', { name: 'Deep Options' });
-        await user.hover(deepOptionsTrigger);
-        await waitFor(() => {
-          expect(screen.getByRole('menu', { name: 'Deep Options' })).toBeVisible();
-        });
-
-        // Step 3: Go in the deep options menu
-        const deepItem = screen.getByRole('menuitem', { name: 'Deep Item' });
-        await user.hover(deepItem);
-
-        // Step 4: Hover deep options trigger and expect submenu to not close
-        await user.hover(deepOptionsTrigger);
-        expect(screen.getByRole('menu', { name: 'Deep Options' })).toBeVisible();
-
-        // Step 5: Hover Google Cloud trigger and expect deep options submenu to close
-        const googleCloudTrigger = screen.getByRole('menuitem', { name: 'Google Cloud' });
-        await user.hover(googleCloudTrigger);
-        await waitFor(() => {
-          expect(screen.queryByRole('menu', { name: 'Deep Options' })).not.toBeInTheDocument();
-        });
-
-        // Step 6: Hover Cut trigger and expect Web Clipboard submenu to close
-        const cutTrigger = screen.getByRole('menuitem', { name: 'Cut' });
-        await user.hover(cutTrigger);
-        await waitFor(() => {
-          expect(screen.queryByRole('menu', { name: 'Web Clipboard' })).not.toBeInTheDocument();
-        });
-
-        // Finally, click out side and expect root menu to close
-        const backdrop = document.querySelector('[class*="MuiBackdrop-root"]');
-        if (!backdrop) throw new Error('Backdrop not found');
-        await user.click(backdrop);
-        await waitFor(() => {
-          expect(screen.queryByTestId('root-menu')).not.toBeInTheDocument();
-        });
-      });
-    });
-  });
-});

package/src/Menu/NestedMenuItem.tsx

@@ -1,241 +0,0 @@
-import type { FC, ReactNode, MouseEvent, KeyboardEvent } from 'react';
-import { Children, cloneElement, isValidElement, useCallback, useId, useRef, useState } from 'react';
-import Fade from '@mui/material/Fade';
-import type { MenuItemProps } from '@mui/material/MenuItem';
-import MuiMenuItem from '@mui/material/MenuItem';
-import Divider from '@mui/material/Divider';
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
-import type { SvgIconComponent } from '@mui/icons-material';
-import { MenuList, Paper, Popper, Typography } from '@mui/material';
-import type { MenuItem } from './types';
-import { MenuItemContent, transitionConfig } from './common';
-
-type NestedMenuItemProps = MenuItemProps & {
-  label: ReactNode;
-  startIcon?: SvgIconComponent;
-  endIcon?: SvgIconComponent;
-  parentMenuClose: () => void;
-  children?: ReactNode;
-  items?: MenuItem[];
-};
-
-const isNodeInstance = (target: EventTarget | null): target is Node => target instanceof Node;
-
-export const NestedMenuItem: FC<NestedMenuItemProps> = props => {
-  const {
-    id: providedId,
-    label,
-    startIcon: StartIconComponent,
-    parentMenuClose,
-    children,
-    items,
-    endIcon: _,
-    ...menuItemProps
-  } = props;
-  const [subMenuAnchorEl, setSubMenuAnchorEl] = useState<null | HTMLElement>(null);
-  const open = Boolean(subMenuAnchorEl);
-  const menuItemRef = useRef<HTMLLIElement>(null);
-  const subMenuRef = useRef<HTMLDivElement>(null);
-  const generatedId = useId();
-  const menuItemId = providedId ?? `nested-menu-trigger-${generatedId}`;
-  const subMenuId = `${menuItemId}-submenu`;
-
-  const handleOpen = (event: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {
-    setSubMenuAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = useCallback(() => {
-    setSubMenuAnchorEl(null);
-  }, []);
-
-  const renderChildren = Children.map(children, child => {
-    if (!isValidElement(child)) return child;
-
-    // Ensure we only process MUI MenuItem children
-    if (child.type === MuiMenuItem) {
-      const childOnClick = (child.props as MenuItemProps).onClick;
-      // Merge any user-defined click logic with the submenu closing behavior.
-      const clonedOnClick = (event: MouseEvent<HTMLLIElement>) => {
-        childOnClick?.(event);
-        handleClose(); // Close the submenu
-        parentMenuClose();
-      };
-      return cloneElement(child, { onClick: clonedOnClick } as Partial<MenuItemProps>);
-    }
-    return child;
-  });
-
-  const renderItemsFromData = () => {
-    if (!items || items.length === 0) return null;
-
-    return items.map((item, index) => {
-      if (item.type === 'divider') {
-
-        return <Divider key={`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 (
-          <NestedMenuItem
-            key={entryKey}
-            id={entryId}
-            label={entryLabelValue}
-            startIcon={NestedMenuItemStartIcon}
-            endIcon={NestedMenuItemEndIcon}
-            parentMenuClose={parentMenuClose}
-            items={entryItems}
-          />
-        );
-      }
-
-      const handleItemClick = (event: MouseEvent<HTMLLIElement>) => {
-        onClick?.(event);
-        handleClose();
-        parentMenuClose();
-      };
-
-      return (
-        <MuiMenuItem key={entryKey} onClick={handleItemClick}>
-          <MenuItemContent>
-            {NestedMenuItemStartIcon ? <NestedMenuItemStartIcon /> : null}
-            <Typography sx={{ flex: 1 }}>{entryLabelValue}</Typography>
-            {NestedMenuItemEndIcon ? <NestedMenuItemEndIcon /> : null}
-          </MenuItemContent>
-        </MuiMenuItem>
-      );
-    });
-  };
-
-  const renderedSubMenuItems = items && items.length > 0 ? renderItemsFromData() : renderChildren;
-
-  return (
-    <>
-      <MuiMenuItem
-        data-testid={`${menuItemId}-trigger`}
-        id={menuItemId}
-        ref={menuItemRef}
-        onMouseEnter={handleOpen}
-        onMouseLeave={e => {
-          // CRITICAL FEATURE:
-          // Checking whether cursor left the menu item onto the related menu. If so, do not close.
-          // TODO(ege): There can be a timeout here before we execute closing to improve UX - in case user is not very precise with mouse.
-          if (isNodeInstance(e.relatedTarget) && subMenuRef.current?.contains(e.relatedTarget)) return;
-          // If the cursor leaves to anywhere else, close the submenu.
-          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' : undefined}
-        {...menuItemProps}
-      >
-        <MenuItemContent>
-          {StartIconComponent ? <StartIconComponent /> : null}
-          <Typography sx={{ flex: 1 }}>{label}</Typography>
-          <ArrowRightIcon />
-        </MenuItemContent>
-      </MuiMenuItem>
-
-      <Popper
-        data-testid={`${menuItemId}-submenu`}
-        open={open}
-        ref={subMenuRef}
-        anchorEl={subMenuAnchorEl}
-        transition
-        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 => {
-          // CRITICAL FEATURE:
-          // Checking whether cursor left the submenu onto the related trigger item. If so, do not close.
-          // TODO(ege): There can be a timeout here before we execute closing to improve UX - in case user is not very precise with mouse.
-          if (isNodeInstance(e.relatedTarget) && menuItemRef.current?.contains(e.relatedTarget)) return;
-          // If the cursor leaves to anywhere else, close the submenu.
-          handleClose();
-        }}
-      >
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={transitionConfig.timeout}>
-            <Paper
-              elevation={2}
-              sx={{
-                borderRadius: 1,
-                bgcolor: 'background.default',
-              }}
-            >
-              <MenuList
-                autoFocusItem
-                id={subMenuId}
-                aria-labelledby={menuItemId}
-                role='menu'
-                onKeyDown={e => {
-                  if (e.key === 'ArrowLeft') {
-                    const { nativeEvent } = e as KeyboardEvent<HTMLUListElement> & {
-                      nativeEvent: KeyboardEvent & {
-                        // our custom flag to avoid duplicate handling in nested menus
-                        __nestedMenuArrowLeftHandled?: boolean;
-                      };
-                    };
-                    if (nativeEvent.__nestedMenuArrowLeftHandled) {
-                      // return early if we have already handled this event in a nested menu
-                      // prevents duplicate logic when the browser bubbles the same keypress through multiple nodes
-                      return;
-                    }
-                    if (!subMenuRef.current?.contains(e.target as Node)) {
-                      // confirm the event’s target is still inside this submenu;
-                      // if the keypress originated elsewhere, we don’t continue so other menus can handle it
-                      return;
-                    }
-                    // Mark this event as handled to prevent parent menus from also processing it
-                    nativeEvent.__nestedMenuArrowLeftHandled = true;
-                    e.preventDefault();
-                    e.stopPropagation();
-                    // immediately halt any other listeners so we have exclusive control now
-                    nativeEvent.stopImmediatePropagation();
-                    // close the sub menu
-                    handleClose();
-                    // move focus back to the parent MenuItem, letting the user continue navigation up the menu hierarchy
-                    menuItemRef.current?.focus();
-                  }
-                }}
-              >
-                {renderedSubMenuItems}
-              </MenuList>
-            </Paper>
-          </Fade>
-        )}
-      </Popper>
-    </>
-  );
-};

package/src/Menu/common.ts

@@ -1,18 +0,0 @@
-import { Stack, styled } from '@mui/material';
-import Fade from '@mui/material/Fade';
-
-export const transitionConfig = {
-  type: Fade,
-  timeout: { enter: 100, exit: 100 },
-};
-
-export const MenuItemContent = styled(Stack)(({ theme }) => ({
-  flexDirection: 'row',
-  alignItems: 'center',
-  gap: theme.spacing(1),
-  fontSize: theme.typography.body1.fontSize,
-  '& .MuiSvgIcon-root': {
-    fontSize: theme.typography.body2.fontSize,
-  },
-  padding: 0,
-}));

package/src/Menu/index.tsx

@@ -1,89 +0,0 @@
-import MuiMenu from '@mui/material/Menu';
-import Divider from '@mui/material/Divider';
-import MuiMenuItem from '@mui/material/MenuItem';
-import React, { useId } from 'react';
-import { Typography } from '@mui/material';
-import { NestedMenuItem } from './NestedMenuItem';
-import type { MenuItem } from './types';
-import { MenuItemContent, transitionConfig } from './common';
-
-type Props = {
-  anchorEl: null | HTMLElement;
-  open: boolean;
-  onClose: () => void;
-  items: MenuItem[];
-};
-
-export function Menu({ 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 (
-      <MuiMenuItem key={itemKey} onClick={handleItemClick} {...menuItemProps}>
-        <MenuItemContent>
-          {StartIconComponent ? <StartIconComponent /> : null}
-          <Typography sx={{ flex: 1 }}>{displayLabel}</Typography>
-          {EndIconComponent ? <EndIconComponent /> : null}
-        </MenuItemContent>
-      </MuiMenuItem>
-    );
-  });
-
-  return (
-    <MuiMenu
-      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}
-    </MuiMenu>
-  );
-}

package/src/Menu/types.ts

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

package/src/index.ts

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

package/tsconfig.jest.json

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

package/tsup.config.ts

@@ -1,16 +0,0 @@
-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'
-  ]
-})