menu (#846)

.storybook/global.css

@@ -1,6 +1,7 @@
 body {
     height: 100vh;
     padding: 0;
+    overflow: auto;
 }
 
 #storybook-root {

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css" />
+<link rel="stylesheet" href="/fontawesome/css/brands.min.css" />
+<link rel="stylesheet" href="/fontawesome/css/solid.min.css" />
+<link rel="stylesheet" href="/fontawesome/css/sharp-solid.min.css" />
+<link rel="stylesheet" href="/fontawesome/css/sharp-regular.min.css" />

.storybook/preview.tsx

@@ -3,6 +3,9 @@ import type { Preview } from "@storybook/react";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import "../frontend/app/theme.less";
+import "../frontend/app/app.less";
+import "../frontend/app/reset.less";
 import "./global.css";
 
 const preview: Preview = {

frontend/app/element/button.less

@@ -5,7 +5,7 @@
     // override default button appearance
     border: 1px solid transparent;
     outline: 1px solid transparent;
-    border: none;
+    border: 1px solid transparent;
 
     cursor: pointer;
     display: flex;
@@ -150,8 +150,7 @@
         pointer-events: none;
     }
 
-    &:focus,
-    &.focus {
+    &:focus-visible {
         outline: 1px solid var(--success-color);
         outline-offset: 2px;
     }

frontend/app/element/button.stories.tsx

@@ -0,0 +1,121 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Button } from "./button";
+
+const meta = {
+    title: "Elements/Button",
+    component: Button,
+    args: {
+        children: "Click Me",
+        disabled: false,
+        className: "",
+        onClick: fn(),
+    },
+    argTypes: {
+        onClick: {
+            action: "clicked",
+            description: "Click event handler",
+        },
+        children: {
+            description: "Content inside the button",
+        },
+        disabled: {
+            description: "Disables the button if true",
+        },
+        className: {
+            description: "Additional class names to style the button",
+        },
+    },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+        children: "Disabled Button",
+    },
+};
+
+export const GreySolid: Story = {
+    args: {
+        className: "solid grey",
+        children: "Grey Solid Button",
+    },
+};
+
+export const RedSolid: Story = {
+    args: {
+        className: "solid red",
+        children: "Red Solid Button",
+    },
+};
+
+export const YellowSolid: Story = {
+    args: {
+        className: "solid yellow",
+        children: "Yellow Solid Button",
+    },
+};
+
+export const GreenOutlined: Story = {
+    args: {
+        className: "outlined green",
+        children: "Green Outline Button",
+    },
+};
+
+export const GreyOutlined: Story = {
+    args: {
+        className: "outlined grey",
+        children: "Grey Outline Button",
+    },
+};
+
+export const RedOutlined: Story = {
+    args: {
+        className: "outlined red",
+        children: "Red Outline Button",
+    },
+};
+
+export const YellowOutlined: Story = {
+    args: {
+        className: "outlined yellow",
+        children: "Yellow Outline Button",
+    },
+};
+
+export const GreenGhostText: Story = {
+    args: {
+        className: "ghost green",
+        children: "Yellow Ghost Text Button",
+    },
+};
+
+export const GreyGhostText: Story = {
+    args: {
+        className: "ghost grey",
+        children: "Grey Ghost Text Button",
+    },
+};
+
+export const RedGhost: Story = {
+    args: {
+        className: "ghost red",
+        children: "Red Ghost Text Button",
+    },
+};
+
+export const YellowGhostText: Story = {
+    args: {
+        className: "ghost yellow",
+        children: "Yellow Ghost Text Button",
+    },
+};

frontend/app/element/button.tsx

