fix: forward ref to Menu component

einride · Dec 12, 2023 · c707dcd · c707dcd
1 parent 1e1c1db
commit c707dcd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/.changeset/seven-phones-poke.md b/.changeset/seven-phones-poke.md
@@ -0,0 +1,5 @@
+---
+"@einride/ui": patch
+---
+
+Forward ref to Menu component
diff --git a/packages/einride-ui/src/components/menus/Menu/Menu.tsx b/packages/einride-ui/src/components/menus/Menu/Menu.tsx
@@ -1,7 +1,11 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
-import { ReactNode } from "react"
+import { ComponentPropsWithoutRef, ReactNode, forwardRef } from "react"
 
-export interface MenuProps {
+export interface MenuProps
+  extends Omit<
+    ComponentPropsWithoutRef<typeof DropdownMenu.Content>,
+    "onAnimationStart" | "onDrag" | "onDragEnd" | "onDragStart" | "style" | "title"
+  > {
   /** Menu content. */
   children: ReactNode
 
@@ -15,13 +19,15 @@ export interface MenuProps {
   onOpenChange?: (open: boolean) => void
 }
 
-export const Menu = ({ children, isOpen, ...props }: MenuProps): React.JSX.Element => {
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(({ children, isOpen, ...props }, ref) => {
   return (
-    <DropdownMenu.Root
-      {...(typeof isOpen === "boolean" && { open: isOpen })} // TODO: Change to `open` in next major?
-      {...props}
-    >
-      {children}
-    </DropdownMenu.Root>
+    <div ref={ref}>
+      <DropdownMenu.Root
+        {...(typeof isOpen === "boolean" && { open: isOpen })} // TODO: Change to `open` in next major?
+        {...props}
+      >
+        {children}
+      </DropdownMenu.Root>
+    </div>
   )
-}
+})