@rovula/ui 0.1.35 → 0.1.36

package/dist/cjs/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/cjs/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/cjs/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/components/DropdownMenu/DropdownMenu.js

@@ -34,8 +34,8 @@ const DropdownMenuSubContent = React.forwardRef((_a, ref) => {
 DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef((_a, ref) => {
-    var { className, sideOffset = 4 } = _a, props = __rest(_a, ["className", "sideOffset"]);
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
+    var { className, sideOffset = 4, container } = _a, props = __rest(_a, ["className", "sideOffset", "container"]);
+    return (_jsx(DropdownMenuPrimitive.Portal, { container: container, children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef((_a, ref) => {

package/dist/esm/bundle.css

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