@@ -9,41 +9,39 @@ import "./button.less";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     children?: ReactNode;
-    target?: string;
-    source?: string;
 }
 
 const Button = memo(
-    forwardRef<HTMLButtonElement, ButtonProps>(
-        ({ children, disabled, source, className = "", ...props }: ButtonProps, ref) => {
-            const btnRef = useRef<HTMLButtonElement>(null);
-            useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
+    forwardRef<HTMLButtonElement, ButtonProps>(({ children, disabled, className = "", ...props }: ButtonProps, ref) => {
+        const btnRef = useRef<HTMLButtonElement>(null);
+        useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
 
-            const childrenArray = Children.toArray(children);
+        const childrenArray = Children.toArray(children);
 
-            // Check if the className contains any of the categories: solid, outlined, or ghost
-            const containsButtonCategory = /(solid|outline|ghost)/.test(className);
-            // If no category is present, default to 'solid'
-            const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
+        // Check if the className contains any of the categories: solid, outlined, or ghost
+        const containsButtonCategory = /(solid|outline|ghost)/.test(className);
+        // If no category is present, default to 'solid'
+        const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
 
-            // Check if the className contains any of the color options: green, grey, red, or yellow
-            const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
-            // If no color is present, default to 'green'
-            const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
+        // Check if the className contains any of the color options: green, grey, red, or yellow
+        const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
+        // If no color is present, default to 'green'
+        const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
 
-            return (
-                <button
-                    ref={btnRef}
-                    tabIndex={disabled ? -1 : 0}
-                    className={clsx("button", finalClassName)}
-                    disabled={disabled}
-                    {...props}
-                >
-                    {childrenArray}
-                </button>
-            );
-        }
-    )
+        return (
+            <button
+                ref={btnRef}
+                tabIndex={disabled ? -1 : 0}
+                className={clsx("button", finalClassName)}
+                disabled={disabled}
+                {...props}
+            >
+                {childrenArray}
+            </button>
+        );
+    })
 );
 
+Button.displayName = "Button";
+
 export { Button };

frontend/app/element/menu.less

@@ -0,0 +1,55 @@
+.menu {
+    position: absolute;
+    z-index: 1000; // TODO: put this in theme.less
+    display: flex;
+    width: 125px; /* Ensure the menu has a fixed width */
+    padding: 2px;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 1px;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: #212121;
+    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
+
+    .menu-item {
+        padding: 4px 6px;
+        cursor: pointer;
+        color: #fff;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        letter-spacing: -0.12px;
+        width: 100%;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        /* Make sure the label and the icon don't overlap */
+        .label {
+            flex: 1; /* Allow the label to take up available space */
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-right: 8px; /* Add some space between label and icon */
+        }
+
+        i {
+            color: var(--main-text-color);
+            flex-shrink: 0; /* Prevent icon from shrinking */
+        }
+
+        &:hover,
+        &.active {
+            background-color: var(--accent-color);
+            color: var(--button-text-color);
+
+            i {
+                color: var(--button-text-color);
+            }
+        }
+    }
+}

frontend/app/element/menu.stories.tsx

