@rovula/ui 0.1.35 → 0.1.37

package/dist/esm/types/components/DropdownMenu/DropdownMenu.d.ts

@@ -10,7 +10,14 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * DOM element to render the portal into.
+     * Pass the dialog's content element when using inside a Dialog to avoid
+     * Radix pointer-events conflicts that break hover after re-open.
+     */
+    container?: HTMLElement | null;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
     selected?: boolean;

package/dist/esm/types/patterns/menu/Menu.d.ts

@@ -16,6 +16,8 @@ export type MenuOption = {
     onClick?: () => void;
     /** data-testid attached to the item element */
     testId?: string;
+    /** Custom className applied to the item element */
+    className?: string;
 };
 export type MenuItemType = {
     type: "item";
@@ -65,9 +67,21 @@ export type MenuProps = {
     contentClassName?: string;
     /** data-testid attached to the menu content element */
     testId?: string;
+    /**
+     * DOM element to render the dropdown portal into.
+     * Pass the dialog's content element when using inside a Dialog to avoid
+     * Radix pointer-events conflicts that break hover after re-open.
+     *
+     * @example
+     * const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
+     * <DialogContent ref={setContainer}>
+     *   <Menu container={container} ... />
+     * </DialogContent>
+     */
+    container?: HTMLElement | null;
 };
 export declare const Menu: {
-    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, container, }: MenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { DropdownMenuItem as MenuItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuLabel as MenuLabel, } from "../../components/DropdownMenu/DropdownMenu";

package/dist/esm/types/patterns/menu/Menu.stories.d.ts

@@ -4,7 +4,7 @@ import { Menu, MenuItemType } from "./Menu";
 declare const meta: {
     title: string;
     component: {
-        ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, }: import("./Menu").MenuProps): import("react/jsx-runtime").JSX.Element;
+        ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, container, }: import("./Menu").MenuProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     parameters: {
@@ -23,6 +23,7 @@ declare const meta: {
         sideOffset?: number | undefined;
         contentClassName?: string | undefined;
         testId?: string | undefined;
+        container?: (HTMLElement | null) | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
@@ -37,3 +38,4 @@ export declare const ComplexMenu: StoryObj<typeof Menu>;
 export declare const MultiSelectPattern: StoryObj<typeof Menu>;
 export declare const ChangeStatus: StoryObj<typeof Menu>;
 export declare const ManageColumn: StoryObj<typeof Menu>;
+export declare const InsideDialog: StoryObj<typeof Menu>;

package/dist/index.d.ts

@@ -1281,7 +1281,14 @@ declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<Dro
     inset?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * DOM element to render the portal into.
+     * Pass the dialog's content element when using inside a Dialog to avoid
+     * Radix pointer-events conflicts that break hover after re-open.
+     */
+    container?: HTMLElement | null;
+} & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
     selected?: boolean;
@@ -1759,6 +1766,8 @@ type MenuOption = {
     onClick?: () => void;
     /** data-testid attached to the item element */
     testId?: string;
+    /** Custom className applied to the item element */
+    className?: string;
 };
 type MenuItemType = {
     type: "item";
@@ -1808,9 +1817,21 @@ type MenuProps = {
     contentClassName?: string;
     /** data-testid attached to the menu content element */
     testId?: string;
+    /**
+     * DOM element to render the dropdown portal into.
+     * Pass the dialog's content element when using inside a Dialog to avoid
+     * Radix pointer-events conflicts that break hover after re-open.
+     *
+     * @example
+     * const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
+     * <DialogContent ref={setContainer}>
+     *   <Menu container={container} ... />
+     * </DialogContent>
+     */
+    container?: HTMLElement | null;
 };
 declare const Menu: {
-    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, }: MenuProps): react_jsx_runtime.JSX.Element;
+    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, container, }: MenuProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/patterns/menu/Menu.js

@@ -23,7 +23,7 @@ function renderMenuItems(items, selectedValues, onSelect) {
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(val, opt);
                     (_a = opt.onClick) === null || _a === void 0 ? void 0 : _a.call(opt);
                 }
