From c842ffbb722b089efadf36b8ed7347e44c016995 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 6 Aug 2024 12:07:18 +0200
Subject: [PATCH 1/5] added closeOnClick option

---
 .../popover-menu/popover-menu-panel-item.tsx  | 40 ++++++++++++-------
 .../popover-menu/popover-menu.stories.tsx     | 18 ++++++---
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/components/popover-menu/popover-menu-panel-item.tsx b/src/components/popover-menu/popover-menu-panel-item.tsx
index d4bf4f3b..abb54fcc 100644
--- 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
index b910b1ad..70d7c862 100644
--- 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>

From 56fa27c68f591193c5bc740cbc44c9c4dbecee5e Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 6 Aug 2024 12:31:59 +0200
Subject: [PATCH 2/5] added additional button component to make the pnael auto
 closable

---
 .../popover-menu-panel-button.tsx             | 45 ++++++++++++++
 .../popover-menu/popover-menu-panel-item.tsx  | 48 ++++++---------
 .../popover-menu/popover-menu-panel.tsx       |  2 +
 .../popover-menu/popover-menu.stories.tsx     | 58 ++++++++++---------
 4 files changed, 94 insertions(+), 59 deletions(-)
 create mode 100644 src/components/popover-menu/popover-menu-panel-button.tsx