@@ -0,0 +1,471 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "./button";
+import { Menu } from "./menu";
+
+const items = [
+    { label: "Fruit", onClick: (e) => console.log("Clicked Option 1") },
+    {
+        label: "Vegetables",
+        subItems: [
+            { label: "Carrot", onClick: (e) => console.log("Clicked Option 2 -> 1") },
+            { label: "Potato", onClick: (e) => console.log("Clicked Option 2 -> 2") },
+        ],
+    },
+    {
+        label: "Beverages",
+        subItems: [
+            { label: "Juice", onClick: (e) => console.log("Clicked Option 3 -> 1") },
+            { label: "Tea", onClick: (e) => console.log("Clicked Option 3 -> 2") },
+            {
+                label: "Coffee",
+                subItems: [
+                    { label: "Espresso", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 1") },
+                    { label: "Latte", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 2") },
+                    { label: "Cappuccino", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 3") },
+                    {
+                        label: "Mocha",
+                        subItems: [
+                            { label: "Dark Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 1") },
+                            {
+                                label: "White Chocolate",
+                                onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 2"),
+                            },
+                            { label: "Milk Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 3") },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        label: "Desserts",
+        subItems: [
+            { label: "Cake", onClick: (e) => console.log("Clicked Option 4 -> 1") },
+            { label: "Ice Cream", onClick: (e) => console.log("Clicked Option 4 -> 2") },
+            { label: "Cookies", onClick: (e) => console.log("Clicked Option 4 -> 3") },
+            { label: "Brownies", onClick: (e) => console.log("Clicked Option 4 -> 4") },
+            { label: "Cupcakes", onClick: (e) => console.log("Clicked Option 4 -> 5") },
+            { label: "Donuts", onClick: (e) => console.log("Clicked Option 4 -> 6") },
+            { label: "Pie", onClick: (e) => console.log("Clicked Option 4 -> 7") },
+        ],
+    },
+];
+
+const meta = {
+    title: "Elements/Menu",
+    component: Menu,
+    args: {
+        items: [],
+        anchorRef: undefined,
+        scopeRef: undefined,
+        initialPosition: undefined,
+        className: "",
+        setVisibility: fn(),
+    },
+    argTypes: {
+        items: {
+            description: "Items of menu",
+        },
+        anchorRef: {
+            description: "Element to attach the menu",
+        },
+        initialPosition: {
+            description: "Initial position of the menu",
+        },
+        setVisibility: {
+            description: "Visibility event handler",
+        },
+        scopeRef: {
+            description: "Component that defines the boundaries of the menu",
+        },
+        className: {
+            description: "Custom className",
+        },
+    },
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DefaultRendererLeftPositioned: Story = {
+    render: (args) => {
+        const anchorRef = useRef<HTMLButtonElement>(null);
+        const scopeRef = useRef<HTMLDivElement>(null);
+        const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+        const handleAnchorClick = () => {
+            setIsMenuVisible((prev) => !prev);
+        };
+
+        const mapItemsWithClick = (items: any[]) => {
+            return items.map((item) => ({
+                ...item,
+                onClick: () => {
+                    if (item.onClick) {
+                        item.onClick();
+                        setIsMenuVisible(false);
+                    }
+                },
+                subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
+            }));
+        };
+
+        const modifiedArgs = {
+            ...args,
+            items: mapItemsWithClick(args.items),
+        };
+
+        return (
+            <div
+                ref={scopeRef}
+                className="boundary"
+                style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
+            >
+                <div style={{ position: "absolute", top: 0, left: 0 }}>
+                    <Button
+                        ref={anchorRef}
+                        className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
+                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
+                        onClick={handleAnchorClick}
+                    >
+                        Anchor Element
+                        <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
+                    </Button>
+                </div>
+                {isMenuVisible && (
+                    <Menu
+                        {...modifiedArgs}
+                        setVisibility={(visible) => setIsMenuVisible(visible)}
+                        anchorRef={anchorRef}
+                        scopeRef={scopeRef}
+                    />
+                )}
+            </div>
+        );
+    },
+    args: {
+        items: items,
+    },
+};
+
+export const DefaultRendererRightPositioned: Story = {
+    render: (args) => {
+        const anchorRef = useRef<HTMLButtonElement>(null);
+        const scopeRef = useRef<HTMLDivElement>(null);
+        const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+        const handleAnchorClick = () => {
+            setIsMenuVisible((prev) => !prev);
+        };
+
+        const mapItemsWithClick = (items: any[]) => {
+            return items.map((item) => ({
+                ...item,
+                onClick: () => {
+                    if (item.onClick) {
+                        item.onClick();
+                    }
+                    setIsMenuVisible(false);
+                },
+                subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
+            }));
+        };
+
+        const modifiedArgs = {
+            ...args,
+            items: mapItemsWithClick(args.items),
+        };
+
+        return (
+            <div
+                ref={scopeRef}
+                className="boundary"
+                style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
+            >
+                <div style={{ position: "absolute", top: 0, right: 0 }}>
+                    <Button
+                        ref={anchorRef}
+                        className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
+                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
+                        onClick={handleAnchorClick}
+                    >
+                        Anchor Element
+                        <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
+                    </Button>
+                </div>
+                {isMenuVisible && (
+                    <Menu
+                        {...modifiedArgs}
+                        setVisibility={(visible) => setIsMenuVisible(visible)}
+                        anchorRef={anchorRef}
+                        scopeRef={scopeRef}
+                    />
+                )}
+            </div>
+        );
+    },
+    args: {
+        items: items,
+    },
+};
+
+export const DefaultRendererBottomRightPositioned: Story = {
+    render: (args) => {
+        const anchorRef = useRef<HTMLButtonElement>(null);
+        const scopeRef = useRef<HTMLDivElement>(null);
+        const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+        const handleAnchorClick = () => {
+            setIsMenuVisible((prev) => !prev);
+        };
+
+        const mapItemsWithClick = (items: any[]) => {
+            return items.map((item) => ({
+                ...item,
+                onClick: () => {
+                    if (item.onClick) {
+                        item.onClick();
+                    }
+                    setIsMenuVisible(false);
+                },
+                subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
+            }));
+        };
+
+        const modifiedArgs = {
+            ...args,
+            items: mapItemsWithClick(args.items),
+        };
+
+        return (
+            <div
+                ref={scopeRef}
+                className="boundary"
+                style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
+            >
+                <div style={{ position: "absolute", bottom: 0, left: 0 }}>
+                    <Button
+                        ref={anchorRef}
+                        className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
+                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
+                        onClick={handleAnchorClick}
+                    >
+                        Anchor Element
+                        <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
+                    </Button>
+                </div>
+                {isMenuVisible && (
+                    <Menu
+                        {...modifiedArgs}
+                        setVisibility={(visible) => setIsMenuVisible(visible)}
+                        anchorRef={anchorRef}
+                        scopeRef={scopeRef}
+                    />
+                )}
+            </div>
+        );
+    },
+    args: {
+        items: items,
+    },
+};
+
+export const DefaultRendererBottomLeftPositioned: Story = {
+    render: (args) => {
+        const anchorRef = useRef<HTMLButtonElement>(null);
+        const scopeRef = useRef<HTMLDivElement>(null);
+        const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+        const handleAnchorClick = () => {
+            setIsMenuVisible((prev) => !prev);
+        };
+
+        const mapItemsWithClick = (items: any[]) => {
+            return items.map((item) => ({
+                ...item,
+                onClick: () => {
+                    if (item.onClick) {
+                        item.onClick();
+                    }
+                    setIsMenuVisible(false);
+                },
+                subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
+            }));
+        };
+
+        const modifiedArgs = {
+            ...args,
+            items: mapItemsWithClick(args.items),
+        };
+
+        return (
+            <div
+                ref={scopeRef}
+                className="boundary"
+                style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
+            >
+                <div style={{ position: "absolute", bottom: 0, right: 0 }}>
+                    <Button
+                        ref={anchorRef}
+                        className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
+                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
+                        onClick={handleAnchorClick}
+                    >
+                        Anchor Element
+                        <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
+                    </Button>
+                </div>
+                {isMenuVisible && (
+                    <Menu
+                        {...modifiedArgs}
+                        setVisibility={(visible) => setIsMenuVisible(visible)}
+                        anchorRef={anchorRef}
+                        scopeRef={scopeRef}
+                    />
+                )}
+            </div>
+        );
+    },
+    args: {
+        items: items,
+    },
+};
+
+export const CustomRenderer: Story = {
+    render: (args) => {
+        const anchorRef = useRef<HTMLButtonElement>(null);
+        const scopeRef = useRef<HTMLDivElement>(null);
+        const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+        const handleAnchorClick = () => {
+            setIsMenuVisible((prev) => !prev);
+        };
+
+        const mapItemsWithClick = (items: any[]) => {
+            return items.map((item) => ({
+                ...item,
+                onClick: () => {
+                    if (item.onClick) {
+                        item.onClick();
+                    }
+                    setIsMenuVisible(false);
+                },
+                subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
+            }));
+        };
+
+        const renderMenuItem = (item: any, props: any) => (
+            <div {...props}>
+                <strong>{item.label}</strong>
+                {item.subItems && <span style={{ marginLeft: "10px", color: "#888" }}>▶</span>}
+            </div>
+        );
+
+        const renderMenu = (subMenu: JSX.Element) => <div>{subMenu}</div>;
+
+        const modifiedArgs = {
+            ...args,
+            items: mapItemsWithClick(args.items),
+        };
+
+        return (
+            <div
+                ref={scopeRef}
+                className="boundary"
+                style={{ padding: "20px", height: "300px", border: "2px solid black" }}
+            >
+                <div style={{ height: "400px" }}>
+                    <Button
+                        ref={anchorRef}
+                        className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
+                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
+                        onClick={handleAnchorClick}
+                    >
+                        Anchor Element
+                        <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
+                    </Button>
+                </div>
+                {isMenuVisible && (
+                    <Menu
+                        {...modifiedArgs}
+                        setVisibility={(visible) => setIsMenuVisible(visible)}
+                        anchorRef={anchorRef}
+                        scopeRef={scopeRef}
+                        renderMenu={renderMenu}
+                        renderMenuItem={renderMenuItem}
+                    />
+                )}
+            </div>
+        );
+    },
+    args: {
+        items: items,
+    },
+};
+
+export const ContextMenu: Story = {
+    render: (args) => {
+        const scopeRef = useRef<HTMLDivElement>(null);
+        const [isMenuVisible, setIsMenuVisible] = useState(false);
+        const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+
+        const handleBlockRightClick = (e: MouseEvent) => {
+            e.preventDefault(); // Prevent the default context menu
+            setMenuPosition({ top: e.clientY, left: e.clientX });
+            setIsMenuVisible(true);
+        };
+
+        useEffect(() => {
+            const blockElement = scopeRef.current;
+            if (blockElement) {
+                blockElement.addEventListener("contextmenu", handleBlockRightClick);
+            }
+
+            return () => {
+                if (blockElement) {
+                    blockElement.removeEventListener("contextmenu", handleBlockRightClick);
+                }
+            };
+        }, []);
+
+        const mapItemsWithClick = (items: any[]) => {
+            return items.map((item) => ({
+                ...item,
+                onClick: () => {
+                    if (item.onClick) {
+                        item.onClick();
+                        setIsMenuVisible(false);
+                    }
+                },
+                subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
+            }));
+        };
+
+        const modifiedArgs = {
+            ...args,
+            items: mapItemsWithClick(args.items),
+        };
+
+        return (
+            <div
+                ref={scopeRef}
+                className="boundary"
+                style={{ padding: "20px", height: "300px", border: "2px solid black" }}
+            >
+                {isMenuVisible && (
+                    <Menu
+                        {...modifiedArgs}
+                        setVisibility={(visible) => setIsMenuVisible(visible)}
+                        initialPosition={menuPosition}
+                        scopeRef={scopeRef}
+                    />
+                )}
+            </div>
+        );
+    },
+    args: {
+        items: items,
+    },
+};

frontend/app/element/menu.tsx

@@ -0,0 +1,438 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useHeight } from "@/app/hook/useHeight";
+import { useWidth } from "@/app/hook/useWidth";
+import clsx from "clsx";
+import React, { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+
+import "./menu.less";
+
+type MenuItem = {
+    label: string;
+    subItems?: MenuItem[];
+    onClick?: (e) => void;
+};
+
+const SubMenu = memo(
+    ({
+        subItems,
+        parentKey,
+        subMenuPosition,
+        visibleSubMenus,
+        hoveredItems,
+        subMenuRefs,
+        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] = React.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 (
+                        <React.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}
+                                />
+                            )}
+                        </React.Fragment>
+                    );
+                })}
+            </div>
+        );
+
+        return ReactDOM.createPortal(renderMenu ? renderMenu(subMenu, { parentKey }) : subMenu, document.body);
+    }
+);
+
+const Menu = memo(
+    ({
+        items,
+        anchorRef,
+        scopeRef,
+        initialPosition,
+        className,
+        setVisibility,
+        renderMenu,
+        renderMenuItem,
+    }: {
+        items: MenuItem[];
+        anchorRef: React.RefObject<any>;
+        scopeRef?: React.RefObject<HTMLElement>;
+        initialPosition?: { top: number; left: number };
+        className?: string;
+        setVisibility: (_: boolean) => void;
+        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 [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+        const menuRef = useRef<HTMLDivElement>(null);
+        const subMenuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>({});
+
+        const width = useWidth(scopeRef);
+        const height = useHeight(scopeRef);
+
+        items.forEach((_, idx) => {
+            const key = `${idx}`;
+            if (!subMenuRefs.current[key]) {
+                subMenuRefs.current[key] = React.createRef<HTMLDivElement>();
+            }
+        });
+
+        useLayoutEffect(() => {
+            const shadowOffset = 10; // Adjust for box shadow space
+
+            if (initialPosition) {
+                // Adjust position if initialPosition is provided
+                let { top, left } = initialPosition;
+
+                const scrollTop = window.scrollY || document.documentElement.scrollTop;
+                const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+
+                const menuWidth = menuRef.current?.offsetWidth || 0;
+                const menuHeight = menuRef.current?.offsetHeight || 0;
+
+                const boundaryTop = 0;
+                const boundaryLeft = 0;
+                const boundaryRight = window.innerWidth + scrollLeft;
+                const boundaryBottom = window.innerHeight + scrollTop;
+
+                // Adjust if the menu overflows the right boundary
+                if (left + menuWidth > boundaryRight) {
+                    left = boundaryRight - menuWidth - shadowOffset; // Shift left more for shadow
+                }
+
+                // Adjust if the menu overflows the bottom boundary: move the menu upwards so its bottom edge aligns with the initial position
+                if (top + menuHeight > boundaryBottom) {
+                    top = initialPosition.top - menuHeight - shadowOffset; // Shift up for shadow
+                }
+
+                // Adjust if the menu overflows the left boundary
+                if (left < boundaryLeft) {
+                    left = boundaryLeft + shadowOffset; // Add shadow offset from the left edge
+                }
+
+                // Adjust if the menu overflows the top boundary
+                if (top < boundaryTop) {
+                    top = boundaryTop + shadowOffset; // Add shadow offset from the top edge
+                }
+
+                setPosition({ top, left });
+            } else if (anchorRef.current && menuRef.current) {
+                // Calculate position based on anchorRef if it exists
+                const anchorRect = anchorRef.current.getBoundingClientRect();
+                const scrollTop = window.scrollY || document.documentElement.scrollTop;
+                const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+
+                let top = anchorRect.bottom + scrollTop;
+                let left = anchorRect.left + scrollLeft;
+
+                const menuWidth = menuRef.current.offsetWidth;
+                const menuHeight = menuRef.current.offsetHeight;
+
+                const boundaryTop = 0;
+                const boundaryLeft = 0;
+                const boundaryRight = window.innerWidth + scrollLeft;
+                const boundaryBottom = window.innerHeight + scrollTop;
+
+                // Adjust if the menu overflows the right boundary
+                if (left + menuWidth > boundaryRight) {
+                    left = boundaryRight - menuWidth;
+                }
+
+                // Adjust if the menu overflows the bottom boundary: move the menu upwards so its bottom edge aligns with the anchor top
+                if (top + menuHeight > boundaryBottom) {
+                    top = anchorRect.top + scrollTop - menuHeight;
+                }
+
+                // Adjust if the menu overflows the left boundary
+                if (left < boundaryLeft) {
+                    left = boundaryLeft;
+                }
+
+                // Adjust if the menu overflows the top boundary
+                if (top < boundaryTop) {
+                    top = boundaryTop;
+                }
+
+                setPosition({ top, left });
+            } else {
+                console.warn("Neither initialPosition nor anchorRef provided. Defaulting to { top: 0, left: 0 }.");
+            }
+        }, [width, height, initialPosition]);
+
+        useEffect(() => {
+            const handleClickOutside = (event: MouseEvent) => {
+                const isClickInsideDropdown = menuRef.current && menuRef.current.contains(event.target as Node);
+
+                const isClickInsideAnchor = anchorRef?.current
+                    ? anchorRef.current.contains(event.target as Node)
+                    : false;
+
+                const isClickInsideSubMenus = Object.keys(subMenuRefs.current).some(
+                    (key) =>
+                        subMenuRefs.current[key]?.current &&
+                        subMenuRefs.current[key]?.current.contains(event.target as Node)
+                );
+
+                if (!isClickInsideDropdown && !isClickInsideAnchor && !isClickInsideSubMenus) {
+                    setVisibility(false);
+                }
+            };
+
+            scopeRef?.current?.addEventListener("mousedown", handleClickOutside);
+
+            return () => {
+                scopeRef?.current?.removeEventListener("mousedown", handleClickOutside);
+            };
+        }, []);
+
+        // Position submenus based on available space and scroll position
+        const handleSubMenuPosition = (
+            key: string,
+            itemRect: DOMRect,
+            parentRef: React.RefObject<HTMLDivElement>,
+            label: string
+        ) => {
+            setTimeout(() => {
+                const subMenuRef = subMenuRefs.current[key]?.current;
+                if (!subMenuRef) return;
+
+                const scrollTop = window.scrollY || document.documentElement.scrollTop;
+                const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+
+                const submenuWidth = subMenuRef.offsetWidth;
+                const submenuHeight = subMenuRef.offsetHeight;
+
+                let left = itemRect.right + scrollLeft - 2; // Adjust for horizontal scroll
+                let top = itemRect.top - 2 + scrollTop; // Adjust for vertical scroll
+
+                // Adjust to the left if overflowing the right boundary
+                if (left + submenuWidth > window.innerWidth + scrollLeft) {
+                    left = itemRect.left + scrollLeft - submenuWidth;
+                }
+
+                // Adjust if the submenu overflows the bottom boundary
+                if (top + submenuHeight > window.innerHeight + scrollTop) {
+                    top = window.innerHeight + scrollTop - submenuHeight - 10;
+                }
+
+                setSubMenuPosition((prev) => ({
+                    ...prev,
+                    [key]: { top, left, label },
+                }));
+            }, 0);
+        };
+
+        const handleMouseEnterItem = (
+            event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+            parentKey: string | null,
+            index: number,
+            item: MenuItem
+        ) => {
+            event.stopPropagation();
+
+            const key = parentKey ? `${parentKey}-${index}` : `${index}`;
+
+            setVisibleSubMenus((prev) => {
+                const updatedState = { ...prev };
+                updatedState[key] = { visible: true, label: item.label };
+
+                const ancestors = key.split("-").reduce((acc, part, idx) => {
+                    if (idx === 0) return [part];
+                    return [...acc, `${acc[idx - 1]}-${part}`];
+                }, [] as string[]);
+
+                ancestors.forEach((ancestorKey) => {
+                    if (updatedState[ancestorKey]) {
+                        updatedState[ancestorKey].visible = true;
+                    }
+                });
+
+                for (const pkey in updatedState) {
+                    if (!ancestors.includes(pkey) && pkey !== key) {
+                        updatedState[pkey].visible = false;
+                    }
+                }
+
+                return updatedState;
+            });
+
+            const newHoveredItems = key.split("-").reduce((acc, part, idx) => {
+                if (idx === 0) return [part];
+                return [...acc, `${acc[idx - 1]}-${part}`];
+            }, [] as string[]);
+
+            setHoveredItems(newHoveredItems);
+
+            const itemRect = event.currentTarget.getBoundingClientRect();
+            handleSubMenuPosition(key, itemRect, menuRef, item.label);
+        };
+
+        const handleOnClick = (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => {
+            e.stopPropagation();
+            item.onClick && item.onClick(e);
+        };
+
+        // const handleKeyDown = useCallback(
+        //     (waveEvent: WaveKeyboardEvent): boolean => {
+        //         if (keyutil.checkKeyPressed(waveEvent, "ArrowDown")) {
+        //             setFocusedIndex((prev) => (prev + 1) % items.length); // Move down
+        //             return true;
+        //         }
+        //         if (keyutil.checkKeyPressed(waveEvent, "ArrowUp")) {
+        //             setFocusedIndex((prev) => (prev - 1 + items.length) % items.length); // Move up
+        //             return true;
+        //         }
+        //         if (keyutil.checkKeyPressed(waveEvent, "ArrowRight")) {
+        //             if (items[focusedIndex].subItems) {
+        //                 setSubmenuOpen(focusedIndex); // Open the submenu
+        //             }
+        //             return true;
+        //         }
+        //         if (keyutil.checkKeyPressed(waveEvent, "ArrowLeft")) {
+        //             if (submenuOpen !== null) {
+        //                 setSubmenuOpen(null); // Close the submenu
+        //             }
+        //             return true;
+        //         }
+        //         if (keyutil.checkKeyPressed(waveEvent, "Enter") || keyutil.checkKeyPressed(waveEvent, " ")) {
+        //             if (items[focusedIndex].onClick) {
+        //                 items[focusedIndex].onClick(); // Trigger click
+        //             }
+        //             return true;
+        //         }
+        //         if (keyutil.checkKeyPressed(waveEvent, "Escape")) {
+        //             setVisibility(false); // Close the menu
+        //             return true;
+        //         }
+        //         return false;
+        //     },
+        //     [focusedIndex, submenuOpen, items, setVisibility]
+        // );
+
+        const menuMenu = (
+            <div className={clsx("menu", className)} ref={menuRef} style={{ top: position.top, left: position.left }}>
+                {items.map((item, index) => {
+                    const key = `${index}`;
+                    const isActive = hoveredItems.includes(key);
+
+                    const menuItemProps = {
+                        className: clsx("menu-item", { active: isActive }),
+                        onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+                            handleMouseEnterItem(event, null, index, item),
+                        onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
+                    };
+
+                    const renderedItem = renderMenuItem ? (
+                        renderMenuItem(item, menuItemProps)
+                    ) : (
+                        <div key={key} {...menuItemProps}>
+                            <span className="label">{item.label}</span>
+                            {item.subItems && <i className="fa-sharp fa-solid fa-chevron-right"></i>}
+                        </div>
+                    );
+
+                    return (
+                        <React.Fragment key={key}>
+                            {renderedItem}
+                            {visibleSubMenus[key]?.visible && item.subItems && (
+                                <SubMenu
+                                    subItems={item.subItems}
+                                    parentKey={key}
+                                    subMenuPosition={subMenuPosition}
+                                    visibleSubMenus={visibleSubMenus}
+                                    hoveredItems={hoveredItems}
+                                    handleMouseEnterItem={handleMouseEnterItem}
+                                    handleOnClick={handleOnClick}
+                                    subMenuRefs={subMenuRefs}
+                                    renderMenu={renderMenu}
+                                    renderMenuItem={renderMenuItem}
+                                />
+                            )}
+                        </React.Fragment>
+                    );
+                })}
+            </div>
+        );
+
+        return ReactDOM.createPortal(renderMenu ? renderMenu(menuMenu, { parentKey: null }) : menuMenu, document.body);
+    }
+);
+
+export { Menu };

frontend/app/modals/typeaheadmodal.tsx

@@ -1,3 +1,6 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 import { Input } from "@/app/element/input";
 import { InputDecoration } from "@/app/element/inputdecoration";
 import { useDimensions } from "@/app/hook/useDimensions";