-            }, children: buffer.map((opt) => (_jsx(DropdownMenuRadioItem, { value: opt.value, disabled: opt.disabled, icon: opt.icon, "data-testid": opt.testId, children: opt.label }, opt.value))) }, key));
+            }, children: buffer.map((opt) => (_jsx(DropdownMenuRadioItem, { value: opt.value, disabled: opt.disabled, icon: opt.icon, "data-testid": opt.testId, className: opt.className, children: opt.label }, opt.value))) }, key));
     };
     items.forEach((item, index) => {
         var _a;
@@ -54,7 +54,7 @@ function renderMenuItems(items, selectedValues, onSelect) {
             const opt = item.item;
             const isSelected = (_a = opt.checked) !== null && _a !== void 0 ? _a : selectedValues.includes(opt.value);
             if (opt.type === "checkbox") {
-                result.push(_jsx(DropdownMenuCheckboxItem, { checked: isSelected, disabled: opt.disabled, "data-testid": opt.testId, onCheckedChange: () => {
+                result.push(_jsx(DropdownMenuCheckboxItem, { checked: isSelected, disabled: opt.disabled, "data-testid": opt.testId, className: opt.className, onCheckedChange: () => {
                         var _a;
                         onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt.value, opt);
                         (_a = opt.onClick) === null || _a === void 0 ? void 0 : _a.call(opt);
@@ -62,7 +62,7 @@ function renderMenuItems(items, selectedValues, onSelect) {
                 return;
             }
             // default item
-            result.push(_jsx(DropdownMenuItem, { selected: isSelected, icon: opt.icon, disabled: opt.disabled, className: cn(opt.danger && "text-red-500"), "data-testid": opt.testId, onSelect: () => {
+            result.push(_jsx(DropdownMenuItem, { selected: isSelected, icon: opt.icon, disabled: opt.disabled, className: cn(opt.danger && "text-red-500", opt.className), "data-testid": opt.testId, onSelect: () => {
                     var _a;
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt.value, opt);
                     (_a = opt.onClick) === null || _a === void 0 ? void 0 : _a.call(opt);
@@ -86,12 +86,12 @@ function renderMenuItems(items, selectedValues, onSelect) {
 //   - Full a11y / WAI-ARIA
 //   - Sub-menu support via DropdownMenuSub
 // ---------------------------------------------------------------------------
-export const Menu = ({ trigger, items, selectedValues = [], onSelect, header, open, onOpenChange, align = "start", side = "bottom", sideOffset = 4, contentClassName, testId, }) => (
+export const Menu = ({ trigger, items, selectedValues = [], onSelect, header, open, onOpenChange, align = "start", side = "bottom", sideOffset = 4, contentClassName, testId, container, }) => (
 // Stop click events from bubbling through React's portal event system.
 // DropdownMenuContent renders in a DOM portal (document.body) but React
 // synthetic events still bubble through the component tree, so clicks on
 // menu items reach ancestor onClick handlers (e.g. a clickable card).
-_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsxs(DropdownMenuRoot, { open: open, onOpenChange: onOpenChange, children: [trigger && (_jsx(DropdownMenuTrigger, { asChild: true, children: trigger })), _jsxs(DropdownMenuContent, { align: align, side: side, sideOffset: sideOffset, className: contentClassName, "data-testid": testId, children: [header && (_jsx("div", { className: "sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]", children: header })), renderMenuItems(items, selectedValues, onSelect)] })] }) }));
+_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsxs(DropdownMenuRoot, { open: open, onOpenChange: onOpenChange, children: [trigger && (_jsx(DropdownMenuTrigger, { asChild: true, children: trigger })), _jsxs(DropdownMenuContent, { align: align, side: side, sideOffset: sideOffset, className: contentClassName, "data-testid": testId, container: container, children: [header && (_jsx("div", { className: "sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]", children: header })), renderMenuItems(items, selectedValues, onSelect)] })] }) }));
 Menu.displayName = "Menu";
 // ---------------------------------------------------------------------------
 // Re-exports — backward compat for consumers using Menu's sub-components

package/dist/patterns/menu/Menu.stories.js

@@ -6,6 +6,7 @@ import ActionButton from "../../components/ActionButton/ActionButton";
 import Icon from "../../components/Icon/Icon";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { Switch } from "../../components/Switch/Switch";
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, } from "../../components/Dialog/Dialog";
 const meta = {
     title: "Patterns/Menu",
     component: Menu,
@@ -609,3 +610,22 @@ export const ManageColumn = {
         return (_jsxs("div", { className: "flex gap-8 items-start", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Manage Column panel" }), _jsx(Menu, { trigger: _jsxs(Button, { variant: "outline", children: [_jsx(Icon, { type: "heroicons", name: "view-columns", className: "size-4 mr-2" }), "Manage Columns"] }), open: open, onOpenChange: setOpen, header: _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Manage column" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { className: "typography-small4 text-text-g-contrast-medium hover:text-text-g-contrast-high transition-colors", onClick: hideAll, children: "Hide all" }), _jsx("button", { className: "typography-small4 text-[var(--dropdown-menu-checkbox-checked-bg)] hover:opacity-80 transition-opacity", onClick: showAll, children: "Show all" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setOpen(false), children: "Done" })] })] }), items: items, contentClassName: "w-80" })] }), _jsxs("div", { className: "text-sm text-text-g-contrast-medium", children: [_jsx("p", { className: "font-semibold mb-1", children: "Columns:" }), _jsx("pre", { className: "text-xs", children: JSON.stringify(columns.map((c) => ({ [c.label]: c.visible })), null, 2) })] })] }));
     },
 };
+// ---------------------------------------------------------------------------
+// Inside Dialog — validates that hover works after dialog re-open
+// ---------------------------------------------------------------------------
+const dialogItems = [
+    { type: "item", item: { value: "edit", label: "Edit" } },
+    { type: "item", item: { value: "duplicate", label: "Duplicate" } },
+    { type: "separator" },
+    {
+        type: "item",
+        item: { value: "delete", label: "Delete", danger: true },
+    },
+];
+export const InsideDialog = {
+    name: "Inside Dialog (hover fix)",
+    render: () => {
+        const [container, setContainer] = useState(null);
+        return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { ref: setContainer, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Menu inside Dialog" }) }), _jsxs(DialogBody, { children: [_jsx("p", { className: "typography-body3 text-text-g-contrast-medium mb-6", children: "Close and re-open the dialog \u2014 hover on menu items should still work correctly every time." }), _jsx(Menu, { trigger: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }), items: dialogItems, container: container, onSelect: (v) => console.log("selected:", v) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", children: "Cancel" }), _jsx(Button, { children: "Confirm" })] })] })] }));
+    },
+};

