added closeOnClick option

abusix · Aug 6, 2024 · c842ffb · c842ffb
1 parent ee041f9
commit c842ffb
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 19 deletions.
diff --git a/src/components/popover-menu/popover-menu-panel-item.tsx b/src/components/popover-menu/popover-menu-panel-item.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { PopoverButton as HeadlessUiPopoverButton } from "@headlessui/react";
 import { classNames } from "../../util/class-names";
 
 const itemIntents = {
@@ -17,6 +18,7 @@ export interface PopoverMenuPanelItemProps {
     Icon?: React.ComponentType<{ className: string }>;
     variant?: keyof typeof itemIntents;
     active?: boolean;
+    closeOnClick?: boolean;
 }
 
 export const PopoverMenuPanelItem = ({
@@ -25,25 +27,35 @@ export const PopoverMenuPanelItem = ({
     Icon,
     variant = "neutral",
     active,
+    closeOnClick,
 }: PopoverMenuPanelItemProps) => {
     const intentStyles = itemIntents[variant];
+    const classes = classNames(
+        "relative flex w-full cursor-pointer flex-row items-center gap-3 overflow-hidden px-4 py-2 text-sm font-normal focus:ring-2 focus:ring-primary-200",
+        intentStyles,
+        active && activeItemIntents[variant],
+        active &&
+            "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md"
+    );
 
-    return (
-        <div
-            className={classNames(
-                "relative flex w-full cursor-pointer flex-row items-center gap-3 overflow-hidden px-4 py-2 text-sm font-normal focus:ring-2 focus:ring-primary-200",
-                intentStyles,
-                active && activeItemIntents[variant],
-                active &&
-                    "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md"
-            )}
-            role="menuitem"
-            tabIndex={0}
-            onClick={onClick}
-            onKeyDown={onClick}
-        >
+    const content = (
+        <>
             {Icon && <Icon className={classNames("h-3.5 w-3.5")} />}
             {children}
+        </>
+    );
+
+    if (closeOnClick) {
+        return (
+            <HeadlessUiPopoverButton className={classes} onClick={onClick}>
+                {content}
+            </HeadlessUiPopoverButton>
+        );
+    }
+
+    return (
+        <div className={classes} onClick={onClick} role="menuitem" onKeyDown={onClick} tabIndex={0}>
+            {content}
         </div>
     );
 };
diff --git a/src/components/popover-menu/popover-menu.stories.tsx b/src/components/popover-menu/popover-menu.stories.tsx
@@ -28,17 +28,25 @@ export const Default: Story = {
                 <PopoverMenu.Panel>
                     <PopoverMenu.Panel.Title>You</PopoverMenu.Panel.Title>
 
-                    <PopoverMenu.Panel.Item Icon={EditIcon}>Edit profile</PopoverMenu.Panel.Item>
-                    <PopoverMenu.Panel.Item Icon={ChatIcon}>Support</PopoverMenu.Panel.Item>
-                    <PopoverMenu.Panel.Item Icon={AddIcon}>Invite member</PopoverMenu.Panel.Item>
+                    <PopoverMenu.Panel.Item closeOnClick Icon={EditIcon}>
+                        Edit profile
+                    </PopoverMenu.Panel.Item>
+
+                    <PopoverMenu.Panel.Item closeOnClick Icon={ChatIcon}>
+                        Support
+                    </PopoverMenu.Panel.Item>
+
+                    <PopoverMenu.Panel.Item closeOnClick Icon={AddIcon}>
+                        Invite member
+                    </PopoverMenu.Panel.Item>
 
                     <PopoverMenu.Panel.Divider />
 
                     <PopoverMenu.Panel.Group>
                         <PopoverMenu.Panel.Title>Danger Zone</PopoverMenu.Panel.Title>
 
-                        <PopoverMenu.Panel.Item Icon={DeleteIcon} variant="danger">
-                            Item 1
+                        <PopoverMenu.Panel.Item closeOnClick Icon={DeleteIcon} variant="danger">
+                            Delete Account
                         </PopoverMenu.Panel.Item>
                     </PopoverMenu.Panel.Group>
                 </PopoverMenu.Panel>