feat(PopoverMenu): make PopoverMenu to take Headless ui Popover props

abusix · Jan 10, 2025 · 49b1fad · 49b1fad
1 parent c84738f
commit 49b1fad
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git 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
@@ -1,16 +1,16 @@
-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";
 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>
     );
 };