diff --git a/src/components/popover-menu/popover-menu-panel-button.tsx b/src/components/popover-menu/popover-menu-panel-button.tsx
new file mode 100644
index 00000000..045143d7
--- /dev/null
+++ b/src/components/popover-menu/popover-menu-panel-button.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { PopoverButton as HeadlessUiPopoverButton } from "@headlessui/react";
+import { classNames } from "../../util/class-names";
+
+const itemIntents = {
+    neutral: "text-neutral-700 fill-neutral-700 hover:bg-primary-100",
+    danger: "text-danger-500 fill-danger-500 hover:bg-danger-100",
+};
+
+const activeItemIntents = {
+    neutral: "bg-primary-100 fill-primary-400 text-primary-400 before:bg-primary-400",
+    danger: "bg-danger-100 fill-danger-400 text-danger-500 before:bg-danger-400",
+};
+
+export interface PopoverMenuPanelButtonProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+    Icon?: React.ComponentType<{ className: string }>;
+    variant?: keyof typeof itemIntents;
+    active?: boolean;
+}
+
+export const PopoverMenuPanelButton = ({
+    children,
+    onClick,
+    Icon,
+    variant = "neutral",
+    active,
+}: PopoverMenuPanelButtonProps) => {
+    return (
+        <HeadlessUiPopoverButton
+            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",
+                itemIntents[variant],
+                active && activeItemIntents[variant],
+                active &&
+                    "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md"
+            )}
+            onClick={onClick}
+        >
+            {Icon && <Icon className={classNames("h-3.5 w-3.5")} />}
+            {children}
+        </HeadlessUiPopoverButton>
+    );
+};
diff --git a/src/components/popover-menu/popover-menu-panel-item.tsx b/src/components/popover-menu/popover-menu-panel-item.tsx
index abb54fcc..bb3faeeb 100644
--- a/src/components/popover-menu/popover-menu-panel-item.tsx
+++ b/src/components/popover-menu/popover-menu-panel-item.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { PopoverButton as HeadlessUiPopoverButton } from "@headlessui/react";
 import { classNames } from "../../util/class-names";
 
 const itemIntents = {
@@ -7,7 +6,7 @@ const itemIntents = {
     danger: "text-danger-500 fill-danger-500 hover:bg-danger-100",
 };
 
-const activeItemIntents = {
+const selectedItemIntents = {
     neutral: "bg-primary-100 fill-primary-400 text-primary-400 before:bg-primary-400",
     danger: "bg-danger-100 fill-danger-400 text-danger-500 before:bg-danger-400",
 };
@@ -17,8 +16,7 @@ export interface PopoverMenuPanelItemProps {
     onClick?: () => void;
     Icon?: React.ComponentType<{ className: string }>;
     variant?: keyof typeof itemIntents;
-    active?: boolean;
-    closeOnClick?: boolean;
+    selected?: boolean;
 }
 
 export const PopoverMenuPanelItem = ({
@@ -26,36 +24,24 @@ export const PopoverMenuPanelItem = ({
     onClick,
     Icon,
     variant = "neutral",
-    active,
-    closeOnClick,
+    selected,
 }: 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"
-    );
-
-    const content = (
-        <>
+    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",
+                itemIntents[variant],
+                selected && selectedItemIntents[variant],
+                selected &&
+                    "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md"
+            )}
+            onClick={onClick}
+            role="menuitem"
+            onKeyDown={onClick}
+            tabIndex={0}
+        >
             {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-panel.tsx b/src/components/popover-menu/popover-menu-panel.tsx
index 7f8d2422..74e6b7af 100644
--- a/src/components/popover-menu/popover-menu-panel.tsx
+++ b/src/components/popover-menu/popover-menu-panel.tsx
@@ -5,6 +5,7 @@ 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 {
     children: React.ReactNode;
@@ -28,6 +29,7 @@ const PopoverMenuPanel = ({ children }: PopoverMenuPanelProps) => {
 };
 
 PopoverMenuPanel.Item = PopoverMenuPanelItem;
+PopoverMenuPanel.Button = PopoverMenuPanelButton;
 PopoverMenuPanel.Group = PopoverMenuPanelGroup;
 PopoverMenuPanel.Divider = PopoverMenuPanelDivider;
 PopoverMenuPanel.Title = PopoverMenuPanelTitle;
diff --git a/src/components/popover-menu/popover-menu.stories.tsx b/src/components/popover-menu/popover-menu.stories.tsx
index 70d7c862..fdfea675 100644
--- a/src/components/popover-menu/popover-menu.stories.tsx
+++ b/src/components/popover-menu/popover-menu.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { PopoverMenu } from "./popover-menu";
-import { AddIcon, ChatIcon, DeleteIcon, EditIcon } from "../../icons";
+import { ChatIcon, DeleteIcon, EditIcon } from "../../icons";
 
 const meta: Meta<typeof PopoverMenu> = {
     title: "Popover Menu",
@@ -18,39 +18,41 @@ export default meta;
 type Story = StoryObj<typeof PopoverMenu>;
 
 export const Default: Story = {
-    render: () => (
-        <div className="relative flex min-h-screen min-w-736 flex-col">
-            <PopoverMenu>
-                <PopoverMenu.Button variant="secondary">Open Popover Menu</PopoverMenu.Button>
+    render: () => {
+        const [isActive, setIsActive] = React.useState(false);
 
-                <PopoverMenu.Overlay />
+        return (
+            <div className="relative flex min-h-screen min-w-736 flex-col">
+                <PopoverMenu>
+                    <PopoverMenu.Button variant="secondary">Open Popover Menu</PopoverMenu.Button>
 
-                <PopoverMenu.Panel>
-                    <PopoverMenu.Panel.Title>You</PopoverMenu.Panel.Title>
+                    <PopoverMenu.Overlay />
 
-                    <PopoverMenu.Panel.Item closeOnClick Icon={EditIcon}>
-                        Edit profile
-                    </PopoverMenu.Panel.Item>
+                    <PopoverMenu.Panel>
+                        <PopoverMenu.Panel.Title>You</PopoverMenu.Panel.Title>
 
-                    <PopoverMenu.Panel.Item closeOnClick Icon={ChatIcon}>
-                        Support
-                    </PopoverMenu.Panel.Item>
+                        <PopoverMenu.Panel.Item
+                            Icon={EditIcon}
+                            selected={isActive}
+                            onClick={() => setIsActive(!isActive)}
+                        >
+                            Activate Mfa
+                        </PopoverMenu.Panel.Item>
 
-                    <PopoverMenu.Panel.Item closeOnClick Icon={AddIcon}>
-                        Invite member
-                    </PopoverMenu.Panel.Item>
+                        <PopoverMenu.Panel.Item Icon={ChatIcon}>Support</PopoverMenu.Panel.Item>
 
-                    <PopoverMenu.Panel.Divider />
+                        <PopoverMenu.Panel.Divider />
 
-                    <PopoverMenu.Panel.Group>
-                        <PopoverMenu.Panel.Title>Danger Zone</PopoverMenu.Panel.Title>
+                        <PopoverMenu.Panel.Group>
+                            <PopoverMenu.Panel.Title>Danger Zone</PopoverMenu.Panel.Title>
 
-                        <PopoverMenu.Panel.Item closeOnClick Icon={DeleteIcon} variant="danger">
-                            Delete Account
-                        </PopoverMenu.Panel.Item>
-                    </PopoverMenu.Panel.Group>
-                </PopoverMenu.Panel>
-            </PopoverMenu>
-        </div>
-    ),
+                            <PopoverMenu.Panel.Button Icon={DeleteIcon} variant="danger">
+                                Close this Dialog
+                            </PopoverMenu.Panel.Button>
+                        </PopoverMenu.Panel.Group>
+                    </PopoverMenu.Panel>
+                </PopoverMenu>
+            </div>
+        );
+    },
 };

From 4f165c50bcc292b7975dfcb597eb76a2a90583c5 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 6 Aug 2024 13:02:15 +0200
Subject: [PATCH 3/5] BREAKING CHANGE: renamed active to selected in popover
 menus


From 6b3a345e45ccb66bf8cc6d21ce89b2cdb816d976 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 6 Aug 2024 13:20:16 +0200
Subject: [PATCH 4/5] renamed active to selected

---
 src/components/popover-menu/popover-menu-panel-button.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/popover-menu/popover-menu-panel-button.tsx b/src/components/popover-menu/popover-menu-panel-button.tsx
index 045143d7..bba0ec44 100644
--- a/src/components/popover-menu/popover-menu-panel-button.tsx
+++ b/src/components/popover-menu/popover-menu-panel-button.tsx
@@ -17,7 +17,7 @@ export interface PopoverMenuPanelButtonProps {
     onClick?: () => void;
     Icon?: React.ComponentType<{ className: string }>;
     variant?: keyof typeof itemIntents;
-    active?: boolean;
+    selected?: boolean;
 }
 
 export const PopoverMenuPanelButton = ({
@@ -25,15 +25,15 @@ export const PopoverMenuPanelButton = ({
     onClick,
     Icon,
     variant = "neutral",
-    active,
+    selected,
 }: PopoverMenuPanelButtonProps) => {
     return (
         <HeadlessUiPopoverButton
             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",
                 itemIntents[variant],
-                active && activeItemIntents[variant],
-                active &&
+                selected && activeItemIntents[variant],
+                selected &&
                     "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md"
             )}
             onClick={onClick}

From 0a02b6abfe7143c445e92f901483215abe27072d Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 6 Aug 2024 13:47:57 +0200
Subject: [PATCH 5/5] changed styling/intents

---
 .../popover-menu-panel-button.tsx             | 10 +++++++---
 .../popover-menu/popover-menu-panel-item.tsx  | 19 ++++++++++++-------
 .../popover-menu/popover-menu.stories.tsx     |  4 +++-
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/popover-menu/popover-menu-panel-button.tsx b/src/components/popover-menu/popover-menu-panel-button.tsx
index bba0ec44..b40162af 100644
--- a/src/components/popover-menu/popover-menu-panel-button.tsx
+++ b/src/components/popover-menu/popover-menu-panel-button.tsx
@@ -3,7 +3,7 @@ import { PopoverButton as HeadlessUiPopoverButton } from "@headlessui/react";
 import { classNames } from "../../util/class-names";
 
 const itemIntents = {
-    neutral: "text-neutral-700 fill-neutral-700 hover:bg-primary-100",
+    neutral: "text-neutral-700 fill-neutral-700 hover:bg-neutral-100",
     danger: "text-danger-500 fill-danger-500 hover:bg-danger-100",
 };
 
@@ -18,6 +18,7 @@ export interface PopoverMenuPanelButtonProps {
     Icon?: React.ComponentType<{ className: string }>;
     variant?: keyof typeof itemIntents;
     selected?: boolean;
+    disabled?: boolean;
 }
 
 export const PopoverMenuPanelButton = ({
@@ -26,6 +27,7 @@ export const PopoverMenuPanelButton = ({
     Icon,
     variant = "neutral",
     selected,
+    disabled,
 }: PopoverMenuPanelButtonProps) => {
     return (
         <HeadlessUiPopoverButton
@@ -34,9 +36,11 @@ export const PopoverMenuPanelButton = ({
                 itemIntents[variant],
                 selected && activeItemIntents[variant],
                 selected &&
-                    "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md"
+                    "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md",
+                disabled &&
+                    "cursor-not-allowed bg-neutral-100 fill-neutral-400 text-neutral-500 hover:bg-neutral-100 hover:fill-neutral-400 hover:text-neutral-500 focus:ring-0"
             )}
-            onClick={onClick}
+            onClick={disabled ? undefined : onClick}
         >
             {Icon && <Icon className={classNames("h-3.5 w-3.5")} />}
             {children}
diff --git a/src/components/popover-menu/popover-menu-panel-item.tsx b/src/components/popover-menu/popover-menu-panel-item.tsx
index bb3faeeb..1e7a1e50 100644
--- a/src/components/popover-menu/popover-menu-panel-item.tsx
+++ b/src/components/popover-menu/popover-menu-panel-item.tsx
@@ -2,13 +2,14 @@ import React from "react";
 import { classNames } from "../../util/class-names";
 
 const itemIntents = {
-    neutral: "text-neutral-700 fill-neutral-700 hover:bg-primary-100",
-    danger: "text-danger-500 fill-danger-500 hover:bg-danger-100",
+    neutral: "text-neutral-700 fill-neutral-700 hover:bg-neutral-100",
+    danger: "text-danger-500 fill-danger-500 hover:bg-danger-50",
 };
 
 const selectedItemIntents = {
-    neutral: "bg-primary-100 fill-primary-400 text-primary-400 before:bg-primary-400",
-    danger: "bg-danger-100 fill-danger-400 text-danger-500 before:bg-danger-400",
+    neutral:
+        "bg-primary-100 fill-primary-400 text-primary-400 before:bg-primary-400 hover:text-primary-400 hover:fill-primary-400 hover:bg-primary-100",
+    danger: "bg-danger-100 fill-danger-700 text-danger-500 before:bg-danger-400 hover:text-danger-500 hover:fill-danger-400 hover:bg-danger-100",
 };
 
 export interface PopoverMenuPanelItemProps {
@@ -17,6 +18,7 @@ export interface PopoverMenuPanelItemProps {
     Icon?: React.ComponentType<{ className: string }>;
     variant?: keyof typeof itemIntents;
     selected?: boolean;
+    disabled?: boolean;
 }
 
 export const PopoverMenuPanelItem = ({
@@ -25,6 +27,7 @@ export const PopoverMenuPanelItem = ({
     Icon,
     variant = "neutral",
     selected,
+    disabled,
 }: PopoverMenuPanelItemProps) => {
     return (
         <div
@@ -33,11 +36,13 @@ export const PopoverMenuPanelItem = ({
                 itemIntents[variant],
                 selected && selectedItemIntents[variant],
                 selected &&
-                    "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md"
+                    "before:absolute before:left-0 before:top-0 before:h-full before:w-0.5 before:rounded-r-md",
+                disabled &&
+                    "cursor-not-allowed bg-neutral-100 fill-neutral-400 text-neutral-500 hover:bg-neutral-100 hover:fill-neutral-400 hover:text-neutral-500 focus:ring-0"
             )}
-            onClick={onClick}
+            onClick={disabled ? undefined : onClick}
+            onKeyDown={disabled ? undefined : onClick}
             role="menuitem"
-            onKeyDown={onClick}
             tabIndex={0}
         >
             {Icon && <Icon className={classNames("h-3.5 w-3.5")} />}
diff --git a/src/components/popover-menu/popover-menu.stories.tsx b/src/components/popover-menu/popover-menu.stories.tsx
index fdfea675..3bcbd964 100644
--- a/src/components/popover-menu/popover-menu.stories.tsx
+++ b/src/components/popover-menu/popover-menu.stories.tsx
@@ -39,7 +39,9 @@ export const Default: Story = {
                             Activate Mfa
                         </PopoverMenu.Panel.Item>
 
-                        <PopoverMenu.Panel.Item Icon={ChatIcon}>Support</PopoverMenu.Panel.Item>
+                        <PopoverMenu.Panel.Item Icon={ChatIcon} disabled>
+                            Support
+                        </PopoverMenu.Panel.Item>
 
                         <PopoverMenu.Panel.Divider />