From 49b1fadf41390b7b37c720ad633d84c8dc5d830b Mon Sep 17 00:00:00 2001
From: Pablo Allendes <allendes91@gmail.com>
Date: Fri, 10 Jan 2025 09:54:17 +0100
Subject: [PATCH] feat(PopoverMenu): make PopoverMenu to take Headless ui
 Popover props

---
 src/components/popover-menu/popover-menu-panel.tsx | 14 +++++++++-----
 src/components/popover-menu/popover-menu.tsx       |  8 ++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/popover-menu/popover-menu-panel.tsx b/src/components/popover-menu/popover-menu-panel.tsx
index 74e6b7af..d00d46f5 100644
--- a/src/components/popover-menu/popover-menu-panel.tsx
+++ b/src/components/popover-menu/popover-menu-panel.tsx
@@ -1,17 +1,20 @@
-import { PopoverPanel as HeadlessUiPopoverPanel } from "@headlessui/react";
+import {
+    PopoverPanel as HeadlessUiPopoverPanel,
+    PopoverPanelProps as HeadlessUiPopoverPanelProps,
+} from "@headlessui/react";
 import React from "react";
 import { usePopoverMenuContext } from "./popover-menu-context";
+import { PopoverMenuPanelButton } from "./popover-menu-panel-button";
+import { PopoverMenuPanelDivider } from "./popover-menu-panel-divider";
 import { PopoverMenuPanelGroup } from "./popover-menu-panel-group";
 import { PopoverMenuPanelItem } from "./popover-menu-panel-item";
-import { PopoverMenuPanelDivider } from "./popover-menu-panel-divider";
 import { PopoverMenuPanelTitle } from "./popover-menu-panel-title";
-import { PopoverMenuPanelButton } from "./popover-menu-panel-button";
 
-export interface PopoverMenuPanelProps {
+export interface PopoverMenuPanelProps extends HeadlessUiPopoverPanelProps {
     children: React.ReactNode;
 }
 
-const PopoverMenuPanel = ({ children }: PopoverMenuPanelProps) => {
+const PopoverMenuPanel = ({ children, ...rest }: PopoverMenuPanelProps) => {
     const {
         popoverPanel: { setPopperElement, styles, attributes },
     } = usePopoverMenuContext();
@@ -22,6 +25,7 @@ const PopoverMenuPanel = ({ children }: PopoverMenuPanelProps) => {
             style={styles}
             {...attributes}
             className="z-40 w-52 rounded bg-neutral-0 py-2 shadow"
+            {...rest}
         >
             {children}
         </HeadlessUiPopoverPanel>
diff --git a/src/components/popover-menu/popover-menu.tsx b/src/components/popover-menu/popover-menu.tsx
index 9b95da8a..b4cbd67c 100644
--- a/src/components/popover-menu/popover-menu.tsx
+++ b/src/components/popover-menu/popover-menu.tsx
@@ -1,4 +1,4 @@
-import { Popover } from "@headlessui/react";
+import { Popover, PopoverProps } from "@headlessui/react";
 import React, { useState } from "react";
 import { usePopper } from "react-popper";
 import { PopoverMenuButton } from "./popover-menu-button";
@@ -6,11 +6,11 @@ import { PopoverMenuContextProvider } from "./popover-menu-context";
 import { PopoverMenuOverlay } from "./popover-menu-overlay";
 import { PopoverMenuPanel } from "./popover-menu-panel";
 
-export interface PopoverMenuProps {
+export interface PopoverMenuProps extends PopoverProps {
     children: React.ReactNode;
 }
 
-const PopoverMenu = ({ children }: PopoverMenuProps) => {
+const PopoverMenu = ({ children, ...rest }: PopoverMenuProps) => {
     const [referenceElement, setReferenceElement] = useState<HTMLButtonElement>();
     const [popperElement, setPopperElement] = useState<HTMLElement>();
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -30,7 +30,7 @@ const PopoverMenu = ({ children }: PopoverMenuProps) => {
 
     return (
         <PopoverMenuContextProvider value={context}>
-            <Popover>{children}</Popover>
+            <Popover {...rest}>{children}</Popover>
         </PopoverMenuContextProvider>
     );
 };