Updated submenu code

Author: matthewlipski

packages/mantine/src/menu/Menu.tsx

@@ -2,19 +2,10 @@ import {
   CheckIcon as MantineCheckIcon,
   Menu as MantineMenu,
 } from "@mantine/core";
-import { mergeRefs } from "@mantine/hooks";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
-import {
-  createContext,
-  forwardRef,
-  useCallback,
-  useContext,
-  useRef,
-  useState,
-} from "react";
-import { HiChevronRight } from "react-icons/hi";
+import { createContext, forwardRef, useContext } from "react";
 
 const SubMenuContext = createContext<
   | {
@@ -24,128 +15,26 @@ const SubMenuContext = createContext<
   | undefined
 >(undefined);
 
-// https://github.com/orgs/mantinedev/discussions/2307
-// Mantine does not officially support sub menus, so we have to use a workaround
-// which uses an unconventional nesting structure:
-//
-//  Conventional nesting structure (used by Ariakit/ShadCN):
-// <Menu>
-//   <MenuTrigger>
-//     <MenuItem>Find</MenuItem>
-//   </MenuTrigger>
-//   <MenuDropdown>
-//     <MenuItem>Undo</MenuItem>
-//     <MenuItem>Redo</MenuItem>
-//     <Menu>
-//       <MenuTrigger>
-//         <MenuItem>Find</MenuItem>
-//       </MenuTrigger>
-//       <MenuDropdown>
-//         <MenuItem>Find Next</MenuItem>
-//         <MenuItem>Find Previous</MenuItem>
-//       </MenuDropdown>
-//     </Menu>
-//   </MenuDropdown>
-// </Menu>
-//
-//  Required structure for Mantine:
-// <Menu>
-//   <MenuTrigger>
-//       <MenuItem>Find</MenuItem>
-//   </MenuTrigger>
-//   <MenuDropdown>
-//     <MenuItem>Undo</MenuItem>
-//     <MenuItem>Redo</MenuItem>
-//     <MenuItem>
-//       <Menu>
-//         <MenuTrigger>
-//             <div>Find</div>
-//         </MenuTrigger>
-//         <MenuDropdown>
-//           <MenuItem>Find Next</MenuItem>
-//           <MenuItem>Find Previous</MenuItem>
-//         </MenuDropdown>
-//       </Menu>
-//     </MenuItem>
-//   </MenuDropdown>
-// </Menu>
-const SubMenu = forwardRef<
-  HTMLButtonElement,
-  ComponentProps["Generic"]["Menu"]["Root"]
->((props, ref) => {
-  const {
-    children,
-    onOpenChange,
-    position,
-    sub, // not used
-    ...rest
-  } = props;
-
-  assertEmpty(rest);
-
-  const [opened, setOpened] = useState(false);
-
-  const itemRef = useRef<HTMLButtonElement | null>(null);
-
-  const menuCloseTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
-
-  const mouseLeave = useCallback(() => {
-    if (menuCloseTimer.current) {
-      clearTimeout(menuCloseTimer.current);
-    }
-    menuCloseTimer.current = setTimeout(() => {
-      setOpened(false);
-    }, 250);
-  }, []);
-
-  const mouseOver = useCallback(() => {
-    if (menuCloseTimer.current) {
-      clearTimeout(menuCloseTimer.current);
-    }
-    setOpened(true);
-  }, []);
-
-  return (
-    <SubMenuContext.Provider
-      value={{
-        onMenuMouseOver: mouseOver,
-        onMenuMouseLeave: mouseLeave,
-      }}
-    >
-      <MantineMenu.Item
-        className="bn-menu-item bn-mt-sub-menu-item"
-        ref={mergeRefs(ref, itemRef)}
-        onMouseOver={mouseOver}
-        onMouseLeave={mouseLeave}
-      >
-        <MantineMenu
-          portalProps={{
-            target: itemRef.current
-              ? itemRef.current.parentElement!
-              : undefined,
-          }}
-          middlewares={{ flip: true, shift: true, inline: false, size: true }}
-          trigger={"hover"}
-          opened={opened}
-          onChange={onOpenChange}
-          position={position}
-        >
-          {children}
-        </MantineMenu>
-      </MantineMenu.Item>
-    </SubMenuContext.Provider>
-  );
-});
-
 export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
   const { children, onOpenChange, position, sub, ...rest } = props;
 
   assertEmpty(rest);
 
   if (sub) {
-    return <SubMenu {...props} />;
+    return (
+      <MantineMenu.Sub
+        transitionProps={{ duration: 250, exitDelay: 250 }}
+        withinPortal={false}
+        middlewares={{ flip: true, shift: true, inline: false, size: true }}
+        // For some reason, `onChange` is not supported in submenus yet
+        // `onOpen` and `onClose` are.
+        onOpen={() => onOpenChange?.(true)}
+        onClose={() => onOpenChange?.(false)}
+        position={position}
+      >
+        {children}
+      </MantineMenu.Sub>
+    );
   }
 
   return (
@@ -173,17 +62,22 @@ export const MenuItem = forwardRef<
 
   if (subTrigger) {
     return (
-      <div
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
+      <MantineMenu.Sub.Item
+        className={className}
         ref={ref}
+        leftSection={icon}
+        rightSection={
+          checked ? (
+            <MantineCheckIcon size={10} />
+          ) : checked === false ? (
+            <div className={"bn-tick-space"} />
+          ) : null
+        }
+        onClick={onClick}
         {...rest}
       >
         {children}
-        <HiChevronRight size={15} />
-      </div>
+      </MantineMenu.Sub.Item>
     );
   }
 
@@ -218,6 +112,10 @@ export const MenuTrigger = (
 
   assertEmpty(rest);
 
+  if (sub) {
+    return <MantineMenu.Sub.Target>{children}</MantineMenu.Sub.Target>;
+  }
+
   return <MantineMenu.Target>{children}</MantineMenu.Target>;
 };
 
@@ -236,6 +134,19 @@ export const MenuDropdown = forwardRef<
 
   const ctx = useContext(SubMenuContext);
 
+  if (sub) {
+    return (
+      <MantineMenu.Sub.Dropdown
+        className={className}
+        ref={ref}
+        onMouseOver={ctx?.onMenuMouseOver}
+        onMouseLeave={ctx?.onMenuMouseLeave}
+      >
+        {children}
+      </MantineMenu.Sub.Dropdown>
+    );
+  }
+
   return (
     <MantineMenu.Dropdown
       className={className}

packages/mantine/src/style.css

@@ -38,7 +38,7 @@
 }
 
 /* Mantine Menu component base styles */
-.bn-mantine .mantine-Menu-dropdown {
+.bn-mantine .bn-menu-dropdown {
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
@@ -69,7 +69,7 @@
 }
 
 /* Mantine Popover component base styles */
-.bn-mantine .mantine-Popover-dropdown {
+.bn-mantine .mantine-Popover-dropdown:not(.bn-menu-dropdown) {
   background-color: transparent;
   border: none;
   border-radius: 0;
@@ -609,14 +609,6 @@
   width: 20px;
 }
 
-.bn-mt-sub-menu-item
-  > .mantine-Menu-itemLabel
-  > div:not(.mantine-Menu-dropdown) {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
 /* Comment styling */
 .bn-mantine .bn-thread {
   background-color: var(--bn-colors-menu-background);