@rovula/ui 0.1.34 → 0.1.36

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/form-dialog/FormDialog.d.ts

@@ -31,6 +31,11 @@ export type FormDialogProps = {
     extraAction?: FormDialogAction;
     scrollable?: boolean;
     className?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
     /**
      * When provided, the confirm button becomes type="submit" and is linked to this form id.
      * Use together with a <Form id={formId} .../> inside children.

package/dist/esm/types/patterns/form-dialog/FormDialog.stories.d.ts

@@ -20,6 +20,11 @@ declare const meta: {
         extraAction?: import("./FormDialog").FormDialogAction | undefined;
         scrollable?: boolean | undefined;
         className?: string | undefined;
+        headerClassName?: string | undefined;
+        titleClassName?: string | undefined;
+        descriptionClassName?: string | undefined;
+        bodyClassName?: string | undefined;
+        footerClassName?: string | undefined;
         formId?: string | undefined;
         testId?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

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;
@@ -1728,6 +1735,11 @@ type FormDialogProps = {
     extraAction?: FormDialogAction;
     scrollable?: boolean;
     className?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
     /**
      * When provided, the confirm button becomes type="submit" and is linked to this form id.
      * Use together with a <Form id={formId} .../> inside children.
@@ -1754,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";
@@ -1803,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/form-dialog/FormDialog.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogTrigger, } from "@/components/Dialog/Dialog";
 import Button from "@/components/Button/Button";
-export const FormDialog = ({ open, onOpenChange, title, description, children, trigger, confirmAction, cancelAction, extraAction, scrollable = false, className, formId, testId, }) => {
+import { cn } from "@/utils/cn";
+export const FormDialog = ({ open, onOpenChange, title, description, children, trigger, confirmAction, cancelAction, extraAction, scrollable = false, className, headerClassName, titleClassName, descriptionClassName, bodyClassName, footerClassName, formId, testId, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasFooter = confirmAction || cancelAction || extraAction;
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: className, "data-testid": testId, children: [_jsxs(DialogHeader, { children: [title && (_jsx(DialogTitle, { "data-testid": testId && `${testId}-title`, children: title })), description && (_jsx(DialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), children && (_jsx(DialogBody, { scrollable: scrollable, children: children })), hasFooter && (_jsxs(DialogFooter, { className: extraAction ? "justify-between" : undefined, children: [extraAction && (_jsx(Button, { type: (_a = extraAction.type) !== null && _a !== void 0 ? _a : "button", variant: (_b = extraAction.variant) !== null && _b !== void 0 ? _b : "outline", color: (_c = extraAction.color) !== null && _c !== void 0 ? _c : "secondary", fullwidth: false, disabled: extraAction.disabled, isLoading: extraAction.isLoading, onClick: extraAction.onClick, className: extraAction.className, "data-testid": testId && `${testId}-extra-button`, children: extraAction.label })), _jsxs("div", { className: "flex items-center gap-4", children: [cancelAction && (_jsx(Button, { type: (_d = cancelAction.type) !== null && _d !== void 0 ? _d : "button", variant: (_e = cancelAction.variant) !== null && _e !== void 0 ? _e : "outline", color: (_f = cancelAction.color) !== null && _f !== void 0 ? _f : "primary", fullwidth: false, disabled: cancelAction.disabled, isLoading: cancelAction.isLoading, onClick: cancelAction.onClick, className: cancelAction.className, "data-testid": testId && `${testId}-cancel-button`, children: cancelAction.label })), confirmAction && (_jsx(Button, { type: formId ? "submit" : (_g = confirmAction.type) !== null && _g !== void 0 ? _g : "button", form: formId, variant: (_h = confirmAction.variant) !== null && _h !== void 0 ? _h : "solid", color: (_j = confirmAction.color) !== null && _j !== void 0 ? _j : "primary", fullwidth: false, disabled: confirmAction.disabled, isLoading: confirmAction.isLoading, onClick: confirmAction.onClick, className: confirmAction.className, "data-testid": testId && `${testId}-confirm-button`, children: confirmAction.label }))] })] }))] })] }));
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: className, "data-testid": testId, children: [_jsxs(DialogHeader, { className: headerClassName, children: [title && (_jsx(DialogTitle, { className: titleClassName, "data-testid": testId && `${testId}-title`, children: title })), description && (_jsx(DialogDescription, { className: descriptionClassName, "data-testid": testId && `${testId}-description`, children: description }))] }), children && (_jsx(DialogBody, { className: bodyClassName, scrollable: scrollable, children: children })), hasFooter && (_jsxs(DialogFooter, { className: cn(extraAction && "justify-between", footerClassName), children: [extraAction && (_jsx(Button, { type: (_a = extraAction.type) !== null && _a !== void 0 ? _a : "button", variant: (_b = extraAction.variant) !== null && _b !== void 0 ? _b : "outline", color: (_c = extraAction.color) !== null && _c !== void 0 ? _c : "secondary", fullwidth: false, disabled: extraAction.disabled, isLoading: extraAction.isLoading, onClick: extraAction.onClick, className: extraAction.className, "data-testid": testId && `${testId}-extra-button`, children: extraAction.label })), _jsxs("div", { className: "flex items-center gap-4", children: [cancelAction && (_jsx(Button, { type: (_d = cancelAction.type) !== null && _d !== void 0 ? _d : "button", variant: (_e = cancelAction.variant) !== null && _e !== void 0 ? _e : "outline", color: (_f = cancelAction.color) !== null && _f !== void 0 ? _f : "primary", fullwidth: false, disabled: cancelAction.disabled, isLoading: cancelAction.isLoading, onClick: cancelAction.onClick, className: cancelAction.className, "data-testid": testId && `${testId}-cancel-button`, children: cancelAction.label })), confirmAction && (_jsx(Button, { type: formId ? "submit" : (_g = confirmAction.type) !== null && _g !== void 0 ? _g : "button", form: formId, variant: (_h = confirmAction.variant) !== null && _h !== void 0 ? _h : "solid", color: (_j = confirmAction.color) !== null && _j !== void 0 ? _j : "primary", fullwidth: false, disabled: confirmAction.disabled, isLoading: confirmAction.isLoading, onClick: confirmAction.onClick, className: confirmAction.className, "data-testid": testId && `${testId}-confirm-button`, children: confirmAction.label }))] })] }))] })] }));
 };
 FormDialog.displayName = "FormDialog";

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.34",
+  "version": "0.1.36",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

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/form-dialog/FormDialog.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/Dialog/Dialog";
 import Button from "@/components/Button/Button";
 import Loading from "@/components/Loading/Loading";
+import { cn } from "@/utils/cn";
 
 export type FormDialogAction = {
   label: string;
@@ -46,6 +47,11 @@ export type FormDialogProps = {
   extraAction?: FormDialogAction;
   scrollable?: boolean;
   className?: string;
+  headerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
   /**
    * When provided, the confirm button becomes type="submit" and is linked to this form id.
    * Use together with a <Form id={formId} .../> inside children.
@@ -66,6 +72,11 @@ export const FormDialog: React.FC<FormDialogProps> = ({
   extraAction,
   scrollable = false,
   className,
+  headerClassName,
+  titleClassName,
+  descriptionClassName,
+  bodyClassName,
+  footerClassName,
   formId,
   testId,
 }) => {
@@ -75,25 +86,25 @@ export const FormDialog: React.FC<FormDialogProps> = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
       <DialogContent className={className} data-testid={testId}>
-        <DialogHeader>
+        <DialogHeader className={headerClassName}>
           {title && (
-            <DialogTitle data-testid={testId && `${testId}-title`}>
+            <DialogTitle className={titleClassName} data-testid={testId && `${testId}-title`}>
               {title}
             </DialogTitle>
           )}
           {description && (
-            <DialogDescription data-testid={testId && `${testId}-description`}>
+            <DialogDescription className={descriptionClassName} data-testid={testId && `${testId}-description`}>
               {description}
             </DialogDescription>
           )}
         </DialogHeader>
 
         {children && (
-          <DialogBody scrollable={scrollable}>{children}</DialogBody>
+          <DialogBody className={bodyClassName} scrollable={scrollable}>{children}</DialogBody>
         )}
 
         {hasFooter && (
-          <DialogFooter className={extraAction ? "justify-between" : undefined}>
+          <DialogFooter className={cn(extraAction && "justify-between", footerClassName)}>
             {extraAction && (
               <Button
                 type={extraAction.type ?? "button"}

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)]">