Fix menu stories (#1028)

frontend/app/element/menu.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { Button } from "./button";
 import { Menu } from "./menu";
 
@@ -99,14 +99,14 @@ export const DefaultRendererLeftPositioned: Story = {
                 className="boundary"
                 style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
             >
-                <Menu {...modifiedArgs}>
+                <div style={{ position: "absolute", top: 0, left: 0 }}>
-                    <div style={{ position: "absolute", top: 0, left: 0 }}>
+                    <Menu {...modifiedArgs}>
                         <Button className="grey border-radius-3 vertical-padding-6 horizontal-padding-8">
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
-                    </div>
+                    </Menu>
-                </Menu>
+                </div>
             </div>
         );
     },
@@ -117,8 +117,6 @@ export const DefaultRendererLeftPositioned: Story = {
 
 export const DefaultRendererRightPositioned: Story = {
     render: (args) => {
-        const [isMenuVisible, setIsMenuVisible] = useState(false);
-
         const mapItemsWithClick = (items: any[]) => {
             return items.map((item) => ({
                 ...item,
@@ -141,14 +139,14 @@ export const DefaultRendererRightPositioned: Story = {
                 className="boundary"
                 style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
             >
-                <Menu {...modifiedArgs}>
+                <div style={{ position: "absolute", top: 0, right: 0 }}>
-                    <div style={{ position: "absolute", top: 0, right: 0 }}>
+                    <Menu {...modifiedArgs}>
                         <Button className="grey border-radius-3 vertical-padding-6 horizontal-padding-8">
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
-                    </div>
+                    </Menu>
-                </Menu>
+                </div>
             </div>
         );
     },
@@ -181,14 +179,14 @@ export const DefaultRendererBottomRightPositioned: Story = {
                 className="boundary"
                 style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
             >
-                <Menu {...modifiedArgs}>
+                <div style={{ position: "absolute", bottom: 0, left: 0 }}>
-                    <div style={{ position: "absolute", bottom: 0, left: 0 }}>
+                    <Menu {...modifiedArgs} placement="top-end">
                         <Button className="grey border-radius-3 vertical-padding-6 horizontal-padding-8">
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
-                    </div>
+                    </Menu>
-                </Menu>
+                </div>
             </div>
         );
     },
@@ -225,8 +223,8 @@ export const DefaultRendererBottomLeftPositioned: Story = {
                 className="boundary"
                 style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
             >
-                <Menu {...modifiedArgs}>
+                <div style={{ position: "absolute", bottom: 0, right: 0 }}>
-                    <div style={{ position: "absolute", bottom: 0, right: 0 }}>
+                    <Menu {...modifiedArgs} placement="top-end">
                         <Button
                             ref={anchorRef}
                             className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
@@ -234,8 +232,8 @@ export const DefaultRendererBottomLeftPositioned: Story = {
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
-                    </div>
+                    </Menu>
-                </Menu>
+                </div>
             </div>
         );
     },
@@ -274,14 +272,14 @@ export const CustomRenderer: Story = {
 
         return (
             <div className="boundary" style={{ padding: "20px", height: "300px", border: "2px solid black" }}>
-                <Menu {...modifiedArgs} renderMenu={renderMenu} renderMenuItem={renderMenuItem}>
+                <div style={{ height: "400px" }}>
-                    <div style={{ height: "400px" }}>
+                    <Menu {...modifiedArgs} renderMenu={renderMenu} renderMenuItem={renderMenuItem}>
                         <Button className="grey border-radius-3 vertical-padding-6 horizontal-padding-8">
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
-                    </div>
+                    </Menu>
-                </Menu>
+                </div>
             </div>
         );
     },

frontend/app/element/menu.tsx

@@ -1,134 +1,29 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useDismiss, useFloating, useInteractions } from "@floating-ui/react";
+import { type Placement, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import clsx from "clsx";
 import { createRef, Fragment, memo, ReactNode, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import "./menu.less";
 
-const SubMenu = memo(
+type MenuProps = {
-    ({
+    items: MenuItem[];
-        subItems,
+    className?: string;
-        parentKey,
+    placement?: Placement;
-        subMenuPosition,
+    onOpenChange?: (isOpen: boolean) => void;
-        visibleSubMenus,
+    children: ReactNode | ReactNode[];
-        hoveredItems,
+    renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
-        subMenuRefs,
+    renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
-        handleMouseEnterItem,
+};
-        handleOnClick,
-        renderMenu,
-        renderMenuItem,
-    }: {
-        subItems: MenuItem[];
-        parentKey: string;
-        subMenuPosition: {
-            [key: string]: { top: number; left: number; label: string };
-        };
-        visibleSubMenus: { [key: string]: any };
-        hoveredItems: string[];
-        subMenuRefs: React.MutableRefObject<{ [key: string]: React.RefObject<HTMLDivElement> }>;
-        handleMouseEnterItem: (
-            event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-            parentKey: string | null,
-            index: number,
-            item: MenuItem
-        ) => void;
-        handleOnClick: (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => void;
-        renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
-        renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
-    }) => {
-        subItems.forEach((_, idx) => {
-            const newKey = `${parentKey}-${idx}`;
-            if (!subMenuRefs.current[newKey]) {
-                subMenuRefs.current[newKey] = createRef<HTMLDivElement>();
-            }
-        });
 
-        const position = subMenuPosition[parentKey];
+const MenuComponent = memo(
-        const isPositioned = position && position.top !== undefined && position.left !== undefined;
+    ({ items, children, className, placement, onOpenChange, renderMenu, renderMenuItem }: MenuProps) => {
-
-        const subMenu = (
-            <div
-                className="menu sub-menu"
-                ref={subMenuRefs.current[parentKey]}
-                style={{
-                    top: position?.top || 0,
-                    left: position?.left || 0,
-                    position: "absolute",
-                    zIndex: 1000,
-                    visibility: visibleSubMenus[parentKey]?.visible && isPositioned ? "visible" : "hidden",
-                }}
-            >
-                {subItems.map((item, idx) => {
-                    const newKey = `${parentKey}-${idx}`;
-                    const isActive = hoveredItems.includes(newKey);
-
-                    const menuItemProps = {
-                        className: clsx("menu-item", { active: isActive }),
-                        onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
-                            handleMouseEnterItem(event, parentKey, idx, item),
-                        onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
-                    };
-
-                    const renderedItem = renderMenuItem ? (
-                        renderMenuItem(item, menuItemProps) // Remove portal here
-                    ) : (
-                        <div key={newKey} {...menuItemProps}>
-                            <span className="label">{item.label}</span>
-                            {item.subItems && <i className="fa-sharp fa-solid fa-chevron-right"></i>}
-                        </div>
-                    );
-
-                    return (
-                        <Fragment key={newKey}>
-                            {renderedItem}
-                            {visibleSubMenus[newKey]?.visible && item.subItems && (
-                                <SubMenu
-                                    subItems={item.subItems}
-                                    parentKey={newKey}
-                                    subMenuPosition={subMenuPosition}
-                                    visibleSubMenus={visibleSubMenus}
-                                    hoveredItems={hoveredItems}
-                                    handleMouseEnterItem={handleMouseEnterItem}
-                                    handleOnClick={handleOnClick}
-                                    subMenuRefs={subMenuRefs}
-                                    renderMenu={renderMenu}
-                                    renderMenuItem={renderMenuItem}
-                                />
-                            )}
-                        </Fragment>
-                    );
-                })}
-            </div>
-        );
-
-        return ReactDOM.createPortal(renderMenu ? renderMenu(subMenu, { parentKey }) : subMenu, document.body);
-    }
-);
-
-const Menu = memo(
-    ({
-        items,
-        children,
-        className,
-        onOpenChange,
-        renderMenu,
-        renderMenuItem,
-    }: {
-        items: MenuItem[];
-        className?: string;
-        onOpenChange?: (isOpen: boolean) => void;
-        children: ReactNode | ReactNode[];
-        renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
-        renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
-    }) => {
         const [visibleSubMenus, setVisibleSubMenus] = useState<{ [key: string]: any }>({});
         const [hoveredItems, setHoveredItems] = useState<string[]>([]);
         const [subMenuPosition, setSubMenuPosition] = useState<{
             [key: string]: { top: number; left: number; label: string };
         }>({});
-        const menuRef = useRef<HTMLDivElement>(null);
         const subMenuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>({});
 
         const [isOpen, setIsOpen] = useState(false);
@@ -137,7 +32,7 @@ const Menu = memo(
             onOpenChange?.(isOpen);
         };
         const { refs, floatingStyles, context } = useFloating({
-            placement: "bottom-start",
+            placement: placement ?? "bottom-start",
             open: isOpen,
             onOpenChange: onOpenChangeMenu,
         });
@@ -152,12 +47,7 @@ const Menu = memo(
         });
 
         // Position submenus based on available space and scroll position
-        const handleSubMenuPosition = (
+        const handleSubMenuPosition = (key: string, itemRect: DOMRect, label: string) => {
-            key: string,
-            itemRect: DOMRect,
-            parentRef: React.RefObject<HTMLDivElement>,
-            label: string
-        ) => {
             setTimeout(() => {
                 const subMenuRef = subMenuRefs.current[key]?.current;
                 if (!subMenuRef) return;
@@ -230,7 +120,7 @@ const Menu = memo(
             setHoveredItems(newHoveredItems);
 
             const itemRect = event.currentTarget.getBoundingClientRect();
-            handleSubMenuPosition(key, itemRect, menuRef, item.label);
+            handleSubMenuPosition(key, itemRect, item.label);
         };
 
         const handleOnClick = (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => {
@@ -304,4 +194,108 @@ const Menu = memo(
     }
 );
 
+const Menu = memo(MenuComponent) as typeof MenuComponent;
+
+type SubMenuProps = {
+    subItems: MenuItem[];
+    parentKey: string;
+    subMenuPosition: {
+        [key: string]: { top: number; left: number; label: string };
+    };
+    visibleSubMenus: { [key: string]: any };
+    hoveredItems: string[];
+    subMenuRefs: React.MutableRefObject<{ [key: string]: React.RefObject<HTMLDivElement> }>;
+    handleMouseEnterItem: (
+        event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        parentKey: string | null,
+        index: number,
+        item: MenuItem
+    ) => void;
+    handleOnClick: (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => void;
+    renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
+    renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
+};
+
+const SubMenu = memo(
+    ({
+        subItems,
+        parentKey,
+        subMenuPosition,
+        visibleSubMenus,
+        hoveredItems,
+        subMenuRefs,
+        handleMouseEnterItem,
+        handleOnClick,
+        renderMenu,
+        renderMenuItem,
+    }: SubMenuProps) => {
+        subItems.forEach((_, idx) => {
+            const newKey = `${parentKey}-${idx}`;
+            if (!subMenuRefs.current[newKey]) {
+                subMenuRefs.current[newKey] = createRef<HTMLDivElement>();
+            }
+        });
+
+        const position = subMenuPosition[parentKey];
+        const isPositioned = position && position.top !== undefined && position.left !== undefined;
+
+        const subMenu = (
+            <div
+                className="menu sub-menu"
+                ref={subMenuRefs.current[parentKey]}
+                style={{
+                    top: position?.top || 0,
+                    left: position?.left || 0,
+                    position: "absolute",
+                    zIndex: 1000,
+                    visibility: visibleSubMenus[parentKey]?.visible && isPositioned ? "visible" : "hidden",
+                }}
+            >
+                {subItems.map((item, idx) => {
+                    const newKey = `${parentKey}-${idx}`;
+                    const isActive = hoveredItems.includes(newKey);
+
+                    const menuItemProps = {
+                        className: clsx("menu-item", { active: isActive }),
+                        onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+                            handleMouseEnterItem(event, parentKey, idx, item),
+                        onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
+                    };
+
+                    const renderedItem = renderMenuItem ? (
+                        renderMenuItem(item, menuItemProps) // Remove portal here
+                    ) : (
+                        <div key={newKey} {...menuItemProps}>
+                            <span className="label">{item.label}</span>
+                            {item.subItems && <i className="fa-sharp fa-solid fa-chevron-right"></i>}
+                        </div>
+                    );
+
+                    return (
+                        <Fragment key={newKey}>
+                            {renderedItem}
+                            {visibleSubMenus[newKey]?.visible && item.subItems && (
+                                <SubMenu
+                                    subItems={item.subItems}
+                                    parentKey={newKey}
+                                    subMenuPosition={subMenuPosition}
+                                    visibleSubMenus={visibleSubMenus}
+                                    hoveredItems={hoveredItems}
+                                    handleMouseEnterItem={handleMouseEnterItem}
+                                    handleOnClick={handleOnClick}
+                                    subMenuRefs={subMenuRefs}
+                                    renderMenu={renderMenu}
+                                    renderMenuItem={renderMenuItem}
+                                />
+                            )}
+                        </Fragment>
+                    );
+                })}
+            </div>
+        );
+
+        return ReactDOM.createPortal(renderMenu ? renderMenu(subMenu, { parentKey }) : subMenu, document.body);
+    }
+);
+
 export { Menu };

frontend/types/custom.d.ts

@@ -1,6 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { type Placement } from "@floating-ui/react";
 import type * as jotai from "jotai";
 import type * as rxjs from "rxjs";
 
@@ -237,6 +238,7 @@ declare global {
         className?: string;
         text: string;
         title?: string;
+        menuPlacement?: Placement;
     };
 
     type MenuButton = {