package/dist/src/theme/global.css

@@ -4098,6 +4098,10 @@ input[type=number] {
   margin-bottom: 1rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import * as yup from "yup";
 import {
@@ -16,6 +16,7 @@ import { Label } from "../Label/Label";
 import { Input } from "../Input/Input";
 import { Field, Form, ValidationHintList, ValidationHintRule } from "../Form";
 import PasswordInput from "../PasswordInput";
+import { Menu } from "@/patterns/menu/Menu";
 
 const meta = {
   title: "Components/Dialog",
@@ -219,36 +220,75 @@ export const FigmaFunctionForm = {
 } satisfies StoryObj;
 
 export const FigmaFunctionFormWithAction = {
-  render: () => (
-    <div className="flex w-full">
-      <Dialog defaultOpen>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Title</DialogTitle>
-            <DialogDescription>Subtitle description</DialogDescription>
-          </DialogHeader>
-          <DialogBody>
-            <div className="flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm">
-              <p className="typography-body3 text-text-contrast-max">
-                Content - Form Area
-              </p>
-            </div>
-          </DialogBody>
-          <DialogFooter className="justify-between">
-            <Button variant="outline" color="secondary" fullwidth={false}>
-              Medium
-            </Button>
-            <div className="flex items-center gap-4">
-              <Button variant="outline" color="primary" fullwidth={false}>
-                Cancel
-              </Button>
-              <Button disabled fullwidth={false}>
-                Confirm
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const handleOpenChange = (open: boolean) => {
+      setOpen(open);
+    };
+    const handleCancel = () => {
+      setOpen(false);
+    };
+    const handleConfirm = () => {
+      setOpen(false);
+    };
+
+    return (
+      <div className="flex w-full">
+        <Menu
+          items={[
+            {
+              type: "item",
+              item: {
+                value: "edit",
+                label: "Edit",
+                onClick: () => handleOpenChange(true),
+              },
+            },
+            {
+              type: "item",
+              item: {
+                value: "delete",
+                label: "Delete",
+                onClick: () => handleOpenChange(true),
+              },
+            },
+          ]}
+          trigger={<Button variant="outline">Open</Button>}
+        />
+        <Dialog open={open} onOpenChange={handleOpenChange}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Title</DialogTitle>
+              <DialogDescription>Subtitle description</DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm">
+                <p className="typography-body3 text-text-contrast-max">
+                  Content - Form Area
+                </p>
+              </div>
+            </DialogBody>
+            <DialogFooter className="justify-between">
+              <Button variant="outline" color="secondary" fullwidth={false}>
+                Medium
               </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  ),
+              <div className="flex items-center gap-4">
+                <Button
+                  variant="outline"
+                  color="primary"
+                  fullwidth={false}
+                  onClick={handleCancel}
+                >
+                  Cancel
+                </Button>
+                <Button disabled fullwidth={false} onClick={handleConfirm}>
+                  Confirm
+                </Button>
+              </div>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  },
 } satisfies StoryObj;

package/src/components/Dialog/Dialog.tsx

@@ -55,6 +55,12 @@ const DialogContent = React.forwardRef<
           className,
         )}
         {...props}
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          document.body.style.pointerEvents = "auto";
+
+          props?.onCloseAutoFocus?.(event);
+        }}
       >
         {children}
         {showCloseButton && (

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -66,9 +66,16 @@ DropdownMenuSubContent.displayName =
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    /**
+     * DOM element to render the portal into.
+     * Pass the dialog's content element when using inside a Dialog to avoid
+     * Radix pointer-events conflicts that break hover after re-open.
+     */
+    container?: HTMLElement | null;
+  }
+>(({ className, sideOffset = 4, container, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal container={container}>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}

package/src/patterns/menu/Menu.stories.tsx

@@ -6,6 +6,15 @@ import ActionButton from "../../components/ActionButton/ActionButton";
 import Icon from "../../components/Icon/Icon";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { Switch } from "../../components/Switch/Switch";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogBody,
+  DialogFooter,
+} from "../../components/Dialog/Dialog";
 
 const meta = {
   title: "Patterns/Menu",
@@ -1098,3 +1107,57 @@ export const ManageColumn: StoryObj<typeof Menu> = {
     );
   },
 };
+
+// ---------------------------------------------------------------------------
+// Inside Dialog — validates that hover works after dialog re-open
+// ---------------------------------------------------------------------------
+
+const dialogItems: MenuItemType[] = [
+  { type: "item", item: { value: "edit", label: "Edit" } },
+  { type: "item", item: { value: "duplicate", label: "Duplicate" } },
+  { type: "separator" },
+  {
+    type: "item",
+    item: { value: "delete", label: "Delete", danger: true },
+  },
+];
+
+export const InsideDialog: StoryObj<typeof Menu> = {
+  name: "Inside Dialog (hover fix)",
+  render: () => {
+    const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="outline">Open Dialog</Button>
+        </DialogTrigger>
+        <DialogContent ref={setContainer}>
+          <DialogHeader>
+            <DialogTitle>Menu inside Dialog</DialogTitle>
+          </DialogHeader>
+          <DialogBody>
+            <p className="typography-body3 text-text-g-contrast-medium mb-6">
+              Close and re-open the dialog — hover on menu items should still
+              work correctly every time.
+            </p>
+            <Menu
+              trigger={
+                <ActionButton variant="icon">
+                  <Icon type="heroicons" name="ellipsis-vertical" />
+                </ActionButton>
+              }
+              items={dialogItems}
+              container={container}
+              onSelect={(v) => console.log("selected:", v)}
+            />
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="outline">Cancel</Button>
+            <Button>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};

package/src/patterns/menu/Menu.tsx

@@ -38,6 +38,8 @@ export type MenuOption = {
   onClick?: () => void;
   /** data-testid attached to the item element */
   testId?: string;
+  /** Custom className applied to the item element */
+  className?: string;
 };
 
 export type MenuItemType =
@@ -83,6 +85,18 @@ export type MenuProps = {
   contentClassName?: string;
   /** data-testid attached to the menu content element */
   testId?: string;
+  /**
+   * DOM element to render the dropdown portal into.
+   * Pass the dialog's content element when using inside a Dialog to avoid
+   * Radix pointer-events conflicts that break hover after re-open.
+   *
+   * @example
+   * const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
+   * <DialogContent ref={setContainer}>
+   *   <Menu container={container} ... />
+   * </DialogContent>
+   */
+  container?: HTMLElement | null;
 };
 
 // ---------------------------------------------------------------------------
@@ -124,6 +138,7 @@ function renderMenuItems(
             disabled={opt.disabled}
             icon={opt.icon as React.ReactNode}
             data-testid={opt.testId}
+            className={opt.className}
           >
             {opt.label}
           </DropdownMenuRadioItem>
@@ -191,6 +206,7 @@ function renderMenuItems(
             checked={isSelected}
             disabled={opt.disabled}
             data-testid={opt.testId}
+            className={opt.className}
             onCheckedChange={() => {
               onSelect?.(opt.value, opt);
               opt.onClick?.();
@@ -209,7 +225,7 @@ function renderMenuItems(
           selected={isSelected}
           icon={opt.icon as React.ReactNode}
           disabled={opt.disabled}
-          className={cn(opt.danger && "text-red-500")}
+          className={cn(opt.danger && "text-red-500", opt.className)}
           data-testid={opt.testId}
           onSelect={() => {
             onSelect?.(opt.value, opt);
@@ -254,6 +270,7 @@ export const Menu = ({
   sideOffset = 4,
   contentClassName,
   testId,
+  container,
 }: MenuProps) => (
   // Stop click events from bubbling through React's portal event system.
   // DropdownMenuContent renders in a DOM portal (document.body) but React
@@ -270,6 +287,7 @@ export const Menu = ({
         sideOffset={sideOffset}
         className={contentClassName}
         data-testid={testId}
+        container={container}
       >
         {header && (
           <div className="sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]">